Update reasoning block coloring to CSS vars

29c71fe8f17edfcc37e66a37a2fa723221f63c10

Wolfsblvt <wolfsblvt@gmail.com>

Parents: 4c7ede67f3ba2d937e4b9cb49c82031874ee3133
1 files changed, +20 -19Showing whitespace changes
public/style.css+20 -19
@@ -55,6 +55,9 @@
5555 --interactable-outline-color: var(--white100);
5656 --interactable-outline-color-faint: var(--white20a);
5757
58+ --reasoning-mix-rate: 50%;
59+ --reasoning-mix-color: var(--grey30);
60+
5861
5962 /*Default Theme, will be changed by ToolCool Color Picker*/
6063 --SmartThemeBodyColor: rgb(220, 220, 210);
@@ -354,7 +357,7 @@ input[type='checkbox']:focus-visible {
354357 padding-left: 14px;
355358 margin-bottom: 0.5em;
356359 overflow-y: auto;
357- color: var(--SmartThemeEmColor);
360+ color: color-mix(in srgb, var(--SmartThemeBodyColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
358361}
359362
360363.mes_reasoning_details {
@@ -374,18 +377,6 @@ input[type='checkbox']:focus-visible {
374377 margin-bottom: 0;
375378}
376379
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-
389380.mes_reasoning_header_block {
390381 flex-grow: 1;
391382}
@@ -461,26 +452,36 @@ input[type='checkbox']:focus-visible {
461452}
462453
463454.mes_text i,
464455.mes_text em, {
456+ color: var(--SmartThemeEmColor);
457+}
465458.mes_reasoning i,
466459.mes_reasoning em {
467- color: var(--SmartThemeEmColor);
460+ color: color-mix(in srgb, var(--SmartThemeEmColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
468461}
469462
470463.mes_text q i,
471464.mes_text q em {
472465 color: inherit;
473466}
467+.mes_reasoning q i,
468+.mes_reasoning q em {
469+ color: color-mix(in srgb, var(--SmartThemeQuoteColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
470+}
474471
475472.mes_text u, {
476-.mes_reasoning u {
477473 color: var(--SmartThemeUnderlineColor);
478474}
475+.mes_reasoning u {
476+ color: color-mix(in srgb, var(--SmartThemeUnderlineColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
477+}
479478
480479.mes_text q, {
481-.mes_reasoning q {
482480 color: var(--SmartThemeQuoteColor);
483481}
482+.mes_reasoning q {
483+ color: color-mix(in srgb, var(--SmartThemeQuoteColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
484+}
484485
485486.mes_text font[color] em,
486487.mes_text font[color] i,