2 $UI_font = "'Anonymous Pro', monospace";
3 $text_font = "'Input Sans', sans-serif"
12 background
-color
: #fff;
13 font
-family
: <?php
echo $UI_font; ?
>;
19 background
-color
: #fff;
25 border
-width
: 0 1px
0 2px
;
27 #content.no-nav-bars::before {
37 justify
-content
: flex
-start
;
39 .nav
-bar
:nth
-of
-type(2) {
40 border
-bottom
: 2px solid
#000;
46 border
-color
: transparent
;
49 #secondary-bar .nav-inner {
53 .nav
-current
:not(#nav-item-search) .nav-inner,
54 .nav
-bar a
.nav
-inner
:hover
{
59 .nav
-bar a
.nav
-inner
:active
{
62 0 0 0 10px
#000 inset;
65 #bottom-bar.decorative::before,
66 #bottom-bar.decorative::after {
70 padding
: 0.25em
0 1em
0;
72 #bottom-bar.decorative::before {
75 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
76 background
-repeat
: repeat
-x
;
77 background
-position
: center
35%
;
79 filter
: contrast(90%
);
81 #bottom-bar.decorative::after {
87 background
-color
: #fff;
91 <?php
fit_content("#bottom-bar.decorative::after"); ?
>
104 .inactive
-bar
.nav
-inner
::after
{
107 .nav
-inner
:hover
::after
{
113 #nav-item-search button {
115 font
-weight
: inherit
;
117 #nav-item-search input::placeholder {
122 /* Inbox indicator */
125 text
-shadow
: 1px
1px
0 #fff, -1px -1px 0 #fff;
132 .page
-toolbar button
,
133 .page
-toolbar button
:hover
,
134 .page
-toolbar button
:active
,
135 .page
-toolbar button
:focus
{
139 .page
-toolbar a
:hover
,
140 .page
-toolbar button
:hover
{
141 text
-decoration
: dotted underline
;
143 .page
-toolbar a
:active
,
144 .page
-toolbar button
:active
{
145 transform
: scale(0.9);
149 filter
: grayscale(100%
);
156 .sublevel
-nav
.sublevel
-item
{
159 border
-width
: 1px
1px
1px
0;
161 .sublevel
-nav
.sublevel
-item
:first
-child
{
164 .sublevel
-nav
.sublevel
-item
:hover
{
166 0 0 0 2px
#fff inset,
167 0 0 0 3px
#000 inset;
169 .sublevel
-nav
.sublevel
-item
:active
{
171 0 0 0 4px
#fff inset,
172 0 0 0 5px
#000 inset;
175 .sublevel
-nav
.sublevel
-item
:disabled
,
176 .sublevel
-nav span
.sublevel
-item
{
178 0 0 0 2px
#fff inset,
179 0 0 0 3px
#000 inset;
184 /*=====================*/
185 /* SORT ORDER SELECTOR */
186 /*=====================*/
190 border
: 2px solid
#000;
192 .sublevel
-nav
.sort
::before
{
193 text
-transform
: uppercase
;
196 .sublevel
-nav
.sort
.sublevel
-item
{
197 padding
: 7px
8px
6px
9px
;
198 text
-transform
: uppercase
;
206 #width-selector button {
208 0 0 0 4px
#fff inset,
209 0 0 0 5px
#000 inset;
211 #width-selector button:hover,
212 #width-selector button.selected {
214 0 0 0 1px
#fff inset,
215 0 0 0 2px
#000 inset,
216 0 0 0 4px
#fff inset,
217 0 0 0 5px
#000 inset;
219 #width-selector button::after {
228 #theme-selector button {
230 0 0 0 5px
#fff inset;
232 #theme-selector button:hover,
233 #theme-selector button.selected {
235 0 0 0 2px
#fff inset,
236 0 0 0 3px
#000 inset,
237 0 0 0 5px
#fff inset;
240 #theme-selector button::before {
245 background
-color
: #fff;
247 #theme-selector button:hover::before,
248 #theme-selector button.selected::before {
252 /*======================*/
253 /* ANTI-KIBITZER TOGGLE */
254 /*======================*/
256 #anti-kibitzer-toggle button::before,
257 #anti-kibitzer-toggle button::after {
258 background
-color
: #999;
259 -webkit
-background
-clip
: text
;
261 text
-shadow
: rgba(255,255,255,0.5) 0px
1px
1px
;
263 #anti-kibitzer-toggle button:hover {
266 #anti-kibitzer-toggle button:hover::before,
267 #anti-kibitzer-toggle button:hover::after {
268 background
-color
: #000;
269 text
-shadow
: rgba(255,255,255,0.2) 0px
1px
1px
;
272 /*=========================*/
273 /* TEXT SIZE ADJUSTMENT UI */
274 /*=========================*/
276 #text-size-adjustment-ui button:hover,
277 #text-size-adjustment-ui button:active,
278 #text-size-adjustment-ui button:focus {
282 #text-size-adjustment-ui::after {
286 /*======================*/
287 /* THEME TWEAKER TOGGLE */
288 /*======================*/
290 #theme-tweaker-toggle button:hover,
291 #theme-tweaker-toggle button:active {
295 /*=================*/
296 /* QUICKNAV WIDGET */
297 /*=================*/
305 #quick-nav-ui a[href='#bottom-bar'] {
308 @media only screen
and (hover
: hover
), not screen
and (-moz
-touch
-enabled
) {
309 #quick-nav-ui a:hover {
311 0 0 0 1px
#fff inset,
312 0 0 0 3px
#000 inset,
317 #quick-nav-ui a:active {
319 0 0 0 3px
#fff inset,
320 0 0 0 5px
#000 inset,
324 #quick-nav-ui a[href='#comments'].no-comments {
329 /*======================*/
330 /* NEW COMMENT QUICKNAV */
331 /*======================*/
333 #new-comment-nav-ui .new-comments-count {
336 #new-comment-nav-ui .new-comments-count::after {
340 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
344 /*=================*/
345 /* HNS DATE PICKER */
346 /*=================*/
352 #hns-date-picker span {
357 #hns-date-picker input {
361 #hns-date-picker input:focus {
365 /*======================*/
366 /* TEXT SIZE ADJUSTMENT */
367 /*======================*/
369 /*=============================*/
370 /* COMMENTS VIEW MODE SELECTOR */
371 /*=============================*/
377 #keyboard-help-overlay {
378 font
-family
: Concourse
;
381 #nav-item-about button.open-keyboard-help {
390 border
: 2px solid
#000;
392 .archive
-nav span
[class^
='archive-nav-item'],
393 .archive
-nav a
:hover
{
396 0 0 0 1px
#fff inset,
397 0 0 0 3px
#000 inset;
399 .archive
-nav a
:active
{
402 0 0 0 3px
#fff inset,
403 0 0 0 5px
#000 inset;
411 margin
: 0.7em
20px
0.1em
20px
;
412 max
-width
: calc(100%
- 40px
);
413 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
417 h1
.listing a
[href^
="http"] {
423 -0.5px
-0.5px
0 #000,
427 @media only screen
and (hover
: hover
), not screen
and (-moz
-touch
-enabled
) {
431 background
-color
: rgba(255,255,255,0.85);
433 h1
.listing
:focus
-within
::before
{
437 h1
.listing a
[href^
="http"]:hover
{
441 -0.5px
-0.5px
0 #000,
447 h1
.listing
.edit
-post
-link
{
448 padding
: 5px
3px
36px
0.5em
;
452 h1
.listing
.edit
-post
-link
:hover
{
453 text
-decoration
: none
;
455 #content.user-page h1.listing .edit-post-link {
456 background
-color
: #fff;
459 /*===================*/
460 /* TOP PAGINATION UI */
461 /*===================*/
463 #top-nav-bar a:hover {
466 #bottom-bar #nav-item-last a::before {
471 /*= Top pagination UI hover tooltips =*/
473 #top-nav-bar a::after,
474 #bottom-bar a::after {
477 #bottom-bar a:not([href='#top'])::after {
478 background
-color
: #fff;
485 <?php
fit_content("#bottom-bar a:not([href='#top'])::after"); ?
>
494 h1
.listing
.spam +
.post
-meta
{
497 h1
.listing
.spam
:hover
,
498 h1
.listing
.spam +
.post
-meta
:hover
,
499 h1
.listing
.spam
:hover +
.post
-meta
{
503 /*===================*/
504 /* LISTING POST-META */
505 /*===================*/
507 h1
.listing +
.post
-meta
> * {
510 h1
.listing +
.post
-meta
.read
-time
{
518 #content.user-page h1.page-main-heading {
519 border
-bottom
: 1px dotted
#000;
522 #content.user-page h1.listing,
523 #content.user-page h1.listing + .post-meta {
527 #content.user-page h1.listing {
530 border
-width
: 2px
2px
0 2px
;
534 #content.own-user-page h1.listing,
535 h1
.listing
.own
-post
-listing
{
538 @media only screen
and (hover
: hover
), not screen
and (-moz
-touch
-enabled
) {
539 #content.user-page h1.listing:focus-within::before {
543 #content.user-page h1.listing + .post-meta {
544 padding
: 0.75em
6px
0.5em
33px
;
545 border
-width
: 0 2px
2px
2px
;
548 #content.user-page h1.listing + .post-meta .post-section::before {
553 #content.conversations-user-page h1.listing {
554 padding
: 8px
6px
8px
10px
;
557 #content.conversations-user-page h1.listing + .post-meta {
558 padding
: 10px
4px
6px
4px
;
562 .user
-stats
.karma
-total
{
570 #content.conversation-page textarea {
571 border
-top
-width
: 2px
;
578 .login
-container form input
[type
='submit'] {
584 grid
-template
-columns
: 5.75em
1fr
;
587 #login-form a:hover {
588 text
-decoration
: dotted underline
;
590 #login-form a:active {
591 transform
: scale(0.9);
594 /* “Create account” form */
597 grid
-template
-columns
: 10.5em
1fr
;
598 border
: 2px solid
#000;
603 .login
-container
.login
-tip
{
604 border
: 1px solid
#000;
610 border
: 1px solid red
;
611 background
-color
: #faa;
614 border
: 1px solid green
;
615 background
-color
: #afa;
618 /*=====================*/
619 /* PASSWORD RESET PAGE */
620 /*=====================*/
622 .reset
-password
-container label
{
625 .reset
-password
-container input
[type
='submit'] {
629 /*===================*/
630 /* TABLE OF CONTENTS */
631 /*===================*/
634 font
-family
: <?php
echo $UI_font; ?
>;
635 border
: 2px solid
#000;
636 background
-color
: #fff;
642 .post
-body
.contents ul
{
646 border
-bottom
: 2px dotted
#999;
648 .post
-body
.contents li
::before
{
650 font
-feature
-settings
: "tnum";
653 /*==================*/
654 /* POSTS & COMMENTS */
655 /*==================*/
658 font
-family
: <?php
echo $text_font; ?
>;
662 border
-bottom
: 2px dotted
#000;
668 .comment
-meta a
:hover
{
669 text
-decoration
: dotted underline
;
676 .post
-meta
.post
-section
::before
,
677 .comment
-meta
.alignment
-forum
{
685 a
.post
-section
:hover
{
686 text
-decoration
: none
;
688 a
.post
-section
:hover
::before
{
696 border
-style
: dotted
;
703 .post
.link
-post a
.link
-post
-link
{
704 font
-family
: <?php
echo $UI_font; ?
>;
709 .post
.link
-post a
.link
-post
-link
::before
{
713 -0.5px
-0.5px
0 #000,
716 .post
.link
-post a
.link
-post
-link
:hover
{
718 border
-bottom
: 2px dotted
#000;
720 .post
.link
-post a
.link
-post
-link
:hover
::before
{
723 -0.5px
-0.5px
0 #000,
727 .post
.link
-post a
.link
-post
-link
:focus
{
729 border
-bottom
: 2px dotted
#999;
745 /*=================*/
746 /* POST NAVIGATION */
747 /*=================*/
749 .post
-nav
-links a
:hover
{
754 .post
-nav
-links a
:active
{
764 @media only screen
and (max
-width
: 900px
) {
766 border
-top
: 1px dotted
#000;
769 border
-right
: 1px dotted
#000;
772 border
-left
: 1px dotted
#000;
781 border
-top
: 2px solid
#000;
783 #content > .comment-thread .comment-meta a.date:focus,
784 #content > .comment-thread .comment-meta a.permalink:focus {
786 outline
: 2px dotted
#999;
788 background
-color
: #fff;
792 #content > .comment-thread .comment-meta a.date:focus + *,
793 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
797 border
: 2px solid
#000;
805 /*================================*/
806 /* DEEP COMMENT THREAD COLLAPSING */
807 /*================================*/
809 .comment
-item input
[id^
="expand"] + label
::after
{
812 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
815 .comment
-item input
[id^
="expand"] + label
:active
::after
,
816 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
819 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
820 border
-width
: 1px
0 0 0;
827 .comment
-meta
.author
{
831 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
835 .comment
-item
.karma
.active
-controls
::after
,
836 .comment
-item
.karma
.karma
-value
::after
,
837 .post
.karma
.active
-controls
::after
,
838 .post
.karma
.karma
-value
::after
,
840 background
-color
: #fff;
842 box
-shadow
: 0 0 0 1px
#000 inset;
844 .comment
-item
.karma
.active
-controls
::after
,
845 .post
.karma
.active
-controls
::after
{
849 transform
: translateX(-2px
);
851 .comment
-item
.karma
.karma
-value
::after
,
852 .post
.karma
.karma
-value
::after
{
858 /*====================*/
859 /* ANTI-KIBITZER MODE */
860 /*====================*/
863 .inline
-author
.redacted
{
868 .karma
-value
.redacted
{
872 .link
-post
-domain
.redacted
{
876 /*===========================*/
877 /* COMMENT THREAD NAVIGATION */
878 /*===========================*/
880 div
.comment
-parent
-link
{
883 a
.comment
-parent
-link
{
886 a
.comment
-parent
-link
::after
{
889 a
.comment
-parent
-link
::before
{
891 padding
: 4px
3px
0 2px
;
893 a
.comment
-parent
-link
:hover
::before
{
897 div
.comment
-child
-links
{
900 div
.comment
-child
-links a
{
903 .comment
-child
-link
::before
{
907 .comment
-item
-highlight
,
908 .comment
-item
-highlight
-faint
{
909 border
: 2px solid
#ccc;
913 border
: 2px solid
#000;
914 background
-color
: #fff;
916 .comment
-popup
.comment
-body
{
917 font
-size
: 0.9375rem
;
920 /*====================*/
921 /* COMMENT PERMALINKS */
922 /*====================*/
924 .comment
-meta
.permalink
,
925 .comment
-meta
.lw2
-link
,
926 .individual
-thread
-page
.comment
-parent
-link
:empty {
927 filter
: grayscale(100%
);
930 /*=======================*/
931 /* COMMENTS COMPACT VIEW */
932 /*=======================*/
934 #comments-list-mode-selector button {
936 0 0 0 4px
#fff inset,
937 0 0 0 5px
#000 inset;
940 #comments-list-mode-selector button:hover,
941 #comments-list-mode-selector button.selected {
943 0 0 0 1px
#fff inset,
944 0 0 0 2px
#000 inset,
945 0 0 0 4px
#fff inset,
946 0 0 0 5px
#000 inset;
948 #content.compact > .comment-thread .comment-item::after {
949 background
: linear
-gradient(to right
, transparent
0%
, #fff 50%, #fff 100%);
952 @media only screen
and (hover
: hover
), not screen
and (-moz
-touch
-enabled
) {
953 #content.compact > .comment-thread .comment-item:hover .comment,
954 #content.compact > .comment-thread .comment-item.expanded .comment {
955 background
-color
: #fff;
956 outline
: 3px solid
#000;
958 #content.compact > .comment-thread .comment-item:hover .comment::before,
959 #content.compact > .comment-thread .comment-item.expanded .comment::before {
960 background
-color
: #fff;
971 @media only screen
and (hover
: none
), only screen
and (-moz
-touch
-enabled
) {
972 #content.compact > .comment-thread.expanded .comment-item .comment {
973 background
-color
: #fff;
974 outline
: 3px solid
#000;
976 #content.compact > .comment-thread.expanded .comment-item .comment::before {
977 background
-color
: #fff;
989 #content.user-page.compact > h1.listing {
992 #content.user-page.compact > h1.listing + .post-meta {
993 margin
-bottom
: 0.5rem
;
996 /*===========================*/
997 /* HIGHLIGHTING NEW COMMENTS */
998 /*===========================*/
1001 border
: 2px dotted
#000;
1003 .new-comment
::before
{
1007 /*=================================*/
1008 /* COMMENT THREAD MINIMIZE BUTTONS */
1009 /*=================================*/
1011 .comment
-minimize
-button
{
1013 font
-family
: Font Awesome
, <?php
echo $UI_font; ?
>;
1015 .comment
-minimize
-button
:hover
{
1018 .comment
-minimize
-button
::after
{
1019 font
-size
: 0.8125rem
;
1024 .comment
-minimize
-button
.maximized
::after
{
1028 /*=================================*/
1029 /* INDIVIDUAL COMMENT THREAD PAGES */
1030 /*=================================*/
1032 .individual
-thread
-page
> h1 a
:hover
{
1034 text
-decoration
: dotted underline
;
1037 .individual
-thread
-page
> .comments
{
1038 border
-top
: 2px solid
#000;
1048 background
-size
: 17px
17px
;
1051 display
: inline
-block
;
1063 .vote
:hover
::before
,
1064 .vote
.selected
::before
,
1065 .vote
.clicked
-once
::before
,
1066 .vote
.clicked
-twice
::before
{
1067 filter
: drop
-shadow(0 0 1px
#fff);
1070 .waiting
.vote
.big
-vote
.clicked
-twice
::before
{
1071 filter
: contrast(5%
) brightness(182%
);
1073 .vote
.clicked
-once
::before
,
1074 .vote
.big
-vote
.clicked
-once
::before
{
1077 0 0 0 4px transparent
;
1079 .vote
.big
-vote
.clicked
-twice
::before
,
1080 .waiting
.vote
.big
-vote
:not(.clicked
-twice
)::before
,
1081 .waiting
.vote
:not(.big
-vote
).clicked
-once
::before
{
1084 .vote
.clicked
-twice
::before
,
1085 .vote
.big
-vote
::before
{
1088 0 0 0 4px transparent
;
1092 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/upvote-black-square-plus.svg")) ?>');
1095 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/downvote-black-square-minus.svg")) ?>');
1098 /*===========================*/
1099 /* COMMENTING AND POSTING UI */
1100 /*===========================*/
1102 .comment
-controls
.cancel
-comment
-button
{
1105 padding
: 4px
6px
2px
6px
;
1108 .posting
-controls input
[type
='submit'],
1109 .comment
-controls
.cancel
-comment
-button
,
1110 .new-comment
-button
{
1114 .comment
-controls
.delete
-button
::before
,
1115 .comment
-controls
.retract
-button
::before
,
1116 .comment
-controls
.unretract
-button
::before
{
1120 .posting
-controls
.action
-button
{
1123 .posting
-controls
.action
-button
:hover
,
1124 .posting
-controls
.action
-button
:active
,
1125 .posting
-controls
.action
-button
:focus
{
1127 text
-decoration
: dotted underline
;
1129 .posting
-controls
.action
-button
:active
{
1130 transform
: scale(0.9);
1133 .posting
-controls textarea
{
1134 font
-family
: <?php
echo $text_font; ?
>;
1139 background
-color
: #fff;
1141 border
-width
: 28px
2px
2px
2px
;
1143 .posting
-controls textarea
:focus
{
1144 border
-style
: dotted
;
1145 border
-width
: 28px
2px
2px
2px
;
1147 .posting
-controls textarea
::selection
{
1148 background
-color
: #000;
1151 .posting
-controls textarea
::-webkit
-scrollbar
{
1154 .posting
-controls textarea
::-webkit
-scrollbar
-track
{
1155 background
-color
: #fff;
1157 .posting
-controls textarea
::-webkit
-scrollbar
-thumb
{
1158 background
-color
: #000;
1159 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/checkerboard2_1px_gray.gif")) ?>');
1160 background
-size
: 2px
2px
;
1162 0 2px
0 1px
#fff inset,
1163 0 0 0 1px
#fff inset,
1164 0 2px
0 1.5px
#777 inset,
1165 0 0 0 1.5px
#777 inset;
1167 .posting
-controls textarea
::-webkit
-scrollbar
-thumb
:active
{
1168 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/checkerboard2_1px.gif")) ?>');
1170 0 2px
0 1px
#fff inset,
1171 0 0 0 1px
#fff inset,
1172 0 2px
0 1.5px
#000 inset,
1173 0 0 0 1.5px
#000 inset;
1176 /* GUIEdit buttons */
1178 .guiedit
-buttons
-container
{
1179 background
-color
: #000;
1180 box
-shadow
: 0 0 0 1px
#000;
1183 .posting
-controls
.edit
-existing
-post
.guiedit
-buttons
-container button
,
1184 .posting
-controls form
.edit
-existing
-comment
.guiedit
-buttons
-container button
{
1189 font
-family
: Font Awesome
, <?php
echo $UI_font; ?
>;
1193 button
.guiedit
:hover
,
1194 button
.guiedit
:active
,
1195 button
.guiedit
:focus
{
1199 button
.guiedit
::after
{
1206 /* Markdown hints */
1209 border
: 2px solid
#000;
1210 background
-color
: #fff;
1213 /*================*/
1214 /* EDIT POST FORM */
1215 /*================*/
1217 #edit-post-form .post-meta-fields {
1218 grid
-template
-columns
: 6em auto auto auto
1fr auto
;
1220 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1222 border
: 1px solid
#000;
1225 @media only screen
and (hover
:hover
), not screen
and (-moz
-touch
-enabled
) {
1226 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1227 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1229 0 0 0 1px
#fff inset,
1230 0 0 0 2px
#000 inset;
1233 #edit-post-form .post-meta-fields input[type='checkbox']:active + label::before,
1234 #edit-post-form .post-meta-fields input[type='checkbox']:checked:active + label::before {
1235 background
-color
: #fff;
1237 0 0 0 3px
#fff inset,
1238 0 0 0 4px
#000 inset;
1240 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1242 background
-color
: #000;
1244 0 0 0 4px
#fff inset;
1246 #edit-post-form input[type='radio'] + label {
1250 #edit-post-form input[type='radio'][value='all'] + label {
1253 #edit-post-form input[type='radio'][value='drafts'] + label {
1255 #edit-post-form input[type='radio'] + label:hover,
1256 #edit-post-form input[type='radio']:focus + label {
1259 0 0 0 1px
#fff inset,
1260 0 0 0 2px
#000 inset;
1262 #edit-post-form input[type='radio']:active + label {
1264 0 0 0 2px
#fff inset,
1265 0 0 0 3px
#000 inset;
1267 #edit-post-form input[type='radio']:focus + label {
1271 #edit-post-form input[type='radio']:checked + label {
1274 0 0 0 1px
#fff inset,
1275 0 0 0 2px
#000 inset;
1279 #edit-post-form #markdown-hints-checkbox + label {
1280 padding
: 4px
0 0 6px
;
1290 text
-decoration
: none
;
1298 input
[type
='submit'] {
1299 border
: 2px solid
#000;
1300 box
-shadow
: 0 0 0 1px transparent
;
1302 #ui-elements-container button {
1307 input
[type
='submit']:hover
,
1309 input
[type
='submit']:focus
{
1310 text
-decoration
: none
;
1311 background
-color
: transparent
;
1314 0 0 0 2px
#fff inset,
1315 0 0 0 4px
#000 inset,
1316 0 0 0 1px transparent
;
1319 input
[type
='submit']:active
{
1321 0 0 0 4px
#fff inset,
1322 0 0 0 6px
#000 inset,
1323 0 0 0 1px transparent
;
1333 font
-family
: <?php
echo $UI_font; ?
>;
1344 border
-bottom
: 2px solid
#000;
1352 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/checkerboard_1px.gif")) ?>');
1353 background
-size
: 5px
2px
;
1354 background
-repeat
: repeat
-y
;
1355 background
-position
: top left
;
1356 padding
-left
: calc(0.5em +
5px
);
1364 #content figure.image img {
1365 border
: 1px dotted
#000;
1367 #content figure img {
1368 border
: 1px solid
#000;
1370 #content img[src$='.svg'],
1371 #content figure img[src$='.svg'] {
1374 #content img[style^='float'] {
1375 border
: 1px solid transparent
;
1383 .body
-text table th
,
1384 .body
-text table td
{
1385 border
: 1px solid
#000;
1393 border
-bottom
: 1px solid
#999;
1397 border
: 1px dotted
#000;
1401 input
[type
='search'],
1402 input
[type
='password'],
1404 background
-color
: transparent
;
1405 border
: 1px solid
#000;
1408 input
[type
='text']:focus
,
1409 input
[type
='search']:focus
,
1410 input
[type
='password']:focus
,
1412 border
: 1px dashed
#000;
1433 background
-color
: #e6e6e6;
1434 text
-decoration
: none
;
1436 0 -1px
0 0 #000 inset,
1437 0 -3px
1px
-2px
#000 inset;
1441 #content.about-page .accesskey-table {
1442 font
-family
: <?php
echo $UI_font; ?
>;
1446 #content.about-page img {
1447 border
: 1px solid
#000;
1450 /*========================*/
1451 /* QUALIFIED HYPERLINKING */
1452 /*========================*/
1454 #aux-about-link a:hover {
1458 .qualified
-linking label
:hover
{
1462 .qualified
-linking
-toolbar
{
1463 border
: 2px solid
#000;
1464 background
-color
: #fff;
1466 .qualified
-linking
-toolbar a
{
1468 .qualified
-linking
-toolbar a
:hover
{
1469 box
-shadow
: 0 0 0 2px
#000;
1471 .qualified
-linking
-toolbar a
:active
{
1472 box
-shadow
: 0 0 0 2px
#000 inset;
1474 .qualified
-linking label
::after
{
1475 background
-color
: #fff;
1483 .mathjax
-block
-container
::-webkit
-scrollbar
{
1485 background
-color
: #f6f6ff;
1487 border
: 1px solid
#ddf;
1489 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1490 background
-color
: #dde;
1492 border
: 1px solid
#cce;
1494 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1496 background
-color
: #f6f6ff;
1498 border
: 1px solid
#ddf;
1500 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1501 background
-color
: #dde;
1503 border
: 1px solid
#cce;
1506 /*=================*/
1507 /* ALIGNMENT FORUM */
1508 /*=================*/
1510 #content.alignment-forum-index-page::before {
1511 background
-color
: #f2f6ff;
1513 #content.alignment-forum-index-page::after {
1514 font
-family
: "Concourse SmallCaps";
1516 background
-color
: #7f85b2;
1518 -webkit
-background
-clip
: text
;
1520 rgba(255,255,255,0.5) 0px
3px
3px
;
1522 @media only screen
and (hover
: hover
), not screen
and (-moz
-touch
-enabled
) {
1523 #content.alignment-forum-index-page h1.listing a:hover,
1524 #content.alignment-forum-index-page h1.listing a:focus {
1525 background
-color
: rgba(242,246,255,0.85);
1529 /*====================*/
1530 /* FOR NARROW SCREENS */
1531 /*====================*/
1533 @media only screen
and (max
-width
: 1440px
) {
1537 background
-color
: #fff;
1540 #hns-date-picker::before {
1542 border
: 2px solid
#000;
1543 box
-shadow
: 0 0 0 1px
#000;
1546 @media only screen
and (max
-width
: 1160px
) {
1551 #hns-date-picker::before {
1554 #theme-selector:hover::after {
1555 width
: calc(6.5em
- 6px
);
1556 background
-color
: #000;
1559 @media only screen
and (max
-width
: 1080px
) {
1560 #theme-tweaker-toggle button {
1561 border
: 1px solid
#999;
1563 0 0 10px
#999 inset,
1564 0 0 0 1px transparent
;
1565 transform
: scale(0.8);
1570 #hns-date-picker::before {
1574 @media only screen
and (max
-width
: 1040px
) {
1578 #hns-date-picker::before {
1582 @media only screen
and (max
-width
: 1020px
) {
1586 #hns-date-picker::before {
1590 background
-color
: #fff;
1591 box
-shadow
: 0 9px
0 0px
#fff;
1593 #new-comment-nav-ui .new-comments-count::before {
1594 background
-color
: #fff;
1599 #anti-kibitzer-toggle {
1600 background
-color
: #fff;
1606 @media only screen
and (max
-width
: 1000px
) {
1609 #new-comment-nav-ui,
1610 #new-comment-nav-ui + #hns-date-picker,
1611 #theme-tweaker-toggle button,
1612 #text-size-adjustment-ui,
1613 #anti-kibitzer-toggle {
1617 background
-color
: #fff;
1618 border
: 1px solid
#000;
1620 #theme-selector:hover::after {
1621 width
: calc(6em +
6px
);
1622 height
: calc(100%
- 5px
);
1626 #text-size-adjustment-ui {
1627 background
-color
: #fff;
1628 box
-shadow
: 0 0 0 1px
#000;
1629 padding
: 2px
0 4px
0;
1631 #theme-tweaker-toggle {
1634 #theme-tweaker-toggle button {
1635 background
-color
: #fff;
1637 border
: 1px solid
#000;
1639 #theme-tweaker-toggle button:hover {
1648 @media only screen
and (hover
: none
), only screen
and (-moz
-touch
-enabled
) {
1649 #ui-elements-container > div[id$='-ui-toggle'] button,
1650 #theme-selector .theme-selector-close-button {
1654 #appearance-adjust-ui-toggle button,
1655 #post-nav-ui-toggle button {
1656 background
-color
: #fff;
1659 0 0 0 2px
#000 inset;
1663 background
-color
: #fff;
1668 #theme-selector::before {
1671 #theme-selector button {
1672 background
-color
: #fff;
1674 0 0 0 1px
#fff inset,
1675 0 0 0 3px
#000 inset,
1676 0 0 0 5px
#fff inset;
1678 #theme-selector button::after {
1680 max
-width
: calc(100%
- 3.5em
);
1682 text
-overflow
: ellipsis
;
1685 #theme-selector button.selected {
1687 0 0 0 1px
#fff inset,
1688 0 0 0 3px
#000 inset,
1689 0 0 0 5px
#fff inset,
1690 0 0 0 7px
#000 inset;
1692 #theme-selector button.selected::after {
1695 #theme-selector .theme-selector-close-button {
1700 background
-color
: #fff;
1706 #quick-nav-ui a::after,
1707 #new-comment-nav-ui::before {
1708 font
-family
: <?php
echo $UI_font; ?
>;
1711 background
-color
: #fff;
1713 #new-comment-nav-ui {
1714 background
-color
: #fff;
1715 border
: 1px solid
#000;
1716 box
-shadow
: 0 0 0 1px
#000;
1718 #new-comment-nav-ui::before {
1720 font
-size
: 0.6875rem
;
1722 bottom
: calc(100% +
2px
);
1725 #new-comment-nav-ui .new-comment-sequential-nav-button {
1728 #new-comment-nav-ui .new-comments-count,
1729 #new-comment-nav-ui .new-comments-count::after {
1732 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
1735 #new-comment-nav-ui button::after {
1736 font
-family
: <?php
echo $UI_font; ?
>;
1745 /*****************************************/
1746 @media only screen
and (max
-width
: 900px
) {
1747 /*****************************************/
1752 h1
.listing +
.post
-meta
{
1753 font
-family
: Input Sans Narrow
;
1756 h1
.listing +
.post
-meta
.post
-section
{
1760 h1
.listing +
.post
-meta
.post
-section
::before
{
1764 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
1765 background
-color
: #000;
1769 .comment
-item
.comment
-item
{
1770 margin
: 0.75em
2px
3px
6px
;
1772 .comment
-item
.comment
-item +
.comment
-item
{
1773 margin
: 1.5em
2px
3px
6px
;
1776 a
.comment
-parent
-link
::before
{
1780 #edit-post-form textarea {
1781 min
-height
: calc(100vh
- 400px
)
1783 #edit-post-form #markdown-hints {
1791 #edit-post-form input[type='submit'] {
1792 background
-color
: #fff;
1795 .comment
-controls
.cancel
-comment
-button
{
1798 .comment
-controls
.cancel
-comment
-button
::before
{
1804 .sublevel
-nav
.sublevel
-item
,
1805 .sublevel
-nav
.sublevel
-item
:first
-child
,
1806 .sublevel
-nav
.sublevel
-item
:last
-child
{
1809 /*******************************************/
1810 } @media only screen
and (max
-width
: 720px
) {
1811 /*******************************************/
1812 #content.conversations-user-page h1.listing + .post-meta .date {
1815 /*******************************************/
1816 } @media only screen
and (max
-width
: 520px
) {
1817 /*******************************************/
1819 font
-size
: 1.375rem
;
1820 margin
: 18px
6px
4px
6px
;
1821 max
-width
: calc(100%
- 12px
);
1823 h1
.listing a
[href^
='http'] {
1826 h1
.listing +
.post
-meta
{
1828 font
-family
: Input Sans Condensed
;
1831 h1
.listing +
.post
-meta
.post
-section
{
1835 h1
.listing +
.post
-meta
.post
-section
::before
{
1840 #content.conversations-user-page h1.listing {
1841 font
-size
: 1.375rem
;
1843 #content.conversations-user-page h1.listing + .post-meta .conversation-participants {
1846 #content.conversations-user-page h1.listing + .post-meta .messages-count {
1850 #content.compact > .comment-thread .comment-item {
1854 .textarea
-container
:focus
-within textarea
{
1855 background
-color
: #fff;
1860 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
1861 padding
: 5px
6px
6px
6px
;
1866 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
1868 0 0 0 1px
#000 inset,
1869 0 0 0 3px
#fff inset,
1872 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
1873 border
-top
: 2px solid
#000;
1875 .posting
-controls
.textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
1876 padding
-bottom
: 5px
;
1878 #content.conversation-page .textarea-container:focus-within::after {
1879 background
-color
: #000;
1881 .textarea
-container
:focus
-within button
.guiedit
{
1882 border
: 1px solid transparent
;
1885 #edit-post-form #markdown-hints {
1886 border
: 2px solid
#000;
1891 #markdown-hints::after {
1895 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1898 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {