cwx/op-packages
1
0 Fork 0
mirror of https://github.com/kiddin9/op-packages.git synced 2026-10-29 18:55:13 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🔥 Sync 2026-09-05 21:18:46

Browse Source
This commit is contained in:
github-actions[bot] committed 2026-09-05 21:18:46 +08:00
1 parent e88d0b9fed
commit b05ff8a1b6
45 files changed
+506 -272
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

luci-theme-footstrap/Makefile
+1 -1
View File
@@ -17,7 +17,7 @@ LUCI_NAME:=luci-theme-footstrap
FOOTSTRAP_VERSION?=
ifneq ($(FOOTSTRAP_VERSION),)
PKG_VERSION:=$(FOOTSTRAP_VERSION)
PKG_RELEASE:=59
PKG_RELEASE:=60
endif
LUCI_TITLE:=Footstrap Theme
luci-theme-footstrap/styles/02-tokens.css
+16 -28
View File
@@ -19,14 +19,9 @@
* friends) live in those blocks too, beside the fills they must be legible against: a
* dark palette has light fills and needs a dark ink, and one global `#fff` failed WCAG AA
* on seven of the eight dark-palette fills (down to 1.69:1). */
--fs-shadow: 0 1px 3px rgba(15,23,37,.08);
/* pop surfaces (menus, dropdown lists, the select picker): one value rather than a
* literal per site */
--fs-shadow-pop: 0 12px 34px rgba(0,0,0,.30);
/* the top bar's edge: a drop below plus a 1px inset seam, both a quiet 25% of the border
* colour */
--fs-shadow-bar: 0 1px 3px color-mix(in srgb, var(--fs-border) 25%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--fs-border) 25%, transparent);
/* ---- two focus rings, and which one a control takes is the contract ----
* -soft is a TINT (10-15% of the accent), measuring 1.15-1.29:1 on the surface it lands
* on: a glow, not an indicator, where WCAG 1.4.11 wants 3:1. It is legitimate only beside
@@ -79,7 +74,9 @@
* The role x step matrix is complete on purpose, read or not: a gap is how the drift
* starts, since a rule wanting a level that does not exist invents a percentage.
* --fs-accent-soft is the one member not here — its strength differs per MODE (10% light,
* 15% dark; hicontrast 10/14) — so it sits in the palette blocks. */
* 15% dark; hicontrast dark 14%). LIGHT is identical across every palette and lives as one
* declaration in 03-palettes.css's shared :root instead; DARK still varies by palette (one
* differs by a digit) and stays declared per palette block. */
--fs-good-soft: color-mix(in srgb, var(--fs-good) 12%, transparent);
--fs-warn-soft: color-mix(in srgb, var(--fs-warn) 12%, transparent);
--fs-danger-soft: color-mix(in srgb, var(--fs-danger) 12%, transparent);
@@ -103,13 +100,6 @@
* instead of mixing its own percentage. A grep finding no `var(--fs-warn-line)` is
* expected. */
/* frosted pop surface (top-nav dropdown, rail flyout), deliberately not merged into
* --fs-bar-bg (88%): a bar is a thin strip the page ghosts through on purpose, while a
* dropdown carries a whole menu and must stay readable */
--fs-glass: color-mix(in srgb, var(--fs-panel) 96%, transparent);
/* one blur radius for every frosted surface — the bar said 10px and the pops 12px */
--fs-blur: blur(12px);
/* The circular-arrows refresh glyph, as a mask so its colour follows the palette
* (--fs-good active, --fs-dim paused). One copy: the poll pill collapses to it both in the
* rail and in the bar's compact cluster. A static glyph on purpose — a spinner makes an
@@ -127,10 +117,6 @@
* the element and drops the border, the bar keeps the bordered square — but not in size. */
--fs-icon-refresh-sz: calc(18px * var(--fs-density-type));
/* the 1px raised edge on a plate carrying text, plus its text shadow */
--fs-emboss: inset 0 1px 0 color-mix(in srgb, var(--fs-panel) 5%, transparent);
--fs-text-emboss: 0 1px 1px color-mix(in srgb, var(--fs-panel) 75%, transparent);
/* Hover cue for a solid control — the one cue that cannot be a colour, the fill it shifts
* being whatever the role token says. Per mode, and the DIRECTION FLIPS: `filter`
* recolours the text too, and a light-mode solid button is a saturated fill with white
@@ -164,21 +150,24 @@
--fs-sidebar-w: calc(224px * var(--fs-density-box)); /* the expanded vertical sidebar's column */
--fs-rail-w: calc(68px * var(--fs-density-box)); /* ...and the same sidebar collapsed to its icon rail */
--fs-content-min: 500px; /* below this a content column stops being readable */
/* translucent blurred bar surface: the top-nav bar and the sidebar's phone bar are one
* component in two markups, so one token keeps their glass tint identical */
--fs-bar-bg: color-mix(in srgb, var(--fs-panel) 88%, transparent);
/* the bar's surface: the top-nav bar and the sidebar's phone bar are one component in two
* markups, so one token keeps the two identical. OPAQUE on purpose. It was 88% of the panel
* under a 12px backdrop blur, and the pair was measured on the page most favourable to it —
* a pattern wallpaper at full strength, the bar sitting over scrolled content: dropping the
* blur moved 0.04% of the pixels, and what the translucency actually bought was the page
* showing through the chrome, which reads as a glitch rather than as glass. */
--fs-bar-bg: var(--fs-panel);
/* height of that bar, and the scroll-margin every anchor target needs to clear it
* (base/10-reset.css): if the two drift, an in-page jump lands under the bar */
/* The chrome's own controls — the square buttons (search, appearance, log out) and the poll
* pill — ride the bar rather than cutting panel-coloured holes in it: the bar is one surface,
* and a control on it is carried by its hairline, not by a second fill. `transparent`, not a
* copy of --fs-bar-bg, so the strip's own translucency is not applied twice.
* and a control on it is carried by its hairline, not by a second fill. `transparent`, so the
* control shows the bar itself rather than a second surface stacked on it.
*
* This gives up what `.label`'s comment in theme/35-alerts.css leans on — that a coloured
* variant sits on --fs-panel2, where the palette guarantees >=4.5:1 by construction. On the
* bar the backdrop is now whatever the strip lands on, so the ratio is a MEASURED fact per
* palette rather than a guaranteed one; the numbers live in the changelog entry. A palette that
* needs the old behaviour sets this back to var(--fs-panel2). */
* The backdrop a control lands on is therefore --fs-bar-bg, which is --fs-panel: the same
* construction `.label`'s comment in theme/35-alerts.css leans on, so a coloured variant keeps
* its >=4.5:1 by the palette's guarantee rather than by measurement. A palette that wants the
* old panel2 hole sets this back to var(--fs-panel2). */
--fs-bar-ctl-bg: transparent;
/* The select's chevron, drawn rather than fetched. It used to be an inline SVG data-URI, and
* a URI cannot read var() — the stroke colour had to be written INTO the string, so the
@@ -561,7 +550,6 @@
:root[data-darkmode="true"] {
/* palette colours are in 03-palettes.css; only mode-level, palette-independent
* tokens live here */
--fs-shadow: 0 1px 2px rgba(0,0,0,.4);
--fs-disabled-opacity: .45;
/* the hover cue flips direction here (see --fs-hover-lift): a dark-mode solid button is a
* light fill with dark ink, so brightening moves it away from both the page and its own
luci-theme-footstrap/styles/03-palettes.css
+48 -51
View File
@@ -65,7 +65,7 @@
* one honest knob --fs-tint-c is the strength, in chroma. Light mode has less headroom and
* does clip at the top of the wheel, which costs a few units of strength
* but not the direction. On a canvas of pure WHITE the cue is nearly
* hue-blind — on bootstrap's #ffffff, 180° and 258° land 1/255 apart —
* hue-blind — on bootstrap's #fff, 180° and 258° land 1/255 apart —
* which is the price of copying a stock theme's surfaces.
* contrast is free `l` is copied through, so AA margins barely move; the mix dragged
* lightness toward the anchor and cost one export level 4.61 -> 4.40:1.
@@ -84,6 +84,12 @@
* rotate it with no second copy to keep in sync. Absent an accent hue, --fs-accent IS the
* palette's -base value. */
--fs-accent: var(--fs-accent-base);
/* a tint OF --fs-accent, mixed FROM it: a restated literal goes stale the moment the accent
* is recoloured or the accent-hue axis rotates it. LIGHT strength only — every palette's
* light block wanted the identical 10%, so this one declaration replaces five copies; a
* dark block still declares its own (15%, hicontrast 14%: 02-tokens.css line ~81) and wins
* on specificity. */
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 10%, transparent);
/* the three status colours, derived from the palette's -base hex for the reason the accent
* is: an axis rotating a token the palettes declared directly would need a second copy of
* every value to rotate from */
@@ -253,7 +259,7 @@
:root[data-palette="footstrap"] {
/* LIGHT */
--fs-bg-base: #f6f8fa;
--fs-panel-base: #ffffff;
--fs-panel-base: #fff;
--fs-panel2-base: #f6f8fa;
--fs-border-base: #d0d7de;
--fs-text: #1f2328;
@@ -264,9 +270,6 @@
--fs-dim: #33383d;
--fs-faint: #3d4348;
--fs-accent-base: #0969da;
/* a tint OF --fs-accent, mixed FROM it: a restated literal goes stale the moment the accent
* is recoloured or the accent-hue axis rotates it */
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 10%, transparent);
--fs-track: #eaeef2;
--fs-good-base: #197c36;
--fs-warn-base: #946300;
@@ -311,7 +314,7 @@
* white ink, and both uses want >=4.5:1 against white. At 5.22/5.35/5.93/5.80 they are
* genuinely above the default palette, which is what the name promises. */
--fs-bg-base: #eef1f6;
--fs-panel-base: #ffffff;
--fs-panel-base: #fff;
--fs-panel2-base: #f6f8fb;
--fs-border-base: #e4e9f1;
--fs-text: #101725;
@@ -320,7 +323,6 @@
--fs-dim: #272f3d;
--fs-faint: #2e3745;
--fs-accent-base: #0b6fbd;
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 10%, transparent);
--fs-track: #eaeef4;
--fs-good-base: #0f7a52;
--fs-warn-base: #8a5a00;
@@ -360,9 +362,9 @@
* they already know keeps it and still gets the chrome, the client navigation and the axes.
*
* Bootstrap computes everything from HSL axes; these are those axes evaluated:
* --background-color high/medium/low #ffffff / #f9f9f9 / #f5f5f5 (dark #222 / #282828 / #2c2c2c)
* --background-color high/medium/low #fff / #f9f9f9 / #f5f5f5 (dark #222 / #282828 / #2c2c2c)
* --text-color high/medium #404040 / #808080 (dark #bfbfbf / #7f7f7f)
* --border-color high/medium #cccccc / #dddddd (dark #555555 / #444444)
* --border-color high/medium #ccc / #ddd (dark #555 / #444)
* The canvas and the card are both --background-color-high: bootstrap is flat and lets the
* border carry the structure. panel2 is its --background-color-low, the surface it stripes
* tables and hovers rows with.
@@ -381,10 +383,10 @@
* to the chrome, not a colourway. */
:root[data-palette="bootstrap"] {
/* LIGHT */
--fs-bg-base: #ffffff;
--fs-panel-base: #ffffff;
--fs-bg-base: #fff;
--fs-panel-base: #fff;
--fs-panel2-base: #f5f5f5;
--fs-border-base: #cccccc;
--fs-border-base: #ccc;
/* The ink is the one place this colourway leaves bootstrap's own values behind, the same
* decision the default palette made: its #404040 body and #6a6a6a muted tier measure
* 10.4:1 and 5.4:1 on white, and the muted one carries every field title. Matched to the
@@ -395,8 +397,7 @@
--fs-faint: #424242;
/* --primary-color-medium; -high (#1976d2) measured 4.22:1 on --fs-panel2 */
--fs-accent-base: #1564c0;
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 10%, transparent);
--fs-track: #eeeeee;
--fs-track: #eee;
--fs-good-base: #007936; /* --success-color-low */
--fs-warn-base: #826706; /* #efbd0b darkened; 1.61:1 as text is not a rounding error */
--fs-danger-base: #d00000; /* --error-color-low */
@@ -408,14 +409,14 @@
}
:root[data-palette="bootstrap"][data-darkmode="true"] {
/* DARK */
--fs-bg-base: #222222;
--fs-bg-base: #222;
--fs-panel-base: #282828;
/* bootstrap's own dark --background-color-low (#2c2c2c) sits 0.016 from --fs-panel, under
* the 0.02 the ramp check wants, so an app asking high/-low for a gradation gets one colour
* twice; #303030 is 0.031. Its light pair is 0.039 apart, so the same check catches this in
* the theme this palette is named after. */
--fs-panel2-base: #303030;
--fs-border-base: #444444;
--fs-border-base: #444;
--fs-text: #bfbfbf;
/* Bootstrap's dark has no third ink, so the two quiet tiers are this palette's own and AA
* decides where the fainter one sits: the export tier's -low follows --fs-faint, and on a
@@ -428,16 +429,16 @@
--fs-faint: #9a9a9a;
--fs-accent-base: #53a4c2;
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 15%, transparent);
--fs-track: #333333;
--fs-track: #333;
--fs-good-base: #1aaf7b;
--fs-warn-base: #aa9968;
--fs-danger-base: #dd807e;
/* dark ink: these fills are light, and bootstrap's own --on-*-color in dark is likewise its
* --background-color-high. #222222 gives 5.65/5.65/5.66/5.65. */
--fs-on-accent: #222222;
--fs-on-good: #222222;
--fs-on-warn: #222222;
--fs-on-danger: #222222;
* --background-color-high. #222 gives 5.65/5.65/5.66/5.65. */
--fs-on-accent: #222;
--fs-on-good: #222;
--fs-on-warn: #222;
--fs-on-danger: #222;
}
/* ---- 2020 — the OpenWrt 2020 theme's colourway ----
*
@@ -457,8 +458,8 @@
* reads --fs-panel, so in dark mode the navy is the CANVAS and the chrome sits on it. */
:root[data-palette="2020"] {
/* LIGHT — white content, the CI cyan darkened until it can be read on it */
--fs-bg-base: #ffffff;
--fs-panel-base: #ffffff;
--fs-bg-base: #fff;
--fs-panel-base: #fff;
--fs-panel2-base: #eef4f8;
--fs-border-base: #c3d2dd;
/* navy-tinted neutrals rather than grey: the ink belongs to the same scheme as the accent */
@@ -467,11 +468,10 @@
--fs-faint: #3d5566;
/* #00B5E2 held at hue, taken down until it reads: 5.89:1 on white against its own 2.09:1 */
--fs-accent-base: #036c92;
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 10%, transparent);
--fs-track: #e3ebf1;
--fs-good-base: #276e2a; /* #5CB85C darkened; 2.28:1 as text is not a rounding error */
--fs-warn-base: #8a5a00; /* #CC8800, same move */
--fs-danger-base: #c1121f; /* #CC1111 is 5.25:1 already — the one that stays where it was */
--fs-warn-base: #8a5a00; /* #C80, same move */
--fs-danger-base: #c1121f; /* #C11 is 5.25:1 already — the one that stays where it was */
/* ink ON the fills above — white clears AA on all four */
--fs-on-accent: #fff;
--fs-on-good: #fff;
@@ -503,8 +503,8 @@
/* ---- forum — the OpenWrt forum's Discourse colourway (opt-in) ----
*
* Sampled from forum.openwrt.org's own `getComputedStyle(document.documentElement)`, one read
* per colour scheme: LIGHT --primary #222 (ink) / --secondary #fff (page) / --tertiary #0088cc
* (accent) / --quaternary and --danger both #e45735 / --success #009900 / --highlight #ffff4d;
* per colour scheme: LIGHT --primary #222 (ink) / --secondary #fff (page) / --tertiary #08c
* (accent) / --quaternary and --danger both #e45735 / --success #090 / --highlight #ffff4d;
* DARK --primary #ddd / --secondary #222 / --tertiary #0f82af / --danger #e45735 (unchanged
* from light) / --success #1ca551 / --highlight #a87137. Discourse names quaternary and
* danger as one colour in light and two in dark (#c14924); footstrap has no fifth semantic
@@ -526,20 +526,19 @@
* move, still the one furthest from AA after it. */
:root[data-palette="forum"] {
/* LIGHT — the forum's own page, exactly: white canvas, near-black ink */
--fs-bg-base: #ffffff;
--fs-panel-base: #ffffff;
--fs-bg-base: #fff;
--fs-panel-base: #fff;
--fs-panel2-base: #f0f0f0;
--fs-border-base: #dddddd;
--fs-text: #222222;
--fs-border-base: #ddd;
--fs-text: #222;
--fs-dim: #3d3d3d;
--fs-faint: #4a4a4a;
/* --tertiary #0088cc measures 3.89:1 on white; #0074ad held the hue at 5.12:1 there but
/* --tertiary #08c measures 3.89:1 on white; #0074ad held the hue at 5.12:1 there but
* only 4.49:1 on --fs-panel2, under the 4.5:1 floor the export tier holds every surface to;
* #0073ac holds it at 5.19:1 on white and 4.55:1 on --fs-panel2 */
--fs-accent-base: #0073ac;
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 10%, transparent);
--fs-track: #eeeeee;
/* --success #009900 measured 3.78:1, #008000 5.14:1; --quaternary/--danger #e45735
--fs-track: #eee;
/* --success #090 measured 3.78:1, #008000 5.14:1; --quaternary/--danger #e45735
* measured 3.68:1, #c63c1b 5.17:1; --highlight #ffff4d measured 1.07:1 as text, #717100
* 5.17:1 — see the block comment above for why highlight fills warn */
--fs-good-base: #008000;
@@ -553,11 +552,11 @@
}
:root[data-palette="forum"][data-darkmode="true"] {
/* DARK — the forum's own dark scheme: #222 canvas, #ddd ink, both exactly as sampled */
--fs-bg-base: #222222;
--fs-bg-base: #222;
--fs-panel-base: #262626;
--fs-panel2-base: #2e2e2e;
--fs-border-base: #3a3a3a;
--fs-text: #dddddd;
--fs-text: #ddd;
--fs-dim: #a3a3a3;
--fs-faint: #969696;
/* --tertiary #0f82af measured 3.66:1 on --fs-bg and 3.12:1 on --fs-panel2, both under the
@@ -565,26 +564,24 @@
* 5.86:1 on --fs-bg and 5.00:1 on --fs-panel2 */
--fs-accent-base: #13a8e3;
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 15%, transparent);
--fs-track: #333333;
--fs-track: #333;
/* --success #1ca551 measured 4.24:1 on --fs-panel2, #1fb65a 5.11:1; --danger #e45735
* measured 3.69:1, #eb8066 5.05:1; --highlight #a87137 measured 3.29:1, #c99259 5.00:1 —
* same reasoning as the light block for why highlight fills warn */
--fs-good-base: #1fb65a;
--fs-warn-base: #c99259;
--fs-danger-base: #eb8066;
/* dark ink: these fills are light, and #222222 (= --fs-bg-base) gives 5.86/5.98/5.86/5.92 */
--fs-on-accent: #222222;
--fs-on-good: #222222;
--fs-on-warn: #222222;
--fs-on-danger: #222222;
/* dark ink: these fills are light, and #222 (= --fs-bg-base) gives 5.86/5.98/5.86/5.92 */
--fs-on-accent: #222;
--fs-on-good: #222;
--fs-on-warn: #222;
--fs-on-danger: #222;
/* The masthead, and the one place the forum's navy belongs. rgb(0,43,73) is what
forum.openwrt.org paints its header with in its DARK scheme — measured live; its light
scheme has a white header (--header_background #ffffff, ink #333333), which is what this
scheme has a white header (--header_background #fff, ink #333), which is what this
palette's light half already gives, so the navy is declared here and only here.
color-mix, not a flat fill: --fs-bar-bg is 88% of the panel over the page on purpose (a
bar is a thin strip the page ghosts through, 02-tokens.css), and a flat colour would drop
that. Over this palette's #222 canvas the strip lands near #06294a, where the bar's own
ink (#dddddd) measures 9.9:1 and its dimmed ink (#a3a3a3) 5.4:1. */
--fs-bar-bg: color-mix(in srgb, #002b49 88%, transparent);
A flat fill, like --fs-bar-bg everywhere (02-tokens.css): the bar's own ink (#ddd)
measures 10.7:1 on it and its dimmed ink (#a3a3a3) 5.8:1. */
--fs-bar-bg: #002b49;
}
}
luci-theme-footstrap/styles/04-nocolormix.css
-9
View File
@@ -47,17 +47,8 @@
--fs-focus-ring: var(--fs-focus-ring-solo);
--fs-focus-ring-invalid: 0 0 0 2px var(--fs-panel), 0 0 0 5px var(--fs-danger);
/* surfaces that are a near-opaque panel anyway */
--fs-glass: var(--fs-panel);
--fs-bar-bg: var(--fs-panel);
--background-color-medium: var(--fs-panel2);
/* depth cues: dropped rather than approximated — each is a 1px highlight whose whole
* purpose is subtlety, and an opaque one reads as a stray line. */
--fs-emboss: none;
--fs-text-emboss: none;
--fs-shadow-bar: 0 1px 0 var(--fs-border);
/* the scrim over an uploaded photo: --fs-photo-dim is a percentage this cannot apply, so
* take the fixed dialog scrim. Losing it entirely would leave login text over a photo. */
--fs-photo-scrim: var(--fs-scrim);
luci-theme-footstrap/styles/base/95-luci.css
-8
View File
@@ -177,7 +177,6 @@
white-space: nowrap;
/* surface: theme/45-misc.css (flat) — absorbed */
border-radius: var(--fs-radius-sm);
box-shadow: var(--fs-emboss);
display: inline-flex;
flex-direction: column;
/* a plate of single-line labels, not prose */
@@ -194,10 +193,6 @@
/* surface + ink: theme/45-misc.css — absorbed */
}
.ifacebox .ifacebox-head[style] {
text-shadow: var(--fs-text-emboss);
}
/* The !important fights luci-mod-network's inline zone-colour `style=`: a raw zone colour is too
* bright on a dark panel, so it is re-mixed at .4/.3.
*
@@ -231,9 +226,7 @@
padding: var(--fs-space-0-5);
/* surface: theme/45-misc.css (flat) — absorbed */
color: var(--fs-text);
text-shadow: var(--fs-text-emboss);
border-radius: var(--fs-radius-sm);
box-shadow: var(--fs-emboss);
cursor: default;
/* a badge is one line of label — the tight step, like .ifacebox above */
line-height: var(--fs-leading-tight);
@@ -328,7 +321,6 @@
display: inline-block;
white-space: nowrap;
color: var(--fs-text);
text-shadow: var(--fs-text-emboss);
}
.zonebadge > em,
luci-theme-footstrap/styles/pages/40-sshkeys.css
-1
View File
@@ -11,7 +11,6 @@
background: var(--fs-panel);
border: var(--fs-hairline);
border-radius: var(--fs-radius-lg);
box-shadow: var(--fs-shadow);
padding: var(--fs-space-4);
}
luci-theme-footstrap/styles/theme/15-wallpaper.css
-12
View File
@@ -59,18 +59,6 @@
background-size: var(--fs-pattern-size) auto;
}
/* A CBI form has dozens of .btn/.cbi-button; a backdrop-filter on each is a live
* backdrop-sampling layer over the pattern — costly on weak GPUs, and invisible anyway
* since every button is already opaque. Blur dropped from buttons entirely; closed
* dropdowns keep the frost (few of them, and their body can show the pattern through). */
/* var(--fs-blur), not a literal: one radius for every frosted surface (02-tokens.css), and
* the literal 6px was also invisible to prefers-reduced-transparency, which nulls the token
* (95-a11y-media.css) — the one frost that kept blurring for users who asked for opaque. */
:root[data-wallpaper="pattern"] .cbi-dropdown:not([open]) {
backdrop-filter: var(--fs-blur);
-webkit-backdrop-filter: var(--fs-blur);
}
/* No wash layer behind #view: the pattern shows through the gaps between the cards at
* full strength. Every block that carries text paints an opaque --fs-panel of its own,
* so nothing has to be dimmed globally. */
luci-theme-footstrap/styles/theme/20-shell.css
+2 -6
View File
@@ -104,8 +104,6 @@
flex-direction: row; flex-wrap: wrap; align-items: center;
gap: var(--fs-space-2-5); padding: var(--fs-space-2-5) var(--fs-space-4);
background: var(--fs-bar-bg);
backdrop-filter: var(--fs-blur);
-webkit-backdrop-filter: var(--fs-blur);
border-inline-end: 0; border-bottom: var(--fs-hairline);
/* the submenu popups anchor to this bar and must escape it */
overflow: visible;
@@ -159,8 +157,7 @@
position: absolute; inset-inline: 0 auto; top: calc(100% + 8px); z-index: var(--fs-z-flyout);
width: max-content; min-width: 200px; max-width: calc(100vw - 32px);
margin: 0; padding: var(--fs-space-2);
background: var(--fs-glass);
backdrop-filter: var(--fs-blur); -webkit-backdrop-filter: var(--fs-blur);
background: var(--fs-panel);
border: var(--fs-hairline);
border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow-pop);
}
@@ -323,7 +320,6 @@
flex-direction: column; flex-wrap: nowrap; align-items: normal;
gap: normal; padding: var(--fs-space-5) var(--fs-space-3-5);
background: var(--fs-panel);
backdrop-filter: none; -webkit-backdrop-filter: none;
border-inline-end: var(--fs-hairline); border-bottom: 0;
box-shadow: none;
/* `overflow: auto`, not overflow-y alone: the bar sets `overflow: visible` for its
@@ -388,7 +384,7 @@
width: auto; min-width: 0; max-width: none;
flex-direction: column; gap: var(--fs-space-0-5);
margin: 0 0 0 var(--fs-space-7); padding: 0;
background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
background: none;
border: 0; border-radius: 0; box-shadow: none;
overflow: hidden;
}
luci-theme-footstrap/styles/theme/30-tables.css
-1
View File
@@ -4,7 +4,6 @@
background: var(--fs-panel);
border: var(--fs-hairline);
border-radius: var(--fs-radius-lg);
box-shadow: var(--fs-shadow);
}
.cbi-section { padding: var(--fs-card-pad); margin-bottom: var(--fs-card-gap); }
/* a bare <legend>; the ones inside a .cbi-section are covered below. The ink is the heading
luci-theme-footstrap/styles/theme/35-alerts.css
-1
View File
@@ -22,7 +22,6 @@
background-color: var(--fs-panel);
background-image: linear-gradient(var(--fs-alert-tint, transparent), var(--fs-alert-tint, transparent));
color: var(--fs-text);
box-shadow: var(--fs-shadow);
gap: var(--fs-space-3);
}
/* ---- status lives in the stripe and the surface; the ring is always neutral ----
luci-theme-footstrap/styles/theme/40-tabs.css
-1
View File
@@ -23,7 +23,6 @@
background: var(--fs-panel);
border: var(--fs-hairline);
border-radius: var(--fs-radius-lg);
box-shadow: var(--fs-shadow);
/* kills a folder-tab baseline gradient (the 1px x 29px background image the strip
* conventionally carries) by zeroing its size rather than restating it — base's copy is
* absorbed, but any gradient a view or third-party app sets is sized away too */
luci-theme-footstrap/styles/theme/45-misc.css
-2
View File
@@ -153,7 +153,6 @@
background: var(--fs-panel);
border: var(--fs-hairline);
border-radius: var(--fs-radius-lg);
box-shadow: var(--fs-shadow);
margin: 0 0 var(--fs-card-gap);
padding: var(--fs-space-4);
font-size: var(--fs-type-xl);
@@ -176,7 +175,6 @@
border: var(--fs-hairline);
border-top: 0;
border-radius: 0 0 var(--fs-radius-lg) var(--fs-radius-lg);
box-shadow: var(--fs-shadow);
margin: 0 0 var(--fs-card-gap);
padding: 0 var(--fs-space-4) var(--fs-space-4);
color: var(--fs-dim);
luci-theme-footstrap/styles/theme/50-toplayout.css
-1
View File
@@ -28,7 +28,6 @@
/* align the bar's contents to the .fs-content column, so the brand and the menu line
* up with the headings and the cards below */
padding: 0 max(20px, calc((100% - var(--fs-content-max)) / 2 + var(--fs-content-pad)));
box-shadow: var(--fs-shadow-bar);
}
/* the menu rides the brand's row; its flex:1 opens the gap that pushes the right-hand
luci-theme-footstrap/styles/theme/60-inputs.css
+8 -8
View File
@@ -387,8 +387,10 @@
* lives in 03-palettes.css per palette/mode block, because a URI cannot read var(); it
* replaced a hardcoded grey that ignored palette and dark mode. */
select, select.cbi-input-select, .cbi-value-field select {
/* -webkit- only: Firefox has had the unprefixed property since 80. */
appearance: none; -webkit-appearance: none;
/* unprefixed only: the floor (Chrome 108/Firefox 101/Safari 15.4) clears unprefixed
* `appearance` everywhere (Chrome 84, Firefox 80, Safari 15.4 — docs/css.md). -webkit- was
* 96 B across these four rules for nothing this sheet still has to run on. */
appearance: none;
background-color: var(--fs-panel2);
background-image: var(--fs-select-chevron);
/* right inset from the scale, not a literal 12 — the .cbi-select shell below states the same
@@ -506,7 +508,7 @@
* one inside the 32px shell. */
.cbi-select select,
.cbi-select select:focus {
appearance: none; -webkit-appearance: none;
appearance: none;
outline: none;
border: none;
background: transparent;
@@ -782,22 +784,20 @@
/* RangeSlider (UIRangeSlider) — the one LuCI widget base leaves to native browser rendering.
* Token-driven track/thumb. */
input[type="range"] {
-webkit-appearance: none; appearance: none;
appearance: none;
width: 100%; height: 6px; min-height: 0; padding: 0;
background: var(--fs-track); border: 0; border-radius: var(--fs-radius-pill);
outline: none; box-shadow: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
appearance: none;
width: 16px; height: 16px; border-radius: 50%;
background: var(--fs-accent); border: 2px solid var(--fs-panel);
box-shadow: var(--fs-shadow); cursor: pointer;
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 16px; height: 16px; border-radius: 50%;
background: var(--fs-accent); border: 2px solid var(--fs-panel); cursor: pointer;
/* same shadow the -webkit thumb carries — Firefox had silently drifted flat */
box-shadow: var(--fs-shadow);
}
input[type="range"]::-moz-range-track { background: var(--fs-track); height: 6px; border-radius: var(--fs-radius-pill); }
/* -solo: the track sets `border: 0` and `outline: none`, so there is no second channel here
luci-theme-footstrap/styles/theme/75-search.css
+1 -2
View File
@@ -26,8 +26,7 @@
.fs-search-box {
display: flex; flex-direction: column; min-height: 0;
width: 100%; max-width: 560px; max-height: min(70dvh, 560px);
background: var(--fs-glass);
backdrop-filter: var(--fs-blur); -webkit-backdrop-filter: var(--fs-blur);
background: var(--fs-panel);
border: var(--fs-hairline); border-radius: var(--fs-radius-lg);
box-shadow: var(--fs-shadow-pop);
overflow: hidden;
luci-theme-footstrap/styles/theme/95-a11y-media.css
+3 -8
View File
@@ -21,16 +21,11 @@
}
}
/* prefers-reduced-transparency — the user asked the OS for opaque surfaces. Every frosted surface
* in this theme is a translucent fill plus a backdrop-filter blur, and both go: the fill becomes
* the opaque panel, and the blur — the most expensive paint on a phone GPU, the sticky bar's
* backdrop being resampled on every scrolled frame — has nothing left to show through. This also
* gives a measured escape hatch on devices where that blur is too costly. */
/* prefers-reduced-transparency — the user asked the OS for opaque surfaces. Every surface in the
* theme is opaque already: no blur, an opaque bar, opaque pop surfaces. The one thing left is the
* wash over an uploaded photo. */
@media (prefers-reduced-transparency: reduce) {
:root {
--fs-bar-bg: var(--fs-panel);
--fs-glass: var(--fs-panel);
--fs-blur: none;
/* the uploaded background is a translucent wash over a photo — exactly the effect this
* user asked the OS to drop. Make the scrim opaque so the canvas is flat, not a photo
* ghosting through (16-login-bg.css lays it over the image as one background layer). */
luci-theme-footstrap/styles/theme/97-print.css
+2 -3
View File
@@ -17,9 +17,8 @@
--fs-bg: #fff; --fs-panel: #fff; --fs-panel2: #f4f4f4;
--fs-text: #000; --fs-dim: #333; --fs-faint: #555;
--fs-border: #bbb; --fs-track: #ddd;
--fs-shadow: none; --fs-shadow-pop: none; --fs-shadow-bar: none;
--fs-emboss: none; --fs-text-emboss: none;
--fs-bar-bg: #fff; --fs-glass: #fff; --fs-blur: none;
--fs-shadow-pop: none;
--fs-bar-bg: #fff;
}
/* Navigation, the search overlay and the action buttons cannot be used on paper. The
* Appearance popover was on this list; it is a PAGE now, and a page prints — an admin