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