2 $UI_font = "'Concourse', 'a_Avante', Arial, 'GW-Symbols', sans-serif";
3 $UI_font_smallcaps = "'Concourse Smallcaps', 'a_Avante', Arial, sans-serif";
4 $text_font = "'Source Sans Pro', 'Trebuchet MS', 'Helvetica', 'Arial', 'Verdana', sans-serif";
5 $hyperlink_color = "#f60";
6 $white_glow = "0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff";
20 --GW
-comment
-background
-color
-odd
: #eee;
21 --GW
-comment
-background
-color
-even
: #fff;
22 --GW
-comment
-background
-color
-target
: #ffd;
31 background
-color
: #eee;
32 font
-family
: <?php
echo $UI_font; ?
>;
33 font
-feature
-settings
: 'ss07';
39 background
-color
: #fff;
40 box
-shadow
: 0px
0px
10px
#bbb;
50 padding
: 11px
30px
13px
30px
;
52 .nav
-current
.nav
-inner
{
55 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
58 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
61 @media only screen
and (min
-width
: 901px
) {
62 .nav
-bar
.top
:not(#primary-bar) #nav-item-sequences .nav-inner {
67 #bottom-bar.decorative::before,
68 #bottom-bar.decorative::after {
72 padding
: 0.25em
0 1em
0;
74 #bottom-bar.decorative::before {
77 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
78 background
-repeat
: repeat
-x
;
79 background
-position
: center
35%
;
82 #bottom-bar.decorative::after {
88 background
-color
: #fff;
92 <?php
fit_content("#bottom-bar.decorative::after"); ?
>
94 .nav
-bar
.nav
-item
:not(.nav
-current
):not(#nav-item-search):hover,
96 #nav-item-search:not(.nav-current):focus-within {
97 background
-color
: #ddd;
99 .inactive
-bar
.nav
-item
:not(.nav
-current
):not(#nav-item-search):hover,
100 .inactive
-bar
#nav-item-search:not(.nav-current):focus-within {
101 background
-color
: #d8d8d8;
104 .nav
-bar
.nav
-inner
{
107 .nav
-bar
.nav
-inner
:hover
,
108 .nav
-bar
.nav
-inner
:focus
{
109 text
-decoration
: none
;
110 text
-shadow
: <?php
echo $white_glow; ?
>;
113 /* Accesskey hints */
124 .inactive
-bar
.nav
-inner
::after
{
127 .nav
-inner
:hover
::after
{
131 /* This makes the navbar items look like tabs: */
135 0 -1px
#d8d8d8 inset,
138 .nav
-inactive
:first
-child
{
139 box
-shadow
: 0 -1px
#d8d8d8 inset;
141 .inactive
-bar
.nav
-inactive
{
142 background
-color
: #e4e4e4;
144 .active
-bar
.nav
-inactive
{
145 background
-color
: #eee;
147 .nav
-bar +
.nav
-bar
{
153 box
-shadow
: 0 -3px
8px
-2px
#ccc;
155 .active
-bar
.nav
-inactive
{
157 0 -4px
8px
-4px
#bbb inset,
160 .active
-bar
.nav
-inactive
:first
-child
{
162 0 -4px
8px
-4px
#bbb inset;
164 .active
-bar
.nav
-current +
.nav
-inactive
{
166 5px
-4px
8px
-4px
#bbb inset;
168 .active
-bar
.nav
-item
-last
-before
-current
{
170 -5px
-4px
8px
-4px
#bbb inset,
173 .active
-bar
.nav
-item
-last
-before
-current
:first
-child
{
175 -5px
-4px
8px
-4px
#bbb inset;
178 @-moz
-document url
-prefix() {
180 box
-shadow
: 0 -3px
4px
-2px
#ccc;
183 .active
-bar
.nav
-inactive
{
185 0 -4px
4px
-4px
#bbb inset,
188 .active
-bar
.nav
-inactive
:first
-child
{
190 0 -4px
4px
-4px
#bbb inset;
192 .active
-bar
.nav
-current +
.nav
-inactive
{
194 5px
-4px
4px
-4px
#bbb inset;
196 .active
-bar
.nav
-item
-last
-before
-current
{
198 -5px
-4px
4px
-4px
#bbb inset,
201 .active
-bar
.nav
-item
-last
-before
-current
:first
-child
{
203 -5px
-4px
4px
-4px
#bbb inset;
209 #nav-item-search form::before {
211 font
-size
: 0.9375rem
;
213 #nav-item-search button {
218 #nav-item-search input::placeholder {
223 /* Inbox indicator */
229 /*= Top pagination UI hover tooltips =*/
231 #top-nav-bar a::after,
232 #bottom-bar a::after {
248 .sublevel
-nav
.sublevel
-item
{
250 background
-color
: #fff;
252 .sublevel
-nav
.sublevel
-item
:not(.selected
):hover
{
253 background
-color
: #ddd;
255 text
-decoration
: none
;
258 .sublevel
-nav
.sublevel
-item
:not(.selected
):active
,
259 .sublevel
-nav
.sublevel
-item
.selected
{
260 background
-color
: #ddd;
267 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
270 border
-width
: 1px
0 1px
1px
;
272 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
{
273 border
-radius
: 8px
0 0 8px
;
275 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
277 border
-radius
: 0 8px
8px
0;
280 /*=====================*/
281 /* SORT ORDER SELECTOR */
282 /*=====================*/
284 .sublevel
-nav
.sort
.sublevel
-item
{
285 font
-family
: <?php
echo $UI_font; ?
>;
286 letter
-spacing
: 0.5px
;
287 padding
: <?php
echo ($platform == 'Mac') ?
"7px 7px 5px 7px" : "6px 7px"; ?
>;
288 text
-transform
: uppercase
;
289 pointer
-events
: auto
;
290 box
-shadow
: 1px
1px
0 0 #aaa inset;
293 border
: 2px solid transparent
;
296 pointer
-events
: none
;
297 background
-color
: #bbb;
299 .sublevel
-nav
.sort
::before
{
300 text
-transform
: uppercase
;
303 text
-shadow
: 0.5px
0.5px
0 #fff;
306 .sublevel
-nav
.sort
::after
{
316 0 18px
0 0 #bbb inset,
317 0 0 0 1px
#aaa inset,
318 0 18px
0 1px
#aaa inset,
328 #theme-selector button,
329 #width-selector button {
331 0 0 0 4px
#eee inset,
332 0 0 0 5px
#ccc inset;
334 #theme-selector button:hover,
335 #theme-selector button.selected,
336 #width-selector button:hover,
337 #width-selector button.selected {
340 0 0 0 5px
#ccc inset;
343 #theme-selector button::before {
345 background
-color
: #eee;
347 #theme-selector button:hover::before,
348 #theme-selector button.selected::before {
351 #width-selector button::after {
355 /*======================*/
356 /* THEME TWEAKER TOGGLE */
357 /*======================*/
359 #theme-tweaker-toggle button {
363 /*=================*/
364 /* QUICKNAV WIDGET */
365 /*=================*/
369 background
-color
: #e4e4e4;
371 text
-decoration
: none
;
373 #quick-nav-ui a[href='#bottom-bar'] {
376 #quick-nav-ui a:active {
377 transform
: scale(0.9);
379 #quick-nav-ui a[href='#comments'].no-comments {
383 @media only screen
and (hover
:hover
) {
384 #quick-nav-ui a:hover {
386 background
-color
: #d8d8d8;
388 #quick-nav-ui a:focus:not(:hover) {
394 /*======================*/
395 /* NEW COMMENT QUICKNAV */
396 /*======================*/
398 #new-comment-nav-ui .new-comments-count {
401 text
-shadow
: 0.5px
0.5px
0 #fff;
403 #new-comment-nav-ui .new-comments-count::after {
407 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
411 @media only screen
and (hover
:hover
) {
412 #new-comment-nav-ui .new-comments-count:hover {
420 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
422 text
-shadow
: 0 0 1px
#fff, 0 0 3px #fff, 0 0 5px #fff;
426 /*=================*/
427 /* HNS DATE PICKER */
428 /*=================*/
430 #hns-date-picker span {
432 text
-shadow
: 0.5px
0.5px
0 #fff;
435 #hns-date-picker input {
436 border
: 1px solid
#777;
437 background
-color
: transparent
;
440 #hns-date-picker input:focus {
444 /*======================*/
445 /* ANTI-KIBITZER TOGGLE */
446 /*======================*/
448 #anti-kibitzer-toggle button::before,
449 #anti-kibitzer-toggle button::after {
450 background
-color
: #aaa;
451 -webkit
-background
-clip
: text
;
453 text
-shadow
: rgba(255,255,255,0.5) 0px
1px
1px
;
455 #anti-kibitzer-toggle button:hover::before,
456 #anti-kibitzer-toggle button:hover::after {
457 background
-color
: #555;
460 /*======================*/
461 /* TEXT SIZE ADJUSTMENT */
462 /*======================*/
464 #text-size-adjustment-ui button {
467 #text-size-adjustment-ui button.default {
470 #text-size-adjustment-ui button:disabled:hover {
473 #text-size-adjustment-ui::after {
477 /*=============================*/
478 /* COMMENTS VIEW MODE SELECTOR */
479 /*=============================*/
481 #comments-view-mode-selector a {
490 border
: 1px solid
#aaa;
492 .archive
-nav
*[class^
='archive-nav-item'] {
495 border
-width
: 1px
0 1px
1px
;
496 background
-color
: #eee;
498 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
500 border
-bottom
-width
: 0;
502 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
503 border
-bottom
-width
: 1px
;
505 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
506 border
-right
-width
: 1px
;
508 .archive
-nav span
[class^
='archive-nav-item'] {
510 background
-color
: #ddd;
514 .archive
-nav a
:visited
{
517 .archive
-nav a
:hover
{
518 text
-decoration
: none
;
520 background
-color
: #e0e0e0;
521 text
-shadow
: <?php
echo $white_glow; ?
>;
523 .archive
-nav a
:active
{
524 transform
: scale(0.9);
526 .archive
-nav a
:focus
:not(:hover
) {
529 .archive
-nav a
.archive
-nav
-item
-day
:hover
{
530 background
-color
: #ddd;
537 #nav-item-about button.open-keyboard-help {
548 margin
: 0.6em
20px
0 20px
;
549 max
-width
: calc(100%
- 40px
);
551 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
554 h1
.listing
.post
-title
-link
{
557 h1
.listing
.link
-post
-link
{
562 @media only screen
and (hover
: hover
) {
566 background
-color
: rgba(255,255,255,0.85);
568 h1
.listing
:focus
-within
::before
{
572 h1
.listing
.link
-post
-link
:hover
{
576 -0.5px
-0.5px
0 #fff,
582 h1
.listing
.edit
-post
-link
{
583 padding
: 5px
3px
36px
0.5em
;
586 background
-color
: #eee;
588 h1
.listing
.edit
-post
-link
:hover
{
589 text
-decoration
: none
;
591 #content.user-page h1.listing .edit-post-link {
592 background
-color
: #eee;
602 h1
.listing
.spam +
.post
-meta
{
605 h1
.listing
.spam
:hover
,
606 h1
.listing
.spam +
.post
-meta
:hover
,
607 h1
.listing
.spam
:hover +
.post
-meta
{
611 /*===================*/
612 /* LISTING POST-META */
613 /*===================*/
615 h1
.listing +
.post
-meta
> * {
619 h1
.listing +
.post
-meta
.karma
::after
{
622 h1
.listing +
.post
-meta
.date
::before
{
625 h1
.listing +
.post
-meta
.date
::after
{
628 margin
: 0 0.5em
0 0.125em
;
630 h1
.listing +
.post
-meta
.comment
-count
.new-comments
::before
{
633 h1
.listing
:last
-of
-type +
.post
-meta
{
636 h1
.listing +
.post
-meta
.karma
{
638 margin
-right
: 0.25em
;
640 h1
.listing +
.post
-meta
.author
{
641 margin
-right
: 0.25em
;
643 h1
.listing +
.post
-meta
.date
{
646 h1
.listing +
.post
-meta
.post
-section
{
650 h1
.listing +
.post
-meta
.post
-section
::before
{
655 h1
.listing +
.post
-meta
.link
-post
-domain
{
663 #content.user-page h1.page-main-heading {
664 border
-bottom
: 1px solid
#ccc;
667 #content.user-page h1.listing,
668 #content.user-page h1.listing + .post-meta {
669 background
-color
: #eee;
673 #content.user-page h1.listing {
677 border
-width
: 1px
1px
0 1px
;
679 #content.own-user-page h1.listing,
680 h1
.listing
.own
-post
-listing
{
683 @media only screen
and (hover
: hover
) {
684 #content.user-page h1.listing a:hover,
685 #content.user-page h1.listing a:focus {
686 background
-color
: #eee;
688 #content.user-page h1.listing:focus-within::before {
692 #content.user-page h1.listing + .post-meta {
694 padding
: 0.5em
6px
6px
34px
;
695 border
-width
: 0 1px
1px
1px
;
697 #content.user-page h1.listing + .post-meta .post-section::before {
702 #content.conversations-user-page h1.listing {
703 padding
: 6px
6px
4px
8px
;
706 #content.conversations-user-page h1.listing + .post-meta {
708 margin
: 0 0 0.25rem
0;
710 #content.conversations-user-page h1.listing + .post-meta .date::after {
714 .user
-stats
.karma
-total
{
722 #content.conversation-page h1.page-main-heading {
731 .login
-container form input
[type
='submit'] {
733 background
-color
: #eee;
734 border
: 1px solid
#ccc;
736 .login
-container form input
[type
='submit']:hover
,
737 .login
-container form input
[type
='submit']:focus
{
738 background
-color
: #ddd;
739 border
: 1px solid
#aaa;
742 /* “Create account” form */
745 background
-color
: #f3f3f3;
746 border
: 1px solid
#ddd;
748 #signup-form input[type='submit'] {
749 background
-color
: #e4e4e4;
750 border
: 1px solid
#ccc;
752 #signup-form input[type='submit']:hover {
753 background
-color
: #d8d8d8;
754 border
: 1px solid
#aaa;
759 .login
-container
.login
-tip
{
760 border
: 1px solid
#eee;
766 border
: 1px solid red
;
767 background
-color
: #faa;
770 border
: 1px solid green
;
771 background
-color
: #afa;
774 /*=====================*/
775 /* PASSWORD RESET PAGE */
776 /*=====================*/
778 .reset
-password
-container input
[type
='submit'] {
779 background
-color
: #e4e4e4;
780 border
: 1px solid
#ccc;
784 /*===================*/
785 /* TABLE OF CONTENTS */
786 /*===================*/
789 font
-family
: <?php
echo $UI_font; ?
>;
790 border
: 1px solid
#ddd;
791 background
-color
: #eee;
799 .body
-text
.contents ul
{
802 .contents li
::before
{
804 font
-feature
-settings
: "tnum";
807 /*=================*/
808 /* POST NAVIGATION */
809 /*=================*/
812 .post
-nav
-links a
:visited
{
815 .post
-nav
-links a
:hover
{
816 text
-decoration
: none
;
823 .post
-nav
-links a
:hover
.post
-nav
-title
{
827 @media only screen
and (max
-width
: 900px
) {
829 border
-top
: 1px dotted
#aaa;
832 border
-right
: 1px dotted
#aaa;
835 border
-left
: 1px dotted
#aaa;
839 .crosspost
, .crosspost
:visited
{
843 /*==================*/
844 /* POSTS & COMMENTS */
845 /*==================*/
848 font
-family
: <?php
echo $text_font; ?
>;
851 @-moz
-document url
-prefix() {
853 font
-weight
: <?php
global $platform; echo ($platform == 'Windows' ?
'300' : '400'); ?
>;
858 margin
: 1.1em
0 0.25em
0;
865 font
-size
: 1.1875rem
;
868 @media
(-webkit
-max
-device
-pixel
-ratio
: 1), (max
-resolution
: 191dpi
) {
889 .post
-meta
.comment
-count span
,
890 .post
-meta
.read
-time span
,
891 .post
-meta
.word
-count span
,
892 .post
-meta
.lw2
-link span
{
895 .post
-meta
.comment
-count
::before
,
896 .post
-meta
.read
-time
::before
,
897 .post
-meta
.word
-count
::before
,
898 .post
-meta
.lw2
-link
::before
{
899 font
-family
: Font Awesome
;
900 margin
: 0 0.25em
0 0;
904 .post
-meta
.comment
-count
{
905 margin
: 0 0.25em
0 0;
907 .post
-meta
.read
-time
,
908 .post
-meta
.word
-count
,
909 .post
-meta
.lw2
-link
{
910 margin
: 0 0.25em
0 0.5em
;
912 .post
-meta
.lw2
-link
{
915 .post
-meta
.comment
-count
:hover
,
916 .post
-meta
.lw2
-link
:hover
{
917 text
-decoration
: none
;
923 .post
-meta
.comment
-count
:hover
::before
,
924 .post
-meta
.lw2
-link
:hover
::before
{
927 .post
-meta
.read
-time
:hover
::before
{
931 .post
-meta
.comment
-count
::before
{
934 .post
-meta
.read
-time
::before
{
937 .post
-meta
.read
-time
::after
{
940 .post
-meta
.word
-count
::before
{
943 .post
-meta
.word
-count
::after
{
946 .post
-meta
.lw2
-link
::before
{
955 .post
.post
-meta
.author
{
956 margin
: 0 0.75em
0 0;
958 .post
.post
-meta
.comment
-count
{
961 .post
.post
-meta
.lw2
-link
{
962 margin
: 0 1em
0 0.5em
;
964 .post
.post
-meta
.voting
-controls
{
968 .post
-meta
.post
-section
::before
,
969 .comment
-meta
.alignment
-forum
{
976 a
.post
-section
:hover
{
977 text
-decoration
: none
;
979 a
.post
-section
:hover
::before
{
982 .post
-meta
.post
-section
.alignment
-forum
::before
{
988 a
.post
-section
.alignment
-forum
:hover
::before
{
1000 .post
.link
-post a
.link
-post
-link
{
1001 text
-decoration
: none
;
1002 font
-family
: <?php
echo $UI_font; ?
>;
1005 .post
.link
-post a
.link
-post
-link
:hover
{
1008 .post
.link
-post a
.link
-post
-link
:hover
::before
{
1012 -0.5px
-0.5px
0 #fff,
1016 .post
.link
-post a
.link
-post
-link
:focus
{
1018 border
-bottom
: 2px dotted
#777;
1026 border
-top
: 1px solid
#000;
1027 box
-shadow
: 0 3px
4px
-4px
#000 inset;
1029 @-moz
-document url
-prefix() {
1031 box
-shadow
: 0 3px
3px
-4px
#000 inset;
1034 #content > .comment-thread .comment-meta a.date:focus,
1035 #content > .comment-thread .comment-meta a.permalink:focus {
1037 outline
: 2px dotted
#aaa;
1039 background
-color
: #fff;
1041 #content > .comment-thread .comment-meta a.date:focus {
1045 #content > .comment-thread .comment-meta a.date:focus + * {
1048 #content > .comment-thread .comment-meta a.permalink:focus {
1052 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1056 border
: 1px solid
#ccc;
1057 background
-color
: var(--GW
-comment
-background
-color
);
1059 .comment
-parent
-link
::after
{
1061 0 28px
16px
-16px
var(--GW
-comment
-parent
-background
-color
) inset
,
1062 4px
16px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
,
1063 4px
4px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
;
1066 /*================================*/
1067 /* DEEP COMMENT THREAD COLLAPSING */
1068 /*================================*/
1070 .comment
-item input
[id^
="expand"] + label
::after
{
1071 color
: <?php
echo $hyperlink_color; ?
>;
1074 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
1077 .comment
-item input
[id^
="expand"] + label
:active
::after
,
1078 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
1081 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
1082 border
-width
: 1px
0 0 0;
1092 .comment
-meta
.author
{
1097 .comment
-meta
.author
:hover
{
1098 text
-decoration
: none
;
1101 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
1105 .comment
-item
.voting
-controls
.active
-controls
::after
,
1106 .comment
-item
.voting
-controls
.karma
-value
::after
,
1107 .post
.voting
-controls
.active
-controls
::after
,
1108 .post
.voting
-controls
.karma
-value
::after
,
1110 background
-color
: #fff;
1113 box
-shadow
: 0 0 0 1px
#ddd inset;
1115 .comment
-item
.voting
-controls
.active
-controls
::after
,
1116 .post
.voting
-controls
.active
-controls
::after
{
1117 padding
: 6px
4px
4px
4px
;
1120 .comment
-item
.voting
-controls
.karma
-value
::after
,
1121 .post
.voting
-controls
.karma
-value
::after
{
1122 padding
: 2px
8px
1px
8px
;
1127 /*====================*/
1128 /* ANTI-KIBITZER MODE */
1129 /*====================*/
1132 .inline
-author
.redacted
{
1137 .karma
-value
.redacted
{
1141 .link
-post
-domain
.redacted
{
1145 /*===========================*/
1146 /* COMMENT THREAD NAVIGATION */
1147 /*===========================*/
1149 div
.comment
-parent
-link
{
1152 a
.comment
-parent
-link
{
1155 a
.comment
-parent
-link
::before
{
1158 a
.comment
-parent
-link
:hover
::before
{
1159 background
-color
: #ffd;
1163 div
.comment
-child
-links
{
1166 div
.comment
-child
-links a
{
1169 .comment
-child
-link
::before
{
1173 .comment
-item
-highlight
{
1180 border
: 1px solid
#e7b200;
1182 .comment
-item
-highlight
-faint
{
1189 border
: 1px solid
#f8e7b5;
1193 background
-color
: #fff;
1196 /*=======================*/
1197 /* COMMENTS COMPACT VIEW */
1198 /*=======================*/
1200 #comments-list-mode-selector button {
1202 0 0 0 4px
#fff inset,
1203 0 0 0 5px
#bbb inset;
1205 #comments-list-mode-selector button:hover,
1206 #comments-list-mode-selector button.selected {
1208 0 0 0 5px
#bbb inset;
1210 #content.compact > .comment-thread .comment-item::after {
1211 color
: <?php
echo $hyperlink_color; ?
>;
1212 background
: linear
-gradient(to right
, transparent
0%
, #fff 50%, #fff 100%);
1215 @media only screen
and (hover
: hover
) {
1216 #content.compact > .comment-thread .comment-item:hover .comment,
1217 #content.compact > .comment-thread .comment-item.expanded .comment {
1218 background
-color
: #fff;
1219 outline
: 3px solid
<?php
echo $hyperlink_color; ?
>;
1221 #content.compact > .comment-thread .comment-item:hover .comment::before,
1222 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1223 background
-color
: #fff;
1234 @media only screen
and (hover
: none
) {
1235 #content.compact > .comment-thread.expanded .comment-item .comment {
1236 background
-color
: #fff;
1237 outline
: 3px solid
<?php
echo $hyperlink_color; ?
>;
1239 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1240 background
-color
: #fff;
1252 #content.user-page.compact > h1.listing {
1255 #content.user-page.compact > h1.listing + .post-meta {
1256 margin
-bottom
: 0.5rem
;
1259 /*===========================*/
1260 /* HIGHLIGHTING NEW COMMENTS */
1261 /*===========================*/
1263 .new-comment
::before
{
1264 outline
: 2px solid
#9037ff;
1266 0 0 6px
-2px
#9037ff inset,
1271 /*=================================*/
1272 /* COMMENT THREAD MINIMIZE BUTTONS */
1273 /*=================================*/
1275 .comment
-minimize
-button
{
1278 .comment
-minimize
-button
:hover
{
1280 text
-shadow
: <?php
echo $white_glow; ?
>;
1282 .comment
-minimize
-button
::after
{
1283 font
-family
: <?php
echo $UI_font; ?
>;
1286 .comment
-minimize
-button
.maximized
::after
{
1290 /*=================================*/
1291 /* INDIVIDUAL COMMENT THREAD PAGES */
1292 /*=================================*/
1294 .individual
-thread
-page
> h1
{
1295 font
-weight
: normal
;
1313 .karma
.upvote
::before
{
1317 .karma
.downvote
::before
{
1321 .karma
.upvote
::after
{
1326 .karma
.downvote
::after
{
1331 @-moz
-document url
-prefix() {
1332 .karma
.upvote
::after
{
1336 .karma
.downvote
::after
{
1342 .agreement
.upvote
::before
{
1346 .agreement
.downvote
::before
{
1350 .agreement
.upvote
::after
{
1355 .agreement
.downvote
::after
{
1360 @-moz
-document url
-prefix() {
1361 .agreement
.upvote
::after
{
1365 .agreement
.downvote
::after
{
1384 .upvote
:not(.none
) {
1385 color
: var(--GW
-upvote
-button
-color
);
1391 .downvote
:not(.none
) {
1392 color
: var(--GW
-downvote
-button
-color
);
1406 .vote
.two
-temp
::after
,
1408 visibility
: visible
;
1413 .vote
.two
-temp
::after
{
1424 .vote
:disabled
:hover
{
1428 /*===========================*/
1429 /* COMMENTING AND POSTING UI */
1430 /*===========================*/
1432 .posting
-controls input
[type
='submit'] {
1433 background
-color
: #fff;
1434 border
: 1px solid
#aaa;
1437 .posting
-controls input
[type
='submit']:hover
,
1438 .posting
-controls input
[type
='submit']:focus
{
1439 background
-color
: #ddd;
1440 border
: 1px solid
#999;
1443 .comment
-controls
.cancel
-comment
-button
{
1450 .comment
-controls
.cancel
-comment
-button
:hover
{
1452 text
-shadow
: <?php
echo $white_glow; ?
>;
1455 .new-comment
-button
{
1459 .comment
-controls
.delete
-button
,
1460 .comment
-controls
.retract
-button
{
1463 .comment
-controls
.edit
-button
,
1464 .comment
-controls
.unretract
-button
{
1467 .comment
-controls
.action
-button
:hover
{
1472 .edit
-post
-link
:visited
{
1476 .posting
-controls textarea
{
1478 font
-family
: <?php
echo $text_font; ?
>;
1480 background
-color
: #fff;
1483 0 0 0 1px
#eee inset;
1485 @-moz
-document url
-prefix() {
1486 .posting
-controls textarea
{
1487 font
-weight
: <?php
global $platform; echo ($platform == 'Windows' ?
'300' : '400'); ?
>;
1490 .posting
-controls textarea
:focus
{
1491 background
-color
: #ffe;
1492 border
-color
: <?php
echo $hyperlink_color; ?
>;
1494 0 0 0 1px
#ddf inset,
1496 0 0 0 2px
<?php
echo $hyperlink_color; ?
>;
1498 .posting
-controls
.edit
-existing
-post textarea
:focus
,
1499 .posting
-controls form
.edit
-existing
-comment textarea
:focus
{
1502 0 0 0 1px
#81ff7f inset,
1509 .posting
-controls textarea
::-webkit
-scrollbar
,
1510 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
{
1512 background
-color
: transparent
;
1514 .posting
-controls textarea
::-webkit
-scrollbar
-track
,
1515 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-track
{
1516 background
-color
: #eee;
1517 border
-left
: 1px solid
#bbb;
1518 border
-top
: 1px solid
#eee;
1520 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-track
,
1521 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-track
{
1522 border
-left
: 1px solid
#f60;
1523 border
-top
: 1px solid
#ddf;
1525 .posting
-controls textarea
::-webkit
-scrollbar
-thumb
,
1526 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-thumb
{
1527 background
-color
: #bbb;
1528 box
-shadow
: 0 0 0 1px
#eee inset;
1529 border
-left
: 1px solid
#bbb;
1531 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-thumb
,
1532 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-thumb
{
1533 border
-left
: 1px solid
#f60;
1534 background
-color
: #f60;
1536 0 1px
0 0 #ddf inset,
1537 0 0 0 1px
#eee inset;
1540 .posting
-controls
.edit
-existing
-post textarea
:focus
::-webkit
-scrollbar
-track
,
1541 .posting
-controls form
.edit
-existing
-comment textarea
:focus
::-webkit
-scrollbar
-track
{
1542 border
-left
: 1px solid
#090;
1544 .posting
-controls
.edit
-existing
-post textarea
:focus
::-webkit
-scrollbar
-thumb
,
1545 .posting
-controls form
.edit
-existing
-comment textarea
:focus
::-webkit
-scrollbar
-thumb
{
1546 border
-left
: 1px solid
#090;
1547 background
-color
: #28a708;
1550 /* GUIEdit buttons */
1552 .guiedit
-buttons
-container
{
1553 background
-image
: linear
-gradient(to bottom
, #fff 0%, #ddd 50%, #ccc 75%, #aaa 100%);
1556 .posting
-controls
.edit
-existing
-post
.guiedit
-buttons
-container button
,
1557 .posting
-controls form
.edit
-existing
-comment
.guiedit
-buttons
-container button
{
1561 font
-family
: Font Awesome
, <?php
echo $text_font; ?
>;
1564 button
.guiedit
::after
{
1565 font
-family
: <?php
echo $UI_font; ?
>;
1570 /* Markdown hints */
1572 #markdown-hints-checkbox + label {
1575 #markdown-hints-checkbox + label:hover {
1577 text
-shadow
: <?php
echo $white_glow; ?
>;
1580 border
: 1px solid
#c00;
1581 background
-color
: #ffa;
1584 /*================*/
1585 /* EDIT POST FORM */
1586 /*================*/
1588 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1591 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1593 border
: 1px solid
#ddd;
1596 @media only screen
and (hover
:hover
) {
1597 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1598 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1604 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1605 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1609 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1612 #edit-post-form input[type='radio'] + label {
1615 padding
: 4px
12px
5px
12px
;
1617 #edit-post-form input[type='radio'][value='all'] + label {
1618 border
-radius
: 8px
0 0 8px
;
1621 #edit-post-form input[type='radio'][value='drafts'] + label {
1622 border
-radius
: 0 8px
8px
0;
1624 #edit-post-form input[type='radio'] + label:hover,
1625 #edit-post-form input[type='radio']:focus + label {
1626 background
-color
: #ddd;
1629 #edit-post-form input[type='radio']:focus + label {
1634 #edit-post-form input[type='radio']:checked + label {
1635 background
-color
: #ddd;
1648 text
-decoration
: none
;
1649 color
: <?php
echo $hyperlink_color; ?
>;
1655 text
-decoration
: underline
;
1663 input
[type
='submit'] {
1664 color
: <?php
echo $hyperlink_color; ?
>;
1673 input
[type
='submit']:hover
,
1675 input
[type
='submit']:focus
{
1677 text
-shadow
: <?php
echo $white_glow; ?
>;
1680 input
[type
='submit']:active
{
1682 transform
: scale(0.9);
1686 text
-shadow
: <?php
echo $white_glow; ?
>;
1687 text
-decoration
: none
;
1690 transform
: scale(0.9);
1692 .button
:focus
:not(:hover
) {
1695 @-moz
-document url
-prefix() {
1708 font
-family
: <?php
echo $UI_font; ?
>;
1713 font
-family
: <?php
echo $UI_font_smallcaps; ?
>;
1727 border
-bottom
: 1px solid
#aaa;
1730 border
-bottom
: 1px dotted
#ccc;
1738 border
-left
: 5px solid
#ccc;
1746 #content figure.image img {
1747 border
: 1px solid
#ccc;
1749 #content figure img {
1750 border
: 1px solid
#000;
1752 #content img[src$='.svg'],
1753 #content figure img[src$='.svg'] {
1756 #content img[style^='float'] {
1757 border
: 1px solid transparent
;
1764 #content:not(.tag-index-page) .body-text table,
1765 #content:not(.tag-index-page) .body-text table th,
1766 #content:not(.tag-index-page) .body-text table td {
1767 border
: 1px solid
#ddd;
1775 border
-bottom
: 1px solid
#999;
1779 background
-color
: #f6f6ff;
1780 border
: 1px solid
#ddf;
1785 input
[type
='search'],
1786 input
[type
='password'] {
1787 background
-color
: #fff;
1788 border
: 1px solid
#ddd;
1791 input
[type
='text']:focus
,
1792 input
[type
='search']:focus
,
1793 input
[type
='password']:focus
{
1794 background
-color
: #ffe;
1795 border
: 1px solid
#bbb;
1796 box
-shadow
: 0 0 1px
#bbb;
1820 background
-color
: #e6e6e6;
1821 text
-decoration
: none
;
1823 0 -1px
0 0 #000 inset,
1824 0 -3px
1px
-2px
#000 inset;
1828 #content.about-page .accesskey-table {
1829 font
-family
: <?php
echo $UI_font; ?
>;
1833 #content.about-page img {
1834 border
: 1px solid
#000;
1837 /*========================*/
1838 /* QUALIFIED HYPERLINKING */
1839 /*========================*/
1844 #aux-about-link a:hover {
1846 text
-shadow
: <?php
echo $white_glow; ?
>;
1849 .qualified
-linking label
{
1850 color
: <?php
echo $hyperlink_color; ?
>;
1852 .qualified
-linking label
:hover
{
1859 .qualified
-linking
-toolbar
{
1860 border
: 1px solid
#000;
1861 background
-color
: #fff;
1863 .qualified
-linking
-toolbar a
{
1864 background
-color
: #eee;
1865 border
: 1px solid
#ccc;
1867 color
: <?php
echo $hyperlink_color; ?
>;
1869 .qualified
-linking
-toolbar a
:visited
{
1870 color
: <?php
echo $hyperlink_color; ?
>;
1872 .qualified
-linking
-toolbar a
:hover
{
1873 text
-decoration
: none
;
1874 background
-color
: #ddd;
1875 text
-shadow
: <?php
echo $white_glow; ?
>;
1877 .qualified
-linking label
::after
{
1878 background
-color
: #eee;
1886 .mathjax
-block
-container
::-webkit
-scrollbar
{
1888 background
-color
: #f6f6ff;
1890 border
: 1px solid
#ddf;
1892 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1893 background
-color
: #dde;
1895 border
: 1px solid
#cce;
1897 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1899 background
-color
: #f6f6ff;
1901 border
: 1px solid
#ddf;
1903 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1904 background
-color
: #dde;
1906 border
: 1px solid
#cce;
1914 .textarea
-container
.autocomplete
-container
{
1915 background
-color
: rgba(255, 255, 170, 0.75);
1916 border
: 1px solid
rgba(255, 102, 1, 0.75);
1919 .textarea
-container
.autocomplete
-container div
.highlighted
{
1920 background
-color
: rgba(255, 102, 1, 0.75);
1924 .textarea
-container
.autocomplete
-container div
:not(.highlighted
):hover
{
1925 background
-color
: rgba(255, 102, 1, 0.25);
1928 .textarea
-container
.autocomplete
-container div span
.age
,
1929 .textarea
-container
.autocomplete
-container div span
.karma
{
1934 /*=================*/
1935 /* ALIGNMENT FORUM */
1936 /*=================*/
1938 #content.alignment-forum-index-page::before {
1939 background
-color
: #f1f3ff;
1941 #content.alignment-forum-index-page::after {
1942 font
-family
: <?php
echo $UI_font_smallcaps; ?
>;
1944 background
-color
: #626dd7;
1945 -webkit
-background
-clip
: text
;
1948 rgba(255,255,255,0.5) 0px
3px
3px
;;
1950 @media only screen
and (hover
: hover
) {
1951 #content.alignment-forum-index-page h1.listing a:hover,
1952 #content.alignment-forum-index-page h1.listing a:focus {
1953 background
-color
: rgba(241,243,255,0.85);
1957 /*====================*/
1958 /* FOR NARROW SCREENS */
1959 /*====================*/
1961 @media only screen
and (max
-width
: 1440px
) {
1963 background
-color
: #eee;
1966 #hns-date-picker::before {
1967 border
: 1px solid
#ccc;
1968 border
-width
: 1px
0 1px
1px
;
1971 @media only screen
and (max
-width
: 1160px
) {
1973 background
-color
: #eee;
1976 0 0 0 2px transparent
;
1978 #theme-selector:hover::after {
1979 background
-color
: #999;
1980 width
: calc(6em
- 3px
);
1981 height
: calc(100%
- 5px
);
1985 #text-size-adjustment-ui button {
1986 background
-color
: #ddd;
1988 #text-size-adjustment-ui button:hover {
1989 background
-color
: #eee;
1991 #theme-tweaker-toggle button {
1992 background
-color
: #ddd;
1995 @media only screen
and (max
-width
: 1080px
) {
1996 #text-size-adjustment-ui button {
1997 border
: 1px solid
#999;
2002 0 0 0 1px transparent
;
2004 #theme-tweaker-toggle button {
2005 border
: 1px solid
#999;
2007 0 0 10px
#999 inset,
2008 0 0 0 1px transparent
;
2010 transform
: scale(0.8);
2013 @media only screen
and (max
-width
: 1020px
) {
2017 0 0 0 2px transparent
;
2019 #new-comment-nav-ui .new-comments-count::before {
2020 background
-color
: #eee;
2023 0 0 0 2px transparent
;
2026 #anti-kibitzer-toggle {
2029 0 0 0 2px transparent
;
2030 background
-color
: #eee;
2040 /*******************************************************/
2041 @media not screen
and (hover
:hover
) and (pointer
:fine
) {
2042 /*******************************************************/
2043 #ui-elements-container > div[id$='-ui-toggle'] button {
2055 background
-color
: #eee;
2063 border
-radius
: 12px
;
2065 #theme-selector::before,
2066 #theme-selector .theme-selector-close-button {
2068 text
-shadow
: 0.5px
0.5px
0 #fff;
2070 #theme-selector button {
2071 background
-color
: #e6e6e6;
2072 border
-radius
: 10px
;
2074 #theme-selector button::after {
2076 padding
-bottom
: 2px
;
2077 max
-width
: calc(100%
- 3.25em
);
2079 text
-overflow
: ellipsis
;
2081 #theme-selector button.selected::after {
2088 background
-color
: #fff;
2091 background
-color
: #eee;
2092 box
-shadow
: 0 0 0 1px
#999;
2095 #new-comment-nav-ui,
2104 #quick-nav-ui a::after,
2105 #new-comment-nav-ui::before {
2106 font
-family
: <?php
echo $UI_font; ?
>;
2112 background
-color
: #fff;
2116 #new-comment-nav-ui {
2119 #new-comment-nav-ui {
2120 background
-color
: #eee;
2121 border
: 1px solid
#999;
2123 #new-comment-nav-ui::before {
2127 #new-comment-nav-ui .new-comment-sequential-nav-button {
2128 box
-shadow
: 0 0 0 1px
#999;
2131 #new-comment-nav-ui .new-comments-count {
2132 background
-color
: inherit
;
2133 box
-shadow
: 0 -1px
0 0 #999;
2135 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2138 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2139 border
-radius
: 7px
0 0 7px
;
2141 #new-comment-nav-ui button::after {
2142 font
-family
: <?php
echo $UI_font; ?
>;
2144 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2145 border
-radius
: 0 7px
7px
0;
2148 /*****************************************/
2149 @media only screen
and (max
-width
: 900px
) {
2150 /*****************************************/
2151 h1
.listing +
.post
-meta
> * {
2154 h1
.listing +
.post
-meta
.post
-section
::before
{
2158 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
2161 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2164 .nav
-bar
-top
.nav
-inner
::before
{
2168 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
2169 background
-color
: #aaa;
2172 .comment
-item
.comment
-item
{
2173 margin
: 0.75em
2px
4px
6px
;
2175 .comment
-item
.comment
-item +
.comment
-item
{
2176 margin
: 1.5em
2px
4px
6px
;
2179 a
.comment
-parent
-link
:hover
::before
{
2180 background
-color
: unset;
2183 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
2184 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
2185 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
2190 /*******************************************/
2191 } @media only screen
and (max
-width
: 720px
) {
2192 /*******************************************/
2193 /*******************************************/
2194 } @media only screen
and (max
-width
: 520px
) {
2195 /*******************************************/
2198 margin
: 18px
6px
4px
6px
;
2199 max
-width
: calc(100%
- 12px
);
2201 h1
.listing +
.post
-meta
{
2204 h1
.listing
.link
-post
-link
{
2208 #content.compact > .comment-thread .comment-item {
2212 .textarea
-container
:focus
-within button
:active
{
2213 background
-color
: #ccc;
2215 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
2216 background
-color
: #eee;
2217 border
: 1px solid
#ddd;
2220 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
2228 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2229 background
-color
: #fff;
2230 border
-top
: 1px solid
#ddf;
2232 #content.conversation-page .textarea-container:focus-within::after {
2233 background
-color
: #fff;
2235 .textarea
-container
:focus
-within button
.guiedit
{
2236 background
-color
: #eee;
2237 border
: 1px solid
#ddd;
2240 #markdown-hints::after {
2244 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2247 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {