tomh104/nat-as-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refined toast component styles to adjust for new color scheme

Browse Source
This commit is contained in:
Tom Hempel
2026-05-27 10:12:46 +02:00
parent 1d9154e664
commit 7f8cc4a632
1 changed files with 34 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
website/css/style.css
View File

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