Merge pull request #3530 from SillyTavern/reasoning-block-coloring Update reasoning block coloring to CSS vars

1ad3f3d6c7d063e497e869c63217a68913a53b8a

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed
Parents: e8cdad0bf2d71327215a5c723fba68a20cce2c07 0cc0d6763ed95f9a0e331858838aef7f05c39c08
1 files changed, +22 -20Showing whitespace changes
public/style.css+22 -20
@@ -55,6 +55,10 @@
55 --interactable-outline-color: var(--white100);55 --interactable-outline-color: var(--white100);
56 --interactable-outline-color-faint: var(--white20a);56 --interactable-outline-color-faint: var(--white20a);
5757
58 --reasoning-body-color: var(--SmartThemeEmColor);
59 --reasoning-em-color: color-mix(in srgb, var(--SmartThemeEmColor) 67%, var(--SmartThemeBlurTintColor) 33%);
60 --reasoning-saturation: 0.5;
61
5862
59 /*Default Theme, will be changed by ToolCool Color Picker*/63 /*Default Theme, will be changed by ToolCool Color Picker*/
60 --SmartThemeBodyColor: rgb(220, 220, 210);64 --SmartThemeBodyColor: rgb(220, 220, 210);
@@ -348,13 +352,13 @@ input[type='checkbox']:focus-visible {
348352
349.mes_reasoning {353.mes_reasoning {
350 display: block;354 display: block;
351 border-left: 2px solid var(--SmartThemeEmColor);355 border-left: 2px solid var(--reasoning-body-color);
352 border-radius: 2px;356 border-radius: 2px;
353 padding: 5px;357 padding: 5px;
354 padding-left: 14px;358 padding-left: 14px;
355 margin-bottom: 0.5em;359 margin-bottom: 0.5em;
356 overflow-y: auto;360 overflow-y: auto;
357 color: var(--SmartThemeEmColor);361 color: hsl(from var(--reasoning-body-color) h calc(s * var(--reasoning-saturation)) l);
358}362}
359363
360.mes_reasoning_details {364.mes_reasoning_details {
@@ -374,18 +378,6 @@ input[type='checkbox']:focus-visible {
374 margin-bottom: 0;378 margin-bottom: 0;
375}379}
376380
377.mes_reasoning em,
378.mes_reasoning i,
379.mes_reasoning u,
380.mes_reasoning q,
381.mes_reasoning blockquote {
382 filter: saturate(0.5);
383}
384
385.mes_reasoning_details .mes_reasoning em {
386 color: color-mix(in srgb, var(--SmartThemeEmColor) 67%, var(--SmartThemeBlurTintColor) 33%);
387}
388
389.mes_reasoning_header_block {381.mes_reasoning_header_block {
390 flex-grow: 1;382 flex-grow: 1;
391}383}
@@ -461,26 +453,36 @@ input[type='checkbox']:focus-visible {
461}453}
462454
463.mes_text i,455.mes_text i,
464.mes_text em,456.mes_text em {
457 color: var(--SmartThemeEmColor);
458}
465.mes_reasoning i,459.mes_reasoning i,
466.mes_reasoning em {460.mes_reasoning em {
467 color: var(--SmartThemeEmColor);461 color: hsl(from var(--reasoning-em-color) h calc(s * var(--reasoning-saturation)) l);
468}462}
469463
470.mes_text q i,464.mes_text q i,
471.mes_text q em {465.mes_text q em {
472 color: inherit;466 color: inherit;
473}467}
468.mes_reasoning q i,
469.mes_reasoning q em {
470 color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
471}
474472
475.mes_text u,473.mes_text u {
476.mes_reasoning u {
477 color: var(--SmartThemeUnderlineColor);474 color: var(--SmartThemeUnderlineColor);
478}475}
476.mes_reasoning u {
477 color: hsl(from var(--SmartThemeUnderlineColor) h calc(s * var(--reasoning-saturation)) l);
478}
479479
480.mes_text q,480.mes_text q {
481.mes_reasoning q {
482 color: var(--SmartThemeQuoteColor);481 color: var(--SmartThemeQuoteColor);
483}482}
483.mes_reasoning q {
484 color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
485}
484486
485.mes_text font[color] em,487.mes_text font[color] em,
486.mes_text font[color] i,488.mes_text font[color] i,