Andreas Reinhold / reiniandClaude Opus 5
247c596c3a
An over-engineering audit of the whole tree, applied in five reviewed batches. Behaviour stays the same except where UPGRADE.md says otherwise. PHP: the showcase and error-page stylesheets are prebuilt into resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import (first occurrence kept, the order an application's build gives), instead of Stylesheets::bundle() inlining imports on every request; only the import walk DesignGuard needs stays. SchemeStylesheet::withProfiles() replaces three copies of the scheme-plus-profiles loop, material:scheme leaves spec and contrast checks to the node script that already made them, and the error page's scheme cache, the hashed view namespace, the translations path with no lang/ folder and DesignGuard's 1.x-name hints are gone. JS: the androidx shape port progress.js and both bin scripts each carried lives once in resources/js/shapes.js (the generated SVGs are unchanged); util.js holds ringIndex(), ms(), reopenGuard() and remember(), which were written out several times; listeners are released through AbortController; tooltip.js's hoverPopover() serves the rich tooltip too. CSS: every rule for an element inside the navigation rail queries `--md-navigation-rail-value` instead of repeating the seven collapsed conditions under five media branches; badge, alert, progress, slider and button read one non-inheriting colour-role table (components/color.css); the dialog chrome, the submenu's popover chrome, the chip's state layer and touch target, and the visually-hidden inputs use the shared rules they copied; foundation/tokens.css is folded into foundation.css. Views: Support\Field and Support\Link replace the error-key, bound-value and link-attribute blocks copied into the fields and link components; the timepicker period group, the menu filter and the showcase head are partials; the datepicker's steppers and entry fields are loops; component docblocks no longer restate SKILL.md. Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces four per-group files, DesignGuardTest and the layout-component tests use datasets, browser tests share one ready() helper, CSS parsing lives in ComponentStylesheet alone. docs/audits and the finding IDs citing it are removed, as are pestphp/pest-plugin-laravel, the unused composer scripts and check:font; the lint job runs in the feature job, which now installs node packages so the prebuilt-stylesheet staleness test runs in CI. Feature suite 1177 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
262 lines
10 KiB
CSS
262 lines
10 KiB
CSS
/*
|
|
* `<x-app-bar>`: M3 Expressive's top app bars (AppBarTokens.kt, AppBarSmallTokens.kt,
|
|
* AppBarMediumFlexibleTokens.kt, AppBarLargeFlexibleTokens.kt, androidx Compose Material 3,
|
|
* Apache-2.0; docs/reference/m3/components-navigation-selection-inputs.md § Top App Bar).
|
|
*
|
|
* [data-md-app-bar] the bar; data-md-variant, data-md-sticky, data-md-subtitled,
|
|
* data-md-scrolled/data-md-collapsed (resources/js/app-bar.js)
|
|
* [data-md-app-bar-row] 64px, sticky at the top of the bar
|
|
* [data-md-app-bar-leading] the `navigation` slot
|
|
* [data-md-app-bar-headline] [data-md-app-bar-title], [data-md-app-bar-subtitle]
|
|
* [data-md-app-bar-search] the `search` variant's slot
|
|
* [data-md-app-bar-trailing] [data-md-app-bar-action], [data-md-app-bar-overflow]
|
|
* [data-md-app-bar-expanded] medium/large's big title, under the row
|
|
*
|
|
* small 64px, title-large title (label-medium subtitle), 4px from the edges, the title 16px
|
|
* from the start or straight after the navigation icon
|
|
* center the same, the title centred — a three-column grid, so it shrinks against whatever is
|
|
* beside it rather than ellipsising underneath it: a fixed inset fit exactly one
|
|
* of M3's two trailing buttons
|
|
* medium 112px (136px with a subtitle): the 64px row of icons over a headline-medium title
|
|
* large 120px (152px with a subtitle): a display-small title
|
|
* search the row holds a search bar, full width to 312px and then half of what is left
|
|
*
|
|
* The container is the surface, and surface-container once content scrolls under it. A medium or
|
|
* large bar collapses into the small one without script moving anything: the bar is sticky at a
|
|
* negative top, so it scrolls up until only 64px of it remain, while its row of icons is sticky at
|
|
* 0 inside it and stays put — the big title scrolls away under the row. Script only says when that
|
|
* has happened (resources/js/app-bar.js), so the small title can fade in and the colour change.
|
|
*
|
|
* Trailing actions given as a list collapse into an overflow menu below `medium` and come back
|
|
* from it, by media query alone (the site's "trailing actions collapse into an overflow menu at
|
|
* smaller breakpoints" and "become visible again at larger sizes", read together with "up to two
|
|
* icon buttons" and, for a wider window, "up to four trailing icons"): both forms of every action
|
|
* are in the page, and each width hides the one it does not use, so nothing flashes and no script
|
|
* counts.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './button.css';
|
|
@import './menu.css';
|
|
@import './menu-item.css';
|
|
|
|
@layer material.components {
|
|
[data-md-app-bar] {
|
|
--app-bar-row: 64px;
|
|
--app-bar-height: var(--app-bar-row);
|
|
|
|
z-index: 20;
|
|
display: block;
|
|
min-height: var(--app-bar-height);
|
|
padding-top: var(--material-safe-top, env(safe-area-inset-top));
|
|
background-color: var(--md-sys-color-surface);
|
|
color: var(--md-sys-color-on-surface);
|
|
transition-property: background-color;
|
|
transition-duration: var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-default);
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='medium'] {
|
|
--app-bar-height: 112px;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='medium'][data-md-subtitled] {
|
|
--app-bar-height: 136px;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='large'] {
|
|
--app-bar-height: 120px;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='large'][data-md-subtitled] {
|
|
--app-bar-height: 152px;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-sticky] {
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
/* `--app-bar-measured` is the bar's real height (a title can wrap), set by app-bar.js. */
|
|
[data-md-app-bar][data-md-sticky]:is([data-md-variant='medium'], [data-md-variant='large']) {
|
|
top: calc(var(--app-bar-row) - var(--app-bar-measured, var(--app-bar-height)));
|
|
}
|
|
|
|
[data-md-app-bar][data-md-scrolled] {
|
|
background-color: var(--md-sys-color-surface-container);
|
|
}
|
|
|
|
[data-md-app-bar-row] {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
min-height: var(--app-bar-row);
|
|
padding-inline: var(--md-sys-measurement-space50);
|
|
background-color: inherit;
|
|
}
|
|
|
|
[data-md-app-bar-leading],
|
|
[data-md-app-bar-trailing] {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-app-bar-leading] {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-app-bar-trailing] {
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
/* `actions` as a list: every action is both an icon button and a menu item, and the width of
|
|
the window says which one is drawn — up to two trailing icon buttons below `medium` and four
|
|
from it, an overflow button counted among them. The wrappers stay out of the row's layout
|
|
until a width hides them. */
|
|
[data-md-app-bar-action],
|
|
[data-md-app-bar-overflow] {
|
|
display: contents;
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-app-bar-action][data-md-overflows-compact],
|
|
[data-md-app-bar-overflow='medium'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-app-bar-overflow='compact'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-app-bar-headline] {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex: 1 1 0%;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-inline: 12px;
|
|
}
|
|
|
|
[data-md-app-bar-row]:has([data-md-app-bar-leading]) [data-md-app-bar-headline] {
|
|
padding-inline-start: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-app-bar-title] {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font: var(--md-sys-typescale-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
|
}
|
|
|
|
[data-md-app-bar-subtitle] {
|
|
overflow: hidden;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font: var(--md-sys-typescale-label-md);
|
|
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
|
}
|
|
|
|
/* Centred: a three-column row — leading, headline, trailing — so the headline is centred in the
|
|
window and shrinks against whatever is actually beside it. M3 allows two trailing icon
|
|
buttons, which a fixed inset for one would have let a long title ellipsise underneath. */
|
|
[data-md-app-bar][data-md-variant='center'] [data-md-app-bar-row] {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='center'] [data-md-app-bar-leading] {
|
|
grid-column: 1;
|
|
justify-self: start;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='center'] [data-md-app-bar-headline] {
|
|
grid-column: 2;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-self: center;
|
|
padding-inline: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='center'] [data-md-app-bar-trailing] {
|
|
grid-column: 3;
|
|
justify-self: end;
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
/* The search bar fills the space between the leading and trailing elements until it is 312dp
|
|
wide, and then grows into only half of what is left. The percentage is of the row
|
|
rather than of that space, which CSS cannot name without measuring it; below 312px the cap
|
|
never binds, so a phone still gets the whole row. */
|
|
[data-md-app-bar-search] {
|
|
min-width: 0;
|
|
max-width: calc(312px + (100% - 312px) / 2);
|
|
flex: 1 1 0%;
|
|
margin-inline: auto;
|
|
padding-inline: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
/* Medium and large: the row's title is the collapsed one, shown once the big one has gone. */
|
|
[data-md-app-bar]:is([data-md-variant='medium'], [data-md-variant='large']) [data-md-app-bar-row] [data-md-app-bar-headline] {
|
|
opacity: 0;
|
|
transition-property: opacity;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-app-bar][data-md-collapsed] [data-md-app-bar-row] [data-md-app-bar-headline] {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Heights from the tokens: the title (and subtitle) lines and the space under them fill what the
|
|
row leaves — 36 + 12px medium, 36 + 20 + 16px with a subtitle; 44 + 12px large, 44 + 24 + 20px. */
|
|
[data-md-app-bar-expanded] {
|
|
display: flex;
|
|
min-height: calc(var(--app-bar-height) - var(--app-bar-row));
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-subtitled] [data-md-app-bar-expanded] {
|
|
padding-bottom: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='large'][data-md-subtitled] [data-md-app-bar-expanded] {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
[data-md-app-bar-expanded] [data-md-app-bar-title] {
|
|
white-space: normal;
|
|
font: var(--md-sys-typescale-headline-md);
|
|
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
|
|
}
|
|
|
|
[data-md-app-bar-expanded] [data-md-app-bar-subtitle] {
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='large'] [data-md-app-bar-expanded] [data-md-app-bar-title] {
|
|
font: var(--md-sys-typescale-display-sm);
|
|
letter-spacing: var(--md-sys-typescale-display-sm-tracking);
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='large'] [data-md-app-bar-expanded] [data-md-app-bar-subtitle] {
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
}
|
|
}
|