|
|
| Line 1: |
Line 1: |
| /* | | /* ========================================================= |
| ⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
| | Timeless (BHC) — site skin customisations ONLY |
| */
| | --------------------------------------------------------- |
| | This file intentionally contains: |
| | - Branding / layout / readability tweaks for Timeless |
| | - NO accessibility gadget rules |
| | - NO high-contrast / a11y feature classes (those live in the gadget CSS) |
|
| |
|
| /* =========================================================
| | If you previously pasted the Accessibility Gadget CSS into a Timeless page, |
| BHC Accessibility Gadget – MediaWiki / Timeless | | move it to the gadget stylesheet (e.g. MediaWiki:Gadget-accessibility.css) |
| | and keep this file as the clean Timeless baseline. |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| /* --------------------------------------------------------- | | /* Optional: if you use BHC design tokens, keep them here */ |
| Variables
| |
| --------------------------------------------------------- */
| |
| :root{ | | :root{ |
| --a11y-bg: #111827; | | /* Example placeholders — keep / adjust only if you really use them elsewhere */ |
| --a11y-border: #374151; | | /* --bhc-text: #111827; */ |
| --a11y-fg: #ffffff; | | /* --bhc-link: #005DB3; */ |
| --a11y-focus: #FFBF47; | | /* --bhc-header-text: #111827; */ |
| --a11y-link-underline: #3366CC; /* MediaWiki link blue */
| | /* --bhc-gold: #E4BA7B; */ |
| --a11y-menu-width: 340px; | |
| --a11y-contrast-fg: #FFD400;
| |
| } | | } |
|
| |
|
| | /* ----------------------------------------------------------------- |
| | Timeless baseline tweaks (safe, non-a11y) |
| | ----------------------------------------------------------------- */ |
|
| |
|
| /* Timeless: stop skin CSS shrinking the accessibility icon */ | | /* Keep images responsive (if not already handled elsewhere) */ |
| body.skin-timeless .a11y-toggle{
| | .res-img, .res-img img, img{ |
| font-size: 16px !important;
| | max-width: 100%; |
| line-height: 1 !important;
| | height: auto; |
| }
| |
| body.skin-timeless .a11y-toggle svg{
| |
| display: block !important;
| |
| width: 36px !important;
| |
| height: 36px !important;
| |
| min-width: 36px !important;
| |
| min-height: 36px !important;
| |
| max-width: none !important; | |
| max-height: none !important; | |
| | |
| /* If the glyph still looks small, keep this: */
| |
| transform: scale(1.15) !important;
| |
| transform-origin: 50% 50% !important;
| |
| }
| |
| /* Make sure fill isn’t being altered by skin rules */
| |
| body.skin-timeless .a11y-toggle svg path{
| |
| fill: currentColor !important;
| |
| } | | } |
|
| |
|
| /* --------------------------------------------------------- | | /* ----------------------------------------------------------------- |
| Skip links (appear when focused) | | Add any Timeless-only cosmetic tweaks BELOW |
| --------------------------------------------------------- */ | | (typography, spacing, portlet headings, etc.) |
| .skip-link{
| | ----------------------------------------------------------------- */ |
| position: absolute;
| |
| left: 12px;
| |
| top: 12px;
| |
| z-index: 11000;
| |
| | |
| padding: 10px 14px;
| |
| border-radius: 8px;
| |
| | |
| background: #111827;
| |
| color: #fff;
| |
| text-decoration: none;
| |
| | |
| top: -9999px; /* hidden off-screen by default */
| |
| transition: none; /* no animation needed when hidden */
| |
|
| |
|
| border: 2px solid var(--a11y-focus);
| | /* Example (optional): |
| }
| | body.skin-timeless .mw-portlet h3{ |
| .skip-link:focus,
| | letter-spacing: 0.01em; |
| .skip-link:focus-visible{
| |
| top: 12px; /* bring into view when focused */
| |
| outline: none;
| |
| z-index: 11001;
| |
| }
| |
| | |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border-color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Stack multiple skip links neatly when tabbing through them */
| |
| #a11y-skip-content:focus,
| |
| #a11y-skip-content:focus-visible{ top: 56px; }
| |
| | |
| #a11y-skip-nav:focus,
| |
| #a11y-skip-nav:focus-visible{ top: 100px; }
| |
| | |
| #a11y-skip-search:focus,
| |
| #a11y-skip-search:focus-visible{ top: 144px; }
| |
| | |
| | |
| /* ---------------------------------------------------------
| |
| Floating accessibility toggle
| |
| --------------------------------------------------------- */
| |
| .a11y-toggle{
| |
| position: fixed;
| |
| right: 16px;
| |
| bottom: 16px;
| |
| z-index: 10001;
| |
| | |
| width: 56px;
| |
| height: 56px;
| |
| border-radius: 50%;
| |
| | |
| background: #005FCC;
| |
| border: 2px solid #ffffff;
| |
| color: #ffffff;
| |
| | |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| | |
| box-shadow: 0 10px 24px rgba(0,0,0,0.25);
| |
| cursor: pointer;
| |
| }
| |
| .a11y-toggle:hover{ background:#0047A6; }
| |
| .a11y-toggle:focus-visible{
| |
| outline: 3px solid var(--a11y-focus);
| |
| outline-offset: 3px;
| |
| }
| |
| .a11y-toggle svg{
| |
| width: 44px;
| |
| height: 44px;
| |
| fill: currentColor;
| |
| }
| |
| | |
| /* ---------------------------------------------------------
| |
| Panel
| |
| --------------------------------------------------------- */
| |
| /* Compact current-settings line (display-only) */
| |
| .a11y-status{
| |
| font-size: 13px;
| |
| line-height: 1.25;
| |
| margin: 6px 0 8px;
| |
| opacity: 0.95;
| |
| }
| |
| | |
| .a11y-panel{
| |
| position: fixed;
| |
| right: 14px;
| |
| bottom: 76px;
| |
| z-index: 10000;
| |
| | |
| width: var(--a11y-menu-width);
| |
| max-width: calc(100vw - 28px);
| |
| | |
| background: var(--a11y-bg);
| |
| border: 1px solid var(--a11y-border);
| |
| color: var(--a11y-fg);
| |
| border-radius: 16px;
| |
| padding: 12px;
| |
| | |
| box-shadow: 0 14px 40px rgba(0,0,0,0.28);
| |
| }
| |
| .a11y-panel[hidden]{ display:none !important; }
| |
| | |
| /* Header */
| |
| .a11y-head{
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content: space-between;
| |
| margin-bottom: 10px;
| |
| }
| |
| .a11y-head h2{
| |
| font-size: 16px;
| |
| margin: 0;
| |
| }
| |
| .a11y-help{
| |
| width: 28px;
| |
| height: 28px;
| |
| border-radius: 50%;
| |
| background: #fff;
| |
| color: #111827;
| |
| font-weight: 900;
| |
| text-decoration: none;
| |
| display:flex;
| |
| align-items:center;
| |
| justify-content:center;
| |
| }
| |
| .a11y-help:focus-visible{
| |
| outline: 3px solid var(--a11y-focus);
| |
| outline-offset: 2px;
| |
| }
| |
| | |
| /* Buttons */
| |
| .a11y-row{
| |
| display:flex;
| |
| gap: 8px;
| |
| flex-wrap: wrap;
| |
| margin-bottom: 10px;
| |
| }
| |
| .a11y-btn{
| |
| border: 1px solid #D1D5DB;
| |
| background:#fff;
| |
| color:#111827;
| |
| padding: 8px 10px;
| |
| border-radius: 999px;
| |
| font-size: 14px;
| |
| font-weight: 800;
| |
| cursor: pointer;
| |
| }
| |
| .a11y-btn[aria-pressed="true"]{
| |
| background:#111827;
| |
| color:#fff;
| |
| }
| |
| .a11y-btn:focus-visible{
| |
| outline: 3px solid var(--a11y-focus);
| |
| outline-offset: 2px;
| |
| }
| |
| | |
| .a11y-hint{
| |
| font-size: 13px;
| |
| color: var(--a11y-fg);
| |
| line-height: 1.4;
| |
| }
| |
| | |
| /* Screen reader only */
| |
| .a11y-sr{
| |
| position:absolute;
| |
| width:1px;
| |
| height:1px;
| |
| overflow:hidden;
| |
| clip:rect(0,0,0,0);
| |
| }
| |
| | |
| /* =========================================================
| |
| Feature classes
| |
| ========================================================= */
| |
| | |
| /* ------------------------------
| |
| High contrast (black/yellow/blue)
| |
| ------------------------------ */
| |
| | |
| /* ------------------------------
| |
| High contrast presets
| |
| - Use ONE of these on <body>:
| |
| - a11y-contrast-yellow (yellow on black)
| |
| - a11y-contrast-white (white on black)
| |
| - Back-compat: a11y-contrast behaves as yellow on black
| |
| ------------------------------ */
| |
| body.a11y-contrast,
| |
| body.a11y-contrast-yellow{
| |
| --a11y-contrast-fg: #FFD400;
| |
| --a11y-contrast-fg-hover: #FFE066;
| |
| --a11y-contrast-link: #36C; /* MediaWiki blue */
| |
| --a11y-contrast-border-70: rgba(255,212,0,.7);
| |
| --a11y-contrast-border-75: rgba(255,212,0,.75);
| |
| --a11y-contrast-border-85: rgba(255,212,0,.85);
| |
| }
| |
| body.a11y-contrast-white{
| |
| --a11y-contrast-fg: #FFFFFF;
| |
| --a11y-contrast-fg-hover: #E6E6E6;
| |
| --a11y-contrast-link: #9ECBFF; /* lighter link blue on black */
| |
| --a11y-contrast-border-70: rgba(255,255,255,.7);
| |
| --a11y-contrast-border-75: rgba(255,255,255,.75);
| |
| --a11y-contrast-border-85: rgba(255,255,255,.85);
| |
| }
| |
| | |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
| |
| background:#000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| | |
| /* Gadget UI variables in contrast mode */
| |
| --a11y-bg: #000;
| |
| --a11y-border: var(--a11y-contrast-border-70);
| |
| --a11y-fg: var(--a11y-contrast-fg);
| |
| --a11y-focus: var(--a11y-contrast-fg);
| |
| --a11y-link-underline: var(--a11y-contrast-link);
| |
| }
| |
| | |
| /* =========================================================
| |
| HIGH CONTRAST: Links must be visually distinct
| |
| Blue + underline to meet WCAG 1.4.1
| |
| ========================================================= */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
| |
| color: var(--a11y-contrast-link) !important;
| |
| text-decoration: underline !important;
| |
| text-decoration-thickness: 2px;
| |
| text-underline-offset: 0.15em;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:hover,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:focus-visible{
| |
| text-decoration-thickness: 3px;
| |
| }
| |
| | |
| /* Headings */ | |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3, | |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h4,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h5,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h6{
| |
| color:var(--a11y-contrast-fg) !important;
| |
| border-color:var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Main containers (Timeless needs explicit coverage) */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
| |
| background:#000 !important;
| |
| color:var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Sidebars / tools */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
| |
| background:#000 !important;
| |
| color:var(--a11y-contrast-fg) !important;
| |
| border-color: var(--a11y-contrast-border-70) !important;
| |
| }
| |
| | |
| /* FIX: portlet text stays yellow (titles, non-links) */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
| |
| color:var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* FIX: portlet links should be blue + underlined */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
| |
| color: var(--a11y-contrast-link) !important;
| |
| text-decoration: underline !important;
| |
| text-decoration-thickness: 2px;
| |
| text-underline-offset: 0.15em;
| |
| }
| |
| | |
| /* CRITICAL FIX: many MW links are <a><span>text</span></a>
| |
| The span was inheriting/being forced yellow.
| |
| Make link contents inherit the link colour. */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
| |
| color: inherit !important;
| |
| }
| |
| | |
| /* A11y UI in contrast */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
| |
| background:#000 !important;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
| |
| background:#000 !important;
| |
| color:var(--a11y-contrast-fg) !important;
| |
| border:2px solid var(--a11y-contrast-border-85) !important;
| |
| }
| |
| | |
| /* FIX: “?” help button in contrast */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
| |
| background:#000 !important;
| |
| color:var(--a11y-contrast-fg) !important;
| |
| border:2px solid var(--a11y-contrast-border-85) !important;
| |
| }
| |
| | |
| /* ------------------------------
| |
| Underline links
| |
| ------------------------------ */
| |
| body.a11y-underline-links a{
| |
| text-decoration: none !important;
| |
| border-bottom: 2px solid currentColor;
| |
| padding-bottom: 0.05em;
| |
| }
| |
| body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
| |
| border-bottom-color: var(--a11y-contrast-link) !important;
| |
| }
| |
| | |
| /* ------------------------------
| |
| Text spacing
| |
| ------------------------------ */
| |
| body.a11y-spacing-plus{
| |
| line-height: 1.8 !important;
| |
| letter-spacing: 0.06em !important;
| |
| word-spacing: 0.16em !important;
| |
| }
| |
| body.a11y-spacing-minus{
| |
| line-height: 1.45 !important;
| |
| letter-spacing: 0.01em !important; | |
| word-spacing: 0.02em !important;
| |
| }
| |
| | |
| /* ------------------------------
| |
| Large cursors (wiki-hosted)
| |
| ------------------------------ */
| |
| body.a11y-cursor-white,
| |
| body.a11y-cursor-white *{
| |
| cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
| |
| }
| |
| body.a11y-cursor-yellow,
| |
| body.a11y-cursor-yellow *{
| |
| cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
| |
| }
| |
| | |
| /* ------------------------------
| |
| Reading ruler
| |
| ------------------------------ */
| |
| #a11y-ruler{
| |
| position: fixed;
| |
| left: 0;
| |
| top: 0;
| |
| height: 22px;
| |
| width: 100vw;
| |
| z-index: 9999;
| |
| pointer-events: none;
| |
| | |
| background: linear-gradient(
| |
| to bottom,
| |
| var(--a11y-contrast-fg) 0%,
| |
| var(--a11y-contrast-fg) 40%,
| |
| #000000 40%,
| |
| #000000 60%,
| |
| var(--a11y-contrast-fg) 60%,
| |
| var(--a11y-contrast-fg) 100%
| |
| );
| |
| }
| |
| #a11y-ruler[hidden]{ display:none !important; }
| |
| | |
| /* =========================================================
| |
| MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
| |
| Add at END of Gadget CSS so it wins.
| |
| ========================================================= */
| |
| | |
| /* TOC */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border-color: var(--a11y-contrast-border-75) !important;
| |
| } | | } |
| | */ |
|
| |
|
| /* Category links area */ | | /* End of Timeless baseline */ |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks *{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border-color: var(--a11y-contrast-border-75) !important;
| |
| }
| |
| | |
| /* Wikitables */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable *{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border-color: var(--a11y-contrast-border-75) !important;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable th,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table th{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Figures/captions */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Thumb frames / image captions */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border-color: var(--a11y-contrast-border-75) !important;
| |
| }
| |
| | |
| /* Code-like blocks */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border-color: var(--a11y-contrast-border-75) !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| HIGH CONTRAST: Footer (Vector + Timeless)
| |
| ========================================================= */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| background-image: none !important;
| |
| border-top: 10px solid var(--a11y-contrast-fg) !important;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons *{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* FIX: footer links should be blue (not yellow) */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
| |
| color: var(--a11y-contrast-link) !important;
| |
| text-decoration: underline !important;
| |
| text-decoration-thickness: 2px;
| |
| text-underline-offset: 0.15em;
| |
| }
| |
| | |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border-color: var(--a11y-contrast-border-75) !important;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
| |
| border-color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| Underline links: ensure TOC wins
| |
| ========================================================= */
| |
| body.a11y-underline-links #toc a,
| |
| body.a11y-underline-links .toc a{
| |
| border-bottom-color: currentColor !important;
| |
| }
| |
| body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
| |
| body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
| |
| border-bottom-color: var(--a11y-contrast-link) !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| HIGH CONTRAST: Header + search + user tools
| |
| ========================================================= */
| |
| | |
| /* Base header + content containers */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
| |
| background: #000 !important;
| |
| background-image: none !important;
| |
| }
| |
| | |
| /* Timeless header containers */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet-body{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| background-image: none !important;
| |
| border-color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Title */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Strapline */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Search box wrappers */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Search input (generic) */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| caret-color: var(--a11y-contrast-fg) !important;
| |
| border: 2px solid var(--a11y-contrast-fg) !important;
| |
| box-shadow: none !important;
| |
| -webkit-text-fill-color: var(--a11y-contrast-fg) !important; /* Safari/WebKit */
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
| |
| color: var(--a11y-contrast-border-75) !important;
| |
| }
| |
| | |
| /* Timeless-specific: beat background:#fff !important */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| caret-color: var(--a11y-contrast-fg) !important;
| |
| border: 2px solid var(--a11y-contrast-fg) !important;
| |
| -webkit-text-fill-color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Search submit button */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
| |
| background-color: #000 !important;
| |
| border: 2px solid var(--a11y-contrast-border-85) !important;
| |
| filter: none !important;
| |
| }
| |
| | |
| /* Suggestions dropdown */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest *{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border-color: var(--a11y-contrast-border-85) !important;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:visited{
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result-current,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:hover{
| |
| background: #111 !important;
| |
| }
| |
| | |
| /* Vector search tabs area */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border-color: var(--a11y-contrast-border-85) !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| HIGH CONTRAST: Personal tools (reduce border clutter)
| |
| ========================================================= */
| |
| | |
| /* Force yellow text to beat Timeless dark text */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body *{
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Force black background to beat Timeless white dropdown */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
| |
| background: #000 !important;
| |
| background-image: none !important;
| |
| }
| |
| | |
| /* Keep ONE border only (container), remove nested borders */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border: 2px solid var(--a11y-contrast-border-85) !important;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown *{
| |
| background: transparent !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border: 0 !important;
| |
| outline-color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| /* Leave links to global link rules */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a:visited{
| |
| background: transparent !important;
| |
| border-color: transparent !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| HIGH CONTRAST: Timeless containers that fight back
| |
| ========================================================= */
| |
| | |
| /* Timeless forces grey content container */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
| |
| background: #000 !important;
| |
| background-image: none !important;
| |
| }
| |
| | |
| /* Timeless header container sometimes white at breakpoints */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
| |
| background: #000 !important;
| |
| background-image: none !important;
| |
| }
| |
| | |
| /* Timeless related-navigation sidebar chunk at ≥1340px */
| |
| @media screen and (min-width: 1340px){
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
| |
| #mw-related-navigation .sidebar-chunk{
| |
| background: #000 !important;
| |
| background-image: none !important;
| |
| border-color: var(--a11y-contrast-border-85) !important;
| |
| box-shadow: none !important;
| |
| }
| |
| }
| |
| | |
| /* mw-content border colour in high-contrast mode */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
| |
| border-color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| EDIT MODE: textarea and editOptions
| |
| ========================================================= */
| |
| | |
| /* Edit textarea */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| caret-color: var(--a11y-contrast-fg) !important;
| |
| border: 2px solid var(--a11y-contrast-fg) !important;
| |
| box-shadow: none !important;
| |
| -webkit-text-fill-color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::placeholder{
| |
| color: var(--a11y-contrast-border-75) !important;
| |
| }
| |
| | |
| /* editOptions bar */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border-color: var(--a11y-contrast-border-85) !important;
| |
| box-shadow: none !important;
| |
| }
| |
| | |
| /* Don’t override links here — let your global contrast link styling apply */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a:visited{
| |
| background: transparent !important;
| |
| border-color: transparent !important;
| |
| }
| |
| | |
| /* Buttons + inputs inside editOptions */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border: 2px solid var(--a11y-contrast-border-85) !important;
| |
| box-shadow: none !important;
| |
| -webkit-text-fill-color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* Focus visibility */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
| |
| outline: 3px solid var(--a11y-contrast-fg) !important;
| |
| outline-offset: 2px !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
| |
| ========================================================= */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
| |
| background: #000 !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| border: 2px solid var(--a11y-contrast-border-85) !important;
| |
| box-shadow: none !important;
| |
| }
| |
| /* Inner content */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content *{
| |
| background: transparent !important;
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| /* Icon */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon *{
| |
| color: var(--a11y-contrast-fg) !important;
| |
| fill: var(--a11y-contrast-fg) !important;
| |
| }
| |
| /* Emphasis */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message strong{
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* FIX: Timeless sidebar chunks stay light at 1100–1339px.
| |
| Force black/yellow in high-contrast mode only. */
| |
| @media screen and (min-width: 1100px) and (max-width: 1339px){
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk{
| |
| background: #000 !important;
| |
| background-image: none !important;
| |
| border-color: var(--a11y-contrast-border-85) !important;
| |
| box-shadow: none !important;
| |
| }
| |
| | |
| /* If any text inside is still dark, force it yellow */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk *{
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* …but if it’s a LINK (or inside a link), keep it blue */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a:visited{
| |
| color: var(--a11y-contrast-link) !important;
| |
| text-decoration: underline !important;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a *{
| |
| color: inherit !important;
| |
| }
| |
| }
| |
| | |
| /* FIX (stronger): Timeless sidebar chunks at 1100–1339px still light.
| |
| Must beat the skin rule in the same breakpoint. */
| |
| @media screen and (min-width: 1100px) and (max-width: 1339px){
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk{
| |
| background: #000 !important;
| |
| background-image: none !important;
| |
| border-color: var(--a11y-contrast-border-85) !important;
| |
| box-shadow: none !important;
| |
| }
| |
| | |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk *{
| |
| color: var(--a11y-contrast-fg) !important;
| |
| }
| |
| | |
| /* …but links stay blue */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a:visited,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a:visited{
| |
| color: var(--a11y-contrast-link) !important;
| |
| text-decoration: underline !important;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a *{
| |
| color: inherit !important;
| |
| }
| |
| }
| |
| | |
| /* =========================================================
| |
| EMERGENCY: ensure the accessibility toggle is visible
| |
| (keep at VERY END)
| |
| ========================================================= */
| |
| #a11y-toggle.a11y-toggle{
| |
| position: fixed !important;
| |
| right: 16px !important;
| |
| bottom: 16px !important;
| |
| | |
| display: inline-flex !important;
| |
| visibility: visible !important;
| |
| opacity: 1 !important;
| |
| | |
| z-index: 2147483647 !important;
| |
| pointer-events: auto !important;
| |
| | |
| transform: none !important;
| |
| }
| |
| #a11y-toggle.a11y-toggle svg{
| |
| display: block !important;
| |
| visibility: visible !important;
| |
| opacity: 1 !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| HIGH CONTRAST: Scrollbars (page + editor)
| |
| Supports: Chrome/Safari/Opera (WebKit) + Firefox
| |
| Scope: ONLY when body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) is active
| |
| ========================================================= */
| |
| | |
| /* ---------- Firefox (Gecko) ---------- */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
| |
| scrollbar-color: var(--a11y-contrast-fg) #000; /* thumb / track */
| |
| scrollbar-width: auto; /* or 'thin' if you prefer */
| |
| }
| |
| | |
| /* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
| |
| /* Page scrollbars */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
| |
| width: 14px;
| |
| height: 14px; /* horizontal */
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-track{
| |
| background: #000;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb{
| |
| background: var(--a11y-contrast-fg);
| |
| border: 3px solid #000; /* creates separation from track */
| |
| border-radius: 10px;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb:hover{
| |
| background: var(--a11y-contrast-fg-hover); /* slightly lighter yellow on hover */
| |
| }
| |
| | |
| /* Editor + common scrollable containers (safety net) */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui *{
| |
| scrollbar-color: var(--a11y-contrast-fg) #000; /* Firefox for these elements too */
| |
| }
| |
| | |
| /* FIX: WikiEditor tool-select dropdown text becomes unreadable
| |
| because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select *{
| |
| color: #222 !important; /* readable on the tool-select's light background */
| |
| }
| |
| | |
| /* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
| |
| color: #0645ad !important; /* MediaWiki blue */
| |
| }
| |
| | |
| /* Active tab: keep it dark for readability on light background */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current:visited{
| |
| color: #222 !important;
| |
| }
| |
| | |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
| |
| width: 14px;
| |
| height: 14px;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-track,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-track,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-track{
| |
| background: #000;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb{
| |
| background: var(--a11y-contrast-fg);
| |
| border: 3px solid #000;
| |
| border-radius: 10px;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb:hover,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb:hover,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb:hover{
| |
| background: var(--a11y-contrast-fg-hover);
| |
| }
| |
| | |
| /* Try to target root scrolling element where supported */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
| |
| scrollbar-color: var(--a11y-contrast-fg) #000;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar{
| |
| width: 14px;
| |
| height: 14px;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-track{
| |
| background: #000;
| |
| }
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-thumb{
| |
| background: var(--a11y-contrast-fg);
| |
| border: 3px solid #000;
| |
| border-radius: 10px;
| |
| }
| |
| | |
| /* =========================================================
| |
| FINAL OVERRIDE (brute force):
| |
| High-contrast links must be blue + underlined everywhere,
| |
| including link text wrapped in spans inside portlets/footer.
| |
| PUT THIS AT THE VERY END OF THE FILE.
| |
| ========================================================= */
| |
| | |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
| |
| color: var(--a11y-contrast-link) !important;
| |
| text-decoration: underline !important;
| |
| text-decoration-thickness: 2px !important;
| |
| text-underline-offset: 0.15em !important;
| |
| }
| |
| | |
| /* Critical: if link text is wrapped (e.g. <a><span>Text</span></a>),
| |
| force ALL children inside links to inherit the link colour. */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
| |
| color: inherit !important;
| |
| }
| |
| | |
| /* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a:visited{
| |
| color: var(--a11y-contrast-link) !important;
| |
| text-decoration: underline !important;
| |
| }
| |
| | |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
| |
| color: inherit !important;
| |
| }
| |
| | |
| /* =========================================================
| |
| FINAL FIX: #personal (user tools) links
| |
| The portlet-body * rule forces yellow.
| |
| Override ONLY for links and their contents.
| |
| ========================================================= */
| |
| | |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
| |
| color: var(--a11y-contrast-link) !important;
| |
| text-decoration: underline !important;
| |
| }
| |
| | |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
| |
| body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
| |
| color: inherit !important;
| |
| }
| |
