1118 lines
19 KiB
CSS
1118 lines
19 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
--bg: #151920;
|
|
--bg-elevated: #1b212c;
|
|
--bg-elevated-2: #202838;
|
|
--bg-stage: #0d1016;
|
|
--bg-stage-2: #11151d;
|
|
--line: rgba(182, 202, 227, 0.14);
|
|
--line-soft: rgba(182, 202, 227, 0.08);
|
|
--text: #c9d2df;
|
|
--text-strong: #f3f6fb;
|
|
--muted: #95a1b2;
|
|
--accent: #007acc;
|
|
--accent-strong: #0a4f8d;
|
|
--accent-soft: rgba(0, 122, 204, 0.18);
|
|
--warning: #d6a04d;
|
|
--danger: #c63b1e;
|
|
--danger-soft: rgba(198, 59, 30, 0.18);
|
|
--success: #1f8b63;
|
|
--success-soft: rgba(31, 139, 99, 0.18);
|
|
--shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
|
|
--tile-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
|
|
--radius-sm: 3px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 6px;
|
|
--font-ui: "Segoe UI Variable Text", "Segoe UI", "Bahnschrift", sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font-ui);
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
button,
|
|
select,
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
button,
|
|
select,
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 120ms ease,
|
|
border-color 120ms ease,
|
|
color 120ms ease,
|
|
box-shadow 120ms ease;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
select,
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width: 100%;
|
|
min-height: 34px;
|
|
padding: 7px 10px;
|
|
background: #1f1f1f;
|
|
color: var(--text);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
input[type="range"] {
|
|
width: 100%;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.app-shell {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
height: 100vh;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 34%),
|
|
var(--bg);
|
|
}
|
|
|
|
.topbar {
|
|
display: grid;
|
|
grid-template-columns: minmax(210px, 0.95fr) minmax(320px, 1.1fr) minmax(520px, 1.5fr);
|
|
gap: 12px;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
background: var(--bg-elevated-2);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.topbar-creative {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 3px 7px;
|
|
}
|
|
|
|
.topbar-creative .topbar-actions {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 3px;
|
|
align-items: center;
|
|
}
|
|
|
|
.topbar-creative .toolbar-control,
|
|
.topbar-creative .toolbar-group,
|
|
.topbar-creative .toolbar-button {
|
|
min-height: 26px;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.topbar-creative .toolbar-control-fade {
|
|
min-width: 184px;
|
|
}
|
|
|
|
.topbar-brand,
|
|
.topbar-strip,
|
|
.topbar-actions,
|
|
.dock-section,
|
|
.stage-panel {
|
|
min-width: 0;
|
|
}
|
|
|
|
.brand-title {
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.brand-project {
|
|
margin-top: 2px;
|
|
font-size: 0.88rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.topbar-strip,
|
|
.topbar-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.toolbar-group,
|
|
.toolbar-control {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 28px;
|
|
padding: 3px 6px;
|
|
background: rgba(17, 22, 31, 0.72);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.toolbar-control-inline {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.toolbar-control-fade {
|
|
min-width: 192px;
|
|
}
|
|
|
|
#tempo-bpm-input,
|
|
#transition-seconds-input {
|
|
width: 68px;
|
|
min-width: 68px;
|
|
}
|
|
|
|
.toolbar-label {
|
|
font-size: 0.72rem;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.status-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 88px;
|
|
min-height: 22px;
|
|
padding: 3px 8px;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.status-chip-live {
|
|
background: var(--accent-soft);
|
|
border-color: rgba(0, 122, 204, 0.45);
|
|
color: #9fd8ff;
|
|
}
|
|
|
|
.status-chip-warning {
|
|
background: rgba(214, 160, 77, 0.16);
|
|
border-color: rgba(214, 160, 77, 0.42);
|
|
color: #ebc88b;
|
|
}
|
|
|
|
.status-chip-idle {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-color: rgba(255, 255, 255, 0.08);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.status-chip-edit {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
color: var(--text);
|
|
}
|
|
|
|
.status-chip-alert {
|
|
background: var(--danger-soft);
|
|
border-color: rgba(198, 59, 30, 0.45);
|
|
color: #ffb09e;
|
|
}
|
|
|
|
.status-chip-success {
|
|
background: var(--success-soft);
|
|
border-color: rgba(31, 139, 99, 0.42);
|
|
color: #94efca;
|
|
}
|
|
|
|
.toolbar-button {
|
|
min-height: 28px;
|
|
padding: 4px 8px;
|
|
background: rgba(17, 22, 31, 0.74);
|
|
color: var(--text);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
a.toolbar-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.toolbar-button:hover:not(:disabled) {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.toolbar-button-primary {
|
|
background: var(--accent-strong);
|
|
border-color: var(--accent);
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.toolbar-button-alert {
|
|
background: rgba(198, 59, 30, 0.1);
|
|
border-color: rgba(198, 59, 30, 0.4);
|
|
color: #ffb09e;
|
|
}
|
|
|
|
.toolbar-button-alert.is-active {
|
|
background: var(--danger);
|
|
color: var(--text-strong);
|
|
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
|
|
}
|
|
|
|
.toolbar-button-ghost {
|
|
background: #1f1f1f;
|
|
}
|
|
|
|
.workspace {
|
|
display: grid;
|
|
grid-template-columns: 252px minmax(0, 1fr) 236px;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.workspace-rail,
|
|
.workspace-stage {
|
|
min-height: 0;
|
|
}
|
|
|
|
.workspace-rail {
|
|
display: grid;
|
|
gap: 4px;
|
|
align-content: start;
|
|
overflow: auto;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.workspace-stage {
|
|
display: grid;
|
|
grid-template-rows: minmax(0, 1fr) 148px;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.stage-panel,
|
|
.dock-section {
|
|
background: var(--bg-elevated);
|
|
border: 1px solid transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.dock-section {
|
|
padding: 5px;
|
|
background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
|
|
}
|
|
|
|
.stage-panel {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 5px;
|
|
min-height: 0;
|
|
background: color-mix(in srgb, var(--bg-elevated-2) 74%, transparent);
|
|
}
|
|
|
|
.stage-panel-preview {
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.stage-panel-events {
|
|
grid-template-rows: auto auto minmax(0, 1fr);
|
|
}
|
|
|
|
.dock-header,
|
|
.stage-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.dock-header h2,
|
|
.stage-header h2 {
|
|
margin: 0;
|
|
font-size: 0.84rem;
|
|
font-weight: 700;
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.dock-header p,
|
|
.stage-header p,
|
|
.preview-meta,
|
|
.panel-meta,
|
|
.info-detail,
|
|
.event-meta {
|
|
margin: 1px 0 0;
|
|
font-size: 0.68rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.stage-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stage-meta-label {
|
|
font-size: 0.74rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.control-field,
|
|
.compact-form,
|
|
.compact-form-two,
|
|
.parameter-card label {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.control-field span,
|
|
.parameter-card span {
|
|
font-size: 0.72rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.control-field strong,
|
|
.mini-status strong,
|
|
.summary-card strong {
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.parameter-stack,
|
|
.list-stack,
|
|
.button-stack,
|
|
.event-list,
|
|
.pending-session-summary,
|
|
.summary-cards,
|
|
.info-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.button-stack,
|
|
.button-row {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.button-row > * {
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.compact-form {
|
|
margin-top: 8px;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
}
|
|
|
|
.compact-form-presets {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.compact-form-two {
|
|
margin-top: 8px;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-items: center;
|
|
}
|
|
|
|
.inline-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 30px;
|
|
padding: 0 6px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.pending-status-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 6px;
|
|
}
|
|
|
|
.mini-status {
|
|
padding: 6px 8px;
|
|
background: #1f1f1f;
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.preview-stage {
|
|
min-height: 0;
|
|
padding: 4px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 14%),
|
|
linear-gradient(180deg, var(--bg-stage) 0%, var(--bg-stage-2) 100%);
|
|
border: 1px solid rgba(182, 202, 227, 0.08);
|
|
overflow: auto;
|
|
}
|
|
|
|
.preview-grid {
|
|
display: grid;
|
|
gap: 4px;
|
|
min-height: 100%;
|
|
align-content: center;
|
|
}
|
|
|
|
.preview-tile {
|
|
position: relative;
|
|
display: block;
|
|
aspect-ratio: 1 / 1;
|
|
min-height: 0;
|
|
padding: 4px;
|
|
background: linear-gradient(180deg, #151a24 0%, #10141d 100%);
|
|
border: 1px solid rgba(182, 202, 227, 0.12);
|
|
color: var(--text-strong);
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.preview-tile::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto -15% -40% auto;
|
|
width: 52%;
|
|
height: 52%;
|
|
background: radial-gradient(circle, var(--tile-glow, #4d7cff), transparent 72%);
|
|
pointer-events: none;
|
|
opacity: 0.08;
|
|
}
|
|
|
|
.preview-tile:hover {
|
|
border-color: rgba(0, 122, 204, 0.35);
|
|
}
|
|
|
|
.preview-tile.is-selected {
|
|
outline: 1px solid var(--accent);
|
|
outline-offset: -1px;
|
|
border-color: rgba(0, 122, 204, 0.5);
|
|
}
|
|
|
|
.preview-tile.is-panel-test {
|
|
outline-color: #ffffff;
|
|
}
|
|
|
|
.preview-tile.is-blackout::after {
|
|
opacity: 0.12;
|
|
}
|
|
|
|
.tile-preview-shell {
|
|
position: relative;
|
|
height: 100%;
|
|
min-height: 0;
|
|
border-radius: 3px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 16%),
|
|
linear-gradient(180deg, #060912 0%, #080d18 100%);
|
|
border: 1px solid rgba(182, 202, 227, 0.08);
|
|
}
|
|
|
|
.tile-led-ring {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.tile-led {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
margin-left: -1.5px;
|
|
margin-top: -1.5px;
|
|
border-radius: 999px;
|
|
background: var(--tile-color, #4d7cff);
|
|
opacity: var(--led-opacity, 0.85);
|
|
}
|
|
|
|
.tile-overlay {
|
|
position: absolute;
|
|
inset: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 5px 4px 4px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tile-label {
|
|
font-size: clamp(0.72rem, 0.32vw + 0.62rem, 1rem);
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: rgba(237, 243, 255, 0.94);
|
|
}
|
|
|
|
.tile-caption {
|
|
margin-top: auto;
|
|
font-size: 0.68rem;
|
|
color: rgba(214, 224, 238, 0.76);
|
|
}
|
|
|
|
.toolbar-link {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.status-chip-row {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.technical-shell {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
height: 100vh;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%),
|
|
var(--bg);
|
|
}
|
|
|
|
.technical-workspace {
|
|
display: grid;
|
|
grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.42fr);
|
|
gap: 8px;
|
|
padding: 8px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.technical-stack {
|
|
display: grid;
|
|
gap: 8px;
|
|
min-height: 0;
|
|
align-content: start;
|
|
overflow: auto;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.technical-stack-wide {
|
|
align-content: stretch;
|
|
}
|
|
|
|
.technical-section {
|
|
min-width: 0;
|
|
}
|
|
|
|
.technical-events-panel {
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.technical-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.summary-card-active {
|
|
border-color: rgba(0, 122, 204, 0.34);
|
|
}
|
|
|
|
.technical-form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.technical-field {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.technical-field-wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.technical-checkbox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 34px;
|
|
padding: 0 10px;
|
|
background: #1f1f1f;
|
|
border: 1px solid var(--line);
|
|
color: var(--text);
|
|
}
|
|
|
|
.technical-note,
|
|
.status-banner {
|
|
min-height: 34px;
|
|
padding: 8px 10px;
|
|
background: #1f1f1f;
|
|
border: 1px solid var(--line);
|
|
color: var(--text);
|
|
}
|
|
|
|
.status-banner.info {
|
|
border-color: rgba(0, 122, 204, 0.3);
|
|
color: #b7def8;
|
|
}
|
|
|
|
.status-banner.success {
|
|
border-color: rgba(31, 139, 99, 0.35);
|
|
color: #9ae7c7;
|
|
}
|
|
|
|
.status-banner.warning {
|
|
border-color: rgba(214, 160, 77, 0.35);
|
|
color: #edcb92;
|
|
}
|
|
|
|
.status-banner.error {
|
|
border-color: rgba(198, 59, 30, 0.4);
|
|
color: #ffb09e;
|
|
}
|
|
|
|
.technical-table-wrap {
|
|
overflow: auto;
|
|
border: 1px solid var(--line);
|
|
background: #1f1f1f;
|
|
}
|
|
|
|
.technical-table-wrap-grow {
|
|
min-height: 0;
|
|
}
|
|
|
|
.technical-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.81rem;
|
|
}
|
|
|
|
.technical-table th,
|
|
.technical-table td {
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.technical-table th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: var(--bg-elevated-2);
|
|
color: var(--text-strong);
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.technical-table td input,
|
|
.technical-table td select {
|
|
min-width: 92px;
|
|
}
|
|
|
|
.table-muted {
|
|
font-size: 0.72rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.technical-table-dense td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table-cell-stack {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.table-action-cell {
|
|
min-width: 96px;
|
|
}
|
|
|
|
.table-checkbox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 34px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.technical-event-list {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
@media (max-width: 1260px) {
|
|
.technical-workspace {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.technical-stack {
|
|
overflow: visible;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
.tile-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
align-items: end;
|
|
font-size: 0.58rem;
|
|
color: rgba(214, 224, 238, 0.64);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.preview-grid-mode-technical .preview-tile {
|
|
background: linear-gradient(180deg, #16181d 0%, #111317 100%);
|
|
}
|
|
|
|
.preview-grid-mode-technical .tile-preview-shell {
|
|
background:
|
|
linear-gradient(180deg, rgba(29, 61, 104, 0.18), transparent 18%),
|
|
linear-gradient(180deg, #050811 0%, #0a101a 100%);
|
|
}
|
|
|
|
.preview-grid-mode-leds .preview-tile {
|
|
background: linear-gradient(180deg, #121317 0%, #0f1014 100%);
|
|
}
|
|
|
|
.preview-grid-mode-leds .tile-preview-shell {
|
|
background: #05070c;
|
|
border-color: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.preview-grid-mode-leds .tile-caption,
|
|
.preview-grid-mode-leds .tile-meta {
|
|
color: #dbe7f5;
|
|
}
|
|
|
|
.preview-grid-mode-leds .tile-label {
|
|
color: rgba(237, 243, 255, 0.76);
|
|
}
|
|
|
|
.preview-grid-mode-leds .tile-led {
|
|
width: 3.4px;
|
|
height: 3.4px;
|
|
margin-left: -1.7px;
|
|
margin-top: -1.7px;
|
|
}
|
|
|
|
.preview-grid-mode-tile .tile-preview-shell {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%),
|
|
linear-gradient(180deg, rgba(8, 12, 18, 0.98), rgba(8, 12, 18, 0.94));
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.summary-cards {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.summary-card,
|
|
.parameter-card,
|
|
.list-item,
|
|
.event-item,
|
|
.selected-tile-card,
|
|
.info-row {
|
|
padding: 6px;
|
|
background: rgba(17, 22, 31, 0.7);
|
|
border: 1px solid rgba(182, 202, 227, 0.1);
|
|
}
|
|
|
|
.summary-card span {
|
|
display: block;
|
|
margin-top: 2px;
|
|
font-size: 0.74rem;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.list-item {
|
|
display: grid;
|
|
gap: 6px;
|
|
text-align: left;
|
|
}
|
|
|
|
.list-item strong {
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.list-item.active {
|
|
border-color: rgba(0, 122, 204, 0.7);
|
|
background: rgba(9, 71, 113, 0.32);
|
|
}
|
|
|
|
.list-item.staged {
|
|
border-color: rgba(214, 160, 77, 0.5);
|
|
}
|
|
|
|
.list-item-meta {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
font-size: 0.76rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.meta-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 18px;
|
|
padding: 2px 7px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.parameter-card {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.parameter-card.is-staged {
|
|
border-color: rgba(214, 160, 77, 0.48);
|
|
}
|
|
|
|
.parameter-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.parameter-key {
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.parameter-card select,
|
|
.parameter-card input[type="text"],
|
|
.parameter-card input[type="number"] {
|
|
min-width: 0;
|
|
}
|
|
|
|
.parameter-readout {
|
|
font-size: 0.8rem;
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.color-input-row {
|
|
display: grid;
|
|
grid-template-columns: 50px minmax(0, 1fr);
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.color-input-row input[type="color"] {
|
|
width: 50px;
|
|
height: 34px;
|
|
padding: 0;
|
|
border: 1px solid var(--line);
|
|
background: #1f1f1f;
|
|
}
|
|
|
|
.selected-tile-card {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.selected-tile-title {
|
|
font-size: 0.98rem;
|
|
font-weight: 700;
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.selected-tile-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 6px;
|
|
}
|
|
|
|
.info-row {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.info-value {
|
|
color: var(--text-strong);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.pending-session-summary {
|
|
min-height: 48px;
|
|
}
|
|
|
|
.pending-card {
|
|
padding: 8px;
|
|
background: rgba(214, 160, 77, 0.08);
|
|
border: 1px solid rgba(214, 160, 77, 0.2);
|
|
}
|
|
|
|
.pending-card strong {
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
color: #ebc88b;
|
|
}
|
|
|
|
.primitive-error-banner {
|
|
padding: 8px;
|
|
background: var(--danger-soft);
|
|
border: 1px solid rgba(198, 59, 30, 0.4);
|
|
color: #ffb09e;
|
|
}
|
|
|
|
.primitive-error-banner strong {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.event-filter-bar {
|
|
display: grid;
|
|
grid-template-columns: 132px minmax(0, 1fr);
|
|
gap: 4px;
|
|
}
|
|
|
|
.event-list {
|
|
overflow: auto;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.event-item {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.event-item strong {
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.event-info {
|
|
border-left: 3px solid var(--accent);
|
|
}
|
|
|
|
.event-warning {
|
|
border-left: 3px solid var(--warning);
|
|
}
|
|
|
|
.event-error {
|
|
border-left: 3px solid var(--danger);
|
|
}
|
|
|
|
.event-code {
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
padding: 2px 8px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.info-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.raw-snapshot summary {
|
|
cursor: pointer;
|
|
color: var(--muted);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.snapshot-json {
|
|
margin: 8px 0 0;
|
|
max-height: 170px;
|
|
overflow: auto;
|
|
padding: 8px;
|
|
background: #111317;
|
|
border: 1px solid #20252f;
|
|
color: #dde7f5;
|
|
font-size: 0.76rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.filter-input {
|
|
margin: 0;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 8px;
|
|
border: 1px dashed rgba(182, 202, 227, 0.2);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
select optgroup {
|
|
background: #141923;
|
|
color: #cdd7e5;
|
|
}
|
|
|
|
@media (max-width: 1460px) {
|
|
.topbar {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.workspace {
|
|
grid-template-columns: 192px minmax(0, 1fr) 212px;
|
|
}
|
|
|
|
.summary-cards {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1120px) {
|
|
body {
|
|
overflow: auto;
|
|
}
|
|
|
|
.app-shell {
|
|
height: auto;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.workspace {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.workspace-stage {
|
|
grid-template-rows: minmax(360px, auto) auto;
|
|
}
|
|
|
|
.workspace-rail,
|
|
.workspace-stage {
|
|
overflow: visible;
|
|
}
|
|
}
|