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 /* ANTI-KIBITZER TOGGLE */
392 /*======================*/
394 #anti-kibitzer-toggle button::before,
395 #anti-kibitzer-toggle button::after {
396 background
-color
: #888;
397 -webkit
-background
-clip
: text
;
399 text
-shadow
: rgba(255,255,255,0.5) 0px
1px
1px
;
401 #anti-kibitzer-toggle button:hover::before,
402 #anti-kibitzer-toggle button:hover::after {
403 background
-color
: #444;
406 /*======================*/
407 /* TEXT SIZE ADJUSTMENT */
408 /*======================*/
410 #text-size-adjustment-ui button {
413 #text-size-adjustment-ui button:hover {
416 #text-size-adjustment-ui button.default {
419 #text-size-adjustment-ui button:disabled:hover {
422 #text-size-adjustment-ui::after {
426 /*=============================*/
427 /* COMMENTS VIEW MODE SELECTOR */
428 /*=============================*/
430 #comments-view-mode-selector a {
438 #keyboard-help-overlay .keyboard-help-container .keys {
447 border
: 1px solid
#aaa;
449 .archive
-nav
*[class^
='archive-nav-item'] {
452 border
-width
: 1px
0 1px
1px
;
453 background
-color
: #eee;
455 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
457 border
-bottom
-width
: 0;
459 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
460 border
-bottom
-width
: 1px
;
462 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
463 border
-right
-width
: 1px
;
465 .archive
-nav span
[class^
='archive-nav-item'] {
467 background
-color
: #ddd;
471 .archive
-nav a
:visited
{
472 color
: rgba(0, 0, 238, 0.7);
474 .archive
-nav a
:hover
{
475 text
-decoration
: none
;
477 background
-color
: #e0e0e0;
479 .archive
-nav a
:active
{
480 transform
: scale(0.9);
482 .archive
-nav a
:focus
:not(:hover
) {
485 .archive
-nav a
.archive
-nav
-item
-day
:hover
{
486 background
-color
: #ddd;
494 margin
: 1.125em
20px
0.25em
20px
;
495 max
-width
: calc(100%
- 40px
);
496 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
502 h1
.listing
.post
-title
-link
{
507 h1
.listing
.post
-title
:visited
{
510 h1
.listing
.link
-post
-link
{
514 @media only screen
and (hover
: hover
) {
518 text
-decoration
: none
;
521 border
-bottom
: 1px dotted
#999;
523 h1
.listing
:focus
-within
::before
{
526 h1
.listing
:focus
-within +
.post
-meta
.karma
-value
{
531 h1
.listing
.link
-post
-link
:hover
,
532 h1
.listing
.link
-post
-link
:focus
{
536 -0.5px
-0.5px
0 #fff,
543 h1
.listing
.edit
-post
-link
{
544 padding
: 5px
3px
12px
0.5em
;
548 h1
.listing
.edit
-post
-link
:hover
{
549 text
-decoration
: none
;
551 #content.user-page h1.listing .edit-post-link {
552 background
-color
: #f7f7f8;
562 h1
.listing
.spam +
.post
-meta
{
565 h1
.listing
.spam
:hover
,
566 h1
.listing
.spam +
.post
-meta
:hover
,
567 h1
.listing
.spam
:hover +
.post
-meta
{
571 /*===================*/
572 /* LISTING POST-META */
573 /*===================*/
575 h1
.listing +
.post
-meta
{
576 font
-size
: 0.8125rem
;
579 justify
-content
: flex
-end
;
582 h1
.listing +
.post
-meta
.author
{
585 text
-decoration
: none
;
589 h1
.listing +
.post
-meta
.author
:hover
{
592 h1
.listing +
.post
-meta
.date
,
593 h1
.listing +
.post
-meta
.read
-time
{
597 h1
.listing +
.post
-meta a
{
599 text
-decoration
: underline
;
601 h1
.listing +
.post
-meta a
:hover
{
605 h1
.listing +
.post
-meta
.karma
-value
{
606 background
-color
: #538d4d;
609 font
-size
: 0.8125rem
;
610 border
-radius
: 1.0625em
;
611 padding
: 2px
6px
1px
6px
;
616 right
: calc(100%
- 1.75em
);
619 h1
.listing +
.post
-meta
.karma
-value span
,
620 h1
.listing +
.post
-meta
.lw2
-link span
,
621 h1
.listing +
.post
-meta
.comment
-count span
{
625 h1
.listing +
.post
-meta
> * {
629 h1
.listing +
.post
-meta
.read
-time
{
633 h1
.listing +
.post
-meta
.comment
-count
{
636 h1
.listing +
.post
-meta
.comment
-count
::before
{
637 content
: "Comments ("
639 h1
.listing +
.post
-meta
.comment
-count
::after
{
642 h1
.listing +
.post
-meta
.date
{
646 h1
.listing +
.post
-meta
.lw2
-link
{
650 h1
.listing +
.post
-meta
.post
-section
{
652 text
-decoration
: none
;
654 h1
.listing +
.post
-meta
.post
-section
::before
{
656 right
: calc(100% +
1.15em
);
659 h1
.listing +
.post
-meta
.link
-post
-domain
{
668 #content.user-page h1.page-main-heading {
669 border
-bottom
: 1px solid
#ccc;
672 #content.user-page h1.listing,
673 #content.user-page h1.listing + .post-meta {
674 background
-color
: #f7f7f8;
676 border
-color
: #bbbcbf;
679 #content.user-page h1.listing {
680 padding
: 0.5em
6px
0 48px
;
681 border
-width
: 1px
1px
0 1px
;
685 #content.own-user-page h1.listing,
686 h1
.listing
.own
-post
-listing
{
689 #content.user-page h1.listing a:hover {
690 background
-color
: #f7f7f8;
693 #content.user-page h1.listing + .post-meta {
694 padding
: 0.25em
10px
0.5em
32px
;
695 border
-width
: 0 1px
1px
1px
;
698 #content.user-page h1.listing + .post-meta .karma-value {
699 right
: calc(100%
- 3.25em
);
702 #content.user-page h1.listing + .post-meta .post-section::before {
703 right
: calc(100%
- 5.1em
);
707 #content.conversations-user-page h1.listing {
708 padding
: 8px
6px
8px
10px
;
711 #content.conversations-user-page h1.listing + .post-meta {
712 padding
: 0 10px
6px
4px
;
716 .user
-stats
.karma
-total
{
724 #content.search-results-page h1.listing {
732 #content.conversation-page h1.page-main-heading {
741 .login
-container form input
[type
='submit'] {
743 background
-color
: #eee;
744 border
: 1px solid
#ccc;
746 .login
-container form input
[type
='submit']:hover
,
747 .login
-container form input
[type
='submit']:focus
{
748 background
-color
: #ddd;
749 border
: 1px solid
#aaa;
752 /* “Create account” form */
755 background
-color
: #f3f3f3;
756 border
: 1px solid
#ddd;
758 #signup-form input[type='submit'] {
759 background
-color
: #e4e4e4;
760 border
: 1px solid
#ccc;
762 #signup-form input[type='submit']:hover {
763 background
-color
: #d8d8d8;
764 border
: 1px solid
#aaa;
769 .login
-container
.login
-tip
{
770 border
: 1px solid
#eee;
776 border
: 1px solid red
;
777 background
-color
: #faa;
780 border
: 1px solid green
;
781 background
-color
: #afa;
784 /*=====================*/
785 /* PASSWORD RESET PAGE */
786 /*=====================*/
788 .reset
-password
-container input
[type
='submit'] {
789 background
-color
: #e4e4e4;
790 border
: 1px solid
#ccc;
794 /*===================*/
795 /* TABLE OF CONTENTS */
796 /*===================*/
799 font
-family
: <?php
echo $UI_font; ?
>;
800 border
: 1px solid
#ddd;
801 background
-color
: #eee;
802 padding
: 0.75em
0.5em
0.5em
0.5em
;
808 .body
-text
.contents ul
{
811 .body
-text
.contents li
::before
{
813 font
-feature
-settings
: "tnum";
816 /*==================*/
817 /* POSTS & COMMENTS */
818 /*==================*/
821 font
-family
: <?php
echo $text_font; ?
>;
825 text
-decoration
: underline
;
832 /*=================*/
833 /* POST NAVIGATION */
834 /*=================*/
839 background
-color
: #f5f5f5;
847 box
-shadow
: -9px
0 0 -8px
#d6d5d6;
850 @media only screen
and (max
-width
: 900px
) {
852 padding
: 0.5em
0.75em
0.5em
0.5em
;
855 box
-shadow
: 0 -9px
0 -8px
#d6d5d6;
858 padding
: 0.5em
0.5em
0.5em
0.75em
;
862 .crosspost
, .crosspost
:visited
{
864 background
-color
: #f8f8f8;
865 border
: 1px solid
#ccc;
875 .post
-meta
.post
-section
::before
,
876 .comment
-meta
.alignment
-forum
{
883 a
.post
-section
:hover
::before
{
886 .post
-meta
.post
-section
.alignment
-forum
::before
{
892 a
.post
-section
.alignment
-forum
:hover
::before
{
903 justify
-content
: flex
-start
;
906 .post
.post
-meta
.author
{
909 text
-decoration
: none
;
911 .post
.post
-meta
.author
:hover
{
914 .post
.post
-meta
.date
{
920 text
-decoration
: underline
;
922 .post
.post
-meta a
:hover
{
926 .post
.post
-meta
.voting
-controls
{
929 .post
.post
-meta
.karma
-value
{
930 background
-color
: #538d4d;
933 font
-size
: 0.8125rem
;
934 border
-radius
: 1.125em
;
935 padding
: 2px
6px
1px
6px
;
942 .post
.post
-meta
.karma
-value span
,
943 .post
.post
-meta
.lw2
-link span
,
944 .post
.post
-meta
.comment
-count span
{
948 .post
.post
-meta
.comment
-count
::before
{
949 content
: "Comments ("
951 .post
.post
-meta
.comment
-count
::after
{
955 .post
.post
-meta
.post
-section
::before
{
960 .post
.bottom
-post
-meta
.post
-section
::before
{
968 .post
.link
-post
> .post
-body
> p
:first
-child
{
971 .post
.link
-post a
.link
-post
-link
{
972 text
-decoration
: none
;
973 font
-family
: <?php
echo $UI_font; ?
>;
976 .post
.link
-post a
.link
-post
-link
:hover
{
979 .post
.link
-post a
.link
-post
-link
:hover
::before
{
983 -0.5px
-0.5px
0 #fff,
987 .post
.link
-post a
.link
-post
-link
:focus
{
989 border
-bottom
: 2px dotted
#aaa;
999 margin
: 2em
0 0.5em
0;
1008 border
-top
: 1px solid
#000;
1009 box
-shadow
: 0 3px
4px
-4px
#000 inset;
1011 @-moz
-document url
-prefix() {
1013 box
-shadow
: 0 3px
3px
-4px
#000 inset;
1016 #content > .comment-thread .comment-meta a.date:focus,
1017 #content > .comment-thread .comment-meta a.permalink:focus {
1019 outline
: 2px dotted
#444;
1021 background
-color
: #fff;
1025 #content > .comment-thread .comment-meta a.date:focus + *,
1026 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1030 border
: 1px solid
#bbbcbf;
1031 background
-color
: var(--GW
-comment
-background
-color
);
1033 .comment
-item
.comment
-item
{
1034 margin
: 1em
-1px
8px
16px
;
1036 .comment
-item
.comment
-item +
.comment
-item
{
1037 margin
: 2em
-1px
8px
16px
;
1039 .comment
-parent
-link
::after
{
1041 0 28px
16px
-16px
var(--GW
-comment
-parent
-background
-color
) inset
,
1042 4px
16px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
,
1043 4px
4px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
;
1046 /*================================*/
1047 /* DEEP COMMENT THREAD COLLAPSING */
1048 /*================================*/
1050 .comment
-item input
[id^
="expand"] + label
::after
{
1051 color
: <?php
echo $hyperlink_color; ?
>;
1054 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
1057 .comment
-item input
[id^
="expand"] + label
:active
::after
,
1058 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
1061 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
1062 border
-width
: 1px
0 0 0;
1070 font
-size
: 0.9375rem
;
1073 .comment
-meta
.author
{
1077 .comment
-meta
.date
{
1081 .comment
-meta
.date
:hover
{
1084 .comment
-meta
.karma
-value
,
1085 .comment
-controls
.voting
-controls
.karma
-value
{
1088 margin
-right
: 0.5em
;
1090 .comment
-meta
.karma
-value
:only
-child
{
1093 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
1097 .comment
-item
.voting
-controls
.active
-controls
::after
,
1098 .comment
-item
.voting
-controls
.karma
-value
::after
,
1099 .post
.voting
-controls
.active
-controls
::after
,
1100 .post
.voting
-controls
.karma
-value
::after
,
1102 background
-color
: #fff;
1104 box
-shadow
: 0 0 0 1px
#ccc inset;
1107 .comment
-item
.voting
-controls
.active
-controls
::after
,
1108 .post
.voting
-controls
.active
-controls
::after
{
1114 .comment
-item
.voting
-controls
.karma
-value
::after
,
1115 .post
.voting
-controls
.karma
-value
::after
{
1119 font
-weight
: normal
;
1122 /*====================*/
1123 /* COMMENT PERMALINKS */
1124 /*====================*/
1126 .comment
-meta
.permalink
,
1127 .comment
-meta
.lw2
-link
,
1128 .individual
-thread
-page
.comment
-parent
-link
:empty {
1130 filter
: grayscale(50%
);
1132 .comment
-meta
.permalink
,
1133 .comment
-meta
.lw2
-link
,
1134 .individual
-thread
-page
.comment
-parent
-link
:empty {
1138 /*====================*/
1139 /* ANTI-KIBITZER MODE */
1140 /*====================*/
1143 .inline
-author
.redacted
{
1148 .karma
-value
.redacted
{
1152 .link
-post
-domain
.redacted
{
1156 /*===========================*/
1157 /* COMMENT THREAD NAVIGATION */
1158 /*===========================*/
1160 div
.comment
-parent
-link
{
1163 a
.comment
-parent
-link
{
1164 font
-weight
: normal
;
1166 a
.comment
-parent
-link
::before
{
1169 a
.comment
-parent
-link
:hover
::before
{
1170 background
-color
: #ffd;
1174 div
.comment
-child
-links
{
1177 div
.comment
-child
-links a
{
1178 font
-weight
: normal
;
1180 .comment
-child
-link
::before
{
1184 .comment
-item
-highlight
{
1191 border
: 1px solid
#e7b200;
1193 .comment
-item
-highlight
-faint
{
1200 border
: 1px solid
#f8e7b5;
1204 background
-color
: #fff;
1207 /*=======================*/
1208 /* COMMENTS COMPACT VIEW */
1209 /*=======================*/
1211 #comments-list-mode-selector button {
1213 0 0 0 4px
#fff inset,
1214 0 0 0 5px
#bbb inset;
1216 #comments-list-mode-selector button:hover,
1217 #comments-list-mode-selector button.selected {
1219 0 0 0 5px
#bbb inset;
1221 #content.compact > .comment-thread .comment-item {
1224 #content.compact > .comment-thread .comment-item::after {
1225 color
: <?php
echo $hyperlink_color; ?
>;
1226 background
: linear
-gradient(to right
, transparent
0%
, #fff 50%, #fff 100%);
1229 @media only screen
and (hover
: hover
) {
1230 #content.compact > .comment-thread .comment-item:hover .comment,
1231 #content.compact > .comment-thread .comment-item.expanded .comment {
1232 background
-color
: #fff;
1233 outline
: 3px solid
<?php
echo $hyperlink_color; ?
>;
1235 #content.compact > .comment-thread .comment-item:hover .comment::before,
1236 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1237 background
-color
: #fff;
1248 @media only screen
and (hover
: none
) {
1249 #content.compact > .comment-thread.expanded .comment-item .comment {
1250 background
-color
: #fff;
1251 outline
: 3px solid
<?php
echo $hyperlink_color; ?
>;
1253 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1254 background
-color
: #fff;
1266 #content.user-page.compact > h1.listing {
1269 #content.user-page.compact > h1.listing + .post-meta {
1270 margin
-bottom
: 0.5rem
;
1273 /*===========================*/
1274 /* HIGHLIGHTING NEW COMMENTS */
1275 /*===========================*/
1277 .new-comment
::before
{
1278 outline
: 2px solid
#5a5;
1280 0 0 6px
-2px
#5a5 inset,
1285 /*=================================*/
1286 /* COMMENT THREAD MINIMIZE BUTTONS */
1287 /*=================================*/
1289 .comment
-meta
.comment
-minimize
-button
{
1293 .comment
-meta
.comment
-minimize
-button
::after
{
1296 .comment
-minimize
-button
{
1299 .comment
-minimize
-button
:hover
{
1302 .comment
-minimize
-button
::after
{
1303 font
-family
: <?php
echo $UI_font; ?
>;
1306 .comment
-minimize
-button
.maximized
::after
{
1326 .karma
.upvote
::before
{
1329 .karma
.downvote
::before
{
1333 .karma
.upvote
::after
{
1338 .karma
.downvote
::after
{
1344 .agreement
.upvote
::before
{
1347 .agreement
.downvote
::before
{
1351 .agreement
.upvote
::after
{
1356 .agreement
.downvote
::after
{
1376 @media only screen
and (min
-resolution
: 192dpi
) {
1380 -0.5px
0.5px
0 #aaa,
1381 0.5px
-0.5px
0 #aaa,
1382 -0.5px
-0.5px
0 #aaa;
1389 .upvote
:not(.none
) {
1390 color
: var(--GW
-upvote
-button
-color
);
1398 .downvote
:not(.none
) {
1399 color
: var(--GW
-downvote
-button
-color
);
1406 @media only screen
and (min
-resolution
: 192dpi
) {
1408 .upvote
:not(.none
) {
1411 -0.5px
0.5px
0 #060,
1412 0.5px
-0.5px
0 #060,
1413 -0.5px
-0.5px
0 #060;
1416 .downvote
:not(.none
) {
1419 -0.5px
0.5px
0 #900,
1420 0.5px
-0.5px
0 #900,
1421 -0.5px
-0.5px
0 #900;
1433 .vote
.two
-temp
::after
,
1435 visibility
: visible
;
1440 .vote
.two
-temp
::after
{
1453 .vote
:disabled
:hover
{
1460 -1px
-1px
0 #d8d8d8;
1462 @media only screen
and (min
-resolution
: 192dpi
) {
1464 .vote
:disabled
:hover
{
1466 0.5px
0.5px
0 #d8d8d8,
1467 -0.5px
0.5px
0 #d8d8d8,
1468 0.5px
-0.5px
0 #d8d8d8,
1469 -0.5px
-0.5px
0 #d8d8d8;
1473 .comment
-controls
.voting
-controls
:first
-of
-type
{
1476 .comment
-controls
.voting
-controls
{
1480 /*===========================*/
1481 /* COMMENTING AND POSTING UI */
1482 /*===========================*/
1484 .posting
-controls input
[type
='submit'] {
1485 background
-color
: #fff;
1486 border
: 1px solid
#aaa;
1489 .posting
-controls input
[type
='submit']:hover
,
1490 .posting
-controls input
[type
='submit']:focus
{
1491 background
-color
: #ddd;
1492 border
: 1px solid
#999;
1495 .comment
-controls
.cancel
-comment
-button
{
1503 margin
-right
: 0.375em
;
1505 .comment
-controls
.cancel
-comment
-button
::before
{
1508 .comment
-controls
.cancel
-comment
-button
:hover
{
1512 .new-comment
-button
{
1516 .comment
-controls
.action
-button
::before
{
1519 .comment
-controls
.action
-button
::after
{
1520 content
: attr(data
-label
);
1524 text
-transform
: uppercase
;
1528 .comment
-controls
.action
-button
:hover
::after
{
1529 visibility
: visible
;
1531 .comment
-controls
.delete
-button
::before
,
1532 .comment
-controls
.retract
-button
::before
{
1535 .comment
-controls
.delete
-button
::after
{
1536 transform
: translateX(-8px
);
1538 .comment
-controls
.retract
-button
::after
{
1539 transform
: translateX(-8px
);
1541 .comment
-controls
.unretract
-button
::after
{
1542 transform
: translateX(-18px
);
1544 .comment
-controls
.reply
-button
::before
{
1547 font
-size
: 1.125rem
;
1550 .comment
-controls
.reply
-button
::after
{
1551 transform
: translateX(-4px
);
1553 .comment
-controls
.edit
-button
::before
{
1554 font
-size
: 0.9375em
;
1557 .comment
-controls
.unretract
-button
::before
{
1558 font
-size
: 1.125rem
;
1561 .comment
-controls
.edit
-button
::after
{
1562 transform
: translateX(-1px
);
1564 .comment
-item
.comment
-controls
.action
-button
:hover
::before
{
1567 0.5px
0.5px
0.5px
#f77;
1570 h1
.listing
.edit
-post
-link
,
1571 h1
.listing
.edit
-post
-link
:visited
,
1572 .post
-controls
.edit
-post
-link
,
1573 .post
-controls
.edit
-post
-link
:visited
{
1576 h1
.listing
.edit
-post
-link
:hover
,
1577 .post
-controls
.edit
-post
-link
:hover
{
1581 .posting
-controls textarea
{
1582 font
-family
: <?php
echo $text_font; ?
>;
1585 background
-color
: #fff;
1588 0 0 0 1px
#eee inset;
1590 .posting
-controls textarea
:focus
{
1591 background
-color
: #ffd;
1592 border
-color
: <?php
echo $hyperlink_color; ?
>;
1594 0 0 0 1px
#ddf inset,
1596 0 0 0 2px
<?php
echo $hyperlink_color; ?
>;
1598 .posting
-controls
.edit
-existing
-post textarea
:focus
,
1599 .posting
-controls form
.edit
-existing
-comment textarea
:focus
{
1602 0 0 0 1px
#81ff7f inset,
1607 /* GUIEdit buttons */
1609 .guiedit
-buttons
-container
{
1610 background
-image
: linear
-gradient(to bottom
, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1613 .posting
-controls
.edit
-existing
-post
.guiedit
-buttons
-container button
,
1614 .posting
-controls form
.edit
-existing
-comment
.guiedit
-buttons
-container button
{
1617 .guiedit
-buttons
-container button
{
1618 font
-family
: Font Awesome
, <?php
echo $text_font; ?
>;
1622 font
-family
: <?php
echo $UI_font; ?
>;
1628 /* Markdown hints */
1630 #markdown-hints-checkbox + label {
1631 color
: <?php
echo $hyperlink_color; ?
>;
1633 #markdown-hints-checkbox + label:hover {
1637 border
: 1px solid
#c00;
1638 background
-color
: #ffa;
1641 /*================*/
1642 /* EDIT POST FORM */
1643 /*================*/
1645 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1647 border
: 1px solid
#ddd;
1651 @media only screen
and (hover
:hover
) {
1652 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1653 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1659 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1660 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1664 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1667 #edit-post-form input[type='radio'] + label {
1671 #edit-post-form input[type='radio'][value='all'] + label {
1672 border
-radius
: 8px
0 0 8px
;
1675 #edit-post-form input[type='radio'][value='drafts'] + label {
1676 border
-radius
: 0 8px
8px
0;
1678 #edit-post-form input[type='radio'] + label:hover,
1679 #edit-post-form input[type='radio']:focus + label {
1680 background
-color
: #ddd;
1683 #edit-post-form input[type='radio']:focus + label {
1688 #edit-post-form input[type='radio']:checked + label {
1689 background
-color
: #ddd;
1696 #edit-post-form #markdown-hints-checkbox + label {
1697 padding
: 3px
0 0 14px
;
1705 text
-decoration
: none
;
1706 color
: <?php
echo $hyperlink_color; ?
>;
1720 input
[type
='submit'] {
1721 color
: <?php
echo $hyperlink_color; ?
>;
1725 input
[type
='submit']:hover
,
1727 input
[type
='submit']:focus
{
1731 input
[type
='submit']:active
{
1733 transform
: scale(0.9);
1736 color
: <?php
echo $hyperlink_color; ?
>;
1740 text
-decoration
: none
;
1743 transform
: scale(0.9);
1745 .button
:focus
:not(:hover
) {
1748 @-moz
-document url
-prefix() {
1761 font
-family
: <?php
echo $UI_font; ?
>;
1772 border
-bottom
: 1px solid
#aaa;
1780 border
-left
: 5px solid
#ccc;
1788 #content figure.image img {
1789 border
: 1px solid
#ccc;
1791 #content figure img {
1792 border
: 1px solid
#000;
1794 #content img[src$='.svg'],
1795 #content figure img[src$='.svg'] {
1798 #content img[style^='float'] {
1799 border
: 1px solid transparent
;
1806 #content:not(.tag-index-page) .body-text table,
1807 #content:not(.tag-index-page) .body-text table th,
1808 #content:not(.tag-index-page) .body-text table td {
1809 border
: 1px solid
#bbb;
1817 border
-bottom
: 1px solid
#999;
1821 background
-color
: #f6f6ff;
1822 border
: 1px solid
#ddf;
1827 input
[type
='search'],
1828 input
[type
='password'] {
1829 background
-color
: #fff;
1830 border
: 1px solid
#ddd;
1833 input
[type
='text']:focus
,
1834 input
[type
='search']:focus
,
1835 input
[type
='password']:focus
{
1836 background
-color
: #ffd;
1837 border
: 1px solid
#bbb;
1838 box
-shadow
: 0 0 1px
#bbb;
1850 background
-color
: #e6e6e6;
1851 text
-decoration
: none
;
1853 0 -1px
0 0 #000 inset,
1854 0 -3px
1px
-2px
#000 inset;
1858 #content.about-page .accesskey-table {
1859 font
-family
: <?php
echo $UI_font; ?
>;
1863 #content.about-page img {
1864 border
: 1px solid
#000;
1867 /*========================*/
1868 /* QUALIFIED HYPERLINKING */
1869 /*========================*/
1874 #aux-about-link a:hover {
1878 .qualified
-linking label
{
1879 color
: <?php
echo $hyperlink_color; ?
>;
1881 .qualified
-linking label
:hover
{
1888 .qualified
-linking
-toolbar
{
1889 border
: 1px solid
#000;
1890 background
-color
: #fff;
1892 .qualified
-linking
-toolbar a
{
1893 background
-color
: #eee;
1894 border
: 1px solid
#ccc;
1897 white
-space
: nowrap
;
1899 .qualified
-linking
-toolbar a
:visited
{
1900 color
: <?php
echo $hyperlink_color; ?
>;
1902 .qualified
-linking
-toolbar a
:hover
{
1903 text
-decoration
: none
;
1904 background
-color
: #ddd;
1906 .qualified
-linking label
::after
{
1907 background
-color
: #d8d8d8;
1915 .mathjax
-block
-container
::-webkit
-scrollbar
{
1917 background
-color
: #f6f6ff;
1919 border
: 1px solid
#ddf;
1921 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1922 background
-color
: #dde;
1924 border
: 1px solid
#cce;
1926 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1928 background
-color
: #f6f6ff;
1930 border
: 1px solid
#ddf;
1932 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1933 background
-color
: #dde;
1935 border
: 1px solid
#cce;
1943 .textarea
-container
.autocomplete
-container
{
1944 background
-color
: rgba(255, 255, 170, 0.75);
1945 border
: 1px solid
rgba(170, 170, 170, 0.75);
1948 .textarea
-container
.autocomplete
-container div
.highlighted
{
1949 background
-color
: rgba(170, 170, 170, 0.75);
1953 .textarea
-container
.autocomplete
-container div
:not(.highlighted
):hover
{
1954 background
-color
: rgba(136, 136, 136, 0.25);
1957 .textarea
-container
.autocomplete
-container div span
.age
,
1958 .textarea
-container
.autocomplete
-container div span
.karma
{
1962 .textarea
-container
.autocomplete
-container div span
.karma
{
1967 /*=================*/
1968 /* ALIGNMENT FORUM */
1969 /*=================*/
1971 #content.alignment-forum-index-page::before {
1972 background
-color
: #f4f5ff;
1974 #content.alignment-forum-index-page::after {
1975 font
-family
: "Concourse SmallCaps";
1977 background
-color
: #7f85b2;
1979 -webkit
-background
-clip
: text
;
1981 rgba(255,255,255,0.5) 0px
3px
3px
;
1983 @media only screen
and (hover
: hover
) {
1984 #content.alignment-forum-index-page h1.listing a:hover,
1985 #content.alignment-forum-index-page h1.listing a:focus {
1986 background
-color
: rgba(244,245,255,0.85);
1990 /*====================*/
1991 /* FOR NARROW SCREENS */
1992 /*====================*/
1994 @media only screen
and (max
-width
: 1440px
) {
1996 background
-color
: #d8d8d8;
1999 #hns-date-picker::before {
2000 border
: 1px solid
#999;
2001 border
-width
: 1px
0 1px
1px
;
2004 @media only screen
and (max
-width
: 1160px
) {
2006 background
-color
: #d8d8d8;
2009 0 0 0 2px transparent
;
2011 #theme-selector:hover::after {
2012 width
: calc(6em
- 9px
);
2013 height
: calc(100%
- 5px
);
2017 #text-size-adjustment-ui button {
2018 background
-color
: #ddd;
2020 #text-size-adjustment-ui button:hover {
2021 background
-color
: #eee;
2023 #theme-tweaker-toggle button {
2024 background
-color
: #ddd;
2027 @media only screen
and (max
-width
: 1080px
) {
2028 #text-size-adjustment-ui button {
2029 border
: 1px solid
#999;
2034 0 0 0 1px transparent
;
2036 #theme-tweaker-toggle button {
2037 border
: 1px solid
#999;
2039 0 0 10px
#999 inset,
2040 0 0 0 1px transparent
;
2042 transform
: scale(0.8);
2045 @media only screen
and (max
-width
: 1020px
) {
2049 0 0 0 2px transparent
;
2051 #new-comment-nav-ui .new-comments-count::before {
2052 background
-color
: #d8d8d8;
2055 0 0 0 2px transparent
;
2058 #anti-kibitzer-toggle {
2059 background
-color
: #d8d8d8;
2062 0 0 0 2px transparent
;
2072 /*******************************************************/
2073 @media not screen
and (hover
:hover
) and (pointer
:fine
) {
2074 /*******************************************************/
2075 #ui-elements-container > div[id$='-ui-toggle'] button {
2087 background
-color
: #d8d8d8;
2095 border
-radius
: 12px
;
2097 #theme-selector::before,
2098 #theme-selector .theme-selector-close-button {
2100 font
-weight
: normal
;
2102 #theme-selector button {
2103 background
-color
: #e6e6e6;
2104 border
-radius
: 10px
;
2106 #theme-selector button::after {
2108 max
-width
: calc(100%
- 3.5em
);
2110 text
-overflow
: ellipsis
;
2111 padding
-bottom
: 1px
;
2113 #theme-selector button.selected::after {
2121 background
-color
: #fff;
2124 #new-comment-nav-ui,
2133 #quick-nav-ui a::after,
2134 #new-comment-nav-ui::before {
2135 font
-family
: <?php
echo $UI_font; ?
>;
2141 background
-color
: #fff;
2145 #new-comment-nav-ui {
2148 #new-comment-nav-ui {
2149 background
-color
: #e4e4e4;
2150 border
: 1px solid
#999;
2152 #new-comment-nav-ui::before {
2156 #new-comment-nav-ui .new-comment-sequential-nav-button {
2157 box
-shadow
: 0 0 0 1px
#999;
2160 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2163 #new-comment-nav-ui .new-comments-count {
2164 background
-color
: inherit
;
2165 box
-shadow
: 0 -1px
0 0 #999;
2167 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2168 border
-radius
: 7px
0 0 7px
;
2170 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2171 border
-radius
: 0 7px
7px
0;
2173 #new-comment-nav-ui button::after {
2174 font
-family
: <?php
echo $UI_font; ?
>;
2177 background
-color
: #e4e4e4;
2178 border
: 1px solid
#999;
2181 /*****************************************/
2182 @media only screen
and (max
-width
: 900px
) {
2183 /*****************************************/
2184 h1
.listing +
.post
-meta
.post
-section
{
2189 h1
.listing +
.post
-meta
.post
-section
::before
{
2193 #primary-bar .nav-inner {
2196 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
2199 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2203 .archive
-nav
*[class^
='archive-nav-item-'] {
2204 border
-width
: 1px
!important
;
2206 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
2207 background
-color
: #aaa;
2210 .comment
-item
.comment
-item
{
2211 margin
: 0.75em
0 3px
6px
;
2213 .comment
-item
.comment
-item +
.comment
-item
{
2214 margin
: 1.5em
0 3px
6px
;
2217 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
2218 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
2219 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
2224 /*******************************************/
2225 } @media only screen
and (max
-width
: 720px
) {
2226 /*******************************************/
2227 .post
-meta
.comment
-count
::before
{
2228 font
-family
: inherit
;
2232 /*******************************************/
2233 } @media only screen
and (max
-width
: 520px
) {
2234 /*******************************************/
2235 #primary-bar.inactive-bar .nav-inner {
2241 margin
: 18px
6px
4px
6px
;
2242 max
-width
: calc(100%
- 12px
);
2245 h1
.listing
.link
-post
-link
{
2248 h1
.listing +
.post
-meta
{
2251 h1
.listing +
.post
-meta
> *:not(.karma
) {
2255 h1
.listing +
.post
-meta
.karma
-value
{
2257 right
: calc(100%
- 2.25em
);
2260 #content.compact > .comment-thread .comment-item {
2264 .textarea
-container
:focus
-within textarea
{
2265 background
-color
: #fff;
2267 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
2271 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
2276 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2277 background
-color
: #fff;
2278 border
-top
: 1px solid
#ddf;
2280 .posting
-controls
.textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2283 #content.conversation-page .textarea-container:focus-within::after {
2284 background
-color
: #fff;
2286 .textarea
-container
:focus
-within button
.guiedit
{
2287 border
: 1px solid
#6a8a6b;
2291 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2294 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2298 #edit-post-form textarea {
2299 min
-height
: calc(100vh
- 345px
);