From 46772fc7461f9f8333b399b301ec969f5caa4c1e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 22 Mar 2026 17:35:22 +0000 Subject: [PATCH] fix(ui): fix greyed-out toggle switches on admin connections page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- frontend/static/styles.css | 78 +++++++++++++++++++++++ frontend/templates/admin_connections.html | 24 +++---- 2 files changed, 90 insertions(+), 12 deletions(-) diff --git a/frontend/static/styles.css b/frontend/static/styles.css index b7d9bacc..fb74a69c 100644 --- a/frontend/static/styles.css +++ b/frontend/static/styles.css @@ -238,3 +238,81 @@ 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: + + ============================================================= */ + +.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 */ +} diff --git a/frontend/templates/admin_connections.html b/frontend/templates/admin_connections.html index 232663ac..e1dceea0 100644 --- a/frontend/templates/admin_connections.html +++ b/frontend/templates/admin_connections.html @@ -18,11 +18,11 @@

{{ _("connections.sso_auto_login_description") }}

-
@@ -44,11 +44,11 @@ {% endif %}
-
@@ -200,24 +200,24 @@ function openServiceModal(serviceKey) { } if (meta.type === 'boolean') { - // Styled Tailwind toggle switch (matches the page-level toggles) + // Styled toggle switch using .doc-toggle CSS class (compatible with Tailwind v2 CDN). const toggleWrapper = document.createElement('label'); - toggleWrapper.className = 'relative inline-flex items-center cursor-pointer'; + toggleWrapper.className = 'doc-toggle'; toggleWrapper.setAttribute('aria-label', field.key.replace(/_/g, ' ').replace(/\b\w/g, function(c) { return c.toUpperCase(); })); const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.id = 'field-' + field.key; checkbox.name = field.key; - checkbox.className = 'sr-only peer'; + checkbox.className = 'sr-only'; const val = field.value; if (val === true || val === 'true' || val === '1' || val === 'True') { checkbox.checked = true; } - const slider = document.createElement('div'); - slider.className = "w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"; - slider.style.cssText = 'min-width:44px; min-height:24px;'; + const slider = document.createElement('span'); + slider.className = 'doc-toggle-track'; + slider.setAttribute('aria-hidden', 'true'); toggleWrapper.appendChild(checkbox); toggleWrapper.appendChild(slider);