diff --git a/src/interface/obsidian/src/chat_view.ts b/src/interface/obsidian/src/chat_view.ts index e666e6be..4a4bf0ae 100644 --- a/src/interface/obsidian/src/chat_view.ts +++ b/src/interface/obsidian/src/chat_view.ts @@ -578,8 +578,7 @@ export class KhojChatView extends KhojPaneView { let editConversationTitleButtonEl = this.contentEl.createEl('button'); setIcon(editConversationTitleButtonEl, "edit"); editConversationTitleButtonEl.title = "Rename"; - editConversationTitleButtonEl.classList.add("edit-title-button"); - editConversationTitleButtonEl.classList.add("three-dot-menu-button-item"); + editConversationTitleButtonEl.classList.add("edit-title-button", "three-dot-menu-button-item", "clickable-icon"); if (selectedConversation) editConversationTitleButtonEl.classList.add("selected-conversation"); editConversationTitleButtonEl.addEventListener('click', (event) => { event.stopPropagation(); @@ -607,7 +606,7 @@ export class KhojChatView extends KhojPaneView { let editConversationTitleSaveButtonEl = this.contentEl.createEl('button'); conversationSessionTitleEl.replaceWith(editConversationTitleInputEl); editConversationTitleSaveButtonEl.innerHTML = "Save"; - editConversationTitleSaveButtonEl.classList.add("three-dot-menu-button-item"); + editConversationTitleSaveButtonEl.classList.add("three-dot-menu-button-item", "clickable-icon"); if (selectedConversation) editConversationTitleSaveButtonEl.classList.add("selected-conversation"); editConversationTitleSaveButtonEl.addEventListener('click', (event) => { event.stopPropagation(); @@ -654,8 +653,7 @@ export class KhojChatView extends KhojPaneView { let deleteConversationButtonEl = this.contentEl.createEl('button'); setIcon(deleteConversationButtonEl, "trash"); deleteConversationButtonEl.title = "Delete"; - deleteConversationButtonEl.classList.add("delete-conversation-button"); - deleteConversationButtonEl.classList.add("three-dot-menu-button-item"); + deleteConversationButtonEl.classList.add("delete-conversation-button", "three-dot-menu-button-item", "clickable-icon"); if (selectedConversation) deleteConversationButtonEl.classList.add("selected-conversation"); deleteConversationButtonEl.addEventListener('click', () => { // Ask for confirmation before deleting chat session diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css index 31314271..a79e0116 100644 --- a/src/interface/obsidian/styles.css +++ b/src/interface/obsidian/styles.css @@ -74,14 +74,14 @@ If your plugin does not need CSS, delete this file. padding: 10px; position: relative; display: inline-block; - max-width: 80%; text-align: left; user-select: text; + color: var(--text-normal); + background-color: var(--active-bg); } /* color chat bubble by khoj blue */ .khoj-chat-message-text.khoj { - color: var(--khoj-storm-grey); - background: var(--khoj-winter-sun); + border: 1px solid var(--khoj-sun); margin-left: auto; white-space: pre-line; } @@ -92,14 +92,12 @@ If your plugin does not need CSS, delete this file. bottom: -2px; left: -7px; border: 10px solid transparent; - border-top-color: var(--khoj-winter-sun); border-bottom: 0; transform: rotate(-60deg); } /* color chat bubble by you dark grey */ .khoj-chat-message-text.you { - color: var(--text-on-accent); - background: var(--khoj-storm-grey); + border: 1px solid var(--color-accent); margin-right: auto; } /* add right protrusion to you chat bubble */ @@ -109,7 +107,6 @@ If your plugin does not need CSS, delete this file. top: 91%; right: -2px; border: 10px solid transparent; - border-left-color: var(--khoj-storm-grey); border-right: 0; margin-top: -10px; transform: rotate(-60deg) @@ -160,9 +157,8 @@ div.expanded.reference-section { margin: 10px 0; } button.reference-button { - background: var(--khoj-winter-sun); - color: var(--khoj-storm-grey); border: 1px solid var(--khoj-storm-grey); + background-color: transparent; border-radius: 5px; padding: 4px; font-size: 14px; @@ -202,8 +198,7 @@ button.reference-button[aria-expanded="true"]::before { transform: rotate(90deg); } button.reference-expand-button { - background: var(--khoj-winter-sun); - color: var(--khoj-storm-grey); + background-color: transparent; border: 1px solid var(--khoj-storm-grey); border-radius: 5px; padding: 8px; @@ -216,8 +211,8 @@ button.reference-expand-button { text-align: left; } button.reference-expand-button:hover { - background: var(--khoj-sun); - color: var(--khoj-storm-grey); + background: var(--background-modifier-active-hover); + color: var(--text-normal); } a.inline-chat-link { color: #475569; @@ -229,15 +224,6 @@ a.inline-chat-link { border-bottom: 1px dotted var(--khoj-storm-grey); } -button.copy-button { - display: block; - border-radius: 4px; - background-color: var(--color-base-00); -} -button.copy-button:hover { - background: #f5f5f5; - cursor: pointer; -} img { max-width: 60%; } @@ -270,19 +256,8 @@ div.conversation-session { grid-template-columns: 1fr auto; } -.three-dot-menu { - display: block; - /* background: var(--background-color); */ - /* border: 1px solid var(--main-text-color); */ - border-radius: 5px; - /* position: relative; */ -} - -button.selected-conversation { - background: var(--khoj-winter-sun); -} button.three-dot-menu-button-item { - color: var(--color-base-90); + color: var(--text-accent); border: none; box-shadow: none; font-size: 14px; @@ -296,26 +271,7 @@ button.three-dot-menu-button-item { } button.three-dot-menu-button-item:hover { - background: var(--khoj-storm-grey); - color: var(--khoj-winter-sun); -} - -.three-dot-menu-button { - background: var(--khoj-winter-sun); - border: none; - box-shadow: none; - font-size: 14px; - font-weight: 300; - line-height: 1.5em; - cursor: pointer; - transition: background 0.3s ease-in-out; - font-family: var(--font-family); - border-radius: 4px; - right: 0; -} - -.conversation-button:hover .three-dot-menu { - display: block; + background: var(--background-modifier-active-hover); } div.conversation-menu { @@ -325,13 +281,15 @@ div.conversation-menu { text-align: right; border-radius: 5px; padding: 5px; + display: grid; + grid-gap: 4px; + grid-auto-flow: column; } div.conversation-session:hover { transform: scale(1.03); } div.selected-conversation { - background: var(--khoj-winter-sun) !important; - color: var(--khoj-storm-grey) !important; + background: var(--background-modifier-active-hover) !important; } #khoj-chat-footer { @@ -373,9 +331,8 @@ div.selected-conversation { position: relative; } #khoj-chat-send .lucide-arrow-up-circle { - background: var(--khoj-sun); + background: var(--background-modifier-active-hover); border-radius: 50%; - color: #222; } #khoj-chat-send .lucide-stop-circle { transform: rotateY(-180deg) rotateZ(-90deg); @@ -488,7 +445,7 @@ div.khoj-logo { } .khoj-nav a { - color: var(--main-text-color); + color: var(--text-normal); text-decoration: none; font-size: small; font-weight: normal; @@ -498,11 +455,11 @@ div.khoj-logo { margin: 0; } .khoj-nav a:hover { - background-color: var(--khoj-sun); + background-color: var(--background-modifier-active-hover); color: var(--main-text-color); } a.khoj-nav-selected { - background-color: var(--khoj-winter-sun); + background-color: var(--background-modifier-active-hover); } #similar-nav-icon-svg, .khoj-nav-icon { @@ -521,9 +478,11 @@ span.khoj-nav-item-text { /* Copy button */ button.copy-button { + display: block; border-radius: 4px; - background-color: var(--background-color); - border: 1px solid var(--main-text-color); + color: var(--text-muted); + background-color: transparent; + border: 1px solid var(--khoj-storm-grey); text-align: center; font-size: 16px; transition: all 0.5s; @@ -542,18 +501,10 @@ img.copy-icon { width: 16px; height: 16px; } -.you button.copy-button { - color: var(--text-on-accent); -} -.khoj button.copy-button { - color: var(--khoj-storm-grey); -} -.you button.copy-button:hover { - color: var(--khoj-storm-grey); - background: var(--text-on-accent); -} -.khoj button.copy-button:hover { - background: var(--text-on-accent); + +button.copy-button:hover { + background-color: var(--background-modifier-active-hover); + color: var(--text-normal); } /* Loading Spinner */ diff --git a/src/interface/obsidian/yarn.lock b/src/interface/obsidian/yarn.lock index 8fd89209..14af6b3e 100644 --- a/src/interface/obsidian/yarn.lock +++ b/src/interface/obsidian/yarn.lock @@ -215,6 +215,21 @@ esbuild-darwin-64@0.14.47: resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.47.tgz#e0da6c244f497192f951807f003f6a423ed23188" integrity sha512-R6oaW0y5/u6Eccti/TS6c/2c1xYTb1izwK3gajJwi4vIfNs1s8B1dQzI1UiC9T61YovOQVuePDcfqHLT3mUZJA== +esbuild-android-64@0.14.47: + version "0.14.47" + resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.47.tgz#ef95b42c67bcf4268c869153fa3ad1466c4cea6b" + integrity sha512-R13Bd9+tqLVFndncMHssZrPWe6/0Kpv2/dt4aA69soX4PRxlzsVpCvoJeFE8sOEoeVEiBkI0myjlkDodXlHa0g== + +esbuild-android-arm64@0.14.47: + version "0.14.47" + resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.47.tgz#4ebd7ce9fb250b4695faa3ee46fd3b0754ecd9e6" + integrity sha512-OkwOjj7ts4lBp/TL6hdd8HftIzOy/pdtbrNA4+0oVWgGG64HrdVzAF5gxtJufAPOsEjkyh1oIYvKAUinKKQRSQ== + +esbuild-darwin-64@0.14.47: + version "0.14.47" + resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.47.tgz#e0da6c244f497192f951807f003f6a423ed23188" + integrity sha512-R6oaW0y5/u6Eccti/TS6c/2c1xYTb1izwK3gajJwi4vIfNs1s8B1dQzI1UiC9T61YovOQVuePDcfqHLT3mUZJA== + esbuild-darwin-arm64@0.14.47: version "0.14.47" resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.47.tgz#cd40fd49a672fca581ed202834239dfe540a9028"