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