diff --git a/webui/src/styles/components.css b/webui/src/styles/components.css index 7e4541a..8105c3a 100644 --- a/webui/src/styles/components.css +++ b/webui/src/styles/components.css @@ -3212,7 +3212,75 @@ color: var(--info-text-deep); line-height: 1.45; } -@media (max-width: 850px) { +.admin-permission-groups { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; + margin-top: 18px; +} +.admin-permission-group { + min-width: 0; + margin: 0; + padding: 12px; + border: var(--border-line); + border-radius: var(--radius-sm); + background: var(--surface); +} +.admin-permission-group legend { + padding: 0 6px; + color: var(--text-strong); + font-weight: 700; +} +.admin-protection-note { + margin: 0; + padding: 10px 12px; + border: 1px solid var(--warning-border-soft); + border-radius: var(--radius-sm); + background: var(--warning-soft); + color: var(--warning-text-strong); +} +.admin-scope-list { + display: flex; + flex-wrap: wrap; + gap: 6px; +} +.admin-scope-list code { + max-width: 100%; + padding: 4px 7px; + border: var(--border-line); + border-radius: var(--radius-sm); + background: var(--surface-muted); + overflow-wrap: anywhere; +} +.admin-overview-section-label { + margin: 4px 0 10px; + color: var(--muted); + font-size: 12px; + font-weight: 800; + letter-spacing: .04em; + text-transform: uppercase; +} +.admin-permission-details { + display: grid; + gap: 12px; +} +.admin-permission-details section { + display: grid; + gap: 6px; + min-width: 0; +} +.admin-permission-details ul { + display: grid; + gap: 4px; + margin: 0; + padding-left: 18px; +} +.module-license-status { + display: grid; + gap: 8px; + min-width: 0; +} +@media (max-width: 900px) { .admin-details-grid, .admin-tenant-assignment-row { grid-template-columns: 1fr; diff --git a/webui/src/styles/forms.css b/webui/src/styles/forms.css index 390d7c4..66a39c8 100644 --- a/webui/src/styles/forms.css +++ b/webui/src/styles/forms.css @@ -9,6 +9,19 @@ .form-label { font-weight: 700; font-size: 13px; color: var(--text-label); } .form-help { font-size: 12px; color: var(--muted); } input:not([type="checkbox"]):not([type="radio"]), select, textarea { border: var(--border-line); border-radius: 5px; background: var(--surface); font: inherit; padding: 10px 12px; color: var(--text); width: 100%; box-shadow: var(--shadow-control-inset); } +input[type="checkbox"]:not(.toggle-switch-input), +input[type="radio"] { + accent-color: var(--primary); + flex: 0 0 auto; + width: 1rem; + height: 1rem; + margin: 0; +} +input[type="checkbox"]:not(.toggle-switch-input):focus-visible, +input[type="radio"]:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} textarea { resize: vertical; } @media (max-width: 1100px) {