2 $UI_font = "'Proxima Nova', 'GW-Symbols', sans-serif";
3 $text_font = "'Garamond Premier Pro', 'Georgia', 'Times New Roman', serif";
4 $hyperlink_color = "#888";
7 /******************************/
8 /* READTHESEQUENCES.COM THEME */
9 /******************************/
18 --GW
-toggle
-widget
-color
: #bbb;
19 --GW
-toggle
-widget
-hover
-color
: #777;
28 background
-color
: #fffffa;
29 font
-family
: <?php
echo $UI_font; ?
>;
43 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
48 #nav-item-search button {
49 font
-weight
: <?php
echo ($platform == 'Mac') ?
'200' : '300'; ?
>;
53 #bottom-bar.decorative {
56 #bottom-bar.decorative::before,
57 #bottom-bar.decorative::after {
62 padding
: 0.25em
0 1em
0;
64 #bottom-bar.decorative::before {
67 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
68 background
-repeat
: repeat
-x
;
69 background
-position
: center
35%
;
72 #bottom-bar.decorative::after {
78 background
-color
: #fff;
82 <?php
fit_content("#bottom-bar.decorative::after"); ?
>
91 font
-weight
: <?php
echo ($platform == 'Mac') ?
'200' : '300'; ?
>;
95 .inactive
-bar
.nav
-inner
::after
{
98 .nav
-inner
:hover
::after
{
102 /* This makes the navbar items look like tabs: */
105 border
-top
: 1px solid
#bbb;
108 .post
-page
#bottom-bar {
111 #content.no-nav-bars {
114 #content.no-comments #bottom-bar {
117 .nav
-bar
.nav
-item
:not(:last
-child
) {
118 border
-right
: 1px solid
#bbb;
120 .nav
-bar
.nav
-item
:not(.nav
-current
):not(#nav-item-search):hover,
121 #nav-item-search:focus-within {
122 background
-color
: #f0f0eb;
126 .nav
-bar button
:hover
,
127 .nav
-bar button
:focus
{
129 text
-shadow
: 0px
0px
0.5px
#333;
131 #bottom-bar .nav-item a::before,
132 #top-nav-bar a::before {
137 #bottom-bar .nav-item a:hover::before,
138 #top-nav-bar a:hover::before {
141 #bottom-bar #nav-item-first a::before,
142 #top-nav-bar a.nav-item-first::before {
143 content
: "\F0D9\F0D9";
145 #bottom-bar #nav-item-prev a::before,
146 #top-nav-bar a.nav-item-prev::before {
149 #bottom-bar #nav-item-top a::before {
152 #bottom-bar #nav-item-next a::before,
153 #top-nav-bar a.nav-item-next::before {
156 #bottom-bar #nav-item-last a::before,
157 #top-nav-bar a.nav-item-last::before {
158 content
: "\F0DA\F0DA";
160 #bottom-bar #nav-item-next a::before {
164 .nav
-bar +
.nav
-bar
{
170 border
-width
: 1px
0 0 0;
178 #nav-item-search form::before {
181 #nav-item-search button:hover {
184 #nav-item-search input::placeholder {
191 #inbox-indicator::before {
195 /*= Top pagination UI hover tooltips =*/
197 #top-nav-bar a::after,
198 #bottom-bar a::after {
212 font
-weight
: <?php
echo ($platform == 'Mac') ?
'300' : '400'; ?
>;
214 .page
-toolbar a
:hover
,
215 .page
-toolbar button
:hover
{
216 text
-shadow
: 0px
0px
0.5px
#333;
222 /*===================*/
223 /* TOP PAGINATION UI */
224 /*===================*/
232 #top-nav-bar .page-number {
233 font
-family
: <?php
echo $text_font; ?
>;
236 #top-nav-bar .page-number-label {
237 font
-family
: <?php
echo $UI_font; ?
>;
240 #top-nav-bar::after {
242 background
-image
: linear
-gradient(to right
, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
243 background
-origin
: content
-box
;
244 background
-repeat
: no
-repeat
;
246 margin
: 0.125em auto
0 auto
;
256 .sublevel
-nav
.sublevel
-item
{
258 background
-color
: #fffffa;
260 .sublevel
-nav
.sublevel
-item
:not(.selected
):hover
{
261 background
-color
: #ddd;
264 .sublevel
-nav
.sublevel
-item
:not(.selected
):active
,
265 .sublevel
-nav
.sublevel
-item
.selected
{
266 background
-color
: #ddd;
274 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
277 border
-width
: 1px
0 1px
1px
;
279 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
{
280 border
-radius
: 8px
0 0 8px
;
282 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
284 border
-radius
: 0 8px
8px
0;
287 /*=====================*/
288 /* SORT ORDER SELECTOR */
289 /*=====================*/
291 .sublevel
-nav
.sort
.sublevel
-item
{
292 font
-feature
-settings
: 'smcp';
293 padding
: 7px
7px
6px
7px
;
294 text
-transform
: uppercase
;
295 box
-shadow
: 1px
1px
0 0 #bbb inset;
296 pointer
-events
: auto
;
301 pointer
-events
: none
;
302 background
-color
: #bbb;
309 .sublevel
-nav
.sort
::before
{
310 text
-transform
: uppercase
;
313 text
-shadow
: 0.5px
0.5px
0 #fff;
317 .sublevel
-nav
.sort
::after
{
325 border
-radius
: 6px
6px
8px
8px
;
327 0 0 0 1px
#bbb inset,
328 0 20px
0 0 #bbb inset,
329 0 20px
0 1px
#aaa inset,
339 #width-selector button,
340 #theme-selector button {
342 0 0 0 4px
#fffffa inset,
343 0 0 0 5px
#bbb inset;
345 #width-selector button:hover,
346 #width-selector button.selected,
347 #theme-selector button:hover,
348 #theme-selector button.selected {
350 0 0 0 1px
#bbb inset,
351 0 0 0 4px
#fffffa inset,
352 0 0 0 5px
#bbb inset;
355 #theme-selector button::before {
360 background
-color
: #fff;
362 #theme-selector button:hover::before,
363 #theme-selector button.selected::before {
366 #width-selector button::after {
371 /*======================*/
372 /* THEME TWEAKER TOGGLE */
373 /*======================*/
375 #theme-tweaker-toggle button {
379 /*=================*/
380 /* QUICKNAV WIDGET */
381 /*=================*/
384 box
-shadow
: 0 0 0 1px
#ccc inset;
388 #quick-nav-ui a[href='#bottom-bar'] {
391 #quick-nav-ui a:active {
392 transform
: scale(0.9);
394 #quick-nav-ui a[href='#comments'].no-comments {
398 @media only screen
and (hover
: hover
) {
399 #quick-nav-ui a:hover {
400 background
-color
: #f0f0eb;
402 text
-shadow
: 0px
0px
0.5px
#333;
404 #quick-nav-ui a:focus:not(:hover) {
410 /*======================*/
411 /* NEW COMMENT QUICKNAV */
412 /*======================*/
414 #new-comment-nav-ui .new-comments-count,
415 #new-comment-nav-ui .new-comments-count::after {
419 #new-comment-nav-ui .new-comments-count {
420 text
-shadow
: 0.5px
0.5px
0 #fff;
422 #new-comment-nav-ui .new-comment-sequential-nav-button {
425 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
429 @media only screen
and (hover
: hover
) {
430 #new-comment-nav-ui .new-comments-count:hover {
438 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
443 /*=================*/
444 /* HNS DATE PICKER */
445 /*=================*/
447 #hns-date-picker span {
449 text
-shadow
: 0.5px
0.5px
0 #fff;
452 #hns-date-picker input[type='text'] {
454 #hns-date-picker input {
455 border
: 1px solid
<?php
echo ($platform == 'Mac') ?
'#bbb' : '#aaa'; ?
>;
456 color
: <?php
echo ($platform == 'Mac') ?
'#888' : '#666'; ?
>;
457 background
-color
: transparent
;
459 #hns-date-picker input:hover,
460 #hns-date-picker input:focus {
461 color
: <?php
echo ($platform == 'Mac') ?
'#666' : '#444'; ?
>;
463 #hns-date-picker span {
464 color
: <?php
echo ($platform == 'Mac') ?
'#aaa' : '#888'; ?
>;
467 /*====================*/
468 /* DARK MODE SELECTOR */
469 /*====================*/
471 #dark-mode-selector {
472 outline
: 1px solid
#777;
474 #dark-mode-selector button {
477 #dark-mode-selector button.selected {
478 background
-color
: #777;
481 #dark-mode-selector button:not(.selected) + button:not(.selected) {
482 box
-shadow
: 1px
0 0 0 #777 inset;
484 #dark-mode-selector button:disabled:hover {
487 #dark-mode-selector button::after {
488 font
-family
: <?php
echo $UI_font; ?
>;
493 /*======================*/
494 /* TEXT SIZE ADJUSTMENT */
495 /*======================*/
497 #text-size-adjustment-ui button {
500 #text-size-adjustment-ui button.default {
503 #text-size-adjustment-ui button:disabled:hover {
506 #text-size-adjustment-ui::after {
511 /*=============================*/
512 /* COMMENTS VIEW MODE SELECTOR */
513 /*=============================*/
515 #comments-view-mode-selector a {
524 border
: 1px solid transparent
;
526 .archive
-nav
*[class^
='archive-nav-item'] {
529 border
-width
: 1px
0 1px
1px
;
531 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
533 border
-bottom
-width
: 0;
535 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
536 border
-bottom
-width
: 1px
;
538 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
539 border
-right
-width
: 1px
;
541 .archive
-nav span
[class^
='archive-nav-item'] {
543 background
-color
: #ddd;
547 .archive
-nav a
:visited
{
551 .archive
-nav a
:hover
,
552 .archive
-nav span
[class^
='archive-nav-item'] {
554 background
-color
: #f0f0eb;
556 text
-shadow
: 0px
0px
0.5px
#333;
558 .archive
-nav a
:active
{
559 transform
: scale(0.9);
561 .archive
-nav a
:focus
:not(:hover
) {
564 .archive
-nav a
.archive
-nav
-item
-day
:hover
{
565 background
-color
: #ddd;
572 #nav-item-about button.open-keyboard-help {
581 margin
: 0.7em
20px
0.1em
20px
;
582 max
-width
: calc(100%
- 40px
);
583 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
587 h1
.listing
.link
-post
-link
{
592 h1
.listing
.post
-title
-link
{
593 font
-family
: <?php
echo $text_font; ?
>;
594 text
-decoration
: none
;
597 text
-shadow
: 0.5px
0.5px
0.5px
#de7069;
598 padding
: 0 2px
1px
1px
;
601 @media only screen
and (hover
: hover
) {
602 h1
.listing
.post
-title
-link
{
603 max
-width
: calc(100%
- 60px
);
604 padding
: 2px
2px
1px
1px
;
609 0px
0px
0.5px
#ff987b,
610 0px
0px
1.5px
#c05651,
611 0.5px
0.5px
0.5px
#de7069;
612 background
-color
: rgba(255,255,250,0.85);
614 h1
.listing
:focus
-within
::before
{
615 display
: inline
-block
;
622 h1
.listing
.link
-post
-link
:hover
{
626 -0.5px
-0.5px
0 #fff,
632 h1
.listing
.edit
-post
-link
{
633 padding
: 5px
3px
36px
0.5em
;
637 h1
.listing
.edit
-post
-link
:hover
{
638 text
-decoration
: none
;
640 #content.user-page h1.listing .edit-post-link {
641 background
-color
: #fff;
651 h1
.listing
.spam +
.post
-meta
{
654 h1
.listing
.spam
:hover
,
655 h1
.listing
.spam +
.post
-meta
:hover
,
656 h1
.listing
.spam
:hover +
.post
-meta
{
660 /*===================*/
661 /* LISTING POST-META */
662 /*===================*/
664 h1
.listing +
.post
-meta
{
665 justify
-content
: center
;
667 h1
.listing +
.post
-meta
> * {
670 h1
.listing +
.post
-meta
.post
-section
{
673 h1
.listing +
.post
-meta
.post
-section
::before
{
676 h1
.listing +
.post
-meta
.link
-post
-domain
{
685 #content.user-page h1.page-main-heading {
686 border
-bottom
: 1px solid
#ccc;
689 #content.user-page #top-nav-bar {
690 margin
: -0.5em
0 0.25em
0;
691 grid
-column
: 1 / span
3;
694 #content.user-page h1.listing {
695 padding
: 6px
6px
0 6px
;
699 #content.own-user-page h1.listing,
700 h1
.listing
.own
-post
-listing
{
703 @media only screen
and (hover
: hover
) {
704 #content.user-page h1.listing:focus-within::before {
708 #content.user-page h1.listing::after {
715 height
: calc(100% +
1.25em
);
716 box
-shadow
: 0px
0px
10px
#555;
718 #content.user-page h1.listing.link-post-listing::after {
719 height
: calc(100% +
2.125em
);
721 #content.user-page h1.listing + .post-meta {
722 margin
: 6px
6px
1.5rem
35px
;
724 #content.user-page h1.listing + .post-meta::after {
728 #content.conversations-user-page h1.listing {
732 #content.conversations-user-page h1.listing + .post-meta {
737 .user
-stats
.karma
-total
{
745 #content.conversation-page h1.page-main-heading {
746 font
-family
: <?php
echo $text_font; ?
>;
753 .login
-container form input
[type
='submit'] {
755 background
-color
: #eee;
756 border
: 1px solid
#ccc;
758 .login
-container form input
[type
='submit']:hover
,
759 .login
-container form input
[type
='submit']:focus
{
760 background
-color
: #ddd;
761 border
: 1px solid
#aaa;
764 /* “Create account” form */
767 background
-color
: #f3f3f3;
768 border
: 1px solid
#ddd;
770 #signup-form input[type='submit'] {
771 background
-color
: #e4e4e4;
772 border
: 1px solid
#ccc;
774 #signup-form input[type='submit']:hover {
775 background
-color
: #d8d8d8;
776 border
: 1px solid
#aaa;
781 .login
-container
.login
-tip
{
782 border
: 1px solid
#eee;
788 border
: 1px solid red
;
789 background
-color
: #faa;
792 border
: 1px solid green
;
793 background
-color
: #afa;
796 /*=====================*/
797 /* PASSWORD RESET PAGE */
798 /*=====================*/
800 .reset
-password
-container input
[type
='submit'] {
801 background
-color
: #e4e4e4;
802 border
: 1px solid
#ccc;
806 /*===================*/
807 /* TABLE OF CONTENTS */
808 /*===================*/
811 font
-family
: <?php
echo $UI_font; ?
>;
813 font
-family
: Garamond Premier Pro
;
819 .contents
-head
::after
{
821 background
-image
: linear
-gradient(to right
, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
823 margin
: 0 auto
0.5em auto
;
830 .body
-text
.contents ul
{
834 .body
-text
.contents a
,
835 .body
-text
.contents a
:visited
{
839 .body
-text
.contents a
:hover
{
842 0px
0px
0.5px
#ff987b,
846 .body
-text
.contents li
::before
{
848 font
-feature
-settings
: 'onum';
851 .contents
.toc
-collapse
-toggle
-button
{
854 .contents
.toc
-collapse
-toggle
-button
:hover
{
858 /*==================*/
859 /* POSTS & COMMENTS */
860 /*==================*/
863 font
-family
: <?php
echo $text_font; ?
>;
866 font
-family
: <?php
echo $text_font; ?
>;
870 font
-family
: <?php
echo $text_font; ?
>;
876 .body
-text a
:visited
{
877 text
-decoration
: none
;
880 .body
-text a
:link
::after
,
881 .body
-text a
:visited
::after
{
890 border
-bottom
: 1px dotted
#999;
898 h1
.listing +
.post
-meta
{
900 font
-weight
: <?php
echo ($platform == 'Mac') ?
'300' : '400'; ?
>;
902 .post
-meta
.post
-section
::before
,
903 .comment
-meta
.alignment
-forum
{
912 .comment
-meta
.alignment
-forum
{
915 a
.post
-section
:hover
{
916 text
-decoration
: none
;
918 .post
-meta
.post
-section
.alignment
-forum
::before
{
924 a
.post
-section
.alignment
-forum
:hover
::before
{
932 .comment
-meta a
:hover
{
934 text
-shadow
: 0px
0px
0.5px
#333;=
944 .post
.link
-post a
.link
-post
-link
{
945 text
-decoration
: none
;
946 font
-family
: <?php
echo $UI_font; ?
>;
950 .post
.link
-post a
.link
-post
-link
:hover
{
953 0px
0px
0.5px
#ff987b,
954 0px
0px
1.5px
#c05651,
955 0.5px
0.5px
0.5px
#de7069;
957 .post
.link
-post a
.link
-post
-link
:hover
::before
{
961 -0.5px
-0.5px
0 #fff,
965 .post
.link
-post a
.link
-post
-link
:focus
{
967 0px
0px
0.5px
#ff987b,
968 0px
0px
1.5px
#c05651,
969 0.5px
0.5px
0.5px
#de7069;
979 .post
-page
.post
-meta
::after
{
981 margin
: 0.625em
0 0 0;
986 .post
-page
.post
-meta
:first
-of
-type
::after
{
993 .post
.bottom
-post
-meta
{
995 padding
-bottom
: 17px
;
998 /*=================*/
999 /* POST NAVIGATION */
1000 /*=================*/
1003 .post
-nav
-links a
:visited
{
1007 .post
-nav
-links a
:hover
{
1008 text
-decoration
: none
;
1012 background
-color
: #f0f0eb;
1020 .post
-nav
.prev
, .sequence
-title
{
1021 border
-right
: 1px solid
#bbb;
1024 @media only screen
and (max
-width
: 900px
) {
1027 padding
: 0.75em
0.5em
0.5em
0.5em
;
1030 border
-top
: 1px solid
#bbb;
1034 border
-right
: 1px solid
#bbb;
1037 border
-left
: 1px solid
#bbb;
1046 border
-top
: 1px solid
#bbb;
1049 #content > .comment-thread .comment-meta a.date:focus,
1050 #content > .comment-thread .comment-meta a.permalink:focus {
1052 font
-weight
: normal
;
1053 outline
: 2px dotted
#444;
1055 background
-color
: #fff;
1059 #content > .comment-thread .comment-meta a.date:focus + *,
1060 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1064 border
: 1px solid transparent
;
1078 /*================================*/
1079 /* DEEP COMMENT THREAD COLLAPSING */
1080 /*================================*/
1082 .comment
-item input
[id^
="expand"] + label
::after
{
1083 color
: <?php
echo $hyperlink_color; ?
>;
1086 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
1089 .comment
-item input
[id^
="expand"] + label
:active
::after
,
1090 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
1093 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
1094 border
-width
: 1px
0 0 0;
1096 .comment
-item input
[id^
="expand"] ~
.comment
-thread
{
1106 font
-weight
: <?php
echo ($platform == 'Mac') ?
'300' : '400'; ?
>;
1108 padding
-bottom
: 4px
;
1109 border
-bottom
: 1px dotted
#bbb;
1112 .comment
-meta
.author
{
1117 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
1121 .comment
-item
.voting
-controls
.active
-controls
::after
,
1122 .comment
-item
.voting
-controls
.karma
-value
::after
,
1123 .post
.voting
-controls
.active
-controls
::after
,
1124 .post
.voting
-controls
.karma
-value
::after
,
1126 background
-color
: #fff;
1128 box
-shadow
: 0 0 0 1px
#ccc inset;
1132 .comment
-item
.voting
-controls
.active
-controls
::after
,
1133 .post
.voting
-controls
.active
-controls
::after
{
1137 .comment
-item
.voting
-controls
.karma
-value
::after
,
1138 .post
.voting
-controls
.karma
-value
::after
{
1144 /*====================*/
1145 /* ANTI-KIBITZER MODE */
1146 /*====================*/
1149 .inline
-author
.redacted
{
1154 .karma
-value
.redacted
{
1158 .link
-post
-domain
.redacted
{
1162 /*===========================*/
1163 /* COMMENT THREAD NAVIGATION */
1164 /*===========================*/
1166 a
.comment
-parent
-link
::after
{
1169 a
.comment
-parent
-link
::before
{
1172 a
.comment
-parent
-link
:hover
::before
{
1175 background
-image
: linear
-gradient(to right
, transparent
0%
, #bbb 100%);
1176 background
-repeat
: no
-repeat
;
1177 box
-shadow
: 1px
0 0 0 #bbb;
1180 .comment
-child
-link
::before
{
1184 .comment
-item
-highlight
{
1191 border
: 1px solid
#e7b200;
1193 .comment
-item
-highlight
-faint
{
1200 border
: 1px solid
#f8e7b5;
1204 background
-color
: #fff;
1207 /*====================*/
1208 /* COMMENT PERMALINKS */
1209 /*====================*/
1211 .comment
-meta
.permalink
,
1212 .comment
-meta
.lw2
-link
,
1213 .individual
-thread
-page
.comment
-parent
-link
:empty {
1214 filter
: grayscale(50%
);
1216 .comment
-meta
.permalink
:hover
,
1217 .comment
-meta
.lw2
-link
:hover
,
1218 .individual
-thread
-page
.comment
-parent
-link
:empty:hover
{
1222 /*=======================*/
1223 /* COMMENTS COMPACT VIEW */
1224 /*=======================*/
1226 #comments-list-mode-selector button {
1228 0 0 0 4px
#fff inset,
1229 0 0 0 5px
#bbb inset;
1231 #comments-list-mode-selector button:hover,
1232 #comments-list-mode-selector button.selected {
1234 0 0 0 5px
#bbb inset;
1236 #content.compact > .comment-thread .comment-item {
1239 #content.compact > .comment-thread .comment-item::after {
1240 color
: <?php
echo $hyperlink_color; ?
>;
1241 background
: linear
-gradient(to right
, transparent
0%
, #fff 50%, #fff 100%);
1244 @media only screen
and (hover
: hover
) {
1245 #content.compact > .comment-thread .comment-item:hover .comment,
1246 #content.compact > .comment-thread .comment-item.expanded .comment {
1247 background
-color
: #fff;
1248 outline
: 3px solid
#888;
1250 #content.compact > .comment-thread .comment-item:hover .comment::before,
1251 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1252 background
-color
: #fff;
1263 @media only screen
and (hover
: none
) {
1264 #content.compact > .comment-thread.expanded .comment-item .comment {
1265 background
-color
: #fff;
1266 outline
: 3px solid
#888;
1268 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1269 background
-color
: #fff;
1281 #content.user-page.compact > h1.listing {
1284 #content.user-page.compact > h1.listing + .post-meta {
1285 margin
-bottom
: 1rem
;
1288 /*===========================*/
1289 /* HIGHLIGHTING NEW COMMENTS */
1290 /*===========================*/
1292 .new-comment
::before
{
1293 outline
: 2px solid
#5a5;
1295 0 0 6px
-2px
#5a5 inset,
1300 /*=================================*/
1301 /* COMMENT THREAD MINIMIZE BUTTONS */
1302 /*=================================*/
1304 .comment
-minimize
-button
{
1307 .comment
-minimize
-button
:hover
{
1310 .comment
-minimize
-button
::after
{
1311 font
-family
: <?php
echo $UI_font; ?
>;
1314 .comment
-minimize
-button
.maximized
::after
{
1318 /*=================================*/
1319 /* INDIVIDUAL COMMENT THREAD PAGES */
1320 /*=================================*/
1322 .individual
-thread
-page
> h1 a
{
1325 .individual
-thread
-page
> h1 a
:hover
{
1327 0px
0px
0.5px
#ff987b,
1328 0px
0px
1.5px
#c05651,
1329 0.5px
0.5px
0.5px
#de7069;
1332 .individual
-thread
-page
> h1
{
1333 font
-family
: <?php
echo $text_font; ?
>;
1351 .karma
.upvote
::before
{
1355 .karma
.downvote
::before
{
1359 .karma
.upvote
::after
{
1364 .karma
.downvote
::after
{
1369 @-moz
-document url
-prefix() {
1370 .karma
.upvote
::after
{
1374 .karma
.downvote
::after
{
1380 .agreement
.upvote
::before
{
1384 .agreement
.downvote
::before
{
1388 .agreement
.upvote
::after
{
1393 .agreement
.downvote
::after
{
1398 @-moz
-document url
-prefix() {
1399 .agreement
.upvote
::after
{
1403 .agreement
.downvote
::after
{
1422 .upvote
:not(.none
) {
1423 color
: var(--GW
-upvote
-button
-color
);
1429 .downvote
:not(.none
) {
1430 color
: var(--GW
-downvote
-button
-color
);
1444 .vote
.two
-temp
::after
,
1446 visibility
: visible
;
1451 .vote
.two
-temp
::after
{
1462 .vote
:disabled
:hover
{
1466 /*===========================*/
1467 /* COMMENTING AND POSTING UI */
1468 /*===========================*/
1470 .posting
-controls input
[type
='submit'] {
1471 background
-color
: #fff;
1472 border
: 1px solid
#aaa;
1475 .posting
-controls input
[type
='submit']:hover
,
1476 .posting
-controls input
[type
='submit']:focus
{
1477 background
-color
: #ddd;
1478 border
: 1px solid
#999;
1480 .comment +
.comment
-controls
.action
-button
{
1481 font
-weight
: <?php
echo ($platform == 'Mac') ?
'300' : '400'; ?
>;
1484 .comment
-controls
.cancel
-comment
-button
{
1491 .comment
-controls
.cancel
-comment
-button
:hover
{
1495 .new-comment
-button
{
1499 .comment
-controls
.delete
-button
,
1500 .comment
-controls
.retract
-button
{
1503 .comment
-controls
.delete
-button
::before
{
1507 .comment
-controls
.retract
-button
::before
{
1511 .comment
-controls
.edit
-button
,
1512 .comment
-controls
.unretract
-button
{
1515 .comment
-controls
.edit
-button
::before
,
1516 .comment
-controls
.unretract
-button
::before
{
1519 .comment
-controls
.action
-button
:hover
{
1527 margin
: 0.5em
-0.75em
0 0;
1530 .edit
-post
-link
:visited
{
1534 .posting
-controls textarea
{
1535 font
-family
: <?php
echo $text_font; ?
>;
1539 background
-color
: #fff;
1542 0 0 0 1px
#eee inset;
1544 .posting
-controls textarea
:focus
{
1545 background
-color
: #ffd;
1546 border
-color
: <?php
echo $hyperlink_color; ?
>;
1548 0 0 0 1px
#ddf inset,
1550 0 0 0 2px
<?php
echo $hyperlink_color; ?
>;
1552 .posting
-controls
.edit
-existing
-post textarea
:focus
,
1553 .posting
-controls form
.edit
-existing
-comment textarea
:focus
{
1556 0 0 0 1px
#81ff7f inset,
1561 /* GUIEdit buttons */
1563 .guiedit
-buttons
-container
{
1564 background
-image
: linear
-gradient(to bottom
, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1567 .posting
-controls
.edit
-existing
-post
.guiedit
-buttons
-container button
,
1568 .posting
-controls form
.edit
-existing
-comment
.guiedit
-buttons
-container button
{
1571 .guiedit
-buttons
-container button
{
1572 font
-family
: Font Awesome
, <?php
echo $text_font; ?
>;
1576 font
-family
: <?php
echo $UI_font; ?
>;
1581 /* Markdown hints */
1583 #markdown-hints-checkbox + label {
1584 color
: <?php
echo $hyperlink_color; ?
>;
1586 #markdown-hints-checkbox + label:hover {
1590 border
: 1px solid
#c00;
1591 background
-color
: #ffa;
1594 /*================*/
1595 /* EDIT POST FORM */
1596 /*================*/
1598 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1600 border
: 1px solid
#ddd;
1603 @media only screen
and (hover
:hover
) {
1604 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1605 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1611 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1612 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1616 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1619 #edit-post-form input[type='radio'] + label {
1623 #edit-post-form input[type='radio'][value='all'] + label {
1624 border
-radius
: 8px
0 0 8px
;
1627 #edit-post-form input[type='radio'][value='drafts'] + label {
1628 border
-radius
: 0 8px
8px
0;
1630 #edit-post-form input[type='radio'] + label:hover,
1631 #edit-post-form input[type='radio']:focus + label {
1632 background
-color
: #ddd;
1635 #edit-post-form input[type='radio']:focus + label {
1640 #edit-post-form input[type='radio']:checked + label {
1641 background
-color
: #ddd;
1654 text
-decoration
: none
;
1655 color
: <?php
echo $hyperlink_color; ?
>;
1658 color
: <?php
echo $hyperlink_color; ?
>;
1666 input
[type
='submit'] {
1671 input
[type
='submit']:active
{
1673 transform
: scale(0.9);
1679 transform
: scale(0.9);
1681 @-moz
-document url
-prefix() {
1686 @media only screen
and (hover
: hover
) {
1688 input
[type
='submit']:hover
,
1690 input
[type
='submit']:focus
{
1692 text
-shadow
: 0px
0px
0.5px
#333;
1697 text
-shadow
: 0px
0px
0.5px
#333;
1698 text
-decoration
: none
;
1700 .button
:focus
:not(:hover
) {
1715 margin
: 1.5em
0 0.25em
0;
1721 font
-variant
: small
-caps
;
1739 .post
-body h1
::before
{
1742 margin
: 0 auto
1em auto
;
1744 font
-weight
: normal
;
1746 .post
-body h2
::before
{
1750 margin
: 0 auto
0.5em auto
;
1751 font
-weight
: normal
;
1754 .post
-body h1
:first
-child
::before
,
1755 .body
-text
.contents + h1
::before
,
1756 .post
-body h2
:first
-child
::before
,
1757 .body
-text
.contents + h2
::before
{
1766 border
-left
: 5px solid
#ccc;
1774 #content figure.image img {
1775 border
: 1px solid
#ccc;
1777 #content figure img {
1778 border
: 1px solid
#000;
1780 #content img[src$='.svg'],
1781 #content figure img[src$='.svg'] {
1784 #content img[style^='float'] {
1785 border
: 1px solid transparent
;
1792 #content:not(.tag-index-page) .body-text table,
1793 #content:not(.tag-index-page) .body-text table th,
1794 #content:not(.tag-index-page) .body-text table td {
1795 border
: 1px solid
#ddd;
1804 background
-image
: linear
-gradient(to right
, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
1809 font
-family
: Triplicate Code
, Courier
, Courier
New, monospace
;
1810 font
-size
: 0.8125em
;
1814 border
: 1px solid
#ceccc3;
1815 background
-color
: #f6f4ea;
1821 input
[type
='search'],
1822 input
[type
='password'] {
1823 background
-color
: transparent
;
1824 border
: 1px solid
#ccc;
1827 input
[type
='text']:focus
,
1828 input
[type
='search']:focus
,
1829 input
[type
='password']:focus
{
1830 background
-color
: #ffd;
1831 border
: 1px solid
#bbb;
1832 box
-shadow
: 0 0 1px
#bbb;
1844 background
-color
: #e6e6e6;
1845 text
-decoration
: none
;
1847 0 -1px
0 0 #000 inset,
1848 0 -3px
1px
-2px
#000 inset;
1852 #content.about-page .accesskey-table {
1853 font
-family
: <?php
echo $UI_font; ?
>;
1857 #content.about-page img {
1858 border
: 1px solid
#000;
1861 /*========================*/
1862 /* QUALIFIED HYPERLINKING */
1863 /*========================*/
1868 #aux-about-link a:hover {
1872 .qualified
-linking label
{
1875 .qualified
-linking label
:hover
{
1877 text
-shadow
: 0px
0px
0.5px
#333;
1880 .qualified
-linking
-toolbar
{
1881 border
: 1px solid
#000;
1882 background
-color
: #fff;
1884 .qualified
-linking
-toolbar a
{
1885 background
-color
: #eee;
1886 border
: 1px solid
#ccc;
1889 .qualified
-linking
-toolbar a
:visited
{
1890 color
: <?php
echo $hyperlink_color; ?
>;
1892 .qualified
-linking
-toolbar a
:hover
{
1893 text
-decoration
: none
;
1894 background
-color
: #ddd;
1896 .qualified
-linking label
::after
{
1897 background
-color
: #fffffa;
1905 .mathjax
-block
-container
::-webkit
-scrollbar
{
1907 background
-color
: #f6f6ff;
1909 border
: 1px solid
#ddf;
1911 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1912 background
-color
: #dde;
1914 border
: 1px solid
#cce;
1916 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1918 background
-color
: #f6f6ff;
1920 border
: 1px solid
#ddf;
1922 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1923 background
-color
: #dde;
1925 border
: 1px solid
#cce;
1933 .textarea
-container
.autocomplete
-container
{
1934 background
-color
: rgba(255, 255, 170, 0.75);
1935 border
: 1px solid
rgba(136, 136, 136, 0.75);
1939 .textarea
-container
.autocomplete
-container div
.highlighted
{
1940 background
-color
: rgba(136, 136, 136, 0.75);
1944 .textarea
-container
.autocomplete
-container div
:not(.highlighted
):hover
{
1945 background
-color
: rgba(136, 136, 136, 0.25);
1948 .textarea
-container
.autocomplete
-container div span
.age
,
1949 .textarea
-container
.autocomplete
-container div span
.karma
{
1953 .textarea
-container
.autocomplete
-container div
.highlighted span
.age
,
1954 .textarea
-container
.autocomplete
-container div
.highlighted span
.karma
{
1959 /*=================*/
1960 /* ALIGNMENT FORUM */
1961 /*=================*/
1963 #content.alignment-forum-index-page::before {
1964 background
-color
: #f4f5ff;
1966 border
-style
: solid
;
1967 border
-width
: 0 1px
;
1969 #content.alignment-forum-index-page::after {
1971 font
-family
: "Concourse SmallCaps";
1973 background
-color
: #7f85b2;
1975 -webkit
-background
-clip
: text
;
1977 rgba(255,255,255,0.5) 0px
3px
3px
;
1979 @media only screen
and (hover
: hover
) {
1980 #content.alignment-forum-index-page h1.listing a:hover,
1981 #content.alignment-forum-index-page h1.listing a:focus {
1982 background
-color
: rgba(244,245,255,0.85);
1986 /*====================*/
1987 /* FOR NARROW SCREENS */
1988 /*====================*/
1990 @media only screen
and (max
-width
: 1440px
) {
1992 background
-color
: #fffffa;
1996 @media only screen
and (max
-width
: 1160px
) {
1997 #theme-selector:hover::after {
1998 width
: calc(6em
- 9px
);
1999 height
: calc(100%
- 5px
);
2003 #text-size-adjustment-ui button {
2004 background
-color
: #ddd;
2006 #text-size-adjustment-ui button:hover {
2007 background
-color
: #eee;
2009 #theme-tweaker-toggle button {
2010 background
-color
: #ddd;
2013 @media only screen
and (max
-width
: 1080px
) {
2014 #text-size-adjustment-ui button {
2015 border
: 1px solid
#999;
2020 0 0 0 1px transparent
;
2022 #theme-tweaker-toggle button {
2023 border
: 1px solid
#999;
2025 0 0 10px
#999 inset,
2026 0 0 0 1px transparent
;
2028 transform
: scale(0.8);
2036 /*******************************************/
2037 @media only screen
and (max
-width
: 1160px
) {
2038 /*******************************************/
2040 #ui-elements-container > div[id$='-ui-toggle'] button {
2052 background
-color
: #fffffa;
2055 0 0 1px
3px
#fffffa,
2056 0 0 3px
3px
#fffffa,
2057 0 0 5px
3px
#fffffa,
2058 0 0 10px
3px
#fffffa,
2059 0 0 20px
3px
#fffffa;
2062 #theme-selector::before {
2065 text
-shadow
: 0.5px
0.5px
0 #fff;
2067 #theme-selector button {
2068 background
-color
: #fffffa;
2071 #theme-selector button::after {
2073 max
-width
: calc(100%
- 3.5em
);
2075 text
-overflow
: ellipsis
;
2077 #theme-selector button.selected::after {
2083 #theme-selector .theme-selector-close-button {
2091 #theme-selector .auxiliary-controls-container {
2092 border
-top
-color
: #bbb;
2094 #theme-selector .auxiliary-controls-container button {
2095 background
-color
: #fffffa;
2097 0 0 10px
0 #bbb inset,
2098 0 0 0 1px transparent
;
2099 border
: 1px solid
#bbb;
2101 #theme-selector #anti-kibitzer-toggle button::before,
2102 #theme-selector #anti-kibitzer-toggle button::after {
2103 background
-color
: #444;
2105 #theme-selector #dark-mode-selector {
2106 background
-color
: #fffffa;
2108 0 0 10px
0 #bbb inset,
2109 0 0 0 1px transparent
;
2110 border
: 1px solid
#bbb;
2112 #theme-selector #dark-mode-selector button.selected {
2113 background
-color
: #aaa;
2115 box
-shadow
: 0 0 2px
0 #bbb;
2119 background
-color
: #fffffa;
2122 #new-comment-nav-ui,
2125 0 0 1px
3px
#fffffa,
2126 0 0 3px
3px
#fffffa,
2127 0 0 5px
3px
#fffffa,
2128 0 0 10px
3px
#fffffa,
2129 0 0 20px
3px
#fffffa;
2131 #quick-nav-ui a::after,
2132 #new-comment-nav-ui::before {
2133 font
-family
: <?php
echo $UI_font; ?
>;
2139 background
-color
: #fffffa;
2143 #new-comment-nav-ui {
2146 #new-comment-nav-ui {
2147 background
-color
: #fffffa;
2148 border
: 1px solid
#ccc;
2150 #new-comment-nav-ui::before {
2154 #new-comment-nav-ui .new-comment-sequential-nav-button {
2155 box
-shadow
: 0 0 0 1px
#ccc;
2158 #new-comment-nav-ui .new-comments-count {
2159 background
-color
: inherit
;
2160 box
-shadow
: 0 -1px
0 0 #ccc;
2162 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2163 border
-radius
: 7px
0 0 7px
;
2165 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2166 border
-radius
: 0 7px
7px
0;
2168 #new-comment-nav-ui button::after {
2169 font
-family
: <?php
echo $UI_font; ?
>;
2172 /*****************************************/
2173 @media only screen
and (max
-width
: 900px
) {
2174 /*****************************************/
2178 h1
.listing +
.post
-meta
.post
-section
::before
{
2181 h1
.listing +
.post
-meta
.post
-section
{
2185 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
2188 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2192 #top-nav-bar .page-number {
2195 #top-nav-bar::after {
2199 .archive
-nav
*[class^
='archive-nav-item-'] {
2200 border
-width
: 1px
!important
;
2202 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
2203 background
-color
: #bbb;
2206 .comment
-item
.comment
-item
{
2207 margin
: 0.75em
3px
3px
6px
;
2209 .comment
-item
.comment
-item +
.comment
-item
{
2210 margin
: 1.5em
3px
3px
6px
;
2213 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
2214 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
2215 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
2224 /*******************************************/
2225 } @media only screen
and (max
-width
: 720px
) {
2226 /*******************************************/
2227 /*******************************************/
2228 } @media only screen
and (max
-width
: 520px
) {
2229 /*******************************************/
2232 margin
: 18px
6px
4px
6px
;
2233 max
-width
: calc(100%
- 12px
);
2235 h1
.listing +
.post
-meta
{
2238 h1
.listing +
.post
-meta
> * {
2241 h1
.listing
.link
-post
-link
{
2245 #content.user-page h1.listing::after {
2246 height
: calc(100% +
2.375em
);
2248 #content.user-page h1.listing.link-post-listing::after {
2249 height
: calc(100% +
3.375em
);
2251 #content.user-page h1.listing + .post-meta {
2252 margin
-bottom
: 1.5rem
;
2255 #content.compact > .comment-thread .comment-item {
2258 #content.compact.user-page h1.listing {
2261 #content.compact.user-page h1.listing + .post-meta {
2262 margin
-bottom
: 0.75rem
;
2266 font
-size
: 1.1875rem
;
2270 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
2271 padding
: 5px
6px
6px
6px
;
2274 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
2277 0 0 0 1px
#c00 inset;
2279 border
-color
: transparent
;
2281 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2282 background
-color
: #fff;
2283 border
-top
: 1px solid
#ddf;
2285 #content.conversation-page .textarea-container:focus-within::after {
2286 background
-color
: #fff;
2288 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
,
2289 .textarea
-container
:focus
-within button
.guiedit
{
2290 border
: 1px solid
#bbb;
2293 #markdown-hints::after {
2297 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2300 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2303 #edit-post-form textarea {
2304 min
-height
: calc(100vh
- 440px
);