2 $UI_font = "Trade Gothic, Helvetica, sans-serif";
3 $text_font = "'News Gothic BT', 'Helvetica', sans-serif";
4 $hyperlink_color = "#00e";
5 $white_glow = "0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff";
19 --GW
-comment
-background
-color
-odd
: #eee;
20 --GW
-comment
-background
-color
-even
: #fff;
21 --GW
-comment
-background
-color
-target
: #ffd;
30 font
-family
: <?php
echo $UI_font; ?
>;
31 background
-color
: #eee;
42 background
-color
: #e4e4e4;
46 padding
: 11px
30px
13px
30px
;
48 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
51 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
54 @media only screen
and (min
-width
: 901px
) {
55 .nav
-bar
-top
:not(#primary-bar) #nav-item-sequences .nav-inner {
60 border
-top
: 2px solid
#eee;
64 color
: <?php
echo $hyperlink_color; ?
>;
67 #bottom-bar.decorative {
68 background
-color
: transparent
;
70 #bottom-bar.decorative::before,
71 #bottom-bar.decorative::after {
75 padding
: 0.25em
0 1em
0;
77 #bottom-bar.decorative::before {
80 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
81 background
-repeat
: repeat
-x
;
82 background
-position
: center
35%
;
84 filter
: contrast(90%
);
86 #bottom-bar.decorative::after {
92 background
-color
: #eee;
96 <?php
fit_content("#bottom-bar.decorative::after"); ?
>
109 .inactive
-bar
.nav
-inner
::after
{
112 .nav
-inner
:hover
::after
{
119 background
-color
: #eee;
124 #nav-item-search form::before {
127 #nav-item-search button {
129 font
-weight
: inherit
;
131 #nav-item-search input::placeholder {
136 /*= Top pagination UI hover tooltips =*/
138 #top-nav-bar a::after,
139 #bottom-bar a::after {
149 .new-private-message
,
150 .new-private-message
:visited
{
161 .sublevel
-nav
.sublevel
-item
{
164 .sublevel
-nav
.sublevel
-item
:not(.selected
):hover
{
165 background
-color
: #ddd;
167 text
-decoration
: none
;
170 .sublevel
-nav
.sublevel
-item
:not(.selected
):active
,
171 .sublevel
-nav
.sublevel
-item
.selected
{
172 background
-color
: #ddd;
179 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
182 border
-width
: 1px
0 1px
1px
;
184 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
{
185 border
-radius
: 8px
0 0 8px
;
187 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
189 border
-radius
: 0 8px
8px
0;
192 /*=====================*/
193 /* SORT ORDER SELECTOR */
194 /*=====================*/
199 pointer
-events
: none
;
201 .sublevel
-nav
.sort
::before
{
202 text
-transform
: uppercase
;
205 text
-shadow
: 0.5px
0.5px
0 #fff;
208 .sublevel
-nav
.sort
::after
{
218 0 18px
0 0 #eee inset,
219 0 0 0 1px
#ccc inset,
220 0 18px
0 1px
#ccc inset,
223 .sublevel
-nav
.sort
.sublevel
-item
{
224 padding
: 7px
7px
6px
7px
;
225 text
-transform
: uppercase
;
226 box
-shadow
: 1px
1px
0 0 #ccc inset;
227 pointer
-events
: auto
;
234 #width-selector button {
236 0 0 0 4px
#eee inset,
237 0 0 0 5px
#aaa inset;
239 #width-selector button:hover,
240 #width-selector button.selected {
242 0 0 0 1px
#eee inset,
243 0 0 0 2px
#aaa inset,
244 0 0 0 4px
#eee inset,
245 0 0 0 5px
#aaa inset;
247 #width-selector button::after {
255 #theme-selector button {
257 0 0 0 4px
#eee inset,
258 0 0 0 5px
#999 inset;
260 #theme-selector button:hover,
261 #theme-selector button.selected {
263 0 0 0 1px
#eee inset,
264 0 0 0 2px
#999 inset,
265 0 0 0 4px
#eee inset,
266 0 0 0 5px
#999 inset;
269 #theme-selector button::before {
271 background
-color
: #eee;
273 #theme-selector button:hover::before,
274 #theme-selector button.selected::before {
278 /*======================*/
279 /* THEME TWEAKER TOGGLE */
280 /*======================*/
282 #theme-tweaker-toggle button {
286 /*=================*/
287 /* QUICKNAV WIDGET */
288 /*=================*/
293 box
-shadow
: 0 0 0 1px
#ddf;
294 text
-decoration
: none
;
296 #quick-nav-ui a[href='#bottom-bar'] {
299 #quick-nav-ui a:active {
300 transform
: scale(0.9);
302 #quick-nav-ui a[href='#comments'].no-comments {
306 @media only screen
and (hover
: hover
) {
307 #quick-nav-ui a:hover {
309 box
-shadow
: 0 0 0 1px
#faa;
311 #quick-nav-ui a:focus:not(:hover) {
317 /*======================*/
318 /* NEW COMMENT QUICKNAV */
319 /*======================*/
321 #new-comment-nav-ui .new-comments-count {
324 text
-shadow
: 0.5px
0.5px
0 #fff;
326 #new-comment-nav-ui .new-comments-count::after {
330 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
334 @media only screen
and (hover
: hover
) {
335 #new-comment-nav-ui .new-comments-count:hover {
343 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
352 /*=================*/
353 /* HNS DATE PICKER */
354 /*=================*/
356 #hns-date-picker span {
358 text
-shadow
: 0.5px
0.5px
0 #fff;
361 #hns-date-picker input {
362 border
: 1px solid
#777;
363 background
-color
: transparent
;
366 #hns-date-picker input:focus {
370 /*======================*/
371 /* ANTI-KIBITZER TOGGLE */
372 /*======================*/
374 #anti-kibitzer-toggle button::before,
375 #anti-kibitzer-toggle button::after {
376 background
-color
: #aaa;
377 -webkit
-background
-clip
: text
;
379 text
-shadow
: rgba(255,255,255,0.5) 0px
1px
1px
;
381 #anti-kibitzer-toggle button:hover::before,
382 #anti-kibitzer-toggle button:hover::after {
383 background
-color
: #777;
386 /*======================*/
387 /* TEXT SIZE ADJUSTMENT */
388 /*======================*/
390 #text-size-adjustment-ui button {
393 #text-size-adjustment-ui button.default {
396 #text-size-adjustment-ui button:disabled:hover {
399 #text-size-adjustment-ui::after {
403 /*=============================*/
404 /* COMMENTS VIEW MODE SELECTOR */
405 /*=============================*/
407 #comments-view-mode-selector a {
416 border
: 1px solid
#aaa;
418 .archive
-nav
*[class^
='archive-nav-item'] {
421 border
-width
: 1px
0 1px
1px
;
422 background
-color
: #eee;
424 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
426 border
-bottom
-width
: 0;
428 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
429 border
-bottom
-width
: 1px
;
431 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
432 border
-right
-width
: 1px
;
434 .archive
-nav span
[class^
='archive-nav-item'] {
436 background
-color
: #ddd;
440 .archive
-nav a
:visited
{
441 color
: rgba(0, 0, 238, 0.7);
443 .archive
-nav a
:hover
{
444 text
-decoration
: none
;
446 background
-color
: #e0e0e0;
447 text
-shadow
: <?php
echo $white_glow; ?
>;
449 .archive
-nav a
:active
{
450 transform
: scale(0.9);
452 .archive
-nav a
:focus
:not(:hover
) {
455 .archive
-nav a
.archive
-nav
-item
-day
:hover
{
456 background
-color
: #ddd;
464 margin
: 0.7em
20px
0.1em
20px
;
465 max
-width
: calc(100%
- 40px
);
466 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
471 h1
.listing a
[href^
="http"] {
475 h1
.listing a
[href^
="/posts"] {
480 @media only screen
and (hover
: hover
) {
484 background
-color
: rgba(238,238,238,0.85);
486 h1
.listing
:focus
-within
::before
{
491 h1
.listing a
[href^
="http"]:hover
{
495 -0.5px
-0.5px
0 #fff,
501 h1
.listing
.edit
-post
-link
{
502 padding
: 6px
3px
32px
0.5em
;
506 h1
.listing
.edit
-post
-link
:hover
{
507 text
-decoration
: none
;
509 #content.user-page h1.listing .edit-post-link {
510 background
-color
: #eee;
520 h1
.listing
.spam +
.post
-meta
{
523 h1
.listing
.spam
:hover
,
524 h1
.listing
.spam +
.post
-meta
:hover
,
525 h1
.listing
.spam
:hover +
.post
-meta
{
529 /*===================*/
530 /* LISTING POST-META */
531 /*===================*/
533 h1
.listing +
.post
-meta
{
537 h1
.listing +
.post
-meta
.karma
-value
{
545 #content.user-page h1.page-main-heading {
546 border
-bottom
: 1px solid
#ccc;
549 #content.user-page h1.listing,
550 #content.user-page h1.listing + .post-meta {
554 #content.user-page h1.listing {
557 border
-width
: 1px
1px
0 1px
;
561 #content.own-user-page h1.listing,
562 h1
.listing
.own
-post
-listing
{
565 @media only screen
and (hover
: hover
) {
566 #content.user-page h1.listing:focus-within::before {
571 #content.user-page h1.listing + .post-meta {
572 padding
: 0.75em
6px
0.5em
32px
;
573 border
-width
: 0 1px
1px
1px
;
576 #content.user-page h1.listing + .post-meta .post-section::before {
580 #content.conversations-user-page h1.listing {
581 padding
: 6px
6px
4px
9px
;
584 #content.conversations-user-page h1.listing + .post-meta {
589 .user
-stats
.karma
-total
{
601 .login
-container form input
[type
='submit'] {
603 background
-color
: #eee;
604 border
: 1px solid
#ccc;
606 .login
-container form input
[type
='submit']:hover
,
607 .login
-container form input
[type
='submit']:focus
{
608 background
-color
: #ddd;
609 border
: 1px solid
#aaa;
612 /* “Create account” form */
615 background
-color
: #f3f3f3;
616 border
: 1px solid
#ddd;
618 #signup-form input[type='submit'] {
619 background
-color
: #e4e4e4;
620 border
: 1px solid
#ccc;
622 #signup-form input[type='submit']:hover {
623 background
-color
: #d8d8d8;
624 border
: 1px solid
#aaa;
629 .login
-container
.login
-tip
{
630 border
: 1px solid
#eee;
636 border
: 1px solid red
;
637 background
-color
: #faa;
640 border
: 1px solid green
;
641 background
-color
: #afa;
644 /*=====================*/
645 /* PASSWORD RESET PAGE */
646 /*=====================*/
648 .reset
-password
-container input
[type
='submit'] {
649 background
-color
: #e4e4e4;
650 border
: 1px solid
#ccc;
654 /*===================*/
655 /* TABLE OF CONTENTS */
656 /*===================*/
659 font
-family
: <?php
echo $UI_font; ?
>;
660 background
-color
: #eee;
665 .post
-body
.contents li
::before
{
667 font
-feature
-settings
: "tnum";
669 .post
-body
.contents a
,
670 .post
-body
.contents a
:hover
{
673 .post
-body
.contents a
:hover
{
674 text
-decoration
: underline
;
677 /*==================*/
678 /* POSTS & COMMENTS */
679 /*==================*/
682 font
-family
: <?php
echo $text_font; ?
>;
686 border
-bottom
: 1px dotted
#bbb;
689 text
-decoration
: none
;
690 border
-bottom
: 1px solid currentColor
;
704 margin
: 1em
0 0.25em
0;
707 /*=================*/
708 /* POST NAVIGATION */
709 /*=================*/
712 .post
-nav
-links a
:visited
{
716 .post
-nav
-links a
:hover
{
717 text
-decoration
: none
;
720 .post
-nav
-links a
:active
{
728 @media only screen
and (max
-width
: 900px
) {
730 background
-color
: #e4e4e4;
733 border
-top
: 1px solid
#fff;
736 border
-right
: 1px solid
#fff;
739 border
-left
: 1px solid
#fff;
747 .post
-meta
.post
-section
::before
,
748 .comment
-meta
.alignment
-forum
{
755 a
.post
-section
:hover
{
756 text
-decoration
: none
;
758 a
.post
-section
:hover
::before
{
761 .post
-meta
.post
-section
.alignment
-forum
::before
{
767 a
.post
-section
.alignment
-forum
:hover
::before
{
769 text
-decoration
: none
;
785 .post
.link
-post a
.link
-post
-link
{
786 text
-decoration
: none
;
787 font
-family
: <?php
echo $UI_font; ?
>;
790 .post
.link
-post a
.link
-post
-link
:hover
{
793 .post
.link
-post a
.link
-post
-link
:hover
::before
{
797 -0.5px
-0.5px
0 #fff,
801 .post
.link
-post a
.link
-post
-link
:focus
{
803 border
-bottom
: 2px dotted
#999;
811 border
-top
: 1px solid
#ddd;
814 #content > .comment-thread .comment-meta a.date:focus,
815 #content > .comment-thread .comment-meta a.permalink:focus {
817 outline
: 2px dotted
#999;
819 background
-color
: #fff;
823 #content > .comment-thread .comment-meta a.date:focus + *,
824 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
828 border
: 1px solid
#ccc;
829 background
-color
: var(--GW
-comment
-background
-color
);
831 .comment
-parent
-link
::after
{
833 0 28px
16px
-16px
var(--GW
-comment
-parent
-background
-color
) inset
,
834 4px
16px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
,
835 4px
4px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
;
839 font
-size
: 1.1875rem
;
842 /*================================*/
843 /* DEEP COMMENT THREAD COLLAPSING */
844 /*================================*/
846 .comment
-item input
[id^
="expand"] + label
::after
{
847 color
: <?php
echo $hyperlink_color; ?
>;
850 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
853 .comment
-item input
[id^
="expand"] + label
:active
::after
,
854 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
857 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
858 border
-width
: 1px
0 0 0;
865 .comment
-meta
.author
{
869 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
871 filter
: brightness(60%
);
874 .comment
-item
.karma
.active
-controls
::after
,
875 .comment
-item
.karma
.karma
-value
::after
,
876 .post
.karma
.active
-controls
::after
,
877 .post
.karma
.karma
-value
::after
,
879 background
-color
: #eee;
882 box
-shadow
: 0 0 0 1px
#bbb inset;
884 .comment
-item
.karma
.active
-controls
::after
,
885 .post
.karma
.active
-controls
::after
{
889 .comment
-item
.karma
.karma
-value
::after
,
890 .post
.karma
.karma
-value
::after
{
896 /*====================*/
897 /* ANTI-KIBITZER MODE */
898 /*====================*/
901 .inline
-author
.redacted
{
906 .karma
-value
.redacted
{
910 .link
-post
-domain
.redacted
{
914 /*===========================*/
915 /* COMMENT THREAD NAVIGATION */
916 /*===========================*/
918 div
.comment
-parent
-link
{
921 a
.comment
-parent
-link
{
924 a
.comment
-parent
-link
::before
{
927 a
.comment
-parent
-link
:hover
::before
{
928 background
-color
: #ffd;
932 div
.comment
-child
-links
{
935 div
.comment
-child
-links a
{
938 .comment
-child
-link
::before
{
942 .comment
-item
-highlight
{
949 border
: 1px solid
#e7b200;
951 .comment
-item
-highlight
-faint
{
958 border
: 1px solid
#f8e7b5;
962 background
-color
: #fff;
965 /*=======================*/
966 /* COMMENTS COMPACT VIEW */
967 /*=======================*/
969 #comments-list-mode-selector button {
971 0 0 0 4px
#eee inset,
972 0 0 0 5px
#aaa inset;
974 #comments-list-mode-selector button:hover,
975 #comments-list-mode-selector button.selected {
977 0 0 0 1px
#eee inset,
978 0 0 0 2px
#aaa inset,
979 0 0 0 4px
#eee inset,
980 0 0 0 5px
#aaa inset;
982 #content.compact > .comment-thread .comment-item {
985 #content.compact > .comment-thread .comment-item::after {
986 color
: <?php
echo $hyperlink_color; ?
>;
987 background
: linear
-gradient(to right
, transparent
0%
, #fff 50%, #fff 100%);
990 @media only screen
and (hover
: hover
) {
991 #content.compact > .comment-thread .comment-item:hover .comment,
992 #content.compact > .comment-thread .comment-item.expanded .comment {
993 background
-color
: #fff;
994 outline
: 3px solid
#00c;
996 #content.compact > .comment-thread .comment-item:hover .comment::before,
997 #content.compact > .comment-thread .comment-item.expanded .comment::before {
998 background
-color
: #fff;
1009 @media only screen
and (hover
: none
) {
1010 #content.compact > .comment-thread.expanded .comment-item .comment {
1011 background
-color
: #fff;
1012 outline
: 3px solid
#00c;
1014 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1015 background
-color
: #fff;
1027 #content.user-page.compact > h1.listing {
1030 #content.user-page.compact > h1.listing + .post-meta {
1031 margin
-bottom
: 0.5rem
;
1034 /*===========================*/
1035 /* HIGHLIGHTING NEW COMMENTS */
1036 /*===========================*/
1038 .new-comment
::before
{
1042 border
: 1px solid
#e00;
1043 outline
: 1px solid
#e00;
1046 /*=================================*/
1047 /* COMMENT THREAD MINIMIZE BUTTONS */
1048 /*=================================*/
1050 .comment
-minimize
-button
{
1053 .comment
-minimize
-button
:hover
{
1055 text
-shadow
: <?php
echo $white_glow; ?
>;
1057 .comment
-minimize
-button
::after
{
1058 font
-family
: <?php
echo $UI_font; ?
>;
1061 .comment
-minimize
-button
.maximized
::after
{
1072 background
-size
: 17px
17px
;
1075 display
: inline
-block
;
1082 .vote
:hover
::before
,
1083 .vote
.selected
::before
,
1084 .vote
.clicked
-once
::before
,
1085 .vote
.clicked
-twice
::before
{
1086 filter
: drop
-shadow(0 0 1px
#fff);
1090 .waiting
.upvote
.big
-vote
.clicked
-twice
::before
{
1091 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/upvote-green-circle-plus.svg")) ?>');
1092 filter
: grayscale(100%
) brightness(128%
);
1095 .waiting
.downvote
.big
-vote
.clicked
-twice
::before
{
1096 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/downvote-red-circle-minus.svg")) ?>');
1097 filter
: grayscale(100%
) brightness(188%
);
1100 .vote
.clicked
-once
::before
,
1101 .vote
.big
-vote
.clicked
-once
::before
{
1105 0 0 0 5px transparent
;
1108 .vote
.big
-vote
.clicked
-twice
::before
,
1109 .waiting
.vote
.big
-vote
:not(.clicked
-twice
)::before
,
1110 .waiting
.vote
:not(.big
-vote
).clicked
-once
::before
{
1114 .upvote
.clicked
-twice
::before
,
1115 .upvote
.big
-vote
::before
{
1119 0 0 0 5px transparent
;
1122 .downvote
.clicked
-twice
::before
,
1123 .downvote
.big
-vote
::before
{
1127 0 0 0 5px transparent
;
1130 /*===========================*/
1131 /* COMMENTING AND POSTING UI */
1132 /*===========================*/
1134 .posting
-controls input
[type
='submit'] {
1135 background
-color
: #fff;
1136 border
: 1px solid
#aaa;
1139 .posting
-controls input
[type
='submit']:hover
,
1140 .posting
-controls input
[type
='submit']:focus
{
1141 background
-color
: #ddd;
1142 border
: 1px solid
#999;
1145 .comment
-controls
.cancel
-comment
-button
{
1152 .comment
-controls
.cancel
-comment
-button
:hover
{
1154 text
-shadow
: <?php
echo $white_glow; ?
>;
1157 .new-comment
-button
{
1161 .comment
-controls
.delete
-button
,
1162 .comment
-controls
.retract
-button
{
1165 .comment
-controls
.delete
-button
::before
{
1170 .comment
-controls
.edit
-button
,
1171 .comment
-controls
.unretract
-button
{
1174 .comment
-controls
.action
-button
:hover
{
1179 margin
: 0.25em
-1em
0 0;
1181 h1
.listing
.edit
-post
-link
,
1182 h1
.listing
.edit
-post
-link
:visited
,
1183 .post
-controls
.edit
-post
-link
,
1184 .post
-controls
.edit
-post
-link
:visited
{
1187 h1
.listing
.edit
-post
-link
:hover
,
1188 .post
-controls
.edit
-post
-link
:hover
{
1192 .posting
-controls textarea
{
1193 font
-family
: <?php
echo $text_font; ?
>;
1197 .posting
-controls textarea
:focus
{
1198 border
-width
: 29px
1px
1px
1px
;
1199 box
-shadow
: 0 0 0 1px
#00e;
1201 .posting
-controls
.edit
-existing
-post textarea
:focus
,
1202 .posting
-controls form
.edit
-existing
-comment textarea
:focus
{
1204 box
-shadow
: 0 0 0 1px
#090;
1209 .posting
-controls textarea
::-webkit
-scrollbar
{
1211 background
-color
: transparent
;
1213 .posting
-controls textarea
::-webkit
-scrollbar
-track
{
1214 background
-color
: #fff;
1215 border
-left
: 1px solid
#0040ff;
1216 border
-top
: 1px solid
#eee;
1218 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-track
{
1219 border
-top
: 1px solid
#ddf;
1220 border
-left
: 2px solid
#0040ff;
1222 .posting
-controls textarea
::-webkit
-scrollbar
-thumb
{
1223 background
-color
: #acacff;
1224 box
-shadow
: 0 0 0 1px
#eee inset;
1225 border
-left
: 1px solid
#0040ff;
1227 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-thumb
{
1228 background
-color
: #0040ff;
1229 border
-left
: 2px solid
#0040ff;
1231 0 1px
0 0 #ddf inset,
1232 0 0 0 1px
#eee inset;
1235 .posting
-controls
.edit
-existing
-post textarea
:focus
::-webkit
-scrollbar
-track
,
1236 .posting
-controls form
.edit
-existing
-comment textarea
:focus
::-webkit
-scrollbar
-track
{
1237 border
-left
: 2px solid
#090;
1239 .posting
-controls
.edit
-existing
-post textarea
:focus
::-webkit
-scrollbar
-thumb
,
1240 .posting
-controls form
.edit
-existing
-comment textarea
:focus
::-webkit
-scrollbar
-thumb
{
1241 border
-left
: 2px solid
#090;
1242 background
-color
: #28a708;
1245 /* GUIEdit buttons */
1247 .guiedit
-buttons
-container
{
1248 background
-image
: linear
-gradient(to bottom
, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1251 .posting
-controls
.edit
-existing
-post
.guiedit
-buttons
-container button
,
1252 .posting
-controls form
.edit
-existing
-comment
.guiedit
-buttons
-container button
{
1255 .guiedit
-buttons
-container button
{
1256 font
-family
: Font Awesome
, <?php
echo $text_font; ?
>;
1260 font
-family
: <?php
echo $UI_font; ?
>;
1265 /* Markdown hints */
1267 #markdown-hints-checkbox + label {
1268 color
: <?php
echo $hyperlink_color; ?
>;
1270 #markdown-hints-checkbox + label:hover {
1272 text
-shadow
: <?php
echo $white_glow; ?
>;
1275 border
: 1px solid
#c00;
1276 background
-color
: #ffa;
1279 /*================*/
1280 /* EDIT POST FORM */
1281 /*================*/
1283 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1286 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1288 border
: 1px solid
#ddd;
1291 @media only screen
and (hover
:hover
) {
1292 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1293 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1299 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1300 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1304 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1307 #edit-post-form input[type='radio'] + label {
1311 #edit-post-form input[type='radio'][value='all'] + label {
1312 border
-radius
: 8px
0 0 8px
;
1315 #edit-post-form input[type='radio'][value='drafts'] + label {
1316 border
-radius
: 0 8px
8px
0;
1318 #edit-post-form input[type='radio'] + label:hover,
1319 #edit-post-form input[type='radio']:focus + label {
1320 background
-color
: #ddd;
1323 #edit-post-form input[type='radio']:focus + label {
1328 #edit-post-form input[type='radio']:checked + label {
1329 background
-color
: #ddd;
1342 text
-decoration
: none
;
1343 color
: <?php
echo $hyperlink_color; ?
>;
1349 text
-decoration
: underline
;
1357 input
[type
='submit'] {
1358 color
: <?php
echo $hyperlink_color; ?
>;
1362 input
[type
='submit']:hover
,
1364 input
[type
='submit']:focus
{
1366 text
-shadow
: <?php
echo $white_glow; ?
>;
1369 input
[type
='submit']:active
{
1371 transform
: scale(0.9);
1374 color
: <?php
echo $hyperlink_color; ?
>;
1378 text
-shadow
: <?php
echo $white_glow; ?
>;
1379 text
-decoration
: none
;
1382 transform
: scale(0.9);
1384 .button
:focus
:not(:hover
) {
1387 @-moz
-document url
-prefix() {
1403 font
-family
: <?php
echo $UI_font; ?
>;
1414 border
-left
: 5px solid
#ccc;
1422 #content figure.image img {
1423 border
: 1px solid
#ccc;
1425 #content figure img {
1426 border
: 1px solid
#000;
1428 #content img[src$='.svg'],
1429 #content figure img[src$='.svg'] {
1432 #content img[style^='float'] {
1433 border
: 1px solid transparent
;
1441 .body
-text table th
,
1442 .body
-text table td
{
1443 border
: 1px solid
#ccc;
1451 border
-bottom
: 1px solid
#999;
1455 background
-color
: #f6f6ff;
1456 border
: 1px solid
#ddf;
1461 input
[type
='search'],
1462 input
[type
='password'] {
1463 border
: 1px solid
#999;
1465 background
-color
: transparent
;
1467 input
[type
='text']:focus
,
1468 input
[type
='search']:focus
,
1469 input
[type
='password']:focus
{
1470 border
: 1px solid
#00e;
1471 outline
: 1px solid
#00e;
1483 background
-color
: #e6e6e6;
1484 text
-decoration
: none
;
1486 0 -1px
0 0 #000 inset,
1487 0 -3px
1px
-2px
#000 inset;
1491 #content.about-page .accesskey-table {
1492 font
-family
: <?php
echo $UI_font; ?
>;
1496 #content.about-page img {
1497 border
: 1px solid
#000;
1500 /*========================*/
1501 /* QUALIFIED HYPERLINKING */
1502 /*========================*/
1507 #aux-about-link a:hover {
1509 text
-shadow
: <?php
echo $white_glow; ?
>;
1512 .qualified
-linking label
{
1513 color
: <?php
echo $hyperlink_color; ?
>;
1515 .qualified
-linking label
:hover
{
1522 .qualified
-linking
-toolbar
{
1523 border
: 1px solid
#000;
1524 background
-color
: #fff;
1526 .qualified
-linking
-toolbar a
{
1527 background
-color
: #eee;
1528 border
: 1px solid
#ccc;
1531 .qualified
-linking
-toolbar a
:visited
{
1532 color
: <?php
echo $hyperlink_color; ?
>;
1534 .qualified
-linking
-toolbar a
:hover
{
1535 text
-decoration
: none
;
1536 background
-color
: #ddd;
1537 text
-shadow
: <?php
echo $white_glow; ?
>;
1539 .qualified
-linking label
::after
{
1540 background
-color
: #eee;
1548 .mathjax
-block
-container
::-webkit
-scrollbar
{
1550 background
-color
: #f6f6ff;
1552 border
: 1px solid
#ddf;
1554 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1555 background
-color
: #dde;
1557 border
: 1px solid
#cce;
1559 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1561 background
-color
: #f6f6ff;
1563 border
: 1px solid
#ddf;
1565 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1566 background
-color
: #dde;
1568 border
: 1px solid
#cce;
1571 /*=================*/
1572 /* ALIGNMENT FORUM */
1573 /*=================*/
1575 #content.alignment-forum-index-page::before {
1576 background
-color
: #eaedff;
1578 #content.alignment-forum-index-page::after {
1579 font
-family
: "Concourse SmallCaps";
1581 background
-color
: #7f85b2;
1583 -webkit
-background
-clip
: text
;
1585 rgba(255,255,255,0.5) 0px
3px
3px
;
1587 @media only screen
and (hover
: hover
) {
1588 #content.alignment-forum-index-page h1.listing a:hover,
1589 #content.alignment-forum-index-page h1.listing a:focus {
1590 background
-color
: rgba(234,237,255,0.85);
1594 /*====================*/
1595 /* FOR NARROW SCREENS */
1596 /*====================*/
1598 @media only screen
and (max
-width
: 1440px
) {
1600 background
-color
: #d8d8d8;
1603 #hns-date-picker::before {
1604 border
: 1px solid
#999;
1605 border
-width
: 1px
0 1px
1px
;
1608 @media only screen
and (max
-width
: 1200px
) {
1610 background
-color
: #eee;
1612 #hns-date-picker::before {
1616 @media only screen
and (max
-width
: 1080px
) {
1617 #text-size-adjustment-ui button {
1618 border
: 1px solid
#999;
1623 0 0 0 1px transparent
;
1625 #theme-tweaker-toggle button {
1626 border
: 1px solid
#999;
1628 0 0 10px
#999 inset,
1629 0 0 0 1px transparent
;
1631 transform
: scale(0.8);
1634 @media only screen
and (max
-width
: 1020px
) {
1638 0 0 0 2px transparent
;
1640 #new-comment-nav-ui .new-comments-count::before {
1641 background
-color
: #d8d8d8;
1644 0 0 0 2px transparent
;
1648 @media only screen
and (max
-width
: 1000px
) {
1650 background
-color
: #eee;
1653 0 0 0 2px transparent
;
1655 #theme-selector:hover::after {
1656 background
-color
: #999;
1657 width
: calc(6em
- 3px
);
1658 height
: calc(100%
- 5px
);
1662 #text-size-adjustment-ui button {
1663 background
-color
: #ddd;
1665 #text-size-adjustment-ui button:hover {
1666 background
-color
: #eee;
1668 #theme-tweaker-toggle button {
1669 background
-color
: #ddd;
1677 /*******************************************************/
1678 @media not screen
and (hover
:hover
) and (pointer
:fine
) {
1679 /*******************************************************/
1680 #ui-elements-container > div[id$='-ui-toggle'] button,
1681 #theme-selector .theme-selector-close-button {
1693 background
-color
: #eee;
1701 border
-radius
: 12px
;
1703 #theme-selector::before {
1705 font
-weight
: normal
;
1706 text
-shadow
: 0.5px
0.5px
0 #aaa;
1708 #theme-selector button {
1709 background
-color
: #e6e6e6;
1710 border
-radius
: 10px
;
1712 #theme-selector button::after {
1714 max
-width
: calc(100%
- 3.5em
);
1716 text
-overflow
: ellipsis
;
1719 #theme-selector button.selected::after {
1726 background
-color
: #fff;
1729 #new-comment-nav-ui,
1738 #quick-nav-ui a::after,
1739 #new-comment-nav-ui::before {
1740 font
-family
: <?php
echo $UI_font; ?
>;
1746 background
-color
: #fff;
1750 #new-comment-nav-ui {
1753 #new-comment-nav-ui {
1754 background
-color
: #fff;
1755 border
: 1px solid
#999;
1757 #new-comment-nav-ui::before {
1761 #new-comment-nav-ui .new-comment-sequential-nav-button {
1762 box
-shadow
: 0 0 0 1px
#999;
1765 #new-comment-nav-ui .new-comments-count {
1766 background
-color
: inherit
;
1767 box
-shadow
: 0 -1px
0 0 #999;
1769 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
1772 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
1773 border
-radius
: 7px
0 0 7px
;
1775 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
1776 border
-radius
: 0 7px
7px
0;
1778 #new-comment-nav-ui button::after {
1779 font
-family
: <?php
echo $UI_font; ?
>;
1782 background
-color
: #fff;
1783 border
: 1px solid
#999;
1786 /*****************************************/
1787 @media only screen
and (max
-width
: 900px
) {
1788 /*****************************************/
1789 h1
.listing +
.post
-meta
> * {
1792 h1
.listing +
.post
-meta
.post
-section
{
1796 h1
.listing +
.post
-meta
.post
-section
::before
{
1800 #primary-bar .nav-inner {
1803 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
1806 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
1810 .archive
-nav
*[class^
='archive-nav-item-'] {
1811 border
-width
: 1px
!important
;
1813 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
1814 background
-color
: #aaa;
1817 .comment
-item
.comment
-item
{
1818 margin
: 0.75em
3px
3px
6px
;
1820 .comment
-item
.comment
-item +
.comment
-item
{
1821 margin
: 1.5em
3px
3px
6px
;
1824 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
1825 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
1826 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
1831 /*******************************************/
1832 } @media only screen
and (max
-width
: 720px
) {
1833 /*******************************************/
1834 /*******************************************/
1835 } @media only screen
and (max
-width
: 520px
) {
1836 /*******************************************/
1839 margin
: 18px
6px
4px
6px
;
1840 max
-width
: calc(100%
- 12px
);
1842 h1
.listing +
.post
-meta
{
1845 h1
.listing a
[href^
='http'] {
1848 #content.conversations-user-page h1.listing::after {
1849 height
: calc(100% +
2.25em
);
1851 #content.conversations-user-page h1.listing + .post-meta .date {
1856 font
-size
: 1.125rem
;
1859 #content.compact > .comment-thread .comment-item {
1863 .textarea
-container
:focus
-within textarea
{
1864 background
-color
: #fff;
1867 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
1868 padding
: 5px
6px
6px
6px
;
1871 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
1876 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
1877 background
-color
: #fff;
1878 border
-top
: 1px solid
#ddf;
1880 .posting
-controls
.textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
1883 #content.conversation-page .textarea-container:focus-within::after {
1884 background
-color
: #fff;
1886 .textarea
-container
:focus
-within button
.guiedit
{
1887 border
: 1px solid
#00c;
1890 #markdown-hints::after {
1894 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1897 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {