copilot-swe-agent[bot]
46772fc746
The toggles used Tailwind CSS v3 JIT pseudo-element utilities (after:content-[''], peer-checked:after:translate-x-full, etc.) that are not available in Tailwind v2.2.19 CDN. Added .doc-toggle / .doc-toggle-track CSS classes to styles.css using native CSS ::after pseudo-elements and adjacent-sibling selectors — works across all Tailwind versions and browsers. Updated all three toggle instances in admin_connections.html (SSO auto-login, QR login, and JS-created service settings toggles). Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com> Agent-Logs-Url: https://github.com/christianlouis/DocuElevate/sessions/64581c3a-6c34-4bb6-bb6b-6331945fed04
319 lines
11 KiB
CSS
319 lines
11 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; }
|
||
|
||
/* =============================================================
|
||
DOC-TOGGLE – cross-browser toggle switch
|
||
Works with Tailwind v2 CDN (which lacks after:* utilities).
|
||
Usage:
|
||
<label class="doc-toggle">
|
||
<input type="checkbox" class="sr-only" onchange="...">
|
||
<span class="doc-toggle-track" aria-hidden="true"></span>
|
||
<span class="ml-3 ...">Label text</span>
|
||
</label>
|
||
============================================================= */
|
||
|
||
.doc-toggle {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.doc-toggle-track {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 44px;
|
||
min-width: 44px;
|
||
height: 24px;
|
||
background-color: #e5e7eb; /* gray-200 */
|
||
border-radius: 9999px;
|
||
transition: background-color 0.2s ease-in-out;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.doc-toggle-track::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-color: #ffffff;
|
||
border: 1px solid #d1d5db; /* gray-300 */
|
||
border-radius: 9999px;
|
||
transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
||
}
|
||
|
||
.doc-toggle input[type="checkbox"]:checked + .doc-toggle-track {
|
||
background-color: #4f46e5; /* indigo-600 */
|
||
}
|
||
|
||
.doc-toggle input[type="checkbox"]:checked + .doc-toggle-track::after {
|
||
transform: translateX(20px);
|
||
border-color: #ffffff;
|
||
}
|
||
|
||
.doc-toggle input[type="checkbox"]:focus-visible + .doc-toggle-track {
|
||
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1; /* ring-2 ring-indigo-500 with offset */
|
||
}
|
||
|
||
/* Dark mode overrides */
|
||
html.dark .doc-toggle-track {
|
||
background-color: #374151; /* gray-700 */
|
||
}
|
||
|
||
html.dark .doc-toggle-track::after {
|
||
background-color: #ffffff;
|
||
border-color: #4b5563; /* gray-600 */
|
||
}
|
||
|
||
html.dark .doc-toggle input[type="checkbox"]:checked + .doc-toggle-track {
|
||
background-color: #4f46e5; /* indigo-600 */
|
||
}
|
||
|
||
html.dark .doc-toggle input[type="checkbox"]:checked + .doc-toggle-track::after {
|
||
border-color: #ffffff;
|
||
}
|
||
|
||
html.dark .doc-toggle input[type="checkbox"]:focus-visible + .doc-toggle-track {
|
||
box-shadow: 0 0 0 2px #111827, 0 0 0 4px #6366f1; /* dark background offset */
|
||
}
|