2 $UI_font = "'Arial', 'GW-Symbols', sans-serif";
3 $text_font = "'Arial', sans-serif";
4 $hyperlink_color = "#6a8a6b";
18 --GW
-comment
-background
-color
-odd
: #f7f7f8;
19 --GW
-comment
-background
-color
-even
: #fff;
20 --GW
-comment
-background
-color
-target
: #ffd;
29 background
-color
: #d8d8d8;
30 font
-family
: <?php
echo $UI_font; ?
>;
36 background
-color
: #fff;
37 box
-shadow
: 0px
0px
10px
#555;
49 #primary-bar.inactive-bar .nav-inner {
50 padding
: 13px
30px
11px
30px
;
52 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
55 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
58 @media only screen
and (min
-width
: 901px
) {
59 #secondary-bar #nav-item-sequences .nav-inner {
64 #bottom-bar.decorative {
65 background
-color
: #fff;
67 #bottom-bar.decorative::before,
68 #bottom-bar.decorative::after {
73 padding
: 0.5em
0 0.75em
0;
75 #bottom-bar.decorative::before {
78 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
79 background
-repeat
: repeat
-x
;
80 background
-position
: center
44%
;
84 #bottom-bar.decorative::after {
90 background
-color
: #fff;
94 <?php
fit_content("#bottom-bar.decorative::after"); ?
>
107 .nav
-inner
:hover
::after
{
111 /* This makes the navbar items look like tabs: */
113 .nav
-bar +
.nav
-bar
{
117 background
-color
: #f5f5f5;
120 border
-bottom
: 1px solid
#d6d5d6;
122 .nav
-bar
.nav
-inner
{
125 .nav
-bar
.nav
-inner
:hover
{
127 text
-decoration
: none
;
129 .nav
-bar
.nav
-current
{
132 .nav
-item
:nth
-of
-type(n+
2) {
133 box
-shadow
: -9px
0 0 -8px
#d6d5d6;
138 #nav-item-search form::before {
143 #nav-item-search button {
145 font
-weight
: inherit
;
147 #nav-item-search input::placeholder {
152 /*= User/login tab =*/
154 #inbox-indicator::before {
159 /*= Pagination UI =*/
161 #bottom-bar #nav-item-next a::before {
165 #bottom-bar #nav-item-last a::before {
170 /*= Top pagination UI hover tooltips =*/
172 #top-nav-bar a::after,
173 #bottom-bar a::after {
183 .new-private-message
,
184 .new-private-message
:visited
{
195 .sublevel
-nav
.sublevel
-item
{
197 background
-color
: #fff;
199 .sublevel
-nav
.sublevel
-item
:not(.selected
):hover
{
200 background
-color
: #ddd;
202 text
-decoration
: none
;
205 .sublevel
-nav
.sublevel
-item
:not(.selected
):active
,
206 .sublevel
-nav
.sublevel
-item
.selected
{
207 background
-color
: #ddd;
214 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
217 border
-width
: 1px
0 1px
1px
;
219 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
{
220 border
-radius
: 8px
0 0 8px
;
222 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
224 border
-radius
: 0 8px
8px
0;
227 /*=====================*/
228 /* SORT ORDER SELECTOR */
229 /*=====================*/
231 .sublevel
-nav
.sort
.sublevel
-item
{
232 letter
-spacing
: 0.5px
;
233 padding
: 7px
7px
6px
8px
;
234 text
-transform
: uppercase
;
235 pointer
-events
: auto
;
236 box
-shadow
: 1px
1px
0 0 #aaa inset;
239 border
: 2px solid transparent
;
242 pointer
-events
: none
;
243 background
-color
: #bbb;
245 .sublevel
-nav
.sort
::before
{
246 text
-transform
: uppercase
;
249 text
-shadow
: 0.5px
0.5px
0 #fff;
252 .sublevel
-nav
.sort
::after
{
262 0 18px
0 0 #bbb inset,
263 0 0 0 1px
#aaa inset,
264 0 18px
0 1px
#aaa inset,
274 #width-selector button,
275 #theme-selector button {
277 0 0 0 4px
#d8d8d8 inset,
278 0 0 0 5px
#bbb inset;
280 #width-selector button:hover,
281 #width-selector button.selected,
282 #theme-selector button:hover,
283 #theme-selector button.selected {
285 0 0 0 5px
#bbb inset;
288 #theme-selector button::before {
290 padding
: 5px
6px
7px
6px
;
292 background
-color
: #d8d8d8;
294 #theme-selector button:hover::before,
295 #theme-selector button.selected::before {
298 #width-selector button::after {
303 /*======================*/
304 /* THEME TWEAKER TOGGLE */
305 /*======================*/
307 #theme-tweaker-toggle button {
311 /*=================*/
312 /* QUICKNAV WIDGET */
313 /*=================*/
317 background
-color
: #e4e4e4;
320 #quick-nav-ui a[href='#bottom-bar'] {
323 #quick-nav-ui a:active {
324 transform
: scale(0.9);
326 #quick-nav-ui a[href='#comments'].no-comments {
330 @media only screen
and (hover
: hover
) {
331 #quick-nav-ui a:hover {
333 background
-color
: #eee;
335 #quick-nav-ui a:focus:not(:hover) {
341 /*======================*/
342 /* NEW COMMENT QUICKNAV */
343 /*======================*/
345 #new-comment-nav-ui .new-comments-count {
348 text
-shadow
: 0.5px
0.5px
0 #fff;
350 #new-comment-nav-ui .new-comments-count::after {
354 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
358 @media only screen
and (hover
: hover
) {
359 #new-comment-nav-ui .new-comments-count:hover {
367 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
372 /*=================*/
373 /* HNS DATE PICKER */
374 /*=================*/
376 #hns-date-picker span {
378 text
-shadow
: 0.5px
0.5px
0 #fff;
381 #hns-date-picker input {
382 border
: 1px solid
#777;
383 background
-color
: transparent
;
386 #hns-date-picker input:focus {
390 /*====================*/
391 /* DARK MODE SELECTOR */
392 /*====================*/
394 #dark-mode-selector {
395 outline
: 1px solid
#999;
397 #dark-mode-selector button {
400 #dark-mode-selector button.selected {
401 background
-color
: #999;
404 #dark-mode-selector button:not(.selected) + button:not(.selected) {
405 box
-shadow
: 1px
0 0 0 #999 inset;
407 #dark-mode-selector button:disabled:hover {
410 #dark-mode-selector button::after {
411 font
-family
: <?php
echo $UI_font; ?
>;
416 /*======================*/
417 /* TEXT SIZE ADJUSTMENT */
418 /*======================*/
420 #text-size-adjustment-ui button {
423 #text-size-adjustment-ui button:hover {
426 #text-size-adjustment-ui button.default {
429 #text-size-adjustment-ui button:disabled:hover {
432 #text-size-adjustment-ui::after {
436 /*=============================*/
437 /* COMMENTS VIEW MODE SELECTOR */
438 /*=============================*/
440 #comments-view-mode-selector a {
448 #keyboard-help-overlay .keyboard-help-container .keys {
457 border
: 1px solid
#aaa;
459 .archive
-nav
*[class^
='archive-nav-item'] {
462 border
-width
: 1px
0 1px
1px
;
463 background
-color
: #eee;
465 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
467 border
-bottom
-width
: 0;
469 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
470 border
-bottom
-width
: 1px
;
472 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
473 border
-right
-width
: 1px
;
475 .archive
-nav span
[class^
='archive-nav-item'] {
477 background
-color
: #ddd;
481 .archive
-nav a
:visited
{
482 color
: rgba(0, 0, 238, 0.7);
484 .archive
-nav a
:hover
{
485 text
-decoration
: none
;
487 background
-color
: #e0e0e0;
489 .archive
-nav a
:active
{
490 transform
: scale(0.9);
492 .archive
-nav a
:focus
:not(:hover
) {
495 .archive
-nav a
.archive
-nav
-item
-day
:hover
{
496 background
-color
: #ddd;
504 margin
: 1.125em
20px
0.25em
20px
;
505 max
-width
: calc(100%
- 40px
);
506 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
512 h1
.listing
.post
-title
-link
{
517 h1
.listing
.post
-title
:visited
{
520 h1
.listing
.link
-post
-link
{
524 @media only screen
and (hover
: hover
) {
528 text
-decoration
: none
;
531 border
-bottom
: 1px dotted
#999;
533 h1
.listing
:focus
-within
::before
{
536 h1
.listing
:focus
-within +
.post
-meta
.karma
-value
{
541 h1
.listing
.link
-post
-link
:hover
,
542 h1
.listing
.link
-post
-link
:focus
{
546 -0.5px
-0.5px
0 #fff,
553 h1
.listing
.edit
-post
-link
{
554 padding
: 5px
3px
12px
0.5em
;
558 h1
.listing
.edit
-post
-link
:hover
{
559 text
-decoration
: none
;
561 #content.user-page h1.listing .edit-post-link {
562 background
-color
: #f7f7f8;
572 h1
.listing
.spam +
.post
-meta
{
575 h1
.listing
.spam
:hover
,
576 h1
.listing
.spam +
.post
-meta
:hover
,
577 h1
.listing
.spam
:hover +
.post
-meta
{
581 /*===================*/
582 /* LISTING POST-META */
583 /*===================*/
585 h1
.listing +
.post
-meta
{
586 font
-size
: 0.8125rem
;
589 justify
-content
: flex
-end
;
592 h1
.listing +
.post
-meta
.author
{
595 text
-decoration
: none
;
599 h1
.listing +
.post
-meta
.author
:hover
{
602 h1
.listing +
.post
-meta
.date
,
603 h1
.listing +
.post
-meta
.read
-time
{
607 h1
.listing +
.post
-meta a
{
609 text
-decoration
: underline
;
611 h1
.listing +
.post
-meta a
:hover
{
615 h1
.listing +
.post
-meta
.karma
-value
{
616 background
-color
: #538d4d;
619 font
-size
: 0.8125rem
;
620 border
-radius
: 1.0625em
;
621 padding
: 2px
6px
1px
6px
;
626 right
: calc(100%
- 1.75em
);
629 h1
.listing +
.post
-meta
.karma
-value span
,
630 h1
.listing +
.post
-meta
.lw2
-link span
,
631 h1
.listing +
.post
-meta
.comment
-count span
{
635 h1
.listing +
.post
-meta
> * {
639 h1
.listing +
.post
-meta
.read
-time
{
643 h1
.listing +
.post
-meta
.comment
-count
{
646 h1
.listing +
.post
-meta
.comment
-count
::before
{
647 content
: "Comments ("
649 h1
.listing +
.post
-meta
.comment
-count
::after
{
652 h1
.listing +
.post
-meta
.date
{
656 h1
.listing +
.post
-meta
.lw2
-link
{
660 h1
.listing +
.post
-meta
.post
-section
{
662 text
-decoration
: none
;
664 h1
.listing +
.post
-meta
.post
-section
::before
{
666 right
: calc(100% +
1.15em
);
669 h1
.listing +
.post
-meta
.link
-post
-domain
{
678 #content.user-page h1.page-main-heading {
679 border
-bottom
: 1px solid
#ccc;
682 #content.user-page h1.listing,
683 #content.user-page h1.listing + .post-meta {
684 background
-color
: #f7f7f8;
686 border
-color
: #bbbcbf;
689 #content.user-page h1.listing {
690 padding
: 0.5em
6px
0 48px
;
691 border
-width
: 1px
1px
0 1px
;
695 #content.own-user-page h1.listing,
696 h1
.listing
.own
-post
-listing
{
699 #content.user-page h1.listing a:hover {
700 background
-color
: #f7f7f8;
703 #content.user-page h1.listing + .post-meta {
704 padding
: 0.25em
10px
0.5em
32px
;
705 border
-width
: 0 1px
1px
1px
;
708 #content.user-page h1.listing + .post-meta .karma-value {
709 right
: calc(100%
- 3.25em
);
712 #content.user-page h1.listing + .post-meta .post-section::before {
713 right
: calc(100%
- 5.1em
);
717 #content.conversations-user-page h1.listing {
718 padding
: 8px
6px
8px
10px
;
721 #content.conversations-user-page h1.listing + .post-meta {
722 padding
: 0 10px
6px
4px
;
726 .user
-stats
.karma
-total
{
734 #content.search-results-page h1.listing {
742 #content.conversation-page h1.page-main-heading {
751 .login
-container form input
[type
='submit'] {
753 background
-color
: #eee;
754 border
: 1px solid
#ccc;
756 .login
-container form input
[type
='submit']:hover
,
757 .login
-container form input
[type
='submit']:focus
{
758 background
-color
: #ddd;
759 border
: 1px solid
#aaa;
762 /* “Create account” form */
765 background
-color
: #f3f3f3;
766 border
: 1px solid
#ddd;
768 #signup-form input[type='submit'] {
769 background
-color
: #e4e4e4;
770 border
: 1px solid
#ccc;
772 #signup-form input[type='submit']:hover {
773 background
-color
: #d8d8d8;
774 border
: 1px solid
#aaa;
779 .login
-container
.login
-tip
{
780 border
: 1px solid
#eee;
786 border
: 1px solid red
;
787 background
-color
: #faa;
790 border
: 1px solid green
;
791 background
-color
: #afa;
794 /*=====================*/
795 /* PASSWORD RESET PAGE */
796 /*=====================*/
798 .reset
-password
-container input
[type
='submit'] {
799 background
-color
: #e4e4e4;
800 border
: 1px solid
#ccc;
804 /*===================*/
805 /* TABLE OF CONTENTS */
806 /*===================*/
809 font
-family
: <?php
echo $UI_font; ?
>;
810 border
: 1px solid
#ddd;
811 background
-color
: #eee;
812 padding
: 0.75em
0.5em
0.5em
0.5em
;
818 .body
-text
.contents ul
{
821 .body
-text
.contents li
::before
{
823 font
-feature
-settings
: "tnum";
826 .contents
.toc
-collapse
-toggle
-button
{
830 .contents
.toc
-collapse
-toggle
-button
:hover
{
834 /*==================*/
835 /* POSTS & COMMENTS */
836 /*==================*/
839 font
-family
: <?php
echo $text_font; ?
>;
843 text
-decoration
: underline
;
850 /*=================*/
851 /* POST NAVIGATION */
852 /*=================*/
857 background
-color
: #f5f5f5;
865 box
-shadow
: -9px
0 0 -8px
#d6d5d6;
868 @media only screen
and (max
-width
: 900px
) {
870 padding
: 0.5em
0.75em
0.5em
0.5em
;
873 box
-shadow
: 0 -9px
0 -8px
#d6d5d6;
876 padding
: 0.5em
0.5em
0.5em
0.75em
;
880 .crosspost
, .crosspost
:visited
{
882 background
-color
: #f8f8f8;
883 border
: 1px solid
#ccc;
893 .post
-meta
.post
-section
::before
,
894 .comment
-meta
.alignment
-forum
{
901 a
.post
-section
:hover
::before
{
904 .post
-meta
.post
-section
.alignment
-forum
::before
{
910 a
.post
-section
.alignment
-forum
:hover
::before
{
921 justify
-content
: flex
-start
;
924 .post
.post
-meta
.author
{
927 text
-decoration
: none
;
929 .post
.post
-meta
.author
:hover
{
932 .post
.post
-meta
.date
{
938 text
-decoration
: underline
;
940 .post
.post
-meta a
:hover
{
944 .post
.post
-meta
.voting
-controls
{
947 .post
.post
-meta
.karma
-value
{
948 background
-color
: #538d4d;
951 font
-size
: 0.8125rem
;
952 border
-radius
: 1.125em
;
953 padding
: 2px
6px
1px
6px
;
960 .post
.post
-meta
.karma
-value span
,
961 .post
.post
-meta
.lw2
-link span
,
962 .post
.post
-meta
.comment
-count span
{
966 .post
.post
-meta
.comment
-count
::before
{
967 content
: "Comments ("
969 .post
.post
-meta
.comment
-count
::after
{
973 .post
.post
-meta
.post
-section
::before
{
978 .post
.bottom
-post
-meta
.post
-section
::before
{
986 .post
.link
-post
> .post
-body
> p
:first
-child
{
989 .post
.link
-post a
.link
-post
-link
{
990 text
-decoration
: none
;
991 font
-family
: <?php
echo $UI_font; ?
>;
994 .post
.link
-post a
.link
-post
-link
:hover
{
997 .post
.link
-post a
.link
-post
-link
:hover
::before
{
1001 -0.5px
-0.5px
0 #fff,
1005 .post
.link
-post a
.link
-post
-link
:focus
{
1007 border
-bottom
: 2px dotted
#aaa;
1015 font
-size
: 1.375rem
;
1017 margin
: 2em
0 0.5em
0;
1026 border
-top
: 1px solid
#000;
1027 box
-shadow
: 0 3px
4px
-4px
#000 inset;
1029 @supports
(-moz
-appearance
: none
) {
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
#444;
1039 background
-color
: #fff;
1043 #content > .comment-thread .comment-meta a.date:focus + *,
1044 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1048 border
: 1px solid
#bbbcbf;
1049 background
-color
: var(--GW
-comment
-background
-color
);
1051 .comment
-item
.comment
-item
{
1052 margin
: 1em
-1px
8px
16px
;
1054 .comment
-item
.comment
-item +
.comment
-item
{
1055 margin
: 2em
-1px
8px
16px
;
1057 .comment
-parent
-link
::after
{
1059 0 28px
16px
-16px
var(--GW
-comment
-parent
-background
-color
) inset
,
1060 4px
16px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
,
1061 4px
4px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
;
1064 /*================================*/
1065 /* DEEP COMMENT THREAD COLLAPSING */
1066 /*================================*/
1068 .comment
-item input
[id^
="expand"] + label
::after
{
1069 color
: <?php
echo $hyperlink_color; ?
>;
1072 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
1075 .comment
-item input
[id^
="expand"] + label
:active
::after
,
1076 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
1079 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
1080 border
-width
: 1px
0 0 0;
1088 font
-size
: 0.9375rem
;
1091 .comment
-meta
.author
{
1095 .comment
-meta
.date
{
1099 .comment
-meta
.date
:hover
{
1102 .comment
-meta
.karma
-value
,
1103 .comment
-controls
.voting
-controls
.karma
-value
{
1106 margin
-right
: 0.5em
;
1108 .comment
-meta
.karma
-value
:only
-child
{
1111 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
1115 .comment
-item
.voting
-controls
.active
-controls
::after
,
1116 .comment
-item
.voting
-controls
.karma
-value
::after
,
1117 .post
.voting
-controls
.active
-controls
::after
,
1118 .post
.voting
-controls
.karma
-value
::after
,
1120 background
-color
: #fff;
1122 box
-shadow
: 0 0 0 1px
#ccc inset;
1125 .comment
-item
.voting
-controls
.active
-controls
::after
,
1126 .post
.voting
-controls
.active
-controls
::after
{
1132 .comment
-item
.voting
-controls
.karma
-value
::after
,
1133 .post
.voting
-controls
.karma
-value
::after
{
1137 font
-weight
: normal
;
1140 /*====================*/
1141 /* COMMENT PERMALINKS */
1142 /*====================*/
1144 .comment
-meta
.permalink
,
1145 .comment
-meta
.lw2
-link
,
1146 .individual
-thread
-page
.comment
-parent
-link
:empty {
1148 filter
: grayscale(50%
);
1150 .comment
-meta
.permalink
,
1151 .comment
-meta
.lw2
-link
,
1152 .individual
-thread
-page
.comment
-parent
-link
:empty {
1156 /*====================*/
1157 /* ANTI-KIBITZER MODE */
1158 /*====================*/
1161 .inline
-author
.redacted
{
1166 .karma
-value
.redacted
{
1170 .link
-post
-domain
.redacted
{
1174 /*===========================*/
1175 /* COMMENT THREAD NAVIGATION */
1176 /*===========================*/
1178 div
.comment
-parent
-link
{
1181 a
.comment
-parent
-link
{
1182 font
-weight
: normal
;
1184 a
.comment
-parent
-link
::before
{
1187 a
.comment
-parent
-link
:hover
::before
{
1188 background
-color
: #ffd;
1192 div
.comment
-child
-links
{
1195 div
.comment
-child
-links a
{
1196 font
-weight
: normal
;
1198 .comment
-child
-link
::before
{
1202 .comment
-item
-highlight
{
1209 border
: 1px solid
#e7b200;
1211 .comment
-item
-highlight
-faint
{
1218 border
: 1px solid
#f8e7b5;
1222 background
-color
: #fff;
1225 /*=======================*/
1226 /* COMMENTS COMPACT VIEW */
1227 /*=======================*/
1229 #comments-list-mode-selector button {
1231 0 0 0 4px
#fff inset,
1232 0 0 0 5px
#bbb inset;
1234 #comments-list-mode-selector button:hover,
1235 #comments-list-mode-selector button.selected {
1237 0 0 0 5px
#bbb inset;
1239 #content.compact > .comment-thread .comment-item {
1242 #content.compact > .comment-thread .comment-item::after {
1243 color
: <?php
echo $hyperlink_color; ?
>;
1244 background
: linear
-gradient(to right
, transparent
0%
, #fff 50%, #fff 100%);
1247 @media only screen
and (hover
: hover
) {
1248 #content.compact > .comment-thread .comment-item:hover .comment,
1249 #content.compact > .comment-thread .comment-item.expanded .comment {
1250 background
-color
: #fff;
1251 outline
: 3px solid
<?php
echo $hyperlink_color; ?
>;
1253 #content.compact > .comment-thread .comment-item:hover .comment::before,
1254 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1255 background
-color
: #fff;
1266 @media only screen
and (hover
: none
) {
1267 #content.compact > .comment-thread.expanded .comment-item .comment {
1268 background
-color
: #fff;
1269 outline
: 3px solid
<?php
echo $hyperlink_color; ?
>;
1271 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1272 background
-color
: #fff;
1284 #content.user-page.compact > h1.listing {
1287 #content.user-page.compact > h1.listing + .post-meta {
1288 margin
-bottom
: 0.5rem
;
1291 /*===========================*/
1292 /* HIGHLIGHTING NEW COMMENTS */
1293 /*===========================*/
1295 .new-comment
::before
{
1296 outline
: 2px solid
#5a5;
1298 0 0 6px
-2px
#5a5 inset,
1303 /*=================================*/
1304 /* COMMENT THREAD MINIMIZE BUTTONS */
1305 /*=================================*/
1307 .comment
-meta
.comment
-minimize
-button
{
1311 .comment
-meta
.comment
-minimize
-button
::after
{
1314 .comment
-minimize
-button
{
1317 .comment
-minimize
-button
:hover
{
1320 .comment
-minimize
-button
::after
{
1321 font
-family
: <?php
echo $UI_font; ?
>;
1324 .comment
-minimize
-button
.maximized
::after
{
1344 .karma
.upvote
::before
{
1347 .karma
.downvote
::before
{
1351 .karma
.upvote
::after
{
1356 .karma
.downvote
::after
{
1362 .agreement
.upvote
::before
{
1365 .agreement
.downvote
::before
{
1369 .agreement
.upvote
::after
{
1374 .agreement
.downvote
::after
{
1394 @media only screen
and (min
-resolution
: 192dpi
) {
1398 -0.5px
0.5px
0 #aaa,
1399 0.5px
-0.5px
0 #aaa,
1400 -0.5px
-0.5px
0 #aaa;
1407 .upvote
:not(.none
) {
1408 color
: var(--GW
-upvote
-button
-color
);
1416 .downvote
:not(.none
) {
1417 color
: var(--GW
-downvote
-button
-color
);
1424 @media only screen
and (min
-resolution
: 192dpi
) {
1426 .upvote
:not(.none
) {
1429 -0.5px
0.5px
0 #060,
1430 0.5px
-0.5px
0 #060,
1431 -0.5px
-0.5px
0 #060;
1434 .downvote
:not(.none
) {
1437 -0.5px
0.5px
0 #900,
1438 0.5px
-0.5px
0 #900,
1439 -0.5px
-0.5px
0 #900;
1451 .vote
.two
-temp
::after
,
1453 visibility
: visible
;
1458 .vote
.two
-temp
::after
{
1471 .vote
:disabled
:hover
{
1478 -1px
-1px
0 #d8d8d8;
1480 @media only screen
and (min
-resolution
: 192dpi
) {
1482 .vote
:disabled
:hover
{
1484 0.5px
0.5px
0 #d8d8d8,
1485 -0.5px
0.5px
0 #d8d8d8,
1486 0.5px
-0.5px
0 #d8d8d8,
1487 -0.5px
-0.5px
0 #d8d8d8;
1491 .comment
-controls
.voting
-controls
:first
-of
-type
{
1494 .comment
-controls
.voting
-controls
{
1498 /*===========================*/
1499 /* COMMENTING AND POSTING UI */
1500 /*===========================*/
1502 .posting
-controls input
[type
='submit'] {
1503 background
-color
: #fff;
1504 border
: 1px solid
#aaa;
1507 .posting
-controls input
[type
='submit']:hover
,
1508 .posting
-controls input
[type
='submit']:focus
{
1509 background
-color
: #ddd;
1510 border
: 1px solid
#999;
1513 .comment
-controls
.cancel
-comment
-button
{
1521 margin
-right
: 0.375em
;
1523 .comment
-controls
.cancel
-comment
-button
::before
{
1526 .comment
-controls
.cancel
-comment
-button
:hover
{
1530 .new-comment
-button
{
1534 .comment
-controls
.action
-button
::before
{
1537 .comment
-controls
.action
-button
::after
{
1538 content
: attr(data
-label
);
1542 text
-transform
: uppercase
;
1546 .comment
-controls
.action
-button
:hover
::after
{
1547 visibility
: visible
;
1549 .comment
-controls
.delete
-button
::before
,
1550 .comment
-controls
.retract
-button
::before
{
1553 .comment
-controls
.delete
-button
::after
{
1554 transform
: translateX(-8px
);
1556 .comment
-controls
.retract
-button
::after
{
1557 transform
: translateX(-8px
);
1559 .comment
-controls
.unretract
-button
::after
{
1560 transform
: translateX(-18px
);
1562 .comment
-controls
.reply
-button
::before
{
1565 font
-size
: 1.125rem
;
1568 .comment
-controls
.reply
-button
::after
{
1569 transform
: translateX(-4px
);
1571 .comment
-controls
.edit
-button
::before
{
1572 font
-size
: 0.9375em
;
1575 .comment
-controls
.unretract
-button
::before
{
1576 font
-size
: 1.125rem
;
1579 .comment
-controls
.edit
-button
::after
{
1580 transform
: translateX(-1px
);
1582 .comment
-item
.comment
-controls
.action
-button
:hover
::before
{
1585 0.5px
0.5px
0.5px
#f77;
1588 h1
.listing
.edit
-post
-link
,
1589 h1
.listing
.edit
-post
-link
:visited
,
1590 .post
-controls
.edit
-post
-link
,
1591 .post
-controls
.edit
-post
-link
:visited
{
1594 h1
.listing
.edit
-post
-link
:hover
,
1595 .post
-controls
.edit
-post
-link
:hover
{
1599 .posting
-controls textarea
{
1600 font
-family
: <?php
echo $text_font; ?
>;
1603 background
-color
: #fff;
1606 0 0 0 1px
#eee inset;
1608 .posting
-controls textarea
:focus
{
1609 background
-color
: #ffd;
1610 border
-color
: <?php
echo $hyperlink_color; ?
>;
1612 0 0 0 1px
#ddf inset,
1614 0 0 0 2px
<?php
echo $hyperlink_color; ?
>;
1616 .posting
-controls
.edit
-existing
-post textarea
:focus
,
1617 .posting
-controls form
.edit
-existing
-comment textarea
:focus
{
1620 0 0 0 1px
#81ff7f inset,
1625 /* GUIEdit buttons */
1627 .guiedit
-buttons
-container
{
1628 background
-image
: linear
-gradient(to bottom
, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1631 .posting
-controls
.edit
-existing
-post
.guiedit
-buttons
-container button
,
1632 .posting
-controls form
.edit
-existing
-comment
.guiedit
-buttons
-container button
{
1635 .guiedit
-buttons
-container button
{
1636 font
-family
: Font Awesome
, <?php
echo $text_font; ?
>;
1640 font
-family
: <?php
echo $UI_font; ?
>;
1646 /* Markdown hints */
1648 #markdown-hints-checkbox + label {
1649 color
: <?php
echo $hyperlink_color; ?
>;
1651 #markdown-hints-checkbox + label:hover {
1655 border
: 1px solid
#c00;
1656 background
-color
: #ffa;
1659 /*================*/
1660 /* EDIT POST FORM */
1661 /*================*/
1663 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1665 border
: 1px solid
#ddd;
1669 @media only screen
and (hover
:hover
) {
1670 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1671 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1677 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1678 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1682 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1685 #edit-post-form input[type='radio'] + label {
1689 #edit-post-form input[type='radio'][value='all'] + label {
1690 border
-radius
: 8px
0 0 8px
;
1693 #edit-post-form input[type='radio'][value='drafts'] + label {
1694 border
-radius
: 0 8px
8px
0;
1696 #edit-post-form input[type='radio'] + label:hover,
1697 #edit-post-form input[type='radio']:focus + label {
1698 background
-color
: #ddd;
1701 #edit-post-form input[type='radio']:focus + label {
1706 #edit-post-form input[type='radio']:checked + label {
1707 background
-color
: #ddd;
1714 #edit-post-form #markdown-hints-checkbox + label {
1715 padding
: 3px
0 0 14px
;
1723 text
-decoration
: none
;
1724 color
: <?php
echo $hyperlink_color; ?
>;
1738 input
[type
='submit'] {
1739 color
: <?php
echo $hyperlink_color; ?
>;
1743 input
[type
='submit']:hover
,
1745 input
[type
='submit']:focus
{
1749 input
[type
='submit']:active
{
1751 transform
: scale(0.9);
1754 color
: <?php
echo $hyperlink_color; ?
>;
1758 text
-decoration
: none
;
1761 transform
: scale(0.9);
1763 .button
:focus
:not(:hover
) {
1766 @supports
(-moz
-appearance
: none
) {
1779 font
-family
: <?php
echo $UI_font; ?
>;
1790 border
-bottom
: 1px solid
#aaa;
1798 border
-left
: 5px solid
#ccc;
1806 #content figure.image img {
1807 border
: 1px solid
#ccc;
1809 #content figure img {
1810 border
: 1px solid
#000;
1812 #content img[src$='.svg'],
1813 #content figure img[src$='.svg'] {
1816 #content img[style^='float'] {
1817 border
: 1px solid transparent
;
1824 #content:not(.tag-index-page) .body-text table,
1825 #content:not(.tag-index-page) .body-text table th,
1826 #content:not(.tag-index-page) .body-text table td {
1827 border
: 1px solid
#bbb;
1835 border
-bottom
: 1px solid
#999;
1839 background
-color
: #f6f6ff;
1840 border
: 1px solid
#ddf;
1845 input
[type
='search'],
1846 input
[type
='password'] {
1847 background
-color
: #fff;
1848 border
: 1px solid
#ddd;
1851 input
[type
='text']:focus
,
1852 input
[type
='search']:focus
,
1853 input
[type
='password']:focus
{
1854 background
-color
: #ffd;
1855 border
: 1px solid
#bbb;
1856 box
-shadow
: 0 0 1px
#bbb;
1868 background
-color
: #e6e6e6;
1869 text
-decoration
: none
;
1871 0 -1px
0 0 #000 inset,
1872 0 -3px
1px
-2px
#000 inset;
1876 #content.about-page .accesskey-table {
1877 font
-family
: <?php
echo $UI_font; ?
>;
1881 #content.about-page img {
1882 border
: 1px solid
#000;
1885 /*========================*/
1886 /* QUALIFIED HYPERLINKING */
1887 /*========================*/
1892 #aux-about-link a:hover {
1896 .qualified
-linking label
{
1897 color
: <?php
echo $hyperlink_color; ?
>;
1899 .qualified
-linking label
:hover
{
1906 .qualified
-linking
-toolbar
{
1907 border
: 1px solid
#000;
1908 background
-color
: #fff;
1910 .qualified
-linking
-toolbar a
{
1911 background
-color
: #eee;
1912 border
: 1px solid
#ccc;
1915 white
-space
: nowrap
;
1917 .qualified
-linking
-toolbar a
:visited
{
1918 color
: <?php
echo $hyperlink_color; ?
>;
1920 .qualified
-linking
-toolbar a
:hover
{
1921 text
-decoration
: none
;
1922 background
-color
: #ddd;
1924 .qualified
-linking label
::after
{
1925 background
-color
: #d8d8d8;
1933 .mathjax
-block
-container
::-webkit
-scrollbar
{
1935 background
-color
: #f6f6ff;
1937 border
: 1px solid
#ddf;
1939 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1940 background
-color
: #dde;
1942 border
: 1px solid
#cce;
1944 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1946 background
-color
: #f6f6ff;
1948 border
: 1px solid
#ddf;
1950 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1951 background
-color
: #dde;
1953 border
: 1px solid
#cce;
1961 .textarea
-container
.autocomplete
-container
{
1962 background
-color
: rgba(255, 255, 170, 0.75);
1963 border
: 1px solid
rgba(170, 170, 170, 0.75);
1966 .textarea
-container
.autocomplete
-container div
.highlighted
{
1967 background
-color
: rgba(170, 170, 170, 0.75);
1971 .textarea
-container
.autocomplete
-container div
:not(.highlighted
):hover
{
1972 background
-color
: rgba(136, 136, 136, 0.25);
1975 .textarea
-container
.autocomplete
-container div span
.age
,
1976 .textarea
-container
.autocomplete
-container div span
.karma
{
1980 .textarea
-container
.autocomplete
-container div span
.karma
{
1985 /*=================*/
1986 /* ALIGNMENT FORUM */
1987 /*=================*/
1989 #content.alignment-forum-index-page::before {
1990 background
-color
: #f4f5ff;
1992 #content.alignment-forum-index-page::after {
1993 font
-family
: "Concourse SmallCaps";
1995 background
-color
: #7f85b2;
1997 -webkit
-background
-clip
: text
;
1999 rgba(255,255,255,0.5) 0px
3px
3px
;
2001 @media only screen
and (hover
: hover
) {
2002 #content.alignment-forum-index-page h1.listing a:hover,
2003 #content.alignment-forum-index-page h1.listing a:focus {
2004 background
-color
: rgba(244,245,255,0.85);
2008 /*====================*/
2009 /* FOR NARROW SCREENS */
2010 /*====================*/
2012 @media only screen
and (max
-width
: 1440px
) {
2014 background
-color
: #d8d8d8;
2017 #hns-date-picker::before {
2018 border
: 1px solid
#999;
2019 border
-width
: 1px
0 1px
1px
;
2022 @media only screen
and (max
-width
: 1160px
) {
2024 background
-color
: #d8d8d8;
2027 0 0 0 2px transparent
;
2029 #theme-selector:hover::after {
2030 width
: calc(6em
- 9px
);
2031 height
: calc(100%
- 5px
);
2035 #text-size-adjustment-ui button {
2036 background
-color
: #ddd;
2038 #text-size-adjustment-ui button:hover {
2039 background
-color
: #eee;
2041 #theme-tweaker-toggle button {
2042 background
-color
: #ddd;
2045 @media only screen
and (max
-width
: 1080px
) {
2046 #text-size-adjustment-ui button {
2047 border
: 1px solid
#999;
2052 0 0 0 1px transparent
;
2054 #theme-tweaker-toggle button {
2055 border
: 1px solid
#999;
2057 0 0 10px
#999 inset,
2058 0 0 0 1px transparent
;
2060 transform
: scale(0.8);
2063 @media only screen
and (max
-width
: 1020px
) {
2067 0 0 0 2px transparent
;
2069 #new-comment-nav-ui .new-comments-count::before {
2070 background
-color
: #d8d8d8;
2073 0 0 0 2px transparent
;
2076 #anti-kibitzer-toggle {
2077 background
-color
: #d8d8d8;
2080 0 0 0 2px transparent
;
2090 /*******************************************/
2091 @media only screen
and (max
-width
: 1160px
) {
2092 /*******************************************/
2094 #ui-elements-container > div[id$='-ui-toggle'] button {
2106 background
-color
: #d8d8d8;
2114 border
-radius
: 12px
;
2116 #theme-selector::before,
2117 #theme-selector .theme-selector-close-button {
2119 font
-weight
: normal
;
2121 #theme-selector button {
2122 background
-color
: #e6e6e6;
2123 border
-radius
: 10px
;
2125 #theme-selector button::after {
2127 max
-width
: calc(100%
- 3.5em
);
2129 text
-overflow
: ellipsis
;
2130 padding
-bottom
: 1px
;
2132 #theme-selector button.selected::after {
2139 #theme-selector .auxiliary-controls-container {
2140 border
-top
-color
: #999;
2142 #theme-selector .auxiliary-controls-container button {
2143 background
-color
: #e6e6e6;
2145 0 0 10px
0 #999 inset,
2146 0 0 0 1px transparent
;
2147 border
: 1px solid
#999;
2149 #theme-selector #anti-kibitzer-toggle button::before,
2150 #theme-selector #anti-kibitzer-toggle button::after {
2151 background
-color
: #444;
2153 #theme-selector #dark-mode-selector {
2154 background
-color
: #e6e6e6;
2156 0 0 10px
0 #999 inset,
2157 0 0 0 1px transparent
;
2158 border
: 1px solid
#999;
2160 #theme-selector #dark-mode-selector button.selected {
2161 background
-color
: #999;
2163 box
-shadow
: 0 0 2px
0 #999;
2167 background
-color
: #fff;
2170 #new-comment-nav-ui,
2179 #quick-nav-ui a::after,
2180 #new-comment-nav-ui::before {
2181 font
-family
: <?php
echo $UI_font; ?
>;
2187 background
-color
: #fff;
2191 #new-comment-nav-ui {
2194 #new-comment-nav-ui {
2195 background
-color
: #e4e4e4;
2196 border
: 1px solid
#999;
2198 #new-comment-nav-ui::before {
2202 #new-comment-nav-ui .new-comment-sequential-nav-button {
2203 box
-shadow
: 0 0 0 1px
#999;
2206 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2209 #new-comment-nav-ui .new-comments-count {
2210 background
-color
: inherit
;
2211 box
-shadow
: 0 -1px
0 0 #999;
2213 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2214 border
-radius
: 7px
0 0 7px
;
2216 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2217 border
-radius
: 0 7px
7px
0;
2219 #new-comment-nav-ui button::after {
2220 font
-family
: <?php
echo $UI_font; ?
>;
2223 background
-color
: #e4e4e4;
2224 border
: 1px solid
#999;
2227 /*****************************************/
2228 @media only screen
and (max
-width
: 900px
) {
2229 /*****************************************/
2230 h1
.listing +
.post
-meta
.post
-section
{
2235 h1
.listing +
.post
-meta
.post
-section
::before
{
2239 #primary-bar .nav-inner {
2242 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
2245 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2249 .archive
-nav
*[class^
='archive-nav-item-'] {
2250 border
-width
: 1px
!important
;
2252 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
2253 background
-color
: #aaa;
2256 .comment
-item
.comment
-item
{
2257 margin
: 0.75em
0 3px
6px
;
2259 .comment
-item
.comment
-item +
.comment
-item
{
2260 margin
: 1.5em
0 3px
6px
;
2263 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
2264 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
2265 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
2270 /*******************************************/
2271 } @media only screen
and (max
-width
: 720px
) {
2272 /*******************************************/
2273 .post
-meta
.comment
-count
::before
{
2274 font
-family
: inherit
;
2278 /*******************************************/
2279 } @media only screen
and (max
-width
: 520px
) {
2280 /*******************************************/
2281 #primary-bar.inactive-bar .nav-inner {
2287 margin
: 18px
6px
4px
6px
;
2288 max
-width
: calc(100%
- 12px
);
2291 h1
.listing
.link
-post
-link
{
2294 h1
.listing +
.post
-meta
{
2297 h1
.listing +
.post
-meta
> *:not(.karma
) {
2301 h1
.listing +
.post
-meta
.karma
-value
{
2303 right
: calc(100%
- 2.25em
);
2306 #content.compact > .comment-thread .comment-item {
2310 .textarea
-container
:focus
-within textarea
{
2311 background
-color
: #fff;
2313 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
2317 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
2322 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2323 background
-color
: #fff;
2324 border
-top
: 1px solid
#ddf;
2326 .posting
-controls
.textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2329 #content.conversation-page .textarea-container:focus-within::after {
2330 background
-color
: #fff;
2332 .textarea
-container
:focus
-within button
.guiedit
{
2333 border
: 1px solid
#6a8a6b;
2337 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2340 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2344 #edit-post-form textarea {
2345 min
-height
: calc(100vh
- 345px
);