rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3530 from SillyTavern/reasoning-block-coloring

Browse Source 
Update reasoning block coloring to CSS vars
This commit is contained in:
Cohee
2025-02-21 20:53:05 +02:00
committed by GitHub
parent e8cdad0bf2 0cc0d6763e
commit 1ad3f3d6c7
1 changed files with 24 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
public/style.css
View File

@@ -55,6 +55,10 @@
--interactable-outline-color: var(--white100); --interactable-outline-color: var(--white100);
--interactable-outline-color-faint: var(--white20a); --interactable-outline-color-faint: var(--white20a);
--reasoning-body-color: var(--SmartThemeEmColor);
--reasoning-em-color: color-mix(in srgb, var(--SmartThemeEmColor) 67%, var(--SmartThemeBlurTintColor) 33%);
--reasoning-saturation: 0.5;
/*Default Theme, will be changed by ToolCool Color Picker*/ /*Default Theme, will be changed by ToolCool Color Picker*/
--SmartThemeBodyColor: rgb(220, 220, 210); --SmartThemeBodyColor: rgb(220, 220, 210);
@@ -348,13 +352,13 @@ input[type='checkbox']:focus-visible {
.mes_reasoning { .mes_reasoning {
display: block; display: block;
border-left: 2px solid var(--SmartThemeEmColor); border-left: 2px solid var(--reasoning-body-color);
border-radius: 2px; border-radius: 2px;
padding: 5px; padding: 5px;
padding-left: 14px; padding-left: 14px;
margin-bottom: 0.5em; margin-bottom: 0.5em;
overflow-y: auto; overflow-y: auto;
color: var(--SmartThemeEmColor); color: hsl(from var(--reasoning-body-color) h calc(s * var(--reasoning-saturation)) l);
} }
.mes_reasoning_details { .mes_reasoning_details {
@@ -374,18 +378,6 @@ input[type='checkbox']:focus-visible {
margin-bottom: 0; margin-bottom: 0;
} }
.mes_reasoning em,
.mes_reasoning i,
.mes_reasoning u,
.mes_reasoning q,
.mes_reasoning blockquote {
filter: saturate(0.5);
}
.mes_reasoning_details .mes_reasoning em {
color: color-mix(in srgb, var(--SmartThemeEmColor) 67%, var(--SmartThemeBlurTintColor) 33%);
}
.mes_reasoning_header_block { .mes_reasoning_header_block {
flex-grow: 1; flex-grow: 1;
} }
@@ -461,26 +453,36 @@ input[type='checkbox']:focus-visible {
} }
.mes_text i, .mes_text i,
.mes_text em, .mes_text em {
color: var(--SmartThemeEmColor);
}
.mes_reasoning i, .mes_reasoning i,
.mes_reasoning em { .mes_reasoning em {
color: var(--SmartThemeEmColor); color: hsl(from var(--reasoning-em-color) h calc(s * var(--reasoning-saturation)) l);
} }
.mes_text q i, .mes_text q i,
.mes_text q em { .mes_text q em {
color: inherit; color: inherit;
} }
.mes_reasoning q i,
.mes_text u, .mes_reasoning q em {
.mes_reasoning u { color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
color: var(--SmartThemeUnderlineColor);
} }
.mes_text q, .mes_text u {
.mes_reasoning q { color: var(--SmartThemeUnderlineColor);
}
.mes_reasoning u {
color: hsl(from var(--SmartThemeUnderlineColor) h calc(s * var(--reasoning-saturation)) l);
}
.mes_text q {
color: var(--SmartThemeQuoteColor); color: var(--SmartThemeQuoteColor);
} }
.mes_reasoning q {
color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
}
.mes_text font[color] em, .mes_text font[color] em,
.mes_text font[color] i, .mes_text font[color] i,