Add workaround for LW API change: userId can sometimes be null.
[lw2-viewer.git] / www / style.css.php
blobc8ea99cbbde3f3dff46beb0e1f20ac7f56ec829e
1 <?php
2 header ('Content-type: text/css; charset=utf-8');
4 $platform = @$argv[1] ?: 'Mac';
5 $UI_font = "'Concourse', 'a_Avante', 'GW-Symbols'";
7 $content_width_settings = [
8 'normal' => '900px',
9 'wide' => '1150px',
10 'fluid' => 'calc(100% - 300px)'
13 function fit_content($selector, $property = "width") {
14 foreach (["-moz-fit-content", "fit-content"] as $pvalue) echo
15 "@supports (width: {$pvalue}) {
16 {$selector} {
17 {$property}: {$pvalue};
24 /*************/
25 /* VARIABLES */
26 /*************/
28 :root {
29 --GW-comment-background-color-odd: transparent;
30 --GW-comment-background-color-even: transparent;
31 --GW-comment-background-color-target: transparent;
33 --inverted-display: none;
36 /***************/
37 /* BASE LAYOUT */
38 /***************/
40 html {
41 box-sizing: border-box;
42 font-size: 16px;
44 *, *::before, *::after {
45 box-sizing: inherit;
47 script {
48 display: none !important;
51 /*=------=*/
52 /*= Body =*/
53 /*=------=*/
55 body {
56 padding: 0;
57 margin: 0;
59 body::before {
60 background-color: inherit;
61 position: fixed;
62 width: 100%;
63 height: 100%;
66 body.no-scroll {
67 overflow-y: scroll;
68 position: fixed;
69 width: 100%;
72 /*=----------------------------=*/
73 /*= Immediate children of body =*/
74 /*=----------------------------=*/
76 body > * {
77 max-width: 900px;
80 /* Special styles for special browsers.
81 (This one is a fix for Firefox’s built-in screenshot feature.)
83 body > iframe[id^='firefox-screenshots'] {
84 max-width: unset;
87 #content {
88 margin: 0 auto;
89 padding: 0 30px;
90 position: relative;
91 overflow: visible;
92 display: grid;
93 grid-template-columns: 2fr 1fr 2fr;
95 #content::before {
96 content: "";
97 display: block;
98 position: absolute;
99 top: 0;
100 left: 0;
101 width: 100%;
102 height: 100%;
103 z-index: -1;
104 pointer-events: none;
107 /*=---------=*/
108 /*= Content =*/
109 /*=---------=*/
111 #content > * {
112 grid-column: 1 / span 3;
115 /*=----------------------=*/
116 /*= Floating UI elements =*/
117 /*=----------------------=*/
119 #ui-elements-container {
120 position: fixed;
121 height: 100vh;
122 top: 0;
123 left: 0;
124 right: 0;
125 margin: auto;
126 z-index: 10000;
127 pointer-events: none;
129 #ui-elements-container > * {
130 pointer-events: auto;
133 /*=----------------=*/
134 /*= Images overlay =*/
135 /*=----------------=*/
136 /* (To exclude images in posts from theme tweaks) */
138 #images-overlay {
139 position: absolute;
140 z-index: 1;
141 left: 0;
142 right: 0;
143 margin: auto;
146 /***********/
147 /* NAV BAR */
148 /***********/
150 .nav-bar {
151 margin: 0 -30px;
152 display: flex;
153 order: -11;
154 z-index: 1;
157 /*=---------------=*/
158 /*= Nav bar items =*/
159 /*=---------------=*/
161 .nav-item {
162 flex: 1 1 auto;
164 .nav-item * {
165 text-overflow: ellipsis;
166 white-space: nowrap;
167 overflow: hidden;
169 .nav-inner {
170 padding: 12px 30px;
171 text-align: center;
172 display: block;
173 position: relative;
174 line-height: inherit;
175 width: 100%;
176 background: unset;
178 .nav-bar-top:not(#primary-bar) .nav-inner {
179 padding: 4px 0;
182 #nav-item-sequences .nav-inner::before {
183 font-family: "Font Awesome", "Font Awesome 5 Free";
184 content: "\F5DB";
186 @media only screen and (min-width: 901px) {
187 #nav-item-about .nav-inner {
188 margin-right: 0.5em;
190 #nav-item-sequences .nav-inner::before {
191 font-size: 1rem;
192 display: block;
194 #secondary-bar #nav-item-sequences .nav-inner {
195 font-size: 0;
196 line-height: 1.4;
200 /*=------------=*/
201 /*= Bottom bar =*/
202 /*=------------=*/
204 #bottom-bar {
205 order: 11;
207 h1.listing ~ #bottom-bar {
208 margin-top: 1.25em;
210 #bottom-bar .nav-item {
211 flex: 1 1 0;
214 /*=-----------------=*/
215 /*= Accesskey hints =*/
216 /*=-----------------=*/
218 .nav-inner::after {
219 content: attr(accesskey);
220 display: none;
223 /*=---------------=*/
224 /*= Pagination UI =*/
225 /*=---------------=*/
227 #bottom-bar .nav-item a::before,
228 #top-nav-bar a::before {
229 font-family: "Font Awesome", "Font Awesome 5 Free";
230 font-weight: 900;
231 font-size: 0.8em;
232 position: relative;
233 bottom: 1px;
234 margin-right: 0.5em;
236 #bottom-bar #nav-item-first a::before,
237 #top-nav-bar a.nav-item-first::before {
238 content: "\F33e";
240 #bottom-bar #nav-item-top a::before {
241 content: "\F062";
243 #bottom-bar #nav-item-prev a::before,
244 #top-nav-bar a.nav-item-prev::before {
245 content: "\F060";
247 #bottom-bar #nav-item-next a::before,
248 #top-nav-bar a.nav-item-next::before {
249 content: "\F061";
251 #bottom-bar #nav-item-last a::before,
252 #top-nav-bar a.nav-item-last::before {
253 content: "\F340";
255 #bottom-bar #nav-item-next a::before {
256 margin-left: -2em;
257 margin-right: 0;
258 left: 3.8em;
260 #bottom-bar #nav-item-last a::before {
261 margin-left: -1.8em;
262 margin-right: 0;
263 left: 3.4em;
266 /*= Hover tooltips =*/
268 #top-nav-bar a {
269 position: relative;
271 #top-nav-bar a::after {
272 bottom: calc(100% - 3px);
273 content: attr(data-target-page);
275 #top-nav-bar a::after {
276 display: block;
277 position: absolute;
278 font-size: 0.75rem;
279 width: 100%;
280 line-height: 1;
281 visibility: hidden;
283 #top-nav-bar a:hover::after,
284 #bottom-bar a:hover::after {
285 visibility: visible;
288 /*=-----------------------=*/
289 /*= Decorative bottom bar =*/
290 /*=-----------------------=*/
291 /* (On short pages with no pagination) */
293 #bottom-bar.decorative {
294 position: relative;
296 #bottom-bar.decorative .nav-item {
297 display: none;
300 /*=------------=*/
301 /*= Search tab =*/
302 /*=------------=*/
304 #nav-item-search {
305 flex: 4 1 auto;
307 #nav-item-search form::before {
308 content: "\F002";
309 font-family: "Font Awesome", "Font Awesome 5 Free";
310 font-weight: 900;
311 display: inline-block;
312 vertical-align: top;
313 height: 23px;
314 width: 23px;
316 #nav-item-search input {
317 height: 23px;
318 width: calc(95% - 80px);
319 padding: 1px 4px;
321 #nav-item-search button {
322 height: 21px;
325 /*=-----------=*/
326 /*= Login tab =*/
327 /*=-----------=*/
329 #nav-item-login {
330 position: relative;
331 padding-right: 0.5em;
334 /*******************/
335 /* INBOX INDICATOR */
336 /*******************/
338 #inbox-indicator {
339 position: absolute;
340 top: 1px;
341 right: 0;
342 height: 100%;
343 visibility: hidden;
345 #inbox-indicator::before {
346 content: "\F0E0";
347 font-family: "Font Awesome", "Font Awesome 5 Free";
348 color: #bbb;
349 font-size: 1.1875rem;
350 position: absolute;
351 height: 100%;
352 right: 0;
353 top: 0;
354 padding: 0 0.45em;
355 visibility: visible;
356 font-weight: 900;
358 #inbox-indicator.new-messages::before {
359 color: #f00;
360 text-shadow:
361 0 0 1px #777,
362 0.5px 0.5px 1px #777;
364 a#inbox-indicator:hover::before {
365 color: #fff;
366 text-shadow:
367 0 0 1px #000,
368 0 0 2px #000,
369 0 0 4px #000,
370 0 0 1px #777,
371 0.5px 0.5px 1px #777;
373 a#inbox-indicator.new-messages:hover::before {
374 text-shadow:
375 0 0 1px #f00,
376 0 0 2px #f00,
377 0 0 4px #f00,
378 0 0 1px #777,
379 0.5px 0.5px 1px #777;
382 /****************/
383 /* PAGE TOOLBAR */
384 /****************/
386 .page-toolbar {
387 font-size: 0.9em;
388 line-height: 1.8;
389 text-align: right;
390 margin-right: -20px;
392 #content > .page-toolbar {
393 grid-column: 3;
394 grid-row: span 3;
396 #content.user-page > .page-toolbar {
397 grid-column: 2 / span 2;
398 order: -4;
401 /*=--------------------------=*/
402 /*= Page toolbar items (all) =*/
403 /*=--------------------------=*/
405 .page-toolbar > * {
406 display: inline-block;
407 margin-left: 1.5em;
409 .page-toolbar > form button {
410 padding: 0;
411 text-align: right;
412 white-space: unset;
414 .page-toolbar > form button::before {
415 text-align: center;
417 .page-toolbar .button::before {
418 font-family: "Font Awesome", "Font Awesome 5 Free";
419 font-size: 0.9em;
420 padding-right: 0.3em;
423 /*=-------------------------------=*/
424 /*= Page toolbar items (specific) =*/
425 /*=-------------------------------=*/
427 .new-post::before {
428 content: '\F067';
429 font-weight: 900;
431 .new-private-message::before {
432 content: '\F075';
433 font-weight: 400;
435 .logout-button::before {
436 content: '\F2F5';
437 font-weight: 900;
439 #enable-push-notifications::before {
440 content: '\F0F3';
441 font-weight: 400;
443 .ignore-button::before {
444 content: "\F070";
445 font-weight: 400;
447 .unignore-button::before {
448 content: "\F06E";
449 font-weight: 400;
451 .rss::before {
452 content: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/rss.svg")) ?>');
453 display: inline-block;
454 width: 1em;
455 padding-right: 0.2em;
456 position: relative;
457 top: 1px;
460 /*********************/
461 /* TOP PAGINATION UI */
462 /*********************/
464 #top-nav-bar {
465 grid-column: 2;
466 margin: 0.25em 0 0 0;
467 padding: 0.75em 0 0 0;
468 text-align: center;
469 font-size: 1.25em;
470 display: flex;
471 justify-content: center;
473 #top-nav-bar a {
474 line-height: 1;
476 #top-nav-bar a.disabled {
477 pointer-events: none;
478 visibility: hidden;
480 #top-nav-bar .page-number {
481 position: relative;
482 display: inline-block;
483 width: 1.5em;
485 #top-nav-bar .page-number-label {
486 position: absolute;
487 font-size: 0.5em;
488 text-transform: uppercase;
489 width: 100%;
490 bottom: 90%;
491 left: 0;
493 #top-nav-bar a::before {
494 margin: 0.5em;
495 display: inline-block;
498 /****************/
499 /* SUBLEVEL NAV */
500 /****************/
502 .sublevel-nav {
503 text-align: center;
504 display: flex;
505 justify-content: center;
506 margin: 1em 0 0 0;
508 #content > .sublevel-nav:not(.sort) {
509 grid-column: 2;
510 align-self: start;
512 .sublevel-nav .sublevel-item {
513 flex: 0 0 6em;
514 padding: 0.125em 0.5em;
515 font-size: 1.125rem;
517 .sublevel-nav .sublevel-item:active {
518 transform: none;
520 .sublevel-nav .sublevel-item.selected {
521 cursor: default;
524 /***********************/
525 /* SORT ORDER SELECTOR */
526 /***********************/
528 .sublevel-nav.sort {
529 position: relative;
530 margin-top: 8px;
531 font-size: 0.75em;
533 #content > .sublevel-nav.sort {
534 grid-column: 3;
535 grid-row: span 2;
536 justify-self: end;
537 align-self: start;
538 flex-flow: column;
540 #content.index-page > .sublevel-nav.sort {
541 grid-column: 1;
542 justify-self: start;
543 flex-flow: row;
546 .sublevel-nav.sort::before {
547 content: "Sort";
548 font-size: 0.75rem;
549 position: absolute;
550 top: 0;
551 left: 0;
552 width: 100%;
554 .sublevel-nav.sort .sublevel-item {
555 line-height: 1;
556 font-size: 0.875rem;
557 flex-basis: unset;
560 /*******************************/
561 /* COMMENTS SORT MODE SELECTOR */
562 /*******************************/
564 .comments > .sublevel-nav.sort {
565 margin: 1em auto 0 auto;
567 <?php fit_content(".comments > .sublevel-nav.sort"); ?>
569 /******************/
570 /* WIDTH SELECTOR */
571 /******************/
573 #width-selector {
574 position: absolute;
575 top: 4px;
576 right: -78px;
578 #width-selector button {
579 width: 22px;
580 height: 22px;
581 padding: 6px;
582 margin: 1px;
583 overflow: hidden;
584 background-repeat: no-repeat;
585 background-size: 100%;
586 background-origin: content-box;
588 #width-selector button,
589 #width-selector button:active,
590 #width-selector button:focus {
591 text-shadow: none;
592 color: transparent;
594 #width-selector button:disabled {
595 cursor: auto;
597 #width-selector button.select-width-normal {
598 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/normal.gif")) ?>');
600 #width-selector button.select-width-wide {
601 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/wide.gif")) ?>');
603 #width-selector button.select-width-fluid {
604 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/fluid.gif")) ?>');
607 /*=----------------=*/
608 /*= Hover tooltips =*/
609 /*=----------------=*/
611 #width-selector button::after {
612 content: attr(data-name);
613 position: absolute;
614 display: block;
615 left: 0;
616 width: 100%;
617 text-align: center;
618 top: 56px;
619 visibility: hidden;
621 #width-selector button.selected::after {
622 content: attr(data-name) " (selected)";
624 #width-selector button:hover:not(:active)::after {
625 visibility: visible;
628 <?php
629 global $content_width_settings;
630 foreach ($content_width_settings as $name => $setting) {
631 echo "head.content-width-{$name} + body > * {\n max-width: {$setting};\n}\n";
635 /******************/
636 /* THEME SELECTOR */
637 /******************/
639 #theme-selector {
640 position: absolute;
641 top: 3px;
642 left: -41px;
643 opacity: 0.4;
644 display: table;
645 max-width: 40px;
647 #theme-selector:hover {
648 opacity: 1.0;
651 /*=----------------------=*/
652 /*= Theme select buttons =*/
653 /*=----------------------=*/
655 .theme-selector button {
656 display: table-cell;
657 width: 26px;
658 height: 26px;
659 padding: 5px;
660 margin: 1px 7px 0 7px;
661 color: transparent;
662 background-size: 16px 16px;
663 background-origin: content-box;
665 .theme-selector button,
666 .theme-selector button:hover,
667 .theme-selector button:active,
668 .theme-selector button:focus {
669 text-shadow: none;
670 color: transparent;
672 .theme-selector button:disabled {
673 cursor: auto;
676 /*=----------------------------=*/
677 /*= Pre-rendered button images =*/
678 /*=----------------------------=*/
679 /* (Each is just a capital letter A through whatever) */
681 .theme-selector button:nth-of-type(1) {
682 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_A.gif")) ?>');
684 .theme-selector button:nth-of-type(2) {
685 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_B.gif")) ?>');
687 .theme-selector button:nth-of-type(3) {
688 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_C.gif")) ?>');
690 .theme-selector button:nth-of-type(4) {
691 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_D.gif")) ?>');
693 .theme-selector button:nth-of-type(5) {
694 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_E.gif")) ?>');
696 .theme-selector button:nth-of-type(6) {
697 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_F.gif")) ?>');
699 .theme-selector button:nth-of-type(7) {
700 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_G.gif")) ?>');
702 .theme-selector button:nth-of-type(8) {
703 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_H.gif")) ?>');
705 .theme-selector button:nth-of-type(9) {
706 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_I.gif")) ?>');
709 /*=------------------------------=*/
710 /*= Theme select button tooltips =*/
711 /*=------------------------------=*/
712 /* (with the name & description of the theme that each button selects) */
714 #theme-selector button {
715 position: relative;
716 z-index: 1;
718 #theme-selector button::before {
719 content: attr(data-theme-name);
720 position: absolute;
721 top: 0;
722 right: 100%;
723 padding: 5px 6px 6px 6px;
724 line-height: 1;
725 width: 6em;
726 text-align: right;
727 z-index: 1;
728 visibility: hidden;
730 #theme-selector:hover button::before {
731 visibility: visible;
733 #theme-selector:hover ~ #theme-tweaker-toggle,
734 #theme-selector:active ~ #theme-tweaker-toggle {
735 z-index: -1;
738 /************************/
739 /* THEME TWEAKER TOGGLE */
740 /************************/
742 #theme-tweaker-toggle {
743 position: absolute;
744 top: 7px;
745 left: -75px;
747 #theme-tweaker-toggle button {
748 font-family: "Font Awesome", "Font Awesome 5 Free";
749 font-weight: 900;
750 font-size: 1.25rem;
751 opacity: 0.4;
752 z-index: 1;
754 #theme-tweaker-toggle button:hover {
755 opacity: 1.0;
758 /*******************/
759 /* QUICKNAV WIDGET */
760 /*******************/
762 #quick-nav-ui {
763 position: absolute;
764 right: -67px;
765 bottom: 20px;
767 #quick-nav-ui a {
768 font-family: "Font Awesome", "Font Awesome 5 Free";
769 font-weight: 900;
770 font-size: 1.5rem;
771 line-height: 1.7;
772 text-align: center;
773 display: block;
774 width: 40px;
775 height: 40px;
776 margin: 10px 0 0 0;
778 #quick-nav-ui a[href='#comments'].no-comments {
779 pointer-events: none;
781 #quick-nav-ui a {
782 visibility: hidden;
784 #content.post-page ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
785 visibility: visible;
788 /************************/
789 /* NEW COMMENT QUICKNAV */
790 /************************/
792 #new-comment-nav-ui {
793 position: absolute;
794 right: -112px;
795 bottom: 42px;
797 #new-comment-nav-ui > * {
798 display: block;
799 position: relative;
801 #new-comment-nav-ui.no-comments {
802 display: none;
805 /*=--------------------=*/
806 /*= New comments count =*/
807 /*=--------------------=*/
809 #new-comment-nav-ui .new-comments-count {
810 width: 2em;
811 font-size: 1.25rem;
812 line-height: 1.1;
813 text-align: center;
814 left: 1px;
815 cursor: pointer;
817 #new-comment-nav-ui .new-comments-count::selection {
818 background-color: transparent;
820 #new-comment-nav-ui .new-comments-count::after {
821 content: "NEW";
822 display: block;
823 font-size: 0.625rem;
826 /*=-----------------------------------=*/
827 /*= Next/previous new comment buttons =*/
828 /*=-----------------------------------=*/
830 #new-comment-nav-ui .new-comment-sequential-nav-button {
831 font-size: 1.75rem;
832 font-family: "Font Awesome", "Font Awesome 5 Free";
833 font-weight: 900;
834 width: 1.5em;
835 z-index: 5001;
837 #new-comment-nav-ui .new-comment-previous {
838 top: 8px;
840 #new-comment-nav-ui .new-comment-next {
841 bottom: 6px;
843 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
844 cursor: auto;
845 pointer-events: none;
848 /*******************/
849 /* HNS DATE PICKER */
850 /*******************/
852 #hns-date-picker {
853 position: absolute;
854 bottom: 72px;
855 right: -253px;
856 opacity: 0.6;
858 #hns-date-picker:hover,
859 #hns-date-picker:focus-within {
860 opacity: 1.0;
862 #hns-date-picker.no-comments {
863 display: none;
866 /*=---------------=*/
867 /*= "Since" label =*/
868 /*=---------------=*/
870 #hns-date-picker span {
871 display: block;
872 font-size: 0.75rem;
873 text-transform: uppercase;
876 /*=--------------------=*/
877 /*= "Since" text field =*/
878 /*=--------------------=*/
880 #hns-date-picker input {
881 margin-top: 1px;
882 padding: 1px 3px;
883 width: 140px;
884 text-align: center;
885 box-shadow: 0 0 0 1px transparent;
888 /************************/
889 /* ANTI-KIBITZER TOGGLE */
890 /************************/
892 #anti-kibitzer-toggle {
893 position: absolute;
894 right: -67px;
895 bottom: 225px;
897 #anti-kibitzer-toggle button {
898 display: block;
899 width: 40px;
900 height: 54px;
901 padding: 0;
903 #anti-kibitzer-toggle button::before,
904 #anti-kibitzer-toggle button::after {
905 font-family: "Font Awesome", "Font Awesome 5 Free";
907 #anti-kibitzer-toggle button::before {
908 content: "\F06E";
909 display: block;
910 font-size: 1.75em;
911 font-weight: 400;
913 #anti-kibitzer-toggle button::after {
914 content: "\F007\2004\F164";
915 font-size: 0.875em;
916 font-weight: 900;
918 #anti-kibitzer-toggle.engaged button::before {
919 content: "\F070";
922 /************************/
923 /* TEXT SIZE ADJUSTMENT */
924 /************************/
926 #text-size-adjustment-ui {
927 position: absolute;
928 top: 30px;
929 right: -78px;
930 opacity: 0.4;
932 #text-size-adjustment-ui:hover {
933 opacity: 1.0;
936 /* This doesn't work in Mozilla browsers, so hide it */
937 @-moz-document url-prefix() {
938 #text-size-adjustment-ui {
939 display: none;
943 /*=---------=*/
944 /*= Buttons =*/
945 /*=---------=*/
947 #text-size-adjustment-ui button {
948 font-weight: 900;
949 font-family: "Font Awesome", "Font Awesome 5 Free";
950 font-size: 0.75rem;
951 width: 24px;
952 height: 24px;
953 padding: 0;
955 #text-size-adjustment-ui button.default {
956 font-family: inherit;
957 font-size: 1.125rem;
958 position: relative;
959 top: 1px;
961 #text-size-adjustment-ui button:disabled {
962 opacity: 0.5;
964 #text-size-adjustment-ui button:disabled:hover {
965 cursor: default;
968 /*=----------------=*/
969 /*= Hover tooltips =*/
970 /*=----------------=*/
972 #text-size-adjustment-ui::after {
973 content: "Adjust text size";
974 position: absolute;
975 display: block;
976 left: 0;
977 width: 100%;
978 text-align: center;
979 top: 32px;
980 visibility: hidden;
981 font-size: 0.9em;
983 #text-size-adjustment-ui:hover::after {
984 visibility: visible;
987 /*******************************/
988 /* COMMENTS VIEW MODE SELECTOR */
989 /*******************************/
991 #comments-view-mode-selector {
992 position: absolute;
993 bottom: 30px;
994 left: -40px;
995 opacity: 0.6;
997 #comments-view-mode-selector:hover {
998 opacity: 1.0;
1001 /*=---------=*/
1002 /*= Buttons =*/
1003 /*=---------=*/
1005 #comments-view-mode-selector a {
1006 display: block;
1007 font-family: "Font Awesome", "Font Awesome 5 Free";
1008 font-size: 1.25rem;
1009 text-align: center;
1010 opacity: 0.4;
1011 padding: 0.25em;
1012 z-index: 1;
1014 #comments-view-mode-selector a.threaded {
1015 transform: scaleY(-1);
1016 font-weight: 900;
1018 #comments-view-mode-selector a.chrono {
1019 font-weight: normal;
1021 #comments-view-mode-selector a.selected,
1022 #comments-view-mode-selector a:hover {
1023 opacity: 1.0;
1024 text-decoration: none;
1026 #comments-view-mode-selector a.selected {
1027 cursor: default;
1030 /*****************/
1031 /* KEYBOARD HELP */
1032 /*****************/
1034 #keyboard-help-overlay {
1035 width: 100vw;
1036 height: 100vh;
1037 background-color: rgba(0,0,0,0.7);
1038 position: fixed;
1039 left: 0;
1040 top: 0;
1041 z-index: 5001;
1043 display: flex;
1044 justify-content: center;
1045 align-items: center;
1046 padding: 20px 30px 30px 20px;
1048 visibility: hidden;
1051 #keyboard-help-overlay .keyboard-help-container {
1052 background-color: #fff;
1053 filter: drop-shadow(4px 4px 2px #000);
1054 flex: 1 1 auto;
1055 max-width: 1500px;
1056 max-height: 100%;
1057 overflow-y: auto;
1058 position: relative;
1060 #keyboard-help-overlay .keyboard-help-container h1 {
1061 text-align: center;
1062 border-bottom: 1px solid #ddd;
1063 margin: 0;
1064 padding: 10px 20px;
1066 #keyboard-help-overlay .keyboard-help-container .note {
1067 margin: 0.5em auto;
1068 padding: 0 1em;
1069 width: fit-content;
1071 #keyboard-help-overlay .keyboard-help-container .keyboard-shortcuts-lists {
1072 column-width: 21em;
1073 column-count: auto;
1074 column-gap: 1.5em;
1075 border-top: 1px solid #ddd;
1076 padding: 15px 20px;
1078 #keyboard-help-overlay .keyboard-help-container ul {
1079 list-style-type: none;
1080 margin: 0;
1081 padding: 0;
1082 break-inside: avoid;
1083 white-space: nowrap;
1085 #keyboard-help-overlay .keyboard-help-container ul:nth-of-type(n+2) {
1086 margin: 20px 0 0 0;
1088 #keyboard-help-overlay .keyboard-help-container ul li.section {
1089 font-weight: bold;
1090 font-size: 1.125rem;
1091 break-after: avoid;
1093 #keyboard-help-overlay .keyboard-help-container .keys {
1094 margin: 0 0.5em 0 0;
1095 min-width: 4.5em;
1096 display: inline-block;
1098 #keyboard-help-overlay .keyboard-help-container .keys code {
1099 margin: 0 6px 0 0;
1101 #keyboard-help-overlay .keyboard-help-container code {
1102 display: inline-block;
1103 background-color: #eee;
1104 border: 1px solid #ccc;
1105 padding: 3px 8px 4px 8px;
1106 margin: 0 1px;
1108 #keyboard-help-overlay .keyboard-help-container code.ak {
1109 background-color: #ffeb83;
1110 border-color: #d4a500;
1112 #keyboard-help-overlay .keyboard-help-container code.ak::before {
1113 content: "ak+";
1114 opacity: 0.3;
1117 #nav-item-about button.open-keyboard-help {
1118 display: none;
1120 @media only screen and (hover:hover) and (pointer:fine) {
1121 #nav-item-about {
1122 position: relative;
1123 padding-right: 0.25em;
1125 #nav-item-about button.open-keyboard-help {
1126 font-family: "Font Awesome", "Font Awesome 5 Free";
1127 font-weight: 900;
1128 position: absolute;
1129 top: 0;
1130 right: 0;
1131 height: 100%;
1132 padding: 8px;
1133 display: initial;
1134 line-height: 1;
1135 background-color: transparent;
1139 #keyboard-help-overlay button.close-keyboard-help {
1140 position: absolute;
1141 right: 0;
1142 top: 0;
1143 font-family: "Font Awesome", "Font Awesome 5 Free";
1144 font-size: 1.5rem;
1145 padding: 10px 12px;
1148 /************/
1149 /* ARCHIVES */
1150 /************/
1152 .archive-nav {
1153 margin: 1.25em 0.5em 0 0.5em;
1154 padding: 0.25em;
1156 .archive-nav > * {
1157 display: flex;
1159 .archive-nav *[class^='archive-nav-item'] {
1160 line-height: 1;
1161 flex: 1 1 5%;
1162 text-align: center;
1163 padding: 6px 4px 4px 4px;
1164 max-width: 8%;
1166 @-moz-document url-prefix() {
1167 .archive-nav *[class^='archive-nav-item'] {
1168 padding: 5px 4px;
1171 .archive-nav-days .archive-nav-item-day {
1172 font-size: 0.8em;
1173 padding: 7px 0 5px 0;
1174 max-width: 4%;
1176 .archive-nav-days .archive-nav-item-day:first-child {
1177 flex-basis: 10%;
1180 /************/
1181 /* ARCHIVES */
1182 /************/
1184 .archive-nav {
1185 margin: 1.25em 0.5em 0 0.5em;
1186 padding: 0.25em;
1188 .archive-nav > * {
1189 display: flex;
1191 .archive-nav *[class^='archive-nav-item'] {
1192 line-height: 1;
1193 flex: 1 1 5%;
1194 text-align: center;
1195 padding: 6px 4px 4px 4px;
1196 max-width: 8%;
1198 @-moz-document url-prefix() {
1199 .archive-nav *[class^='archive-nav-item'] {
1200 padding: 5px 4px;
1203 .archive-nav-days .archive-nav-item-day {
1204 font-size: 0.8em;
1205 padding: 7px 0 5px 0;
1206 max-width: 4%;
1208 .archive-nav-days .archive-nav-item-day:first-child {
1209 flex-basis: 10%;
1212 /************/
1213 /* LISTINGS */
1214 /************/
1216 h1.listing {
1217 font-size: 1.875rem;
1218 line-height: 1.15;
1219 max-height: 1.15em;
1220 position: relative;
1223 h1.listing a {
1224 position: relative;
1227 /* Links to link-posts (not the link-post links themselves; that's below) */
1228 h1.listing .link-post-link + a {
1229 margin-left: 0.25em;
1232 h1.listing .link-post-link {
1233 font-size: 0.8em;
1234 display: inline;
1235 vertical-align: top;
1236 position: relative;
1237 top: 4px;
1240 /*=----------------------=*/
1241 /*= Listing hover reveal =*/
1242 /*=----------------------=*/
1243 /* (On desktops, hover over a multi-line listing to reveal all of it) */
1245 @media only screen and (min-width: 1160px) {
1246 h1.listing a {
1247 max-width: 100%;
1248 display: inline-block;
1249 white-space: nowrap;
1250 text-overflow: ellipsis;
1251 overflow: hidden;
1252 border-bottom: 1px solid transparent;
1253 -webkit-hyphens: auto;
1254 -moz-hyphens: auto;
1255 -ms-hyphens: auto;
1256 hyphens: auto;
1257 z-index: 1;
1258 padding: 0 0 1px 1px;
1260 h1.listing .link-post-link + a {
1261 max-width: calc(100% - 40px);
1263 h1.listing a:hover,
1264 h1.listing a:focus {
1265 text-decoration: dotted underline;
1266 white-space: initial;
1267 overflow: visible;
1268 z-index: 2;
1270 h1.listing:focus-within::before {
1271 content: "\F105";
1272 font-family: "Font Awesome", "Font Awesome 5 Free";
1273 display: block;
1274 position: absolute;
1275 left: -0.75em;
1278 /* Adds hysteresis to the hover area (i.e., prevents oscillation due to small
1279 mouse movements) */
1280 <?php $margin_of_hover_error = '10px'; ?>
1282 h1.listing a:not(.edit-post-link):hover::before {
1283 content: "";
1284 position: absolute;
1285 top: -<?php echo $margin_of_hover_error; ?>;
1286 right: -<?php echo $margin_of_hover_error; ?>;
1287 bottom: -<?php echo $margin_of_hover_error; ?>;
1288 left: -<?php echo $margin_of_hover_error; ?>;
1289 z-index: -1;
1291 h1.listing .link-post-link:hover {
1292 text-decoration: none;
1296 /*=-----------------------=*/
1297 /*= In-listing edit links =*/
1298 /*=-----------------------=*/
1300 h1.listing .edit-post-link {
1301 position: absolute;
1302 margin: 0;
1305 /*=---------------------------------=*/
1306 /*= Error messages on listing pages =*/
1307 /*=---------------------------------=*/
1309 .listing-message {
1310 width: 100%;
1311 text-align: center;
1312 padding: 1.25em 0 1.25em 0;
1313 font-size: 1.375em;
1316 /*********************/
1317 /* LISTING POST-META */
1318 /*********************/
1320 h1.listing + .post-meta {
1321 position: relative;
1322 justify-content: flex-start;
1323 margin: 0 20px 0 21px;
1326 h1.listing + .post-meta > * {
1327 margin: 0 1em 0 0;
1330 h1.listing + .post-meta .post-section {
1331 width: 0;
1332 margin: 0;
1333 overflow: hidden;
1335 h1.listing + .post-meta .post-section::before {
1336 position: absolute;
1337 left: -36px;
1340 h1.listing + .post-meta .read-time {
1341 cursor: default;
1344 /********************/
1345 /* SEQUENCES & TAGS */
1346 /********************/
1348 .sequence-text, .tag-description {
1349 font-size: 1.2rem;
1350 padding: 0 22px;
1353 #content.tag-index-page .tag-description {
1354 margin: 1em 0 0;
1357 section {
1358 max-width: 100%;
1359 margin-top: 2em;
1360 margin-bottom: 4em;
1363 h1.sequence-chapter {
1364 font-size: 2.3rem;
1367 article {
1368 max-width: 100%;
1371 .post-meta + .comments {
1372 margin-top: 3em;
1375 .tag-list {
1376 column-count: auto;
1377 column-width: 15em;
1378 margin-top: 0;
1379 border-bottom: 1px solid #999;
1380 padding-bottom: 1em;
1381 margin-bottom: 0;
1384 #content.sequence-page h1 {
1385 margin-top: 0.1em;
1388 /**************/
1389 /* USER PAGES */
1390 /**************/
1392 /*=---------------------=*/
1393 /*= User's display name =*/
1394 /*=---------------------=*/
1396 #content.user-page h1.page-main-heading {
1397 margin: 0.25em 0 0 0;
1398 line-height: 1.1;
1399 grid-column: 1 / span 2;
1400 order: -2;
1403 #content.user-page h1.page-main-heading .user-full-name {
1404 font-size: 1rem;
1405 font-weight: normal;
1406 padding-left: 0.5em;
1409 /*=--------------------=*/
1410 /*= User's karma total =*/
1411 /*=--------------------=*/
1413 #content.user-page .user-stats {
1414 grid-column: 3;
1415 order: -2;
1416 text-align: right;
1417 align-self: end;
1420 #content.user-page .user-stats .karma-type {
1421 white-space: nowrap;
1424 /*=----------------------=*/
1425 /*= Expanded vs. compact =*/
1426 /*=----------------------=*/
1428 #content.user-page #comments-list-mode-selector {
1429 grid-row: span 2;
1431 #content.user-page #comments-list-mode-selector button {
1432 display: block;
1435 /*=----------------------------------------------------=*/
1436 /*= All, Posts, Comments, Drafts, Conversations, Inbox =*/
1437 /*=----------------------------------------------------=*/
1439 #content.user-page .sublevel-nav {
1440 margin-bottom: 0.5em;
1443 /*=--------------=*/
1444 /*= User's posts =*/
1445 /*=--------------=*/
1447 #content.user-page h1.listing {
1448 margin: 0.5em 0 0 0;
1451 #content.user-page .user-bio :first-child {
1452 margin-top: 0.5em;
1455 /*****************/
1456 /* CONVERSATIONS */
1457 /*****************/
1459 /*=----------------------=*/
1460 /*= List of participants =*/
1461 /*=----------------------=*/
1463 #content.conversation-page .conversation-participants {
1464 grid-column: 2 / span 2;
1465 text-align: right;
1466 margin: 0.5em 0 0 0;
1468 .post-meta > .conversation-participants {
1469 white-space: normal;
1471 .conversation-participants ul,
1472 .conversation-participants li {
1473 list-style-type: none;
1474 display: inline-block;
1475 margin: 0;
1476 padding: 0;
1478 .conversation-participants li {
1479 margin-left: 0.375em;
1481 .conversation-participants li:not(:last-of-type)::after {
1482 content: ",";
1485 /*=-------------------------=*/
1486 /*= Posting controls (form) =*/
1487 /*=-------------------------=*/
1489 #content.conversation-page .posting-controls {
1490 padding: 0 0 1em 0;
1492 #content.conversation-page .post-meta-fields {
1493 overflow: auto;
1494 display: flex;
1495 flex-flow: row wrap;
1497 .posting-controls.standalone textarea {
1498 margin-top: 0.375em;
1500 .posting-controls.standalone form {
1501 padding: 0 1em;
1503 #content.conversation-page .posting-controls.standalone form {
1504 padding: 0 1em 3em 1em;
1506 .posting-controls.standalone input[type='text'],
1507 .posting-controls.standalone label {
1508 margin: 0.25em 0;
1510 .posting-controls.standalone label {
1511 width: 4em;
1512 text-align: right;
1513 padding: 2px 6px;
1514 border: 1px solid transparent;
1516 .posting-controls.standalone input[type='text'] {
1517 width: calc(100% - 4em);
1518 padding: 0.25em;
1520 .posting-controls.standalone input[type='submit'] {
1521 float: right;
1523 .posting-controls.standalone #markdown-hints-checkbox ~ label {
1524 white-space: nowrap;
1526 .posting-controls.standalone #markdown-hints {
1527 top: calc(100% + 2em);
1530 /*=--------------------=*/
1531 /*= Conversation title =*/
1532 /*=--------------------=*/
1534 #content.conversation-page h1.page-main-heading {
1535 text-align: center;
1536 margin: 0.5em 0;
1537 line-height: 1.15;
1540 /*=----------=*/
1541 /*= Messages =*/
1542 /*=----------=*/
1544 #content.conversation-page > ul.comment-thread:last-of-type {
1545 margin-bottom: 2em;
1548 /******************/
1549 /* SEARCH RESULTS */
1550 /******************/
1552 #content.search-results-page h1.listing,
1553 #content.sequence-page h1.listing,
1554 #content.post-page h1.listing {
1555 font-size: 1.625em;
1558 /**************/
1559 /* LOGIN PAGE */
1560 /**************/
1562 .login-container {
1563 margin: 2em 0;
1564 padding: 1em;
1565 display: flex;
1566 flex-flow: row wrap;
1569 .login-container form {
1570 flex-basis: 50%;
1571 display: grid;
1572 grid-row-gap: 0.5em;
1573 align-content: start;
1575 .login-container form label {
1576 text-align: right;
1577 padding: 0.25em 0.5em;
1578 white-space: nowrap;
1579 grid-column: 1;
1581 .login-container form input {
1582 grid-column: 2;
1583 padding: 0.25em;
1585 .login-container form input[type='submit'],
1586 .login-container form a {
1587 grid-column: 2;
1588 justify-self: center;
1590 .login-container form input[type='submit'] {
1591 width: 10em;
1592 padding: 0.35em;
1593 line-height: 1;
1594 margin: 0.5em 0 0 0;
1596 .login-container form h1 {
1597 text-align: center;
1598 margin: 0;
1599 grid-column: 2;
1602 /* “Log in” form */
1604 #login-form {
1605 grid-template-columns: 5.5em 1fr;
1606 padding: 0.5em 2em 0.5em 0;
1609 /* “Create account” form */
1611 #signup-form {
1612 font-size: 0.9em;
1613 grid-template-columns: 8.5em 1fr;
1614 padding: 0.5em 1em 1em 1em;
1616 #signup-form h1 {
1617 font-size: 1.7em;
1619 #signup-form input[type='submit'] {
1620 padding: 0.4em 0.5em 0.5em 0.5em;
1623 /* Log in tip */
1625 .login-container .login-tip {
1626 padding: 0.5em 0.5em 0.5em 3em;
1627 margin: 2em 4em 0 4em;
1628 text-indent: -2em;
1629 line-height: 1.4;
1631 .login-container .login-tip span {
1632 font-weight: bold;
1635 /* Message box */
1637 #content.login-page .error-box {
1638 margin: 1.5em 0.875em -1.5em 0.875em;
1640 .error-box, .success-box {
1641 padding: 0.25em;
1642 text-align: center;
1645 /***********************/
1646 /* PASSWORD RESET PAGE */
1647 /***********************/
1649 .reset-password-container {
1650 margin-bottom: 2em;
1652 .reset-password-container input[type='submit'] {
1653 padding: 0.2em 0.5em;
1654 width: unset;
1656 .reset-password-container input {
1657 margin-left: 0.5em;
1658 width: 12em;
1660 .reset-password-container label {
1661 display: inline-block;
1662 width: 9em;
1664 .reset-password-container form > div {
1665 margin: 0.2em;
1667 .reset-password-container .action-container {
1668 padding-left: 11em;
1669 padding-top: 0.2em;
1671 .reset-password-container .error-box {
1672 margin: unset;
1676 /*********************/
1677 /* TABLE OF CONTENTS */
1678 /*********************/
1680 .contents {
1681 float: right;
1682 min-width: 6em;
1683 max-width: 40%;
1684 margin: 1.25em 0 0.75em 1.25em;
1685 padding: 7px 14px 10px 10px;
1686 position: relative;
1687 z-index: 1;
1690 .collection-page .contents {
1691 margin-top: 0;
1694 .contents-head {
1695 text-align: center;
1696 margin-bottom: 0.25em;
1699 .body-text .contents ul {
1700 list-style-type: none;
1701 margin: 0 0 0 0.5em;
1702 counter-reset: toc-item-1 toc-item-2 toc-item-3;
1703 padding-left: 1em;
1704 font-size: 0.75em;
1706 .body-text .contents li {
1707 margin: 0.15em 0 0.3em 1em;
1708 text-align: left;
1709 text-indent: -1em;
1710 line-height: 1.2;
1711 position: relative;
1713 .body-text .contents li::before {
1714 position: absolute;
1715 width: 3em;
1716 display: block;
1717 text-align: right;
1718 left: -4.5em;
1720 .contents .toc-item-1 {
1721 counter-increment: toc-item-1;
1722 counter-reset: toc-item-2 toc-item-3;
1724 .contents .toc-item-1::before {
1725 content: counter(toc-item-1);
1727 .contents .toc-item-1 ~ .toc-item-2 {
1728 margin-left: 2.9em;
1729 font-size: 0.95em;
1731 .contents .toc-item-2 {
1732 counter-increment: toc-item-2;
1733 counter-reset: toc-item-3;
1735 .contents .toc-item-1 ~ .toc-item-2::before {
1736 content: counter(toc-item-1) "." counter(toc-item-2);
1738 .contents .toc-item-2::before {
1739 content: counter(toc-item-2);
1741 .contents .toc-item-1 + .toc-item-3 {
1742 counter-increment: toc-item-2 toc-item-3;
1744 .contents .toc-item-2 ~ .toc-item-3,
1745 .contents .toc-item-1 ~ .toc-item-3 {
1746 margin-left: 2.9em;
1747 font-size: 0.95em;
1749 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3 {
1750 margin-left: 5.7em;
1751 font-size: 0.9em;
1753 .contents .toc-item-3 {
1754 counter-increment: toc-item-3;
1756 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3::before {
1757 content: counter(toc-item-1) "." counter(toc-item-2) "." counter(toc-item-3);
1759 .contents .toc-item-1 ~ .toc-item-3::before {
1760 content: counter(toc-item-1) "." counter(toc-item-3);
1762 .contents .toc-item-2 ~ .toc-item-3::before {
1763 content: counter(toc-item-2) "." counter(toc-item-3);
1765 .contents .toc-item-3::before {
1766 content: counter(toc-item-3);
1768 .contents .toc-item-4,
1769 .contents .toc-item-5,
1770 .contents .toc-item-6 {
1771 display: none;
1774 .contents.collapsed {
1775 margin-bottom: 0.25em;
1776 padding-left: 1em;
1777 padding-right: 1.75em;
1780 .contents.collapsed .contents-head {
1781 margin: 0;
1783 .contents.collapsed .contents-list {
1784 display: none;
1787 .contents .toc-collapse-toggle-button {
1788 position: absolute;
1789 top: 1px;
1790 right: 1.5px;
1791 font-family: "Font Awesome", "Font Awesome 5 Free";
1792 font-weight: 900;
1793 font-size: 1.5rem;
1794 padding: 0;
1796 .contents .toc-collapse-toggle-button:active {
1797 transform: translateX(1px) translateY(1px);
1800 .contents.collapsed .toc-collapse-toggle-button {
1801 width: calc(100% - 3px);
1802 height: calc(100% - 2px);
1803 background-color: transparent;
1804 display: flex;
1805 justify-content: flex-end;
1806 align-items: flex-start;
1810 /********************/
1811 /* POSTS & COMMENTS */
1812 /********************/
1814 .post-meta > *,
1815 .comment-meta > * {
1816 display: inline-block;
1817 margin-right: 1em;
1818 font-size: 1.0625em;
1820 .body-text {
1821 overflow-wrap: break-word;
1822 text-align: justify;
1824 .body-text p {
1825 margin: 1em 0;
1827 .retracted .body-text {
1828 text-decoration: line-through;
1831 .bare-url {
1832 word-break: break-all;
1833 hyphens: auto;
1835 .body-text a:not([href]),
1836 .body-text a:not([href]):hover,
1837 .body-text a:not([href])::before,
1838 .body-text a:not([href])::after {
1839 text-decoration: none;
1840 text-shadow: unset;
1841 border: unset;
1842 color: unset;
1843 content: unset;
1845 /*************/
1846 /* POST-META */
1847 /*************/
1849 .post-meta {
1850 display: flex;
1851 flex-flow: row wrap;
1852 justify-content: center;
1854 .post-meta .lw2-link {
1855 opacity: 0.5;
1856 order: 1;
1858 .post-meta > *,
1859 .post-meta .post-section::before {
1860 margin: 0 0.5em;
1862 .post-meta .post-section {
1863 order: -1;
1864 margin: 0;
1865 visibility: hidden;
1867 .post-meta .post-section::before,
1868 .comment-meta .alignment-forum {
1869 visibility: visible;
1870 font-family: "Font Awesome", "Font Awesome 5 Free";
1871 font-weight: 900;
1873 .post-section.frontpage::before {
1874 content: "\F015";
1876 .post-section.featured::before {
1877 content: "\F005";
1879 .post-section.meta::before {
1880 content: "\F077";
1882 .post-section.events::before {
1883 content: "\F5A0";
1885 .post-section.personal::before {
1886 content: "\F007";
1888 .post-section.draft::before {
1889 content: "\F15B";
1891 .post-section.alignment-forum::before,
1892 .comment-meta .alignment-forum {
1893 content: "AF";
1894 font-family: Concourse, 'Changa One';
1897 /*= Karma controls hover tooltips =*/
1899 @media only screen and (pointer: fine) {
1900 .post .voting-controls,
1901 .comment-item .voting-controls {
1902 position: relative;
1904 .post .karma.active-controls::after,
1905 .comment-item .karma.active-controls::after {
1906 content: "Double-click for strong vote";
1907 position: absolute;
1908 pointer-events: none;
1909 display: block;
1910 left: 6px;
1911 width: 100%;
1912 line-height: 1.15;
1913 white-space: normal;
1914 text-align: center;
1915 font-size: 0.875rem;
1916 opacity: 0;
1917 transition: opacity 0.2s ease;
1919 .post .voting-controls.active-controls:hover::after,
1920 .comment-item .voting-controls.active-controls:hover::after {
1921 opacity: 1.0;
1924 .post .voting-controls .karma-value::after,
1925 .comment-item .voting-controls .karma-value::after {
1926 content: attr(title);
1927 position: absolute;
1928 pointer-events: none;
1929 display: block;
1930 left: 50%;
1931 transform: translateX(-50%);
1932 white-space: pre-wrap;
1933 width: max-content;
1934 text-align: center;
1935 font-size: 0.875rem;
1936 color: #bbb;
1937 opacity: 0;
1938 transition: opacity 0.2s ease;
1940 .post .voting-controls.agreement .karma-value:hover::after,
1941 .comment-item .voting-controls.agreement .karma-value:hover::after {
1942 top: unset;
1943 bottom: 100%;
1945 .post .voting-controls .karma-value:hover::after,
1946 .comment-item .voting-controls .karma-value:hover::after {
1947 opacity: 1.0;
1949 .post .voting-controls.waiting .karma-value:hover::after,
1950 .comment-item .voting-controls.waiting .karma-value:hover::after {
1951 display: none;
1953 .comment-item .voting-controls .karma-value:hover::after {
1954 z-index: 5001;
1957 .author {
1958 position: relative;
1960 .author:not(.redacted)::before {
1961 content: attr(data-full-name);
1962 position: absolute;
1963 pointer-events: none;
1964 display: block;
1965 padding: 0 1em;
1966 left: 50%;
1967 bottom: 2em;
1968 transform: translateX(-50%);
1969 white-space: nowrap;
1970 text-align: center;
1971 font-size: 0.875rem;
1972 font-weight: normal;
1973 opacity: 0;
1974 transition: opacity 0.2s ease;
1975 z-index: 5001;
1977 .author:hover::before {
1978 opacity: 1.0;
1982 /*********/
1983 /* POSTS */
1984 /*********/
1986 .post {
1987 max-width: 100%;
1990 .post-body {
1991 min-height: 8em;
1992 padding: 0 30px;
1993 line-height: 1.5;
1994 font-size: 1.3rem;
1995 overflow: auto;
1996 margin: 0.5em 0 0 0;
1998 h1.post-title {
1999 margin: 1.1em 0 0.35em 0;
2000 padding: 0 30px;
2001 text-align: center;
2002 font-size: 2.5em;
2003 line-height: 1;
2005 .post .post-meta {
2006 text-align: center;
2007 position: relative;
2008 z-index: 2;
2010 .post .top-post-meta:last-child {
2011 margin-bottom: 40px;
2013 .post .bottom-post-meta {
2014 margin: 0;
2015 padding: 20px 0;
2017 .bottom-post-meta {
2018 border-style: solid;
2019 border-width: 1px 0;
2022 /**********/
2023 /* EVENTS */
2024 /**********/
2026 .event-info .map {
2027 position: relative;
2028 width: 100%;
2029 margin: 2em 0 1em;
2032 .event-info .map::before {
2033 content: "";
2034 display: block;
2035 padding-bottom: 50%;
2038 .event-info .map iframe {
2039 width: 100%;
2040 height: 100%;
2041 border: 1px solid #000;
2042 position: absolute;
2043 top: 0;
2044 left: 0;
2047 .event-info ul {
2048 list-style: none;
2049 padding: 0;
2050 text-align: center;
2053 /*******************/
2054 /* POST NAVIGATION */
2055 /*******************/
2057 .post-nav-item {
2058 display: grid;
2059 grid-template: 100% / 32% 36% 32%;
2060 grid-template-areas:
2061 "prev seq next";
2063 .post-nav {
2064 display: flex;
2065 flex-flow: column;
2066 justify-content: flex-end;
2067 padding: 0.5em;
2070 .post-nav-title {
2071 font-size: 1.125em;
2072 line-height: 1.15;
2073 display: inline;
2074 border-top: 1px solid transparent;
2076 .post-nav.prev .post-nav-title,
2077 .post-nav.next .post-nav-title {
2078 border-bottom: 1px solid transparent;
2081 .sequence-title {
2082 align-items: center;
2083 text-align: center;
2084 grid-area: seq;
2086 .sequence-title .post-nav-title {
2087 font-size: 1.5em;
2090 .post-nav.prev {
2091 grid-area: prev;
2092 align-items: flex-start;
2094 .post-nav.prev .post-nav-title::before {
2095 content: "\F0D9\2005";
2097 .post-nav.next {
2098 grid-area: next;
2099 text-align: right;
2100 align-items: flex-end;
2102 .post-nav.prev .post-nav-label,
2103 .post-nav.next .post-nav-label {
2104 display: none;
2106 .post-nav.next .post-nav-title::after {
2107 content: "\2004\F0DA";
2109 .post-nav.prev .post-nav-title::before,
2110 .post-nav.next .post-nav-title::after {
2111 font-family: Font Awesome;
2112 font-weight: 900;
2113 vertical-align: text-bottom;
2114 opacity: 0.75;
2116 .post-nav-links {
2117 max-width: 100%;
2120 @media only screen and (max-width: 900px) {
2121 .post-nav-item {
2122 font-size: 0.875em;
2123 grid-template: auto auto / 50% 50%;
2124 grid-template-areas:
2125 "prev next"
2126 "seq seq";
2128 .post-nav.prev .post-nav-title,
2129 .post-nav.next .post-nav-title {
2130 border-bottom: none;
2132 .post-nav.prev {
2133 margin: 0 0 0 -1px;
2134 position: relative;
2135 left: 1px;
2137 .sequence-title {
2138 padding: 0.75em 0;
2141 @media only screen and (max-width: 520px) {
2142 .post-nav-links + .comments {
2143 padding: 1em 0 0 0;
2147 .related-posts, .related-post-group {
2148 padding-bottom: 1em;
2150 .related-post-type {
2151 font-size: 1.2em;
2152 font-weight: 600;
2153 margin-top: 0.5em;
2154 margin-bottom: -0.5em;
2155 list-style-type: disc;
2156 margin-left: -0.5em;
2157 opacity: 0.7;
2159 .related-post-type::before {
2160 content: "\269c";
2161 font-size: 1.375em;
2162 font-weight: normal;
2163 margin-right: 0.15em;
2164 position: relative;
2165 vertical-align: baseline;
2166 top: 0.05em;
2168 .related-posts .post-type-prefix {
2169 display: none;
2172 .crosspost {
2173 padding: 0.1em 1em;
2174 margin: 1em auto;
2177 /**************/
2178 /* LINK POSTS */
2179 /**************/
2181 .post.link-post > .post-body > p:first-child {
2182 text-align: center;
2183 font-size: 1.125em;
2184 margin: 0.5em 0 0 0;
2186 .post.link-post > .post-body > p:only-child {
2187 font-size: 1.5em;
2188 margin: 1em 0;
2190 .post.link-post a.link-post-link::before {
2191 content: "\F0C1";
2192 font-family: "Font Awesome", "Font Awesome 5 Free";
2193 font-weight: 900;
2194 font-size: 0.75em;
2195 position: relative;
2196 top: -2px;
2197 margin-right: 0.25em;
2200 /************/
2201 /* COMMENTS */
2202 /************/
2204 .comments {
2205 max-width: 100%;
2206 padding: 0 0 1px 0;
2207 position: relative;
2209 .comments::before {
2210 content: "";
2211 position: absolute;
2212 display: block;
2213 top: 0;
2214 left: 0;
2215 width: 100%;
2216 height: 100%;
2217 pointer-events: none;
2219 ul.comment-thread {
2220 list-style-type: none;
2221 padding: 0;
2222 max-width: 100%;
2224 .comments .comment-thread > li {
2225 position: relative;
2227 #content > #top-nav-bar + .comment-thread .comment-item {
2228 margin-top: 0;
2231 .comment-item {
2232 margin: 2em 0 0 0;
2234 .comment-item .comment-item {
2235 margin: 1em 8px 8px 16px;
2237 .comment-item .comment-item + .comment-item {
2238 margin: 2em 8px 8px 16px;
2241 .comment-body {
2242 line-height: 1.45;
2243 font-size: 1.2rem;
2244 padding: 10px;
2246 .comment-body ul {
2247 list-style-type: circle;
2249 .comment-body > *:first-child {
2250 margin-top: 0;
2252 .comment-body > *:last-child {
2253 margin-bottom: 0;
2256 .comments-empty-message {
2257 width: 100%;
2258 text-align: center;
2259 padding: 0.75em 0 0.9em 0;
2260 font-size: 1.375em;
2263 /**********************************/
2264 /* DEEP COMMENT THREAD COLLAPSING */
2265 /**********************************/
2267 .comment-item > input[id^="expand"] {
2268 display: none;
2270 .comment-item > input[id^="expand"] + label {
2271 display: block;
2272 visibility: hidden;
2273 position: relative;
2274 margin: 8px 9px;
2276 .comment-item > input[id^="expand"] + label::after {
2277 content: "(Expand " attr(data-child-count) " below)";
2278 visibility: visible;
2279 position: absolute;
2280 left: 0;
2281 white-space: nowrap;
2282 cursor: pointer;
2284 .comment-item > input[id^="expand"]:checked + label::after {
2285 content: "(Collapse " attr(data-child-count) " below)";
2287 .comment-item > input[id^="expand"] ~ .comment-thread {
2288 max-height: 34px;
2289 overflow: hidden;
2291 .comment-item > input[id^="expand"] ~ .comment-thread > li:first-child {
2292 margin-top: 0;
2294 .comment-item > input[id^="expand"]:checked ~ .comment-thread {
2295 max-height: 1000000px;
2298 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
2299 margin: 0;
2301 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item a.comment-parent-link:hover::after {
2302 display: none;
2305 /*************/
2306 /* BACKLINKS */
2307 /*************/
2309 .backlinks > input {
2310 display: none;
2313 .backlinks > label {
2314 margin-left: 10px;
2315 display: block;
2316 color: #00f;
2317 cursor: pointer;
2320 .backlinks > label::before {
2321 content: " ";
2322 border-left: 5px solid currentColor;
2323 border-top: 5px solid transparent;
2324 border-bottom: 5px solid transparent;
2325 transition: transform 0.25s ease-out;
2326 transform-origin: 29% 55%;
2327 display: inline-block;
2328 padding-right: 0.5em;
2331 .backlinks > input:checked + label::before {
2332 transform: rotate(90deg);
2335 .backlinks li {
2336 margin-top: 0;
2339 .backlinks > ul {
2340 height: 0;
2341 perspective-origin: top;
2342 transform: perspective(100em) rotateX(-90deg);
2343 transform-origin: center top;
2344 opacity: 0;
2345 margin-top: 0.5em;
2346 margin-bottom: 0.5em;
2349 .backlinks > input:checked ~ ul {
2350 height: auto;
2351 transform: perspective(100em) rotateX(0deg);
2352 transition: transform 0.25s ease-in, opacity 0.25s ease-in;
2353 opacity: 1;
2356 /****************/
2357 /* COMMENT-META */
2358 /****************/
2360 .comment-meta {
2361 padding: 2px 24px 2px 10px;
2362 margin: 0 -1px;
2363 border: none;
2364 display: flex;
2365 flex-flow: row wrap;
2366 align-items: baseline;
2368 .user-page .comment-meta,
2369 .conversation-page .comment-meta {
2370 padding-right: 10px;
2372 .comment-meta .comment-post-title {
2373 flex-basis: 100%;
2374 overflow: hidden;
2375 text-overflow: ellipsis;
2376 white-space: nowrap;
2377 line-height: 1.3;
2379 .conversation-page .comment-meta .comment-post-title {
2380 margin: 0;
2381 flex-basis: unset;
2382 flex: 1 0 auto;
2383 text-align: right;
2384 display: none; /* Not sure if we need to display this... */
2386 .comment-item .author:not(.redacted).original-poster::after {
2387 content: "\2004(OP)";
2388 font-size: 0.75em;
2391 /*****************************/
2392 /* COMMENT THREAD NAVIGATION */
2393 /*****************************/
2395 a.comment-parent-link:not(.inline-author),
2396 a.comment-parent-link.inline-author::before {
2397 opacity: 0.5;
2399 a.comment-parent-link:hover {
2400 opacity: 1.0;
2402 a.comment-parent-link::before {
2403 content: "\F062";
2404 font-family: "Font Awesome", "Font Awesome 5 Free";
2405 font-weight: 900;
2406 font-size: 0.75rem;
2407 line-height: 1;
2408 position: absolute;
2409 z-index: 1;
2410 display: block;
2411 padding: 3px 3px 0 3px;
2412 width: 16px;
2413 height: calc(100% + 2px);
2414 top: -1px;
2415 left: -17px;
2417 a.comment-parent-link::after {
2418 content: "";
2419 position: absolute;
2420 z-index: 0;
2421 display: block;
2422 width: calc(100% + 26px);
2423 height: calc(100% + 38px);
2424 top: -29px;
2425 left: -17px;
2426 pointer-events: none;
2427 overflow: hidden;
2428 visibility: hidden;
2430 a.comment-parent-link:hover::after {
2431 visibility: visible;
2434 .comment-child-links {
2435 flex-basis: 100%;
2437 .comment-child-link {
2438 margin: 0 0.25em;
2439 display: inline-block;
2441 .comment-child-link::before {
2442 content: ">";
2443 display: inline-block;
2444 margin: 0 2px 0 0;
2447 .comment-popup {
2448 position: fixed;
2449 top: 10%;
2450 right: 10%;
2451 max-width: 700px;
2452 z-index: 10001;
2453 font-size: 1rem;
2454 white-space: unset;
2455 pointer-events: none;
2457 .comment-popup .comment-parent-link {
2458 display: none;
2460 .comment-popup .comment-body {
2461 font-size: 1.0625rem;
2464 .comment-item.depth-odd {
2465 --GW-comment-background-color: var(--GW-comment-background-color-odd);
2466 --GW-comment-parent-background-color: var(--GW-comment-background-color-even);
2468 .comment-item.depth-even {
2469 --GW-comment-background-color: var(--GW-comment-background-color-even);
2470 --GW-comment-parent-background-color: var(--GW-comment-background-color-odd);
2473 .comment-item:target {
2474 --GW-comment-background-color: var(--GW-comment-background-color-target);
2476 .comment-item:target > .comment-thread > .comment-item {
2477 --GW-comment-parent-background-color: var(--GW-comment-background-color-target);
2480 /**********************/
2481 /* COMMENT PERMALINKS */
2482 /**********************/
2483 /********************/
2484 /* COMMENT LW LINKS */
2485 /********************/
2487 .comment-meta .permalink::before,
2488 .comment-meta .lw2-link::before,
2489 .individual-thread-page a.comment-parent-link:empty::before {
2490 content: "";
2491 display: inline-block;
2492 width: 1rem;
2493 height: 1rem;
2494 border-radius: 3px;
2495 box-shadow:
2496 0 0 0 1px #fff,
2497 0 0 0 2px #00e,
2498 0 0 0 3px transparent;
2499 padding: 0 0 0 2px;
2500 background-size: 100%;
2501 position: relative;
2502 top: 2px;
2503 opacity: 0.5;
2505 .comment-meta .permalink::before {
2506 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-white-on-blue.gif")) ?>');
2508 .comment-meta .lw2-link::before {
2509 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-white-on-blue.gif")) ?>');
2511 .individual-thread-page a.comment-parent-link:empty::before {
2512 left: unset;
2513 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-white-on-blue.gif")) ?>');
2515 .comment-meta .permalink:hover::before {
2516 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-blue-on-white.gif")) ?>');
2518 .comment-meta .lw2-link:hover::before {
2519 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-blue-on-white.gif")) ?>');
2521 .individual-thread-page a.comment-parent-link:empty:hover::before {
2522 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-blue-on-white.gif")) ?>');
2524 .comment-meta .permalink:hover::before,
2525 .comment-meta .lw2-link:hover::before,
2526 .individual-thread-page a.comment-parent-link:empty:hover::before {
2527 box-shadow:
2528 0 0 0 2px #00e,
2529 0 0 0 3px transparent;
2530 opacity: 1.0;
2531 filter: unset;
2533 .comment-meta .permalink:active::before,
2534 .comment-meta .lw2-link:active::before,
2535 .individual-thread-page a.comment-parent-link:empty:active::before {
2536 transform: scale(0.9);
2539 .comment-meta .permalink,
2540 .comment-meta .lw2-link,
2541 .individual-thread-page .comment-parent-link:empty {
2542 position: relative;
2543 opacity: 1.0;
2545 .comment-meta .permalink::after,
2546 .comment-meta .lw2-link::after,
2547 .individual-thread-page .comment-parent-link:empty::after {
2548 content: "";
2549 width: 30px;
2550 height: 30px;
2551 display: block;
2552 position: absolute;
2553 top: -2px;
2554 left: -7px;
2555 box-shadow: none;
2556 pointer-events: auto;
2557 visibility: visible;
2560 /*************************/
2561 /* COMMENTS COMPACT VIEW */
2562 /*************************/
2564 #comments-list-mode-selector,
2565 #content.index-page #comments-list-mode-selector,
2566 #content.user-page #comments-list-mode-selector {
2567 padding-top: 6px;
2568 grid-column: 1;
2569 position: unset;
2570 z-index: 1;
2571 justify-self: start;
2572 align-self: start;
2574 #comments-list-mode-selector button {
2575 color: transparent;
2576 width: 32px;
2577 height: 32px;
2578 padding: 6px;
2579 margin: 1px;
2580 overflow: hidden;
2581 background-repeat: no-repeat;
2582 background-size: 100%;
2583 background-origin: content-box;
2585 #comments-list-mode-selector button:disabled {
2586 cursor: auto;
2588 #comments-list-mode-selector button.expanded {
2589 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/expanded_2x.gif")) ?>');
2591 #comments-list-mode-selector button.compact {
2592 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/compact_2x.gif")) ?>');
2594 @media only screen and (max-resolution: 1dppx) {
2595 #comments-list-mode-selector button.expanded {
2596 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/expanded_1x.gif")) ?>');
2598 #comments-list-mode-selector button.compact {
2599 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/compact_1x.gif")) ?>');
2603 #content > ul.comment-thread > li.comment-item,
2604 #content.compact > ul.comment-thread > li.comment-item {
2605 margin: 0;
2608 #content > .comment-thread {
2609 margin: 1em 0;
2611 #content.compact > .comment-thread {
2612 font-size: 0.9375rem;
2613 margin: 0.5em 0;
2615 #content.compact > .comment-thread:hover {
2616 z-index: 1;
2618 #content.compact > .comment-thread .comment-body {
2619 font-size: 1.0625rem;
2621 #content.compact > .comment-thread .comment-item,
2622 #content.index-page .comment-item.ignored,
2623 #content.inbox-user-page .comment-item.ignored {
2624 max-height: 61px;
2625 margin-top: 1em;
2626 overflow: hidden;
2627 position: relative;
2629 #content.compact > .comment-thread .comment-item {
2630 pointer-events: none;
2632 #content.compact > .comment-thread .comment-item::after {
2633 content: "…";
2634 position: absolute;
2635 right: 0;
2636 bottom: 0;
2637 font-size: 2rem;
2638 line-height: 1;
2639 padding: 0 16px 10px 64px;
2640 pointer-events: auto;
2642 @media only screen and (hover: hover) {
2643 #content.compact:not(:focus-within) > .comment-thread .comment-item:hover,
2644 #content.compact > .comment-thread .comment-item.expanded {
2645 overflow: visible;
2646 pointer-events: auto;
2647 z-index: 10;
2650 @media only screen and (hover: none) {
2651 #content.compact > .comment-thread.expanded .comment-item {
2652 overflow: visible;
2653 pointer-events: auto;
2654 z-index: 10;
2657 #content.compact > .comment-thread .comment-item .comment-meta {
2658 white-space: nowrap;
2659 overflow: hidden;
2660 text-overflow: ellipsis;
2661 padding: 2px 10px;
2663 #content.compact > .comment-thread .comment-item:hover .comment-meta {
2664 white-space: unset;
2666 #content.compact > .comment-thread .comment-item .comment-meta a {
2667 pointer-events: auto;
2669 #content.compact > .comment-thread .comment-item .comment-meta .comment-post-title {
2670 display: inline;
2672 #content.compact > .comment-thread .comment-item .comment-meta .voting-controls + .comment-post-title {
2673 margin-left: 0.75em;
2675 @media only screen and (hover: hover) {
2676 #content.compact > .comment-thread:last-of-type .comment-item:hover,
2677 #content.compact > .comment-thread:last-of-type .comment-item.expanded {
2678 max-height: unset;
2680 #content.compact > .comment-thread .comment-item:hover .comment,
2681 #content.compact > .comment-thread .comment-item.expanded .comment {
2682 position: relative;
2683 z-index: 1;
2684 margin-bottom: 2em;
2685 bottom: 0;
2687 #content.compact > .comment-thread .comment-item:hover .comment::before,
2688 #content.compact > .comment-thread .comment-item.expanded .comment::before{
2689 content: "";
2690 position: absolute;
2691 display: block;
2692 width: calc(100% + 20px);
2693 height: calc(100% + 20px);
2694 z-index: -1;
2695 top: -10px;
2696 left: -10px;
2698 #content.compact > .comment-thread:last-of-type .comment-item:hover .comment,
2699 #content.compact > .comment-thread:last-of-type .comment-item.expanded .comment{
2700 margin: 0;
2703 @media only screen and (hover: none) {
2704 #content.compact > .comment-thread.expanded:last-of-type .comment-item {
2705 max-height: unset;
2707 #content.compact > .comment-thread.expanded .comment-item .comment {
2708 position: relative;
2709 z-index: 1;
2710 margin-bottom: 2em;
2711 bottom: 0;
2713 #content.compact > .comment-thread.expanded .comment-item .comment::before {
2714 content: "";
2715 position: absolute;
2716 display: block;
2717 width: calc(100% + 14px);
2718 height: calc(100% + 20px);
2719 z-index: -1;
2720 top: -10px;
2721 left: -10px;
2723 #content.compact > .comment-thread.expanded:last-of-type .comment-item .comment {
2724 margin: 0;
2726 #content.compact > .comment-thread.expanded .comment-item .comment::after {
2727 content: "";
2728 display: block;
2729 position: fixed;
2730 top: 0;
2731 left: 0;
2732 width: 100%;
2733 height: 100%;
2734 z-index: -2;
2735 background-color: rgba(0,0,0,0.5);
2739 /*****************************/
2740 /* HIGHLIGHTING NEW COMMENTS */
2741 /*****************************/
2743 .new-comment::before {
2744 content: "";
2745 position: absolute;
2746 width: 100%;
2747 height: 100%;
2748 z-index: 5000;
2749 pointer-events: none;
2752 /***********************************/
2753 /* COMMENT THREAD MINIMIZE BUTTONS */
2754 /***********************************/
2756 .comment-minimize-button {
2757 font-family: "Font Awesome", "Font Awesome 5 Free";
2758 font-weight: 900;
2759 font-size: 1.25rem;
2760 line-height: 1;
2761 position: absolute;
2762 right: 1px;
2763 top: 1px;
2764 width: 18px;
2765 margin: 0;
2766 cursor: pointer;
2768 .comment-minimize-button:active {
2769 transform: scale(0.9);
2771 .comment-minimize-button::after {
2772 content: attr(data-child-count);
2773 font-weight: normal;
2774 font-size: 0.8125rem;
2775 position: absolute;
2776 left: 0;
2777 width: 100%;
2778 text-align: center;
2779 top: 21px;
2781 #content.individual-thread-page .comment-minimize-button {
2782 display: none;
2785 /*****************/
2786 /* IGNORE SYSTEM */
2787 /*****************/
2789 #content.comment-thread-page .comment-item.ignored {
2790 height: 38px;
2791 overflow: hidden;
2793 .comment-item.ignored > .comment > .comment-meta > .author {
2794 text-decoration: line-through;
2797 /***********************************/
2798 /* INDIVIDUAL COMMENT THREAD PAGES */
2799 /***********************************/
2801 .individual-thread-page > h1 {
2802 line-height: 1;
2803 margin: 0.75em 0 3px 0;
2805 .individual-thread-page .comments {
2806 border: none;
2809 /*************/
2810 /* SHORTFORM */
2811 /*************/
2813 .shortform-index-page .comments::before {
2814 border: none;
2815 box-shadow: none;
2818 .shortform-index-page .comments > .comment-thread > .comment-item:first-child {
2819 margin-top: 0;
2822 /****************/
2823 /* VOTE BUTTONS */
2824 /****************/
2826 .vote {
2827 margin: 0;
2829 .vote {
2830 font-family: "Font Awesome", "Font Awesome 5 Free";
2831 font-weight: 900;
2832 border: none;
2835 .vote:disabled {
2836 visibility: hidden;
2837 cursor: default;
2840 @keyframes waiting {
2841 0% {background-position: 200% 0%}
2842 100% {background-position: 0% 0%}
2845 .voting-controls .karma-value {
2846 opacity: 1;
2847 transition: opacity 0.5s linear;
2850 .voting-controls.waiting .karma-value {
2851 opacity: 0.5;
2852 background: repeat-x linear-gradient(70deg, #000 50%, #fff 75%, #000);
2853 background-clip: text;
2854 -webkit-background-clip: text;
2855 color: transparent;
2856 background-position: 200% 0%;
2857 background-size: 200% 100%;
2858 animation: waiting 1s linear infinite;
2861 /* Replicated karma controls at bottom of comments. */
2862 .comment-controls .voting-controls {
2863 float: left;
2864 font-size: 0.9375em;
2867 .comment-controls .voting-controls:first-of-type {
2868 margin-left: -14px;
2871 /*****************************/
2872 /* COMMENTING AND POSTING UI */
2873 /*****************************/
2875 .comment-controls {
2876 text-align: right;
2877 margin: 0 8px 8px 16px;
2878 position: relative;
2879 z-index: 9999;
2881 .comment-thread .comment-controls + .comment-thread > li:first-child {
2882 margin-top: 8px;
2884 .comments > .comment-controls {
2885 margin: 8px 0 0 0;
2887 .comments > .comment-controls:last-child {
2888 margin: 8px 0 16px 0;
2891 .posting-controls input[type='submit'] {
2892 margin: 6px;
2893 padding: 4px 10px;
2894 font-size: 1.125rem;
2897 .comment-controls .cancel-comment-button {
2898 position: absolute;
2899 right: 0;
2900 margin: 0;
2901 height: 27px;
2902 font-size: inherit;
2903 padding: 4px 8px 2px 4px;
2904 z-index: 1;
2906 .comment-controls .cancel-comment-button::before {
2907 font-family: "Font Awesome", "Font Awesome 5 Free";
2908 margin-right: 3px;
2909 content: '\F00D';
2910 font-weight: 900;
2911 font-size: 0.9em;
2912 opacity: 0.7;
2915 .comment + .comment-controls .action-button {
2916 font-weight: normal;
2917 font-size: 1.0625em;
2918 padding: 1px 6px;
2920 .comment-controls .action-button::before {
2921 font-family: "Font Awesome", "Font Awesome 5 Free";
2922 margin-right: 3px;
2924 .new-comment-button {
2925 font-size: 1.5rem;
2926 margin: 0 0.25em;
2928 .comment-controls .reply-button::before {
2929 content: '\F3E5';
2930 font-weight: 900;
2931 font-size: 0.9em;
2932 opacity: 0.6;
2934 .comment-meta .replied::before {
2935 content: '\F3E5';
2936 font-family: "Font Awesome", "Font Awesome 5 Free";
2937 color: #090;
2938 font-weight: 900;
2939 font-size: 0.9em;
2940 opacity: 0.6;
2943 .post-controls {
2944 text-align: right;
2945 margin: 0.75em 0 0 0;
2946 align-self: start;
2947 justify-self: end;
2949 .edit-post-link {
2950 display: inline-block;
2951 margin-bottom: 0.25em;
2952 font-size: 1.125rem;
2954 .edit-post-link::before {
2955 margin-right: 0.3em;
2957 .comment-controls .edit-button::before,
2958 .edit-post-link::before {
2959 content: '\F303';
2960 font-family: "Font Awesome", "Font Awesome 5 Free";
2961 font-weight: 900;
2962 font-size: 0.75em;
2963 position: relative;
2964 top: -1px;
2967 .comment-controls .delete-button {
2968 margin-right: 0.25em;
2970 .comment-controls .edit-button,
2971 .comment-controls .retract-button,
2972 .comment-controls .unretract-button {
2973 margin-right: 1em;
2975 .comment-controls .retract-button::before {
2976 content: '\F4B3';
2977 opacity: 0.6;
2979 .comment-controls .unretract-button::before {
2980 content: '\F075';
2981 opacity: 0.9;
2983 .comment-controls .delete-button::before {
2984 content: '\F05E';
2985 opacity: 0.7;
2987 .comment-controls .retract-button::before,
2988 .comment-controls .unretract-button::before,
2989 .comment-controls .delete-button::before {
2990 font-weight: 900;
2991 font-size: 0.9em;
2994 .comment-controls form {
2995 position: relative;
2997 .textarea-container {
2998 position: relative;
3000 .posting-controls textarea {
3001 display: block;
3002 width: 100%;
3003 height: 15em;
3004 min-height: 15em;
3005 max-height: calc(100vh - 6em);
3006 margin: 2px 0 0 0;
3007 padding: 4px 5px;
3008 font-size: 1.2rem;
3009 border-style: solid;
3010 border-width: 29px 1px 1px 1px;
3011 resize: none;
3014 /* GUIEdit buttons */
3016 .guiedit-buttons-container {
3017 position: absolute;
3018 left: 1px;
3019 top: 1px;
3020 width: calc(100% - 2px);
3021 height: 28px;
3022 text-align: left;
3023 padding: 1px 4px 0 4px;
3024 overflow: hidden;
3026 .comment-thread-page .guiedit-buttons-container {
3027 padding-right: 60px;
3029 .guiedit-buttons-container button {
3030 height: 26px;
3031 padding: 0 7px;
3032 font-weight: 900;
3033 font-size: 0.875rem;
3034 line-height: 1;
3035 position: static;
3037 .guiedit-buttons-container button:active {
3038 transform: none;
3040 .guiedit-buttons-container button:active div {
3041 transform: scale(0.9);
3043 .guiedit-buttons-container button sup {
3044 font-weight: bold;
3046 .guiedit::after {
3047 content: attr(data-tooltip);
3048 position: absolute;
3049 font-weight: normal;
3050 font-size: 1rem;
3051 top: 2px;
3052 left: 464px;
3053 height: 25px;
3054 padding: 4px 0;
3055 white-space: nowrap;
3056 visibility: hidden;
3058 .guiedit:hover::after {
3059 visibility: visible;
3062 /* Markdown hints */
3064 .posting-controls .markdown-reference-link {
3065 float: left;
3066 padding: 1px 0 0 6px;
3068 .posting-controls .markdown-reference-link a {
3069 padding-right: 1.5em;
3070 margin-right: 0.15em;
3071 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAQAAABNTyozAAAEDklEQVR4Ae3cY3QDjRaG0V1e27Zt27Zt27Ztf7Zt27Zt10jOdZtZzbSN2q41533+tsFO4zRi0TKRJVACJdDiJVACJVACJVACZQmUQAmUQAmUQAmUQFkCJVACJVACJVACJVDWuD7P8icnGRcVbdyJ/uRZ+jTZYxwq/lN2qMcozvtMibmySe/TsPeqi0JZ3XsAHm1SZAua9CjgoMQo6UB4uiim5gbXV7Ab1EQxT+P3RRw/dHtV3e39UL3g8XuOEw39QNX3g4LHcYwU/n5uo+q7beGKNqLwJ3U1cteKuepEQ1cid03BJIESKIESKIESKIESaIkl0I3dv7Q7a293c//ShrWym7l/abdbGaCnidJGPFzre6opUdqDtLJXitJ+svpA4Uy30dru6hJRHaCws37L37CDRbWAwvctf38S1QOqe43l7f2iikDheg+x9J5ksqpA4TS3svju5CJRXaCwvX7lG3KAqDZQ+Jby/U4kUM0rNN+7hAQSrvNAC/c4Ewn0/052C8Xd0fkigebbRp/5DdpHJFCxr5nfr4QEUqzmJYC3iQRq1jXuj8cYT6CyTnAv54oEKm9EJFBnJVAC7eoS0XJn2r8qQP/wNFOipUY8wvbVAeIjooXq3ki1gPhHC0A/oWWgQZ/37ZI2FaUdVPpb33LHlQS6scPFstrDQBtAvEpNdLEfsZJA3N3lYsnOcTvaAuKzomttqW+lgXimabFoYx5N20D8SXSlw9yElQfiE0J5dW+lI6BBu4uOO8+dWB0g1hel/YIOgbiVE0VHXefhrB7QTRwtmra3gS4AcW+Xibab8SJWE4h7uaLpn/Ud6AoQTzIu2uzDrDYQzzUjCo17HF0D4g3qoo1+yWoCld8hv5OuAvFl0XLb6V8rQGws5votXQfqs45oqaPdjLUDdNO5f7Xa32APgBhu6b2SC92VtQTEfVwlXOhO9ASI2zhNLKsRj2atAfFCo55Iz4C4nyvFks16OWsRiPvQUyCeblIs0adYq0B6DsTb1EV5fk+1gfiWKG0XAwnUZyPRtOPdggTiRg4UC7rEPUkg4PbOFIXGPIEEmt+DCmeu5rUkUHHPaXj76Qsk0MK9R/ynv5FAzfdDYS9Da+n/xe6ovd2lS/8vVlyfH7o1vQLKJVACJVACJVACJVACIYGW/A6z/A6zG8RcNbdT9d1eTcx1A8eKhn6s6vtxweNYfisaqvupu+jXV8H63cXP1Asev+Wpopi6aVMVbFpdFPMUlP6jdrY/8AgTYkHZhEcAvFNdFMpq3qFh78y/okIT3qk4j8zborn290hN91S/c6zrzapVsFnXO9bvPFXjYtEykSVQAnVUAiVQAiVQAiVQAiVQlkAJlEAJlEAJlEAJlCVQAiVQAiVQAiVQAmX/BMHb3CdNrgcrAAAAAElFTkSuQmCC');
3072 background-size: 1.25em;
3073 background-repeat: no-repeat;
3074 background-position: right center;
3077 #markdown-hints-checkbox + label {
3078 float: left;
3079 margin: 2px 0 0 1em;
3080 line-height: 1.3;
3081 cursor: pointer;
3083 #edit-post-form #markdown-hints-checkbox + label {
3084 padding: 0;
3086 #markdown-hints-checkbox {
3087 visibility: hidden;
3088 float: left;
3090 #markdown-hints-checkbox + label::after {
3091 content: "(Show Markdown help)";
3093 #markdown-hints-checkbox:checked + label::after {
3094 content: "(Hide Markdown help)";
3096 #markdown-hints-checkbox + label::before {
3097 content: '\F059';
3098 font-family: "Font Awesome", "Font Awesome 5 Free";
3099 font-weight: 900;
3100 margin-right: 3px;
3102 #markdown-hints-checkbox:checked + label::before {
3103 font-weight: normal;
3105 #markdown-hints {
3106 margin: 4px 0 0 4px;
3107 padding: 4px 8px;
3108 position: absolute;
3109 text-align: left;
3110 top: calc(100% - 1em);
3111 z-index: 1;
3112 display: none;
3114 .comment-controls #markdown-hints {
3115 top: calc(100% + 1.75em);
3117 #markdown-hints-checkbox:checked ~ #markdown-hints {
3118 display: table;
3120 .markdown-hints-row {
3121 display: table-row;
3123 #markdown-hints .markdown-hints-row span,
3124 #markdown-hints .markdown-hints-row code {
3125 float: none;
3126 display: table-cell;
3127 border: none;
3128 background-color: inherit;
3129 padding: 0 12px 0 0;
3132 /******************/
3133 /* EDIT POST FORM */
3134 /******************/
3136 #edit-post-form {
3137 padding: 1em 1em 4em 1em;
3139 #edit-post-form .post-meta-fields {
3140 display: grid;
3141 grid-template-columns: 5em auto auto auto 1fr auto;
3142 margin-bottom: 0.625em;
3145 #edit-post-form label[for='title'],
3146 #edit-post-form label[for='url'],
3147 #edit-post-form label[for='section'] {
3148 grid-column: 1;
3150 #edit-post-form input[type='text'] {
3151 padding: 0.25em;
3152 grid-column: 2 / span 4;
3153 margin-bottom: 0.5em;
3156 #edit-post-form .link-post-checkbox,
3157 #edit-post-form .link-post-checkbox + label {
3158 grid-row: 1;
3159 grid-column: 6;
3161 #edit-post-form .question-checkbox,
3162 #edit-post-form .question-checkbox + label {
3163 grid-row: 3;
3164 grid-column: 5;
3165 justify-self: start;
3166 margin-left: 1.5em;
3169 #edit-post-form .post-meta-fields label[for="submit-to-frontpage"] {
3170 grid-row: 4;
3171 grid-column: 2 / span 4;
3172 text-align: left;
3173 margin-top: 8px;
3176 #edit-post-form .post-meta-fields input[type='checkbox'] {
3177 height: 0;
3178 opacity: 0;
3179 pointer-events: none;
3181 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
3182 white-space: nowrap;
3183 position: relative;
3184 cursor: pointer;
3185 padding: 0.25em 0.5em 0.25em calc(20px + 0.25em + 0.3725em);
3186 align-self: start;
3188 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
3189 content: "";
3190 font-family: "Font Awesome", "Font Awesome 5 Free";
3191 font-size: 1.375rem;
3192 line-height: 0.7;
3193 text-indent: 1px;
3194 font-weight: 900;
3195 position: absolute;
3196 width: 20px;
3197 height: 20px;
3198 left: 5px;
3200 #edit-post-form label[for='url'],
3201 #edit-post-form input[name='url'] {
3202 display: none;
3204 #edit-post-form .link-post-checkbox:checked ~ label[for='url'],
3205 #edit-post-form .link-post-checkbox:checked ~ input[name='url'] {
3206 display: initial;
3208 #edit-post-form label {
3209 line-height: normal;
3210 border: 1px solid transparent;
3211 text-align: right;
3212 padding: 0.25em 0.5em;
3213 white-space: nowrap;
3215 #edit-post-form input[type='radio'] {
3216 width: 0;
3217 margin: 0;
3218 opacity: 0;
3219 pointer-events: none;
3221 #edit-post-form input[type='radio'] + label {
3222 padding: 4px 12px;
3223 text-align: center;
3224 border-style: solid;
3225 border-width: 1px 1px 1px 0;
3226 cursor: pointer;
3228 #edit-post-form input[type='radio']:checked + label {
3229 cursor: default;
3232 #edit-post-form label[for='section'] {
3233 grid-row: 3;
3235 #edit-post-form input[type='radio'] + label {
3236 grid-row: 3;
3238 <?php fit_content("#edit-post-form input[type='radio'] + label"); ?>
3240 #edit-post-form textarea {
3241 min-height: 24em;
3244 #edit-post-form input[type='submit'] {
3245 padding: 6px 12px;
3246 float: right;
3248 #edit-post-form #markdown-hints {
3249 top: calc(100% + 2em);
3252 #edit-post-form button.guiedit div {
3253 overflow: visible;
3255 .guiedit-mobile-auxiliary-button {
3256 display: none;
3259 /***********/
3260 /* BUTTONS */
3261 /***********/
3263 button,
3264 input[type='submit'] {
3265 font-family: inherit;
3266 font-size: inherit;
3267 background-color: inherit;
3268 cursor: pointer;
3269 border: none;
3270 border-radius: 0;
3273 /************/
3274 /* HEADINGS */
3275 /************/
3277 .body-text h1,
3278 .body-text h2,
3279 .body-text h3,
3280 .body-text h4,
3281 .body-text h5,
3282 .body-text h6 {
3283 line-height: 1.1;
3284 margin: 1em 0 0.75em 0;
3285 text-align: left;
3288 .post-body h5,
3289 .post-body h6 {
3290 font-size: 1em;
3292 .post-body h4,
3293 .body-text h4 {
3294 font-size: 1.2em;
3296 .post-body h3,
3297 .body-text h3 {
3298 font-size: 1.4em;
3300 .post-body h2,
3301 .body-text h2 {
3302 font-size: 1.75em;
3304 .post-body h1,
3305 .body-text h1 {
3306 font-size: 2.1em;
3309 .comment-body h5,
3310 .comment-body h6 {
3311 font-size: 1em;
3313 .comment-body h4 {
3314 font-size: 1.15em;
3316 .comment-body h3 {
3317 font-size: 1.3em;
3319 .comment-body h2 {
3320 font-size: 1.5em;
3322 .comment-body h1 {
3323 font-size: 1.75em;
3326 /**********/
3327 /* QUOTES */
3328 /**********/
3330 blockquote,
3331 .post-body .comment-box .comment-body {
3332 font-size: 0.9em;
3333 margin: 1em 0;
3334 padding-left: 0.5em;
3335 margin-left: 1px;
3336 padding-bottom: 3px;
3338 blockquote *:first-child {
3339 margin-top: 0;
3341 blockquote *:last-child {
3342 margin-bottom: 0;
3344 blockquote blockquote {
3345 font-size: 0.95em;
3348 /* Pseudo-blockquotes that LW sometimes uses for some reason */
3350 .post-body .comment-box .user-name {
3351 font-style: italic;
3353 .post-body .comment-box .user-name::after {
3354 content: ":";
3356 .post-body .comment-box {
3357 zoom: 1.25;
3360 /**********/
3361 /* IMAGES */
3362 /**********/
3364 #content img, #content figure {
3365 max-width: 100%;
3368 .prediction-poll > svg {
3369 width: 700px;
3370 max-width: 100%;
3373 img.inline-latex {
3374 position: relative;
3375 top: 2.5px;
3376 margin: 0 2px;
3379 #content figure {
3380 text-align: center;
3381 margin: 1.5em auto;
3384 p.imgonly,
3385 div.imgonly,
3386 figure {
3387 text-align: center;
3388 margin: auto;
3389 clear: both;
3392 .imgonly iframe {
3393 display: block;
3394 width: 100%;
3395 height: 250px;
3396 border: 0;
3399 // Aspect ratio trick from https://css-tricks.com/aspect-ratio-boxes/
3401 [style*="--aspect-ratio"] > * {
3402 width: 100%;
3404 [style*="--aspect-ratio"] > img {
3405 height: auto;
3407 @supports (--custom:property) {
3408 [style*="--aspect-ratio"] {
3409 position: relative;
3411 [style*="--aspect-ratio"]::before {
3412 content: "";
3413 display: block;
3414 padding-bottom: calc(100% / (var(--aspect-ratio)));
3416 [style*="--aspect-ratio"] > * {
3417 position: absolute;
3418 top: 0;
3419 left: 0;
3420 height: 100%;
3424 /**********/
3425 /* TABLES */
3426 /**********/
3428 .body-text table {
3429 border-collapse: collapse;
3430 font-size: 0.875em;
3432 .body-text table th,
3433 .body-text table td {
3434 text-align: left;
3435 padding: 4px 6px;
3436 line-height: 1.3;
3438 .body-text table .numeric {
3439 text-align: right;
3440 font-family: Inconsolata, Menlo, monospace;
3442 .body-text table caption {
3443 margin: 0 0 0.25em 0;
3444 font-weight: bold;
3445 font-size: 1.125em;
3448 /********/
3449 /* MISC */
3450 /********/
3452 /*= Superscripts & subscripts =*/
3454 /* Make sure superscripts and subscripts do not affect line spacing. */
3455 sup, sub {
3456 vertical-align: baseline;
3457 position: relative;
3458 top: -0.5em;
3459 left: 0.05em;
3460 font-size: 0.8em;
3462 sub {
3463 top: 0.3em;
3466 /*= Code blocks & other "unstyled" text. =*/
3468 pre,
3469 code {
3470 font-family: Inconsolata, Menlo, monospace;
3472 pre {
3473 white-space: pre-wrap;
3475 .body-text pre {
3476 text-align: left;
3478 code {
3479 font-size: 0.95em;
3480 display: inline-block;
3481 padding: 0 4px 1px 5px;
3483 pre > code {
3484 display: block;
3485 border-radius: 0;
3486 padding: 3px 4px 5px 8px;
3487 tab-size: 4;
3490 /*= Fractions =*/
3492 .frac::after {
3493 content: "\200B";
3496 /*= Removing browser default styling of various elements =*/
3498 /* On various input elements such as text fields and buttons, remove "blue glow" focus outlines on Macs, dotted black outlines in Firefox, etc. */
3499 :focus {
3500 outline: none;
3503 /* Remove "embossed" appearance of horizontal rules. */
3504 hr {
3505 border: none;
3508 input,
3509 button,
3510 textarea {
3511 -webkit-appearance: none;
3512 -moz-appearance: none;
3513 appearance: none;
3516 input {
3517 font-family: inherit;
3518 font-size: inherit;
3519 font-weight: inherit;
3522 /*************/
3523 /* FOOTNOTES */
3524 /*************/
3526 ol {
3527 counter-reset: ordered-list;
3529 .footnote-definition {
3530 font-size: 0.9em;
3531 list-style-type: none;
3532 counter-increment: ordered-list;
3533 position: relative;
3535 .footnote-definition p {
3536 font-size: inherit !important;
3538 .footnote-definition::before {
3539 content: counter(ordered-list) ".";
3540 position: absolute;
3541 left: -2.5em;
3542 font-weight: bold;
3543 text-align: right;
3544 width: 2em;
3547 /*= LW Docs footnotes =*/
3549 .footnote-item {
3550 display: flex;
3553 .footnote-item > :not(.nothing) {
3554 margin: 0 0.2em;
3557 .footnote-item > :first-child {
3558 margin-left: -0.2em;
3559 margin-right: 0;
3562 .footnote-back-link a:not(.nothing) {
3563 font-size: 0;
3564 text-decoration: none;
3565 border: none;
3568 .footnote-back-link a:not(.nothing):hover {
3569 text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #00e;
3570 border: none;
3571 text-decoration: none;
3574 .footnote-back-link a::after {
3575 content: '\F106';
3576 font-family: Font Awesome;
3577 font-size: 1rem;
3578 padding: 0.2em;
3579 text-decoration: none;
3580 font-weight: bold;
3583 .footnote-content > :first-child {
3584 margin-top: 0;
3587 /*********/
3588 /* LISTS */
3589 /*********/
3591 li {
3592 margin-bottom: 0.5em;
3595 .body-text ol p,
3596 .body-text ul p {
3597 margin: 0.5em 0;
3600 .body-text ol {
3601 list-style: none;
3602 padding: 0;
3603 counter-reset: ol;
3605 .body-text ol > li {
3606 position: relative;
3607 counter-increment: ol;
3608 padding: 0 0 0 2.5em;
3609 margin: 0.25em 0 0 0;
3611 .body-text ol > li::before {
3612 content: counter(ol) ".";
3613 position: absolute;
3614 width: 2em;
3615 text-align: right;
3616 left: 0;
3618 .body-text ul {
3619 list-style: none;
3620 padding: 0;
3622 .body-text ul:not(.contents-list) > li:empty {
3623 padding-bottom: 1.25em;
3625 .body-text ul:not(.contents-list) > li {
3626 position: relative;
3627 padding: 0 0 0 1.75em;
3628 margin: 0.25em 0 0 0;
3630 .body-text ul:not(.contents-list) > li ul > li {
3631 padding: 0 0 0 2em;
3633 .body-text ul:not(.contents-list) > li::before {
3634 content: "•";
3635 position: absolute;
3636 width: 1.25em;
3637 text-align: right;
3638 left: 0;
3640 .body-text ul:not(.contents-list) > li ul > li::before {
3641 width: 1.5em;
3643 .body-text li > ul:first-child > li {
3644 padding-left: 0;
3646 .body-text li > ul:first-child > li::before {
3647 content: none;
3650 /**************/
3651 /* ERROR PAGE */
3652 /**************/
3654 .error-retry-form {
3655 margin: 0.5em 0;
3658 .error-retry-form input[type="submit"] {
3659 border: 1px solid #aaa;
3660 font-weight: bold;
3661 font-size: 1.125rem;
3662 padding: 0.5em 1.25em;
3665 /**************/
3666 /* ABOUT PAGE */
3667 /**************/
3669 #content.about-page .contents {
3670 margin-top: 0.25em;
3672 #content.about-page .accesskey-table {
3673 border-collapse: collapse;
3674 margin: auto;
3676 #content.about-page .accesskey-table th,
3677 #content.about-page .accesskey-table td {
3678 padding: 2px 6px;
3680 #content.about-page .accesskey-table td:first-child {
3681 padding-right: 1.5em;
3683 #content.about-page .accesskey-table td:last-child {
3684 text-align: center;
3685 font-family: Inconsolata, Menlo, monospace;
3687 #content.about-page h3:nth-of-type(n+2) {
3688 clear: both;
3691 /******************/
3692 /* IMAGES OVERLAY */
3693 /******************/
3695 #images-overlay + #content .post-body img {
3696 visibility: hidden;
3699 #images-overlay div {
3700 position: absolute;
3702 #images-overlay div::after {
3703 content: "Click to enlarge";
3704 display: block;
3705 position: absolute;
3706 margin: auto;
3707 left: 0;
3708 right: 0;
3709 bottom: 10px;
3710 padding: 6px 10px;
3711 font-size: 1.25rem;
3712 background-color: rgba(0,0,0,0.6);
3713 color: #fff;
3714 border-radius: 5px;
3715 opacity: 0.0;
3716 transition: opacity 0.15s ease;
3717 pointer-events: none;
3719 <?php fit_content("#images-overlay div::after"); ?>
3720 #images-overlay div:hover::after {
3721 opacity: 1.0;
3724 #images-overlay img {
3725 width: 100%;
3728 /***************/
3729 /* IMAGE FOCUS */
3730 /***************/
3732 /*=--------------=*/
3733 /*= Hover styles =*/
3734 /*=--------------=*/
3736 #content img:hover,
3737 #images-overlay img:hover {
3738 filter: drop-shadow(0 0 3px #777);
3739 cursor: zoom-in;
3741 #content img:active,
3742 #images-overlay img:active {
3743 transform: scale(0.975);
3746 /*=---------=*/
3747 /*= Overlay =*/
3748 /*=---------=*/
3750 #image-focus-overlay {
3751 position: fixed;
3752 top: 0;
3753 right: 0;
3754 bottom: 0;
3755 left: 0;
3756 z-index: 2;
3757 display: none;
3758 cursor: zoom-out;
3760 #image-focus-overlay::before {
3761 content: "";
3762 display: block;
3763 position: absolute;
3764 top: 0;
3765 right: 0;
3766 bottom: 0;
3767 left: 0;
3768 background-color: #000;
3769 opacity: 0.5;
3770 z-index: -1;
3772 #image-focus-overlay.engaged {
3773 display: initial;
3776 #image-focus-overlay img {
3777 margin: auto;
3778 position: absolute;
3779 left: 50%;
3780 top: 50%;
3781 transform: translateX(-50%) translateY(-50%);
3784 /*=-------------------=*/
3785 /*= Single-image mode =*/
3786 /*=-------------------=*/
3788 #image-focus-overlay:not(.slideshow) .image-number,
3789 #image-focus-overlay:not(.slideshow) .slideshow-buttons {
3790 visibility: hidden;
3793 /*=---------=*/
3794 /*= Caption =*/
3795 /*=---------=*/
3797 #image-focus-overlay .caption {
3798 position: absolute;
3799 bottom: 0.75em;
3800 background-color: rgba(0,0,0,0.7);
3801 left: 9em;
3802 right: 9em;
3803 margin: auto;
3804 max-width: calc(100% - 18em);
3805 text-align: center;
3806 font-size: 1.375em;
3807 border-radius: 8px;
3808 z-index: 1;
3809 transition:
3810 bottom 0.2s ease;
3812 <?php fit_content("#image-focus-overlay .caption"); ?>
3813 #image-focus-overlay .caption.hidden {
3814 bottom: -5em;
3815 transition:
3816 bottom 0.5s ease;
3819 #image-focus-overlay .caption p {
3820 margin: 1em 1.25em;
3821 color: #fff;
3824 #image-focus-overlay .caption:not(:empty)::before {
3825 content: "";
3826 display: block;
3827 position: absolute;
3828 width: 100vw;
3829 height: calc(100% + 1.5em);
3830 z-index: -1;
3831 top: -0.75em;
3832 left: calc(-50vw + 50%);
3836 /*=--------------=*/
3837 /*= Help overlay =*/
3838 /*=--------------=*/
3840 #image-focus-overlay .help-overlay {
3841 position: absolute;
3842 display: flex;
3843 flex-flow: column;
3844 z-index: 2;
3845 font-size: 1.5rem;
3846 padding: 1em;
3847 border-radius: 10px;
3848 bottom: 1em;
3849 right: 1em;
3850 overflow: hidden;
3851 white-space: nowrap;
3852 color: transparent;
3853 cursor: default;
3854 visibility: hidden;
3855 transition:
3856 visibility 1s ease,
3857 color 1s ease,
3858 background-color 1s ease,
3859 bottom 0.3s ease;
3861 #image-focus-overlay .help-overlay:hover {
3862 max-width: 24em;
3863 max-height: 14em;
3864 background-color: rgba(0,0,0,0.85);
3865 color: #fff;
3866 visibility: visible;
3867 transition:
3868 visibility 0.2s ease 0.3s,
3869 color 0.2s ease 0.3s,
3870 background-color 0.2s ease 0.3s;
3873 #image-focus-overlay .help-overlay::after {
3874 content: "\F128";
3875 font-family: "Font Awesome", "Font Awesome 5 Free";
3876 font-weight: 900;
3877 font-size: 2rem;
3878 position: absolute;
3879 right: 0;
3880 bottom: 0;
3881 padding: 10px;
3882 color: #000;
3883 filter: drop-shadow(0 0 6px #fff);
3884 visibility: visible;
3885 opacity: 0.85;
3886 transition:
3887 visibility 1s ease;
3889 #image-focus-overlay .help-overlay:hover::after {
3890 visibility: hidden;
3891 transition:
3892 visibility 0.2s ease 0.3s;
3895 #image-focus-overlay .help-overlay p {
3896 margin: 0;
3897 text-indent: -2em;
3898 padding-left: 2em;
3899 max-width: 100%;
3900 overflow: hidden;
3902 #image-focus-overlay .help-overlay p + p {
3903 margin: 0.75em 0 0 0;
3905 #image-focus-overlay .help-overlay.hidden {
3906 bottom: -2em;
3909 /*=--------------=*/
3910 /*= Slide number =*/
3911 /*=--------------=*/
3913 #image-focus-overlay .image-number {
3914 position: absolute;
3915 z-index: 2;
3916 font-size: 1.75rem;
3917 left: 1em;
3918 bottom: 1em;
3919 font-weight: 600;
3920 text-shadow:
3921 0 0 3px #fff,
3922 0 0 5px #fff,
3923 0 0 8px #fff,
3924 0 0 13px #fff;
3925 width: 1.5em;
3926 text-align: right;
3927 white-space: nowrap;
3928 transition: bottom 0.3s ease;
3930 #image-focus-overlay .image-number::before {
3931 content: "#";
3932 opacity: 0.3;
3934 #image-focus-overlay .image-number::after {
3935 content: " of " attr(data-number-of-images);
3936 opacity: 0.3;
3938 #image-focus-overlay .image-number:hover::before,
3939 #image-focus-overlay .image-number:hover::after {
3940 opacity: 1.0;
3942 #image-focus-overlay .image-number.hidden {
3943 bottom: -1.25em;
3946 /*=-------------------=*/
3947 /*= Slideshow buttons =*/
3948 /*=-------------------=*/
3950 #image-focus-overlay .slideshow-buttons {
3951 position: absolute;
3952 top: 0;
3953 left: 0;
3954 width: 100%;
3955 height: 100%;
3956 z-index: 1;
3957 display: flex;
3958 justify-content: space-between;
3959 pointer-events: none;
3961 #image-focus-overlay .slideshow-buttons button {
3962 font-family: "Font Awesome", "Font Awesome 5 Free";
3963 font-weight: 900;
3964 font-size: 3rem;
3965 padding: 0.5em;
3966 color: #ddd;
3967 position: relative;
3968 left: 0;
3969 transition:
3970 left 0.3s ease;
3971 pointer-events: auto;
3973 #image-focus-overlay .slideshow-buttons button::selection {
3974 background-color: transparent;
3976 @media only screen and (hover: hover) {
3977 #image-focus-overlay .slideshow-buttons button:hover {
3978 background-color: rgba(0,0,0,0.1);
3979 color: #777;
3982 #image-focus-overlay .slideshow-buttons button:active {
3983 transform: none;
3984 color: #888;
3986 #image-focus-overlay .slideshow-buttons button:disabled {
3987 text-shadow: none;
3988 background-color: transparent;
3989 color: #ddd;
3990 cursor: default;
3991 opacity: 0.4;
3993 #image-focus-overlay .slideshow-button.previous.hidden {
3994 left: -1.75em;
3996 #image-focus-overlay .slideshow-button.next.hidden {
3997 left: 1.75em;
4000 /*=-----------------=*/
4001 /*= Background blur =*/
4002 /*=-----------------=*/
4004 .blurred {
4005 filter: blur(3px);
4008 /**************************/
4009 /* QUALIFIED HYPERLINKING */
4010 /**************************/
4012 #content.no-nav-bars {
4013 margin: 8px auto;
4015 #content.no-nav-bars + #ui-elements-container > * {
4016 padding-top: 8px;
4019 #aux-about-link {
4020 position: fixed;
4021 top: 40px;
4022 left: calc((100% - 900px) / 2 - 69px);
4023 width: 1.5em;
4024 height: 1.5em;
4025 text-align: center;
4026 display: table;
4028 #aux-about-link a {
4029 display: table-cell;
4030 width: 100%;
4031 vertical-align: middle;
4032 font-family: "Font Awesome", "Font Awesome 5 Free";
4033 font-weight: 900;
4034 font-size: 1.25rem;
4035 opacity: 0.4;
4036 z-index: 1;
4039 .qualified-linking {
4040 margin: 0;
4041 position: relative;
4043 .qualified-linking input[type='checkbox'] {
4044 visibility: hidden;
4045 width: 0;
4046 height: 0;
4047 margin: 0;
4049 .qualified-linking label {
4050 font-family: "Font Awesome", "Font Awesome 5 Free";
4051 font-weight: 900;
4052 font-size: 1rem;
4053 padding: 0 0.5em;
4054 display: inline-block;
4055 margin-left: 0.25em;
4057 .qualified-linking label:hover {
4058 cursor: pointer;
4060 .qualified-linking label:active span {
4061 display: inline-block;
4062 transform: scale(0.9);
4064 .qualified-linking label::selection {
4065 background-color: transparent;
4068 .qualified-linking label::after {
4069 content: "";
4070 width: 100vw;
4071 height: 0;
4072 left: 0;
4073 top: 0;
4074 position: fixed;
4075 z-index: 1;
4076 cursor: default;
4078 .qualified-linking input[type='checkbox']:checked + label::after {
4079 height: 100vh;
4082 .qualified-linking-toolbar {
4083 position: absolute;
4084 right: 0.25em;
4085 top: 110%;
4086 z-index: 1;
4088 .qualified-linking input[type='checkbox'] ~ .qualified-linking-toolbar {
4089 display: none;
4091 .qualified-linking input[type='checkbox']:checked ~ .qualified-linking-toolbar {
4092 display: block;
4094 #qualified-linking-toolbar-toggle-checkbox-bottom ~ .qualified-linking-toolbar {
4095 top: unset;
4096 bottom: 125%;
4099 .qualified-linking-toolbar a {
4100 display: block;
4101 padding: 0 6px;
4102 margin: 4px;
4104 .qualified-linking-toolbar a::selection {
4105 background-color: transparent;
4108 /*****************/
4109 /* HOVER PREVIEW */
4110 /*****************/
4112 #preview-popup-toggle {
4113 position: absolute;
4114 right: -67px;
4115 bottom: 285px;
4116 cursor: pointer;
4117 color: var(--GW-toggle-widget-color, #888);
4119 #preview-popup-toggle:hover {
4120 color: var(--GW-toggle-widget-hover-color, #444);
4123 #content.preview:not(not) {
4124 padding: 0;
4126 #content.preview > .comment-thread {
4127 margin: 2px;
4129 #content.preview.individual-thread-page > .comment-thread > .comment-item {
4130 border: none;
4132 #content.preview.user-page .page-main-heading, #content.preview.user-page .user-stats {
4133 padding: 0 8px;
4135 #content.preview.user-page .page-main-heading {
4136 margin-left: 8px;
4138 #content.preview.not(not) .body-text {
4139 margin-left: 8px;
4140 margin-right: 8px;
4142 #content.preview.user-page .user-stats {
4143 margin-right: 32px;
4145 #content.preview.user-page .page-toolbar, #content.preview.user-page nav {
4146 display: none;
4148 #content.preview button.vote {
4149 display: none;
4151 #content.preview > h1.listing {
4152 max-height: unset;
4154 #content.preview.user-page > .comment-thread {
4155 margin: 0.5em 0;
4157 #content.preview > .post {
4158 margin: 0 18px;
4160 #content.preview .post-title {
4161 margin-top: 0.5em;
4163 #content.preview .post-meta {
4164 line-height: 1.0;
4166 #content.preview .body-text {
4167 font-size: 1em;
4169 #content.preview nav.contents,
4170 #content.preview .lw2-link {
4171 display: none;
4174 .preview-popup {
4175 position: fixed;
4176 transform-origin: top;
4177 top: 10%;
4178 right: 10%;
4179 max-width: 700px;
4180 z-index: 10001;
4181 background-color: #eee;
4182 border: 1px solid #ccc;
4183 box-shadow: 2px 6px 20px -4px #000;
4184 transition: height 0.2s ease, top 0.2s ease;
4186 .popup-hide-button {
4187 position: fixed;
4188 top: 4px;
4189 right: 4px;
4190 color: #000;
4191 background-color: #fff;
4192 width: 28px;
4193 height: 28px;
4194 display: flex;
4195 font-family: "Font Awesome";
4196 font-size: 14px;
4197 line-height: 1;
4198 border: 1px solid #bbb;
4199 border-radius: 28px;
4200 align-items: center;
4201 justify-content: center;
4202 //padding-bottom: 2px;
4203 padding-left: 1.5px;
4204 font-family: "Font Awesome", "Font Awesome 5 Free";
4205 cursor: pointer;
4207 .popup-hide-button:hover::before {
4208 content: "Turn off preview popups";
4209 display: block;
4210 position: absolute;
4211 width: max-content;
4212 right: 32px;
4213 color #000;
4214 background-color: #fff;
4215 border: 1px solid #eee;
4216 border-radius: 2px;
4217 padding: 4px;
4220 /********/
4221 /* MATH */
4222 /********/
4224 .mathjax-block-container {
4225 display: block;
4226 overflow-y: hidden;
4227 border-radius: 6px;
4228 margin: 1em 0 1.5em 0;
4230 .mathjax-inline-container {
4231 max-width: 100%;
4232 overflow-x: auto;
4233 overflow-y: hidden;
4234 position: relative;
4235 padding: 0 1px;
4237 #content .mathjax-inline-container,
4238 #content .mathjax-inline-container .mjpage,
4239 #content .mathjax-inline-container .mjx-chtml,
4240 #content .mathjax-inline-container .mjx-math,
4241 #content .mathjax-inline-container .mjx-mrow {
4242 display: inline;
4243 white-space: normal;
4245 .post .mathjax-inline-container {
4246 line-height: 1;
4248 .comment .mathjax-inline-container {
4249 line-height: 1;
4251 .mathjax-inline-container .mjx-chtml {
4252 padding: 0;
4255 /************/
4256 /* SPOILERS */
4257 /************/
4259 .spoiler {
4260 color: #000;
4261 background-color: currentColor;
4262 transition: none;
4263 text-shadow: none;
4264 margin: 1em 0;
4265 box-shadow: 0 0 0 1px currentColor inset;
4266 overflow: auto;
4268 .spoiler:not(:last-child) {
4269 margin-bottom: 0;
4271 #content .spoiler * {
4272 color: inherit;
4273 border: none;
4275 .spoiler:hover {
4276 color: unset;
4277 background-color: unset;
4278 text-shadow: unset;
4279 transition:
4280 color 0.1s ease-out 0.1s,
4281 background-color 0.1s ease-out 0.1s,
4282 text-shadow 0.1s ease-out 0.1s;
4284 .spoiler::selection,
4285 .spoiler ::selection {
4286 color: #fff;
4287 background-color: #000;
4289 .spoiler:not(:hover)::selection,
4290 .spoiler:not(:hover) ::selection {
4291 background-color: transparent;
4294 /*= Fix for LessWrong being weird =*/
4296 .spoiler > p {
4297 padding: 0 7px;
4299 .spoiler > p:first-child {
4300 margin-top: 0.25em;
4302 .spoiler > p:last-child {
4303 margin-bottom: 0;
4304 padding-bottom: 0.25em;
4306 .spoiler > p:hover ~ p {
4307 background-color: currentColor;
4309 .spoiler > p + p {
4310 margin-top: -1em;
4312 .spoiler > p:not(:first-child) {
4313 padding-top: 0.5em;
4315 .spoiler > p:not(:last-child) {
4316 padding-bottom: 0.5em;
4319 .spoiler:not(:hover) pre,
4320 .spoiler:not(:hover) code {
4321 background-color: inherit;
4322 box-shadow: none;
4324 #content .spoiler pre {
4325 border-color: currentColor;
4326 border-style: solid;
4327 border-width: 0 1px;
4328 border-radius: 0;
4331 /*******************/
4332 /* PAGE LIST INDEX */
4333 /*******************/
4335 .page-list-index {
4336 margin: 1em 30px;
4337 line-height: 1.2;
4340 .page-list-index > p {
4341 font-weight: bold;
4342 font-size: 1.2em;
4345 .page-list-index > ul * {
4346 margin: 0;
4349 .page-list-index ul {
4350 padding-left: 1.5em;
4353 .page-list-index li {
4354 margin-top: 0.67em;
4357 .page-list-index li > a {
4358 display: block;
4359 font-size: 1.1em;
4360 font-weight: bold;
4361 margin: 0.33em 0;
4364 .page-list-index li > a:last-child {
4365 margin-bottom: 1em;
4369 /*****************/
4370 /* USER MENTIONS */
4371 /*****************/
4373 .textarea-container .autocomplete-container {
4374 position: absolute;
4375 overflow-y: auto;
4376 font-size: 1.125rem;
4377 cursor: default;
4378 backdrop-filter: blur(2px);
4379 width: 360px;
4381 .textarea-container .autocomplete-container:empty {
4382 display: none;
4385 @media only screen and (min-width: 521px) {
4386 .textarea-container .autocomplete-container.inside {
4387 max-height: calc(100% - 36px);
4388 top: 32px;
4390 .textarea-container .autocomplete-container.outside {
4391 max-height: calc(100% - 28px);
4392 top: 28px;
4393 z-index: 10001;
4396 .textarea-container .autocomplete-container.inside.right {
4397 right: 18px;
4399 .textarea-container .autocomplete-container.inside.left {
4400 left: 18px;
4402 .textarea-container .autocomplete-container.outside.right {
4403 left: calc(100% + 3px);
4405 .textarea-container .autocomplete-container.outside.left {
4406 right: calc(100% + 3px);
4409 head.content-width-normal + body .textarea-container .autocomplete-container.outside {
4410 max-width: calc((100vw - (900px - 40px * 2)) / 2);
4412 head.content-width-wide + body .textarea-container .autocomplete-container.outside {
4413 max-width: calc((100vw - (1150px - 40px * 2)) / 2);
4415 head.content-width-fluid + body .textarea-container .autocomplete-container.outside {
4416 max-width: calc((300px + 40px * 2) / 2);
4420 .textarea-container .autocomplete-container div {
4421 padding: 2px 8px 0 8px;
4422 white-space: nowrap;
4423 display: flex;
4424 justify-content: flex-end;
4427 .textarea-container .autocomplete-container div span.name {
4428 flex: 1 1 auto;
4429 width: calc(100% - 9em);
4430 overflow: hidden;
4431 text-overflow: ellipsis;
4433 .textarea-container .autocomplete-container div span.name:hover {
4434 overflow: visible;
4435 z-index: 1;
4437 .textarea-container .autocomplete-container div span.age,
4438 .textarea-container .autocomplete-container div span.karma {
4439 font-size: 0.9em;
4440 text-align: right;
4442 .textarea-container .autocomplete-container div span.age {
4443 flex: 0 0 3em;
4445 .textarea-container .autocomplete-container div span.karma {
4446 flex: 0 0 6em;
4450 /***************/
4451 /* COLLECTIONS */
4452 /***************/
4454 h2.sequence-chapter,
4455 h3.sequence-chapter,
4456 h4.sequence-chapter {
4457 text-align: center;
4459 h2.sequence-chapter::before,
4460 h3.sequence-chapter::before,
4461 h4.sequence-chapter::before {
4462 display: block;
4463 clear: both;
4464 margin: 1.5em 0 0.75em 0;
4465 font-style: normal;
4466 font-weight: normal;
4467 font-family: <?php echo $UI_font; ?>;
4469 h2.sequence-chapter::before {
4470 content: '\25A3';
4472 h3.sequence-chapter::before {
4473 content: '\25AA\2004\25AA';
4475 h4.sequence-chapter::before {
4476 content: '\00B7\2004\00B7\2004\00B7';
4480 /*******************/
4481 /* ALIGNMENT FORUM */
4482 /*******************/
4484 #content.alignment-forum-index-page::after {
4485 content: "Alignment Forum";
4486 font-size: 1.5rem;
4487 margin: 0.375em 0 0 -0.375em;
4488 order: -1;
4491 /**********************/
4492 /* FOR NARROW SCREENS */
4493 /**********************/
4495 @media only screen and (max-width: 1440px) {
4496 #hns-date-picker {
4497 right: -81px;
4498 padding: 8px 10px 10px 10px;
4499 bottom: 62px;
4500 display: none;
4502 #hns-date-picker::before {
4503 content: "";
4504 position: absolute;
4505 display: block;
4506 z-index: -1;
4507 height: calc(100% + 2px);
4508 top: -1px;
4509 left: -1px;
4510 width: 50%;
4513 @media only screen and (max-width: 1160px) {
4514 #new-comment-nav-ui {
4515 bottom: 180px;
4516 right: -68px;
4518 #hns-date-picker {
4519 bottom: 200px;
4520 right: -36px;
4522 #hns-date-picker::before {
4523 width: calc(100% - 35px);
4525 #theme-selector button::before {
4526 right: unset;
4527 left: 100%;
4529 #theme-selector:hover::after {
4530 content: "";
4531 display: block;
4532 position: absolute;
4533 width: calc(6em - 7px);
4534 height: calc(100% + 2px);
4535 top: 0;
4536 left: calc(100% + 1px);
4538 #anti-kibitzer-toggle {
4539 bottom: 330px;
4542 @media only screen and (max-width: 1080px) {
4543 #width-selector {
4544 right: -30px;
4546 #width-selector button {
4547 display: block;
4549 #text-size-adjustment-ui {
4550 top: 90px;
4551 right: -30px;
4553 #text-size-adjustment-ui button {
4554 display: block;
4555 position: relative;
4557 #text-size-adjustment-ui button.increase {
4558 bottom: 48px;
4560 #text-size-adjustment-ui button.decrease {
4561 top: 50px;
4563 #theme-selector {
4564 top: 46px;
4565 left: -44px;
4567 #theme-tweaker-toggle {
4568 left: -44px;
4569 top: 2px;
4571 #theme-tweaker-toggle button {
4572 height: 2em;
4573 width: 2em;
4574 padding: 7px;
4576 #quick-nav-ui {
4577 right: -54px;
4579 #new-comment-nav-ui {
4580 right: -55px;
4582 #hns-date-picker {
4583 right: -23px;
4585 #hns-date-picker::before {
4586 width: calc(100% - 22px);
4588 #anti-kibitzer-toggle {
4589 right: -54px;
4592 @media only screen and (max-width: 1040px) {
4593 #quick-nav-ui {
4594 right: -49px;
4596 #new-comment-nav-ui {
4597 right: -50px;
4599 #hns-date-picker {
4600 right: -18px;
4602 #hns-date-picker::before {
4603 width: calc(100% - 17px);
4605 #anti-kibitzer-toggle {
4606 right: -50px;
4609 @media only screen and (max-width: 1020px) {
4610 #quick-nav-ui {
4611 right: -20px;
4613 #new-comment-nav-ui {
4614 right: -21px;
4616 #new-comment-nav-ui .new-comments-count::before {
4617 content: "";
4618 position: absolute;
4619 width: 100%;
4620 height: calc(100% + 45px);
4621 z-index: -1;
4622 left: 0;
4623 top: -22px;
4625 #hns-date-picker {
4626 right: 19px;
4628 #hns-date-picker::before {
4629 width: 100%;
4631 #anti-kibitzer-toggle {
4632 right: -20px;
4635 @media only screen and (max-width: 1000px) {
4636 #theme-selector {
4637 left: -17px;
4638 top: 120px;
4639 padding: 3px 0;
4640 max-width: 32px;
4642 #theme-selector button {
4643 margin: 1px 4px;
4645 #text-size-adjustment-ui {
4646 top: 100px;
4647 right: -12px;
4649 @media not screen and (hover: none) {
4650 #quick-nav-ui,
4651 #new-comment-nav-ui,
4652 #new-comment-nav-ui + #hns-date-picker,
4653 #anti-kibitzer-toggle {
4654 opacity: 0.4;
4656 #quick-nav-ui:hover,
4657 #new-comment-nav-ui:hover,
4658 #new-comment-nav-ui + #hns-date-picker:hover,
4659 #new-comment-nav-ui + #hns-date-picker:focus-within,
4660 #new-comment-nav-ui:hover + #hns-date-picker,
4661 #anti-kibitzer-toggle:hover {
4662 opacity: 1.0;
4665 #theme-tweaker-toggle {
4666 top: 70px;
4667 left: -21px;
4671 /**************/
4672 /* PRINT VIEW */
4673 /**************/
4675 @media only print {
4676 .nav-bar {
4677 visibility: hidden;
4678 max-height: 0;
4679 overflow: hidden;
4681 #ui-elements-container {
4682 display: none;
4684 #images-overlay {
4685 display: none;
4687 #images-overlay + #content .post-body img {
4688 visibility: visible;
4690 .comment-controls {
4691 display: none;
4693 #comments-sort-mode-selector {
4694 display: none;
4696 .comment-minimize-button {
4697 display: none;
4699 .post-meta .qualified-linking,
4700 .post-meta .lw2-link {
4701 display: none;
4703 .comment-meta .permalink,
4704 .comment-meta .lw2-link,
4705 .comment-meta .comment-parent-link {
4706 display: none;
4708 .new-comment::before {
4709 display: none;
4711 #content::before {
4712 box-shadow: none;
4716 <?php include("style_mobile_additions.css.php"); ?>
4718 <?php if (isset($argv[2]) && preg_match("/\\.css(.php)?$/", $argv[2])) include($argv[2]); ?>
4720 <?php
4722 ## TO BE IMPLEMENTED:
4723 ## This will be specified via command-line argument; but for now, we just
4724 ## include all available additions (currently, only 'accordius').
4726 $additions = [
4727 'accordius'
4730 foreach ($additions as $addition) {
4731 $potential_includes = [
4732 "style.css.php",
4733 "style_mobile_additions.css.php"
4735 foreach ($potential_includes as $include) {
4736 $include_path = "{$addition}/{$include}";
4737 if (file_exists($include_path))
4738 include ($include_path);