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: the list of files on top, which follows the
79 review and scrolls on its own; checks, commits and settings scroll with
80 the page. Only on a two-column layout. */
81 @media (min-width: 1081px) {
82 /* the rail runs the height of the content, so that its first block can
83 stick all along the diff */
84 .work.has-rail:has(.r-files) { align-items: stretch; }
85 .rail:has(.r-files) { align-self: stretch; }
86 .rail .r-files {
87 position: sticky; top: calc(var(--hdr-h, 0px) + var(--s4)); z-index: 3;
88 display: flex; flex-direction: column;
89 max-height: calc(100dvh - var(--hdr-h, 0px) - var(--s4) * 2);
90 }
91 .rail .r-files > .files { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; min-height: 0; }
92 }
93 /* on one column the rail goes under the diff: the list of files keeps its
94 own scroll, under a height */
95 @media (max-width: 1080px) {
96 .rail .r-files > .files { max-height: 50dvh; overflow-y: auto; overscroll-behavior: contain; }
97 }
98 .r-files {
99 & > h2 kbd { margin-left: auto; }
100 & > .ffilter { margin: var(--s2) var(--s3) 0; }
101 & > .ffilter input {
102 width: 100%; height: 30px; padding: 0 var(--s2); font: inherit; font-size: var(--fs-s); color: inherit;
103 background: var(--bg-inset); border: 1px solid var(--border-strong); border-radius: var(--r-s);
104 }
105 & > .files { margin: var(--s2) 0 !important; padding: 0 var(--s2); }
106 }
107
108 /* a file of the diff whose window is not loaded yet: about its room */
109 .dlazy {
110 display: flex; align-items: center; justify-content: center;
111 background: repeating-linear-gradient(var(--bg-surface) 0 var(--lh-code), var(--paper-alt) var(--lh-code) calc(var(--lh-code) * 2));
112 border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r);
113 font-size: var(--fs-s);
114 & a { color: var(--ink-mute); }
115 &.dlazy-1 { height: 120px; } &.dlazy-2 { height: 360px; } &.dlazy-3 { height: 900px; } &.dlazy-4 { height: 1600px; }
116 /* with scripts the window comes by itself: the link of the page without
117 scripts would only flash */
118 html.js & > a { visibility: hidden; }
119 & .notice { margin: 0; }
120 }
121 .dloose {
122 padding: var(--s2) var(--s3) var(--s3); background: var(--bg-surface);
123 border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r);
124 }
125
126 .pcommits { font-size: var(--fs-s); display: grid; gap: var(--s1); }
127 .pcommits li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px var(--s2); margin: 0 calc(-1 * var(--s2)); border-radius: 4px; }
128 .pcommits li a { font-family: var(--mono); }
129 .pcommits li[data-new] { background: var(--bg-raised); }
130 .pcommits .s { color: var(--ink); }
131
132
133 /* a note: a ruled block, under its line in the diff and in the list of comments */
134 .cmt {
135 padding: var(--s3) var(--s4); margin-top: var(--s3); max-width: var(--measure);
136 background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--ink-hi); border-radius: var(--r-s);
137 white-space: normal; font-family: var(--font); font-size: var(--fs-s); line-height: 22px;
138 & p { white-space: normal; }
139 & .c-who { font-weight: bold; }
140 & .c-state { color: var(--ink-dim); }
141 & .c-text { white-space: pre-wrap; overflow-wrap: anywhere; }
142 & .c-where { font-size: var(--fs-s); overflow-wrap: anywhere; }
143 & .c-act { margin-top: var(--s2); }
144 & .c-act button { height: 26px; font-size: var(--fs-xs); }
145 &[data-resolved="true"] { border-left-color: var(--border-strong); }
146 &[data-resolved="true"] .c-text { color: var(--ink-dim); }
147 }
148 .dt .fnote td { background: var(--bg-canvas); padding: var(--s2) var(--s3); white-space: normal; }
149 .dt .fnote .cmt, .dt .fnote .cform { margin: 0; }
150 .dt .fnote .cmt + .cmt, .dt .fnote .cmt + .cform { margin-top: var(--s2); }
151 .ln a { color: inherit; text-decoration: none; }
152 .ln a:hover, .ln a:focus-visible { text-decoration: underline; color: var(--ink-hi); }
153
154 /* the forms: a comment, a new merge request */
155 .cform {
156 display: grid; gap: var(--s2); margin-top: var(--s3); max-width: var(--measure);
157 font-family: var(--font); font-size: var(--fs-s);
158 & label { color: var(--ink-dim); font-weight: 600; }
159 & textarea, & input[type="text"] {
160 display: block; width: 100%; font: inherit; font-size: var(--fs); color: inherit; resize: vertical;
161 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s); padding: var(--s2) var(--s3);
162 }
163 & textarea::placeholder { color: var(--ink-mute); opacity: 1; }
164 & .f-btns { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); }
165 }
166
167 .list.mrs {
168 & .c-n { width: 64px; }
169 & .c-state { width: 110px; }
170 & .c-subject { overflow: hidden; text-overflow: ellipsis; }
171 & .c-who { width: 140px; }
172 & .c-when { width: 100px; }
173 & tr[data-state="open"] .c-state { font-weight: bold; }
174 & tr[data-state="open"] .c-state::before { content: "● "; color: var(--teal); }
175 & tr[data-state="merged"] .c-state::before { content: "✓ "; color: var(--teal); }
176 & tr[data-state="closed"] .c-state::before { content: "✗ "; color: var(--red); }
177 }
178 #mr-notice:empty { display: none; }
179
180 @media (max-width: 700px) {
181 .list.mrs .c-who { display: none; }
182 }
183}