2 $UI_font = "'Mundo Sans', 'Helvetica', 'GW-Symbols', sans-serif";
3 $headings_font = "'Caecilia', 'Helvetica', sans-serif";
4 $text_font = "'Source Serif Pro', 'Helvetica', sans-serif";
5 $hyperlink_color = "#92c396";
6 $white_glow = "0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff";
20 --GW
-comment
-background
-color
-odd
: #f6f6f6;
21 --GW
-comment
-background
-color
-even
: #fff;
22 --GW
-comment
-background
-color
-target
: #ffd;
31 font
-family
: <?php
echo $UI_font; ?
>;
33 background
-color
: #fff;
37 padding
: 30px
20px
0 90px
;
39 #content.comment-thread-page {
42 #ui-elements-container {
46 /* Compensating for Linux/Windows being terrible. */
48 .post
-meta
> *:not(.post
-section
),
53 #secondary-bar button,
58 text
-shadow
: <?php
global $platform; echo ($platform == 'Mac' ?
'none' : '0 0 0 #aaa'); ?
>;
61 /* Compensating for Safari being terrible. */
63 @media not all
and (min
-resolution
:.001dpcm
) { @media
{
64 .post
-meta
> *:not(.post
-section
),
68 #secondary-bar button,
74 text
-shadow
: 0 0 1px
#888;
83 display
: none
; /* FIXME */
86 /*= Layout (desktop) =*/
88 @media not screen
and (hover
: none
) {
91 padding
: 0.5rem
0.75rem
;
94 #secondary-bar .nav-inner {
96 padding
: 0.5rem
0.75rem
;
112 align
-items
: flex
-start
;
113 pointer
-events
: none
;
119 pointer
-events
: auto
;
121 #secondary-bar #nav-item-sequences .nav-inner {
124 text
-overflow
: unset;
126 #nav-item-sequences .nav-inner::before {
129 #secondary-bar #nav-item-about {
130 padding
-right
: unset;
132 #secondary-bar #nav-item-about .nav-inner {
139 transform
: translateX(-121px
);
142 #content.comment-thread-page #nav-item-archive,
143 #content.comment-thread-page #nav-item-sequences,
144 #content.comment-thread-page #nav-item-about {
145 transform
: translateX(-81px
);
152 #bottom-bar .nav-inner {
160 #bottom-bar .nav-item a::before {
172 /* Accesskey hints */
184 #nav-item-recent-comments .nav-inner span {
191 padding
-right
: 1.5em
;
202 #nav-item-search .nav-inner {
206 #nav-item-search form::before {
211 transition
: color
0.15s ease
;
213 #nav-item-search form:focus-within::before {
216 #nav-item-search button {
222 #nav-item-search form:not(:focus-within) button:not(:hover) {
225 #nav-item-search input {
228 font
-family
: Inconsolata
, monospace
;
232 #nav-item-search input::placeholder {
237 /* Inbox indicator */
239 #inbox-indicator::before {
245 /* Decorative bottom bar */
247 #bottom-bar.decorative {
250 #bottom-bar.decorative::before,
251 #bottom-bar.decorative::after {
255 padding
: 0.25em
0 1em
0;
257 #bottom-bar.decorative::before {
260 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
261 background
-repeat
: repeat
-x
;
262 background
-position
: center
35%
;
264 filter
: opacity(0.5);
266 #bottom-bar.decorative::after {
272 background
-color
: #fff;
276 <?php
fit_content("#bottom-bar.decorative::after"); ?
>
278 /*= Top pagination UI hover tooltips =*/
280 #top-nav-bar a::after,
281 #bottom-bar a::after {
299 padding
: 0.5rem
0.75rem
;
303 @media not screen
and (hover
: none
) {
312 align
-items
: flex
-start
;
313 pointer
-events
: none
;
319 pointer
-events
: auto
;
323 .page
-toolbar button
{
327 .page
-toolbar
.button
::before
{
332 .new-private-message
{
336 .new-private-message
::before
{
345 /*===================*/
346 /* TOP PAGINATION UI */
347 /*===================*/
350 justify
-content
: flex
-start
;
351 padding
: 1em
0 0.25em
0;
356 #top-nav-bar .page-number {
359 #top-nav-bar .page-number span {
362 #top-nav-bar a::before {
365 #top-nav-bar a.disabled {
370 #content.user-page > #top-nav-bar {
371 justify
-content
: center
;
375 .archive
-nav +
#top-nav-bar {
376 margin
: 0.5em
0 0 -4px
;
377 padding
: 0 0 0.25em
0;
384 .sublevel
-nav
.sublevel
-item
{
386 padding
: 4px
10px
1px
10px
;
387 background
-color
: #fff;
389 .sublevel
-nav
.sublevel
-item
:hover
,
390 .sublevel
-nav
.sublevel
-item
.selected
{
391 background
-color
: #c4dbc4;
394 .sublevel
-nav
.sublevel
-item
:not(.selected
):active
{
395 background
-color
: #92c396;
398 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
400 border
-color
: #c4dbc4;
401 border
-width
: 1px
0 1px
1px
;
403 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
{
404 border
-radius
: 8px
0 0 8px
;
406 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
408 border
-radius
: 0 8px
8px
0;
411 /*=====================*/
412 /* SORT ORDER SELECTOR */
413 /*=====================*/
414 #content.index-page .sublevel-nav.sort {
423 pointer
-events
: none
;
425 .sublevel
-nav
.sort
.sublevel
-item
{
426 padding
: 7px
8px
3px
7px
;
427 text
-transform
: uppercase
;
428 pointer
-events
: auto
;
430 .sublevel
-nav
.sort
::before
{
431 text
-transform
: uppercase
;
435 .sublevel
-nav
.sort
::after
{
445 0 18px
0 0 #fff inset,
446 0 0 0 1px
#c4dbc4 inset,
447 0 18px
0 1px
#c4dbc4 inset,
455 @media not screen
and (hover
: none
) {
458 #appearance-adjust-ui-toggle {
461 display
: inline
-block
;
465 #site-nav-ui-toggle button,
466 #post-nav-ui-toggle button,
467 #appearance-adjust-ui-toggle button {
468 font
-family
: Font Awesome
;
473 -webkit
-tap
-highlight
-color
: transparent
;
478 #site-nav-ui-toggle button:hover,
479 #post-nav-ui-toggle button:hover,
480 #appearance-adjust-ui-toggle button:hover {
483 #site-nav-ui-toggle button::selection,
484 #post-nav-ui-toggle button::selection,
485 #appearance-adjust-ui-toggle button::selection {
486 background
-color
: transparent
;
488 #site-nav-ui-toggle button::-moz-focus-inner,
489 #post-nav-ui-toggle button::-moz-focus-inner,
490 #appearance-adjust-ui-toggle button::-moz-focus-inner {
493 #post-nav-ui-toggle.highlighted,
494 #appearance-adjust-ui-toggle.highlighted {
495 transform
: scale(1.33);
497 #site-nav-ui-toggle.highlighted button {
498 transform
: scale(1.33);
500 #site-nav-ui-toggle.highlighted button,
501 #post-nav-ui-toggle.highlighted button,
502 #appearance-adjust-ui-toggle.highlighted button {
512 #site-nav-ui-toggle {
515 pointer
-events
: none
;
517 #site-nav-ui-toggle button {
525 pointer
-events
: auto
;
527 #site-nav-ui-toggle button:active {
530 #site-nav-ui-toggle button.engaged {
535 #site-nav-ui-toggle button.engaged::before {
537 padding
: 0 0.25em
0 0;
541 #secondary-bar #nav-item-archive,
542 #secondary-bar #nav-item-sequences,
543 #secondary-bar #nav-item-about,
550 #secondary-bar #nav-item-archive,
551 #secondary-bar #nav-item-sequences,
552 #secondary-bar #nav-item-about,
557 #secondary-bar #nav-item-archive,
558 #secondary-bar #nav-item-sequences,
559 #secondary-bar #nav-item-about,
563 max
-height
0.2s ease
,
564 visibility
0.2s ease
,
571 #primary-bar.engaged,
572 #secondary-bar.engaged #nav-item-archive,
573 #secondary-bar.engaged #nav-item-sequences,
574 #secondary-bar.engaged #nav-item-about,
575 .page
-toolbar
.engaged
{
579 #primary-bar.engaged,
580 #secondary-bar.engaged #nav-item-archive,
581 #secondary-bar.engaged #nav-item-sequences,
582 #secondary-bar.engaged #nav-item-about,
583 .page
-toolbar
.engaged
{
586 #primary-bar.engaged {
589 #secondary-bar.engaged #nav-item-archive {
592 #secondary-bar.engaged #nav-item-sequences {
595 #secondary-bar.engaged #nav-item-about {
598 .page
-toolbar
.engaged
{
602 #post-nav-ui-toggle {
606 #content.comment-thread-page ~ #ui-elements-container #post-nav-ui-toggle {
609 #post-nav-ui-toggle button.engaged {
610 transform
: rotate(-90deg
);
621 max
-height
0.2s ease
,
623 visibility
0.2s ease
;
625 #quick-nav-ui.engaged,
626 #new-comment-nav-ui.engaged,
627 #hns-date-picker.engaged {
636 #content.post-page ~ #ui-elements-container #quick-nav-ui {
639 #quick-nav-ui.engaged {
646 #new-comment-nav-ui {
649 #new-comment-nav-ui.engaged {
656 #hns-date-picker.engaged {
659 @media only screen
and (max
-width
: 1440px
) {
661 background
-color
: rgba(255,255,255,0.95);
664 #hns-date-picker::before {
667 #hns-date-picker input {
668 background
-color
: #fff;
670 #hns-date-picker span {
679 #hns-date-picker.engaged {
684 #appearance-adjust-ui-toggle {
688 #appearance-adjust-ui-toggle button.engaged {
689 transform
: rotate(-90deg
);
692 #comments-view-mode-selector,
696 #text-size-adjustment-ui,
697 #theme-tweaker-toggle {
698 pointer
-events
: none
;
704 <?php
fit_content("#theme-tweaker-toggle"); ?
>
705 #comments-view-mode-selector::after,
706 #theme-selector::after,
707 #theme-selector::before,
708 #width-selector::after,
709 #dark-mode-selector::after,
710 #text-size-adjustment-ui::after {
712 background
-color
: #fff;
720 #dark-mode-selector::after {
721 width
: calc(100% +
2px
);
722 height
: calc(100% +
2px
);
726 #comments-view-mode-selector.engaged,
727 #theme-selector.engaged,
728 #width-selector.engaged,
729 #dark-mode-selector.engaged,
730 #text-size-adjustment-ui.engaged,
731 #theme-tweaker-toggle.engaged {
732 pointer
-events
: auto
;
736 #comments-view-mode-selector {
738 top
: calc(100%
- 180px
);
740 #comments-view-mode-selector::after {
743 max
-height
0.2s ease
;
745 #comments-view-mode-selector.engaged::after {
752 top
: calc(100%
- 316px
);
756 visibility
0.2s ease
;
758 #theme-selector.engaged {
761 #theme-selector::after,
762 #theme-selector::before {
764 height
: calc(100% +
60px
);
767 max
-height
0.2s ease
;
770 #theme-selector.engaged::after,
771 #theme-selector.engaged::before {
774 #theme-selector::before {
781 top
: calc(100%
- 48px
);
783 #width-selector::after {
786 max
-width
0.15s ease
;
788 #width-selector.engaged::after {
792 <?php
fit_content("#dark-mode-selector"); ?
>
793 #dark-mode-selector {
795 top
: calc(100%
- 120px
);
797 #dark-mode-selector::after {
802 max
-height
0.2s ease
;
804 #dark-mode-selector.engaged::after {
809 #text-size-adjustment-ui {
811 top
: calc(100%
- 80px
);
813 #text-size-adjustment-ui::after {
818 max
-height
0.2s ease
;
820 #text-size-adjustment-ui.engaged::after {
825 #theme-tweaker-toggle {
827 top
: calc(100%
- 356px
);
830 visibility
0.5s ease
-out
;
832 #theme-tweaker-toggle.engaged {
835 @-moz
-document url
-prefix() {
836 #theme-tweaker-toggle {
840 #theme-tweaker-toggle button {
853 #width-selector button {
855 0 0 0 4px
#fff inset,
856 0 0 0 5px
#aaa inset;
858 #width-selector button:hover,
859 #width-selector button.selected {
861 0 0 0 1px
#fff inset,
862 0 0 0 2px
#aaa inset,
863 0 0 0 4px
#fff inset,
864 0 0 0 5px
#aaa inset;
871 #theme-selector button {
873 0 0 0 4px
#fff inset,
874 0 0 0 5px
#999 inset;
876 #theme-selector button:hover,
877 #theme-selector button.selected {
879 0 0 0 1px
#fff inset,
880 0 0 0 2px
#999 inset,
881 0 0 0 4px
#fff inset,
882 0 0 0 5px
#999 inset;
885 #theme-selector button::before {
890 background
-color
: #fff;
892 #theme-selector button:hover::before,
893 #theme-selector button.selected::before {
897 /*======================*/
898 /* THEME TWEAKER TOGGLE */
899 /*======================*/
901 #theme-tweaker-toggle button {
905 /*=================*/
906 /* QUICKNAV WIDGET */
907 /*=================*/
912 text
-decoration
: none
;
915 box
-shadow
0.15s ease
-out
;
917 #quick-nav-ui a[href='#bottom-bar'] {
920 #quick-nav-ui a:active {
921 transform
: scale(0.9);
923 #quick-nav-ui a[href='#comments'].no-comments {
927 @media only screen
and (hover
: hover
) {
928 #quick-nav-ui a:hover {
931 0 0 0 1px
rgba(121, 169, 126, 0.3),
934 #quick-nav-ui a:focus:not(:hover) {
940 /*======================*/
941 /* NEW COMMENT QUICKNAV */
942 /*======================*/
944 #new-comment-nav-ui .new-comments-count {
946 text
-shadow
: 0.5px
0.5px
0 #fff;
949 #new-comment-nav-ui .new-comments-count::after {
952 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
956 /*=================*/
957 /* HNS DATE PICKER */
958 /*=================*/
960 #hns-date-picker span {
964 #hns-date-picker input {
965 border
: 1px solid
#ddd;
967 padding
: 3px
3px
0 3px
;
969 #hns-date-picker input:focus {
973 /*======================*/
974 /* ANTI-KIBITZER TOGGLE */
975 /*======================*/
977 #anti-kibitzer-toggle {
983 #anti-kibitzer-toggle button::before {
986 #anti-kibitzer-toggle button::before,
987 #anti-kibitzer-toggle button::after {
990 #anti-kibitzer-toggle button:hover::before,
991 #anti-kibitzer-toggle button:hover::after {
995 /*====================*/
996 /* DARK MODE SELECTOR */
997 /*====================*/
999 #dark-mode-selector {
1000 outline
: 1px solid
#92c396;
1002 #dark-mode-selector button {
1005 #dark-mode-selector button.selected {
1006 background
-color
: #92c396;
1009 #dark-mode-selector button:not(.selected) + button:not(.selected) {
1010 box
-shadow
: 1px
0 0 0 #92c396 inset;
1012 #dark-mode-selector button:disabled:hover {
1015 #dark-mode-selector button::after {
1016 font
-family
: <?php
echo $UI_font; ?
>;
1022 /*======================*/
1023 /* TEXT SIZE ADJUSTMENT */
1024 /*======================*/
1026 #text-size-adjustment-ui button {
1030 /*=============================*/
1031 /* COMMENTS VIEW MODE SELECTOR */
1032 /*=============================*/
1034 #comments-view-mode-selector a {
1043 #keyboard-help-overlay {
1046 #keyboard-help-overlay .keyboard-help-container h1 {
1047 padding
: 15px
20px
5px
20px
;
1049 #nav-item-about button.open-keyboard-help {
1060 border
: 1px solid transparent
;
1061 margin
: 1.25em
0 0 0;
1064 .archive
-nav
*[class^
='archive-nav-item'] {
1065 color
: <?php
echo $hyperlink_color; ?
>;
1066 border
-style
: solid
;
1067 border
-color
: #c4dbc4;
1068 border
-width
: 1px
0 1px
1px
;
1070 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
1071 border
-top
-width
: 0;
1072 border
-bottom
-width
: 0;
1074 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
1075 border
-bottom
-width
: 1px
;
1077 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
1078 border
-right
-width
: 1px
;
1080 .archive
-nav a
:hover
,
1081 .archive
-nav span
[class^
='archive-nav-item'] {
1082 background
-color
: #c4dbc4;
1086 .archive
-nav a
:active
{
1087 background
-color
: <?php
echo $hyperlink_color; ?
>;
1095 #content.search-results-page h1.listing {
1096 margin
: 0.7em
20px
0.1em
0;
1097 max
-width
: calc(100%
- 20px
);
1098 font
-family
: <?php
echo $headings_font; ?
>, 'Font Awesome';
1103 h1
.listing
.link
-post
-link
{
1106 font
-size
: 0.8125em
;
1109 h1
.listing
.post
-title
-link
{
1111 text
-shadow
: <?php
global $platform; echo ($platform == 'Mac' ?
'none' : '0 0 0 #444'); ?
>;
1112 color
: <?php
global $platform; echo ($platform == 'Mac' ?
'#444' : '#000'); ?
>;
1114 @-moz
-document url
-prefix() {
1115 h1
.listing
.post
-title
-link
{
1119 @media not all
and (min
-resolution
:.001dpcm
) { @media
{
1120 h1
.listing
.post
-title
-link
{
1125 @media only screen
and (hover
: hover
) {
1127 h1
.listing a
:focus
{
1129 background
-color
: rgba(255,255,255,0.85);
1131 h1
.listing
:focus
-within
::before
{
1136 h1
.listing
.link
-post
-link
:hover
{
1139 h1
.listing
.link
-post
-link
:focus
{
1141 text
-decoration
: none
;
1142 border
-bottom
: 2px dotted
#a0d3a2;
1146 h1
.listing
.edit
-post
-link
{
1147 padding
: 5px
3px
24px
0.5em
;
1151 h1
.listing
.edit
-post
-link
:hover
{
1152 text
-decoration
: none
;
1154 #content.user-page h1.listing .edit-post-link {
1155 background
-color
: #fff;
1165 h1
.listing
.spam +
.post
-meta
{
1168 h1
.listing
.spam
:hover
,
1169 h1
.listing
.spam +
.post
-meta
:hover
,
1170 h1
.listing
.spam
:hover +
.post
-meta
{
1174 /*===================*/
1175 /* LISTING POST-META */
1176 /*===================*/
1178 h1
.listing +
.post
-meta
{
1179 font
-size
: 0.875rem
;
1180 margin
: 0 20px
0 1px
;
1183 h1
.listing +
.post
-meta
> * {
1185 margin
: 0 1.25em
0 0;
1187 h1
.listing +
.post
-meta a
{
1190 h1
.listing +
.post
-meta a
:hover
{
1193 h1
.listing +
.post
-meta
.karma
-value
{
1196 h1
.listing +
.post
-meta
.lw2
-link
{
1199 h1
.listing +
.post
-meta
.post
-section
{
1203 h1
.listing +
.post
-meta
.post
-section
::before
{
1213 #content.user-page h1.page-main-heading,
1214 #content.user-page .user-stats {
1217 #content.user-page #comments-list-mode-selector,
1218 #content.user-page .sublevel-nav.sort {
1219 grid
-row
: 2 / span
2;
1221 #content.user-page .sublevel-nav {
1225 #content.user-page #top-nav-bar {
1229 #content.user-page h1.page-main-heading,
1230 #content.conversation-page h1.page-main-heading {
1231 font
-family
: <?php
echo $headings_font; ?
>;
1232 font
-weight
: normal
;
1233 margin
: 0.5em
0 0 0;
1235 #content.user-page h1.page-main-heading {
1236 border
-bottom
: 1px solid
#e6e6e6;
1240 #content.user-page h1.listing,
1241 #content.user-page h1.listing + .post-meta {
1243 border
-style
: solid
;
1245 #content.user-page h1.listing {
1247 padding
: 6px
8px
0 8px
;
1248 border
-width
: 1px
1px
0 1px
;
1251 #content.own-user-page h1.listing,
1252 h1
.listing
.own
-post
-listing
{
1253 padding
-right
: 36px
;
1255 @media only screen
and (hover
: hover
) {
1256 #content.user-page h1.listing:focus-within::before {
1260 #content.user-page h1.listing + .post-meta {
1262 padding
: 12px
8px
3px
8px
;
1263 border
-width
: 0 1px
1px
1px
;
1267 #content.conversations-user-page h1.listing {
1268 padding
: 8px
6px
28px
10px
;
1271 #content.conversations-user-page h1.listing + .post-meta {
1272 padding
: 4px
10px
0.5em
6px
;
1276 .user
-stats
.karma
-total
{
1288 .login
-container form h1
{
1289 font
-family
: <?php
echo $headings_font; ?
>;
1293 .login
-container form label
{
1297 /* “Create account” form */
1300 border
: 1px solid
#e4e4e4;
1302 #signup-form input[type='submit'] {
1303 padding
: 8px
12px
6px
12px
;
1308 .login
-container
.login
-tip
{
1309 border
: 1px solid
#eee;
1315 border
: 1px solid red
;
1316 background
-color
: #faa;
1319 border
: 1px solid green
;
1320 background
-color
: #afa;
1323 /*=====================*/
1324 /* PASSWORD RESET PAGE */
1325 /*=====================*/
1327 .reset
-password
-container input
[type
='submit'] {
1328 background
-color
: #e4e4e4;
1329 border
: 1px solid
#ccc;
1333 /*===================*/
1334 /* TABLE OF CONTENTS */
1335 /*===================*/
1338 font
-family
: <?php
echo $UI_font; ?
>;
1341 background
-color
: #fff;
1343 .body
-text
.contents ul
{
1344 font
-size
: 0.8125em
;
1346 .body
-text
.contents li
::before
{
1350 .contents
.toc
-collapse
-toggle
-button
{
1353 box
-shadow
: 0 0 0 1px transparent
;
1355 .contents
.toc
-collapse
-toggle
-button
:hover
{
1357 text
-shadow
: <?php
echo $white_glow; ?
>;
1360 /*==================*/
1361 /* POSTS & COMMENTS */
1362 /*==================*/
1365 font
-family
: <?php
echo $text_font; ?
>;
1366 text
-shadow
: <?php
global $platform; echo ($platform == 'Mac' ?
'0 0 0 rgba(0,0,0,0.7)' : 'none'); ?
>;
1367 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'300' : '400'); ?
>;
1385 font
-family
: <?php
echo $headings_font; ?
>;
1388 margin
: 1.375em
0 0.5em
0;
1391 /*=================*/
1392 /* POST NAVIGATION */
1393 /*=================*/
1396 padding
: 0 0 0 10px
;
1399 @media only screen
and (max
-width
: 900px
) {
1404 border
-top
: 1px solid
#ddd;
1405 padding
: 0.375em
0.5em
0.125em
0.5em
1408 border
-right
: 1px solid
#ddd;
1411 border
-left
: 1px solid
#ddd;
1419 .post
-meta
.post
-section
::before
,
1420 .comment
-meta
.alignment
-forum
{
1425 .post
-meta
.post
-section
.alignment
-forum
::before
{
1428 .post
.post
-meta
.post
-section
::before
{
1433 a
.post
-section
::before
{
1434 transition
: color
0.15s ease
;
1436 a
.post
-section
:hover
::before
{
1439 a
.post
-section
.alignment
-forum
:hover
::before
{
1447 .post
-meta a
:visited
{
1450 .post
-meta a
:hover
{
1453 .post
-meta
.lw2
-link
:hover
{
1457 .post
.top
-post
-meta
{
1461 .post
.top
-post
-meta
.karma
,
1462 .post
.top
-post
-meta
.author
,
1463 .post
.top
-post
-meta
.qualified
-linking
{
1466 <?php
fit_content(".post .top-post-meta .karma, .post .top-post-meta .author, .post .top-post-meta .qualified-linking"); ?
>
1468 .post
.top
-post
-meta
.karma
{
1473 .post
.top
-post
-meta
.karma
.karma
-value
{
1478 background
-color
: #fff;
1481 .post
.top
-post
-meta
.karma
.karma
-value
::before
{
1485 background
-color
: #ccc;
1492 .post
.top
-post
-meta
.karma
.karma
-value span
{
1496 .post
.post
-meta
.karma
.active
-controls
::after
{
1500 .post
.post
-meta
.karma
.active
-controls
:hover
::after
{
1503 .post
.top
-post
-meta
.karma
.active
-controls
::after
{
1505 left
: calc(100% +
16px
);
1508 white
-space
: nowrap
;
1510 .post
.post
-meta
.karma
.karma
-value
::after
{
1513 .post
.post
-meta
.karma
.karma
-value
:hover
::after
{
1516 .post
.top
-post
-meta
.karma
.karma
-value
::after
{
1520 right
: calc(100% +
8px
);
1523 .post
.top
-post
-meta
.author
{
1525 margin
: 0.25em auto
;
1527 .post
.top
-post
-meta
.qualified
-linking
{
1530 .post
.top
-post
-meta
.qualified
-linking label
{
1534 .post
.top
-post
-meta
.post
-section
,
1535 .post
.top
-post
-meta
.lw2
-link
{
1539 .post
.top
-post
-meta
.date
,
1540 .post
.top
-post
-meta
.comment
-count
{
1544 .post
.top
-post
-meta
.date
{
1545 top
: calc(100% +
34px
);
1547 .post
.top
-post
-meta
.comment
-count
{
1548 top
: calc(100% +
60px
);
1550 .post
.top
-post
-meta
.date
> span
,
1551 .post
.top
-post
-meta
.comment
-count
> span
{
1553 transform
: translateX(-100%
);
1556 .post
.bottom
-post
-meta
{
1557 padding
: 1.5em
0 1em
0;
1558 margin
: 0.5em
0 0 0;
1560 border
-color
: transparent
;
1562 .post
.bottom
-post
-meta
::before
,
1563 .post
.bottom
-post
-meta
::after
{
1567 background
-color
: #ddd;
1569 width
: calc(100%
- 60px
);
1571 .post
.bottom
-post
-meta
::before
{
1574 .post
.bottom
-post
-meta
::after
{
1578 @media only screen
and (max
-width
: 520px
) {
1579 .post
.bottom
-post
-meta
{
1580 padding
: 0.75em
0 0.125em
0;
1588 .post
.link
-post a
.link
-post
-link
{
1589 font
-family
: <?php
echo $UI_font; ?
>;
1591 .post
.link
-post a
.link
-post
-link
::before
{
1594 .post
.link
-post a
.link
-post
-link
:hover
::before
{
1597 .post
.link
-post a
.link
-post
-link
:focus
{
1599 border
-bottom
: 2px dotted
#79a97e;
1607 border
-top
: 1px solid
#ddd;
1611 padding
: 0 0 0 10px
;
1613 #content > .comment-thread .comment-meta a.date:focus,
1614 #content > .comment-thread .comment-meta a.permalink:focus {
1616 outline
: 1px dotted
#999;
1618 background
-color
: #fff;
1622 #content > .comment-thread .comment-meta a.date:focus + *,
1623 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1626 #content > .comment-thread .comment-meta a.permalink:focus {
1627 outline
: 2px dotted
#999;
1630 border
: 1px solid
#ddd;
1631 background
-color
: var(--GW
-comment
-background
-color
);
1633 .comment
-parent
-link
::after
{
1635 0 28px
16px
-16px
var(--GW
-comment
-parent
-background
-color
) inset
,
1636 4px
16px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
,
1637 4px
4px
0 12px
var(--GW
-comment
-background
-color
-target
) inset
;
1641 font
-size
: 1.1875rem
;
1643 #content.user-page .comment-body,
1644 #content.index-page .comment-body {
1645 font
-size
: 1.125rem
;
1648 /*================================*/
1649 /* DEEP COMMENT THREAD COLLAPSING */
1650 /*================================*/
1652 .comment
-item input
[id^
="expand"] + label
::after
{
1653 color
: <?php
echo $hyperlink_color; ?
>;
1656 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
1659 .comment
-item input
[id^
="expand"] + label
:active
::after
,
1660 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
1663 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
1664 border
-width
: 1px
0 0 0;
1678 .comment
-meta a
:visited
{
1681 .comment
-meta a
:hover
{
1684 .comment
-meta
.author
{
1686 font
-weight
: normal
;
1689 .comment
-controls
.voting
-controls
{
1693 .comment
-item
.voting
-controls
.active
-controls
::after
,
1694 .comment
-item
.voting
-controls
.karma
-value
::after
,
1696 background
-color
: #fff;
1699 box
-shadow
: 0 0 0 1px
#eee inset;
1701 .comment
-item
.voting
-controls
.active
-controls
::after
{
1702 padding
: 6px
4px
4px
4px
;
1705 .comment
-item
.voting
-controls
.karma
-value
::after
{
1706 padding
: 4px
8px
0 8px
;
1710 /*====================*/
1711 /* ANTI-KIBITZER MODE */
1712 /*====================*/
1715 .inline
-author
.redacted
{
1720 .karma
-value
.redacted
{
1724 .link
-post
-domain
.redacted
{
1728 /*===========================*/
1729 /* COMMENT THREAD NAVIGATION */
1730 /*===========================*/
1732 div
.comment
-parent
-link
{
1735 a
.comment
-parent
-link
{
1738 a
.comment
-parent
-link
::before
{
1742 a
.comment
-parent
-link
:hover
::before
{
1743 background
-color
: #ffd;
1747 div
.comment
-child
-links
{
1750 div
.comment
-child
-links a
{
1753 .comment
-child
-link
::before
{
1757 .comment
-item
-highlight
{
1764 border
: 1px solid
#e7b200;
1766 .comment
-item
-highlight
-faint
{
1773 border
: 1px solid
#f8e7b5;
1777 background
-color
: #fff;
1780 /*====================*/
1781 /* COMMENT PERMALINKS */
1782 /*====================*/
1784 .comment
-meta
.permalink
::before
{
1785 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-blue-on-white.gif")) ?>');
1787 .comment
-meta
.lw2
-link
::before
{
1788 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-blue-on-white.gif")) ?>');
1790 .individual
-thread
-page a
.comment
-parent
-link
:empty::before
{
1791 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-blue-on-white.gif")) ?>');
1793 .comment
-meta
.permalink
:hover
::before
{
1794 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-white-on-blue.gif")) ?>');
1796 .comment
-meta
.lw2
-link
:hover
::before
{
1797 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-white-on-blue.gif")) ?>');
1799 .individual
-thread
-page a
.comment
-parent
-link
:hover
:empty::before
{
1801 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-white-on-blue.gif")) ?>');
1804 .comment
-meta
.permalink
,
1805 .comment
-meta
.lw2
-link
,
1806 .individual
-thread
-page
.comment
-parent
-link
:empty {
1807 filter
: hue
-rotate(270deg
);
1810 .comment
-meta
.permalink
:hover
,
1811 .comment
-meta
.lw2
-link
:hover
,
1812 .individual
-thread
-page
.comment
-parent
-link
:empty:hover
{
1816 /*=======================*/
1817 /* COMMENTS COMPACT VIEW */
1818 /*=======================*/
1820 #comments-list-mode-selector {
1822 transition
: opacity
0.15s ease
;
1824 #content.index-page #comments-list-mode-selector {
1828 #comments-list-mode-selector:hover {
1832 #comments-list-mode-selector button {
1834 background
-color
: transparent
;
1836 0 0 0 4px
#fff inset,
1837 0 0 0 5px
#aaa inset;
1839 #comments-list-mode-selector button:hover,
1840 #comments-list-mode-selector button.selected {
1842 0 0 0 1px
#fff inset,
1843 0 0 0 2px
#aaa inset,
1844 0 0 0 4px
#fff inset,
1845 0 0 0 5px
#aaa inset;
1848 #content.compact > .comment-thread .comment-item {
1851 #content.compact > .comment-thread .comment-item::after {
1852 color
: <?php
echo $hyperlink_color; ?
>;
1853 background
: linear
-gradient(to right
, transparent
0%
, #fff 50%, #fff 100%);
1856 @media only screen
and (hover
: hover
) {
1857 #content.compact > .comment-thread .comment-item:hover .comment,
1858 #content.compact > .comment-thread .comment-item.expanded .comment {
1859 background
-color
: #fff;
1860 outline
: 1px solid
#92c396;
1862 #content.compact > .comment-thread .comment-item:hover .comment::before,
1863 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1864 background
-color
: #fff;
1875 @media only screen
and (hover
: none
) {
1876 #content.compact > .comment-thread.expanded .comment-item .comment {
1877 background
-color
: #fff;
1878 outline
: 1px solid
#92c396;
1880 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1881 background
-color
: #fff;
1892 #content.compact > .comment-thread .comment-item:hover .comment {
1893 background
-color
: #fff;
1894 outline
: 1px solid
#92c396;
1896 #content.compact > .comment-thread .comment-item:hover .comment::before {
1897 background
-color
: #fff;
1908 #content.user-page.compact > h1.listing {
1911 #content.user-page.compact > h1.listing + .post-meta {
1912 margin
-bottom
: 1rem
;
1915 /*===========================*/
1916 /* HIGHLIGHTING NEW COMMENTS */
1917 /*===========================*/
1919 .new-comment
::before
{
1920 outline
: 1px solid
#5a5;
1922 0 0 6px
-2px
#5a5 inset,
1926 /*=================================*/
1927 /* COMMENT THREAD MINIMIZE BUTTONS */
1928 /*=================================*/
1930 .comment
-minimize
-button
{
1933 box
-shadow
: 0 0 0 1px transparent
;
1935 .comment
-minimize
-button
:hover
{
1937 text
-shadow
: <?php
echo $white_glow; ?
>;
1939 .comment
-minimize
-button
::after
{
1940 font
-family
: <?php
echo $UI_font; ?
>;
1943 .comment
-minimize
-button
.maximized
::after
{
1947 /*=================================*/
1948 /* INDIVIDUAL COMMENT THREAD PAGES */
1949 /*=================================*/
1951 .individual
-thread
-page
> h1
{
1952 margin
: 2em
0 0 30px
;
1954 font
-family
: <?php
echo $headings_font; ?
>;
1956 .individual
-thread
-page
> .comments
{
1957 padding
: 0 0 0 30px
;
1959 .individual
-thread
-page
> #bottom-bar.decorative::before {
1960 margin
: 0 30px
0 60px
;
1978 .karma
.upvote
::before
{
1982 .karma
.downvote
::before
{
1986 .karma
.upvote
::after
{
1991 .karma
.downvote
::after
{
1996 @-moz
-document url
-prefix() {
1997 .karma
.upvote
::after
{
2001 .karma
.downvote
::after
{
2007 .agreement
.upvote
::before
{
2011 .agreement
.downvote
::before
{
2015 .agreement
.upvote
::after
{
2020 .agreement
.downvote
::after
{
2025 @-moz
-document url
-prefix() {
2026 .agreement
.upvote
::after
{
2030 .agreement
.downvote
::after
{
2050 .upvote
:not(.none
) {
2051 color
: var(--GW
-upvote
-button
-color
);
2057 .downvote
:not(.none
) {
2058 color
: var(--GW
-downvote
-button
-color
);
2072 .vote
.two
-temp
::after
,
2074 visibility
: visible
;
2079 .vote
.two
-temp
::after
{
2090 .post
.vote
:disabled
{
2093 .vote
:disabled
:hover
{
2097 .post
.top
-post
-meta
.downvote
::before
{
2100 .post
.top
-post
-meta
.upvote
::after
,
2101 .post
.top
-post
-meta
.downvote
::after
{
2104 .post
.top
-post
-meta
.downvote
::after
{
2108 /*===========================*/
2109 /* COMMENTING AND POSTING UI */
2110 /*===========================*/
2112 .posting
-controls input
[type
='submit'] {
2113 padding
: 6px
12px
3px
12px
;
2117 margin
: 0 4px
4px
16px
;
2119 .comment +
.comment
-controls
.action
-button
{
2123 .new-comment
-button
{
2128 .comment
-controls
.cancel
-comment
-button
{
2133 padding
: 6px
8px
1px
4px
;
2135 .comment
-controls
.cancel
-comment
-button
:hover
{
2139 .comment
-controls
.delete
-button
,
2140 .comment
-controls
.retract
-button
{
2143 .comment
-controls
.delete
-button
::before
,
2144 .comment
-controls
.unretract
-button
::before
{
2147 .comment
-controls
.retract
-button
::before
{
2150 .comment
-controls
.edit
-button
,
2151 .comment
-controls
.unretract
-button
{
2154 .comment
-controls
.edit
-button
::before
{
2157 .comment
-controls
.action
-button
:hover
{
2159 text
-shadow
: 0 0 0.5px
#faa;
2163 margin
: 3em
2.5em
0 0;
2170 .edit
-post
-link
:visited
{
2174 .posting
-controls textarea
{
2175 font
-family
: <?php
echo $text_font; ?
>;
2178 text
-shadow
: 0 0 0 #000;
2180 transition
: border
-color
0.15s ease
;
2182 .posting
-controls textarea
:focus
{
2183 border
-width
: 29px
1px
1px
1px
;
2184 border
-color
: #92c396;
2186 .posting
-controls
.edit
-existing
-post textarea
:focus
,
2187 .posting
-controls form
.edit
-existing
-comment textarea
:focus
{
2193 .posting
-controls textarea
::-webkit
-scrollbar
,
2194 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
{
2196 background
-color
: transparent
;
2198 .posting
-controls textarea
::-webkit
-scrollbar
-track
,
2199 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-track
{
2200 background
-color
: #fff;
2202 .posting
-controls textarea
::-webkit
-scrollbar
-thumb
{
2203 background
-color
: #eee;
2204 box
-shadow
: 0 0 0 1px
#fff inset;
2206 .posting
-controls textarea
:focus
::-webkit
-scrollbar
-thumb
,
2207 .textarea
-container
.autocomplete
-container
::-webkit
-scrollbar
-thumb
{
2208 background
-color
: #c4dbc4;
2209 box
-shadow
: 0 0 0 1px
#fff inset;
2212 /* GUIEdit buttons */
2214 .guiedit
-buttons
-container
{
2215 background
-color
: #fff;
2216 border
-bottom
: 1px solid
#eee;
2219 .posting
-controls
.edit
-existing
-post
.guiedit
-buttons
-container button
,
2220 .posting
-controls form
.edit
-existing
-comment
.guiedit
-buttons
-container button
{
2223 .guiedit
-buttons
-container button
{
2224 font
-family
: Font Awesome
, <?php
echo $text_font; ?
>;
2225 border
: 1px solid transparent
;
2229 font
-family
: <?php
echo $UI_font; ?
>;
2232 text
-shadow
: 0 0 0 #999;
2236 .posting
-controls
.markdown
-reference
-link a
{
2237 background
-position
: right
70%
;
2239 .markdown
-reference
-link
{
2243 /* Markdown hints */
2245 #markdown-hints-checkbox + label {
2246 color
: <?php
echo $hyperlink_color; ?
>;
2248 #markdown-hints-checkbox + label:hover {
2252 border
: 1px solid
#faa;
2253 background
-color
: #fff;
2255 #markdown-hints .markdown-hints-row span,
2256 #markdown-hints .markdown-hints-row code {
2257 padding
: 2px
12px
2px
2px
;
2260 /*================*/
2261 /* EDIT POST FORM */
2262 /*================*/
2264 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2267 transition
: color
0.15s ease
;
2269 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover {
2272 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2274 border
: 1px solid
#eee;
2277 box
-shadow
0.3s ease
,
2278 border
-color
0.15s ease
;
2280 @media only screen
and (hover
:hover
) {
2281 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before {
2282 border
-color
: #c4dbc4;
2285 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
2286 border
-color
: #c4dbc4;
2288 0 0 0 4px
#fff inset,
2289 0 0 0 1em
#c4dbc4 inset;
2292 #edit-post-form label[for='url'],
2293 #edit-post-form input[name='url'] {
2296 max
-height
0.15s ease
,
2297 overflow
0.15s ease
,
2298 margin
-top
0.15s ease
,
2299 margin
-bottom
0.15s ease
,
2301 border
-color
0.15s ease
;
2304 #edit-post-form .link-post-checkbox:not(:checked) ~ label[for='url'],
2305 #edit-post-form .link-post-checkbox:not(:checked) ~ input[name='url'] {
2311 border
-color
: transparent
;
2314 #edit-post-form label[for='title'],
2315 #edit-post-form label[for='url'],
2316 #edit-post-form label[for='section'] {
2318 text
-shadow
: 0 0 0 #aaa;
2321 #edit-post-form input[type='radio'] + label {
2323 border
-color
: #c4dbc4;
2324 padding
: 6px
12px
3px
12px
;
2328 background
-color
0.15s ease
,
2330 border
-color
0.15s ease
;
2332 #edit-post-form input[type='radio'][value='all'] + label {
2333 border
-radius
: 8px
0 0 8px
;
2336 #edit-post-form input[type='radio'][value='drafts'] + label {
2337 border
-radius
: 0 8px
8px
0;
2338 padding
-right
: 13px
;
2340 #edit-post-form input[type='radio'] + label:hover,
2341 #edit-post-form input[type='radio']:focus + label,
2342 #edit-post-form input[type='radio']:checked + label {
2343 background
-color
: #c4dbc4;
2346 #edit-post-form input[type='radio']:active + label {
2347 border
-color
: #92c396;
2348 background
-color
: #92c396;
2351 #edit-post-form input[type='submit'] {
2352 padding
: 7px
14px
4px
14px
;
2360 text
-decoration
: none
;
2361 color
: <?php
echo $hyperlink_color; ?
>;
2362 transition
: color
0.15s ease
;
2376 input
[type
='submit'] {
2379 input
[type
='submit'] {
2381 background
-color
: #fff;
2382 border
: 1px solid
#c4dbc4;
2385 background
-color
0.15s ease
,
2386 border
-color
0.15s ease
;
2389 input
[type
='submit']:hover
,
2390 input
[type
='submit']:focus
{
2391 background
-color
: #c4dbc4;
2394 input
[type
='submit']:active
{
2395 background
-color
: #92c396;
2396 border
-color
: #92c396;
2404 text
-decoration
: none
;
2408 transform
: scale(0.9);
2410 button
:focus
:not(:hover
),
2411 .button
:focus
:not(:hover
) {
2414 @-moz
-document url
-prefix() {
2430 font
-family
: <?php
echo $headings_font; ?
>;
2436 0 -7px
0 0 #fff inset,
2437 0 -8px
0 0 #eee inset;
2448 border
-left
: 5px solid
#e6e6e6;
2456 #content figure.image img {
2457 border
: 1px solid
#ccc;
2459 #content figure img {
2460 border
: 1px solid
#000;
2462 #content img[src$='.svg'],
2463 #content figure img[src$='.svg'] {
2466 #content img[style^='float'] {
2467 border
: 1px solid transparent
;
2470 #images-overlay div::after {
2472 padding
: 10px
12px
6px
12px
;
2479 #image-focus-overlay {
2480 visibility
: visible
;
2483 #image-focus-overlay .caption p {
2484 margin
: 1em
1.25em
0.875em
1.25em
;
2497 letter
-spacing
: 7px
;
2506 font
-family
: 'Source Code Pro', Inconsolata
, monospace
;
2507 font
-size
: 0.9375em
;
2508 font
-feature
-settings
: 'ss04';
2511 background
-color
: #eee;
2512 padding
: 0 5px
1px
5px
;
2513 box
-shadow
: 0 0 0 1px
#fff inset;
2517 input
[type
='search'],
2518 input
[type
='password'] {
2519 border
: 1px solid
#999;
2521 background
-color
: transparent
;
2522 border
-color
: transparent
;
2523 border
-bottom
-color
: #eee;
2524 transition
: border
-color
0.15s ease
;
2526 input
[type
='text']:focus
,
2527 input
[type
='search']:focus
,
2528 input
[type
='password']:focus
{
2529 border
-bottom
-color
: #c4dbc4;
2545 background
-color
: #e6e6e6;
2546 text
-decoration
: none
;
2548 0 -1px
0 0 #000 inset,
2549 0 -3px
1px
-2px
#000 inset;
2553 #content.about-page .accesskey-table {
2554 font
-family
: <?php
echo $UI_font; ?
>;
2558 #content.about-page img {
2559 border
: 1px solid
#000;
2562 /*========================*/
2563 /* QUALIFIED HYPERLINKING */
2564 /*========================*/
2566 #content.no-nav-bars ~ #ui-elements-container #site-nav-ui-toggle {
2569 #content.no-comments ~ #ui-elements-container #post-nav-ui-toggle {
2576 #aux-about-link a:hover {
2578 text
-shadow
: 0 0 1px
#fff, 0 0 3px #fff, 0 0 5px #fff;
2581 .qualified
-linking label
{
2585 .qualified
-linking label
:hover
{
2589 .qualified
-linking
-toolbar
{
2590 border
: 1px solid
#ccc;
2591 background
-color
: #fff;
2593 .qualified
-linking
-toolbar a
{
2594 padding
: 3px
6px
0 6px
;
2596 .qualified
-linking
-toolbar a
,
2597 .qualified
-linking
-toolbar a
:visited
{
2600 .qualified
-linking
-toolbar a
:hover
{
2602 text
-decoration
: none
;
2603 background
-color
: #e4f1e5;
2605 .qualified
-linking label
::after
{
2606 background
-color
: #fff;
2614 .mathjax
-block
-container
::-webkit
-scrollbar
{
2616 background
-color
: #f6f6ff;
2618 border
: 1px solid
#ddf;
2620 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
2621 background
-color
: #dde;
2623 border
: 1px solid
#cce;
2625 .mathjax
-inline
-container
::-webkit
-scrollbar
{
2627 background
-color
: #f6f6ff;
2629 border
: 1px solid
#ddf;
2631 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
2632 background
-color
: #dde;
2634 border
: 1px solid
#cce;
2642 .textarea
-container
.autocomplete
-container
{
2643 background
-color
: rgba(255, 255, 255, 0.75);
2644 border
: 1px solid
rgba(196, 219, 196, 0.75);
2647 .textarea
-container
.autocomplete
-container div
.highlighted
{
2648 background
-color
: rgba(196, 219, 196, 0.75);
2650 padding
: 4px
8px
0 8px
;
2654 .textarea
-container
.autocomplete
-container div
:not(.highlighted
):hover
{
2655 background
-color
: rgba(196, 219, 196, 0.35);
2658 .textarea
-container
.autocomplete
-container div span
.age
,
2659 .textarea
-container
.autocomplete
-container div span
.karma
{
2664 /*=================*/
2665 /* ALIGNMENT FORUM */
2666 /*=================*/
2668 #content.alignment-forum-index-page::after {
2669 margin
: -0.25em
0 0.25em
0;
2672 font
-family
: "Concourse SmallCaps";
2674 background
-color
: #7f85b2;
2676 -webkit
-background
-clip
: text
;
2678 rgba(255,255,255,0.5) 0px
3px
3px
;
2681 /*====================*/
2682 /* FOR NARROW SCREENS */
2683 /*====================*/
2685 @media not screen
and (hover
: none
) {
2686 @media only screen
and (max
-width
: 1080px
) {
2687 #site-nav-ui-toggle button.engaged {
2690 #text-size-adjustment-ui {
2692 top
: calc(100%
- 240px
);
2696 top
: calc(100%
- 140px
);
2698 #theme-tweaker-toggle button {
2703 @media only screen
and (max
-width
: 1020px
) {
2705 @media only screen
and (max
-width
: 1000px
) {
2706 #site-nav-ui-toggle button.engaged {
2712 #theme-selector button {
2713 margin
: 1px
7px
0 7px
;
2722 /*******************************************/
2723 @media only screen
and (max
-width
: 1160px
) {
2724 /*******************************************/
2726 #site-nav-ui-toggle {
2730 #site-nav-ui-toggle button.engaged {
2737 #site-nav-ui-toggle button.engaged::before {
2740 padding
: 0 0.25em
0 0;
2742 #ui-elements-container > #site-nav-ui-toggle button.engaged {
2743 transform
: rotate(90deg
);
2746 #ui-elements-container > div[id$='-ui-toggle'] button,
2747 #theme-selector .theme-selector-close-button {
2757 #ui-elements-container > div[id$='-ui-toggle'] button {
2760 #theme-selector .theme-selector-close-button {
2765 background
-color
: #fff;
2773 border
-radius
: 12px
;
2775 #theme-selector::before {
2781 #theme-selector button,
2782 #theme-selector button.selected {
2783 background
-color
: #fff;
2784 border
-radius
: 10px
;
2786 0 0 0 4px
#fff inset,
2787 0 0 0 5px
#999 inset;
2789 #theme-selector button.selected {
2790 background
-color
: #c4dbc4;
2792 #theme-selector button::after {
2795 max
-width
: calc(100%
- 3.5em
);
2797 text
-overflow
: ellipsis
;
2800 #theme-selector button.selected::after {
2804 #theme-tweaker-toggle button {
2809 #theme-selector .auxiliary-controls-container {
2810 border
-top
-color
: #aaa;
2812 #theme-selector .auxiliary-controls-container button {
2814 border
: 1px solid
#999;
2816 #theme-selector #theme-tweaker-toggle button {
2819 #theme-selector #anti-kibitzer-toggle button::before,
2820 #theme-selector #anti-kibitzer-toggle button::after {
2824 #theme-selector #anti-kibitzer-toggle button::before {
2828 #theme-selector #anti-kibitzer-toggle button::after {
2831 #theme-selector #dark-mode-selector {
2832 border
: 1px solid
#999;
2834 #theme-selector #dark-mode-selector button {
2837 #theme-selector #dark-mode-selector button.selected {
2838 background
-color
: #c4dbc4;
2841 #theme-selector #dark-mode-selector button + button {
2845 #theme-selector #dark-mode-selector button:first-child.selected {
2846 border
-radius
: 10px
0 0 10px
;
2848 #theme-selector #dark-mode-selector button:last-child.selected {
2849 border
-radius
: 0 10px
10px
0;
2851 #theme-selector #dark-mode-selector button.selected::after {
2852 text
-shadow
: 0 0 1px
#fff;
2856 background
-color
: #fff;
2859 #new-comment-nav-ui,
2868 #quick-nav-ui a::after,
2869 #new-comment-nav-ui::before {
2870 font
-family
: <?php
echo $UI_font; ?
>;
2876 background
-color
: #fff;
2880 #new-comment-nav-ui {
2883 #new-comment-nav-ui {
2884 background
-color
: #fff;
2885 border
: 1px solid
#fff;
2887 #new-comment-nav-ui::before {
2891 #new-comment-nav-ui .new-comment-sequential-nav-button {
2894 #new-comment-nav-ui .new-comments-count {
2895 background
-color
: inherit
;
2898 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2901 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2902 border
-radius
: 7px
0 0 7px
;
2904 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2905 border
-radius
: 0 7px
7px
0;
2907 #new-comment-nav-ui button::after {
2908 font
-family
: <?php
echo $UI_font; ?
>;
2911 background
-color
: #fff;
2912 border
: 1px solid
#fff;
2916 padding
: 1.25em
0 0.25em
0;
2917 font
-size
: 1.625rem
;
2922 #top-nav-bar .page-number {
2925 #top-nav-bar .page-number span {
2928 #top-nav-bar a.disabled {
2932 /*****************************************/
2933 @media only screen
and (max
-width
: 900px
) {
2934 /*****************************************/
2935 #theme-less-mobile-first-row-placeholder {
2937 grid
-column
: 2 / span
2;
2952 padding
: 5px
0 5px
0;
2954 background
-color
: #fff;
2955 border
-bottom
: 1px solid
#ddd;
2956 box
-shadow
: 0 0 0 1px
#fff;
2960 visibility
0.2s ease
,
2965 #primary-bar.engaged {
2967 visibility
: visible
;
2968 padding
: 5px
4px
75px
60px
;
2970 #secondary-bar #nav-item-archive,
2971 #secondary-bar #nav-item-sequences,
2972 #secondary-bar #nav-item-about {
2978 #secondary-bar.engaged #nav-item-archive,
2979 #secondary-bar.engaged #nav-item-sequences,
2980 #secondary-bar.engaged #nav-item-about {
2987 #secondary-bar.engaged #nav-item-archive {
2990 #secondary-bar.engaged #nav-item-sequences {
2993 #secondary-bar.engaged #nav-item-about {
2997 #primary-bar.engaged.translucent-on-scroll,
2998 #secondary-bar.engaged.translucent-on-scroll #nav-item-archive,
2999 #secondary-bar.engaged.translucent-on-scroll #nav-item-sequences,
3000 #secondary-bar.engaged.translucent-on-scroll #nav-item-about,
3001 .page
-toolbar
.engaged
.translucent
-on
-scroll
{
3004 pointer
-events
: none
;
3019 .page
-toolbar
.engaged
{
3023 #content:not(.user-page) .page-toolbar {
3026 justify
-content
: flex
-end
;
3035 .page
-toolbar
> form
,
3036 .page
-toolbar
> .button
{
3041 .page
-toolbar
.button
{
3042 text
-transform
: uppercase
;
3043 font
-size
: 0.625rem
;
3045 .page
-toolbar
.button
::before
,
3046 #content.user-page .page-toolbar .button::before,
3047 .page
-toolbar form
::before
,
3048 #content.user-page .page-toolbar form::before {
3049 font
-size
: 1.375rem
;
3052 font
-size
: 1.375rem
;
3055 .page
-toolbar
.rss
{
3056 white
-space
: nowrap
;
3060 padding
: 6px
10px
5px
10px
;
3062 background
-color
: #fff;
3063 border
-style
: solid
;
3065 border
-width
: 0 1px
1px
0;
3069 transition
: left
0.2s ease
;
3072 #content.user-page .page-toolbar .rss {
3075 .page
-toolbar
.engaged
.rss
{
3076 visibility
: visible
;
3080 #primary-bar .nav-inner {
3083 #secondary-bar .nav-inner {
3086 #secondary-bar .nav-item:not(#nav-item-search) .nav-inner {
3091 max
-width
: calc(100%
- 180px
);
3095 #nav-item-search input {
3096 width
: calc(100%
- 32px
);
3098 #nav-item-search button {
3101 visibility
: visible
;
3104 padding
: 9px
15px
3px
5px
;
3106 #nav-item-search form:not(:focus-within) button:not(:hover) {
3109 #nav-item-search button::before {
3117 #nav-item-login .nav-inner {
3118 text
-transform
: none
;
3121 #nav-item-login .nav-inner::before {
3124 #inbox-indicator::before {
3129 #bottom-bar .nav-inner {
3130 padding
: 1rem
0 1.25rem
0;
3132 #bottom-bar .nav-inner::after {
3136 #content.search-results-page #comments-list-mode-selector {
3143 #content.comment-thread-page {
3147 h1
.listing +
.post
-meta
> * {
3150 h1
.listing +
.post
-meta
.post
-section
{
3155 h1
.listing +
.post
-meta
.post
-section
::before
{
3159 .archive
-nav
*[class^
='archive-nav-item-'] {
3160 border
-width
: 1px
!important
;
3162 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
3163 background
-color
: #aaa;
3169 .post
.top
-post
-meta
.author
{
3170 margin
: 1em auto
0 auto
;
3172 .post
.top
-post
-meta
.date
,
3173 .post
.top
-post
-meta
.comment
-count
{
3176 .post
.top
-post
-meta
.date
{
3177 margin
: 1.5em auto
0 auto
;
3179 .post
.top
-post
-meta
.comment
-count span
{
3190 .comment
-item
.comment
-item
{
3191 margin
: 0.75em
3px
3px
6px
;
3193 .comment
-item
.comment
-item +
.comment
-item
{
3194 margin
: 1.5em
3px
3px
6px
;
3200 .comment
-controls
.cancel
-comment
-button
,
3201 .comments
> .comment
-controls
.cancel
-comment
-button
{
3205 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
3206 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
3207 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
3213 #content.user-page #theme-less-mobile-first-row-placeholder {
3216 #content.user-page h1.page-main-heading,
3217 #content.user-page .user-stats {
3220 #content.user-page h1.page-main-heading {
3221 margin
: 0.5em
0 0 0.125em
;
3223 #content.user-page #comments-list-mode-selector,
3224 #content.user-page .sublevel-nav.sort {
3225 grid
-row
: 3 / span
2;
3227 #content.user-page .sublevel-nav {
3231 #content.user-page #top-nav-bar {
3233 margin
: 0.5em
0 0 0;
3236 #content.conversation-page #theme-less-mobile-first-row-placeholder {
3239 #content.conversation-page #comments-list-mode-selector {
3243 #content.conversation-page .conversation-participants {
3247 /*******************************************/
3248 } @media only screen
and (max
-width
: 720px
) {
3249 /*******************************************/
3250 #content.index-page > .sublevel-nav.sort {
3254 /*******************************************/
3255 } @media only screen
and (max
-width
: 520px
) {
3256 /*******************************************/
3258 #content.search-results-page h1.listing {
3260 margin
: 18px
6px
4px
6px
;
3261 max
-width
: calc(100%
- 12px
);
3263 h1
.listing +
.post
-meta
{
3266 #content.conversations-user-page h1.listing::after {
3267 height
: calc(100% +
2.25em
);
3269 #content.conversations-user-page h1.listing + .post-meta .date {
3274 font
-size
: 1.125rem
;
3277 #content.compact > .comment-thread .comment-item {
3281 .textarea
-container
:focus
-within textarea
{
3282 background
-color
: #fff;
3284 box
-shadow
: 0 0 0 2px
#fff;
3286 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
3287 padding
: 5px
6px
6px
6px
;
3290 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
3293 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
3294 background
-color
: #fff;
3295 border
-top
: 1px solid
#ddf;
3297 .posting
-controls
.textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
3300 #content.conversation-page .textarea-container:focus-within::after {
3301 background
-color
: #fff;
3303 #markdown-hints::after {
3307 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
3311 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {