39 lines
5.7 KiB
CSS
39 lines
5.7 KiB
CSS
#settings.ux-settings-control-center-ready{--ux-settings-gap:clamp(14px,2vw,24px)}
|
|
#settings .ux-settings-command{display:grid;grid-template-columns:minmax(280px,1.35fr) minmax(320px,1fr);gap:var(--ux-settings-gap);padding:clamp(16px,2.3vw,26px);margin:0 0 var(--ux-settings-gap);border:1px solid var(--vd-border);border-radius:var(--vd-radius-lg,18px);background:var(--vd-surface);box-shadow:var(--vd-shadow-sm)}
|
|
#settings .ux-settings-search{display:grid;gap:8px;align-content:start}
|
|
#settings .ux-settings-search>span{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--vd-text-muted)}
|
|
#settings .ux-settings-search input{width:100%;min-height:50px;padding:0 16px;border:1px solid var(--vd-border-strong,var(--vd-border));border-radius:var(--vd-radius-md,12px);background:var(--vd-input-bg,var(--vd-surface));color:var(--vd-text);font:inherit}
|
|
#settings .ux-settings-search input:focus{outline:3px solid color-mix(in srgb,var(--vd-primary) 20%,transparent);border-color:var(--vd-primary)}
|
|
#settings .ux-settings-search-result{min-height:22px;font-size:.86rem;color:var(--vd-text-muted)}
|
|
#settings .ux-settings-health{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
|
|
#settings .ux-settings-health-card{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;text-align:left;padding:12px;border:1px solid var(--vd-border);border-radius:var(--vd-radius-md,12px);background:var(--vd-surface-subtle,var(--vd-surface));color:var(--vd-text);cursor:pointer}
|
|
#settings .ux-settings-health-card:hover{border-color:var(--vd-primary)}
|
|
#settings .ux-settings-health-card small,#settings .ux-settings-health-card strong{display:block}
|
|
#settings .ux-settings-health-card small{font-size:.72rem;color:var(--vd-text-muted)}
|
|
#settings .ux-settings-health-card strong{margin-top:2px;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
#settings .ux-settings-health-dot{width:10px;height:10px;border-radius:50%;background:var(--vd-text-muted);box-shadow:0 0 0 4px color-mix(in srgb,var(--vd-text-muted) 13%,transparent)}
|
|
#settings .ux-settings-health-card[data-tone="success"] .ux-settings-health-dot{background:var(--vd-success);box-shadow:0 0 0 4px color-mix(in srgb,var(--vd-success) 14%,transparent)}
|
|
#settings .ux-settings-health-card[data-tone="warning"] .ux-settings-health-dot{background:var(--vd-warning);box-shadow:0 0 0 4px color-mix(in srgb,var(--vd-warning) 14%,transparent)}
|
|
#settings .ux-settings-health-card[data-tone="danger"] .ux-settings-health-dot{background:var(--vd-danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--vd-danger) 14%,transparent)}
|
|
#settings .ux-settings-category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 var(--ux-settings-gap)}
|
|
#settings .ux-settings-category-card{display:grid;gap:7px;min-height:142px;padding:15px;text-align:left;border:1px solid var(--vd-border);border-radius:var(--vd-radius-md,14px);background:var(--vd-surface);color:var(--vd-text);cursor:pointer}
|
|
#settings .ux-settings-category-card:hover,#settings .ux-settings-category-card[aria-pressed="true"]{border-color:var(--vd-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--vd-primary) 11%,transparent)}
|
|
#settings .ux-settings-category-index{font-size:.72rem;font-weight:800;color:var(--vd-primary)}
|
|
#settings .ux-settings-category-card strong{font-size:.94rem}
|
|
#settings .ux-settings-category-card small{font-size:.76rem;line-height:1.4;color:var(--vd-text-muted)}
|
|
#settings .ux-settings-category-card b{margin-top:auto;font-size:.76rem;color:var(--vd-primary)}
|
|
#settings .settings-shell{grid-template-columns:minmax(190px,230px) minmax(0,1fr)}
|
|
#settings .settings-nav{position:sticky;top:88px;align-self:start}
|
|
#settings .ux-settings-advanced{margin-top:18px;border:1px solid var(--vd-border);border-radius:var(--vd-radius-md,14px);background:var(--vd-surface)}
|
|
#settings .ux-settings-advanced>summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 17px;cursor:pointer;list-style:none}
|
|
#settings .ux-settings-advanced>summary::-webkit-details-marker{display:none}
|
|
#settings .ux-settings-advanced>summary small{color:var(--vd-text-muted)}
|
|
#settings .ux-settings-advanced[open]>summary{border-bottom:1px solid var(--vd-border)}
|
|
#settings .ux-settings-advanced>*:not(summary){margin:16px}
|
|
#settings .ux-settings-search-hit{outline:3px solid color-mix(in srgb,var(--vd-warning) 32%,transparent);outline-offset:6px;border-radius:6px}
|
|
#settings .settings-savebar{position:sticky;bottom:12px;z-index:20;box-shadow:var(--vd-shadow-lg)}
|
|
@media (max-width:1100px){#settings .ux-settings-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#settings .settings-shell{grid-template-columns:1fr}#settings .settings-nav{position:static;display:flex;overflow-x:auto;padding-bottom:4px}#settings .settings-nav-item{min-width:190px}}
|
|
@media (max-width:780px){#settings .ux-settings-command{grid-template-columns:1fr}#settings .ux-settings-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#settings .settings-hero{align-items:flex-start}.settings-hero-status{width:100%}}
|
|
@media (max-width:520px){#settings .ux-settings-health,#settings .ux-settings-category-grid{grid-template-columns:1fr}#settings .ux-settings-category-card{min-height:auto}#settings .ux-settings-advanced>summary{align-items:flex-start;flex-direction:column;gap:4px}#settings .settings-savebar{bottom:0;border-radius:0}}
|
|
@media (prefers-reduced-motion:reduce){#settings *{scroll-behavior:auto!important;transition:none!important}}
|
|
#settings button:focus-visible,#settings input:focus-visible,#settings select:focus-visible,#settings textarea:focus-visible,#settings summary:focus-visible{outline:3px solid color-mix(in srgb,var(--vd-primary) 28%,transparent);outline-offset:2px} |