diff --git a/frontend/src/styles/admin.css b/frontend/src/styles/admin.css index 4ba895e..d6b5688 100644 --- a/frontend/src/styles/admin.css +++ b/frontend/src/styles/admin.css @@ -2704,38 +2704,6 @@ } } -.settings-admin-block { - display: grid; - gap: 10px; - margin: 6px 0 0; -} - -.settings-row.settings-row-admin { - border: 1px solid color-mix(in srgb, #f59e0b 42%, transparent); - background: color-mix(in srgb, #f59e0b 12%, transparent); - border-radius: var(--radius); - padding: 10px 12px; - width: 100%; - cursor: pointer; - transition: - background 0.12s ease, - border-color 0.12s ease; -} - -.settings-row.settings-row-admin:hover { - background: color-mix(in srgb, #f59e0b 18%, transparent); - border-color: color-mix(in srgb, #f59e0b 58%, transparent); -} - -.settings-row.settings-row-admin > svg:first-child { - color: #fbbf24; - opacity: 1; -} - -.settings-row.settings-row-admin strong { - color: var(--text); -} - /* ============================================================ shadcn-svelte primitives: Tabs / Select / Switch / Label bits-ui exposes data-state attributes; styling here matches diff --git a/frontend/src/styles/webapp.css b/frontend/src/styles/webapp.css index efa4b92..1982875 100644 --- a/frontend/src/styles/webapp.css +++ b/frontend/src/styles/webapp.css @@ -1260,6 +1260,11 @@ a { gap: 8px; } +.settings-admin-block { + display: grid; + gap: 8px; +} + .settings-divider { height: 1px; background: var(--border); @@ -1302,6 +1307,56 @@ a { font-size: 12px; } +.settings-row.settings-row-admin { + min-height: 54px; + border-color: var(--warning-border); + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--warning) 13%, var(--panel)), + color-mix(in srgb, var(--warning) 7%, var(--panel-2)) + ); + cursor: pointer; + transition: + transform 0.14s ease, + border-color 0.14s ease, + background 0.14s ease, + box-shadow 0.14s ease; +} + +.settings-row.settings-row-admin:hover:not(:disabled) { + border-color: color-mix(in srgb, var(--warning) 52%, var(--border)); + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--warning) 16%, var(--panel)), + color-mix(in srgb, var(--warning) 9%, var(--panel-2)) + ); +} + +.settings-row.settings-row-admin:active:not(:disabled) { + transform: translateY(1px); +} + +.settings-row.settings-row-admin:focus-visible { + outline: none; + border-color: color-mix(in srgb, var(--warning) 58%, var(--border)); + box-shadow: + 0 0 0 2px color-mix(in srgb, var(--warning) 24%, transparent), + inset 0 1px 0 var(--inset-highlight); +} + +.settings-row.settings-row-admin > svg:first-child { + color: var(--warning-text); + opacity: 1; +} + +.settings-row.settings-row-admin > svg:last-child { + color: color-mix(in srgb, var(--warning) 70%, var(--muted)); +} + +.settings-row.settings-row-admin strong { + color: var(--warning-text); +} + .settings-row-linked { grid-template-columns: 28px minmax(0, 1fr); border-color: var(--success-border);