1534 lines
35 KiB
CSS
1534 lines
35 KiB
CSS
/* =============================================================
|
|
VideoPress — Main Stylesheet
|
|
WCAG 2.2 AA Compliant | Dark & Light Mode | 4.5:1 min contrast
|
|
============================================================= */
|
|
|
|
/* ── Custom Properties ─────────────────────────────────────── */
|
|
:root {
|
|
/* Fonts */
|
|
--font-display: 'Courier New', 'Lucida Console', monospace;
|
|
--font-body: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--font-mono: 'Courier New', Courier, monospace;
|
|
|
|
/* Spacing scale */
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 40px;
|
|
--space-2xl: 64px;
|
|
|
|
/* Border radius */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 14px;
|
|
--radius-pill: 999px;
|
|
|
|
/* Transitions */
|
|
--transition-fast: 140ms ease;
|
|
--transition-base: 240ms ease;
|
|
|
|
/* Focus ring */
|
|
--focus-ring: 0 0 0 3px var(--color-focus);
|
|
}
|
|
|
|
/* ── LIGHT MODE ─────────────────────────────────────────────── */
|
|
:root, [data-theme="light"] {
|
|
color-scheme: light;
|
|
|
|
/* Backgrounds */
|
|
--bg-page: #f0f0ed;
|
|
--bg-card: #ffffff;
|
|
--bg-card2: #f7f7f5;
|
|
--bg-header: #1a1a18;
|
|
--bg-footer: #1a1a18;
|
|
--bg-input: #ffffff;
|
|
--bg-table-head: #1a1a18;
|
|
--bg-row-alt: #f5f5f2;
|
|
--bg-row-sel: #e8f0fe;
|
|
--bg-modal: rgba(0,0,0,0.55);
|
|
--bg-progress-track: #e2e2df;
|
|
--bg-progress-fill: #1d6f42;
|
|
--bg-progress-file: #f0f0ed;
|
|
|
|
/* Text — all meet 4.5:1 on their respective backgrounds */
|
|
--text-primary: #111110; /* 17:1 on white */
|
|
--text-secondary: #3d3d3a; /* 9.5:1 on white */
|
|
--text-muted: #595955; /* 5.8:1 on white */
|
|
--text-inverse: #ffffff;
|
|
--text-header: #f5f5f2;
|
|
--text-link: #1a56db; /* 5.5:1 on white */
|
|
--text-danger: #9b1b1b; /* 6.2:1 on white */
|
|
--text-success: #166534; /* 5.1:1 on white */
|
|
--text-code: #c7254e;
|
|
|
|
/* Borders */
|
|
--border-base: #c8c8c4;
|
|
--border-strong: #8a8a85;
|
|
--border-input: #888884;
|
|
--border-focus: #1a56db;
|
|
|
|
/* Brand / accent */
|
|
--accent: #e05c1a; /* 4.6:1 on white */
|
|
--accent-hover: #c24d12;
|
|
--accent-text: #ffffff;
|
|
|
|
/* Buttons */
|
|
--btn-primary-bg: #1a1a18;
|
|
--btn-primary-text: #f5f5f2;
|
|
--btn-primary-hover: #2e2e2b;
|
|
--btn-secondary-bg: #ffffff;
|
|
--btn-secondary-text:#111110;
|
|
--btn-secondary-border:#888884;
|
|
--btn-secondary-hover:#f0f0ed;
|
|
--btn-danger-bg: #b91c1c;
|
|
--btn-danger-text: #ffffff;
|
|
--btn-danger-hover: #991b1b;
|
|
--btn-outline-bg: transparent;
|
|
--btn-outline-text: #111110;
|
|
--btn-outline-border:#888884;
|
|
--btn-outline-hover: #f0f0ed;
|
|
|
|
/* Step badge */
|
|
--badge-bg: #e05c1a;
|
|
--badge-text: #ffffff;
|
|
|
|
/* Focus */
|
|
--color-focus: rgba(26, 86, 219, 0.5);
|
|
|
|
/* Shadows */
|
|
--shadow-card: 0 1px 3px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06);
|
|
--shadow-modal: 0 8px 32px rgba(0,0,0,0.22);
|
|
--shadow-btn: 0 1px 2px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* ── DARK MODE ─────────────────────────────────────────────── */
|
|
[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
|
|
--bg-page: #111110;
|
|
--bg-card: #1c1c1a;
|
|
--bg-card2: #252522;
|
|
--bg-header: #0a0a09;
|
|
--bg-footer: #0a0a09;
|
|
--bg-input: #252522;
|
|
--bg-table-head: #0e0e0c;
|
|
--bg-row-alt: #222220;
|
|
--bg-row-sel: #1a2a46;
|
|
--bg-modal: rgba(0,0,0,0.75);
|
|
--bg-progress-track: #333330;
|
|
--bg-progress-fill: #34d399;
|
|
--bg-progress-file: #1c1c1a;
|
|
|
|
--text-primary: #f5f5f2; /* 14:1 on #1c1c1a */
|
|
--text-secondary: #d4d4cf; /* 8:1 on dark card */
|
|
--text-muted: #a3a39e; /* 4.7:1 on dark card */
|
|
--text-inverse: #111110;
|
|
--text-header: #f5f5f2;
|
|
--text-link: #93c5fd; /* 5.2:1 on dark */
|
|
--text-danger: #fca5a5; /* 5.5:1 on dark */
|
|
--text-success: #86efac; /* 6.0:1 on dark */
|
|
--text-code: #fb923c;
|
|
|
|
--border-base: #3a3a37;
|
|
--border-strong: #5a5a56;
|
|
--border-input: #5a5a56;
|
|
--border-focus: #93c5fd;
|
|
|
|
--accent: #f97316;
|
|
--accent-hover: #fb923c;
|
|
--accent-text: #0a0a09;
|
|
|
|
--btn-primary-bg: #f5f5f2;
|
|
--btn-primary-text: #111110;
|
|
--btn-primary-hover: #e0e0dc;
|
|
--btn-secondary-bg: #252522;
|
|
--btn-secondary-text:#f5f5f2;
|
|
--btn-secondary-border:#5a5a56;
|
|
--btn-secondary-hover:#333330;
|
|
--btn-danger-bg: #dc2626;
|
|
--btn-danger-text: #ffffff;
|
|
--btn-danger-hover: #b91c1c;
|
|
--btn-outline-bg: transparent;
|
|
--btn-outline-text: #f5f5f2;
|
|
--btn-outline-border:#5a5a56;
|
|
--btn-outline-hover: #252522;
|
|
|
|
--badge-bg: #f97316;
|
|
--badge-text: #0a0a09;
|
|
|
|
--color-focus: rgba(147, 197, 253, 0.5);
|
|
|
|
--shadow-card: 0 1px 3px rgba(0,0,0,0.40), 0 4px 16px rgba(0,0,0,0.30);
|
|
--shadow-modal: 0 8px 48px rgba(0,0,0,0.60);
|
|
--shadow-btn: 0 1px 2px rgba(0,0,0,0.40);
|
|
}
|
|
|
|
/* ── Auto dark mode from OS ─────────────────────────────────── */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
color-scheme: dark;
|
|
--bg-page: #111110;
|
|
--bg-card: #1c1c1a;
|
|
--bg-card2: #252522;
|
|
--bg-header: #0a0a09;
|
|
--bg-footer: #0a0a09;
|
|
--bg-input: #252522;
|
|
--bg-table-head: #0e0e0c;
|
|
--bg-row-alt: #222220;
|
|
--bg-row-sel: #1a2a46;
|
|
--bg-modal: rgba(0,0,0,0.75);
|
|
--bg-progress-track: #333330;
|
|
--bg-progress-fill: #34d399;
|
|
--bg-progress-file: #1c1c1a;
|
|
|
|
--text-primary: #f5f5f2;
|
|
--text-secondary: #d4d4cf;
|
|
--text-muted: #a3a39e;
|
|
--text-inverse: #111110;
|
|
--text-header: #f5f5f2;
|
|
--text-link: #93c5fd;
|
|
--text-danger: #fca5a5;
|
|
--text-success: #86efac;
|
|
--text-code: #fb923c;
|
|
|
|
--border-base: #3a3a37;
|
|
--border-strong: #5a5a56;
|
|
--border-input: #5a5a56;
|
|
--border-focus: #93c5fd;
|
|
|
|
--accent: #f97316;
|
|
--accent-hover: #fb923c;
|
|
--accent-text: #0a0a09;
|
|
|
|
--btn-primary-bg: #f5f5f2;
|
|
--btn-primary-text: #111110;
|
|
--btn-primary-hover: #e0e0dc;
|
|
--btn-secondary-bg: #252522;
|
|
--btn-secondary-text:#f5f5f2;
|
|
--btn-secondary-border:#5a5a56;
|
|
--btn-secondary-hover:#333330;
|
|
--btn-danger-bg: #dc2626;
|
|
--btn-danger-text: #ffffff;
|
|
--btn-danger-hover: #b91c1c;
|
|
--btn-outline-bg: transparent;
|
|
--btn-outline-text: #f5f5f2;
|
|
--btn-outline-border:#5a5a56;
|
|
--btn-outline-hover: #252522;
|
|
|
|
--badge-bg: #f97316;
|
|
--badge-text: #0a0a09;
|
|
|
|
--color-focus: rgba(147, 197, 253, 0.5);
|
|
|
|
--shadow-card: 0 1px 3px rgba(0,0,0,0.40), 0 4px 16px rgba(0,0,0,0.30);
|
|
--shadow-modal: 0 8px 48px rgba(0,0,0,0.60);
|
|
--shadow-btn: 0 1px 2px rgba(0,0,0,0.40);
|
|
}
|
|
}
|
|
|
|
/* ── Reset & Base ───────────────────────────────────────────── */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
-webkit-text-size-adjust: 100%;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--bg-page);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: background var(--transition-base), color var(--transition-base);
|
|
}
|
|
|
|
/* ── Accessibility Utilities ────────────────────────────────── */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0,0,0,0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -100%;
|
|
left: var(--space-md);
|
|
background: var(--accent);
|
|
color: var(--accent-text);
|
|
padding: var(--space-sm) var(--space-md);
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 700;
|
|
z-index: 9999;
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
transition: top var(--transition-fast);
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: var(--space-md);
|
|
}
|
|
|
|
/* Universal focus style — WCAG 2.2 2.4.11 */
|
|
:focus-visible {
|
|
outline: 2px solid var(--border-focus);
|
|
outline-offset: 3px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
/* Remove default focus for mouse users */
|
|
:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
/* ── Header ─────────────────────────────────────────────────── */
|
|
.app-header {
|
|
background: var(--bg-header);
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--space-md) var(--space-xl);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
color: var(--text-header);
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
letter-spacing: -0.02em;
|
|
user-select: none;
|
|
}
|
|
|
|
.logo-icon {
|
|
color: var(--accent);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.logo strong {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
/* ── Main layout ────────────────────────────────────────────── */
|
|
.app-main {
|
|
flex: 1;
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: var(--space-xl) var(--space-xl) var(--space-2xl);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
/* ── Cards ──────────────────────────────────────────────────── */
|
|
.card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-base);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-card);
|
|
padding: var(--space-xl);
|
|
transition: background var(--transition-base), border-color var(--transition-base);
|
|
}
|
|
|
|
.card-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
margin-bottom: var(--space-xl);
|
|
padding-bottom: var(--space-md);
|
|
border-bottom: 1px solid var(--border-base);
|
|
}
|
|
|
|
.step-badge {
|
|
background: var(--badge-bg);
|
|
color: var(--badge-text);
|
|
font-size: 0.7rem;
|
|
font-weight: 900;
|
|
padding: 3px 8px;
|
|
border-radius: var(--radius-sm);
|
|
letter-spacing: 0.05em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.card-footer {
|
|
margin-top: var(--space-xl);
|
|
padding-top: var(--space-md);
|
|
border-top: 1px solid var(--border-base);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ── Config Grid ────────────────────────────────────────────── */
|
|
.config-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 180px 1fr;
|
|
gap: var(--space-xl);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.config-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.field-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.field-label {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.field-unit {
|
|
font-weight: 400;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.field-hint {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.field-hint code {
|
|
font-family: var(--font-mono);
|
|
color: var(--text-code);
|
|
background: var(--bg-card2);
|
|
padding: 1px 5px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* ── Inputs ─────────────────────────────────────────────────── */
|
|
.text-input {
|
|
width: 100%;
|
|
padding: 10px var(--space-md);
|
|
background: var(--bg-input);
|
|
border: 1.5px solid var(--border-input);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-body);
|
|
font-size: 0.95rem;
|
|
line-height: 1.4;
|
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.text-input:focus-visible {
|
|
outline: none;
|
|
border-color: var(--border-focus);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
|
|
.text-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.dir-input-row {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.dir-input-row .text-input {
|
|
flex: 1;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
/* ── Buttons ────────────────────────────────────────────────── */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: 10px var(--space-lg);
|
|
border: 1.5px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-body);
|
|
font-size: 0.88rem;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast), color var(--transition-fast),
|
|
border-color var(--transition-fast), box-shadow var(--transition-fast),
|
|
transform var(--transition-fast);
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
box-shadow: var(--shadow-btn);
|
|
min-height: 44px; /* WCAG 2.2 target size */
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.btn:disabled, .btn[disabled] {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
transform: none !important;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--btn-primary-bg);
|
|
color: var(--btn-primary-text);
|
|
border-color: transparent;
|
|
}
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: var(--btn-primary-hover);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--btn-secondary-bg);
|
|
color: var(--btn-secondary-text);
|
|
border-color: var(--btn-secondary-border);
|
|
}
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background: var(--btn-secondary-hover);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: var(--btn-danger-bg);
|
|
color: var(--btn-danger-text);
|
|
border-color: transparent;
|
|
}
|
|
.btn-danger:hover:not(:disabled) {
|
|
background: var(--btn-danger-hover);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: var(--btn-outline-bg);
|
|
color: var(--btn-outline-text);
|
|
border-color: var(--btn-outline-border);
|
|
}
|
|
.btn-outline:hover:not(:disabled) {
|
|
background: var(--btn-outline-hover);
|
|
}
|
|
|
|
.btn-lg {
|
|
font-size: 0.95rem;
|
|
padding: 12px var(--space-xl);
|
|
min-height: 48px;
|
|
}
|
|
|
|
.btn-sm {
|
|
font-size: 0.82rem;
|
|
padding: 7px var(--space-md);
|
|
min-height: 36px;
|
|
}
|
|
|
|
.btn-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: transparent;
|
|
border: 1.5px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
color: var(--text-header);
|
|
font-size: 1.1rem;
|
|
transition: background var(--transition-fast), color var(--transition-fast);
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.btn-icon:hover {
|
|
background: rgba(255,255,255,0.12);
|
|
}
|
|
|
|
.btn-icon-prefix {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* ── Status / hint text ─────────────────────────────────────── */
|
|
.status-text {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ── Files toolbar ──────────────────────────────────────────── */
|
|
.files-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-md);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.toolbar-left {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.selection-summary {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── File Table ─────────────────────────────────────────────── */
|
|
.table-wrapper {
|
|
overflow-x: auto;
|
|
border: 1px solid var(--border-base);
|
|
border-radius: var(--radius-md);
|
|
max-height: 480px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
.table-wrapper::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
.table-wrapper::-webkit-scrollbar-track {
|
|
background: var(--bg-card2);
|
|
}
|
|
.table-wrapper::-webkit-scrollbar-thumb {
|
|
background: var(--border-strong);
|
|
border-radius: 4px;
|
|
}
|
|
.table-wrapper::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
.file-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.file-table thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
background: var(--bg-table-head);
|
|
}
|
|
|
|
.file-table th {
|
|
padding: var(--space-sm) var(--space-md);
|
|
text-align: left;
|
|
color: var(--text-inverse);
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
white-space: nowrap;
|
|
border-bottom: 2px solid var(--border-strong);
|
|
}
|
|
|
|
[data-theme="dark"] .file-table th,
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) .file-table th {
|
|
color: var(--text-primary);
|
|
}
|
|
}
|
|
|
|
.file-table th.col-check {
|
|
width: 48px;
|
|
text-align: center;
|
|
}
|
|
|
|
.file-table td {
|
|
padding: 10px var(--space-md);
|
|
border-bottom: 1px solid var(--border-base);
|
|
color: var(--text-primary);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.file-table tbody tr:nth-child(even) {
|
|
background: var(--bg-row-alt);
|
|
}
|
|
|
|
.file-table tbody tr:hover {
|
|
background: var(--bg-row-sel);
|
|
}
|
|
|
|
.file-table tbody tr.selected {
|
|
background: var(--bg-row-sel);
|
|
}
|
|
|
|
.file-table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.col-check {
|
|
text-align: center;
|
|
}
|
|
|
|
.col-name {
|
|
max-width: 340px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.file-name-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.file-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.file-path {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
color: var(--text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.col-size, .col-bitrate, .col-target, .col-codec {
|
|
white-space: nowrap;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.bitrate-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-pill);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
font-family: var(--font-mono);
|
|
background: var(--bg-card2);
|
|
border: 1px solid var(--border-base);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.bitrate-badge.target {
|
|
background: rgba(22, 101, 52, 0.12);
|
|
border-color: rgba(22, 101, 52, 0.3);
|
|
color: var(--text-success);
|
|
}
|
|
|
|
[data-theme="dark"] .bitrate-badge.target {
|
|
background: rgba(134, 239, 172, 0.1);
|
|
border-color: rgba(134, 239, 172, 0.25);
|
|
color: var(--text-success);
|
|
}
|
|
|
|
.codec-tag {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
padding: 2px 7px;
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid var(--border-base);
|
|
background: var(--bg-card2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* H.265 / HEVC — amber tint to flag it uses libx265 */
|
|
.codec-tag.hevc {
|
|
background: rgba(180, 100, 0, 0.10);
|
|
border-color: rgba(180, 100, 0, 0.35);
|
|
color: #7a4500;
|
|
}
|
|
[data-theme="dark"] .codec-tag.hevc {
|
|
background: rgba(251, 191, 36, 0.12);
|
|
border-color: rgba(251, 191, 36, 0.30);
|
|
color: #fbbf24;
|
|
}
|
|
|
|
/* H.264 / AVC — subtle blue tint */
|
|
.codec-tag.h264 {
|
|
background: rgba(26, 86, 219, 0.07);
|
|
border-color: rgba(26, 86, 219, 0.25);
|
|
color: #1e40af;
|
|
}
|
|
[data-theme="dark"] .codec-tag.h264 {
|
|
background: rgba(147, 197, 253, 0.10);
|
|
border-color: rgba(147, 197, 253, 0.25);
|
|
color: #93c5fd;
|
|
}
|
|
|
|
/* Checkbox styling */
|
|
.file-checkbox {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
accent-color: var(--accent);
|
|
min-width: 18px;
|
|
min-height: 18px;
|
|
}
|
|
|
|
/* ── Modal ──────────────────────────────────────────────────── */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--bg-modal);
|
|
z-index: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-md);
|
|
animation: fade-in 160ms ease;
|
|
}
|
|
|
|
.modal-backdrop[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.modal-panel {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-modal);
|
|
width: 100%;
|
|
max-width: 540px;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: slide-up 200ms ease;
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from { transform: translateY(20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-md) var(--space-lg);
|
|
border-bottom: 1px solid var(--border-base);
|
|
}
|
|
|
|
.modal-title {
|
|
font-family: var(--font-display);
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-header .btn-icon {
|
|
color: var(--text-secondary);
|
|
min-width: 36px;
|
|
min-height: 36px;
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.browser-path-bar {
|
|
padding: var(--space-sm) var(--space-lg);
|
|
background: var(--bg-card2);
|
|
border-bottom: 1px solid var(--border-base);
|
|
}
|
|
|
|
.browser-path-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
word-break: break-all;
|
|
}
|
|
|
|
#browser-current-path {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.browser-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--space-sm) 0;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.browser-list::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.browser-list::-webkit-scrollbar-track {
|
|
background: var(--bg-card2);
|
|
}
|
|
.browser-list::-webkit-scrollbar-thumb {
|
|
background: var(--border-strong);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.browser-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: 9px var(--space-lg);
|
|
cursor: pointer;
|
|
color: var(--text-primary);
|
|
font-size: 0.88rem;
|
|
border: none;
|
|
background: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
transition: background var(--transition-fast);
|
|
min-height: 44px;
|
|
}
|
|
|
|
.browser-item:hover, .browser-item:focus-visible {
|
|
background: var(--bg-row-sel);
|
|
outline: none;
|
|
}
|
|
|
|
.browser-item .item-icon {
|
|
font-size: 1rem;
|
|
flex-shrink: 0;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.browser-item.parent-dir {
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.browser-item.parent-dir .item-icon {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.browser-loading {
|
|
text-align: center;
|
|
padding: var(--space-xl);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.browser-error {
|
|
text-align: center;
|
|
padding: var(--space-xl);
|
|
color: var(--text-danger);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md) var(--space-lg);
|
|
border-top: 1px solid var(--border-base);
|
|
}
|
|
|
|
/* ── Progress Section ───────────────────────────────────────── */
|
|
.progress-overview {
|
|
background: var(--bg-card2);
|
|
border: 1px solid var(--border-base);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-lg);
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
.overview-stats {
|
|
display: flex;
|
|
gap: var(--space-lg);
|
|
margin-bottom: var(--space-md);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat-chip {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.stat-value {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
line-height: 1;
|
|
}
|
|
|
|
.overall-bar-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.overall-bar {
|
|
flex: 1;
|
|
height: 12px;
|
|
background: var(--bg-progress-track);
|
|
border-radius: var(--radius-pill);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.overall-bar-fill {
|
|
height: 100%;
|
|
background: var(--bg-progress-fill);
|
|
border-radius: var(--radius-pill);
|
|
transition: width 300ms ease;
|
|
}
|
|
|
|
.overall-pct {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
color: var(--text-secondary);
|
|
min-width: 44px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* ── Per-File Progress ──────────────────────────────────────── */
|
|
.file-progress-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.file-progress-item {
|
|
background: var(--bg-progress-file);
|
|
border: 1px solid var(--border-base);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-md) var(--space-lg);
|
|
transition: border-color var(--transition-base);
|
|
}
|
|
|
|
.file-progress-item.active {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.file-progress-item.done {
|
|
border-color: rgba(22, 101, 52, 0.4);
|
|
}
|
|
|
|
[data-theme="dark"] .file-progress-item.done {
|
|
border-color: rgba(134, 239, 172, 0.3);
|
|
}
|
|
|
|
.file-progress-item.error {
|
|
border-color: rgba(185, 28, 28, 0.5);
|
|
}
|
|
|
|
.fp-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
margin-bottom: var(--space-sm);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.fp-name {
|
|
font-size: 0.88rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.fp-status {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
padding: 2px 10px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--bg-card2);
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.fp-status.waiting { color: var(--text-muted); }
|
|
.fp-status.running { background: rgba(224, 92, 26, 0.12); color: var(--accent); }
|
|
.fp-status.done { background: rgba(22, 101, 52, 0.12); color: var(--text-success); }
|
|
.fp-status.error { background: rgba(185, 28, 28, 0.12); color: var(--text-danger); }
|
|
.fp-status.cancelled{ color: var(--text-muted); }
|
|
|
|
[data-theme="dark"] .fp-status.running { background: rgba(249, 115, 22, 0.18); }
|
|
[data-theme="dark"] .fp-status.done { background: rgba(134, 239, 172, 0.12); }
|
|
[data-theme="dark"] .fp-status.error { background: rgba(220, 38, 38, 0.18); }
|
|
|
|
.fp-bar-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.fp-bar {
|
|
flex: 1;
|
|
height: 8px;
|
|
background: var(--bg-progress-track);
|
|
border-radius: var(--radius-pill);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fp-bar-fill {
|
|
height: 100%;
|
|
background: var(--bg-progress-fill);
|
|
border-radius: var(--radius-pill);
|
|
transition: width 250ms ease;
|
|
}
|
|
|
|
.fp-pct {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.78rem;
|
|
color: var(--text-muted);
|
|
min-width: 38px;
|
|
text-align: right;
|
|
}
|
|
|
|
.fp-detail {
|
|
font-size: 0.78rem;
|
|
color: var(--text-muted);
|
|
margin-top: var(--space-xs);
|
|
}
|
|
|
|
.fp-detail.success { color: var(--text-success); }
|
|
.fp-detail.error { color: var(--text-danger); }
|
|
|
|
/* ── Results ────────────────────────────────────────────────── */
|
|
.results-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.result-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-card2);
|
|
border: 1px solid var(--border-base);
|
|
}
|
|
|
|
.result-icon {
|
|
font-size: 1.2rem;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.result-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.result-name {
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
color: var(--text-primary);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.result-meta {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.result-reduction {
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
font-size: 0.95rem;
|
|
color: var(--text-success);
|
|
}
|
|
|
|
/* ── Footer ─────────────────────────────────────────────────── */
|
|
.app-footer {
|
|
background: var(--bg-footer);
|
|
color: rgba(245,245,242,0.45);
|
|
text-align: center;
|
|
padding: var(--space-lg) var(--space-xl);
|
|
font-size: 0.78rem;
|
|
border-top: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.app-footer strong {
|
|
color: rgba(245,245,242,0.65);
|
|
}
|
|
|
|
/* ── Notification opt-in ────────────────────────────────────── */
|
|
.notify-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
flex: 1;
|
|
}
|
|
|
|
.notify-checkbox-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.notify-checkbox {
|
|
width: 18px;
|
|
height: 18px;
|
|
min-width: 18px;
|
|
min-height: 18px;
|
|
cursor: pointer;
|
|
accent-color: var(--accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.notify-label {
|
|
font-size: 0.9rem;
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.notify-email-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
padding-left: 26px; /* indent under checkbox */
|
|
animation: slide-down 180ms ease;
|
|
}
|
|
|
|
.notify-email-row[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
@keyframes slide-down {
|
|
from { opacity: 0; transform: translateY(-6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.notify-email-label {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.notify-email-input {
|
|
max-width: 340px;
|
|
}
|
|
|
|
.notify-divider {
|
|
width: 1px;
|
|
background: var(--border-base);
|
|
align-self: stretch;
|
|
margin: 0 var(--space-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Notification send status shown in progress footer */
|
|
.notify-status {
|
|
font-size: 0.85rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
padding: var(--space-xs) var(--space-md);
|
|
border-radius: var(--radius-pill);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.notify-status[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.notify-status.ok {
|
|
background: rgba(22, 101, 52, 0.10);
|
|
color: var(--text-success);
|
|
border: 1px solid rgba(22, 101, 52, 0.25);
|
|
}
|
|
|
|
.notify-status.fail {
|
|
background: rgba(185, 28, 28, 0.10);
|
|
color: var(--text-danger);
|
|
border: 1px solid rgba(185, 28, 28, 0.25);
|
|
}
|
|
|
|
[data-theme="dark"] .notify-status.ok {
|
|
background: rgba(134, 239, 172, 0.10);
|
|
border-color: rgba(134, 239, 172, 0.25);
|
|
}
|
|
|
|
[data-theme="dark"] .notify-status.fail {
|
|
background: rgba(252, 165, 165, 0.10);
|
|
border-color: rgba(252, 165, 165, 0.25);
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.fp-bar-fill.active {
|
|
animation: pulse 1.8s ease infinite;
|
|
}
|
|
|
|
/* ── Stream-lost banner ─────────────────────────────────────── */
|
|
.stream-lost-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
flex-wrap: wrap;
|
|
background: rgba(180, 100, 0, 0.10);
|
|
border: 1.5px solid rgba(180, 100, 0, 0.35);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-md) var(--space-lg);
|
|
margin-bottom: var(--space-lg);
|
|
color: #7a4500;
|
|
}
|
|
|
|
[data-theme="dark"] .stream-lost-banner {
|
|
background: rgba(251, 191, 36, 0.10);
|
|
border-color: rgba(251, 191, 36, 0.30);
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.stream-lost-banner[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.banner-icon {
|
|
font-size: 1.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.banner-text {
|
|
flex: 1;
|
|
font-size: 0.88rem;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Reconnect button sits in the card title row */
|
|
.card-title .reconnect-btn {
|
|
margin-left: auto;
|
|
font-size: 0.78rem;
|
|
padding: 5px 12px;
|
|
min-height: 32px;
|
|
animation: pulse-reconnect 1.8s ease infinite;
|
|
}
|
|
|
|
.reconnect-btn[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
@keyframes pulse-reconnect {
|
|
0%, 100% { border-color: var(--btn-outline-border); }
|
|
50% { border-color: var(--accent); color: var(--accent); }
|
|
}
|
|
|
|
/* ── Responsive ─────────────────────────────────────────────── */
|
|
@media (max-width: 768px) {
|
|
.app-main {
|
|
padding: var(--space-lg) var(--space-md);
|
|
}
|
|
|
|
.card {
|
|
padding: var(--space-lg);
|
|
}
|
|
|
|
.header-inner {
|
|
padding: var(--space-sm) var(--space-md);
|
|
}
|
|
|
|
.file-table th,
|
|
.file-table td {
|
|
padding: 8px var(--space-sm);
|
|
}
|
|
|
|
.col-codec {
|
|
display: none;
|
|
}
|
|
|
|
.overview-stats {
|
|
gap: var(--space-md);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.col-bitrate, .col-target {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ── Reduce motion ──────────────────────────────────────────── */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Dark mode table header text fix */
|
|
[data-theme="dark"] .file-table th {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ── Settings modal ─────────────────────────────────────────── */
|
|
.settings-panel {
|
|
max-width: 560px;
|
|
max-height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.settings-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: var(--space-lg) var(--space-xl);
|
|
}
|
|
|
|
.settings-body::-webkit-scrollbar { width: 6px; }
|
|
.settings-body::-webkit-scrollbar-track { background: var(--bg-card2); }
|
|
.settings-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
|
|
|
|
.settings-intro {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--space-lg);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.settings-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.settings-row-2 {
|
|
display: grid;
|
|
grid-template-columns: 100px 1fr;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.settings-divider-above {
|
|
border-top: 1px solid var(--border-base);
|
|
padding-top: var(--space-lg);
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
.settings-save-status {
|
|
font-size: 0.82rem;
|
|
text-align: center;
|
|
min-height: 1.4em;
|
|
padding: var(--space-xs) var(--space-xl) var(--space-md);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.settings-test-result {
|
|
min-height: 1.4em;
|
|
}
|
|
|
|
/* Password row with toggle */
|
|
.password-row {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
align-items: center;
|
|
}
|
|
|
|
.password-row .text-input { flex: 1; }
|
|
|
|
.btn-icon-inline {
|
|
width: 40px;
|
|
height: 40px;
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
border: 1.5px solid var(--border-input);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-input);
|
|
color: var(--text-muted);
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background var(--transition-fast), border-color var(--transition-fast);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn-icon-inline:hover {
|
|
background: var(--bg-row-alt);
|
|
border-color: var(--border-strong);
|
|
}
|
|
|
|
/* Select input to match text-input style */
|
|
.select-input {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Inline button link (used in hint text) */
|
|
.btn-link {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
color: var(--text-link);
|
|
font: inherit;
|
|
font-size: inherit;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.btn-link:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* Settings save status colours */
|
|
.settings-save-status.ok { color: var(--text-success); }
|
|
.settings-save-status.fail { color: var(--text-danger); }
|
|
|
|
/* SMTP not configured warning on the notify row */
|
|
.smtp-warn {
|
|
color: var(--accent);
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
}
|