/* ============================================================ LegalRoms — design tokens (light / dark / system) Colors are CSS custom properties only. The effective palette is selected by a concrete data-theme on (set before first paint by the inline script in index.html; see js/theme.js). A single token change re-themes the whole app — no ::deep, no per-component overrides. ============================================================ */ :root { /* ---- Theme-invariant colors (work on both palettes) ---- */ --accent: #7c6cff; --accent-2: #5b8cff; --accent-grad: linear-gradient(135deg, #7c6cff, #5b8cff); --danger: #ff5c6c; --star: #f5c451; --on-accent: #fff; /* text/icon on accent-filled surfaces */ --accent-shadow: rgba(124, 108, 255, .35); --focus-ring: rgba(124, 108, 255, .30); --overlay: rgba(0, 0, 0, .55); /* dialog backdrop */ /* translucent fills — render over --surface, legible in both themes */ --accent-soft: rgba(124, 108, 255, .16); --row-selected: rgba(124, 108, 255, .12); --danger-soft: rgba(255, 92, 108, .14); --danger-soft-2: rgba(255, 92, 108, .22); --danger-soft-badge: rgba(255, 92, 108, .16); --danger-border: rgba(255, 92, 108, .32); --info-soft: rgba(91, 140, 255, .14); --info-border: rgba(91, 140, 255, .35); --queued-soft: rgba(245, 196, 81, .14); --queued-border: rgba(245, 196, 81, .32); --success-soft: rgba(70, 211, 154, .14); --success-border: rgba(70, 211, 154, .32); --teal-soft: rgba(45, 212, 191, .16); --chip-index-bg: rgba(91, 140, 255, .16); --chip-download-bg: rgba(124, 108, 255, .16); /* ---- Sizing / type (theme-invariant) ---- */ --radius: 14px; --radius-sm: 9px; --shadow: 0 10px 30px rgba(0, 0, 0, .35); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji"; --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; /* font-size scale */ --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-md: 0.92rem; --fs-lg: 1.05rem; --fs-xl: 1.35rem; --fs-2xl: 1.9rem; /* spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; } /* ---- Dark palette (the default when no/unknown data-theme, and explicit dark) ---- */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0e0f13; --bg-grad: radial-gradient(1200px 600px at 80% -10%, rgba(124, 108, 255, .12), transparent 60%), var(--bg); --surface: #16181f; --surface-2: #1d2029; --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .16); --text: #e7e9ef; --text-muted: #939aab; --shadow: 0 10px 30px rgba(0, 0, 0, .35); --app-bar-bg: rgba(14, 15, 19, .8); --row-hover: rgba(255, 255, 255, .025); --accent-soft-text: #fff; /* on the dim purple fill over a dark surface */ --success: #46d39a; --teal: #2dd4bf; } /* ---- Light palette ---- */ :root[data-theme="light"] { color-scheme: light; --bg: #f6f7f9; --bg-grad: radial-gradient(1200px 600px at 80% -10%, rgba(124, 108, 255, .10), transparent 60%), var(--bg); --surface: #ffffff; --surface-2: #eef0f4; --border: rgba(17, 20, 28, .18); /* visible against #fff / #eef0f4 fills */ --border-strong: rgba(17, 20, 28, .32); --text: #1a1d24; --text-muted: #5b6472; --shadow: 0 10px 30px rgba(20, 24, 40, .12); --app-bar-bg: rgba(246, 247, 249, .8); --row-hover: rgba(17, 20, 28, .035); --accent-soft-text: #5a49e0; /* darker accent for contrast on the pale fill */ --success: #0f9b6c; --teal: #0d9488; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-grad); background-attachment: fixed; color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; } a { color: inherit; text-decoration: none; } h1:focus { outline: none; } /* ---------- App shell + top bar ---------- */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .app-bar { position: sticky; top: 0; z-index: 20; background: var(--app-bar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .app-bar__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 62px; display: flex; align-items: center; gap: 26px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; } .brand__logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-grad); color: var(--on-accent); font-size: 1.1rem; box-shadow: 0 6px 16px var(--accent-shadow); } .brand__name span { color: var(--accent); } .app-nav { display: flex; gap: 4px; margin-left: 8px; } .app-nav__link { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; color: var(--text-muted); font-weight: 600; font-size: .94rem; transition: background .15s, color .15s; } .app-nav__link:hover { background: var(--surface-2); color: var(--text); } .app-nav__link.active { background: var(--accent-soft); color: var(--accent-soft-text); } .app-bar__ext { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: .88rem; font-weight: 600; } .app-bar__ext:hover { color: var(--text); } button.app-bar__ext { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: .88rem; font-weight: 600; } .app-bar__right form { display: flex; align-items: center; } /* right-side cluster (theme toggle + external link) */ .app-bar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .app-bar__toggle { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 1.05rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .app-bar__toggle:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } .app-main { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 28px 20px 60px; } /* ---------- Hero ---------- */ .hero { margin-bottom: 22px; } .hero h1 { font-size: var(--fs-2xl); } .hero p { margin: 8px 0 0; color: var(--text-muted); max-width: 60ch; } /* ---------- Panels ---------- */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 20px; } /* ---------- Search form ---------- */ .search-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .field { display: flex; flex-direction: column; gap: 6px; } .field--grow { flex: 1 1 240px; min-width: 0; } .field--narrow { width: 116px; flex: 0 0 auto; } .field label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; } input, select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); font-size: .95rem; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } input { width: 100%; } select { min-width: 130px; } input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } option { background: var(--surface-2); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 18px; font-size: .94rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: transform .08s, background .15s, border-color .15s, opacity .15s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn--sm { padding: 7px 11px; font-size: .85rem; } .btn--primary { background: var(--accent-grad); color: var(--on-accent); box-shadow: 0 6px 16px var(--accent-shadow); } .btn--primary:hover:not(:disabled) { filter: brightness(1.08); } .btn--ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn--ghost:hover:not(:disabled) { border-color: var(--border-strong); } .btn--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); } .btn--danger:hover:not(:disabled) { background: var(--danger-soft-2); } /* Visible keyboard focus ring for interactive controls (inputs/selects style their own on :focus). */ .btn:focus-visible, .app-bar__toggle:focus-visible, .app-nav__link:focus-visible, .app-bar__ext:focus-visible, .ss__control:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } /* ---------- States ---------- */ .state { display: flex; align-items: center; gap: 10px; padding: 28px; color: var(--text-muted); justify-content: center; font-size: .96rem; } .state--error { color: var(--danger); } .state--muted { color: var(--text-muted); } .spinner { width: 18px; height: 18px; border: 2.5px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .results-meta { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--sp-1) 2px var(--sp-3); } /* ---------- Table ---------- */ .table-wrap { overflow-x: auto; } .panel.table-wrap { padding: 6px; } .data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); } .data-table thead th { text-align: left; padding: 10px 14px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 700; } .data-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--row-hover); } .col-actions, .row-actions { text-align: right; white-space: nowrap; width: 1%; } .row-actions > * { vertical-align: middle; } .row-actions > * + * { margin-left: 6px; } /* keep system names on one line (e.g. "Neo Geo Pocket") instead of wrapping */ .col-system { white-space: nowrap; } .title-link { font-weight: 600; } .title-link:hover { color: var(--accent); } .muted { color: var(--text-muted); } .mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: .88em; } .hash { color: var(--text-muted); font-size: .76rem; margin-top: 4px; font-family: ui-monospace, monospace; word-break: break-all; } /* ---------- Badges / pills ---------- */ .badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 5px; font-size: .68rem; font-weight: 800; background: var(--danger-soft-badge); color: var(--danger); border: 1px solid var(--danger-border); vertical-align: middle; } .badge--extra-full { min-width: auto; height: auto; padding: 3px 9px; font-size: .72rem; margin: 0 6px 0 0; } .pill { display: inline-block; padding: 2px 9px; margin: 2px 4px 2px 0; border-radius: 999px; font-size: .76rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); } .rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--text); } .rating .bi { color: var(--star); font-size: .85em; } .rating--lg { font-size: 1.1rem; } /* ---------- Pager ---------- */ .pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; } .pager__label { color: var(--text-muted); font-size: .9rem; } /* ---------- Detail ---------- */ .back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-weight: 600; margin-bottom: 16px; } .back-link:hover { color: var(--text); } .detail-head__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .detail-head h1 { font-size: 1.6rem; } .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 18px; } .meta-key { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin-bottom: 5px; } .meta-val { font-size: 1rem; } .detail-extras { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .section-title { font-size: 1.1rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .section-title .count { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px; padding: 1px 10px; font-size: .8rem; font-weight: 600; } /* ---------- Loading splash + error UI (pre-Blazor / framework) ---------- */ .loading-progress { position: fixed; inset: 0; margin: auto; width: 9rem; height: 9rem; } .loading-progress circle { fill: none; stroke: var(--border-strong); stroke-width: 0.5rem; transform-origin: 50% 50%; } .loading-progress circle:last-child { stroke: var(--accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray .1s ease-in-out; } .loading-progress-text { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } #blazor-error-ui { background: #2a1216; color: #ffd7dc; border-top: 1px solid var(--danger); bottom: 0; box-shadow: 0 -2px 12px rgba(0, 0, 0, .4); display: none; left: 0; padding: 0.8rem 1.4rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.75rem; } #blazor-error-ui .reload { color: #fff; text-decoration: underline; } /* ---------- Catalog: build bar, sorting, selection, status ---------- */ .build-bar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .build-note { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .88rem; } .build-note a { color: var(--accent); } .data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .data-table th.sortable:hover { color: var(--text); } .data-table th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--text); } .col-check { width: 34px; text-align: center; } .col-check input, .data-table td.col-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .data-table tbody tr.row-selected { background: var(--row-selected); } .status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; border: 1px solid var(--border); } .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status--downloaded { color: var(--success); background: var(--success-soft); border-color: var(--success-border); } .status--downloading { color: var(--accent-2); background: var(--info-soft); border-color: var(--info-border); } .status--downloading::before { animation: pulse 1s ease-in-out infinite; } .status--queued { color: var(--star); background: var(--queued-soft); border-color: var(--queued-border); } .status--notdownloaded { color: var(--text-muted); border-style: dashed; } .status--notdownloaded::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); } .status--ondevice { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); } .status--ondevice::before { display: none; } @keyframes pulse { 50% { opacity: .3; } } /* sticky bulk action bar */ .action-bar { position: sticky; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); } .action-bar > span:first-child { font-weight: 700; } /* ---------- Jobs page ---------- */ .chip { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; } .chip--index { background: var(--chip-index-bg); color: var(--accent-2); } .chip--download { background: var(--chip-download-bg); color: var(--accent); } .chip--upload { background: var(--teal-soft); color: var(--teal); } .chip--devicedelete { background: var(--danger-soft); color: var(--danger); } .chip--devicescan { background: var(--accent-soft); color: var(--accent); } .chip--archivereconvert { background: var(--teal-soft); color: var(--teal); } /* toggle switch */ .toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-transform: none; letter-spacing: normal; font-size: var(--fs-md); color: var(--text); font-weight: 500; user-select: none; } .toolbar__toggle { align-self: flex-end; height: 42px; } .toggle input { display: none; } .toggle__track { width: 40px; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); position: relative; transition: background .15s, border-color .15s; flex: 0 0 auto; } .toggle__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform .15s, background .15s; } .toggle input:checked + .toggle__track { background: var(--accent); border-color: var(--accent); } .toggle input:checked + .toggle__track .toggle__thumb { transform: translateX(18px); background: var(--on-accent); } .form-stack { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 480px; } .form-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; } .status-line { margin-bottom: var(--sp-2); } .job-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .job-card__title { display: flex; align-items: center; gap: 10px; } .job-label { font-weight: 600; } .job-card__right { display: flex; align-items: center; gap: 10px; } .job-card__meta { margin-top: 10px; font-size: .85rem; display: flex; gap: 6px; flex-wrap: wrap; } .status--running { color: var(--accent-2); background: var(--info-soft); border-color: var(--info-border); } .status--running::before { animation: pulse 1s ease-in-out infinite; } .status--completed { color: var(--success); background: var(--success-soft); border-color: var(--success-border); } .status--failed { color: var(--danger); } .status--cancelled { color: var(--text-muted); } .progress { margin-top: 12px; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .progress__bar { height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width .3s ease; } .progress__bar--active { background-size: 200% 100%; animation: shimmer 1.2s linear infinite; background-image: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)); } @keyframes shimmer { to { background-position: -200% 0; } } /* ---------- Layout helpers ---------- */ .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-5); } .form-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .form-row .ss { min-width: 140px; flex: 1 1 0; } .toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; } .toolbar .ss { min-width: 150px; } /* Desktop: keep the Catalog filter toolbar + the Index build/clear rows on a single line. */ @media (min-width: 860px) { .toolbar { flex-wrap: nowrap; } .toolbar .field--grow { min-width: 0; } .form-row { flex-wrap: nowrap; } } .small { font-size: var(--fs-sm); } .hero--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .hero__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .req { color: var(--accent); } .spinner--xs { width: 13px; height: 13px; border-width: 2px; } /* ---------- Searchable select (combobox) ---------- */ .ss { position: relative; min-width: 160px; } .ss__control { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-md); cursor: pointer; transition: border-color .15s, box-shadow .15s; } .ss--open .ss__control { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .ss__placeholder { color: var(--text-muted); } .ss__chev { color: var(--text-muted); font-size: var(--fs-xs); transition: transform .15s; } .ss--open .ss__chev { transform: rotate(180deg); } .ss__control:disabled { opacity: .5; cursor: not-allowed; } .ss__backdrop { position: fixed; inset: 0; z-index: 40; } .ss__panel { position: absolute; z-index: 41; top: calc(100% + 4px); left: 0; right: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; } .ss__searchwrap { display: flex; align-items: center; gap: var(--sp-2); padding: 8px var(--sp-3); border-bottom: 1px solid var(--border); color: var(--text-muted); } .ss__search { background: transparent; border: none; outline: none; color: var(--text); width: 100%; font-size: var(--fs-md); padding: 6px 4px; min-height: 24px; } .ss__clear { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 0 2px; font-size: var(--fs-sm); } .ss__clear:hover { color: var(--text); } .ss__list { list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; } .ss__opt { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: var(--fs-md); } .ss__opt:hover, .ss__opt--hl { background: var(--surface-2); } .ss__opt--sel { background: var(--accent-soft); color: var(--accent-soft-text); } .ss__empty { padding: 10px; color: var(--text-muted); font-size: var(--fs-sm); text-align: center; } /* ---------- Toasts (snackbars) ---------- */ /* Top-right, below the app bar — bottom anchoring was getting clipped on some viewports. */ .snack-host { position: fixed; right: var(--sp-5); top: 76px; z-index: 90; display: flex; flex-direction: column; gap: var(--sp-2); max-width: 360px; pointer-events: none; } .snack-host .snack { pointer-events: auto; } .snack { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--border-strong); border-left-width: 3px; border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 12px 14px; font-size: var(--fs-sm); animation: toastin .2s ease; } @keyframes toastin { from { opacity: 0; transform: translateY(8px); } } .snack__icon { font-size: var(--fs-lg); } .snack__msg { flex: 1; } .snack__close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; font-size: var(--fs-sm); } .snack__close:hover { color: var(--text); } .snack--success { border-left-color: var(--success); } .snack--success .snack__icon { color: var(--success); } .snack--error { border-left-color: var(--danger); } .snack--error .snack__icon { color: var(--danger); } .snack--info { border-left-color: var(--accent-2); } .snack--info .snack__icon { color: var(--accent-2); } /* ---------- Modal dialog ---------- */ .dialog-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 70; backdrop-filter: blur(2px); } .dialog { position: fixed; z-index: 71; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-5); animation: toastin .15s ease; } .dialog__head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 700; } .dialog__head .bi { color: var(--accent); } .dialog__icon--danger { color: var(--danger) !important; } .dialog__body { margin: var(--sp-3) 0 var(--sp-5); color: var(--text-muted); line-height: 1.5; } .dialog__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); } /* ---------- Jobs list ---------- */ .job-list { padding: 0; } .job { border-bottom: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); } .job:last-child { border-bottom: none; } .job__row { display: flex; align-items: center; gap: var(--sp-3); } .job__expand { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; font-size: var(--fs-md); } .job__expand--hidden { visibility: hidden; } .job__label { font-weight: 600; min-width: 120px; } .job__progress { flex: 1; display: flex; align-items: center; gap: var(--sp-3); min-width: 160px; } .job__progress .progress { flex: 1; margin: 0; } .job__counts { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; } .job__actions { margin-left: auto; } .job__current { margin: var(--sp-2) 0 0 30px; font-size: var(--fs-sm); color: var(--text-muted); } .job__items { margin: var(--sp-3) 0 0 30px; display: flex; flex-wrap: wrap; gap: 6px; } .job-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: var(--fs-xs); font-family: var(--mono); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); } .job-item--done { color: var(--success); border-color: var(--success-border); } .job-item--failed { color: var(--danger); border-color: var(--danger-border); } .job-item--downloading { color: var(--accent-2); border-color: var(--info-border); } .job-item--skipped { color: var(--text-muted); } .job-item__progress { margin-left: 4px; opacity: .85; font-variant-numeric: tabular-nums; } .job-item__error { margin-left: 6px; color: var(--danger); opacity: .9; } .job-item__cancel { margin-left: 4px; background: none; border: none; padding: 0; cursor: pointer; color: inherit; line-height: 1; opacity: .75; } .job-item__cancel:hover { color: var(--danger); opacity: 1; } .job__error { margin: var(--sp-2) 0 0 30px; font-size: var(--fs-sm); color: var(--danger); display: inline-flex; align-items: center; gap: 6px; } /* ---------- Responsive ---------- */ @media (max-width: 640px) { .app-nav__link span, .app-bar__ext span { display: none; } .app-bar__inner { gap: 14px; } .hero h1 { font-size: var(--fs-xl); } .btn { padding: 9px 14px; } .job__progress { display: none; } } /* Mobile: stack each table row into a labelled card so there's no horizontal scroll. */ @media (max-width: 720px) { .table-wrap { overflow-x: visible; } .panel.table-wrap { padding: 10px; } .data-table thead { display: none; } .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; } .data-table tbody tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; padding: 4px 2px; background: var(--surface-2); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right; border: none; padding: 7px 12px; } .data-table tbody td::before { content: attr(data-label); color: var(--text-muted); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; text-align: left; flex: 0 0 auto; } .data-table tbody td.col-check { justify-content: flex-start; } .data-table tbody td.col-check::before, .data-table tbody td.row-actions::before { content: none; } .data-table tbody td.row-actions { justify-content: flex-end; } .data-table tbody td.col-system { white-space: normal; } .col-actions { width: auto; } }