More actions
No edit summary |
Add dark mode support (css vars -light, -dark variants). Temporarily breaks existing notices, WIP |
||
Line 3: | Line 3: | ||
border-collapse: collapse; | border-collapse: collapse; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
border: 2px solid var(--border); | border: 2px solid var(--border-light); | ||
border-left: 10px solid var(--border); | border-left: 10px solid var(--border-light); | ||
background-color: var(--background); | background-color: var(--background-light); | ||
color: var(--text-light); | |||
padding: 5px 10px; | padding: 5px 10px; | ||
} | |||
@media screen and (prefers-color-scheme: dark) { | |||
:root.skin-theme-clientpref-os .noticebox { | |||
background-color: var(--background-dark); | |||
border: 2px solid var(--border-dark); | |||
border-left: 10px solid var(--border-dark); | |||
color: var(--text-dark); | |||
} | |||
} | |||
:root.skin-theme-clientpref-dark .noticebox { | |||
background-color: var(--background-dark); | |||
border: 2px solid var(--border-dark); | |||
border-left: 10px solid var(--border-dark); | |||
color: var(--text-dark); | |||
} | } |
Revision as of 19:49, 24 October 2024
.noticebox {
margin: 4px 0;
border-collapse: collapse;
box-sizing: border-box;
border: 2px solid var(--border-light);
border-left: 10px solid var(--border-light);
background-color: var(--background-light);
color: var(--text-light);
padding: 5px 10px;
}
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os .noticebox {
background-color: var(--background-dark);
border: 2px solid var(--border-dark);
border-left: 10px solid var(--border-dark);
color: var(--text-dark);
}
}
:root.skin-theme-clientpref-dark .noticebox {
background-color: var(--background-dark);
border: 2px solid var(--border-dark);
border-left: 10px solid var(--border-dark);
color: var(--text-dark);
}