Tighten web surfaces and clean handoff
This commit is contained in:
@@ -1,25 +1,25 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #1e1e1e;
|
||||
--bg-elevated: #252526;
|
||||
--bg-elevated-2: #2d2d30;
|
||||
--bg: #151920;
|
||||
--bg-elevated: #1b212c;
|
||||
--bg-elevated-2: #202838;
|
||||
--bg-stage: #0d1016;
|
||||
--bg-stage-2: #11151d;
|
||||
--line: #3c3c3c;
|
||||
--line-soft: #2f2f33;
|
||||
--text: #cccccc;
|
||||
--line: rgba(182, 202, 227, 0.14);
|
||||
--line-soft: rgba(182, 202, 227, 0.08);
|
||||
--text: #c9d2df;
|
||||
--text-strong: #f3f6fb;
|
||||
--muted: #8f99a5;
|
||||
--muted: #95a1b2;
|
||||
--accent: #007acc;
|
||||
--accent-strong: #094771;
|
||||
--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 18px 48px rgba(0, 0, 0, 0.34);
|
||||
--tile-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
|
||||
--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;
|
||||
@@ -110,26 +110,26 @@ input[type="range"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 6px 10px;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
.topbar-creative .topbar-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
gap: 3px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topbar-creative .toolbar-control,
|
||||
.topbar-creative .toolbar-group,
|
||||
.topbar-creative .toolbar-button {
|
||||
min-height: 30px;
|
||||
padding: 4px 8px;
|
||||
min-height: 26px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.topbar-creative .toolbar-control-fade {
|
||||
min-width: 222px;
|
||||
min-width: 184px;
|
||||
}
|
||||
|
||||
.topbar-brand,
|
||||
@@ -166,10 +166,10 @@ input[type="range"] {
|
||||
.toolbar-control {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 34px;
|
||||
padding: 6px 8px;
|
||||
background: #1f1f1f;
|
||||
gap: 6px;
|
||||
min-height: 28px;
|
||||
padding: 3px 6px;
|
||||
background: rgba(17, 22, 31, 0.72);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@@ -178,13 +178,13 @@ input[type="range"] {
|
||||
}
|
||||
|
||||
.toolbar-control-fade {
|
||||
min-width: 250px;
|
||||
min-width: 192px;
|
||||
}
|
||||
|
||||
#tempo-bpm-input,
|
||||
#transition-seconds-input {
|
||||
width: 82px;
|
||||
min-width: 82px;
|
||||
width: 68px;
|
||||
min-width: 68px;
|
||||
}
|
||||
|
||||
.toolbar-label {
|
||||
@@ -198,10 +198,10 @@ input[type="range"] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 100px;
|
||||
min-height: 24px;
|
||||
padding: 4px 10px;
|
||||
font-size: 0.77rem;
|
||||
min-width: 88px;
|
||||
min-height: 22px;
|
||||
padding: 3px 8px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
@@ -245,9 +245,9 @@ input[type="range"] {
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
min-height: 34px;
|
||||
padding: 7px 14px;
|
||||
background: var(--bg-elevated-2);
|
||||
min-height: 28px;
|
||||
padding: 4px 8px;
|
||||
background: rgba(17, 22, 31, 0.74);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
@@ -287,9 +287,9 @@ a.toolbar-button {
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: 270px minmax(0, 1fr) 310px;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
grid-template-columns: 252px minmax(0, 1fr) 236px;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -300,7 +300,7 @@ a.toolbar-button {
|
||||
|
||||
.workspace-rail {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: 4px;
|
||||
align-content: start;
|
||||
overflow: auto;
|
||||
padding-right: 2px;
|
||||
@@ -308,27 +308,29 @@ a.toolbar-button {
|
||||
|
||||
.workspace-stage {
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) 220px;
|
||||
gap: 8px;
|
||||
grid-template-rows: minmax(0, 1fr) 148px;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stage-panel,
|
||||
.dock-section {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dock-section {
|
||||
padding: 8px;
|
||||
padding: 5px;
|
||||
background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
|
||||
}
|
||||
|
||||
.stage-panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
gap: 6px;
|
||||
padding: 5px;
|
||||
min-height: 0;
|
||||
background: color-mix(in srgb, var(--bg-elevated-2) 74%, transparent);
|
||||
}
|
||||
|
||||
.stage-panel-preview {
|
||||
@@ -343,14 +345,14 @@ a.toolbar-button {
|
||||
.stage-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.dock-header h2,
|
||||
.stage-header h2 {
|
||||
margin: 0;
|
||||
font-size: 0.96rem;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
@@ -361,8 +363,8 @@ a.toolbar-button {
|
||||
.panel-meta,
|
||||
.info-detail,
|
||||
.event-meta {
|
||||
margin: 3px 0 0;
|
||||
font-size: 0.78rem;
|
||||
margin: 1px 0 0;
|
||||
font-size: 0.68rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@@ -385,12 +387,12 @@ a.toolbar-button {
|
||||
.compact-form-two,
|
||||
.parameter-card label {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.control-field span,
|
||||
.parameter-card span {
|
||||
font-size: 0.78rem;
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@@ -408,13 +410,13 @@ a.toolbar-button {
|
||||
.summary-cards,
|
||||
.info-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.button-stack,
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -423,7 +425,7 @@ a.toolbar-button {
|
||||
}
|
||||
|
||||
.compact-form {
|
||||
margin-top: 10px;
|
||||
margin-top: 8px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -433,7 +435,7 @@ a.toolbar-button {
|
||||
}
|
||||
|
||||
.compact-form-two {
|
||||
margin-top: 10px;
|
||||
margin-top: 8px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
align-items: center;
|
||||
}
|
||||
@@ -442,7 +444,7 @@ a.toolbar-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 34px;
|
||||
min-height: 30px;
|
||||
padding: 0 6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
@@ -450,28 +452,28 @@ a.toolbar-button {
|
||||
.pending-status-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mini-status {
|
||||
padding: 8px 10px;
|
||||
padding: 6px 8px;
|
||||
background: #1f1f1f;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.preview-stage {
|
||||
min-height: 0;
|
||||
padding: 10px 10px;
|
||||
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 #20252f;
|
||||
border: 1px solid rgba(182, 202, 227, 0.08);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.preview-grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: 4px;
|
||||
min-height: 100%;
|
||||
align-content: center;
|
||||
}
|
||||
@@ -479,12 +481,13 @@ a.toolbar-button {
|
||||
.preview-tile {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: 168px;
|
||||
padding: 8px;
|
||||
background: linear-gradient(180deg, #1b1b1b 0%, #111318 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
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: var(--tile-shadow);
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -492,11 +495,11 @@ a.toolbar-button {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto -15% -40% auto;
|
||||
width: 62%;
|
||||
height: 62%;
|
||||
width: 52%;
|
||||
height: 52%;
|
||||
background: radial-gradient(circle, var(--tile-glow, #4d7cff), transparent 72%);
|
||||
pointer-events: none;
|
||||
opacity: 0.16;
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.preview-tile:hover {
|
||||
@@ -504,9 +507,9 @@ a.toolbar-button {
|
||||
}
|
||||
|
||||
.preview-tile.is-selected {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
border-color: rgba(0, 122, 204, 0.7);
|
||||
outline: 1px solid var(--accent);
|
||||
outline-offset: -1px;
|
||||
border-color: rgba(0, 122, 204, 0.5);
|
||||
}
|
||||
|
||||
.preview-tile.is-panel-test {
|
||||
@@ -520,12 +523,12 @@ a.toolbar-button {
|
||||
.tile-preview-shell {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height: 148px;
|
||||
border-radius: 4px;
|
||||
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(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(182, 202, 227, 0.08);
|
||||
}
|
||||
|
||||
.tile-led-ring {
|
||||
@@ -535,10 +538,10 @@ a.toolbar-button {
|
||||
|
||||
.tile-led {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
margin-left: -2px;
|
||||
margin-top: -2px;
|
||||
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);
|
||||
@@ -546,16 +549,16 @@ a.toolbar-button {
|
||||
|
||||
.tile-overlay {
|
||||
position: absolute;
|
||||
inset: 10px;
|
||||
inset: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 14px 10px 12px;
|
||||
padding: 5px 4px 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tile-label {
|
||||
font-size: clamp(1.15rem, 1vw + 0.8rem, 2rem);
|
||||
font-size: clamp(0.72rem, 0.32vw + 0.62rem, 1rem);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: rgba(237, 243, 255, 0.94);
|
||||
@@ -563,7 +566,7 @@ a.toolbar-button {
|
||||
|
||||
.tile-caption {
|
||||
margin-top: auto;
|
||||
font-size: 1rem;
|
||||
font-size: 0.68rem;
|
||||
color: rgba(214, 224, 238, 0.76);
|
||||
}
|
||||
|
||||
@@ -766,9 +769,9 @@ a.toolbar-button {
|
||||
.tile-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
align-items: end;
|
||||
font-size: 0.74rem;
|
||||
font-size: 0.58rem;
|
||||
color: rgba(214, 224, 238, 0.64);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
@@ -803,10 +806,10 @@ a.toolbar-button {
|
||||
}
|
||||
|
||||
.preview-grid-mode-leds .tile-led {
|
||||
width: 4.6px;
|
||||
height: 4.6px;
|
||||
margin-left: -2.3px;
|
||||
margin-top: -2.3px;
|
||||
width: 3.4px;
|
||||
height: 3.4px;
|
||||
margin-left: -1.7px;
|
||||
margin-top: -1.7px;
|
||||
}
|
||||
|
||||
.preview-grid-mode-tile .tile-preview-shell {
|
||||
@@ -826,9 +829,9 @@ a.toolbar-button {
|
||||
.event-item,
|
||||
.selected-tile-card,
|
||||
.info-row {
|
||||
padding: 10px;
|
||||
background: #1f1f1f;
|
||||
border: 1px solid var(--line);
|
||||
padding: 6px;
|
||||
background: rgba(17, 22, 31, 0.7);
|
||||
border: 1px solid rgba(182, 202, 227, 0.1);
|
||||
}
|
||||
|
||||
.summary-card span {
|
||||
@@ -861,7 +864,7 @@ a.toolbar-button {
|
||||
|
||||
.list-item-meta {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.76rem;
|
||||
color: var(--muted);
|
||||
@@ -879,7 +882,7 @@ a.toolbar-button {
|
||||
|
||||
.parameter-card {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.parameter-card.is-staged {
|
||||
@@ -891,12 +894,20 @@ a.toolbar-button {
|
||||
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 {
|
||||
@@ -906,13 +917,13 @@ a.toolbar-button {
|
||||
|
||||
.color-input-row {
|
||||
display: grid;
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
grid-template-columns: 50px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-input-row input[type="color"] {
|
||||
width: 44px;
|
||||
width: 50px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--line);
|
||||
@@ -921,11 +932,11 @@ a.toolbar-button {
|
||||
|
||||
.selected-tile-card {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.selected-tile-title {
|
||||
font-size: 1.08rem;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
@@ -933,13 +944,13 @@ a.toolbar-button {
|
||||
.selected-tile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 8px 10px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
@@ -959,7 +970,7 @@ a.toolbar-button {
|
||||
}
|
||||
|
||||
.pending-card {
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
background: rgba(214, 160, 77, 0.08);
|
||||
border: 1px solid rgba(214, 160, 77, 0.2);
|
||||
}
|
||||
@@ -971,7 +982,7 @@ a.toolbar-button {
|
||||
}
|
||||
|
||||
.primitive-error-banner {
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
background: var(--danger-soft);
|
||||
border: 1px solid rgba(198, 59, 30, 0.4);
|
||||
color: #ffb09e;
|
||||
@@ -984,8 +995,8 @@ a.toolbar-button {
|
||||
|
||||
.event-filter-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 170px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
grid-template-columns: 132px minmax(0, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.event-list {
|
||||
@@ -995,7 +1006,7 @@ a.toolbar-button {
|
||||
|
||||
.event-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.event-item strong {
|
||||
@@ -1038,9 +1049,9 @@ a.toolbar-button {
|
||||
|
||||
.snapshot-json {
|
||||
margin: 8px 0 0;
|
||||
max-height: 260px;
|
||||
max-height: 170px;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
background: #111317;
|
||||
border: 1px solid #20252f;
|
||||
color: #dde7f5;
|
||||
@@ -1053,8 +1064,8 @@ a.toolbar-button {
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 12px;
|
||||
border: 1px dashed var(--line);
|
||||
padding: 8px;
|
||||
border: 1px dashed rgba(182, 202, 227, 0.2);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@@ -1062,13 +1073,18 @@ a.toolbar-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
select optgroup {
|
||||
background: #141923;
|
||||
color: #cdd7e5;
|
||||
}
|
||||
|
||||
@media (max-width: 1460px) {
|
||||
.topbar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
grid-template-columns: 248px minmax(0, 1fr) 280px;
|
||||
grid-template-columns: 192px minmax(0, 1fr) 212px;
|
||||
}
|
||||
|
||||
.summary-cards {
|
||||
@@ -1091,7 +1107,7 @@ a.toolbar-button {
|
||||
}
|
||||
|
||||
.workspace-stage {
|
||||
grid-template-rows: minmax(480px, auto) auto;
|
||||
grid-template-rows: minmax(360px, auto) auto;
|
||||
}
|
||||
|
||||
.workspace-rail,
|
||||
|
||||
Reference in New Issue
Block a user