/* ======================================== Admin Accessibility Normalization Structural rules are scoped under class="admin-normalized" on the page's content wrapper and apply to everyone. High-contrast visual rules are additionally gated behind the a11y-mode class on , toggled by the header accessibility button and applied early by includes/admin-a11y-mode.ftl. ======================================== */ /* ---------------------------------------- Always-on. Focus visibility, keyboard support and structural fixes. ---------------------------------------- */ .admin-normalized .btn, .admin-normalized button, .admin-normalized .btn span, .admin-normalized button span { text-shadow: none; } .admin-normalized .btn:focus-visible, .admin-normalized button:focus-visible { outline: 2px solid var(--color-tertiary); outline-offset: 2px; } .admin-normalized input:focus-visible, .admin-normalized select:focus-visible, .admin-normalized textarea:focus-visible, .admin-normalized a:focus-visible { outline: 2px solid var(--color-tertiary); outline-offset: 2px; } .admin-normalized .btn-primary-minimalist { color: var(--color-tertiary-text); } .admin-normalized .btn-primary-minimalist:not([disabled]):focus-visible { background-color: var(--color-tertiary); color: #fff; border-color: var(--color-background); } .admin-normalized .btn-secondary-minimalist:not([disabled]):focus-visible { background-color: #c9c9c9; font-weight: bold; border: none; } .admin-normalized .lock-state { width: 2.8em; height: 2.8em; line-height: normal; font-size: var(--font-size-medium); } /* Larger lock id while accessibility mode is on */ html.a11y-mode .admin-normalized .lock-state { font-size: var(--font-size-large); } .admin-normalized .free, .admin-normalized .occupied, .admin-normalized .tdHeight { font-size: var(--font-size-small); } /* WCAG AA green in both modes (the original 2.88:1 fails even large text) */ .admin-normalized .free { color: #15803D; } .admin-normalized .sidebarLeft a:focus-visible { outline: none; } .admin-normalized .sidebarLeft a:focus-visible .lockerSidebarLink { background-color: #fff3e0; color: var(--color-tertiary); } #open-spotlight { background: none; border: none; cursor: pointer; padding: 0; } #open-spotlight:focus-visible { outline: 2px solid var(--color-tertiary); outline-offset: 2px; border-radius: 4px; } /* Matches the 24px svg icons of the neighboring header buttons, including their 2px downward nudge */ #a11yModeToggle { background: none; border: none; cursor: pointer; padding: 0; position: relative; width: 24px; height: 24px; font-size: 24px; line-height: 1; transform: translateY(2px); color: var(--color-medium-dark); } /* Pressed state mirrors the accessibility palette it enables */ #a11yModeToggle[aria-pressed="true"] { color: #C54500; } /* Corner dot badge, a shape cue so the active state does not rely on the hue change alone (WCAG 1.4.1) */ #a11yModeToggle[aria-pressed="true"]::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #C54500; border: 2px solid var(--color-topbarBackground, #fff); } #a11yModeToggle:focus-visible { outline: 2px solid var(--color-tertiary); outline-offset: 2px; border-radius: 4px; } .admin-normalized [role="button"][tabindex]:focus-visible { outline: 2px solid var(--color-tertiary); outline-offset: 2px; border-radius: 4px; } .admin-normalized .ace_editor:focus-visible { outline: 2px solid var(--color-tertiary); outline-offset: 2px; } .admin-normalized .modal-header .close, .admin-normalized .modal-header button[data-bs-dismiss="modal"]:not(.btn-close):not(.btn) { color: var(--color-dark); text-shadow: none; opacity: 1; font-size: 1.5rem; background: transparent; border: 0; } .page-title-with-back { display: flex; align-items: center; gap: var(--Spacing-space-100, 1rem); margin-bottom: 8px; padding-left: var(--Spacing-space-125, 1.25rem); } .page-title-with-back h3 { margin: 0; } .back-arrow-link { color: var(--color-tertiary); font-size: var(--font-size-extralarge); text-decoration: none; display: flex; align-items: center; flex-shrink: 0; } .back-arrow-link:focus-visible { outline: 2px solid var(--color-tertiary); outline-offset: 2px; border-radius: 4px; } #customLanguagePopup button:focus-visible { outline: 2px solid var(--color-tertiary); outline-offset: 2px; border-radius: 4px; } #customLanguagePopup .customLanguageButton:focus-visible { background-color: #fff3ec; } /* Subtle input borders in normal mode. Accessibility mode strengthens them with the gated rules below. */ .admin-normalized input[type="text"], .admin-normalized input[type="email"], .admin-normalized input[type="number"], .admin-normalized input[type="password"], .admin-normalized input[type="search"], .admin-normalized input[type="tel"], .admin-normalized input[type="url"], .admin-normalized input[type="date"], .admin-normalized input[type="datetime-local"], .admin-normalized input[type="time"], .admin-normalized select, .admin-normalized textarea { border: 1px solid var(--color-medium-light); } .admin-normalized .btn-primary-minimalist, .admin-normalized .btn-secondary-minimalist { border: 1px solid var(--color-medium-light); } .admin-normalized .btn-secondary-minimalist:not([disabled]):hover { border: 1px solid var(--color-medium-light); } /* ---------------------------------------- Gated. High-contrast visuals applied only while accessibility mode is on. ---------------------------------------- */ /* Header controls (user block, language selector) keep their normal-mode typography */ html.a11y-mode .admin-normalized .btn, html.a11y-mode .admin-normalized button:not(#logoutButton):not(#customLanguageCurrent) { font-weight: 700; } html.a11y-mode .admin-normalized .btn span, html.a11y-mode .admin-normalized button:not(#logoutButton):not(#customLanguageCurrent) span { font-weight: inherit; } /* Keeps anchor nav-links consistent with the bolded button nav-links */ html.a11y-mode .admin-normalized .nav-link { font-weight: 700; } html.a11y-mode .admin-normalized .btn-primary { background-color: #C54500; border-color: #C54500; } /* The brightness filter from the base hover rule cascades, dimming this to roughly #b53f00. White text on it is 5.71:1, comfortably AA. */ html.a11y-mode .admin-normalized .btn-primary:hover, html.a11y-mode .admin-normalized .btn-primary:focus, html.a11y-mode .admin-normalized .btn-primary:focus-visible { color: var(--color-white); background-color: #C54500; border-color: #C54500; box-shadow: none; } html.a11y-mode .admin-normalized .btn-secondary:hover, html.a11y-mode .admin-normalized .btn-secondary:focus, html.a11y-mode .admin-normalized .btn-secondary:focus-visible { color: var(--color-tertiary); background-color: #fff3ec; background-image: none; border-color: var(--color-tertiary); box-shadow: none; transform: none; } /* Input border contrast. WCAG 1.4.11 Non-text Contrast, 3:1 against white. */ html.a11y-mode .admin-normalized input[type="text"], html.a11y-mode .admin-normalized input[type="email"], html.a11y-mode .admin-normalized input[type="number"], html.a11y-mode .admin-normalized input[type="password"], html.a11y-mode .admin-normalized input[type="search"], html.a11y-mode .admin-normalized input[type="tel"], html.a11y-mode .admin-normalized input[type="url"], html.a11y-mode .admin-normalized input[type="date"], html.a11y-mode .admin-normalized input[type="datetime-local"], html.a11y-mode .admin-normalized input[type="time"], html.a11y-mode .admin-normalized select, html.a11y-mode .admin-normalized textarea { border: 1px solid var(--color-medium-dark); } html.a11y-mode .admin-normalized .btn-secondary-minimalist, html.a11y-mode .admin-normalized .btn-primary-minimalist { border: 1px solid var(--color-medium-dark); } html.a11y-mode .admin-normalized .btn-secondary-minimalist:not([disabled]):hover { border: 1px solid var(--color-medium-dark); } /* WCAG AA contrast variants of brand colors */ html.a11y-mode .admin-normalized .breadcrumb > .active { color: #C54500; } html.a11y-mode .admin-normalized .occupied { color: #B91C1C; } html.a11y-mode .admin-normalized .form-label, html.a11y-mode .admin-normalized label { color: #334155; } html.a11y-mode .admin-normalized .view-pill.active, html.a11y-mode .admin-normalized .view-pill:hover { color: #C54500; } html.a11y-mode .admin-normalized .lock-state-open { background-color: #0E8C63; } html.a11y-mode .back-arrow-link:hover { color: #C54500; }