aboutsummaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/cgit.css463
-rw-r--r--www/static/colors.css119
-rw-r--r--www/static/hl.css95
-rw-r--r--www/static/md.css248
4 files changed, 925 insertions, 0 deletions
diff --git a/www/cgit.css b/www/cgit.css
new file mode 100644
index 0000000..4baa89d
--- /dev/null
+++ b/www/cgit.css
@@ -0,0 +1,463 @@
1/* 1. Import color scheme, highlighting and markdown styles */
2@import url("static/colors.css");
3@import url("static/hl.css");
4@import url("static/md.css");
5
6/* 2. Global Reset & Body */
7* {
8 box-sizing: border-box;
9}
10
11body {
12 font-family: sans-serif;
13 font-size: 14px;
14 line-height: 1.5;
15 color: var(--color-on-background);
16 background: var(--color-background);
17 margin: 0;
18 padding: 0;
19
20 -webkit-text-size-adjust: 100%;
21 -moz-text-size-adjust: 100%;
22 text-size-adjust: 100%;
23}
24
25a {
26 color: var(--color-primary);
27 text-decoration: none;
28 transition: opacity 0.2s;
29}
30
31a:hover {
32 text-decoration: underline;
33 opacity: 0.8;
34}
35
36div#cgit {
37 padding: 0;
38 margin: 0 auto;
39 max-width: 1200px;
40 background: var(--color-background);
41 min-height: 100vh;
42 display: flex;
43 flex-direction: column;
44}
45
46/* 3. Header Area */
47div#cgit table#header {
48 width: 100%;
49 margin-bottom: 0;
50 background-color: var(--color-surface-container);
51 color: var(--color-on-surface);
52 padding: 1rem;
53 /* Transform table to flex for responsiveness */
54 display: flex;
55 flex-wrap: wrap;
56 align-items: center;
57 border-bottom: 1px solid var(--color-outline-variant);
58}
59
60/* Fix for table structure within header */
61div#cgit table#header tbody,
62div#cgit table#header tr {
63 display: contents;
64}
65
66div#cgit table#header td.logo {
67 display: block;
68 padding-right: 1rem;
69}
70
71div#cgit table#header td.main {
72 font-size: 1.5rem;
73 font-weight: bold;
74 color: var(--color-on-surface);
75 display: block;
76 flex-grow: 1;
77}
78
79div#cgit table#header td.main a {
80 color: var(--color-on-surface);
81}
82
83div#cgit table#header td.form {
84 display: block;
85 text-align: right;
86 margin-top: 0.5rem;
87}
88
89div#cgit table#header td.sub {
90 display: block;
91 width: 100%;
92 padding-top: 0.25rem;
93 color: var(--color-outline);
94 font-size: 0.9rem;
95 border-top: none; /* Removing legacy border */
96}
97
98/* Input Elements */
99select,
100input,
101textarea {
102 background-color: var(--color-surface-container-high);
103 color: var(--color-on-surface);
104 border: 1px solid var(--color-outline);
105 border-radius: 4px;
106 padding: 4px 8px;
107 font-family: inherit;
108}
109
110input[type="submit"] {
111 background-color: var(--color-primary);
112 color: var(--color-on-primary);
113 border: none;
114 cursor: pointer;
115 font-weight: 500;
116 padding: 5px 12px;
117}
118
119input[type="submit"]:hover {
120 background-color: var(--color-primary-fixed-dim);
121}
122
123/* 4. Tabs Navigation */
124div#cgit table.tabs {
125 border-bottom: 1px solid var(--color-outline-variant);
126 border-collapse: collapse;
127 margin: 0;
128 width: 100%;
129 background-color: var(--color-surface);
130 display: flex; /* Modern layout */
131 flex-wrap: wrap;
132 padding: 0 1rem;
133}
134
135div#cgit table.tabs tbody,
136div#cgit table.tabs tr {
137 display: contents;
138}
139
140div#cgit table.tabs td {
141 display: block;
142 padding: 0;
143}
144
145div#cgit table.tabs td a {
146 display: inline-block;
147 padding: 0.75rem 1rem;
148 color: var(--color-on-surface-variant);
149 font-weight: 500;
150 border-bottom: 2px solid transparent;
151}
152
153div#cgit table.tabs td a.active {
154 color: var(--color-primary);
155 border-bottom: 2px solid var(--color-primary);
156 background-color: var(--color-surface-container-low);
157}
158
159div#cgit table.tabs td a:hover {
160 background-color: var(--color-surface-container-high);
161 text-decoration: none;
162}
163
164div#cgit table.tabs td.form {
165 flex-grow: 1;
166 text-align: right;
167 padding: 0.5rem 0;
168 display: flex;
169 justify-content: flex-end;
170 align-items: center;
171}
172
173div#cgit a.button {
174 display: inline-block;
175 padding: 3px 6px;
176 margin: 0 4px;
177 background-color: var(--color-secondary-container);
178 color: var(--color-on-secondary-container);
179 border-radius: 5px;
180 font-size: 0.85rem;
181 font-weight: 500;
182 text-decoration: none;
183 transition:
184 background-color 0.2s,
185 color 0.2s,
186 box-shadow 0.2s;
187}
188
189div#cgit a.button:hover {
190 background-color: var(--color-primary);
191 color: var(--color-on-primary);
192 text-decoration: none;
193 opacity: 1;
194 box-shadow: 0 2px 4px var(--color-shadow);
195}
196
197/* 5. Content Area */
198div#cgit div.content {
199 padding: 1.5rem;
200 flex-grow: 1;
201}
202
203div#cgit div.path {
204 margin: 0;
205 padding: 0.5rem 1.5rem;
206 background-color: var(--color-surface-container-low);
207 color: var(--color-on-surface);
208 border-bottom: 1px solid var(--color-outline-variant);
209 font-family: monospace;
210}
211
212/* 6. Lists and Tables */
213div#cgit table.list {
214 width: 100%;
215 border: none;
216 border-collapse: collapse;
217 margin-bottom: 1rem;
218 font-size: 0.95rem;
219}
220
221div#cgit table.list tr {
222 background: var(--color-surface);
223 border-bottom: 1px solid var(--color-surface-container-high);
224}
225
226div#cgit table.list tr:nth-child(even) {
227 background: var(--color-surface-container-lowest);
228}
229
230div#cgit table.list tr:hover {
231 background: var(--color-surface-container-high);
232}
233
234div#cgit table.list th {
235 text-align: left;
236 font-weight: 600;
237 color: var(--color-primary);
238 padding: 0.75rem 0.5rem;
239 border-bottom: 2px solid var(--color-outline-variant);
240}
241
242div#cgit table.list td {
243 padding: 0.75rem 0.5rem;
244 vertical-align: middle;
245}
246
247/* Commit Graph columns */
248div#cgit table.list td.commitgraph {
249 font-family: monospace;
250 white-space: pre;
251 color: var(--color-on-surface);
252}
253
254/* 7. Diffs and Code */
255div#cgit table.blob,
256div#cgit table.diff,
257div#cgit table.ssdiff {
258 width: 100%;
259 border: 1px solid var(--color-outline-variant);
260 border-radius: 4px;
261 overflow: hidden;
262 margin-top: 1rem;
263 background: var(--color-surface-container-lowest);
264}
265
266div#cgit table.blob td.linenumbers,
267div#cgit table.ssdiff td.lineno {
268 border-right: 1px solid var(--color-outline-variant);
269 background: var(--color-surface-container-high);
270 text-align: right;
271 padding: 0 0.5em;
272}
273
274div#cgit table.blob td.linenumbers a,
275div#cgit table.ssdiff td.lineno a {
276 display: inline-block;
277 width: 100%;
278 text-decoration: none;
279 color: var(--color-outline);
280 padding: 0;
281}
282
283div#cgit table.blob pre,
284div#cgit table.diff td,
285div#cgit table.ssdiff td {
286 font-family: monospace;
287 font-size: 0.9em;
288 padding: 0 0.5em;
289 margin: 0;
290 color: var(--color-on-surface);
291}
292
293/* Diff coloring */
294div#cgit table.diff td div.add,
295div#cgit table.ssdiff td.add {
296 background-color: var(--diff-add-bg);
297 color: var(--diff-add-fg);
298}
299
300div#cgit table.diff td div.del,
301div#cgit table.ssdiff td.del {
302 background-color: var(--diff-del-bg);
303 color: var(--diff-del-fg);
304}
305
306div#cgit table.diff td div.hunk,
307div#cgit table.ssdiff td.hunk {
308 background-color: var(--color-surface-variant);
309 color: var(--color-on-surface-variant);
310 padding: 0.25em 0.5em;
311}
312
313/* 8. Decorations (Tags, Branches) */
314div#cgit a.branch-deco,
315div#cgit a.tag-deco,
316div#cgit a.tag-annotated-deco,
317div#cgit a.remote-deco,
318div#cgit a.deco {
319 display: inline-block;
320 padding: 2px 6px;
321 border-radius: 4px;
322 font-size: 0.8em;
323 margin-left: 0.5em;
324 border: none;
325}
326
327div#cgit a.branch-deco {
328 background-color: var(--color-primary-container);
329 color: var(--color-on-primary-container);
330}
331
332div#cgit a.tag-deco {
333 background-color: var(--color-tertiary-container);
334 color: var(--color-on-tertiary-container);
335}
336
337div#cgit a.tag-annotated-deco {
338 background-color: var(--color-tertiary-fixed);
339 color: var(--color-on-tertiary-fixed);
340}
341
342div#cgit a.remote-deco {
343 background-color: var(--color-secondary-container);
344 color: var(--color-on-secondary-container);
345}
346
347div#cgit a.deco {
348 background-color: var(--color-secondary-fixed);
349 color: var(--color-on-secondary-fixed);
350}
351
352/* 9. Commit Info Table */
353div#cgit table.commit-info {
354 background-color: var(--color-surface-container);
355 border: 1px solid var(--color-outline-variant);
356 border-radius: 8px;
357 padding: 1rem;
358 width: 100%;
359 margin-top: 1rem;
360 border-collapse: separate;
361 border-spacing: 0 0.5rem;
362}
363
364div#cgit table.commit-info th {
365 text-align: left;
366 padding: 0 1rem;
367 color: var(--color-secondary);
368}
369
370div#cgit table.commit-info td {
371 padding: 0 1rem;
372}
373
374div#cgit div.commit-subject {
375 font-size: 1.2rem;
376 font-weight: bold;
377 color: var(--color-primary);
378 margin: 1.5rem 0 0.5rem 0;
379}
380
381div#cgit div.commit-msg {
382 white-space: pre-wrap;
383 font-family: monospace;
384 padding: 1rem;
385 background: var(--color-surface-container-low);
386 border-radius: 4px;
387 color: var(--color-on-surface);
388}
389
390/* 10. Footer */
391div#cgit div.footer {
392 margin-top: auto;
393 padding: 2rem 1rem;
394 text-align: center;
395 font-size: 0.85rem;
396 color: var(--color-outline);
397 border-top: 1px solid var(--color-outline-variant);
398}
399
400div#cgit div.error {
401 color: var(--color-error);
402 background: var(--color-error-container);
403 padding: 1rem;
404 border-radius: 4px;
405 margin: 1rem 0;
406}
407
408/* 11. Responsive Adjustments */
409@media only screen and (max-width: 768px) {
410 div#cgit table#header {
411 flex-direction: column;
412 align-items: flex-start;
413 }
414
415 div#cgit table#header td.logo,
416 div#cgit table#header td.main,
417 div#cgit table#header td.form {
418 width: 100%;
419 text-align: left;
420 margin-bottom: 0.5rem;
421 }
422
423 div#cgit table.tabs {
424 flex-direction: column;
425 padding: 0;
426 }
427
428 div#cgit table.tabs td a {
429 width: 100%;
430 border-bottom: 1px solid var(--color-outline-variant);
431 }
432
433 div#cgit table.tabs td.form {
434 width: 100%;
435 justify-content: flex-start;
436 padding: 1rem;
437 }
438
439 div#cgit div.content {
440 padding: 1rem 0.5rem;
441 overflow-x: auto; /* Enable horizontal scroll for content */
442 }
443
444 /* Force tables to scroll on small screens */
445 div#cgit table.list,
446 div#cgit table.blob,
447 div#cgit table.diff {
448 white-space: nowrap;
449 }
450
451 /* Allow wrapping in logs on mobile to prevent extreme width */
452 div#cgit table.list td.logmsg {
453 white-space: normal;
454 min-width: 200px;
455 }
456}
457
458/* Container override for highlighted code to handle font sizing */
459div#cgit table.blob pre {
460 font-family: monospace;
461 font-size: 0.95em;
462 line-height: 1.4;
463}
diff --git a/www/static/colors.css b/www/static/colors.css
new file mode 100644
index 0000000..4ac8629
--- /dev/null
+++ b/www/static/colors.css
@@ -0,0 +1,119 @@
1@media (prefers-color-scheme: dark) {
2 :root {
3 --color-primary: rgb(255 181 160);
4 --color-surface-tint: rgb(255 181 160);
5 --color-on-primary: rgb(86 31 15);
6 --color-primary-container: rgb(114 53 35);
7 --color-on-primary-container: rgb(255 219 209);
8 --color-secondary: rgb(231 189 178);
9 --color-on-secondary: rgb(68 42 34);
10 --color-secondary-container: rgb(93 64 55);
11 --color-on-secondary-container: rgb(255 219 209);
12 --color-tertiary: rgb(216 197 141);
13 --color-on-tertiary: rgb(59 47 5);
14 --color-tertiary-container: rgb(83 70 25);
15 --color-on-tertiary-container: rgb(245 225 167);
16 --color-error: rgb(255 180 171);
17 --color-on-error: rgb(105 0 5);
18 --color-error-container: rgb(147 0 10);
19 --color-on-error-container: rgb(255 218 214);
20 --color-background: rgb(26 17 15);
21 --color-on-background: rgb(241 223 218);
22 --color-surface: rgb(26 17 15);
23 --color-on-surface: rgb(241 223 218);
24 --color-surface-variant: rgb(83 67 63);
25 --color-on-surface-variant: rgb(216 194 188);
26 --color-outline: rgb(160 140 135);
27 --color-outline-variant: rgb(83 67 63);
28 --color-shadow: rgb(0 0 0);
29 --color-scrim: rgb(0 0 0);
30 --color-inverse-surface: rgb(241 223 218);
31 --color-inverse-on-surface: rgb(57 46 43);
32 --color-inverse-primary: rgb(143 76 56);
33 --color-primary-fixed: rgb(255 219 209);
34 --color-on-primary-fixed: rgb(58 11 1);
35 --color-primary-fixed-dim: rgb(255 181 160);
36 --color-on-primary-fixed-variant: rgb(114 53 35);
37 --color-secondary-fixed: rgb(255 219 209);
38 --color-on-secondary-fixed: rgb(44 21 15);
39 --color-secondary-fixed-dim: rgb(231 189 178);
40 --color-on-secondary-fixed-variant: rgb(93 64 55);
41 --color-tertiary-fixed: rgb(245 225 167);
42 --color-on-tertiary-fixed: rgb(35 27 0);
43 --color-tertiary-fixed-dim: rgb(216 197 141);
44 --color-on-tertiary-fixed-variant: rgb(83 70 25);
45 --color-surface-dim: rgb(26 17 15);
46 --color-surface-bright: rgb(66 55 52);
47 --color-surface-container-lowest: rgb(20 12 10);
48 --color-surface-container-low: rgb(35 25 23);
49 --color-surface-container: rgb(39 29 27);
50 --color-surface-container-high: rgb(50 40 37);
51 --color-surface-container-highest: rgb(61 50 47);
52
53 color-scheme: dark;
54 }
55}
56
57@media (prefers-color-scheme: light) {
58 :root {
59 --color-primary: rgb(143 76 56);
60 --color-surface-tint: rgb(143 76 56);
61 --color-on-primary: rgb(255 255 255);
62 --color-primary-container: rgb(255 219 209);
63 --color-on-primary-container: rgb(114 53 35);
64 --color-secondary: rgb(119 87 78);
65 --color-on-secondary: rgb(255 255 255);
66 --color-secondary-container: rgb(255 219 209);
67 --color-on-secondary-container: rgb(93 64 55);
68 --color-tertiary: rgb(108 93 47);
69 --color-on-tertiary: rgb(255 255 255);
70 --color-tertiary-container: rgb(245 225 167);
71 --color-on-tertiary-container: rgb(83 70 25);
72 --color-error: rgb(186 26 26);
73 --color-on-error: rgb(255 255 255);
74 --color-error-container: rgb(255 218 214);
75 --color-on-error-container: rgb(147 0 10);
76 --color-background: rgb(255 248 246);
77 --color-on-background: rgb(35 25 23);
78 --color-surface: rgb(255 248 246);
79 --color-on-surface: rgb(35 25 23);
80 --color-surface-variant: rgb(245 222 216);
81 --color-on-surface-variant: rgb(83 67 63);
82 --color-outline: rgb(133 115 110);
83 --color-outline-variant: rgb(216 194 188);
84 --color-shadow: rgb(0 0 0);
85 --color-scrim: rgb(0 0 0);
86 --color-inverse-surface: rgb(57 46 43);
87 --color-inverse-on-surface: rgb(255 237 232);
88 --color-inverse-primary: rgb(255 181 160);
89 --color-primary-fixed: rgb(255 219 209);
90 --color-on-primary-fixed: rgb(58 11 1);
91 --color-primary-fixed-dim: rgb(255 181 160);
92 --color-on-primary-fixed-variant: rgb(114 53 35);
93 --color-secondary-fixed: rgb(255 219 209);
94 --color-on-secondary-fixed: rgb(44 21 15);
95 --color-secondary-fixed-dim: rgb(231 189 178);
96 --color-on-secondary-fixed-variant: rgb(93 64 55);
97 --color-tertiary-fixed: rgb(245 225 167);
98 --color-on-tertiary-fixed: rgb(35 27 0);
99 --color-tertiary-fixed-dim: rgb(216 197 141);
100 --color-on-tertiary-fixed-variant: rgb(83 70 25);
101 --color-surface-dim: rgb(232 214 210);
102 --color-surface-bright: rgb(255 248 246);
103 --color-surface-container-lowest: rgb(255 255 255);
104 --color-surface-container-low: rgb(255 241 237);
105 --color-surface-container: rgb(252 234 229);
106 --color-surface-container-high: rgb(247 228 224);
107 --color-surface-container-highest: rgb(241 223 218);
108
109 color-scheme: light;
110 }
111}
112
113/* Custom logic for diffs */
114:root {
115 --diff-add-bg: var(--color-tertiary-container);
116 --diff-add-fg: var(--color-on-tertiary-container);
117 --diff-del-bg: var(--color-error-container);
118 --diff-del-fg: var(--color-on-error-container);
119}
diff --git a/www/static/hl.css b/www/static/hl.css
new file mode 100644
index 0000000..15998e0
--- /dev/null
+++ b/www/static/hl.css
@@ -0,0 +1,95 @@
1/* --- Syntax Highlighting --- */
2
3/* Comments - Outline/Grey */
4.hl-c,
5.hl-cm,
6.hl-cp,
7.hl-c1,
8.hl-cs {
9 color: var(--color-outline);
10 font-style: italic;
11}
12
13/* Keywords - Primary (Pinkish/Orange) */
14.hl-k,
15.hl-kc,
16.hl-kd,
17.hl-kn,
18.hl-kp,
19.hl-kr,
20.hl-kt {
21 color: var(--color-primary);
22 font-weight: bold;
23}
24
25/* Names/Functions - Tertiary (Yellowish) */
26.hl-n,
27.hl-na,
28.hl-nb,
29.hl-nc,
30.hl-no,
31.hl-nd,
32.hl-ni,
33.hl-ne,
34.hl-nf,
35.hl-nl,
36.hl-nn,
37.hl-nt,
38.hl-nv,
39.hl-nx {
40 color: var(--color-tertiary);
41}
42
43/* Strings - Secondary (Reddish/Brownish) */
44.hl-s,
45.hl-sa,
46.hl-sb,
47.hl-sc,
48.hl-dl,
49.hl-sd,
50.hl-s2,
51.hl-se,
52.hl-sh,
53.hl-si,
54.hl-sx,
55.hl-sr,
56.hl-s1,
57.hl-ss {
58 color: var(--color-secondary);
59}
60
61/* Operators - On Surface (Main text color) */
62.hl-o,
63.hl-ow {
64 color: var(--color-on-surface-variant);
65}
66
67/* Numbers - Primary Container (Brighter accent) */
68.hl-m,
69.hl-mb,
70.hl-mf,
71.hl-mh,
72.hl-mi,
73.hl-mo,
74.hl-il {
75 color: var(--color-primary-fixed);
76}
77
78/* Errors */
79.hl-err,
80.hl-gr {
81 color: var(--color-error);
82 background-color: var(--color-error-container);
83}
84
85/* Generic Deleted */
86.hl-gd {
87 color: var(--color-error);
88 background-color: var(--color-error-container);
89}
90
91/* Generic Inserted */
92.hl-gi {
93 color: var(--color-tertiary);
94 background-color: var(--color-tertiary-container);
95}
diff --git a/www/static/md.css b/www/static/md.css
new file mode 100644
index 0000000..c8966c3
--- /dev/null
+++ b/www/static/md.css
@@ -0,0 +1,248 @@
1/* --- Markdown Body Styles --- */
2
3.markdown-body {
4 font-family: inherit;
5 font-size: 1rem;
6 line-height: 1.6;
7 color: var(--color-on-background);
8 word-wrap: break-word;
9}
10
11/* Headers */
12.markdown-body h1,
13.markdown-body h2,
14.markdown-body h3,
15.markdown-body h4,
16.markdown-body h5,
17.markdown-body h6 {
18 margin-top: 24px;
19 margin-bottom: 16px;
20 font-weight: 600;
21 line-height: 1.25;
22 color: var(--color-on-surface);
23}
24
25.markdown-body h1 {
26 font-size: 2em;
27 border-bottom: 1px solid var(--color-outline-variant);
28 padding-bottom: 0.3em;
29}
30.markdown-body h2 {
31 font-size: 1.5em;
32 border-bottom: 1px solid var(--color-outline-variant);
33 padding-bottom: 0.3em;
34}
35.markdown-body h3 {
36 font-size: 1.25em;
37}
38.markdown-body h4 {
39 font-size: 1em;
40}
41.markdown-body h5 {
42 font-size: 0.875em;
43}
44.markdown-body h6 {
45 font-size: 0.85em;
46 color: var(--color-on-surface-variant);
47}
48
49/* Links */
50.markdown-body a {
51 color: var(--color-primary);
52 text-decoration: none;
53}
54.markdown-body a:hover {
55 text-decoration: underline;
56}
57
58/* Paragraphs & Lists */
59.markdown-body p,
60.markdown-body blockquote,
61.markdown-body ul,
62.markdown-body ol,
63.markdown-body dl,
64.markdown-body table,
65.markdown-body pre {
66 margin-top: 0;
67 margin-bottom: 16px;
68}
69
70.markdown-body hr {
71 height: 0.25em;
72 padding: 0;
73 margin: 24px 0;
74 background-color: var(--color-outline-variant);
75 border: 0;
76}
77
78/* Blockquotes */
79.markdown-body blockquote {
80 padding: 0 1em;
81 color: var(--color-on-surface-variant);
82 border-left: 0.25em solid var(--color-outline);
83 background-color: var(--color-surface-container-low);
84}
85
86/* Tables */
87.markdown-body table {
88 display: block;
89 width: 100%;
90 overflow: auto;
91 border-spacing: 0;
92 border-collapse: collapse;
93}
94
95.markdown-body table th {
96 font-weight: 600;
97 background-color: var(--color-surface-container);
98}
99
100.markdown-body table th,
101.markdown-body table td {
102 padding: 6px 13px;
103 border: 1px solid var(--color-outline-variant);
104}
105
106.markdown-body table tr {
107 background-color: var(--color-surface);
108 border-top: 1px solid var(--color-outline-variant);
109}
110
111.markdown-body table tr:nth-child(2n) {
112 background-color: var(--color-surface-container-lowest);
113}
114
115/* Images */
116.markdown-body img {
117 max-width: 100%;
118 box-sizing: border-box;
119 background-color: var(--color-surface);
120 border-radius: 4px;
121}
122
123/* Code Blocks & Inline Code */
124.markdown-body code,
125.markdown-body tt {
126 padding: 0.2em 0.4em;
127 margin: 0;
128 font-size: 85%;
129 font-family: "JetBrains Mono", "Fira Code", monospace;
130 background-color: var(--color-surface-container-high);
131 border-radius: 6px;
132 color: var(--color-on-surface);
133}
134
135.markdown-body pre {
136 padding: 16px;
137 overflow: auto;
138 font-size: 85%;
139 line-height: 1.45;
140 background-color: var(--color-surface-container-lowest);
141 border-radius: 6px;
142 border: 1px solid var(--color-outline-variant);
143}
144
145.markdown-body pre code,
146.markdown-body pre tt {
147 display: inline;
148 max-width: auto;
149 padding: 0;
150 margin: 0;
151 overflow: visible;
152 line-height: inherit;
153 word-wrap: normal;
154 background-color: transparent;
155 border: 0;
156}
157
158/* Anchors (Permalinks) */
159.markdown-body a.headerlink {
160 padding-left: 1ch;
161 line-height: 1;
162 color: var(--color-primary);
163 text-decoration: none;
164 opacity: 0;
165 transition: opacity 0.2s;
166}
167
168.markdown-body h1:hover .headerlink,
169.markdown-body h2:hover .headerlink,
170.markdown-body h3:hover .headerlink,
171.markdown-body h4:hover .headerlink,
172.markdown-body h5:hover .headerlink,
173.markdown-body h6:hover .headerlink {
174 opacity: 1;
175}
176
177/* Pygments Syntax Highlighting within Markdown
178 (Mapping standard Pygments classes to Material Variables) */
179.markdown-body .highlight .c,
180.markdown-body .highlight .cm,
181.markdown-body .highlight .cp,
182.markdown-body .highlight .c1,
183.markdown-body .highlight .cs {
184 color: var(--color-outline);
185 font-style: italic;
186}
187.markdown-body .highlight .k,
188.markdown-body .highlight .kc,
189.markdown-body .highlight .kd,
190.markdown-body .highlight .kn,
191.markdown-body .highlight .kp,
192.markdown-body .highlight .kr,
193.markdown-body .highlight .kt {
194 color: var(--color-primary);
195 font-weight: bold;
196}
197.markdown-body .highlight .n,
198.markdown-body .highlight .na,
199.markdown-body .highlight .nb,
200.markdown-body .highlight .nc,
201.markdown-body .highlight .no,
202.markdown-body .highlight .nd,
203.markdown-body .highlight .ni,
204.markdown-body .highlight .ne,
205.markdown-body .highlight .nf,
206.markdown-body .highlight .nl,
207.markdown-body .highlight .nn,
208.markdown-body .highlight .nt,
209.markdown-body .highlight .nv,
210.markdown-body .highlight .nx {
211 color: var(--color-tertiary);
212}
213.markdown-body .highlight .s,
214.markdown-body .highlight .sa,
215.markdown-body .highlight .sb,
216.markdown-body .highlight .sc,
217.markdown-body .highlight .dl,
218.markdown-body .highlight .sd,
219.markdown-body .highlight .s2,
220.markdown-body .highlight .se,
221.markdown-body .highlight .sh,
222.markdown-body .highlight .si,
223.markdown-body .highlight .sx,
224.markdown-body .highlight .sr,
225.markdown-body .highlight .s1,
226.markdown-body .highlight .ss {
227 color: var(--color-secondary);
228}
229.markdown-body .highlight .m,
230.markdown-body .highlight .mb,
231.markdown-body .highlight .mf,
232.markdown-body .highlight .mh,
233.markdown-body .highlight .mi,
234.markdown-body .highlight .mo,
235.markdown-body .highlight .il {
236 color: var(--color-primary-fixed);
237}
238.markdown-body .highlight .o,
239.markdown-body .highlight .ow {
240 color: var(--color-on-surface-variant);
241}
242.markdown-body .highlight .g,
243.markdown-body .highlight .gh,
244.markdown-body .highlight .gu,
245.markdown-body .highlight .gd,
246.markdown-body .highlight .gi {
247 color: var(--color-on-surface);
248}