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 @@
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%;
59 --reasoning-mix-color: var(--grey30);
60
5861
59 /*Default Theme, will be changed by ToolCool Color Picker*/62 /*Default Theme, will be changed by ToolCool Color Picker*/
60 --SmartThemeBodyColor: rgb(220, 220, 210);63 --SmartThemeBodyColor: rgb(220, 220, 210);
@@ -354,7 +357,7 @@ input[type='checkbox']:focus-visible {
354 padding-left: 14px;357 padding-left: 14px;
355 margin-bottom: 0.5em;358 margin-bottom: 0.5em;
356 overflow-y: auto;359 overflow-y: auto;
357 color: var(--SmartThemeEmColor);360 color: color-mix(in srgb, var(--SmartThemeBodyColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
358}361}
359362
360.mes_reasoning_details {363.mes_reasoning_details {
@@ -374,18 +377,6 @@ input[type='checkbox']:focus-visible {
374 margin-bottom: 0;377 margin-bottom: 0;
375}378}
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
389.mes_reasoning_header_block {380.mes_reasoning_header_block {
390 flex-grow: 1;381 flex-grow: 1;
391}382}
@@ -461,26 +452,36 @@ input[type='checkbox']:focus-visible {
461}452}
462453
463.mes_text i,454.mes_text i,
464.mes_text em,455.mes_text em {
456 color: var(--SmartThemeEmColor);
457}
465.mes_reasoning i,458.mes_reasoning i,
466.mes_reasoning em {459.mes_reasoning em {
467 color: var(--SmartThemeEmColor);460 color: color-mix(in srgb, var(--SmartThemeEmColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
468}461}
469462
470.mes_text q i,463.mes_text q i,
471.mes_text q em {464.mes_text q em {
472 color: inherit;465 color: inherit;
473}466}
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
475.mes_text u,472.mes_text u {
476.mes_reasoning u {
477 color: var(--SmartThemeUnderlineColor);473 color: var(--SmartThemeUnderlineColor);
478}474}
475.mes_reasoning u {
476 color: color-mix(in srgb, var(--SmartThemeUnderlineColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
477}
479478
480.mes_text q,479.mes_text q {
481.mes_reasoning q {
482 color: var(--SmartThemeQuoteColor);480 color: var(--SmartThemeQuoteColor);
483}481}
482.mes_reasoning q {
483 color: color-mix(in srgb, var(--SmartThemeQuoteColor) var(--reasoning-mix-rate), var(--reasoning-mix-color));
484}
484485
485.mes_text font[color] em,486.mes_text font[color] em,
486.mes_text font[color] i,487.mes_text font[color] i,