size: 5 KiB

1* {
2 box-sizing: border-box;
3}
4
5:root {
6 --bg: white;
7 --fg: black;
8
9 --table-border-color: #ddd;
10 --table-row-hover-bg: papayawhip;
11 --table-border-color: black;
12 --table-stripe-bg: #f5f5f5;
13 --pre-bg: whitesmoke;
14 --pre-border-color: gainsboro;
15
16 --diff-hunk-header-bg: blanchedalmond;
17 --diff-added-fg: darkgreen;
18 --diff-added-bg: transparent;
19 --diff-removed-fg: brown;
20 --diff-removed-bg: transparent;
21
22 --selected-line-bg: gainsboro;
23
24 --serif-fonts: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
25 --sans-serif-fonts: system-ui, sans-serif;
26 --monospace-fonts:
27 ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
28 "DejaVu Sans Mono", monospace;
29
30 background-color: var(--bg);
31 color: var(--fg);
32 font-family: var(--serif-fonts);
33 font-size: 100%;
34 scroll-behavior: smooth;
35}
36
37.monospace,
38code,
39pre {
40 font-family: var(--monospace-fonts);
41 font-size: 1rem;
42}
43
44#breadcrumbs {
45 font-family: var(--monospace-fonts);
46 font-size: 1.2rem;
47 font-weight: bold;
48}
49
50header h1 {
51 font-size: inherit;
52 font-weight: inherit;
53 display: inline-block;
54 margin: 0;
55}
56
57table.fancy {
58 text-align: left;
59 border-collapse: collapse;
60 max-width: 100%;
61 overflow: scroll;
62
63 white-space: nowrap;
64 /*border-top: 2px solid var(--table-border-color);*/
65
66 tbody tr:nth-child(odd) {
67 background-color: var(--table-stripe-bg);
68 }
69 tbody tr:hover {
70 background-color: var(--table-row-hover-bg);
71 }
72 td,
73 th {
74 padding-top: 0.3rem;
75 padding-bottom: 0.3rem;
76 }
77 td + td,
78 th + th {
79 padding-left: 2rem;
80 }
81 td:first-child,
82 th:first-child {
83 padding-left: 0.4rem;
84 }
85 td:last-child,
86 th:last-child {
87 padding-right: 0.4rem;
88 }
89}
90
91table {
92 font-variant-numeric: tabular-nums;
93}
94
95img,
96video {
97 max-width: 100%;
98 max-height: 100%;
99}
100
101summary {
102 cursor: pointer;
103 user-select: none;
104 width: fit-content;
105}
106
107pre {
108 overflow-x: auto;
109 max-width: 60rem;
110}
111.readme-content {
112 margin: 0;
113}
114pre.readme-content {
115}
116div.readme-content {
117 max-width: 50rem;
118 background-color: transparent;
119
120 h1,
121 h2,
122 h3,
123 h4,
124 h5,
125 h6 {
126 line-height: 1;
127 margin-top: 2rem;
128 }
129
130 p {
131 line-height: 1.4;
132 margin-top: 1.5rem;
133 }
134
135 ul p {
136 margin-top: 0.5rem;
137 margin-bottom: 0.2rem;
138 }
139
140 code {
141 border: 1px solid var(--pre-border-color);
142 border-radius: 4px;
143 padding: 0 5px;
144 }
145 pre {
146 background-color: var(--pre-bg);
147 padding: 1rem;
148 code {
149 border: none;
150 padding: 0;
151 }
152 }
153}
154
155.pre-wrap {
156 white-space: pre-wrap;
157}
158
159.git-clone-command {
160 padding: 0.5rem 0;
161 overflow-x: auto;
162 margin-top: 0.5rem;
163 width: fit-content; /* avoid trailing whitespace when selecting text */
164 max-width: 100%;
165
166 &:before {
167 content: "$ ";
168 }
169}
170
171.repo-nav {
172 ul {
173 list-style-type: none;
174 padding: 0;
175 margin: 0;
176 }
177 li {
178 display: inline-block;
179 padding: 0.5rem 0.5rem;
180 border: 1px solid transparent;
181
182 &.active {
183 border: 1px solid var(--fg);
184 border-bottom: 1px solid var(--bg);
185 z-index: 1;
186
187 a {
188 color: inherit;
189 text-decoration: none;
190 cursor: default;
191 pointer-events: none;
192 }
193 }
194 }
195}
196
197.repo-content {
198 border: 1px solid var(--fg);
199 margin-top: -1px; /* so nav item's bottom border overlaps its border */
200 width: fit-content;
201 max-width: 100%;
202 overflow-x: auto;
203 padding: 1rem;
204
205 *:first-child {
206 margin-top: 0;
207 }
208 *:last-child {
209 margin-bottom: 0;
210 }
211}
212
213.blob-content {
214 padding: 1rem;
215 width: fit-content;
216 max-width: 100%;
217 overflow-x: auto;
218 border: 1px solid var(--table-border-color);
219}
220
221table.text-blob-content {
222 border-collapse: collapse;
223
224 .line-content {
225 white-space: pre;
226 padding-left: 0.5rem;
227 }
228 .line-number {
229 margin-right: 1rem;
230 text-align: right;
231 border-right: 1px solid var(--fg);
232 padding-right: 0.5rem;
233 user-select: none;
234 }
235
236 tr:has(a:target),
237 tr.selected-range {
238 background-color: var(--selected-line-bg);
239 }
240}
241
242.patch-link {
243 margin-top: 1.5rem;
244 margin-bottom: 0.2rem;
245}
246
247.commit-content {
248 width: fit-content;
249 max-width: 100%;
250 overflow-x: auto;
251 border: 1px solid var(--fg);
252 padding: 1rem;
253
254 margin-top: 0;
255
256 .bold {
257 font-weight: bold;
258 }
259 .hunk-header {
260 background-color: var(--diff-hunk-header-bg);
261 }
262 .added {
263 color: var(--diff-added-fg);
264 background-color: var(--diff-added-bg);
265 }
266 .removed {
267 color: var(--diff-removed-fg);
268 background-color: var(--diff-removed-bg);
269 }
270}
271
272@media screen and (max-width: 600px) {
273 .repo-content,
274 .blob-content,
275 .commit-content {
276 padding: 0.5rem;
277 }
278}
279
280@media (prefers-color-scheme: dark) {
281 :root {
282 --bg: #111;
283 --fg: #ddd;
284
285 --diff-hunk-header-bg: #444;
286 --diff-added-fg: lightgreen;
287 --diff-added-bg: transparent;
288 --diff-removed-fg: lightcoral;
289 --diff-removed-bg: transparent;
290
291 --selected-line-bg: #444;
292
293 --table-border-color: #444;
294 --table-row-hover-bg: #444;
295 --table-border-color: #ddd;
296 --table-stripe-bg: #1a1a1a;
297 --pre-bg: #444;
298 --pre-border-color: #555;
299
300 font-family: var(--sans-serif-fonts);
301 }
302
303 a {
304 color: cornflowerblue;
305 }
306 a:visited {
307 color: violet;
308 }
309}