feat(web): score heat scale, drop release row expand
Score cells interpolate red-to-green relative to the scores in the current deck; the click-to-expand panel only repeated row content.
This commit is contained in:
+39
-34
@@ -51,6 +51,16 @@
|
||||
--verdict-waived: oklch(0.82 0.14 80);
|
||||
--verdict-rejected: oklch(0.68 0.02 250);
|
||||
|
||||
/* score heat scale (issue #111) — one list-relative gradient from lowest
|
||||
red to highest green; JS picks the stop, colour stays in tokens */
|
||||
--score-0: oklch(0.68 0.19 25);
|
||||
--score-1: oklch(0.7 0.185 46);
|
||||
--score-2: oklch(0.72 0.175 67);
|
||||
--score-3: oklch(0.75 0.165 88);
|
||||
--score-4: oklch(0.77 0.16 108);
|
||||
--score-5: oklch(0.79 0.165 129);
|
||||
--score-6: oklch(0.8 0.17 150);
|
||||
|
||||
/* library status (§4.2) — informational, never a severity ramp:
|
||||
activity in one violet family, satisfaction in neutrals */
|
||||
--status-airing: oklch(0.78 0.14 305);
|
||||
@@ -994,7 +1004,7 @@ body {
|
||||
border-bottom: 1px solid oklch(from var(--line) l c h / 45%);
|
||||
}
|
||||
|
||||
/* the whole line is the expand affordance; grab is its own control */
|
||||
/* the line is plain content now — grab is its own control */
|
||||
.rel-line {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@@ -1002,20 +1012,6 @@ body {
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-1);
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
transition: background 150ms var(--ease-out);
|
||||
}
|
||||
|
||||
.rel-line:hover,
|
||||
.rel-line:focus-visible {
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
/* §9.3: the release name is secondary — evidence, not the primary key */
|
||||
@@ -1044,25 +1040,34 @@ body {
|
||||
color: var(--signal-fault);
|
||||
}
|
||||
|
||||
.rel-full {
|
||||
flex-basis: 100%;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: inset 0 1px var(--highlight);
|
||||
/* score heat: data-score is the list-relative stop, 0 lowest … 6 highest */
|
||||
.rel-line .cw-score[data-score="0"] {
|
||||
color: var(--score-0);
|
||||
border-color: oklch(from var(--score-0) l c h / 45%);
|
||||
}
|
||||
|
||||
.rel-raw {
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--ink);
|
||||
.rel-line .cw-score[data-score="1"] {
|
||||
color: var(--score-1);
|
||||
border-color: oklch(from var(--score-1) l c h / 45%);
|
||||
}
|
||||
|
||||
.rel-meta {
|
||||
margin: var(--space-1) 0 0;
|
||||
font-size: var(--text-2xs);
|
||||
.rel-line .cw-score[data-score="2"] {
|
||||
color: var(--score-2);
|
||||
border-color: oklch(from var(--score-2) l c h / 45%);
|
||||
}
|
||||
.rel-line .cw-score[data-score="3"] {
|
||||
color: var(--score-3);
|
||||
border-color: oklch(from var(--score-3) l c h / 45%);
|
||||
}
|
||||
.rel-line .cw-score[data-score="4"] {
|
||||
color: var(--score-4);
|
||||
border-color: oklch(from var(--score-4) l c h / 45%);
|
||||
}
|
||||
.rel-line .cw-score[data-score="5"] {
|
||||
color: var(--score-5);
|
||||
border-color: oklch(from var(--score-5) l c h / 45%);
|
||||
}
|
||||
.rel-line .cw-score[data-score="6"] {
|
||||
color: var(--score-6);
|
||||
border-color: oklch(from var(--score-6) l c h / 45%);
|
||||
}
|
||||
|
||||
/* ---- library view (§4.2) ---------------------------------------------- */
|
||||
@@ -1236,8 +1241,8 @@ body {
|
||||
/* ---- narrow deck (§9.3 at phone widths) ------------------------------- */
|
||||
|
||||
/* the full seven-column line is 36rem; under 40rem it cannot fit, so hdr
|
||||
and audio leave the line (the expand row carries them) and the five
|
||||
surviving columns tighten — aligned, never wrapped, never scrolled */
|
||||
and audio leave the line and the five surviving columns tighten —
|
||||
aligned, never wrapped, never scrolled */
|
||||
@media (max-width: 40rem) {
|
||||
.colhead .cw,
|
||||
.rel-line .chip {
|
||||
|
||||
Reference in New Issue
Block a user