Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-19 17:08:10 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

🅰️ feat: Dynamic Font Size (#3568)

Browse source 
* wip: general setup

* added: translations for font-size

* fix: prompts related linter errors and add theming

* wip: font size selector

* refactor: Update FontSizeSelector options display property

* refactor: adjust Intersection Observer threshold and debounce rate

* feat: Update selectedPrompt type in PromptForm to be optional

* feat: dynamic font size

* refactor: Update message font size in navigation bar

* refactor: Update code analyze block styling

* refactor: ProgressText dynamic font size

* refactor: move FontSizeSelector component to Chat from General settings

* fix: HoverButtons styling for better visibility

* refactor: Update HoverButtons styling for better visibility

---------

Co-authored-by: kraken <solodarken@gmail.com>
This commit is contained in:
Danny Avila 2024-08-07 14:23:33 -04:00 • committed by GitHub
parent b390ba781f
commit 2bb0842650
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
44 changed files with 340 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

74
client/src/style.css
View file

@ -20,7 +20,12 @@
--gray-900: #0d0d0d;
--gizmo-gray-500:#999;
--gizmo-gray-600:#666;
--gizmo-gray-950:#0f0f0f
--gizmo-gray-950:#0f0f0f;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
}
html {
--text-primary:var(--gray-800);
@ -570,9 +575,12 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
}
.prose {
color:var(--tw-prose-body);
max-width:65ch
}
color: var(--tw-prose-body);
max-width: 65ch;
font-size: var(--markdown-font-size, var(--font-size-base));
line-height: calc(28px * var(--markdown-font-size, var(--font-size-base)) / var(--font-size-base));
}
.prose :where([class~=lead]):not(:where([class~=not-prose] *)) {
color:var(--tw-prose-lead);
font-size:1.25em;
@ -1234,11 +1242,15 @@ html {
.markdown {
max-width: none;
font-size: var(--markdown-font-size, var(--font-size-base));
line-height: calc(28px * var(--markdown-font-size, var(--font-size-base)) / var(--font-size-base));
}
.markdown h1,
.markdown h1 {
font-size: calc(var(--markdown-font-size) * 1.75);
}
.markdown h2 {
font-weight: 600;
font-size: calc(var(--markdown-font-size) * 1.5);
}
.markdown h2 {
@ -1248,6 +1260,7 @@ html {
.markdown h3 {
font-weight: 600;
font-size: calc(var(--markdown-font-size) * 1.25);
}
.markdown h3,
@ -1258,10 +1271,12 @@ html {
.markdown h4 {
font-weight: 400;
font-size: calc(var(--markdown-font-size) * 1.1);
}
.markdown h5 {
font-weight: 600;
font-size: var(--markdown-font-size);
}
.markdown blockquote {
@ -1495,8 +1510,8 @@ html {
}
.markdown ul li:before {
content:"•";
font-size:.875rem;
line-height:1.25rem;
font-size: calc(var(--markdown-font-size) * 0.875);
line-height: calc(var(--markdown-font-size) * 1.25);
margin-left:-1rem;
position:absolute
}
@ -1955,6 +1970,11 @@ ol ol):not(:where([class~=not-prose] *)) {
.markdown .prose ul:last-child {
margin-bottom:0
}
.markdown .prose p {
margin-bottom: 1rem;
margin-top: 1rem;
line-height: calc(28px * var(--markdown-font-size, var(--font-size-base)) / var(--font-size-base));
}
.markdown .prose ol,
.markdown .prose ul {
display:contents;
@ -2184,3 +2204,41 @@ ol ol):not(:where([class~=not-prose] *)) {
animation: moveUp 4s ease-in-out infinite;
}
.message-content {
font-size: var(--markdown-font-size, 1rem);
line-height: 1.75;
}
.message-content pre code {
font-size: calc(0.85 * var(--markdown-font-size, 1rem));
}
.message-content pre {
font-size: var(--markdown-font-size, 1rem);
}
.code-analyze-block pre code,
.code-analyze-block .overflow-y-auto code {
font-size: calc(0.85 * var(--markdown-font-size, 1rem));
}
.code-analyze-block pre,
.code-analyze-block .overflow-y-auto {
font-size: var(--markdown-font-size, 1rem);
}
.progress-text-wrapper {
font-size: var(--markdown-font-size, 1rem);
line-height: calc(1.25 * var(--markdown-font-size, 1rem));
}
.progress-text-content {
font-size: inherit;
line-height: inherit;
}
.progress-text-wrapper button {
font-size: inherit;
line-height: inherit;
}