60-mr.css RawHistoryFolder

1@layer components {
2  /* merge requests: the review page. Hue only where it carries a verdict. */
3  .mr-h .show-kv { margin-top: 0; }
4  .mr-h + * { margin-top: var(--lh); }
5  .mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }
6  .mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }
7  .mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }
8  .mr-desc { margin-top: var(--lh); max-width: var(--measure); white-space: pre-wrap; overflow-wrap: anywhere; }
9  .mr-desc a, .c-text a { text-decoration: underline; }
10
11  .since {
12    display: flex; flex-wrap: wrap; column-gap: 3ch; margin-top: var(--lh);
13    & a { text-decoration: none; color: var(--ink-dim); }
14    & a:hover { color: var(--ink); text-decoration: underline; }
15    & a[aria-current] { color: var(--ink-hi); font-weight: bold; }
16    & a[aria-current]::before { content: "▸ "; }
17    & .mute { font-weight: normal; }
18  }
19
20  /* merge block: first thing in the rail */
21  .decide {
22    & .d-acts { margin-top: calc(var(--lh) / 2); }
23    & select {
24      display: block; width: 100%; font: inherit; color: inherit; background: var(--paper-alt);
25      border: 1px solid var(--rule); border-radius: 0; padding: 0 1ch;
26    }
27    & .d-check { display: block; margin-top: 4px; color: var(--ink-dim); cursor: pointer; }
28    & .d-check input { accent-color: var(--ink); margin: 0 1ch 0 0; vertical-align: middle; }
29    & .d-btns { display: flex; gap: 2ch; margin-top: 4px; flex-wrap: wrap; }
30    & .d-btns button { color: var(--ink-dim); }
31    & .d-btns button:hover { color: var(--ink); text-decoration: underline; }
32    & .d-btns .d-main { background: var(--ink); color: var(--paper); font-weight: bold; padding: 0 1ch; }
33    & .d-btns .d-main:hover { background: var(--ink-hi); text-decoration: none; }
34    & .d-or { margin-top: calc(var(--lh) / 2); }
35    & .clone { margin-top: 0; }
36    & .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
37  }
38
39  .pcommits li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
40  .pcommits li[data-new] { background: var(--row); }
41  .pcommits .s { color: var(--ink); }
42  .rail code { border-bottom: 1px dotted var(--ink-mute); }
43
44  /* a note: a ruled block, under its line in the diff and in the list of comments */
45  .cmt {
46    border-left: 2px solid var(--ink); padding-left: 1ch; margin-top: calc(var(--lh) / 2); max-width: var(--measure);
47    white-space: normal;
48    & p { white-space: normal; }
49    & .c-who { font-weight: bold; }
50    & .c-state { color: var(--ink-dim); }
51    & .c-text { white-space: pre-wrap; overflow-wrap: anywhere; }
52    & .c-where { font-size: var(--fs-s); overflow-wrap: anywhere; }
53    & .c-act button { color: var(--ink-dim); }
54    & .c-act button:hover { color: var(--ink); text-decoration: underline; }
55    &[data-resolved="true"] { border-left-color: var(--rule); }
56    &[data-resolved="true"] .c-text { color: var(--ink-dim); }
57  }
58  .dt .fnote td { background: var(--paper-alt); padding: 2px 0 4px; white-space: normal; }
59  .dt .fnote .cmt, .dt .fnote .cform { margin: 0; font-size: var(--fs); line-height: var(--lh); }
60  .dt .fnote .cmt + .cmt, .dt .fnote .cmt + .cform { margin-top: calc(var(--lh) / 2); }
61  .ln a { color: inherit; text-decoration: none; }
62  .ln a:hover, .ln a:focus-visible { text-decoration: underline; color: var(--ink-hi); }
63
64  /* the forms: a comment, a new merge request */
65  .cform {
66    display: grid; gap: 2px; margin-top: var(--lh); max-width: var(--measure);
67    & label { color: var(--ink-dim); }
68    & textarea, & input[type="text"] {
69      display: block; width: 100%; font: inherit; color: inherit; resize: vertical;
70      background: var(--paper-alt); border: 1px solid var(--rule); border-radius: 0; padding: 0 1ch;
71    }
72    & textarea::placeholder { color: var(--ink-mute); opacity: 1; }
73    & .f-btns { display: flex; gap: 2ch; align-items: baseline; margin-top: 4px; }
74    & .f-btns a { color: var(--ink-dim); }
75    & .f-btns button { color: var(--ink-dim); }
76    & .f-btns button:hover { color: var(--ink); text-decoration: underline; }
77    & .f-btns .f-main { background: var(--ink); color: var(--paper); font-weight: bold; padding: 0 1ch; }
78    & .f-btns .f-main:hover { background: var(--ink-hi); text-decoration: none; }
79  }
80  .cform.create { margin-top: var(--lh); }
81
82  .list.mrs {
83    & .c-n { width: 5ch; }
84    & .c-state { width: 9ch; }
85    & .c-subject { overflow: hidden; text-overflow: ellipsis; }
86    & .c-who { width: 12ch; }
87    & .c-when { width: 11ch; }
88    & tr[data-state="open"] .c-state { font-weight: bold; }
89    & tr[data-state="open"] .c-state::before { content: "● "; color: var(--teal); }
90    & tr[data-state="merged"] .c-state::before { content: "✓ "; color: var(--teal); }
91    & tr[data-state="closed"] .c-state::before { content: "✗ "; color: var(--red); }
92  }
93  #mr-notice:empty { display: none; }
94
95  @media (max-width: 700px) {
96    .list.mrs .c-who { display: none; }
97  }
98}