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 /*********************/
27 background
-color
: #888;
28 font
-family
: <?php
echo $UI_font; ?
>;
40 border
: 1px solid transparent
;
41 border
-bottom
-color
: #666;
43 0 1.5px
1.5px
-1.5px
#bbb,
45 margin
: 0 -30px
0 -2px
;
51 padding
: 11px
30px
13px
30px
;
53 .nav
-current
.nav
-inner
{
57 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
60 .nav
-bar
-top
:not(.nav
-bar
-top
:not(#primary-bar)) .nav-item:not(#nav-item-search) .nav-inner {
63 @media only screen
and (min
-width
: 901px
) {
64 .nav
-bar
-top
:not(#primary-bar) #nav-item-sequences .nav-inner {
69 #bottom-bar.decorative::before,
70 #bottom-bar.decorative::after {
74 padding
: 0.25em
0 1em
0;
76 #bottom-bar.decorative::before {
79 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
80 background
-repeat
: repeat
-x
;
81 background
-position
: center
35%
;
83 filter
: brightness(50%
) opacity(0.6);
85 #bottom-bar.decorative::after {
91 background
-color
: #888;
95 <?php
fit_content("#bottom-bar.decorative::after"); ?
>
101 .nav
-bar
.nav
-inner
:hover
,
102 .nav
-bar
.nav
-inner
:focus
{
103 text
-decoration
: underline
;
106 /* Accesskey hints */
117 .inactive
-bar
.nav
-inner
::after
{
121 .nav
-inner
:hover
::after
{
127 #nav-item-search form::before {
129 font
-size
: 0.9375rem
;
131 #nav-item-search button {
135 #nav-item-search input::placeholder {
140 /* Inbox indicator */
146 /*= Top pagination UI =*/
148 #top-nav-bar a::before {
152 /*= Bottom pagination UI =*/
154 #bottom-bar .nav-item a::before {
158 /*= Pagination UI hover tooltips =*/
160 #top-nav-bar a::after,
161 #bottom-bar a::after {
174 .logout
-button
::before
{
177 .page
-toolbar
.button
:hover
{
178 text
-decoration
: none
;
185 .sublevel
-nav
.sublevel
-item
{
187 background
-color
: #888;
189 .sublevel
-nav
.sublevel
-item
:not(.selected
):hover
{
191 text
-decoration
: none
;
193 .sublevel
-nav
.sublevel
-item
:hover
,
194 .sublevel
-nav
.sublevel
-item
.selected
{
195 background
-color
: #999;
197 .sublevel
-nav
.sublevel
-item
:not(.selected
):active
,
198 .sublevel
-nav
.sublevel
-item
.selected
{
202 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
205 border
-width
: 1px
0 1px
1px
;
207 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
{
208 border
-radius
: 8px
0 0 8px
;
210 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
212 border
-radius
: 0 8px
8px
0;
215 /*=====================*/
216 /* SORT ORDER SELECTOR */
217 /*=====================*/
219 .sublevel
-nav
.sort
.sublevel
-item
{
220 font
-family
: <?php
echo $UI_font; ?
>;
221 padding
: 8px
8px
6px
8px
;
222 text
-transform
: uppercase
;
223 pointer
-events
: auto
;
224 box
-shadow
: 1px
1px
0 0 #777 inset;
227 border
: 2px solid transparent
;
230 pointer
-events
: none
;
231 background
-color
: #999;
233 .sublevel
-nav
.sort
::before
{
234 text
-transform
: uppercase
;
239 .sublevel
-nav
.sort
::after
{
249 0 18px
0 0 #888 inset,
250 0 0 0 1px
#777 inset,
251 0 18px
0 1px
#777 inset,
259 #width-selector button {
261 0 0 0 4px
#888 inset,
262 0 0 0 5px
#ccc inset;
264 #width-selector button:hover,
265 #width-selector button.selected {
267 0 0 0 1px
#888 inset,
268 0 0 0 2px
#ccc inset,
269 0 0 0 4px
#888 inset,
270 0 0 0 5px
#ccc inset;
272 #width-selector button::after {
281 #theme-selector button {
283 0 0 0 5px
#888 inset;
285 #theme-selector button:hover,
286 #theme-selector button.selected {
288 0 0 0 2px
#888 inset,
289 0 0 0 3px
#ccc inset,
290 0 0 0 5px
#888 inset;
293 #theme-selector button::before {
295 background
-color
: #888;
297 #theme-selector button:hover::before,
298 #theme-selector button.selected::before {
302 /*======================*/
303 /* THEME TWEAKER TOGGLE */
304 /*======================*/
306 #theme-tweaker-toggle button:hover {
307 text
-decoration
: none
;
310 /*=================*/
311 /* QUICKNAV WIDGET */
312 /*=================*/
317 box
-shadow
: 0 0 0 1px
#999;
318 text
-decoration
: none
;
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 box
-shadow
: 0 0 0 1px
#ccc;
335 #quick-nav-ui a:focus:not(:hover) {
341 /*======================*/
342 /* NEW COMMENT QUICKNAV */
343 /*======================*/
345 #new-comment-nav-ui .new-comments-count {
349 #new-comment-nav-ui .new-comments-count::after {
353 #new-comment-nav-ui .new-comment-sequential-nav-button {
356 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
359 @media only screen
and (hover
: hover
) {
360 #new-comment-nav-ui .new-comments-count:hover {
368 #new-comment-nav-ui .new-comment-sequential-nav-button:hover {
370 text
-decoration
: none
;
372 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
374 text
-shadow
: 0 0 1px
#fff, 0 0 3px #fff, 0 0 5px #fff;
378 /*=================*/
379 /* HNS DATE PICKER */
380 /*=================*/
382 #hns-date-picker span {
386 #hns-date-picker input {
387 border
: 1px solid
#999;
388 background
-color
: transparent
;
391 #hns-date-picker input:focus {
393 border
: 1px solid
#ccc;
396 /*======================*/
397 /* ANTI-KIBITZER TOGGLE */
398 /*======================*/
400 #anti-kibitzer-toggle button::before,
401 #anti-kibitzer-toggle button::after {
402 background
-color
: #222;
403 -webkit
-background
-clip
: text
;
405 text
-shadow
: rgba(255,255,255,0.4) 0px
1px
1px
;
407 #anti-kibitzer-toggle button:hover::before,
408 #anti-kibitzer-toggle button:hover::after {
409 background
-color
: #000;
412 /*======================*/
413 /* TEXT SIZE ADJUSTMENT */
414 /*======================*/
416 #text-size-adjustment-ui button {
419 #text-size-adjustment-ui button.default {
422 #text-size-adjustment-ui button:hover {
423 text
-decoration
: none
;
426 #text-size-adjustment-ui::after {
431 /*=============================*/
432 /* COMMENTS VIEW MODE SELECTOR */
433 /*=============================*/
435 #comments-view-mode-selector a {
444 border
: 1px solid
#ccc;
446 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
448 border
-bottom
-width
: 0;
450 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
451 border
-bottom
-width
: 1px
;
453 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
454 border
-right
-width
: 1px
;
456 .archive
-nav span
[class^
='archive-nav-item'] {
460 .archive
-nav span
[class^
="archive-nav-item"],
461 .archive
-nav a
:hover
{
464 0 0 0 3px
#888 inset,
465 0 0 0 4px
#ccc inset,
466 0 0 0 5px
#888 inset;
467 text
-decoration
: none
;
469 .archive
-nav span
[class^
="archive-nav-item"] {
472 0 0 0 1px
#ccc inset,
473 0 0 0 3px
#888 inset,
474 0 0 0 4px
#ccc inset,
475 0 0 0 5px
#888 inset;
477 .archive
-nav a
:active
{
478 transform
: scale(0.9);
480 .archive
-nav a
:focus
:not(:hover
) {
489 margin
: 0.7em
20px
0.1em
20px
;
490 max
-width
: calc(100%
- 40px
);
491 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
494 h1
.listing
.post
-title
-link
{
495 font
-family
: <?php
echo $text_font; ?
>;
496 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
499 0.5px
0.5px
1px
#aaa,
500 0.5px
0.5px
1px
#bbb;
502 h1
.listing
.link
-post
-link
{
506 @media only screen
and (hover
: hover
) {
509 background
-color
: rgba(136,136,136,0.85);
513 0.5px
0.5px
1px
#aaa,
514 0.5px
0.5px
1px
#bbb,
519 h1
.listing
:focus
-within
::before
{
524 h1
.listing
.link
-post
-link
:hover
{
528 -0.5px
-0.5px
0 #fff,
534 h1
.listing
.edit
-post
-link
{
535 padding
: 10px
3px
30px
0.5em
;
539 h1
.listing
.edit
-post
-link
:hover
{
540 text
-decoration
: none
;
542 #content.user-page h1.listing .edit-post-link {
543 background
-color
: #888;
553 h1
.listing
.spam +
.post
-meta
{
556 h1
.listing
.spam
:hover
,
557 h1
.listing
.spam +
.post
-meta
:hover
,
558 h1
.listing
.spam
:hover +
.post
-meta
{
562 /*===================*/
563 /* LISTING POST-META */
564 /*===================*/
566 h1
.listing +
.post
-meta
> * {
570 h1
.listing +
.post
-meta
.karma
::after
{
573 h1
.listing +
.post
-meta
.date
::before
{
576 h1
.listing +
.post
-meta
.date
::after
{
579 margin
: 0 0.5em
0 0.125em
;
581 h1
.listing +
.post
-meta
.comment
-count
.new-comments
::before
{
584 h1
.listing
:last
-of
-type +
.post
-meta
{
587 h1
.listing +
.post
-meta
.karma
{
589 margin
-right
: 0.25em
;
591 h1
.listing +
.post
-meta
.author
{
592 margin
-right
: 0.25em
;
594 h1
.listing +
.post
-meta
.date
{
597 h1
.listing +
.post
-meta
.post
-section
{
601 h1
.listing +
.post
-meta
.post
-section
::before
{
605 h1
.listing +
.post
-meta
.link
-post
-domain
{
613 #content.user-page h1.page-main-heading {
614 border
-bottom
: 1px solid
#777;
617 #content.user-page h1.listing,
618 #content.user-page h1.listing + .post-meta {
621 border
-width
: 0 0 0 1px
;
623 1.5px
0 1.5px
-1.5px
#bbb inset,
624 1px
0 1px
-1px
#777 inset;
626 #content.user-page h1.listing {
631 @media only screen
and (hover
: hover
) {
632 #content.user-page h1.listing:focus-within::before {
637 #content.user-page h1.listing + .post-meta {
639 padding
: 0.5em
6px
6px
34px
;
641 #content.user-page h1.listing + .post-meta .post-section::before {
645 #content.conversations-user-page h1.listing {
646 padding
: 6px
6px
4px
8px
;
649 #content.conversations-user-page h1.listing + .post-meta {
651 margin
: 0 0 0.25rem
0;
653 #content.conversations-user-page h1.listing + .post-meta .date::after {
657 .user
-stats
.karma
-total
{
665 #content.conversation-page h1.page-main-heading {
666 font
-family
: <?php
echo $text_font; ?
>;
667 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
671 0.5px
0.5px
1px
#aaa,
672 0.5px
0.5px
1px
#bbb;
679 .login
-container h1
{
683 /* “Create account” form */
686 border
: 1px solid
#aaa;
691 .login
-container
.login
-tip
{
692 border
: 1px solid transparent
;
698 border
: 1px solid red
;
699 background
-color
: #faa;
702 border
: 1px solid green
;
703 background
-color
: #afa;
706 /*=====================*/
707 /* PASSWORD RESET PAGE */
708 /*=====================*/
710 .reset
-password
-container input
[type
='submit'] {
711 background
-color
: #e4e4e4;
712 border
: 1px solid
#ccc;
716 /*===================*/
717 /* TABLE OF CONTENTS */
718 /*===================*/
721 background
-color
: #888;
726 .body
-text
.contents ul
{
729 .body
-text
.contents li
::before
{
731 font
-feature
-settings
: "tnum";
734 /*=================*/
735 /* POST NAVIGATION */
736 /*=================*/
739 .post
-nav
-links a
:visited
{
743 .post
-nav
-links a
:hover
{
744 text
-decoration
: none
;
752 @media only screen
and (max
-width
: 900px
) {
754 border
-top
: 1px solid
#777;
757 border
-right
: 1px solid
#777;
760 border
-left
: 1px solid
#777;
764 /*==================*/
765 /* POSTS & COMMENTS */
766 /*==================*/
769 font
-family
: <?php
echo $text_font; ?
>;
770 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'300' : '400'); ?
>;
774 0.5px
0.5px
1px
#aaa,
775 0.5px
0.5px
1px
#bbb;
785 0.5px
0.5px
1px
#f68a84,
786 0.5px
0.5px
1px
#ff9b8c;
788 .body
-text a
:visited
{
792 0.5px
0.5px
1px
#d9f,
793 0.5px
0.5px
1px
#efa9ff;
799 0.5px
0.5px
1px
#f68a84,
800 0.5px
0.5px
1px
#ff9b8c,
805 margin
: 1.1em
0 0.25em
0;
806 font
-family
: <?php
echo $text_font; ?
>;
807 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
812 0.5px
0.5px
1px
#aaa,
813 0.5px
0.5px
1px
#bbb;
817 font
-size
: 1.1875rem
;
820 @media
(-webkit
-max
-device
-pixel
-ratio
: 1), (max
-resolution
: 191dpi
) {
851 0.5px
0.5px
1px
#aaa,
852 0.5px
0.5px
1px
#bbb;
857 .post
-meta
.comment
-count span
,
858 .post
-meta
.read
-time span
,
859 .post
-meta
.word
-count span
,
860 .post
-meta
.lw2
-link span
{
863 .post
-meta
.comment
-count
::before
,
864 .post
-meta
.read
-time
::before
,
865 .post
-meta
.word
-count
::before
,
866 .post
-meta
.lw2
-link
::before
{
867 font
-family
: Font Awesome
;
868 margin
: 0 0.25em
0 0;
872 .post
-meta
.comment
-count
{
873 margin
: 0 0.25em
0 0;
875 .post
-meta
.read
-time
,
876 .post
-meta
.word
-count
,
877 .post
-meta
.lw2
-link
{
878 margin
: 0 0.25em
0 0.5em
;
880 .post
-meta
.comment
-count
:hover
,
881 .post
-meta
.lw2
-link
:hover
{
882 text
-decoration
: none
;
888 .post
-meta
.comment
-count
:hover
::before
,
889 .post
-meta
.lw2
-link
:hover
::before
,
890 .post
-meta
.read
-time
:hover
::before
{
893 .post
-meta
.read
-time
:hover
::before
{
896 .post
-meta
.comment
-count
::before
{
899 .post
-meta
.read
-time
::before
{
902 .post
-meta
.read
-time
::after
{
905 .post
-meta
.word
-count
::before
{
908 .post
-meta
.word
-count
::after
{
911 .post
-meta
.lw2
-link
::before
{
919 .post
.post
-meta
.author
{
920 margin
: 0 0.75em
0 0;
922 .post
-meta
.author
:hover
,
923 .comment
-meta
.author
:hover
{
924 text
-decoration
: none
;
927 .post
.post
-meta
.comment
-count
{
930 .post
.post
-meta
.lw2
-link
{
931 margin
: 0 1em
0 0.5em
;
933 .post
.post
-meta
.voting
-controls
{
934 margin
: 0 0.5em
0 1em
;
937 .post
-meta
.post
-section
::before
,
938 .comment
-meta
.alignment
-forum
{
945 a
.post
-section
:hover
{
946 text
-decoration
: none
;
948 a
.post
-section
:hover
::before
{
951 .post
-meta
.post
-section
.alignment
-forum
::before
{
957 a
.post
-section
.alignment
-forum
:hover
::before
{
965 .post
.link
-post a
.link
-post
-link
{
966 text
-decoration
: none
;
967 font
-family
: <?php
echo $UI_font; ?
>;
970 .post
.link
-post a
.link
-post
-link
:hover
{
973 .post
.link
-post a
.link
-post
-link
:hover
::before
{
977 -0.5px
-0.5px
0 #fff,
981 .post
.link
-post a
.link
-post
-link
:focus
{
983 border
-bottom
: 2px dotted
#f60;
986 0.5px
0.5px
1px
#aaa,
987 0.5px
0.5px
1px
#bbb,
998 border
-top
: 1px solid
#666;
1000 0 1.5px
1.5px
-1.5px
#bbb inset,
1001 0 1px
1px
-1px
#777 inset;
1004 #content > .comment-thread .comment-meta a.date:focus,
1005 #content > .comment-thread .comment-meta a.permalink:focus {
1007 outline
: 2px dotted
#ccc;
1009 background
-color
: #444;
1011 #content > .comment-thread .comment-meta a.date:focus {
1015 #content > .comment-thread .comment-meta a.date:focus + * {
1018 #content > .comment-thread .comment-meta a.permalink:focus {
1022 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1026 border
: 1px solid transparent
;
1027 border
-left
-color
: #666;
1029 1.5px
0 1.5px
-1.5px
#bbb inset,
1030 1px
0 1px
-1px
#777 inset;
1032 @-moz
-document url
-prefix() {
1035 1.5px
0 1.5px
-1px
#bbb inset,
1036 1px
0 1px
-1px
#777 inset;
1040 a
.comment
-parent
-link
::after
{
1043 a
.comment
-parent
-link
::before
{
1044 padding
: 2px
3px
0 4px
;
1047 /*================================*/
1048 /* DEEP COMMENT THREAD COLLAPSING */
1049 /*================================*/
1051 .comment
-item input
[id^
="expand"] + label
::after
{
1052 color
: <?php
echo $hyperlink_color; ?
>;
1055 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
1058 .comment
-item input
[id^
="expand"] + label
:active
::after
,
1059 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
1062 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
1063 border
-width
: 1px
0 0 0;
1073 .comment
-meta
.author
{
1077 font
-weight
: normal
;
1079 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
1083 .comment
-item
.voting
-controls
.active
-controls
::after
,
1084 .comment
-item
.voting
-controls
.karma
-value
::after
,
1085 .post
.voting
-controls
.active
-controls
::after
,
1086 .post
.voting
-controls
.karma
-value
::after
,
1088 background
-color
: #888;
1091 box
-shadow
: 0 0 0 1px
#bbb inset;
1093 .comment
-item
.voting
-controls
.active
-controls
::after
,
1094 .post
.voting
-controls
.active
-controls
::after
{
1098 .comment
-item
.voting
-controls
.karma
-value
::after
,
1099 .post
.voting
-controls
.karma
-value
::after
{
1105 /*====================*/
1106 /* ANTI-KIBITZER MODE */
1107 /*====================*/
1110 .inline
-author
.redacted
{
1115 .karma
-value
.redacted
{
1119 .link
-post
-domain
.redacted
{
1123 /*===========================*/
1124 /* COMMENT THREAD NAVIGATION */
1125 /*===========================*/
1127 div
.comment
-parent
-link
{
1130 a
.comment
-parent
-link
{
1133 a
.comment
-parent
-link
::before
{
1136 a
.comment
-parent
-link
:hover
::before
{
1140 div
.comment
-child
-links
{
1143 div
.comment
-child
-links a
{
1146 .comment
-child
-link
::before
{
1150 .comment
-item
-highlight
{
1157 border
: 1px solid
#e7b200;
1159 .comment
-item
-highlight
-faint
{
1166 border
: 1px solid
#f8e7b5;
1170 background
-color
: #949494;
1173 /*=======================*/
1174 /* COMMENTS COMPACT VIEW */
1175 /*=======================*/
1177 #comments-list-mode-selector button {
1179 0 0 0 4px
#888 inset,
1180 0 0 0 5px
#ccc inset;
1182 #comments-list-mode-selector button:hover,
1183 #comments-list-mode-selector button.selected {
1185 0 0 0 1px
#888 inset,
1186 0 0 0 2px
#ccc inset,
1187 0 0 0 4px
#888 inset,
1188 0 0 0 5px
#ccc inset;
1190 #content.compact > .comment-thread .comment-item::after {
1192 background
: linear
-gradient(to right
, transparent
0%
, #888 50%, #888 100%);
1195 @media only screen
and (hover
: hover
) {
1196 #content.compact > .comment-thread .comment-item:hover .comment,
1197 #content.compact > .comment-thread .comment-item.expanded .comment {
1198 background
-color
: #999;
1199 outline
: 3px solid
#ccc;
1201 #content.compact > .comment-thread .comment-item:hover .comment::before,
1202 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1203 background
-color
: #999;
1214 @media only screen
and (hover
: none
) {
1215 #content.compact > .comment-thread.expanded .comment-item .comment {
1216 background
-color
: #999;
1217 outline
: 3px solid
#ccc;
1219 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1220 background
-color
: #999;
1232 #content.user-page.compact > h1.listing {
1235 #content.user-page.compact > h1.listing + .post-meta {
1236 margin
-bottom
: 0.5rem
;
1239 /*===========================*/
1240 /* HIGHLIGHTING NEW COMMENTS */
1241 /*===========================*/
1243 .new-comment
::before
{
1247 border
: 1px solid
#e00;
1253 /*=================================*/
1254 /* COMMENT THREAD MINIMIZE BUTTONS */
1255 /*=================================*/
1257 .comment
-minimize
-button
{
1260 .comment
-minimize
-button
:hover
{
1262 text
-shadow
: <?php
echo $white_glow; ?
>;
1264 .comment
-minimize
-button
::after
{
1265 font
-family
: <?php
echo $UI_font; ?
>;
1268 .comment
-minimize
-button
.maximized
::after
{
1272 /*====================*/
1273 /* COMMENT PERMALINKS */
1274 /*====================*/
1275 /*==================*/
1276 /* COMMENT LW LINKS */
1277 /*==================*/
1279 .comment
-meta
.permalink
::before
,
1280 .comment
-meta
.lw2
-link
::before
,
1281 .individual
-thread
-page a
.comment
-parent
-link
:empty::before
{
1283 filter
: saturate(10%
) contrast(20%
);
1286 /*=================================*/
1287 /* INDIVIDUAL COMMENT THREAD PAGES */
1288 /*=================================*/
1290 .individual
-thread
-page
> h1
{
1291 font
-family
: <?php
echo $text_font; ?
>;
1292 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'200' : '300'); ?
>;
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 .comment
-controls
.cancel
-comment
-button
{
1430 font
-weight
: normal
;
1433 .comment
-controls
.cancel
-comment
-button
:hover
{
1435 text
-shadow
: <?php
echo $white_glow; ?
>;
1438 .posting
-controls
.action
-button
,
1439 .posting
-controls input
[type
='submit'] {
1440 font
-weight
: normal
;
1442 .posting
-controls
.action
-button
:hover
,
1443 .posting
-controls input
[type
='submit']:hover
{
1444 text
-decoration
: underline
;
1448 .comment
-controls
.delete
-button
,
1449 .comment
-controls
.retract
-button
{
1452 .comment
-controls
.edit
-button
,
1453 .comment
-controls
.unretract
-button
{
1456 .comment
-controls
.action
-button
:hover
{
1458 text
-decoration
: none
;
1462 .edit
-post
-link
:visited
{
1466 .posting
-controls textarea
{
1468 font
-family
: <?php
echo $text_font; ?
>;
1470 background
-color
: transparent
;
1474 0.5px
0.5px
1px
#aaa,
1475 0.5px
0.5px
1px
#bbb;
1477 @-moz
-document url
-prefix() {
1478 .posting
-controls textarea
{
1479 font
-weight
: <?php
global $platform; echo ($platform == 'Windows' ?
'300' : '400'); ?
>;
1482 .posting
-controls textarea
:focus
{
1488 .posting
-controls textarea
::-webkit
-scrollbar
,
1489 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
{
1491 background
-color
: transparent
;
1493 .posting
-controls textarea
::-webkit
-scrollbar
-track
{
1494 border
-left
: 1px solid
#999;
1496 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-track
,
1497 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-track
{
1498 border
-left
: 1px solid
#bbb;
1500 .posting
-controls textarea
::-webkit
-scrollbar
-thumb
{
1501 background
-color
: #999;
1502 box
-shadow
: 0 0 0 1px
#888 inset;
1503 border
-left
: 1px solid
#999;
1505 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-thumb
,
1506 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-thumb
{
1507 border
-left
: 1px solid
#bbb;
1508 background
-color
: #ccc;
1509 box
-shadow
: 0 0 0 1px
#888 inset;
1512 /* GUIEdit buttons */
1514 .guiedit
-buttons
-container
{
1515 background
-color
: #888;
1516 box
-shadow
: 0 -1px
0 0 #999 inset;
1518 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
1519 box
-shadow
: 0 -1px
0 0 #ccc inset;
1524 background
-color
: transparent
;
1525 font
-family
: Font Awesome
, Source Sans Pro
, Trebuchet MS
, Helvetica
, Arial
, Verdana
, sans
-serif
;
1527 button
.guiedit
::after
{
1528 font
-family
: Proxima Nova
;
1534 button
.guiedit
:hover
{
1538 /* Markdown hints */
1540 #markdown-hints-checkbox + label {
1543 #markdown-hints-checkbox + label:hover {
1544 text
-decoration
: underline
;
1547 background
-color
: #888;
1548 border
: 1px solid
#ccc;
1551 /*================*/
1552 /* EDIT POST FORM */
1553 /*================*/
1555 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1557 border
: 1px solid
#999;
1560 @media only screen
and (hover
:hover
) {
1561 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1562 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1563 text
-decoration
: underline
;
1565 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1566 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1570 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1573 #edit-post-form input[type='radio'] + label {
1577 #edit-post-form input[type='radio'][value='all'] + label {
1578 border
-radius
: 8px
0 0 8px
;
1581 #edit-post-form input[type='radio'][value='drafts'] + label {
1582 border
-radius
: 0 8px
8px
0;
1584 #edit-post-form input[type='radio'] + label:hover,
1585 #edit-post-form input[type='radio']:focus + label,
1586 #edit-post-form input[type='radio']:checked + label {
1587 background
-color
: #999;
1589 #edit-post-form input[type='radio'] + label:hover,
1590 #edit-post-form input[type='radio']:focus + label {
1593 #edit-post-form input[type='radio']:active + label,
1594 #edit-post-form input[type='radio']:checked + label {
1603 text
-decoration
: none
;
1604 color
: <?php
echo $hyperlink_color; ?
>;
1607 text
-decoration
: underline
;
1615 input
[type
='submit'] {
1617 font
-weight
: normal
;
1626 input
[type
='submit']:hover
,
1628 input
[type
='submit']:focus
{
1631 input
[type
='submit']:hover
,
1632 input
[type
='submit']:focus
{
1633 text
-decoration
: underline
;
1636 input
[type
='submit']:active
{
1638 transform
: scale(0.9);
1644 transform
: scale(0.9);
1646 .button
:focus
:not(:hover
) {
1649 @-moz
-document url
-prefix() {
1665 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
1668 0.5px
0.5px
1px
#aaa,
1669 0.5px
0.5px
1px
#bbb;
1671 .post
-body h1 strong
,
1672 .post
-body h2 strong
,
1673 .post
-body h3 strong
,
1674 .post
-body h4 strong
,
1675 .post
-body h5 strong
,
1676 .post
-body h6 strong
{
1677 font
-weight
: normal
;
1683 padding
-bottom
: 2px
;
1684 border
-bottom
-color
: #777;
1687 border
-bottom
: 1px dotted
#ccc;
1695 border
-left
: 5px solid
#777;
1703 #content figure.image img {
1704 border
: 1px solid
#666;
1706 #content figure img {
1707 border
: 1px solid
#000;
1709 #content img[src$='.svg'],
1710 #content figure img[src$='.svg'] {
1713 #content img[style^='float'] {
1714 border
: 1px solid transparent
;
1721 #content:not(.tag-index-page) .body-text table,
1722 #content:not(.tag-index-page) .body-text table th,
1723 #content:not(.tag-index-page) .body-text table td {
1724 border
: 1px solid
#ccc;
1732 border
-bottom
: 1px solid
#999;
1737 font
-family
: 'Tired of Courier', Courier
, Courier
New, monospace
;
1738 font
-size
: 0.9375em
;
1742 border
: 1px solid
#444;
1745 1px
1px
1px
#aaa inset,
1750 input
[type
='search'],
1751 input
[type
='password'] {
1752 border
: 1px solid
#999;
1754 background
-color
: transparent
;
1756 input
[type
='text']:focus
,
1757 input
[type
='search']:focus
,
1758 input
[type
='password']:focus
{
1759 border
: 1px solid
#ccc;
1768 font
-feature
-settings
: 'lnum';
1780 .body
-text
*::selection
,
1781 textarea
::selection
,
1783 background
-color
: #d8d8d8;
1791 background
-color
: #e6e6e6;
1792 text
-decoration
: none
;
1794 0 -1px
0 0 #000 inset,
1795 0 -3px
1px
-2px
#000 inset;
1799 #content.about-page .accesskey-table {
1800 font
-family
: <?php
echo $UI_font; ?
>;
1804 #content.about-page img {
1805 border
: 1px solid
#000;
1808 /*========================*/
1809 /* QUALIFIED HYPERLINKING */
1810 /*========================*/
1815 #aux-about-link a:hover {
1817 text
-shadow
: <?php
echo $white_glow; ?
>;
1820 .qualified
-linking label
:hover
{
1821 text
-shadow
: <?php
echo $white_glow; ?
>;
1824 .qualified
-linking
-toolbar
{
1825 border
: 1px solid
#000;
1826 background
-color
: #777;
1828 .qualified
-linking
-toolbar a
{
1829 border
: 1px solid
#888;
1833 .qualified
-linking
-toolbar a
:hover
{
1834 border
: 1px solid
#999;
1835 text
-decoration
: none
;
1836 text
-shadow
: <?php
echo $white_glow; ?
>;
1838 .qualified
-linking label
::after
{
1839 background
-color
: #888;
1847 .mathjax
-block
-container
::-webkit
-scrollbar
{
1849 background
-color
: #f6f6ff;
1851 border
: 1px solid
#ddf;
1853 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1854 background
-color
: #dde;
1856 border
: 1px solid
#cce;
1858 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1860 background
-color
: #f6f6ff;
1862 border
: 1px solid
#ddf;
1864 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1865 background
-color
: #dde;
1867 border
: 1px solid
#cce;
1875 .textarea
-container
.autocomplete
-container
{
1876 background
-color
: rgba(136, 136, 136, 0.75);
1877 border
: 1px solid
rgba(204, 204, 204, 0.75);
1880 .textarea
-container
.autocomplete
-container div
.highlighted
{
1881 background
-color
: rgba(204, 204, 204, 0.75);
1885 .textarea
-container
.autocomplete
-container div
:not(.highlighted
):hover
{
1886 background
-color
: rgba(204, 204, 204, 0.25);
1890 /*=================*/
1891 /* ALIGNMENT FORUM */
1892 /*=================*/
1894 #content.alignment-forum-index-page::before {
1895 background
-color
: #878a9f;
1897 #content.alignment-forum-index-page::after {
1898 font
-family
: "Concourse SmallCaps";
1900 background
-color
: #222d4b;
1902 -webkit
-background
-clip
: text
;
1904 rgba(136,136,136,0.5) 0px
3px
3px
;
1906 @media only screen
and (hover
: hover
) {
1907 #content.alignment-forum-index-page h1.listing a:hover,
1908 #content.alignment-forum-index-page h1.listing a:focus {
1909 background
-color
: rgba(135,138,159,0.85);
1913 /*====================*/
1914 /* FOR NARROW SCREENS */
1915 /*====================*/
1917 @media only screen
and (max
-width
: 1440px
) {
1919 background
-color
: #888;
1924 #hns-date-picker::before {
1928 @media only screen
and (max
-width
: 1160px
) {
1933 #theme-tweaker-toggle {
1937 #new-comment-nav-ui,
1938 #new-comment-nav-ui + #hns-date-picker {
1942 @media only screen
and (max
-width
: 1080px
) {
1943 #text-size-adjustment-ui button {
1944 border
: 1px solid
#999;
1949 0 0 0 1px transparent
;
1955 @media only screen
and (max
-width
: 1040px
) {
1960 @media only screen
and (max
-width
: 1020px
) {
1970 /*******************************************************/
1971 @media not screen
and (hover
:hover
) and (pointer
:fine
) {
1972 /*******************************************************/
1973 #ui-elements-container > div[id$='-ui-toggle'] button,
1974 #theme-selector .theme-selector-close-button {
1986 background
-color
: #888;
1994 border
-radius
: 12px
;
1996 #theme-selector::before {
2001 0.5px
0.5px
1px
#aaa,
2002 0.5px
0.5px
1px
#bbb;
2004 #theme-selector button {
2005 border
-radius
: 10px
;
2007 #theme-selector button::after {
2009 max
-width
: calc(100%
- 3.5em
);
2011 text
-overflow
: ellipsis
;
2013 #theme-selector button.selected::after {
2021 background
-color
: #999;
2024 background
-color
: #888;
2025 box
-shadow
: 0 0 0 1px
#444;
2029 #new-comment-nav-ui,
2038 #quick-nav-ui a::after,
2039 #new-comment-nav-ui::before {
2040 font
-family
: <?php
echo $UI_font; ?
>;
2046 background
-color
: #999;
2050 #new-comment-nav-ui {
2053 #new-comment-nav-ui {
2054 background
-color
: #888;
2055 border
: 1px solid
#444;
2057 #new-comment-nav-ui::before {
2061 #new-comment-nav-ui .new-comments-count,
2062 #new-comment-nav-ui .new-comments-count::after {
2065 #new-comment-nav-ui .new-comment-sequential-nav-button {
2066 box
-shadow
: 0 0 0 1px
#444;
2069 #new-comment-nav-ui .new-comments-count {
2070 background
-color
: inherit
;
2071 box
-shadow
: 0 -1px
0 0 #444;
2073 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2076 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2077 border
-radius
: 7px
0 0 7px
;
2079 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2080 border
-radius
: 0 7px
7px
0;
2082 #new-comment-nav-ui button::after {
2083 font
-family
: <?php
echo $UI_font; ?
>;
2086 #hns-date-picker.engaged {
2089 border
: 1px solid
#444;
2091 #hns-date-picker span,
2092 #hns-date-picker input {
2096 /*****************************************/
2097 @media only screen
and (max
-width
: 900px
) {
2098 /*****************************************/
2099 h1
.listing +
.post
-meta
.post
-section
::before
{
2103 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
2106 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2110 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
2111 background
-color
: #ccc;
2114 .comment
-item
.comment
-item
{
2115 margin
: 0.75em
0 4px
6px
;
2117 .comment
-item
.comment
-item +
.comment
-item
{
2118 margin
: 1.5em
0 4px
6px
;
2121 .comment
-controls
.cancel
-comment
-button
::before
{
2127 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
2128 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
2129 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
2134 /*****************************************/
2135 } @media only screen
and (max
-width
: 720px
) {
2136 /*****************************************/
2137 /*******************************************/
2138 } @media only screen
and (max
-width
: 520px
) {
2139 /*******************************************/
2142 margin
: 18px
6px
4px
6px
;
2143 max
-width
: calc(100%
- 12px
);
2145 h1
.listing +
.post
-meta
{
2148 h1
.listing +
.post
-meta
> * {
2151 h1
.listing
.link
-post
-link
{
2155 #content.compact > .comment-thread .comment-item {
2159 .textarea
-container
:focus
-within textarea
{
2160 background
-color
: #888;
2162 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
2163 border
: 1px solid transparent
;
2166 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
2174 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2175 background
-color
: #888;
2176 border
-top
: 1px solid
#ddf;
2178 #content.conversation-page .textarea-container:focus-within::after {
2179 background
-color
: #888;
2181 .textarea
-container
:focus
-within button
.guiedit
{
2182 border
: 1px solid transparent
;
2184 #markdown-hints::after {
2188 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2191 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {