agw/Weircon-wind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adapters/bulma: theme-adaptive notifications (tinted surface + theme text) so they read in light and dark

Browse Source
This commit is contained in:
Asger Geel Weirsøe
2026-06-14 20:05:00 +02:00
parent 2e02df8fc4
commit 86086de662
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adapters/bulma.css
Vendored
+19 -5
View File
@@ -90,11 +90,25 @@ hr { background-color: var(--color-border); }
.tag.is-success { background-color: #10341f; color: var(--color-good); }
.tag.is-danger { background-color: #3a1620; color: var(--color-bad); }
/* Notifications */
.notification.is-info.is-light { background-color: #10243a; color: #cfe6ff; border-color: #1d3a5a; }
.notification.is-success.is-light { background-color: #10341f; color: #c8f7d6; border-color: #1d5a32; }
.notification.is-danger.is-light { background-color: #3a1620; color: #ffd0d9; border-color: #5b2230; }
.notification.is-warning.is-light { background-color: #3a2c10; color: #ffe1a8; border-color: #5b471d; }
/* Notifications — tinted surface + theme text, so they read in light AND dark
(a hardcoded colour was dark-on-dark in one theme). */
.notification { color: var(--color-text); }
.notification.is-info.is-light {
background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}
.notification.is-success.is-light {
background-color: color-mix(in srgb, var(--color-good) 16%, var(--color-surface));
color: var(--color-text); border-color: color-mix(in srgb, var(--color-good) 40%, var(--color-border));
}
.notification.is-danger.is-light {
background-color: color-mix(in srgb, var(--color-bad) 16%, var(--color-surface));
color: var(--color-text); border-color: color-mix(in srgb, var(--color-bad) 40%, var(--color-border));
}
.notification.is-warning.is-light {
background-color: color-mix(in srgb, #ffb020 16%, var(--color-surface));
color: var(--color-text); border-color: color-mix(in srgb, #ffb020 40%, var(--color-border));
}
/* Progress bars — dark track + accent fill (native <progress> needs pseudo-els) */
.progress { background-color: var(--color-surface-2); border-radius: 999px; height: 0.6rem; }