Constrain toast colors to container

81e6697e349ee11d0ca773792c66e84708081fcf

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

Parents: 1aa7d1d5a57d31be11562f81145df10dec4253d5
1 files changed, +17 -9Ignore whitespace
public/style.css+17 -9
@@ -167,7 +167,8 @@ body {
167}167}
168168
169::-webkit-scrollbar-track:hover {169::-webkit-scrollbar-track:hover {
170 background-color: rgba(126, 126, 126, 0.2); /* Adaptive, but won't contrast with neutral-gray. */170 /* Adaptive, but won't contrast with neutral-gray. */
171 background-color: rgba(126, 126, 126, 0.2);
171}172}
172173
173::-webkit-scrollbar-thumb {174::-webkit-scrollbar-thumb {
@@ -247,6 +248,7 @@ table.responsiveTable {
247.has_hover_label .label_icon {248.has_hover_label .label_icon {
248 transition: opacity var(--animation-duration) ease, max-width var(--animation-duration) ease;249 transition: opacity var(--animation-duration) ease, max-width var(--animation-duration) ease;
249}250}
251
250.has_hover_label .label {252.has_hover_label .label {
251 transition: opacity var(--animation-duration-slow) ease, max-width var(--animation-duration-slow) ease;253 transition: opacity var(--animation-duration-slow) ease, max-width var(--animation-duration-slow) ease;
252 /* Prevent double gap on hidden icon */254 /* Prevent double gap on hidden icon */
@@ -257,6 +259,7 @@ table.responsiveTable {
257.has_hover_label .label {259.has_hover_label .label {
258 transition-delay: var(--animation-duration-slow);260 transition-delay: var(--animation-duration-slow);
259}261}
262
260.has_hover_label.fast .label_icon,263.has_hover_label.fast .label_icon,
261.has_hover_label.fast .label {264.has_hover_label.fast .label {
262 transition-delay: var(--animation-duration);265 transition-delay: var(--animation-duration);
@@ -503,6 +506,7 @@ input[type='checkbox']:focus-visible {
503.mes_text em {506.mes_text em {
504 color: var(--SmartThemeEmColor);507 color: var(--SmartThemeEmColor);
505}508}
509
506.mes_reasoning i,510.mes_reasoning i,
507.mes_reasoning em {511.mes_reasoning em {
508 color: hsl(from var(--reasoning-em-color) h calc(s * var(--reasoning-saturation)) l);512 color: hsl(from var(--reasoning-em-color) h calc(s * var(--reasoning-saturation)) l);
@@ -512,6 +516,7 @@ input[type='checkbox']:focus-visible {
512.mes_text q em {516.mes_text q em {
513 color: inherit;517 color: inherit;
514}518}
519
515.mes_reasoning q i,520.mes_reasoning q i,
516.mes_reasoning q em {521.mes_reasoning q em {
517 color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);522 color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
@@ -520,6 +525,7 @@ input[type='checkbox']:focus-visible {
520.mes_text u {525.mes_text u {
521 color: var(--SmartThemeUnderlineColor);526 color: var(--SmartThemeUnderlineColor);
522}527}
528
523.mes_reasoning u {529.mes_reasoning u {
524 color: hsl(from var(--SmartThemeUnderlineColor) h calc(s * var(--reasoning-saturation)) l);530 color: hsl(from var(--SmartThemeUnderlineColor) h calc(s * var(--reasoning-saturation)) l);
525}531}
@@ -527,6 +533,7 @@ input[type='checkbox']:focus-visible {
527.mes_text q {533.mes_text q {
528 color: var(--SmartThemeQuoteColor);534 color: var(--SmartThemeQuoteColor);
529}535}
536
530.mes_reasoning q {537.mes_reasoning q {
531 color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);538 color: hsl(from var(--SmartThemeQuoteColor) h calc(s * var(--reasoning-saturation)) l);
532}539}
@@ -3942,27 +3949,27 @@ body #toast-container>div {
3942 -ms-filter: unset;3949 -ms-filter: unset;
3943 padding: 5px 5px 10px 50px;3950 padding: 5px 5px 10px 50px;
3944 font-size: calc(var(--mainFontSize) * 0.9);3951 font-size: calc(var(--mainFontSize) * 0.9);
3945 width:300px;3952 width: 300px;
3946}3953}
39473954
3948.toast-success {3955body #toast-container .toast-success {
3949 background-color: #5d9e5d;3956 background-color: #5d9e5d;
3950}3957}
39513958
3952.toast-error {3959body #toast-container .toast-error {
3953 background-color: #a83c36;3960 background-color: #a83c36;
3954}3961}
39553962
3956.toast-info {3963body #toast-container .toast-info {
3957 background-color: #4092aa;3964 background-color: #4092aa;
3958}3965}
39593966
3960.toast-warning {3967body #toast-container .toast-warning {
3961 background-color: #e29325;3968 background-color: #e29325;
3962}3969}
39633970
3964button.toast-close-button {3971button.toast-close-button {
3965padding-right: 3px3972 padding-right: 3px
3966}3973}
39673974
3968#dialogue_del_mes {3975#dialogue_del_mes {
@@ -4052,6 +4059,7 @@ input[type='checkbox'].del_checkbox {
4052.avatar-container:not(.locked_to_chat) .locked_to_chat_label {4059.avatar-container:not(.locked_to_chat) .locked_to_chat_label {
4053 display: none;4060 display: none;
4054}4061}
4062
4055.avatar-container:not(.locked_to_character) .locked_to_character_label {4063.avatar-container:not(.locked_to_character) .locked_to_character_label {
4056 display: none;4064 display: none;
4057}4065}
@@ -4071,7 +4079,7 @@ input[type='checkbox'].del_checkbox {
4071}4079}
40724080
4073#lock_user_name.locked {4081#lock_user_name.locked {
4074 border-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 50%, var(--SmartThemeBorderColor));;4082 border-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 50%, var(--SmartThemeBorderColor));
4075}4083}
40764084
4077#lock_persona_to_char.locked {4085#lock_persona_to_char.locked {
@@ -6087,7 +6095,7 @@ body:not(.movingUI) .drawer-content.maximized {
6087 gap: 5px;6095 gap: 5px;
6088}6096}
60896097
6090.mes_text div[data-type="assistant_note"]:has(.assistant_note_export) > div {6098.mes_text div[data-type="assistant_note"]:has(.assistant_note_export)>div {
6091 flex: 1;6099 flex: 1;
6092 text-align: left;6100 text-align: left;
6093}6101}