refactor(r2): drop the kept/ephemeral card CSS; contract marked BUILT
The index no longer renders cards or lanes. Their rules, and the absolute positioning the keep/wipe controls needed to float over a thumbnail, are gone. The controls keep their shared button base; the Desk row and the booth header place them. The contract is marked BUILT on the branch, pending heid code-review and bug-hunt.
This commit is contained in:
@@ -199,7 +199,7 @@
|
||||
read. Static here: on the old cards they floated over a thumbnail. */
|
||||
.desk-acts{display:flex;gap:6px;opacity:0;transition:opacity var(--dur-1)}
|
||||
.desk-row:hover .desk-acts,.desk-acts:focus-within{opacity:1}
|
||||
.desk-acts form{position:static;opacity:1;margin:0}
|
||||
.desk-acts form{margin:0}
|
||||
.desk-acts button{height:28px;min-width:28px;padding:0 8px;font-size:var(--size-sm);border-radius:var(--radius-md);
|
||||
border:1px solid var(--border-strong);background:var(--surface-raised);color:var(--text-body);
|
||||
-webkit-backdrop-filter:none;backdrop-filter:none;cursor:pointer}
|
||||
@@ -238,32 +238,6 @@
|
||||
.desk-panel .up-go{padding:10px 14px;border-radius:var(--radius-lg)}
|
||||
.desk-panel .drop.has+.up-go{padding:10px 14px;border-radius:var(--radius-lg)}
|
||||
|
||||
/* ---- index: lanes and cards ------------------------------------------ */
|
||||
.lane-head{margin:28px 0 12px;font-family:var(--font-mono);font-size:var(--size-micro);font-weight:500;
|
||||
letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted);
|
||||
display:flex;align-items:center;gap:10px}
|
||||
.lane-head::after{content:"";flex:1;height:1px;background:var(--border-subtle)}
|
||||
.lane-note{font-weight:400;letter-spacing:.04em;color:var(--text-muted);text-transform:none}
|
||||
.lane-note code{font-size:1em;color:var(--text-muted)}
|
||||
.uploader+.lane-head{margin-top:8px}
|
||||
.kept-grid{margin-bottom:4px}
|
||||
|
||||
.grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
|
||||
.card{position:relative;background:var(--surface-card);border:1px solid var(--border-default);
|
||||
border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);
|
||||
transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
|
||||
.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
|
||||
.card .thumb{position:relative;display:block;aspect-ratio:16/10;background:var(--surface-sunken);
|
||||
overflow:hidden;border-bottom:1px solid var(--border-subtle)}
|
||||
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
|
||||
.card .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
|
||||
color:var(--text-faint);font-family:var(--font-mono);font-size:var(--size-caption);
|
||||
letter-spacing:var(--tracking-caps);text-transform:uppercase}
|
||||
.card .meta{padding:12px 14px 14px}
|
||||
.card .name{display:block;font-weight:600;font-size:var(--size-h3);color:var(--text-heading);word-break:break-word}
|
||||
.card .name:hover{text-decoration:none;color:var(--text-link)}
|
||||
.card .sub{color:var(--text-muted);font-size:var(--size-caption);font-family:var(--font-mono);margin-top:4px}
|
||||
|
||||
/* THE ANNOUNCEMENT — who posted this booth and why (U5). Same size and
|
||||
rhythm as .sub above it: a second line of card metadata, not a heading.
|
||||
The handle carries the brightest ink, so a scan down the index reads as a
|
||||
@@ -277,29 +251,12 @@
|
||||
.prov-none{color:var(--text-muted);font-style:italic}
|
||||
.prov-broken{color:var(--warning-text);font-style:italic;cursor:help}
|
||||
|
||||
/* card-shoulder controls: an opaque scrim and an always-light glyph, so
|
||||
they read over any thumbnail in both themes */
|
||||
.wipe{position:absolute;top:10px;right:10px;margin:0}
|
||||
.wipe button,.keepit button,.wipe-kept button,.release button{cursor:pointer;font:inherit;
|
||||
font-size:var(--size-sm);line-height:1;height:28px;min-width:28px;padding:0 8px;
|
||||
border-radius:var(--radius-md);border:1px solid rgb(255 255 255 / .16);
|
||||
background:oklch(0.17 0.01 250 / .86);color:oklch(0.91 0.008 216);
|
||||
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
|
||||
transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
|
||||
.wipe button{font-size:16px}
|
||||
.wipe button:hover,.wipe-kept button:hover{background:var(--danger);border-color:var(--danger);color:var(--danger-contrast)}
|
||||
.keepit{position:absolute;top:10px;left:10px;margin:0;opacity:0;transition:opacity var(--dur-1)}
|
||||
.card:hover .keepit,.keepit:focus-within{opacity:1}
|
||||
.keepit button:hover,.release button:hover{background:oklch(0.31 0.012 244 / .95);border-color:rgb(255 255 255 / .32)}
|
||||
/* One positioned row holds BOTH kept-card controls — they used to pin
|
||||
themselves to the same corner and the later sibling won. */
|
||||
.kept-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px;
|
||||
align-items:center;opacity:0;transition:opacity var(--dur-1)}
|
||||
.card-kept:hover .kept-actions,.kept-actions:focus-within{opacity:1}
|
||||
.kept-actions form{position:static;opacity:1;margin:0}
|
||||
.release{opacity:0;transition:opacity var(--dur-1)}
|
||||
.card-kept:hover .release,.release:focus-within{opacity:1}
|
||||
.release button{font-size:var(--size-caption);font-family:var(--font-mono)}
|
||||
/* keep / release / wipe — the controls themselves. Where they sit is the
|
||||
surface's business: a Desk row (.desk-acts) or the booth header (.wipe-lg,
|
||||
.keep-lg). The kept/ephemeral CARDS they used to float over are gone. */
|
||||
.wipe,.keepit,.release{margin:0}
|
||||
.wipe button,.keepit button,.release button{cursor:pointer;font:inherit;line-height:1;
|
||||
transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
|
||||
|
||||
/* ---- lifetime ---------------------------------------------------------
|
||||
U4: a booth that stopped counting down says so where the countdown was. */
|
||||
@@ -326,7 +283,7 @@
|
||||
.wipe-lg{position:static}
|
||||
/* Device 2. Wiping a booth is the one act on this page that nothing brings
|
||||
back, so it alone wears the stripe. The fill waits for the hover. */
|
||||
.wipe-lg button{height:auto;min-width:0;padding:10px 14px 8px;border-radius:var(--radius-md);
|
||||
.wipe-lg button{padding:10px 14px 8px;border-radius:var(--radius-md);
|
||||
font-family:var(--font-sans);font-size:var(--size-sm);font-weight:600;letter-spacing:.02em;
|
||||
background:var(--hazard-stripe) top / 100% 3px no-repeat,transparent;
|
||||
border:1px solid var(--danger);color:var(--danger-text);-webkit-backdrop-filter:none;backdrop-filter:none}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
contract_version: "0.1-PROPOSED"
|
||||
status: "PROPOSED 2026-09-23 by design-dev. Ruled by the operator the same day in the `flow` mark on booth-flow-concepts (direction a_b; compare MODE to be built in this arc; voice plain; emblem no), relayed via Miranda → booth-dev, verbatim at docs/rulings/. Compare mode is NOT in this contract: it lands after this one as r3, as a view toggle over the same item record."
|
||||
contract_version: "0.2-BUILT"
|
||||
status: "BUILT 2026-09-23 on design-dev/svos-retheme (C1-C7, TDD), awaiting heid code-review and bug-hunt before the hand-over to booth-dev. PROPOSED 2026-09-23 by design-dev. Ruled by the operator the same day in the `flow` mark on booth-flow-concepts (direction a_b; compare MODE to be built in this arc; voice plain; emblem no), relayed via Miranda → booth-dev, verbatim at docs/rulings/. Compare mode is NOT in this contract: it lands after this one as r3, as a view toggle over the same item record."
|
||||
module: "booth.app + booth.items + templates (the review flow)"
|
||||
purpose: "Make the Booth a place where judgment happens rather than a place where files are shown. The operator's bar is 'did anything change when I opened it'. A reskin cannot clear that bar; this contract changes the flow. There are three surfaces and one plumbing change. THE DESK: the index triaged by what needs the operator. THE LIGHTBOX: a booth page with the set on the left and the verdict beside it. THE REVIEW: full size with the judgment on screen, a filmstrip, and seen-tracking. The plumbing is IN-PLACE JUDGMENT: a mark POST that does not reload the page or eject you from full size."
|
||||
depends_on:
|
||||
|
||||
Reference in New Issue
Block a user