refined toast component styles to adjust for new color scheme

This commit is contained in:
2026-05-27 10:12:46 +02:00
parent 1d9154e664
commit 7f8cc4a632

View File

@ -73,15 +73,15 @@
--badge-branch-fg: #c4b5fd;
--lang-chip-fixed-bg: var(--primary-subtle);
--lang-chip-fixed-border: var(--primary-border);
--toast-success-bg: rgba(74, 222, 128, 0.12);
--toast-success-fg: #86efac;
--toast-success-border: rgba(74, 222, 128, 0.3);
--toast-error-bg: rgba(248, 113, 113, 0.12);
--toast-error-fg: #fca5a5;
--toast-error-border: rgba(248, 113, 113, 0.3);
--toast-info-bg: var(--primary-subtle);
--toast-info-fg: var(--primary-text);
--toast-info-border: var(--primary-border);
--toast-success-bg: #1a2e22;
--toast-success-fg: #bbf7d0;
--toast-success-border: #3d6b4f;
--toast-error-bg: #2e1a1a;
--toast-error-fg: #fecaca;
--toast-error-border: #7f3f3f;
--toast-info-bg: #1a2438;
--toast-info-fg: #bfdbfe;
--toast-info-border: #3b5a8a;
--save-flash-bg: var(--primary-subtle);
--progress-track: #2e3648;
}
@ -615,19 +615,40 @@ th.sort-desc::after { content: ' \2193'; opacity: 1; }
gap: 8px;
}
.toast {
padding: 12px 20px;
padding: 12px 16px 12px 14px;
border-radius: 8px;
font-size: .875rem;
font-weight: 500;
line-height: 1.45;
box-shadow: var(--shadow-lg);
opacity: 0;
transform: translateX(40px);
transition: opacity .3s, transform .3s;
max-width: 360px;
border: 1px solid var(--border);
border-left-width: 4px;
background: var(--surface-raised);
color: var(--text);
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { background: var(--toast-success-bg); color: var(--toast-success-fg); border: 1px solid var(--toast-success-border); }
.toast-error { background: var(--toast-error-bg); color: var(--toast-error-fg); border: 1px solid var(--toast-error-border); }
.toast-info { background: var(--toast-info-bg); color: var(--toast-info-fg); border: 1px solid var(--toast-info-border); }
.toast-success {
background: var(--toast-success-bg);
color: var(--toast-success-fg);
border-color: var(--toast-success-border);
border-left-color: var(--success);
}
.toast-error {
background: var(--toast-error-bg);
color: var(--toast-error-fg);
border-color: var(--toast-error-border);
border-left-color: var(--danger);
}
.toast-info {
background: var(--toast-info-bg);
color: var(--toast-info-fg);
border-color: var(--toast-info-border);
border-left-color: var(--primary);
}
/* Filter bar */
.filter-bar {