mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-11-14 04:07:56 +08:00
75 lines
3.3 KiB
CSS
75 lines
3.3 KiB
CSS
@layer theme {
|
|
/* honoured globally, every transition here is decoration. !important is the one sanctioned
|
|
* exception, a layer cannot reach base's own transitions — DO NOT COPY THE FLAG OUT OF THIS
|
|
* BLOCK. .01ms not 0s: a zero duration never fires transitionend, LuCI's teardown waits for one. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: .01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: .01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* every surface is already opaque except the wallpaper's wash */
|
|
@media (prefers-reduced-transparency: reduce) {
|
|
:root {
|
|
/* flattens the photo wash to opaque (16-login-bg.css) */
|
|
--fs-photo-scrim: var(--fs-bg);
|
|
}
|
|
}
|
|
|
|
/* re-states the tokens so every rule reading them follows — docs/css.md "A11y: prefers-contrast token shifts, and the numbers behind them" has why each number */
|
|
@media (prefers-contrast: more) {
|
|
:root {
|
|
--fs-border: color-mix(in srgb, var(--fs-text) 45%, var(--fs-bg));
|
|
--fs-dim: color-mix(in srgb, var(--fs-text) 85%, var(--fs-bg));
|
|
--fs-faint: color-mix(in srgb, var(--fs-text) 82%, var(--fs-bg));
|
|
--fs-focus-ring: 0 0 0 3px color-mix(in srgb, var(--fs-accent) 60%, transparent);
|
|
--fs-accent-line: var(--fs-accent); --fs-accent-line-hi: var(--fs-accent);
|
|
--fs-good-line: var(--fs-good); --fs-good-line-hi: var(--fs-good);
|
|
--fs-danger-line: var(--fs-danger); --fs-danger-line-hi: var(--fs-danger);
|
|
/* the one token shipped under AA at rest; both modes buy the ink back here */
|
|
--fs-placeholder-mix: 62%;
|
|
}
|
|
:root[data-darkmode="true"] { --fs-placeholder-mix: 80%; }
|
|
}
|
|
|
|
/* forced-colors: background-color is forced to the system canvas, so state carried by
|
|
* BACKGROUND alone vanishes (active tab, checked toggle, selected row) — re-stated with a
|
|
* border/outline in system keywords, which forced-colors keeps — docs/css.md "A11y:
|
|
* forced-colors state repairs". */
|
|
@media (forced-colors: active) {
|
|
#tabmenu ul.tabs > li.active > a,
|
|
ul.cbi-tabmenu.mode > li.cbi-tab > a,
|
|
.tabs > li.active > a,
|
|
.cbi-tabmenu > li.cbi-tab > a,
|
|
.cbi-dropdown > ul > li[selected],
|
|
.ifacebox .ifacebox-head.active,
|
|
.cbi-page-actions .cbi-button-apply {
|
|
outline: 2px solid Highlight;
|
|
outline-offset: -2px;
|
|
color: HighlightText;
|
|
background: Highlight;
|
|
forced-color-adjust: none; /* keep the fill: it IS the state */
|
|
}
|
|
/* active #topmenu state was only a 10%-accent background + box-shadow rail, both dropped */
|
|
#topmenu li.active > a {
|
|
border-inline-start: 3px solid Highlight;
|
|
padding-inline-start: calc(var(--fs-space-3) - 3px);
|
|
}
|
|
/* input[type=checkbox] (60-inputs.css draws the switch there) cannot reach ui.Checkbox's tooltip label */
|
|
.cbi-checkbox > input[type="checkbox"] { border: 1px solid ButtonBorder; }
|
|
.cbi-checkbox > input[type="checkbox"]:checked {
|
|
background: Highlight;
|
|
forced-color-adjust: none;
|
|
}
|
|
.cbi-checkbox > input[type="checkbox"]::after { background: ButtonBorder; }
|
|
.cbi-checkbox > input[type="checkbox"]:checked::after { background: HighlightText; }
|
|
/* icon-only buttons (rail toggle, search/appearance, logout) lose their hover fill */
|
|
.fs-railtoggle, .fs-themerow { border-color: ButtonBorder; }
|
|
/* box-shadow is dropped entirely in forced-colors */
|
|
:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; }
|
|
}
|
|
}
|