Spaces:
Sleeping
Sleeping
| /* ============================================================ | |
| Viet AutoSub Editor – Dashboard Stylesheet | |
| Dark theme — Tương thích offline + HF Spaces online | |
| ============================================================ */ | |
| /* --- Tokens ------------------------------------------------- */ | |
| :root { | |
| --bg-base: #0a0e1a; | |
| --bg-surface: #111827; | |
| --bg-raised: #1a2236; | |
| --bg-input: #0f1629; | |
| --border: rgba(255,255,255,0.08); | |
| --border-focus: #6366f1; | |
| --text-primary: #f1f5f9; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| --accent: #6366f1; | |
| --accent-hover: #818cf8; | |
| --accent-glow: rgba(99,102,241,0.25); | |
| --success: #10b981; | |
| --success-bg: rgba(16,185,129,0.12); | |
| --danger: #ef4444; | |
| --danger-bg: rgba(239,68,68,0.10); | |
| --warning: #f59e0b; | |
| --warning-bg: rgba(245,158,11,0.12); | |
| --radius-sm: 8px; | |
| --radius: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 20px; | |
| --font-sans: 'Inter', system-ui, -apple-system, sans-serif; | |
| --font-mono: 'JetBrains Mono', ui-monospace, monospace; | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); | |
| --shadow: 0 4px 16px rgba(0,0,0,0.35); | |
| --shadow-lg: 0 12px 40px rgba(0,0,0,0.45); | |
| } | |
| /* --- Reset -------------------------------------------------- */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { font-size: 15px; -webkit-font-smoothing: antialiased; } | |
| body { | |
| font-family: var(--font-sans); | |
| background: var(--bg-base); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| line-height: 1.55; | |
| } | |
| /* --- Offline Banner ----------------------------------------- */ | |
| .offline-banner { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 20px; | |
| background: linear-gradient(90deg, rgba(245,158,11,0.18), rgba(245,158,11,0.08)); | |
| border-bottom: 1px solid rgba(245,158,11,0.3); | |
| color: #fde68a; | |
| font-size: 0.84rem; | |
| font-weight: 500; | |
| position: relative; | |
| z-index: 60; | |
| } | |
| .offline-banner-icon { | |
| width: 18px; | |
| height: 18px; | |
| flex-shrink: 0; | |
| color: #f59e0b; | |
| } | |
| .offline-banner-close { | |
| margin-left: auto; | |
| background: none; | |
| border: none; | |
| color: #fde68a; | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| opacity: 0.6; | |
| transition: opacity 0.2s; | |
| line-height: 1; | |
| } | |
| .offline-banner-close:hover { | |
| opacity: 1; | |
| background: rgba(245,158,11,0.15); | |
| } | |
| /* --- Top Nav ------------------------------------------------ */ | |
| .topbar { | |
| position: sticky; top: 0; z-index: 50; | |
| background: rgba(10,14,26,0.82); | |
| backdrop-filter: blur(16px) saturate(1.4); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .topbar-inner { | |
| max-width: 1320px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| height: 56px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .logo-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo-icon { width: 28px; height: 28px; color: var(--accent); } | |
| .logo-text { | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| background: linear-gradient(135deg, #818cf8, #6366f1); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .topbar-right { display: flex; align-items: center; gap: 8px; } | |
| /* --- Badges ------------------------------------------------- */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| font-size: 0.73rem; | |
| font-weight: 600; | |
| letter-spacing: 0.02em; | |
| text-transform: uppercase; | |
| transition: all 0.3s; | |
| } | |
| /* Online state (green) */ | |
| .badge-env.badge-online, | |
| .badge-env:not(.badge-offline) { | |
| background: rgba(16,185,129,0.12); | |
| color: #6ee7b7; | |
| border: 1px solid rgba(16,185,129,0.25); | |
| } | |
| /* Offline state (amber/red) */ | |
| .badge-env.badge-offline { | |
| background: rgba(239,68,68,0.12); | |
| color: #fca5a5; | |
| border: 1px solid rgba(239,68,68,0.25); | |
| } | |
| .badge-model { | |
| background: rgba(99,102,241,0.12); | |
| color: #a5b4fc; | |
| border: 1px solid rgba(99,102,241,0.25); | |
| font-family: var(--font-mono); | |
| } | |
| .pulse-dot { | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .pulse-dot.pulse-online { | |
| background: var(--success); | |
| } | |
| .pulse-dot.pulse-offline { | |
| background: var(--danger); | |
| animation: pulse-fast 1.2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.35; } | |
| } | |
| @keyframes pulse-fast { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.25; } | |
| } | |
| /* --- Main Layout -------------------------------------------- */ | |
| .main { | |
| max-width: 1320px; | |
| margin: 0 auto; | |
| padding: 20px 24px 40px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| /* --- Step Indicator ----------------------------------------- */ | |
| .steps { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0; | |
| padding: 14px 0 4px; | |
| } | |
| .step { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| opacity: 0.38; | |
| transition: opacity 0.3s; | |
| } | |
| .step.active { opacity: 1; } | |
| .step.done { opacity: 0.7; } | |
| .step-num { | |
| width: 28px; height: 28px; | |
| display: grid; | |
| place-items: center; | |
| border-radius: 50%; | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| background: var(--bg-raised); | |
| border: 1.5px solid var(--border); | |
| color: var(--text-secondary); | |
| transition: all 0.3s; | |
| } | |
| .step.active .step-num { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: #fff; | |
| box-shadow: 0 0 12px var(--accent-glow); | |
| } | |
| .step.done .step-num { | |
| background: var(--success); | |
| border-color: var(--success); | |
| color: #fff; | |
| } | |
| .step-label { | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| } | |
| .step.active .step-label { color: var(--text-primary); } | |
| .step-line { | |
| width: 40px; | |
| height: 2px; | |
| background: var(--border); | |
| margin: 0 6px; | |
| flex-shrink: 0; | |
| } | |
| /* --- Panel (card) ------------------------------------------- */ | |
| .panel { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| } | |
| .panel-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 14px 18px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .panel-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .icon-sm { width: 16px; height: 16px; flex-shrink: 0; } | |
| .icon-xs { width: 14px; height: 14px; } | |
| .icon-btn { width: 16px; height: 16px; flex-shrink: 0; } | |
| /* --- Upload Panel ------------------------------------------- */ | |
| .upload-panel { padding: 0; } | |
| .drop-zone { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 36px 24px; | |
| cursor: pointer; | |
| border: 2px dashed transparent; | |
| transition: all 0.25s; | |
| background: linear-gradient(180deg, rgba(99,102,241,0.04), transparent); | |
| } | |
| .drop-zone.drag-over { | |
| border-color: var(--accent); | |
| background: rgba(99,102,241,0.08); | |
| } | |
| .drop-icon { width: 44px; height: 44px; color: var(--accent); opacity: 0.7; } | |
| .drop-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .drop-hint { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| .file-info { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 18px; | |
| background: rgba(99,102,241,0.06); | |
| border-top: 1px solid var(--border); | |
| } | |
| .file-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| } | |
| .file-icon { width: 16px; height: 16px; color: var(--accent); } | |
| .file-size { | |
| color: var(--text-muted); | |
| font-size: 0.78rem; | |
| font-family: var(--font-mono); | |
| } | |
| /* --- Two-column Grid ---------------------------------------- */ | |
| .grid-two { | |
| display: grid; | |
| grid-template-columns: 1.3fr 0.7fr; | |
| gap: 18px; | |
| } | |
| @media (max-width: 960px) { | |
| .grid-two { grid-template-columns: 1fr; } | |
| .steps { flex-wrap: wrap; gap: 4px; } | |
| .step-label { display: none; } | |
| } | |
| /* --- Video -------------------------------------------------- */ | |
| .video-panel .panel-head + * { padding: 0; } | |
| .video-wrap { | |
| position: relative; | |
| background: #000; | |
| aspect-ratio: 16/9; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .video-wrap video { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| display: none; | |
| } | |
| .video-wrap video.has-src { display: block; } | |
| .video-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| } | |
| .video-placeholder.hidden { display: none; } | |
| .placeholder-icon { width: 56px; height: 56px; opacity: 0.3; } | |
| /* --- Action Panel ------------------------------------------- */ | |
| .action-panel { display: flex; flex-direction: column; } | |
| .action-stack { | |
| padding: 18px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| flex: 1; | |
| } | |
| .divider { | |
| border: none; | |
| border-top: 1px solid var(--border); | |
| margin: 2px 0; | |
| } | |
| .export-title { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| margin-bottom: 6px; | |
| } | |
| /* --- Buttons ------------------------------------------------ */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| font-family: var(--font-sans); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 10px 16px; | |
| cursor: pointer; | |
| background: var(--bg-raised); | |
| color: var(--text-primary); | |
| transition: all 0.2s ease; | |
| white-space: nowrap; | |
| } | |
| .btn:hover:not(:disabled) { | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .btn:active:not(:disabled) { | |
| transform: translateY(0); | |
| } | |
| .btn:disabled { | |
| opacity: 0.35; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .btn-primary { | |
| background: var(--accent); | |
| border-color: transparent; | |
| color: #fff; | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| background: var(--accent-hover); | |
| box-shadow: 0 4px 20px var(--accent-glow); | |
| } | |
| .btn-success { | |
| background: var(--success); | |
| border-color: transparent; | |
| color: #fff; | |
| } | |
| .btn-success:hover:not(:disabled) { | |
| background: #34d399; | |
| box-shadow: 0 4px 20px rgba(16,185,129,0.3); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border-color: var(--border); | |
| } | |
| .btn-outline:hover:not(:disabled) { | |
| background: var(--bg-raised); | |
| border-color: rgba(255,255,255,0.15); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| padding: 6px 10px; | |
| } | |
| .btn-ghost:hover:not(:disabled) { | |
| color: var(--text-primary); | |
| background: rgba(255,255,255,0.05); | |
| } | |
| .btn-danger-sm { | |
| background: var(--danger-bg); | |
| border: 1px solid rgba(239,68,68,0.25); | |
| color: #fca5a5; | |
| padding: 6px 10px; | |
| font-size: 0.78rem; | |
| } | |
| .btn-danger-sm:hover:not(:disabled) { | |
| background: rgba(239,68,68,0.2); | |
| } | |
| .btn-sm { padding: 6px 12px; font-size: 0.8rem; } | |
| .btn-lg { padding: 12px 20px; font-size: 0.92rem; } | |
| .btn-full { width: 100%; } | |
| .btn-row { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| /* --- Progress ----------------------------------------------- */ | |
| .progress-wrap { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background: var(--bg-raised); | |
| border-radius: 99px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| width: 0%; | |
| background: linear-gradient(90deg, var(--accent), #818cf8); | |
| border-radius: 99px; | |
| transition: width 0.4s ease; | |
| animation: progressPulse 1.5s ease-in-out infinite; | |
| } | |
| @keyframes progressPulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.6; } | |
| } | |
| .progress-text { | |
| font-size: 0.78rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| /* --- Status Box --------------------------------------------- */ | |
| .status-box { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 14px; | |
| border-radius: var(--radius); | |
| font-size: 0.83rem; | |
| font-weight: 500; | |
| transition: all 0.3s; | |
| } | |
| .status-icon { width: 16px; height: 16px; flex-shrink: 0; } | |
| .status-idle { | |
| background: rgba(255,255,255,0.03); | |
| color: var(--text-secondary); | |
| } | |
| .status-loading { | |
| background: var(--warning-bg); | |
| color: #fde68a; | |
| } | |
| .status-success { | |
| background: var(--success-bg); | |
| color: #6ee7b7; | |
| } | |
| .status-error { | |
| background: var(--danger-bg); | |
| color: #fca5a5; | |
| } | |
| /* --- Download Links ----------------------------------------- */ | |
| .download-group { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .dl-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 16px; | |
| border-radius: var(--radius); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all 0.2s; | |
| } | |
| .dl-srt { | |
| background: rgba(99,102,241,0.12); | |
| color: #a5b4fc; | |
| border: 1px solid rgba(99,102,241,0.25); | |
| } | |
| .dl-srt:hover { background: rgba(99,102,241,0.2); } | |
| .dl-mp4 { | |
| background: rgba(16,185,129,0.12); | |
| color: #6ee7b7; | |
| border: 1px solid rgba(16,185,129,0.25); | |
| } | |
| .dl-mp4:hover { background: rgba(16,185,129,0.2); } | |
| .dl-link.disabled { pointer-events: none; opacity: 0.35; } | |
| /* --- Table -------------------------------------------------- */ | |
| .table-panel { } | |
| .table-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .seg-count { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| background: var(--bg-raised); | |
| padding: 3px 10px; | |
| border-radius: 999px; | |
| } | |
| .table-scroll { | |
| overflow-x: auto; | |
| max-height: 480px; | |
| overflow-y: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| min-width: 720px; | |
| } | |
| thead { position: sticky; top: 0; z-index: 5; } | |
| th { | |
| text-align: left; | |
| padding: 10px 14px; | |
| font-size: 0.73rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--text-muted); | |
| background: var(--bg-raised); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| td { | |
| padding: 8px 14px; | |
| vertical-align: top; | |
| border-bottom: 1px solid var(--border); | |
| font-size: 0.85rem; | |
| } | |
| tr:last-child td { border-bottom: none; } | |
| tr:hover td { background: rgba(255,255,255,0.02); } | |
| .col-idx { width: 48px; text-align: center; } | |
| .col-time { width: 155px; } | |
| .col-text { } | |
| .col-act { width: 72px; text-align: center; } | |
| /* Row index number */ | |
| td.idx-cell { | |
| text-align: center; | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| } | |
| /* --- Table Inputs ------------------------------------------- */ | |
| .time-input, .text-input { | |
| width: 100%; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| background: var(--bg-input); | |
| color: var(--text-primary); | |
| padding: 8px 10px; | |
| font-family: var(--font-mono); | |
| font-size: 0.82rem; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .time-input:focus, .text-input:focus { | |
| outline: none; | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px var(--accent-glow); | |
| } | |
| .text-input { | |
| font-family: var(--font-sans); | |
| resize: vertical; | |
| min-height: 54px; | |
| line-height: 1.45; | |
| } | |
| /* --- Empty State -------------------------------------------- */ | |
| .empty-row td { padding: 40px 20px; } | |
| .empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 12px; | |
| color: var(--text-muted); | |
| text-align: center; | |
| } | |
| .empty-icon { width: 48px; height: 48px; opacity: 0.35; } | |
| .empty-state p { font-size: 0.85rem; max-width: 380px; } | |
| /* --- Footer ------------------------------------------------- */ | |
| .footer { | |
| text-align: center; | |
| padding: 20px 24px; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| border-top: 1px solid var(--border); | |
| } | |
| /* --- Utilities ---------------------------------------------- */ | |
| [hidden] { display: none ; } | |
| /* --- Scrollbar ---------------------------------------------- */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 99px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); } | |
| /* --- Spinner for loading button ----------------------------- */ | |
| .btn-loading { | |
| position: relative; | |
| pointer-events: none; | |
| color: transparent ; | |
| } | |
| .btn-loading::after { | |
| content: ''; | |
| position: absolute; | |
| width: 18px; height: 18px; | |
| border: 2px solid rgba(255,255,255,0.3); | |
| border-top-color: #fff; | |
| border-radius: 50%; | |
| animation: spin 0.6s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| /* --- Mode Selector ------------------------------------------ */ | |
| .mode-selector { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .mode-label { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| } | |
| .mode-toggle { | |
| display: flex; | |
| gap: 6px; | |
| background: var(--bg-base); | |
| border-radius: var(--radius); | |
| padding: 4px; | |
| border: 1px solid var(--border); | |
| } | |
| .mode-btn { | |
| flex: 1; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| padding: 8px 12px; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: var(--font-sans); | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .mode-btn:hover:not(.active) { | |
| color: var(--text-primary); | |
| background: rgba(255,255,255,0.04); | |
| } | |
| .mode-btn.active { | |
| background: var(--accent); | |
| color: #fff; | |
| box-shadow: 0 2px 8px var(--accent-glow); | |
| } | |
| .mode-btn .icon-btn { | |
| width: 14px; | |
| height: 14px; | |
| } | |
| .mode-hint { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| line-height: 1.4; | |
| margin: 0; | |
| } | |
| /* --- Coverage Bar ------------------------------------------- */ | |
| .coverage-bar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| padding: 10px 14px; | |
| background: rgba(255,255,255,0.02); | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| } | |
| .coverage-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .coverage-label { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .coverage-pct { | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| font-family: var(--font-mono); | |
| color: var(--text-primary); | |
| } | |
| .coverage-track { | |
| height: 6px; | |
| background: var(--bg-raised); | |
| border-radius: 99px; | |
| overflow: hidden; | |
| } | |
| .coverage-fill { | |
| height: 100%; | |
| width: 0%; | |
| border-radius: 99px; | |
| transition: width 0.6s ease, background 0.3s; | |
| } | |
| .coverage-fill.cov-high { | |
| background: linear-gradient(90deg, var(--success), #34d399); | |
| } | |
| .coverage-fill.cov-mid { | |
| background: linear-gradient(90deg, var(--warning), #fbbf24); | |
| } | |
| .coverage-fill.cov-low { | |
| background: linear-gradient(90deg, var(--danger), #f87171); | |
| } | |
| /* --- Responsive tweaks -------------------------------------- */ | |
| @media (max-width: 640px) { | |
| .main { padding: 12px 12px 32px; gap: 12px; } | |
| .topbar-inner { padding: 0 14px; } | |
| .drop-zone { padding: 24px 16px; } | |
| .action-stack { padding: 14px; } | |
| .btn-lg { padding: 10px 14px; font-size: 0.85rem; } | |
| table { min-width: 580px; } | |
| .panel-head { padding: 12px 14px; } | |
| .offline-banner { padding: 8px 14px; font-size: 0.78rem; } | |
| .mode-btn { padding: 6px 8px; font-size: 0.78rem; } | |
| } | |