klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 21:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use user theme in Obsidian for Khoj plugin styling (#825)

Browse Source 
Makes the Khoj chat in the Obsidian plugin adapt better to the user theme, making it feel more seamless, and helps with dark mode compatibility
This commit is contained in:
Debanjum
2024-06-26 10:14:17 +05:30
committed by GitHub
parent d6fe5d9a63 cfe46fd9f5
commit a25689fabf
3 changed files with 44 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/interface/obsidian/src/chat_view.ts
View File

@@ -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

101
src/interface/obsidian/styles.css
View File

@@ -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 */

15
src/interface/obsidian/yarn.lock
View File

@@ -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"