/* These styles are generated from project.scss. */ .alert-debug { color: black; background-color: white; border-color: #d6e9c6; } .alert-error { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; } /* Fade OUT old content during the swap phase */ .htmx-swapping { opacity: 0; transition: opacity 0.3s ease; } /* New content starts invisible */ .htmx-added { opacity: 0; } /* Fade IN new content during the settling phase */ .htmx-added.htmx-settling { opacity: 1; transition: opacity 0.3s ease; } /* Fix list-group black background and hover issues */ .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: rgba(var(--bs-border-color-rgb), 0.175); } .list-group-item { background-color: transparent; color: var(--bs-body-color); } .list-group-item:hover, .list-group-item:focus { background-color: rgba(var(--bs-primary-rgb), 0.1); color: var(--bs-body-color); } .list-group-item-action:hover { background-color: rgba(var(--bs-primary-rgb), 0.1); } /* ========================================================================== Accessibility widget (shared guidelines §10) Preferences are data-* attributes on ; see partials/_accessibility.html. Dark theme is delegated to Bootstrap's native data-bs-theme (mirrored from data-theme in project.js); only a couple of purple-legibility tweaks are layered on below. ========================================================================== */ /* Text size — scales the rem base, so the whole (rem-based) UI scales. */ html[data-a11y-text="large"] { font-size: 112.5%; } html[data-a11y-text="extra-large"] { font-size: 125%; } /* Contrast */ html[data-a11y-contrast="high"] { --bs-body-color: #000; --bs-border-color: #000; } html[data-a11y-contrast="high"][data-bs-theme="dark"] { --bs-body-color: #fff; --bs-border-color: #fff; } html[data-a11y-contrast="low"] { --bs-body-color: #5a5a5a; } /* Dark mode purple legibility. The brand primary is a dark purple (#593196). Bootstrap lightens links and *-emphasis tokens in dark mode (to #9b83c0) but leaves .text-primary and .btn-outline-primary on the raw, low-contrast purple. Align them to the same lighter purple so purple text stays readable on dark backgrounds. */ html[data-bs-theme="dark"] .text-primary { color: #9b83c0 !important; } html[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #9b83c0; --bs-btn-border-color: #9b83c0; --bs-btn-hover-bg: #9b83c0; --bs-btn-hover-border-color: #9b83c0; --bs-btn-active-bg: #9b83c0; --bs-btn-active-border-color: #9b83c0; } /* Reduced motion — honour the explicit preference regardless of OS setting. */ html[data-a11y-motion="reduced"] *, html[data-a11y-motion="reduced"] *::before, html[data-a11y-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Panel is opened from the navbar/footer "Accessibility" triggers. */ .a11y-panel { position: fixed; bottom: 4rem; left: 1rem; z-index: 1080; width: min(320px, calc(100vw - 2rem)); padding: 1rem; border: 1px solid var(--bs-border-color, #ccc); border-radius: 0.5rem; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #000); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .a11y-panel[hidden] { display: none; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .a11y-close { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: inherit; } .a11y-group { border: 0; margin: 0 0 0.75rem; padding: 0; } .a11y-group legend { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; padding: 0; } .a11y-group button { margin: 0 0.25rem 0.25rem 0; padding: 0.25rem 0.6rem; border: 1px solid var(--bs-border-color, #ccc); border-radius: 0.25rem; background: transparent; color: inherit; cursor: pointer; } .a11y-group button[aria-pressed="true"] { background: var(--bs-primary, #0d6efd); border-color: var(--bs-primary, #0d6efd); color: #fff; }