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

Fix multilingual font rendering (#797)

Browse Source 
* Fix multilingual font rendering; fallback to an Arabic language font which contains more Asian characters. Close #756

* Tune font-sizes and styling to accomodate new fonts with old sizing

- Move connection-status styling out from inline html into css block
- Remove start typing chat-input height jitter
- align new-conversation button, text
- use relative font sizes instead of absolute font sizes in most places

---------

Co-authored-by: Debanjum Singh Solanky <debanjum@gmail.com>
This commit is contained in:
sabaimran
2024-06-07 11:53:47 +05:30
committed by GitHub
parent ba16afd3c2
commit 58a02f06ea
3 changed files with 52 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/interface/desktop/assets/khoj.css
View File

@@ -1,6 +1,6 @@
/* Amber Light scheme (Default) */ /* Amber Light scheme (Default) */
/* Can be forced with data-theme="light" */ /* Can be forced with data-theme="light" */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
@@ -14,7 +14,7 @@
--water: #44b9da; --water: #44b9da;
--leaf: #7b990a; --leaf: #7b990a;
--flower: #d1684e; --flower: #d1684e;
--font-family: 'Tajawal', sans-serif !important; --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
} }
/* Amber Dark scheme (Auto) */ /* Amber Dark scheme (Auto) */
@@ -31,7 +31,7 @@
--water: #44b9da; --water: #44b9da;
--leaf: #7b990a; --leaf: #7b990a;
--flower: #d1684e; --flower: #d1684e;
--font-family: 'Tajawal', sans-serif !important; --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
} }
} }
/* Amber Dark scheme (Forced) */ /* Amber Dark scheme (Forced) */
@@ -47,7 +47,7 @@
--water: #44b9da; --water: #44b9da;
--leaf: #7b990a; --leaf: #7b990a;
--flower: #d1684e; --flower: #d1684e;
--font-family: 'Tajawal', sans-serif !important; --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
} }
/* Amber (Common styles) */ /* Amber (Common styles) */
:root { :root {
@@ -55,7 +55,7 @@
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse); --switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary); --switch-checked-background-color: var(--primary);
--font-family: 'Tajawal', sans-serif !important; --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
} }
.khoj-configure { .khoj-configure {

18
src/khoj/interface/web/assets/khoj.css
View File

@@ -1,6 +1,6 @@
/* Amber Light scheme (Default) */ /* Amber Light scheme (Default) */
/* Can be forced with data-theme="light" */ /* Can be forced with data-theme="light" */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
@@ -15,7 +15,7 @@
--water: #44b9da; --water: #44b9da;
--leaf: #7b990a; --leaf: #7b990a;
--flower: #ffaeae; --flower: #ffaeae;
--font-family: 'Tajawal', sans-serif !important; --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
} }
/* Amber Dark scheme (Auto) */ /* Amber Dark scheme (Auto) */
@@ -33,7 +33,7 @@
--water: #44b9da; --water: #44b9da;
--leaf: #7b990a; --leaf: #7b990a;
--flower: #ffaeae; --flower: #ffaeae;
--font-family: 'Tajawal', sans-serif !important; --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
} }
} }
/* Amber Dark scheme (Forced) */ /* Amber Dark scheme (Forced) */
@@ -50,7 +50,7 @@
--water: #44b9da; --water: #44b9da;
--leaf: #7b990a; --leaf: #7b990a;
--flower: #ffaeae; --flower: #ffaeae;
--font-family: 'Tajawal', sans-serif !important; --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
} }
/* Amber (Common styles) */ /* Amber (Common styles) */
:root { :root {
@@ -58,7 +58,7 @@
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse); --switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary); --switch-checked-background-color: var(--primary);
--font-family: 'Tajawal', sans-serif !important; --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
} }
.khoj-configure { .khoj-configure {
@@ -102,7 +102,7 @@ a.khoj-logo {
.khoj-nav a { .khoj-nav a {
color: var(--main-text-color); color: var(--main-text-color);
text-decoration: none; text-decoration: none;
font-size: 20px; font-size: medium;
font-weight: normal; font-weight: normal;
padding: 0 4px; padding: 0 4px;
border-radius: 4px; border-radius: 4px;
@@ -124,7 +124,6 @@ a.khoj-logo {
height: 30px; height: 30px;
} }
span.khoj-nav-item-text { span.khoj-nav-item-text {
padding-top: 6px;
padding-left: 8px; padding-left: 8px;
} }
img.khoj-logo { img.khoj-logo {
@@ -191,11 +190,10 @@ img.khoj-logo {
display: grid; display: grid;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 20px; font-size: large;
box-sizing: unset; box-sizing: unset;
width: 40px; width: 40px;
height: 35px; height: 40px;
padding-top: 8px
} }
.subscribed { .subscribed {
border: 3px solid var(--primary-hover); border: 3px solid var(--primary-hover);

60
src/khoj/interface/web/chat.html
View File

@@ -787,7 +787,7 @@ To get started, just start typing below. You can also type / to see a list of co
const textarea = document.getElementById('chat-input'); const textarea = document.getElementById('chat-input');
const scrollTop = textarea.scrollTop; const scrollTop = textarea.scrollTop;
textarea.style.height = '0'; textarea.style.height = '0';
const scrollHeight = textarea.scrollHeight + 8; // +8 accounts for padding const scrollHeight = textarea.scrollHeight + 16; // +8 accounts for padding
textarea.style.height = Math.min(scrollHeight, 200) + 'px'; textarea.style.height = Math.min(scrollHeight, 200) + 'px';
textarea.scrollTop = scrollTop; textarea.scrollTop = scrollTop;
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
@@ -1081,7 +1081,6 @@ To get started, just start typing below. You can also type / to see a list of co
let statusDotIcon = document.getElementById("connection-status-icon"); let statusDotIcon = document.getElementById("connection-status-icon");
statusDotIcon.style.backgroundColor = "green"; statusDotIcon.style.backgroundColor = "green";
let statusDotText = document.getElementById("connection-status-text"); let statusDotText = document.getElementById("connection-status-text");
statusDotText.style.marginTop = "10px";
statusDotText.textContent = "Connected to Server"; statusDotText.textContent = "Connected to Server";
} }
} }
@@ -2070,9 +2069,9 @@ To get started, just start typing below. You can also type / to see a list of co
<div id="conversation-list-body"></div> <div id="conversation-list-body"></div>
</div> </div>
</div> </div>
<div id="connection-status" class="inline-chat-link" style="display: flex; align-items: center; border-top: 1px solid black;"> <div id="connection-status" class="inline-chat-link">
<div id="connection-status-icon" style="width: 10px; height: 10px; border-radius: 50%; margin-right: 5px;"></div> <div id="connection-status-icon"></div>
<div id="connection-status-text" style="margin: 5px;"></div> <div id="connection-status-text"></div>
</div> </div>
<div style="border-top: 1px solid black; "> <div style="border-top: 1px solid black; ">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; margin-top: 5px;"> <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; margin-top: 5px;">
@@ -2221,9 +2220,9 @@ To get started, just start typing below. You can also type / to see a list of co
color: var(--main-text-color); color: var(--main-text-color);
text-align: center; text-align: center;
font-family: var(--font-family); font-family: var(--font-family);
font-size: medium; font-size: small;
font-weight: 300; font-weight: 300;
line-height: 1.5em; line-height: 2em;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
} }
@@ -2444,7 +2443,7 @@ To get started, just start typing below. You can also type / to see a list of co
#chat-body { #chat-body {
height: 100%; height: 100%;
font-size: medium; font-size: 1.1em;
margin: 0px; margin: 0px;
line-height: 20px; line-height: 20px;
overflow-y: scroll; overflow-y: scroll;
@@ -2623,7 +2622,7 @@ To get started, just start typing below. You can also type / to see a list of co
overflow-y: hidden; overflow-y: hidden;
max-height: 200px; max-height: 200px;
box-sizing: border-box; box-sizing: border-box;
padding: 4px 0 0 12px; padding: 8px 0 0 12px;
line-height: 1.5em; line-height: 1.5em;
margin: 0; margin: 0;
} }
@@ -2635,7 +2634,7 @@ To get started, just start typing below. You can also type / to see a list of co
border: none; border: none;
box-shadow: none; box-shadow: none;
border-radius: 50%; border-radius: 50%;
font-size: 14px; font-size: small;
font-weight: 300; font-weight: 300;
line-height: 1.5em; line-height: 1.5em;
cursor: pointer; cursor: pointer;
@@ -2650,7 +2649,7 @@ To get started, just start typing below. You can also type / to see a list of co
background: none; background: none;
border: none; border: none;
box-shadow: none; box-shadow: none;
font-size: 14px; font-size: small;
font-weight: 300; font-weight: 300;
line-height: 1.5em; line-height: 1.5em;
cursor: pointer; cursor: pointer;
@@ -2739,7 +2738,7 @@ To get started, just start typing below. You can also type / to see a list of co
background-color: var(--background-color); background-color: var(--background-color);
border: 1px solid var(--main-text-color); border: 1px solid var(--main-text-color);
text-align: center; text-align: center;
font-size: 16px; font-size: medium;
transition: all 0.5s; transition: all 0.5s;
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
@@ -2751,7 +2750,7 @@ To get started, just start typing below. You can also type / to see a list of co
background-color: var(--background-color); background-color: var(--background-color);
border: 1px solid var(--main-text-color); border: 1px solid var(--main-text-color);
text-align: center; text-align: center;
font-size: 16px; font-size: medium;
transition: all 0.5s; transition: all 0.5s;
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
@@ -2764,7 +2763,7 @@ To get started, just start typing below. You can also type / to see a list of co
background-color: var(--background-color); background-color: var(--background-color);
border: 1px solid var(--main-text-color); border: 1px solid var(--main-text-color);
text-align: center; text-align: center;
font-size: 16px; font-size: medium;
transition: all 0.5s; transition: all 0.5s;
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
@@ -2832,7 +2831,7 @@ To get started, just start typing below. You can also type / to see a list of co
color: #f8fafc; color: #f8fafc;
border-radius: 2px; border-radius: 2px;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4); box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4);
font-size: 14px; font-size: small;
padding: 2px 4px; padding: 2px 4px;
} }
} }
@@ -2903,6 +2902,7 @@ To get started, just start typing below. You can also type / to see a list of co
svg.new-convo-button { svg.new-convo-button {
width: 20px; width: 20px;
margin-left: 5px; margin-left: 5px;
margin-top: 2px;
} }
svg.file-toggle-button:hover { svg.file-toggle-button:hover {
@@ -2913,7 +2913,8 @@ To get started, just start typing below. You can also type / to see a list of co
div#new-conversation { div#new-conversation {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
font-size: large; grid-template-columns: 1fr auto;
font-size: medium;
text-align: left; text-align: left;
border-bottom: 1px solid var(--main-text-color); border-bottom: 1px solid var(--main-text-color);
margin-top: 8px; margin-top: 8px;
@@ -2922,9 +2923,9 @@ To get started, just start typing below. You can also type / to see a list of co
button#copy-share-url-button, button#copy-share-url-button,
button#new-conversation-button { button#new-conversation-button {
display: inline-flex; display: grid;
align-items: center; grid-auto-flow: column;
justify-self: end; margin-top: 2px;
} }
div.conversation-button { div.conversation-button {
@@ -2933,9 +2934,9 @@ To get started, just start typing below. You can also type / to see a list of co
border: 1px solid var(--main-text-color); border: 1px solid var(--main-text-color);
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
font-size: 14px; font-size: small;
font-weight: 300; font-weight: 300;
line-height: 1.5em; line-height: 2em;
cursor: pointer; cursor: pointer;
transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out;
text-align: left; text-align: left;
@@ -3025,6 +3026,23 @@ To get started, just start typing below. You can also type / to see a list of co
} }
} }
#connection-status {
display: grid;
grid-auto-flow: column;
grid-template-columns: auto 1fr;
align-items: center;
border-top: 1px solid black;
}
#connection-status-icon {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}
#connection-status-text {
margin: 5px;
}
a.khoj-logo { a.khoj-logo {
text-align: center; text-align: center;
} }