/* Tailwind's preflight, for the ported regions only. * * The React app pulls all of Tailwind, but its website pages use CSS modules * exclusively - there is not one utility class in their JSX - so almost none of * that output reaches the page. What does reach it is preflight's element-level * reset, and it is not cosmetic: the modules are written against it. They set a * heading's size and leave its margin to preflight; they set a border's width and * leave `border-style: solid` to preflight. Drop it and headings inherit Frappe's * `h3 { margin-top: 3.5rem }`, borders declared by width alone never paint, and * the whole page drifts a few pixels in every direction. * * Scoped to `.rp-scope`, the wrapper each ported region carries, rather than to * . A page that has not been ported yet is still styled by the hand-rolled * `airce-*` CSS, which was written against Frappe's defaults and would break if * those defaults were reset underneath it. Restricting the reset to ported * regions lets the two coexist while the migration runs. * * Loaded before brand.css and the page stylesheets: this is a floor. Everything * that names an element explicitly is meant to win against it, and does. */ /* Preflight's `html { line-height: 1.5 }` / `body { line-height: inherit }`. * Frappe's website theme sets 1.7 on body, which inherits into every ported * region and stretches each line by a couple of pixels. Set on the wrapper, not * on `*`, so it inherits the way it does in the React app and any module rule * that states its own line-height still wins. Inheritance passes through * `display: contents` unaffected. */ .rp-scope { line-height: 1.5; /* Frappe's theme sets `text-align: left` on body; the React app leaves it at the initial `start`. The two render identically in a left-to-right document, but they are not the same computed value, and leaving the difference in place puts a false positive on roughly every element of every page when the two sides are compared property by property. */ text-align: start; /* Frappe's theme sets `body { letter-spacing: 0.02em }`, which the React app does not. It belongs here on the wrapper and NOT on `*`: a module commonly sets a heading's letter-spacing and lets the span inside it inherit, and resetting every element individually severs that inheritance - the child snaps back to `normal` while React keeps the parent's value. */ letter-spacing: normal; } .rp-scope *, .rp-scope *::before, .rp-scope *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; } .rp-scope h1, .rp-scope h2, .rp-scope h3, .rp-scope h4, .rp-scope h5, .rp-scope h6 { font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; /* Not part of Tailwind's preflight, which leaves headings uncoloured - but Frappe's theme sets `h1…h6 { color: #171717 }`, and a module that never states a heading colour then gets Frappe's instead of inheriting the body's `#262019`. The links inside those headings inherit it too. Its `letter-spacing: -1.3px` on h1 needs the same answer: a module that sets a heading's size and weight but not its tracking expects to inherit. */ color: inherit; letter-spacing: inherit; } /* `label` is not in Tailwind's list because a browser gives it no margin to begin with. Bootstrap, which Frappe's web bundle carries, gives it `margin-bottom: 0.5rem` - so restoring the browser default here is what matches the React page. */ .rp-scope p, .rp-scope blockquote, .rp-scope figure, .rp-scope figcaption, .rp-scope hr, .rp-scope pre, .rp-scope dl, .rp-scope dd, .rp-scope label { margin: 0; /* Tailwind states no line-height for these, so they inherit. Frappe's theme sets `p { line-height: 1.7 }` outright, and a rule on the element beats an inherited value, so the inheritance has to be asked for explicitly. */ line-height: inherit; } .rp-scope ol, .rp-scope ul, .rp-scope menu { list-style: none; margin: 0; padding: 0; } .rp-scope a { color: inherit; text-decoration: inherit; } .rp-scope img, .rp-scope svg, .rp-scope video, .rp-scope canvas, .rp-scope audio, .rp-scope iframe, .rp-scope embed, .rp-scope object { display: block; vertical-align: middle; /* Frappe's theme sets `img { position: relative }`. */ position: static; } .rp-scope img, .rp-scope video { max-width: 100%; height: auto; } .rp-scope button, .rp-scope input, .rp-scope optgroup, .rp-scope select, .rp-scope textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } .rp-scope button, .rp-scope [type="button"], .rp-scope [type="reset"], .rp-scope [type="submit"] { -webkit-appearance: button; background-color: transparent; background-image: none; cursor: pointer; } .rp-scope table { text-indent: 0; border-color: inherit; border-collapse: collapse; } .rp-scope strong, .rp-scope b { font-weight: bolder; } /* Bootstrap, which Frappe's web bundle carries, gives `.container` a 15px gutter. The React app has no Bootstrap, so a module's `.container` - a name several of them use - starts with no padding at all. The ported rules set `max-width` and `margin` and say nothing about padding, so Bootstrap's slipped through and made every one of those pages 30px narrower than the reference. Loaded before the page stylesheets, so a module that does state its own padding still wins. */ .rp-scope .container { padding-left: 0; padding-right: 0; }