ansxor.ca
this repo has no description
1@charset "utf-8";
2L + ratio { }
3:root { --Markup-loaded: yeah; }
4
5.Markup, .Markup * {
6 white-space: pre-wrap;
7 /* ⚠ very important to prevent overflow ⚠ */
8 word-break: break-word;
9}
10
11/**************************
12 ** Theme Variables **
13 ** (see doc/themes.txt) **
14 **************************/
15
16*:not(*>*) { /* this selects :root with 0 specificity */
17 /* normal colors */
18 --T-bg: white;
19
20 --T-link-color: #056;
21 --T-link-visited-color: #606;
22 --T-link-hover-color: #089;
23 --T-link-decoration: underline #AAAA; /* idk..*/
24 --T-custom-link-decoration: underline blue;
25
26 --T-border-color: gray; /* nnnnn... */
27
28 --T-image-border: 1px solid var(--T-border-color);
29
30 --T-embed-height: 10vh;
31
32 /* for colored table cells, etc. */
33 /* these are transparent, so they should work with both dark and light */
34 888;
35 #0F08;
36 #FF08;
37 #FA08;
38 08F8;
39 #C0F8;
40 AAA8;
41
42 --T-box-bg: #AAA2;
43
44 /* other values used :
45 --T-tab-size
46 --T-monospace-font
47
48 --T-table-border
49 --T-table-outer-border
50 --T-table-thick-border
51
52 --T-code-color
53 --T-code-bg
54
55 --T-red-bg:
56 --T-green-bg:
57 --T-yellow-bg:
58 --T-orange-bg:
59 --T-blue-bg:
60 --T-purple-bg:
61 --T-gray-bg:
62*/
63}
64
65/** aa */
66
67.Markup {
68 background: var(--T-bg);
69 font-family: inherit;
70 font-variant-ligatures: none;
71 -moz-tab-size: var(--T-tab-size, 2.5); tab-size: var(--T-tab-size, 2.5);
72}
73
74.Markup * {
75 font-family: inherit;
76 margin: 0;
77}
78
79/* fit */
80/* {
81 width: unset;
82 width: fit-content;
83 width: -moz-fit-content;
84}*/
85/* stretch */
86/* {
87 display: block;
88 max-width: 100%;
89 max-width: -webkit-fill-available;
90 max-width: -moz-available;
91 max-width: stretch;
92}*/
93
94/************/
95/** Images **/
96/************/
97
98/* styles and maximum sizes for embedded media */
99.Markup img, .M-image-wrapper {
100 max-height: var(--T-embed-height);
101 border: var(--T-image-border);
102 box-sizing: content-box;
103}
104
105.Markup img {
106 display: block;
107 object-fit: scale-down;
108
109 max-width: calc(100% - 2px);
110 width: auto;
111}
112
113/* before loading, assume image will be larger than --image-max-height */
114.Markup img[data-state="loading"], .Markup img[data-state="error"] {
115 height: var(--T-embed-height);
116 min-width: 2em;
117}
118.Markup img[data-state="loaded"] {
119 height: auto;
120}
121
122/* ruby text doesn't work if set to white-space: pre */
123.Markup rt {
124 white-space: pre-line;
125}
126
127/*** invalid tag ***/
128.M-invalid {
129 background: #F888;
130}
131
132/*** divider ***/
133.Markup hr {
134 margin: 0.5rem 0;
135}
136
137.Markup pre, .Markup code, .Markup kbd {
138 font-family: var(--T-monospace-font, "Cascadia Code", consolas, monospace);
139 font-size: 0.8125em;
140}
141/*** Inline Code ***/
142/*** ` ***/
143.Markup code {
144 line-break: anywhere;
145 background: #9995;
146 padding: 0 0.1875em;
147 border-radius: 4px;
148 margin: 0 0.1em;
149 vertical-align: 1px;
150 /*-webkit-box-decoration-break: clone; box-decoration-break: clone; - actually we want this disabled since that makes it easier to tell if a code block has been split*/
151}
152.Markup th code {
153 white-space: pre-wrap;
154 line-break: unset;
155 word-break: normal; overflow-wrap: break-word;
156}
157/*** Code Block ***/
158/*** ``` ***/
159.Markup pre {
160 color: var(--T-code-color, white);
161 background: var(--T-code-bg, black);
162 border: 1px solid black;
163 padding: 0.5em;
164 margin: 0.25em 0;
165 line-break: anywhere;
166}
167/*** Keyboard Key ***/
168/*** \kbd ***/
169.Markup kbd {
170 display: inline-block;
171
172 background: var(--T-box-bg);
173 border: 1px solid var(--T-border-color);
174 border-radius: 3px;
175 padding: 0.1875rem 0.375rem;
176 vertical-align: middle;
177}
178
179/*** Spoiler ***/
180/*** \spoiler \h ***/
181.M-spoiler-label {
182 display: table; /* width... */
183 background: var(--T-box-bg);
184 cursor: pointer;
185 padding: 0 0.3125em;
186 border: 2px solid var(--T-border-color);
187 border-left-width: 4px;
188 border-radius: 5px;
189 margin-top: 1px;
190}
191.M-spoiler-label::before {
192 content: "Show ";
193}
194[open] > .M-spoiler-label {
195 border-style: inset;
196 border-bottom: none;
197 border-bottom-left-radius: 0;
198 border-bottom-right-radius: 1px;
199}
200[open] > .M-spoiler-label::before {
201 content: "Hide ";
202}
203.M-spoiler-inner {
204 background: var(--T-box-bg);
205 padding: 0.375rem;
206 border: 2px solid var(--T-border-color);
207 border-left-width: 4px;
208 margin-bottom: 1px;
209}
210/* hide the ▼/▶ icon in safari */
211.M-spoiler-label::-webkit-details-marker {
212 display: none;
213}
214
215.M-content-warning > .M-spoiler-label {
216 background: var(--T-red-bg, #F888);
217 border-radius: 0px;
218 /*border-color: red;*/
219 /*idk;*/
220}
221.M-content-warning > .M-spoiler-label::before {
222 content: "⛔Show ";
223}
224.M-content-warning[open] > .M-spoiler-label::before {
225 content: "⛔Hide ";
226}
227
228/***********/
229/** Quote **/
230/***********/
231.M-quote {
232 background: var(--T-box-bg);
233 padding: 0.375rem;
234 border: 2px solid var(--T-border-color);
235 margin: 1px 0;
236}
237.M-quote-label {
238 unicode-bidi: embed;
239 font-weight: bold;
240 font-style: normal;
241}
242.M-quote-inner {
243 margin-left: 0.5rem;
244}
245
246/***********/
247/** Table **/
248/***********/
249.M-table-outer {
250 overflow-x: auto;
251}
252.Markup table, .Markup tr > * {
253 border-collapse: collapse;
254}
255.Markup table {
256 border: var(--T-table-outer-border, 3px solid #222);
257}
258.Markup tr > * {
259 padding: 0.1875em 0.3125em;
260 /* alternate text wrap mode, produces better table widths (somewhat) */
261 word-break: normal; overflow-wrap: break-word;
262 border: var(--T-table-border, 1px solid #222);
263}
264.Markup tr > .M-wall-top {
265 border-top: var(--T-table-thick-border, 4px solid #222);
266}
267.Markup tr > .M-wall-right {
268 border-right: var(--T-table-thick-border, 4px solid #222);
269}
270
271/**********************/
272/** Background Color **/
273/**********************/
274.Markup [data-bgcolor="red"] { background: var(--T-red-bg, #F888) }
275.Markup [data-bgcolor="orange"] { background: var(--T-orange-bg, #FA08) }
276.Markup [data-bgcolor="yellow"] { background: var(--T-yellow-bg, #FF08) }
277.Markup [data-bgcolor="green"] { background: var(--T-green-bg, #0F08) }
278.Markup [data-bgcolor="blue"] { background: var(--T-blue-bg, #08F8) }
279.Markup [data-bgcolor="purple"] { background: var(--T-purple-bg, #C0F8) }
280.Markup [data-bgcolor="gray"] { background: var(--T-gray-bg, #AAA8) }
281.Markup table { background: var(--T-bg); } /* reset */
282
283/***********/
284/** Links **/
285/***********/
286.M-link {
287 color: var(--T-link-color, #056);
288 text-decoration: underline;
289 text-decoration: var(--T-link-decoration, underline #AAAA);
290 -webkit-text-decoration: var(--T-link-decoration, underline #AAAA);
291}
292.M-link:visited {
293 color: var(--T-link-visited-color, #606);
294}
295.M-link:hover {
296 color: var(--T-link-hover-color);
297}
298/* links with custom text */
299.M-link-custom {
300 text-decoration: var(--T-custom-link-decoration);
301 -webkit-text-decoration: var(--T-custom-link-decoration);
302}
303.M-link-custom:hover {
304 text-decoration-style: double;
305 -webkit-text-decoration-style: double;
306}
307
308/***********/
309/** Lists **/
310/***********/
311
312/* todo: having 2 separate list tags sucks. let's just use <ol> and style it with css. there's no such thing as an unordered list, right? even if it's not NUMBERED, it's still ORDERED (implicitly, based on which item you wrote first), maybe? */
313.Markup ul, .Markup ol {
314 padding-left: 1.3125em;
315 /*border: 4px solid transparent;
316 border-left: 4px solid var(--T-border-color);*/
317}
318
319/* todo: this isn't valid html, need to change how we generate this */
320.Markup ul > ul, .Markup ol > ul, .Markup ul > ol, .Markup ol > ol, {
321 padding-left: 1em;
322}
323
324.Markup li {
325 margin: 0.25em 0;
326}
327
328.Markup ol > li::marker {
329 font-weight: bold;
330}
331
332/*************/
333/** Preview **/
334/*************/
335
336.M-preview {
337 color: white;
338 background: #444;
339 padding: 0.375rem;
340}
341
342/***********/
343/** Media **/
344/***********/
345
346y12-audio {
347 display: contents;
348}
349y12-audio > audio {
350 display: block;
351 width: 100%;
352}
353y12-audio > a {
354 display: flex;
355 width: 100%;
356 align-items: center;
357 padding: 3px 0.5rem;
358 box-sizing: border-box;
359 height: 40px;
360 background: #555;
361 color: silver;
362 line-break: anywhere;
363 text-decoration: none;
364}
365y12-audio > a > span {
366 padding-left: 0.25rem;
367}
368
369.M-image-wrapper {
370 aspect-ratio: 16/9;
371 contain: strict;
372 position: relative;
373 width: auto !important;
374 max-width: calc(100% - 2px);
375 align-self: flex-start;
376 height: var(--T-embed-height);
377}
378
379.M-image-wrapper > * {
380 position: absolute;
381 width: 100%;
382 height: 100%;
383 object-fit: scale-down;
384 background: black;
385}
386
387y12-video > figure > span {
388 z-index: 1;
389 color: white;
390 overflow-y: scroll;
391}
392
393y12-video {
394 display: flex;
395 flex-flow: column;
396 max-width: 100%;
397}
398
399.M-media-controls {
400 display: flex;
401 gap: 3px;
402 align-items: center;
403 padding-right: 3px;
404}
405
406y12-video > .M-media-controls {
407 border: 2px solid var(--T-border-color);
408 background: slategray;
409 border-radius: 0 3px 3px 3px;
410 color: white;
411 width: max-content;
412}
413
414y12-video > * {
415 flex: none;
416}
417
418.M-media-controls > button {
419 padding: 2px;
420 line-height: 1em;
421}
422
423.M-media-time {
424 flex-grow: 1;
425}
426
427.M-media-volume {
428 width: 50px;
429}
430
431.Markup youtube-embed {
432 display: block;
433}
434
435/**************/
436/** Headings **/
437/**************/
438
439.Markup h2, .Markup h3, .Markup h4, .Markup h5 {
440 margin: 0.1em 0;
441 border-bottom: 1px dotted var(--T-border-color);
442}
443
444.Markup h2 {
445 font-size: 2em;
446 font-weight: 500;
447 background: var(--T-gray-bg);
448 padding: 0 0.1em;
449 border-bottom: 1px solid var(--T-border-color);
450 border-top: 1px solid var(--T-border-color);
451}
452
453.Markup h3 {
454 background: var(--T-box-bg);
455 padding: 0 0.1em;
456 font-size: 1.6875em;
457 font-weight: 500;
458}
459
460.Markup h4 {
461 font-size: 1.5em;
462 font-weight: 500;
463}
464
465.Markup h5 {
466 font-size: 1.125em;
467 font-weight: bold;
468}
469
470/*************/
471/** Styling **/
472/*************/
473
474.M-small-caps {
475 font-variant: small-caps;
476}
477
478.M-overline {
479 text-decoration: overline;
480}