2 $UI_font = "'Proxima Nova'";
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"); ?
>
104 text
-decoration
: underline
;
107 /* Accesskey hints */
118 .inactive
-bar
.nav
-inner
::after
{
122 .nav
-inner
:hover
::after
{
128 #nav-item-search form::before {
130 font
-size
: 0.9375rem
;
132 #nav-item-search button {
136 #nav-item-search input::placeholder {
141 /* Inbox indicator */
147 /*= Top pagination UI =*/
149 #top-nav-bar a::before {
153 /*= Bottom pagination UI =*/
155 #bottom-bar .nav-item a::before {
159 /*= Pagination UI hover tooltips =*/
161 #top-nav-bar a::after,
162 #bottom-bar a::after {
175 .logout
-button
::before
{
178 .page
-toolbar
.button
:hover
{
179 text
-decoration
: none
;
186 .sublevel
-nav
.sublevel
-item
{
188 background
-color
: #888;
190 .sublevel
-nav
.sublevel
-item
:not(.selected
):hover
{
192 text
-decoration
: none
;
194 .sublevel
-nav
.sublevel
-item
:hover
,
195 .sublevel
-nav
.sublevel
-item
.selected
{
196 background
-color
: #999;
198 .sublevel
-nav
.sublevel
-item
:not(.selected
):active
,
199 .sublevel
-nav
.sublevel
-item
.selected
{
203 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
206 border
-width
: 1px
0 1px
1px
;
208 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
{
209 border
-radius
: 8px
0 0 8px
;
211 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
213 border
-radius
: 0 8px
8px
0;
216 /*=====================*/
217 /* SORT ORDER SELECTOR */
218 /*=====================*/
220 .sublevel
-nav
.sort
.sublevel
-item
{
221 font
-family
: <?php
echo $UI_font; ?
>;
222 padding
: 8px
8px
6px
8px
;
223 text
-transform
: uppercase
;
224 pointer
-events
: auto
;
225 box
-shadow
: 1px
1px
0 0 #777 inset;
228 border
: 2px solid transparent
;
231 pointer
-events
: none
;
232 background
-color
: #999;
234 .sublevel
-nav
.sort
::before
{
235 text
-transform
: uppercase
;
240 .sublevel
-nav
.sort
::after
{
250 0 18px
0 0 #888 inset,
251 0 0 0 1px
#777 inset,
252 0 18px
0 1px
#777 inset,
260 #width-selector button {
262 0 0 0 4px
#888 inset,
263 0 0 0 5px
#ccc inset;
265 #width-selector button:hover,
266 #width-selector button.selected {
268 0 0 0 1px
#888 inset,
269 0 0 0 2px
#ccc inset,
270 0 0 0 4px
#888 inset,
271 0 0 0 5px
#ccc inset;
273 #width-selector button::after {
282 #theme-selector button {
284 0 0 0 5px
#888 inset;
286 #theme-selector button:hover,
287 #theme-selector button.selected {
289 0 0 0 2px
#888 inset,
290 0 0 0 3px
#ccc inset,
291 0 0 0 5px
#888 inset;
294 #theme-selector button::before {
296 background
-color
: #888;
298 #theme-selector button:hover::before,
299 #theme-selector button.selected::before {
303 /*======================*/
304 /* THEME TWEAKER TOGGLE */
305 /*======================*/
307 #theme-tweaker-toggle button:hover {
308 text
-decoration
: none
;
311 /*=================*/
312 /* QUICKNAV WIDGET */
313 /*=================*/
318 box
-shadow
: 0 0 0 1px
#999;
319 text
-decoration
: none
;
321 #quick-nav-ui a[href='#bottom-bar'] {
324 #quick-nav-ui a:active {
325 transform
: scale(0.9);
327 #quick-nav-ui a[href='#comments'].no-comments {
331 @media only screen
and (hover
: hover
) {
332 #quick-nav-ui a:hover {
334 box
-shadow
: 0 0 0 1px
#ccc;
336 #quick-nav-ui a:focus:not(:hover) {
342 /*======================*/
343 /* NEW COMMENT QUICKNAV */
344 /*======================*/
346 #new-comment-nav-ui .new-comments-count {
350 #new-comment-nav-ui .new-comments-count::after {
354 #new-comment-nav-ui .new-comment-sequential-nav-button {
357 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
360 @media only screen
and (hover
: hover
) {
361 #new-comment-nav-ui .new-comments-count:hover {
369 #new-comment-nav-ui .new-comment-sequential-nav-button:hover {
371 text
-decoration
: none
;
373 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
375 text
-shadow
: 0 0 1px
#fff, 0 0 3px #fff, 0 0 5px #fff;
379 /*=================*/
380 /* HNS DATE PICKER */
381 /*=================*/
383 #hns-date-picker span {
387 #hns-date-picker input {
388 border
: 1px solid
#999;
389 background
-color
: transparent
;
392 #hns-date-picker input:focus {
394 border
: 1px solid
#ccc;
397 /*======================*/
398 /* ANTI-KIBITZER TOGGLE */
399 /*======================*/
401 #anti-kibitzer-toggle button::before,
402 #anti-kibitzer-toggle button::after {
403 background
-color
: #222;
404 -webkit
-background
-clip
: text
;
406 text
-shadow
: rgba(255,255,255,0.4) 0px
1px
1px
;
408 #anti-kibitzer-toggle button:hover::before,
409 #anti-kibitzer-toggle button:hover::after {
410 background
-color
: #000;
413 /*======================*/
414 /* TEXT SIZE ADJUSTMENT */
415 /*======================*/
417 #text-size-adjustment-ui button {
420 #text-size-adjustment-ui button.default {
423 #text-size-adjustment-ui button:hover {
424 text
-decoration
: none
;
427 #text-size-adjustment-ui::after {
432 /*=============================*/
433 /* COMMENTS VIEW MODE SELECTOR */
434 /*=============================*/
436 #comments-view-mode-selector a {
445 border
: 1px solid
#ccc;
447 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
449 border
-bottom
-width
: 0;
451 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
452 border
-bottom
-width
: 1px
;
454 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
455 border
-right
-width
: 1px
;
457 .archive
-nav span
[class^
='archive-nav-item'] {
461 .archive
-nav span
[class^
="archive-nav-item"],
462 .archive
-nav a
:hover
{
465 0 0 0 3px
#888 inset,
466 0 0 0 4px
#ccc inset,
467 0 0 0 5px
#888 inset;
468 text
-decoration
: none
;
470 .archive
-nav span
[class^
="archive-nav-item"] {
473 0 0 0 1px
#ccc inset,
474 0 0 0 3px
#888 inset,
475 0 0 0 4px
#ccc inset,
476 0 0 0 5px
#888 inset;
478 .archive
-nav a
:active
{
479 transform
: scale(0.9);
481 .archive
-nav a
:focus
:not(:hover
) {
490 margin
: 0.7em
20px
0.1em
20px
;
491 max
-width
: calc(100%
- 40px
);
492 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
495 h1
.listing
.post
-title
-link
{
496 font
-family
: <?php
echo $text_font; ?
>;
497 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
500 0.5px
0.5px
1px
#aaa,
501 0.5px
0.5px
1px
#bbb;
503 h1
.listing
.link
-post
-link
{
507 @media only screen
and (hover
: hover
) {
510 background
-color
: rgba(136,136,136,0.85);
514 0.5px
0.5px
1px
#aaa,
515 0.5px
0.5px
1px
#bbb,
520 h1
.listing
:focus
-within
::before
{
525 h1
.listing
.link
-post
-link
:hover
{
529 -0.5px
-0.5px
0 #fff,
535 h1
.listing
.edit
-post
-link
{
536 padding
: 10px
3px
30px
0.5em
;
540 h1
.listing
.edit
-post
-link
:hover
{
541 text
-decoration
: none
;
543 #content.user-page h1.listing .edit-post-link {
544 background
-color
: #888;
554 h1
.listing
.spam +
.post
-meta
{
557 h1
.listing
.spam
:hover
,
558 h1
.listing
.spam +
.post
-meta
:hover
,
559 h1
.listing
.spam
:hover +
.post
-meta
{
563 /*===================*/
564 /* LISTING POST-META */
565 /*===================*/
567 h1
.listing +
.post
-meta
> * {
571 h1
.listing +
.post
-meta
.karma
::after
{
574 h1
.listing +
.post
-meta
.date
::before
{
577 h1
.listing +
.post
-meta
.date
::after
{
580 margin
: 0 0.5em
0 0.125em
;
582 h1
.listing +
.post
-meta
.comment
-count
.new-comments
::before
{
585 h1
.listing
:last
-of
-type +
.post
-meta
{
588 h1
.listing +
.post
-meta
.karma
{
590 margin
-right
: 0.25em
;
592 h1
.listing +
.post
-meta
.author
{
593 margin
-right
: 0.25em
;
595 h1
.listing +
.post
-meta
.date
{
598 h1
.listing +
.post
-meta
.post
-section
{
602 h1
.listing +
.post
-meta
.post
-section
::before
{
606 h1
.listing +
.post
-meta
.link
-post
-domain
{
614 #content.user-page h1.page-main-heading {
615 border
-bottom
: 1px solid
#777;
618 #content.user-page h1.listing,
619 #content.user-page h1.listing + .post-meta {
622 border
-width
: 0 0 0 1px
;
624 1.5px
0 1.5px
-1.5px
#bbb inset,
625 1px
0 1px
-1px
#777 inset;
627 #content.user-page h1.listing {
632 @media only screen
and (hover
: hover
) {
633 #content.user-page h1.listing:focus-within::before {
638 #content.user-page h1.listing + .post-meta {
640 padding
: 0.5em
6px
6px
34px
;
642 #content.user-page h1.listing + .post-meta .post-section::before {
646 #content.conversations-user-page h1.listing {
647 padding
: 6px
6px
4px
8px
;
650 #content.conversations-user-page h1.listing + .post-meta {
652 margin
: 0 0 0.25rem
0;
654 #content.conversations-user-page h1.listing + .post-meta .date::after {
658 .user
-stats
.karma
-total
{
666 #content.conversation-page h1.page-main-heading {
667 font
-family
: <?php
echo $text_font; ?
>;
668 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
672 0.5px
0.5px
1px
#aaa,
673 0.5px
0.5px
1px
#bbb;
680 .login
-container h1
{
684 /* “Create account” form */
687 border
: 1px solid
#aaa;
692 .login
-container
.login
-tip
{
693 border
: 1px solid transparent
;
699 border
: 1px solid red
;
700 background
-color
: #faa;
703 border
: 1px solid green
;
704 background
-color
: #afa;
707 /*=====================*/
708 /* PASSWORD RESET PAGE */
709 /*=====================*/
711 .reset
-password
-container input
[type
='submit'] {
712 background
-color
: #e4e4e4;
713 border
: 1px solid
#ccc;
717 /*===================*/
718 /* TABLE OF CONTENTS */
719 /*===================*/
722 background
-color
: #888;
727 .post
-body
.contents ul
{
730 .post
-body
.contents li
::before
{
732 font
-feature
-settings
: "tnum";
735 /*=================*/
736 /* POST NAVIGATION */
737 /*=================*/
740 .post
-nav
-links a
:visited
{
744 .post
-nav
-links a
:hover
{
745 text
-decoration
: none
;
753 @media only screen
and (max
-width
: 900px
) {
755 border
-top
: 1px solid
#777;
758 border
-right
: 1px solid
#777;
761 border
-left
: 1px solid
#777;
765 /*==================*/
766 /* POSTS & COMMENTS */
767 /*==================*/
770 font
-family
: <?php
echo $text_font; ?
>;
771 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'300' : '400'); ?
>;
775 0.5px
0.5px
1px
#aaa,
776 0.5px
0.5px
1px
#bbb;
786 0.5px
0.5px
1px
#f68a84,
787 0.5px
0.5px
1px
#ff9b8c;
789 .body
-text a
:visited
{
793 0.5px
0.5px
1px
#d9f,
794 0.5px
0.5px
1px
#efa9ff;
800 0.5px
0.5px
1px
#f68a84,
801 0.5px
0.5px
1px
#ff9b8c,
806 margin
: 1.1em
0 0.25em
0;
807 font
-family
: <?php
echo $text_font; ?
>;
808 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
813 0.5px
0.5px
1px
#aaa,
814 0.5px
0.5px
1px
#bbb;
818 font
-size
: 1.1875rem
;
821 @media
(-webkit
-max
-device
-pixel
-ratio
: 1), (max
-resolution
: 191dpi
) {
851 0.5px
0.5px
1px
#aaa,
852 0.5px
0.5px
1px
#bbb;
854 .post
-meta
.comment
-count span
,
855 .post
-meta
.read
-time span
,
856 .post
-meta
.word
-count span
,
857 .post
-meta
.lw2
-link span
{
860 .post
-meta
.comment
-count
::before
,
861 .post
-meta
.read
-time
::before
,
862 .post
-meta
.word
-count
::before
,
863 .post
-meta
.lw2
-link
::before
{
864 font
-family
: Font Awesome
;
865 margin
: 0 0.25em
0 0;
869 .post
-meta
.comment
-count
{
870 margin
: 0 0.25em
0 0;
872 .post
-meta
.read
-time
,
873 .post
-meta
.word
-count
,
874 .post
-meta
.lw2
-link
{
875 margin
: 0 0.25em
0 0.5em
;
877 .post
-meta
.comment
-count
:hover
,
878 .post
-meta
.lw2
-link
:hover
{
879 text
-decoration
: none
;
885 .post
-meta
.comment
-count
:hover
::before
,
886 .post
-meta
.lw2
-link
:hover
::before
,
887 .post
-meta
.read
-time
:hover
::before
{
890 .post
-meta
.read
-time
:hover
::before
{
893 .post
-meta
.comment
-count
::before
{
896 .post
-meta
.read
-time
::before
{
899 .post
-meta
.read
-time
::after
{
902 .post
-meta
.word
-count
::before
{
905 .post
-meta
.word
-count
::after
{
908 .post
-meta
.lw2
-link
::before
{
916 .post
.post
-meta
.author
{
917 margin
: 0 0.75em
0 0;
919 .post
-meta
.author
:hover
,
920 .comment
-meta
.author
:hover
{
921 text
-decoration
: none
;
924 .post
.post
-meta
.comment
-count
{
927 .post
.post
-meta
.lw2
-link
{
928 margin
: 0 1em
0 0.5em
;
930 .post
.post
-meta
.karma
{
931 margin
: 0 0.5em
0 1em
;
934 .post
-meta
.post
-section
::before
,
935 .comment
-meta
.alignment
-forum
{
942 a
.post
-section
:hover
{
943 text
-decoration
: none
;
945 a
.post
-section
:hover
::before
{
948 .post
-meta
.post
-section
.alignment
-forum
::before
{
954 a
.post
-section
.alignment
-forum
:hover
::before
{
962 .post
.link
-post a
.link
-post
-link
{
963 text
-decoration
: none
;
964 font
-family
: <?php
echo $UI_font; ?
>;
967 .post
.link
-post a
.link
-post
-link
:hover
{
970 .post
.link
-post a
.link
-post
-link
:hover
::before
{
974 -0.5px
-0.5px
0 #fff,
978 .post
.link
-post a
.link
-post
-link
:focus
{
980 border
-bottom
: 2px dotted
#f60;
983 0.5px
0.5px
1px
#aaa,
984 0.5px
0.5px
1px
#bbb,
995 border
-top
: 1px solid
#666;
997 0 1.5px
1.5px
-1.5px
#bbb inset,
998 0 1px
1px
-1px
#777 inset;
1001 #content > .comment-thread .comment-meta a.date:focus,
1002 #content > .comment-thread .comment-meta a.permalink:focus {
1004 outline
: 2px dotted
#ccc;
1006 background
-color
: #444;
1008 #content > .comment-thread .comment-meta a.date:focus {
1012 #content > .comment-thread .comment-meta a.date:focus + * {
1015 #content > .comment-thread .comment-meta a.permalink:focus {
1019 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1023 border
: 1px solid transparent
;
1024 border
-left
-color
: #666;
1026 1.5px
0 1.5px
-1.5px
#bbb inset,
1027 1px
0 1px
-1px
#777 inset;
1029 @-moz
-document url
-prefix() {
1032 1.5px
0 1.5px
-1px
#bbb inset,
1033 1px
0 1px
-1px
#777 inset;
1037 a
.comment
-parent
-link
::after
{
1040 a
.comment
-parent
-link
::before
{
1041 padding
: 2px
3px
0 4px
;
1044 /*================================*/
1045 /* DEEP COMMENT THREAD COLLAPSING */
1046 /*================================*/
1048 .comment
-item input
[id^
="expand"] + label
::after
{
1049 color
: <?php
echo $hyperlink_color; ?
>;
1052 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
1055 .comment
-item input
[id^
="expand"] + label
:active
::after
,
1056 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
1059 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
1060 border
-width
: 1px
0 0 0;
1070 .comment
-meta
.author
{
1074 font
-weight
: normal
;
1076 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
1080 .comment
-item
.karma
.active
-controls
::after
,
1081 .comment
-item
.karma
.karma
-value
::after
,
1082 .post
.karma
.active
-controls
::after
,
1083 .post
.karma
.karma
-value
::after
,
1085 background
-color
: #888;
1088 box
-shadow
: 0 0 0 1px
#bbb inset;
1090 .comment
-item
.karma
.active
-controls
::after
,
1091 .post
.karma
.active
-controls
::after
{
1095 .comment
-item
.karma
.karma
-value
::after
,
1096 .post
.karma
.karma
-value
::after
{
1102 /*====================*/
1103 /* ANTI-KIBITZER MODE */
1104 /*====================*/
1107 .inline
-author
.redacted
{
1112 .karma
-value
.redacted
{
1116 .link
-post
-domain
.redacted
{
1120 /*===========================*/
1121 /* COMMENT THREAD NAVIGATION */
1122 /*===========================*/
1124 div
.comment
-parent
-link
{
1127 a
.comment
-parent
-link
{
1130 a
.comment
-parent
-link
::before
{
1133 a
.comment
-parent
-link
:hover
::before
{
1137 div
.comment
-child
-links
{
1140 div
.comment
-child
-links a
{
1143 .comment
-child
-link
::before
{
1147 .comment
-item
-highlight
{
1154 border
: 1px solid
#e7b200;
1156 .comment
-item
-highlight
-faint
{
1163 border
: 1px solid
#f8e7b5;
1167 background
-color
: #949494;
1170 /*=======================*/
1171 /* COMMENTS COMPACT VIEW */
1172 /*=======================*/
1174 #comments-list-mode-selector button {
1176 0 0 0 4px
#888 inset,
1177 0 0 0 5px
#ccc inset;
1179 #comments-list-mode-selector button:hover,
1180 #comments-list-mode-selector button.selected {
1182 0 0 0 1px
#888 inset,
1183 0 0 0 2px
#ccc inset,
1184 0 0 0 4px
#888 inset,
1185 0 0 0 5px
#ccc inset;
1187 #content.compact > .comment-thread .comment-item::after {
1189 background
: linear
-gradient(to right
, transparent
0%
, #888 50%, #888 100%);
1192 @media only screen
and (hover
: hover
) {
1193 #content.compact > .comment-thread .comment-item:hover .comment,
1194 #content.compact > .comment-thread .comment-item.expanded .comment {
1195 background
-color
: #999;
1196 outline
: 3px solid
#ccc;
1198 #content.compact > .comment-thread .comment-item:hover .comment::before,
1199 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1200 background
-color
: #999;
1211 @media only screen
and (hover
: none
) {
1212 #content.compact > .comment-thread.expanded .comment-item .comment {
1213 background
-color
: #999;
1214 outline
: 3px solid
#ccc;
1216 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1217 background
-color
: #999;
1229 #content.user-page.compact > h1.listing {
1232 #content.user-page.compact > h1.listing + .post-meta {
1233 margin
-bottom
: 0.5rem
;
1236 /*===========================*/
1237 /* HIGHLIGHTING NEW COMMENTS */
1238 /*===========================*/
1240 .new-comment
::before
{
1244 border
: 1px solid
#e00;
1250 /*=================================*/
1251 /* COMMENT THREAD MINIMIZE BUTTONS */
1252 /*=================================*/
1254 .comment
-minimize
-button
{
1257 .comment
-minimize
-button
:hover
{
1259 text
-shadow
: <?php
echo $white_glow; ?
>;
1261 .comment
-minimize
-button
::after
{
1262 font
-family
: <?php
echo $UI_font; ?
>;
1265 .comment
-minimize
-button
.maximized
::after
{
1269 /*====================*/
1270 /* COMMENT PERMALINKS */
1271 /*====================*/
1272 /*==================*/
1273 /* COMMENT LW LINKS */
1274 /*==================*/
1276 .comment
-meta
.permalink
::before
,
1277 .comment
-meta
.lw2
-link
::before
,
1278 .individual
-thread
-page a
.comment
-parent
-link
:empty::before
{
1280 filter
: saturate(10%
) contrast(20%
);
1283 /*=================================*/
1284 /* INDIVIDUAL COMMENT THREAD PAGES */
1285 /*=================================*/
1287 .individual
-thread
-page
> h1
{
1288 font
-family
: <?php
echo $text_font; ?
>;
1289 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'200' : '300'); ?
>;
1321 .downvote
.selected
{
1331 .vote
:hover
::after
{
1334 .vote
:not(:hover
)::after
{
1337 .karma
.waiting
.vote
.big
-vote
::after
{
1340 .vote
.big
-vote
::after
,
1341 .vote
:not(.big
-vote
).clicked
-twice
::after
{
1344 .karma
:not(.waiting
) .vote
.clicked
-once
::after
{
1358 @-moz
-document url
-prefix() {
1369 /*===========================*/
1370 /* COMMENTING AND POSTING UI */
1371 /*===========================*/
1373 .comment
-controls
.cancel
-comment
-button
{
1374 font
-weight
: normal
;
1377 .comment
-controls
.cancel
-comment
-button
:hover
{
1379 text
-shadow
: <?php
echo $white_glow; ?
>;
1382 .posting
-controls
.action
-button
,
1383 .posting
-controls input
[type
='submit'] {
1384 font
-weight
: normal
;
1386 .posting
-controls
.action
-button
:hover
,
1387 .posting
-controls input
[type
='submit']:hover
{
1388 text
-decoration
: underline
;
1392 .comment
-controls
.delete
-button
,
1393 .comment
-controls
.retract
-button
{
1396 .comment
-controls
.edit
-button
,
1397 .comment
-controls
.unretract
-button
{
1400 .comment
-controls
.action
-button
:hover
{
1402 text
-decoration
: none
;
1406 .edit
-post
-link
:visited
{
1410 .posting
-controls textarea
{
1412 font
-family
: <?php
echo $text_font; ?
>;
1414 background
-color
: transparent
;
1418 0.5px
0.5px
1px
#aaa,
1419 0.5px
0.5px
1px
#bbb;
1421 @-moz
-document url
-prefix() {
1422 .posting
-controls textarea
{
1423 font
-weight
: <?php
global $platform; echo ($platform == 'Windows' ?
'300' : '400'); ?
>;
1426 .posting
-controls textarea
:focus
{
1432 .posting
-controls textarea
::-webkit
-scrollbar
{
1434 background
-color
: transparent
;
1436 .posting
-controls textarea
::-webkit
-scrollbar
-track
{
1437 border
-left
: 1px solid
#999;
1439 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-track
{
1440 border
-left
: 1px solid
#999;
1442 .posting
-controls textarea
::-webkit
-scrollbar
-thumb
{
1443 background
-color
: #999;
1444 box
-shadow
: 0 0 0 1px
#888 inset;
1445 border
-left
: 1px solid
#999;
1447 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-thumb
{
1448 border
-left
: 1px solid
#999;
1449 background
-color
: #ccc;
1450 box
-shadow
: 0 0 0 1px
#888 inset;
1453 /* GUIEdit buttons */
1455 .guiedit
-buttons
-container
{
1456 background
-color
: #888;
1457 box
-shadow
: 0 -1px
0 0 #999 inset;
1459 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
1460 box
-shadow
: 0 -1px
0 0 #ccc inset;
1465 background
-color
: transparent
;
1466 font
-family
: Font Awesome
, Source Sans Pro
, Trebuchet MS
, Helvetica
, Arial
, Verdana
, sans
-serif
;
1468 button
.guiedit
::after
{
1469 font
-family
: Proxima Nova
;
1475 button
.guiedit
:hover
{
1479 /* Markdown hints */
1481 #markdown-hints-checkbox + label {
1484 #markdown-hints-checkbox + label:hover {
1485 text
-decoration
: underline
;
1488 background
-color
: #888;
1489 border
: 1px solid
#ccc;
1492 /*================*/
1493 /* EDIT POST FORM */
1494 /*================*/
1496 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1498 border
: 1px solid
#999;
1501 @media only screen
and (hover
:hover
) {
1502 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1503 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1504 text
-decoration
: underline
;
1506 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1507 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1511 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1514 #edit-post-form input[type='radio'] + label {
1518 #edit-post-form input[type='radio'][value='all'] + label {
1519 border
-radius
: 8px
0 0 8px
;
1522 #edit-post-form input[type='radio'][value='drafts'] + label {
1523 border
-radius
: 0 8px
8px
0;
1525 #edit-post-form input[type='radio'] + label:hover,
1526 #edit-post-form input[type='radio']:focus + label,
1527 #edit-post-form input[type='radio']:checked + label {
1528 background
-color
: #999;
1530 #edit-post-form input[type='radio'] + label:hover,
1531 #edit-post-form input[type='radio']:focus + label {
1534 #edit-post-form input[type='radio']:active + label,
1535 #edit-post-form input[type='radio']:checked + label {
1544 text
-decoration
: none
;
1545 color
: <?php
echo $hyperlink_color; ?
>;
1548 text
-decoration
: underline
;
1556 input
[type
='submit'] {
1558 font
-weight
: normal
;
1567 input
[type
='submit']:hover
,
1569 input
[type
='submit']:focus
{
1572 input
[type
='submit']:hover
,
1573 input
[type
='submit']:focus
{
1574 text
-decoration
: underline
;
1577 input
[type
='submit']:active
{
1579 transform
: scale(0.9);
1585 transform
: scale(0.9);
1587 .button
:focus
:not(:hover
) {
1590 @-moz
-document url
-prefix() {
1606 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
1609 0.5px
0.5px
1px
#aaa,
1610 0.5px
0.5px
1px
#bbb;
1612 .post
-body h1 strong
,
1613 .post
-body h2 strong
,
1614 .post
-body h3 strong
,
1615 .post
-body h4 strong
,
1616 .post
-body h5 strong
,
1617 .post
-body h6 strong
{
1618 font
-weight
: normal
;
1624 padding
-bottom
: 2px
;
1625 border
-bottom
-color
: #777;
1628 border
-bottom
: 1px dotted
#ccc;
1636 border
-left
: 5px solid
#777;
1644 #content figure.image img {
1645 border
: 1px solid
#666;
1647 #content figure img {
1648 border
: 1px solid
#000;
1650 #content img[src$='.svg'],
1651 #content figure img[src$='.svg'] {
1654 #content img[style^='float'] {
1655 border
: 1px solid transparent
;
1662 #content:not(.tag-index-page) .body-text table,
1663 #content:not(.tag-index-page) .body-text table th,
1664 #content:not(.tag-index-page) .body-text table td {
1665 border
: 1px solid
#ccc;
1673 border
-bottom
: 1px solid
#999;
1678 font
-family
: 'Tired of Courier', Courier
, Courier
New, monospace
;
1679 font
-size
: 0.9375em
;
1683 border
: 1px solid
#444;
1686 1px
1px
1px
#aaa inset,
1691 input
[type
='search'],
1692 input
[type
='password'] {
1693 border
: 1px solid
#999;
1695 background
-color
: transparent
;
1697 input
[type
='text']:focus
,
1698 input
[type
='search']:focus
,
1699 input
[type
='password']:focus
{
1700 border
: 1px solid
#ccc;
1709 font
-feature
-settings
: 'lnum';
1721 .body
-text
*::selection
,
1722 textarea
::selection
,
1724 background
-color
: #d8d8d8;
1732 background
-color
: #e6e6e6;
1733 text
-decoration
: none
;
1735 0 -1px
0 0 #000 inset,
1736 0 -3px
1px
-2px
#000 inset;
1740 #content.about-page .accesskey-table {
1741 font
-family
: <?php
echo $UI_font; ?
>;
1745 #content.about-page img {
1746 border
: 1px solid
#000;
1749 /*========================*/
1750 /* QUALIFIED HYPERLINKING */
1751 /*========================*/
1756 #aux-about-link a:hover {
1758 text
-shadow
: <?php
echo $white_glow; ?
>;
1761 .qualified
-linking label
:hover
{
1762 text
-shadow
: <?php
echo $white_glow; ?
>;
1765 .qualified
-linking
-toolbar
{
1766 border
: 1px solid
#000;
1767 background
-color
: #777;
1769 .qualified
-linking
-toolbar a
{
1770 border
: 1px solid
#888;
1774 .qualified
-linking
-toolbar a
:hover
{
1775 border
: 1px solid
#999;
1776 text
-decoration
: none
;
1777 text
-shadow
: <?php
echo $white_glow; ?
>;
1779 .qualified
-linking label
::after
{
1780 background
-color
: #888;
1788 .mathjax
-block
-container
::-webkit
-scrollbar
{
1790 background
-color
: #f6f6ff;
1792 border
: 1px solid
#ddf;
1794 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1795 background
-color
: #dde;
1797 border
: 1px solid
#cce;
1799 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1801 background
-color
: #f6f6ff;
1803 border
: 1px solid
#ddf;
1805 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1806 background
-color
: #dde;
1808 border
: 1px solid
#cce;
1811 /*=================*/
1812 /* ALIGNMENT FORUM */
1813 /*=================*/
1815 #content.alignment-forum-index-page::before {
1816 background
-color
: #878a9f;
1818 #content.alignment-forum-index-page::after {
1819 font
-family
: "Concourse SmallCaps";
1821 background
-color
: #222d4b;
1823 -webkit
-background
-clip
: text
;
1825 rgba(136,136,136,0.5) 0px
3px
3px
;
1827 @media only screen
and (hover
: hover
) {
1828 #content.alignment-forum-index-page h1.listing a:hover,
1829 #content.alignment-forum-index-page h1.listing a:focus {
1830 background
-color
: rgba(135,138,159,0.85);
1834 /*====================*/
1835 /* FOR NARROW SCREENS */
1836 /*====================*/
1838 @media only screen
and (max
-width
: 1440px
) {
1840 background
-color
: #888;
1845 #hns-date-picker::before {
1849 @media only screen
and (max
-width
: 1160px
) {
1854 #theme-tweaker-toggle {
1858 #new-comment-nav-ui,
1859 #new-comment-nav-ui + #hns-date-picker {
1863 @media only screen
and (max
-width
: 1080px
) {
1864 #text-size-adjustment-ui button {
1865 border
: 1px solid
#999;
1870 0 0 0 1px transparent
;
1876 @media only screen
and (max
-width
: 1040px
) {
1881 @media only screen
and (max
-width
: 1020px
) {
1891 /*******************************************************/
1892 @media not screen
and (hover
:hover
) and (pointer
:fine
) {
1893 /*******************************************************/
1894 #ui-elements-container > div[id$='-ui-toggle'] button,
1895 #theme-selector .theme-selector-close-button {
1907 background
-color
: #888;
1915 border
-radius
: 12px
;
1917 #theme-selector::before {
1922 0.5px
0.5px
1px
#aaa,
1923 0.5px
0.5px
1px
#bbb;
1925 #theme-selector button {
1926 border
-radius
: 10px
;
1928 #theme-selector button::after {
1930 max
-width
: calc(100%
- 3.5em
);
1932 text
-overflow
: ellipsis
;
1934 #theme-selector button.selected::after {
1942 background
-color
: #999;
1945 background
-color
: #888;
1946 box
-shadow
: 0 0 0 1px
#444;
1950 #new-comment-nav-ui,
1959 #quick-nav-ui a::after,
1960 #new-comment-nav-ui::before {
1961 font
-family
: <?php
echo $UI_font; ?
>;
1967 background
-color
: #999;
1971 #new-comment-nav-ui {
1974 #new-comment-nav-ui {
1975 background
-color
: #888;
1976 border
: 1px solid
#444;
1978 #new-comment-nav-ui::before {
1982 #new-comment-nav-ui .new-comments-count,
1983 #new-comment-nav-ui .new-comments-count::after {
1986 #new-comment-nav-ui .new-comment-sequential-nav-button {
1987 box
-shadow
: 0 0 0 1px
#444;
1990 #new-comment-nav-ui .new-comments-count {
1991 background
-color
: inherit
;
1992 box
-shadow
: 0 -1px
0 0 #444;
1994 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
1997 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
1998 border
-radius
: 7px
0 0 7px
;
2000 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2001 border
-radius
: 0 7px
7px
0;
2003 #new-comment-nav-ui button::after {
2004 font
-family
: <?php
echo $UI_font; ?
>;
2007 #hns-date-picker.engaged {
2010 border
: 1px solid
#444;
2012 #hns-date-picker span,
2013 #hns-date-picker input {
2017 /*****************************************/
2018 @media only screen
and (max
-width
: 900px
) {
2019 /*****************************************/
2020 h1
.listing +
.post
-meta
.post
-section
::before
{
2024 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
2027 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2031 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
2032 background
-color
: #ccc;
2035 .comment
-item
.comment
-item
{
2036 margin
: 0.75em
0 4px
6px
;
2038 .comment
-item
.comment
-item +
.comment
-item
{
2039 margin
: 1.5em
0 4px
6px
;
2042 .comment
-controls
.cancel
-comment
-button
::before
{
2048 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
2049 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
2050 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
2055 /*****************************************/
2056 } @media only screen
and (max
-width
: 720px
) {
2057 /*****************************************/
2058 /*******************************************/
2059 } @media only screen
and (max
-width
: 520px
) {
2060 /*******************************************/
2063 margin
: 18px
6px
4px
6px
;
2064 max
-width
: calc(100%
- 12px
);
2066 h1
.listing +
.post
-meta
{
2069 h1
.listing +
.post
-meta
> * {
2072 h1
.listing
.link
-post
-link
{
2076 #content.compact > .comment-thread .comment-item {
2080 .textarea
-container
:focus
-within textarea
{
2081 background
-color
: #888;
2083 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
2084 border
: 1px solid transparent
;
2087 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
2095 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2096 background
-color
: #888;
2097 border
-top
: 1px solid
#ddf;
2099 #content.conversation-page .textarea-container:focus-within::after {
2100 background
-color
: #888;
2102 .textarea
-container
:focus
-within button
.guiedit
{
2103 border
: 1px solid transparent
;
2105 #markdown-hints::after {
2109 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2112 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {