/* ========================================================================= * cursor.css — GENERATED by scripts/gen-cursor.mjs. Do not hand-edit; the * hotspot below is measured off the rendered art and will be overwritten. * * Two declarations per rule on purpose: the plain url() form is the floor * every browser understands, and the image-set() form overrides it where * supported so retina gets the 64px art. A browser that cannot parse * image-set drops that declaration and keeps the first. * * Scoped to (hover: hover) and (pointer: fine) — a phone has no cursor to * replace, and shipping one to it only downloads images it will never draw. * ======================================================================= */ @media (hover: hover) and (pointer: fine) { html.drillcur, html.drillcur body { cursor: url(../img/cursor/idle-32.png) 6 2, auto; } html.drillcur { cursor: image-set(url(../img/cursor/idle-32.png) 1x, url(../img/cursor/idle-64.png) 2x) 6 2, auto; } /* anything clickable gets the live drill: trigger squeezed, bit lit */ html.drillcur a, html.drillcur button, html.drillcur select, html.drillcur summary, html.drillcur label, html.drillcur [role="button"], html.drillcur .card, html.drillcur .chip, html.drillcur .tile, html.drillcur .pd-thumb, html.drillcur .kitlink, html.drillcur .navdrop__btn { cursor: url(../img/cursor/go-32.png) 6 2, pointer; } html.drillcur a, html.drillcur button, html.drillcur select, html.drillcur summary, html.drillcur label, html.drillcur [role="button"], html.drillcur .card, html.drillcur .chip, html.drillcur .tile, html.drillcur .pd-thumb, html.drillcur .kitlink, html.drillcur .navdrop__btn { cursor: image-set(url(../img/cursor/go-32.png) 1x, url(../img/cursor/go-64.png) 2x) 6 2, pointer; } /* No drilling-N class rules any more, ON PURPOSE. The spin used to toggle classes on matched by `html.drilling-N *` — a universal selector re-matched against the whole document on every frame. Measured on the 1,462-card storefront: ~200ms of style recalc PER FRAME SWAP, times up to 13 swaps per click — which is why every button press felt sticky. cursor.js now spins by setting an inline cursor on the pressed element alone: one tiny subtree recalc per frame instead of the whole page. */ /* Text entry keeps the I-beam and disabled controls keep their block. A cursor that lies about what a control does is worse than no cursor. */ html.drillcur input, html.drillcur textarea { cursor: text; } html.drillcur [disabled], html.drillcur .btn--primary[disabled] { cursor: not-allowed; } }