/* * peppapig — the pieces that are not the mirror's. * * Loaded after the mirror's compiled stylesheets so these rules win on a tie. */ /* --------------------------------------------------------------------------- * 1. Palette, driven by the site-wide switch. * * The mirror picks its palette with @media (prefers-color-scheme: dark) on * :not(.light):root. That follows the operating system, which would disagree * with the setting shared by /lab/ and /ai/. Both selectors below have the same * specificity as that rule (0,2,0) and load later, so they take over. * * With no data-theme at all — script blocked, or a crawler — the mirror's own * rule still applies, which is a reasonable fallback. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #000; --main: #000; --t: hsla(0,0%,100%,0.86); --t-l: hsla(0,0%,100%,0.66); --logo: #fff; --link: #0284c7; --title: hsla(0,0%,100%,0.92); --fab: #000; --shadow: none; --t-s: hsla(0,0%,100%,0.9); --alt: #2b2b2b; --link-hover: hsl(204,71%,57.7%); --hover-bg: #161616; --tag: #000; --border: #2b2b2b; --c-bg: #000; --code: #c3c7cb; --github: #000; } :root[data-theme="light"] { color-scheme: light; --bg: #f2f5f8; --main: #fff; --t: #37475a; --t-l: rgb(100.2094240838,118.9986910995,139.0405759162); --logo: #000; --link: #1f6dda; --title: rgb(70.5,91.5,109.5); --fab: #fff; --shadow: 0 4px 10px rgba(0,2,4,.06),0 0 1px rgba(0,2,4,.11); --t-s: rgb(47.1804878049,60.8780487805,77.6195121951); --alt: #e6e8ee; --link-hover: #2674e0; --hover-bg: #eceef2; --tag: #eceef2; --border: #e3e6eb; --c-bg: #f4f5f7; --code: #405363; --github: #24292e; } /* --------------------------------------------------------------------------- * 2. Hairlines, because every surface is now black. * * The mirror tells a card from the page by fill alone: --main on the card * against --bg behind it, no border anywhere, and --shadow is none in dark * mode. Paint both #000 and the cards vanish — there is nothing left for the * eye to find the edges with. So each surface that used to be distinguished by * colour gets a line instead, drawn from --border and --alt, which are the * mirror's own two line colours (its hr, tag chips, blockquote rule and * recent-post row separators already use them). No new greys are introduced. */ :root[data-theme="dark"] .xw2csxc.xinol6e, /* post cards, sidebar widgets, the article */ :root[data-theme="dark"] .x14s2dzd { /* count badge in the sidebar lists */ border: 1px solid var(--border); } /* The back-to-top button needs its edge more than the others: it floats over * the page with nothing beside it to imply one. It is also the only element * here that already has border: 0 set by a rule this stylesheet cannot outrank * — the mirror multiplies its selectors by :not(##), which puts an ID into * the specificity, so no number of classes on our side ever wins and * !important is the only lever left. */ :root[data-theme="dark"] .x1adlg68 { border: 1px solid var(--border) !important; } :root[data-theme="dark"] nav[role="navigation"] { border-bottom: 1px solid var(--border); } :root[data-theme="dark"] footer { border-top: 1px solid var(--border); } /* --------------------------------------------------------------------------- * 3. Corners. * * The mirror's cards sit on .x116uinm's .5rem — 8px, which on a 615px card * barely reads as rounded at all. Apple's cards are rounder, and more to the * point they are not quarter circles: the corner is a superellipse, so the edge * leaves the straight run gradually instead of meeting it at a seam the eye can * find. corner-shape: squircle is exactly that curve, and a browser without it * just drops the declaration and keeps the radius, which still looks right. * * The radius needs !important: the mirror multiplies its selectors by :not(##), * which puts ID weight into the specificity, so its .5rem outranks any number * of classes on our side. */ :root { --radius: 20px; --radius-sm: 12px; } .xw2csxc.x116uinm { border-radius: var(--radius) !important; } .x14s2dzd.x1dx3g5c, .x1adlg68 { border-radius: var(--radius-sm) !important; } /* The curve itself needs no !important — nothing in the mirror sets * corner-shape, so there is no other declaration to outrank. The radius lives * with the rule that has to fight for it; this is just the shape of it. */ .xw2csxc.x116uinm, .x14s2dzd.x1dx3g5c, .x1adlg68, pre { corner-shape: squircle; } /* --------------------------------------------------------------------------- * 4. Content elements that the mirror only styles through hashed classes. * * The mirror's hr, blockquote and code block carry .xms2ikn, .x1isq9ss and * .x15e6jhp, and its CSS keys on those. WordPress renders the bare tags, so * none of it applies — and the mirror's hr rule is border:0 with height:2px and * the colour supplied by the class we do not have, which leaves a two-pixel * strip of nothing where a divider should be. Same values, keyed on the tag. */ hr { border: 0; height: 1px; background-color: var(--border); } blockquote { border-left: 3px solid var(--border); margin: 0 0 1em; padding: 0 0 0 1em; color: var(--t-l); } pre { background-color: var(--c-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-x: auto; padding: 15px; } code { color: var(--code); } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid var(--border); padding: 6px 10px; } /* The pager's current page is a filled pill: --code behind, --c-bg on the text. * Black text stays legible on that light pill, but pinning both keeps the pair * from ever colliding if either token moves. */ :root[data-theme="dark"] .x1dff7yh, :root[data-theme="dark"] .xvdvayy:hover { background-color: var(--bg); color: var(--t); border: 1px solid var(--border); } /* --------------------------------------------------------------------------- * 5. The lab menu injected by nginx. * * nginx replaces