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
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-state[data-state="draft"]::before { content: "◌ "; color: var(--ink-dim); }
9 .mr-desc { max-width: var(--measure); white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--s4) var(--s5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); }
10 .mr-desc a, .c-text a { text-decoration: underline; }
11
12 .since {
13 display: inline-flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s1);
14 background: var(--bg-raised); border-radius: var(--r-s);
15 & a { padding: var(--s1) var(--s3); border-radius: 4px; text-decoration: none; color: var(--ink-dim); font-size: var(--fs-s); }
16 & a:hover { color: var(--ink-hi); }
17 & a[aria-current] { color: var(--ink-hi); font-weight: 700; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-strong); }
18 & .mute { font-weight: 400; font-family: var(--mono); }
19 }
20
21 /* merge block: first thing in the rail */
22 .decide {
23 border-color: var(--border-strong) !important;
24 & select {
25 display: block; width: 100%; height: 36px; padding: 0 var(--s3);
26 font: inherit; color: inherit; background: var(--bg-inset);
27 border: 1px solid var(--border-strong); border-radius: var(--r-s);
28 }
29 & .d-check { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s2); color: var(--ink-dim); font-size: var(--fs-s); cursor: pointer; }
30 & .d-check input { accent-color: var(--ink-hi); margin: 0; }
31 & .d-btns { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
32 & .d-btns .primary { flex: 1; justify-content: center; }
33 /* the terminal lines fold away: a reviewer who merges in the page does
34 not need them in sight */
35 & .d-draft { font-size: var(--fs-s); color: var(--ink-dim); }
36 & .d-or { font-size: var(--fs-s); }
37 & .d-or > summary { cursor: pointer; list-style: none; }
38 & .d-or > summary::-webkit-details-marker { display: none; }
39 & .d-or > summary::before { content: "▸ "; }
40 & .d-or[open] > summary::before { content: "▾ "; }
41 & .d-or > summary:hover { color: var(--ink-hi); }
42 & .d-or[open] > .clone { margin-top: var(--s2); }
43 & .clone { margin-top: 0; }
44 & .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
45 }
46
47 /* the rail of a merge request follows the review: the merge block and the
48 checks stay in reach at the end of a long diff. It scrolls on its own
49 when it is taller than the window. Only on a two-column layout. */
50 @media (min-width: 1081px) {
51 .work.has-rail:has(#mr-checks) .rail {
52 position: sticky; top: calc(var(--hdr-h, 0px) + var(--s4));
53 max-height: calc(100dvh - var(--hdr-h, 0px) - var(--s4) * 2);
54 overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
55 }
56 }
57
58 .pcommits { font-size: var(--fs-s); display: grid; gap: var(--s1); }
59 .pcommits li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px var(--s2); margin: 0 calc(-1 * var(--s2)); border-radius: 4px; }
60 .pcommits li a { font-family: var(--mono); }
61 .pcommits li[data-new] { background: var(--bg-raised); }
62 .pcommits .s { color: var(--ink); }
63
64
65 /* a note: a ruled block, under its line in the diff and in the list of comments */
66 .cmt {
67 padding: var(--s3) var(--s4); margin-top: var(--s3); max-width: var(--measure);
68 background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--ink-hi); border-radius: var(--r-s);
69 white-space: normal; font-family: var(--font); font-size: var(--fs-s); line-height: 22px;
70 & p { white-space: normal; }
71 & .c-who { font-weight: bold; }
72 & .c-state { color: var(--ink-dim); }
73 & .c-text { white-space: pre-wrap; overflow-wrap: anywhere; }
74 & .c-where { font-size: var(--fs-s); overflow-wrap: anywhere; }
75 & .c-act { margin-top: var(--s2); }
76 & .c-act button { height: 26px; font-size: var(--fs-xs); }
77 &[data-resolved="true"] { border-left-color: var(--border-strong); }
78 &[data-resolved="true"] .c-text { color: var(--ink-dim); }
79 }
80 .dt .fnote td { background: var(--bg-canvas); padding: var(--s2) var(--s3); white-space: normal; }
81 .dt .fnote .cmt, .dt .fnote .cform { margin: 0; }
82 .dt .fnote .cmt + .cmt, .dt .fnote .cmt + .cform { margin-top: var(--s2); }
83 .ln a { color: inherit; text-decoration: none; }
84 .ln a:hover, .ln a:focus-visible { text-decoration: underline; color: var(--ink-hi); }
85
86 /* the forms: a comment, a new merge request */
87 .cform {
88 display: grid; gap: var(--s2); margin-top: var(--s3); max-width: var(--measure);
89 font-family: var(--font); font-size: var(--fs-s);
90 & label { color: var(--ink-dim); font-weight: 600; }
91 & textarea, & input[type="text"] {
92 display: block; width: 100%; font: inherit; font-size: var(--fs); color: inherit; resize: vertical;
93 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s); padding: var(--s2) var(--s3);
94 }
95 & textarea::placeholder { color: var(--ink-mute); opacity: 1; }
96 & .f-btns { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); }
97 }
98
99 .list.mrs {
100 & .c-n { width: 64px; }
101 & .c-state { width: 110px; }
102 & .c-subject { overflow: hidden; text-overflow: ellipsis; }
103 & .c-who { width: 140px; }
104 & .c-when { width: 100px; }
105 & tr[data-state="open"] .c-state { font-weight: bold; }
106 & tr[data-state="open"] .c-state::before { content: "● "; color: var(--teal); }
107 & tr[data-state="merged"] .c-state::before { content: "✓ "; color: var(--teal); }
108 & tr[data-state="closed"] .c-state::before { content: "✗ "; color: var(--red); }
109 }
110 #mr-notice:empty { display: none; }
111
112 @media (max-width: 700px) {
113 .list.mrs .c-who { display: none; }
114 }
115}