klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 13:25:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the Khoj Obsidian plugin more user theme friendly

Browse Source 
Use the CSS variables from the theme for the Khoj UI components
This commit is contained in:
sabaimran
2024-06-19 12:20:44 +05:30
committed by Debanjum Singh Solanky
parent d6fe5d9a63
commit c4a1ae9375
3 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/interface/obsidian/src/utils.ts
View File

@@ -226,7 +226,7 @@ export async function populateHeaderPane(headerEl: Element, setting: KhojSetting
// Add Khoj title to header element // Add Khoj title to header element
const titleEl = headerEl.createDiv(); const titleEl = headerEl.createDiv();
titleEl.className = 'khoj-logo'; titleEl.className = 'khoj-logo';
titleEl.textContent = "KHOJ" titleEl.textContent = "Khoj"
// Populate the header element with the navigation pane // Populate the header element with the navigation pane
// Create the nav element // Create the nav element

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

@@ -74,16 +74,17 @@ If your plugin does not need CSS, delete this file.
padding: 10px; padding: 10px;
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: 80%;
text-align: left; text-align: left;
user-select: text; user-select: text;
color: var(--text-normal);
} }
/* color chat bubble by khoj blue */ /* color chat bubble by khoj blue */
.khoj-chat-message-text.khoj { .khoj-chat-message-text.khoj {
color: var(--khoj-storm-grey); color: var(--text-normal);
background: var(--khoj-winter-sun);
margin-left: auto; margin-left: auto;
white-space: pre-line; white-space: pre-line;
background-color: var(--code-background);
/* background-color: var(--background-modifier-active-hover); */
} }
/* add left protrusion to khoj chat bubble */ /* add left protrusion to khoj chat bubble */
.khoj-chat-message-text.khoj:after { .khoj-chat-message-text.khoj:after {
@@ -92,14 +93,12 @@ If your plugin does not need CSS, delete this file.
bottom: -2px; bottom: -2px;
left: -7px; left: -7px;
border: 10px solid transparent; border: 10px solid transparent;
border-top-color: var(--khoj-winter-sun);
border-bottom: 0; border-bottom: 0;
transform: rotate(-60deg); transform: rotate(-60deg);
} }
/* color chat bubble by you dark grey */ /* color chat bubble by you dark grey */
.khoj-chat-message-text.you { .khoj-chat-message-text.you {
color: var(--text-on-accent); color: var(--text-normal);
background: var(--khoj-storm-grey);
margin-right: auto; margin-right: auto;
} }
/* add right protrusion to you chat bubble */ /* add right protrusion to you chat bubble */
@@ -109,7 +108,6 @@ If your plugin does not need CSS, delete this file.
top: 91%; top: 91%;
right: -2px; right: -2px;
border: 10px solid transparent; border: 10px solid transparent;
border-left-color: var(--khoj-storm-grey);
border-right: 0; border-right: 0;
margin-top: -10px; margin-top: -10px;
transform: rotate(-60deg) transform: rotate(-60deg)
@@ -488,7 +486,7 @@ div.khoj-logo {
} }
.khoj-nav a { .khoj-nav a {
color: var(--main-text-color); color: var(--text-normal);
text-decoration: none; text-decoration: none;
font-size: small; font-size: small;
font-weight: normal; font-weight: normal;
@@ -498,11 +496,11 @@ div.khoj-logo {
margin: 0; margin: 0;
} }
.khoj-nav a:hover { .khoj-nav a:hover {
background-color: var(--khoj-sun); background-color: var(--background-modifier-active-hover);
color: var(--main-text-color); color: var(--main-text-color);
} }
a.khoj-nav-selected { a.khoj-nav-selected {
background-color: var(--khoj-winter-sun); background-color: var(--background-modifier-active-hover);
} }
#similar-nav-icon-svg, #similar-nav-icon-svg,
.khoj-nav-icon { .khoj-nav-icon {
@@ -542,12 +540,7 @@ img.copy-icon {
width: 16px; width: 16px;
height: 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 { .you button.copy-button:hover {
color: var(--khoj-storm-grey); color: var(--khoj-storm-grey);
background: var(--text-on-accent); background: var(--text-on-accent);

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" resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.47.tgz#e0da6c244f497192f951807f003f6a423ed23188"
integrity sha512-R6oaW0y5/u6Eccti/TS6c/2c1xYTb1izwK3gajJwi4vIfNs1s8B1dQzI1UiC9T61YovOQVuePDcfqHLT3mUZJA== 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: esbuild-darwin-arm64@0.14.47:
version "0.14.47" version "0.14.47"
resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.47.tgz#cd40fd49a672fca581ed202834239dfe540a9028" resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.47.tgz#cd40fd49a672fca581ed202834239dfe540a9028"