mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-11-02 01:53:56 +08:00
134 lines
6.2 KiB
CSS
134 lines
6.2 KiB
CSS
@layer theme {
|
|
/* realtime graphs size their canvas from #view, clipping 34px off the newest samples — docs/css.md "Misc: the realtime graph bleed" */
|
|
#view .cbi-section > div[style]:has(> svg) {
|
|
width: auto !important;
|
|
margin-inline: calc(-1 * (var(--fs-card-pad) + 1px));
|
|
}
|
|
|
|
/* same box's frame, painted BLACK inline — only colour moves; wider than the bleed above, channel_analysis.js's box must not be bled but is just as black */
|
|
#view div[style]:has(> svg) {
|
|
border-color: var(--fs-border) !important;
|
|
}
|
|
|
|
/* WCAG 1.4.1: --fs-accent on --fs-text measures 1.4:1 in dark, needs a non-colour cue in
|
|
* prose. Nav links/buttons/pills are identified by position and shape instead. */
|
|
p a, dd a,
|
|
.cbi-value-description a,
|
|
.alert-message a:not(.btn):not(.cbi-button) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* a label must set sans, not merely be excluded — excluded still inherits mono (227 elements/
|
|
* 20 KB of bold mono for nothing); exempt in pre/code/#syslog/textarea, monospaced content.
|
|
* `.ifacebadge` is a badge (chrome, not a value) in a mono cell; wins on specificity (0,2,0)
|
|
* over theme/60-inputs.css's (0,1,0) mono rule, not source order */
|
|
:is(strong, b):not(pre *, code *, #syslog *, textarea *),
|
|
.ifacebadge,
|
|
.cbi-value-field .ifacebadge { font-family: var(--fs-font-sans); }
|
|
code, pre { font-weight: var(--fs-weight-normal); }
|
|
|
|
.cbi-title-ref { color: var(--fs-accent); }
|
|
.close { color: var(--fs-text); text-shadow: none; opacity: .6; }
|
|
.close:hover { opacity: 1; }
|
|
.ifacebox { background: var(--fs-panel); border-color: var(--fs-border); }
|
|
.ifacebox .ifacebox-head { background: var(--fs-panel2); color: var(--fs-text); }
|
|
/* lives in THIS layer, next to the head it overrides: the same rule in base was dead, a layer beats specificity */
|
|
.ifacebox .ifacebox-head.active { background: var(--fs-accent); color: var(--fs-on-accent); }
|
|
.ifacebadge { background: var(--fs-panel2); border-color: var(--fs-border); }
|
|
.ifacebadge-active { border-color: var(--fs-accent); }
|
|
.zonebadge-empty { border-color: var(--fs-border); color: var(--fs-dim); }
|
|
|
|
/* @container PLUMBING only, card rules live with the tables. Named: an unnamed query binds to the nearest container-type ancestor, silently re-targeted by a new one */
|
|
.cbi-map { container-type: inline-size; container-name: fs-content; }
|
|
#view { container-type: inline-size; container-name: fs-view fs-content; }
|
|
|
|
/* ui.js appends #modal_overlay outside #view, so the names above must repeat here or no dialog query resolves.
|
|
* box-shadow merged in from theme/70-modal.css: base's elevation = --fs-bg's hex in footstrap
|
|
* light, a glow not a shadow; others take --fs-shadow-pop */
|
|
.modal { container-type: inline-size; container-name: fs-view fs-content; box-shadow: var(--fs-shadow-pop); }
|
|
|
|
/* pager (« prev · text · next ») — generic, not page-scoped */
|
|
.pager.center { display: flex; align-items: center; justify-content: center; gap: var(--fs-space-2-5); padding: var(--fs-space-3-5) 0; }
|
|
.pager .text { flex: 0 0 auto; font-size: var(--fs-type); color: var(--fs-dim); }
|
|
|
|
/* absorbed from base; stock LuCI only renders h2/h3, the rest is third-party coverage.
|
|
* `legend` excluded: theme/30-tables.css owns it. */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: var(--fs-weight-bold);
|
|
color: var(--fs-text);
|
|
/* 1.5 is prose leading; a heading is a label and looks slack at it */
|
|
line-height: var(--fs-leading-tight);
|
|
}
|
|
h1 { margin-bottom: var(--fs-space-4); font-size: var(--fs-type-2xl); }
|
|
h2 { font-size: var(--fs-type-xl); }
|
|
h3 { font-size: var(--fs-type-lg); }
|
|
h4, h5 { font-size: var(--fs-type); }
|
|
h6 { font-size: var(--fs-type-xs); color: var(--fs-dim); text-transform: uppercase; }
|
|
|
|
/* heading card: h2 + .cbi-map-descr get a .cbi-section card's frame, so the page reads as a
|
|
* stack of panels rather than loose text over the background */
|
|
.cbi-map > h2,
|
|
#view > h2 {
|
|
background: var(--fs-panel);
|
|
border: var(--fs-hairline);
|
|
border-radius: var(--fs-radius-lg);
|
|
margin: 0 0 var(--fs-card-gap);
|
|
padding: var(--fs-space-4);
|
|
}
|
|
/* split the card across the two siblings — no wrapper element exists to hold both */
|
|
.cbi-map > h2:has(+ .cbi-map-descr),
|
|
#view > h2:has(+ .cbi-map-descr) {
|
|
border-bottom: 0;
|
|
border-radius: var(--fs-radius-lg) var(--fs-radius-lg) 0 0;
|
|
padding-bottom: var(--fs-space-1);
|
|
margin-bottom: 0;
|
|
box-shadow: none;
|
|
}
|
|
.cbi-map > h2 + .cbi-map-descr,
|
|
#view > h2 + .cbi-map-descr {
|
|
background: var(--fs-panel);
|
|
border: var(--fs-hairline);
|
|
border-top: 0;
|
|
border-radius: 0 0 var(--fs-radius-lg) var(--fs-radius-lg);
|
|
margin: 0 0 var(--fs-card-gap);
|
|
padding: 0 var(--fs-space-4) var(--fs-space-4);
|
|
color: var(--fs-dim);
|
|
font-size: var(--fs-type);
|
|
line-height: var(--fs-leading);
|
|
}
|
|
|
|
/* .right holding Add/Save directly under a field had no gap: pinned the button to the textarea */
|
|
#view :is(textarea, input[type="text"], input[type="password"], .cbi-dropdown) + .right {
|
|
margin-top: var(--fs-space-2-5);
|
|
}
|
|
|
|
/* button row belonging to the PAGE TITLE, not a section — same 16px as .cbi-section, half above */
|
|
.cbi-title-buttons { margin-block: var(--fs-space-2) var(--fs-card-gap); }
|
|
|
|
/* Delete button luci-base renders for every NAMED section sat flush against what follows — one class, not one app */
|
|
.cbi-section-remove { margin-bottom: var(--fs-space-2); }
|
|
|
|
/* a view may hand the map a bare widget with no `.cbi-section`; exclusions are the children luci-base already spaces itself */
|
|
.cbi-map > *:not(.cbi-section):not(.cbi-map-descr):not(.cbi-page-actions):not(h2):not(legend):not(.cbi-tabmenu):not(.cbi-map-tabbed):not(:empty) {
|
|
margin-bottom: var(--fs-card-gap);
|
|
}
|
|
|
|
/* the disclosure chevron of the overview card toggle (a stock element, keyed by attribute).
|
|
* pages/20-overview.css sizes the pill around it. */
|
|
.cbi-title .label[data-indicator="poll-status"]::after {
|
|
content: "";
|
|
width: 7px;
|
|
height: 7px;
|
|
border-right: 2px solid currentColor;
|
|
border-bottom: 2px solid currentColor;
|
|
border-radius: 1px;
|
|
transform: rotate(45deg); /* closed: chevron down */
|
|
margin-top: -2px; /* optical centring of the down chevron */
|
|
transition: transform var(--fs-dur-move);
|
|
}
|
|
.cbi-title .label[data-indicator="poll-status"][data-style="inactive"]::after {
|
|
transform: rotate(-135deg); /* open: chevron up */
|
|
margin-top: var(--fs-space-0-5);
|
|
}
|
|
}
|