gitea-actions[bot]
228 lines
5.5 KiB
CSS
228 lines
5.5 KiB
CSS
@charset "UTF-8";
|
|
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
|
|
*
|
|
* This file is part of a Moko Consulting project.
|
|
*
|
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
|
*
|
|
* FILE INFORMATION
|
|
* DEFGROUP: Joomla.Template.Site
|
|
* INGROUP: MokoOnyx.Accessibility
|
|
* REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx
|
|
* PATH: ./media/css/a11y-high-contrast.css
|
|
* VERSION: 02.27.03
|
|
* BRIEF: High-contrast stylesheet for accessibility toolbar
|
|
*/
|
|
|
|
/* ===================================================================
|
|
* HIGH CONTRAST MODE
|
|
* Applied when .a11y-high-contrast is on <html>.
|
|
* Overrides theme variables to maximise contrast ratios (WCAG AAA).
|
|
* =================================================================== */
|
|
|
|
/* ── Light mode high contrast ─────────────────────────────────────── */
|
|
:root[data-bs-theme="light"].a11y-high-contrast {
|
|
--body-color: #000;
|
|
--body-color-rgb: 0, 0, 0;
|
|
--body-bg: #fff;
|
|
--body-bg-rgb: 255, 255, 255;
|
|
--heading-color: #000;
|
|
--emphasis-color: #000;
|
|
--secondary-color: #000000bf;
|
|
--tertiary-color: #00000080;
|
|
--muted-color: #333;
|
|
|
|
/* Links — strong blue on white */
|
|
--color-link: #0000ee;
|
|
--link-color: #0000ee;
|
|
--link-color-rgb: 0, 0, 238;
|
|
--color-hover: #cc0000;
|
|
--link-hover-color: #cc0000;
|
|
--link-hover-color-rgb: 204, 0, 0;
|
|
|
|
/* Borders — visible on all backgrounds */
|
|
--border-color: #000;
|
|
--border-color-soft: #333;
|
|
|
|
/* Backgrounds */
|
|
--secondary-bg: #e0e0e0;
|
|
--secondary-bg-rgb: 224, 224, 224;
|
|
--tertiary-bg: #f0f0f0;
|
|
--tertiary-bg-rgb: 240, 240, 240;
|
|
|
|
/* Navigation */
|
|
--nav-bg-color: #000;
|
|
--nav-text-color: #fff;
|
|
--mainmenu-nav-link-color: #fff;
|
|
|
|
/* Buttons */
|
|
--btn-color: #fff;
|
|
--btn-bg: #000;
|
|
--btn-border-color: #000;
|
|
--btn-hover-color: #000;
|
|
--btn-hover-bg: #ffff00;
|
|
--btn-hover-border-color: #000;
|
|
--btn-active-color: #000;
|
|
--btn-active-bg: #ffff00;
|
|
--btn-active-border-color: #000;
|
|
|
|
/* Forms */
|
|
--input-color: #000;
|
|
--input-bg: #fff;
|
|
--input-border-color: #000;
|
|
--input-focus-color: #000;
|
|
--input-focus-bg: #ffffcc;
|
|
--input-focus-border-color: #0000ee;
|
|
--input-placeholder-color: #555;
|
|
|
|
/* Cards */
|
|
--card-border-color: #000;
|
|
--card-bg: #fff;
|
|
--card-cap-bg: #e0e0e0;
|
|
|
|
/* Tables */
|
|
--table-color: #000;
|
|
--table-bg: #fff;
|
|
--table-border-color: #000;
|
|
--table-striped-bg: #f0f0f0;
|
|
--table-hover-bg: #ffff99;
|
|
|
|
/* Alerts */
|
|
--alert-border-width: 2px;
|
|
|
|
/* Code */
|
|
--code-color: #000;
|
|
--code-bg-color: #ffffcc;
|
|
|
|
/* Selection */
|
|
--selection-bg: #0000ee;
|
|
--selection-ink: #fff;
|
|
|
|
/* Focus indicator — always visible */
|
|
--focus-ring-color: #0000ee;
|
|
--focus-ring-width: 3px;
|
|
}
|
|
|
|
/* ── Dark mode high contrast ──────────────────────────────────────── */
|
|
:root[data-bs-theme="dark"].a11y-high-contrast {
|
|
--body-color: #fff;
|
|
--body-color-rgb: 255, 255, 255;
|
|
--body-bg: #000;
|
|
--body-bg-rgb: 0, 0, 0;
|
|
--heading-color: #fff;
|
|
--emphasis-color: #fff;
|
|
--secondary-color: #ffffffbf;
|
|
--tertiary-color: #ffffff80;
|
|
--muted-color: #ccc;
|
|
|
|
/* Links — bright yellow on black */
|
|
--color-link: #ffff00;
|
|
--link-color: #ffff00;
|
|
--link-color-rgb: 255, 255, 0;
|
|
--color-hover: #00ffff;
|
|
--link-hover-color: #00ffff;
|
|
--link-hover-color-rgb: 0, 255, 255;
|
|
|
|
/* Borders */
|
|
--border-color: #fff;
|
|
--border-color-soft: #ccc;
|
|
|
|
/* Backgrounds */
|
|
--secondary-bg: #1a1a1a;
|
|
--secondary-bg-rgb: 26, 26, 26;
|
|
--tertiary-bg: #111;
|
|
--tertiary-bg-rgb: 17, 17, 17;
|
|
|
|
/* Navigation */
|
|
--nav-bg-color: #000;
|
|
--nav-text-color: #fff;
|
|
--mainmenu-nav-link-color: #ffff00;
|
|
|
|
/* Buttons */
|
|
--btn-color: #000;
|
|
--btn-bg: #ffff00;
|
|
--btn-border-color: #ffff00;
|
|
--btn-hover-color: #000;
|
|
--btn-hover-bg: #00ffff;
|
|
--btn-hover-border-color: #00ffff;
|
|
--btn-active-color: #000;
|
|
--btn-active-bg: #00ffff;
|
|
--btn-active-border-color: #00ffff;
|
|
|
|
/* Forms */
|
|
--input-color: #fff;
|
|
--input-bg: #000;
|
|
--input-border-color: #fff;
|
|
--input-focus-color: #fff;
|
|
--input-focus-bg: #1a1a1a;
|
|
--input-focus-border-color: #ffff00;
|
|
--input-placeholder-color: #aaa;
|
|
|
|
/* Cards */
|
|
--card-border-color: #fff;
|
|
--card-bg: #000;
|
|
--card-cap-bg: #1a1a1a;
|
|
|
|
/* Tables */
|
|
--table-color: #fff;
|
|
--table-bg: #000;
|
|
--table-border-color: #fff;
|
|
--table-striped-bg: #111;
|
|
--table-hover-bg: #333;
|
|
|
|
/* Alerts */
|
|
--alert-border-width: 2px;
|
|
|
|
/* Code */
|
|
--code-color: #00ff00;
|
|
--code-bg-color: #1a1a1a;
|
|
|
|
/* Selection */
|
|
--selection-bg: #ffff00;
|
|
--selection-ink: #000;
|
|
|
|
/* Focus indicator */
|
|
--focus-ring-color: #ffff00;
|
|
--focus-ring-width: 3px;
|
|
}
|
|
|
|
/* ── Shared high-contrast overrides (both modes) ──────────────────── */
|
|
.a11y-high-contrast * {
|
|
border-color: var(--border-color) !important;
|
|
}
|
|
|
|
.a11y-high-contrast *:focus-visible {
|
|
outline: var(--focus-ring-width, 3px) solid var(--focus-ring-color, #0000ee) !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
.a11y-high-contrast img {
|
|
outline: 2px solid var(--border-color);
|
|
}
|
|
|
|
.a11y-high-contrast a {
|
|
text-decoration: underline !important;
|
|
text-decoration-thickness: 2px !important;
|
|
}
|
|
|
|
.a11y-high-contrast button,
|
|
.a11y-high-contrast .btn,
|
|
.a11y-high-contrast input,
|
|
.a11y-high-contrast select,
|
|
.a11y-high-contrast textarea {
|
|
border-width: 2px !important;
|
|
border-style: solid !important;
|
|
}
|
|
|
|
.a11y-high-contrast .badge,
|
|
.a11y-high-contrast .alert {
|
|
border: 2px solid var(--border-color) !important;
|
|
}
|
|
|
|
/* Ensure disabled states are still distinguishable */
|
|
.a11y-high-contrast [disabled],
|
|
.a11y-high-contrast .disabled {
|
|
opacity: .5 !important;
|
|
text-decoration: line-through !important;
|
|
}
|