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 /* the description: Markdown as a README, as wide as the header card above;
10 the text inside keeps the reading measure */
11 .mr-desc.prose { max-width: none; padding: var(--s4) var(--s5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); }
12 .mr-desc.prose > * { max-width: var(--measure); }
13 .mr-desc.prose > pre, .mr-desc.prose > table { max-width: 100%; }
14 .c-text a { text-decoration: underline; }
15
16 .since {
17 display: inline-flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s1);
18 background: var(--bg-raised); border-radius: var(--r-s);
19 & a { padding: var(--s1) var(--s3); border-radius: 4px; text-decoration: none; color: var(--ink-dim); font-size: var(--fs-s); }
20 & a:hover { color: var(--ink-hi); }
21 & a[aria-current] { color: var(--ink-hi); font-weight: 700; background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-strong); }
22 & .mute { font-weight: 400; font-family: var(--mono); }
23 }
24
25 /* the bar above the diff of a merge request: the diff tools, the checks and
26 the menus of the owner, on one line that follows the review */
27 /* on a narrow screen the bar takes two lines: the diff tools, then the
28 checks and the menus; the file headers stick under both */
29 @media (max-width: 860px) {
30 body:has(.mr-bar) { --bar-h: 96px; }
31 .mr-bar .grow { flex-basis: 100%; height: 0; }
32 }
33 .mr-bar {
34 gap: var(--s2);
35 & .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); }
36 & .mr-ck:hover { background: var(--bg-raised); color: var(--ink-hi); }
37 }
38
39 /* a menu of the bar: a <details> whose panel opens under its button */
40 .menu {
41 position: relative;
42 & > summary { list-style: none; }
43 & > summary::-webkit-details-marker { display: none; }
44 & > summary.primary::after { content: ""; width: 0; height: 0; margin-left: 2px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
45 & .menu-pop {
46 position: absolute; right: 0; top: calc(100% + var(--s1)); z-index: 6; width: 320px; max-width: calc(100vw - 2 * var(--pad));
47 display: grid; gap: var(--s3); padding: var(--s3) var(--s4);
48 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: 0 8px 24px rgb(0 0 0 / .18);
49 font-size: var(--fs-s);
50 }
51 & .kv { margin: 0; }
52 }
53 .mmenu {
54 & .d-modes { display: grid; gap: var(--s1); border: 0; padding: 0; margin: 0; }
55 & .d-modes label, & .d-check {
56 display: flex; gap: var(--s2); align-items: center; padding: 4px var(--s2); margin: 0 calc(-1 * var(--s2));
57 border-radius: var(--r-s); color: var(--ink); cursor: pointer;
58 }
59 & .d-modes label:hover, & .d-check:hover { background: var(--bg-raised); }
60 & .d-modes label:has(:checked) { background: var(--bg-raised); color: var(--ink-hi); font-weight: 600; }
61 & .d-modes kbd, & .d-check kbd { margin-left: auto; }
62 & input { accent-color: var(--ink-hi); margin: 0; }
63 & .d-check { color: var(--ink-dim); }
64 & .d-btns { display: flex; margin-top: var(--s1); }
65 & .d-btns .btn { flex: 1; justify-content: center; }
66 & .d-draft { color: var(--ink-dim); }
67 }
68 .omenu {
69 & > summary { font-size: 18px; line-height: 1; }
70 & .menu-pop { width: 280px; }
71 & form .btn { width: 100%; justify-content: flex-start; }
72 & .btn kbd { margin-left: auto; }
73 & .d-or > summary { cursor: pointer; list-style: none; color: var(--ink-mute); }
74 & .d-or > summary::-webkit-details-marker { display: none; }
75 & .d-or > summary::before { content: "▸ "; }
76 & .d-or[open] > summary::before { content: "▾ "; }
77 & .d-or > summary:hover { color: var(--ink-hi); }
78 & .d-or[open] > .clone { margin-top: var(--s2); }
79 & .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
80 }
81
82 /* the rail of a merge request follows the review: it sticks under the
83 header, one screen high, and scrolls on its own to its checks, commits
84 and settings. The list of files keeps its own scroll, under a height, so
85 that the blocks below it stay in reach. Only on a two-column layout. */
86 @media (min-width: 1081px) {
87 .rail:has(.r-files) {
88 position: sticky; top: calc(var(--hdr-h, 0px) + var(--s4));
89 max-height: calc(100dvh - var(--hdr-h, 0px) - var(--s4) * 2);
90 overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
91 }
92 /* the blocks keep their height: the rail scrolls, it does not squeeze them */
93 .rail:has(.r-files) > * { flex: none; }
94 .rail .r-files > .files { max-height: 55dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
95 }
96 /* on one column the rail goes under the diff: the list of files keeps its
97 own scroll, under a height */
98 @media (max-width: 1080px) {
99 .rail .r-files > .files { max-height: 50dvh; overflow-y: auto; overscroll-behavior: contain; }
100 }
101 .r-files {
102 & > h2 kbd { margin-left: auto; }
103 & > h2 .fold { width: 24px; height: 24px; margin: -2px -6px -2px 0; background: none; border-color: transparent; color: var(--ink-dim); }
104 & > h2 .fold:hover { color: var(--ink-hi); border-color: var(--border-strong); }
105 & > h2 .fold .ico { transition: transform .15s; }
106 &[data-folded] > h2 { border-bottom: 0; }
107 &[data-folded] > h2 .fold .ico { transform: rotate(-90deg); }
108 &[data-folded] > :not(h2) { display: none; }
109 & > .ffilter { margin: var(--s2) var(--s3) 0; }
110 & > .ffilter input {
111 width: 100%; height: 30px; padding: 0 var(--s2); font: inherit; font-size: var(--fs-s); color: inherit;
112 background: var(--bg-inset); border: 1px solid var(--border-strong); border-radius: var(--r-s);
113 }
114 & > .files { margin: var(--s2) 0 !important; padding: 0 var(--s2); }
115 }
116
117 /* a file of the diff whose window is not loaded yet: about its room */
118 .dlazy {
119 display: flex; align-items: center; justify-content: center;
120 background: repeating-linear-gradient(var(--bg-surface) 0 var(--lh-code), var(--paper-alt) var(--lh-code) calc(var(--lh-code) * 2));
121 border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r);
122 font-size: var(--fs-s);
123 & a { color: var(--ink-mute); }
124 &.dlazy-1 { height: 120px; } &.dlazy-2 { height: 360px; } &.dlazy-3 { height: 900px; } &.dlazy-4 { height: 1600px; }
125 /* with scripts the window comes by itself: the link of the page without
126 scripts would only flash */
127 html.js & > a { visibility: hidden; }
128 & .notice { margin: 0; }
129 }
130 .dloose {
131 padding: var(--s2) var(--s3) var(--s3); background: var(--bg-surface);
132 border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r);
133 }
134
135 .pcommits { font-size: var(--fs-s); display: grid; gap: var(--s1); }
136 .pcommits li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px var(--s2); margin: 0 calc(-1 * var(--s2)); border-radius: 4px; }
137 .pcommits li a { font-family: var(--mono); }
138 .pcommits li[data-new] { background: var(--bg-raised); }
139 .pcommits .s { color: var(--ink); }
140
141
142 /* a note: a ruled block, under its line in the diff and in the list of comments */
143 .cmt {
144 padding: var(--s3) var(--s4); margin-top: var(--s3); max-width: var(--measure);
145 background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--ink-hi); border-radius: var(--r-s);
146 white-space: normal; font-family: var(--font); font-size: var(--fs-s); line-height: 22px;
147 & p { white-space: normal; }
148 & .c-who { font-weight: bold; }
149 & .c-state { color: var(--ink-dim); }
150 & .c-text { white-space: pre-wrap; overflow-wrap: anywhere; }
151 & .c-where { font-size: var(--fs-s); overflow-wrap: anywhere; }
152 & .c-act { margin-top: var(--s2); }
153 & .c-act button { height: 26px; font-size: var(--fs-xs); }
154 &[data-resolved="true"] { border-left-color: var(--border-strong); }
155 &[data-resolved="true"] .c-text { color: var(--ink-dim); }
156 }
157 .dt .fnote td { background: var(--bg-canvas); padding: var(--s2) var(--s3); white-space: normal; }
158 .dt .fnote .cmt, .dt .fnote .cform { margin: 0; }
159 .dt .fnote .cmt + .cmt, .dt .fnote .cmt + .cform { margin-top: var(--s2); }
160 .ln a { color: inherit; text-decoration: none; }
161 .ln a:hover, .ln a:focus-visible { text-decoration: underline; color: var(--ink-hi); }
162
163 /* the forms: a comment, a new merge request */
164 .cform {
165 display: grid; gap: var(--s2); margin-top: var(--s3); max-width: var(--measure);
166 font-family: var(--font); font-size: var(--fs-s);
167 & label { color: var(--ink-dim); font-weight: 600; }
168 & textarea, & input[type="text"] {
169 display: block; width: 100%; font: inherit; font-size: var(--fs); color: inherit; resize: vertical;
170 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s); padding: var(--s2) var(--s3);
171 }
172 & textarea::placeholder { color: var(--ink-mute); opacity: 1; }
173 & .f-btns { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); }
174 }
175
176 .list.mrs {
177 & .c-n { width: 64px; }
178 & .c-state { width: 110px; }
179 & .c-subject { overflow: hidden; text-overflow: ellipsis; }
180 & .c-who { width: 140px; }
181 & .c-when { width: 100px; }
182 & tr[data-state="open"] .c-state { font-weight: bold; }
183 & tr[data-state="open"] .c-state::before { content: "● "; color: var(--teal); }
184 & tr[data-state="merged"] .c-state::before { content: "✓ "; color: var(--teal); }
185 & tr[data-state="closed"] .c-state::before { content: "✗ "; color: var(--red); }
186 }
187 #mr-notice:empty { display: none; }
188
189 @media (max-width: 700px) {
190 .list.mrs .c-who { display: none; }
191 }
192}