MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Add dark overlay on offline page background for dark theme
Some checks failed
Repo Health / Access control (push) Successful in 1s
Details
Repo Health / Release configuration (push) Failing after 4s
Details
Repo Health / Scripts governance (push) Successful in 4s
Details
Repo Health / Repository health (push) Failing after 4s
Details

Browse Source 
Uses ::before pseudo-element with rgba(0,0,0,0.5) overlay
only on dark theme. Content stays above via z-index.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-18 13:50:34 -05:00
parent 2019f72138
commit 3171bea918
1 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/media/css/offline.css
View File

@@ -25,6 +25,24 @@
background-size: cover; background-size: cover;
} }
/* Dark theme: overlay to darken the background */
:root[data-bs-theme="dark"] .moko-offline-wrap {
position: relative;
}
:root[data-bs-theme="dark"] .moko-offline-wrap::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
}
:root[data-bs-theme="dark"] .moko-offline-wrap > * {
position: relative;
z-index: 1;
}
/* === Centered Card Overlay === */ /* === Centered Card Overlay === */
.moko-offline-card { .moko-offline-card {
width: 100%; width: 100%;