WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

fix(premiere-plugin): align panel CSS with web-ui design system

Browse source 
Component-level alignment pass against services/web-ui/src/css/components/:

- btn-primary text: #070403 (near-black) → #f5f7fb (near-white, matches web-ui)
- btn-danger text: #fcf7f7 → #fbf6f6 (precise oklch(98% 0.005 25) conversion)
- btn-secondary border: border-strong → border; hover: bg-hover + border-strong
- button.secondary legacy: same border/hover fix
- asset-card bg: bg-surface → bg-panel (matches wd-card-asset)
- asset-card hover: remove accent glow + transform + shadow; border → var(--border) only
- asset-card hover brightness: moved to img child only (matches web-ui pattern)
- asset-card selected: remove box-shadow ring; bg → bg-raised
- asset-card border-radius: explicit 6px (was var(--r-md))
- asset-card transition: simplified to border-color with design-system easing
- asset-filename: font 11px → font: 500 12px/1.3 (web-ui uses 13px; 12px for panel density)
- asset-meta: 10px text-secondary → font: 400 11px/1.3 font-mono + text-tertiary + tabular-nums
- asset-status-badge: border-radius 100px → 3px (matches wd-badge)
- chip: pad/gap aligned with wd-badge; font: 600 10px/1; added chip--idle + chip--info variants
- form-label: 10px text-secondary → font: 600 11px/1 + text-tertiary + margin-bottom: 4px
- details-header-label: aligned to font shorthand + 0.08em spacing
- details-label: aligned to font: 600 10px/1
- export-panel-title: font shorthand
- Add @keyframes wd-shimmer + .skeleton utility
- Add @media (prefers-reduced-motion) block
- Update file header comment
This commit is contained in:
Zac Gaetano 2026-05-27 12:00:00 -04:00
parent ad9e1ef5f1
commit 1e51a4ca5d
1 changed files with 155 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

280
services/premiere-plugin/css/styles.css
View file

