MediaWiki:Gadget-bhc-accessibility.css

Revision as of 19:38, 26 January 2026 by Steve (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* =========================================================
   BHC Accessibility Gadget – FINAL
   ========================================================= */

:root{
  --a11y-yellow: #FFD400;
  --a11y-blue: #36C;
}

/* ---------------------------------------------------------
   High Contrast Mode
   --------------------------------------------------------- */

body.a11y-contrast{
  background: #000 !important;
  color: var(--a11y-yellow) !important;
}

/* Global text */
body.a11y-contrast *{
  color: var(--a11y-yellow) !important;
}

/* Links */
body.a11y-contrast a,
body.a11y-contrast a:visited{
  color: var(--a11y-yellow) !important;
}

/* ---------------------------------------------------------
   Header (contrast)
   --------------------------------------------------------- */

body.a11y-contrast #mw-header-container,
body.a11y-contrast #mw-header{
  background: #000 !important;
}

body.a11y-contrast #p-banner,
body.a11y-contrast .bhc-strapline{
  color: var(--a11y-yellow) !important;
}

/* Search */
body.a11y-contrast #searchInput,
body.a11y-contrast input[type="search"]{
  background: #000 !important;
  color: var(--a11y-yellow) !important;
  border: 2px solid var(--a11y-yellow) !important;
}

/* ---------------------------------------------------------
   User tools dropdown
   --------------------------------------------------------- */

body.a11y-contrast #personal,
body.a11y-contrast #personal *{
  background: #000 !important;
  color: var(--a11y-yellow) !important;
}

/* ---------------------------------------------------------
   TOC, tables, categories
   --------------------------------------------------------- */

body.a11y-contrast .toc,
body.a11y-contrast .wikitable,
body.a11y-contrast .mw-normal-catlinks,
body.a11y-contrast figure,
body.a11y-contrast pre{
  background: #000 !important;
  border-color: var(--a11y-yellow) !important;
}

/* ---------------------------------------------------------
   Underlined links (wiki style)
   --------------------------------------------------------- */

body.a11y-underline-links a{
  text-decoration: none !important;
  border-bottom: 2px solid var(--a11y-blue);
}

/* ---------------------------------------------------------
   Text size (Timeless-safe)
   --------------------------------------------------------- */

body.a11y-text-plus{
  font-size: 120% !important;
}

body.a11y-text-minus{
  font-size: 90% !important;
}

/* ---------------------------------------------------------
   Text spacing
   --------------------------------------------------------- */

body.a11y-spacing-plus{
  line-height: 1.8 !important;
  letter-spacing: .06em !important;
  word-spacing: .16em !important;
}

body.a11y-spacing-minus{
  line-height: 1.45 !important;
}

/* ---------------------------------------------------------
   Cursors
   --------------------------------------------------------- */

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;
  top: 0;
  left: 0;
  width: 100vw;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--a11y-yellow) 0 40%,
    #000 40% 60%,
    var(--a11y-yellow) 60% 100%
  );
  z-index: 9999;
}

#a11y-ruler[hidden]{ display:none !important; }