/* EgyptAuth — components (docs/DESIGN_SYSTEM.md §4.4). Resting surfaces are flat (1px hairlines); only floating layers carry shadows. Every class here is emitted by the shared UI modules (ui/*.js) or page templates; keep names stable. Only semantic tokens are used (surface-*, ink-*, line-*, accent-*, ok/warn/danger/info/neutral-*, viz-*). */ /* ---------- Icons (Phosphor; the duotone layer is opt-in per context) ---------- */ .icon { display: inline-block; width: 16px; height: 16px; fill: currentColor; stroke: none; vertical-align: middle; flex-shrink: 0; } .icon .t { fill: var(--icon-tone, currentColor); opacity: var(--icon-tone-opacity, 0); transition: opacity var(--t-fast); } .icon-sm { width: 14px; height: 14px; } .icon-xs { width: 12px; height: 12px; } .icon-lg { width: 20px; height: 20px; } .icon-xl { width: 24px; height: 24px; } /* ---------- Buttons ---------- default = secondary (outlined, --line-2 on --surface-1) · btn-primary = the one ink-filled action per view · btn-ghost = toolbar/inline · btn-danger = outlined red text · btn-danger-solid = red fill, confirmation dialogs only. Sizes: btn-sm 34 · default 36 · btn-lg 40 (--control-h-*). Icon-only buttons are square with an aria-label. */ .btn { --btn-bg: var(--surface-1); --btn-bg-hover: var(--state-hover); --btn-border: var(--line-2); --btn-text: var(--ink-1); --btn-feedback: var(--action); display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-h); padding-inline: 12px; border-radius: var(--r); background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-border); box-shadow: var(--shadow-control); font-size: var(--fs-base); font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast), transform var(--t) var(--ease-spring), box-shadow var(--t-fast); user-select: none; position: relative; text-decoration: none; } .btn:hover:not(:disabled, [aria-disabled="true"], .is-disabled, .is-busy, [aria-busy="true"]) { background: var(--btn-bg-hover); } .btn:active:not(:disabled, [aria-disabled="true"], .is-disabled, .is-busy, [aria-busy="true"]) { background: var(--state-active); } .btn:disabled { opacity: 0.5; } .btn[aria-busy="true"] { cursor: progress; } .btn .icon { width: 16px; height: 16px; color: var(--btn-icon, var(--ink-3)); } .btn-primary { --btn-bg: var(--action); --btn-bg-hover: var(--action-hover); --btn-border: var(--action); --btn-text: var(--ink-on-action); --btn-icon: currentColor; box-shadow: none; } .btn-primary:hover:not(:disabled, [aria-disabled="true"], .is-disabled, .is-busy, [aria-busy="true"]) { border-color: var(--action-hover); } .btn-primary:active:not(:disabled, [aria-disabled="true"], .is-disabled, .is-busy, [aria-busy="true"]) { background: var(--action-active); border-color: var(--action-active); } .btn-ghost { --btn-bg: transparent; --btn-bg-hover: var(--state-hover); --btn-border: transparent; --btn-text: var(--ink-2); box-shadow: none; } .btn-ghost:hover:not(:disabled, [aria-disabled="true"], .is-disabled, .is-busy, [aria-busy="true"]) { color: var(--ink-1); } .btn-danger { --btn-bg: var(--surface-1); --btn-bg-hover: var(--danger-soft); --btn-border: var(--danger-line); --btn-text: var(--danger-text); --btn-icon: currentColor; --btn-feedback: var(--danger); } .btn-danger-solid { --btn-bg: var(--danger); --btn-bg-hover: var(--danger-hover); --btn-border: transparent; --btn-text: var(--ink-on-solid); --btn-icon: currentColor; --btn-feedback: var(--danger); box-shadow: none; } .btn-sm { height: var(--control-h-sm); padding-inline: 10px; font-size: var(--fs-sm); gap: 5px; } .btn-sm .icon { width: 14px; height: 14px; } .btn-lg { height: var(--control-h-lg); padding-inline: 16px; font-size: var(--fs-base); } .btn-block { width: 100%; } .btn-icon { display: inline-grid; place-items: center; width: var(--control-h); height: var(--control-h); border-radius: var(--r); color: var(--ink-3); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t) var(--ease-spring), box-shadow var(--t-fast) var(--ease); } .btn-icon:hover:not(:disabled, [aria-disabled="true"], .is-disabled, .is-busy, [aria-busy="true"]) { background: var(--state-hover); color: var(--ink-1); } .btn-icon:active:not(:disabled, [aria-disabled="true"], .is-disabled, .is-busy, [aria-busy="true"]) { background: var(--state-active); } .btn-icon:disabled { opacity: 0.35; } .btn-icon.danger { --btn-feedback: var(--danger); } .btn-icon.danger:hover:not(:disabled, [aria-disabled="true"], .is-disabled, .is-busy, [aria-busy="true"]) { color: var(--danger-text); background: var(--danger-soft); } .btn-icon.sm { width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--r-sm); } .btn-icon.sm .icon { width: 14px; height: 14px; } /* Lift on a mouse hover, then compress on press. Input addons keep their centering transform. */ @media (hover: hover) and (pointer: fine) { :is(.btn, .btn-icon):not(.input-addon, :disabled, [aria-disabled="true"], .is-disabled, .is-busy, [aria-busy="true"]):hover { transform: translateY(var(--control-hover-y)); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--ink-1) 25%, transparent), 0 0 0 2px color-mix(in srgb, var(--btn-feedback, var(--action)) 20%, transparent); } } :is(.btn, .btn-icon):not(.input-addon, :disabled, [aria-disabled="true"], .is-disabled, .is-busy, [aria-busy="true"]):active { transform: translateY(var(--control-press-y)) scale(var(--control-press-scale)); box-shadow: inset 0 1px 3px color-mix(in srgb, var(--ink-1) 18%, transparent); transition-duration: 90ms; } /* Pending: the spinner replaces the label but the button keeps its width. */ .btn.is-busy { color: transparent !important; pointer-events: none; } .btn.is-busy > :not(.spinner) { visibility: hidden; } .btn.is-busy > .spinner { position: absolute; inset: 0; margin: auto; color: var(--btn-text); } .btn-group { display: inline-flex; } .btn-group > .btn { border-radius: 0; } .btn-group > .btn:first-child { border-start-start-radius: var(--r); border-end-start-radius: var(--r); } .btn-group > .btn:last-child { border-start-end-radius: var(--r); border-end-end-radius: var(--r); } .btn-group > .btn + .btn { margin-inline-start: -1px; } label.btn { cursor: var(--cursor-action, pointer); } label.btn.is-disabled { opacity: 0.5; pointer-events: none; } /* Copy button feedback (ui/copy.js swaps the icon for 1.5s). */ .copy-btn.is-copied { color: var(--ok-text) !important; } .btn.copy-btn.is-copied { background: var(--ok-soft); border-color: var(--ok-line); --btn-feedback: var(--ok); } .link { color: var(--ink-1); text-decoration: underline; text-decoration-color: var(--line-3); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--t-fast), color var(--t-fast); } .link:hover { color: var(--accent-text); text-decoration-color: var(--accent); } .link-accent { color: var(--accent-text); } /* ---------- Spinner / skeleton / progress ---------- */ .spinner { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; border-inline-end-color: transparent; animation: spin 0.7s linear infinite; display: inline-block; flex-shrink: 0; opacity: 0.85; } .spinner.lg { width: 20px; height: 20px; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg); } } .skeleton { background: var(--skeleton-a); animation: skeleton-pulse 1.4s ease-in-out infinite; border-radius: var(--r-sm); height: 12px; } @keyframes skeleton-pulse { 50% { opacity: 0.55; } } .progress { height: 4px; background: var(--state-active); border-radius: var(--r-pill); overflow: hidden; } .progress > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--t-slow) var(--ease); } .progress.ok > span { background: var(--ok); } .progress.warn > span { background: var(--warn); } .progress.bad > span { background: var(--danger); } /* ---------- Form controls ---------- --control-h, --control-line at rest, --line-3 on hover, --focus-color plus an offset ring on focus. Errors: --danger-text border and a --danger-text message linked by aria-describedby. Labels 14/500 above, hints 12px --ink-3 below. */ .input, .select, .textarea { display: block; width: 100%; min-width: 0; height: var(--control-h); padding-inline: 10px; background: var(--surface-input); color: var(--ink-1); border: 1px solid var(--control-line); border-radius: var(--r); font-size: var(--fs-base); font-weight: 400; box-shadow: var(--shadow-control); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; } .input:hover:not(:disabled):not(:focus), .select:hover:not(:disabled):not(:focus), .textarea:hover:not(:disabled):not(:focus) { border-color: var(--line-3); } .input:focus, .select:focus, .textarea:focus, .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-color: var(--focus-color); box-shadow: none; } .input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; } .input[readonly] { background: var(--surface-2); box-shadow: none; } /* Browser-filled credentials retain the chosen theme instead of a fixed blue/yellow browser fill. */ .input:is(:autofill, :-webkit-autofill) { box-shadow: inset 0 0 0 1000px var(--surface-input) !important; -webkit-text-fill-color: var(--ink-1); caret-color: var(--ink-1); } .input[readonly]:is(:autofill, :-webkit-autofill) { box-shadow: inset 0 0 0 1000px var(--surface-2) !important; } .input.mono, .textarea.mono { font-family: var(--font-mono); font-size: 12px; } .textarea { height: auto; min-height: 88px; padding-block: 8px; resize: vertical; line-height: 1.5; } /* Native selects carry the shared chevron. A data URI cannot read var(--ink-3), so each theme paints its own ink. */ .select { appearance: none; -webkit-appearance: none; padding-inline-end: 28px; cursor: var(--cursor-action, pointer); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586574' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; } :root[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a5b1bd' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); } .select option { background: var(--surface-1); color: var(--ink-1); font-weight: 400; } .input-sm, .select.input-sm, .select-sm { height: var(--control-h-sm); font-size: var(--fs-sm); } .input-lg, .select.input-lg { height: var(--control-h-lg); font-size: var(--fs-base); } input[type="number"].input { font-variant-numeric: tabular-nums; } input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.5; } .input-wrap { position: relative; display: block; } .input-wrap > .icon { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; width: 15px; height: 15px; } .input-wrap > .input { padding-inline-start: 32px; } .input-wrap.no-icon > .input { padding-inline-start: 10px; } .input-wrap > .input-addon { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); } .input-wrap.has-addon > .input { padding-inline-end: 36px; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field-label { font-size: var(--fs-base); font-weight: 500; color: var(--ink-1); display: flex; align-items: center; gap: 4px; } /* Required marks are neutral; the control itself carries aria-required (no red asterisk alone). */ .field-label .req { color: var(--ink-3); font-weight: 400; } .field-hint { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; } .field-error { font-size: var(--fs-xs); color: var(--danger-text); display: none; align-items: center; gap: 4px; } .field.has-error .field-error { display: flex; } .field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger-text); } .field.has-error .input:focus, .field.has-error .select:focus, .field.has-error .textarea:focus { outline-color: var(--danger); border-color: var(--danger); box-shadow: none; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } .form-grid > .full { grid-column: 1 / -1; } @media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } .form-grid > * { grid-column: 1 / -1; } } .form-section-title { grid-column: 1 / -1; font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); color: var(--ink-3); padding-top: var(--s4); margin-bottom: calc(-1 * var(--s1)); } .form-section-title:first-child { padding-top: 0; } .checkbox { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex-shrink: 0; border: 1px solid var(--line-3); border-radius: var(--r-xs); background: var(--surface-1); display: inline-grid; place-items: center; cursor: var(--cursor-action, pointer); transition: background-color var(--t-fast), border-color var(--t-fast); } .checkbox::after { content: ""; width: 9px; height: 5px; border: solid var(--ink-on-action); border-width: 0 0 1.75px 1.75px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; } .checkbox:checked, .checkbox:indeterminate { background: var(--action); border-color: var(--action); } .checkbox:checked::after { opacity: 1; } .checkbox:indeterminate::after { opacity: 1; width: 8px; height: 0; border-width: 0 0 1.75px 0; transform: none; } .checkbox:disabled { opacity: 0.4; cursor: not-allowed; } /* Switch: 20 × 36, lapis when on. */ .switch { appearance: none; -webkit-appearance: none; position: relative; width: 36px; height: 20px; flex-shrink: 0; background: var(--state-active); border: 1px solid var(--control-line); border-radius: var(--r-pill); cursor: var(--cursor-action, pointer); transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease); } .switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-1); box-shadow: 0 0 0 1px var(--line-2); transition: transform var(--t) var(--ease), background-color var(--t); } .switch:checked { background: var(--accent); border-color: var(--accent); } .switch:checked::after { background: var(--switch-knob); box-shadow: none; transform: translateX(16px); } .switch:disabled { opacity: 0.45; cursor: not-allowed; } .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 10px 12px; border: 1px solid var(--line-1); border-radius: var(--r); cursor: var(--cursor-action, pointer); transition: background-color var(--t-fast), border-color var(--t-fast); } .toggle-row:hover { background: var(--state-row-hover); } .toggle-row:has(.switch:checked) { border-color: var(--line-2); } .toggle-row .t-label { display: block; color: var(--ink-1); font-weight: 500; font-size: var(--fs-base); } .toggle-row .t-hint { display: block; color: var(--ink-3); font-size: var(--fs-xs); margin-top: 2px; line-height: 1.45; } .check-row { display: flex; align-items: center; gap: 8px; cursor: var(--cursor-action, pointer); padding: 6px 8px; border-radius: var(--r-sm); transition: background-color var(--t-fast); min-width: 0; } .check-row:hover { background: var(--state-hover); } .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line-1); border-radius: var(--r); padding: 4px; } @media (max-width: 560px) { .check-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------- Key format picker (ui/key-format.js) ---------- */ .kf-modes .seg { flex-wrap: wrap; } .kf-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px; } .kf-presets > .small { margin-inline-end: 2px; } .kf-preset { height: 26px; padding-inline: 9px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; transition: border-color var(--t-fast), color var(--t-fast); } .kf-preset:hover:not(:disabled) { border-color: var(--accent-line); color: var(--ink-1); } .kf-preset:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; } .kf-preview { border: 1px solid var(--line-1); border-radius: var(--r); background: var(--surface-sunken); padding: 10px 12px; display: grid; gap: 4px; } .kf-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kf-preview-head .field-label { margin: 0; } .kf-sample { font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: .04em; color: var(--accent-text); direction: ltr; text-align: left; overflow-wrap: anywhere; user-select: all; } .kf-sample.is-empty { color: var(--ink-3); user-select: none; } .kf-meta { font-size: var(--fs-xs); color: var(--ink-3); } .kf-fixed { margin-top: 8px; } /* ---------- Page header (ui/page.js pageHeader) ---------- Sentence-case eyebrow · title 26/600 · short description in --ink-2 · optional meta line · actions top-right. */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 12px; } .page-header .titles { min-width: 0; max-width: min(80ch, 100%); } .page-eyebrow { display: block; margin-bottom: 6px; font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); color: var(--ink-3); } .page-title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: var(--tracking-title); line-height: 1.15; color: var(--ink-1); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-wrap: balance; overflow-wrap: anywhere; } .page-title .chip, .page-title .badge { font-weight: 500; letter-spacing: 0; } .page-sub { color: var(--ink-2); margin-top: 8px; font-size: var(--fs-base); line-height: 1.65; overflow-wrap: anywhere; } .page-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-3); } .page-meta .mono { font-size: 12px; } .page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .page-back { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: 6px; transition: color var(--t-fast); } .page-back:hover { color: var(--ink-1); } .page-loading { display: grid; place-items: center; padding: 96px 0; color: var(--ink-3); } @media (max-width: 640px) { .page-title { font-size: 24px; } .page-header { align-items: flex-start; } .page-actions { width: 100%; } .page-actions > .btn-primary:last-child { margin-inline-start: auto; } } /* ---------- Panels ("card") — an outlined region of the page, never a floating tile. Titles are type alone. ---------- */ .card { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); min-width: 0; box-shadow: var(--shadow-panel); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 16px 20px; border-bottom: 1px solid var(--line-1); min-height: 64px; } .card-title { font-size: var(--fs-xl); font-weight: 600; color: var(--ink-1); display: flex; align-items: center; gap: 8px; min-width: 0; letter-spacing: var(--tracking-heading); line-height: var(--lh-tight); } .card-title > .icon { display: none; } .card-sub { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; font-weight: 400; } .card-body { padding: 20px; } .card-body.flush { padding: 0; } .card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); padding: 10px 16px; border-top: 1px solid var(--line-1); background: var(--surface-2); border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg); } .card.is-interactive { transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast); cursor: var(--cursor-action, pointer); } .card.is-interactive:hover { border-color: var(--line-2); background: var(--card-hover); } /* A panel that is only a header has no rule under it. */ .card-header:last-child { border-bottom: 0; } /* Danger zone: the last panel of an overview or a settings section (.card.danger-zone), outlined in --danger-line, its title (or the caption above it, .set-caption.is-danger) in --danger-text. One row per destructive action with the consequence beside the button: .set-rows of .set-row.is-wide, or a card body. */ .danger-zone { border-color: var(--danger-line); } .danger-zone > .card-header { border-bottom-color: var(--danger-line); } .danger-zone .card-title { color: var(--danger-text); } /* ---------- Stat tiles: figures set in one ruled band ---------- */ .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-1); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-1); } .stat-row.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stat-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stat-row > .stat + .stat { border-inline-start: 1px solid var(--line-1); } /* Two by two at every width (drawers, narrow panels); .is-compact sets the figures at 18px for those places. */ .stat-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-row.cols-2 > .stat + .stat { border-inline-start: 0; } .stat-row.cols-2 > .stat:nth-child(even) { border-inline-start: 1px solid var(--line-1); } .stat-row.cols-2 > .stat:nth-child(n + 3) { border-top: 1px solid var(--line-1); } .stat-row.is-compact .stat-value { font-size: var(--fs-xl); } .stat { position: relative; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; color: inherit; } .stat-label { font-family: var(--label-font); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); color: var(--ink-3); display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--label-weight); } .stat-label .dot { width: 6px; height: 6px; } .stat-line { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0; } .stat-value { font-family: var(--figure-font); font-size: var(--fs-stat); font-weight: 500; letter-spacing: -0.02em; color: var(--ink-1); font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 4px; text-align: start; } .stat-foot { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-3); min-height: 18px; min-width: 0; white-space: nowrap; overflow: hidden; } .stat-foot > span:not(.delta) { overflow: hidden; text-overflow: ellipsis; } .stat-foot > [data-stat-delta]:empty { display: none; } .stat.is-danger .stat-value { color: var(--danger-text); } .stat .spark-slot { flex: 0 1 80px; height: 24px; min-width: 48px; margin-bottom: 6px; } .stat .spark { position: relative; inset: auto; height: 100%; z-index: auto; } .stat .spark-area path { opacity: 0.1; } @media (max-width: 1100px) { .stat-row, .stat-row.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-row > .stat + .stat { border-inline-start: 0; } .stat-row > .stat:nth-child(even) { border-inline-start: 1px solid var(--line-1); } .stat-row > .stat:nth-child(n + 3) { border-top: 1px solid var(--line-1); } .stat-row.cols-5 > .stat:last-child { grid-column: 1 / -1; border-inline-start: 0; } } /* Delta chip: the figure is text and wears the status text inks (≥ 4.5:1); the arrow carries the polarity mark. */ .delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .delta.up { color: var(--ok-text); } .delta.down { color: var(--danger-text); } .delta.up .icon { color: var(--viz-pos); } .delta.down .icon { color: var(--viz-neg); } .delta.flat { color: var(--ink-3); font-weight: 400; } .delta .icon { width: 12px; height: 12px; } /* Readings band: sentence-case label, figure (26px tabular), one-line comparison. Five readings by default (the first takes its own row below 1200px), four with .cols-4; two columns below 720px. The live reading is tinted wherever it sits; the band clips the tint to its corners. */ .readings { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--surface-1); overflow: hidden; } .readings.cols-4 { grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); } .reading { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px 13px; min-width: 0; } .reading + .reading { border-inline-start: 1px solid var(--line-1); } .reading-label { display: flex; align-items: center; gap: 7px; font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reading-label .dot { width: 6px; height: 6px; } .reading-value { font-family: var(--figure-font); font-size: var(--fs-stat); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-1); font-variant-numeric: tabular-nums; } .reading-foot { display: flex; align-items: center; gap: 6px; min-height: 18px; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; } .reading-foot > [data-stat-delta]:empty { display: none; } .reading.is-live { background: var(--accent-soft); } .reading.is-live .reading-label { color: var(--ink-1); } .reading.is-alert .reading-value { color: var(--danger-text); } @media (max-width: 1200px) { .readings, .readings.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .readings:not(.cols-4) > .reading:first-child { grid-column: 1 / -1; } .readings:not(.cols-4) > .reading:nth-child(2) { border-inline-start: 0; } .readings:not(.cols-4) > .reading:nth-child(n + 2) { border-top: 1px solid var(--line-1); } } @media (max-width: 720px) { .readings, .readings.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Five: the first alone, then pairs (2 3) (4 5). Four: pairs (1 2) (3 4). A pair's first reading has no rule. */ .readings:not(.cols-4) > .reading:nth-child(even) { border-inline-start: 0; } .readings.cols-4 > .reading:nth-child(odd) { border-inline-start: 0; } .readings.cols-4 > .reading:nth-child(n + 3) { border-top: 1px solid var(--line-1); } .reading-value { font-size: 22px; } .reading-label, .reading-label .truncate { white-space: normal; overflow: visible; line-height: 1.35; } .reading-label { align-items: flex-start; } .reading-label .dot { margin-top: 4px; } } /* ---------- Section headings ---------- */ .dash-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; min-width: 0; } .section-head .section-title { margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--ink-1); } .section-sub { font-size: var(--fs-xs); color: var(--ink-3); } /* ---------- Sparkline (ui/sparkline.js) ---------- */ .spark { position: absolute; inset-inline: 0; bottom: 0; height: 44px; pointer-events: none; z-index: -1; --spark: var(--viz-1); } .spark svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .spark-area path { fill: var(--spark); opacity: var(--viz-fill-alpha); } .spark-line path { fill: none; stroke: var(--spark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .spark.gold { --spark: var(--viz-2); } .spark.green { --spark: var(--viz-pos); } .spark.red { --spark: var(--viz-neg); } .spark.muted { --spark: var(--viz-neutral); } .spark.is-flat { --spark: var(--viz-neutral); } .spark.is-flat .spark-area { display: none; } .spark.is-flat .spark-line path { stroke-dasharray: 3 4; opacity: 0.55; } /* ---------- Badges / chips / dots ---------- .badge neutral outline chip, no fill (roles, "Platform", "Current", HTTP codes) .badge. tinted chip: ok|warn|danger|info (green|amber|red|blue are aliases) .badge.is-status statusBadge(): dot + label; coloured tones sit on --*-soft with a --*-line edge, neutral has no fill .badge.solid filled chip, text in --ink-on-status (counts that must stand out) */ .badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding-inline: 6px; border-radius: var(--r-sm); border: 1px solid var(--neutral-line); background: transparent; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; line-height: 1; } .badge .dot { width: 6px; height: 6px; } .badge .icon { width: 12px; height: 12px; } .badge.green, .badge.ok { color: var(--ok-text); border-color: var(--ok-line); background: var(--ok-tint); } .badge.red, .badge.danger { color: var(--danger-text); border-color: var(--danger-line); background: var(--danger-tint); } .badge.amber, .badge.warn { color: var(--warn-text); border-color: var(--warn-line); background: var(--warn-tint); } .badge.blue, .badge.info { color: var(--accent-text); border-color: var(--info-line); background: var(--info-tint); } .badge.outline { background: transparent; } .badge.mono { font-family: var(--font-mono); font-size: 11px; font-weight: 400; } .badge.pill { border-radius: var(--r-pill); } .badge.is-status { gap: 6px; padding-inline: 0; border-color: transparent; background: none; color: var(--ink-2); } .badge.is-status.green, .badge.is-status.ok { padding-inline: 6px; color: var(--ok-text); border-color: var(--ok-line); background: var(--ok-soft); } .badge.is-status.red, .badge.is-status.danger { padding-inline: 6px; color: var(--danger-text); border-color: var(--danger-line); background: var(--danger-soft); } .badge.is-status.amber, .badge.is-status.warn { padding-inline: 6px; color: var(--warn-text); border-color: var(--warn-line); background: var(--warn-soft); } .badge.is-status.blue, .badge.is-status.info { padding-inline: 6px; color: var(--info-text); border-color: var(--info-line); background: var(--info-soft); } .badge.solid { border-color: transparent; color: var(--ink-on-status); background: var(--neutral); } .badge.solid.green, .badge.solid.ok { background: var(--ok-solid); color: var(--ink-on-status); border-color: transparent; } .badge.solid.red, .badge.solid.danger { background: var(--danger); color: var(--ink-on-status); border-color: transparent; } .badge.solid.amber, .badge.solid.warn { background: var(--warn-solid); color: var(--ink-on-status); border-color: transparent; } .badge.solid.blue, .badge.solid.info { background: var(--accent); color: var(--ink-on-accent); border-color: transparent; } .chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding-inline: 6px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-1); color: var(--ink-2); font-size: var(--fs-xs); white-space: nowrap; max-width: 100%; } .chip .icon { width: 12px; height: 12px; color: var(--ink-3); } .chip.mono { font-family: var(--font-mono); font-size: 11px; } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex-shrink: 0; } .vsep { display: inline-block; width: 1px; height: 12px; background: var(--line-2); margin-inline: 6px; vertical-align: middle; flex-shrink: 0; } .dot.green, .dot.ok { background: var(--ok); } .dot.red, .dot.danger { background: var(--danger); } .dot.amber, .dot.warn { background: var(--warn); } .dot.blue, .dot.info { background: var(--accent); } .dot.neutral { background: var(--neutral); } .dot.live { background: var(--ok); } .kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; line-height: 1; } .country { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; } .country .cc { display: inline-grid; place-items: center; min-width: 24px; height: 16px; padding-inline: 3px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line-1); font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); letter-spacing: 0.02em; } .country .cn { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; } .avatar { position: relative; overflow: hidden; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--state-active); color: var(--ink-2); font-size: 10px; font-weight: 600; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.02em; } .avatar.lg { width: 40px; height: 40px; font-size: 14px; border-radius: var(--r); } .avatar.sm { width: 20px; height: 20px; font-size: 9px; border-radius: var(--r-sm); } /* ---------- Definition list, code, secret ---------- .kv two-column key/value (--ink-3 key 13px, value --ink-1) .kv.ruled hairline under every row (detail pages) */ .kv { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 10px 16px; font-size: var(--fs-sm); } .kv dt { color: var(--ink-3); } .kv dd { color: var(--ink-1); min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .kv.ruled { gap: 0 16px; } .kv.ruled dt, .kv.ruled dd { padding-block: 8px; border-bottom: 1px solid var(--line-1); } .kv.ruled dt:last-of-type, .kv.ruled dd:last-of-type { border-bottom: 0; } @media (max-width: 560px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kv dd { margin-bottom: 10px; } .kv.ruled dt { padding-bottom: 0; border-bottom: 0; } .kv.ruled dd { margin-bottom: 0; } } /* Code blocks: sunken, mono 12px; .code-block adds the copy control top-right. Lines wrap inside dialogs and drawers. */ .code { background: var(--surface-sunken); border: 1px solid var(--line-1); border-radius: var(--r); padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.65; color: var(--ink-2); overflow: auto; white-space: pre; text-align: left; tab-size: 2; max-height: 360px; } .code.wrap { white-space: pre-wrap; word-break: break-all; } .code .k { color: var(--code-key); } .code .s { color: var(--code-string); } .code .n { color: var(--warn-text); } .code .c { color: var(--code-comment); } .code-block { position: relative; min-width: 0; } .code-block > .code { padding-inline-end: 44px; } .code-block > .copy-btn { position: absolute; top: 6px; inset-inline-end: 6px; } .modal .code, .drawer .code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; overflow-x: hidden; } .secret { display: flex; align-items: center; gap: 8px; padding-block: 6px; padding-inline: 10px 6px; background: var(--surface-sunken); border: 1px solid var(--line-2); border-radius: var(--r); min-width: 0; } .secret > .value { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-1); text-align: left; overflow-wrap: anywhere; user-select: all; } /* ---------- Callouts ---------- */ .callout { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line-1); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; } .callout > .icon { margin-top: 2px; color: var(--ink-3); } .callout strong, .callout .strong { color: var(--ink-1); font-weight: 500; } .callout.info { border-color: var(--info-line); background: var(--info-tint); } .callout.info > .icon { color: var(--accent-text); } .callout.warn { border-color: var(--warn-line); background: var(--warn-tint); } .callout.warn > .icon { color: var(--warn-text); } .callout.danger { border-color: var(--danger-line); background: var(--danger-tint); } .callout.danger > .icon { color: var(--danger-text); } .callout.success { border-color: var(--ok-line); background: var(--ok-tint); } .callout.success > .icon { color: var(--ok-text); } /* ---------- Empty / no-match / error / loading states ---------- .empty: small contextual icon, title 14/500, one line 13px --ink-2, at most one action. */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 24px; min-height: 0; } .empty-icon { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px; color: var(--ink-3); } .empty-icon .icon { width: 20px; height: 20px; } .empty-icon.danger { color: var(--danger-text); border-color: var(--danger-line); background: var(--danger-tint); } .empty-title { color: var(--ink-1); font-weight: 500; font-size: var(--fs-base); text-wrap: balance; } .empty-text { color: var(--ink-2); max-width: 44ch; font-size: var(--fs-sm); text-wrap: pretty; } .empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; } .empty.compact { padding: 16px; min-height: 0; } /* One primary action per view: when the page header already offers it, the empty state repeats it as secondary. */ .page:has(.page-actions .btn-primary:not([hidden])) .empty-actions .btn-primary { --btn-bg: var(--surface-1); --btn-bg-hover: var(--state-hover); --btn-border: var(--line-2); --btn-text: var(--ink-1); --btn-icon: var(--ink-3); box-shadow: var(--shadow-control); } /* ---------- Tabs, view strips, sub-navigation ---------- One overflow behaviour for every horizontal strip (page tabs, table views, section navs, settings sub-nav below 900px): the strip scrolls without a visible scrollbar, ui/page.js marks data-fade="start|end|both" so the clipped edge fades, the active item is scrolled into view, and Arrow/Home/End move between items. */ .tabs, .table-views, .tab-strip { display: flex; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain; } .tabs::-webkit-scrollbar, .table-views::-webkit-scrollbar, .tab-strip::-webkit-scrollbar { display: none; } /* Masks only use alpha; the keyword colours below carry no design meaning. */ [data-fade="end"] { -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); } [data-fade="start"] { -webkit-mask-image: linear-gradient(to right, transparent, black 40px); mask-image: linear-gradient(to right, transparent, black 40px); } [data-fade="both"] { -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); } .tabs { gap: 22px; border-bottom: 1px solid var(--line-1); } .tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding-inline: 1px; color: var(--ink-3); font-size: var(--fs-base); font-weight: 500; white-space: nowrap; flex: none; transition: color var(--t-fast); } .tab .icon { display: none; } .tab:hover { color: var(--ink-1); } .tab.is-active, .tab[aria-current="page"] { color: var(--ink-1); } .tab.is-active::after, .tab[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--ink-1); } .tab:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); } .tab .count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--r-pill); background: var(--neutral-soft); color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; } .tab.is-active .count, .tab[aria-current="page"] .count { color: var(--ink-2); } /* Segmented control: ≤ 4 mutually exclusive options, 34px, --surface-2 track, --surface-1 selected segment. */ .seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 2px; gap: 2px; min-height: var(--control-h-sm); background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r); } .seg > button { min-height: calc(var(--control-h-sm) - 6px); padding-inline: 10px; border-radius: var(--r-sm); color: var(--ink-3); font-size: var(--fs-sm); font-weight: 500; line-height: 1.2; transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); } .seg > button:hover { color: var(--ink-1); } .seg > button.is-active, .seg > button[aria-pressed="true"] { background: var(--surface-1); color: var(--ink-1); box-shadow: 0 0 0 1px var(--line-2); } :root[data-theme="dark"] .seg > button.is-active, :root[data-theme="dark"] .seg > button[aria-pressed="true"] { background: var(--state-active); box-shadow: none; } .subnav { display: flex; flex-direction: column; gap: 1px; } .subnav-item { display: flex; align-items: center; gap: 8px; height: var(--control-h); padding-inline: 10px; border-radius: var(--r); color: var(--ink-2); font-size: var(--fs-base); font-weight: 500; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); position: relative; width: 100%; } .subnav-item .icon { color: var(--ink-3); } .subnav-item:hover { background: var(--state-hover); color: var(--ink-1); } .subnav-item.is-active { color: var(--ink-1); background: var(--state-selected); font-weight: 600; } .subnav-item.is-active::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 7px; width: 2px; border-radius: 0 2px 2px 0; background: var(--brand); } .subnav-item.is-active .icon { color: var(--ink-1); } @media (max-width: 900px) { .subnav { flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } .subnav::-webkit-scrollbar { display: none; } .subnav-item { width: auto; white-space: nowrap; flex: none; } .subnav-item.is-active::before { inset-block: auto 0; inset-inline: 8px; width: auto; height: 2px; border-radius: 2px 2px 0 0; } } /* ---------- Settings template (DESIGN_SYSTEM §4.3) — Platform settings, Account, Application settings ---------- Sub-navigation (200px) │ sections at --content-form width. A section (.set-section) is a head (.set-head: title 18/600, a one-line description, an optional trailing badge or action) and groups. A group (.set-group) is a readable caption with an optional one-line description and a trailing control (.set-group-head), then a panel (.card.set-card) of aligned rows (.set-rows: label and hint on the left, the control in a right column of at most 300px, a hairline between rows; a textarea takes the width under its label) or a padded block (.set-block); a short note may follow the panel (.set-help). The save bar sits at the end of the section and sticks to the viewport while anything is unsaved; the sub-navigation marks unsaved sections with an amber dot. Below 900px the sub-navigation is the shared scrolling strip; below 640px rows stack. Markup: shared/account.js, staff/pages/settings.js and the application settings sections (app-settings-ui.js). */ .set-layout { display: grid; grid-template-columns: 200px minmax(0, var(--content-form)); gap: var(--s10); align-items: start; } .set-layout > .set-nav { position: sticky; top: calc(var(--header-h) + 24px); } .set-body, .set-section, .set-groups { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; } .set-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s4); flex-wrap: wrap; } .set-head > .grow { flex: 1 1 320px; } .set-head > .badge { flex: none; margin-top: 3px; } .set-head h2 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: var(--tracking-heading); line-height: var(--lh-tight); } .set-head { padding-bottom: var(--s3); border-bottom: 1px solid var(--line-1); } .set-head p { margin-top: var(--s1); max-width: 68ch; color: var(--ink-2); font-size: var(--fs-base); } .set-group { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; } .set-group-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s3); min-width: 0; } .set-group-head > .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .set-group-head > :not(.grow) { display: inline-flex; align-items: center; gap: var(--s2); flex: none; } .set-caption { font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); line-height: 1.4; color: var(--ink-3); } .set-caption.is-danger { color: var(--danger-text); } .set-help { font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-3); max-width: 72ch; } .set-text { max-width: 72ch; font-size: var(--fs-sm); color: var(--ink-2); } .set-text.muted { color: var(--ink-3); } .set-count { display: inline-flex; align-items: center; height: 20px; padding-inline: 7px; border-radius: var(--r-pill); background: var(--neutral-soft); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; } .set-card { overflow: hidden; } /* A table inside a panel lets the panel be its frame. */ .set-card > .table-card, .set-card > div > .table-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .set-seg .seg { flex-wrap: wrap; } .set-seg.is-ro .seg > button:disabled { cursor: not-allowed; opacity: 0.7; } .set-seg.is-ro .seg > button.is-active:disabled { opacity: 1; } /* Sub-navigation: the unsaved-changes mark is an amber dot (a held state) with a text alternative. */ .set-nav .subnav-item > .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .set-nav-mark { flex: none; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--warn); } /* Rows. renderFields() output (.field), switch rows (.toggle-row) and hand-built .set-row share one anatomy. */ .set-rows { display: flex; flex-direction: column; min-width: 0; } .set-rows > * + * { border-top: 1px solid var(--line-1); } .set-rows > .field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--set-control-w, min(300px, 42%))); grid-template-areas: "label control" "hint control" "hint error"; grid-template-rows: auto auto 1fr; column-gap: var(--s6); row-gap: 2px; align-items: start; padding: var(--s3) var(--s4); } .set-rows > .field > .field-label { grid-area: label; padding-top: 7px; } .set-rows > .field > .field-hint { grid-area: hint; max-width: 60ch; } .set-rows > .field > :is(.input, .select, .textarea, .input-wrap) { grid-area: control; } .set-rows > .field > .field-error { grid-area: error; margin-top: 4px; } .set-rows > .field > input[type="number"] { justify-self: end; width: min(100%, 160px); } /* A textarea needs the width: label, then the control, then the hint, stacked. */ .set-rows > .field:has(> .textarea) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "control" "hint" "error"; grid-template-rows: auto; row-gap: 6px; } .set-rows > .field:has(> .textarea) > .field-label { padding-top: 0; } /* Switches: the whole row is the label; the switch sits on the right edge with the other controls. */ .set-rows > .field:has(> .toggle-row) { display: block; padding: 0; } .set-rows > .field > .toggle-row, .set-rows > .toggle-row { gap: var(--s6); min-height: 56px; padding: var(--s3) var(--s4); border: 0; border-radius: 0; } .set-rows > * + .toggle-row { border-top: 1px solid var(--line-1); } .set-rows .toggle-row .t-hint { max-width: 60ch; } .set-rows > .field > .toggle-row + .field-error { padding: 0 var(--s4) var(--s3); } .set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--set-control-w, min(300px, 42%))); column-gap: var(--s6); align-items: center; min-height: 52px; padding: var(--s3) var(--s4); min-width: 0; } .set-row.is-wide { grid-template-columns: minmax(0, 1fr) auto; } /* A renderFields() 'html' entry (wrapped in a bare .full div) laid out as a row: text left, content right. */ .set-rows > div.full:not(.field) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--set-control-w, min(300px, 42%))); column-gap: var(--s6); align-items: center; padding: var(--s3) var(--s4); } .set-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .set-row-label { color: var(--ink-1); font-size: var(--fs-base); font-weight: 500; } .set-row-hint { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.45; max-width: 60ch; } .set-row-value { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--s2); min-width: 0; color: var(--ink-1); font-size: var(--fs-sm); overflow-wrap: anywhere; } .set-row-value > .muted { color: var(--ink-3); } .set-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-inline-start: auto; } .set-row-control { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--s2); min-width: 0; } .set-block { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); min-width: 0; } .set-foot { flex-wrap: wrap; } .set-foot.is-start { justify-content: flex-start; } .set-foot > .grow { font-size: var(--fs-xs); color: var(--ink-3); } /* Numbered setup steps. */ .set-steps { display: grid; gap: var(--s2); margin: 0; padding: var(--s3) var(--s4); counter-reset: set-step; } .set-steps > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; counter-increment: set-step; } .set-steps > li::before { content: counter(set-step); display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .set-steps + form, .set-steps + .set-rows { border-top: 1px solid var(--line-1); } /* Save bar: "Unsaved changes · Discard · Save", sticky at the bottom while the section is dirty. */ .save-bar { position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-block: 8px; padding-inline: 14px 8px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-float); color: var(--ink-1); font-size: var(--fs-sm); animation: fadeIn var(--t) var(--ease); } .save-bar > .icon { color: var(--warn-text); flex-shrink: 0; } :is(.set-section, .set-groups) > .save-bar { margin-top: 0; } @media (max-width: 1100px) { .set-layout { grid-template-columns: 180px minmax(0, 1fr); gap: var(--s8); } } @media (max-width: 900px) { .set-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .set-layout > .set-nav { position: static; margin-inline: calc(-1 * var(--s1)); padding-inline: var(--s1); } } @media (max-width: 640px) { .set-rows > .field { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "control" "hint" "error"; grid-template-rows: auto; row-gap: 6px; } .set-rows > .field > .field-label { padding-top: 0; } .set-rows > .field > input[type="number"] { justify-self: stretch; width: 100%; } .set-row, .set-row.is-wide, .set-rows > div.full:not(.field) { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2); align-items: start; } .set-row-control { justify-content: flex-start; } .set-head > .btn { width: 100%; } .save-bar { flex-wrap: wrap; padding: 12px; } .save-bar > .grow { flex-basis: calc(100% - 26px); } .save-bar > .btn { flex: 1 1 0; } } /* ---------- Tables (ui/table.js) ---------- Head on --surface-2 with sentence-case labels; 14px cells; one density per table (--row-h 40 / 52 / 56); selection with a bulk bar that replaces the toolbar; sticky head only. Columns drop by breakpoint (col-hide-*); on phones a table becomes a two-line list (.is-list) — never a sticky-both-sides sliver scroll. */ .table-card { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); min-width: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-panel); } .table-card[data-density="compact"] { --row-h: var(--row-h-compact); } .table-card[data-density="comfortable"] { --row-h: var(--row-h-comfortable); } .table-views { gap: 20px; padding-inline: 14px; border-bottom: 1px solid var(--line-1); } .table-views .tab { height: 40px; } .table-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-1); } .table-toolbar .search { flex: 0 1 300px; min-width: 180px; max-width: 100%; } .table-toolbar .select, .table-toolbar > label:not(.search) > .input { width: auto; min-width: 140px; max-width: 220px; } .table-toolbar > label:not(.search) { white-space: nowrap; } .table-toolbar .tools-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; } .table-card.has-selection > .table-toolbar { display: none; } /* Filter fold (foldFilters): a "Filters" button with the number of filters set; it only appears below 640px. */ .table-toolbar .tbl-fold { display: none; } .tbl-fold-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--r-pill); background: var(--neutral-soft); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: 500; line-height: 1; } @media (max-width: 640px) { .table-toolbar .search { flex: 1 1 100%; } .table-toolbar .tools-end { margin-inline-start: 0; } .table-toolbar .select { flex: 1 1 140px; max-width: none; } .table-toolbar > :has(> .daterange) { flex: 1 1 100%; min-width: 0; } .table-toolbar .daterange { display: flex; } .table-toolbar .daterange > .btn { flex: 1; justify-content: flex-start; } /* Folded: search and the end tools (with the Filters button) share the first line; the filters open below it. */ .table-card.has-fold .table-toolbar .search { flex: 1 1 120px; min-width: 0; } .table-card.has-fold .table-toolbar .tools-end { order: 1; flex-wrap: nowrap; } .table-card.has-fold .table-toolbar > :is(.select, [data-tbl-range]) { order: 2; } .table-card.has-fold .table-toolbar .tbl-fold { display: inline-flex; } .table-card.has-fold:not(.is-filters-open) .table-toolbar > :is(.select, [data-tbl-range]) { display: none; } } .table-scroll { overflow: auto; position: relative; min-width: 0; max-width: 100%; max-height: var(--table-max-h, max(360px, calc(100vh - 220px))); overscroll-behavior-x: contain; } .table { width: 100%; font-size: var(--fs-base); } .table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); text-align: start; font-family: var(--label-font); font-weight: var(--label-weight); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); color: var(--ink-3); height: 38px; padding-inline: var(--cell-px); white-space: nowrap; box-shadow: inset 0 -1px 0 var(--line-2); } .table tbody td { height: var(--row-h); padding: 8px var(--cell-px); border-bottom: 1px solid var(--line-1); vertical-align: middle; color: var(--ink-2); line-height: var(--lh-snug); } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr.row { display: table-row; transition: background-color var(--t-fast); } .table tbody tr.row:hover { background: var(--state-row-hover); } .table tbody tr.row.clickable { cursor: var(--cursor-action, pointer); } .table tbody tr.row:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); background: var(--state-row-hover); } .table tbody tr.row.is-selected { background: var(--state-selected); } .table tbody tr.row.is-expanded { background: var(--state-row-expanded); } .table tbody tr.row.is-expanded td { border-bottom-color: transparent; } .table tbody tr.expanded-row > td { background: var(--surface-sunken); padding: 16px; height: auto; } .table .col-num, .table th.col-num, .table .t-end { text-align: end; font-variant-numeric: tabular-nums; } .table .col-check { width: 40px; padding-inline-end: 0; } .table .col-check > .checkbox { display: grid; margin: 0; } .table .col-actions { text-align: end; white-space: nowrap; width: 1%; } .table .col-actions .row-actions { display: inline-flex; gap: 2px; justify-content: flex-end; align-items: center; } /* Shrinkable column (column option shrink:true): the cell may be narrower than its content and truncates instead of widening the table past its container. Pair with width:'30%' to say how much of the row it should take. */ .table td.col-shrink { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table td.col-shrink > .truncate { display: block; } .table .cell-primary { color: var(--ink-1); font-weight: 500; } .table .cell-sub { color: var(--ink-3); font-size: var(--fs-xs); margin-top: 1px; } .table .avatar { width: 26px; height: 26px; font-size: 10px; border-radius: var(--r-sm); } .sort-btn { display: inline-flex; align-items: center; gap: 4px; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; height: 24px; border-radius: var(--r-sm); } .sort-btn:hover { color: var(--ink-1); } .sort-btn .icon { width: 12px; height: 12px; opacity: 0; transition: opacity var(--t-fast); } .sort-btn:hover .icon, .sort-btn:focus-visible .icon { opacity: 0.5; } .sort-btn.is-active { color: var(--ink-1); } .sort-btn.is-active .icon { opacity: 1; } th.col-num .sort-btn, th.t-end .sort-btn { flex-direction: row-reverse; } .table-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-1); color: var(--ink-3); font-size: var(--fs-xs); background: var(--surface-2); } .table-footer .select { width: auto; height: 26px; font-size: var(--fs-xs); padding-inline-start: 8px; box-shadow: none; } .table-footer .pager { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; max-width: 100%; } .page-btn { min-width: 28px; height: 28px; padding-inline: 6px; display: inline-grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; transition: background-color var(--t-fast), color var(--t-fast); } .page-btn:hover:not(:disabled) { background: var(--state-hover); color: var(--ink-1); } .page-btn.is-active { background: var(--surface-1); color: var(--ink-1); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2); } .page-btn:disabled { opacity: 0.35; cursor: not-allowed; } /* Bulk bar: "3 selected · [actions] · Clear" takes the toolbar's place while rows are selected. */ .batch-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 52px; padding: 8px 12px; border-bottom: 1px solid var(--line-accent); background: var(--accent-soft); } .batch-bar .count { color: var(--accent-text); font-weight: 600; margin-inline-end: 4px; font-variant-numeric: tabular-nums; } .table .skeleton-row td { padding-block: 0; } .table .mono { font-size: 12px; } .density-btn[aria-expanded="true"] { background: var(--state-hover); color: var(--ink-1); } /* Low-priority columns step out instead of forcing horizontal scroll (className on the column). */ @media (max-width: 1599px) { .table .col-hide-xl { display: none; } } @media (max-width: 1365px) { .table .col-hide-lg { display: none; } } @media (max-width: 1100px) { .table .col-hide-md { display: none; } } @media (max-width: 760px) { .table .col-hide-sm { display: none; } } .show-narrow { display: none; } @media (max-width: 760px) { .show-narrow { display: inline-flex; } } /* Phones: the table becomes a two-line list. The key cell is the first line; the remaining cells wrap on the lines below as meta; the checkbox and the row actions sit at either end. The header row is dropped (sort stays in the footer-less list via the page's own controls). Breakpoint columns and list:false columns are not part of the list. Comparison tables keep scrolling (mobile:'scroll'). */ @media (max-width: 760px) { .table.is-list, .table.is-list tbody { display: block; min-width: 0 !important; } .table.is-list thead { display: none; } .table.is-list tr.row, .table.is-list tr.skeleton-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; position: relative; padding-block: 10px; padding-inline: calc(var(--cell-px) + var(--list-start, 0px)) calc(var(--cell-px) + var(--list-end, 0px)); border-bottom: 1px solid var(--line-1); min-height: var(--row-h); } .table.is-list tbody tr:last-child { border-bottom: 0; } .table.is-list td { display: block; height: auto; padding: 0; border: 0; min-width: 0; text-align: start; } /* Columns that step out by breakpoint stay out of the list (760px is below every breakpoint), and so do columns marked list:false (col-hide-list). The :is() lifts this above the display:block rule just before it. */ .table.is-list td:is(.col-hide-sm, .col-hide-md, .col-hide-lg, .col-hide-xl, .col-hide-list) { display: none; } /* The key cell leads whatever the column order; a listFirst column heads the meta line after it. */ .table.is-list td.cell-key { flex: 1 1 100%; color: var(--ink-1); order: -2; } .table.is-list td.cell-first { order: -1; } .table.is-list td.cell-meta { flex: 0 1 auto; max-width: 100%; font-size: var(--fs-xs); color: var(--ink-3); } .table.is-list td.cell-meta:empty, .table.is-list td.cell-meta:has(> .muted:only-child) { display: none; } .table.is-list td.cell-meta .cell-sub { display: inline; margin: 0; } .table.is-list td.cell-meta[data-th]::before { content: attr(data-th); margin-inline-end: 4px; font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); color: var(--ink-3); } .table.is-list td.cell-meta[data-th] { font-variant-numeric: tabular-nums; } .table.is-list td.col-check { position: absolute; inset-inline-start: var(--cell-px); top: 50%; transform: translateY(-50%); width: auto; } .table.is-list:has(td.col-check) tr.row, .table.is-list:has(td.col-check) tr.skeleton-row { --list-start: 28px; } .table.is-list td.col-actions { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: auto; background: none; box-shadow: none; } /* Room for the row actions: ui/table.js measures the widest actions cell into --list-actions-w and marks the rows whose actions take room; until it can measure, nothing is reserved. */ .table.is-list tr.row.has-actions { --list-end: var(--list-actions-w, 0px); } .table.is-list td.col-shrink { max-width: 100%; white-space: normal; } .table.is-list tr.expanded-row, .table.is-list tr.expanded-row > td { display: block; } .table.is-list tr.row:focus-visible { box-shadow: var(--focus-ring-inset); } .table.is-list .skeleton-row td.cell-meta { flex-basis: 30%; } /* The list already shows every surviving column, so narrow-only duplicates of a column are redundant here. */ .table.is-list .show-narrow { display: none; } } /* ---------- Date range (ui/daterange.js) ---------- A button that reads the range, opening a popover with presets and typed YYYY-MM-DD fields. */ .daterange { position: relative; display: inline-flex; min-width: 0; } .daterange > .btn { font-weight: 400; max-width: 100%; } .daterange > .btn .daterange-label { overflow: hidden; text-overflow: ellipsis; } .daterange > .btn.is-set { font-weight: 500; } .daterange > .btn .icon:last-child { margin-inline: 2px -4px; } .daterange-pop { width: min(380px, calc(100vw - 16px)); max-width: none; padding: 10px; } .daterange-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; } .daterange-preset { justify-content: space-between; } .daterange-preset.is-active { background: var(--state-selected); color: var(--ink-1); font-weight: 500; } .daterange-preset .icon { color: var(--accent-text); } .daterange-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-1); } .daterange-fields .field-label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; } .daterange-fields .input { font-family: var(--font-mono); font-size: 12px; } .daterange-err { margin-top: 6px; font-size: var(--fs-xs); color: var(--danger-text); display: flex; align-items: center; gap: 4px; } .daterange-err:empty { display: none; } .daterange-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; } .daterange-foot .start { margin-inline-end: auto; } /* Single date (ui/form.js type 'date'): a typed YYYY-MM-DD input whose calendar button opens the same popover with relative presets; the foot reads the chosen day. */ .datefield-pop { width: min(300px, calc(100vw - 16px)); } .datefield-now { margin-inline-end: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .date-field > .input { font-variant-numeric: tabular-nums; } /* ---------- Timeline (ui/resource.js timelineHTML, activityTimeline) — a left rule with dots, no cards per event ---------- A row: what happened and who (line 1), target and context (line 2), the time beside both (relative; the absolute on hover and as a second line from 1200px), details that expand in place. Dots are neutral; holds amber, failures red; what is still ahead has a hollow dashed dot on a dashed rule. */ .activity-timeline { padding: 4px 0; } .activity-timeline > li { position: relative; padding: 0 0 20px 28px; } .activity-timeline > li:not(:last-child)::before { content: ''; position: absolute; top: 12px; bottom: 0; inset-inline-start: 5px; border-inline-start: 1px solid var(--line-2); } .timeline-node { position: absolute; top: 6px; inset-inline-start: 1px; width: 9px; height: 9px; background: var(--surface-1); border: 2px solid var(--line-3); border-radius: 50%; } .timeline-item.is-warn > .timeline-node { border-color: var(--warn); background: var(--warn); } .timeline-item.is-danger > .timeline-node { border-color: var(--danger); background: var(--danger); } .timeline-item.is-upcoming > .timeline-node { border-style: dashed; background: transparent; } .activity-timeline > li:has(+ .is-upcoming)::before { border-inline-start-style: dashed; } .timeline-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; min-width: 0; } .timeline-what, .timeline-meta { grid-column: 1; } .timeline-what { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-width: 0; } .timeline-title { color: var(--ink-1); font-size: var(--fs-sm); font-weight: 500; } .timeline-item.is-danger .timeline-title { color: var(--danger-text); } .timeline-actor { color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; } .timeline-when { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: var(--fs-xs); color: var(--ink-3); text-align: end; } .timeline-abs { display: none; font-variant-numeric: tabular-nums; } @media (min-width: 1200px) { .timeline-abs { display: block; } } .timeline-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-width: 0; font-size: var(--fs-xs); color: var(--ink-3); overflow-wrap: anywhere; } .timeline-part { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .timeline-target { display: inline-flex; align-items: center; gap: 4px; } .timeline-details { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--ink-3); } .timeline-details summary { cursor: var(--cursor-action, pointer); width: fit-content; } .timeline-details-body { display: grid; gap: var(--s3); margin-top: var(--s2); min-width: 0; } .timeline-content > .skeleton { grid-column: 1 / -1; } .timeline-skel-meta { width: 30%; height: 10px; } .resource-loading-title { width: 32%; height: 28px; margin: 18px 0 12px; } .resource-loading-sub { width: 45%; height: 14px; margin-bottom: 40px; } .resource-loading-aside { height: 220px; } .resource-loading-nav { height: 36px; } .resource-loading-body { height: 280px; } /* ---------- Lists / feed ---------- */ .list { display: flex; flex-direction: column; } .list-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-1); min-width: 0; } .list-item:last-child { border-bottom: 0; } .list-item.clickable { cursor: var(--cursor-action, pointer); transition: background-color var(--t-fast); } .list-item.clickable:hover { background: var(--state-row-hover); } .feed-icon { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-1); color: var(--ink-3); flex-shrink: 0; } .feed-icon .icon { width: 14px; height: 14px; } .feed-icon::after { content: ""; position: absolute; inset-block-end: -2px; inset-inline-end: -2px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--surface-1); background: transparent; display: none; } .feed-icon.green::after { display: block; background: var(--ok); } .feed-icon.red::after { display: block; background: var(--danger); } .feed-icon.amber::after { display: block; background: var(--warn); } .feed-icon.blue::after { display: block; background: var(--accent); } /* ---------- Horizontal stacked bar ---------- */ .stackbar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: var(--state-active); gap: 2px; } .stackbar > span { display: block; height: 100%; min-width: 3px; transition: flex-grow var(--t-slow) var(--ease); } .legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 16px; margin-top: 14px; } .legend-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); min-width: 0; } .legend-item .swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .legend-item .lbl { color: var(--ink-2); flex: 1; min-width: 0; } .legend-item .val { color: var(--ink-1); font-variant-numeric: tabular-nums; font-weight: 500; } .legend-item .pct { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); min-width: 42px; text-align: end; } /* ---------- Popover menu (ui/menu.js) — --surface-overlay, --shadow-pop, 36px items ---------- */ .menu { position: fixed; z-index: var(--z-menu); min-width: 200px; max-width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; background: var(--surface-overlay); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 4px; opacity: 0; transform: scale(0.98); transform-origin: top left; pointer-events: none; transition: opacity var(--t-exit) var(--ease-in), transform var(--t-exit) var(--ease-in); } .menu.is-open { opacity: 1; transform: none; pointer-events: auto; transition-duration: var(--t-fast); transition-timing-function: var(--ease); } .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--control-h); padding-inline: 8px; border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--fs-base); white-space: nowrap; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .menu-item:hover, .menu-item.is-hover, .menu-item:focus-visible { background: var(--state-hover); color: var(--ink-1); outline: none; } .menu-item .icon { color: var(--ink-3); width: 16px; height: 16px; } .menu-item.danger { color: var(--danger-text); } .menu-item.danger .icon { color: var(--danger-text); } .menu-item.is-active { color: var(--ink-1); font-weight: 500; } .menu-item .end { margin-inline-start: auto; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; } .menu-item .end .icon { color: var(--accent-text); } .menu-sep { height: 1px; background: var(--line-1); margin: 4px -4px; } .menu-label { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; font-family: var(--label-font); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); color: var(--ink-3); font-weight: var(--label-weight); } .menu-search { padding: 4px 4px 6px; } .menu-scroll { max-height: 280px; overflow-y: auto; } .menu-empty { padding: 10px 8px; color: var(--ink-3); font-size: var(--fs-sm); } /* Browser-local color themes: mini-layout previews, readable names and checks; the popover escapes clipping. */ .appearance-mode { display: flex; padding-block: 4px 12px; } .appearance-mode .theme-seg { width: 100%; } .appearance-mode .theme-seg-btn { flex: 1; min-height: var(--control-h); } .appearance-color-title { margin: 0 0 4px; color: var(--ink-1); font-size: var(--fs-sm); font-weight: 600; } .accent-picker { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-1); color: var(--ink-2); font: 13px/1.4 var(--font-sans); white-space: nowrap; } .accent-picker:hover, .accent-picker[aria-expanded="true"] { background: var(--state-hover); border-color: var(--line-3); color: var(--ink-1); } .accent-picker:focus-visible, .accent-choice:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 3px; } .theme-preview { display: grid; grid-template-columns: 22% minmax(0, 1fr); width: 100%; height: 36px; overflow: hidden; border: 1px solid var(--line-2); border-radius: 3px; background: var(--theme-preview-canvas, var(--surface-canvas)); } .theme-preview-nav { display: block; background: var(--theme-preview-nav, var(--surface-nav)); border-inline-end: 1px solid var(--line-1); } .theme-preview-content { display: grid; grid-template-rows: minmax(0, 1fr) 5px; gap: 4px; padding: 5px; min-width: 0; } .theme-preview-panel { display: block; background: var(--theme-preview-panel, var(--surface-1)); border-radius: 2px; } .theme-preview-action { display: block; width: 42%; background: var(--theme-preview-action, var(--action)); border-radius: 1px; } .theme-preview.is-compact { flex: none; width: 24px; height: 18px; border-radius: 3px; } .theme-preview.is-compact .theme-preview-content { grid-template-rows: minmax(0, 1fr) 2px; gap: 2px; padding: 2px; } .accent-picker-caret { color: var(--ink-3); } .accent-picker-popover { width: 312px; max-width: calc(100% - 16px); padding: 12px; max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; } .accent-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .accent-picker-head h2 { color: var(--ink-1); font-size: var(--fs-lg); font-weight: 600; } .accent-picker-hint, .accent-picker-status { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; } .accent-picker-hint { margin: 0 0 12px; } .accent-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .accent-choice { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px; border: 1px solid var(--line-1); border-radius: var(--r); background: var(--surface-1); color: var(--ink-2); text-align: start; font-size: var(--fs-sm); } .theme-choice-caption { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; padding-inline: 2px; line-height: 18px; } .accent-choice:hover { background: var(--state-hover); color: var(--ink-1); } .accent-choice.is-selected { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink-1); } .accent-choice-check { visibility: hidden; color: var(--accent-text); } .accent-choice.is-selected .accent-choice-check { visibility: visible; } .accent-picker-status { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-1); } .set-row-hint > [data-accent-persistence] { display: block; margin-top: 4px; } @media (max-width: 640px) { .accent-picker, .accent-choice { min-height: var(--touch-h); } } /* ---------- Tooltips (rail) — theme-aware surface, 300ms delay, never contain actions ---------- */ [data-tip] { position: relative; } .has-tips [data-tip]::after { content: attr(data-tip); position: absolute; inset-inline-start: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--surface-inverse); color: var(--ink-inverse); border: 1px solid var(--line-1); border-radius: var(--r-sm); padding: 4px 8px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; z-index: var(--z-tooltip); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--t-fast) var(--ease) 0s, visibility 0s linear var(--t-fast); } .has-tips [data-tip]:hover::after, .has-tips [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transition: opacity var(--t-fast) var(--ease) 300ms, visibility 0s linear 300ms; } /* ---------- Dialogs and drawers (ui/modal.js) ---------- Dialog: --dialog-w 560 (size-md, forms) / --dialog-w-lg 760 (size-lg, editors), --r-xl, 20px body padding, footer on --surface-2. Drawer: right side, --drawer-w 480 (size-md) / 720 (size-lg), same header/footer anatomy. */ .modal-root { position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; } .modal-backdrop { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity var(--t) var(--ease); } .modal-root.is-open .modal-backdrop { opacity: 1; } .modal { position: relative; width: 100%; max-width: var(--dialog-w); max-height: calc(100vh - 12vh - 16px); display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--line-2); border-radius: var(--r-xl); box-shadow: var(--shadow-dialog); opacity: 0; transform: translateY(4px) scale(0.99); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } .modal-root.is-open .modal { opacity: 1; transform: none; } .modal.size-sm { max-width: 440px; } .modal.size-lg { max-width: var(--dialog-w-lg); } .modal.size-xl { max-width: 880px; } .modal-root:has(.modal.size-theater) { padding: 1vh 1vw; align-items: center; } .modal.size-theater { max-width: min(98vw, 1920px); width: min(98vw, 1920px); height: 96vh; max-height: 96vh; } .modal.size-theater .modal-header { padding: 12px 18px 10px; border-bottom: 1px solid var(--line-1); align-items: center; } .modal.size-theater .modal-body { padding: 10px 14px; display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; } .modal.size-theater:has(.sc-console) { border-radius: 6px; border: 1px solid #3f3f44; background: #0c0c0e; overflow: hidden; } .modal.size-theater:has(.sc-console) > .modal-header { display: none; } .modal.size-theater:has(.sc-console) > .modal-body { padding: 0; background: #0c0c0e; } /* ---------- ScreenConnect Remote Console ---------- */ .sc-console { display: flex; flex-direction: column; width: 100%; height: 100%; background: #0c0c0e; color: #f0f0f2; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; position: relative; overflow: hidden; user-select: none; } .sc-topbar { display: flex; align-items: stretch; justify-content: space-between; height: 36px; min-height: 36px; background: #3b3b3e; border-bottom: 1px solid #1e1e20; padding: 0 4px 0 12px; user-select: none; position: relative; z-index: 40; } .sc-title-area { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden; } .sc-brand-icon { display: inline-flex; align-items: center; justify-content: center; color: #e4e4e8; flex-shrink: 0; } .sc-brand-icon svg { width: 15px; height: 15px; } .sc-window-title { font-size: 12.5px; font-weight: 400; color: #f0f0f4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-live-pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 6px; border-radius: 2px; background: #107c41; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; } .sc-live-pill.is-paused { background: #5a5a60; } .sc-live-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; } .sc-telemetry { font-size: 11px; color: #c2c2ca; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .sc-dock-wrap { display: flex; align-items: stretch; justify-content: center; position: relative; flex-shrink: 0; } .sc-dock { display: flex; align-items: stretch; background: #2c2c2f; padding: 0 18px; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 100%, 0 100%); border-top: 1px solid #48484d; } .sc-dock-btn { background: transparent; border: none; color: #ffffff; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 100ms ease, color 100ms ease; position: relative; padding: 0; } .sc-dock-btn svg { width: 18px; height: 18px; } .sc-dock-btn:hover { background: rgba(255, 255, 255, 0.1); } .sc-dock-btn.is-active { background: #141414; color: #ffffff; } .sc-dock-badge { position: absolute; top: 3px; right: 3px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 99px; background: #0078d7; color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .sc-win-controls { display: flex; align-items: stretch; justify-content: flex-end; gap: 0; flex: 1; min-width: 0; } .sc-win-btn { background: transparent; border: none; color: #dedee2; width: 40px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 100ms ease, color 100ms ease; } .sc-win-btn svg { width: 13px; height: 13px; } .sc-win-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .sc-win-btn.is-close:hover { background: #e81123; color: #fff; } /* ---------- ScreenConnect Floating Flyouts (#141414) ---------- */ .sc-flyout { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); background: #141414; border: 1px solid #2b2b2e; border-top: none; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8); z-index: 35; padding: 10px 14px 14px; color: #ffffff; } .sc-flyout[hidden] { display: none !important; } .sc-flyout-essentials { width: min(736px, 96vw); } .sc-flyout-view { width: min(468px, 95vw); } .sc-flyout-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .sc-flyout-title { font-size: 16px; font-weight: 600; color: #ffffff; margin: 0; line-height: 1.2; } .sc-flyout-collapse { background: transparent; border: none; color: #e0e0e4; cursor: pointer; padding: 4px; display: inline-flex; align-items: center; justify-content: center; } .sc-flyout-collapse svg { width: 14px; height: 14px; } .sc-flyout-collapse:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } /* ---------- Essentials Matrix ---------- */ .sc-essentials-top { display: grid; grid-template-columns: 105px 105px 1fr 1fr; gap: 8px; margin-bottom: 8px; } .sc-essentials-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media (max-width: 720px) { .sc-essentials-top { grid-template-columns: 1fr 1fr; } .sc-essentials-bottom { grid-template-columns: 1fr; } } .sc-tile { background: #38383b; border: 1.5px solid transparent; color: #f2f2f5; padding: 9px 10px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; position: relative; transition: background 90ms ease, border-color 90ms ease; text-align: left; user-select: none; } .sc-tile:hover { background: #46464a; border-color: #9e9ea4; } .sc-tile.is-selected { border-color: #0078d7; box-shadow: inset 0 0 0 0.5px #0078d7; } .sc-tile.is-blue, .sc-tile.is-on { background: #0067b8; border-color: #0078d7; color: #ffffff; } .sc-tile.is-blue:hover, .sc-tile.is-on:hover { background: #0072cc; border-color: #66b8ff; } .sc-tile-top { display: flex; align-items: center; justify-content: space-between; width: 100%; } .sc-tile-icon { display: inline-flex; align-items: center; justify-content: center; color: #ffffff; } .sc-tile-icon svg { width: 22px; height: 22px; } .sc-tile-info { display: inline-flex; align-items: center; justify-content: center; color: #ffffff; opacity: 0.9; } .sc-tile-info svg { width: 14px; height: 14px; } .sc-tile-label { font-size: 11.5px; line-height: 1.25; font-weight: 400; color: #ffffff; margin-top: 8px; } .sc-tile-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sc-section-bar { background: #252526; padding: 5px 8px; font-size: 11.5px; font-weight: 600; color: #ffffff; display: flex; align-items: center; justify-content: space-between; min-height: 26px; } .sc-section-bar svg { width: 14px; height: 14px; color: #ffffff; } .sc-tile-group-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: 1; } .sc-tile-group-body .sc-tile { min-height: 62px; align-items: center; justify-content: center; text-align: center; padding: 6px; } .sc-tile-group-body .sc-tile-icon svg { width: 18px; height: 18px; } .sc-tile-group-body .sc-tile-label { margin-top: 4px; font-size: 11px; line-height: 1.2; } /* ScreenConnect Pill Toggle Switch */ .sc-switch { width: 32px; height: 15px; border-radius: 99px; background: #8e8e94; position: relative; display: inline-block; transition: background 120ms ease; flex-shrink: 0; } .sc-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #ffffff; transition: transform 120ms ease; } .sc-tile.is-on .sc-switch, .sc-tile.is-blue .sc-switch { background: #003966; } .sc-tile.is-on .sc-switch::after, .sc-tile.is-blue .sc-switch::after { transform: translateX(17px); } /* ---------- ScreenConnect "View" Flyout (Matches Images 3 & 4) ---------- */ .sc-view-all-bar { background: #38383b; border: 1.5px solid transparent; color: #ffffff; height: 28px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; font-size: 12px; margin-top: 4px; } .sc-view-all-bar:hover { background: #454549; } .sc-view-all-bar.is-selected { border-color: #0078d7; } .sc-view-all-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; } .sc-view-all-icon svg { width: 14px; height: 14px; } .sc-monitor-tray { background: #050507; border: 1px solid #222225; min-height: 114px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; position: relative; margin-bottom: 8px; } .sc-mon-card { position: relative; background: #0d1522; border: 1.5px solid #2e2e33; height: 104px; overflow: visible; cursor: pointer; display: flex; align-items: center; justify-content: center; } .sc-mon-card.is-selected { border-color: #0078d7; } .sc-mon-thumb { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .sc-mon-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #003b73 0%, #0078d7 55%, #001f3f 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); font-size: 11px; gap: 3px; } .sc-mon-controls { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; z-index: 5; } .sc-mon-ctrl-btn { background: rgba(34, 34, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.35); color: #ffffff; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; font-size: 10px; } .sc-mon-ctrl-btn:hover, .sc-mon-ctrl-btn.is-open { background: #0078d7; border-color: #66b8ff; } .sc-mon-ctrl-btn svg { width: 12px; height: 12px; } /* Resolution Dropdown Menu (Matches Image 4) */ .sc-res-menu { position: absolute; top: 24px; left: 32px; width: 132px; background: #38383b; border: 1.5px solid #0078d7; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.85); z-index: 60; padding: 3px 0; max-height: 360px; overflow-y: auto; } .sc-res-menu[hidden] { display: none !important; } .sc-res-item { width: 100%; background: transparent; border: none; color: #f0f0f4; padding: 4px 10px 4px 26px; font-size: 11.5px; text-align: left; cursor: pointer; position: relative; display: block; font-variant-numeric: tabular-nums; } .sc-res-item:hover { background: #4c4c51; color: #ffffff; } .sc-res-item.is-active { color: #ffffff; font-weight: 500; } .sc-res-check { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); color: #4cd964; font-weight: 700; font-size: 11px; } .sc-view-grid-mid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; margin-bottom: 8px; } .sc-quality-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; } .sc-qbox { background: #38383b; border: 1.5px solid transparent; color: #ffffff; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; gap: 4px; } .sc-qbox:hover { background: #454549; } .sc-qbox.is-selected { border-color: #0078d7; } .sc-qbox-letter { font-size: 16px; font-weight: 700; line-height: 1; } .sc-qbox-text { font-size: 11px; color: #e4e4e8; } .sc-zoom-top { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 4px; margin-top: 4px; } .sc-zoom-bot { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 4px; } .sc-zbtn { background: #38383b; border: 1.5px solid transparent; color: #ffffff; height: 30px; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-variant-numeric: tabular-nums; padding: 0; white-space: nowrap; flex-shrink: 0; } .sc-zbtn:hover { background: #454549; } .sc-zbtn.is-selected { border-color: #0078d7; background: #1e293b; } .sc-chan-switch { display: inline-flex; align-items: center; gap: 3px; background: #15161c; border: 1px solid #2e303c; border-radius: 4px; padding: 2px; margin-left: 4px; flex-shrink: 0; white-space: nowrap; } .sc-chan-btn { background: #262730; border: 1.5px solid transparent; border-radius: 3px; color: #d4d4dc; height: 22px; padding: 0 8px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 3px; cursor: pointer; white-space: nowrap; flex-shrink: 0; line-height: 1; transition: background 100ms ease, border-color 100ms ease, color 100ms ease; } .sc-chan-btn:hover { background: #343642; color: #ffffff; } .sc-chan-btn.is-selected { background: #0f2942; border-color: #0078d7; color: #ffffff; } .sc-view-grid-bot { display: grid; grid-template-columns: 1.45fr 0.75fr; gap: 8px; } .sc-logon-box { background: #2b2b2e; border: 1.5px solid #0078d7; color: #ffffff; height: 62px; margin-top: 4px; display: flex; align-items: center; justify-content: center; padding: 0 10px; font-size: 12px; cursor: pointer; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-logon-box:hover { background: #343438; } /* Stage & Overlays */ .sc-stage { position: relative; flex: 1; min-height: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: auto; background: #090a0d; user-select: none; } .sc-stage.is-annotating { cursor: crosshair !important; } .sc-stage-media { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; box-shadow: 0 8px 34px rgba(0, 0, 0, 0.75); } .sc-shutter { position: absolute; inset: 0; background: #ffffff; opacity: 0; pointer-events: none; transition: opacity 180ms ease-out; z-index: 20; } .sc-shutter.is-flash { opacity: 0.55; transition: none; } .sc-hud { position: absolute; left: 16px; bottom: 16px; pointer-events: none; z-index: 15; display: flex; flex-direction: column; gap: 4px; background: rgba(15, 15, 20, 0.82); border: 1px solid #0078d7; border-radius: 4px; padding: 8px 12px; backdrop-filter: blur(6px); } .sc-shot-toast { position: absolute; right: 16px; bottom: 16px; z-index: 28; background: #1c1c1f; border: 1.5px solid #0078d7; border-radius: 4px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75); max-width: 390px; } .sc-shot-thumb { width: 68px; height: 42px; object-fit: cover; border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.25); background: #000; } .modal-header { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 0; } .modal-title { font-size: var(--fs-lg); font-weight: 600; color: var(--ink-1); letter-spacing: var(--tracking-heading); line-height: 1.3; overflow-wrap: anywhere; } .modal-sub { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 4px; overflow-wrap: anywhere; } .modal-body { padding: 18px 20px 20px; overflow-y: auto; flex: 1; min-height: 0; } .modal-body .field + .field { margin-top: 4px; } .modal-body .form-grid > .field + .field, .modal-body .form-grid > * + .field { margin-top: 0; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line-1); background: var(--surface-2); border-end-start-radius: var(--r-xl); border-end-end-radius: var(--r-xl); } .modal-footer .start { margin-inline-end: auto; } .modal-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--line-1); background: var(--surface-2); color: var(--ink-2); flex-shrink: 0; } .modal-icon .icon { width: 17px; height: 17px; } .modal-icon.danger { color: var(--danger-text); border-color: var(--danger-line); background: var(--danger-tint); } .modal-icon.warn { color: var(--warn-text); border-color: var(--warn-line); background: var(--warn-tint); } .modal-icon.success { color: var(--ok-text); border-color: var(--ok-line); background: var(--ok-tint); } .modal-header > .btn-icon { margin-top: -4px; margin-inline-end: -6px; } .modal-root.is-drawer { padding: 0; justify-content: flex-end; align-items: stretch; } .drawer { position: relative; width: min(var(--drawer-w), 100vw); height: 100%; display: flex; flex-direction: column; background: var(--surface-1); border-inline-start: 1px solid var(--line-2); box-shadow: var(--shadow-dialog); transform: translateX(100%); transition: transform var(--t-slow) var(--ease); } .modal-root.is-open .drawer { transform: none; } .drawer.size-lg { width: min(720px, 100vw); } .drawer .modal-header { padding: 12px 16px; border-bottom: 1px solid var(--line-1); align-items: center; min-height: var(--header-h); } .drawer .modal-body { padding: 20px; } .drawer .modal-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } .drawer .modal-header > .grow { min-width: 0; } .drawer .modal-footer { border-radius: 0; } @media (max-width: 560px) { .modal-root { padding: 8px; align-items: flex-end; } .modal { max-height: calc(100dvh - 16px); } .modal-header { padding: 16px 16px 0; } .modal-body { padding: 16px; } .modal-footer { padding: 12px 16px; } .modal-footer .btn { flex: 1; } } /* ---------- Toasts: inverse layer, 4s, max 3 stacked, deduplicated (ui/toast.js) ---------- */ .toast-stack { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 10px; padding-block: 10px; padding-inline: 12px 8px; pointer-events: auto; background: var(--surface-inverse); color: var(--ink-inverse); border-radius: var(--r-lg); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(6px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); font-size: var(--fs-sm); } .toast.is-in { opacity: 1; transform: none; } .toast > .icon { margin-top: 2px; } .toast.success > .icon { color: var(--inverse-ok); } .toast.error > .icon { color: var(--inverse-err); } .toast.warning > .icon { color: var(--inverse-warn); } .toast.info > .icon { color: var(--inverse-info); } .toast .btn-icon { color: var(--ink-inverse-2); } .toast .btn-icon:hover:not(:disabled) { color: var(--ink-inverse); background: color-mix(in srgb, var(--ink-inverse) 14%, transparent); } .toast-body { flex: 1; min-width: 0; padding-top: 1px; } .toast-title { color: var(--ink-inverse); font-weight: 500; } .toast-msg { color: var(--ink-inverse-2); overflow-wrap: anywhere; } .toast-title + .toast-msg { margin-top: 1px; font-size: var(--fs-xs); } .toast .link { color: var(--ink-inverse); } /* ---------- Loading bar: the 2px gold route-change bar (transform-only) ---------- */ .loading-bar { position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 100; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity var(--t) var(--ease); } .loading-bar.is-active { opacity: 1; } .loading-bar > span { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 40%; background: var(--brand); animation: lbar 1.1s var(--ease) infinite; } @keyframes lbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } /* ---------- Command palette ---------- */ .palette { width: 100%; max-width: 600px; } .palette .modal-body { padding: 0; } .palette-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 50px; border-bottom: 1px solid var(--line-1); } .palette-input .icon { color: var(--ink-3); } .palette-input input { flex: 1; height: 100%; background: transparent; border: 0; font-size: var(--fs-base); color: var(--ink-1); min-width: 0; } .palette-input input:focus, .palette-input input:focus-visible { outline: none; box-shadow: none; } .palette-list { max-height: 380px; overflow-y: auto; padding: 6px; } /* Group names use the shared structural label (one line: lookups name the application). */ .palette-group { padding: 10px 10px 4px; font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .palette-item { display: flex; align-items: center; gap: 10px; width: 100%; height: var(--control-h); padding-inline: 10px; border-radius: var(--r); color: var(--ink-2); font-size: var(--fs-base); cursor: var(--cursor-action, pointer); } .palette-item .icon { color: var(--ink-3); } .palette-label { flex: 1; } .palette-item .hint { flex: none; max-width: 40%; margin-inline-start: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: var(--fs-xs); } .palette-keys { display: inline-flex; flex: none; gap: 3px; } .palette-item.is-active { background: var(--state-hover); color: var(--ink-1); box-shadow: inset 2px 0 0 var(--brand); } .palette-item.is-active .icon { color: var(--ink-1); } .palette-match { background: none; color: var(--ink-1); font-weight: 600; } .palette-status { padding: 8px 10px; color: var(--ink-3); font-size: var(--fs-sm); } .palette-foot { display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--line-1); color: var(--ink-3); font-size: var(--fs-xs); background: var(--surface-2); border-end-start-radius: var(--r-xl); border-end-end-radius: var(--r-xl); } .palette-foot span { display: inline-flex; align-items: center; gap: 5px; } /* Phones have no keyboard to teach: no key legend, no key caps. */ @media (max-width: 560px) { .palette .palette-foot, .palette .palette-keys { display: none; } } /* ---------- Dropzone / QR ---------- */ .dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; border: 1px dashed var(--line-3); border-radius: var(--r-lg); color: var(--ink-3); text-align: center; cursor: var(--cursor-action, pointer); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); } .dropzone:hover, .dropzone.is-over { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink-2); } .qr { display: inline-block; padding: 10px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line-1); } /* QR codes must stay black on white for scanners */ .qr img { width: 168px; height: 168px; image-rendering: pixelated; } /* ---------- Misc ---------- */ .divider { height: 1px; background: var(--line-1); margin-block: var(--s4); } .section-title { font-size: var(--fs-base); font-weight: 600; color: var(--ink-1); margin-bottom: 8px; } /* Section heads on the open canvas carry the same gold rule as panel titles. */ .section-head .section-title { display: flex; align-items: center; gap: 8px; } .section-head .section-title::before { content: ""; width: 10px; height: 2px; flex: none; background: var(--brand); } .section-title.mb-0 { margin-bottom: 0; } .fade-in { animation: fadeIn var(--t) var(--ease); } @keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } .health { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ink-4); } .health.ok { background: var(--ok); } .health.bad { background: var(--danger); } .health.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-3); } .quota-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .quota-card .q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; } .quota-card .q-app { font-size: var(--fs-xs); color: var(--ink-3); } .quota-card .q-plan { color: var(--ink-1); font-weight: 500; } .quota-card .q-num { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink-1); } .quota-card .q-num small { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 400; letter-spacing: 0; } .quota-card .q-foot { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-3); } /* Touch: 44px targets below 640px; 16px inputs so iOS does not zoom on focus. */ @media (max-width: 640px) { .btn, .btn-icon, .input, .select, .menu-item, .page-btn, .seg > button { min-height: var(--touch-h); } .seg { height: auto; } .btn-icon { min-width: var(--touch-h); } .btn-icon.sm { min-width: 36px; min-height: 36px; } .table .btn-icon.sm { min-width: 32px; min-height: 32px; } .input, .select, .textarea { font-size: 16px; } .table-footer .select { min-height: 32px; font-size: var(--fs-xs); } } @media (max-width: 560px) { .card-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; } .card-body { padding: 14px; } .card-body.flush { padding: 0; } .table-toolbar, .table-footer { padding: 10px; } .section-head { flex-direction: column; align-items: flex-start; gap: 2px; } .stat { padding: 14px; } .stat-value { font-size: 24px; } .stat .spark-slot { display: none; } } /* ---- Avatars & photo editor ------------------------------------------------ Photo sits over a monogram on a stable tone. Editor: stage with dimmed surround, live previews at the sizes the console really renders. */ .avatar-mono { line-height: 1; } .avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .avatar.has-img { background: var(--surface-2); } .avatar.has-img .avatar-mono { opacity: 0; } .avatar.xl { width: 80px; height: 80px; font-size: 26px; font-weight: 600; letter-spacing: 0; border-radius: var(--r-lg); } .avatar.tone-1 { background: var(--tone-1-bg); color: var(--tone-1-fg); } .avatar.tone-2 { background: var(--tone-2-bg); color: var(--tone-2-fg); } .avatar.tone-3 { background: var(--tone-3-bg); color: var(--tone-3-fg); } .avatar.tone-4 { background: var(--tone-4-bg); color: var(--tone-4-fg); } .avatar.tone-5 { background: var(--tone-5-bg); color: var(--tone-5-fg); } .avatar.tone-6 { background: var(--state-active); color: var(--ink-2); } /* Profile identity block */ .profile-hero { display: flex; align-items: center; gap: var(--s5); } .profile-ava { position: relative; flex-shrink: 0; padding: 0; border: 0; background: none; cursor: var(--cursor-action, pointer); border-radius: var(--r-lg); box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 4px var(--line-2); transition: box-shadow var(--t-fast) var(--ease); } .profile-ava:hover { box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 4px var(--accent-line); } .profile-ava:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5px var(--accent-line); } .profile-ava .avatar-img { transition: filter var(--t-fast) var(--ease); } .profile-ava:hover .avatar-img { filter: brightness(0.86); } .profile-ava-cam { position: absolute; inset-block-end: -6px; inset-inline-end: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-1); border: 1px solid var(--line-2); color: var(--ink-2); transition: color var(--t-fast) var(--ease); } .profile-ava:hover .profile-ava-cam { color: var(--accent-text); } .profile-ava-drop { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; border-radius: inherit; background: var(--accent-soft); border: 1.5px dashed var(--accent); color: var(--accent-text); font-size: 10.5px; font-weight: 600; line-height: 1.25; text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease); } .profile-ava.is-dragover .profile-ava-drop { opacity: 1; } .profile-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .profile-name { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-1); } .profile-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); } .profile-hint { margin: var(--s4) 0; padding-top: var(--s3); border-top: 1px solid var(--line-1); font-size: var(--fs-xs); color: var(--ink-3); } /* Editor */ .ava-editor { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s6); align-items: start; } .ava-main { min-width: 0; } .ava-stage { /* Canvas overlays painted over the photo itself, so they are theme-independent rather than surface tokens. */ --ava-shade: rgba(20, 20, 18, 0.6); --ava-ring: var(--accent); --ava-guide: rgba(255, 255, 255, 0.8); position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; overflow: hidden; touch-action: none; border-radius: var(--r-lg); border: 1px solid var(--line-1); background-color: var(--surface-sunken); background-image: conic-gradient(var(--surface-2) 25%, transparent 0 50%, var(--surface-2) 0 75%, transparent 0); background-size: 16px 16px; } .ava-stage:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ava-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; cursor: grab; } .ava-stage.is-grabbing .ava-canvas { cursor: grabbing; } .ava-editor[data-state="ready"] .ava-canvas { display: block; } .ava-drop { position: absolute; inset: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s5); text-align: center; cursor: var(--cursor-action, pointer); border: 1.5px dashed var(--line-2); border-radius: var(--r); background: var(--surface-1); transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .ava-drop:hover { border-color: var(--accent-line); } .ava-editor[data-state="ready"] .ava-drop { display: none; } .ava-stage.is-dragover .ava-drop { border-color: var(--accent); background: var(--accent-soft); } .ava-editor[data-state="ready"] .ava-stage.is-dragover::after { content: ""; position: absolute; inset: 0; border: 2px dashed var(--accent); border-radius: inherit; background: var(--accent-soft); } .ava-drop-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-1); color: var(--accent-text); } .ava-drop-title { font-weight: 600; color: var(--ink-1); } .ava-drop-hint { max-width: 230px; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; } .ava-err { position: absolute; inset-inline: 14px; inset-block-end: 14px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger-text); font-size: var(--fs-xs); } .ava-tools { display: flex; align-items: center; gap: var(--s2); max-width: 340px; margin-top: var(--s3); } .ava-editor:not([data-state="ready"]) .ava-tools { opacity: 0.45; pointer-events: none; } .ava-tools .btn-icon { width: 32px; height: 32px; min-width: 32px; } .ava-tools-sep { width: 1px; height: 20px; margin-inline: var(--s1); background: var(--line-1); } .ava-zoom { flex: 1; min-width: 0; height: 4px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: var(--r-pill); cursor: var(--cursor-action, pointer); background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--line-2) var(--fill, 0%)); } .ava-zoom::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--accent); box-shadow: var(--shadow-control); } .ava-zoom::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--accent); } .ava-zoom:focus-visible { outline: none; box-shadow: var(--focus-ring); } .ava-side { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; } .ava-side-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-1); } .ava-side-hint { margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); } .ava-pv-set { display: flex; align-items: flex-end; gap: var(--s4); padding: var(--s4); border-radius: var(--r); background: var(--surface-sunken); border: 1px solid var(--line-1); } .ava-pv { position: relative; display: inline-grid; flex-shrink: 0; overflow: hidden; border-radius: var(--r-sm); } .ava-pv.s96 { width: 96px; height: 96px; border-radius: var(--r-lg); } .ava-pv.s40 { width: 40px; height: 40px; border-radius: var(--r); } .ava-pv.s28 { width: 28px; height: 28px; border-radius: var(--r-sm); } .ava-pv.s22 { width: 22px; height: 22px; } .ava-pv.is-round { border-radius: 50%; } .ava-pv > canvas { display: none; width: 100%; height: 100%; } .ava-pv > .avatar { width: 100%; height: 100%; border-radius: inherit; } .ava-pv.s96 > .avatar { font-size: 30px; } .ava-pv.s40 > .avatar { font-size: 14px; } .ava-pv.s28 > .avatar { font-size: 10.5px; } .ava-pv.s22 > .avatar { font-size: 9px; } .ava-editor[data-state="ready"] .ava-pv > canvas { display: block; } .ava-editor[data-state="ready"] .ava-pv > .avatar { display: none; } .ava-mock { display: flex; flex-direction: column; gap: var(--s2); } .ava-mock-bar { display: flex; justify-content: flex-end; padding: 6px 8px; border-radius: var(--r); background: var(--surface-canvas); border: 1px solid var(--line-1); } .ava-mock-chip { display: inline-flex; align-items: center; gap: 8px; padding-block: 3px; padding-inline: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-1); background: var(--surface-1); } .ava-mock-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--line-1); } .ava-mock-lines { display: flex; flex-direction: column; min-width: 0; } .ava-mock-name { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-1); } .ava-mock-sub { overflow: hidden; font-size: 11px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; } .ava-replace { align-self: flex-start; } .ava-remove { margin-inline-end: auto; color: var(--danger-text); } @media (max-width: 680px) { .ava-editor { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .ava-stage, .ava-tools { max-width: none; } .ava-pv.s96 { width: 72px; height: 72px; } .profile-hero { gap: var(--s4); } } .sc-share-timer-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(16, 185, 129, 0.35); color: #34d399; font-size: 12px; font-weight: 700; font-family: var(--font-mono, monospace); } .sc-share-timer-pill.is-warn { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.4); color: #fbbf24; } .sc-share-timer-pill.is-danger { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); color: #f87171; } .sc-share-bar-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; background: rgba(30, 41, 59, 0.9); border: 1px solid rgba(148, 163, 184, 0.25); color: #e2e8f0; font-size: 11px; font-weight: 600; cursor: pointer; } .sc-share-bar-btn:hover { background: rgba(51, 65, 85, 0.95); color: #ffffff; } /* ---------- Stealth Call & Peer Audio Listener Studio UI (.sc-audio-*) ---------- */ .sc-flyout-sound { width: min(760px, 96vw) !important; background: linear-gradient(180deg, #15171e 0%, #101218 100%) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 10px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important; padding: 14px 16px 16px !important; } .sc-audio-head-badges { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; } .sc-audio-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .sc-audio-chip.is-cyan { background: rgba(14, 165, 233, 0.14); border: 1px solid rgba(56, 189, 248, 0.32); color: #7dd3fc; } .sc-audio-chip.is-emerald { background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(52, 211, 153, 0.32); color: #6ee7b7; } .sc-audio-chip.is-slate { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #cbd5e1; } /* Hero Banner */ .sc-audio-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 8px; background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(15, 23, 42, 0.85) 100%); border: 1px solid rgba(56, 189, 248, 0.35); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); margin-bottom: 10px; transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .sc-audio-hero.is-in-call { background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(6, 36, 29, 0.88) 100%); border-color: rgba(16, 185, 129, 0.55); box-shadow: 0 8px 28px rgba(16, 185, 129, 0.12); } .sc-audio-hero-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .sc-audio-orb { position: relative; width: 38px; height: 38px; border-radius: 10px; background: rgba(14, 165, 233, 0.18); border: 1px solid rgba(56, 189, 248, 0.4); color: #38bdf8; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sc-audio-orb svg { width: 18px; height: 18px; } .sc-audio-hero.is-in-call .sc-audio-orb { background: rgba(16, 185, 129, 0.22); border-color: rgba(52, 211, 153, 0.55); color: #34d399; box-shadow: 0 0 14px rgba(16, 185, 129, 0.28); } .sc-audio-hero-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; } .sc-audio-hero-title { font-size: 13.5px; font-weight: 700; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; } .sc-audio-hero-sub { font-size: 11.5px; color: #93c5fd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-audio-hero.is-in-call .sc-audio-hero-sub { color: #a7f3d0; } .sc-audio-hero-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .sc-audio-listen-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 7px; font-size: 12px; font-weight: 700; color: #ffffff; background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%); border: 1px solid rgba(125, 211, 252, 0.4); box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35); cursor: pointer; transition: all 140ms ease; white-space: nowrap; } .sc-audio-listen-btn:hover { filter: brightness(1.08); } .sc-audio-listen-btn.is-live { background: linear-gradient(180deg, #059669 0%, #047857 100%); border-color: rgba(110, 231, 183, 0.55); box-shadow: 0 0 16px rgba(16, 185, 129, 0.38); } .sc-audio-refresh-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 11px; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: #e2e8f0; background: rgba(30, 41, 59, 0.75); border: 1px solid rgba(148, 163, 184, 0.25); cursor: pointer; transition: all 140ms ease; white-space: nowrap; } .sc-audio-refresh-btn:hover { background: rgba(51, 65, 85, 0.9); border-color: rgba(148, 163, 184, 0.45); color: #ffffff; } /* 2-Column Segmented Control Deck */ .sc-audio-deck { display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; margin-bottom: 10px; } @media (max-width: 640px) { .sc-audio-deck { grid-template-columns: 1fr; } } .sc-audio-card { background: rgba(20, 22, 29, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; } .sc-audio-card-head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; } .sc-audio-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #0c0d12; padding: 3px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.06); } .sc-audio-seg-btn { height: 28px; padding: 0 6px; border-radius: 4px; border: 1px solid transparent; background: transparent; color: #94a3b8; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; white-space: nowrap; transition: all 130ms ease; } .sc-audio-seg-btn:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.04); } .sc-audio-seg-btn.is-selected { background: linear-gradient(180deg, rgba(2, 132, 199, 0.28) 0%, rgba(3, 105, 161, 0.42) 100%); border-color: rgba(56, 189, 248, 0.55); color: #ffffff; font-weight: 700; box-shadow: 0 1px 6px rgba(2, 132, 199, 0.25); } /* Studio Dual Level Meters + Volume Deck */ .sc-audio-mixer { display: grid; grid-template-columns: 1fr 185px; gap: 8px; margin-bottom: 10px; } @media (max-width: 640px) { .sc-audio-mixer { grid-template-columns: 1fr; } } .sc-audio-meters-box { background: rgba(20, 22, 29, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; gap: 8px; } .sc-audio-meter-row { display: grid; grid-template-columns: 122px 1fr 42px; align-items: center; gap: 10px; } .sc-audio-meter-label { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .sc-audio-meter-track { height: 8px; background: #090a0f; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 999px; overflow: hidden; position: relative; } .sc-audio-meter-val { font-size: 11px; font-family: var(--font-mono, monospace); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .sc-audio-vol-box { background: rgba(20, 22, 29, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .sc-audio-vol-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; color: #cbd5e1; } .sc-audio-vol-pct { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; color: #38bdf8; } /* Active Call Detector Table */ .sc-audio-table-wrap { max-height: 225px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.09); background: #0d0f14; border-radius: 8px; } .sc-audio-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; table-layout: fixed; } .sc-audio-table thead { position: sticky; top: 0; background: #171a22; color: #94a3b8; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid rgba(255, 255, 255, 0.09); z-index: 1; } .sc-audio-table th { padding: 8px 10px; white-space: nowrap; } .sc-audio-table td { padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .sc-audio-pid-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: #cbd5e1; font-family: var(--font-mono, monospace); font-size: 11px; } .sc-audio-app-cell { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: #f1f5f9; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .sc-audio-app-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .sc-audio-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; } .sc-audio-status-pill.is-live { background: rgba(16, 185, 129, 0.18); border: 1px solid rgba(52, 211, 153, 0.45); color: #6ee7b7; } .sc-audio-status-pill.is-idle { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #94a3b8; } @keyframes scAudioPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.88); } } .sc-audio-pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: scAudioPulse 1.5s ease-in-out infinite; }