Use hsl instead of color-mix for reasoning css

0cc0d6763ed95f9a0e331858838aef7f05c39c08

Wolfsblvt <wolfsblvt@gmail.com>

Parents: 29c71fe8f17edfcc37e66a37a2fa723221f63c10
1 files changed, +9 -8Ignore whitespace
public/style.css+9 -8
@@ -55,8 +55,9 @@
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-mix-rate: 50%;58 --reasoning-body-color: var(--SmartThemeEmColor);
59 --reasoning-mix-color: var(--grey30);59 --reasoning-em-color: color-mix(in srgb, var(--SmartThemeEmColor) 67%, var(--SmartThemeBlurTintColor) 33%);
60 --reasoning-saturation: 0.5;
6061
6162
62 /*Default Theme, will be changed by ToolCool Color Picker*/63 /*Default Theme, will be changed by ToolCool Color Picker*/
@@ -351,13 +352,13 @@ input[type='checkbox']:focus-visible {
351352
352.mes_reasoning {353.mes_reasoning {
353 display: block;354 display: block;
354 border-left: 2px solid var(--SmartThemeEmColor);355 border-left: 2px solid var(--reasoning-body-color);
355 border-radius: 2px;356 border-radius: 2px;
356 padding: 5px;357 padding: 5px;
357 padding-left: 14px;358 padding-left: 14px;
358 margin-bottom: 0.5em;359 margin-bottom: 0.5em;
359 overflow-y: auto;360 overflow-y: auto;
360 color: color-mix(in srgb, var(--SmartThemeBodyColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));361 color: hsl(from var(--reasoning-body-color) h calc(s * var(--reasoning-saturation)) l);
361}362}
362363
363.mes_reasoning_details {364.mes_reasoning_details {
@@ -457,7 +458,7 @@ input[type='checkbox']:focus-visible {
457}458}
458.mes_reasoning i,459.mes_reasoning i,
459.mes_reasoning em {460.mes_reasoning em {
460 color: color-mix(in srgb, var(--SmartThemeEmColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));461 color: hsl(from var(--reasoning-em-color) h calc(s * var(--reasoning-saturation)) l);
461}462}
462463
463.mes_text q i,464.mes_text q i,
@@ -466,21 +467,21 @@ input[type='checkbox']:focus-visible {
466}467}
467.mes_reasoning q i,468.mes_reasoning q i,
468.mes_reasoning q em {469.mes_reasoning q em {
469 color: color-mix(in srgb, var(--SmartThemeQuoteColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));470 color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
470}471}
471472
472.mes_text u {473.mes_text u {
473 color: var(--SmartThemeUnderlineColor);474 color: var(--SmartThemeUnderlineColor);
474}475}
475.mes_reasoning u {476.mes_reasoning u {
476 color: color-mix(in srgb, var(--SmartThemeUnderlineColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));477 color: hsl(from var(--SmartThemeUnderlineColor) h calc(s * var(--reasoning-saturation)) l);
477}478}
478479
479.mes_text q {480.mes_text q {
480 color: var(--SmartThemeQuoteColor);481 color: var(--SmartThemeQuoteColor);
481}482}
482.mes_reasoning q {483.mes_reasoning q {
483 color: color-mix(in srgb, var(--SmartThemeQuoteColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));484 color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
484}485}
485486
486.mes_text font[color] em,487.mes_text font[color] em,