diff --git a/docs/PREVIEW.md b/docs/PREVIEW.md index 1dfe630..3bbb068 100644 --- a/docs/PREVIEW.md +++ b/docs/PREVIEW.md @@ -46,8 +46,12 @@ Web client (`--preview` and friends in `web/src/styles.css`): | The previewed pane's titlebar | Tinted in the preview hue, at full strength, in place of the focused pane's accent tint. | | The canvas | A `preview` chip, top right, and a dashed inset ring. | | A throwaway tab | Dashed border, italic label. | -| The sidebar row being previewed | Preview tint + ring, over whatever open/focused state the row already had. | -| A hovered sidebar row | Washed with the preview hue, because hovering is what previews it. | +| The sidebar row being previewed | Filled with the preview hue, over whatever open/focused state the row already had. | +| A hovered sidebar row, and the keyboard cursor on a session | A lighter wash of the same hue, because both are what previews a row. | + +Rows say it with fill, not with an edge: the only ring left in the session list +is `.is-active`'s, which means "open in a pane". The dashed edges belong to the +pane — the canvas ring and the throwaway tab. The hue is a palette token, not a fixed colour: a palette whose accent already sits on it moves it (`--preview-h`), so "previewing" and "picked" never collide. diff --git a/web/src/styles.css b/web/src/styles.css index 47ee495..e8a81d7 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -101,10 +101,9 @@ oklch(0.99 0.005 var(--preview-h)), oklch(0.19 0.045 var(--preview-h)) ); - --preview-tint: light-dark( - oklch(0.55 0.16 var(--preview-h) / 0.12), - oklch(0.78 0.14 var(--preview-h) / 0.16) - ); + /* Opaque, not a wash: the previewed row reads as a fill, and a fill has to + land on the same colour whatever tier the row was already painted. */ + --preview-tint: color-mix(in oklab, var(--preview) 30%, var(--surface-2)); --preview-ring: light-dark( oklch(0.55 0.16 var(--preview-h) / 0.5), oklch(0.78 0.14 var(--preview-h) / 0.6) @@ -1168,11 +1167,16 @@ textarea { background: color-mix(in oklab, var(--accent) 16%, var(--surface-2)); } -/* Where the keyboard walk (j/k) is standing. Distinct from `.is-active`: this - is a cursor, not a statement about what is mounted, so it reads as a ring - rather than a fill and the two can sit on the same row. */ +/* Where the keyboard walk (j/k) is standing. On a session row the cursor is + also what previews it, so it reads exactly like a hover — the preview hue, + deepening to the full fill once the preview lands. A folder row previews + nothing, so it keeps the plain cursor ring. */ .tree-leaf.is-highlighted { - box-shadow: inset 0 0 0 2px var(--preview-ring); + background: color-mix(in oklab, var(--preview) 12%, var(--surface-2)); +} + +.tree-leaf.is-highlighted[data-status="running"] { + background: color-mix(in oklab, var(--preview) 18%, var(--surface-2)); } .tree-folder-header.is-highlighted { @@ -1198,9 +1202,10 @@ textarea { preview of an already-open session still reads as provisional. */ .tree-leaf.is-previewing, .tree-leaf.is-previewing[data-status="running"], -.tree-leaf.is-previewing.is-active { +.tree-leaf.is-previewing.is-active, +.tree-leaf.is-previewing.is-highlighted { background: var(--preview-tint); - box-shadow: inset 0 0 0 2px var(--preview-ring); + box-shadow: none; } /* Exited sessions recede: dimmed name + an "exited" badge carry status, so it's @@ -3081,7 +3086,6 @@ input.leaf-rename:focus { .mv-pane.is-preview .attach-header, .mv-pane.is-preview.is-focused .attach-header { background: color-mix(in oklab, var(--preview) 34%, var(--surface)); - box-shadow: inset 0 -1px 0 var(--preview-ring); opacity: 1; } /* A pane with no session yet: a quiet hint rather than blank terminal black. */