Put the top bar on the surface as icons, and give palettes a real chooser
Top bar: every document command is an icon button in a run — panes, new/open, undo/history/redo, cut/copy/paste/duplicate, snapshots — with the title and status in the middle and export, share and account on the right. Pane toggles are pictures of the window with that pane filled in. Stage bar: tracing, onion and passepartout are all the same toggle-plus-settings split button, followed by one zoom group, with fit inside it. Popovers: one `menu/popover`, measured against its button and dismissed by a scrim, replaces the <details> popouts that never closed on an outside click. Palette: the strip ends in a palette button whose popover lists every palette with its swatch strip, renames the open one in place, and marks the ones on the stage. An info badge says when the palette being edited is not one the stage draws in at the playhead; both ends of a palette-lane blend count. `clip/palette-at` is the resolver's root palette lookup, pulled out so the strip asks the same question the renderer answers. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Olive Vaughn
parent
eca1a96b82
commit
f238ff4f62
15 changed files with 564 additions and 313 deletions
|
|
@ -155,8 +155,6 @@ audio { display: none; }
|
|||
/* Which panes are open, in the top bar. Lower-case words rather than icons: the
|
||||
three panes have names and the names are what the rest of the chrome calls
|
||||
them. */
|
||||
.panes > button { color: var(--dim); }
|
||||
.panes > button.on { color: var(--fg); }
|
||||
|
||||
/* A zoom readout that is also the way back to 1:1, so it is a button that looks
|
||||
like the number it shows. Tabular figures, because the + beside it must not
|
||||
|
|
@ -313,8 +311,29 @@ button.retry { border-color: var(--sel); color: var(--sel); }
|
|||
}
|
||||
|
||||
.top .brand { color: var(--dim); letter-spacing: .14em; text-transform: uppercase; }
|
||||
.top .status {
|
||||
/* The top bar's icon runs: plain glyphs until pointed at, accented when on.
|
||||
A run is one group; `.sep` divides one run from the next. */
|
||||
.icons { display: flex; align-items: center; gap: 1px; }
|
||||
.top button.ico { border-color: transparent; background: none; padding: 3px 5px; }
|
||||
.top button.ico:hover:not(:disabled) { background: var(--sunk); border-color: var(--hair); }
|
||||
.top button.ico.on { background: var(--sel-bg); border-color: var(--sel); color: var(--sel); }
|
||||
.top button.ico > svg {
|
||||
width: 16px; height: 16px;
|
||||
fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
.top button.ico svg .fill, .panes svg rect:not(.frame) { fill: currentColor; stroke: none; }
|
||||
.top .sep { height: 16px; }
|
||||
|
||||
/* What this is and what it is doing: the middle of the bar, and the room in it. */
|
||||
.top .doc {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
}
|
||||
.top .status {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -322,7 +341,13 @@ button.retry { border-color: var(--sel); color: var(--sel); }
|
|||
color: var(--dim);
|
||||
}
|
||||
|
||||
.project-title { max-width: 22vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.project-title {
|
||||
max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
border-color: transparent; background: none; font-weight: 600;
|
||||
}
|
||||
.project-title:hover:not(:disabled) { border-color: var(--line); }
|
||||
|
||||
.panes button.ico:not(.on) { color: var(--dim); }
|
||||
.project-name { width: 180px; }
|
||||
.export-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .45); }
|
||||
.export-dialog {
|
||||
|
|
@ -417,11 +442,6 @@ button.link { border: 0; background: none; padding: 0; color: var(--sel); cursor
|
|||
.index-list a:hover { color: var(--sel); }
|
||||
a.brand { text-decoration: none; }
|
||||
|
||||
/* Undo, its list, redo: one group. */
|
||||
.undo { display: flex; gap: 0; }
|
||||
.undo > button { border-radius: 0; }
|
||||
.undo > button:first-child { border-radius: 2px 0 0 2px; }
|
||||
.undo > .undo-list { padding: 0 4px; margin-right: 4px; border-left: 0; border-radius: 0 2px 2px 0; }
|
||||
.menu.menu-left { left: 0; right: auto; }
|
||||
|
||||
/* A menu dropping out of a PANE HEAD. Fixed and placed by `ui/menu` against the
|
||||
|
|
@ -1650,7 +1670,6 @@ button.share-button:hover, button.share-button.on { filter: brightness(1.1); }
|
|||
background-size: 8px 8px;
|
||||
background-position: 0 0, 4px 4px;
|
||||
}
|
||||
.palette .cell.clear { grid-column: span 2; width: 36px; }
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
on the stage: the tools' marks, in stage pixels (the SVG's viewBox), and their
|
||||
|
|
@ -1697,7 +1716,6 @@ button.share-button:hover, button.share-button.on { filter: brightness(1.1); }
|
|||
background: linear-gradient(135deg, #3a3f52 0 50%, #e8d9a8 50% 100%);
|
||||
color: #fff; font-size: 11px; line-height: 1; text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
|
||||
}
|
||||
.palette .cell.map { grid-column: span 2; width: 36px; }
|
||||
.palette .cell { position: relative; }
|
||||
.palette .cell .badge {
|
||||
position: absolute; right: -2px; bottom: -2px;
|
||||
|
|
@ -1726,32 +1744,87 @@ button.share-button:hover, button.share-button.on { filter: brightness(1.1); }
|
|||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Palette assets stay in the existing narrow tool strip. */
|
||||
.toolbox .palette-assets { display: block; width: 44px; flex: 0 0 auto; }
|
||||
.palette-assets summary { cursor: pointer; font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; padding: 3px; }
|
||||
.palette-popout, .view-popout { position: fixed; z-index: 100; background: var(--pane); color: var(--fg); border: 1px solid var(--line); padding: 10px; box-shadow: 0 4px 16px #0008; line-height: 1.4; }
|
||||
.palette-popout { left: 52px; width: 230px; display: flex; flex-wrap: wrap; gap: 7px; }
|
||||
.palette-popout strong { width: 100%; overflow-wrap: anywhere; }
|
||||
.palette-popout select { width: 100%; }
|
||||
.view-popout { right: 16px; width: 240px; }
|
||||
/* The palette's own settings, at the foot of the strip: drawn as a tool button,
|
||||
because it is one more thing in the strip you press. */
|
||||
.palette-assets > button {
|
||||
width: 34px; height: 30px; padding: 0;
|
||||
display: grid; place-items: center;
|
||||
border: 1px solid transparent; border-radius: 4px; background: none;
|
||||
}
|
||||
.palette-assets > button:hover:not(:disabled) { background: var(--sunk); border-color: var(--hair); }
|
||||
.palette-assets > button.on { background: var(--sel-bg); border-color: var(--sel); }
|
||||
.palette-assets svg path { fill: var(--fg); }
|
||||
.palette-assets svg circle { fill: var(--chrome); }
|
||||
.palette-assets > button.on svg circle { fill: var(--sel-bg); }
|
||||
|
||||
/* A popover's panel: settings, not commands, so narrower than a menu and laid
|
||||
out as a form. Placed and dismissed by `ui/menu`. */
|
||||
.menu.popout { width: 240px; min-width: 0; padding: 10px; line-height: 1.4; }
|
||||
.menu.popout:has(.palette-popout) { width: 280px; }
|
||||
.palette-popout { display: grid; gap: 8px; }
|
||||
.palette-popout .row { margin: 0; }
|
||||
|
||||
/* Every palette as its strip and its name: what you would switch to, seen
|
||||
before you switch. The open one is the selected row. */
|
||||
.palette-list { display: grid; gap: 1px; max-height: 50vh; overflow: auto; }
|
||||
.palette-row { display: flex; align-items: center; gap: 2px; border-radius: 3px; }
|
||||
.palette-row.on { background: var(--sel-bg); }
|
||||
.palette-row .choose {
|
||||
flex: 1; min-width: 0;
|
||||
display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px;
|
||||
padding: 5px 6px; border: 1px solid transparent; border-radius: 3px; background: none; text-align: left;
|
||||
}
|
||||
.palette-row button.choose:hover:not(:disabled) { background: var(--sunk); border-color: var(--hair); }
|
||||
.palette-row.on button.choose { border-color: var(--sel); }
|
||||
.palette-row.on button.choose:hover { background: var(--sel-bg); }
|
||||
.palette-row .strip { grid-column: 1 / -1; }
|
||||
.palette-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.palette-row.on .name { font-weight: 600; color: #14395f; }
|
||||
.palette-row .palette-name { grid-column: 1 / -1; width: 100%; min-width: 0; }
|
||||
.palette-row .rename { align-self: stretch; padding: 0 7px; border-color: transparent; background: none; }
|
||||
.palette-row .rename:hover:not(:disabled) { border-color: var(--sel); background: #fff; }
|
||||
|
||||
.strip { display: flex; height: 14px; border: 1px solid rgba(0, 0, 0, .35); border-radius: 2px; overflow: hidden; }
|
||||
.strip i { flex: 1; }
|
||||
|
||||
/* On the stage at the playhead. */
|
||||
.on-stage { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
|
||||
|
||||
/* A palette being edited that the stage is not drawing in here. Information,
|
||||
not alarm: the accent of a selection, not of a warning. */
|
||||
.palette-assets-wrap { position: relative; }
|
||||
.palette-info {
|
||||
position: absolute; top: -3px; right: -5px;
|
||||
width: 13px; height: 13px; border-radius: 50%;
|
||||
display: grid; place-items: center;
|
||||
background: var(--sel); color: #fff;
|
||||
font: italic 600 9px/1 Georgia, serif;
|
||||
cursor: help;
|
||||
box-shadow: 0 0 0 1.5px var(--chrome);
|
||||
}
|
||||
.info-card {
|
||||
position: fixed; z-index: 60;
|
||||
width: 240px; padding: 8px 10px;
|
||||
display: grid; gap: 3px;
|
||||
background: var(--pane); color: var(--fg);
|
||||
font: 11px/1.45 "Lucida Grande", "Segoe UI", system-ui, sans-serif;
|
||||
border: 1px solid var(--sel); border-left-width: 3px; border-radius: 3px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
|
||||
cursor: default;
|
||||
}
|
||||
.info-card strong { color: #14395f; }
|
||||
.view-popout label { display: block; margin-bottom: 8px; }
|
||||
.view-popout input { width: 100%; }
|
||||
.passepartout-controls summary { cursor: pointer; }
|
||||
.view-popout label:last-child { margin-bottom: 0; }
|
||||
.view-popout input, .view-popout select { width: 100%; }
|
||||
|
||||
/* An overlay switch and its settings: one object, two parts. */
|
||||
.overlay > .menu-wrap > button { margin-left: -1px; padding: 1px 5px; border-radius: 0 2px 2px 0; }
|
||||
.overlay > button { border-radius: 2px 0 0 2px; }
|
||||
.stage-wrap { flex: 0 0 auto; }
|
||||
|
||||
|
||||
.onion-skin { position: absolute; inset: 0; pointer-events: none; image-rendering: pixelated; }
|
||||
.onion-controls { display: inline-flex; align-items: center; }
|
||||
.onion-controls > button { border-radius: 2px 0 0 2px; }
|
||||
.onion-controls summary {
|
||||
display: block; cursor: pointer; list-style: none;
|
||||
color: var(--fg); background: var(--pane); border: 1px solid var(--line);
|
||||
border-radius: 0 2px 2px 0; margin-left: -1px; padding: 1px 5px;
|
||||
}
|
||||
.onion-controls summary:hover, .onion-controls details[open] > summary { background: #fff; }
|
||||
.onion-controls summary::-webkit-details-marker { display: none; }
|
||||
.onion-controls .view-popout { line-height: 1.4; }
|
||||
.onion-controls select { width: 100%; }
|
||||
|
||||
|
||||
/* Expanded automation lanes expose editable keyframe dots. */
|
||||
button.tl-key { pointer-events: auto; padding: 0; border: 0; width: 11px; height: 11px; margin: -5.5px; cursor: ew-resize; z-index: 4; opacity: 1; border-radius: 50%; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue