Stage 2: file panels become a real 7.css ListView
The file list was a CSS grid of <div>s, so 7.css's listview component never matched a single selector and Tailwind styled the whole thing. It is now the plain <table> 7.css documents, which is what makes the Aero treatment appear. - The column header row moved OUT of its own div and INTO <thead>: 7.css makes thead position:sticky, so it stays put while the body scrolls, and it has to be inside the same table to do that. - Column widths moved from a computed grid-template-columns to <colgroup>, because 7.css sets table-layout: fixed. `gridTemplate()` is deleted. - Selection is now `tr.highlighted` (7.css's gradient band + #aaddfa border) instead of bg-primary/15. - The sort arrow was the text glyph ↑/↓ from `sortIndicator()`, which is also deleted; the sorted column is now `th.highlighted.indicator[.up]` and 7.css draws the real clip-path triangle in the header. - Row height, padding, borders and fonts now come from 7.css, so --row-h and the per-cell text/color/font utilities are gone. Two things 7.css does not cover, added in `skinfix`: - Dark mode. listview.css hardcodes light literals (#fff, #c0c1cd, #eee and a white header gradient) rather than --w7-* vars, so it does NOT follow the hand-authored dark palette — the header labels rendered invisible, dark on dark. The dark arms restate those rules; light keeps 7.css's own values. - The keyboard cursor. 7.css models selection only; Win7 drew the focused row with a dotted focus rectangle over it, which is what tells "cursor" apart from "selected" when they differ. That is `tr.is-cursor`. Verified visually this time, not just by build log: harness screenshots in both light and dark show the header gradient, sort triangle, cell separators, selection band and cursor rectangle matching 7.css's reference markup. Backend `tsc --noEmit` clean, `bun run build:ui` clean, bundle 489.83 kB (from 490.50). Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+31
-1
@@ -598,13 +598,43 @@ body {
|
||||
neighbouring layer. */
|
||||
@layer skinfix {
|
||||
/* Opt back IN to real Win7 push-button metrics, for the dialog and options
|
||||
buttons where they are right. Inert under the modern skin. */
|
||||
buttons where they are right. */
|
||||
.win7 .w7-btn {
|
||||
min-width: 75px;
|
||||
min-height: 23px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* ---- ListView (file panels) ----
|
||||
7.css's listview.css hardcodes light literals (#fff, #c0c1cd, #eee and the
|
||||
white header gradient) instead of --w7-* vars, so unlike the rest of the
|
||||
skin it does NOT follow the hand-authored dark palette — the header labels
|
||||
came out invisible, dark on dark. These restate the same rules in dark
|
||||
terms; they are scoped to the dark arms only so light keeps 7.css's own
|
||||
values untouched. */
|
||||
.win7[data-theme='dark'] table,
|
||||
.win7[data-theme='dark'] table > tbody > tr > * {
|
||||
background-color: var(--w7-el-bg-s-2);
|
||||
border-color: var(--w7-el-bd-d);
|
||||
color: var(--w7-el-c);
|
||||
}
|
||||
.win7[data-theme='dark'] table > thead > tr > * {
|
||||
background: linear-gradient(180deg, var(--w7-el-bg) 45%, var(--w7-el-bg-d) 0, var(--w7-el-bg-s-1));
|
||||
border-color: var(--w7-el-bd-d);
|
||||
color: var(--w7-el-c);
|
||||
}
|
||||
.win7[data-theme='dark'] table > tbody > tr > :not(:last-child) {
|
||||
border-right-color: var(--w7-el-bd-d);
|
||||
}
|
||||
|
||||
/* The keyboard cursor. 7.css models only selection (tr.highlighted); Win7
|
||||
drew the focused row with a dotted focus rectangle on top of it, which is
|
||||
what distinguishes "cursor" from "selected" when they differ. */
|
||||
.win7 table > tbody > tr.is-cursor > * {
|
||||
outline: 1px dotted var(--w7-el-c);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
/* Aero context menu. 7.css has no menu component, so this is hand-authored —
|
||||
but ONLY out of the existing --w7-* vars, never literal hex, so the
|
||||
hand-written dark Win7 palette above recolours it for free. Values are
|
||||
|
||||
Reference in New Issue
Block a user