mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-11-10 15:37:51 +08:00
91 lines
5.2 KiB
CSS
91 lines
5.2 KiB
CSS
@layer page {
|
|
/* The axis controls are page content, not chrome (fs-appearance.js): docs/css.md "Appearance: from popover to page, and what stayed CSS". */
|
|
|
|
.fs-ap { display: flex; flex-direction: column; gap: var(--fs-space-5); }
|
|
.fs-ap-note p:first-child { margin-top: 0; }
|
|
.fs-ap-note p:last-child { margin-bottom: 0; }
|
|
/* heading row: on a folded group the WHOLE row is the disclosure button inside the h2, full
|
|
* width so the target is the heading, not a chevron nobody can hit on a phone. `font: inherit`
|
|
* hands the button the heading's size, weight and leading, which a button resets to the UA's. */
|
|
button.fs-ap-fold {
|
|
display: flex; align-items: center; justify-content: space-between; gap: var(--fs-space-3);
|
|
inline-size: 100%; padding: 0; margin: 0;
|
|
background: none; border: 0; cursor: pointer; text-align: start; color: inherit; font: inherit;
|
|
}
|
|
button.fs-ap-fold:hover { color: var(--fs-accent); }
|
|
button.fs-ap-fold:focus-visible { outline: none; box-shadow: var(--fs-focus-ring-solo); border-radius: var(--fs-radius-sm); }
|
|
/* the chevron glyph itself is in theme/45-misc.css, shared with the overview card toggle */
|
|
.fs-ap-chev {
|
|
flex: 0 0 auto; inline-size: 26px; block-size: 26px;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
color: var(--fs-dim); border-radius: var(--fs-radius-sm);
|
|
}
|
|
button.fs-ap-fold:hover .fs-ap-chev { color: var(--fs-accent); }
|
|
.fs-ap-sub { margin-top: var(--fs-space-4); }
|
|
.fs-ap-head :is(h2, h3) {
|
|
margin: 0;
|
|
font-size: var(--fs-type); font-weight: var(--fs-weight-bold); color: var(--fs-text);
|
|
}
|
|
.fs-ap-section + .fs-ap-section { padding-top: var(--fs-space-4); border-top: var(--fs-hairline); }
|
|
/* rows are stock .cbi-value with no layout of their own — base/30-forms.css and
|
|
* theme/60-inputs.css already draw every other LuCI form this way. docs/css.md above. */
|
|
:root[data-layout="top"] .fs-ap-submenus { display: none; }
|
|
|
|
.fs-ap-actrow, .fs-ap-bgrow { display: flex; flex-wrap: wrap; gap: var(--fs-space-2); }
|
|
.fs-ap-actgap { flex: 0 0 var(--fs-space-4); }
|
|
.fs-ap-actrow .btn, .fs-ap-bgrow .btn { padding: var(--fs-space-2) var(--fs-space-2-5); }
|
|
/* primed Reset (2nd click confirms) reads as the destructive action it is */
|
|
.fs-ap-armed { color: var(--fs-on-danger); background: var(--fs-danger); border-color: transparent; }
|
|
.fs-ap-err { margin-top: var(--fs-space-2); font-size: var(--fs-type-xs); line-height: 1.35; color: var(--fs-danger); }
|
|
|
|
.fs-colorctl { display: flex; flex-direction: column; gap: var(--fs-space-1-5); max-width: var(--fs-field-max); }
|
|
.fs-color-row { display: flex; align-items: center; gap: var(--fs-space-2); }
|
|
/* native swatch strips the browser's own inset well to the frame's edge (both engines) */
|
|
input[type="color"].fs-color-swatch {
|
|
flex: 0 0 auto; inline-size: 34px; block-size: 34px; padding: 0; cursor: pointer;
|
|
background: none; border: var(--fs-hairline); border-radius: var(--fs-radius-sm);
|
|
}
|
|
input[type="color"].fs-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
|
|
input[type="color"].fs-color-swatch::-webkit-color-swatch { border: 0; border-radius: calc(var(--fs-radius-sm) - 1px); }
|
|
input[type="color"].fs-color-swatch::-moz-color-swatch { border: 0; border-radius: calc(var(--fs-radius-sm) - 1px); }
|
|
input[type="text"].fs-color-hex {
|
|
flex: 1 1 auto; min-inline-size: 0;
|
|
font-family: var(--fs-font-mono); font-size: var(--fs-type-field-xs); font-variant-numeric: tabular-nums;
|
|
text-transform: lowercase;
|
|
}
|
|
.fs-color-clear { flex: 0 0 auto; font-size: var(--fs-type-xs); padding: var(--fs-space-1-5) var(--fs-space-2); }
|
|
|
|
/* live contrast readout, not a validation — docs/css.md above */
|
|
.fs-color-contrast { font-variant-numeric: tabular-nums; }
|
|
.fs-contrast-aa { color: var(--fs-good); }
|
|
.fs-contrast-aa-large { color: var(--fs-warn); }
|
|
.fs-contrast-low { color: var(--fs-danger); }
|
|
|
|
.fs-ap-bgprev {
|
|
display: block; width: 100%; max-width: var(--fs-field-max); height: 84px; object-fit: cover;
|
|
border: var(--fs-hairline); border-radius: var(--fs-radius);
|
|
margin-top: var(--fs-space-2);
|
|
}
|
|
/* File wallpaper: only Dim applies, Tint colours the canvas a photo already covers; strength is a multiplier on a chroma we choose, meaningless off hue mode */
|
|
:root[data-wallpaper="file"] .fs-ap-tint,
|
|
:root:not([data-tint="hue"]) .fs-ap-tintstr { display: none; }
|
|
|
|
.fs-ap-footer {
|
|
display: flex; flex-direction: column; gap: var(--fs-space-2);
|
|
margin-top: var(--fs-space-0-5); padding-top: var(--fs-space-2-5); border-top: var(--fs-hairline);
|
|
}
|
|
.fs-ap-verrow { display: flex; align-items: center; justify-content: space-between; gap: var(--fs-space-2-5); }
|
|
.fs-ap-version { position: relative; font-size: var(--fs-type-xs); color: var(--fs-dim); font-variant-numeric: tabular-nums; text-decoration: none; }
|
|
.fs-ap-version:hover { color: var(--fs-accent); text-decoration: underline; }
|
|
/* invisible overlay grows an 84x17 link past the WCAG 2.2 SC 2.5.8 24px floor, to 88x25,
|
|
* without moving the text (out of flow, same fix as .cbi-checkbox in theme/60-inputs.css) */
|
|
.fs-ap-version::before { content: ""; position: absolute; inset: -4px -2px; }
|
|
|
|
.fs-ap-i18n {
|
|
flex-wrap: wrap;
|
|
font-size: var(--fs-type-xs);
|
|
color: var(--fs-dim);
|
|
}
|
|
.fs-ap-i18n code { font-size: inherit; }
|
|
}
|