2 $UI_font = "'Concourse', 'a_Avante', Arial, 'GW-Symbols', sans-serif";
3 $UI_font_smallcaps = "'Concourse Smallcaps', 'a_Avante', Arial, sans-serif";
4 $text_font = "'Source Sans Pro', 'Trebuchet MS', 'Helvetica', 'Arial', 'Verdana', sans-serif";
5 $hyperlink_color = "#f60";
6 $white_glow = "0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff";
20 --GW
-comment
-background
-color
-odd
: #eee;
21 --GW
-comment
-background
-color
-even
: #fff;
22 --GW
-comment
-background
-color
-target
: #ffd;
31 background
-color
: #eee;
32 font
-family
: <?php
echo $UI_font; ?
>;
33 font
-feature
-settings
: 'ss07';
39 background
-color
: #fff;
40 box
-shadow
: 0px
0px
10px
#bbb;
50 padding
: 11px
30px
13px
30px
;
52 .nav
-current
.nav
-inner
{
55 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
58 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
61 @media only screen
and (min
-width
: 901px
) {
62 .nav
-bar
.top
:not(#primary-bar) #nav-item-sequences .nav-inner {
67 #bottom-bar.decorative::before,
68 #bottom-bar.decorative::after {
72 padding
: 0.25em
0 1em
0;
74 #bottom-bar.decorative::before {
77 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
78 background
-repeat
: repeat
-x
;
79 background
-position
: center
35%
;
82 #bottom-bar.decorative::after {
88 background
-color
: #fff;
92 <?php
fit_content("#bottom-bar.decorative::after"); ?
>
94 .nav
-bar
.nav
-item
:not(.nav
-current
):not(#nav-item-search):hover,
96 #nav-item-search:not(.nav-current):focus-within {
97 background
-color
: #ddd;
99 .inactive
-bar
.nav
-item
:not(.nav
-current
):not(#nav-item-search):hover,
100 .inactive
-bar
#nav-item-search:not(.nav-current):focus-within {
101 background
-color
: #d8d8d8;
110 text
-decoration
: none
;
111 text
-shadow
: <?php
echo $white_glow; ?
>;
114 /* Accesskey hints */
125 .inactive
-bar
.nav
-inner
::after
{
128 .nav
-inner
:hover
::after
{
132 /* This makes the navbar items look like tabs: */
136 0 -1px
#d8d8d8 inset,
139 .nav
-inactive
:first
-child
{
140 box
-shadow
: 0 -1px
#d8d8d8 inset;
142 .inactive
-bar
.nav
-inactive
{
143 background
-color
: #e4e4e4;
145 .active
-bar
.nav
-inactive
{
146 background
-color
: #eee;
148 .nav
-bar +
.nav
-bar
{
154 box
-shadow
: 0 -3px
8px
-2px
#ccc;
156 .active
-bar
.nav
-inactive
{
158 0 -4px
8px
-4px
#bbb inset,
161 .active
-bar
.nav
-inactive
:first
-child
{
163 0 -4px
8px
-4px
#bbb inset;
165 .active
-bar
.nav
-current +
.nav
-inactive
{
167 5px
-4px
8px
-4px
#bbb inset;
169 .active
-bar
.nav
-item
-last
-before
-current
{
171 -5px
-4px
8px
-4px
#bbb inset,
174 .active
-bar
.nav
-item
-last
-before
-current
:first
-child
{
176 -5px
-4px
8px
-4px
#bbb inset;
179 @-moz
-document url
-prefix() {
181 box
-shadow
: 0 -3px
4px
-2px
#ccc;
184 .active
-bar
.nav
-inactive
{
186 0 -4px
4px
-4px
#bbb inset,
189 .active
-bar
.nav
-inactive
:first
-child
{
191 0 -4px
4px
-4px
#bbb inset;
193 .active
-bar
.nav
-current +
.nav
-inactive
{
195 5px
-4px
4px
-4px
#bbb inset;
197 .active
-bar
.nav
-item
-last
-before
-current
{
199 -5px
-4px
4px
-4px
#bbb inset,
202 .active
-bar
.nav
-item
-last
-before
-current
:first
-child
{
204 -5px
-4px
4px
-4px
#bbb inset;
210 #nav-item-search form::before {
212 font
-size
: 0.9375rem
;
214 #nav-item-search button {
219 #nav-item-search input::placeholder {
224 /* Inbox indicator */
230 /*= Top pagination UI hover tooltips =*/
232 #top-nav-bar a::after,
233 #bottom-bar a::after {
249 .sublevel
-nav
.sublevel
-item
{
251 background
-color
: #fff;
253 .sublevel
-nav
.sublevel
-item
:not(.selected
):hover
{
254 background
-color
: #ddd;
256 text
-decoration
: none
;
259 .sublevel
-nav
.sublevel
-item
:not(.selected
):active
,
260 .sublevel
-nav
.sublevel
-item
.selected
{
261 background
-color
: #ddd;
268 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
271 border
-width
: 1px
0 1px
1px
;
273 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
{
274 border
-radius
: 8px
0 0 8px
;
276 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
278 border
-radius
: 0 8px
8px
0;
281 /*=====================*/
282 /* SORT ORDER SELECTOR */
283 /*=====================*/
285 .sublevel
-nav
.sort
.sublevel
-item
{
286 font
-family
: <?php
echo $UI_font; ?
>;
287 letter
-spacing
: 0.5px
;
288 padding
: <?php
echo ($platform == 'Mac') ?
"7px 7px 5px 7px" : "6px 7px"; ?
>;
289 text
-transform
: uppercase
;
290 pointer
-events
: auto
;
291 box
-shadow
: 1px
1px
0 0 #aaa inset;
294 border
: 2px solid transparent
;
297 pointer
-events
: none
;
298 background
-color
: #bbb;
300 .sublevel
-nav
.sort
::before
{
301 text
-transform
: uppercase
;
304 text
-shadow
: 0.5px
0.5px
0 #fff;
307 .sublevel
-nav
.sort
::after
{
317 0 18px
0 0 #bbb inset,
318 0 0 0 1px
#aaa inset,
319 0 18px
0 1px
#aaa inset,
329 #theme-selector button,
330 #width-selector button {
332 0 0 0 4px
#eee inset,
333 0 0 0 5px
#ccc inset;
335 #theme-selector button:hover,
336 #theme-selector button.selected,
337 #width-selector button:hover,
338 #width-selector button.selected {
341 0 0 0 5px
#ccc inset;
344 #theme-selector button::before {
346 background
-color
: #eee;
348 #theme-selector button:hover::before,
349 #theme-selector button.selected::before {
352 #width-selector button::after {
356 /*======================*/
357 /* THEME TWEAKER TOGGLE */
358 /*======================*/
360 #theme-tweaker-toggle button {
364 /*=================*/
365 /* QUICKNAV WIDGET */
366 /*=================*/
370 background
-color
: #e4e4e4;
372 text
-decoration
: none
;
374 #quick-nav-ui a[href='#bottom-bar'] {
377 #quick-nav-ui a:active {
378 transform
: scale(0.9);
380 #quick-nav-ui a[href='#comments'].no-comments {
384 @media only screen
and (hover
:hover
) {
385 #quick-nav-ui a:hover {
387 background
-color
: #d8d8d8;
389 #quick-nav-ui a:focus:not(:hover) {
395 /*======================*/
396 /* NEW COMMENT QUICKNAV */
397 /*======================*/
399 #new-comment-nav-ui .new-comments-count {
402 text
-shadow
: 0.5px
0.5px
0 #fff;
404 #new-comment-nav-ui .new-comments-count::after {
408 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
412 @media only screen
and (hover
:hover
) {
413 #new-comment-nav-ui .new-comments-count:hover {
421 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
423 text
-shadow
: 0 0 1px
#fff, 0 0 3px #fff, 0 0 5px #fff;
427 /*=================*/
428 /* HNS DATE PICKER */
429 /*=================*/
431 #hns-date-picker span {
433 text
-shadow
: 0.5px
0.5px
0 #fff;
436 #hns-date-picker input {
437 border
: 1px solid
#777;
438 background
-color
: transparent
;
441 #hns-date-picker input:focus {
445 /*======================*/
446 /* ANTI-KIBITZER TOGGLE */
447 /*======================*/
449 #anti-kibitzer-toggle button::before,
450 #anti-kibitzer-toggle button::after {
451 background
-color
: #aaa;
452 -webkit
-background
-clip
: text
;
454 text
-shadow
: rgba(255,255,255,0.5) 0px
1px
1px
;
456 #anti-kibitzer-toggle button:hover::before,
457 #anti-kibitzer-toggle button:hover::after {
458 background
-color
: #555;
461 /*======================*/
462 /* TEXT SIZE ADJUSTMENT */
463 /*======================*/
465 #text-size-adjustment-ui button {
468 #text-size-adjustment-ui button.default {
471 #text-size-adjustment-ui button:disabled:hover {
474 #text-size-adjustment-ui::after {
478 /*=============================*/
479 /* COMMENTS VIEW MODE SELECTOR */
480 /*=============================*/
482 #comments-view-mode-selector a {
491 border
: 1px solid
#aaa;
493 .archive
-nav
*[class^
='archive-nav-item'] {
496 border
-width
: 1px
0 1px
1px
;
497 background
-color
: #eee;
499 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
501 border
-bottom
-width
: 0;
503 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
504 border
-bottom
-width
: 1px
;
506 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
507 border
-right
-width
: 1px
;
509 .archive
-nav span
[class^
='archive-nav-item'] {
511 background
-color
: #ddd;
515 .archive
-nav a
:visited
{
518 .archive
-nav a
:hover
{
519 text
-decoration
: none
;
521 background
-color
: #e0e0e0;
522 text
-shadow
: <?php
echo $white_glow; ?
>;
524 .archive
-nav a
:active
{
525 transform
: scale(0.9);
527 .archive
-nav a
:focus
:not(:hover
) {
530 .archive
-nav a
.archive
-nav
-item
-day
:hover
{
531 background
-color
: #ddd;
538 #nav-item-about button.open-keyboard-help {
549 margin
: 0.6em
20px
0 20px
;
550 max
-width
: calc(100%
- 40px
);
552 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
555 h1
.listing
.post
-title
-link
{
558 h1
.listing
.link
-post
-link
{
563 @media only screen
and (hover
: hover
) {
567 background
-color
: rgba(255,255,255,0.85);
569 h1
.listing
:focus
-within
::before
{
573 h1
.listing
.link
-post
-link
:hover
{
577 -0.5px
-0.5px
0 #fff,
583 h1
.listing
.edit
-post
-link
{
584 padding
: 5px
3px
36px
0.5em
;
587 background
-color
: #eee;
589 h1
.listing
.edit
-post
-link
:hover
{
590 text
-decoration
: none
;
592 #content.user-page h1.listing .edit-post-link {
593 background
-color
: #eee;
603 h1
.listing
.spam +
.post
-meta
{
606 h1
.listing
.spam
:hover
,
607 h1
.listing
.spam +
.post
-meta
:hover
,
608 h1
.listing
.spam
:hover +
.post
-meta
{
612 /*===================*/
613 /* LISTING POST-META */
614 /*===================*/
616 h1
.listing +
.post
-meta
> * {
620 h1
.listing +
.post
-meta
.karma
::after
{
623 h1
.listing +
.post
-meta
.date
::before
{
626 h1
.listing +
.post
-meta
.date
::after
{
629 margin
: 0 0.5em
0 0.125em
;
631 h1
.listing +
.post
-meta
.comment
-count
.new-comments
::before
{
634 h1
.listing
:last
-of
-type +
.post
-meta
{
637 h1
.listing +
.post
-meta
.karma
{
639 margin
-right
: 0.25em
;
641 h1
.listing +
.post
-meta
.author
{
642 margin
-right
: 0.25em
;
644 h1
.listing +
.post
-meta
.date
{
647 h1
.listing +
.post
-meta
.post
-section
{
651 h1
.listing +
.post
-meta
.post
-section
::before
{
656 h1
.listing +
.post
-meta
.link
-post
-domain
{
664 #content.user-page h1.page-main-heading {
665 border
-bottom
: 1px solid
#ccc;
668 #content.user-page h1.listing,
669 #content.user-page h1.listing + .post-meta {
670 background
-color
: #eee;
674 #content.user-page h1.listing {
678 border
-width
: 1px
1px
0 1px
;
680 #content.own-user-page h1.listing,
681 h1
.listing
.own
-post
-listing
{
684 @media only screen
and (hover
: hover
) {
685 #content.user-page h1.listing a:hover,
686 #content.user-page h1.listing a:focus {
687 background
-color
: #eee;
689 #content.user-page h1.listing:focus-within::before {
693 #content.user-page h1.listing + .post-meta {
695 padding
: 0.5em
6px
6px
34px
;
696 border
-width
: 0 1px
1px
1px
;
698 #content.user-page h1.listing + .post-meta .post-section::before {
703 #content.conversations-user-page h1.listing {
704 padding
: 6px
6px
4px
8px
;
707 #content.conversations-user-page h1.listing + .post-meta {
709 margin
: 0 0 0.25rem
0;
711 #content.conversations-user-page h1.listing + .post-meta .date::after {
715 .user
-stats
.karma
-total
{
723 #content.conversation-page h1.page-main-heading {
732 .login
-container form input
[type
='submit'] {
734 background
-color
: #eee;
735 border
: 1px solid
#ccc;
737 .login
-container form input
[type
='submit']:hover
,
738 .login
-container form input
[type
='submit']:focus
{
739 background
-color
: #ddd;
740 border
: 1px solid
#aaa;
743 /* “Create account” form */
746 background
-color
: #f3f3f3;
747 border
: 1px solid
#ddd;
749 #signup-form input[type='submit'] {
750 background
-color
: #e4e4e4;
751 border
: 1px solid
#ccc;
753 #signup-form input[type='submit']:hover {
754 background
-color
: #d8d8d8;
755 border
: 1px solid
#aaa;
760 .login
-container
.login
-tip
{
761 border
: 1px solid
#eee;
767 border
: 1px solid red
;
768 background
-color
: #faa;
771 border
: 1px solid green
;
772 background
-color
: #afa;
775 /*=====================*/
776 /* PASSWORD RESET PAGE */
777 /*=====================*/
779 .reset
-password
-container input
[type
='submit'] {
780 background
-color
: #e4e4e4;
781 border
: 1px solid
#ccc;
785 /*===================*/
786 /* TABLE OF CONTENTS */
787 /*===================*/
790 font
-family
: <?php
echo $UI_font; ?
>;
791 border
: 1px solid
#ddd;
792 background
-color
: #eee;
800 .post
-body
.contents ul
{
803 .contents li
::before
{
805 font
-feature
-settings
: "tnum";
808 /*=================*/
809 /* POST NAVIGATION */
810 /*=================*/
813 .post
-nav
-links a
:visited
{
816 .post
-nav
-links a
:hover
{
817 text
-decoration
: none
;
824 .post
-nav
-links a
:hover
.post
-nav
-title
{
828 @media only screen
and (max
-width
: 900px
) {
830 border
-top
: 1px dotted
#aaa;
833 border
-right
: 1px dotted
#aaa;
836 border
-left
: 1px dotted
#aaa;
840 /*==================*/
841 /* POSTS & COMMENTS */
842 /*==================*/
845 font
-family
: <?php
echo $text_font; ?
>;
848 @-moz
-document url
-prefix() {
850 font
-weight
: <?php
global $platform; echo ($platform == 'Windows' ?
'300' : '400'); ?
>;
855 margin
: 1.1em
0 0.25em
0;
862 font
-size
: 1.1875rem
;
865 @media
(-webkit
-max
-device
-pixel
-ratio
: 1), (max
-resolution
: 191dpi
) {
886 .post
-meta
.comment
-count span
,
887 .post
-meta
.read
-time span
,
888 .post
-meta
.word
-count span
,
889 .post
-meta
.lw2
-link span
{
892 .post
-meta
.comment
-count
::before
,
893 .post
-meta
.read
-time
::before
,
894 .post
-meta
.word
-count
::before
,
895 .post
-meta
.lw2
-link
::before
{
896 font
-family
: Font Awesome
;
897 margin
: 0 0.25em
0 0;
901 .post
-meta
.comment
-count
{
902 margin
: 0 0.25em
0 0;
904 .post
-meta
.read
-time
,
905 .post
-meta
.word
-count
,
906 .post
-meta
.lw2
-link
{
907 margin
: 0 0.25em
0 0.5em
;
909 .post
-meta
.lw2
-link
{
912 .post
-meta
.comment
-count
:hover
,
913 .post
-meta
.lw2
-link
:hover
{
914 text
-decoration
: none
;
920 .post
-meta
.comment
-count
:hover
::before
,
921 .post
-meta
.lw2
-link
:hover
::before
{
924 .post
-meta
.read
-time
:hover
::before
{
928 .post
-meta
.comment
-count
::before
{
931 .post
-meta
.read
-time
::before
{
934 .post
-meta
.read
-time
::after
{
937 .post
-meta
.word
-count
::before
{
940 .post
-meta
.word
-count
::after
{
943 .post
-meta
.lw2
-link
::before
{
952 .post
.post
-meta
.author
{
953 margin
: 0 0.75em
0 0;
955 .post
.post
-meta
.comment
-count
{
958 .post
.post
-meta
.lw2
-link
{
959 margin
: 0 1em
0 0.5em
;
961 .post
.post
-meta
.voting
-controls
{
965 .post
-meta
.post
-section
::before
,
966 .comment
-meta
.alignment
-forum
{
973 a
.post
-section
:hover
{
974 text
-decoration
: none
;
976 a
.post
-section
:hover
::before
{
979 .post
-meta
.post
-section
.alignment
-forum
::before
{
985 a
.post
-section
.alignment
-forum
:hover
::before
{
997 .post
.link
-post a
.link
-post
-link
{
998 text
-decoration
: none
;
999 font
-family
: <?php
echo $UI_font; ?
>;
1002 .post
.link
-post a
.link
-post
-link
:hover
{
1005 .post
.link
-post a
.link
-post
-link
:hover
::before
{
1009 -0.5px
-0.5px
0 #fff,
1013 .post
.link
-post a
.link
-post
-link
:focus
{
1015 border
-bottom
: 2px dotted
#777;
1023 border
-top
: 1px solid
#000;
1024 box
-shadow
: 0 3px
4px
-4px
#000 inset;
1026 @-moz
-document url
-prefix() {
1028 box
-shadow
: 0 3px
3px
-4px
#000 inset;
1031 #content > .comment-thread .comment-meta a.date:focus,
1032 #content > .comment-thread .comment-meta a.permalink:focus {
1034 outline
: 2px dotted
#aaa;
1036 background
-color
: #fff;
1038 #content > .comment-thread .comment-meta a.date:focus {
1042 #content > .comment-thread .comment-meta a.date:focus + * {
1045 #content > .comment-thread .comment-meta a.permalink:focus {
1049 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1053 border
: 1px solid
#ccc;
1054 background
-color
: var(--GW
-comment
-background
-color
);
1056 .comment
-parent
-link
::after
{
1058 0 28px
16px
-16px
var(--GW
-comment
-parent
-background
-color
) inset
,
1059 4px
16px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
,
1060 4px
4px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
;
1063 /*================================*/
1064 /* DEEP COMMENT THREAD COLLAPSING */
1065 /*================================*/
1067 .comment
-item input
[id^
="expand"] + label
::after
{
1068 color
: <?php
echo $hyperlink_color; ?
>;
1071 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
1074 .comment
-item input
[id^
="expand"] + label
:active
::after
,
1075 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
1078 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
1079 border
-width
: 1px
0 0 0;
1089 .comment
-meta
.author
{
1094 .comment
-meta
.author
:hover
{
1095 text
-decoration
: none
;
1098 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
1102 .comment
-item
.voting
-controls
.active
-controls
::after
,
1103 .comment
-item
.voting
-controls
.karma
-value
::after
,
1104 .post
.voting
-controls
.active
-controls
::after
,
1105 .post
.voting
-controls
.karma
-value
::after
,
1107 background
-color
: #fff;
1110 box
-shadow
: 0 0 0 1px
#ddd inset;
1112 .comment
-item
.voting
-controls
.active
-controls
::after
,
1113 .post
.voting
-controls
.active
-controls
::after
{
1114 padding
: 6px
4px
4px
4px
;
1117 .comment
-item
.voting
-controls
.karma
-value
::after
,
1118 .post
.voting
-controls
.karma
-value
::after
{
1119 padding
: 2px
8px
1px
8px
;
1124 /*====================*/
1125 /* ANTI-KIBITZER MODE */
1126 /*====================*/
1129 .inline
-author
.redacted
{
1134 .karma
-value
.redacted
{
1138 .link
-post
-domain
.redacted
{
1142 /*===========================*/
1143 /* COMMENT THREAD NAVIGATION */
1144 /*===========================*/
1146 div
.comment
-parent
-link
{
1149 a
.comment
-parent
-link
{
1152 a
.comment
-parent
-link
::before
{
1155 a
.comment
-parent
-link
:hover
::before
{
1156 background
-color
: #ffd;
1160 div
.comment
-child
-links
{
1163 div
.comment
-child
-links a
{
1166 .comment
-child
-link
::before
{
1170 .comment
-item
-highlight
{
1177 border
: 1px solid
#e7b200;
1179 .comment
-item
-highlight
-faint
{
1186 border
: 1px solid
#f8e7b5;
1190 background
-color
: #fff;
1193 /*=======================*/
1194 /* COMMENTS COMPACT VIEW */
1195 /*=======================*/
1197 #comments-list-mode-selector button {
1199 0 0 0 4px
#fff inset,
1200 0 0 0 5px
#bbb inset;
1202 #comments-list-mode-selector button:hover,
1203 #comments-list-mode-selector button.selected {
1205 0 0 0 5px
#bbb inset;
1207 #content.compact > .comment-thread .comment-item::after {
1208 color
: <?php
echo $hyperlink_color; ?
>;
1209 background
: linear
-gradient(to right
, transparent
0%
, #fff 50%, #fff 100%);
1212 @media only screen
and (hover
: hover
) {
1213 #content.compact > .comment-thread .comment-item:hover .comment,
1214 #content.compact > .comment-thread .comment-item.expanded .comment {
1215 background
-color
: #fff;
1216 outline
: 3px solid
<?php
echo $hyperlink_color; ?
>;
1218 #content.compact > .comment-thread .comment-item:hover .comment::before,
1219 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1220 background
-color
: #fff;
1231 @media only screen
and (hover
: none
) {
1232 #content.compact > .comment-thread.expanded .comment-item .comment {
1233 background
-color
: #fff;
1234 outline
: 3px solid
<?php
echo $hyperlink_color; ?
>;
1236 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1237 background
-color
: #fff;
1249 #content.user-page.compact > h1.listing {
1252 #content.user-page.compact > h1.listing + .post-meta {
1253 margin
-bottom
: 0.5rem
;
1256 /*===========================*/
1257 /* HIGHLIGHTING NEW COMMENTS */
1258 /*===========================*/
1260 .new-comment
::before
{
1261 outline
: 2px solid
#9037ff;
1263 0 0 6px
-2px
#9037ff inset,
1268 /*=================================*/
1269 /* COMMENT THREAD MINIMIZE BUTTONS */
1270 /*=================================*/
1272 .comment
-minimize
-button
{
1275 .comment
-minimize
-button
:hover
{
1277 text
-shadow
: <?php
echo $white_glow; ?
>;
1279 .comment
-minimize
-button
::after
{
1280 font
-family
: <?php
echo $UI_font; ?
>;
1283 .comment
-minimize
-button
.maximized
::after
{
1287 /*=================================*/
1288 /* INDIVIDUAL COMMENT THREAD PAGES */
1289 /*=================================*/
1291 .individual
-thread
-page
> h1
{
1292 font
-weight
: normal
;
1310 .karma
.upvote
::before
{
1314 .karma
.downvote
::before
{
1318 .karma
.upvote
::after
{
1323 .karma
.downvote
::after
{
1328 @-moz
-document url
-prefix() {
1329 .karma
.upvote
::after
{
1333 .karma
.downvote
::after
{
1339 .agreement
.upvote
::before
{
1343 .agreement
.downvote
::before
{
1347 .agreement
.upvote
::after
{
1352 .agreement
.downvote
::after
{
1357 @-moz
-document url
-prefix() {
1358 .agreement
.upvote
::after
{
1362 .agreement
.downvote
::after
{
1381 .upvote
:not(.none
) {
1382 color
: var(--GW
-upvote
-button
-color
);
1388 .downvote
:not(.none
) {
1389 color
: var(--GW
-downvote
-button
-color
);
1403 .vote
.two
-temp
::after
,
1405 visibility
: visible
;
1410 .vote
.two
-temp
::after
{
1421 .vote
:disabled
:hover
{
1425 /*===========================*/
1426 /* COMMENTING AND POSTING UI */
1427 /*===========================*/
1429 .posting
-controls input
[type
='submit'] {
1430 background
-color
: #fff;
1431 border
: 1px solid
#aaa;
1434 .posting
-controls input
[type
='submit']:hover
,
1435 .posting
-controls input
[type
='submit']:focus
{
1436 background
-color
: #ddd;
1437 border
: 1px solid
#999;
1440 .comment
-controls
.cancel
-comment
-button
{
1447 .comment
-controls
.cancel
-comment
-button
:hover
{
1449 text
-shadow
: <?php
echo $white_glow; ?
>;
1452 .new-comment
-button
{
1456 .comment
-controls
.delete
-button
,
1457 .comment
-controls
.retract
-button
{
1460 .comment
-controls
.edit
-button
,
1461 .comment
-controls
.unretract
-button
{
1464 .comment
-controls
.action
-button
:hover
{
1469 .edit
-post
-link
:visited
{
1473 .posting
-controls textarea
{
1475 font
-family
: <?php
echo $text_font; ?
>;
1477 background
-color
: #fff;
1480 0 0 0 1px
#eee inset;
1482 @-moz
-document url
-prefix() {
1483 .posting
-controls textarea
{
1484 font
-weight
: <?php
global $platform; echo ($platform == 'Windows' ?
'300' : '400'); ?
>;
1487 .posting
-controls textarea
:focus
{
1488 background
-color
: #ffe;
1489 border
-color
: <?php
echo $hyperlink_color; ?
>;
1491 0 0 0 1px
#ddf inset,
1493 0 0 0 2px
<?php
echo $hyperlink_color; ?
>;
1495 .posting
-controls
.edit
-existing
-post textarea
:focus
,
1496 .posting
-controls form
.edit
-existing
-comment textarea
:focus
{
1499 0 0 0 1px
#81ff7f inset,
1506 .posting
-controls textarea
::-webkit
-scrollbar
{
1508 background
-color
: transparent
;
1510 .posting
-controls textarea
::-webkit
-scrollbar
-track
{
1511 background
-color
: #eee;
1512 border
-left
: 1px solid
#bbb;
1513 border
-top
: 1px solid
#eee;
1515 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-track
{
1516 border
-left
: 1px solid
#f60;
1517 border
-top
: 1px solid
#ddf;
1519 .posting
-controls textarea
::-webkit
-scrollbar
-thumb
{
1520 background
-color
: #bbb;
1521 box
-shadow
: 0 0 0 1px
#eee inset;
1522 border
-left
: 1px solid
#bbb;
1524 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-thumb
{
1525 border
-left
: 1px solid
#f60;
1526 background
-color
: #f60;
1528 0 1px
0 0 #ddf inset,
1529 0 0 0 1px
#eee inset;
1532 .posting
-controls
.edit
-existing
-post textarea
:focus
::-webkit
-scrollbar
-track
,
1533 .posting
-controls form
.edit
-existing
-comment textarea
:focus
::-webkit
-scrollbar
-track
{
1534 border
-left
: 1px solid
#090;
1536 .posting
-controls
.edit
-existing
-post textarea
:focus
::-webkit
-scrollbar
-thumb
,
1537 .posting
-controls form
.edit
-existing
-comment textarea
:focus
::-webkit
-scrollbar
-thumb
{
1538 border
-left
: 1px solid
#090;
1539 background
-color
: #28a708;
1542 /* GUIEdit buttons */
1544 .guiedit
-buttons
-container
{
1545 background
-image
: linear
-gradient(to bottom
, #fff 0%, #ddd 50%, #ccc 75%, #aaa 100%);
1548 .posting
-controls
.edit
-existing
-post
.guiedit
-buttons
-container button
,
1549 .posting
-controls form
.edit
-existing
-comment
.guiedit
-buttons
-container button
{
1553 font
-family
: Font Awesome
, <?php
echo $text_font; ?
>;
1556 button
.guiedit
::after
{
1557 font
-family
: <?php
echo $UI_font; ?
>;
1562 /* Markdown hints */
1564 #markdown-hints-checkbox + label {
1567 #markdown-hints-checkbox + label:hover {
1569 text
-shadow
: <?php
echo $white_glow; ?
>;
1572 border
: 1px solid
#c00;
1573 background
-color
: #ffa;
1576 /*================*/
1577 /* EDIT POST FORM */
1578 /*================*/
1580 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1583 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1585 border
: 1px solid
#ddd;
1588 @media only screen
and (hover
:hover
) {
1589 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1590 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1596 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1597 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1601 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1604 #edit-post-form input[type='radio'] + label {
1607 padding
: 4px
12px
5px
12px
;
1609 #edit-post-form input[type='radio'][value='all'] + label {
1610 border
-radius
: 8px
0 0 8px
;
1613 #edit-post-form input[type='radio'][value='drafts'] + label {
1614 border
-radius
: 0 8px
8px
0;
1616 #edit-post-form input[type='radio'] + label:hover,
1617 #edit-post-form input[type='radio']:focus + label {
1618 background
-color
: #ddd;
1621 #edit-post-form input[type='radio']:focus + label {
1626 #edit-post-form input[type='radio']:checked + label {
1627 background
-color
: #ddd;
1640 text
-decoration
: none
;
1641 color
: <?php
echo $hyperlink_color; ?
>;
1647 text
-decoration
: underline
;
1655 input
[type
='submit'] {
1656 color
: <?php
echo $hyperlink_color; ?
>;
1665 input
[type
='submit']:hover
,
1667 input
[type
='submit']:focus
{
1669 text
-shadow
: <?php
echo $white_glow; ?
>;
1672 input
[type
='submit']:active
{
1674 transform
: scale(0.9);
1678 text
-shadow
: <?php
echo $white_glow; ?
>;
1679 text
-decoration
: none
;
1682 transform
: scale(0.9);
1684 .button
:focus
:not(:hover
) {
1687 @-moz
-document url
-prefix() {
1700 font
-family
: <?php
echo $UI_font; ?
>;
1705 font
-family
: <?php
echo $UI_font_smallcaps; ?
>;
1719 border
-bottom
: 1px solid
#aaa;
1722 border
-bottom
: 1px dotted
#ccc;
1730 border
-left
: 5px solid
#ccc;
1738 #content figure.image img {
1739 border
: 1px solid
#ccc;
1741 #content figure img {
1742 border
: 1px solid
#000;
1744 #content img[src$='.svg'],
1745 #content figure img[src$='.svg'] {
1748 #content img[style^='float'] {
1749 border
: 1px solid transparent
;
1756 #content:not(.tag-index-page) .body-text table,
1757 #content:not(.tag-index-page) .body-text table th,
1758 #content:not(.tag-index-page) .body-text table td {
1759 border
: 1px solid
#ddd;
1767 border
-bottom
: 1px solid
#999;
1771 background
-color
: #f6f6ff;
1772 border
: 1px solid
#ddf;
1777 input
[type
='search'],
1778 input
[type
='password'] {
1779 background
-color
: #fff;
1780 border
: 1px solid
#ddd;
1783 input
[type
='text']:focus
,
1784 input
[type
='search']:focus
,
1785 input
[type
='password']:focus
{
1786 background
-color
: #ffe;
1787 border
: 1px solid
#bbb;
1788 box
-shadow
: 0 0 1px
#bbb;
1812 background
-color
: #e6e6e6;
1813 text
-decoration
: none
;
1815 0 -1px
0 0 #000 inset,
1816 0 -3px
1px
-2px
#000 inset;
1820 #content.about-page .accesskey-table {
1821 font
-family
: <?php
echo $UI_font; ?
>;
1825 #content.about-page img {
1826 border
: 1px solid
#000;
1829 /*========================*/
1830 /* QUALIFIED HYPERLINKING */
1831 /*========================*/
1836 #aux-about-link a:hover {
1838 text
-shadow
: <?php
echo $white_glow; ?
>;
1841 .qualified
-linking label
{
1842 color
: <?php
echo $hyperlink_color; ?
>;
1844 .qualified
-linking label
:hover
{
1851 .qualified
-linking
-toolbar
{
1852 border
: 1px solid
#000;
1853 background
-color
: #fff;
1855 .qualified
-linking
-toolbar a
{
1856 background
-color
: #eee;
1857 border
: 1px solid
#ccc;
1859 color
: <?php
echo $hyperlink_color; ?
>;
1861 .qualified
-linking
-toolbar a
:visited
{
1862 color
: <?php
echo $hyperlink_color; ?
>;
1864 .qualified
-linking
-toolbar a
:hover
{
1865 text
-decoration
: none
;
1866 background
-color
: #ddd;
1867 text
-shadow
: <?php
echo $white_glow; ?
>;
1869 .qualified
-linking label
::after
{
1870 background
-color
: #eee;
1878 .mathjax
-block
-container
::-webkit
-scrollbar
{
1880 background
-color
: #f6f6ff;
1882 border
: 1px solid
#ddf;
1884 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1885 background
-color
: #dde;
1887 border
: 1px solid
#cce;
1889 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1891 background
-color
: #f6f6ff;
1893 border
: 1px solid
#ddf;
1895 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1896 background
-color
: #dde;
1898 border
: 1px solid
#cce;
1901 /*=================*/
1902 /* ALIGNMENT FORUM */
1903 /*=================*/
1905 #content.alignment-forum-index-page::before {
1906 background
-color
: #f1f3ff;
1908 #content.alignment-forum-index-page::after {
1909 font
-family
: <?php
echo $UI_font_smallcaps; ?
>;
1911 background
-color
: #626dd7;
1912 -webkit
-background
-clip
: text
;
1915 rgba(255,255,255,0.5) 0px
3px
3px
;;
1917 @media only screen
and (hover
: hover
) {
1918 #content.alignment-forum-index-page h1.listing a:hover,
1919 #content.alignment-forum-index-page h1.listing a:focus {
1920 background
-color
: rgba(241,243,255,0.85);
1924 /*====================*/
1925 /* FOR NARROW SCREENS */
1926 /*====================*/
1928 @media only screen
and (max
-width
: 1440px
) {
1930 background
-color
: #eee;
1933 #hns-date-picker::before {
1934 border
: 1px solid
#ccc;
1935 border
-width
: 1px
0 1px
1px
;
1938 @media only screen
and (max
-width
: 1160px
) {
1940 background
-color
: #eee;
1943 0 0 0 2px transparent
;
1945 #theme-selector:hover::after {
1946 background
-color
: #999;
1947 width
: calc(6em
- 3px
);
1948 height
: calc(100%
- 5px
);
1952 #text-size-adjustment-ui button {
1953 background
-color
: #ddd;
1955 #text-size-adjustment-ui button:hover {
1956 background
-color
: #eee;
1958 #theme-tweaker-toggle button {
1959 background
-color
: #ddd;
1962 @media only screen
and (max
-width
: 1080px
) {
1963 #text-size-adjustment-ui button {
1964 border
: 1px solid
#999;
1969 0 0 0 1px transparent
;
1971 #theme-tweaker-toggle button {
1972 border
: 1px solid
#999;
1974 0 0 10px
#999 inset,
1975 0 0 0 1px transparent
;
1977 transform
: scale(0.8);
1980 @media only screen
and (max
-width
: 1020px
) {
1984 0 0 0 2px transparent
;
1986 #new-comment-nav-ui .new-comments-count::before {
1987 background
-color
: #eee;
1990 0 0 0 2px transparent
;
1993 #anti-kibitzer-toggle {
1996 0 0 0 2px transparent
;
1997 background
-color
: #eee;
2007 /*******************************************************/
2008 @media not screen
and (hover
:hover
) and (pointer
:fine
) {
2009 /*******************************************************/
2010 #ui-elements-container > div[id$='-ui-toggle'] button {
2022 background
-color
: #eee;
2030 border
-radius
: 12px
;
2032 #theme-selector::before,
2033 #theme-selector .theme-selector-close-button {
2035 text
-shadow
: 0.5px
0.5px
0 #fff;
2037 #theme-selector button {
2038 background
-color
: #e6e6e6;
2039 border
-radius
: 10px
;
2041 #theme-selector button::after {
2043 padding
-bottom
: 2px
;
2044 max
-width
: calc(100%
- 3.25em
);
2046 text
-overflow
: ellipsis
;
2048 #theme-selector button.selected::after {
2055 background
-color
: #fff;
2058 background
-color
: #eee;
2059 box
-shadow
: 0 0 0 1px
#999;
2062 #new-comment-nav-ui,
2071 #quick-nav-ui a::after,
2072 #new-comment-nav-ui::before {
2073 font
-family
: <?php
echo $UI_font; ?
>;
2079 background
-color
: #fff;
2083 #new-comment-nav-ui {
2086 #new-comment-nav-ui {
2087 background
-color
: #eee;
2088 border
: 1px solid
#999;
2090 #new-comment-nav-ui::before {
2094 #new-comment-nav-ui .new-comment-sequential-nav-button {
2095 box
-shadow
: 0 0 0 1px
#999;
2098 #new-comment-nav-ui .new-comments-count {
2099 background
-color
: inherit
;
2100 box
-shadow
: 0 -1px
0 0 #999;
2102 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2105 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2106 border
-radius
: 7px
0 0 7px
;
2108 #new-comment-nav-ui button::after {
2109 font
-family
: <?php
echo $UI_font; ?
>;
2111 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2112 border
-radius
: 0 7px
7px
0;
2115 /*****************************************/
2116 @media only screen
and (max
-width
: 900px
) {
2117 /*****************************************/
2118 h1
.listing +
.post
-meta
> * {
2121 h1
.listing +
.post
-meta
.post
-section
::before
{
2125 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
2128 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2131 .nav
-bar
-top
.nav
-inner
::before
{
2135 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
2136 background
-color
: #aaa;
2139 .comment
-item
.comment
-item
{
2140 margin
: 0.75em
2px
4px
6px
;
2142 .comment
-item
.comment
-item +
.comment
-item
{
2143 margin
: 1.5em
2px
4px
6px
;
2146 a
.comment
-parent
-link
:hover
::before
{
2147 background
-color
: unset;
2150 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
2151 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
2152 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
2157 /*******************************************/
2158 } @media only screen
and (max
-width
: 720px
) {
2159 /*******************************************/
2160 /*******************************************/
2161 } @media only screen
and (max
-width
: 520px
) {
2162 /*******************************************/
2165 margin
: 18px
6px
4px
6px
;
2166 max
-width
: calc(100%
- 12px
);
2168 h1
.listing +
.post
-meta
{
2171 h1
.listing
.link
-post
-link
{
2175 #content.compact > .comment-thread .comment-item {
2179 .textarea
-container
:focus
-within button
:active
{
2180 background
-color
: #ccc;
2182 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
2183 background
-color
: #eee;
2184 border
: 1px solid
#ddd;
2187 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
2195 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2196 background
-color
: #fff;
2197 border
-top
: 1px solid
#ddf;
2199 #content.conversation-page .textarea-container:focus-within::after {
2200 background
-color
: #fff;
2202 .textarea
-container
:focus
-within button
.guiedit
{
2203 background
-color
: #eee;
2204 border
: 1px solid
#ddd;
2207 #markdown-hints::after {
2211 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2214 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {