style.css (11398B)
1 /* Dark Mode: Default */
2 :root {
3 --max-width: 1280px;
4 --fg1: #dadadb;
5 --fg2: #8d8e8f;
6 --bg1: #1d1e20;
7 --bg2: #2e2e33;
8 --bg3: #04121b;
9 --hl1: #8c90d4;
10 --del: #db4325;
11 --add: #006164;
12 --fg-code: #ebdbb2;
13 --fg-code-co: #777e94;
14 --fg-code-ex: #ff7540;
15 --fg-code-fu: var(--fg-code-ex);
16 --fg-code-bu: var(--fg-code-ex);
17 --fg-code-st: #b8bb26;
18 --fg-code-op: #ff7540;
19 }
20
21 /* Bright Mode */
22 @media (prefers-color-scheme: light) {
23 :root {
24 --fg1: #1e1e1e;
25 --fg2: #8d8e8f;
26 --bg1: #f5f5f5;
27 --bg2: #ffffff;
28 --bg3: #fafafa;
29 --hl1: #6c71c4;
30 --fg-code: teal;
31 --fg-code-co: #6a737d;
32 --fg-code-ex: #d73a49;
33 --fg-code-fu: var(--fg-code-ex);
34 --fg-code-bu: var(--fg-code-ex);
35 --fg-code-st: #106303;
36 --fg-code-op: #d73a49;
37 }
38 }
39
40 * {
41 overflow-wrap: break-word;
42 scroll-behavior: smooth;
43 }
44
45 #content {
46 width: 100%;
47 max-width: var(--max-width);
48 overflow-x: auto;
49 margin-left: auto;
50 margin-right: auto;
51 }
52
53 /* Images in content page should be at most as wide as the page */
54 #content img {
55 width: auto;
56 height: auto;
57 max-width: 100%;
58 }
59
60 /* fonts and colours */
61 body {
62 font-family: sans-serif, serif;
63 color: var(--fg1);
64 background-color: var(--bg1);
65 }
66
67 /* Set headline sizes and margins */
68 h1 {
69 font-size: 1.25em;
70 }
71 h2, h3 {
72 font-size: 1.15em;
73 }
74 h4, h5, h6, span.desc {
75 font-size: 1.1em;
76 }
77 h1, h2, h3, h4, h5, h6 {
78 margin: 0;
79 }
80
81 /* Anchors */
82 a {
83 color: var(--hl1);
84 }
85 a:hover {
86 text-decoration: underline;
87 }
88
89 a.d,
90 a.h,
91 a.i,
92 a.line {
93 text-decoration: none;
94 }
95
96 /* diff: inserts */
97 .A,
98 span.i,
99 pre > a.i {
100 color: #FFFFFF;
101 background-color: var(--add);
102 }
103 /* diff: deletes */
104 .D,
105 span.d,
106 pre > a.d {
107 color: #FFFFFF;
108 background-color: var(--del);
109 }
110 /* diff: line-info */
111 pre > a.h {
112 color: var(--fg2);
113 }
114
115 /* Code Blocks */
116 pre#blob {
117 font-family: monospace;
118 font-size: 125%;
119 overflow-x: scroll;
120 background: var(--bg3);
121 color: var(--fg1);
122 border: 1px solid var(--fg2);
123 border-radius: 5px;
124 }
125
126 #blob > a {
127 color: var(--hl1);
128 border-right: 3px solid #aaa;
129 padding: 0 5px 0 0;
130 }
131
132 #blob > a:hover {
133 color: var(--hl1);
134 }
135
136 /* Copy Codeblock Marker */
137 .copycodeblock:after {
138 content: ' [copy to clipboard]';
139 }
140
141 /* Code Blocks on Summary Page */
142 code {
143 font-size: 130%;
144 color: var(--fg-code);
145 }
146
147 .sourceCode {
148 background-color: var(--bg2);
149 overflow: scroll;
150 }
151
152 code a {
153 color: var(--fg-code);
154 }
155 code .co {
156 color: var(--fg-code-co);
157 }
158 code .ex {
159 color: var(--fg-code-ex);
160 }
161 code .fu {
162 color: var(--fg-code-fu);
163 }
164 code .bu {
165 color: var(--fg-code-bu);
166 }
167 code .st {
168 color: var(--fg-code-st);
169 }
170 code .op {
171 color: var(--fg-code-op);
172 }
173
174
175 td {
176 padding: 0 0.4em;
177 }
178
179 hr {
180 border: 0;
181 border-top: 3px solid var(--fg2);
182 height: 3px;
183 }
184
185 pre#description {
186 font-family: sans-serif, serif;
187 white-space: pre-wrap;
188 word-break: keep-all;
189 }
190
191 /* make headline centered */
192 body > table:nth-child(1) {
193 margin-left: auto;
194 margin-right: auto;
195 width: 100%;
196 max-width: var(--max-width);
197 }
198
199 /* Hide icon and empty cells in headline */
200 body > table:nth-child(1) > tbody > tr > td:nth-child(1) {
201 display: none;
202 }
203
204 /* Menu Bar */
205 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a {
206 padding-left: 0.25em;
207 padding-right: 0.25em;
208 padding-top: 0.05em;
209 padding-bottom: 0.1em;
210 border-radius: 3px;
211 background-color: var(--bg2);
212 white-space: nowrap;
213 display: inline-block;
214 margin-top: 2px;
215 margin-bottom: 3px;
216 }
217 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td {
218 padding-top: 0.25em;
219 padding-bottom: 0.25em;
220 font-size: 110%;
221 visibility: hidden; /* semi-hides "|" */
222 }
223 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a {
224 visibility: visible !important;
225 }
226 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a:hover,
227 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a.active
228 {
229 text-decoration: none;
230 background-color: var(--hl1);
231 color: var(--fg1);
232 }
233 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a:hover:before,
234 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a.active:before {
235 background-color: var(--fg1);
236 }
237
238 /* Add icons in front of menu entries */
239 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a:before {
240 content: "";
241 width: 1em;
242 height: 1em;
243 display: inline-block;
244 background-color: var(--hl1);
245 margin-bottom: -0.15em;
246 margin-right: 0.25em;
247 }
248 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="index.html"]:before {
249 mask: url("/assets/img/home.svg") no-repeat 0% 0%;
250 mask-size: contain;
251 }
252 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="log.html"]:before {
253 mask: url("/assets/img/git-commit.svg") no-repeat 0% 0%;
254 mask-size: contain;
255 }
256 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="files.html"]:before {
257 mask: url("/assets/img/folder.svg") no-repeat 0% 0%;
258 mask-size: contain;
259 }
260 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="exports.html"]:before {
261 mask: url("/assets/img/download.svg") no-repeat 0% 0%;
262 mask-size: contain;
263 }
264 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="refs.html"]:before {
265 mask: url("/assets/img/git-branch.svg") no-repeat 0% 0%;
266 mask-size: contain;
267 }
268 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="README.html"]:before,
269 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="README.md.html"]:before,
270 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="README.txt.html"]:before,
271 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="readme.html"]:before,
272 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="readme.md.html"]:before,
273 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="readme.txt.html"]:before,
274 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="Readme.html"]:before,
275 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="Readme.md.html"]:before,
276 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="Readme.txt.html"]:before
277 {
278 mask: url("/assets/img/file-text.svg") no-repeat 0% 0%;
279 mask-size: contain;
280 }
281 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$=".gitmodules.html"]:before {
282 mask: url("/assets/img/share.svg") no-repeat 0% 0%;
283 mask-size: contain;
284 }
285 body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td > a[href$="atom.xml"]:before {
286 mask: url("/assets/img/rss.svg") no-repeat 0% 0%;
287 mask-size: contain;
288 }
289
290 /* Activity bar ------------------------------------------------------------ */
291
292 /* style activity points */
293 .activitypoint {
294 color: var(--hl1);
295 font-size: 150%;
296 }
297
298 /* Decrease size of legend */
299 #activitylegend {
300 font-size: 0.8em;
301 }
302
303 /* Add year separators between points */
304 span[id*="-12"].activitypoint:after {
305 content:"\0020\007C\0020";
306 }
307
308 /* Modern Layout scheme ----------------------------------------------------- */
309
310 /* Colour on hover */
311 #branches > tr:hover > td,
312 #tags > tr:hover > td,
313 #tags > tr:hover > td,
314 #index > tr:hover > td,
315 #log > tr:hover > td,
316 #files > tr:hover > td
317 {
318 background-color: var(--bg2);
319 }
320
321 /* Ensure Tables are full width */
322 table#index,
323 table#log,
324 table#branches,
325 table#tags,
326 table#exports,
327 table#files
328 {
329 width:100%
330 }
331
332 /* Hide Table headlines */
333 #index > thead > tr > td,
334 #log > thead > tr > td,
335 #branches > thead > tr > td,
336 #tags > thead > tr > td,
337 #exports > thead > tr > td,
338 #files > thead > tr > td
339 {
340 display: none;
341 }
342
343 /* Make table rows vartical with full width */
344 #index > tbody > tr > td,
345 #log > tbody > tr > td,
346 #branches > tbody > tr > td,
347 #tags > tbody > tr > td,
348 #exports > tbody > tr > td,
349 #files > tbody > tr > td
350 {
351 display:inline-block;
352 padding: 0;
353 width: 100%;
354 text-align: left;
355 }
356
357 /* Ensure table rows are full with with normal background */
358 #index > tbody > tr,
359 #log > tbody > tr,
360 #branches > tbody > tr,
361 #tags > tbody > tr,
362 #exports > tbody > tr,
363 #files > tbody > tr
364 {
365 width: 100%;
366 background: var(--bg1);
367 }
368 #index > tbody > tr:hover,
369 #log > tbody > tr:hover,
370 #branches > tbody > tr:hover,
371 #tags > tbody > tr:hover,
372 #exports > tbody > tr:hover,
373 #files > tbody > tr:hover
374 {
375 background: var(--bg2);
376 }
377
378 /* Hide first entry (file-mode) in files view */
379 #files > tbody > tr > td:nth-child(1) {
380 display: none;
381 }
382
383 /* Hide first row in exports view */
384 #exports > tbody > tr:nth-child(1) {
385 display: none;
386 }
387
388 /* Mark first entrie of each table row as headline */
389 #index > tbody > tr > td:nth-child(1),
390 #log > tbody > tr > td:nth-child(1),
391 #branches > tbody > tr > td:nth-child(1),
392 #tags > tbody > tr > td:nth-child(1),
393 #exports > tbody > tr > td:nth-child(1),
394 #files > tbody > tr > td:nth-child(2)
395 {
396 border-top: 2px solid var(--fg2);
397 padding-top: 5px;
398 font-weight: bold;
399 font-size: 1.1em;
400 }
401 #index > tbody > tr > td:nth-child(5),
402 #log > tbody > tr > td:nth-child(6),
403 #branches > tbody > tr > td:nth-child(3),
404 #tags > tbody > tr > td:nth-child(3),
405 #exports > tbody > tr > td:nth-child(3),
406 #files > tbody > tr > td:nth-child(3) {
407 padding-bottom: 5px;
408 }
409
410 /* Secondary information in each row should be smaller */
411 #index > tbody > tr > td:nth-child(3),
412 #index > tbody > tr > td:nth-child(4),
413 #log > tbody > tr > td:nth-child(3),
414 #log > tbody > tr > td:nth-child(4),
415 #log > tbody > tr > td:nth-child(5),
416 #log > tbody > tr > td:nth-child(6),
417 #branches > tbody > tr > td:nth-child(3),
418 #tags > tbody > tr > td:nth-child(3),
419 #exports > tbody > tr > td:nth-child(2),
420 #exports > tbody > tr > td:nth-child(3),
421 #files > tbody > tr > td:nth-child(3)
422 {
423 font-size: 0.8em;
424 }
425
426 /* Add descriptor to username entry */
427 #index > tbody > tr > td:nth-child(3):before,
428 #log > tbody > tr > td:nth-child(3):before,
429 #branches > tbody > tr > td:nth-child(3):before,
430 #tags > tbody > tr > td:nth-child(3):before
431
432 {
433 content: "User: ";
434 }
435
436 /* Add descriptor to commit date */
437 #index > tbody > tr > td:nth-child(4):before,
438 #log > tbody > tr x> td:nth-child(1):before,
439 #branches > tbody > tr > td:nth-child(2):before,
440 #tags > tbody > tr > td:nth-child(2):before
441 {
442 content: "Last Commit: ";
443 }
444
445 /* Add descriptors to file change indicators */
446 #log > tbody > tr > td:nth-child(4):before,
447 #exports > tbody > tr > td:nth-child(2):before
448 {
449 content: "Modified: ";
450 }
451 #log > tbody > tr > td:nth-child(5):before {
452 content: "Added: ";
453 }
454 #log > tbody > tr > td:nth-child(6):before {
455 content: "Removed: ";
456 }
457
458 /* Add descriptor for file size indicator */
459 #files > tbody > tr > td:nth-child(3):before,
460 #exports > tbody > tr > td:nth-child(3):before
461 {
462 content: "Size: ";
463 }
464
465 /* File change indicators should be in a single row */
466 #log > tbody > tr > td:nth-child(4),
467 #log > tbody > tr > td:nth-child(5),
468 #log > tbody > tr > td:nth-child(6)
469 {
470 width: auto;
471 margin-right: 1em;
472 }
