60-proposal.css RawHistoryFolder

1@layer components {
2  /* proposals: the decision gate. Hue only where it carries a verdict:
3     check state (pass teal, fail red) and open high/medium findings (red). */
4  .criteria {
5    margin-top: calc(var(--lh) / 2); max-width: var(--measure);
6    & li { padding-left: 4ch; text-indent: -4ch; }
7    & .ck { color: var(--teal); font-weight: bold; }
8    & li[data-met="false"] .ck { color: var(--red); }
9    & .mute { font-size: var(--fs-s); overflow-wrap: anywhere; }
10  }
11  .prop-h .show-kv { margin-top: 0; }
12  .prop-h + .rule-h { margin-top: var(--lh); }
13
14  .since {
15    display: flex; flex-wrap: wrap; column-gap: 3ch; margin-top: var(--lh);
16    & a { text-decoration: none; color: var(--ink-dim); }
17    & a:hover { color: var(--ink); text-decoration: underline; }
18    & a[aria-current] { color: var(--ink-hi); font-weight: bold; }
19    & a[aria-current]::before { content: "▸ "; }
20    & .mute { font-weight: normal; }
21  }
22
23  /* decision block: first thing in the rail */
24  .decide {
25    & .d-state { font-weight: bold; color: var(--ink-hi); text-transform: uppercase; letter-spacing: .1ch; }
26    &[data-state="ready"] .d-state::before { content: "● "; color: var(--teal); }
27    &[data-state="accepted"] .d-state::before { content: "✓ "; color: var(--teal); }
28    &[data-state="refused"] .d-state::before { content: "✗ "; color: var(--red); }
29    & p + p { margin-top: 0; }
30    & .kv { grid-template-columns: 9ch minmax(0, 1fr); }
31    & .kv dd { white-space: normal; }
32    & .d-acts { margin-top: calc(var(--lh) / 2); }
33    & textarea {
34      display: block; width: 100%; resize: vertical; font: inherit; color: inherit;
35      background: var(--paper-alt); border: 1px solid var(--rule); padding: 0 1ch;
36    }
37    & textarea::placeholder { color: var(--ink-mute); opacity: 1; }
38    & .d-btns { display: flex; gap: 2ch; margin-top: 4px; }
39    & .d-btns button { color: var(--ink-dim); }
40    & .d-btns button:hover { color: var(--ink); text-decoration: underline; }
41    & .d-btns .d-main { background: var(--ink); color: var(--paper); font-weight: bold; padding: 0 1ch; }
42    & .d-btns .d-main:hover { background: var(--ink-hi); text-decoration: none; }
43    & .d-or { margin-top: calc(var(--lh) / 2); }
44    & .clone { margin-top: 0; }
45    & .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
46  }
47  .closed { margin-top: calc(var(--lh) / 2); & > summary { color: var(--ink-dim); } }
48
49  .checks li { display: grid; grid-template-columns: 5ch minmax(0, 1fr) auto; column-gap: 1ch; }
50  .checks .c-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
51  .checks .c-st { font-weight: bold; color: var(--teal); }
52  .checks [data-state="fail"] .c-st { color: var(--red); }
53  .checks [data-state="run"] .c-st { color: var(--ink-dim); }
54
55  .pcommits li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
56  .pcommits li[data-new] { background: var(--row); }
57  .pcommits .s { color: var(--ink); }
58
59  /* a finding: a ruled note, in the rail and under its line in the diff */
60  .finding {
61    border-left: 2px solid var(--ink); padding-left: 1ch; margin-top: calc(var(--lh) / 2);
62    & p { white-space: normal; }
63    & .f-sev { font-weight: bold; text-transform: uppercase; }
64    & .f-state { color: var(--ink-dim); }
65    & .f-where { font-size: var(--fs-s); overflow-wrap: anywhere; }
66    & .f-reason { color: var(--ink-dim); }
67    &[data-state="open"][data-sev="high"], &[data-state="open"][data-sev="medium"] { border-left-color: var(--red); }
68    &[data-state="open"][data-sev="high"] .f-sev, &[data-state="open"][data-sev="medium"] .f-sev { color: var(--red); }
69    &[data-state="fixed"], &[data-state="dismissed"] { border-left-color: var(--rule); }
70    &[data-state="fixed"] .f-text, &[data-state="dismissed"] .f-text { color: var(--ink-dim); }
71    &[data-state="fixed"] .f-sev, &[data-state="dismissed"] .f-sev { font-weight: normal; color: var(--ink-mute); }
72  }
73  .dt .fnote td { background: var(--paper-alt); padding: 2px 0 4px; white-space: normal; }
74  .dt .fnote .finding { margin: 0; max-width: var(--measure); font-size: var(--fs); line-height: var(--lh); }
75  .dfile .fcount { color: var(--red); font-weight: bold; }
76
77  .list.props {
78    & .c-n { width: 5ch; }
79    & .c-state { width: 18ch; }
80    & .c-subject { overflow: hidden; text-overflow: ellipsis; }
81    & .c-chk { width: 6ch; }
82    & .c-fnd { width: 9ch; }
83    & .c-who { width: 12ch; }
84    & .c-when { width: 9ch; }
85    & tr[data-state="ready"] .c-state { font-weight: bold; }
86    & tr[data-state="ready"] .c-state::before { content: "● "; color: var(--teal); }
87  }
88  .rail code { border-bottom: 1px dotted var(--ink-mute); }
89
90  @media (max-width: 700px) {
91    .list.props .c-chk, .list.props .c-fnd { display: none; }
92  }
93}