/* * The reset: what a browser draws before any stylesheet, taken back to a clean start. * * Rule for rule the reset the components were built on, Tailwind CSS 4's preflight (MIT, * © Tailwind Labs, after modern-normalize), so a component looks the same whether an application * still builds Tailwind or not: every box `border-box` with a `0 solid` border and no margin or * padding, headings and lists unstyled, form controls inheriting font, colour and tracking with no * background or radius, media as blocks that never overflow their parent. Three differences: * * - no typeface here: foundation/base.css sets `--md-ref-typeface-brand` on ; * - a placeholder is `on-surface-variant`, the colour of M3's text field placeholder (androidx * FilledTextFieldTokens.kt, InputPlaceholderColor), not half the text colour; * - it sits in `material.reset`, the lowest layer, so every package rule and every application * rule outranks it without a specificity fight. * * The two rules that must win everything — `[hidden]` and `[x-cloak]` — are foundation/hidden.css. */ @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility; @layer material.reset { /* Padding and border inside the width; no default margin, padding or border. */ *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } /* A readable line height and tab size, no font resizing on rotation (iOS), no tap flash. */ html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } /* Replaced elements are blocks, aligned to the middle when made inline again. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } /* Form controls take the text around them, with no background, radius or disabled fade. */ button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; color: var(--md-sys-color-on-surface-variant); } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } /* Date and time inputs keep one height and follow text-align (Safari). */ ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } }