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