RustProxy/src/admin/web/css

Administration stylesheet

This directory is the source of the shared dashboard and login stylesheet. manifest.json defines its complete cascade order. A normal Cargo build runs scripts/build/panel_css.py, compacts these sources conservatively and embeds one panel-style.css from Cargo's OUT_DIR into the binary.

The browser continues to request /assets/style_<build-id>.css once. The existing fingerprint, login access rules and cached gzip/Brotli/Zstandard responses remain in use. Source modules are not separate HTTP assets. The documentation Reader/API page keeps its independent ../docs.css stylesheet.

Module ownership and order

Order	File	Responsibility
1	00-tokens.css	Theme palettes, appearance tokens and custom properties shared with JavaScript preferences
2	10-base.css	Reset, typography, buttons, form fields, tables, shared cards, dialogs and overlays
3	20-shell.css	Startup, login, navigation, page structure and editor draft dock
4	30-overview.css	Shared charts/legends and Overview metrics, density, widget layout controls and dashboard presets
5	40-editors.css	Vhosts and backends, Web Server, Streams, redirects, 404 hosts and ACL controls
6	50-settings.css	Settings, certificates, integrations and Docker service/agent management
7	60-monitoring.css	Traffic, cache, transformations, live/stored logs and configuration history
8	70-responsive.css	All viewport/container queries and reduced-motion adjustments, in their required cascade order

Editing rules

• Update the rule in its owning module. Keep one occurrence of a selector in each conditional scope; group selectors when they deliberately share one declaration block and the move preserves cascade behavior.
• Reuse the existing theme and appearance variables. JavaScript also writes live values such as chart geometry, widget layout and preferences; retain those variable and class names when reorganizing CSS.
• Place a responsive adjustment inside the existing matching condition in 70-responsive.css. A container name needs whitespace before its condition, for example @container overview-canvas (max-width: 700px).
• Preserve the manifest order and the order of overlapping conditions. The query order is part of the cascade; do not sort breakpoints mechanically. In particular, the 760px condition follows 620px to preserve the later Transform and file-log adjustments. Container queries follow viewport rules.
• Explicit dashboard spans set --overview-widget-placement on the widget; one common rule applies it to grid-column. Container queries change that variable for supported span values. Keep the generic no-span defaults separate so the legacy row-start and custom-layout contracts remain intact.
• Add a new module only when it has a distinct owner and register it once in the manifest. Missing, repeated and unlisted CSS files fail the build. @import, @charset, path traversal and symlinked modules are rejected.
• Group identical declaration bodies within each compatible selector family. Moving them across intervening rules requires checking specificity and source order, including combinations of state classes. Keep vendor pseudo-elements in separate compatible lists; a WebKit/Gecko selector mix can invalidate the whole rule in another engine.

The builder removes formatting whitespace beside braces/semicolons and normal comments. It preserves selector whitespace, escaped tokens, strings, functions and declaration order. It does not sort, merge or otherwise optimize rules at build time. No Node.js/npm or runtime stylesheet compiler is required.

Verification

From the repository root:

python3 scripts/build/panel_css.py --check
python3 tools/dev/test_panel_css.py
python3 scripts/preflight.py
python3 scripts/audit_css_usage.py --strict
bash dev.sh check
bash dev.sh test

The first three commands require only Python 3.10+. The optional CSS audit requires tinycss2 and cssselect2; install them in a development environment, not on the deployed server. --structure-json PATH records repeated selectors, conditional blocks, properties and identical declaration blocks. --json PATH records selector references. The audit follows JavaScript embedded by Rust and flags scripts outside those entry points for review. Missing literal class names still need manual review because JavaScript can construct them. Strict mode also rejects identical declaration bodies within the same compatible selector family. Its only body-repetition exception is a single rule per vendor family when merging would create an incompatible selector list.

Use browser comparisons for layout changes: cover login and every workspace, open dialogs and expanded rows, themes, corner styles, dashboard density/width, hidden/disabled states, viewport breakpoints, container widths and reduced motion. A source audit alone does not establish visual or runtime equivalence. Rebuild the Rust binary after every stylesheet change.

When replacing a previously built checkout with a source ZIP, include the root build.rs. If Cargo reports that OUT_DIR/panel-style.css is missing, follow the generated-CSS recovery steps. Source preflight does not generate Cargo outputs. The build tracks the generated bundle as well as its inputs, and rejects a missing or empty output.