Skip to main content

UA

Constant UA 

Source
pub const UA: &str = "/*\n * lumen-skin-ua - the always-on user-agent stylesheet.\n *\n * Unlike default.css / macos.css / windows.css / linux.css, this one is\n * never selected by name and can\'t be opted out of: `load_ir` folds it\n * into the cascade for every app, skinned or not, at the lowest\n * precedence - below any `<root skin=\"...\">` sheet and below the app\'s\n * own main.css. It is the sizing floor a bare, skinless app still gets,\n * the same role a browser\'s built-in stylesheet plays.\n *\n * Every property here is an ordinary UA-origin default: a skin or app\n * rule for the same property on the same element always wins, because\n * this sheet\'s rules are numbered first in the combined cascade (see\n * `run::loading::load_ir`), so an equal-specificity skin/author rule\n * always sorts after it.\n *\n * Two defaults could not be expressed as plain rules here and stay in\n * `lumen_runtime::spawn::apply_ua_style_defaults` instead - see that\n * function\'s doc comment for why:\n *   - `<switch>`\'s `min-width` applies only when `width` is ALSO unset,\n *     a cross-property condition CSS has no syntax for.\n *   - `<input>` / `<textarea>` default to `overflow: hidden` only when\n *     neither the `overflow` shorthand nor `overflow-x` / `overflow-y`\n *     was authored anywhere; a plain `overflow-x` rule here would win\n *     over an author\'s shorthand-only override instead of losing to it.\n */\n\n/* What the layout tags are. A `<for>` is a column because the common\n   case is a vertical list of rows. A `<scroll>` scrolls vertically; its\n   `scroll=\"x\"` attribute turns it horizontal and lays its children out in\n   a row. The web target keeps its own copy of these in\n   web/src/reset.css. */\ncolumn, scroll, root, overlay, for, dialog, dropdown { flex-direction: column; }\nrow, title-bar, checkbox, radio, progress { flex-direction: row; }\nscroll    { scroll: y; }\nspacer    { grow: 1; }\n/* A `<dialog>` covers its parent the same way; that default lives in\n   `apply_ua_style_defaults`, because a rule here would reach the web\n   target\'s stylesheet, where a modal dialog is `position: fixed`. */\noverlay   { position: absolute; inset: 0; }\ndialog    { align: center; justify: center; }\n\nroot      { width: 100%; height: 100%; }\ntitle-bar { width: 100%; height: 32; }\n\n/* Tap-size floor only; width and height come from the measured label +\n   author padding. */\nbutton { min-height: 36; }\n\n/* The text buffer starts empty (no measurable content), so a bare\n   `<input>` / `<textarea>` needs a usable floor. Minimums, not fixed\n   sizes: typed text and author padding still grow it. */\ninput, textarea { min-height: 24; min-width: 160; }\n\n/* No text to measure - the track is a fixed theme metric. */\ntoggle { height: 36; min-width: 96; }\n/* Compact pill track (iOS / Material switch proportions), narrower\n   than the `<toggle>` slab. `min-width` lives in Rust - see the header\n   comment above. */\nswitch { height: 28; }\nslider { height: 36; min-width: 160; }\n\n/* Tap-size floor for the whole row; the indicator + label supply the\n   intrinsic size. */\ncheckbox, radio { min-height: 24; }\n\n/* Track fills its container by default (Qt/web progress); slim groove\n   height. */\nprogress { width: 100%; height: 6; }\n\n/* Synthetic part children (`.checkbox-box` / `.radio-dot` /\n   `.progress-fill`): UA floors beneath the skins so a skinless app\n   still shows a usable indicator. `.progress-fill` width stays\n   runtime-driven (`sync_progress_fill`). */\n.checkbox-box, .radio-dot { width: 18; height: 18; }\n.progress-fill { height: 100%; }\n\n/* The closed face of a `<dropdown>` and the rows in its panel. Both fill\n   the box above them, so sizing the `<dropdown>` sizes the control and\n   the option rows follow the panel. The row height and the gap from the\n   edge to the text are theme metrics: a skin\'s own `.dropdown-button` /\n   `.dropdown-option` rule outranks these, which is why they are not\n   written as attributes in the parser. `.dropdown-button` takes its\n   height floor from the `button` rule above. */\n.dropdown-button, .dropdown-option { width: 100%; padding: 0 12; }\n.dropdown-option { min-height: 32; }\n\n/* The metrics of the parts `<tabs>`, `<menu>` and the pickers expand into.\n   Each is wrapped in :where() so it weighs nothing: any rule a skin or an\n   app writes for the part, a plain `button { padding }` included, wins. */\n:where(.tabs, .tab-strip) { width: 100%; }\n:where(.tab-strip) { gap: 4; }\n:where(.tab-btn) { height: 36; grow: 1; padding: 0 12; }\n:where(.menu-panel) { min-width: 160; }\n:where(.menu-item) { height: 28; width: 100%; padding: 0 12; }\n:where(.menu-separator) { height: 1; width: 100%; }\n:where(.date-picker, .time-picker) { width: 180; }\n/* A separator is a rule line, not a gap: it keeps its pixel rather than\n   taking the grow `spacer` gives the tag it is spelled with. */\n.menu-separator { grow: 0; }\n";
Expand description

The always-on user-agent baseline: per-tag sizing floors (button / input / toggle / switch / slider / progress minimums, root / title-bar fill) applied beneath any opt-in skin and beneath app CSS. Folded into the combined cascade by run::loading::load_ir for every app, skinned or not - the framework’s equivalent of a browser’s built-in stylesheet.