oppi.li
1.markup {
2 overflow: hidden;
3 font-size: 16px;
4 line-height: 1.5 !important;
5 overflow-wrap: anywhere;
6}
7
8.markup > *:first-child {
9 margin-top: 0 !important;
10}
11
12.markup > *:last-child {
13 margin-bottom: 0 !important;
14}
15
16.markup a:not([href]) {
17 color: inherit;
18 text-decoration: none;
19}
20
21.markup .absent {
22 color: var(--color-red);
23}
24
25.markup .anchor {
26 float: left;
27 padding-right: 4px;
28 margin-left: -20px;
29 color: inherit;
30}
31
32.markup .anchor .svg {
33 vertical-align: middle;
34}
35
36.markup .anchor:focus {
37 outline: none;
38}
39
40.markup h1 .anchor {
41 margin-top: -2px; /* re-align to center */
42}
43
44.markup h1 .anchor .svg,
45.markup h2 .anchor .svg,
46.markup h3 .anchor .svg,
47.markup h4 .anchor .svg,
48.markup h5 .anchor .svg,
49.markup h6 .anchor .svg {
50 visibility: hidden;
51}
52
53.markup h1:hover .anchor .svg,
54.markup h2:hover .anchor .svg,
55.markup h3:hover .anchor .svg,
56.markup h4:hover .anchor .svg,
57.markup h5:hover .anchor .svg,
58.markup h6:hover .anchor .svg {
59 visibility: visible;
60}
61
62.markup h2 .anchor .svg,
63.markup h3 .anchor .svg,
64.markup h4 .anchor .svg {
65 position: relative;
66 top: -2px;
67}
68
69.markup h1,
70.markup h2,
71.markup h3,
72.markup h4,
73.markup h5,
74.markup h6 {
75 margin-top: 24px !important;
76 margin-bottom: 16px;
77 font-weight: var(--font-weight-semibold);
78 line-height: 1.25;
79}
80
81.markup h1 tt,
82.markup h1 code,
83.markup h2 tt,
84.markup h2 code,
85.markup h3 tt,
86.markup h3 code,
87.markup h4 tt,
88.markup h4 code,
89.markup h5 tt,
90.markup h5 code,
91.markup h6 tt,
92.markup h6 code {
93 font-size: inherit;
94}
95
96.markup h1 {
97 padding-bottom: 0.3em;
98 font-size: 2em;
99 border-bottom: 1px solid var(--color-secondary);
100}
101
102.markup h2 {
103 padding-bottom: 0.3em;
104 font-size: 1.5em;
105 border-bottom: 1px solid var(--color-secondary);
106}
107
108.markup h3 {
109 font-size: 1.25em;
110}
111
112.markup h4 {
113 font-size: 1em;
114}
115
116.markup h5 {
117 font-size: 0.875em;
118}
119
120.markup h6 {
121 font-size: 0.85em;
122 color: var(--color-text-light-2);
123}
124
125.markup p,
126.markup blockquote,
127.markup details,
128.markup ul,
129.markup ol,
130.markup dl,
131.markup table,
132.markup pre {
133 margin-top: 0;
134 margin-bottom: 16px;
135}
136
137.markup hr {
138 height: 4px;
139 padding: 0;
140 margin: 16px 0;
141 background-color: var(--color-secondary);
142 border: 0;
143}
144
145.markup ul,
146.markup ol {
147 padding-left: 2em;
148}
149
150.markup ul.no-list,
151.markup ol.no-list {
152 padding: 0;
153 list-style-type: none;
154}
155
156.markup .task-list-item {
157 list-style-type: none;
158}
159
160.markup .task-list-item p + ul {
161 margin-top: 16px;
162}
163
164.markup .task-list-item input[type="checkbox"] {
165 margin: 0 .3em .25em -1.4em;
166 vertical-align: middle;
167 padding: 0;
168}
169
170.markup .task-list-item input[type="checkbox"] + p {
171 margin-left: -0.2em;
172 display: inline;
173}
174
175.markup .task-list-item > p {
176 margin-inline: 16px;
177}
178
179.markup .task-list-item + .task-list-item {
180 margin-top: 4px;
181}
182
183.markup input[type="checkbox"] {
184 -webkit-appearance: none;
185 -moz-appearance: none;
186 appearance: none;
187 position: relative;
188 border: 1px solid var(--color-secondary);
189 border-radius: var(--border-radius);
190 background: var(--color-input-background);
191 height: 14px;
192 width: 14px;
193 opacity: 1 !important; /* override fomantic on edit preview */
194 pointer-events: auto !important; /* override fomantic on edit preview */
195 vertical-align: middle !important; /* override fomantic on edit preview */
196 -webkit-print-color-adjust: exact;
197 color-adjust: exact;
198}
199
200.markup input[type="checkbox"]:not([disabled]):hover,
201.markup input[type="checkbox"]:not([disabled]):active {
202 border-color: var(--color-primary);
203}
204
205.markup input[type="checkbox"]::after {
206 position: absolute;
207 inset: 0;
208 pointer-events: none;
209 background: var(--color-text);
210 mask-size: cover;
211 -webkit-mask-size: cover;
212}
213
214.markup input[type="checkbox"]:checked::after {
215 content: "";
216 mask-image: var(--checkbox-mask-checked);
217 -webkit-mask-image: var(--checkbox-mask-checked);
218 -webkit-print-color-adjust: exact;
219 color-adjust: exact;
220}
221
222.markup input[type="checkbox"]:indeterminate::after {
223 content: "";
224 mask-image: var(--checkbox-mask-indeterminate);
225 -webkit-mask-image: var(--checkbox-mask-indeterminate);
226}
227
228.markup ul ul,
229.markup ul ol,
230.markup ol ol,
231.markup ol ul {
232 margin-top: 0;
233 margin-bottom: 0;
234}
235
236.markup ol ol,
237.markup ul ol {
238 list-style-type: lower-roman;
239}
240
241.markup li > p {
242 margin-top: 16px;
243}
244
245.markup li + li {
246 margin-top: 0.25em;
247}
248
249.markup dl {
250 padding: 0;
251}
252
253.markup dl dt {
254 padding: 0;
255 margin-top: 16px;
256 font-size: 1em;
257 font-style: italic;
258 font-weight: var(--font-weight-semibold);
259}
260
261.markup dl dd {
262 padding: 0 16px;
263 margin-bottom: 16px;
264}
265
266.markup blockquote {
267 margin-left: 0;
268 padding: 0 15px;
269 color: var(--color-text-light-2);
270 border-left: 0.25em solid var(--color-secondary);
271}
272
273.markup blockquote > :first-child {
274 margin-top: 0;
275}
276
277.markup blockquote > :last-child {
278 margin-bottom: 0;
279}
280
281.markup table {
282 display: block;
283 width: 100%;
284 width: max-content;
285 max-width: 100%;
286 overflow: auto;
287}
288
289.markup table th {
290 font-weight: var(--font-weight-semibold);
291}
292
293.markup table th,
294.markup table td {
295 padding: 6px 13px !important;
296 border: 1px solid var(--color-secondary) !important;
297}
298
299.markup table tr {
300 border-top: 1px solid var(--color-secondary);
301}
302
303.markup table tr:nth-child(2n) {
304 background-color: var(--color-markup-table-row);
305}
306
307.markup img,
308.markup video {
309 max-width: 100%;
310 box-sizing: initial;
311}
312
313/* this background ensures images can break <hr>. We can only do this on
314 cases where the background is known and not transparent. */
315.markup.file-view img,
316.markup.file-view video,
317.comment-body .markup img, /* regular comment */
318.comment-body .markup video,
319.comment-content .markup img, /* code comment */
320.comment-content .markup video,
321.wiki .markup img,
322.wiki .markup video {
323 background: var(--color-box-body);
324}
325
326.markup img[align="right"],
327.markup video[align="right"] {
328 padding-left: 20px;
329}
330
331.markup img[align="left"],
332.markup video[align="left"] {
333 padding-right: 28px;
334}
335
336.markup .emoji {
337 max-width: none;
338 vertical-align: text-top;
339}
340
341.markup span.frame {
342 display: block;
343 overflow: hidden;
344}
345
346.markup span.frame > span {
347 display: block;
348 float: left;
349 width: auto;
350 padding: 7px;
351 margin: 13px 0 0;
352 overflow: hidden;
353 border: 1px solid var(--color-secondary);
354}
355
356.markup span.frame span img,
357.markup span.frame span video {
358 display: block;
359 float: left;
360}
361
362.markup span.frame span span {
363 display: block;
364 padding: 5px 0 0;
365 clear: both;
366 color: var(--color-text);
367}
368
369.markup span.align-center {
370 display: block;
371 overflow: hidden;
372 clear: both;
373}
374
375.markup span.align-center > span {
376 display: block;
377 margin: 13px auto 0;
378 overflow: hidden;
379 text-align: center;
380}
381
382.markup span.align-center span img
383.markup span.align-center span video {
384 margin: 0 auto;
385 text-align: center;
386}
387
388.markup span.align-right {
389 display: block;
390 overflow: hidden;
391 clear: both;
392}
393
394.markup span.align-right > span {
395 display: block;
396 margin: 13px 0 0;
397 overflow: hidden;
398 text-align: right;
399}
400
401.markup span.align-right span img,
402.markup span.align-right span video {
403 margin: 0;
404 text-align: right;
405}
406
407.markup span.float-left {
408 display: block;
409 float: left;
410 margin-right: 13px;
411 overflow: hidden;
412}
413
414.markup span.float-left span {
415 margin: 13px 0 0;
416}
417
418.markup span.float-right {
419 display: block;
420 float: right;
421 margin-left: 13px;
422 overflow: hidden;
423}
424
425.markup span.float-right > span {
426 display: block;
427 margin: 13px auto 0;
428 overflow: hidden;
429 text-align: right;
430}
431
432.markup code,
433.markup tt {
434 padding: 0.2em 0.4em;
435 margin: 0;
436 font-size: 85%;
437 white-space: break-spaces;
438 background-color: var(--color-markup-code-inline);
439 border-radius: var(--border-radius);
440}
441
442.markup code br,
443.markup tt br {
444 display: none;
445}
446
447.markup del code {
448 text-decoration: inherit;
449}
450
451.markup pre > code,
452.markup .file-preview code {
453 padding: 0;
454 margin: 0;
455 font-size: 100%;
456 white-space: pre-wrap;
457 word-break: break-all;
458 overflow-wrap: break-word;
459 background: transparent;
460 border: 0;
461}
462
463.markup .highlight {
464 margin-bottom: 16px;
465}
466
467.markup .highlight pre,
468.markup pre {
469 padding: 16px;
470 font-size: 85%;
471 line-height: 1.45;
472 background-color: var(--color-markup-code-block);
473 border-radius: var(--border-radius);
474}
475
476.markup .highlight pre {
477 margin-bottom: 0;
478 word-break: normal;
479}
480
481.markup pre {
482 word-wrap: normal;
483}
484
485.markup pre code,
486.markup pre tt {
487 display: inline;
488 padding: 0;
489 line-height: inherit;
490 word-wrap: normal;
491 background-color: transparent;
492 border: 0;
493}
494
495.markup pre code::before,
496.markup pre code::after,
497.markup pre tt::before,
498.markup pre tt::after {
499 content: normal;
500}
501
502.markup kbd {
503 display: inline-block;
504 padding: 3px 5px;
505 font-size: 11px;
506 line-height: 10px;
507 color: var(--color-text-light);
508 vertical-align: middle;
509 background-color: var(--color-markup-code-inline);
510 border: 1px solid var(--color-secondary);
511 border-radius: var(--border-radius);
512 box-shadow: inset 0 -1px 0 var(--color-secondary);
513}
514
515.markup .ui.list .list,
516.markup ol.ui.list ol,
517.markup ul.ui.list ul {
518 padding-left: 2em;
519}
520
521.file-revisions-btn {
522 display: block;
523 float: left;
524 margin-bottom: 2px !important;
525 padding: 11px !important;
526 margin-right: 10px !important;
527}
528
529.file-revisions-btn i {
530 -webkit-touch-callout: none;
531 -webkit-user-select: none;
532 user-select: none;
533}
534
535.markup-render {
536 display: block;
537 border: none;
538 width: 100%;
539 height: var(--height-loading); /* actual height is set in JS after loading */
540 overflow: hidden;
541 color-scheme: normal; /* match the value inside the iframe to allow it to become transparent */
542}
543
544.markup-block-error {
545 display: block !important; /* override fomantic .ui.form .error.message {display: none} */
546 border: none !important;
547 margin-bottom: 0 !important;
548 border-bottom-left-radius: 0 !important;
549 border-bottom-right-radius: 0 !important;
550 box-shadow: none !important;
551 font-size: 85% !important;
552 white-space: pre-wrap !important;
553 padding: 0.5rem 1rem !important;
554 text-align: left !important;
555}
556
557.markup-block-error + pre {
558 border-top: none !important;
559 margin-top: 0 !important;
560 border-top-left-radius: 0 !important;
561 border-top-right-radius: 0 !important;
562}
563
564.file-view.markup.orgmode li.unchecked::before {
565 content: "[ ] ";
566}
567
568.file-view.markup.orgmode li.checked::before {
569 content: "[x] ";
570}
571
572.file-view.markup.orgmode li.indeterminate::before {
573 content: "[-] ";
574}
575
576/* This is only needed for <p> because they are literally acting as paragraphs,
577 * and thus having an ::before on the same line would force the paragraph to
578 * move to the next line. This can be avoided by an inline-block display that
579 * avoids that property while still having the other properties of the block
580 * display. */
581.file-view.markup.orgmode li.unchecked > p,
582.file-view.markup.orgmode li.checked > p,
583.file-view.markup.orgmode li.indeterminate > p {
584 display: inline-block;
585}