/* style — form controls, the model dropdown, dynamic fields.
One section of the old style.css. The pieces load in filename order
and that order is the cascade, so do not rearrange them. */
/* ---------- form controls ---------- */
input[type=text], input[type=password], input[type=number], select, textarea {
width: 100%;
background: var(--card);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--radius-sm);
padding: 7px 10px;
font-size: 12px;
outline: none;
font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea {
resize: vertical; min-height: 64px; border-radius: var(--radius);
user-select: text; line-height: 1.45;
}
textarea::placeholder, input::placeholder { color: var(--text-faint); }
select {
appearance: none; -webkit-appearance: none; cursor: pointer;
background-color: var(--card);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
padding-right: 28px;
}
/* dropdown option list: force dark bg so items stay readable.
Through the tokens, not the digits. These four were the only greys in the
stylesheets written out by hand, and a hand-written grey is a surface the
theme cannot reach -- the day the surfaces moved, this list would have kept
the old design's colours while everything around it changed. */
select option, select optgroup {
background-color: var(--card);
color: var(--text);
}
select option:checked, select option:hover {
background-color: var(--card-hover);
color: var(--text-bright);
}
/* custom model dropdown with provider icons */
#model-dd { position: relative; }
/* TALLER. Simon: "Increase the height of the model drop-down selection menu
in the create space." 9px of padding made a 42px button under a 30px
tab strip; a minimum of 50 gives the one control that decides what the
whole column does the weight of a heading, and the provider mark room to
breathe. min-height rather than more padding, so a long name that wraps
grows the button rather than overflowing it. */
#model-dd-btn {
width: 100%; display: flex; align-items: center; gap: 10px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 9px 12px; min-height: 50px; box-sizing: border-box;
color: var(--text); font-weight: 600; font-size: 13px;
cursor: pointer; font-family: inherit;
}
#model-dd-btn:hover { border-color: var(--border-dash); }
#model-dd-icon { display: flex; flex: none; }
.dd-chev { margin-left: auto; color: var(--text-dim); font-size: 10px; }
/* WIDER AND TALLER, ON PURPOSE. Simon: "increase the width of the sub menu
for the video models and increase the height of it so you don't have to
scroll to view the models... high enough that we can basically see all
the models there and be able to pick a lot quicker." The Video tab is
the deep one — Image to video, Reference to video and Video edit
sectioned together — and 360px was maybe eight rows before the list
itself started scrolling.
Width: was tied exactly to the button (`left:0; right:0`), so it could
never be wider than the make column itself — which on a docked node-
space column can be as narrow as 250px, nowhere near enough for an icon,
a name and a badge to breathe. `right:0` dropped for an explicit width
instead, wide enough to read comfortably; it is allowed to overhang the
column's right edge (it is `position:absolute`, `z-index:30`, floating
above whatever is beside the panel — the graph or the gallery — same as
any other dropdown that outgrows its trigger).
Height: capped at 82% of the viewport rather than a bigger flat pixel
number, so a still-tall list keeps its own scrollbar rather than running
off the bottom of a short window — the goal is "usually no scrolling",
not "never has a scrollbar no matter how small the window is". */
/* `position: fixed`, not `absolute` — deliberately. The docked make column
(`#main`) carries `overflow-x: hidden`/`overflow-y: auto` of its own (see
nle/02-panes.css, "TWO PANES, TWO SCROLLBARS"), and an absolutely
positioned list is clipped by every `overflow` ancestor between it and
its containing block, not just the nearest one — so a list wide or tall
enough to genuinely outgrow the column would have been cut off flush
with #main's own edge, which is the opposite of what widening it was
for. Fixed positioning escapes that entirely; the coordinates are set
in JS off the button's own rect (55-init-panel.js) since a fixed
element has no parent offset to inherit `top`/`left` from the way an
absolute one did. */
#model-dd-list {
/* z-index 30 was fine parked inside the make column's own stacking
context; `position: fixed` puts this over the whole window now, so it
takes the actual dropdowns-and-context-menus tier instead. */
position: fixed; width: 420px; z-index: var(--z-menu);
background: #141416; border: 1px solid var(--border-dash); border-radius: var(--radius);
overflow-y: auto; max-height: 92vh; /* the real cap is set per open, from the button — 55-init-panel.js */
box-shadow: 0 10px 30px var(--scrim-mid);
}
/* A LITTLE SHORTER, SO MORE OF THE LIST FITS. Simon: "slightly reduce the
height of these dropdowns." 5px of padding on 12.5px type made a 32px row;
3px on 12px makes 26, which is three or four more models on screen in the
same window and still a comfortable target. The stacking fix above is what
makes the bottom of the list reachable at all — this is what means you have
to go looking for the bottom less often. */
.dd-item {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 3px 12px; background: none; border: none;
color: var(--text); font-size: 12px; font-weight: 600;
cursor: pointer; text-align: left; font-family: inherit;
}
.dd-item:hover { background: var(--accent-soft); }
.dd-sec {
padding: 7px 12px 3px; font-size: 9px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-faint);
}
.dd-sec + .dd-item { border-top: none; }
.dd-item .check { margin-left: auto; color: var(--accent); font-weight: 800; }
/* ROOMIER ROWS WITH WHAT EACH MODEL CAN MAKE (13c-model-facts.js, 28 Sep):
Simon, with another app's list: "Give the menu a bit more space so we can
fit in all the details." Icon in a rounded tile, the name on top, chips for
the resolution range, the duration range and a tag or two underneath. */
#model-dd-list { width: 460px; padding: 6px; }
#model-dd-list .dd-item { gap: 12px; padding: 7px 10px; border-radius: 8px; align-items: center; }
#model-dd-list .dd-item:hover { background: rgba(255,255,255,.05); }
#model-dd-list .dd-item.on { background: rgba(255,255,255,.07); }
#model-dd-list .dd-sec { padding: 10px 10px 4px; }
.dd-ictile { width: 38px; height: 38px; flex: none; border-radius: 8px; background: #1c1c20; border: 1px solid #26262b;
display: flex; align-items: center; justify-content: center; }
.dd-ictile .micon { width: 22px; height: 22px; }
.dd-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.dd-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dd-name { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mfacts { display: flex; flex-wrap: wrap; gap: 4px; }
.mfact { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 4px;
background: #222226; color: var(--text-dim); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.mfact svg { width: 10px; height: 10px; opacity: .75; }
.mfact.mtakes { gap: 5px; padding: 0 7px; }
.mfact.mtakes svg { width: 11px; height: 11px; opacity: .85; }
#model-dd-list .dd-item .check { flex: none; }
/* Larger, uniform-grey provider marks (no coloured chips). The favicon is
flattened to a single grey silhouette via brightness(0)+invert. */
.micon {
width: 24px; height: 24px; flex: none;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; line-height: 1;
color: var(--text-dim); background: none; border: none;
position: relative; overflow: hidden;
}
.micon img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: contain; background: none;
}
/* monochrome (black currentColor) brand SVGs → light grey; colour ones as-is */
.micon.mono img { filter: brightness(0) invert(0.78); }
/* Marks we draw ourselves (the crop tools) are inline SVG in currentColor, so
they take the tone of whatever they sit in — no filter, no file to load. */
.micon.drawn svg { width: 78%; height: 78%; display: block; }
.dd-item .micon { width: 22px; height: 22px; }
#model-desc { display: none; } /* minimal: hide the mode chip + model info line */
/* A short note under the model dropdown (m.cardNote, 13-model-cards.js). */
#model-note { margin: 6px 2px 0; font-size: 11px; color: var(--text-dim); line-height: 1.4; }
#model-note.hidden { display: none; }
/* mode/tier picker — small pill buttons directly under the model dropdown.
#model-mode-tabs (which "way in" — image/text/reference) sits above
#model-tier (speed) when a model has both; same pill, same spacing. */
#model-tier, #model-mode-tabs { margin-top: 6px; }
/* THE MODEL ROW. Simon: "make it so the area where you select each of the
AI models is a bit more obvious which model is selected... a bit more
space there... in Seedance 2.0 when you choose Standard, Fast, or Mini,
make it a bit more obvious that that's where you're choosing the model."
The two classic strips (#model-tier, #model-mode-tabs) are a labelled
row: MODEL, then the choices as one segmented control sharing the width,
at the pills' height, the chosen one solid. The .tier-tab class is worn
by chips all over Create and the crop rooms, so the size lives on the
two hosts, not on the class. */
#model-tier, #model-mode-tabs {
display: flex; align-items: center; gap: 10px;
margin: 10px 0 4px; padding: 6px 6px 6px 12px;
border: 1px solid var(--border); border-radius: var(--radius-ctl); background: var(--card);
}
#model-tier.hidden, #model-mode-tabs.hidden { display: none; }
#model-tier .mode-auto, #model-mode-tabs .mode-auto { padding: 2px 0; }
.tier-lab {
flex: none; font-size: 10px; font-weight: 700; letter-spacing: .6px;
text-transform: uppercase; color: var(--text-dim);
}
#model-tier .tier-tabs, #model-mode-tabs .tier-tabs { flex: 1 1 auto; gap: 4px; }
#model-tier .tier-tab, #model-mode-tabs .tier-tab {
flex: 1 1 0; min-width: 0; text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size: 11px; font-weight: 700; padding: 0 10px; height: 28px; line-height: 26px;
background: var(--bg); color: var(--text-dim);
}
#model-tier .tier-tab:hover, #model-mode-tabs .tier-tab:hover { color: var(--text); }
#model-tier .tier-tab.active, #model-mode-tabs .tier-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.mode-auto { font-size: 10.5px; color: var(--text-faint); padding: 2px 2px 0; }
.tier-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.tier-tab {
flex: none; cursor: pointer; font-family: inherit;
border: 1px solid var(--border); background: var(--card);
color: var(--text-dim); font-size: 10px; font-weight: 600;
padding: 3px 10px; border-radius: var(--radius-ctl);
}
.tier-tab:hover { color: var(--text); border-color: var(--border-dash); }
.tier-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* A mode the provider does not publish — still there, still says why. */
.tier-tab.disabled, .tier-tab:disabled {
cursor: default; opacity: .45;
}
.tier-tab.disabled:hover, .tier-tab:disabled:hover { color: var(--text-dim); border-color: var(--border); }
/* minimal: drop the "Input images…" labels above each reference slot */
#input-slots .slot-label { display: none; }
.mode-chip {
display: inline-block; margin-right: 7px; vertical-align: 1px;
font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
padding: 2px 8px; border-radius: 3px;
background: var(--accent-soft); color: var(--accent);
}
.mode-chip.edit { background: rgba(90, 162, 255, .15); color: var(--blue); }
.row { display: flex; gap: 6px; }
.row > input { flex: 1; }
/* SAM detect preview */
#detect-section { margin-top: 8px; }
#btn-detect { width: 100%; }
#btn-detect:disabled { opacity: .5; cursor: default; }
.detect-preview {
margin-top: 8px; position: relative;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface-deep); overflow: hidden; min-height: 40px;
}
.detect-preview img { display: block; width: 100%; height: auto; }
.detect-preview .dp-note {
padding: 8px 10px; font-size: 10px; color: var(--text-dim);
display: flex; align-items: center; gap: 7px;
}
.detect-preview .pend-ring { width: 13px; height: 13px; }
/* dynamic fields: compact 2-col pills.
Simon: "restyle field-option dropdowns (resolution, ratio, etc.) to match
button." They were the same card/border/text as a button but square —
var(--radius-sm) instead of .btn's 999px — and static, with no hover.
Both fixed here so a resolution or ratio field reads as the same kind of
control as Generate, just smaller: full pill radius, and the card lightens
under the pointer the same way .btn:hover does. */
#fields { display: flex; flex-wrap: wrap; gap: var(--ctl-gap); margin-top: 8px; }
#fields .field {
flex: 1 1 calc(50% - 3px); min-width: 120px; max-width: var(--ctl-max); margin: 0;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius-ctl); padding: 6px 14px 7px;
}
#fields .field:hover { background: var(--card-hover); border-color: var(--border-dash); }
#fields .field .field-label {
margin-bottom: 3px; letter-spacing: 0.6px; font-size: 9px; color: var(--text-faint);
}
/* THE PLAIN FIELD IS A PILL TOO. A text or number box used to be a card
with its name above the box: taller than the select pill next to it, and
taller again when the name wrapped ("Target FPS (blank = keep)"), so a
row of two controls had two heights. Name left, box right, one height. */
#fields .field.inwrap {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
height: var(--ctl-h); padding: 0 var(--sp-5); box-sizing: border-box;
}
#fields .field.inwrap .field-label { margin: 0; flex: none; white-space: nowrap; text-transform: uppercase; }
#fields .field.inwrap input[type=text], #fields .field.inwrap input[type=number] {
flex: 1 1 auto; min-width: 0; width: auto; text-align: right; font-size: 11px;
}
#fields .field.inwrap.has-hint { height: auto; flex-wrap: wrap; padding: 9px var(--sp-5); }
#fields .field.inwrap .res-hint { flex: 1 1 100%; pointer-events: none; }
#fields .field select, #fields .field input[type=text], #fields .field input[type=number] {
background-color: transparent; border: none; padding: 0; border-radius: 0; font-weight: 600;
}
#fields .field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 0 center; padding-right: 16px;
}
/* Select fields as one-row pills: label left, value right; the real