a class; a bare
keeps the margin. */
:where(details[class][open]) > summary {
margin-block-end: 0;
}
/* A list carrying a layout class keeps the UA's 40px inline padding, so
`
- ` is never actually full width. SmoothCSS only
resets `ul:not([class])` and `[role=list]`. Add role="list" for the
semantics; this makes the geometry right either way. */
:where(ul, ol):where(
.cluster,
.repel,
.switcher,
.center,
.grid-auto,
.stack,
[class*='stack-']
) {
margin-block: 0;
padding-inline-start: 0;
list-style: none;
}
/* Global caps every
- at --max-content-inline-size (70ch) for readability. Right for prose, wrong the moment the list item is a layout: its border, background or divider stops two thirds of the way across the row. Any classed list opts out, the same way SmoothCSS only styles `ul:not([class])` in the first place. */ :where(ul[class], ol[class]) > li { max-inline-size: none; } /* 3. Fixes — links and controls -------------------------------------------- */ /* smooth.css has `a:hover { text-decoration: none }` — hovering a link makes its underline vanish, which is backwards: the underline is the affordance. Keep it present and let it firm up instead. Wrapped in :where() on purpose. Being in `skins` is what beats smooth.css's global rule, so the selector needs no specificity of its own — and at zero specificity any component that styles a bare (a menu, a nav, a breadcrumb, pagination) still wins, instead of getting stray underlines on hover. */ :where(a:not([class])) { text-decoration-color: var(--color-outline); text-underline-offset: 0.2ex; } :where(a:not([class]):hover) { text-decoration-line: underline; text-decoration-color: currentColor; } /* Form controls end up three different heights: SmoothCSS gives them the same padding and border but no shared line-height, so each falls back to its own intrinsic box. Measured in Chromium: text and email 37px, date 39px, select 40.4px — and in Safari the date field is taller again, because its inner value box carries a height no line-height reaches. So state the height outright rather than deriving it. A single-line field takes --control-h and centres its text natively; a textarea is multi-line and a [multiple]/[size] select is a list box, so both keep their natural height. Borrowed from chloride, which sizes buttons from the same token. */ :where( input:not( [type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'] ), select:not([multiple], [size]) ) { block-size: var(--control-h); } /* Safari and Firefox have no `appearance: base-select`, so they keep the native chrome and ignore SmoothCSS's ::picker(select) styling — including the chevron. That is why selects look different per browser and why the arrow does not follow the colour scheme. Draw our own. */ @supports not (appearance: base-select) { select:not([multiple], [size]) { appearance: none; padding-inline-end: 2.25em; background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 0.75em center; background-size: 1em; } [dir='rtl'] select:not([multiple], [size]) { background-position: left 0.75em center; } } /* Date and time inputs. Safari sizes these from the UA sheet: taller than their neighbours, value centred, and wider than the width they were given. `appearance: none` hands the sizing back. In :where() so an explicit width still wins. Only visible on a device. */ :where( input[type='date'], input[type='time'], input[type='month'], input[type='week'], input[type='datetime-local'] ) { appearance: none; inline-size: 100%; min-block-size: var(--control-h); } /* Safari's inner value box: centred, and carrying a margin of its own. */ ::-webkit-date-and-time-value { text-align: start; margin: 0; } /* Keep the picker button at the far edge rather than tucked against the value once the field is wider than its content. */ ::-webkit-calendar-picker-indicator { margin-inline-start: auto; } /* iOS collapses