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