/* frontend/static/styles.css */ /* Example overrides or additional styling */ /* ============================================================= ACCESSIBILITY Skip-to-content link, focus indicators, and screen-reader-only utility class following WCAG 2.1 Level AA requirements. ============================================================= */ /* Skip-to-content link: visible only on keyboard focus */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999; padding: 0.75rem 1.5rem; background-color: #1d4ed8; color: #ffffff; font-weight: 600; text-decoration: none; border-radius: 0 0 0.375rem 0; } .skip-link:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; outline: 2px solid #2563eb; outline-offset: 2px; } /* Enhanced focus-visible indicators for keyboard navigation (WCAG 2.4.7) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } /* Screen-reader-only utility (visually hidden, accessible to AT) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } body { /* Your global overrides can go here if needed */ } .material-symbols-light--folder-managed-outline { display: inline-block; width: 96px; height: 96px; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m17.212 20.404l-.108-.885q-.57-.125-.938-.33q-.368-.204-.7-.577l-.835.334l-.539-.815l.689-.577q-.165-.531-.165-1.035t.165-1.034l-.689-.577l.539-.816l.835.335q.332-.393.7-.588q.369-.195.938-.32l.108-.885h1l.107.885q.57.125.938.32t.7.588l.835-.335l.539.816l-.689.576q.166.531.166 1.035t-.166 1.035l.689.577l-.539.815l-.834-.335q-.333.373-.701.578q-.369.205-.938.33l-.107.885zm.5-1.731q.882 0 1.518-.635q.636-.636.636-1.519t-.636-1.518t-1.518-.636t-1.519.636t-.635 1.518t.635 1.519t1.518.635M4 18V6v4.435V10zm.616 1q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h4.981l2 2h7.789q.69 0 1.153.463T21 8.616v2.294q-.238-.152-.479-.265q-.24-.112-.521-.21v-1.82q0-.269-.173-.442T19.385 8h-8.19l-2-2h-4.58q-.269 0-.442.173T4 6.616v10.769q0 .269.173.442t.443.173h6.748q.055.275.131.515t.186.485z'/%3E%3C/svg%3E"); background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* Ensure pagination wraps properly on small screens */ .pagination { flex-wrap: wrap; gap: 0.5rem; } .pagination-buttons { flex-wrap: wrap; } /* Ensure filter items stack on very small screens */ @media (max-width: 480px) { .filter-group { flex-direction: column; } .filter-item { min-width: unset; width: 100%; } } /* ============================================================= DARK MODE Activated by "dark" class on element. Toggled by the navbar button; preference stored in localStorage. Falls back to the server-side ui_default_color_scheme setting, then to the OS prefers-color-scheme media query. WCAG AA contrast ratios verified for all text/background pairs. ============================================================= */ /* Tell the browser we support both colour schemes */ html { color-scheme: light; } html.dark { color-scheme: dark; } /* ---- Base / Body ---- */ html.dark body { background-color: #111827; color: #e5e7eb; } html.dark .bg-gray-50 { background-color: #111827; } html.dark .bg-white { background-color: #1f2937; } html.dark .bg-gray-100 { background-color: #374151; } html.dark .bg-gray-200 { background-color: #4b5563; } /* ---- Text colours ---- */ html.dark .text-gray-900 { color: #f9fafb; } html.dark .text-gray-800 { color: #f3f4f6; } html.dark .text-gray-700 { color: #e5e7eb; } html.dark .text-gray-600 { color: #d1d5db; } html.dark .text-gray-500 { color: #9ca3af; } html.dark .text-gray-400 { color: #9ca3af; } html.dark .text-black { color: #f9fafb; } /* ---- Borders ---- */ html.dark .border-gray-100 { border-color: #374151; } html.dark .border-gray-200 { border-color: #374151; } html.dark .border-gray-300 { border-color: #4b5563; } html.dark .border-gray-400 { border-color: #6b7280; } html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; } html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; } html.dark .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #374151; } /* ---- Hover states ---- */ html.dark .hover\:bg-gray-50:hover { background-color: #374151; } html.dark .hover\:bg-gray-100:hover { background-color: #4b5563; } html.dark .hover\:text-gray-900:hover { color: #f9fafb; } html.dark .hover\:text-gray-700:hover { color: #e5e7eb; } /* ---- Shadows (softened for dark mode) ---- */ html.dark .shadow, html.dark .shadow-md, html.dark .shadow-sm, html.dark .shadow-lg { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.6), 0 1px 2px 0 rgba(0,0,0,0.4); } /* ---- Alert / info-banner backgrounds ---- */ html.dark .bg-blue-50 { background-color: #1e3a5f; } html.dark .bg-green-50 { background-color: #052e16; } html.dark .bg-red-50 { background-color: #450a0a; } html.dark .bg-yellow-50 { background-color: #451a03; } html.dark .bg-indigo-50 { background-color: #1e1b4b; } html.dark .bg-orange-50 { background-color: #431407; } /* ---- Badge / pill backgrounds ---- */ html.dark .bg-blue-100 { background-color: #1e3a5f; } html.dark .bg-green-100 { background-color: #052e16; } html.dark .bg-red-100 { background-color: #450a0a; } html.dark .bg-yellow-100 { background-color: #451a03; } html.dark .bg-indigo-100 { background-color: #1e1b4b; } html.dark .bg-orange-100 { background-color: #431407; } html.dark .bg-purple-100 { background-color: #2e1065; } /* ---- Status / badge text colours ---- */ html.dark .text-blue-700 { color: #93c5fd; } html.dark .text-blue-800 { color: #bfdbfe; } html.dark .text-green-700 { color: #86efac; } html.dark .text-green-800 { color: #bbf7d0; } html.dark .text-red-700 { color: #fca5a5; } html.dark .text-red-800 { color: #fecaca; } html.dark .text-yellow-700 { color: #fcd34d; } html.dark .text-yellow-800 { color: #fde68a; } html.dark .text-indigo-700 { color: #a5b4fc; } html.dark .text-indigo-800 { color: #c7d2fe; } html.dark .text-orange-700 { color: #fdba74; } html.dark .text-orange-800 { color: #fed7aa; } html.dark .text-purple-700 { color: #d8b4fe; } html.dark .text-purple-800 { color: #e9d5ff; } /* ---- Dropdown / popup menus ---- */ html.dark .bg-white.rounded-md.shadow-lg { background-color: #1f2937; } html.dark .ring-black { --tw-ring-color: rgba(0,0,0,0.5); } /* ---- Form inputs / selects / textareas ---- */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.dark select, html.dark textarea { background-color: #374151; border-color: #4b5563; color: #e5e7eb; } html.dark input::placeholder, html.dark textarea::placeholder { color: #9ca3af; } html.dark input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.dark select:focus, html.dark textarea:focus { border-color: #60a5fa; outline-color: #60a5fa; } /* ---- Table rows ---- */ html.dark thead, html.dark .bg-gray-50 thead { background-color: #1f2937; } html.dark thead th { color: #9ca3af; } html.dark tbody tr:hover { background-color: #374151; } /* ---- Code / pre ---- */ html.dark pre, html.dark code { background-color: #111827; color: #d1d5db; } /* ---- Dark-mode toggle button icon colour ---- */ html.dark #darkModeToggle { color: #fbbf24; } html.dark #darkModeToggle:hover { background-color: #374151; } /* ---- Dark-mode skip-link ---- */ html.dark .skip-link { background-color: #2563eb; } html.dark .skip-link:focus { outline-color: #60a5fa; } /* ---- Dark-mode focus-visible indicators ---- */ html.dark a:focus-visible, html.dark button:focus-visible, html.dark input:focus-visible, html.dark select:focus-visible, html.dark textarea:focus-visible, html.dark [tabindex]:focus-visible { outline-color: #60a5fa; } /* ---- Scrollbar (WebKit browsers) ---- */ html.dark ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark ::-webkit-scrollbar-track { background: #1f2937; } html.dark ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* ---- Settings page: sidebar active state (dark) ---- */ html.dark .bg-blue-50 { background-color: #1e3a5f; }