/* ========================================================================== HOUSE STYLE — base.css Shared by every project and BOTH text directions. THE ONE RULE IN THIS FILE: no physical direction properties. Never `margin-left`, `padding-right`, `text-align: left`, `border-left`. Always the logical equivalents — `margin-inline-start`, `padding-inline-end`, `text-align: start`, `border-inline-start`. That rule is why there is no rtl.css. The browser mirrors the whole layout from `dir="rtl"` on and nothing here has to know which language it is rendering. A single physical property is all it takes to break that, and it breaks silently in the language you are not looking at. ── THE ONE EXCEPTION, AND WHY IT IS NOT A COMPROMISE ───────────────────── `width` and `height` are used, deliberately, instead of `inline-size` and `block-size`. Two reasons, and both have to hold: 1. WeasyPrint 62 — the PDF engine — does not implement `inline-size` or `block-size`. They compute to ZERO, silently. That collapsed the step chips and the screenshot pins to nothing in the first proof render, in both languages, with no warning of any kind. 2. Sizing is not direction-dependent in the first place. A 1.7em circle is the same circle in both directions; nothing about `width` mirrors. The logical-properties rule exists for the properties that DO mirror — margins, padding, borders, insets, text-align — and every one of those is still logical throughout this file. So: physical for SIZE, logical for POSITION. If a future engine implements the logical sizing keywords, changing these back would buy nothing. ========================================================================== */ :root { /* Ink and ground */ --ink: #16191d; --ink-soft: #4a5158; --ink-faint: #767d85; --ground: #ffffff; --ground-sunk: #f4f6f8; --rule: #dfe3e8; /* One accent, used for structure — not decoration */ --accent: #1a5fb4; --accent-soft: #e8f0fb; /* Admonitions */ --warn: #9a5b00; --warn-soft: #fdf3e3; --stop: #a11b1b; --stop-soft: #fbeceb; /* The callout pin that sits on a screenshot */ --pin: #d92c2c; --pin-ink: #ffffff; --measure: 34rem; /* prose column */ --gap: 1.5rem; --radius: 6px; } /* THREE THEME STATES, AND THE DEFAULT IS NOT ONE OF THE TWO PALETTES. Auto is the absence of `data-theme` and follows the reader's machine. `data-theme="light"` and `data-theme="dark"` are a decision the reader has made, and each has to win against the machine's preference in BOTH directions — hence the `:not([data-theme="light"])` guard on the media query and the standalone attribute block that repeats the palette below. The repetition is unavoidable in plain CSS: the same declarations have to apply once conditionally on a media feature and once unconditionally on an attribute, and no selector spans both. Keep the two blocks adjacent and edit them together. None of this reaches the PDF. WeasyPrint renders `` with no `data-theme` and no `prefers-color-scheme`, so the light palette on :root applies, and print.css paints the ground white over the top regardless. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #e7eaee; --ink-soft: #b3bac2; --ink-faint: #868e98; --ground: #15181c; --ground-sunk: #1d2126; --rule: #2e343b; --accent: #7aa9e8; --accent-soft: #1b2735; --warn: #e0a35a; --warn-soft: #2a2216; --stop: #e88a86; --stop-soft: #2c1a19; } } :root[data-theme="dark"] { --ink: #e7eaee; --ink-soft: #b3bac2; --ink-faint: #868e98; --ground: #15181c; --ground-sunk: #1d2126; --rule: #2e343b; --accent: #7aa9e8; --accent-soft: #1b2735; --warn: #e0a35a; --warn-soft: #2a2216; --stop: #e88a86; --stop-soft: #2c1a19; } /* -------------------------------------------------------------------------- Type. Latin and Arabic have different natural sizes at the same px value — Arabic needs more leading and a touch more size to stay comfortable, which is set in arabic.css rather than here. -------------------------------------------------------------------------- */ /* Borders and padding count INSIDE a declared width. Without this, a figure with a 1px border is 2px wider than the measure it was told to fit, which is invisible on screen and runs off the right margin on A4. */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 17px; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Noto Sans", system-ui, sans-serif; line-height: 1.65; text-align: start; } h1, h2, h3, h4 { line-height: 1.25; font-weight: 650; margin-block: 2.2em 0.6em; } h1 { font-size: 2.1rem; margin-block-start: 0; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; } p, ul, ol { margin-block: 0 1em; } ul, ol { padding-inline-start: 1.4em; } li { margin-block-end: 0.35em; } a { color: var(--accent); text-underline-offset: 2px; } strong { font-weight: 650; } code, kbd { font-family: "Noto Sans Mono", ui-monospace, monospace; font-size: 0.88em; background: var(--ground-sunk); padding: 0.1em 0.35em; border-radius: 3px; } /* A named UI control the reader has to find on screen. Always set in the language the SCREEN uses, which for this app is usually English even inside an Arabic chapter — see arabic.css for the bidi isolation that makes that render correctly mid-sentence. */ .ui { font-weight: 650; color: var(--ink); background: var(--ground-sunk); border: 1px solid var(--rule); border-radius: 4px; padding: 0.05em 0.4em; white-space: nowrap; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- Page frame -------------------------------------------------------------------------- */ .page { max-width: 62rem; margin-inline: auto; padding-inline: 1.5rem; padding-block: 2.5rem 5rem; } .crumb { font-size: 0.85rem; color: var(--ink-faint); margin-block-end: 0.5rem; } .lede { font-size: 1.1rem; color: var(--ink-soft); max-width: var(--measure); margin-block-end: 2.5rem; } /* -------------------------------------------------------------------------- THE STEP — the unit of this whole manual. Prose on one side, the screenshot it describes on the other. Below 900px they stack, prose first, because a screenshot without its explanation is just a picture. -------------------------------------------------------------------------- */ .step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--gap); align-items: start; margin-block-end: 3rem; scroll-margin-block-start: 1rem; } .step__prose { min-width: 0; } .step__prose > :first-child { margin-block-start: 0; } /* The chip and its heading are plain inline flow, NOT flex. WeasyPrint lays a flex container out but does not reserve space for an anonymous text run beside a sized flex item, so the chip printed on top of the first two letters of every step title — in both languages. Inline-block plus a margin does the same job, in every engine, with nothing to fall back to. */ .step__n { display: inline-block; width: 1.7em; /* physical: see the note at the top of this file */ height: 1.7em; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.9rem; font-weight: 700; line-height: 1.7em; /* centres the digit vertically */ text-align: center; margin-inline-end: 0.6em; vertical-align: -0.28em; /* sits the circle on the text's optical centre */ } .step__title { margin-block: 0 0.6em; font-size: 1.1rem; } /* -------------------------------------------------------------------------- THE SCREENSHOT AND ITS PINS The image is never modified. Pins and rings are absolutely positioned over it from percentages the capture machine MEASURED at the moment it took the picture, so a marker can never drift out of alignment with what it points at, and one image serves every language. ⚠ PINS USE PHYSICAL `left` / `top`, AND MUST. This looks like a violation of this file's own rule and is the opposite of one. Everything else on the page mirrors because the READER's direction changed. A pin does not belong to the reader's coordinate space — it belongs to the IMAGE's, and the image is never mirrored: the interface it photographs is laid out left-to-right, and flipping it would show the reader a screen that does not exist. Written as `inset-inline-start`, a pin measured at 71% from the left of the screenshot would render 71% from the RIGHT in the Arabic edition — pointing confidently at the wrong control, in the one language whose readers are least able to notice the manual is wrong. Found by rendering the proof page and looking at it, which is why that page exists. -------------------------------------------------------------------------- */ /* ⚠ THE FIGURE SHRINKS TO THE PICTURE, and it has to. Pins and rings below are positioned as a PERCENTAGE of this box. If the figure is wider than the image inside it — which is what happens the moment the image stops being stretched to fill the column — every percentage addresses a point to the right of where it belongs, and the callout lands somewhere plausible and wrong. `width: fit-content` keeps the two boxes the same box. */ .shot { position: relative; margin: 0; width: fit-content; max-width: 100%; margin-inline: auto; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--ground-sunk); } /* ⚠ `max-width`, NEVER `width: 100%`. This was `width: 100%` and it magnified small crops instead of leaving them alone. A delivery card cropped to 108 CSS px was stretched across the 605px column — a 5.6x blow-up in which the reference number stood two inches tall and the card it belonged to was off the picture entirely. A screenshot has a natural size: the CSS pixels it occupied on the screen it was taken from. Rendering it larger than that invents detail the capture never had. Shrinking it to fit a narrow column is fine and often necessary; growing it is always wrong. The width/height attributes on the carry that natural size in CSS px (build.py divides the PNG by device_scale), so `max-width: 100%` caps a wide shot at the column and leaves a narrow one at its own size. */ .shot img { display: block; max-width: 100%; height: auto; } .shot__pin { position: absolute; top: var(--pin-y); /* physical, and deliberately — see the note above */ left: var(--pin-x); transform: translate(-50%, -50%); width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--pin); color: var(--pin-ink); font: 700 0.8rem/1.55rem "Noto Sans", sans-serif; text-align: center; box-shadow: 0 0 0 2.5px #fff, 0 1px 4px rgb(0 0 0 / 0.4); } /* The measured element outlined, for when "which button" is genuinely ambiguous from a pin alone. */ .shot__ring { position: absolute; top: var(--ring-y); /* physical, and deliberately — see the note above */ left: var(--ring-x); width: var(--ring-w); height: var(--ring-h); border: 2.5px solid var(--pin); border-radius: 4px; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.55); pointer-events: none; } .shot__cap { padding: 0.5rem 0.75rem; font-size: 0.82rem; color: var(--ink-faint); border-block-start: 1px solid var(--rule); background: var(--ground); } /* -------------------------------------------------------------------------- Admonitions. Three only — resisting a fourth is what keeps them meaningful. -------------------------------------------------------------------------- */ .note, .warn, .stop { border-inline-start: 4px solid var(--accent); background: var(--accent-soft); padding: 0.9rem 1.1rem; border-radius: 0 var(--radius) var(--radius) 0; margin-block: 1.2em; } .warn { border-inline-start-color: var(--warn); background: var(--warn-soft); } .stop { border-inline-start-color: var(--stop); background: var(--stop-soft); } .note > :first-child, .warn > :first-child, .stop > :first-child { margin-block-start: 0; } .note > :last-child, .warn > :last-child, .stop > :last-child { margin-block-end: 0; } .admon__label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-block-end: 0.3em; } .note .admon__label { color: var(--accent); } .warn .admon__label { color: var(--warn); } .stop .admon__label { color: var(--stop); } /* "Why it works this way" — the paragraphs that make this a manual rather than a screenshot album. Visually quieter than an admonition on purpose: it is context, not an instruction. */ .why { border-inline-start: 3px solid var(--rule); padding-inline-start: 1.1rem; margin-block: 1.4em; color: var(--ink-soft); } .why .admon__label { color: var(--ink-faint); } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ table { border-collapse: collapse; inline-size: 100%; margin-block: 1.2em; font-size: 0.95rem; } th, td { text-align: start; padding: 0.5em 0.7em; border-block-end: 1px solid var(--rule); vertical-align: top; } th { font-weight: 650; background: var(--ground-sunk); } .scroll-x { overflow-x: auto; max-inline-size: 100%; } /* -------------------------------------------------------------------------- Navigation between the two ways in -------------------------------------------------------------------------- */ .pathnav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 2rem 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--rule); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.9rem; margin-block: 1.5rem; } .card { display: block; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: inherit; background: var(--ground); } .card:hover { border-color: var(--accent); } .card__title { font-weight: 650; margin-block-end: 0.25rem; } .card__sub { font-size: 0.85rem; color: var(--ink-faint); } @media (max-width: 900px) { .step { grid-template-columns: minmax(0, 1fr); } }