@ -1,5 +1,7 @@
/* Wild Dragon MAM Panel — Wild Dragon Design System */ /* Wild Dragon MAM Panel — Dragonflight Design System v1.2.0
/* OKLCH tokens aligned with web-ui/common.css */ * CEP-compatible: all oklch() converted to hex/rgba via OKLab→sRGB math.
* Source of truth: services/web-ui/src/css/components/
* Do not hand-edit hex values — regenerate from tokens.css if tokens change. */
:root { :root {
/* Background scale */ /* Background scale */
@ -165,7 +167,7 @@ html, body {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
height: 32px; height: 32px;
padding: 0 var(--sp-2); padding: 0 10px;
background: var(--bg-deep); background: var(--bg-deep);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--r-sm); border-radius: var(--r-sm);
@ -173,7 +175,8 @@ html, body {
font-size: var(--text-xs); font-size: var(--text-xs);
font-family: var(--font-mono); font-family: var(--font-mono);
outline: none; outline: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast); transition: border-color var(--dur-fast) var(--ease-out-quart),
box-shadow var(--dur-fast) var(--ease-out-quart);
} }
.server-url:focus-visible { .server-url:focus-visible {
@ -191,7 +194,8 @@ html, body {
border-radius: 50%; border-radius: 50%;
background: var(--signal-bad); background: var(--signal-bad);
flex-shrink: 0; flex-shrink: 0;
transition: background var(--t-fast), box-shadow var(--t-fast); transition: background var(--dur-fast) var(--ease-out-quart),
box-shadow var(--dur-fast) var(--ease-out-quart);
} }
.status-indicator.connected { .status-indicator.connected {
@ -210,28 +214,26 @@ html, body {
} }
/* ================================================================ /* ================================================================
BUTTONS (design system patterns) BUTTONS (design system — mirrors wd-btn)
================================================================ */ ================================================================ */
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--sp-1); gap: 6px;
padding: 0 var(--sp-3); padding: 0 12px;
height: 32px; height: 32px;
font-size: var(--text-sm); font: 500 13px/1 var(--font);
font-weight: 500;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--r-sm); border-radius: 4px;
transition: background var(--dur-fast) var(--ease-out-quart), transition: background-color var(--dur-fast) var(--ease-out-quart),
border-color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart),
color var(--dur-fast) var(--ease-out-quart); color var(--dur-fast) var(--ease-out-quart);
white-space: nowrap; white-space: nowrap;
line-height: 1;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
font-family: var(--font); user-select: none;
} }
.btn:focus-visible { .btn:focus-visible {
@ -246,14 +248,14 @@ html, body {
.btn-sm { .btn-sm {
height: 28px; height: 28px;
padding: 0 var(--sp-2); padding: 0 10px;
font-size: 11px; font-size: 12px;
} }
.btn-lg { .btn-lg {
height: 36px; height: 36px;
padding: 0 var(--sp-4); padding: 0 14px;
font-size: var(--text-sm); font-size: 13px;
} }
.btn-icon { .btn-icon {
@ -264,7 +266,7 @@ html, body {
.btn-primary { .btn-primary {
background: var(--accent); background: var(--accent);
color: #070403; color: #f5f7fb;
border-color: var(--accent); border-color: var(--accent);
} }
@ -276,11 +278,12 @@ html, body {
.btn-secondary { .btn-secondary {
background: var(--bg-surface); background: var(--bg-surface);
color: var(--text-primary); color: var(--text-primary);
border-color: var(--border-strong); border-color: var(--border);
} }
.btn-secondary:hover:not(:disabled) { .btn-secondary:hover:not(:disabled) {
background: var(--bg-raised); background: var(--bg-hover);
border-color: var(--border-strong);
} }
.btn-ghost { .btn-ghost {
@ -296,7 +299,7 @@ html, body {
.btn-danger { .btn-danger {
background: var(--signal-bad); background: var(--signal-bad);
color: #fcf7f7; color: #fbf6f6;
border-color: var(--signal-bad); border-color: var(--signal-bad);
} }
@ -305,7 +308,7 @@ html, body {
border-color: var(--signal-bad-hover); border-color: var(--signal-bad-hover);
} }
.btn:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; } .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
/* Legacy button compatibility */ /* Legacy button compatibility */
button { button {
@ -314,7 +317,7 @@ button {
} }
button:disabled { button:disabled {
opacity: 0.38; opacity: 0.4;
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
@ -322,20 +325,21 @@ button:disabled {
button.secondary { button.secondary {
background: var(--bg-surface); background: var(--bg-surface);
color: var(--text-primary); color: var(--text-primary);
border: 1px solid var(--border-strong); border: 1px solid var(--border);
border-radius: var(--r-sm); border-radius: 4px;
padding: 0 var(--sp-2); padding: 0 10px;
height: 32px; height: 32px;
font-size: var(--text-sm); font: 500 13px/1 var(--font);
font-weight: 500;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background var(--t-fast); transition: background-color var(--dur-fast) var(--ease-out-quart),
border-color var(--dur-fast) var(--ease-out-quart);
} }
button.secondary:hover:not(:disabled) { button.secondary:hover:not(:disabled) {
background: var(--bg-raised); background: var(--bg-hover);
border-color: var(--border-strong);
} }
/* ================================================================ /* ================================================================
@ -358,19 +362,20 @@ button.secondary:hover:not(:disabled) {
.search-input { .search-input {
flex: 1; flex: 1;
height: 32px; height: 32px;
padding: 0 var(--sp-3); padding: 0 10px;
background: var(--bg-deep); background: var(--bg-deep);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--r-sm); border-radius: 4px;
color: var(--text-primary); color: var(--text-primary);
font-size: var(--text-xs); font: 400 13px/1 var(--font);
outline: none; outline: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast); transition: border-color var(--dur-fast) var(--ease-out-quart);
} }
.search-input:focus-visible { .search-input:focus-visible {
border-color: var(--accent-border); border-color: var(--accent-border);
box-shadow: 0 0 0 2px var(--accent-subtle); outline: 2px solid var(--accent-subtle);
outline-offset: 1px;
} }
.search-input::placeholder { color: var(--text-tertiary); } .search-input::placeholder { color: var(--text-tertiary); }
@ -383,45 +388,45 @@ button.secondary:hover:not(:disabled) {
select { select {
flex: 1; flex: 1;
height: 32px; height: 32px;
padding: 0 24px 0 var(--sp-2); padding: 0 24px 0 10px;
background: var(--bg-deep); background: var(--bg-deep);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--r-sm); border-radius: 4px;
color: var(--text-primary); color: var(--text-primary);
font-size: var(--text-xs); font: 400 13px/1 var(--font);
appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%23667788' d='m7 10 5 5 5-5z'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%23667788' d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 6px center; background-position: right 6px center;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast); transition: border-color var(--dur-fast) var(--ease-out-quart);
} }
select:focus-visible { select:focus-visible {
border-color: var(--accent-border); border-color: var(--accent-border);
box-shadow: 0 0 0 2px var(--accent-subtle); outline: 2px solid var(--accent-subtle);
outline-offset: 1px;
} }
select option { background: var(--bg-surface); color: var(--text-primary); } select option { background: var(--bg-surface); color: var(--text-primary); }
/* ================================================================ /* ================================================================
CHIP (design system) CHIP / BADGE (mirrors wd-badge)
================================================================ */ ================================================================ */
.chip { .chip {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 4px;
padding: 2px 8px; padding: 0 6px;
height: 18px; height: 18px;
border-radius: 3px; border-radius: 3px;
font-family: var(--font); font: 600 10px/1 var(--font);
font-size: 11px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
background: var(--bg-surface); background: var(--bg-surface);
color: var(--text-secondary); color: var(--text-tertiary);
white-space: nowrap; white-space: nowrap;
} }
@ -430,7 +435,9 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
.chip--good { color: var(--signal-good); background: var(--signal-good-bg); } .chip--good { color: var(--signal-good); background: var(--signal-good-bg); }
.chip--warn { color: var(--signal-warn); background: var(--signal-warn-bg); } .chip--warn { color: var(--signal-warn); background: var(--signal-warn-bg); }
.chip--bad { color: var(--signal-bad); background: var(--signal-bad-bg); } .chip--bad { color: var(--signal-bad); background: var(--signal-bad-bg); }
.chip--idle { color: var(--text-tertiary); background: var(--bg-surface); }
.chip--rec { color: var(--accent); background: var(--accent-subtle); } .chip--rec { color: var(--accent); background: var(--accent-subtle); }
.chip--info { color: var(--accent); background: var(--accent-subtle); }
/* ================================================================ /* ================================================================
SEQUENCE INFO BAR SEQUENCE INFO BAR
@ -452,8 +459,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
.seq-info-label { flex-shrink: 0; } .seq-info-label { flex-shrink: 0; }
.seq-info-name { .seq-info-name {
font-size: 11px; font: 500 11px/1 var(--font);
font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -485,15 +491,15 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
border: none; border: none;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
color: var(--text-secondary); color: var(--text-secondary);
font-family: var(--font); font: 600 11px/1 var(--font);
font-size: var(--text-xs); letter-spacing: 0.02em;
font-weight: 600;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--sp-2); gap: var(--sp-2);
cursor: pointer; cursor: pointer;
transition: all var(--t-fast); transition: background-color var(--dur-fast) var(--ease-out-quart),
color var(--dur-fast) var(--ease-out-quart);
} }
.tab-btn:hover { .tab-btn:hover {
@ -510,11 +516,9 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
.tab-btn .badge { .tab-btn .badge {
background: var(--bg-raised); background: var(--bg-raised);
color: var(--text-secondary); color: var(--text-secondary);
font-size: 10px; font: normal 10px/1 var(--font);
font-family: var(--font);
padding: 1px 6px; padding: 1px 6px;
border-radius: 10px; border-radius: 10px;
font-weight: normal;
} }
.tab-btn.active .badge { .tab-btn.active .badge {
@ -542,7 +546,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
} }
/* ================================================================ /* ================================================================
ASSET GRID ASSET GRID (mirrors wd-card-asset-grid)
================================================================ */ ================================================================ */
.asset-grid { .asset-grid {
@ -555,27 +559,27 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
} }
.asset-card { .asset-card {
background: var(--bg-surface); background: var(--bg-panel);
border: 1px solid var(--border-faint); border: 1px solid var(--border-faint);
border-radius: var(--r-md); border-radius: 6px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); transition: border-color var(--dur-fast) var(--ease-out-quart);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.asset-card:hover { .asset-card:hover {
border-color: var(--accent-border); border-color: var(--border);
transform: translateY(-1px); }
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
.asset-card:hover .asset-thumbnail img {
filter: brightness(1.04); filter: brightness(1.04);
} }
.asset-card.selected { .asset-card.selected {
border-color: var(--accent); border-color: var(--accent);
background: var(--bg-panel); background: var(--bg-raised);
box-shadow: 0 0 0 1px var(--accent-border);
} }
.asset-thumbnail { .asset-thumbnail {
@ -595,10 +599,12 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
display: block;
transition: filter var(--dur-fast) var(--ease-out-quart);
} }
.asset-info { .asset-info {
padding: var(--sp-2); padding: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3px; gap: 3px;
@ -607,8 +613,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
} }
.asset-filename { .asset-filename {
font-weight: 500; font: 500 12px/1.3 var(--font);
font-size: 11px;
color: var(--text-primary); color: var(--text-primary);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -618,9 +623,9 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
.asset-meta { .asset-meta {
display: flex; display: flex;
gap: var(--sp-1); gap: var(--sp-1);
font-size: 10px; font: 400 11px/1.3 var(--font-mono);
color: var(--text-secondary); color: var(--text-tertiary);
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
} }
.asset-status-badge { .asset-status-badge {
@ -628,10 +633,8 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
align-items: center; align-items: center;
height: 18px; height: 18px;
padding: 0 6px; padding: 0 6px;
border-radius: 100px; border-radius: 3px;
font-family: var(--font); font: 600 10px/1 var(--font);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
width: fit-content; width: fit-content;
@ -692,8 +695,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
} }
.empty-state-title { .empty-state-title {
font-size: var(--text-sm); font: 600 13px/1.4 var(--font);
font-weight: 600;
color: var(--text-secondary); color: var(--text-secondary);
} }
@ -726,8 +728,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
} }
.details-header-label { .details-header-label {
font-size: 10px; font: 600 11px/1 var(--font);
font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: var(--text-tertiary); color: var(--text-tertiary);
@ -740,11 +741,10 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
} }
.details-label { .details-label {
font-size: 9px; font: 600 10px/1 var(--font);
font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-tertiary); color: var(--text-tertiary);
letter-spacing: 0.07em; letter-spacing: 0.08em;
} }
.details-value { .details-value {
@ -826,8 +826,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
.export-panel.hidden { display: none; } .export-panel.hidden { display: none; }
.export-panel-title { .export-panel-title {
font-size: 10px; font: 600 11px/1 var(--font);
font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: var(--accent); color: var(--accent);
@ -838,21 +837,22 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
.export-panel .input { .export-panel .input {
width: 100%; width: 100%;
height: 32px; height: 32px;
padding: 0 var(--sp-2); padding: 0 10px;
background: var(--bg-deep); background: var(--bg-deep);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--r-sm); border-radius: 4px;
color: var(--text-primary); color: var(--text-primary);
font-size: var(--text-xs); font: 400 13px/1 var(--font);
margin-bottom: var(--sp-2); margin-bottom: var(--sp-2);
outline: none; outline: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast); transition: border-color var(--dur-fast) var(--ease-out-quart);
} }
.export-panel input[type="text"]:focus-visible, .export-panel input[type="text"]:focus-visible,
.export-panel .input:focus-visible { .export-panel .input:focus-visible {
border-color: var(--accent-border); border-color: var(--accent-border);
box-shadow: 0 0 0 2px var(--accent-subtle); outline: 2px solid var(--accent-subtle);
outline-offset: 1px;
} }
.export-panel select { .export-panel select {
@ -887,8 +887,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
} }
.advanced-section-title { .advanced-section-title {
font-size: 9px; font: 600 10px/1 var(--font);
font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: var(--text-tertiary); color: var(--text-tertiary);
@ -924,7 +923,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
.action-row .btn { flex: 1; } .action-row .btn { flex: 1; }
/* ================================================================ /* ================================================================
SLIDE PANEL (design system pattern) SLIDE PANEL (mirrors wd-slide-panel)
================================================================ */ ================================================================ */
.slide-overlay { .slide-overlay {
@ -978,7 +977,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
padding: 18px; padding: 18px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--sp-4); gap: 16px;
} }
.slide-panel-footer { .slide-panel-footer {
@ -1005,13 +1004,14 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
background: var(--bg-surface); background: var(--bg-surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--r-md); border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: border-color var(--t-fast), background var(--t-fast); transition: border-color var(--dur-fast) var(--ease-out-quart),
background var(--dur-fast) var(--ease-out-quart);
} }
.preset-card:hover { .preset-card:hover {
border-color: var(--accent-border); border-color: var(--border-strong);
background: var(--bg-raised); background: var(--bg-raised);
} }
@ -1021,20 +1021,18 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
} }
.preset-card-title { .preset-card-title {
font-size: var(--text-xs); font: 600 12px/1 var(--font);
font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 3px; margin-bottom: 4px;
} }
.preset-card-desc { .preset-card-desc {
font-size: 10px; font: 400 10px/1.4 var(--font-mono);
color: var(--text-tertiary); color: var(--text-tertiary);
font-family: var(--font-mono);
} }
/* ================================================================ /* ================================================================
CLIP LIST (for Hi-Res Relink) CLIP LIST (for Hi-Res Relink — mirrors wd-list-row)
================================================================ */ ================================================================ */
.clip-list-container { .clip-list-container {
@ -1042,7 +1040,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--r-md); border-radius: 6px;
background: var(--bg-base); background: var(--bg-base);
} }
@ -1057,12 +1055,12 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
gap: var(--sp-2); gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint);
transition: background var(--t-fast); transition: background-color var(--dur-fast) var(--ease-out-quart);
} }
.clip-list-item:last-child { border-bottom: none; } .clip-list-item:last-child { border-bottom: none; }
.clip-list-item:hover { background: var(--bg-surface); } .clip-list-item:hover { background: var(--bg-hover); }
.clip-list-item-checkbox { .clip-list-item-checkbox {
width: 14px; width: 14px;
@ -1078,8 +1076,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
} }
.clip-list-item-name { .clip-list-item-name {
font-size: var(--text-xs); font: 500 12px/1 var(--font);
font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -1087,15 +1084,13 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
} }
.clip-list-item-meta { .clip-list-item-meta {
font-size: 10px; font: 400 11px/1.3 var(--font-mono);
color: var(--text-tertiary); color: var(--text-tertiary);
font-family: var(--font-mono);
} }
.clip-list-item-status { .clip-list-item-status {
flex-shrink: 0; flex-shrink: 0;
font-size: 9px; font: 600 10px/1 var(--font);
font-weight: 600;
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
} }
@ -1126,8 +1121,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
.relink-summary-icon { color: var(--signal-good); } .relink-summary-icon { color: var(--signal-good); }
.relink-summary-text { .relink-summary-text {
font-size: var(--text-sm); font: 500 13px/1 var(--font);
font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
} }
@ -1146,7 +1140,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
border: 1px solid rgba(245, 60, 65, 0.25); border: 1px solid rgba(245, 60, 65, 0.25);
color: var(--signal-bad); color: var(--signal-bad);
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-sm); border-radius: 4px;
font-size: var(--text-xs); font-size: var(--text-xs);
line-height: 1.5; line-height: 1.5;
margin-bottom: var(--sp-2); margin-bottom: var(--sp-2);
@ -1157,7 +1151,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
border: 1px solid rgba(53, 187, 88, 0.25); border: 1px solid rgba(53, 187, 88, 0.25);
color: var(--signal-good); color: var(--signal-good);
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-sm); border-radius: 4px;
font-size: var(--text-xs); font-size: var(--text-xs);
line-height: 1.5; line-height: 1.5;
margin-bottom: var(--sp-2); margin-bottom: var(--sp-2);
@ -1168,14 +1162,14 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
border: 1px solid var(--accent-border); border: 1px solid var(--accent-border);
color: var(--accent); color: var(--accent);
padding: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-sm); border-radius: 4px;
font-size: var(--text-xs); font-size: var(--text-xs);
line-height: 1.5; line-height: 1.5;
margin-bottom: var(--sp-2); margin-bottom: var(--sp-2);
} }
/* ================================================================ /* ================================================================
FORM GROUP (design system) FORM GROUP (mirrors wd-form-group + wd-label)
================================================================ */ ================================================================ */
.form-group { .form-group {
@ -1185,17 +1179,16 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
} }
.form-label { .form-label {
font-size: 10px; font: 600 11px/1 var(--font);
font-weight: 600; letter-spacing: 0.08em;
letter-spacing: 0.07em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-secondary); color: var(--text-tertiary);
margin-bottom: 4px;
} }
.form-hint { .form-hint {
font-size: var(--text-xs); font: 400 11px/1.5 var(--font);
color: var(--text-tertiary); color: var(--text-tertiary);
line-height: 1.5;
} }
/* ================================================================ /* ================================================================
@ -1251,3 +1244,40 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
.slide-panel { width: 100%; } .slide-panel { width: 100%; }
} }
/* ================================================================
SKELETON SHIMMER
================================================================ */
@keyframes wd-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
var(--bg-surface) 0%,
var(--bg-hover) 50%,
var(--bg-surface) 100%
);
background-size: 200% 100%;
animation: wd-shimmer 1.8s ease-in-out infinite;
border-radius: 3px;
}
/* ================================================================
REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
.skeleton,
.status-indicator.connecting {
animation: none;
}
*, *::before, *::after {
transition-duration: 0ms !important;
animation-duration: 0ms !important;
}
}