/* =============================================================================== PROPRIETARY SOFTWARE NOTICE =============================================================================== Developed by Pro Star CMS Development - Chad Sanders - 256-550-1988. All rights reserved. =============================================================================== */ /* ══════════════════════════════════════════════════════════════════════════════ ACCESSIBILITY WIDGET - BROADCAST SKIN Shared by onwardmediallc.net and reddevilsports.net. ══════════════════════════════════════════════════════════════════════════════ The widget ships in Material blue (#1976d2) with a white ring around the launcher. On a black-and-oxblood sports page that is the brightest thing on the screen, and on a phone it sits over the video looking like a browser error. Chad: "The current bright blue stands out too much and is especially ugly on mobile." WHY THIS IS A STYLESHEET AND NOT AN EDIT TO THE WIDGET The widget reads every colour through `var(--acc-*, fallback)`, but it also WRITES those variables onto as inline styles when it boots. An inline declaration beats a normal rule in a stylesheet - which is why every value below carries !important. An important author declaration outranks a non-important inline one, so this wins without a timing race and without touching the 167KB minified bundle, which would be overwritten by the next update of it. ACCESSIBILITY IS THE POINT OF THE BUTTON, so nothing here is allowed to make it harder to find or to see: - the icon stays pure white on the deepest red, measured below - the gold ring gives the disc a hard edge against a dark page, which the old white ring was doing and a plain dark disc would not - the focus ring is gold, not red, so it reads against the button itself - size, position and hit area are untouched ══════════════════════════════════════════════════════════════════════════════ */ :root { /* Deep oxblood - the darkest red already used on the player panels. */ --acc-primary-color: #7d2820 !important; /* Hover / active states move UP in brightness, never down: a control that gets darker on hover reads as disabled. */ --acc-primary-color-light: #b03a2e !important; --acc-primary-color-dark: #4a0f16 !important; --acc-hover-color: #b03a2e !important; --acc-active-color: #8f2b28 !important; /* Gold focus ring. Red-on-red would be invisible on the button it outlines. */ --acc-focus-ring-color: #c9a24a !important; } /* ── The launcher ─────────────────────────────────────────────────────────── */ .acc-toggle-btn { /* Replaces the flat blue disc and its white ring in one declaration. The gradient is the same 140deg oxblood used on .ll-player-wrap, so the button belongs to the page rather than floating over it. */ background: linear-gradient(140deg, #8f2b28 0%, #5c1a16 55%, #3d0f10 100%) !important; /* Thin gold rim, then a dark separation ring, then a real shadow. The gold is what keeps a dark button findable on a dark page. */ box-shadow: inset 0 0 0 2px rgba(201, 162, 74, .9), inset 0 0 0 3.5px rgba(0, 0, 0, .55), 0 4px 16px rgba(0, 0, 0, .55) !important; } .acc-toggle-btn:hover { background: linear-gradient(140deg, #a83430 0%, #6d1f1a 55%, #4a1214 100%) !important; box-shadow: inset 0 0 0 2px rgba(201, 162, 74, 1), inset 0 0 0 3.5px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .6) !important; } /* The open state inverts: gold rim fills in, so it is obvious which control the panel belongs to. */ .acc-toggle-btn[aria-expanded="true"] { background: linear-gradient(140deg, #c9a24a 0%, #8f6f28 100%) !important; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .45), 0 6px 20px rgba(0, 0, 0, .6) !important; } .acc-toggle-btn[aria-expanded="true"] .acc-toggle-icon svg, .acc-toggle-btn[aria-expanded="true"]::before, .acc-toggle-btn[aria-expanded="true"]::after { /* Near-black on gold - white on gold measures about 2:1 and fails outright. */ fill: #1a0f05 !important; background: #1a0f05 !important; } .acc-toggle-btn:focus-visible { outline: 3px solid #c9a24a !important; outline-offset: 3px !important; } /* ── Contrast, measured ────────────────────────────────────────────────────── White #ffffff icon on the lightest stop of the closed button (#8f2b28) -> 8.25:1 (AA needs 3:1 for a graphical control, 4.5:1 for text) White icon on the darkest stop (#3d0f10) -> 16.48:1 Gold rim #c9a24a against the darkest stop (#3d0f10) -> 6.87:1 (needs 3:1 as a non-text boundary) Gold rim against a black page (#08080a) -> 8.34:1 - this is the number that keeps the button findable Ink #1a0f05 on the open button's gold (#c9a24a) -> 7.85:1 Every one clears AA with room; the icon clears AAA on both stops. ────────────────────────────────────────────────────────────────────────── */ /* ── Inside the panel ───────────────────────────────────────────────────────── The panel itself is a light card by design and stays that way - it is a settings surface, not part of the broadcast styling, and re-tinting a third-party accessibility UI is how its own contrast guarantees get broken. Only the two hard-coded blues that the variables do not reach are corrected, so a stray Material blue link cannot appear inside an otherwise red site. */ .acc-report-violation-help a, .acc-report-node-fix strong { color: #7d2820 !important; }