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;
23 --GW
-toggle
-widget
-color
: #aaa;
24 --GW
-toggle
-widget
-hover
-color
: #777;
25 --GW
-toggle
-widget
-shadow
-color
: rgba(255, 255, 255, 0.5);
34 font
-family
: <?php
echo $UI_font; ?
>;
35 background
-color
: #eee;
46 background
-color
: #e4e4e4;
50 padding
: 11px
30px
13px
30px
;
52 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
55 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
58 @media only screen
and (min
-width
: 901px
) {
59 .nav
-bar
-top
:not(#primary-bar) #nav-item-sequences .nav-inner {
64 border
-top
: 2px solid
#eee;
68 color
: <?php
echo $hyperlink_color; ?
>;
71 #bottom-bar.decorative {
72 background
-color
: transparent
;
74 #bottom-bar.decorative::before,
75 #bottom-bar.decorative::after {
79 padding
: 0.25em
0 1em
0;
81 #bottom-bar.decorative::before {
84 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
85 background
-repeat
: repeat
-x
;
86 background
-position
: center
35%
;
88 filter
: contrast(90%
);
90 #bottom-bar.decorative::after {
96 background
-color
: #eee;
100 <?php
fit_content("#bottom-bar.decorative::after"); ?
>
102 /* Accesskey hints */
113 .inactive
-bar
.nav
-inner
::after
{
116 .nav
-inner
:hover
::after
{
123 background
-color
: #eee;
128 #nav-item-search form::before {
131 #nav-item-search button {
133 font
-weight
: inherit
;
135 #nav-item-search input::placeholder {
140 /*= Top pagination UI hover tooltips =*/
142 #top-nav-bar a::after,
143 #bottom-bar a::after {
153 .new-private-message
,
154 .new-private-message
:visited
{
165 .sublevel
-nav
.sublevel
-item
{
168 .sublevel
-nav
.sublevel
-item
:not(.selected
):hover
{
169 background
-color
: #ddd;
171 text
-decoration
: none
;
174 .sublevel
-nav
.sublevel
-item
:not(.selected
):active
,
175 .sublevel
-nav
.sublevel
-item
.selected
{
176 background
-color
: #ddd;
183 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
186 border
-width
: 1px
0 1px
1px
;
188 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
{
189 border
-radius
: 8px
0 0 8px
;
191 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
193 border
-radius
: 0 8px
8px
0;
196 /*=====================*/
197 /* SORT ORDER SELECTOR */
198 /*=====================*/
203 pointer
-events
: none
;
205 .sublevel
-nav
.sort
::before
{
206 text
-transform
: uppercase
;
209 text
-shadow
: 0.5px
0.5px
0 #fff;
212 .sublevel
-nav
.sort
::after
{
222 0 18px
0 0 #eee inset,
223 0 0 0 1px
#ccc inset,
224 0 18px
0 1px
#ccc inset,
227 .sublevel
-nav
.sort
.sublevel
-item
{
228 padding
: 7px
7px
6px
7px
;
229 text
-transform
: uppercase
;
230 box
-shadow
: 1px
1px
0 0 #ccc inset;
231 pointer
-events
: auto
;
238 #width-selector button {
240 0 0 0 4px
#eee inset,
241 0 0 0 5px
#aaa inset;
243 #width-selector button:hover,
244 #width-selector button.selected {
246 0 0 0 1px
#eee inset,
247 0 0 0 2px
#aaa inset,
248 0 0 0 4px
#eee inset,
249 0 0 0 5px
#aaa inset;
251 #width-selector button::after {
259 #theme-selector button {
261 0 0 0 4px
#eee inset,
262 0 0 0 5px
#999 inset;
264 #theme-selector button:hover,
265 #theme-selector button.selected {
267 0 0 0 1px
#eee inset,
268 0 0 0 2px
#999 inset,
269 0 0 0 4px
#eee inset,
270 0 0 0 5px
#999 inset;
273 #theme-selector button::before {
275 background
-color
: #eee;
277 #theme-selector button:hover::before,
278 #theme-selector button.selected::before {
282 /*======================*/
283 /* THEME TWEAKER TOGGLE */
284 /*======================*/
286 #theme-tweaker-toggle button {
290 /*=================*/
291 /* QUICKNAV WIDGET */
292 /*=================*/
297 box
-shadow
: 0 0 0 1px
#ddf;
298 text
-decoration
: none
;
300 #quick-nav-ui a[href='#bottom-bar'] {
303 #quick-nav-ui a:active {
304 transform
: scale(0.9);
306 #quick-nav-ui a[href='#comments'].no-comments {
310 @media only screen
and (hover
: hover
) {
311 #quick-nav-ui a:hover {
313 box
-shadow
: 0 0 0 1px
#faa;
315 #quick-nav-ui a:focus:not(:hover) {
321 /*======================*/
322 /* NEW COMMENT QUICKNAV */
323 /*======================*/
325 #new-comment-nav-ui .new-comments-count {
328 text
-shadow
: 0.5px
0.5px
0 #fff;
330 #new-comment-nav-ui .new-comments-count::after {
334 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
338 @media only screen
and (hover
: hover
) {
339 #new-comment-nav-ui .new-comments-count:hover {
347 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
356 /*=================*/
357 /* HNS DATE PICKER */
358 /*=================*/
360 #hns-date-picker span {
362 text
-shadow
: 0.5px
0.5px
0 #fff;
365 #hns-date-picker input {
366 border
: 1px solid
#777;
367 background
-color
: transparent
;
370 #hns-date-picker input:focus {
374 /*====================*/
375 /* DARK MODE SELECTOR */
376 /*====================*/
378 #dark-mode-selector {
379 outline
: 1px solid
#777;
381 #dark-mode-selector button {
384 #dark-mode-selector button.selected {
385 background
-color
: #777;
388 #dark-mode-selector button:not(.selected) + button:not(.selected) {
389 box
-shadow
: 1px
0 0 0 #777 inset;
391 #dark-mode-selector button:disabled:hover {
394 #dark-mode-selector button::after {
395 font
-family
: <?php
echo $UI_font; ?
>;
400 /*======================*/
401 /* TEXT SIZE ADJUSTMENT */
402 /*======================*/
404 #text-size-adjustment-ui button {
407 #text-size-adjustment-ui button.default {
410 #text-size-adjustment-ui button:disabled:hover {
413 #text-size-adjustment-ui::after {
417 /*=============================*/
418 /* COMMENTS VIEW MODE SELECTOR */
419 /*=============================*/
421 #comments-view-mode-selector a {
430 border
: 1px solid
#aaa;
432 .archive
-nav
*[class^
='archive-nav-item'] {
435 border
-width
: 1px
0 1px
1px
;
436 background
-color
: #eee;
438 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
440 border
-bottom
-width
: 0;
442 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
443 border
-bottom
-width
: 1px
;
445 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
446 border
-right
-width
: 1px
;
448 .archive
-nav span
[class^
='archive-nav-item'] {
450 background
-color
: #ddd;
454 .archive
-nav a
:visited
{
455 color
: rgba(0, 0, 238, 0.7);
457 .archive
-nav a
:hover
{
458 text
-decoration
: none
;
460 background
-color
: #e0e0e0;
461 text
-shadow
: <?php
echo $white_glow; ?
>;
463 .archive
-nav a
:active
{
464 transform
: scale(0.9);
466 .archive
-nav a
:focus
:not(:hover
) {
469 .archive
-nav a
.archive
-nav
-item
-day
:hover
{
470 background
-color
: #ddd;
478 margin
: 0.7em
20px
0.1em
20px
;
479 max
-width
: calc(100%
- 40px
);
480 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
485 h1
.listing
.link
-post
-link
{
489 h1
.listing
.post
-title
-link
{
494 @media only screen
and (hover
: hover
) {
498 background
-color
: rgba(238,238,238,0.85);
500 h1
.listing
:focus
-within
::before
{
505 h1
.listing
.link
-post
-link
:hover
{
509 -0.5px
-0.5px
0 #fff,
515 h1
.listing
.edit
-post
-link
{
516 padding
: 6px
3px
32px
0.5em
;
520 h1
.listing
.edit
-post
-link
:hover
{
521 text
-decoration
: none
;
523 #content.user-page h1.listing .edit-post-link {
524 background
-color
: #eee;
534 h1
.listing
.spam +
.post
-meta
{
537 h1
.listing
.spam
:hover
,
538 h1
.listing
.spam +
.post
-meta
:hover
,
539 h1
.listing
.spam
:hover +
.post
-meta
{
543 /*===================*/
544 /* LISTING POST-META */
545 /*===================*/
547 h1
.listing +
.post
-meta
{
551 h1
.listing +
.post
-meta
.karma
-value
{
559 #content.user-page h1.page-main-heading {
560 border
-bottom
: 1px solid
#ccc;
563 #content.user-page h1.listing,
564 #content.user-page h1.listing + .post-meta {
568 #content.user-page h1.listing {
571 border
-width
: 1px
1px
0 1px
;
575 #content.own-user-page h1.listing,
576 h1
.listing
.own
-post
-listing
{
579 @media only screen
and (hover
: hover
) {
580 #content.user-page h1.listing:focus-within::before {
585 #content.user-page h1.listing + .post-meta {
586 padding
: 0.75em
6px
0.5em
32px
;
587 border
-width
: 0 1px
1px
1px
;
590 #content.user-page h1.listing + .post-meta .post-section::before {
594 #content.conversations-user-page h1.listing {
595 padding
: 6px
6px
4px
9px
;
598 #content.conversations-user-page h1.listing + .post-meta {
603 .user
-stats
.karma
-total
{
615 .login
-container form input
[type
='submit'] {
617 background
-color
: #eee;
618 border
: 1px solid
#ccc;
620 .login
-container form input
[type
='submit']:hover
,
621 .login
-container form input
[type
='submit']:focus
{
622 background
-color
: #ddd;
623 border
: 1px solid
#aaa;
626 /* “Create account” form */
629 background
-color
: #f3f3f3;
630 border
: 1px solid
#ddd;
632 #signup-form input[type='submit'] {
633 background
-color
: #e4e4e4;
634 border
: 1px solid
#ccc;
636 #signup-form input[type='submit']:hover {
637 background
-color
: #d8d8d8;
638 border
: 1px solid
#aaa;
643 .login
-container
.login
-tip
{
644 border
: 1px solid
#eee;
650 border
: 1px solid red
;
651 background
-color
: #faa;
654 border
: 1px solid green
;
655 background
-color
: #afa;
658 /*=====================*/
659 /* PASSWORD RESET PAGE */
660 /*=====================*/
662 .reset
-password
-container input
[type
='submit'] {
663 background
-color
: #e4e4e4;
664 border
: 1px solid
#ccc;
668 /*===================*/
669 /* TABLE OF CONTENTS */
670 /*===================*/
673 font
-family
: <?php
echo $UI_font; ?
>;
674 background
-color
: #eee;
679 .body
-text
.contents li
::before
{
681 font
-feature
-settings
: "tnum";
683 .body
-text
.contents a
,
684 .body
-text
.contents a
:hover
{
687 .body
-text
.contents a
:hover
{
688 text
-decoration
: underline
;
691 .contents
.toc
-collapse
-toggle
-button
{
694 .contents
.toc
-collapse
-toggle
-button
:hover
{
696 text
-shadow
: <?php
echo $white_glow; ?
>;
700 /*==================*/
701 /* POSTS & COMMENTS */
702 /*==================*/
705 font
-family
: <?php
echo $text_font; ?
>;
709 border
-bottom
: 1px dotted
#bbb;
712 text
-decoration
: none
;
713 border
-bottom
: 1px solid currentColor
;
727 margin
: 1em
0 0.25em
0;
730 /*=================*/
731 /* POST NAVIGATION */
732 /*=================*/
735 .post
-nav
-links a
:visited
{
739 .post
-nav
-links a
:hover
{
740 text
-decoration
: none
;
743 .post
-nav
-links a
:active
{
751 @media only screen
and (max
-width
: 900px
) {
753 background
-color
: #e4e4e4;
756 border
-top
: 1px solid
#fff;
759 border
-right
: 1px solid
#fff;
762 border
-left
: 1px solid
#fff;
770 .post
-meta
.post
-section
::before
,
771 .comment
-meta
.alignment
-forum
{
778 a
.post
-section
:hover
{
779 text
-decoration
: none
;
781 a
.post
-section
:hover
::before
{
784 .post
-meta
.post
-section
.alignment
-forum
::before
{
790 a
.post
-section
.alignment
-forum
:hover
::before
{
792 text
-decoration
: none
;
808 .post
.link
-post a
.link
-post
-link
{
809 text
-decoration
: none
;
810 font
-family
: <?php
echo $UI_font; ?
>;
813 .post
.link
-post a
.link
-post
-link
:hover
{
816 .post
.link
-post a
.link
-post
-link
:hover
::before
{
820 -0.5px
-0.5px
0 #fff,
824 .post
.link
-post a
.link
-post
-link
:focus
{
826 border
-bottom
: 2px dotted
#999;
834 border
-top
: 1px solid
#ddd;
837 #content > .comment-thread .comment-meta a.date:focus,
838 #content > .comment-thread .comment-meta a.permalink:focus {
840 outline
: 2px dotted
#999;
842 background
-color
: #fff;
846 #content > .comment-thread .comment-meta a.date:focus + *,
847 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
851 border
: 1px solid
#ccc;
852 background
-color
: var(--GW
-comment
-background
-color
);
854 .comment
-parent
-link
::after
{
856 0 28px
16px
-16px
var(--GW
-comment
-parent
-background
-color
) inset
,
857 4px
16px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
,
858 4px
4px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
;
862 font
-size
: 1.1875rem
;
865 /*================================*/
866 /* DEEP COMMENT THREAD COLLAPSING */
867 /*================================*/
869 .comment
-item input
[id^
="expand"] + label
::after
{
870 color
: <?php
echo $hyperlink_color; ?
>;
873 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
876 .comment
-item input
[id^
="expand"] + label
:active
::after
,
877 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
880 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
881 border
-width
: 1px
0 0 0;
888 .comment
-meta
.author
{
892 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
894 filter
: brightness(60%
);
897 .comment
-item
.voting
-controls
.active
-controls
::after
,
898 .comment
-item
.voting
-controls
.karma
-value
::after
,
899 .post
.voting
-controls
.active
-controls
::after
,
900 .post
.voting
-controls
.karma
-value
::after
,
902 background
-color
: #eee;
905 box
-shadow
: 0 0 0 1px
#bbb inset;
907 .comment
-item
.voting
-controls
.active
-controls
::after
,
908 .post
.voting
-controls
.active
-controls
::after
{
912 .comment
-item
.voting
-controls
.karma
-value
::after
,
913 .post
.voting
-controls
.karma
-value
::after
{
919 /*====================*/
920 /* ANTI-KIBITZER MODE */
921 /*====================*/
924 .inline
-author
.redacted
{
929 .karma
-value
.redacted
{
933 .link
-post
-domain
.redacted
{
937 /*===========================*/
938 /* COMMENT THREAD NAVIGATION */
939 /*===========================*/
941 div
.comment
-parent
-link
{
944 a
.comment
-parent
-link
{
947 a
.comment
-parent
-link
::before
{
950 a
.comment
-parent
-link
:hover
::before
{
951 background
-color
: #ffd;
955 div
.comment
-child
-links
{
958 div
.comment
-child
-links a
{
961 .comment
-child
-link
::before
{
965 .comment
-item
-highlight
{
972 border
: 1px solid
#e7b200;
974 .comment
-item
-highlight
-faint
{
981 border
: 1px solid
#f8e7b5;
985 background
-color
: #fff;
988 /*=======================*/
989 /* COMMENTS COMPACT VIEW */
990 /*=======================*/
992 #comments-list-mode-selector button {
994 0 0 0 4px
#eee inset,
995 0 0 0 5px
#aaa inset;
997 #comments-list-mode-selector button:hover,
998 #comments-list-mode-selector button.selected {
1000 0 0 0 1px
#eee inset,
1001 0 0 0 2px
#aaa inset,
1002 0 0 0 4px
#eee inset,
1003 0 0 0 5px
#aaa inset;
1005 #content.compact > .comment-thread .comment-item {
1008 #content.compact > .comment-thread .comment-item::after {
1009 color
: <?php
echo $hyperlink_color; ?
>;
1010 background
: linear
-gradient(to right
, transparent
0%
, #fff 50%, #fff 100%);
1013 @media only screen
and (hover
: hover
) {
1014 #content.compact > .comment-thread .comment-item:hover .comment,
1015 #content.compact > .comment-thread .comment-item.expanded .comment {
1016 background
-color
: #fff;
1017 outline
: 3px solid
#00c;
1019 #content.compact > .comment-thread .comment-item:hover .comment::before,
1020 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1021 background
-color
: #fff;
1032 @media only screen
and (hover
: none
) {
1033 #content.compact > .comment-thread.expanded .comment-item .comment {
1034 background
-color
: #fff;
1035 outline
: 3px solid
#00c;
1037 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1038 background
-color
: #fff;
1050 #content.user-page.compact > h1.listing {
1053 #content.user-page.compact > h1.listing + .post-meta {
1054 margin
-bottom
: 0.5rem
;
1057 /*===========================*/
1058 /* HIGHLIGHTING NEW COMMENTS */
1059 /*===========================*/
1061 .new-comment
::before
{
1065 border
: 1px solid
#e00;
1066 outline
: 1px solid
#e00;
1069 /*=================================*/
1070 /* COMMENT THREAD MINIMIZE BUTTONS */
1071 /*=================================*/
1073 .comment
-minimize
-button
{
1076 .comment
-minimize
-button
:hover
{
1078 text
-shadow
: <?php
echo $white_glow; ?
>;
1080 .comment
-minimize
-button
::after
{
1081 font
-family
: <?php
echo $UI_font; ?
>;
1084 .comment
-minimize
-button
.maximized
::after
{
1095 background
-size
: 17px
17px
;
1098 display
: inline
-block
;
1107 filter
: brightness(50%
);
1117 filter
: grayscale(100%
) brightness(128%
);
1120 filter
: grayscale(100%
) brightness(188%
);
1126 filter
: drop
-shadow(0 0 1px
#fff);
1131 .vote
.two
-temp
::before
{
1135 0 0 0 5px transparent
;
1140 .upvote
.two
::before
{
1144 0 0 0 5px transparent
;
1146 .downvote
.two
::before
{
1150 0 0 0 5px transparent
;
1157 .karma
.upvote
::before
{
1158 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/upvote-green-circle-plus.svg")) ?>');
1160 .karma
.downvote
::before
{
1161 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/downvote-red-circle-minus.svg")) ?>');
1164 .karma
.upvote
:disabled
::before
{
1165 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")) ?>');
1167 .karma
.downvote
:disabled
::before
{
1168 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")) ?>');
1171 .agreement
.upvote
::before
{
1172 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/agree-green-circle-check.svg")) ?>');
1174 .agreement
.downvote
::before
{
1175 background
-image
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/disagree-red-circle-x.svg")) ?>');
1178 .agreement
.upvote
:disabled
::before
{
1179 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")) ?>');
1181 .agreement
.downvote
:disabled
::before
{
1182 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")) ?>');
1185 /*===========================*/
1186 /* COMMENTING AND POSTING UI */
1187 /*===========================*/
1189 .posting
-controls input
[type
='submit'] {
1190 background
-color
: #fff;
1191 border
: 1px solid
#aaa;
1194 .posting
-controls input
[type
='submit']:hover
,
1195 .posting
-controls input
[type
='submit']:focus
{
1196 background
-color
: #ddd;
1197 border
: 1px solid
#999;
1200 .comment
-controls
.cancel
-comment
-button
{
1207 .comment
-controls
.cancel
-comment
-button
:hover
{
1209 text
-shadow
: <?php
echo $white_glow; ?
>;
1212 .new-comment
-button
{
1216 .comment
-controls
.delete
-button
,
1217 .comment
-controls
.retract
-button
{
1220 .comment
-controls
.delete
-button
::before
{
1225 .comment
-controls
.edit
-button
,
1226 .comment
-controls
.unretract
-button
{
1229 .comment
-controls
.action
-button
:hover
{
1234 margin
: 0.25em
-1em
0 0;
1236 h1
.listing
.edit
-post
-link
,
1237 h1
.listing
.edit
-post
-link
:visited
,
1238 .post
-controls
.edit
-post
-link
,
1239 .post
-controls
.edit
-post
-link
:visited
{
1242 h1
.listing
.edit
-post
-link
:hover
,
1243 .post
-controls
.edit
-post
-link
:hover
{
1247 .posting
-controls textarea
{
1248 font
-family
: <?php
echo $text_font; ?
>;
1252 .posting
-controls textarea
:focus
{
1253 border
-width
: 29px
1px
1px
1px
;
1254 box
-shadow
: 0 0 0 1px
#00e;
1256 .posting
-controls
.edit
-existing
-post textarea
:focus
,
1257 .posting
-controls form
.edit
-existing
-comment textarea
:focus
{
1259 box
-shadow
: 0 0 0 1px
#090;
1264 .posting
-controls textarea
::-webkit
-scrollbar
,
1265 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
{
1267 background
-color
: transparent
;
1269 .posting
-controls textarea
::-webkit
-scrollbar
-track
,
1270 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-track
{
1271 background
-color
: #fff;
1272 border
-left
: 1px solid
#0040ff;
1273 border
-top
: 1px solid
#eee;
1275 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-track
{
1276 border
-top
: 1px solid
#ddf;
1277 border
-left
: 2px solid
#0040ff;
1279 .posting
-controls textarea
::-webkit
-scrollbar
-thumb
{
1280 background
-color
: #acacff;
1281 box
-shadow
: 0 0 0 1px
#eee inset;
1282 border
-left
: 1px solid
#0040ff;
1284 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-thumb
{
1285 background
-color
: #0040ff;
1286 border
-left
: 2px solid
#0040ff;
1288 0 1px
0 0 #ddf inset,
1289 0 0 0 1px
#eee inset;
1291 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-thumb
{
1292 background
-color
: #0040ff;
1293 border
-left
: 1px solid
#0040ff;
1295 0 1px
0 0 #ddf inset,
1296 0 0 0 1px
#eee inset;
1299 .posting
-controls
.edit
-existing
-post textarea
:focus
::-webkit
-scrollbar
-track
,
1300 .posting
-controls form
.edit
-existing
-comment textarea
:focus
::-webkit
-scrollbar
-track
{
1301 border
-left
: 2px solid
#090;
1303 .posting
-controls
.edit
-existing
-post textarea
:focus
::-webkit
-scrollbar
-thumb
,
1304 .posting
-controls form
.edit
-existing
-comment textarea
:focus
::-webkit
-scrollbar
-thumb
{
1305 border
-left
: 2px solid
#090;
1306 background
-color
: #28a708;
1309 /* GUIEdit buttons */
1311 .guiedit
-buttons
-container
{
1312 background
-image
: linear
-gradient(to bottom
, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1315 .posting
-controls
.edit
-existing
-post
.guiedit
-buttons
-container button
,
1316 .posting
-controls form
.edit
-existing
-comment
.guiedit
-buttons
-container button
{
1319 .guiedit
-buttons
-container button
{
1320 font
-family
: Font Awesome
, <?php
echo $text_font; ?
>;
1324 font
-family
: <?php
echo $UI_font; ?
>;
1329 /* Markdown hints */
1331 #markdown-hints-checkbox + label {
1332 color
: <?php
echo $hyperlink_color; ?
>;
1334 #markdown-hints-checkbox + label:hover {
1336 text
-shadow
: <?php
echo $white_glow; ?
>;
1339 border
: 1px solid
#c00;
1340 background
-color
: #ffa;
1343 /*================*/
1344 /* EDIT POST FORM */
1345 /*================*/
1347 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1350 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1352 border
: 1px solid
#ddd;
1355 @media only screen
and (hover
:hover
) {
1356 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1357 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1363 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1364 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1368 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1371 #edit-post-form input[type='radio'] + label {
1375 #edit-post-form input[type='radio'][value='all'] + label {
1376 border
-radius
: 8px
0 0 8px
;
1379 #edit-post-form input[type='radio'][value='drafts'] + label {
1380 border
-radius
: 0 8px
8px
0;
1382 #edit-post-form input[type='radio'] + label:hover,
1383 #edit-post-form input[type='radio']:focus + label {
1384 background
-color
: #ddd;
1387 #edit-post-form input[type='radio']:focus + label {
1392 #edit-post-form input[type='radio']:checked + label {
1393 background
-color
: #ddd;
1406 text
-decoration
: none
;
1407 color
: <?php
echo $hyperlink_color; ?
>;
1413 text
-decoration
: underline
;
1421 input
[type
='submit'] {
1422 color
: <?php
echo $hyperlink_color; ?
>;
1426 input
[type
='submit']:hover
,
1428 input
[type
='submit']:focus
{
1430 text
-shadow
: <?php
echo $white_glow; ?
>;
1433 input
[type
='submit']:active
{
1435 transform
: scale(0.9);
1438 color
: <?php
echo $hyperlink_color; ?
>;
1442 text
-shadow
: <?php
echo $white_glow; ?
>;
1443 text
-decoration
: none
;
1446 transform
: scale(0.9);
1448 .button
:focus
:not(:hover
) {
1451 @supports
(-moz
-appearance
: none
) {
1467 font
-family
: <?php
echo $UI_font; ?
>;
1478 border
-left
: 5px solid
#ccc;
1486 #content figure.image img {
1487 border
: 1px solid
#ccc;
1489 #content figure img {
1490 border
: 1px solid
#000;
1492 #content img[src$='.svg'],
1493 #content figure img[src$='.svg'] {
1496 #content img[style^='float'] {
1497 border
: 1px solid transparent
;
1504 #content:not(.tag-index-page) .body-text table,
1505 #content:not(.tag-index-page) .body-text table th,
1506 #content:not(.tag-index-page) .body-text table td {
1507 border
: 1px solid
#ccc;
1515 border
-bottom
: 1px solid
#999;
1519 background
-color
: #f6f6ff;
1520 border
: 1px solid
#ddf;
1525 input
[type
='search'],
1526 input
[type
='password'] {
1527 border
: 1px solid
#999;
1529 background
-color
: transparent
;
1531 input
[type
='text']:focus
,
1532 input
[type
='search']:focus
,
1533 input
[type
='password']:focus
{
1534 border
: 1px solid
#00e;
1535 outline
: 1px solid
#00e;
1547 background
-color
: #e6e6e6;
1548 text
-decoration
: none
;
1550 0 -1px
0 0 #000 inset,
1551 0 -3px
1px
-2px
#000 inset;
1555 #content.about-page .accesskey-table {
1556 font
-family
: <?php
echo $UI_font; ?
>;
1560 #content.about-page img {
1561 border
: 1px solid
#000;
1564 /*========================*/
1565 /* QUALIFIED HYPERLINKING */
1566 /*========================*/
1571 #aux-about-link a:hover {
1573 text
-shadow
: <?php
echo $white_glow; ?
>;
1576 .qualified
-linking label
{
1577 color
: <?php
echo $hyperlink_color; ?
>;
1579 .qualified
-linking label
:hover
{
1586 .qualified
-linking
-toolbar
{
1587 border
: 1px solid
#000;
1588 background
-color
: #fff;
1590 .qualified
-linking
-toolbar a
{
1591 background
-color
: #eee;
1592 border
: 1px solid
#ccc;
1595 .qualified
-linking
-toolbar a
:visited
{
1596 color
: <?php
echo $hyperlink_color; ?
>;
1598 .qualified
-linking
-toolbar a
:hover
{
1599 text
-decoration
: none
;
1600 background
-color
: #ddd;
1601 text
-shadow
: <?php
echo $white_glow; ?
>;
1603 .qualified
-linking label
::after
{
1604 background
-color
: #eee;
1612 .mathjax
-block
-container
::-webkit
-scrollbar
{
1614 background
-color
: #f6f6ff;
1616 border
: 1px solid
#ddf;
1618 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1619 background
-color
: #dde;
1621 border
: 1px solid
#cce;
1623 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1625 background
-color
: #f6f6ff;
1627 border
: 1px solid
#ddf;
1629 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1630 background
-color
: #dde;
1632 border
: 1px solid
#cce;
1640 .textarea
-container
.autocomplete
-container
{
1641 background
-color
: rgba(255, 255, 170, 0.75);
1642 border
: 1px solid
rgba(7, 0, 238, 0.75);
1645 .textarea
-container
.autocomplete
-container div
.highlighted
{
1646 background
-color
: rgba(7, 0, 238, 0.75);
1650 .textarea
-container
.autocomplete
-container div
:not(.highlighted
):hover
{
1651 background
-color
: rgba(7, 0, 238, 0.25);
1654 .textarea
-container
.autocomplete
-container div span
.age
,
1655 .textarea
-container
.autocomplete
-container div span
.karma
{
1660 /*=================*/
1661 /* ALIGNMENT FORUM */
1662 /*=================*/
1664 #content.alignment-forum-index-page::before {
1665 background
-color
: #eaedff;
1667 #content.alignment-forum-index-page::after {
1668 font
-family
: "Concourse SmallCaps";
1670 background
-color
: #7f85b2;
1672 -webkit
-background
-clip
: text
;
1674 rgba(255,255,255,0.5) 0px
3px
3px
;
1676 @media only screen
and (hover
: hover
) {
1677 #content.alignment-forum-index-page h1.listing a:hover,
1678 #content.alignment-forum-index-page h1.listing a:focus {
1679 background
-color
: rgba(234,237,255,0.85);
1683 /*====================*/
1684 /* FOR NARROW SCREENS */
1685 /*====================*/
1687 @media only screen
and (max
-width
: 1440px
) {
1689 background
-color
: #d8d8d8;
1692 #hns-date-picker::before {
1693 border
: 1px solid
#999;
1694 border
-width
: 1px
0 1px
1px
;
1697 @media only screen
and (max
-width
: 1200px
) {
1699 background
-color
: #eee;
1701 #hns-date-picker::before {
1705 @media only screen
and (max
-width
: 1080px
) {
1706 #text-size-adjustment-ui button {
1707 border
: 1px solid
#999;
1712 0 0 0 1px transparent
;
1714 #theme-tweaker-toggle button {
1715 border
: 1px solid
#999;
1717 0 0 10px
#999 inset,
1718 0 0 0 1px transparent
;
1720 transform
: scale(0.8);
1723 @media only screen
and (max
-width
: 1020px
) {
1727 0 0 0 2px transparent
;
1729 #new-comment-nav-ui .new-comments-count::before {
1730 background
-color
: #d8d8d8;
1733 0 0 0 2px transparent
;
1737 @media only screen
and (max
-width
: 1160px
) {
1739 background
-color
: #eee;
1742 0 0 0 2px transparent
;
1744 #theme-selector:hover::after {
1745 background
-color
: #999;
1746 width
: calc(6em
- 3px
);
1747 height
: calc(100%
- 5px
);
1751 #text-size-adjustment-ui button {
1752 background
-color
: #ddd;
1754 #text-size-adjustment-ui button:hover {
1755 background
-color
: #eee;
1757 #theme-tweaker-toggle button {
1758 background
-color
: #ddd;
1766 /*******************************************/
1767 @media only screen
and (max
-width
: 1160px
) {
1768 /*******************************************/
1770 #ui-elements-container > div[id$='-ui-toggle'] button,
1771 #theme-selector .theme-selector-close-button {
1783 background
-color
: #eee;
1791 border
-radius
: 12px
;
1793 #theme-selector::before {
1795 font
-weight
: normal
;
1796 text
-shadow
: 0.5px
0.5px
0 #aaa;
1798 #theme-selector button {
1799 background
-color
: #e6e6e6;
1800 border
-radius
: 10px
;
1802 #theme-selector button::after {
1804 max
-width
: calc(100%
- 3.5em
);
1806 text
-overflow
: ellipsis
;
1809 #theme-selector button.selected::after {
1815 #theme-selector .auxiliary-controls-container {
1816 border
-top
-color
: #999;
1818 #theme-selector .auxiliary-controls-container button {
1819 background
-color
: #eee;
1821 0 0 10px
0 #aaa inset,
1822 0 0 0 1px transparent
;
1823 border
: 1px solid
#999;
1825 #theme-selector #anti-kibitzer-toggle button::before,
1826 #theme-selector #anti-kibitzer-toggle button::after {
1827 background
-color
: #444;
1829 #theme-selector #dark-mode-selector {
1830 background
-color
: #eee;
1832 0 0 10px
0 #aaa inset,
1833 0 0 0 1px transparent
;
1834 border
: 1px solid
#999;
1836 #theme-selector #dark-mode-selector button.selected {
1837 background
-color
: #999;
1839 box
-shadow
: 0 0 2px
0 #999;
1843 background
-color
: #fff;
1846 #new-comment-nav-ui,
1855 #quick-nav-ui a::after,
1856 #new-comment-nav-ui::before {
1857 font
-family
: <?php
echo $UI_font; ?
>;
1863 background
-color
: #fff;
1867 #new-comment-nav-ui {
1870 #new-comment-nav-ui {
1871 background
-color
: #fff;
1872 border
: 1px solid
#999;
1874 #new-comment-nav-ui::before {
1878 #new-comment-nav-ui .new-comment-sequential-nav-button {
1879 box
-shadow
: 0 0 0 1px
#999;
1882 #new-comment-nav-ui .new-comments-count {
1883 background
-color
: inherit
;
1884 box
-shadow
: 0 -1px
0 0 #999;
1886 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
1889 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
1890 border
-radius
: 7px
0 0 7px
;
1892 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
1893 border
-radius
: 0 7px
7px
0;
1895 #new-comment-nav-ui button::after {
1896 font
-family
: <?php
echo $UI_font; ?
>;
1899 background
-color
: #fff;
1900 border
: 1px solid
#999;
1903 /*****************************************/
1904 @media only screen
and (max
-width
: 900px
) {
1905 /*****************************************/
1906 h1
.listing +
.post
-meta
> * {
1909 h1
.listing +
.post
-meta
.post
-section
{
1913 h1
.listing +
.post
-meta
.post
-section
::before
{
1917 #primary-bar .nav-inner {
1920 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
1923 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
1927 .archive
-nav
*[class^
='archive-nav-item-'] {
1928 border
-width
: 1px
!important
;
1930 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
1931 background
-color
: #aaa;
1934 .comment
-item
.comment
-item
{
1935 margin
: 0.75em
3px
3px
6px
;
1937 .comment
-item
.comment
-item +
.comment
-item
{
1938 margin
: 1.5em
3px
3px
6px
;
1941 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
1942 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
1943 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
1948 /*******************************************/
1949 } @media only screen
and (max
-width
: 720px
) {
1950 /*******************************************/
1951 /*******************************************/
1952 } @media only screen
and (max
-width
: 520px
) {
1953 /*******************************************/
1956 margin
: 18px
6px
4px
6px
;
1957 max
-width
: calc(100%
- 12px
);
1959 h1
.listing +
.post
-meta
{
1962 h1
.listing
.link
-post
-link
{
1965 #content.conversations-user-page h1.listing::after {
1966 height
: calc(100% +
2.25em
);
1968 #content.conversations-user-page h1.listing + .post-meta .date {
1973 font
-size
: 1.125rem
;
1976 #content.compact > .comment-thread .comment-item {
1980 .textarea
-container
:focus
-within textarea
{
1981 background
-color
: #fff;
1984 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
1985 padding
: 5px
6px
6px
6px
;
1988 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
1993 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
1994 background
-color
: #fff;
1995 border
-top
: 1px solid
#ddf;
1997 .posting
-controls
.textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2000 #content.conversation-page .textarea-container:focus-within::after {
2001 background
-color
: #fff;
2003 .textarea
-container
:focus
-within button
.guiedit
{
2004 border
: 1px solid
#00c;
2007 #markdown-hints::after {
2011 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2014 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {