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 /* one card: the header (title, facts) a shade lighter, the description below */
5 .mr-card {
6 background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
7 & > .mr-h { background: var(--bg-raised); border: 0; border-radius: 0; padding-bottom: var(--s3); }
8 & > .mr-desc.prose { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
9 }
10
11 .mr-footer {
12 border-top: 1px solid var(--border); padding: var(--s2) var(--s4);
13 /* the shade of the card header; the card's overflow clips the corners */
14 background: var(--bg-raised);
15 font-size: var(--fs-s);
16 /* the tabs are buttons: a thin border, the count in a darker badge;
17 the open one in the teal accent */
18 & nav { display: flex; flex-wrap: wrap; gap: var(--s2); }
19 & [data-mr-tabs] a {
20 display: inline-flex; align-items: center; gap: var(--s1);
21 padding: 2px var(--s2); border: 1px solid var(--border-strong); border-radius: var(--r-s);
22 color: var(--ink-dim); text-decoration: none; cursor: pointer;
23 }
24 & [data-checks-label] { color: var(--ink-dim); font-size: var(--fs-xs); }
25 & [data-mr-tabs] .count { margin-left: 0; color: var(--ink-hi); background: var(--bg-canvas); box-shadow: inset 0 0 0 1px var(--border); }
26 & [data-mr-tabs] a:hover { background: var(--bg-strong); color: var(--ink-hi); }
27 & [data-mr-tabs] a[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); background: var(--bg-surface); }
28 & [data-mr-panel] { padding-block-start: var(--s2); overflow-x: auto; }
29 & [hidden] { display: none; }
30 /* Until mr.js drives the panels (data-panels, then [hidden]), only the
31 panel of the URL fragment shows: the tabs work as anchors without
32 scripts, and no panel flashes open before the script runs. */
33 &:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }
34 & section h2 { font-size: var(--fs-s); color: var(--ink-dim); }
35 & table { width: 100%; border-collapse: collapse; }
36 & th, & td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--border); }
37 & th { color: var(--ink-dim); font-weight: 500; }
38 & tbody tr:last-child > :is(td, th) { border-bottom: 0; }
39 }
40 .merge-settings { font-size: var(--fs-s); color: var(--ink-dim); }
41 .merge-settings h2 { font-size: var(--fs-s); }
42
43 .mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }
44 .mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }
45 .mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }
46 .mr-state[data-state="draft"]::before { content: "◌ "; color: var(--ink-dim); }
47 /* the description: Markdown as a README, as wide as the header card above;
48 the text inside keeps the reading measure */
49 .mr-desc.prose { max-width: none; padding: var(--s4) var(--s5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); }
50 .mr-desc.prose > * { max-width: var(--measure); }
51 .mr-desc.prose > pre, .mr-desc.prose > table { max-width: 100%; }
52
53 .since {
54 display: inline-flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s1);
55 background: var(--bg-raised); border-radius: var(--r-s);
56 & a { padding: var(--s1) var(--s3); border-radius: 4px; text-decoration: none; color: var(--ink-dim); font-size: var(--fs-s); }
57 & a:hover { color: var(--ink-hi); }
58 & a[aria-current] { color: var(--ink-hi); font-weight: 700; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-strong); }
59 & .mute { font-weight: 400; font-family: var(--mono); }
60 }
61
62 /* the bar above the diff of a merge request: the diff tools, the checks and
63 the menus of the owner, on one line that follows the review */
64 /* the checks and the menus stay on the right, also when they wrap under the
65 diff tools; mr.js measures the height of the bar (--mr-bar-h) */
66 body:has(.mr-bar) { --bar-h: var(--mr-bar-h, 48px); }
67 .mr-bar {
68 gap: var(--s2);
69 & .mr-acts { display: flex; gap: var(--s2); align-items: center; margin-left: auto; }
70 & .mr-ck { margin-left: 0; height: 32px; padding: 0 var(--s2); border-radius: var(--r-s); text-decoration: none; color: var(--ink-dim); font-size: var(--fs-s); }
71 & .mr-ck:hover { background: var(--bg-raised); color: var(--ink-hi); }
72 }
73
74 /* a menu of the bar: a <details> whose panel opens under its button */
75 .menu {
76 position: relative;
77 & > summary { list-style: none; }
78 & > summary::-webkit-details-marker { display: none; }
79 & > summary.primary::after { content: ""; width: 0; height: 0; margin-left: 2px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
80 & .menu-pop {
81 position: absolute; right: 0; top: calc(100% + var(--s1)); z-index: 6; width: 320px; max-width: calc(100vw - 2 * var(--pad));
82 display: grid; gap: var(--s3); padding: var(--s3) var(--s4);
83 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: 0 8px 24px rgb(0 0 0 / .18);
84 font-size: var(--fs-s);
85 }
86 & .kv { margin: 0; }
87 }
88 /* the view menu of a diff: the layout and the fold, one row each */
89 .vmenu {
90 & > summary::after { content: ""; width: 0; height: 0; margin-left: 2px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
91 & .menu-pop { left: 0; right: auto; width: 220px; gap: var(--s1); padding: var(--s2); }
92 & .menu-pop .btn { width: 100%; justify-content: flex-start; border-color: transparent; background: none; }
93 & .menu-pop .btn:hover { background: var(--bg-raised); }
94 & .menu-pop .btn[aria-current="true"] { background: var(--bg-raised); color: var(--ink-hi); }
95 & .menu-pop .btn kbd { margin-left: auto; }
96 }
97 .mmenu {
98 & .menu-pop { box-sizing: border-box; min-width: 0; overflow-wrap: anywhere; }
99 & .menu-pop > *, & form, & .d-modes, & .d-btns { min-width: 0; max-width: 100%; box-sizing: border-box; }
100 & .d-acts { display: grid; gap: var(--s3); }
101 & .d-modes label, & .d-check { min-width: 0; }
102 & code { overflow-wrap: anywhere; }
103 & .d-btns .btn { min-width: 0; max-width: 100%; white-space: normal; }
104 & .d-modes { display: grid; gap: var(--s1); border: 0; padding: 0; margin: 0; }
105 & .d-modes label, & .d-check {
106 display: flex; gap: var(--s2); align-items: center; padding: 4px var(--s2); margin: 0 calc(-1 * var(--s2));
107 border-radius: var(--r-s); color: var(--ink); cursor: pointer;
108 }
109 & .d-modes label:hover, & .d-check:hover { background: var(--bg-raised); }
110 & .d-modes label:has(:checked) { background: var(--bg-raised); color: var(--ink-hi); font-weight: 600; }
111 & .d-modes kbd, & .d-check kbd { margin-left: auto; }
112 & input { accent-color: var(--ink-hi); margin: 0; }
113 & .d-check { color: var(--ink-dim); }
114 & .d-btns { display: flex; margin-top: var(--s1); }
115 & .d-btns .btn { flex: 1; justify-content: center; }
116 & .d-draft { color: var(--ink-dim); }
117 & .d-note { margin: 0; color: var(--ink-dim); }
118 & .d-err { margin: 0; padding: var(--s2) var(--s3); color: var(--ink-hi); border: 1px solid var(--red); border-left-width: 3px; border-radius: var(--r-s); overflow-wrap: anywhere; }
119 /* the badge is a live slot, but not a banner */
120 & #mr-mergeability:not(:empty) { padding: 0; font-weight: normal; background: none; border: 0; display: grid; gap: var(--s1); }
121 & .mg-paths { margin: 0; padding-left: 2ch; max-height: 8em; overflow: auto; }
122 & .mg-paths code { overflow-wrap: anywhere; }
123 & .d-modes label:has(:disabled) { color: var(--ink-mute); cursor: not-allowed; }
124 & .d-modes label:has(:disabled):hover { background: none; }
125 & .btn:disabled { opacity: .5; cursor: not-allowed; }
126 }
127 .badge[data-state] { display: inline-block; padding: 0 var(--s2); border: 1px solid var(--border-strong); border-radius: var(--r-s); font-weight: 600; color: var(--ink-hi); }
128 .badge[data-state="up_to_date"] { border-color: var(--teal); color: var(--teal); }
129 .badge[data-state="behind"] { border-color: var(--teal-2); }
130 .badge[data-state="conflict"] { border-color: var(--red); color: var(--red); }
131 .badge[data-state="checking"] { color: var(--ink-dim); border-style: dashed; }
132 .note[role="status"] { color: var(--ink-dim); }
133 .omenu {
134 & > summary { font-size: 18px; line-height: 1; }
135 & .menu-pop { width: 280px; }
136 & form .btn { width: 100%; justify-content: flex-start; }
137 & .btn kbd { margin-left: auto; }
138 & .d-or > summary { cursor: pointer; list-style: none; color: var(--ink-mute); }
139 & .d-or > summary::-webkit-details-marker { display: none; }
140 & .d-or > summary::before { content: "▸ "; }
141 & .d-or[open] > summary::before { content: "▾ "; }
142 & .d-or > summary:hover { color: var(--ink-hi); }
143 & .d-or[open] > .clone { margin-top: var(--s2); }
144 & .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
145 & #mr-signing code { overflow-wrap: anywhere; }
146 }
147
148 /* the rail of a merge request follows the review: it sticks under the
149 header, one screen high, and scrolls on its own to its verdicts. The list of files keeps its own scroll, under a height, so
150 that the blocks below it stay in reach. Only on a two-column layout. */
151 @media (min-width: 1081px) {
152 .rail:has(.r-files) {
153 position: sticky; top: calc(var(--hdr-h, 0px) + var(--s4));
154 max-height: calc(100dvh - var(--hdr-h, 0px) - var(--s4) * 2);
155 overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
156 }
157 /* the blocks keep their height: the rail scrolls, it does not squeeze them */
158 .rail:has(.r-files) > * { flex: none; }
159 .rail .r-files > .files { max-height: 55dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
160 }
161 /* on one column the rail goes under the diff: the list of files keeps its
162 own scroll, under a height */
163 @media (max-width: 1080px) {
164 .rail .r-files > .files { max-height: 50dvh; overflow-y: auto; overscroll-behavior: contain; }
165 }
166 .r-files {
167 & > h2 kbd { margin-left: auto; }
168 & > h2 .fold { width: 24px; height: 24px; margin: -2px -6px -2px 0; background: none; border-color: transparent; color: var(--ink-dim); }
169 & > h2 .fold:hover { color: var(--ink-hi); border-color: var(--border-strong); }
170 & > h2 .fold .ico { transition: transform .15s; }
171 &[data-folded] > h2 { border-bottom: 0; }
172 &[data-folded] > h2 .fold .ico { transform: rotate(-90deg); }
173 &[data-folded] > :not(h2) { display: none; }
174 & > .ffilter { margin: var(--s2) var(--s3) 0; }
175 & > .ffilter input {
176 width: 100%; height: 30px; padding: 0 var(--s2); font: inherit; font-size: var(--fs-s); color: inherit;
177 background: var(--bg-inset); border: 1px solid var(--border-strong); border-radius: var(--r-s);
178 }
179 & > .files { margin: var(--s2) 0 !important; padding: 0 var(--s2); }
180 }
181
182 /* a file of the diff whose window is not loaded yet: about its room */
183 .dlazy {
184 display: flex; align-items: center; justify-content: center;
185 background: repeating-linear-gradient(var(--bg-surface) 0 var(--lh-code), var(--paper-alt) var(--lh-code) calc(var(--lh-code) * 2));
186 border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r);
187 font-size: var(--fs-s);
188 & a { color: var(--ink-mute); }
189 &.dlazy-1 { height: 120px; } &.dlazy-2 { height: 360px; } &.dlazy-3 { height: 900px; } &.dlazy-4 { height: 1600px; }
190 /* with scripts the window comes by itself: the link of the page without
191 scripts would only flash */
192 html.js &:not([data-manual]) > a { visibility: hidden; }
193 &[data-manual] { height: auto; padding: var(--s3); }
194 &[data-manual][data-loading] > a { opacity: .5; }
195 & .notice { margin: 0; }
196 }
197 .dloose {
198 padding: var(--s2) var(--s3) var(--s3); background: var(--bg-surface);
199 border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r);
200 }
201
202 .pcommits { font-size: var(--fs-s); display: grid; gap: var(--s1); }
203 .pcommits li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px var(--s2); margin: 0 calc(-1 * var(--s2)); border-radius: 4px; }
204 .pcommits li a { font-family: var(--mono); }
205 .pcommits li[data-new] { background: var(--bg-raised); }
206 .pcommits .s { color: var(--ink); }
207
208
209 /* a note: a ruled block, under its line in the diff and in the list of comments */
210 .cmt {
211 padding: var(--s3) var(--s4); margin-top: var(--s3); max-width: var(--measure);
212 background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--ink-hi); border-radius: var(--r-s);
213 white-space: normal; font-family: var(--font); font-size: var(--fs-s); line-height: 22px;
214 & p { white-space: normal; }
215 & .c-who { font-weight: bold; }
216 & .c-state { color: var(--ink-dim); }
217 & .c-where { font-size: var(--fs-s); overflow-wrap: anywhere; }
218 & .c-act { margin-top: var(--s2); }
219 & .c-act button { height: 26px; font-size: var(--fs-xs); }
220 &[data-resolved="true"] { border-left-color: var(--border-strong); }
221 &[data-resolved="true"] .c-body { color: var(--ink-dim); }
222 }
223 .dt .fnote td { background: var(--bg-canvas); padding: var(--s2) var(--s3); white-space: normal; }
224 .dt .fnote .cmt, .dt .fnote .cform { margin: 0; }
225 .dt .fnote .cmt + .cmt, .dt .fnote .cmt + .cform { margin-top: var(--s2); }
226 .ln a { color: inherit; text-decoration: none; }
227 .ln a:hover, .ln a:focus-visible { text-decoration: underline; color: var(--ink-hi); }
228
229 /* the forms: a comment, a new merge request */
230 .cform {
231 display: grid; gap: var(--s2); margin-top: var(--s3); max-width: var(--measure);
232 font-family: var(--font); font-size: var(--fs-s);
233 & label { color: var(--ink-dim); font-weight: 600; }
234 & textarea, & input[type="text"] {
235 display: block; width: 100%; font: inherit; font-size: var(--fs); color: inherit; resize: vertical;
236 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s); padding: var(--s2) var(--s3);
237 }
238 & textarea::placeholder { color: var(--ink-mute); opacity: 1; }
239 & .f-btns { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); }
240 }
241
242 /* the public issue form: counters, field errors, the honeypot out of sight */
243 .cform output { justify-self: end; font: var(--fs-s) var(--mono); color: var(--ink-mute); }
244 .cform output.warn { color: var(--ink-hi); font-weight: 700; }
245 .cform output.over { color: var(--red); font-weight: 700; }
246 .cform .f-error { color: var(--red); margin: 0; }
247 .cform .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
248
249 /* the inbox: items awaiting moderation, shown as text */
250 .pending-list { display: grid; gap: var(--s3); list-style: none; padding: 0; margin: 0; }
251 .pending { padding: var(--s3) var(--s4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); display: grid; gap: var(--s2); }
252 .pending .p-head { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: baseline; color: var(--ink-dim); font-size: var(--fs-s); }
253 .pending .p-title { margin: 0; font-weight: 700; color: var(--ink-hi); overflow-wrap: anywhere; }
254 .pending .p-body { margin: 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
255 .pending .p-btns { display: flex; gap: var(--s2); flex-wrap: wrap; }
256 .pending .p-btns form { margin: 0; }
257
258 .list.mrs {
259 & .c-n { width: 64px; }
260 & .c-state { width: 110px; }
261 & .c-subject { overflow: hidden; text-overflow: ellipsis; }
262 & .c-who { width: 140px; }
263 & .c-when { width: 100px; }
264 & tr[data-state="open"] .c-state { font-weight: bold; }
265 & tr[data-state="open"] .c-state::before { content: "● "; color: var(--teal); }
266 & tr[data-state="merged"] .c-state::before { content: "✓ "; color: var(--teal); }
267 & tr[data-state="closed"] .c-state::before { content: "✗ "; color: var(--red); }
268 }
269 #mr-notice:empty { display: none; }
270
271 /* the owner's inbox: counters, repository filter, then the two lists */
272 .inbox {
273 display: flex; flex-direction: column; gap: var(--s4);
274 & .inbox-counts { font-size: var(--fs-l, var(--fs)); color: var(--ink-dim); }
275 & .inbox-counts strong { color: var(--ink-hi); font-family: var(--mono); }
276 & .since { align-self: flex-start; max-width: 100%; }
277 }
278
279 @media (max-width: 700px) {
280 .list.mrs .c-who { display: none; }
281 }
282}
283
284@layer components {
285 .c-body { white-space: normal; overflow-wrap: anywhere; }
286 .c-body.prose > * { margin-block: .5em; }
287 .c-body .ref { font-variant-numeric: tabular-nums; text-decoration: underline; }
288 .cmt > .cmt { margin-inline-start: 2ch; }
289}