Andreas Reinhold / reiniandClaude Opus 5
c545fb69ef
Plan step 33. foundation.css is the one required import: the full material layer statement, then plain imports of its parts, each opening with the same statement. - foundation/reset.css (material.reset): Tailwind 4's preflight rule for rule, with M3's on-surface-variant placeholder and no typeface. - foundation/hidden.css: [hidden] and [x-cloak], outside every layer. - foundation/tokens.css (material.tokens): the token files. - foundation/base.css (material.base): the page's surface, ink and brand typeface, and the font face. - foundation/interaction.css (material.base): md-state-layer, md-focus-ring, md-touch-target and md-link, the plain-CSS forms of the utilities; md-state-layer also takes data-md-dragged, and md-touch-target is 48px (space600) where the utility reads 3rem. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
237 lines
5.4 KiB
CSS
237 lines
5.4 KiB
CSS
/*
|
|
* 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 <html>;
|
|
* - 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;
|
|
}
|
|
}
|