/* * Global defense rule for button hover/focus states. * * Why this exists: semantic-ui's vendor stylesheet (and other globally- * loaded CSS) sets `a:hover { color: ... }` which would win against any * page-scoped `.btn-primary:hover { background: ... }` style that * defines the new hover background but forgets the new hover color. * The result is buttons that flash blue on hover. We've shipped that * bug repeatedly across the platform. * * The rule below tells every `.btn:hover` to KEEP its resting color * unless a page explicitly overrides it. The rule is intentionally * NOT more specific than `.btn-foo:hover` — pages that define * `.btn-something:hover { color: ... }` still win because their style * block is loaded after this file (they live inside the rendered page * body, after 's linked stylesheets). * * Specificity: * `.btn:hover` = (0, 0, 2, 0) — beats semantic-ui's `a:hover` at (0,0,1,1) * `.btn-foo:hover` = (0, 0, 2, 0) — same; page wins by source order * `.btn-foo.btn-bar:hover` = (0, 0, 3, 0) — also wins * * Bottom line: if you're adding a new button style anywhere in the * codebase, you do NOT need to think about hover color anymore — * it's preserved by default. Override only if you genuinely want a * different hover color, and the override will work without ceremony. */ .btn:hover, .btn:focus, .btn:focus-visible { color: inherit; }