2 header ('Content-type: text/css; charset=utf-8');
4 $platform = @$argv[1] ?
: 'Mac';
5 $UI_font = "'Concourse', 'a_Avante', 'GW-Symbols'";
7 $content_width_settings = [
10 'fluid' => 'calc(100% - 300px)'
13 function fit_content($selector, $property = "width") {
14 foreach (["-moz-fit-content", "fit-content"] as $pvalue) echo
15 "@supports (width: {$pvalue}) {
17 {$property}: {$pvalue};
29 --GW
-comment
-background
-color
-odd
: transparent
;
30 --GW
-comment
-background
-color
-even
: transparent
;
31 --GW
-comment
-background
-color
-target
: transparent
;
33 --inverted
-display
: none
;
41 box
-sizing
: border
-box
;
44 *, *::before
, *::after
{
48 display
: none
!important
;
60 background
-color
: inherit
;
72 /*=----------------------------=*/
73 /*= Immediate children of body =*/
74 /*=----------------------------=*/
80 /* Special styles for special browsers.
81 (This one is a fix for Firefox’s built-in screenshot feature.)
83 body
> iframe
[id^
='firefox-screenshots'] {
93 grid
-template
-columns
: 2fr
1fr
2fr
;
104 pointer
-events
: none
;
112 grid
-column
: 1 / span
3;
115 /*=----------------------=*/
116 /*= Floating UI elements =*/
117 /*=----------------------=*/
119 #ui-elements-container {
127 pointer
-events
: none
;
129 #ui-elements-container > * {
130 pointer
-events
: auto
;
133 /*=----------------=*/
134 /*= Images overlay =*/
135 /*=----------------=*/
136 /* (To exclude images in posts from theme tweaks) */
157 /*=---------------=*/
158 /*= Nav bar items =*/
159 /*=---------------=*/
165 text
-overflow
: ellipsis
;
174 line
-height
: inherit
;
178 .nav
-bar
-top
:not(#primary-bar) .nav-inner {
182 #nav-item-sequences .nav-inner::before {
183 font
-family
: "Font Awesome", "Font Awesome 5 Free";
186 @media only screen
and (min
-width
: 901px
) {
187 #nav-item-about .nav-inner {
190 #nav-item-sequences .nav-inner::before {
194 #secondary-bar #nav-item-sequences .nav-inner {
207 h1
.listing ~
#bottom-bar {
210 #bottom-bar .nav-item {
214 /*=-----------------=*/
215 /*= Accesskey hints =*/
216 /*=-----------------=*/
219 content
: attr(accesskey
);
223 /*=---------------=*/
224 /*= Pagination UI =*/
225 /*=---------------=*/
227 #bottom-bar .nav-item a::before,
228 #top-nav-bar a::before {
229 font
-family
: "Font Awesome", "Font Awesome 5 Free";
236 #bottom-bar #nav-item-first a::before,
237 #top-nav-bar a.nav-item-first::before {
240 #bottom-bar #nav-item-top a::before {
243 #bottom-bar #nav-item-prev a::before,
244 #top-nav-bar a.nav-item-prev::before {
247 #bottom-bar #nav-item-next a::before,
248 #top-nav-bar a.nav-item-next::before {
251 #bottom-bar #nav-item-last a::before,
252 #top-nav-bar a.nav-item-last::before {
255 #bottom-bar #nav-item-next a::before {
260 #bottom-bar #nav-item-last a::before {
266 /*= Hover tooltips =*/
271 #top-nav-bar a::after {
272 bottom
: calc(100%
- 3px
);
273 content
: attr(data
-target
-page
);
275 #top-nav-bar a::after {
283 #top-nav-bar a:hover::after,
284 #bottom-bar a:hover::after {
288 /*=-----------------------=*/
289 /*= Decorative bottom bar =*/
290 /*=-----------------------=*/
291 /* (On short pages with no pagination) */
293 #bottom-bar.decorative {
296 #bottom-bar.decorative .nav-item {
307 #nav-item-search form::before {
309 font
-family
: "Font Awesome", "Font Awesome 5 Free";
311 display
: inline
-block
;
316 #nav-item-search input {
318 width
: calc(95%
- 80px
);
321 #nav-item-search button {
331 padding
-right
: 0.5em
;
334 /*******************/
335 /* INBOX INDICATOR */
336 /*******************/
345 #inbox-indicator::before {
347 font
-family
: "Font Awesome", "Font Awesome 5 Free";
349 font
-size
: 1.1875rem
;
358 #inbox-indicator.new-messages::before {
362 0.5px
0.5px
1px
#777;
364 a
#inbox-indicator:hover::before {
371 0.5px
0.5px
1px
#777;
373 a
#inbox-indicator.new-messages:hover::before {
379 0.5px
0.5px
1px
#777;
392 #content > .page-toolbar {
396 #content.user-page > .page-toolbar {
397 grid
-column
: 2 / span
2;
401 /*=--------------------------=*/
402 /*= Page toolbar items (all) =*/
403 /*=--------------------------=*/
406 display
: inline
-block
;
409 .page
-toolbar
> form button
{
414 .page
-toolbar
> form button
::before
{
417 .page
-toolbar
.button
::before
{
418 font
-family
: "Font Awesome", "Font Awesome 5 Free";
420 padding
-right
: 0.3em
;
423 /*=-------------------------------=*/
424 /*= Page toolbar items (specific) =*/
425 /*=-------------------------------=*/
431 .new-private-message
::before
{
435 .logout
-button
::before
{
439 #enable-push-notifications::before {
443 .ignore
-button
::before
{
447 .unignore
-button
::before
{
452 content
: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/rss.svg")) ?>');
453 display
: inline
-block
;
455 padding
-right
: 0.2em
;
460 /*********************/
461 /* TOP PAGINATION UI */
462 /*********************/
466 margin
: 0.25em
0 0 0;
467 padding
: 0.75em
0 0 0;
471 justify
-content
: center
;
476 #top-nav-bar a.disabled {
477 pointer
-events
: none
;
480 #top-nav-bar .page-number {
482 display
: inline
-block
;
485 #top-nav-bar .page-number-label {
488 text
-transform
: uppercase
;
493 #top-nav-bar a::before {
495 display
: inline
-block
;
505 justify
-content
: center
;
508 #content > .sublevel-nav:not(.sort) {
512 .sublevel
-nav
.sublevel
-item
{
514 padding
: 0.125em
0.5em
;
517 .sublevel
-nav
.sublevel
-item
:active
{
520 .sublevel
-nav
.sublevel
-item
.selected
{
524 /***********************/
525 /* SORT ORDER SELECTOR */
526 /***********************/
533 #content > .sublevel-nav.sort {
540 #content.index-page > .sublevel-nav.sort {
546 .sublevel
-nav
.sort
::before
{
554 .sublevel
-nav
.sort
.sublevel
-item
{
560 /*******************************/
561 /* COMMENTS SORT MODE SELECTOR */
562 /*******************************/
564 .comments
> .sublevel
-nav
.sort
{
565 margin
: 1em auto
0 auto
;
567 <?php
fit_content(".comments > .sublevel-nav.sort"); ?
>
578 #width-selector button {
584 background
-repeat
: no
-repeat
;
585 background
-size
: 100%
;
586 background
-origin
: content
-box
;
588 #width-selector button,
589 #width-selector button:active,
590 #width-selector button:focus {
594 #width-selector button:disabled {
597 #width-selector button.select-width-normal {
598 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/normal.gif")) ?>');
600 #width-selector button.select-width-wide {
601 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/wide.gif")) ?>');
603 #width-selector button.select-width-fluid {
604 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/fluid.gif")) ?>');
607 /*=----------------=*/
608 /*= Hover tooltips =*/
609 /*=----------------=*/
611 #width-selector button::after {
612 content
: attr(data
-name
);
621 #width-selector button.selected::after {
622 content
: attr(data
-name
) " (selected)";
624 #width-selector button:hover:not(:active)::after {
629 global $content_width_settings;
630 foreach ($content_width_settings as $name => $setting) {
631 echo "head.content-width-{$name} + body > * {\n max-width: {$setting};\n}\n";
647 #theme-selector:hover {
651 /*=----------------------=*/
652 /*= Theme select buttons =*/
653 /*=----------------------=*/
655 .theme
-selector button
{
660 margin
: 1px
7px
0 7px
;
662 background
-size
: 16px
16px
;
663 background
-origin
: content
-box
;
665 .theme
-selector button
,
666 .theme
-selector button
:hover
,
667 .theme
-selector button
:active
,
668 .theme
-selector button
:focus
{
672 .theme
-selector button
:disabled
{
676 /*=----------------------------=*/
677 /*= Pre-rendered button images =*/
678 /*=----------------------------=*/
679 /* (Each is just a capital letter A through whatever) */
681 .theme
-selector button
:nth
-of
-type(1) {
682 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_A.gif")) ?>');
684 .theme
-selector button
:nth
-of
-type(2) {
685 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_B.gif")) ?>');
687 .theme
-selector button
:nth
-of
-type(3) {
688 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_C.gif")) ?>');
690 .theme
-selector button
:nth
-of
-type(4) {
691 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_D.gif")) ?>');
693 .theme
-selector button
:nth
-of
-type(5) {
694 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_E.gif")) ?>');
696 .theme
-selector button
:nth
-of
-type(6) {
697 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_F.gif")) ?>');
699 .theme
-selector button
:nth
-of
-type(7) {
700 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_G.gif")) ?>');
702 .theme
-selector button
:nth
-of
-type(8) {
703 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_H.gif")) ?>');
705 .theme
-selector button
:nth
-of
-type(9) {
706 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_I.gif")) ?>');
709 /*=------------------------------=*/
710 /*= Theme select button tooltips =*/
711 /*=------------------------------=*/
712 /* (with the name & description of the theme that each button selects) */
714 #theme-selector button {
718 #theme-selector button::before {
719 content
: attr(data
-theme
-name
);
723 padding
: 5px
6px
6px
6px
;
730 #theme-selector:hover button::before {
733 #theme-selector:hover ~ #theme-tweaker-toggle,
734 #theme-selector:active ~ #theme-tweaker-toggle {
738 /************************/
739 /* THEME TWEAKER TOGGLE */
740 /************************/
742 #theme-tweaker-toggle {
747 #theme-tweaker-toggle button {
748 font
-family
: "Font Awesome", "Font Awesome 5 Free";
754 #theme-tweaker-toggle button:hover {
758 /*******************/
759 /* QUICKNAV WIDGET */
760 /*******************/
768 font
-family
: "Font Awesome", "Font Awesome 5 Free";
778 #quick-nav-ui a[href='#comments'].no-comments {
779 pointer
-events
: none
;
784 #content.post-page ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
788 /************************/
789 /* NEW COMMENT QUICKNAV */
790 /************************/
792 #new-comment-nav-ui {
797 #new-comment-nav-ui > * {
801 #new-comment-nav-ui.no-comments {
805 /*=--------------------=*/
806 /*= New comments count =*/
807 /*=--------------------=*/
809 #new-comment-nav-ui .new-comments-count {
817 #new-comment-nav-ui .new-comments-count::selection {
818 background
-color
: transparent
;
820 #new-comment-nav-ui .new-comments-count::after {
826 /*=-----------------------------------=*/
827 /*= Next/previous new comment buttons =*/
828 /*=-----------------------------------=*/
830 #new-comment-nav-ui .new-comment-sequential-nav-button {
832 font
-family
: "Font Awesome", "Font Awesome 5 Free";
837 #new-comment-nav-ui .new-comment-previous {
840 #new-comment-nav-ui .new-comment-next {
843 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
845 pointer
-events
: none
;
848 /*******************/
849 /* HNS DATE PICKER */
850 /*******************/
858 #hns-date-picker:hover,
859 #hns-date-picker:focus-within {
862 #hns-date-picker.no-comments {
866 /*=---------------=*/
867 /*= "Since" label =*/
868 /*=---------------=*/
870 #hns-date-picker span {
873 text
-transform
: uppercase
;
876 /*=--------------------=*/
877 /*= "Since" text field =*/
878 /*=--------------------=*/
880 #hns-date-picker input {
885 box
-shadow
: 0 0 0 1px transparent
;
888 /************************/
889 /* ANTI-KIBITZER TOGGLE */
890 /************************/
892 #anti-kibitzer-toggle {
897 #anti-kibitzer-toggle button {
903 #anti-kibitzer-toggle button::before,
904 #anti-kibitzer-toggle button::after {
905 font
-family
: "Font Awesome", "Font Awesome 5 Free";
907 #anti-kibitzer-toggle button::before {
913 #anti-kibitzer-toggle button::after {
914 content
: "\F007\2004\F164";
918 #anti-kibitzer-toggle.engaged button::before {
922 /************************/
923 /* TEXT SIZE ADJUSTMENT */
924 /************************/
926 #text-size-adjustment-ui {
932 #text-size-adjustment-ui:hover {
936 /* This doesn't work in Mozilla browsers, so hide it */
937 @-moz
-document url
-prefix() {
938 #text-size-adjustment-ui {
947 #text-size-adjustment-ui button {
949 font
-family
: "Font Awesome", "Font Awesome 5 Free";
955 #text-size-adjustment-ui button.default {
956 font
-family
: inherit
;
961 #text-size-adjustment-ui button:disabled {
964 #text-size-adjustment-ui button:disabled:hover {
968 /*=----------------=*/
969 /*= Hover tooltips =*/
970 /*=----------------=*/
972 #text-size-adjustment-ui::after {
973 content
: "Adjust text size";
983 #text-size-adjustment-ui:hover::after {
987 /*******************************/
988 /* COMMENTS VIEW MODE SELECTOR */
989 /*******************************/
991 #comments-view-mode-selector {
997 #comments-view-mode-selector:hover {
1005 #comments-view-mode-selector a {
1007 font
-family
: "Font Awesome", "Font Awesome 5 Free";
1014 #comments-view-mode-selector a.threaded {
1015 transform
: scaleY(-1);
1018 #comments-view-mode-selector a.chrono {
1019 font
-weight
: normal
;
1021 #comments-view-mode-selector a.selected,
1022 #comments-view-mode-selector a:hover {
1024 text
-decoration
: none
;
1026 #comments-view-mode-selector a.selected {
1034 #keyboard-help-overlay {
1037 background
-color
: rgba(0,0,0,0.7);
1044 justify
-content
: center
;
1045 align
-items
: center
;
1046 padding
: 20px
30px
30px
20px
;
1051 #keyboard-help-overlay .keyboard-help-container {
1052 background
-color
: #fff;
1053 filter
: drop
-shadow(4px
4px
2px
#000);
1060 #keyboard-help-overlay .keyboard-help-container h1 {
1062 border
-bottom
: 1px solid
#ddd;
1066 #keyboard-help-overlay .keyboard-help-container .note {
1071 #keyboard-help-overlay .keyboard-help-container .keyboard-shortcuts-lists {
1075 border
-top
: 1px solid
#ddd;
1078 #keyboard-help-overlay .keyboard-help-container ul {
1079 list-style
-type
: none
;
1082 break-inside
: avoid
;
1083 white
-space
: nowrap
;
1085 #keyboard-help-overlay .keyboard-help-container ul:nth-of-type(n+2) {
1088 #keyboard-help-overlay .keyboard-help-container ul li.section {
1090 font
-size
: 1.125rem
;
1093 #keyboard-help-overlay .keyboard-help-container .keys {
1094 margin
: 0 0.5em
0 0;
1096 display
: inline
-block
;
1098 #keyboard-help-overlay .keyboard-help-container .keys code {
1101 #keyboard-help-overlay .keyboard-help-container code {
1102 display
: inline
-block
;
1103 background
-color
: #eee;
1104 border
: 1px solid
#ccc;
1105 padding
: 3px
8px
4px
8px
;
1108 #keyboard-help-overlay .keyboard-help-container code.ak {
1109 background
-color
: #ffeb83;
1110 border
-color
: #d4a500;
1112 #keyboard-help-overlay .keyboard-help-container code.ak::before {
1117 #nav-item-about button.open-keyboard-help {
1120 @media only screen
and (hover
:hover
) and (pointer
:fine
) {
1123 padding
-right
: 0.25em
;
1125 #nav-item-about button.open-keyboard-help {
1126 font
-family
: "Font Awesome", "Font Awesome 5 Free";
1135 background
-color
: transparent
;
1139 #keyboard-help-overlay button.close-keyboard-help {
1143 font
-family
: "Font Awesome", "Font Awesome 5 Free";
1153 margin
: 1.25em
0.5em
0 0.5em
;
1159 .archive
-nav
*[class^
='archive-nav-item'] {
1163 padding
: 6px
4px
4px
4px
;
1166 @-moz
-document url
-prefix() {
1167 .archive
-nav
*[class^
='archive-nav-item'] {
1171 .archive
-nav
-days
.archive
-nav
-item
-day
{
1173 padding
: 7px
0 5px
0;
1176 .archive
-nav
-days
.archive
-nav
-item
-day
:first
-child
{
1185 margin
: 1.25em
0.5em
0 0.5em
;
1191 .archive
-nav
*[class^
='archive-nav-item'] {
1195 padding
: 6px
4px
4px
4px
;
1198 @-moz
-document url
-prefix() {
1199 .archive
-nav
*[class^
='archive-nav-item'] {
1203 .archive
-nav
-days
.archive
-nav
-item
-day
{
1205 padding
: 7px
0 5px
0;
1208 .archive
-nav
-days
.archive
-nav
-item
-day
:first
-child
{
1217 font
-size
: 1.875rem
;
1227 /* Links to link-posts (not the link-post links themselves; that's below) */
1228 h1
.listing
.link
-post
-link + a
{
1229 margin
-left
: 0.25em
;
1232 h1
.listing
.link
-post
-link
{
1235 vertical
-align
: top
;
1240 /*=----------------------=*/
1241 /*= Listing hover reveal =*/
1242 /*=----------------------=*/
1243 /* (On desktops, hover over a multi-line listing to reveal all of it) */
1245 @media only screen
and (min
-width
: 1160px
) {
1248 display
: inline
-block
;
1249 white
-space
: nowrap
;
1250 text
-overflow
: ellipsis
;
1252 border
-bottom
: 1px solid transparent
;
1253 -webkit
-hyphens
: auto
;
1258 padding
: 0 0 1px
1px
;
1260 h1
.listing
.link
-post
-link + a
{
1261 max
-width
: calc(100%
- 40px
);
1264 h1
.listing a
:focus
{
1265 text
-decoration
: dotted underline
;
1266 white
-space
: initial
;
1270 h1
.listing
:focus
-within
::before
{
1272 font
-family
: "Font Awesome", "Font Awesome 5 Free";
1278 /* Adds hysteresis to the hover area (i.e., prevents oscillation due to small
1280 <?php
$margin_of_hover_error = '10px'; ?
>
1282 h1
.listing a
:not(.edit
-post
-link
):hover
::before
{
1285 top
: -<?php
echo $margin_of_hover_error; ?
>;
1286 right
: -<?php
echo $margin_of_hover_error; ?
>;
1287 bottom
: -<?php
echo $margin_of_hover_error; ?
>;
1288 left
: -<?php
echo $margin_of_hover_error; ?
>;
1291 h1
.listing
.link
-post
-link
:hover
{
1292 text
-decoration
: none
;
1296 /*=-----------------------=*/
1297 /*= In-listing edit links =*/
1298 /*=-----------------------=*/
1300 h1
.listing
.edit
-post
-link
{
1305 /*=---------------------------------=*/
1306 /*= Error messages on listing pages =*/
1307 /*=---------------------------------=*/
1312 padding
: 1.25em
0 1.25em
0;
1316 /*********************/
1317 /* LISTING POST-META */
1318 /*********************/
1320 h1
.listing +
.post
-meta
{
1322 justify
-content
: flex
-start
;
1323 margin
: 0 20px
0 21px
;
1326 h1
.listing +
.post
-meta
> * {
1330 h1
.listing +
.post
-meta
.post
-section
{
1335 h1
.listing +
.post
-meta
.post
-section
::before
{
1340 h1
.listing +
.post
-meta
.read
-time
{
1344 /********************/
1345 /* SEQUENCES & TAGS */
1346 /********************/
1348 .sequence
-text
, .tag
-description
{
1353 #content.tag-index-page .tag-description {
1363 h1
.sequence
-chapter
{
1371 .post
-meta +
.comments
{
1379 border
-bottom
: 1px solid
#999;
1380 padding
-bottom
: 1em
;
1384 #content.sequence-page h1 {
1392 /*=---------------------=*/
1393 /*= User's display name =*/
1394 /*=---------------------=*/
1396 #content.user-page h1.page-main-heading {
1397 margin
: 0.25em
0 0 0;
1399 grid
-column
: 1 / span
2;
1403 #content.user-page h1.page-main-heading .user-full-name {
1405 font
-weight
: normal
;
1406 padding
-left
: 0.5em
;
1409 /*=--------------------=*/
1410 /*= User's karma total =*/
1411 /*=--------------------=*/
1413 #content.user-page .user-stats {
1420 #content.user-page .user-stats .karma-type {
1421 white
-space
: nowrap
;
1424 /*=----------------------=*/
1425 /*= Expanded vs. compact =*/
1426 /*=----------------------=*/
1428 #content.user-page #comments-list-mode-selector {
1431 #content.user-page #comments-list-mode-selector button {
1435 /*=----------------------------------------------------=*/
1436 /*= All, Posts, Comments, Drafts, Conversations, Inbox =*/
1437 /*=----------------------------------------------------=*/
1439 #content.user-page .sublevel-nav {
1440 margin
-bottom
: 0.5em
;
1443 /*=--------------=*/
1444 /*= User's posts =*/
1445 /*=--------------=*/
1447 #content.user-page h1.listing {
1448 margin
: 0.5em
0 0 0;
1451 #content.user-page .user-bio :first-child {
1459 /*=----------------------=*/
1460 /*= List of participants =*/
1461 /*=----------------------=*/
1463 #content.conversation-page .conversation-participants {
1464 grid
-column
: 2 / span
2;
1466 margin
: 0.5em
0 0 0;
1468 .post
-meta
> .conversation
-participants
{
1469 white
-space
: normal
;
1471 .conversation
-participants ul
,
1472 .conversation
-participants li
{
1473 list-style
-type
: none
;
1474 display
: inline
-block
;
1478 .conversation
-participants li
{
1479 margin
-left
: 0.375em
;
1481 .conversation
-participants li
:not(:last
-of
-type
)::after
{
1485 /*=-------------------------=*/
1486 /*= Posting controls (form) =*/
1487 /*=-------------------------=*/
1489 #content.conversation-page .posting-controls {
1492 #content.conversation-page .post-meta-fields {
1495 flex
-flow
: row wrap
;
1497 .posting
-controls
.standalone textarea
{
1498 margin
-top
: 0.375em
;
1500 .posting
-controls
.standalone form
{
1503 #content.conversation-page .posting-controls.standalone form {
1504 padding
: 0 1em
3em
1em
;
1506 .posting
-controls
.standalone input
[type
='text'],
1507 .posting
-controls
.standalone label
{
1510 .posting
-controls
.standalone label
{
1514 border
: 1px solid transparent
;
1516 .posting
-controls
.standalone input
[type
='text'] {
1517 width
: calc(100%
- 4em
);
1520 .posting
-controls
.standalone input
[type
='submit'] {
1523 .posting
-controls
.standalone
#markdown-hints-checkbox ~ label {
1524 white
-space
: nowrap
;
1526 .posting
-controls
.standalone
#markdown-hints {
1527 top
: calc(100% +
2em
);
1530 /*=--------------------=*/
1531 /*= Conversation title =*/
1532 /*=--------------------=*/
1534 #content.conversation-page h1.page-main-heading {
1544 #content.conversation-page > ul.comment-thread:last-of-type {
1548 /******************/
1549 /* SEARCH RESULTS */
1550 /******************/
1552 #content.search-results-page h1.listing,
1553 #content.sequence-page h1.listing,
1554 #content.post-page h1.listing {
1566 flex
-flow
: row wrap
;
1569 .login
-container form
{
1572 grid
-row
-gap
: 0.5em
;
1573 align
-content
: start
;
1575 .login
-container form label
{
1577 padding
: 0.25em
0.5em
;
1578 white
-space
: nowrap
;
1581 .login
-container form input
{
1585 .login
-container form input
[type
='submit'],
1586 .login
-container form a
{
1588 justify
-self
: center
;
1590 .login
-container form input
[type
='submit'] {
1594 margin
: 0.5em
0 0 0;
1596 .login
-container form h1
{
1602 /* “Log in” form */
1605 grid
-template
-columns
: 5.5em
1fr
;
1606 padding
: 0.5em
2em
0.5em
0;
1609 /* “Create account” form */
1613 grid
-template
-columns
: 8.5em
1fr
;
1614 padding
: 0.5em
1em
1em
1em
;
1619 #signup-form input[type='submit'] {
1620 padding
: 0.4em
0.5em
0.5em
0.5em
;
1625 .login
-container
.login
-tip
{
1626 padding
: 0.5em
0.5em
0.5em
3em
;
1627 margin
: 2em
4em
0 4em
;
1631 .login
-container
.login
-tip span
{
1637 #content.login-page .error-box {
1638 margin
: 1.5em
0.875em
-1.5em
0.875em
;
1640 .error
-box
, .success
-box
{
1645 /***********************/
1646 /* PASSWORD RESET PAGE */
1647 /***********************/
1649 .reset
-password
-container
{
1652 .reset
-password
-container input
[type
='submit'] {
1653 padding
: 0.2em
0.5em
;
1656 .reset
-password
-container input
{
1660 .reset
-password
-container label
{
1661 display
: inline
-block
;
1664 .reset
-password
-container form
> div
{
1667 .reset
-password
-container
.action
-container
{
1671 .reset
-password
-container
.error
-box
{
1676 /*********************/
1677 /* TABLE OF CONTENTS */
1678 /*********************/
1684 margin
: 1.25em
0 0.75em
1.25em
;
1685 padding
: 7px
14px
10px
10px
;
1690 .collection
-page
.contents
{
1696 margin
-bottom
: 0.25em
;
1699 .body
-text
.contents ul
{
1700 list-style
-type
: none
;
1701 margin
: 0 0 0 0.5em
;
1702 counter
-reset
: toc
-item
-1 toc
-item
-2 toc
-item
-3;
1706 .body
-text
.contents li
{
1707 margin
: 0.15em
0 0.3em
1em
;
1713 .body
-text
.contents li
::before
{
1720 .contents
.toc
-item
-1 {
1721 counter
-increment
: toc
-item
-1;
1722 counter
-reset
: toc
-item
-2 toc
-item
-3;
1724 .contents
.toc
-item
-1::before
{
1725 content
: counter(toc
-item
-1);
1727 .contents
.toc
-item
-1 ~
.toc
-item
-2 {
1731 .contents
.toc
-item
-2 {
1732 counter
-increment
: toc
-item
-2;
1733 counter
-reset
: toc
-item
-3;
1735 .contents
.toc
-item
-1 ~
.toc
-item
-2::before
{
1736 content
: counter(toc
-item
-1) "." counter(toc
-item
-2);
1738 .contents
.toc
-item
-2::before
{
1739 content
: counter(toc
-item
-2);
1741 .contents
.toc
-item
-1 +
.toc
-item
-3 {
1742 counter
-increment
: toc
-item
-2 toc
-item
-3;
1744 .contents
.toc
-item
-2 ~
.toc
-item
-3,
1745 .contents
.toc
-item
-1 ~
.toc
-item
-3 {
1749 .contents
.toc
-item
-1 ~
.toc
-item
-2 ~
.toc
-item
-3 {
1753 .contents
.toc
-item
-3 {
1754 counter
-increment
: toc
-item
-3;
1756 .contents
.toc
-item
-1 ~
.toc
-item
-2 ~
.toc
-item
-3::before
{
1757 content
: counter(toc
-item
-1) "." counter(toc
-item
-2) "." counter(toc
-item
-3);
1759 .contents
.toc
-item
-1 ~
.toc
-item
-3::before
{
1760 content
: counter(toc
-item
-1) "." counter(toc
-item
-3);
1762 .contents
.toc
-item
-2 ~
.toc
-item
-3::before
{
1763 content
: counter(toc
-item
-2) "." counter(toc
-item
-3);
1765 .contents
.toc
-item
-3::before
{
1766 content
: counter(toc
-item
-3);
1768 .contents
.toc
-item
-4,
1769 .contents
.toc
-item
-5,
1770 .contents
.toc
-item
-6 {
1774 .contents
.collapsed
{
1775 margin
-bottom
: 0.25em
;
1777 padding
-right
: 1.75em
;
1780 .contents
.collapsed
.contents
-head
{
1783 .contents
.collapsed
.contents
-list {
1787 .contents
.toc
-collapse
-toggle
-button
{
1791 font
-family
: "Font Awesome", "Font Awesome 5 Free";
1796 .contents
.toc
-collapse
-toggle
-button
:active
{
1797 transform
: translateX(1px
) translateY(1px
);
1800 .contents
.collapsed
.toc
-collapse
-toggle
-button
{
1801 width
: calc(100%
- 3px
);
1802 height
: calc(100%
- 2px
);
1803 background
-color
: transparent
;
1805 justify
-content
: flex
-end
;
1806 align
-items
: flex
-start
;
1810 /********************/
1811 /* POSTS & COMMENTS */
1812 /********************/
1816 display
: inline
-block
;
1818 font
-size
: 1.0625em
;
1821 overflow
-wrap
: break-word
;
1822 text
-align
: justify
;
1827 .retracted
.body
-text
{
1828 text
-decoration
: line
-through
;
1832 word
-break: break-all
;
1835 .body
-text a
:not([href
]),
1836 .body
-text a
:not([href
]):hover
,
1837 .body
-text a
:not([href
])::before
,
1838 .body
-text a
:not([href
])::after
{
1839 text
-decoration
: none
;
1851 flex
-flow
: row wrap
;
1852 justify
-content
: center
;
1854 .post
-meta
.lw2
-link
{
1859 .post
-meta
.post
-section
::before
{
1862 .post
-meta
.post
-section
{
1867 .post
-meta
.post
-section
::before
,
1868 .comment
-meta
.alignment
-forum
{
1869 visibility
: visible
;
1870 font
-family
: "Font Awesome", "Font Awesome 5 Free";
1873 .post
-section
.frontpage
::before
{
1876 .post
-section
.featured
::before
{
1879 .post
-section
.meta
::before
{
1882 .post
-section
.events
::before
{
1885 .post
-section
.personal
::before
{
1888 .post
-section
.draft
::before
{
1891 .post
-section
.alignment
-forum
::before
,
1892 .comment
-meta
.alignment
-forum
{
1894 font
-family
: Concourse
, 'Changa One';
1897 /*= Karma controls hover tooltips =*/
1899 @media only screen
and (pointer
: fine
) {
1900 .post
.voting
-controls
,
1901 .comment
-item
.voting
-controls
{
1904 .post
.karma
.active
-controls
::after
,
1905 .comment
-item
.karma
.active
-controls
::after
{
1906 content
: "Double-click for strong vote";
1908 pointer
-events
: none
;
1913 white
-space
: normal
;
1915 font
-size
: 0.875rem
;
1917 transition
: opacity
0.2s ease
;
1919 .post
.voting
-controls
.active
-controls
:hover
::after
,
1920 .comment
-item
.voting
-controls
.active
-controls
:hover
::after
{
1924 .post
.voting
-controls
.karma
-value
::after
,
1925 .comment
-item
.voting
-controls
.karma
-value
::after
{
1926 content
: attr(title
);
1928 pointer
-events
: none
;
1931 transform
: translateX(-50%
);
1932 white
-space
: pre
-wrap
;
1935 font
-size
: 0.875rem
;
1938 transition
: opacity
0.2s ease
;
1940 .post
.voting
-controls
.agreement
.karma
-value
:hover
::after
,
1941 .comment
-item
.voting
-controls
.agreement
.karma
-value
:hover
::after
{
1945 .post
.voting
-controls
.karma
-value
:hover
::after
,
1946 .comment
-item
.voting
-controls
.karma
-value
:hover
::after
{
1949 .post
.voting
-controls
.waiting
.karma
-value
:hover
::after
,
1950 .comment
-item
.voting
-controls
.waiting
.karma
-value
:hover
::after
{
1953 .comment
-item
.voting
-controls
.karma
-value
:hover
::after
{
1960 .author
:not(.redacted
)::before
{
1961 content
: attr(data
-full
-name
);
1963 pointer
-events
: none
;
1968 transform
: translateX(-50%
);
1969 white
-space
: nowrap
;
1971 font
-size
: 0.875rem
;
1972 font
-weight
: normal
;
1974 transition
: opacity
0.2s ease
;
1977 .author
:hover
::before
{
1996 margin
: 0.5em
0 0 0;
1999 margin
: 1.1em
0 0.35em
0;
2010 .post
.top
-post
-meta
:last
-child
{
2011 margin
-bottom
: 40px
;
2013 .post
.bottom
-post
-meta
{
2018 border
-style
: solid
;
2019 border
-width
: 1px
0;
2032 .event
-info
.map
::before
{
2035 padding
-bottom
: 50%
;
2038 .event
-info
.map iframe
{
2041 border
: 1px solid
#000;
2053 /*******************/
2054 /* POST NAVIGATION */
2055 /*******************/
2059 grid
-template
: 100%
/ 32%
36%
32%
;
2060 grid
-template
-areas
:
2066 justify
-content
: flex
-end
;
2074 border
-top
: 1px solid transparent
;
2076 .post
-nav
.prev
.post
-nav
-title
,
2077 .post
-nav
.next
.post
-nav
-title
{
2078 border
-bottom
: 1px solid transparent
;
2082 align
-items
: center
;
2086 .sequence
-title
.post
-nav
-title
{
2092 align
-items
: flex
-start
;
2094 .post
-nav
.prev
.post
-nav
-title
::before
{
2095 content
: "\F0D9\2005";
2100 align
-items
: flex
-end
;
2102 .post
-nav
.prev
.post
-nav
-label
,
2103 .post
-nav
.next
.post
-nav
-label
{
2106 .post
-nav
.next
.post
-nav
-title
::after
{
2107 content
: "\2004\F0DA";
2109 .post
-nav
.prev
.post
-nav
-title
::before
,
2110 .post
-nav
.next
.post
-nav
-title
::after
{
2111 font
-family
: Font Awesome
;
2113 vertical
-align
: text
-bottom
;
2120 @media only screen
and (max
-width
: 900px
) {
2123 grid
-template
: auto auto
/ 50%
50%
;
2124 grid
-template
-areas
:
2128 .post
-nav
.prev
.post
-nav
-title
,
2129 .post
-nav
.next
.post
-nav
-title
{
2130 border
-bottom
: none
;
2141 @media only screen
and (max
-width
: 520px
) {
2142 .post
-nav
-links +
.comments
{
2147 .related
-posts
, .related
-post
-group
{
2148 padding
-bottom
: 1em
;
2150 .related
-post
-type
{
2154 margin
-bottom
: -0.5em
;
2155 list-style
-type
: disc
;
2156 margin
-left
: -0.5em
;
2159 .related
-post
-type
::before
{
2162 font
-weight
: normal
;
2163 margin
-right
: 0.15em
;
2165 vertical
-align
: baseline
;
2168 .related
-posts
.post
-type
-prefix
{
2181 .post
.link
-post
> .post
-body
> p
:first
-child
{
2184 margin
: 0.5em
0 0 0;
2186 .post
.link
-post
> .post
-body
> p
:only
-child
{
2190 .post
.link
-post a
.link
-post
-link
::before
{
2192 font
-family
: "Font Awesome", "Font Awesome 5 Free";
2197 margin
-right
: 0.25em
;
2217 pointer
-events
: none
;
2220 list-style
-type
: none
;
2224 .comments
.comment
-thread
> li
{
2227 #content > #top-nav-bar + .comment-thread .comment-item {
2234 .comment
-item
.comment
-item
{
2235 margin
: 1em
8px
8px
16px
;
2237 .comment
-item
.comment
-item +
.comment
-item
{
2238 margin
: 2em
8px
8px
16px
;
2247 list-style
-type
: circle
;
2249 .comment
-body
> *:first
-child
{
2252 .comment
-body
> *:last
-child
{
2256 .comments
-empty-message
{
2259 padding
: 0.75em
0 0.9em
0;
2263 /**********************************/
2264 /* DEEP COMMENT THREAD COLLAPSING */
2265 /**********************************/
2267 .comment
-item
> input
[id^
="expand"] {
2270 .comment
-item
> input
[id^
="expand"] + label
{
2276 .comment
-item
> input
[id^
="expand"] + label
::after
{
2277 content
: "(Expand " attr(data
-child
-count
) " below)";
2278 visibility
: visible
;
2281 white
-space
: nowrap
;
2284 .comment
-item
> input
[id^
="expand"]:checked + label
::after
{
2285 content
: "(Collapse " attr(data
-child
-count
) " below)";
2287 .comment
-item
> input
[id^
="expand"] ~
.comment
-thread
{
2291 .comment
-item
> input
[id^
="expand"] ~
.comment
-thread
> li
:first
-child
{
2294 .comment
-item
> input
[id^
="expand"]:checked ~
.comment
-thread
{
2295 max
-height
: 1000000px
;
2298 .comment
-item
> input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
2301 .comment
-item
> input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item a
.comment
-parent
-link
:hover
::after
{
2309 .backlinks
> input
{
2313 .backlinks
> label
{
2320 .backlinks
> label
::before
{
2322 border
-left
: 5px solid currentColor
;
2323 border
-top
: 5px solid transparent
;
2324 border
-bottom
: 5px solid transparent
;
2325 transition
: transform
0.25s ease
-out
;
2326 transform
-origin
: 29%
55%
;
2327 display
: inline
-block
;
2328 padding
-right
: 0.5em
;
2331 .backlinks
> input
:checked + label
::before
{
2332 transform
: rotate(90deg
);
2341 perspective
-origin
: top
;
2342 transform
: perspective(100em
) rotateX(-90deg
);
2343 transform
-origin
: center top
;
2346 margin
-bottom
: 0.5em
;
2349 .backlinks
> input
:checked ~ ul
{
2351 transform
: perspective(100em
) rotateX(0deg
);
2352 transition
: transform
0.25s ease
-in
, opacity
0.25s ease
-in
;
2361 padding
: 2px
24px
2px
10px
;
2365 flex
-flow
: row wrap
;
2366 align
-items
: baseline
;
2368 .user
-page
.comment
-meta
,
2369 .conversation
-page
.comment
-meta
{
2370 padding
-right
: 10px
;
2372 .comment
-meta
.comment
-post
-title
{
2375 text
-overflow
: ellipsis
;
2376 white
-space
: nowrap
;
2379 .conversation
-page
.comment
-meta
.comment
-post
-title
{
2384 display
: none
; /* Not sure if we need to display this... */
2386 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
2387 content
: "\2004(OP)";
2391 /*****************************/
2392 /* COMMENT THREAD NAVIGATION */
2393 /*****************************/
2395 a
.comment
-parent
-link
:not(.inline
-author
),
2396 a
.comment
-parent
-link
.inline
-author
::before
{
2399 a
.comment
-parent
-link
:hover
{
2402 a
.comment
-parent
-link
::before
{
2404 font
-family
: "Font Awesome", "Font Awesome 5 Free";
2411 padding
: 3px
3px
0 3px
;
2413 height
: calc(100% +
2px
);
2417 a
.comment
-parent
-link
::after
{
2422 width
: calc(100% +
26px
);
2423 height
: calc(100% +
38px
);
2426 pointer
-events
: none
;
2430 a
.comment
-parent
-link
:hover
::after
{
2431 visibility
: visible
;
2434 .comment
-child
-links
{
2437 .comment
-child
-link
{
2439 display
: inline
-block
;
2441 .comment
-child
-link
::before
{
2443 display
: inline
-block
;
2455 pointer
-events
: none
;
2457 .comment
-popup
.comment
-parent
-link
{
2460 .comment
-popup
.comment
-body
{
2461 font
-size
: 1.0625rem
;
2464 .comment
-item
.depth
-odd
{
2465 --GW
-comment
-background
-color
: var(--GW
-comment
-background
-color
-odd
);
2466 --GW
-comment
-parent
-background
-color
: var(--GW
-comment
-background
-color
-even
);
2468 .comment
-item
.depth
-even
{
2469 --GW
-comment
-background
-color
: var(--GW
-comment
-background
-color
-even
);
2470 --GW
-comment
-parent
-background
-color
: var(--GW
-comment
-background
-color
-odd
);
2473 .comment
-item
:target
{
2474 --GW
-comment
-background
-color
: var(--GW
-comment
-background
-color
-target
);
2476 .comment
-item
:target
> .comment
-thread
> .comment
-item
{
2477 --GW
-comment
-parent
-background
-color
: var(--GW
-comment
-background
-color
-target
);
2480 /**********************/
2481 /* COMMENT PERMALINKS */
2482 /**********************/
2483 /********************/
2484 /* COMMENT LW LINKS */
2485 /********************/
2487 .comment
-meta
.permalink
::before
,
2488 .comment
-meta
.lw2
-link
::before
,
2489 .individual
-thread
-page a
.comment
-parent
-link
:empty::before
{
2491 display
: inline
-block
;
2498 0 0 0 3px transparent
;
2500 background
-size
: 100%
;
2505 .comment
-meta
.permalink
::before
{
2506 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-white-on-blue.gif")) ?>');
2508 .comment
-meta
.lw2
-link
::before
{
2509 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-white-on-blue.gif")) ?>');
2511 .individual
-thread
-page a
.comment
-parent
-link
:empty::before
{
2513 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-white-on-blue.gif")) ?>');
2515 .comment
-meta
.permalink
:hover
::before
{
2516 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-blue-on-white.gif")) ?>');
2518 .comment
-meta
.lw2
-link
:hover
::before
{
2519 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-blue-on-white.gif")) ?>');
2521 .individual
-thread
-page a
.comment
-parent
-link
:empty:hover
::before
{
2522 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-blue-on-white.gif")) ?>');
2524 .comment
-meta
.permalink
:hover
::before
,
2525 .comment
-meta
.lw2
-link
:hover
::before
,
2526 .individual
-thread
-page a
.comment
-parent
-link
:empty:hover
::before
{
2529 0 0 0 3px transparent
;
2533 .comment
-meta
.permalink
:active
::before
,
2534 .comment
-meta
.lw2
-link
:active
::before
,
2535 .individual
-thread
-page a
.comment
-parent
-link
:empty:active
::before
{
2536 transform
: scale(0.9);
2539 .comment
-meta
.permalink
,
2540 .comment
-meta
.lw2
-link
,
2541 .individual
-thread
-page
.comment
-parent
-link
:empty {
2545 .comment
-meta
.permalink
::after
,
2546 .comment
-meta
.lw2
-link
::after
,
2547 .individual
-thread
-page
.comment
-parent
-link
:empty::after
{
2556 pointer
-events
: auto
;
2557 visibility
: visible
;
2560 /*************************/
2561 /* COMMENTS COMPACT VIEW */
2562 /*************************/
2564 #comments-list-mode-selector,
2565 #content.index-page #comments-list-mode-selector,
2566 #content.user-page #comments-list-mode-selector {
2571 justify
-self
: start
;
2574 #comments-list-mode-selector button {
2581 background
-repeat
: no
-repeat
;
2582 background
-size
: 100%
;
2583 background
-origin
: content
-box
;
2585 #comments-list-mode-selector button:disabled {
2588 #comments-list-mode-selector button.expanded {
2589 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/expanded_2x.gif")) ?>');
2591 #comments-list-mode-selector button.compact {
2592 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/compact_2x.gif")) ?>');
2594 @media only screen
and (max
-resolution
: 1dppx
) {
2595 #comments-list-mode-selector button.expanded {
2596 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/expanded_1x.gif")) ?>');
2598 #comments-list-mode-selector button.compact {
2599 background
-image
: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/compact_1x.gif")) ?>');
2603 #content > ul.comment-thread > li.comment-item,
2604 #content.compact > ul.comment-thread > li.comment-item {
2608 #content > .comment-thread {
2611 #content.compact > .comment-thread {
2612 font
-size
: 0.9375rem
;
2615 #content.compact > .comment-thread:hover {
2618 #content.compact > .comment-thread .comment-body {
2619 font
-size
: 1.0625rem
;
2621 #content.compact > .comment-thread .comment-item,
2622 #content.index-page .comment-item.ignored,
2623 #content.inbox-user-page .comment-item.ignored {
2629 #content.compact > .comment-thread .comment-item {
2630 pointer
-events
: none
;
2632 #content.compact > .comment-thread .comment-item::after {
2639 padding
: 0 16px
10px
64px
;
2640 pointer
-events
: auto
;
2642 @media only screen
and (hover
: hover
) {
2643 #content.compact:not(:focus-within) > .comment-thread .comment-item:hover,
2644 #content.compact > .comment-thread .comment-item.expanded {
2646 pointer
-events
: auto
;
2650 @media only screen
and (hover
: none
) {
2651 #content.compact > .comment-thread.expanded .comment-item {
2653 pointer
-events
: auto
;
2657 #content.compact > .comment-thread .comment-item .comment-meta {
2658 white
-space
: nowrap
;
2660 text
-overflow
: ellipsis
;
2663 #content.compact > .comment-thread .comment-item:hover .comment-meta {
2666 #content.compact > .comment-thread .comment-item .comment-meta a {
2667 pointer
-events
: auto
;
2669 #content.compact > .comment-thread .comment-item .comment-meta .comment-post-title {
2672 #content.compact > .comment-thread .comment-item .comment-meta .voting-controls + .comment-post-title {
2673 margin
-left
: 0.75em
;
2675 @media only screen
and (hover
: hover
) {
2676 #content.compact > .comment-thread:last-of-type .comment-item:hover,
2677 #content.compact > .comment-thread:last-of-type .comment-item.expanded {
2680 #content.compact > .comment-thread .comment-item:hover .comment,
2681 #content.compact > .comment-thread .comment-item.expanded .comment {
2687 #content.compact > .comment-thread .comment-item:hover .comment::before,
2688 #content.compact > .comment-thread .comment-item.expanded .comment::before{
2692 width
: calc(100% +
20px
);
2693 height
: calc(100% +
20px
);
2698 #content.compact > .comment-thread:last-of-type .comment-item:hover .comment,
2699 #content.compact > .comment-thread:last-of-type .comment-item.expanded .comment{
2703 @media only screen
and (hover
: none
) {
2704 #content.compact > .comment-thread.expanded:last-of-type .comment-item {
2707 #content.compact > .comment-thread.expanded .comment-item .comment {
2713 #content.compact > .comment-thread.expanded .comment-item .comment::before {
2717 width
: calc(100% +
14px
);
2718 height
: calc(100% +
20px
);
2723 #content.compact > .comment-thread.expanded:last-of-type .comment-item .comment {
2726 #content.compact > .comment-thread.expanded .comment-item .comment::after {
2735 background
-color
: rgba(0,0,0,0.5);
2739 /*****************************/
2740 /* HIGHLIGHTING NEW COMMENTS */
2741 /*****************************/
2743 .new-comment
::before
{
2749 pointer
-events
: none
;
2752 /***********************************/
2753 /* COMMENT THREAD MINIMIZE BUTTONS */
2754 /***********************************/
2756 .comment
-minimize
-button
{
2757 font
-family
: "Font Awesome", "Font Awesome 5 Free";
2768 .comment
-minimize
-button
:active
{
2769 transform
: scale(0.9);
2771 .comment
-minimize
-button
::after
{
2772 content
: attr(data
-child
-count
);
2773 font
-weight
: normal
;
2774 font
-size
: 0.8125rem
;
2781 #content.individual-thread-page .comment-minimize-button {
2789 #content.comment-thread-page .comment-item.ignored {
2793 .comment
-item
.ignored
> .comment
> .comment
-meta
> .author
{
2794 text
-decoration
: line
-through
;
2797 /***********************************/
2798 /* INDIVIDUAL COMMENT THREAD PAGES */
2799 /***********************************/
2801 .individual
-thread
-page
> h1
{
2803 margin
: 0.75em
0 3px
0;
2805 .individual
-thread
-page
.comments
{
2813 .shortform
-index
-page
.comments
::before
{
2818 .shortform
-index
-page
.comments
> .comment
-thread
> .comment
-item
:first
-child
{
2830 font
-family
: "Font Awesome", "Font Awesome 5 Free";
2840 @keyframes waiting
{
2841 0%
{background
-position
: 200%
0%
}
2842 100%
{background
-position
: 0%
0%
}
2845 .voting
-controls
.karma
-value
{
2847 transition
: opacity
0.5s linear
;
2850 .voting
-controls
.waiting
.karma
-value
{
2852 background
: repeat
-x linear
-gradient(70deg
, #000 50%, #fff 75%, #000);
2853 background
-clip
: text
;
2854 -webkit
-background
-clip
: text
;
2856 background
-position
: 200%
0%
;
2857 background
-size
: 200%
100%
;
2858 animation
: waiting
1s linear infinite
;
2861 /* Replicated karma controls at bottom of comments. */
2862 .comment
-controls
.voting
-controls
{
2864 font
-size
: 0.9375em
;
2867 .comment
-controls
.voting
-controls
:first
-of
-type
{
2871 /*****************************/
2872 /* COMMENTING AND POSTING UI */
2873 /*****************************/
2877 margin
: 0 8px
8px
16px
;
2881 .comment
-thread
.comment
-controls +
.comment
-thread
> li
:first
-child
{
2884 .comments
> .comment
-controls
{
2887 .comments
> .comment
-controls
:last
-child
{
2888 margin
: 8px
0 16px
0;
2891 .posting
-controls input
[type
='submit'] {
2894 font
-size
: 1.125rem
;
2897 .comment
-controls
.cancel
-comment
-button
{
2903 padding
: 4px
8px
2px
4px
;
2906 .comment
-controls
.cancel
-comment
-button
::before
{
2907 font
-family
: "Font Awesome", "Font Awesome 5 Free";
2915 .comment +
.comment
-controls
.action
-button
{
2916 font
-weight
: normal
;
2917 font
-size
: 1.0625em
;
2920 .comment
-controls
.action
-button
::before
{
2921 font
-family
: "Font Awesome", "Font Awesome 5 Free";
2924 .new-comment
-button
{
2928 .comment
-controls
.reply
-button
::before
{
2934 .comment
-meta
.replied
::before
{
2936 font
-family
: "Font Awesome", "Font Awesome 5 Free";
2945 margin
: 0.75em
0 0 0;
2950 display
: inline
-block
;
2951 margin
-bottom
: 0.25em
;
2952 font
-size
: 1.125rem
;
2954 .edit
-post
-link
::before
{
2955 margin
-right
: 0.3em
;
2957 .comment
-controls
.edit
-button
::before
,
2958 .edit
-post
-link
::before
{
2960 font
-family
: "Font Awesome", "Font Awesome 5 Free";
2967 .comment
-controls
.delete
-button
{
2968 margin
-right
: 0.25em
;
2970 .comment
-controls
.edit
-button
,
2971 .comment
-controls
.retract
-button
,
2972 .comment
-controls
.unretract
-button
{
2975 .comment
-controls
.retract
-button
::before
{
2979 .comment
-controls
.unretract
-button
::before
{
2983 .comment
-controls
.delete
-button
::before
{
2987 .comment
-controls
.retract
-button
::before
,
2988 .comment
-controls
.unretract
-button
::before
,
2989 .comment
-controls
.delete
-button
::before
{
2994 .comment
-controls form
{
2997 .textarea
-container
{
3000 .posting
-controls textarea
{
3005 max
-height
: calc(100vh
- 6em
);
3009 border
-style
: solid
;
3010 border
-width
: 29px
1px
1px
1px
;
3014 /* GUIEdit buttons */
3016 .guiedit
-buttons
-container
{
3020 width
: calc(100%
- 2px
);
3023 padding
: 1px
4px
0 4px
;
3026 .comment
-thread
-page
.guiedit
-buttons
-container
{
3027 padding
-right
: 60px
;
3029 .guiedit
-buttons
-container button
{
3033 font
-size
: 0.875rem
;
3037 .guiedit
-buttons
-container button
:active
{
3040 .guiedit
-buttons
-container button
:active div
{
3041 transform
: scale(0.9);
3043 .guiedit
-buttons
-container button sup
{
3047 content
: attr(data
-tooltip
);
3049 font
-weight
: normal
;
3055 white
-space
: nowrap
;
3058 .guiedit
:hover
::after
{
3059 visibility
: visible
;
3062 /* Markdown hints */
3064 .posting
-controls
.markdown
-reference
-link
{
3066 padding
: 1px
0 0 6px
;
3068 .posting
-controls
.markdown
-reference
-link a
{
3069 padding
-right
: 1.5em
;
3070 margin
-right
: 0.15em
;
3071 background
-image
: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAQAAABNTyozAAAEDklEQVR4Ae3cY3QDjRaG0V1e27Zt27Zt27Ztf7Zt27Zt10jOdZtZzbSN2q41533+tsFO4zRi0TKRJVACJdDiJVACJVACJVACZQmUQAmUQAmUQAmUQFkCJVACJVACJVACJVDWuD7P8icnGRcVbdyJ/uRZ+jTZYxwq/lN2qMcozvtMibmySe/TsPeqi0JZ3XsAHm1SZAua9CjgoMQo6UB4uiim5gbXV7Ab1EQxT+P3RRw/dHtV3e39UL3g8XuOEw39QNX3g4LHcYwU/n5uo+q7beGKNqLwJ3U1cteKuepEQ1cid03BJIESKIESKIESKIESaIkl0I3dv7Q7a293c//ShrWym7l/abdbGaCnidJGPFzre6opUdqDtLJXitJ+svpA4Uy30dru6hJRHaCws37L37CDRbWAwvctf38S1QOqe43l7f2iikDheg+x9J5ksqpA4TS3svju5CJRXaCwvX7lG3KAqDZQ+Jby/U4kUM0rNN+7hAQSrvNAC/c4Ewn0/052C8Xd0fkigebbRp/5DdpHJFCxr5nfr4QEUqzmJYC3iQRq1jXuj8cYT6CyTnAv54oEKm9EJFBnJVAC7eoS0XJn2r8qQP/wNFOipUY8wvbVAeIjooXq3ki1gPhHC0A/oWWgQZ/37ZI2FaUdVPpb33LHlQS6scPFstrDQBtAvEpNdLEfsZJA3N3lYsnOcTvaAuKzomttqW+lgXimabFoYx5N20D8SXSlw9yElQfiE0J5dW+lI6BBu4uOO8+dWB0g1hel/YIOgbiVE0VHXefhrB7QTRwtmra3gS4AcW+Xibab8SJWE4h7uaLpn/Ud6AoQTzIu2uzDrDYQzzUjCo17HF0D4g3qoo1+yWoCld8hv5OuAvFl0XLb6V8rQGws5votXQfqs45oqaPdjLUDdNO5f7Xa32APgBhu6b2SC92VtQTEfVwlXOhO9ASI2zhNLKsRj2atAfFCo55Iz4C4nyvFks16OWsRiPvQUyCeblIs0adYq0B6DsTb1EV5fk+1gfiWKG0XAwnUZyPRtOPdggTiRg4UC7rEPUkg4PbOFIXGPIEEmt+DCmeu5rUkUHHPaXj76Qsk0MK9R/ynv5FAzfdDYS9Da+n/xe6ovd2lS/8vVlyfH7o1vQLKJVACJVACJVACJVACIYGW/A6z/A6zG8RcNbdT9d1eTcx1A8eKhn6s6vtxweNYfisaqvupu+jXV8H63cXP1Asev+Wpopi6aVMVbFpdFPMUlP6jdrY/8AgTYkHZhEcAvFNdFMpq3qFh78y/okIT3qk4j8zborn290hN91S/c6zrzapVsFnXO9bvPFXjYtEykSVQAnVUAiVQAiVQAiVQAiVQlkAJlEAJlEAJlEAJlCVQAiVQAiVQAiVQAmX/BMHb3CdNrgcrAAAAAElFTkSuQmCC');
3072 background
-size
: 1.25em
;
3073 background
-repeat
: no
-repeat
;
3074 background
-position
: right center
;
3077 #markdown-hints-checkbox + label {
3079 margin
: 2px
0 0 1em
;
3083 #edit-post-form #markdown-hints-checkbox + label {
3086 #markdown-hints-checkbox {
3090 #markdown-hints-checkbox + label::after {
3091 content
: "(Show Markdown help)";
3093 #markdown-hints-checkbox:checked + label::after {
3094 content
: "(Hide Markdown help)";
3096 #markdown-hints-checkbox + label::before {
3098 font
-family
: "Font Awesome", "Font Awesome 5 Free";
3102 #markdown-hints-checkbox:checked + label::before {
3103 font
-weight
: normal
;
3106 margin
: 4px
0 0 4px
;
3110 top
: calc(100%
- 1em
);
3114 .comment
-controls
#markdown-hints {
3115 top
: calc(100% +
1.75em
);
3117 #markdown-hints-checkbox:checked ~ #markdown-hints {
3120 .markdown
-hints
-row
{
3123 #markdown-hints .markdown-hints-row span,
3124 #markdown-hints .markdown-hints-row code {
3126 display
: table
-cell
;
3128 background
-color
: inherit
;
3129 padding
: 0 12px
0 0;
3132 /******************/
3133 /* EDIT POST FORM */
3134 /******************/
3137 padding
: 1em
1em
4em
1em
;
3139 #edit-post-form .post-meta-fields {
3141 grid
-template
-columns
: 5em auto auto auto
1fr auto
;
3142 margin
-bottom
: 0.625em
;
3145 #edit-post-form label[for='title'],
3146 #edit-post-form label[for='url'],
3147 #edit-post-form label[for='section'] {
3150 #edit-post-form input[type='text'] {
3152 grid
-column
: 2 / span
4;
3153 margin
-bottom
: 0.5em
;
3156 #edit-post-form .link-post-checkbox,
3157 #edit-post-form .link-post-checkbox + label {
3161 #edit-post-form .question-checkbox,
3162 #edit-post-form .question-checkbox + label {
3165 justify
-self
: start
;
3169 #edit-post-form .post-meta-fields label[for="submit-to-frontpage"] {
3171 grid
-column
: 2 / span
4;
3176 #edit-post-form .post-meta-fields input[type='checkbox'] {
3179 pointer
-events
: none
;
3181 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
3182 white
-space
: nowrap
;
3185 padding
: 0.25em
0.5em
0.25em
calc(20px +
0.25em +
0.3725em
);
3188 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
3190 font
-family
: "Font Awesome", "Font Awesome 5 Free";
3191 font
-size
: 1.375rem
;
3200 #edit-post-form label[for='url'],
3201 #edit-post-form input[name='url'] {
3204 #edit-post-form .link-post-checkbox:checked ~ label[for='url'],
3205 #edit-post-form .link-post-checkbox:checked ~ input[name='url'] {
3208 #edit-post-form label {
3209 line
-height
: normal
;
3210 border
: 1px solid transparent
;
3212 padding
: 0.25em
0.5em
;
3213 white
-space
: nowrap
;
3215 #edit-post-form input[type='radio'] {
3219 pointer
-events
: none
;
3221 #edit-post-form input[type='radio'] + label {
3224 border
-style
: solid
;
3225 border
-width
: 1px
1px
1px
0;
3228 #edit-post-form input[type='radio']:checked + label {
3232 #edit-post-form label[for='section'] {
3235 #edit-post-form input[type='radio'] + label {
3238 <?php
fit_content("#edit-post-form input[type='radio'] + label"); ?
>
3240 #edit-post-form textarea {
3244 #edit-post-form input[type='submit'] {
3248 #edit-post-form #markdown-hints {
3249 top
: calc(100% +
2em
);
3252 #edit-post-form button.guiedit div {
3255 .guiedit
-mobile
-auxiliary
-button
{
3264 input
[type
='submit'] {
3265 font
-family
: inherit
;
3267 background
-color
: inherit
;
3284 margin
: 1em
0 0.75em
0;
3331 .post
-body
.comment
-box
.comment
-body
{
3334 padding
-left
: 0.5em
;
3336 padding
-bottom
: 3px
;
3338 blockquote
*:first
-child
{
3341 blockquote
*:last
-child
{
3344 blockquote blockquote
{
3348 /* Pseudo-blockquotes that LW sometimes uses for some reason */
3350 .post
-body
.comment
-box
.user
-name
{
3353 .post
-body
.comment
-box
.user
-name
::after
{
3356 .post
-body
.comment
-box
{
3364 #content img, #content figure {
3368 .prediction
-poll
> svg
{
3399 // Aspect ratio trick from https://css-tricks.com/aspect-ratio-boxes/
3401 [style
*="--aspect-ratio"] > * {
3404 [style
*="--aspect-ratio"] > img
{
3407 @supports
(--custom
:property
) {
3408 [style
*="--aspect-ratio"] {
3411 [style
*="--aspect-ratio"]::before
{
3414 padding
-bottom
: calc(100%
/ (var(--aspect
-ratio
)));
3416 [style
*="--aspect-ratio"] > * {
3429 border
-collapse
: collapse
;
3432 .body
-text table th
,
3433 .body
-text table td
{
3438 .body
-text table
.numeric {
3440 font
-family
: Inconsolata
, Menlo
, monospace
;
3442 .body
-text table caption
{
3443 margin
: 0 0 0.25em
0;
3452 /*= Superscripts & subscripts =*/
3454 /* Make sure superscripts and subscripts do not affect line spacing. */
3456 vertical
-align
: baseline
;
3466 /*= Code blocks & other "unstyled" text. =*/
3470 font
-family
: Inconsolata
, Menlo
, monospace
;
3473 white
-space
: pre
-wrap
;
3480 display
: inline
-block
;
3481 padding
: 0 4px
1px
5px
;
3486 padding
: 3px
4px
5px
8px
;
3496 /*= Removing browser default styling of various elements =*/
3498 /* On various input elements such as text fields and buttons, remove "blue glow" focus outlines on Macs, dotted black outlines in Firefox, etc. */
3503 /* Remove "embossed" appearance of horizontal rules. */
3511 -webkit
-appearance
: none
;
3512 -moz
-appearance
: none
;
3517 font
-family
: inherit
;
3519 font
-weight
: inherit
;
3527 counter
-reset
: ordered
-list;
3529 .footnote
-definition
{
3531 list-style
-type
: none
;
3532 counter
-increment
: ordered
-list;
3535 .footnote
-definition p
{
3536 font
-size
: inherit
!important
;
3538 .footnote
-definition
::before
{
3539 content
: counter(ordered
-list) ".";
3547 /*= LW Docs footnotes =*/
3553 .footnote
-item
> :not(.nothing
) {
3557 .footnote
-item
> :first
-child
{
3558 margin
-left
: -0.2em
;
3562 .footnote
-back
-link a
:not(.nothing
) {
3564 text
-decoration
: none
;
3568 .footnote
-back
-link a
:not(.nothing
):hover
{
3569 text
-shadow
: 0 0 1px
#fff, 0 0 3px #fff, 0 0 5px #00e;
3571 text
-decoration
: none
;
3574 .footnote
-back
-link a
::after
{
3576 font
-family
: Font Awesome
;
3579 text
-decoration
: none
;
3583 .footnote
-content
> :first
-child
{
3592 margin
-bottom
: 0.5em
;
3605 .body
-text ol
> li
{
3607 counter
-increment
: ol
;
3608 padding
: 0 0 0 2.5em
;
3609 margin
: 0.25em
0 0 0;
3611 .body
-text ol
> li
::before
{
3612 content
: counter(ol
) ".";
3622 .body
-text ul
:not(.contents
-list) > li
:empty {
3623 padding
-bottom
: 1.25em
;
3625 .body
-text ul
:not(.contents
-list) > li
{
3627 padding
: 0 0 0 1.75em
;
3628 margin
: 0.25em
0 0 0;
3630 .body
-text ul
:not(.contents
-list) > li ul
> li
{
3633 .body
-text ul
:not(.contents
-list) > li
::before
{
3640 .body
-text ul
:not(.contents
-list) > li ul
> li
::before
{
3643 .body
-text li
> ul
:first
-child
> li
{
3646 .body
-text li
> ul
:first
-child
> li
::before
{
3658 .error
-retry
-form input
[type
="submit"] {
3659 border
: 1px solid
#aaa;
3661 font
-size
: 1.125rem
;
3662 padding
: 0.5em
1.25em
;
3669 #content.about-page .contents {
3672 #content.about-page .accesskey-table {
3673 border
-collapse
: collapse
;
3676 #content.about-page .accesskey-table th,
3677 #content.about-page .accesskey-table td {
3680 #content.about-page .accesskey-table td:first-child {
3681 padding
-right
: 1.5em
;
3683 #content.about-page .accesskey-table td:last-child {
3685 font
-family
: Inconsolata
, Menlo
, monospace
;
3687 #content.about-page h3:nth-of-type(n+2) {
3691 /******************/
3692 /* IMAGES OVERLAY */
3693 /******************/
3695 #images-overlay + #content .post-body img {
3699 #images-overlay div {
3702 #images-overlay div::after {
3703 content
: "Click to enlarge";
3712 background
-color
: rgba(0,0,0,0.6);
3716 transition
: opacity
0.15s ease
;
3717 pointer
-events
: none
;
3719 <?php
fit_content("#images-overlay div::after"); ?
>
3720 #images-overlay div:hover::after {
3724 #images-overlay img {
3732 /*=--------------=*/
3733 /*= Hover styles =*/
3734 /*=--------------=*/
3737 #images-overlay img:hover {
3738 filter
: drop
-shadow(0 0 3px
#777);
3741 #content img:active,
3742 #images-overlay img:active {
3743 transform
: scale(0.975);
3750 #image-focus-overlay {
3760 #image-focus-overlay::before {
3768 background
-color
: #000;
3772 #image-focus-overlay.engaged {
3776 #image-focus-overlay img {
3781 transform
: translateX(-50%
) translateY(-50%
);
3784 /*=-------------------=*/
3785 /*= Single-image mode =*/
3786 /*=-------------------=*/
3788 #image-focus-overlay:not(.slideshow) .image-number,
3789 #image-focus-overlay:not(.slideshow) .slideshow-buttons {
3797 #image-focus-overlay .caption {
3800 background
-color
: rgba(0,0,0,0.7);
3804 max
-width
: calc(100%
- 18em
);
3812 <?php
fit_content("#image-focus-overlay .caption"); ?
>
3813 #image-focus-overlay .caption.hidden {
3819 #image-focus-overlay .caption p {
3824 #image-focus-overlay .caption:not(:empty)::before {
3829 height
: calc(100% +
1.5em
);
3832 left
: calc(-50vw +
50%
);
3836 /*=--------------=*/
3837 /*= Help overlay =*/
3838 /*=--------------=*/
3840 #image-focus-overlay .help-overlay {
3847 border
-radius
: 10px
;
3851 white
-space
: nowrap
;
3858 background
-color
1s ease
,
3861 #image-focus-overlay .help-overlay:hover {
3864 background
-color
: rgba(0,0,0,0.85);
3866 visibility
: visible
;
3868 visibility
0.2s ease
0.3s
,
3869 color
0.2s ease
0.3s
,
3870 background
-color
0.2s ease
0.3s
;
3873 #image-focus-overlay .help-overlay::after {
3875 font
-family
: "Font Awesome", "Font Awesome 5 Free";
3883 filter
: drop
-shadow(0 0 6px
#fff);
3884 visibility
: visible
;
3889 #image-focus-overlay .help-overlay:hover::after {
3892 visibility
0.2s ease
0.3s
;
3895 #image-focus-overlay .help-overlay p {
3902 #image-focus-overlay .help-overlay p + p {
3903 margin
: 0.75em
0 0 0;
3905 #image-focus-overlay .help-overlay.hidden {
3909 /*=--------------=*/
3910 /*= Slide number =*/
3911 /*=--------------=*/
3913 #image-focus-overlay .image-number {
3927 white
-space
: nowrap
;
3928 transition
: bottom
0.3s ease
;
3930 #image-focus-overlay .image-number::before {
3934 #image-focus-overlay .image-number::after {
3935 content
: " of " attr(data
-number
-of
-images
);
3938 #image-focus-overlay .image-number:hover::before,
3939 #image-focus-overlay .image-number:hover::after {
3942 #image-focus-overlay .image-number.hidden {
3946 /*=-------------------=*/
3947 /*= Slideshow buttons =*/
3948 /*=-------------------=*/
3950 #image-focus-overlay .slideshow-buttons {
3958 justify
-content
: space
-between
;
3959 pointer
-events
: none
;
3961 #image-focus-overlay .slideshow-buttons button {
3962 font
-family
: "Font Awesome", "Font Awesome 5 Free";
3971 pointer
-events
: auto
;
3973 #image-focus-overlay .slideshow-buttons button::selection {
3974 background
-color
: transparent
;
3976 @media only screen
and (hover
: hover
) {
3977 #image-focus-overlay .slideshow-buttons button:hover {
3978 background
-color
: rgba(0,0,0,0.1);
3982 #image-focus-overlay .slideshow-buttons button:active {
3986 #image-focus-overlay .slideshow-buttons button:disabled {
3988 background
-color
: transparent
;
3993 #image-focus-overlay .slideshow-button.previous.hidden {
3996 #image-focus-overlay .slideshow-button.next.hidden {
4000 /*=-----------------=*/
4001 /*= Background blur =*/
4002 /*=-----------------=*/
4008 /**************************/
4009 /* QUALIFIED HYPERLINKING */
4010 /**************************/
4012 #content.no-nav-bars {
4015 #content.no-nav-bars + #ui-elements-container > * {
4022 left
: calc((100%
- 900px
) / 2 - 69px
);
4029 display
: table
-cell
;
4031 vertical
-align
: middle
;
4032 font
-family
: "Font Awesome", "Font Awesome 5 Free";
4039 .qualified
-linking
{
4043 .qualified
-linking input
[type
='checkbox'] {
4049 .qualified
-linking label
{
4050 font
-family
: "Font Awesome", "Font Awesome 5 Free";
4054 display
: inline
-block
;
4055 margin
-left
: 0.25em
;
4057 .qualified
-linking label
:hover
{
4060 .qualified
-linking label
:active span
{
4061 display
: inline
-block
;
4062 transform
: scale(0.9);
4064 .qualified
-linking label
::selection
{
4065 background
-color
: transparent
;
4068 .qualified
-linking label
::after
{
4078 .qualified
-linking input
[type
='checkbox']:checked + label
::after
{
4082 .qualified
-linking
-toolbar
{
4088 .qualified
-linking input
[type
='checkbox'] ~
.qualified
-linking
-toolbar
{
4091 .qualified
-linking input
[type
='checkbox']:checked ~
.qualified
-linking
-toolbar
{
4094 #qualified-linking-toolbar-toggle-checkbox-bottom ~ .qualified-linking-toolbar {
4099 .qualified
-linking
-toolbar a
{
4104 .qualified
-linking
-toolbar a
::selection
{
4105 background
-color
: transparent
;
4112 #preview-popup-toggle {
4117 color
: var(--GW
-toggle
-widget
-color
, #888);
4119 #preview-popup-toggle:hover {
4120 color
: var(--GW
-toggle
-widget
-hover
-color
, #444);
4123 #content.preview:not(not) {
4126 #content.preview > .comment-thread {
4129 #content.preview.individual-thread-page > .comment-thread > .comment-item {
4132 #content.preview.user-page .page-main-heading, #content.preview.user-page .user-stats {
4135 #content.preview.user-page .page-main-heading {
4138 #content.preview.not(not) .body-text {
4142 #content.preview.user-page .user-stats {
4145 #content.preview.user-page .page-toolbar, #content.preview.user-page nav {
4148 #content.preview button.vote {
4151 #content.preview > h1.listing {
4154 #content.preview.user-page > .comment-thread {
4157 #content.preview > .post {
4160 #content.preview .post-title {
4163 #content.preview .post-meta {
4166 #content.preview .body-text {
4169 #content.preview nav.contents,
4170 #content.preview .lw2-link {
4176 transform
-origin
: top
;
4181 background
-color
: #eee;
4182 border
: 1px solid
#ccc;
4183 box
-shadow
: 2px
6px
20px
-4px
#000;
4184 transition
: height
0.2s ease
, top
0.2s ease
;
4186 .popup
-hide
-button
{
4191 background
-color
: #fff;
4195 font
-family
: "Font Awesome";
4198 border
: 1px solid
#bbb;
4199 border
-radius
: 28px
;
4200 align
-items
: center
;
4201 justify
-content
: center
;
4202 //padding-bottom: 2px;
4203 padding
-left
: 1.5px
;
4204 font
-family
: "Font Awesome", "Font Awesome 5 Free";
4207 .popup
-hide
-button
:hover
::before
{
4208 content
: "Turn off preview popups";
4214 background
-color
: #fff;
4215 border
: 1px solid
#eee;
4224 .mathjax
-block
-container
{
4228 margin
: 1em
0 1.5em
0;
4230 .mathjax
-inline
-container
{
4237 #content .mathjax-inline-container,
4238 #content .mathjax-inline-container .mjpage,
4239 #content .mathjax-inline-container .mjx-chtml,
4240 #content .mathjax-inline-container .mjx-math,
4241 #content .mathjax-inline-container .mjx-mrow {
4243 white
-space
: normal
;
4245 .post
.mathjax
-inline
-container
{
4248 .comment
.mathjax
-inline
-container
{
4251 .mathjax
-inline
-container
.mjx
-chtml
{
4261 background
-color
: currentColor
;
4265 box
-shadow
: 0 0 0 1px currentColor inset
;
4268 .spoiler
:not(:last
-child
) {
4271 #content .spoiler * {
4277 background
-color
: unset;
4280 color
0.1s ease
-out
0.1s
,
4281 background
-color
0.1s ease
-out
0.1s
,
4282 text
-shadow
0.1s ease
-out
0.1s
;
4284 .spoiler
::selection
,
4285 .spoiler
::selection
{
4287 background
-color
: #000;
4289 .spoiler
:not(:hover
)::selection
,
4290 .spoiler
:not(:hover
) ::selection
{
4291 background
-color
: transparent
;
4294 /*= Fix for LessWrong being weird =*/
4299 .spoiler
> p
:first
-child
{
4302 .spoiler
> p
:last
-child
{
4304 padding
-bottom
: 0.25em
;
4306 .spoiler
> p
:hover ~ p
{
4307 background
-color
: currentColor
;
4312 .spoiler
> p
:not(:first
-child
) {
4315 .spoiler
> p
:not(:last
-child
) {
4316 padding
-bottom
: 0.5em
;
4319 .spoiler
:not(:hover
) pre
,
4320 .spoiler
:not(:hover
) code
{
4321 background
-color
: inherit
;
4324 #content .spoiler pre {
4325 border
-color
: currentColor
;
4326 border
-style
: solid
;
4327 border
-width
: 0 1px
;
4331 /*******************/
4332 /* PAGE LIST INDEX */
4333 /*******************/
4340 .page
-list-index
> p
{
4345 .page
-list-index
> ul
* {
4349 .page
-list-index ul
{
4350 padding
-left
: 1.5em
;
4353 .page
-list-index li
{
4357 .page
-list-index li
> a
{
4364 .page
-list-index li
> a
:last
-child
{
4373 .textarea
-container
.autocomplete
-container
{
4376 font
-size
: 1.125rem
;
4378 backdrop
-filter
: blur(2px
);
4381 .textarea
-container
.autocomplete
-container
:empty {
4385 @media only screen
and (min
-width
: 521px
) {
4386 .textarea
-container
.autocomplete
-container
.inside
{
4387 max
-height
: calc(100%
- 36px
);
4390 .textarea
-container
.autocomplete
-container
.outside
{
4391 max
-height
: calc(100%
- 28px
);
4396 .textarea
-container
.autocomplete
-container
.inside
.right
{
4399 .textarea
-container
.autocomplete
-container
.inside
.left
{
4402 .textarea
-container
.autocomplete
-container
.outside
.right
{
4403 left
: calc(100% +
3px
);
4405 .textarea
-container
.autocomplete
-container
.outside
.left
{
4406 right
: calc(100% +
3px
);
4409 head
.content
-width
-normal + body
.textarea
-container
.autocomplete
-container
.outside
{
4410 max
-width
: calc((100vw
- (900px
- 40px
* 2)) / 2);
4412 head
.content
-width
-wide + body
.textarea
-container
.autocomplete
-container
.outside
{
4413 max
-width
: calc((100vw
- (1150px
- 40px
* 2)) / 2);
4415 head
.content
-width
-fluid + body
.textarea
-container
.autocomplete
-container
.outside
{
4416 max
-width
: calc((300px +
40px
* 2) / 2);
4420 .textarea
-container
.autocomplete
-container div
{
4421 padding
: 2px
8px
0 8px
;
4422 white
-space
: nowrap
;
4424 justify
-content
: flex
-end
;
4427 .textarea
-container
.autocomplete
-container div span
.name
{
4429 width
: calc(100%
- 9em
);
4431 text
-overflow
: ellipsis
;
4433 .textarea
-container
.autocomplete
-container div span
.name
:hover
{
4437 .textarea
-container
.autocomplete
-container div span
.age
,
4438 .textarea
-container
.autocomplete
-container div span
.karma
{
4442 .textarea
-container
.autocomplete
-container div span
.age
{
4445 .textarea
-container
.autocomplete
-container div span
.karma
{
4454 h2
.sequence
-chapter
,
4455 h3
.sequence
-chapter
,
4456 h4
.sequence
-chapter
{
4459 h2
.sequence
-chapter
::before
,
4460 h3
.sequence
-chapter
::before
,
4461 h4
.sequence
-chapter
::before
{
4464 margin
: 1.5em
0 0.75em
0;
4466 font
-weight
: normal
;
4467 font
-family
: <?php
echo $UI_font; ?
>;
4469 h2
.sequence
-chapter
::before
{
4472 h3
.sequence
-chapter
::before
{
4473 content
: '\25AA\2004\25AA';
4475 h4
.sequence
-chapter
::before
{
4476 content
: '\00B7\2004\00B7\2004\00B7';
4480 /*******************/
4481 /* ALIGNMENT FORUM */
4482 /*******************/
4484 #content.alignment-forum-index-page::after {
4485 content
: "Alignment Forum";
4487 margin
: 0.375em
0 0 -0.375em
;
4491 /**********************/
4492 /* FOR NARROW SCREENS */
4493 /**********************/
4495 @media only screen
and (max
-width
: 1440px
) {
4498 padding
: 8px
10px
10px
10px
;
4502 #hns-date-picker::before {
4507 height
: calc(100% +
2px
);
4513 @media only screen
and (max
-width
: 1160px
) {
4514 #new-comment-nav-ui {
4522 #hns-date-picker::before {
4523 width
: calc(100%
- 35px
);
4525 #theme-selector button::before {
4529 #theme-selector:hover::after {
4533 width
: calc(6em
- 7px
);
4534 height
: calc(100% +
2px
);
4536 left
: calc(100% +
1px
);
4538 #anti-kibitzer-toggle {
4542 @media only screen
and (max
-width
: 1080px
) {
4546 #width-selector button {
4549 #text-size-adjustment-ui {
4553 #text-size-adjustment-ui button {
4557 #text-size-adjustment-ui button.increase {
4560 #text-size-adjustment-ui button.decrease {
4567 #theme-tweaker-toggle {
4571 #theme-tweaker-toggle button {
4579 #new-comment-nav-ui {
4585 #hns-date-picker::before {
4586 width
: calc(100%
- 22px
);
4588 #anti-kibitzer-toggle {
4592 @media only screen
and (max
-width
: 1040px
) {
4596 #new-comment-nav-ui {
4602 #hns-date-picker::before {
4603 width
: calc(100%
- 17px
);
4605 #anti-kibitzer-toggle {
4609 @media only screen
and (max
-width
: 1020px
) {
4613 #new-comment-nav-ui {
4616 #new-comment-nav-ui .new-comments-count::before {
4620 height
: calc(100% +
45px
);
4628 #hns-date-picker::before {
4631 #anti-kibitzer-toggle {
4635 @media only screen
and (max
-width
: 1000px
) {
4642 #theme-selector button {
4645 #text-size-adjustment-ui {
4649 @media not screen
and (hover
: none
) {
4651 #new-comment-nav-ui,
4652 #new-comment-nav-ui + #hns-date-picker,
4653 #anti-kibitzer-toggle {
4656 #quick-nav-ui:hover,
4657 #new-comment-nav-ui:hover,
4658 #new-comment-nav-ui + #hns-date-picker:hover,
4659 #new-comment-nav-ui + #hns-date-picker:focus-within,
4660 #new-comment-nav-ui:hover + #hns-date-picker,
4661 #anti-kibitzer-toggle:hover {
4665 #theme-tweaker-toggle {
4681 #ui-elements-container {
4687 #images-overlay + #content .post-body img {
4688 visibility
: visible
;
4693 #comments-sort-mode-selector {
4696 .comment
-minimize
-button
{
4699 .post
-meta
.qualified
-linking
,
4700 .post
-meta
.lw2
-link
{
4703 .comment
-meta
.permalink
,
4704 .comment
-meta
.lw2
-link
,
4705 .comment
-meta
.comment
-parent
-link
{
4708 .new-comment
::before
{
4716 <?php
include("style_mobile_additions.css.php"); ?
>
4718 <?php
if (isset($argv[2]) && preg_match("/\\.css(.php)?$/", $argv[2])) include($argv[2]); ?
>
4722 ## TO BE IMPLEMENTED:
4723 ## This will be specified via command-line argument; but for now, we just
4724 ## include all available additions (currently, only 'accordius').
4730 foreach ($additions as $addition) {
4731 $potential_includes = [
4733 "style_mobile_additions.css.php"
4735 foreach ($potential_includes as $include) {
4736 $include_path = "{$addition}/{$include}";
4737 if (file_exists($include_path))
4738 include ($include_path);