2 $UI_font = "Trade Gothic, Helvetica, 'GW-Symbols', 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
.link
-post
-link
{
475 h1
.listing
.post
-title
-link
{
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
.link
-post
-link
: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
.voting
-controls
.active
-controls
::after
,
875 .comment
-item
.voting
-controls
.karma
-value
::after
,
876 .post
.voting
-controls
.active
-controls
::after
,
877 .post
.voting
-controls
.karma
-value
::after
,
879 background
-color
: #eee;
882 box
-shadow
: 0 0 0 1px
#bbb inset;
884 .comment
-item
.voting
-controls
.active
-controls
::after
,
885 .post
.voting
-controls
.active
-controls
::after
{
889 .comment
-item
.voting
-controls
.karma
-value
::after
,
890 .post
.voting
-controls
.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
;
1084 filter
: brightness(50%
);
1094 filter
: grayscale(100%
) brightness(128%
);
1097 filter
: grayscale(100%
) brightness(188%
);
1103 filter
: drop
-shadow(0 0 1px
#fff);
1108 .vote
.two
-temp
::before
{
1112 0 0 0 5px transparent
;
1117 .upvote
.two
::before
{
1121 0 0 0 5px transparent
;
1123 .downvote
.two
::before
{
1127 0 0 0 5px transparent
;
1134 .karma
.upvote
::before
{
1135 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/upvote-green-circle-plus.svg")) ?>');
1137 .karma
.downvote
::before
{
1138 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/downvote-red-circle-minus.svg")) ?>');
1141 .karma
.upvote
:disabled
::before
{
1142 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/upvote-disabled-grey-circle-plus.svg")) ?>');
1144 .karma
.downvote
:disabled
::before
{
1145 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/downvote-disabled-grey-circle-minus.svg")) ?>');
1148 .agreement
.upvote
::before
{
1149 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/agree-green-circle-check.svg")) ?>');
1151 .agreement
.downvote
::before
{
1152 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/disagree-red-circle-x.svg")) ?>');
1155 .agreement
.upvote
:disabled
::before
{
1156 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/agree-disabled-grey-circle-check.svg")) ?>');
1158 .agreement
.downvote
:disabled
::before
{
1159 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/disagree-disabled-grey-circle-x.svg")) ?>');
1162 /*===========================*/
1163 /* COMMENTING AND POSTING UI */
1164 /*===========================*/
1166 .posting
-controls input
[type
='submit'] {
1167 background
-color
: #fff;
1168 border
: 1px solid
#aaa;
1171 .posting
-controls input
[type
='submit']:hover
,
1172 .posting
-controls input
[type
='submit']:focus
{
1173 background
-color
: #ddd;
1174 border
: 1px solid
#999;
1177 .comment
-controls
.cancel
-comment
-button
{
1184 .comment
-controls
.cancel
-comment
-button
:hover
{
1186 text
-shadow
: <?php
echo $white_glow; ?
>;
1189 .new-comment
-button
{
1193 .comment
-controls
.delete
-button
,
1194 .comment
-controls
.retract
-button
{
1197 .comment
-controls
.delete
-button
::before
{
1202 .comment
-controls
.edit
-button
,
1203 .comment
-controls
.unretract
-button
{
1206 .comment
-controls
.action
-button
:hover
{
1211 margin
: 0.25em
-1em
0 0;
1213 h1
.listing
.edit
-post
-link
,
1214 h1
.listing
.edit
-post
-link
:visited
,
1215 .post
-controls
.edit
-post
-link
,
1216 .post
-controls
.edit
-post
-link
:visited
{
1219 h1
.listing
.edit
-post
-link
:hover
,
1220 .post
-controls
.edit
-post
-link
:hover
{
1224 .posting
-controls textarea
{
1225 font
-family
: <?php
echo $text_font; ?
>;
1229 .posting
-controls textarea
:focus
{
1230 border
-width
: 29px
1px
1px
1px
;
1231 box
-shadow
: 0 0 0 1px
#00e;
1233 .posting
-controls
.edit
-existing
-post textarea
:focus
,
1234 .posting
-controls form
.edit
-existing
-comment textarea
:focus
{
1236 box
-shadow
: 0 0 0 1px
#090;
1241 .posting
-controls textarea
::-webkit
-scrollbar
{
1243 background
-color
: transparent
;
1245 .posting
-controls textarea
::-webkit
-scrollbar
-track
{
1246 background
-color
: #fff;
1247 border
-left
: 1px solid
#0040ff;
1248 border
-top
: 1px solid
#eee;
1250 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-track
{
1251 border
-top
: 1px solid
#ddf;
1252 border
-left
: 2px solid
#0040ff;
1254 .posting
-controls textarea
::-webkit
-scrollbar
-thumb
{
1255 background
-color
: #acacff;
1256 box
-shadow
: 0 0 0 1px
#eee inset;
1257 border
-left
: 1px solid
#0040ff;
1259 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-thumb
{
1260 background
-color
: #0040ff;
1261 border
-left
: 2px solid
#0040ff;
1263 0 1px
0 0 #ddf inset,
1264 0 0 0 1px
#eee inset;
1267 .posting
-controls
.edit
-existing
-post textarea
:focus
::-webkit
-scrollbar
-track
,
1268 .posting
-controls form
.edit
-existing
-comment textarea
:focus
::-webkit
-scrollbar
-track
{
1269 border
-left
: 2px solid
#090;
1271 .posting
-controls
.edit
-existing
-post textarea
:focus
::-webkit
-scrollbar
-thumb
,
1272 .posting
-controls form
.edit
-existing
-comment textarea
:focus
::-webkit
-scrollbar
-thumb
{
1273 border
-left
: 2px solid
#090;
1274 background
-color
: #28a708;
1277 /* GUIEdit buttons */
1279 .guiedit
-buttons
-container
{
1280 background
-image
: linear
-gradient(to bottom
, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1283 .posting
-controls
.edit
-existing
-post
.guiedit
-buttons
-container button
,
1284 .posting
-controls form
.edit
-existing
-comment
.guiedit
-buttons
-container button
{
1287 .guiedit
-buttons
-container button
{
1288 font
-family
: Font Awesome
, <?php
echo $text_font; ?
>;
1292 font
-family
: <?php
echo $UI_font; ?
>;
1297 /* Markdown hints */
1299 #markdown-hints-checkbox + label {
1300 color
: <?php
echo $hyperlink_color; ?
>;
1302 #markdown-hints-checkbox + label:hover {
1304 text
-shadow
: <?php
echo $white_glow; ?
>;
1307 border
: 1px solid
#c00;
1308 background
-color
: #ffa;
1311 /*================*/
1312 /* EDIT POST FORM */
1313 /*================*/
1315 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1318 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1320 border
: 1px solid
#ddd;
1323 @media only screen
and (hover
:hover
) {
1324 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1325 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1331 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1332 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1336 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1339 #edit-post-form input[type='radio'] + label {
1343 #edit-post-form input[type='radio'][value='all'] + label {
1344 border
-radius
: 8px
0 0 8px
;
1347 #edit-post-form input[type='radio'][value='drafts'] + label {
1348 border
-radius
: 0 8px
8px
0;
1350 #edit-post-form input[type='radio'] + label:hover,
1351 #edit-post-form input[type='radio']:focus + label {
1352 background
-color
: #ddd;
1355 #edit-post-form input[type='radio']:focus + label {
1360 #edit-post-form input[type='radio']:checked + label {
1361 background
-color
: #ddd;
1374 text
-decoration
: none
;
1375 color
: <?php
echo $hyperlink_color; ?
>;
1381 text
-decoration
: underline
;
1389 input
[type
='submit'] {
1390 color
: <?php
echo $hyperlink_color; ?
>;
1394 input
[type
='submit']:hover
,
1396 input
[type
='submit']:focus
{
1398 text
-shadow
: <?php
echo $white_glow; ?
>;
1401 input
[type
='submit']:active
{
1403 transform
: scale(0.9);
1406 color
: <?php
echo $hyperlink_color; ?
>;
1410 text
-shadow
: <?php
echo $white_glow; ?
>;
1411 text
-decoration
: none
;
1414 transform
: scale(0.9);
1416 .button
:focus
:not(:hover
) {
1419 @-moz
-document url
-prefix() {
1435 font
-family
: <?php
echo $UI_font; ?
>;
1446 border
-left
: 5px solid
#ccc;
1454 #content figure.image img {
1455 border
: 1px solid
#ccc;
1457 #content figure img {
1458 border
: 1px solid
#000;
1460 #content img[src$='.svg'],
1461 #content figure img[src$='.svg'] {
1464 #content img[style^='float'] {
1465 border
: 1px solid transparent
;
1472 #content:not(.tag-index-page) .body-text table,
1473 #content:not(.tag-index-page) .body-text table th,
1474 #content:not(.tag-index-page) .body-text table td {
1475 border
: 1px solid
#ccc;
1483 border
-bottom
: 1px solid
#999;
1487 background
-color
: #f6f6ff;
1488 border
: 1px solid
#ddf;
1493 input
[type
='search'],
1494 input
[type
='password'] {
1495 border
: 1px solid
#999;
1497 background
-color
: transparent
;
1499 input
[type
='text']:focus
,
1500 input
[type
='search']:focus
,
1501 input
[type
='password']:focus
{
1502 border
: 1px solid
#00e;
1503 outline
: 1px solid
#00e;
1515 background
-color
: #e6e6e6;
1516 text
-decoration
: none
;
1518 0 -1px
0 0 #000 inset,
1519 0 -3px
1px
-2px
#000 inset;
1523 #content.about-page .accesskey-table {
1524 font
-family
: <?php
echo $UI_font; ?
>;
1528 #content.about-page img {
1529 border
: 1px solid
#000;
1532 /*========================*/
1533 /* QUALIFIED HYPERLINKING */
1534 /*========================*/
1539 #aux-about-link a:hover {
1541 text
-shadow
: <?php
echo $white_glow; ?
>;
1544 .qualified
-linking label
{
1545 color
: <?php
echo $hyperlink_color; ?
>;
1547 .qualified
-linking label
:hover
{
1554 .qualified
-linking
-toolbar
{
1555 border
: 1px solid
#000;
1556 background
-color
: #fff;
1558 .qualified
-linking
-toolbar a
{
1559 background
-color
: #eee;
1560 border
: 1px solid
#ccc;
1563 .qualified
-linking
-toolbar a
:visited
{
1564 color
: <?php
echo $hyperlink_color; ?
>;
1566 .qualified
-linking
-toolbar a
:hover
{
1567 text
-decoration
: none
;
1568 background
-color
: #ddd;
1569 text
-shadow
: <?php
echo $white_glow; ?
>;
1571 .qualified
-linking label
::after
{
1572 background
-color
: #eee;
1580 .mathjax
-block
-container
::-webkit
-scrollbar
{
1582 background
-color
: #f6f6ff;
1584 border
: 1px solid
#ddf;
1586 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1587 background
-color
: #dde;
1589 border
: 1px solid
#cce;
1591 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1593 background
-color
: #f6f6ff;
1595 border
: 1px solid
#ddf;
1597 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1598 background
-color
: #dde;
1600 border
: 1px solid
#cce;
1603 /*=================*/
1604 /* ALIGNMENT FORUM */
1605 /*=================*/
1607 #content.alignment-forum-index-page::before {
1608 background
-color
: #eaedff;
1610 #content.alignment-forum-index-page::after {
1611 font
-family
: "Concourse SmallCaps";
1613 background
-color
: #7f85b2;
1615 -webkit
-background
-clip
: text
;
1617 rgba(255,255,255,0.5) 0px
3px
3px
;
1619 @media only screen
and (hover
: hover
) {
1620 #content.alignment-forum-index-page h1.listing a:hover,
1621 #content.alignment-forum-index-page h1.listing a:focus {
1622 background
-color
: rgba(234,237,255,0.85);
1626 /*====================*/
1627 /* FOR NARROW SCREENS */
1628 /*====================*/
1630 @media only screen
and (max
-width
: 1440px
) {
1632 background
-color
: #d8d8d8;
1635 #hns-date-picker::before {
1636 border
: 1px solid
#999;
1637 border
-width
: 1px
0 1px
1px
;
1640 @media only screen
and (max
-width
: 1200px
) {
1642 background
-color
: #eee;
1644 #hns-date-picker::before {
1648 @media only screen
and (max
-width
: 1080px
) {
1649 #text-size-adjustment-ui button {
1650 border
: 1px solid
#999;
1655 0 0 0 1px transparent
;
1657 #theme-tweaker-toggle button {
1658 border
: 1px solid
#999;
1660 0 0 10px
#999 inset,
1661 0 0 0 1px transparent
;
1663 transform
: scale(0.8);
1666 @media only screen
and (max
-width
: 1020px
) {
1670 0 0 0 2px transparent
;
1672 #new-comment-nav-ui .new-comments-count::before {
1673 background
-color
: #d8d8d8;
1676 0 0 0 2px transparent
;
1680 @media only screen
and (max
-width
: 1160px
) {
1682 background
-color
: #eee;
1685 0 0 0 2px transparent
;
1687 #theme-selector:hover::after {
1688 background
-color
: #999;
1689 width
: calc(6em
- 3px
);
1690 height
: calc(100%
- 5px
);
1694 #text-size-adjustment-ui button {
1695 background
-color
: #ddd;
1697 #text-size-adjustment-ui button:hover {
1698 background
-color
: #eee;
1700 #theme-tweaker-toggle button {
1701 background
-color
: #ddd;
1709 /*******************************************************/
1710 @media not screen
and (hover
:hover
) and (pointer
:fine
) {
1711 /*******************************************************/
1712 #ui-elements-container > div[id$='-ui-toggle'] button,
1713 #theme-selector .theme-selector-close-button {
1725 background
-color
: #eee;
1733 border
-radius
: 12px
;
1735 #theme-selector::before {
1737 font
-weight
: normal
;
1738 text
-shadow
: 0.5px
0.5px
0 #aaa;
1740 #theme-selector button {
1741 background
-color
: #e6e6e6;
1742 border
-radius
: 10px
;
1744 #theme-selector button::after {
1746 max
-width
: calc(100%
- 3.5em
);
1748 text
-overflow
: ellipsis
;
1751 #theme-selector button.selected::after {
1758 background
-color
: #fff;
1761 #new-comment-nav-ui,
1770 #quick-nav-ui a::after,
1771 #new-comment-nav-ui::before {
1772 font
-family
: <?php
echo $UI_font; ?
>;
1778 background
-color
: #fff;
1782 #new-comment-nav-ui {
1785 #new-comment-nav-ui {
1786 background
-color
: #fff;
1787 border
: 1px solid
#999;
1789 #new-comment-nav-ui::before {
1793 #new-comment-nav-ui .new-comment-sequential-nav-button {
1794 box
-shadow
: 0 0 0 1px
#999;
1797 #new-comment-nav-ui .new-comments-count {
1798 background
-color
: inherit
;
1799 box
-shadow
: 0 -1px
0 0 #999;
1801 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
1804 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
1805 border
-radius
: 7px
0 0 7px
;
1807 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
1808 border
-radius
: 0 7px
7px
0;
1810 #new-comment-nav-ui button::after {
1811 font
-family
: <?php
echo $UI_font; ?
>;
1814 background
-color
: #fff;
1815 border
: 1px solid
#999;
1818 /*****************************************/
1819 @media only screen
and (max
-width
: 900px
) {
1820 /*****************************************/
1821 h1
.listing +
.post
-meta
> * {
1824 h1
.listing +
.post
-meta
.post
-section
{
1828 h1
.listing +
.post
-meta
.post
-section
::before
{
1832 #primary-bar .nav-inner {
1835 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
1838 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
1842 .archive
-nav
*[class^
='archive-nav-item-'] {
1843 border
-width
: 1px
!important
;
1845 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
1846 background
-color
: #aaa;
1849 .comment
-item
.comment
-item
{
1850 margin
: 0.75em
3px
3px
6px
;
1852 .comment
-item
.comment
-item +
.comment
-item
{
1853 margin
: 1.5em
3px
3px
6px
;
1856 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
1857 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
1858 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
1863 /*******************************************/
1864 } @media only screen
and (max
-width
: 720px
) {
1865 /*******************************************/
1866 /*******************************************/
1867 } @media only screen
and (max
-width
: 520px
) {
1868 /*******************************************/
1871 margin
: 18px
6px
4px
6px
;
1872 max
-width
: calc(100%
- 12px
);
1874 h1
.listing +
.post
-meta
{
1877 h1
.listing
.link
-post
-link
{
1880 #content.conversations-user-page h1.listing::after {
1881 height
: calc(100% +
2.25em
);
1883 #content.conversations-user-page h1.listing + .post-meta .date {
1888 font
-size
: 1.125rem
;
1891 #content.compact > .comment-thread .comment-item {
1895 .textarea
-container
:focus
-within textarea
{
1896 background
-color
: #fff;
1899 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
1900 padding
: 5px
6px
6px
6px
;
1903 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
1908 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
1909 background
-color
: #fff;
1910 border
-top
: 1px solid
#ddf;
1912 .posting
-controls
.textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
1915 #content.conversation-page .textarea-container:focus-within::after {
1916 background
-color
: #fff;
1918 .textarea
-container
:focus
-within button
.guiedit
{
1919 border
: 1px solid
#00c;
1922 #markdown-hints::after {
1926 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1929 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {