2 $UI_font = "'Proxima Nova', 'GW-Symbols', sans-serif";
3 $text_font = "'Raleway', 'Helvetica', 'Arial', 'Verdana', sans-serif;";
4 $hyperlink_color = "#f60";
5 $white_glow = "0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff";
8 /*********************/
9 /* ULTRAMODERN THEME */
10 /*********************/
19 --GW
-toggle
-widget
-color
: #222;
20 --GW
-toggle
-widget
-hover
-color
: #000;
21 --GW
-toggle
-widget
-shadow
-color
: rgba(255,255,255,0.4);
30 background
-color
: #888;
31 font
-family
: <?php
echo $UI_font; ?
>;
43 border
: 1px solid transparent
;
44 border
-bottom
-color
: #666;
46 0 1.5px
1.5px
-1.5px
#bbb,
48 margin
: 0 -30px
0 -2px
;
54 padding
: 11px
30px
13px
30px
;
56 .nav
-current
.nav
-inner
{
60 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
63 .nav
-bar
-top
:not(.nav
-bar
-top
:not(#primary-bar)) .nav-item:not(#nav-item-search) .nav-inner {
66 @media only screen
and (min
-width
: 901px
) {
67 .nav
-bar
-top
:not(#primary-bar) #nav-item-sequences .nav-inner {
72 #bottom-bar.decorative::before,
73 #bottom-bar.decorative::after {
77 padding
: 0.25em
0 1em
0;
79 #bottom-bar.decorative::before {
82 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
83 background
-repeat
: repeat
-x
;
84 background
-position
: center
35%
;
86 filter
: brightness(50%
) opacity(0.6);
88 #bottom-bar.decorative::after {
94 background
-color
: #888;
98 <?php
fit_content("#bottom-bar.decorative::after"); ?
>
100 .nav
-bar
.nav
-inner
{
104 .nav
-bar
.nav
-inner
:hover
,
105 .nav
-bar
.nav
-inner
:focus
{
106 text
-decoration
: underline
;
109 /* Accesskey hints */
120 .inactive
-bar
.nav
-inner
::after
{
124 .nav
-inner
:hover
::after
{
130 #nav-item-search form::before {
132 font
-size
: 0.9375rem
;
134 #nav-item-search button {
138 #nav-item-search input::placeholder {
143 /* Inbox indicator */
149 /*= Top pagination UI =*/
151 #top-nav-bar a::before {
155 /*= Bottom pagination UI =*/
157 #bottom-bar .nav-item a::before {
161 /*= Pagination UI hover tooltips =*/
163 #top-nav-bar a::after,
164 #bottom-bar a::after {
177 .logout
-button
::before
{
180 .page
-toolbar
.button
:hover
{
181 text
-decoration
: none
;
188 .sublevel
-nav
.sublevel
-item
{
190 background
-color
: #888;
192 .sublevel
-nav
.sublevel
-item
:not(.selected
):hover
{
194 text
-decoration
: none
;
196 .sublevel
-nav
.sublevel
-item
:hover
,
197 .sublevel
-nav
.sublevel
-item
.selected
{
198 background
-color
: #999;
200 .sublevel
-nav
.sublevel
-item
:not(.selected
):active
,
201 .sublevel
-nav
.sublevel
-item
.selected
{
205 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
208 border
-width
: 1px
0 1px
1px
;
210 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
{
211 border
-radius
: 8px
0 0 8px
;
213 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
215 border
-radius
: 0 8px
8px
0;
218 /*=====================*/
219 /* SORT ORDER SELECTOR */
220 /*=====================*/
222 .sublevel
-nav
.sort
.sublevel
-item
{
223 font
-family
: <?php
echo $UI_font; ?
>;
224 padding
: 8px
8px
6px
8px
;
225 text
-transform
: uppercase
;
226 pointer
-events
: auto
;
227 box
-shadow
: 1px
1px
0 0 #777 inset;
230 border
: 2px solid transparent
;
233 pointer
-events
: none
;
234 background
-color
: #999;
236 .sublevel
-nav
.sort
::before
{
237 text
-transform
: uppercase
;
242 .sublevel
-nav
.sort
::after
{
252 0 18px
0 0 #888 inset,
253 0 0 0 1px
#777 inset,
254 0 18px
0 1px
#777 inset,
262 #width-selector button {
264 0 0 0 4px
#888 inset,
265 0 0 0 5px
#ccc inset;
267 #width-selector button:hover,
268 #width-selector button.selected {
270 0 0 0 1px
#888 inset,
271 0 0 0 2px
#ccc inset,
272 0 0 0 4px
#888 inset,
273 0 0 0 5px
#ccc inset;
275 #width-selector button::after {
284 #theme-selector button {
286 0 0 0 5px
#888 inset;
288 #theme-selector button:hover,
289 #theme-selector button.selected {
291 0 0 0 2px
#888 inset,
292 0 0 0 3px
#ccc inset,
293 0 0 0 5px
#888 inset;
296 #theme-selector button::before {
298 background
-color
: #888;
300 #theme-selector button:hover::before,
301 #theme-selector button.selected::before {
305 /*======================*/
306 /* THEME TWEAKER TOGGLE */
307 /*======================*/
309 #theme-tweaker-toggle button:hover {
310 text
-decoration
: none
;
313 /*=================*/
314 /* QUICKNAV WIDGET */
315 /*=================*/
320 box
-shadow
: 0 0 0 1px
#999;
321 text
-decoration
: none
;
323 #quick-nav-ui a[href='#bottom-bar'] {
326 #quick-nav-ui a:active {
327 transform
: scale(0.9);
329 #quick-nav-ui a[href='#comments'].no-comments {
333 @media only screen
and (hover
: hover
) {
334 #quick-nav-ui a:hover {
336 box
-shadow
: 0 0 0 1px
#ccc;
338 #quick-nav-ui a:focus:not(:hover) {
344 /*======================*/
345 /* NEW COMMENT QUICKNAV */
346 /*======================*/
348 #new-comment-nav-ui .new-comments-count {
352 #new-comment-nav-ui .new-comments-count::after {
356 #new-comment-nav-ui .new-comment-sequential-nav-button {
359 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
362 @media only screen
and (hover
: hover
) {
363 #new-comment-nav-ui .new-comments-count:hover {
371 #new-comment-nav-ui .new-comment-sequential-nav-button:hover {
373 text
-decoration
: none
;
375 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
377 text
-shadow
: 0 0 1px
#fff, 0 0 3px #fff, 0 0 5px #fff;
381 /*=================*/
382 /* HNS DATE PICKER */
383 /*=================*/
385 #hns-date-picker span {
389 #hns-date-picker input {
390 border
: 1px solid
#999;
391 background
-color
: transparent
;
394 #hns-date-picker input:focus {
396 border
: 1px solid
#ccc;
399 /*====================*/
400 /* DARK MODE SELECTOR */
401 /*====================*/
403 #dark-mode-selector {
404 outline
: 1px solid
#ccc;
407 #dark-mode-selector button {
410 #dark-mode-selector button:hover {
413 #dark-mode-selector button.selected {
414 background
-color
: #ccc;
417 #dark-mode-selector button:not(.selected) + button:not(.selected) {
418 box
-shadow
: 1px
0 0 0 #ccc inset;
420 #dark-mode-selector button:disabled:hover {
423 #dark-mode-selector button::after {
424 font
-family
: <?php
echo $UI_font; ?
>;
430 /*======================*/
431 /* TEXT SIZE ADJUSTMENT */
432 /*======================*/
434 #text-size-adjustment-ui button {
437 #text-size-adjustment-ui button.default {
440 #text-size-adjustment-ui button:hover {
441 text
-decoration
: none
;
444 #text-size-adjustment-ui::after {
449 /*=============================*/
450 /* COMMENTS VIEW MODE SELECTOR */
451 /*=============================*/
453 #comments-view-mode-selector a {
462 border
: 1px solid
#ccc;
464 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
466 border
-bottom
-width
: 0;
468 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
469 border
-bottom
-width
: 1px
;
471 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
472 border
-right
-width
: 1px
;
474 .archive
-nav span
[class^
='archive-nav-item'] {
478 .archive
-nav span
[class^
="archive-nav-item"],
479 .archive
-nav a
:hover
{
482 0 0 0 3px
#888 inset,
483 0 0 0 4px
#ccc inset,
484 0 0 0 5px
#888 inset;
485 text
-decoration
: none
;
487 .archive
-nav span
[class^
="archive-nav-item"] {
490 0 0 0 1px
#ccc inset,
491 0 0 0 3px
#888 inset,
492 0 0 0 4px
#ccc inset,
493 0 0 0 5px
#888 inset;
495 .archive
-nav a
:active
{
496 transform
: scale(0.9);
498 .archive
-nav a
:focus
:not(:hover
) {
507 margin
: 0.7em
20px
0.1em
20px
;
508 max
-width
: calc(100%
- 40px
);
509 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
512 h1
.listing
.post
-title
-link
{
513 font
-family
: <?php
echo $text_font; ?
>;
514 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
517 0.5px
0.5px
1px
#aaa,
518 0.5px
0.5px
1px
#bbb;
520 h1
.listing
.link
-post
-link
{
524 @media only screen
and (hover
: hover
) {
527 background
-color
: rgba(136,136,136,0.85);
531 0.5px
0.5px
1px
#aaa,
532 0.5px
0.5px
1px
#bbb,
537 h1
.listing
:focus
-within
::before
{
542 h1
.listing
.link
-post
-link
:hover
{
546 -0.5px
-0.5px
0 #fff,
552 h1
.listing
.edit
-post
-link
{
553 padding
: 10px
3px
30px
0.5em
;
557 h1
.listing
.edit
-post
-link
:hover
{
558 text
-decoration
: none
;
560 #content.user-page h1.listing .edit-post-link {
561 background
-color
: #888;
571 h1
.listing
.spam +
.post
-meta
{
574 h1
.listing
.spam
:hover
,
575 h1
.listing
.spam +
.post
-meta
:hover
,
576 h1
.listing
.spam
:hover +
.post
-meta
{
580 /*===================*/
581 /* LISTING POST-META */
582 /*===================*/
584 h1
.listing +
.post
-meta
> * {
588 h1
.listing +
.post
-meta
.karma
::after
{
591 h1
.listing +
.post
-meta
.date
::before
{
594 h1
.listing +
.post
-meta
.date
::after
{
597 margin
: 0 0.5em
0 0.125em
;
599 h1
.listing +
.post
-meta
.comment
-count
.new-comments
::before
{
602 h1
.listing
:last
-of
-type +
.post
-meta
{
605 h1
.listing +
.post
-meta
.karma
{
607 margin
-right
: 0.25em
;
609 h1
.listing +
.post
-meta
.author
{
610 margin
-right
: 0.25em
;
612 h1
.listing +
.post
-meta
.date
{
615 h1
.listing +
.post
-meta
.post
-section
{
619 h1
.listing +
.post
-meta
.post
-section
::before
{
623 h1
.listing +
.post
-meta
.link
-post
-domain
{
631 #content.user-page h1.page-main-heading {
632 border
-bottom
: 1px solid
#777;
635 #content.user-page h1.listing,
636 #content.user-page h1.listing + .post-meta {
639 border
-width
: 0 0 0 1px
;
641 1.5px
0 1.5px
-1.5px
#bbb inset,
642 1px
0 1px
-1px
#777 inset;
644 #content.user-page h1.listing {
649 @media only screen
and (hover
: hover
) {
650 #content.user-page h1.listing:focus-within::before {
655 #content.user-page h1.listing + .post-meta {
657 padding
: 0.5em
6px
6px
34px
;
659 #content.user-page h1.listing + .post-meta .post-section::before {
663 #content.conversations-user-page h1.listing {
664 padding
: 6px
6px
4px
8px
;
667 #content.conversations-user-page h1.listing + .post-meta {
669 margin
: 0 0 0.25rem
0;
671 #content.conversations-user-page h1.listing + .post-meta .date::after {
675 .user
-stats
.karma
-total
{
683 #content.conversation-page h1.page-main-heading {
684 font
-family
: <?php
echo $text_font; ?
>;
685 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
689 0.5px
0.5px
1px
#aaa,
690 0.5px
0.5px
1px
#bbb;
697 .login
-container h1
{
701 /* “Create account” form */
704 border
: 1px solid
#aaa;
709 .login
-container
.login
-tip
{
710 border
: 1px solid transparent
;
716 border
: 1px solid red
;
717 background
-color
: #faa;
720 border
: 1px solid green
;
721 background
-color
: #afa;
724 /*=====================*/
725 /* PASSWORD RESET PAGE */
726 /*=====================*/
728 .reset
-password
-container input
[type
='submit'] {
729 background
-color
: #e4e4e4;
730 border
: 1px solid
#ccc;
734 /*===================*/
735 /* TABLE OF CONTENTS */
736 /*===================*/
739 background
-color
: #888;
744 .body
-text
.contents ul
{
747 .body
-text
.contents li
::before
{
749 font
-feature
-settings
: "tnum";
752 .contents
.toc
-collapse
-toggle
-button
{
755 .contents
.toc
-collapse
-toggle
-button
:hover
{
757 text
-shadow
: <?php
echo $white_glow; ?
>;
760 /*=================*/
761 /* POST NAVIGATION */
762 /*=================*/
765 .post
-nav
-links a
:visited
{
769 .post
-nav
-links a
:hover
{
770 text
-decoration
: none
;
778 @media only screen
and (max
-width
: 900px
) {
780 border
-top
: 1px solid
#777;
783 border
-right
: 1px solid
#777;
786 border
-left
: 1px solid
#777;
790 /*==================*/
791 /* POSTS & COMMENTS */
792 /*==================*/
795 font
-family
: <?php
echo $text_font; ?
>;
796 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'300' : '400'); ?
>;
800 0.5px
0.5px
1px
#aaa,
801 0.5px
0.5px
1px
#bbb;
811 0.5px
0.5px
1px
#f68a84,
812 0.5px
0.5px
1px
#ff9b8c;
814 .body
-text a
:visited
{
818 0.5px
0.5px
1px
#d9f,
819 0.5px
0.5px
1px
#efa9ff;
825 0.5px
0.5px
1px
#f68a84,
826 0.5px
0.5px
1px
#ff9b8c,
831 margin
: 1.1em
0 0.25em
0;
832 font
-family
: <?php
echo $text_font; ?
>;
833 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
838 0.5px
0.5px
1px
#aaa,
839 0.5px
0.5px
1px
#bbb;
843 font
-size
: 1.1875rem
;
846 @media
(-webkit
-max
-device
-pixel
-ratio
: 1), (max
-resolution
: 191dpi
) {
877 0.5px
0.5px
1px
#aaa,
878 0.5px
0.5px
1px
#bbb;
883 .post
-meta
.comment
-count span
,
884 .post
-meta
.read
-time span
,
885 .post
-meta
.word
-count span
,
886 .post
-meta
.lw2
-link span
{
889 .post
-meta
.comment
-count
::before
,
890 .post
-meta
.read
-time
::before
,
891 .post
-meta
.word
-count
::before
,
892 .post
-meta
.lw2
-link
::before
{
893 font
-family
: Font Awesome
;
894 margin
: 0 0.25em
0 0;
898 .post
-meta
.comment
-count
{
899 margin
: 0 0.25em
0 0;
901 .post
-meta
.read
-time
,
902 .post
-meta
.word
-count
,
903 .post
-meta
.lw2
-link
{
904 margin
: 0 0.25em
0 0.5em
;
906 .post
-meta
.comment
-count
:hover
,
907 .post
-meta
.lw2
-link
:hover
{
908 text
-decoration
: none
;
914 .post
-meta
.comment
-count
:hover
::before
,
915 .post
-meta
.lw2
-link
:hover
::before
,
916 .post
-meta
.read
-time
:hover
::before
{
919 .post
-meta
.read
-time
:hover
::before
{
922 .post
-meta
.comment
-count
::before
{
925 .post
-meta
.read
-time
::before
{
928 .post
-meta
.read
-time
::after
{
931 .post
-meta
.word
-count
::before
{
934 .post
-meta
.word
-count
::after
{
937 .post
-meta
.lw2
-link
::before
{
945 .post
.post
-meta
.author
{
946 margin
: 0 0.75em
0 0;
948 .post
-meta
.author
:hover
,
949 .comment
-meta
.author
:hover
{
950 text
-decoration
: none
;
953 .post
.post
-meta
.comment
-count
{
956 .post
.post
-meta
.lw2
-link
{
957 margin
: 0 1em
0 0.5em
;
959 .post
.post
-meta
.voting
-controls
{
960 margin
: 0 0.5em
0 1em
;
963 .post
-meta
.post
-section
::before
,
964 .comment
-meta
.alignment
-forum
{
971 a
.post
-section
:hover
{
972 text
-decoration
: none
;
974 a
.post
-section
:hover
::before
{
977 .post
-meta
.post
-section
.alignment
-forum
::before
{
983 a
.post
-section
.alignment
-forum
:hover
::before
{
991 .post
.link
-post a
.link
-post
-link
{
992 text
-decoration
: none
;
993 font
-family
: <?php
echo $UI_font; ?
>;
996 .post
.link
-post a
.link
-post
-link
:hover
{
999 .post
.link
-post a
.link
-post
-link
:hover
::before
{
1003 -0.5px
-0.5px
0 #fff,
1007 .post
.link
-post a
.link
-post
-link
:focus
{
1009 border
-bottom
: 2px dotted
#f60;
1012 0.5px
0.5px
1px
#aaa,
1013 0.5px
0.5px
1px
#bbb,
1024 border
-top
: 1px solid
#666;
1026 0 1.5px
1.5px
-1.5px
#bbb inset,
1027 0 1px
1px
-1px
#777 inset;
1030 #content > .comment-thread .comment-meta a.date:focus,
1031 #content > .comment-thread .comment-meta a.permalink:focus {
1033 outline
: 2px dotted
#ccc;
1035 background
-color
: #444;
1037 #content > .comment-thread .comment-meta a.date:focus {
1041 #content > .comment-thread .comment-meta a.date:focus + * {
1044 #content > .comment-thread .comment-meta a.permalink:focus {
1048 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1052 border
: 1px solid transparent
;
1053 border
-left
-color
: #666;
1055 1.5px
0 1.5px
-1.5px
#bbb inset,
1056 1px
0 1px
-1px
#777 inset;
1058 @-moz
-document url
-prefix() {
1061 1.5px
0 1.5px
-1px
#bbb inset,
1062 1px
0 1px
-1px
#777 inset;
1066 a
.comment
-parent
-link
::after
{
1069 a
.comment
-parent
-link
::before
{
1070 padding
: 2px
3px
0 4px
;
1073 /*================================*/
1074 /* DEEP COMMENT THREAD COLLAPSING */
1075 /*================================*/
1077 .comment
-item input
[id^
="expand"] + label
::after
{
1078 color
: <?php
echo $hyperlink_color; ?
>;
1081 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
1084 .comment
-item input
[id^
="expand"] + label
:active
::after
,
1085 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
1088 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
1089 border
-width
: 1px
0 0 0;
1099 .comment
-meta
.author
{
1103 font
-weight
: normal
;
1105 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
1109 .comment
-item
.voting
-controls
.active
-controls
::after
,
1110 .comment
-item
.voting
-controls
.karma
-value
::after
,
1111 .post
.voting
-controls
.active
-controls
::after
,
1112 .post
.voting
-controls
.karma
-value
::after
,
1114 background
-color
: #888;
1117 box
-shadow
: 0 0 0 1px
#bbb inset;
1119 .comment
-item
.voting
-controls
.active
-controls
::after
,
1120 .post
.voting
-controls
.active
-controls
::after
{
1124 .comment
-item
.voting
-controls
.karma
-value
::after
,
1125 .post
.voting
-controls
.karma
-value
::after
{
1131 /*====================*/
1132 /* ANTI-KIBITZER MODE */
1133 /*====================*/
1136 .inline
-author
.redacted
{
1141 .karma
-value
.redacted
{
1145 .link
-post
-domain
.redacted
{
1149 /*===========================*/
1150 /* COMMENT THREAD NAVIGATION */
1151 /*===========================*/
1153 div
.comment
-parent
-link
{
1156 a
.comment
-parent
-link
{
1159 a
.comment
-parent
-link
::before
{
1162 a
.comment
-parent
-link
:hover
::before
{
1166 div
.comment
-child
-links
{
1169 div
.comment
-child
-links a
{
1172 .comment
-child
-link
::before
{
1176 .comment
-item
-highlight
{
1183 border
: 1px solid
#e7b200;
1185 .comment
-item
-highlight
-faint
{
1192 border
: 1px solid
#f8e7b5;
1196 background
-color
: #949494;
1199 /*=======================*/
1200 /* COMMENTS COMPACT VIEW */
1201 /*=======================*/
1203 #comments-list-mode-selector button {
1205 0 0 0 4px
#888 inset,
1206 0 0 0 5px
#ccc inset;
1208 #comments-list-mode-selector button:hover,
1209 #comments-list-mode-selector button.selected {
1211 0 0 0 1px
#888 inset,
1212 0 0 0 2px
#ccc inset,
1213 0 0 0 4px
#888 inset,
1214 0 0 0 5px
#ccc inset;
1216 #content.compact > .comment-thread .comment-item::after {
1218 background
: linear
-gradient(to right
, transparent
0%
, #888 50%, #888 100%);
1221 @media only screen
and (hover
: hover
) {
1222 #content.compact > .comment-thread .comment-item:hover .comment,
1223 #content.compact > .comment-thread .comment-item.expanded .comment {
1224 background
-color
: #999;
1225 outline
: 3px solid
#ccc;
1227 #content.compact > .comment-thread .comment-item:hover .comment::before,
1228 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1229 background
-color
: #999;
1240 @media only screen
and (hover
: none
) {
1241 #content.compact > .comment-thread.expanded .comment-item .comment {
1242 background
-color
: #999;
1243 outline
: 3px solid
#ccc;
1245 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1246 background
-color
: #999;
1258 #content.user-page.compact > h1.listing {
1261 #content.user-page.compact > h1.listing + .post-meta {
1262 margin
-bottom
: 0.5rem
;
1265 /*===========================*/
1266 /* HIGHLIGHTING NEW COMMENTS */
1267 /*===========================*/
1269 .new-comment
::before
{
1273 border
: 1px solid
#e00;
1279 /*=================================*/
1280 /* COMMENT THREAD MINIMIZE BUTTONS */
1281 /*=================================*/
1283 .comment
-minimize
-button
{
1286 .comment
-minimize
-button
:hover
{
1288 text
-shadow
: <?php
echo $white_glow; ?
>;
1290 .comment
-minimize
-button
::after
{
1291 font
-family
: <?php
echo $UI_font; ?
>;
1294 .comment
-minimize
-button
.maximized
::after
{
1298 /*====================*/
1299 /* COMMENT PERMALINKS */
1300 /*====================*/
1301 /*==================*/
1302 /* COMMENT LW LINKS */
1303 /*==================*/
1305 .comment
-meta
.permalink
::before
,
1306 .comment
-meta
.lw2
-link
::before
,
1307 .individual
-thread
-page a
.comment
-parent
-link
:empty::before
{
1309 filter
: saturate(10%
) contrast(20%
);
1312 /*=================================*/
1313 /* INDIVIDUAL COMMENT THREAD PAGES */
1314 /*=================================*/
1316 .individual
-thread
-page
> h1
{
1317 font
-family
: <?php
echo $text_font; ?
>;
1318 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'200' : '300'); ?
>;
1336 .karma
.upvote
::before
{
1340 .karma
.downvote
::before
{
1344 .karma
.upvote
::after
{
1349 .karma
.downvote
::after
{
1354 @-moz
-document url
-prefix() {
1355 .karma
.upvote
::after
{
1359 .karma
.downvote
::after
{
1365 .agreement
.upvote
::before
{
1369 .agreement
.downvote
::before
{
1373 .agreement
.upvote
::after
{
1378 .agreement
.downvote
::after
{
1383 @-moz
-document url
-prefix() {
1384 .agreement
.upvote
::after
{
1388 .agreement
.downvote
::after
{
1407 .upvote
:not(.none
) {
1408 color
: var(--GW
-upvote
-button
-color
);
1414 .downvote
:not(.none
) {
1415 color
: var(--GW
-downvote
-button
-color
);
1429 .vote
.two
-temp
::after
,
1431 visibility
: visible
;
1436 .vote
.two
-temp
::after
{
1447 .vote
:disabled
:hover
{
1451 /*===========================*/
1452 /* COMMENTING AND POSTING UI */
1453 /*===========================*/
1455 .comment
-controls
.cancel
-comment
-button
{
1456 font
-weight
: normal
;
1459 .comment
-controls
.cancel
-comment
-button
:hover
{
1461 text
-shadow
: <?php
echo $white_glow; ?
>;
1464 .posting
-controls
.action
-button
,
1465 .posting
-controls input
[type
='submit'] {
1466 font
-weight
: normal
;
1468 .posting
-controls
.action
-button
:hover
,
1469 .posting
-controls input
[type
='submit']:hover
{
1470 text
-decoration
: underline
;
1474 .comment
-controls
.delete
-button
,
1475 .comment
-controls
.retract
-button
{
1478 .comment
-controls
.edit
-button
,
1479 .comment
-controls
.unretract
-button
{
1482 .comment
-controls
.action
-button
:hover
{
1484 text
-decoration
: none
;
1488 .edit
-post
-link
:visited
{
1492 .posting
-controls textarea
{
1494 font
-family
: <?php
echo $text_font; ?
>;
1496 background
-color
: transparent
;
1500 0.5px
0.5px
1px
#aaa,
1501 0.5px
0.5px
1px
#bbb;
1503 @-moz
-document url
-prefix() {
1504 .posting
-controls textarea
{
1505 font
-weight
: <?php
global $platform; echo ($platform == 'Windows' ?
'300' : '400'); ?
>;
1508 .posting
-controls textarea
:focus
{
1514 .posting
-controls textarea
::-webkit
-scrollbar
,
1515 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
{
1517 background
-color
: transparent
;
1519 .posting
-controls textarea
::-webkit
-scrollbar
-track
{
1520 border
-left
: 1px solid
#999;
1522 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-track
,
1523 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-track
{
1524 border
-left
: 1px solid
#bbb;
1526 .posting
-controls textarea
::-webkit
-scrollbar
-thumb
{
1527 background
-color
: #999;
1528 box
-shadow
: 0 0 0 1px
#888 inset;
1529 border
-left
: 1px solid
#999;
1531 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-thumb
,
1532 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-thumb
{
1533 border
-left
: 1px solid
#bbb;
1534 background
-color
: #ccc;
1535 box
-shadow
: 0 0 0 1px
#888 inset;
1538 /* GUIEdit buttons */
1540 .guiedit
-buttons
-container
{
1541 background
-color
: #888;
1542 box
-shadow
: 0 -1px
0 0 #999 inset;
1544 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
1545 box
-shadow
: 0 -1px
0 0 #ccc inset;
1550 background
-color
: transparent
;
1551 font
-family
: Font Awesome
, Source Sans Pro
, Trebuchet MS
, Helvetica
, Arial
, Verdana
, sans
-serif
;
1553 button
.guiedit
::after
{
1554 font
-family
: Proxima Nova
;
1560 button
.guiedit
:hover
{
1564 /* Markdown hints */
1566 #markdown-hints-checkbox + label {
1569 #markdown-hints-checkbox + label:hover {
1570 text
-decoration
: underline
;
1573 background
-color
: #888;
1574 border
: 1px solid
#ccc;
1577 /*================*/
1578 /* EDIT POST FORM */
1579 /*================*/
1581 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1583 border
: 1px solid
#999;
1586 @media only screen
and (hover
:hover
) {
1587 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1588 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1589 text
-decoration
: underline
;
1591 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1592 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1596 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1599 #edit-post-form input[type='radio'] + label {
1603 #edit-post-form input[type='radio'][value='all'] + label {
1604 border
-radius
: 8px
0 0 8px
;
1607 #edit-post-form input[type='radio'][value='drafts'] + label {
1608 border
-radius
: 0 8px
8px
0;
1610 #edit-post-form input[type='radio'] + label:hover,
1611 #edit-post-form input[type='radio']:focus + label,
1612 #edit-post-form input[type='radio']:checked + label {
1613 background
-color
: #999;
1615 #edit-post-form input[type='radio'] + label:hover,
1616 #edit-post-form input[type='radio']:focus + label {
1619 #edit-post-form input[type='radio']:active + label,
1620 #edit-post-form input[type='radio']:checked + label {
1629 text
-decoration
: none
;
1630 color
: <?php
echo $hyperlink_color; ?
>;
1633 text
-decoration
: underline
;
1641 input
[type
='submit'] {
1643 font
-weight
: normal
;
1652 input
[type
='submit']:hover
,
1654 input
[type
='submit']:focus
{
1657 input
[type
='submit']:hover
,
1658 input
[type
='submit']:focus
{
1659 text
-decoration
: underline
;
1662 input
[type
='submit']:active
{
1664 transform
: scale(0.9);
1670 transform
: scale(0.9);
1672 .button
:focus
:not(:hover
) {
1675 @-moz
-document url
-prefix() {
1691 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
1694 0.5px
0.5px
1px
#aaa,
1695 0.5px
0.5px
1px
#bbb;
1697 .post
-body h1 strong
,
1698 .post
-body h2 strong
,
1699 .post
-body h3 strong
,
1700 .post
-body h4 strong
,
1701 .post
-body h5 strong
,
1702 .post
-body h6 strong
{
1703 font
-weight
: normal
;
1709 padding
-bottom
: 2px
;
1710 border
-bottom
-color
: #777;
1713 border
-bottom
: 1px dotted
#ccc;
1721 border
-left
: 5px solid
#777;
1729 #content figure.image img {
1730 border
: 1px solid
#666;
1732 #content figure img {
1733 border
: 1px solid
#000;
1735 #content img[src$='.svg'],
1736 #content figure img[src$='.svg'] {
1739 #content img[style^='float'] {
1740 border
: 1px solid transparent
;
1747 #content:not(.tag-index-page) .body-text table,
1748 #content:not(.tag-index-page) .body-text table th,
1749 #content:not(.tag-index-page) .body-text table td {
1750 border
: 1px solid
#ccc;
1758 border
-bottom
: 1px solid
#999;
1763 font
-family
: 'Tired of Courier', Courier
, Courier
New, monospace
;
1764 font
-size
: 0.9375em
;
1768 border
: 1px solid
#444;
1771 1px
1px
1px
#aaa inset,
1776 input
[type
='search'],
1777 input
[type
='password'] {
1778 border
: 1px solid
#999;
1780 background
-color
: transparent
;
1782 input
[type
='text']:focus
,
1783 input
[type
='search']:focus
,
1784 input
[type
='password']:focus
{
1785 border
: 1px solid
#ccc;
1794 font
-feature
-settings
: 'lnum';
1806 .body
-text
*::selection
,
1807 textarea
::selection
,
1809 background
-color
: #d8d8d8;
1817 background
-color
: #e6e6e6;
1818 text
-decoration
: none
;
1820 0 -1px
0 0 #000 inset,
1821 0 -3px
1px
-2px
#000 inset;
1825 #content.about-page .accesskey-table {
1826 font
-family
: <?php
echo $UI_font; ?
>;
1830 #content.about-page img {
1831 border
: 1px solid
#000;
1834 /*========================*/
1835 /* QUALIFIED HYPERLINKING */
1836 /*========================*/
1841 #aux-about-link a:hover {
1843 text
-shadow
: <?php
echo $white_glow; ?
>;
1846 .qualified
-linking label
:hover
{
1847 text
-shadow
: <?php
echo $white_glow; ?
>;
1850 .qualified
-linking
-toolbar
{
1851 border
: 1px solid
#000;
1852 background
-color
: #777;
1854 .qualified
-linking
-toolbar a
{
1855 border
: 1px solid
#888;
1859 .qualified
-linking
-toolbar a
:hover
{
1860 border
: 1px solid
#999;
1861 text
-decoration
: none
;
1862 text
-shadow
: <?php
echo $white_glow; ?
>;
1864 .qualified
-linking label
::after
{
1865 background
-color
: #888;
1873 .mathjax
-block
-container
::-webkit
-scrollbar
{
1875 background
-color
: #f6f6ff;
1877 border
: 1px solid
#ddf;
1879 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1880 background
-color
: #dde;
1882 border
: 1px solid
#cce;
1884 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1886 background
-color
: #f6f6ff;
1888 border
: 1px solid
#ddf;
1890 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1891 background
-color
: #dde;
1893 border
: 1px solid
#cce;
1901 .textarea
-container
.autocomplete
-container
{
1902 background
-color
: rgba(136, 136, 136, 0.75);
1903 border
: 1px solid
rgba(204, 204, 204, 0.75);
1906 .textarea
-container
.autocomplete
-container div
.highlighted
{
1907 background
-color
: rgba(204, 204, 204, 0.75);
1911 .textarea
-container
.autocomplete
-container div
:not(.highlighted
):hover
{
1912 background
-color
: rgba(204, 204, 204, 0.25);
1916 /*=================*/
1917 /* ALIGNMENT FORUM */
1918 /*=================*/
1920 #content.alignment-forum-index-page::before {
1921 background
-color
: #878a9f;
1923 #content.alignment-forum-index-page::after {
1924 font
-family
: "Concourse SmallCaps";
1926 background
-color
: #222d4b;
1928 -webkit
-background
-clip
: text
;
1930 rgba(136,136,136,0.5) 0px
3px
3px
;
1932 @media only screen
and (hover
: hover
) {
1933 #content.alignment-forum-index-page h1.listing a:hover,
1934 #content.alignment-forum-index-page h1.listing a:focus {
1935 background
-color
: rgba(135,138,159,0.85);
1939 /*====================*/
1940 /* FOR NARROW SCREENS */
1941 /*====================*/
1943 @media only screen
and (max
-width
: 1440px
) {
1945 background
-color
: #888;
1950 #hns-date-picker::before {
1954 @media only screen
and (max
-width
: 1160px
) {
1959 #theme-tweaker-toggle {
1963 #new-comment-nav-ui,
1964 #new-comment-nav-ui + #hns-date-picker {
1968 @media only screen
and (max
-width
: 1080px
) {
1969 #text-size-adjustment-ui button {
1970 border
: 1px solid
#999;
1975 0 0 0 1px transparent
;
1981 @media only screen
and (max
-width
: 1040px
) {
1986 @media only screen
and (max
-width
: 1020px
) {
1996 /*******************************************/
1997 @media only screen
and (max
-width
: 1160px
) {
1998 /*******************************************/
2000 #ui-elements-container > div[id$='-ui-toggle'] button,
2001 #theme-selector .theme-selector-close-button {
2013 background
-color
: #888;
2021 border
-radius
: 12px
;
2023 #theme-selector::before {
2028 0.5px
0.5px
1px
#aaa,
2029 0.5px
0.5px
1px
#bbb;
2031 #theme-selector button {
2032 border
-radius
: 10px
;
2034 #theme-selector button::after {
2036 max
-width
: calc(100%
- 3.5em
);
2038 text
-overflow
: ellipsis
;
2040 #theme-selector button.selected::after {
2047 #theme-selector .auxiliary-controls-container {
2048 border
-top
-color
: #444;
2050 #theme-selector .auxiliary-controls-container button {
2051 border
: 1px solid
#444;
2053 #theme-selector .auxiliary-controls-container #theme-tweaker-toggle button {
2056 #theme-selector #anti-kibitzer-toggle button::before,
2057 #theme-selector #anti-kibitzer-toggle button::after {
2058 background
-color
: #000;
2060 #theme-selector #dark-mode-selector {
2061 border
: 1px solid
#444;
2063 #theme-selector #dark-mode-selector button {
2066 #theme-selector #dark-mode-selector button.selected {
2068 background
-color
: #444;
2070 box
-shadow
: 0 0 2px
0 #444;
2074 background
-color
: #999;
2077 background
-color
: #888;
2078 box
-shadow
: 0 0 0 1px
#444;
2082 #new-comment-nav-ui,
2091 #quick-nav-ui a::after,
2092 #new-comment-nav-ui::before {
2093 font
-family
: <?php
echo $UI_font; ?
>;
2099 background
-color
: #999;
2103 #new-comment-nav-ui {
2106 #new-comment-nav-ui {
2107 background
-color
: #888;
2108 border
: 1px solid
#444;
2110 #new-comment-nav-ui::before {
2114 #new-comment-nav-ui .new-comments-count,
2115 #new-comment-nav-ui .new-comments-count::after {
2118 #new-comment-nav-ui .new-comment-sequential-nav-button {
2119 box
-shadow
: 0 0 0 1px
#444;
2122 #new-comment-nav-ui .new-comments-count {
2123 background
-color
: inherit
;
2124 box
-shadow
: 0 -1px
0 0 #444;
2126 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2129 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2130 border
-radius
: 7px
0 0 7px
;
2132 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2133 border
-radius
: 0 7px
7px
0;
2135 #new-comment-nav-ui button::after {
2136 font
-family
: <?php
echo $UI_font; ?
>;
2139 #hns-date-picker.engaged {
2142 border
: 1px solid
#444;
2144 #hns-date-picker span,
2145 #hns-date-picker input {
2149 /*****************************************/
2150 @media only screen
and (max
-width
: 900px
) {
2151 /*****************************************/
2152 h1
.listing +
.post
-meta
.post
-section
::before
{
2156 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
2159 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2167 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
2168 background
-color
: #ccc;
2171 .comment
-item
.comment
-item
{
2172 margin
: 0.75em
0 4px
6px
;
2174 .comment
-item
.comment
-item +
.comment
-item
{
2175 margin
: 1.5em
0 4px
6px
;
2178 .comment
-controls
.cancel
-comment
-button
::before
{
2184 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
2185 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
2186 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
2191 /*****************************************/
2192 } @media only screen
and (max
-width
: 720px
) {
2193 /*****************************************/
2194 /*******************************************/
2195 } @media only screen
and (max
-width
: 520px
) {
2196 /*******************************************/
2199 margin
: 18px
6px
4px
6px
;
2200 max
-width
: calc(100%
- 12px
);
2202 h1
.listing +
.post
-meta
{
2205 h1
.listing +
.post
-meta
> * {
2208 h1
.listing
.link
-post
-link
{
2212 #content.compact > .comment-thread .comment-item {
2216 .textarea
-container
:focus
-within textarea
{
2217 background
-color
: #888;
2219 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
2220 border
: 1px solid transparent
;
2223 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
2231 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2232 background
-color
: #888;
2233 border
-top
: 1px solid
#ddf;
2235 #content.conversation-page .textarea-container:focus-within::after {
2236 background
-color
: #888;
2238 .textarea
-container
:focus
-within button
.guiedit
{
2239 border
: 1px solid transparent
;
2241 #markdown-hints::after {
2245 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2248 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {