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 @@
5555 --interactable-outline-color: var(--white100);
5656 --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
5963 /*Default Theme, will be changed by ToolCool Color Picker*/
6064 --SmartThemeBodyColor: rgb(220, 220, 210);
@@ -348,13 +352,13 @@ input[type='checkbox']:focus-visible {
348352
349353.mes_reasoning {
350354 display: block;
351355 border-left: 2px solid var(--SmartThemeEmColorreasoning-body-color);
352356 border-radius: 2px;
353357 padding: 5px;
354358 padding-left: 14px;
355359 margin-bottom: 0.5em;
356360 overflow-y: auto;
357- color: var(--SmartThemeEmColor);
361+ color: hsl(from var(--reasoning-body-color) h calc(s * var(--reasoning-saturation)) l);
358362}
359363
360364.mes_reasoning_details {
@@ -374,18 +378,6 @@ input[type='checkbox']:focus-visible {
374378 margin-bottom: 0;
375379}
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-
389381.mes_reasoning_header_block {
390382 flex-grow: 1;
391383}
@@ -461,26 +453,36 @@ input[type='checkbox']:focus-visible {
461453}
462454
463455.mes_text i,
464456.mes_text em, {
457+ color: var(--SmartThemeEmColor);
458+}
465459.mes_reasoning i,
466460.mes_reasoning em {
467- color: var(--SmartThemeEmColor);
461+ color: hsl(from var(--reasoning-em-color) h calc(s * var(--reasoning-saturation)) l);
468462}
469463
470464.mes_text q i,
471465.mes_text q em {
472466 color: inherit;
473467}
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
475473.mes_text u, {
476-.mes_reasoning u {
477474 color: var(--SmartThemeUnderlineColor);
478475}
476+.mes_reasoning u {
477+ color: hsl(from var(--SmartThemeUnderlineColor) h calc(s * var(--reasoning-saturation)) l);
478+}
479479
480480.mes_text q, {
481-.mes_reasoning q {
482481 color: var(--SmartThemeQuoteColor);
483482}
483+.mes_reasoning q {
484+ color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
485+}
484486
485487.mes_text font[color] em,
486488.mes_text font[color] i,