copilot-swe-agent[bot]
6ff1da2496
- Add real-time search/filter bar for finding settings by name, key, or description - Add sidebar navigation with category icons and setting counts - Make category sections collapsible with smooth animations - Add mobile-friendly category dropdown selector - Show setting key as code badge for quick reference - Compact header with inline precedence/legend info - Add intersection observer for active category tracking in sidebar - Add no-results state with clear search action - Maintain all existing functionality (save, revert, bulk save, alerts) - Full dark mode compatibility via existing CSS overrides Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
241 lines
8.6 KiB
CSS
241 lines
8.6 KiB
CSS
/* 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 <html> 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; }
|