/* WePlay web components - element defaults. * * Separate from `components.css` on purpose, and separately linked, because the two have opposite * contracts. `components.css` never names a bare element: adopting it cannot restyle a consumer's * own markup, which the library's own test enforces. This file is the other half - it exists to * restyle bare elements - so a consumer opts into it rather than getting it with the components. * * Two layers, in this order: * * 1. Eric Meyer's reset, taken as published. It flattens every element to the same nothing, so * that what a component looks like is what the component says and never what the browser * happened to think of the tag it was built from. * 2. What this library asks for on top, which is the part Meyer's own instructions say to * write: the box model the components are drawn in, the page they sit on, and the few * defaults the reset takes away that something here was relying on. * * Order between the two is load-bearing in both directions, and each rule below that depends on * it says so. * * weplay-app-web does not link this. It carries a reproduction of Bootstrap 5's Reboot instead, * which 136 templates were written against; replacing that with this file is a deliberate change * of its own rather than a side effect of shipping this one. `gallery.html` does link it, so the * file is exercised by every component on every review. */ /* --- 1. the reset -------------------------------------------------------------------- */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) Reproduced rather than rewritten, obsolete tags and all: `applet`, `acronym`, `big`, `center`, `strike` and `tt` cost nothing to name, and leaving them out would make this a version of the reset rather than the reset. The order of `font-size` and `font` is the point rather than an accident, the same way the `text-align` pair in `components.css` is: `font` is a shorthand that sets `font-size`, so it has to come second for the size to end up inherited. Sorting these two alphabetically, which is this repository's habit everywhere else, reverses which one wins. */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* --- 2. what the components ask for --------------------------------------------------- */ /* The box model the components are drawn in. `.wp-content` is the clearest case: it sets a padding and a width of 100% in the same rule, which only lands inside its column if padding is part of the width. Inherited rather than set on `*` so a consumer with its own box model on a subtree keeps it. */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /* The page the components sit on. * * After the reset, and that is the order that matters: `font` is a shorthand carrying a line * height, so the reset's `body { line-height: 1 }` would otherwise flatten every line of text on * the page to the height of its own glyphs. * * `margin: 0` is the reset's too, repeated because this rule is where the page is described and a * reader should not have to hold two files in their head to see it. * * `-webkit-text-size-adjust` is Safari on iOS inflating text when a phone is turned sideways, * which resizes a card's contents without resizing the card. `-webkit-tap-highlight-color` is the * grey box it flashes over a tapped link: the components are a port of an app that does not do * that, and every one of them already says what being pressed looks like. */ body { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; background: var(--wp-color-surface-base); color: var(--wp-color-text-primary); font: var(--wp-font-style-body); margin: 0; overflow-x: hidden; width: 100%; } /* The weight the reset takes off `b` and `strong`, put back because this library's markup is relying on it: a notice leads with one, the error pages state their reason in one, and nothing in `components.css` says anything about either tag. Meyer's instructions are to re-declare what you need, and this is what was being needed silently. */ b, strong { font-weight: 700; } /* And the slant, which goes the same way for the same reason. Nothing in this library's own markup leans on it today, unlike the weight above - it is here because a consumer writing prose into `.wp-prose` would otherwise find that emphasis silently does nothing. */ em, i { font-style: italic; } /* `display: block` removes the descender gap under an image or an icon - the line box a replaced inline element sits on, which the reset's own `vertical-align: baseline` is what puts it on, and which shows up as a few stray pixels at the foot of every card that ends in one. `max-width` keeps an oversized asset inside its card rather than widening the page. */ canvas, img, picture, svg, video { display: block; max-width: 100%; } /* A form control does not inherit the page's typeface in any browser, and the reset does not name one: its list reaches `fieldset`, `form`, `label` and `legend` but stops short of the controls themselves. Without this, a `