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 /* ANTI-KIBITZER TOGGLE */
469 /*======================*/
471 #anti-kibitzer-toggle button::before,
472 #anti-kibitzer-toggle button::after {
473 background
-color
: var(--GW
-toggle
-widget
-color
);
474 -webkit
-background
-clip
: text
;
476 text
-shadow
: rgba(255,255,255,0.5) 0px
1px
1px
;
478 #anti-kibitzer-toggle button:hover::before,
479 #anti-kibitzer-toggle button:hover::after {
480 background
-color
: var(--GW
-toggle
-widget
-hover
-color
);
483 /*======================*/
484 /* TEXT SIZE ADJUSTMENT */
485 /*======================*/
487 #text-size-adjustment-ui button {
490 #text-size-adjustment-ui button.default {
493 #text-size-adjustment-ui button:disabled:hover {
496 #text-size-adjustment-ui::after {
501 /*=============================*/
502 /* COMMENTS VIEW MODE SELECTOR */
503 /*=============================*/
505 #comments-view-mode-selector a {
514 border
: 1px solid transparent
;
516 .archive
-nav
*[class^
='archive-nav-item'] {
519 border
-width
: 1px
0 1px
1px
;
521 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
523 border
-bottom
-width
: 0;
525 .archive
-nav div
[class^
='archive-nav-']:last
-of
-type
*[class^
='archive-nav-item'] {
526 border
-bottom
-width
: 1px
;
528 .archive
-nav
*[class^
='archive-nav-item']:last
-child
{
529 border
-right
-width
: 1px
;
531 .archive
-nav span
[class^
='archive-nav-item'] {
533 background
-color
: #ddd;
537 .archive
-nav a
:visited
{
541 .archive
-nav a
:hover
,
542 .archive
-nav span
[class^
='archive-nav-item'] {
544 background
-color
: #f0f0eb;
546 text
-shadow
: 0px
0px
0.5px
#333;
548 .archive
-nav a
:active
{
549 transform
: scale(0.9);
551 .archive
-nav a
:focus
:not(:hover
) {
554 .archive
-nav a
.archive
-nav
-item
-day
:hover
{
555 background
-color
: #ddd;
562 #nav-item-about button.open-keyboard-help {
571 margin
: 0.7em
20px
0.1em
20px
;
572 max
-width
: calc(100%
- 40px
);
573 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
577 h1
.listing
.link
-post
-link
{
582 h1
.listing
.post
-title
-link
{
583 font
-family
: <?php
echo $text_font; ?
>;
584 text
-decoration
: none
;
587 text
-shadow
: 0.5px
0.5px
0.5px
#de7069;
588 padding
: 0 2px
1px
1px
;
591 @media only screen
and (hover
: hover
) {
592 h1
.listing
.post
-title
-link
{
593 max
-width
: calc(100%
- 60px
);
594 padding
: 2px
2px
1px
1px
;
599 0px
0px
0.5px
#ff987b,
600 0px
0px
1.5px
#c05651,
601 0.5px
0.5px
0.5px
#de7069;
602 background
-color
: rgba(255,255,250,0.85);
604 h1
.listing
:focus
-within
::before
{
605 display
: inline
-block
;
612 h1
.listing
.link
-post
-link
:hover
{
616 -0.5px
-0.5px
0 #fff,
622 h1
.listing
.edit
-post
-link
{
623 padding
: 5px
3px
36px
0.5em
;
627 h1
.listing
.edit
-post
-link
:hover
{
628 text
-decoration
: none
;
630 #content.user-page h1.listing .edit-post-link {
631 background
-color
: #fff;
641 h1
.listing
.spam +
.post
-meta
{
644 h1
.listing
.spam
:hover
,
645 h1
.listing
.spam +
.post
-meta
:hover
,
646 h1
.listing
.spam
:hover +
.post
-meta
{
650 /*===================*/
651 /* LISTING POST-META */
652 /*===================*/
654 h1
.listing +
.post
-meta
{
655 justify
-content
: center
;
657 h1
.listing +
.post
-meta
> * {
660 h1
.listing +
.post
-meta
.post
-section
{
663 h1
.listing +
.post
-meta
.post
-section
::before
{
666 h1
.listing +
.post
-meta
.link
-post
-domain
{
675 #content.user-page h1.page-main-heading {
676 border
-bottom
: 1px solid
#ccc;
679 #content.user-page #top-nav-bar {
680 margin
: -0.5em
0 0.25em
0;
681 grid
-column
: 1 / span
3;
684 #content.user-page h1.listing {
685 padding
: 6px
6px
0 6px
;
689 #content.own-user-page h1.listing,
690 h1
.listing
.own
-post
-listing
{
693 @media only screen
and (hover
: hover
) {
694 #content.user-page h1.listing:focus-within::before {
698 #content.user-page h1.listing::after {
705 height
: calc(100% +
1.25em
);
706 box
-shadow
: 0px
0px
10px
#555;
708 #content.user-page h1.listing.link-post-listing::after {
709 height
: calc(100% +
2.125em
);
711 #content.user-page h1.listing + .post-meta {
712 margin
: 6px
6px
1.5rem
35px
;
714 #content.user-page h1.listing + .post-meta::after {
718 #content.conversations-user-page h1.listing {
722 #content.conversations-user-page h1.listing + .post-meta {
727 .user
-stats
.karma
-total
{
735 #content.conversation-page h1.page-main-heading {
736 font
-family
: <?php
echo $text_font; ?
>;
743 .login
-container form input
[type
='submit'] {
745 background
-color
: #eee;
746 border
: 1px solid
#ccc;
748 .login
-container form input
[type
='submit']:hover
,
749 .login
-container form input
[type
='submit']:focus
{
750 background
-color
: #ddd;
751 border
: 1px solid
#aaa;
754 /* “Create account” form */
757 background
-color
: #f3f3f3;
758 border
: 1px solid
#ddd;
760 #signup-form input[type='submit'] {
761 background
-color
: #e4e4e4;
762 border
: 1px solid
#ccc;
764 #signup-form input[type='submit']:hover {
765 background
-color
: #d8d8d8;
766 border
: 1px solid
#aaa;
771 .login
-container
.login
-tip
{
772 border
: 1px solid
#eee;
778 border
: 1px solid red
;
779 background
-color
: #faa;
782 border
: 1px solid green
;
783 background
-color
: #afa;
786 /*=====================*/
787 /* PASSWORD RESET PAGE */
788 /*=====================*/
790 .reset
-password
-container input
[type
='submit'] {
791 background
-color
: #e4e4e4;
792 border
: 1px solid
#ccc;
796 /*===================*/
797 /* TABLE OF CONTENTS */
798 /*===================*/
801 font
-family
: <?php
echo $UI_font; ?
>;
803 font
-family
: Garamond Premier Pro
;
809 .contents
-head
::after
{
811 background
-image
: linear
-gradient(to right
, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
813 margin
: 0 auto
0.5em auto
;
820 .post
-body
.contents ul
{
824 .post
-body
.contents a
,
825 .post
-body
.contents a
:visited
{
829 .post
-body
.contents a
:hover
{
832 0px
0px
0.5px
#ff987b,
836 .post
-body
.contents li
::before
{
838 font
-feature
-settings
: 'onum';
841 /*==================*/
842 /* POSTS & COMMENTS */
843 /*==================*/
846 font
-family
: <?php
echo $text_font; ?
>;
849 font
-family
: <?php
echo $text_font; ?
>;
853 font
-family
: <?php
echo $text_font; ?
>;
859 .body
-text a
:visited
{
860 text
-decoration
: none
;
863 .body
-text a
:link
::after
,
864 .body
-text a
:visited
::after
{
873 border
-bottom
: 1px dotted
#999;
881 h1
.listing +
.post
-meta
{
883 font
-weight
: <?php
echo ($platform == 'Mac') ?
'300' : '400'; ?
>;
885 .post
-meta
.post
-section
::before
,
886 .comment
-meta
.alignment
-forum
{
895 .comment
-meta
.alignment
-forum
{
898 a
.post
-section
:hover
{
899 text
-decoration
: none
;
901 .post
-meta
.post
-section
.alignment
-forum
::before
{
907 a
.post
-section
.alignment
-forum
:hover
::before
{
915 .comment
-meta a
:hover
{
917 text
-shadow
: 0px
0px
0.5px
#333;=
927 .post
.link
-post a
.link
-post
-link
{
928 text
-decoration
: none
;
929 font
-family
: <?php
echo $UI_font; ?
>;
933 .post
.link
-post a
.link
-post
-link
:hover
{
936 0px
0px
0.5px
#ff987b,
937 0px
0px
1.5px
#c05651,
938 0.5px
0.5px
0.5px
#de7069;
940 .post
.link
-post a
.link
-post
-link
:hover
::before
{
944 -0.5px
-0.5px
0 #fff,
948 .post
.link
-post a
.link
-post
-link
:focus
{
950 0px
0px
0.5px
#ff987b,
951 0px
0px
1.5px
#c05651,
952 0.5px
0.5px
0.5px
#de7069;
962 .post
-page
.post
-meta
::after
{
964 margin
: 0.625em
0 0 0;
969 .post
-page
.post
-meta
:first
-of
-type
::after
{
976 .post
.bottom
-post
-meta
{
978 padding
-bottom
: 17px
;
981 /*=================*/
982 /* POST NAVIGATION */
983 /*=================*/
986 .post
-nav
-links a
:visited
{
990 .post
-nav
-links a
:hover
{
991 text
-decoration
: none
;
995 background
-color
: #f0f0eb;
1003 .post
-nav
.prev
, .sequence
-title
{
1004 border
-right
: 1px solid
#bbb;
1007 @media only screen
and (max
-width
: 900px
) {
1010 padding
: 0.75em
0.5em
0.5em
0.5em
;
1013 border
-top
: 1px solid
#bbb;
1017 border
-right
: 1px solid
#bbb;
1020 border
-left
: 1px solid
#bbb;
1029 border
-top
: 1px solid
#bbb;
1032 #content > .comment-thread .comment-meta a.date:focus,
1033 #content > .comment-thread .comment-meta a.permalink:focus {
1035 font
-weight
: normal
;
1036 outline
: 2px dotted
#444;
1038 background
-color
: #fff;
1042 #content > .comment-thread .comment-meta a.date:focus + *,
1043 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1047 border
: 1px solid transparent
;
1061 /*================================*/
1062 /* DEEP COMMENT THREAD COLLAPSING */
1063 /*================================*/
1065 .comment
-item input
[id^
="expand"] + label
::after
{
1066 color
: <?php
echo $hyperlink_color; ?
>;
1069 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
1072 .comment
-item input
[id^
="expand"] + label
:active
::after
,
1073 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
1076 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
1077 border
-width
: 1px
0 0 0;
1079 .comment
-item input
[id^
="expand"] ~
.comment
-thread
{
1089 font
-weight
: <?php
echo ($platform == 'Mac') ?
'300' : '400'; ?
>;
1091 padding
-bottom
: 4px
;
1092 border
-bottom
: 1px dotted
#bbb;
1095 .comment
-meta
.author
{
1100 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
1104 .comment
-item
.voting
-controls
.active
-controls
::after
,
1105 .comment
-item
.voting
-controls
.karma
-value
::after
,
1106 .post
.voting
-controls
.active
-controls
::after
,
1107 .post
.voting
-controls
.karma
-value
::after
,
1109 background
-color
: #fff;
1111 box
-shadow
: 0 0 0 1px
#ccc inset;
1115 .comment
-item
.voting
-controls
.active
-controls
::after
,
1116 .post
.voting
-controls
.active
-controls
::after
{
1120 .comment
-item
.voting
-controls
.karma
-value
::after
,
1121 .post
.voting
-controls
.karma
-value
::after
{
1127 /*====================*/
1128 /* ANTI-KIBITZER MODE */
1129 /*====================*/
1132 .inline
-author
.redacted
{
1137 .karma
-value
.redacted
{
1141 .link
-post
-domain
.redacted
{
1145 /*===========================*/
1146 /* COMMENT THREAD NAVIGATION */
1147 /*===========================*/
1149 a
.comment
-parent
-link
::after
{
1152 a
.comment
-parent
-link
::before
{
1155 a
.comment
-parent
-link
:hover
::before
{
1158 background
-image
: linear
-gradient(to right
, transparent
0%
, #bbb 100%);
1159 background
-repeat
: no
-repeat
;
1160 box
-shadow
: 1px
0 0 0 #bbb;
1163 .comment
-child
-link
::before
{
1167 .comment
-item
-highlight
{
1174 border
: 1px solid
#e7b200;
1176 .comment
-item
-highlight
-faint
{
1183 border
: 1px solid
#f8e7b5;
1187 background
-color
: #fff;
1190 /*====================*/
1191 /* COMMENT PERMALINKS */
1192 /*====================*/
1194 .comment
-meta
.permalink
,
1195 .comment
-meta
.lw2
-link
,
1196 .individual
-thread
-page
.comment
-parent
-link
:empty {
1197 filter
: grayscale(50%
);
1199 .comment
-meta
.permalink
:hover
,
1200 .comment
-meta
.lw2
-link
:hover
,
1201 .individual
-thread
-page
.comment
-parent
-link
:empty:hover
{
1205 /*=======================*/
1206 /* COMMENTS COMPACT VIEW */
1207 /*=======================*/
1209 #comments-list-mode-selector button {
1211 0 0 0 4px
#fff inset,
1212 0 0 0 5px
#bbb inset;
1214 #comments-list-mode-selector button:hover,
1215 #comments-list-mode-selector button.selected {
1217 0 0 0 5px
#bbb inset;
1219 #content.compact > .comment-thread .comment-item {
1222 #content.compact > .comment-thread .comment-item::after {
1223 color
: <?php
echo $hyperlink_color; ?
>;
1224 background
: linear
-gradient(to right
, transparent
0%
, #fff 50%, #fff 100%);
1227 @media only screen
and (hover
: hover
) {
1228 #content.compact > .comment-thread .comment-item:hover .comment,
1229 #content.compact > .comment-thread .comment-item.expanded .comment {
1230 background
-color
: #fff;
1231 outline
: 3px solid
#888;
1233 #content.compact > .comment-thread .comment-item:hover .comment::before,
1234 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1235 background
-color
: #fff;
1246 @media only screen
and (hover
: none
) {
1247 #content.compact > .comment-thread.expanded .comment-item .comment {
1248 background
-color
: #fff;
1249 outline
: 3px solid
#888;
1251 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1252 background
-color
: #fff;
1264 #content.user-page.compact > h1.listing {
1267 #content.user-page.compact > h1.listing + .post-meta {
1268 margin
-bottom
: 1rem
;
1271 /*===========================*/
1272 /* HIGHLIGHTING NEW COMMENTS */
1273 /*===========================*/
1275 .new-comment
::before
{
1276 outline
: 2px solid
#5a5;
1278 0 0 6px
-2px
#5a5 inset,
1283 /*=================================*/
1284 /* COMMENT THREAD MINIMIZE BUTTONS */
1285 /*=================================*/
1287 .comment
-minimize
-button
{
1290 .comment
-minimize
-button
:hover
{
1293 .comment
-minimize
-button
::after
{
1294 font
-family
: <?php
echo $UI_font; ?
>;
1297 .comment
-minimize
-button
.maximized
::after
{
1301 /*=================================*/
1302 /* INDIVIDUAL COMMENT THREAD PAGES */
1303 /*=================================*/
1305 .individual
-thread
-page
> h1 a
{
1308 .individual
-thread
-page
> h1 a
:hover
{
1310 0px
0px
0.5px
#ff987b,
1311 0px
0px
1.5px
#c05651,
1312 0.5px
0.5px
0.5px
#de7069;
1315 .individual
-thread
-page
> h1
{
1316 font
-family
: <?php
echo $text_font; ?
>;
1334 .karma
.upvote
::before
{
1338 .karma
.downvote
::before
{
1342 .karma
.upvote
::after
{
1347 .karma
.downvote
::after
{
1352 @-moz
-document url
-prefix() {
1353 .karma
.upvote
::after
{
1357 .karma
.downvote
::after
{
1363 .agreement
.upvote
::before
{
1367 .agreement
.downvote
::before
{
1371 .agreement
.upvote
::after
{
1376 .agreement
.downvote
::after
{
1381 @-moz
-document url
-prefix() {
1382 .agreement
.upvote
::after
{
1386 .agreement
.downvote
::after
{
1405 .upvote
:not(.none
) {
1406 color
: var(--GW
-upvote
-button
-color
);
1412 .downvote
:not(.none
) {
1413 color
: var(--GW
-downvote
-button
-color
);
1427 .vote
.two
-temp
::after
,
1429 visibility
: visible
;
1434 .vote
.two
-temp
::after
{
1445 .vote
:disabled
:hover
{
1449 /*===========================*/
1450 /* COMMENTING AND POSTING UI */
1451 /*===========================*/
1453 .posting
-controls input
[type
='submit'] {
1454 background
-color
: #fff;
1455 border
: 1px solid
#aaa;
1458 .posting
-controls input
[type
='submit']:hover
,
1459 .posting
-controls input
[type
='submit']:focus
{
1460 background
-color
: #ddd;
1461 border
: 1px solid
#999;
1463 .comment +
.comment
-controls
.action
-button
{
1464 font
-weight
: <?php
echo ($platform == 'Mac') ?
'300' : '400'; ?
>;
1467 .comment
-controls
.cancel
-comment
-button
{
1474 .comment
-controls
.cancel
-comment
-button
:hover
{
1478 .new-comment
-button
{
1482 .comment
-controls
.delete
-button
,
1483 .comment
-controls
.retract
-button
{
1486 .comment
-controls
.delete
-button
::before
{
1490 .comment
-controls
.retract
-button
::before
{
1494 .comment
-controls
.edit
-button
,
1495 .comment
-controls
.unretract
-button
{
1498 .comment
-controls
.edit
-button
::before
,
1499 .comment
-controls
.unretract
-button
::before
{
1502 .comment
-controls
.action
-button
:hover
{
1510 margin
: 0.5em
-0.75em
0 0;
1513 .edit
-post
-link
:visited
{
1517 .posting
-controls textarea
{
1518 font
-family
: <?php
echo $text_font; ?
>;
1522 background
-color
: #fff;
1525 0 0 0 1px
#eee inset;
1527 .posting
-controls textarea
:focus
{
1528 background
-color
: #ffd;
1529 border
-color
: <?php
echo $hyperlink_color; ?
>;
1531 0 0 0 1px
#ddf inset,
1533 0 0 0 2px
<?php
echo $hyperlink_color; ?
>;
1535 .posting
-controls
.edit
-existing
-post textarea
:focus
,
1536 .posting
-controls form
.edit
-existing
-comment textarea
:focus
{
1539 0 0 0 1px
#81ff7f inset,
1544 /* GUIEdit buttons */
1546 .guiedit
-buttons
-container
{
1547 background
-image
: linear
-gradient(to bottom
, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1550 .posting
-controls
.edit
-existing
-post
.guiedit
-buttons
-container button
,
1551 .posting
-controls form
.edit
-existing
-comment
.guiedit
-buttons
-container button
{
1554 .guiedit
-buttons
-container button
{
1555 font
-family
: Font Awesome
, <?php
echo $text_font; ?
>;
1559 font
-family
: <?php
echo $UI_font; ?
>;
1564 /* Markdown hints */
1566 #markdown-hints-checkbox + label {
1567 color
: <?php
echo $hyperlink_color; ?
>;
1569 #markdown-hints-checkbox + label:hover {
1573 border
: 1px solid
#c00;
1574 background
-color
: #ffa;
1577 /*================*/
1578 /* EDIT POST FORM */
1579 /*================*/
1581 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1583 border
: 1px solid
#ddd;
1586 @media only screen
and (hover
:hover
) {
1587 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1588 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1594 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1595 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1599 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1602 #edit-post-form input[type='radio'] + label {
1606 #edit-post-form input[type='radio'][value='all'] + label {
1607 border
-radius
: 8px
0 0 8px
;
1610 #edit-post-form input[type='radio'][value='drafts'] + label {
1611 border
-radius
: 0 8px
8px
0;
1613 #edit-post-form input[type='radio'] + label:hover,
1614 #edit-post-form input[type='radio']:focus + label {
1615 background
-color
: #ddd;
1618 #edit-post-form input[type='radio']:focus + label {
1623 #edit-post-form input[type='radio']:checked + label {
1624 background
-color
: #ddd;
1637 text
-decoration
: none
;
1638 color
: <?php
echo $hyperlink_color; ?
>;
1641 color
: <?php
echo $hyperlink_color; ?
>;
1649 input
[type
='submit'] {
1654 input
[type
='submit']:active
{
1656 transform
: scale(0.9);
1662 transform
: scale(0.9);
1664 @-moz
-document url
-prefix() {
1669 @media only screen
and (hover
: hover
) {
1671 input
[type
='submit']:hover
,
1673 input
[type
='submit']:focus
{
1675 text
-shadow
: 0px
0px
0.5px
#333;
1680 text
-shadow
: 0px
0px
0.5px
#333;
1681 text
-decoration
: none
;
1683 .button
:focus
:not(:hover
) {
1698 margin
: 1.5em
0 0.25em
0;
1704 font
-variant
: small
-caps
;
1722 .post
-body h1
::before
{
1725 margin
: 0 auto
1em auto
;
1727 font
-weight
: normal
;
1729 .post
-body h2
::before
{
1733 margin
: 0 auto
0.5em auto
;
1734 font
-weight
: normal
;
1737 .post
-body h1
:first
-child
::before
,
1738 .post
-body
.contents + h1
::before
,
1739 .post
-body h2
:first
-child
::before
,
1740 .post
-body
.contents + h2
::before
{
1749 border
-left
: 5px solid
#ccc;
1757 #content figure.image img {
1758 border
: 1px solid
#ccc;
1760 #content figure img {
1761 border
: 1px solid
#000;
1763 #content img[src$='.svg'],
1764 #content figure img[src$='.svg'] {
1767 #content img[style^='float'] {
1768 border
: 1px solid transparent
;
1775 #content:not(.tag-index-page) .body-text table,
1776 #content:not(.tag-index-page) .body-text table th,
1777 #content:not(.tag-index-page) .body-text table td {
1778 border
: 1px solid
#ddd;
1787 background
-image
: linear
-gradient(to right
, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
1792 font
-family
: Triplicate Code
, Courier
, Courier
New, monospace
;
1793 font
-size
: 0.8125em
;
1797 border
: 1px solid
#ceccc3;
1798 background
-color
: #f6f4ea;
1804 input
[type
='search'],
1805 input
[type
='password'] {
1806 background
-color
: transparent
;
1807 border
: 1px solid
#ccc;
1810 input
[type
='text']:focus
,
1811 input
[type
='search']:focus
,
1812 input
[type
='password']:focus
{
1813 background
-color
: #ffd;
1814 border
: 1px solid
#bbb;
1815 box
-shadow
: 0 0 1px
#bbb;
1827 background
-color
: #e6e6e6;
1828 text
-decoration
: none
;
1830 0 -1px
0 0 #000 inset,
1831 0 -3px
1px
-2px
#000 inset;
1835 #content.about-page .accesskey-table {
1836 font
-family
: <?php
echo $UI_font; ?
>;
1840 #content.about-page img {
1841 border
: 1px solid
#000;
1844 /*========================*/
1845 /* QUALIFIED HYPERLINKING */
1846 /*========================*/
1851 #aux-about-link a:hover {
1855 .qualified
-linking label
{
1858 .qualified
-linking label
:hover
{
1860 text
-shadow
: 0px
0px
0.5px
#333;
1863 .qualified
-linking
-toolbar
{
1864 border
: 1px solid
#000;
1865 background
-color
: #fff;
1867 .qualified
-linking
-toolbar a
{
1868 background
-color
: #eee;
1869 border
: 1px solid
#ccc;
1872 .qualified
-linking
-toolbar a
:visited
{
1873 color
: <?php
echo $hyperlink_color; ?
>;
1875 .qualified
-linking
-toolbar a
:hover
{
1876 text
-decoration
: none
;
1877 background
-color
: #ddd;
1879 .qualified
-linking label
::after
{
1880 background
-color
: #fffffa;
1888 .mathjax
-block
-container
::-webkit
-scrollbar
{
1890 background
-color
: #f6f6ff;
1892 border
: 1px solid
#ddf;
1894 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1895 background
-color
: #dde;
1897 border
: 1px solid
#cce;
1899 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1901 background
-color
: #f6f6ff;
1903 border
: 1px solid
#ddf;
1905 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1906 background
-color
: #dde;
1908 border
: 1px solid
#cce;
1911 /*=================*/
1912 /* ALIGNMENT FORUM */
1913 /*=================*/
1915 #content.alignment-forum-index-page::before {
1916 background
-color
: #f4f5ff;
1918 border
-style
: solid
;
1919 border
-width
: 0 1px
;
1921 #content.alignment-forum-index-page::after {
1923 font
-family
: "Concourse SmallCaps";
1925 background
-color
: #7f85b2;
1927 -webkit
-background
-clip
: text
;
1929 rgba(255,255,255,0.5) 0px
3px
3px
;
1931 @media only screen
and (hover
: hover
) {
1932 #content.alignment-forum-index-page h1.listing a:hover,
1933 #content.alignment-forum-index-page h1.listing a:focus {
1934 background
-color
: rgba(244,245,255,0.85);
1938 /*====================*/
1939 /* FOR NARROW SCREENS */
1940 /*====================*/
1942 @media only screen
and (max
-width
: 1440px
) {
1944 background
-color
: #fffffa;
1948 @media only screen
and (max
-width
: 1160px
) {
1949 #theme-selector:hover::after {
1950 width
: calc(6em
- 9px
);
1951 height
: calc(100%
- 5px
);
1955 #text-size-adjustment-ui button {
1956 background
-color
: #ddd;
1958 #text-size-adjustment-ui button:hover {
1959 background
-color
: #eee;
1961 #theme-tweaker-toggle button {
1962 background
-color
: #ddd;
1965 @media only screen
and (max
-width
: 1080px
) {
1966 #text-size-adjustment-ui button {
1967 border
: 1px solid
#999;
1972 0 0 0 1px transparent
;
1974 #theme-tweaker-toggle button {
1975 border
: 1px solid
#999;
1977 0 0 10px
#999 inset,
1978 0 0 0 1px transparent
;
1980 transform
: scale(0.8);
1988 /*******************************************************/
1989 @media not screen
and (hover
:hover
) and (pointer
:fine
) {
1990 /*******************************************************/
1991 #ui-elements-container > div[id$='-ui-toggle'] button {
2003 background
-color
: #fffffa;
2006 0 0 1px
3px
#fffffa,
2007 0 0 3px
3px
#fffffa,
2008 0 0 5px
3px
#fffffa,
2009 0 0 10px
3px
#fffffa,
2010 0 0 20px
3px
#fffffa;
2013 #theme-selector::before {
2016 text
-shadow
: 0.5px
0.5px
0 #fff;
2018 #theme-selector button {
2019 background
-color
: #fffffa;
2022 #theme-selector button::after {
2024 max
-width
: calc(100%
- 3.5em
);
2026 text
-overflow
: ellipsis
;
2028 #theme-selector button.selected::after {
2034 #theme-selector .theme-selector-close-button {
2043 background
-color
: #fffffa;
2046 #new-comment-nav-ui,
2049 0 0 1px
3px
#fffffa,
2050 0 0 3px
3px
#fffffa,
2051 0 0 5px
3px
#fffffa,
2052 0 0 10px
3px
#fffffa,
2053 0 0 20px
3px
#fffffa;
2055 #quick-nav-ui a::after,
2056 #new-comment-nav-ui::before {
2057 font
-family
: <?php
echo $UI_font; ?
>;
2063 background
-color
: #fffffa;
2067 #new-comment-nav-ui {
2070 #new-comment-nav-ui {
2071 background
-color
: #fffffa;
2072 border
: 1px solid
#ccc;
2074 #new-comment-nav-ui::before {
2078 #new-comment-nav-ui .new-comment-sequential-nav-button {
2079 box
-shadow
: 0 0 0 1px
#ccc;
2082 #new-comment-nav-ui .new-comments-count {
2083 background
-color
: inherit
;
2084 box
-shadow
: 0 -1px
0 0 #ccc;
2086 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2087 border
-radius
: 7px
0 0 7px
;
2089 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2090 border
-radius
: 0 7px
7px
0;
2092 #new-comment-nav-ui button::after {
2093 font
-family
: <?php
echo $UI_font; ?
>;
2096 /*****************************************/
2097 @media only screen
and (max
-width
: 900px
) {
2098 /*****************************************/
2102 h1
.listing +
.post
-meta
.post
-section
::before
{
2105 h1
.listing +
.post
-meta
.post
-section
{
2109 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
2112 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2116 #top-nav-bar .page-number {
2119 #top-nav-bar::after {
2123 .archive
-nav
*[class^
='archive-nav-item-'] {
2124 border
-width
: 1px
!important
;
2126 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
2127 background
-color
: #bbb;
2130 .comment
-item
.comment
-item
{
2131 margin
: 0.75em
3px
3px
6px
;
2133 .comment
-item
.comment
-item +
.comment
-item
{
2134 margin
: 1.5em
3px
3px
6px
;
2137 .sublevel
-nav
:not(.sort
) .sublevel
-item
,
2138 .sublevel
-nav
:not(.sort
) .sublevel
-item
:first
-child
,
2139 .sublevel
-nav
:not(.sort
) .sublevel
-item
:last
-child
{
2148 /*******************************************/
2149 } @media only screen
and (max
-width
: 720px
) {
2150 /*******************************************/
2151 /*******************************************/
2152 } @media only screen
and (max
-width
: 520px
) {
2153 /*******************************************/
2156 margin
: 18px
6px
4px
6px
;
2157 max
-width
: calc(100%
- 12px
);
2159 h1
.listing +
.post
-meta
{
2162 h1
.listing +
.post
-meta
> * {
2165 h1
.listing
.link
-post
-link
{
2169 #content.user-page h1.listing::after {
2170 height
: calc(100% +
2.375em
);
2172 #content.user-page h1.listing.link-post-listing::after {
2173 height
: calc(100% +
3.375em
);
2175 #content.user-page h1.listing + .post-meta {
2176 margin
-bottom
: 1.5rem
;
2179 #content.compact > .comment-thread .comment-item {
2182 #content.compact.user-page h1.listing {
2185 #content.compact.user-page h1.listing + .post-meta {
2186 margin
-bottom
: 0.75rem
;
2190 font
-size
: 1.1875rem
;
2194 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
2195 padding
: 5px
6px
6px
6px
;
2198 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
2201 0 0 0 1px
#c00 inset;
2203 border
-color
: transparent
;
2205 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
2206 background
-color
: #fff;
2207 border
-top
: 1px solid
#ddf;
2209 #content.conversation-page .textarea-container:focus-within::after {
2210 background
-color
: #fff;
2212 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
,
2213 .textarea
-container
:focus
-within button
.guiedit
{
2214 border
: 1px solid
#bbb;
2217 #markdown-hints::after {
2221 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2224 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2227 #edit-post-form textarea {
2228 min
-height
: calc(100vh
- 440px
);