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

Dark-mode <progress> styling + mobile no-sideways-scroll guards

Browse Source 
- adapters/bulma.css: dark progress bars (surface track + accent/good fill).
- base: body overflow-x:hidden + overflow-wrap, and .media-content min-width:0
  so long content wraps instead of widening the page on mobile.
This commit is contained in:
Asger Geel Weirsøe
2026-06-14 19:05:00 +02:00
parent ec84e68161
commit b70a65d39e
3 changed files with 17 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adapters/bulma.css
Vendored
+14
View File
@@ -94,9 +94,23 @@ hr { background-color: var(--color-border); }
.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; }
/* Progress bars — dark track + accent fill (native <progress> needs pseudo-els) */
.progress { background-color: var(--color-surface-2); border-radius: 999px; height: 0.6rem; }
.progress::-webkit-progress-bar { background-color: var(--color-surface-2); border-radius: 999px; }
.progress::-webkit-progress-value { background-color: var(--color-accent); border-radius: 999px; }
.progress::-moz-progress-bar { background-color: var(--color-accent); border-radius: 999px; }
.progress.is-info::-webkit-progress-value { background-color: var(--color-accent); }
.progress.is-info::-moz-progress-bar { background-color: var(--color-accent); }
.progress.is-success::-webkit-progress-value { background-color: var(--color-good); }
.progress.is-success::-moz-progress-bar { background-color: var(--color-good); }
.progress:indeterminate { background-image: linear-gradient(to right, var(--color-accent) 30%, var(--color-surface-2) 30%); }
/* Media object (list items) */
.media + .media { border-top: 1px solid var(--color-border); }
.media-left img { border-radius: var(--wt-radius-sm); border: 1px solid var(--color-border); background: #fff; }
/* flex children need min-width:0 to shrink — otherwise long names/URLs push the
whole page wider than the viewport (sideways scroll on mobile). */
.media-content { min-width: 0; overflow-wrap: anywhere; }
/* Misc */
details summary { color: var(--color-accent); }