mirror of
https://github.com/khoj-ai/khoj.git
synced 2025-02-17 08:04:21 +00:00
Fix multilingual font rendering (#797)
* 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
GitHub
parent
ba16afd3c2
commit
58a02f06ea
3 changed files with 52 additions and 36 deletions
|
|
@ -1,6 +1,6 @@
|
|||
/* Amber Light scheme (Default) */
|
||||
/* 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"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
--water: #44b9da;
|
||||
--leaf: #7b990a;
|
||||
--flower: #d1684e;
|
||||
--font-family: 'Tajawal', sans-serif !important;
|
||||
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
||||
}
|
||||
|
||||
/* Amber Dark scheme (Auto) */
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
--water: #44b9da;
|
||||
--leaf: #7b990a;
|
||||
--flower: #d1684e;
|
||||
--font-family: 'Tajawal', sans-serif !important;
|
||||
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
||||
}
|
||||
}
|
||||
/* Amber Dark scheme (Forced) */
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
--water: #44b9da;
|
||||
--leaf: #7b990a;
|
||||
--flower: #d1684e;
|
||||
--font-family: 'Tajawal', sans-serif !important;
|
||||
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
||||
}
|
||||
/* Amber (Common styles) */
|
||||
:root {
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
--form-element-focus-color: var(--primary-focus);
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
--font-family: 'Tajawal', sans-serif !important;
|
||||
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
||||
}
|
||||
|
||||
.khoj-configure {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Amber Light scheme (Default) */
|
||||
/* 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"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
--water: #44b9da;
|
||||
--leaf: #7b990a;
|
||||
--flower: #ffaeae;
|
||||
--font-family: 'Tajawal', sans-serif !important;
|
||||
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
||||
}
|
||||
|
||||
/* Amber Dark scheme (Auto) */
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
--water: #44b9da;
|
||||
--leaf: #7b990a;
|
||||
--flower: #ffaeae;
|
||||
--font-family: 'Tajawal', sans-serif !important;
|
||||
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
||||
}
|
||||
}
|
||||
/* Amber Dark scheme (Forced) */
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
--water: #44b9da;
|
||||
--leaf: #7b990a;
|
||||
--flower: #ffaeae;
|
||||
--font-family: 'Tajawal', sans-serif !important;
|
||||
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
||||
}
|
||||
/* Amber (Common styles) */
|
||||
:root {
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
--form-element-focus-color: var(--primary-focus);
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
--font-family: 'Tajawal', sans-serif !important;
|
||||
--font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;
|
||||
}
|
||||
|
||||
.khoj-configure {
|
||||
|
|
@ -102,7 +102,7 @@ a.khoj-logo {
|
|||
.khoj-nav a {
|
||||
color: var(--main-text-color);
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
font-size: medium;
|
||||
font-weight: normal;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -124,7 +124,6 @@ a.khoj-logo {
|
|||
height: 30px;
|
||||
}
|
||||
span.khoj-nav-item-text {
|
||||
padding-top: 6px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
img.khoj-logo {
|
||||
|
|
@ -191,11 +190,10 @@ img.khoj-logo {
|
|||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
font-size: large;
|
||||
box-sizing: unset;
|
||||
width: 40px;
|
||||
height: 35px;
|
||||
padding-top: 8px
|
||||
height: 40px;
|
||||
}
|
||||
.subscribed {
|
||||
border: 3px solid var(--primary-hover);
|
||||
|
|
|
|||
|
|
@ -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 scrollTop = textarea.scrollTop;
|
||||
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.scrollTop = scrollTop;
|
||||
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");
|
||||
statusDotIcon.style.backgroundColor = "green";
|
||||
let statusDotText = document.getElementById("connection-status-text");
|
||||
statusDotText.style.marginTop = "10px";
|
||||
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>
|
||||
</div>
|
||||
<div id="connection-status" class="inline-chat-link" style="display: flex; align-items: center; border-top: 1px solid black;">
|
||||
<div id="connection-status-icon" style="width: 10px; height: 10px; border-radius: 50%; margin-right: 5px;"></div>
|
||||
<div id="connection-status-text" style="margin: 5px;"></div>
|
||||
<div id="connection-status" class="inline-chat-link">
|
||||
<div id="connection-status-icon"></div>
|
||||
<div id="connection-status-text"></div>
|
||||
</div>
|
||||
<div style="border-top: 1px solid black; ">
|
||||
<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);
|
||||
text-align: center;
|
||||
font-family: var(--font-family);
|
||||
font-size: medium;
|
||||
font-size: small;
|
||||
font-weight: 300;
|
||||
line-height: 1.5em;
|
||||
line-height: 2em;
|
||||
height: 100vh;
|
||||
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 {
|
||||
height: 100%;
|
||||
font-size: medium;
|
||||
font-size: 1.1em;
|
||||
margin: 0px;
|
||||
line-height: 20px;
|
||||
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;
|
||||
max-height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 0 0 12px;
|
||||
padding: 8px 0 0 12px;
|
||||
line-height: 1.5em;
|
||||
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;
|
||||
box-shadow: none;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
font-size: small;
|
||||
font-weight: 300;
|
||||
line-height: 1.5em;
|
||||
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;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
font-size: small;
|
||||
font-weight: 300;
|
||||
line-height: 1.5em;
|
||||
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);
|
||||
border: 1px solid var(--main-text-color);
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-size: medium;
|
||||
transition: all 0.5s;
|
||||
cursor: pointer;
|
||||
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);
|
||||
border: 1px solid var(--main-text-color);
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-size: medium;
|
||||
transition: all 0.5s;
|
||||
cursor: pointer;
|
||||
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);
|
||||
border: 1px solid var(--main-text-color);
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-size: medium;
|
||||
transition: all 0.5s;
|
||||
cursor: pointer;
|
||||
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;
|
||||
border-radius: 2px;
|
||||
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4);
|
||||
font-size: 14px;
|
||||
font-size: small;
|
||||
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 {
|
||||
width: 20px;
|
||||
margin-left: 5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
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 {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
font-size: large;
|
||||
grid-template-columns: 1fr auto;
|
||||
font-size: medium;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--main-text-color);
|
||||
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#new-conversation-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
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-radius: 5px;
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
font-size: small;
|
||||
font-weight: 300;
|
||||
line-height: 1.5em;
|
||||
line-height: 2em;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease-in-out;
|
||||
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 {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue