feat(web): Channel Builder screen (refs #89)
3-column library-to-lineup builder replacing the four-editor chain: library browser (search/filter/poster grid, double-click or drag to add, collections via 5 typed browse calls) · drag-to-reorder lineup with add-time constraint surfacing (Rerun/Playlist only-valid-alone, MultiCollection requires shuffle, server lineup[i] 422 mapping) · settings rail (AUTO number, channel image w/ guide-logo + bug preview, shuffle/always-playing toggles with overrides-template tags, template picker + save-as-template, advanced override/view-defaults accordion). Creates channel atomically via POST /api/channels/from-lineup, artwork uploaded at create time. navigateToPath extracted to routing.ts to avoid an App<->builder import cycle. 16 new tests (106 total). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -2131,6 +2131,818 @@
|
||||
color: var(--status-live);
|
||||
}
|
||||
|
||||
/* ---- Channel Builder (#89) --------------------------------------------- */
|
||||
/* The builder is a full-height flagship screen. `.ctv-main` is a bounded,
|
||||
scrolling grid track (100vh - topbar); the ThemeSwitcher + main padding sit
|
||||
above us, so we bound our own height off the viewport to get three
|
||||
independently scrolling columns rather than one long page scroll. */
|
||||
.ctv-builder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 132px);
|
||||
min-height: 460px;
|
||||
margin: calc(var(--space-7, 16px) * -1) calc(var(--pad-page, 32px) * -1) calc(var(--pad-page, 32px) * -1);
|
||||
border-top: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
.ctv-hide-sb {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-control) transparent;
|
||||
}
|
||||
|
||||
.ctv-hide-sb::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.ctv-hide-sb::-webkit-scrollbar-thumb {
|
||||
background: var(--border-control);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ctv-hide-sb::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ctv-builder-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-6, 12px);
|
||||
padding: var(--space-6, 12px) 20px;
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.ctv-builder-toolbar-tile {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--ctv-accent-soft);
|
||||
color: var(--ctv-accent);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.ctv-builder-toolbar-titles {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ctv-builder-title {
|
||||
font: var(--weight-semibold) var(--text-md) / 1 var(--font-sans);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctv-builder-summary {
|
||||
margin-top: 3px;
|
||||
font: var(--text-xs) / 1 var(--font-sans);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ctv-mono {
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.ctv-builder-error {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-4, 8px);
|
||||
padding: var(--space-4, 8px) 20px;
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
background: var(--ctv-error-soft);
|
||||
color: var(--status-error);
|
||||
font: var(--text-xs) / 1.4 var(--font-sans);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.ctv-builder-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 304px;
|
||||
}
|
||||
|
||||
.ctv-builder-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
.ctv-builder-col-rail {
|
||||
border-right: none;
|
||||
background: var(--surface-card);
|
||||
}
|
||||
|
||||
.ctv-builder-col-head {
|
||||
padding: 14px 16px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5, 10px);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.ctv-builder-col-head-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ctv-builder-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.ctv-builder-scroll-body {
|
||||
padding: 4px 16px 16px;
|
||||
}
|
||||
|
||||
.ctv-builder-rail-scroll {
|
||||
padding: 14px 16px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-7, 16px);
|
||||
}
|
||||
|
||||
.ctv-builder-headrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-5, 10px);
|
||||
flex-wrap: wrap;
|
||||
row-gap: var(--space-4, 8px);
|
||||
}
|
||||
|
||||
.ctv-builder-eyebrow {
|
||||
font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-sans);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
.ctv-builder-chiprow {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ctv-builder-chip {
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
cursor: pointer;
|
||||
font: var(--weight-medium) var(--text-2xs) / 1.4 var(--font-sans);
|
||||
background: var(--ctv-surface-2);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
.ctv-builder-chip-on {
|
||||
background: var(--ctv-accent-soft);
|
||||
color: var(--ctv-accent);
|
||||
border-color: var(--ctv-accent-ring, rgba(224, 138, 60, 0.35));
|
||||
}
|
||||
|
||||
.ctv-builder-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
|
||||
gap: var(--space-5, 10px);
|
||||
}
|
||||
|
||||
.ctv-builder-compact-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ctv-builder-empty {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
font: var(--text-xs) / 1.5 var(--font-sans);
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
.ctv-builder-loadmore {
|
||||
margin-top: var(--space-6, 12px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* poster placeholder */
|
||||
.ctv-builder-poster {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
.ctv-builder-poster img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.ctv-builder-poster-icon {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ctv-builder-poster-scrim {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 18px 8px 8px;
|
||||
background: linear-gradient(to top, rgba(11, 13, 17, 0.92), transparent);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ctv-builder-poster-title {
|
||||
font: var(--weight-semibold) var(--text-xs) / 1.15 var(--font-sans);
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ctv-builder-poster-meta {
|
||||
margin-top: 3px;
|
||||
font: var(--text-2xs) / 1 var(--font-mono);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ctv-builder-libcard {
|
||||
position: relative;
|
||||
cursor: grab;
|
||||
transition: transform var(--dur-fast) var(--ease-standard, ease);
|
||||
}
|
||||
|
||||
.ctv-builder-libcard:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.ctv-builder-libcard-poster {
|
||||
position: relative;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.ctv-builder-libcard-compact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-5, 10px);
|
||||
padding: 6px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: grab;
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
.ctv-builder-compact-title {
|
||||
font: var(--weight-medium) var(--text-xs) / 1.15 var(--font-sans);
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ctv-builder-compact-meta {
|
||||
margin-top: 2px;
|
||||
font: var(--text-2xs) / 1 var(--font-sans);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ctv-builder-added-check {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--action-primary);
|
||||
color: var(--text-on-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
animation: ctv-pop 260ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
@keyframes ctv-pop {
|
||||
from {
|
||||
transform: scale(0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* lineup */
|
||||
.ctv-builder-lineup-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.ctv-builder-lineup-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
padding: 9px 10px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--border-hairline);
|
||||
transition: opacity var(--dur-fast);
|
||||
}
|
||||
|
||||
.ctv-builder-lineup-row-error {
|
||||
border-color: var(--status-error);
|
||||
}
|
||||
|
||||
.ctv-builder-grip {
|
||||
display: inline-flex;
|
||||
cursor: grab;
|
||||
color: var(--ctv-text-faint);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.ctv-builder-order {
|
||||
width: 22px;
|
||||
flex: 0 0 auto;
|
||||
text-align: center;
|
||||
font: var(--weight-medium) var(--text-xs) / 1 var(--font-mono);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ctv-builder-row-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ctv-builder-row-title {
|
||||
font: var(--weight-semibold) var(--text-sm) / 1.2 var(--font-sans);
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ctv-builder-row-sub {
|
||||
margin-top: 2px;
|
||||
font: var(--text-2xs) / 1 var(--font-sans);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ctv-builder-row-dur {
|
||||
font: var(--text-2xs) / 1 var(--font-mono);
|
||||
color: var(--text-disabled);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.ctv-builder-lineup-empty {
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-6, 12px);
|
||||
text-align: center;
|
||||
border: 1px dashed var(--border-control);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-disabled);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ctv-builder-lineup-empty-over {
|
||||
border-color: var(--ctv-accent);
|
||||
background: var(--ctv-accent-soft);
|
||||
}
|
||||
|
||||
.ctv-builder-lineup-hint {
|
||||
margin-top: 4px;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px dashed var(--border-hairline);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4, 8px);
|
||||
color: var(--text-disabled);
|
||||
font: var(--text-2xs) / 1 var(--font-sans);
|
||||
}
|
||||
|
||||
/* rail */
|
||||
.ctv-builder-rail-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5, 10px);
|
||||
}
|
||||
|
||||
.ctv-builder-auto-chip {
|
||||
font: 9px / 1 var(--font-mono);
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
background: var(--ctv-accent-soft);
|
||||
color: var(--ctv-accent);
|
||||
}
|
||||
|
||||
.ctv-builder-dropzone {
|
||||
display: flex;
|
||||
gap: var(--space-6, 12px);
|
||||
padding: var(--space-6, 12px);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
background: var(--ctv-bg-sunken);
|
||||
border: 1px dashed var(--border-control);
|
||||
}
|
||||
|
||||
.ctv-builder-dropzone-over {
|
||||
border-color: var(--ctv-accent);
|
||||
}
|
||||
|
||||
.ctv-builder-preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-5, 10px);
|
||||
}
|
||||
|
||||
.ctv-builder-preview-tile {
|
||||
padding: 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
.ctv-builder-toggle-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 11px;
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ctv-builder-toggle-live {
|
||||
gap: var(--space-5, 10px);
|
||||
padding: 10px 11px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid transparent;
|
||||
transition: background 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.ctv-builder-toggle-live-on {
|
||||
background: var(--ctv-live-soft);
|
||||
border-color: var(--ctv-live);
|
||||
}
|
||||
|
||||
.ctv-builder-toggle-label {
|
||||
font: var(--weight-medium) var(--text-sm) / 1.2 var(--font-sans);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctv-builder-toggle-help {
|
||||
margin-top: 2px;
|
||||
font: var(--text-2xs) / 1.35 var(--font-sans);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ctv-builder-overrides-tag {
|
||||
font: var(--text-2xs) / 1 var(--font-sans);
|
||||
color: var(--text-disabled);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--ctv-surface-2);
|
||||
border: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
.ctv-builder-live-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 7px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--ctv-live-soft);
|
||||
color: var(--ctv-live);
|
||||
font: var(--weight-semibold) 9px / 1.4 var(--font-sans);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.ctv-builder-hairline {
|
||||
height: 1px;
|
||||
background: var(--border-hairline);
|
||||
}
|
||||
|
||||
.ctv-builder-tpl-button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-5, 10px);
|
||||
padding: 10px 11px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
background: var(--ctv-bg-sunken);
|
||||
border: 1px solid var(--border-control);
|
||||
}
|
||||
|
||||
.ctv-builder-tpl-tile {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--ctv-surface-3);
|
||||
color: var(--ctv-accent);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.ctv-builder-tpl-name {
|
||||
font: var(--weight-medium) var(--text-sm) / 1 var(--font-sans);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctv-builder-tpl-desc {
|
||||
margin-top: 3px;
|
||||
font: var(--text-2xs) / 1.3 var(--font-sans);
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ctv-builder-tpl-list {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--ctv-bg-sunken);
|
||||
border: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
.ctv-builder-tpl-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 8px 9px;
|
||||
border-radius: var(--radius-xs);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ctv-builder-tpl-option-on {
|
||||
background: color-mix(in srgb, var(--action-primary) 14%, transparent);
|
||||
}
|
||||
|
||||
.ctv-builder-tpl-option-name {
|
||||
font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctv-builder-tpl-save {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 8px 9px;
|
||||
border-radius: var(--radius-xs);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans);
|
||||
}
|
||||
|
||||
.ctv-builder-tpl-empty {
|
||||
padding: 10px 11px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--ctv-bg-sunken);
|
||||
border: 1px solid var(--border-hairline);
|
||||
font: var(--text-2xs) / 1.4 var(--font-sans);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ctv-builder-config-chips {
|
||||
margin-top: var(--space-4, 8px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.ctv-builder-config-chip {
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--ctv-surface-2);
|
||||
border: 1px solid var(--border-hairline);
|
||||
font: var(--text-2xs) / 1.4 var(--font-sans);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ctv-builder-adv {
|
||||
border-top: 1px solid var(--border-hairline);
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.ctv-builder-adv-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin-bottom: var(--space-5, 10px);
|
||||
}
|
||||
|
||||
.ctv-builder-adv-head-title {
|
||||
font: var(--weight-medium) var(--text-sm) / 1 var(--font-sans);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctv-builder-adv-count {
|
||||
font: var(--text-2xs) / 1 var(--font-mono);
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
.ctv-builder-adv-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-4, 8px);
|
||||
}
|
||||
|
||||
.ctv-builder-adv-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans);
|
||||
background: var(--ctv-surface-2);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-hairline);
|
||||
transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms, border-color 200ms;
|
||||
}
|
||||
|
||||
.ctv-builder-adv-tab-on {
|
||||
background: color-mix(in srgb, var(--action-primary) 14%, transparent);
|
||||
color: var(--action-primary);
|
||||
border-color: color-mix(in srgb, var(--action-primary) 38%, transparent);
|
||||
}
|
||||
|
||||
.ctv-builder-adv-panel {
|
||||
overflow: hidden;
|
||||
transition: max-height 340ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.ctv-builder-adv-fields {
|
||||
margin-top: var(--space-6, 12px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.ctv-builder-adv-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4, 8px);
|
||||
font: var(--text-2xs) / 1.35 var(--font-sans);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ctv-builder-adv-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-4, 8px);
|
||||
}
|
||||
|
||||
.ctv-builder-adv-readonly {
|
||||
padding: 7px 9px;
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--ctv-bg-sunken);
|
||||
border: 1px solid var(--border-hairline);
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.ctv-builder-adv-readonly-key {
|
||||
font: var(--text-2xs) / 1 var(--font-sans);
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
.ctv-builder-adv-readonly-value {
|
||||
margin-top: 3px;
|
||||
font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctv-builder-adv-switchrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4, 8px);
|
||||
padding: 7px 9px;
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--ctv-bg-sunken);
|
||||
border: 1px solid var(--border-hairline);
|
||||
font: var(--text-xs) / 1.2 var(--font-sans);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* segmented control (builder-local) */
|
||||
.ctv-builder-seg {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
padding: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--ctv-bg-sunken);
|
||||
border: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
.ctv-builder-seg-thumb {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
background: var(--ctv-surface-3);
|
||||
border-radius: var(--radius-xs);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ctv-builder-seg-btn {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
font: var(--weight-medium) var(--text-2xs) / 1 var(--font-sans);
|
||||
}
|
||||
|
||||
.ctv-builder-seg-btn-on {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ctv-builder-linkbtn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font: var(--text-2xs) / 1 var(--font-sans);
|
||||
color: var(--text-secondary);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ctv-builder-disclosure {
|
||||
align-self: flex-start;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 2px 0;
|
||||
font: var(--text-2xs) / 1 var(--font-sans);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ctv-builder-sep-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-5, 10px);
|
||||
padding: 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--ctv-bg-sunken);
|
||||
border: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ctv-builder-seg-thumb,
|
||||
.ctv-builder-adv-panel,
|
||||
.ctv-builder-libcard,
|
||||
.ctv-builder-toggle-live,
|
||||
.ctv-builder-added-check {
|
||||
transition: none;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.ctv-app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -2245,4 +3057,24 @@
|
||||
grid-column: 2 / -1;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.ctv-builder {
|
||||
height: auto;
|
||||
margin: calc(var(--space-6, 12px) * -1);
|
||||
}
|
||||
|
||||
.ctv-builder-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.ctv-builder-col,
|
||||
.ctv-builder-col-rail {
|
||||
overflow: visible;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
}
|
||||
|
||||
.ctv-builder-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user