jgamboaandClaude
5ed029a2b8
Three things looked wrong, three different causes. The selected row carried a border. 7.css outlines tr.highlighted (#aaddfa) on top of its fill, and we had been restating that outline in the new blue — so the band had an edge, and on the cursor row the dotted focus rect made three concentric outlines around a single row. The reserved 1px border stays (it is what stops selection from shifting rows) but is transparent in every state; the fill paints under it, since background-clip is border-box. --w7-sel-bd and --w7-sel-bd-idle are gone with it. The context menu highlighted items with 7.css's translucent gradient wash — the same gradient the ListView selection just dropped. It now uses --w7-sel-bg, so selection reads identically wherever it appears. The hover-off animation was button.css bleeding into menu items, which ARE buttons: button::before is a glow overlay that fades out over a full second, and menu.css suppresses it with content:none on the :hover arm ONLY — so leaving an item brought the pseudo back with opacity animating 1 -> 0, a ghost trailing the pointer. Killing content in every state removes it. Same family, also fixed: button:focus runs pulse-anim infinitely, and this menu moves real focus between items for keyboard nav. menu-probe.ts now checks the highlight too, using hover-probe's :hover -> .simhover rewrite: it measures colour spread down a text-free strip of a force-hovered item, so "is it flat?" is a measurement. Verified the check can fail by injecting the old wash into the built stylesheet — spread 9, exit 2; the flat fill reads spread 0 at exactly #cbe8f6. The harness lost its selection outlines and nothing else, in both themes. Co-Authored-By: Claude <noreply@anthropic.com>
293 lines
14 KiB
HTML
293 lines
14 KiB
HTML
<!doctype html>
|
|
<!--
|
|
Skin harness — a static gallery rendered headlessly by scripts/shot.ts so the
|
|
Win7 skin can be LOOKED AT during development instead of inferred from a
|
|
clean build log. Not shipped: it lives outside ui/src, so the Angular build
|
|
never sees it.
|
|
|
|
Each section pairs 7.css's own documented markup ("reference") with what the
|
|
app currently renders ("ours"). Where those two disagree visually, 7.css is
|
|
not reaching our component — that mismatch is the whole point of the page.
|
|
|
|
Layout here uses INLINE STYLES on purpose: Tailwind v4 only emits utilities it
|
|
found while scanning ui/src, so utility classes used only here would not exist
|
|
in the built stylesheet. {{STYLES}} is replaced by scripts/shot.ts with the
|
|
real hashed build output.
|
|
-->
|
|
<html class="win7" lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>7.css harness</title>
|
|
<link rel="stylesheet" href="{{STYLES}}" />
|
|
<style>
|
|
body { margin: 0; padding: 20px; }
|
|
h2 { font-size: 13px; margin: 22px 0 6px; opacity: 0.75; }
|
|
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
|
|
.cell { min-width: 0; }
|
|
.cell > figcaption {
|
|
font-size: 11px; opacity: 0.6; margin-bottom: 5px; text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.stage { padding: 14px; background: #6ba5d7; border-radius: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>1 — Window frame, glass, drop shadow, active colour</h2>
|
|
<div class="pair">
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>reference — .window.glass.active</figcaption>
|
|
<div class="stage">
|
|
<div class="window glass active" style="width: 320px">
|
|
<div class="title-bar">
|
|
<div class="title-bar-text">miniSCP</div>
|
|
<div class="title-bar-controls">
|
|
<button aria-label="Minimize"></button>
|
|
<button aria-label="Maximize"></button>
|
|
<button aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="window-body"><p>Glass frame, 6px radius, drop shadow.</p></div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>ours — app.html shell (active above, inactive below)</figcaption>
|
|
<div class="stage">
|
|
<div class="window glass active" style="width: 320px">
|
|
<div class="title-bar">
|
|
<div class="title-bar-text">miniSCP</div>
|
|
<div class="title-bar-controls">
|
|
<button aria-label="Minimize"></button>
|
|
<button aria-label="Maximize"></button>
|
|
<button aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="window-body"><p style="margin:0">Focused window.</p></div>
|
|
</div>
|
|
<div class="window glass" style="width: 320px; margin-top: 12px">
|
|
<div class="title-bar">
|
|
<div class="title-bar-text">miniSCP</div>
|
|
<div class="title-bar-controls">
|
|
<button aria-label="Minimize"></button>
|
|
<button aria-label="Maximize"></button>
|
|
<button aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="window-body"><p style="margin:0">Unfocused — chrome desaturates.</p></div>
|
|
</div>
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
|
|
<h2>2 — ListView (file panel)</h2>
|
|
<div class="pair">
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>reference — <table></figcaption>
|
|
<table class="has-shadow" style="width:100%">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th class="highlighted indicator">Size</th>
|
|
<th>Modified</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>..</td><td style="text-align:right">—</td><td>—</td></tr>
|
|
<tr><td>Documents</td><td style="text-align:right">—</td><td>3/29/2007 12:00 AM</td></tr>
|
|
<tr class="highlighted"><td>report.pdf</td><td style="text-align:right">27 KB</td><td>3/23/2007 12:00 AM</td></tr>
|
|
<tr><td>notes.txt</td><td style="text-align:right">4 KB</td><td>3/13/2007 12:00 AM</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</figure>
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>ours — focused pane (top) vs unfocused pane (bottom)</figcaption>
|
|
<!-- Focused pane: strong band on selected rows AND the cursor row;
|
|
the cursor row additionally gets the dotted focus rect. -->
|
|
<table class="is-active">
|
|
<colgroup>
|
|
<col />
|
|
<col style="width: 5.5rem" />
|
|
<col style="width: 8.5rem" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th class="highlighted indicator up" style="text-align:right">Size</th>
|
|
<th>Modified</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>..</td><td style="text-align:right">—</td><td>—</td></tr>
|
|
<tr class="highlighted"><td>Documents</td><td style="text-align:right">—</td><td>3/29/2007 12:00 AM</td></tr>
|
|
<tr class="highlighted"><td>report.pdf</td><td style="text-align:right">27 KB</td><td>3/23/2007 12:00 AM</td></tr>
|
|
<tr class="highlighted is-cursor"><td>notes.txt</td><td style="text-align:right">4 KB</td><td>3/13/2007 12:00 AM</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- Unfocused pane: same rows, faint inactive wash, no dots. -->
|
|
<table style="margin-top:10px">
|
|
<colgroup>
|
|
<col />
|
|
<col style="width: 5.5rem" />
|
|
<col style="width: 8.5rem" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th style="text-align:right">Size</th>
|
|
<th>Modified</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>..</td><td style="text-align:right">—</td><td>—</td></tr>
|
|
<tr class="highlighted"><td>Documents</td><td style="text-align:right">—</td><td>3/29/2007 12:00 AM</td></tr>
|
|
<tr><td>report.pdf</td><td style="text-align:right">27 KB</td><td>3/23/2007 12:00 AM</td></tr>
|
|
<tr class="highlighted"><td>notes.txt</td><td style="text-align:right">4 KB</td><td>3/13/2007 12:00 AM</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</figure>
|
|
</div>
|
|
|
|
<h2>2b — Selection geometry (rows must NOT shift when selected)</h2>
|
|
<div class="pair">
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>no selection</figcaption>
|
|
<table class="is-active">
|
|
<colgroup><col /><col style="width:6rem" /></colgroup>
|
|
<thead><tr><th>Name</th><th>Size</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>aaa.txt</td><td>1 KB</td></tr>
|
|
<tr><td>bbb.txt</td><td>2 KB</td></tr>
|
|
<tr><td>ccc.txt</td><td>3 KB</td></tr>
|
|
<tr><td>ddd.txt</td><td>4 KB</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</figure>
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>middle row selected — baselines must still line up</figcaption>
|
|
<table class="is-active">
|
|
<colgroup><col /><col style="width:6rem" /></colgroup>
|
|
<thead><tr><th>Name</th><th>Size</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>aaa.txt</td><td>1 KB</td></tr>
|
|
<tr class="highlighted"><td>bbb.txt</td><td>2 KB</td></tr>
|
|
<tr><td>ccc.txt</td><td>3 KB</td></tr>
|
|
<tr><td>ddd.txt</td><td>4 KB</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</figure>
|
|
</div>
|
|
|
|
<h2>3 — Context menu</h2>
|
|
<div class="pair">
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>reference — ul[role=menu]</figcaption>
|
|
<ul role="menu" style="width:200px">
|
|
<li role="menuitem"><a href="#m">Send to Other Panel</a></li>
|
|
<li role="menuitem"><a href="#m">Open</a></li>
|
|
<li role="menuitem" class="has-divider"><a href="#m">Rename</a></li>
|
|
<li role="menuitem"><a href="#m">Copy Path</a></li>
|
|
<li role="menuitem" aria-disabled="true"><a href="#m">Permissions</a></li>
|
|
<li role="menuitem" class="has-divider"><a href="#m">Delete</a></li>
|
|
<li role="menuitem">
|
|
<input type="checkbox" id="h-col-size" checked />
|
|
<label for="h-col-size">Size</label>
|
|
</li>
|
|
<li role="menuitem">
|
|
<input type="checkbox" id="h-col-kind" />
|
|
<label for="h-col-kind">Kind</label>
|
|
</li>
|
|
</ul>
|
|
</figure>
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>ours — context-menu.ts output (buttons, divider, accelerator, checkables)</figcaption>
|
|
<!-- w7-ctx is the app's marker class (flat highlight, no Aero afterglow).
|
|
It also carries a position:fixed restatement, which the app wants and a
|
|
review page in normal flow does not — hence the inline static. -->
|
|
<ul role="menu" class="w7-ctx" style="width:200px;position:static">
|
|
<li role="menuitem"><button type="button">Send to Other Panel</button></li>
|
|
<li role="menuitem"><button type="button">Open</button></li>
|
|
<li role="menuitem"><button type="button">Edit <span>F4</span></button></li>
|
|
<li role="menuitem" class="has-divider"><button type="button">Rename</button></li>
|
|
<li role="menuitem"><button type="button">Copy Path</button></li>
|
|
<li role="menuitem" class="has-divider"><button type="button">Delete</button></li>
|
|
<li role="menuitem">
|
|
<input type="checkbox" id="ours-col-size" checked tabindex="-1" />
|
|
<label for="ours-col-size">Size</label>
|
|
</li>
|
|
<li role="menuitem">
|
|
<input type="checkbox" id="ours-col-kind" tabindex="-1" />
|
|
<label for="ours-col-kind">Kind</label>
|
|
</li>
|
|
</ul>
|
|
</figure>
|
|
</div>
|
|
|
|
<h2>4 — Controls 7.css already owns (sanity check)</h2>
|
|
<div class="pair">
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>buttons / textbox / progress</figcaption>
|
|
<div style="display:flex;flex-direction:column;gap:10px">
|
|
<div style="display:flex;gap:6px"><button>OK</button><button>Cancel</button><button disabled>Disabled</button></div>
|
|
<input type="text" value="/home/supongo/code" style="width:100%" />
|
|
<div role="progressbar" style="width:100%"><div style="width:42%"></div></div>
|
|
<div role="progressbar" class="marquee" style="width:100%"></div>
|
|
</div>
|
|
</figure>
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>reference — menu[role=tablist]</figcaption>
|
|
<menu role="tablist">
|
|
<button role="tab" aria-selected="true">local</button>
|
|
<button role="tab">server-a</button>
|
|
<button role="tab">server-b</button>
|
|
</menu>
|
|
<div role="tabpanel" style="padding:10px">Tab body</div>
|
|
</figure>
|
|
</div>
|
|
|
|
<h2>5 — Workspace tab strip (ours, as tab-bar.ts renders it)</h2>
|
|
<!--
|
|
The live app only ever has ONE workspace at startup and there is no way to
|
|
click "+" from a headless capture, so multi-tab state can only be checked
|
|
here. This mirrors tab-bar.ts exactly: the tabs sit in a menu[role=tablist]
|
|
inside a .w7-toolbar row, and the "+" / right-hand tools sit OUTSIDE the
|
|
menu so 7.css's descendant selector does not style them as tabs.
|
|
-->
|
|
<div class="pair">
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>ours — 3 workspaces, 2nd active</figcaption>
|
|
<div class="w7-toolbar relative flex h-9 items-center gap-0.5 border-b border-border bg-chrome pt-1 pr-1.5 pl-1.5">
|
|
<menu role="tablist" class="flex min-w-0 items-center overflow-x-auto">
|
|
<button role="tab" class="flex max-w-52 min-w-0 shrink-0 items-center gap-1.5">
|
|
<span class="truncate">Local</span>
|
|
</button>
|
|
<button role="tab" aria-selected="true" class="flex max-w-52 min-w-0 shrink-0 items-center gap-1.5">
|
|
<span class="truncate">build-server</span>
|
|
</button>
|
|
<button role="tab" class="flex max-w-52 min-w-0 shrink-0 items-center gap-1.5">
|
|
<span class="truncate">a-very-long-workspace-name-that-truncates</span>
|
|
</button>
|
|
</menu>
|
|
<button class="ml-0.5 grid size-6 place-items-center rounded-md">+</button>
|
|
<div class="flex-1"></div>
|
|
<button class="grid h-6 px-2 py-1 place-items-center rounded-md text-[11px]">Connections</button>
|
|
</div>
|
|
<div style="height:60px;background:var(--w7-tab-bg,#fff);border:1px solid #8e8f8f;border-top:0"></div>
|
|
</figure>
|
|
<figure class="cell" style="margin:0">
|
|
<figcaption>ours — single workspace (the live startup state)</figcaption>
|
|
<div class="w7-toolbar relative flex h-9 items-center gap-0.5 border-b border-border bg-chrome pt-1 pr-1.5 pl-1.5">
|
|
<menu role="tablist" class="flex min-w-0 items-center overflow-x-auto">
|
|
<button role="tab" aria-selected="true" class="flex max-w-52 min-w-0 shrink-0 items-center gap-1.5">
|
|
<span class="truncate">Local</span>
|
|
</button>
|
|
</menu>
|
|
<button class="ml-0.5 grid size-6 place-items-center rounded-md">+</button>
|
|
<div class="flex-1"></div>
|
|
<button class="grid h-6 px-2 py-1 place-items-center rounded-md text-[11px]">Connections</button>
|
|
</div>
|
|
<div style="height:60px;background:var(--w7-tab-bg,#fff);border:1px solid #8e8f8f;border-top:0"></div>
|
|
</figure>
|
|
</div>
|
|
</body>
|
|
</html>
|