fix(premiere-plugin): align panel CSS with web-ui design system
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:
parent
ad9e1ef5f1
commit
1e51a4ca5d
1 changed files with 155 additions and 125 deletions
|
|
@ -1,5 +1,7 @@
|
|||
/* Wild Dragon MAM Panel — Wild Dragon Design System */
|
||||
/* OKLCH tokens aligned with web-ui/common.css */
|
||||
/* Wild Dragon MAM Panel — Dragonflight Design System v1.2.0
|
||||
* 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 {
|
||||
/* Background scale */
|
||||
|
|
@ -165,7 +167,7 @@ html, body {
|
|||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 32px;
|
||||
padding: 0 var(--sp-2);
|
||||
padding: 0 10px;
|
||||
background: var(--bg-deep);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
|
|
@ -173,7 +175,8 @@ html, body {
|
|||
font-size: var(--text-xs);
|
||||
font-family: var(--font-mono);
|
||||
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 {
|
||||
|
|
@ -191,7 +194,8 @@ html, body {
|
|||
border-radius: 50%;
|
||||
background: var(--signal-bad);
|
||||
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 {
|
||||
|
|
@ -210,28 +214,26 @@ html, body {
|
|||
}
|
||||
|
||||
/* ================================================================
|
||||
BUTTONS (design system patterns)
|
||||
BUTTONS (design system — mirrors wd-btn)
|
||||
================================================================ */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--sp-1);
|
||||
padding: 0 var(--sp-3);
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
font: 500 13px/1 var(--font);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--r-sm);
|
||||
transition: background var(--dur-fast) var(--ease-out-quart),
|
||||
border-color var(--dur-fast) var(--ease-out-quart),
|
||||
color var(--dur-fast) var(--ease-out-quart);
|
||||
border-radius: 4px;
|
||||
transition: background-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);
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
font-family: var(--font);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
|
|
@ -246,14 +248,14 @@ html, body {
|
|||
|
||||
.btn-sm {
|
||||
height: 28px;
|
||||
padding: 0 var(--sp-2);
|
||||
font-size: 11px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
height: 36px;
|
||||
padding: 0 var(--sp-4);
|
||||
font-size: var(--text-sm);
|
||||
padding: 0 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
|
|
@ -264,7 +266,7 @@ html, body {
|
|||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #070403;
|
||||
color: #f5f7fb;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
|
|
@ -276,11 +278,12 @@ html, body {
|
|||
.btn-secondary {
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-strong);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: var(--bg-raised);
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
|
|
@ -296,7 +299,7 @@ html, body {
|
|||
|
||||
.btn-danger {
|
||||
background: var(--signal-bad);
|
||||
color: #fcf7f7;
|
||||
color: #fbf6f6;
|
||||
border-color: var(--signal-bad);
|
||||
}
|
||||
|
||||
|
|
@ -305,7 +308,7 @@ html, body {
|
|||
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 */
|
||||
button {
|
||||
|
|
@ -314,7 +317,7 @@ button {
|
|||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.38;
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -322,20 +325,21 @@ button:disabled {
|
|||
button.secondary {
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 0 var(--sp-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
font: 500 13px/1 var(--font);
|
||||
display: inline-flex;
|
||||
align-items: 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) {
|
||||
background: var(--bg-raised);
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
|
|
@ -358,19 +362,20 @@ button.secondary:hover:not(:disabled) {
|
|||
.search-input {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
padding: 0 var(--sp-3);
|
||||
padding: 0 10px;
|
||||
background: var(--bg-deep);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
border-radius: 4px;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-xs);
|
||||
font: 400 13px/1 var(--font);
|
||||
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 {
|
||||
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); }
|
||||
|
|
@ -383,45 +388,45 @@ button.secondary:hover:not(:disabled) {
|
|||
select {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
padding: 0 24px 0 var(--sp-2);
|
||||
padding: 0 24px 0 10px;
|
||||
background: var(--bg-deep);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
border-radius: 4px;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-xs);
|
||||
font: 400 13px/1 var(--font);
|
||||
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-repeat: no-repeat;
|
||||
background-position: right 6px center;
|
||||
cursor: pointer;
|
||||
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 {
|
||||
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); }
|
||||
|
||||
/* ================================================================
|
||||
CHIP (design system)
|
||||
CHIP / BADGE (mirrors wd-badge)
|
||||
================================================================ */
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px 8px;
|
||||
gap: 4px;
|
||||
padding: 0 6px;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
font-family: var(--font);
|
||||
font-size: 11px;
|
||||
font: 600 10px/1 var(--font);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-tertiary);
|
||||
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--warn { color: var(--signal-warn); background: var(--signal-warn-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--info { color: var(--accent); background: var(--accent-subtle); }
|
||||
|
||||
/* ================================================================
|
||||
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-name {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
font: 500 11px/1 var(--font);
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -485,15 +491,15 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
font: 600 11px/1 var(--font);
|
||||
letter-spacing: 0.02em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--sp-2);
|
||||
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 {
|
||||
|
|
@ -510,11 +516,9 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
.tab-btn .badge {
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-secondary);
|
||||
font-size: 10px;
|
||||
font-family: var(--font);
|
||||
font: normal 10px/1 var(--font);
|
||||
padding: 1px 6px;
|
||||
border-radius: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -555,27 +559,27 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
}
|
||||
|
||||
.asset-card {
|
||||
background: var(--bg-surface);
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border-faint);
|
||||
border-radius: var(--r-md);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
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;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.asset-card:hover {
|
||||
border-color: var(--accent-border);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.asset-card:hover .asset-thumbnail img {
|
||||
filter: brightness(1.04);
|
||||
}
|
||||
|
||||
.asset-card.selected {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg-panel);
|
||||
box-shadow: 0 0 0 1px var(--accent-border);
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
|
||||
.asset-thumbnail {
|
||||
|
|
@ -595,10 +599,12 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: filter var(--dur-fast) var(--ease-out-quart);
|
||||
}
|
||||
|
||||
.asset-info {
|
||||
padding: var(--sp-2);
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
|
|
@ -607,8 +613,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
}
|
||||
|
||||
.asset-filename {
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
font: 500 12px/1.3 var(--font);
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -618,9 +623,9 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
.asset-meta {
|
||||
display: flex;
|
||||
gap: var(--sp-1);
|
||||
font-size: 10px;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
font: 400 11px/1.3 var(--font-mono);
|
||||
color: var(--text-tertiary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.asset-status-badge {
|
||||
|
|
@ -628,10 +633,8 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
align-items: center;
|
||||
height: 18px;
|
||||
padding: 0 6px;
|
||||
border-radius: 100px;
|
||||
font-family: var(--font);
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
border-radius: 3px;
|
||||
font: 600 10px/1 var(--font);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
width: fit-content;
|
||||
|
|
@ -692,8 +695,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
}
|
||||
|
||||
.empty-state-title {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
font: 600 13px/1.4 var(--font);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
|
|
@ -726,8 +728,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
}
|
||||
|
||||
.details-header-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
font: 600 11px/1 var(--font);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-tertiary);
|
||||
|
|
@ -740,11 +741,10 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
}
|
||||
|
||||
.details-label {
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
font: 600 10px/1 var(--font);
|
||||
text-transform: uppercase;
|
||||
color: var(--text-tertiary);
|
||||
letter-spacing: 0.07em;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.details-value {
|
||||
|
|
@ -826,8 +826,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
.export-panel.hidden { display: none; }
|
||||
|
||||
.export-panel-title {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
font: 600 11px/1 var(--font);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--accent);
|
||||
|
|
@ -838,21 +837,22 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
.export-panel .input {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 0 var(--sp-2);
|
||||
padding: 0 10px;
|
||||
background: var(--bg-deep);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
border-radius: 4px;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-xs);
|
||||
font: 400 13px/1 var(--font);
|
||||
margin-bottom: var(--sp-2);
|
||||
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:focus-visible {
|
||||
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 {
|
||||
|
|
@ -887,8 +887,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
}
|
||||
|
||||
.advanced-section-title {
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
font: 600 10px/1 var(--font);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-tertiary);
|
||||
|
|
@ -924,7 +923,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
.action-row .btn { flex: 1; }
|
||||
|
||||
/* ================================================================
|
||||
SLIDE PANEL (design system pattern)
|
||||
SLIDE PANEL (mirrors wd-slide-panel)
|
||||
================================================================ */
|
||||
|
||||
.slide-overlay {
|
||||
|
|
@ -978,7 +977,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-4);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.slide-panel-footer {
|
||||
|
|
@ -1005,13 +1004,14 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
padding: var(--sp-2) var(--sp-3);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
border-radius: 6px;
|
||||
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 {
|
||||
border-color: var(--accent-border);
|
||||
border-color: var(--border-strong);
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
|
||||
|
|
@ -1021,20 +1021,18 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
}
|
||||
|
||||
.preset-card-title {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
font: 600 12px/1 var(--font);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 3px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.preset-card-desc {
|
||||
font-size: 10px;
|
||||
font: 400 10px/1.4 var(--font-mono);
|
||||
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 {
|
||||
|
|
@ -1042,7 +1040,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-base);
|
||||
}
|
||||
|
||||
|
|
@ -1057,12 +1055,12 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
gap: var(--sp-2);
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
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:hover { background: var(--bg-surface); }
|
||||
.clip-list-item:hover { background: var(--bg-hover); }
|
||||
|
||||
.clip-list-item-checkbox {
|
||||
width: 14px;
|
||||
|
|
@ -1078,8 +1076,7 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
}
|
||||
|
||||
.clip-list-item-name {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
font: 500 12px/1 var(--font);
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -1087,15 +1084,13 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
}
|
||||
|
||||
.clip-list-item-meta {
|
||||
font-size: 10px;
|
||||
font: 400 11px/1.3 var(--font-mono);
|
||||
color: var(--text-tertiary);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.clip-list-item-status {
|
||||
flex-shrink: 0;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
font: 600 10px/1 var(--font);
|
||||
letter-spacing: 0.06em;
|
||||
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-text {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
font: 500 13px/1 var(--font);
|
||||
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);
|
||||
color: var(--signal-bad);
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
border-radius: var(--r-sm);
|
||||
border-radius: 4px;
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.5;
|
||||
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);
|
||||
color: var(--signal-good);
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
border-radius: var(--r-sm);
|
||||
border-radius: 4px;
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.5;
|
||||
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);
|
||||
color: var(--accent);
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
border-radius: var(--r-sm);
|
||||
border-radius: 4px;
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--sp-2);
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
FORM GROUP (design system)
|
||||
FORM GROUP (mirrors wd-form-group + wd-label)
|
||||
================================================================ */
|
||||
|
||||
.form-group {
|
||||
|
|
@ -1185,17 +1179,16 @@ select option { background: var(--bg-surface); color: var(--text-primary); }
|
|||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.07em;
|
||||
font: 600 11px/1 var(--font);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
font-size: var(--text-xs);
|
||||
font: 400 11px/1.5 var(--font);
|
||||
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%; }
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue