/* * WB_A1 flasher - dark theme overlay. * Anchored on #420690 (deep electric violet). Loaded after beer.css and * flasher.css so it wins on the same specificity. * * Strategy: redefine the Material 3 design tokens for the existing * so everything that reads CSS variables gets the * palette change without source modification of beer.css. */ body.dark, :root, body { --primary: #bfa4ff; --on-primary: #22005d; --primary-container: #420690; --on-primary-container: #f0e6ff; --secondary: #d6c4ff; --on-secondary: #1f1141; --secondary-container: #3a2473; --on-secondary-container: #eaddff; --tertiary: #efb8ff; --on-tertiary: #42065b; --tertiary-container: #5d2d7a; --on-tertiary-container: #f9e1ff; --error: #ffb4ab; --on-error: #690005; --error-container: #93000a; --on-error-container: #ffb4ab; --background: #0c0814; --on-background: #ece1ff; --surface: #150d24; --on-surface: #ece1ff; --surface-variant: #2a1d44; --on-surface-variant: #cdc2e0; --outline: #9686b3; --outline-variant: #4a3c6b; --shadow: #000000; --scrim: #000000; --inverse-surface: #ece1ff; --inverse-on-surface: #2d1b50; --inverse-primary: #6730b0; --surface-dim: #150d24; --surface-bright: #2a1d44; --surface-container-lowest: #0a0612; --surface-container-low: #1a102c; --surface-container: #1f1432; --surface-container-high: #26193c; --surface-container-highest: #2e1f49; } body { background: radial-gradient(ellipse at top, #2a0f5a 0%, #0c0814 55%) fixed, #0c0814; color: var(--on-background); font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Noto Sans, Arial, sans-serif; } a { color: var(--primary); } a:hover { color: var(--primary-container); } /* WB_A1 banner at the top of the device picker landing screen. */ .wba1-banner { margin: 16px 0 8px 0; padding: 18px 22px; border-radius: 12px; background: linear-gradient(135deg, #420690 0%, #1a102c 90%); border: 1px solid #6730b0; box-shadow: 0 4px 18px rgba(66, 6, 144, 0.35); } .wba1-banner h4 { margin: 0 0 6px 0; color: var(--primary); font-size: 1.05rem; letter-spacing: 0.02em; } .wba1-banner p { margin: 0; color: var(--on-surface-variant); font-size: 0.9rem; line-height: 1.45; } .wba1-banner code { background: rgba(0,0,0,0.35); padding: 1px 6px; border-radius: 4px; color: var(--primary); } /* The "WB_A1" wordmark in the top nav. */ .wba1-brand { font-weight: 700; letter-spacing: 0.08em; color: var(--primary); } /* Per-device group label: keep "Choose device" consistent. */ .choose-device-header { display: flex; justify-content: space-between; align-items: baseline; } .choose-device-header h6 { margin: 0; font-size: 0.95rem; color: var(--on-background); } .choose-device-header small { color: var(--on-surface-variant); font-size: 0.75rem; } /* The flavor-tooltip text under each device icon. */ .flavor-tooltip { color: var(--on-surface-variant); font-size: 0.78rem; margin: 4px 0 0 0; } /* NOTE: intentionally no .device-select width override. Upstream lets the * device button size to its content so beercss anchors the hover tooltip * (position:absolute, .right => translate(100%,-50%)) right beside the * device name. Forcing width:100% moved the button's right edge to the * container edge, which flung the 400px device photo off-screen. */