Gracefully handle errors when a crosspost can't be retrieved.
[lw2-viewer.git] / www / theme-ultramodern.css.php
blob577b94957d176f67eaf4a5325858994bb19d479c
1 <?php
2 $UI_font = "'Proxima Nova', 'GW-Symbols', sans-serif";
3 $text_font = "'Raleway', 'Helvetica', 'Arial', 'Verdana', sans-serif;";
4 $hyperlink_color = "#f60";
5 $white_glow = "0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff";
6 ?>
8 /*********************/
9 /* ULTRAMODERN THEME */
10 /*********************/
12 /*===========*/
13 /* VARIABLES */
14 /*===========*/
16 /* Color scheme.
18 :root {
19 --GW-toggle-widget-color: #222;
20 --GW-toggle-widget-hover-color: #000;
21 --GW-toggle-widget-shadow-color: rgba(255,255,255,0.4);
24 /*======*/
25 /* BASE */
26 /*======*/
28 body {
29 color: #444;
30 background-color: #888;
31 font-family: <?php echo $UI_font; ?>;
32 font-weight: 300;
34 #content {
35 line-height: 1.55;
38 /*=========*/
39 /* NAV BAR */
40 /*=========*/
42 .active-bar {
43 border: 1px solid transparent;
44 border-bottom-color: #666;
45 box-shadow:
46 0 1.5px 1.5px -1.5px #bbb,
47 0 1px 1px -1px #777;
48 margin: 0 -30px 0 -2px;
51 .nav-inner {
52 font-weight: normal;
53 font-size: 1.1875em;
54 padding: 11px 30px 13px 30px;
56 .nav-current .nav-inner {
57 font-weight: 300;
58 color: #ccc;
60 .nav-bar-top:not(#primary-bar) .nav-inner {
61 font-size: 1em;
63 .nav-bar-top:not(.nav-bar-top:not(#primary-bar)) .nav-item:not(#nav-item-search) .nav-inner {
64 padding: 5px 0 3px 0;
66 @media only screen and (min-width: 901px) {
67 .nav-bar-top:not(#primary-bar) #nav-item-sequences .nav-inner {
68 line-height: 1.1;
72 #bottom-bar.decorative::before,
73 #bottom-bar.decorative::after {
74 content: "GW";
75 display: block;
76 text-align: center;
77 padding: 0.25em 0 1em 0;
79 #bottom-bar.decorative::before {
80 width: 100%;
81 color: transparent;
82 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
83 background-repeat: repeat-x;
84 background-position: center 35%;
85 margin: 0 30px;
86 filter: brightness(50%) opacity(0.6);
88 #bottom-bar.decorative::after {
89 color: #777;
90 position: absolute;
91 left: 0;
92 right: 0;
93 margin: auto;
94 background-color: #888;
95 padding-right: 4px;
96 padding-left: 4px;
98 <?php fit_content("#bottom-bar.decorative::after"); ?>
100 .nav-bar .nav-inner {
101 color: #444;
102 font-weight: 300;
104 .nav-bar .nav-inner:hover,
105 .nav-bar .nav-inner:focus {
106 text-decoration: underline;
109 /* Accesskey hints */
111 .nav-inner::after {
112 display: block;
113 position: absolute;
114 left: 5px;
115 top: -2px;
116 font-weight: 400;
117 font-size: 0.7em;
118 color: #7c7c7c;
120 .inactive-bar .nav-inner::after {
121 color: #777;
122 top: 0;
124 .nav-inner:hover::after {
125 color: #666;
128 /* Search tab */
130 #nav-item-search form::before {
131 opacity: 0.4;
132 font-size: 0.9375rem;
134 #nav-item-search button {
135 border: none;
136 font-weight: 300;
138 #nav-item-search input::placeholder {
139 color: #f00;
140 font-weight: normal;
143 /* Inbox indicator */
145 #inbox-indicator {
146 top: 0;
149 /*= Top pagination UI =*/
151 #top-nav-bar a::before {
152 font-weight: 300;
155 /*= Bottom pagination UI =*/
157 #bottom-bar .nav-item a::before {
158 font-weight: 400;
161 /*= Pagination UI hover tooltips =*/
163 #top-nav-bar a::after,
164 #bottom-bar a::after {
165 color: #222;
168 /*==============*/
169 /* PAGE TOOLBAR */
170 /*==============*/
172 .page-toolbar > * {
173 color: #444;
174 font-weight: 300;
176 .new-post::before,
177 .logout-button::before {
178 opacity: 0.8;
180 .page-toolbar .button:hover {
181 text-decoration: none;
184 /*==============*/
185 /* SUBLEVEL NAV */
186 /*==============*/
188 .sublevel-nav .sublevel-item {
189 color: #444;
190 background-color: #888;
192 .sublevel-nav .sublevel-item:not(.selected):hover {
193 color: #000;
194 text-decoration: none;
196 .sublevel-nav .sublevel-item:hover,
197 .sublevel-nav .sublevel-item.selected {
198 background-color: #999;
200 .sublevel-nav .sublevel-item:not(.selected):active,
201 .sublevel-nav .sublevel-item.selected {
202 color: #fff;
205 .sublevel-nav:not(.sort) .sublevel-item {
206 border-style: solid;
207 border-color: #999;
208 border-width: 1px 0 1px 1px;
210 .sublevel-nav:not(.sort) .sublevel-item:first-child {
211 border-radius: 8px 0 0 8px;
213 .sublevel-nav:not(.sort) .sublevel-item:last-child {
214 border-width: 1px;
215 border-radius: 0 8px 8px 0;
218 /*=====================*/
219 /* SORT ORDER SELECTOR */
220 /*=====================*/
222 .sublevel-nav.sort .sublevel-item {
223 font-family: <?php echo $UI_font; ?>;
224 padding: 8px 8px 6px 8px;
225 text-transform: uppercase;
226 pointer-events: auto;
227 box-shadow: 1px 1px 0 0 #777 inset;
229 .sublevel-nav.sort {
230 border: 2px solid transparent;
231 padding: 18px 0 0 0;
232 border-radius: 8px;
233 pointer-events: none;
234 background-color: #999;
236 .sublevel-nav.sort::before {
237 text-transform: uppercase;
238 font-weight: 600;
239 color: #444;
240 z-index: 1;
242 .sublevel-nav.sort::after {
243 content: "";
244 position: absolute;
245 display: block;
246 top: 0;
247 left: 0;
248 width: 100%;
249 height: 100%;
250 border-radius: 6px;
251 box-shadow:
252 0 18px 0 0 #888 inset,
253 0 0 0 1px #777 inset,
254 0 18px 0 1px #777 inset,
255 0 0 0 2px #888;
258 /*================*/
259 /* WIDTH SELECTOR */
260 /*================*/
262 #width-selector button {
263 box-shadow:
264 0 0 0 4px #888 inset,
265 0 0 0 5px #ccc inset;
267 #width-selector button:hover,
268 #width-selector button.selected {
269 box-shadow:
270 0 0 0 1px #888 inset,
271 0 0 0 2px #ccc inset,
272 0 0 0 4px #888 inset,
273 0 0 0 5px #ccc inset;
275 #width-selector button::after {
276 color: #ccc;
277 font-weight: 300;
280 /*================*/
281 /* THEME SELECTOR */
282 /*================*/
284 #theme-selector button {
285 box-shadow:
286 0 0 0 5px #888 inset;
288 #theme-selector button:hover,
289 #theme-selector button.selected {
290 box-shadow:
291 0 0 0 2px #888 inset,
292 0 0 0 3px #ccc inset,
293 0 0 0 5px #888 inset;
296 #theme-selector button::before {
297 color: #aaa;
298 background-color: #888;
300 #theme-selector button:hover::before,
301 #theme-selector button.selected::before {
302 color: #ccc;
305 /*======================*/
306 /* THEME TWEAKER TOGGLE */
307 /*======================*/
309 #theme-tweaker-toggle button:hover {
310 text-decoration: none;
313 /*=================*/
314 /* QUICKNAV WIDGET */
315 /*=================*/
317 #quick-nav-ui a {
318 color: #666;
319 border-radius: 4px;
320 box-shadow: 0 0 0 1px #999;
321 text-decoration: none;
323 #quick-nav-ui a[href='#bottom-bar'] {
324 line-height: 1.8;
326 #quick-nav-ui a:active {
327 transform: scale(0.9);
329 #quick-nav-ui a[href='#comments'].no-comments {
330 opacity: 0.4;
331 color: #777;
333 @media only screen and (hover: hover) {
334 #quick-nav-ui a:hover {
335 color: #444;
336 box-shadow: 0 0 0 1px #ccc;
338 #quick-nav-ui a:focus:not(:hover) {
339 transform: none;
340 text-shadow: none;
344 /*======================*/
345 /* NEW COMMENT QUICKNAV */
346 /*======================*/
348 #new-comment-nav-ui .new-comments-count {
349 font-weight: 600;
350 color: #666;
352 #new-comment-nav-ui .new-comments-count::after {
353 font-weight: 600;
354 color: #666;
356 #new-comment-nav-ui .new-comment-sequential-nav-button {
357 color: #bbb;
359 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
360 color: #929292;
362 @media only screen and (hover: hover) {
363 #new-comment-nav-ui .new-comments-count:hover {
364 text-shadow:
365 0 0 1px #fff,
366 0 0 3px #fff,
367 0 0 5px #fff,
368 0 0 8px #fff,
369 0.5px 0.5px 0 #fff;
371 #new-comment-nav-ui .new-comment-sequential-nav-button:hover {
372 color: #444;
373 text-decoration: none;
375 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
376 color: #d00;
377 text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff;
381 /*=================*/
382 /* HNS DATE PICKER */
383 /*=================*/
385 #hns-date-picker span {
386 color: #666;
387 font-weight: 600;
389 #hns-date-picker input {
390 border: 1px solid #999;
391 background-color: transparent;
392 color: #666;
394 #hns-date-picker input:focus {
395 color: #000;
396 border: 1px solid #ccc;
399 /*====================*/
400 /* DARK MODE SELECTOR */
401 /*====================*/
403 #dark-mode-selector {
404 outline: 1px solid #ccc;
405 opacity: 0.5;
407 #dark-mode-selector button {
408 color: #ddd;
410 #dark-mode-selector button:hover {
411 color: #444;
413 #dark-mode-selector button.selected {
414 background-color: #ccc;
415 color: #777;
417 #dark-mode-selector button:not(.selected) + button:not(.selected) {
418 box-shadow: 1px 0 0 0 #ccc inset;
420 #dark-mode-selector button:disabled:hover {
421 text-shadow: none;
423 #dark-mode-selector button::after {
424 font-family: <?php echo $UI_font; ?>;
425 color: #ccc;
426 text-shadow: none;
427 font-weight: 300;
430 /*======================*/
431 /* TEXT SIZE ADJUSTMENT */
432 /*======================*/
434 #text-size-adjustment-ui button {
435 color: #ccc;
437 #text-size-adjustment-ui button.default {
438 font-weight: 600;
440 #text-size-adjustment-ui button:hover {
441 text-decoration: none;
442 color: #aaa;
444 #text-size-adjustment-ui::after {
445 color: #ccc;
446 font-weight: 300;
449 /*=============================*/
450 /* COMMENTS VIEW MODE SELECTOR */
451 /*=============================*/
453 #comments-view-mode-selector a {
454 color: #ccc;
457 /*==========*/
458 /* ARCHIVES */
459 /*==========*/
461 .archive-nav {
462 border: 1px solid #ccc;
464 .archive-nav div[class^='archive-nav-']:nth-of-type(2) *[class^='archive-nav-item'] {
465 border-top-width: 0;
466 border-bottom-width: 0;
468 .archive-nav div[class^='archive-nav-']:last-of-type *[class^='archive-nav-item'] {
469 border-bottom-width: 1px;
471 .archive-nav *[class^='archive-nav-item']:last-child {
472 border-right-width: 1px;
474 .archive-nav span[class^='archive-nav-item'] {
475 font-weight: bold;
478 .archive-nav span[class^="archive-nav-item"],
479 .archive-nav a:hover {
480 color: #ffb359;
481 box-shadow:
482 0 0 0 3px #888 inset,
483 0 0 0 4px #ccc inset,
484 0 0 0 5px #888 inset;
485 text-decoration: none;
487 .archive-nav span[class^="archive-nav-item"] {
488 font-weight: normal;
489 box-shadow:
490 0 0 0 1px #ccc inset,
491 0 0 0 3px #888 inset,
492 0 0 0 4px #ccc inset,
493 0 0 0 5px #888 inset;
495 .archive-nav a:active {
496 transform: scale(0.9);
498 .archive-nav a:focus:not(:hover) {
499 transform: none;
502 /*==========*/
503 /* LISTINGS */
504 /*==========*/
506 h1.listing {
507 margin: 0.7em 20px 0.1em 20px;
508 max-width: calc(100% - 40px);
509 font-family: <?php echo $UI_font; ?>, 'Font Awesome';
510 font-size: 1.5rem;
512 h1.listing .post-title-link {
513 font-family: <?php echo $text_font; ?>;
514 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '100' : '200'); ?>;
515 text-shadow:
516 0px 0px 1px #777,
517 0.5px 0.5px 1px #aaa,
518 0.5px 0.5px 1px #bbb;
520 h1.listing .link-post-link {
521 color: #aaa;
524 @media only screen and (hover: hover) {
525 h1.listing a:hover,
526 h1.listing a:focus {
527 background-color: rgba(136,136,136,0.85);
528 color: #f60;
529 text-shadow:
530 0px 0px 1px #777,
531 0.5px 0.5px 1px #aaa,
532 0.5px 0.5px 1px #bbb,
533 0 0 1px #f60,
534 0 0 2px #f60,
535 0 0 3px #f60;
537 h1.listing:focus-within::before {
538 color: #f60;
539 left: -0.625em;
540 top: 1px;
542 h1.listing .link-post-link:hover {
543 color: #4879ec;
544 text-shadow:
545 0.5px 0.5px 0 #fff,
546 -0.5px -0.5px 0 #fff,
547 0 0 2px #fff,
548 0 0 3px #00c;
552 h1.listing .edit-post-link {
553 padding: 10px 3px 30px 0.5em;
554 top: 0;
555 right: -1.5em;
557 h1.listing .edit-post-link:hover {
558 text-decoration: none;
560 #content.user-page h1.listing .edit-post-link {
561 background-color: #888;
564 /*======*/
565 /* SPAM */
566 /*======*/
568 h1.listing.spam {
569 opacity: 0.35;
571 h1.listing.spam + .post-meta {
572 opacity: 0.3;
574 h1.listing.spam:hover,
575 h1.listing.spam + .post-meta:hover,
576 h1.listing.spam:hover + .post-meta {
577 opacity: 1.0;
580 /*===================*/
581 /* LISTING POST-META */
582 /*===================*/
584 h1.listing + .post-meta > * {
585 color: #222;
586 font-size: 1em;
588 h1.listing + .post-meta .karma::after {
589 content: " by";
591 h1.listing + .post-meta .date::before {
592 content: "on ";
594 h1.listing + .post-meta .date::after {
595 content: " — ";
596 opacity: 0.5;
597 margin: 0 0.5em 0 0.125em;
599 h1.listing + .post-meta .comment-count.new-comments::before {
600 color: #0f0;
602 h1.listing:last-of-type + .post-meta {
603 margin-bottom: 0;
605 h1.listing + .post-meta .karma {
606 order: -1;
607 margin-right: 0.25em;
609 h1.listing + .post-meta .author {
610 margin-right: 0.25em;
612 h1.listing + .post-meta .date {
613 margin: 0;
615 h1.listing + .post-meta .post-section {
616 overflow: visible;
617 order: 2;
619 h1.listing + .post-meta .post-section::before {
620 font-size: 0.9375em;
621 left: -32px;
623 h1.listing + .post-meta .link-post-domain {
624 order: 1;
627 /*============*/
628 /* USER PAGES */
629 /*============*/
631 #content.user-page h1.page-main-heading {
632 border-bottom: 1px solid #777;
635 #content.user-page h1.listing,
636 #content.user-page h1.listing + .post-meta {
637 border-style: solid;
638 border-color: #666;
639 border-width: 0 0 0 1px;
640 box-shadow:
641 1.5px 0 1.5px -1.5px #bbb inset,
642 1px 0 1px -1px #777 inset;
644 #content.user-page h1.listing {
645 max-width: 100%;
646 margin: 1rem 0 0 0;
647 padding: 6px;
649 @media only screen and (hover: hover) {
650 #content.user-page h1.listing:focus-within::before {
651 left: -0.625em;
652 top: 8px;
655 #content.user-page h1.listing + .post-meta {
656 margin: 0 0 1rem 0;
657 padding: 0.5em 6px 6px 34px;
659 #content.user-page h1.listing + .post-meta .post-section::before {
660 left: 1px;
663 #content.conversations-user-page h1.listing {
664 padding: 6px 6px 4px 8px;
665 font-size: 1.5rem;
667 #content.conversations-user-page h1.listing + .post-meta {
668 padding: 6px 4px;
669 margin: 0 0 0.25rem 0;
671 #content.conversations-user-page h1.listing + .post-meta .date::after {
672 display: none;
675 .user-stats .karma-total {
676 font-weight: bold;
679 /*===============*/
680 /* CONVERSATIONS */
681 /*===============*/
683 #content.conversation-page h1.page-main-heading {
684 font-family: <?php echo $text_font; ?>;
685 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '100' : '200'); ?>;
686 color: #000;
687 text-shadow:
688 0px 0px 1px #777,
689 0.5px 0.5px 1px #aaa,
690 0.5px 0.5px 1px #bbb;
693 /*============*/
694 /* LOGIN PAGE */
695 /*============*/
697 .login-container h1 {
698 font-weight: 300;
701 /* “Create account” form */
703 #signup-form {
704 border: 1px solid #aaa;
707 /* Log in tip */
709 .login-container .login-tip {
710 border: 1px solid transparent;
713 /* Message box */
715 .error-box {
716 border: 1px solid red;
717 background-color: #faa;
719 .success-box {
720 border: 1px solid green;
721 background-color: #afa;
724 /*=====================*/
725 /* PASSWORD RESET PAGE */
726 /*=====================*/
728 .reset-password-container input[type='submit'] {
729 background-color: #e4e4e4;
730 border: 1px solid #ccc;
731 font-weight: 600;
734 /*===================*/
735 /* TABLE OF CONTENTS */
736 /*===================*/
738 .contents {
739 background-color: #888;
741 .contents-head {
742 font-weight: 300;
744 .body-text .contents ul {
745 font-size: 0.85em;
747 .body-text .contents li::before {
748 color: #999;
749 font-feature-settings: "tnum";
752 .contents .toc-collapse-toggle-button {
753 color: #777;
755 .contents .toc-collapse-toggle-button:hover {
756 color: #aaa;
757 text-shadow: <?php echo $white_glow; ?>;
760 /*=================*/
761 /* POST NAVIGATION */
762 /*=================*/
764 .post-nav-links a,
765 .post-nav-links a:visited {
766 color: #444;
767 font-weight: 300;
769 .post-nav-links a:hover {
770 text-decoration: none;
771 color: #ccc;
774 .post-nav-label {
775 opacity: 0.75;
778 @media only screen and (max-width: 900px) {
779 .sequence-title {
780 border-top: 1px solid #777;
782 .post-nav.prev {
783 border-right: 1px solid #777;
785 .post-nav.next {
786 border-left: 1px solid #777;
790 /*==================*/
791 /* POSTS & COMMENTS */
792 /*==================*/
794 .body-text {
795 font-family: <?php echo $text_font; ?>;
796 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '300' : '400'); ?>;
797 color: #000;
798 text-shadow:
799 0px 0px 1px #777,
800 0.5px 0.5px 1px #aaa,
801 0.5px 0.5px 1px #bbb;
803 .body-text strong {
804 font-weight: 500;
807 .body-text a:link {
808 color: inherit;
809 text-shadow:
810 0px 0px 1px #bd5984,
811 0.5px 0.5px 1px #f68a84,
812 0.5px 0.5px 1px #ff9b8c;
814 .body-text a:visited {
815 color: inherit;
816 text-shadow:
817 0px 0px 1px #a766dd,
818 0.5px 0.5px 1px #d9f,
819 0.5px 0.5px 1px #efa9ff;
821 .body-text a:hover {
822 color: #f60;
823 text-shadow:
824 0px 0px 1px #bd5984,
825 0.5px 0.5px 1px #f68a84,
826 0.5px 0.5px 1px #ff9b8c,
827 0px 0px 5px #f60;
830 h1.post-title {
831 margin: 1.1em 0 0.25em 0;
832 font-family: <?php echo $text_font; ?>;
833 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '100' : '200'); ?>;
834 color: #000;
835 font-size: 3em;
836 text-shadow:
837 0px 0px 1px #777,
838 0.5px 0.5px 1px #aaa,
839 0.5px 0.5px 1px #bbb;
842 .post-body {
843 font-size: 1.1875rem;
844 line-height: 1.6;
846 @media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 191dpi) {
847 .post-body {
848 font-size: 1.125rem;
851 .comment-body {
852 font-size: 1.125rem;
855 /*=======*/
856 /* POSTS */
857 /*=======*/
859 .bottom-post-meta {
860 border-color: #777;
863 /*===========*/
864 /* POST-META */
865 /*===========*/
867 .post-meta a,
868 .post-meta .date,
869 .crosspost {
870 color: #444;
873 .post-meta > *,
874 .crosspost {
875 text-shadow:
876 0px 0px 1px #777,
877 0.5px 0.5px 1px #aaa,
878 0.5px 0.5px 1px #bbb;
880 .post-meta > * {
881 margin: 0;
883 .post-meta .comment-count span,
884 .post-meta .read-time span,
885 .post-meta .word-count span,
886 .post-meta .lw2-link span {
887 display: none;
889 .post-meta .comment-count::before,
890 .post-meta .read-time::before,
891 .post-meta .word-count::before,
892 .post-meta .lw2-link::before {
893 font-family: Font Awesome;
894 margin: 0 0.25em 0 0;
895 font-size: 0.875em;
896 color: #666;
898 .post-meta .comment-count {
899 margin: 0 0.25em 0 0;
901 .post-meta .read-time,
902 .post-meta .word-count,
903 .post-meta .lw2-link {
904 margin: 0 0.25em 0 0.5em;
906 .post-meta .comment-count:hover,
907 .post-meta .lw2-link:hover {
908 text-decoration: none;
909 text-shadow:
910 0 0 0.5px #000,
911 0 0 1px #fff,
912 0 0 8px #000;
914 .post-meta .comment-count:hover::before,
915 .post-meta .lw2-link:hover::before,
916 .post-meta .read-time:hover::before {
917 color: #ccc;
919 .post-meta .read-time:hover::before {
920 cursor: pointer;
922 .post-meta .comment-count::before {
923 content: "\F086";
925 .post-meta .read-time::before {
926 content: "\F017";
928 .post-meta .read-time::after {
929 content: " min";
931 .post-meta .word-count::before {
932 content: "\F15C";
934 .post-meta .word-count::after {
935 content: "";
937 .post-meta .lw2-link::before {
938 content: "\F0C1";
939 font-weight: 900;
940 font-size: 0.75em;
941 position: relative;
942 bottom: 1px;
945 .post .post-meta .author {
946 margin: 0 0.75em 0 0;
948 .post-meta .author:hover,
949 .comment-meta .author:hover {
950 text-decoration: none;
951 color: #090;
953 .post .post-meta .comment-count {
954 margin: 0 0.5em;
956 .post .post-meta .lw2-link {
957 margin: 0 1em 0 0.5em;
959 .post .post-meta .voting-controls {
960 margin: 0 0.5em 0 1em;
963 .post-meta .post-section::before,
964 .comment-meta .alignment-forum {
965 color: #888;
966 text-shadow:
967 1px 1px 0 #ccc,
968 0 1px 0 #ccc,
969 0 0 5px #ccc;
971 a.post-section:hover {
972 text-decoration: none;
974 a.post-section:hover::before {
975 color: #999;
977 .post-meta .post-section.alignment-forum::before {
978 text-shadow:
979 1px 1px 0 #b9bbff,
980 0 1px 0 #b9bbff,
981 0 0 5px #b9bbff;
983 a.post-section.alignment-forum:hover::before {
984 color: #9093d4;
987 /*============*/
988 /* LINK POSTS */
989 /*============*/
991 .post.link-post a.link-post-link {
992 text-decoration: none;
993 font-family: <?php echo $UI_font; ?>;
994 font-weight: 600;
996 .post.link-post a.link-post-link:hover {
997 color: #f60;
999 .post.link-post a.link-post-link:hover::before {
1000 color: #4879ec;
1001 text-shadow:
1002 0.5px 0.5px 0 #fff,
1003 -0.5px -0.5px 0 #fff,
1004 0 0 2px #fff,
1005 0 0 3px #00c;
1007 .post.link-post a.link-post-link:focus {
1008 color: #f60;
1009 border-bottom: 2px dotted #f60;
1010 text-shadow:
1011 0px 0px 1px #777,
1012 0.5px 0.5px 1px #aaa,
1013 0.5px 0.5px 1px #bbb,
1014 0 0 1px #f60,
1015 0 0 2px #f60,
1016 0 0 3px #f60;
1019 /*==========*/
1020 /* COMMENTS */
1021 /*==========*/
1023 .comments::before {
1024 border-top: 1px solid #666;
1025 box-shadow:
1026 0 1.5px 1.5px -1.5px #bbb inset,
1027 0 1px 1px -1px #777 inset;
1030 #content > .comment-thread .comment-meta a.date:focus,
1031 #content > .comment-thread .comment-meta a.permalink:focus {
1032 color: #ccc;
1033 outline: 2px dotted #ccc;
1034 position: relative;
1035 background-color: #444;
1037 #content > .comment-thread .comment-meta a.date:focus {
1038 padding: 0 6px;
1039 left: -6px;
1041 #content > .comment-thread .comment-meta a.date:focus + * {
1042 margin-left: -12px;
1044 #content > .comment-thread .comment-meta a.permalink:focus {
1045 padding: 0 5px;
1046 left: -5px;
1048 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1049 margin-left: -10px;
1051 .comment-item {
1052 border: 1px solid transparent;
1053 border-left-color: #666;
1054 box-shadow:
1055 1.5px 0 1.5px -1.5px #bbb inset,
1056 1px 0 1px -1px #777 inset;
1058 @-moz-document url-prefix() {
1059 .comment-item {
1060 box-shadow:
1061 1.5px 0 1.5px -1px #bbb inset,
1062 1px 0 1px -1px #777 inset;
1066 a.comment-parent-link::after {
1067 display: none;
1069 a.comment-parent-link::before {
1070 padding: 2px 3px 0 4px;
1073 /*================================*/
1074 /* DEEP COMMENT THREAD COLLAPSING */
1075 /*================================*/
1077 .comment-item input[id^="expand"] + label::after {
1078 color: <?php echo $hyperlink_color; ?>;
1079 font-weight: 600;
1081 .comment-item input[id^="expand"] + label:hover::after {
1082 color: #c00;
1084 .comment-item input[id^="expand"] + label:active::after,
1085 .comment-item input[id^="expand"] + label:focus::after{
1086 color: #c00;
1088 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
1089 border-width: 1px 0 0 0;
1092 /*==============*/
1093 /* COMMENT-META */
1094 /*==============*/
1096 .comment-meta a {
1097 color: #222;
1099 .comment-meta .author {
1100 font-weight: 300;
1101 font-size: 1.125em;
1102 color: #444;
1103 font-weight: normal;
1105 .comment-item .author:not(.redacted).original-poster::after {
1106 opacity: 0.8;
1109 .comment-item .voting-controls.active-controls::after,
1110 .comment-item .voting-controls .karma-value::after,
1111 .post .voting-controls.active-controls::after,
1112 .post .voting-controls .karma-value::after,
1113 .author::before {
1114 background-color: #888;
1115 color: #ccc;
1116 border-radius: 4px;
1117 box-shadow: 0 0 0 1px #bbb inset;
1119 .comment-item .voting-controls.active-controls::after,
1120 .post .voting-controls.active-controls::after {
1121 padding: 6px;
1122 bottom: -46px;
1124 .comment-item .voting-controls .karma-value::after,
1125 .post .voting-controls .karma-value::after {
1126 padding: 2px 8px;
1127 top: -28px;
1128 min-width: 64px;
1131 /*====================*/
1132 /* ANTI-KIBITZER MODE */
1133 /*====================*/
1135 .author.redacted,
1136 .inline-author.redacted {
1137 opacity: 0.8;
1138 font-weight: 300;
1141 .karma-value.redacted {
1142 opacity: 0.6;
1145 .link-post-domain.redacted {
1146 opacity: 0.6;
1149 /*===========================*/
1150 /* COMMENT THREAD NAVIGATION */
1151 /*===========================*/
1153 div.comment-parent-link {
1154 font-weight: 400;
1156 a.comment-parent-link {
1157 font-weight: 300;
1159 a.comment-parent-link::before {
1160 color: #666;
1162 a.comment-parent-link:hover::before {
1163 color: #aaa;
1166 div.comment-child-links {
1167 font-weight: 400;
1169 div.comment-child-links a {
1170 font-weight: 300;
1172 .comment-child-link::before {
1173 color: #666;
1176 .comment-item-highlight {
1177 box-shadow:
1178 0 0 2px #e7b200,
1179 0 0 3px #e7b200,
1180 0 0 5px #e7b200,
1181 0 0 7px #e7b200,
1182 0 0 10px #e7b200;
1183 border: 1px solid #e7b200;
1185 .comment-item-highlight-faint {
1186 box-shadow:
1187 0 0 2px #f8e7b5,
1188 0 0 3px #f8e7b5,
1189 0 0 5px #f8e7b5,
1190 0 0 7px #f8e7b5,
1191 0 0 10px #f8e7b5;
1192 border: 1px solid #f8e7b5;
1195 .comment-popup {
1196 background-color: #949494;
1199 /*=======================*/
1200 /* COMMENTS COMPACT VIEW */
1201 /*=======================*/
1203 #comments-list-mode-selector button {
1204 box-shadow:
1205 0 0 0 4px #888 inset,
1206 0 0 0 5px #ccc inset;
1208 #comments-list-mode-selector button:hover,
1209 #comments-list-mode-selector button.selected {
1210 box-shadow:
1211 0 0 0 1px #888 inset,
1212 0 0 0 2px #ccc inset,
1213 0 0 0 4px #888 inset,
1214 0 0 0 5px #ccc inset;
1216 #content.compact > .comment-thread .comment-item::after {
1217 color: #ccc;
1218 background: linear-gradient(to right, transparent 0%, #888 50%, #888 100%);
1221 @media only screen and (hover: hover) {
1222 #content.compact > .comment-thread .comment-item:hover .comment,
1223 #content.compact > .comment-thread .comment-item.expanded .comment {
1224 background-color: #999;
1225 outline: 3px solid #ccc;
1227 #content.compact > .comment-thread .comment-item:hover .comment::before,
1228 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1229 background-color: #999;
1230 box-shadow:
1231 0 0 3px #999,
1232 0 0 5px #999,
1233 0 0 7px #999,
1234 0 0 10px #999,
1235 0 0 20px #999,
1236 0 0 30px #999,
1237 0 0 40px #999;
1240 @media only screen and (hover: none) {
1241 #content.compact > .comment-thread.expanded .comment-item .comment {
1242 background-color: #999;
1243 outline: 3px solid #ccc;
1245 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1246 background-color: #999;
1247 box-shadow:
1248 0 0 3px #999,
1249 0 0 5px #999,
1250 0 0 7px #999,
1251 0 0 10px #999,
1252 0 0 20px #999,
1253 0 0 30px #999,
1254 0 0 40px #999;
1258 #content.user-page.compact > h1.listing {
1259 margin-top: 0.5rem;
1261 #content.user-page.compact > h1.listing + .post-meta {
1262 margin-bottom: 0.5rem;
1265 /*===========================*/
1266 /* HIGHLIGHTING NEW COMMENTS */
1267 /*===========================*/
1269 .new-comment::before {
1270 display: none;
1272 .new-comment {
1273 border: 1px solid #e00;
1274 box-shadow:
1275 0 0 1px #f00,
1276 0 0 1px #f00 inset;
1279 /*=================================*/
1280 /* COMMENT THREAD MINIMIZE BUTTONS */
1281 /*=================================*/
1283 .comment-minimize-button {
1284 color: #777;
1286 .comment-minimize-button:hover {
1287 color: #aaa;
1288 text-shadow: <?php echo $white_glow; ?>;
1290 .comment-minimize-button::after {
1291 font-family: <?php echo $UI_font; ?>;
1292 color: #777;
1294 .comment-minimize-button.maximized::after {
1295 color: #ccc;
1298 /*====================*/
1299 /* COMMENT PERMALINKS */
1300 /*====================*/
1301 /*==================*/
1302 /* COMMENT LW LINKS */
1303 /*==================*/
1305 .comment-meta .permalink::before,
1306 .comment-meta .lw2-link::before,
1307 .individual-thread-page a.comment-parent-link:empty::before {
1308 opacity: 1.0;
1309 filter: saturate(10%) contrast(20%);
1312 /*=================================*/
1313 /* INDIVIDUAL COMMENT THREAD PAGES */
1314 /*=================================*/
1316 .individual-thread-page > h1 {
1317 font-family: <?php echo $text_font; ?>;
1318 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '200' : '300'); ?>;
1321 /*==============*/
1322 /* VOTE BUTTONS */
1323 /*==============*/
1325 .vote {
1326 position: relative;
1328 .vote::before {
1329 position: relative;
1330 z-index: 1;
1332 .vote::after {
1333 position: absolute;
1336 .karma .upvote::before {
1337 content: "\F077";
1338 top: 1px;
1340 .karma .downvote::before {
1341 content: "\F078";
1342 left: -2px;
1344 .karma .upvote::after {
1345 content: "\F325";
1346 left: 6px;
1347 bottom: 4px;
1349 .karma .downvote::after {
1350 content: "\F322";
1351 left: 4px;
1352 top: 4px;
1354 @-moz-document url-prefix() {
1355 .karma .upvote::after {
1356 left: 4px;
1357 bottom: 4px;
1359 .karma .downvote::after {
1360 left: 2px;
1361 top: 5px;
1365 .agreement .upvote::before {
1366 content: "\F00C";
1367 top: 1px;
1369 .agreement .downvote::before {
1370 content: "\F00D";
1371 left: -2px;
1373 .agreement .upvote::after {
1374 content: "\F560";
1375 left: 6px;
1376 bottom: 2px;
1378 .agreement .downvote::after {
1379 content: "\E59B";
1380 left: 2px;
1381 top: 1px;
1383 @-moz-document url-prefix() {
1384 .agreement .upvote::after {
1385 left: 4px;
1386 bottom: 2px;
1388 .agreement .downvote::after {
1389 left: 0;
1390 top: 1px;
1394 /**********/
1395 /* States.
1398 /* _ 1
1400 .vote {
1401 color: #666;
1404 /* _ 2
1406 .upvote:hover,
1407 .upvote:not(.none) {
1408 color: var(--GW-upvote-button-color);
1409 text-shadow:
1410 0 0 0.5px #fff,
1411 0 0 8px #0f0;
1413 .downvote:hover,
1414 .downvote:not(.none) {
1415 color: var(--GW-downvote-button-color);
1416 text-shadow:
1417 0 0 0.5px #fff,
1418 0 0 8px #f00;
1421 /* 0 _
1423 .vote::after {
1424 visibility: hidden;
1427 /* 1,2 _
1429 .vote.two-temp::after,
1430 .vote.two::after {
1431 visibility: visible;
1434 /* 1 _
1436 .vote.two-temp::after {
1437 color: #666;
1438 text-shadow: none;
1441 /* Disabled.
1443 .vote:disabled {
1444 visibility: unset;
1445 color: #808080;
1447 .vote:disabled:hover {
1448 text-shadow: none;
1451 /*===========================*/
1452 /* COMMENTING AND POSTING UI */
1453 /*===========================*/
1455 .comment-controls .cancel-comment-button {
1456 font-weight: normal;
1457 color: #f00;
1459 .comment-controls .cancel-comment-button:hover {
1460 color: #f00;
1461 text-shadow: <?php echo $white_glow; ?>;
1464 .posting-controls .action-button,
1465 .posting-controls input[type='submit'] {
1466 font-weight: normal;
1468 .posting-controls .action-button:hover,
1469 .posting-controls input[type='submit']:hover {
1470 text-decoration: underline;
1471 color: #444;
1474 .comment-controls .delete-button,
1475 .comment-controls .retract-button {
1476 color: #900;
1478 .comment-controls .edit-button,
1479 .comment-controls .unretract-button {
1480 color: #070;
1482 .comment-controls .action-button:hover {
1483 color: #bbb;
1484 text-decoration: none;
1487 .edit-post-link,
1488 .edit-post-link:visited {
1489 color: #090;
1492 .posting-controls textarea {
1493 font-weight: 300;
1494 font-family: <?php echo $text_font; ?>;
1495 color: #000;
1496 background-color: transparent;
1497 border-color: #999;
1498 text-shadow:
1499 0px 0px 1px #777,
1500 0.5px 0.5px 1px #aaa,
1501 0.5px 0.5px 1px #bbb;
1503 @-moz-document url-prefix() {
1504 .posting-controls textarea {
1505 font-weight: <?php global $platform; echo ($platform == 'Windows' ? '300' : '400'); ?>;
1508 .posting-controls textarea:focus {
1509 border-color: #ccc;
1512 /*= Scroll bars =*/
1514 .posting-controls textarea::-webkit-scrollbar,
1515 .textarea-container .autocomplete-container::-webkit-scrollbar {
1516 width: 16px;
1517 background-color: transparent;
1519 .posting-controls textarea::-webkit-scrollbar-track {
1520 border-left: 1px solid #999;
1522 .posting-controls textarea:focus::-webkit-scrollbar-track,
1523 .textarea-container .autocomplete-container::-webkit-scrollbar-track {
1524 border-left: 1px solid #bbb;
1526 .posting-controls textarea::-webkit-scrollbar-thumb {
1527 background-color: #999;
1528 box-shadow: 0 0 0 1px #888 inset;
1529 border-left: 1px solid #999;
1531 .posting-controls textarea:focus::-webkit-scrollbar-thumb,
1532 .textarea-container .autocomplete-container::-webkit-scrollbar-thumb {
1533 border-left: 1px solid #bbb;
1534 background-color: #ccc;
1535 box-shadow: 0 0 0 1px #888 inset;
1538 /* GUIEdit buttons */
1540 .guiedit-buttons-container {
1541 background-color: #888;
1542 box-shadow: 0 -1px 0 0 #999 inset;
1544 .textarea-container:focus-within .guiedit-buttons-container {
1545 box-shadow: 0 -1px 0 0 #ccc inset;
1548 button.guiedit {
1549 color: #444;
1550 background-color: transparent;
1551 font-family: Font Awesome, Source Sans Pro, Trebuchet MS, Helvetica, Arial, Verdana, sans-serif;
1553 button.guiedit::after {
1554 font-family: Proxima Nova;
1555 font-weight: 300;
1556 color: #444;
1557 top: 2px;
1558 height: 25px;
1560 button.guiedit:hover {
1561 color: #ccc;
1564 /* Markdown hints */
1566 #markdown-hints-checkbox + label {
1567 color: #444;
1569 #markdown-hints-checkbox + label:hover {
1570 text-decoration: underline;
1572 #markdown-hints {
1573 background-color: #888;
1574 border: 1px solid #ccc;
1577 /*================*/
1578 /* EDIT POST FORM */
1579 /*================*/
1581 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1582 border-radius: 3px;
1583 border: 1px solid #999;
1584 color: #aaa;
1586 @media only screen and (hover:hover) {
1587 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1588 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1589 text-decoration: underline;
1591 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1592 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1593 border-color: #ccc;
1596 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1597 content: "\F00C";
1599 #edit-post-form input[type='radio'] + label {
1600 color: #444;
1601 border-color: #999;
1603 #edit-post-form input[type='radio'][value='all'] + label {
1604 border-radius: 8px 0 0 8px;
1605 border-width: 1px;
1607 #edit-post-form input[type='radio'][value='drafts'] + label {
1608 border-radius: 0 8px 8px 0;
1610 #edit-post-form input[type='radio'] + label:hover,
1611 #edit-post-form input[type='radio']:focus + label,
1612 #edit-post-form input[type='radio']:checked + label {
1613 background-color: #999;
1615 #edit-post-form input[type='radio'] + label:hover,
1616 #edit-post-form input[type='radio']:focus + label {
1617 color: #000;
1619 #edit-post-form input[type='radio']:active + label,
1620 #edit-post-form input[type='radio']:checked + label {
1621 color: #fff;
1624 /*=======*/
1625 /* LINKS */
1626 /*=======*/
1629 text-decoration: none;
1630 color: <?php echo $hyperlink_color; ?>;
1632 a:hover {
1633 text-decoration: underline;
1636 /*=========*/
1637 /* BUTTONS */
1638 /*=========*/
1640 button,
1641 input[type='submit'] {
1642 color: #444;
1643 font-weight: normal;
1646 .button,
1647 .button:visited {
1648 color: #444;
1651 button:hover,
1652 input[type='submit']:hover,
1653 button:focus,
1654 input[type='submit']:focus {
1655 color: #aaa;
1657 input[type='submit']:hover,
1658 input[type='submit']:focus {
1659 text-decoration: underline;
1661 button:active,
1662 input[type='submit']:active {
1663 color: #ccc;
1664 transform: scale(0.9);
1666 .button:hover {
1667 color: #aaa;
1669 .button:active {
1670 transform: scale(0.9);
1672 .button:focus:not(:hover) {
1673 transform: none;
1675 @-moz-document url-prefix() {
1676 .button:active {
1677 transform: none;
1681 /*==========*/
1682 /* HEADINGS */
1683 /*==========*/
1685 .body-text h1,
1686 .body-text h2,
1687 .body-text h3,
1688 .body-text h4,
1689 .body-text h5,
1690 .body-text h6 {
1691 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '100' : '200'); ?>;
1692 text-shadow:
1693 0px 0px 1px #777,
1694 0.5px 0.5px 1px #aaa,
1695 0.5px 0.5px 1px #bbb;
1697 .post-body h1 strong,
1698 .post-body h2 strong,
1699 .post-body h3 strong,
1700 .post-body h4 strong,
1701 .post-body h5 strong,
1702 .post-body h6 strong {
1703 font-weight: normal;
1705 .body-text h6 {
1706 color: #555;
1708 .body-text h1 {
1709 padding-bottom: 2px;
1710 border-bottom-color: #777;
1712 .post-body h2 {
1713 border-bottom: 1px dotted #ccc;
1716 /*========*/
1717 /* QUOTES */
1718 /*========*/
1720 blockquote {
1721 border-left: 5px solid #777;
1724 /*========*/
1725 /* IMAGES */
1726 /*========*/
1728 #content img,
1729 #content figure.image img {
1730 border: 1px solid #666;
1732 #content figure img {
1733 border: 1px solid #000;
1735 #content img[src$='.svg'],
1736 #content figure img[src$='.svg'] {
1737 border: none;
1739 #content img[style^='float'] {
1740 border: 1px solid transparent;
1743 /*========*/
1744 /* TABLES */
1745 /*========*/
1747 #content:not(.tag-index-page) .body-text table,
1748 #content:not(.tag-index-page) .body-text table th,
1749 #content:not(.tag-index-page) .body-text table td {
1750 border: 1px solid #ccc;
1753 /*======*/
1754 /* MISC */
1755 /*======*/
1757 hr {
1758 border-bottom: 1px solid #999;
1761 code,
1762 pre {
1763 font-family: 'Tired of Courier', Courier, Courier New, monospace;
1764 font-size: 0.9375em;
1767 pre {
1768 border: 1px solid #444;
1769 box-shadow:
1770 0px 0px 1px #777,
1771 1px 1px 1px #aaa inset,
1772 1px 1px 1px #bbb;
1775 input[type='text'],
1776 input[type='search'],
1777 input[type='password'] {
1778 border: 1px solid #999;
1779 color: #000;
1780 background-color: transparent;
1782 input[type='text']:focus,
1783 input[type='search']:focus,
1784 input[type='password']:focus {
1785 border: 1px solid #ccc;
1788 select {
1789 color: #000;
1792 .frac {
1793 padding-left: 2px;
1794 font-feature-settings: 'lnum';
1795 font-size: 0.95em;
1797 .frac sup {
1798 position: relative;
1799 left: -1px;
1801 .frac sub {
1802 position: relative;
1803 left: -0.5px;
1806 .body-text *::selection,
1807 textarea::selection,
1808 input::selection {
1809 background-color: #d8d8d8;
1812 /*============*/
1813 /* ABOUT PAGE */
1814 /*============*/
1816 .about-page mark {
1817 background-color: #e6e6e6;
1818 text-decoration: none;
1819 box-shadow:
1820 0 -1px 0 0 #000 inset,
1821 0 -3px 1px -2px #000 inset;
1822 padding: 0 1px;
1825 #content.about-page .accesskey-table {
1826 font-family: <?php echo $UI_font; ?>;
1827 border-color: #ddd;
1830 #content.about-page img {
1831 border: 1px solid #000;
1834 /*========================*/
1835 /* QUALIFIED HYPERLINKING */
1836 /*========================*/
1838 #aux-about-link a {
1839 color: #444;
1841 #aux-about-link a:hover {
1842 opacity: 1.0;
1843 text-shadow: <?php echo $white_glow; ?>;
1846 .qualified-linking label:hover {
1847 text-shadow: <?php echo $white_glow; ?>;
1850 .qualified-linking-toolbar {
1851 border: 1px solid #000;
1852 background-color: #777;
1854 .qualified-linking-toolbar a {
1855 border: 1px solid #888;
1856 border-radius: 4px;
1857 color: #444;
1859 .qualified-linking-toolbar a:hover {
1860 border: 1px solid #999;
1861 text-decoration: none;
1862 text-shadow: <?php echo $white_glow; ?>;
1864 .qualified-linking label::after {
1865 background-color: #888;
1866 opacity: 0.8;
1869 /*======*/
1870 /* MATH */
1871 /*======*/
1873 .mathjax-block-container::-webkit-scrollbar {
1874 height: 12px;
1875 background-color: #f6f6ff;
1876 border-radius: 6px;
1877 border: 1px solid #ddf;
1879 .mathjax-block-container::-webkit-scrollbar-thumb {
1880 background-color: #dde;
1881 border-radius: 6px;
1882 border: 1px solid #cce;
1884 .mathjax-inline-container::-webkit-scrollbar {
1885 height: 8px;
1886 background-color: #f6f6ff;
1887 border-radius: 4px;
1888 border: 1px solid #ddf;
1890 .mathjax-inline-container::-webkit-scrollbar-thumb {
1891 background-color: #dde;
1892 border-radius: 4px;
1893 border: 1px solid #cce;
1897 /*===============*/
1898 /* USER MENTIONS */
1899 /*===============*/
1901 .textarea-container .autocomplete-container {
1902 background-color: rgba(136, 136, 136, 0.75);
1903 border: 1px solid rgba(204, 204, 204, 0.75);
1906 .textarea-container .autocomplete-container div.highlighted {
1907 background-color: rgba(204, 204, 204, 0.75);
1908 color: #fff;
1911 .textarea-container .autocomplete-container div:not(.highlighted):hover {
1912 background-color: rgba(204, 204, 204, 0.25);
1916 /*=================*/
1917 /* ALIGNMENT FORUM */
1918 /*=================*/
1920 #content.alignment-forum-index-page::before {
1921 background-color: #878a9f;
1923 #content.alignment-forum-index-page::after {
1924 font-family: "Concourse SmallCaps";
1925 font-weight: 600;
1926 background-color: #222d4b;
1927 color: transparent;
1928 -webkit-background-clip: text;
1929 text-shadow:
1930 rgba(136,136,136,0.5) 0px 3px 3px;
1932 @media only screen and (hover: hover) {
1933 #content.alignment-forum-index-page h1.listing a:hover,
1934 #content.alignment-forum-index-page h1.listing a:focus {
1935 background-color: rgba(135,138,159,0.85);
1939 /*====================*/
1940 /* FOR NARROW SCREENS */
1941 /*====================*/
1943 @media only screen and (max-width: 1440px) {
1944 #hns-date-picker {
1945 background-color: #888;
1946 bottom: 61px;
1947 opacity: 1.0;
1948 right: -77px;
1950 #hns-date-picker::before {
1951 display: none;
1954 @media only screen and (max-width: 1160px) {
1955 #hns-date-picker {
1956 bottom: 204px;
1957 right: -30px;
1959 #theme-tweaker-toggle {
1960 left: -19px;
1962 #quick-nav-ui,
1963 #new-comment-nav-ui,
1964 #new-comment-nav-ui + #hns-date-picker {
1965 opacity: 1.0;
1968 @media only screen and (max-width: 1080px) {
1969 #text-size-adjustment-ui button {
1970 border: 1px solid #999;
1971 padding: 0 0 0 1px;
1972 border-radius: 50%;
1973 box-shadow:
1974 0 0 6px #999 inset,
1975 0 0 0 1px transparent;
1977 #hns-date-picker {
1978 right: -18px;
1981 @media only screen and (max-width: 1040px) {
1982 #hns-date-picker {
1983 right: -13px;
1986 @media only screen and (max-width: 1020px) {
1987 #hns-date-picker {
1988 right: 15px;
1992 /*========*/
1993 /* MOBILE */
1994 /*========*/
1996 /*******************************************/
1997 @media only screen and (max-width: 1160px) {
1998 /*******************************************/
2000 #ui-elements-container > div[id$='-ui-toggle'] button,
2001 #theme-selector .theme-selector-close-button {
2002 color: #444;
2003 text-shadow:
2004 0 0 1px #999,
2005 0 0 3px #999,
2006 0 0 5px #999,
2007 0 0 10px #999,
2008 0 0 20px #999,
2009 0 0 30px #999;
2012 #theme-selector {
2013 background-color: #888;
2014 box-shadow:
2015 0 0 0 1px #444,
2016 0 0 1px 3px #999,
2017 0 0 3px 3px #999,
2018 0 0 5px 3px #999,
2019 0 0 10px 3px #999,
2020 0 0 20px 3px #999;
2021 border-radius: 12px;
2023 #theme-selector::before {
2024 color: #222;
2025 font-weight: 300;
2026 text-shadow:
2027 0px 0px 1px #777,
2028 0.5px 0.5px 1px #aaa,
2029 0.5px 0.5px 1px #bbb;
2031 #theme-selector button {
2032 border-radius: 10px;
2034 #theme-selector button::after {
2035 color: #444;
2036 max-width: calc(100% - 3.5em);
2037 overflow: hidden;
2038 text-overflow: ellipsis;
2040 #theme-selector button.selected::after {
2041 color: #000;
2042 text-shadow:
2043 0 -1px 0 #fff,
2044 0 0.5px 0.5px #000;
2047 #theme-selector .auxiliary-controls-container {
2048 border-top-color: #444;
2050 #theme-selector .auxiliary-controls-container button {
2051 border: 1px solid #444;
2053 #theme-selector .auxiliary-controls-container #theme-tweaker-toggle button {
2054 color: #444;
2056 #theme-selector #anti-kibitzer-toggle button::before,
2057 #theme-selector #anti-kibitzer-toggle button::after {
2058 background-color: #000;
2060 #theme-selector #dark-mode-selector {
2061 border: 1px solid #444;
2063 #theme-selector #dark-mode-selector button {
2064 color: #444;
2066 #theme-selector #dark-mode-selector button.selected {
2067 color: #aaa;
2068 background-color: #444;
2069 border-radius: 8px;
2070 box-shadow: 0 0 2px 0 #444;
2073 #quick-nav-ui {
2074 background-color: #999;
2076 #quick-nav-ui a {
2077 background-color: #888;
2078 box-shadow: 0 0 0 1px #444;
2079 color: #444;
2081 #quick-nav-ui,
2082 #new-comment-nav-ui,
2083 #hns-date-picker {
2084 box-shadow:
2085 0 0 1px 3px #999,
2086 0 0 3px 3px #999,
2087 0 0 5px 3px #999,
2088 0 0 10px 3px #999,
2089 0 0 20px 3px #999;
2091 #quick-nav-ui a::after,
2092 #new-comment-nav-ui::before {
2093 font-family: <?php echo $UI_font; ?>;
2094 font-weight: bold;
2095 box-shadow:
2096 0 0 1px 0 #999,
2097 0 0 3px 0 #999,
2098 0 0 5px 0 #999;
2099 background-color: #999;
2100 border-radius: 4px;
2102 #quick-nav-ui,
2103 #new-comment-nav-ui {
2104 border-radius: 8px;
2106 #new-comment-nav-ui {
2107 background-color: #888;
2108 border: 1px solid #444;
2110 #new-comment-nav-ui::before {
2111 color: #444;
2112 font-weight: bold;
2114 #new-comment-nav-ui .new-comments-count,
2115 #new-comment-nav-ui .new-comments-count::after {
2116 color: #444;
2118 #new-comment-nav-ui .new-comment-sequential-nav-button {
2119 box-shadow: 0 0 0 1px #444;
2120 color: #444;
2122 #new-comment-nav-ui .new-comments-count {
2123 background-color: inherit;
2124 box-shadow: 0 -1px 0 0 #444;
2126 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2127 color: #999;
2129 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2130 border-radius: 7px 0 0 7px;
2132 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2133 border-radius: 0 7px 7px 0;
2135 #new-comment-nav-ui button::after {
2136 font-family: <?php echo $UI_font; ?>;
2139 #hns-date-picker.engaged {
2140 bottom: 124px;
2141 right: 61px;
2142 border: 1px solid #444;
2144 #hns-date-picker span,
2145 #hns-date-picker input {
2146 color: #444;
2149 /*****************************************/
2150 @media only screen and (max-width: 900px) {
2151 /*****************************************/
2152 h1.listing + .post-meta .post-section::before {
2153 position: unset;
2156 .nav-bar-top:not(#primary-bar) .nav-inner {
2157 font-size: 1em;
2159 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2160 padding: 6px 10px;
2163 .active-bar {
2164 margin: 0 -4px;
2167 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
2168 background-color: #ccc;
2171 .comment-item .comment-item {
2172 margin: 0.75em 0 4px 6px;
2174 .comment-item .comment-item + .comment-item {
2175 margin: 1.5em 0 4px 6px;
2178 .comment-controls .cancel-comment-button::before {
2179 text-shadow:
2180 0 0 1px #fff,
2181 0 0 3px #fff;
2184 .sublevel-nav:not(.sort) .sublevel-item,
2185 .sublevel-nav:not(.sort) .sublevel-item:first-child,
2186 .sublevel-nav:not(.sort) .sublevel-item:last-child {
2187 border-radius: 8px;
2188 border-width: 1px;
2189 margin: 2px;
2191 /*****************************************/
2192 } @media only screen and (max-width: 720px) {
2193 /*****************************************/
2194 /*******************************************/
2195 } @media only screen and (max-width: 520px) {
2196 /*******************************************/
2197 h1.listing {
2198 font-size: 1.25rem;
2199 margin: 18px 6px 4px 6px;
2200 max-width: calc(100% - 12px);
2202 h1.listing + .post-meta {
2203 margin: 4px 6px;
2205 h1.listing + .post-meta > * {
2206 line-height: 1.5;
2208 h1.listing .link-post-link {
2209 top: 3px;
2212 #content.compact > .comment-thread .comment-item {
2213 max-height: 105px;
2216 .textarea-container:focus-within textarea {
2217 background-color: #888;
2219 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
2220 border: 1px solid transparent;
2221 padding: 6px;
2223 .textarea-container:focus-within .guiedit-mobile-help-button.active {
2224 box-shadow:
2225 0 0 0 1px #ccc,
2226 0 0 0 2px #888,
2227 0 0 0 3px #ccc;
2228 color: #ccc;
2229 font-weight: 600;
2231 .textarea-container:focus-within .guiedit-buttons-container {
2232 background-color: #888;
2233 border-top: 1px solid #ddf;
2235 #content.conversation-page .textarea-container:focus-within::after {
2236 background-color: #888;
2238 .textarea-container:focus-within button.guiedit {
2239 border: 1px solid transparent;
2241 #markdown-hints::after {
2242 color: #0f0;
2245 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2246 top: 2px;
2248 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2249 top: 1px;