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 & .hunk td { color: var(--ink-mute); background: var(--paper-alt); padding: 0 1ch; }
83 & .add, & tr.add td { background: var(--add); }
84 & .del, & tr.del td { background: var(--del); }
85 & .add.m, & tr.add .m { color: var(--teal); font-weight: bold; }
86 & .del.m, & tr.del .m { color: var(--red); font-weight: bold; }
87 & tr.add .ln, & .ln.add { color: var(--teal); }
88 & tr.del .ln, & .ln.del { color: var(--red); }
89 & .none { background: var(--paper-alt); }
90 }
91 .dscroll { overflow-x: auto; background: var(--bg-surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
92 /* split: a fixed layout takes its widths from the colgroup (the first row is
93 the hunk header, which spans all columns); long lines wrap in their half */
94 .spl {
95 width: 100%; table-layout: fixed;
96 & .c-ln { width: calc(var(--lnw) + 2ch); } & .c-m { width: 2.5ch; }
97 & .tx, & .hunk td { white-space: pre-wrap; overflow-wrap: anywhere; }
98 & td.ln:nth-child(4) { border-left: 1px solid var(--border); }
99 }
100 #diffs[data-diff="unified"] .spl, #diffs[data-diff="split"] .uni { display: none; }
101
102 /* diff table of contents in the rail: one line a file, the name first and
103 its directory dimmed after it (cut from its start when long), the
104 comments, the counts */
105 .files {
106 font-size: var(--fs-s); position: relative; /* the offsets of its links count from it (ermite.js) */
107 & li[hidden] { display: none; }
108 & a {
109 display: grid; grid-template-columns: 1.5ch minmax(0, 1fr) auto auto; column-gap: var(--s2); align-items: baseline;
110 height: 26px; line-height: 26px; padding: 0 var(--s2); margin: 0 calc(-1 * var(--s2));
111 border-radius: 4px; border-left: 2px solid transparent; text-decoration: none; font-family: var(--mono); color: var(--ink);
112 }
113 & a:hover { background: var(--bg-raised); }
114 & a:hover .p { text-decoration: underline; }
115 & a[aria-current="true"] { background: var(--row); border-left-color: var(--ink-hi); }
116 & a[aria-current="true"] .p { font-weight: bold; color: var(--ink-hi); }
117 & .st { color: var(--ink-mute); font-weight: bold; }
118 & .st[data-st="A"] { color: var(--teal); }
119 & .st[data-st="D"] { color: var(--red); }
120 & .nm { overflow: hidden; white-space: nowrap; display: flex; min-width: 0; }
121 & .nm .p { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
122 /* cut from the start (rtl), the path itself kept in its order (bdi) */
123 & .nm .d { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; color: var(--ink-mute); padding-left: 1ch; }
124 & .nm .d bdi { direction: ltr; }
125 & .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; }
126 & .cn.done { background: var(--bg-strong); color: var(--ink-dim); }
127 & .n { color: var(--ink-dim); font-size: var(--fs-xs); white-space: nowrap; }
128 }
129
130 @media (max-width: 700px) {
131 .diff-tools .grow { flex-basis: 100%; height: 0; }
132 .file-h .acts { margin-left: 0; }
133 }
134 .pager { display: flex; gap: var(--s3); justify-content: center; }
135 .days section[hidden] { display: none; }
136 .list.refs {
137 & .c-kind { width: 80px; color: var(--ink-mute); }
138 & .c-name { width: 32%; font-family: var(--mono); font-size: var(--fs-s); }
139 & .c-sha { width: 96px; }
140 & .c-sub { width: auto; }
141 }
142 /* the commit table inside a rail block: no frame of its own */
143 .rail .list.commits {
144 border: 0; border-radius: 0; background: none;
145 & td { height: 34px; padding: 0 var(--s2); }
146 & td.cur { width: 3px; padding: 0; }
147 & td:nth-child(2) { padding-left: var(--s3); }
148 & td:last-child { padding-right: var(--s4); }
149 & .c-who { display: none; }
150 & .c-sha { width: 72px; }
151 & .c-subject { font-size: var(--fs-s); }
152 & .c-subject .pill { display: none; }
153 & .c-when { width: 70px; text-align: right; }
154 }
155 .rail section > p { overflow-wrap: anywhere; }
156 @media (max-width: 700px) {
157 /* the name takes what the fixed columns leave */
158 .list.tree .c-name, .list.refs .c-name { width: auto; }
159 }
160}
161
162@layer components {
163 .gallery section { margin-top: var(--s6); }
164 .gallery .rule-h > :last-child { font-weight: normal; color: var(--ink-mute); order: 2; }
165 .gallery .rule-h::after { order: 1; }
166 .gallery .files { max-width: var(--rail); }
167 .linkish { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
168 .linkish:hover { text-decoration-color: currentColor; }
169}
170
171@layer components {
172 /* counts and bars: + in teal, - in red, everywhere a change is summarised */
173 .plus { color: var(--teal); }
174 .minus { color: var(--red); }
175}