1@layer components {
2 /* page title for a file: name, then its actions as plain words */
3 .file-h {
4 display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; font-size: 18px;
5 & > span:first-child { overflow-wrap: anywhere; }
6 & .acts { margin-left: auto; display: flex; gap: var(--s2); }
7 }
8 .notice {
9 padding: var(--s3) var(--s4); max-width: var(--measure); font-size: var(--fs-s);
10 background: var(--bg-surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--ink-hi); border-radius: var(--r-s);
11 }
12 .note { color: var(--ink-dim); font-size: var(--fs-s); }
13 .pad { padding: var(--s3) var(--s4); }
14
15 /* source view: gutter numbers are links (selectable lines), lines span the full width */
16 .code {
17 overflow-x: auto; padding: var(--s3) 0; font-family: var(--mono);
18 background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
19 font-size: var(--fs-code); line-height: var(--lh-code);
20 & code { display: grid; min-width: max-content; }
21 & .line { padding-right: var(--pad); border-left: 2px solid transparent; }
22 & .line:hover { background: var(--row); }
23 & .line.sel { background: var(--sel); border-left-color: var(--focus); }
24 & .ln {
25 display: inline-block; width: 8ch; padding-right: 2ch; text-align: right; /* 8ch: a multiple of tab-size, so tabs after the gutter keep their width */
26 color: var(--ink-mute); text-decoration: none; user-select: none;
27 }
28 & .ln:hover, & .sel .ln { color: var(--ink-hi); }
29 }
30 .source > summary { color: var(--ink-dim); font-size: var(--fs-s); }
31 .source[open] > summary { margin-bottom: var(--s3); }
32 .img-view { padding: var(--s4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); }
33
34 /* commit header, like `git show` */
35 .show {
36 padding: var(--s5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
37 & h1 { max-width: var(--measure); overflow-wrap: anywhere; }
38 & .msg { margin-top: var(--s3); white-space: pre-wrap; max-width: var(--measure); color: var(--ink-dim); font-size: var(--fs-s); }
39 & .show-kv { margin-top: var(--s4); }
40 & .show-kv dd { white-space: normal; overflow-wrap: anywhere; }
41 }
42 .diff-tools {
43 display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;
44 position: sticky; top: var(--hdr-h, 0px); z-index: 5; padding: var(--s2) 0; background: var(--bg-canvas);
45 & .grow { flex: 1; }
46 }
47
48 /* one file of a diff */
49 .dfile { --lnw: 4ch; }
50 .lnw-2 { --lnw: 2ch; } .lnw-3 { --lnw: 3ch; } .lnw-4 { --lnw: 4ch; } .lnw-5 { --lnw: 5ch; } .lnw-6 { --lnw: 6ch; } .lnw-7 { --lnw: 7ch; }
51 .dfile {
52 margin-top: var(--s3); scroll-margin-top: calc(var(--hdr-h, 0px) + var(--bar-h, 48px) + 8px);
53 /* a file far from the screen is neither laid out nor painted: a diff of
54 hundreds of files scrolls and switches layout like a short one. The
55 browser remembers the last size it rendered (auto). */
56 content-visibility: auto; contain-intrinsic-size: auto 480px;
57 & > summary {
58 /* under the diff tools, whose height --bar-h is (two lines when they
59 wrap: the merge request bar on a narrow screen) */
60 position: sticky; top: calc(var(--hdr-h, 0px) + var(--bar-h, 48px)); z-index: 4;
61 background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r) var(--r) 0 0; padding: var(--s2) var(--s3);
62 font-family: var(--mono); font-size: var(--fs-s);
63 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; list-style: none;
64 }
65 &:not([open]) > summary { border-radius: var(--r); }
66 & > summary::-webkit-details-marker { display: none; }
67 & > summary::before { content: "▸ "; }
68 &[open] > summary::before { content: "▾ "; }
69 & .st { font-weight: bold; }
70 & .p { font-weight: bold; }
71 & > .note { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r); background: var(--bg-surface); }
72 }
73 .dt {
74 width: max-content; min-width: 100%; font-family: var(--mono);
75 font-size: var(--fs-code); line-height: var(--lh-code);
76 & td { padding: 0; vertical-align: top; }
77 /* the gutter is as wide as the largest line number of the file (lnw-N on
78 .dfile), plus 1ch on each side */
79 & .ln { width: calc(var(--lnw) + 2ch); min-width: calc(var(--lnw) + 2ch); padding: 0 1ch; text-align: right; color: var(--ink-mute); user-select: none; }
80 & .m { width: 2ch; text-align: center; user-select: none; color: var(--ink-dim); }
81 & .tx { white-space: pre; }
82 /* the hunk headers and the hidden lines stay quiet: a faint band between
83 the code, so that the eye keeps reading */
84 & .hunk td, & .gap td { background: color-mix(in srgb, var(--paper-alt) 35%, var(--paper)); }
85 & .hunk td { color: var(--ink-mute); padding: 0 1ch; }
86 /* a run of hidden lines: the whole row loads them */
87 & .gap td { padding: 0; }
88 & .gap button {
89 display: block; width: 100%; padding: 2px 1ch; text-align: left; cursor: pointer;
90 font: inherit; color: var(--ink-mute); background: none; border: 0;
91 border-block: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
92 }
93 & .gap button:hover, & .gap button:focus-visible { color: var(--ink-hi); background: var(--bg-strong); }
94 & .gap button:disabled { cursor: progress; opacity: .6; }
95 & .add, & tr.add td { background: var(--add); }
96 & .del, & tr.del td { background: var(--del); }
97 & .add.m, & tr.add .m { color: var(--teal); font-weight: bold; }
98 & .del.m, & tr.del .m { color: var(--red); font-weight: bold; }
99 & tr.add .ln, & .ln.add { color: var(--teal); }
100 & tr.del .ln, & .ln.del { color: var(--red); }
101 & .none { background: var(--paper-alt); }
102 }
103 .dscroll { overflow-x: auto; background: var(--bg-surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
104 /* split: a fixed layout takes its widths from the colgroup (the first row is
105 the hunk header, which spans all columns); long lines wrap in their half */
106 .spl {
107 width: 100%; table-layout: fixed;
108 & .c-ln { width: calc(var(--lnw) + 2ch); } & .c-m { width: 2.5ch; }
109 & .tx, & .hunk td { white-space: pre-wrap; overflow-wrap: anywhere; }
110 & td.ln:nth-child(4) { border-left: 1px solid var(--border); }
111 }
112 #diffs[data-diff="unified"] .spl, #diffs[data-diff="split"] .uni { display: none; }
113
114 /* diff table of contents in the rail: one line a file, the name first and
115 its directory dimmed after it (cut from its start when long), the
116 comments, the counts */
117 .files {
118 font-size: var(--fs-s); position: relative; /* the offsets of its links count from it (ermite.js) */
119 & li[hidden] { display: none; }
120 & a {
121 /* centred, not on the baseline: the smaller counts on a baseline sit
122 a pixel below the row, enough to give the list a scroll bar */
123 display: grid; grid-template-columns: 1.5ch minmax(0, 1fr) auto auto; column-gap: var(--s2); align-items: center;
124 height: 26px; line-height: 26px; padding: 0 var(--s2); margin: 0 calc(-1 * var(--s2));
125 border-radius: 4px; border: 1px solid transparent; text-decoration: none; font-family: var(--mono); color: var(--ink);
126 }
127 & a:hover { background: var(--bg-raised); }
128 & a:hover .p { text-decoration: underline; }
129 & a[aria-current="true"] { background: var(--row); border-color: var(--ink-mute); }
130 & a[aria-current="true"] .p { font-weight: bold; color: var(--ink-hi); }
131 & .st { color: var(--ink-mute); font-weight: bold; }
132 & .st[data-st="A"] { color: var(--teal); }
133 & .st[data-st="D"] { color: var(--red); }
134 & .nm { overflow: hidden; white-space: nowrap; display: flex; min-width: 0; }
135 /* the name gives way last: the directory shrinks first, down to its
136 ellipsis, before the name is cut */
137 & .nm .p { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
138 /* cut from the start (rtl), the path itself kept in its order (bdi) */
139 & .nm .d { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; color: var(--ink-mute); padding-left: 1ch; }
140 & .nm .d bdi { direction: ltr; }
141 & .cn { font: 600 var(--fs-xs) / 16px var(--font); padding: 0 6px; border-radius: 999px; background: var(--ink-hi); color: var(--on-ink); align-self: center; }
142 & .cn.done { background: var(--bg-strong); color: var(--ink-dim); }
143 & .n { color: var(--ink-dim); font-size: var(--fs-xs); white-space: nowrap; }
144 }
145
146 @media (max-width: 700px) {
147 .diff-tools .grow { flex-basis: 100%; height: 0; }
148 .file-h .acts { margin-left: 0; }
149 }
150 .pager { display: flex; gap: var(--s3); justify-content: center; }
151 .days section[hidden] { display: none; }
152 .list.refs {
153 & .c-kind { width: 80px; color: var(--ink-mute); }
154 & .c-name { width: 32%; font-family: var(--mono); font-size: var(--fs-s); }
155 & .c-sha { width: 96px; }
156 & .c-sub { width: auto; }
157 }
158 /* the commit table inside a rail block: no frame of its own. The id, the
159 checks and the date take the width of their text (an empty checks cell
160 next to nothing); the subject takes the rest, cut at its end only. */
161 .rail .list.commits {
162 border: 0; border-radius: 0; background: none; table-layout: auto;
163 & td { height: 34px; padding: 0 var(--s2); width: 1%; white-space: nowrap; }
164 & td:first-child { padding-left: var(--s3); }
165 & td:last-child { padding-right: var(--s4); }
166 & .c-who { display: none; }
167 & .c-subject { width: auto; max-width: 0; font-size: var(--fs-s); }
168 /* the pills are hidden here, the signature one too: the rail is narrow and
169 the subject is what the row is for; the commit page shows the badge. */
170 & .c-subject .pill { display: none; }
171 & .c-ck:empty { padding: 0; }
172 & .c-when { text-align: right; }
173 }
174 .rail section > p { overflow-wrap: anywhere; }
175 @media (max-width: 700px) {
176 /* the name takes what the fixed columns leave */
177 .list.refs .c-name { width: auto; }
178 }
179}
180
181@layer components {
182 .gallery section { margin-top: var(--s6); }
183 .gallery .rule-h > :last-child { font-weight: normal; color: var(--ink-mute); order: 2; }
184 .gallery .rule-h::after { order: 1; }
185 .gallery .files { max-width: var(--rail); }
186 .linkish { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
187 .linkish:hover { text-decoration-color: currentColor; }
188}
189
190@layer components {
191 /* counts and bars: + in teal, - in red, everywhere a change is summarised */
192 .plus { color: var(--teal); }
193 .minus { color: var(--red); }
194}