www/style.css.php

   1 <?php
   2         header ('Content-type: text/css; charset=utf-8');
   3
   4         $platform = @$argv[1] ?: 'Mac';
   5         $UI_font = ($platform == 'Windows') ? "'Whitney', 'a_Avante'" : "'Concourse', 'a_Avante'";
   6
   7         $content_width_settings = [
   8                 'normal' => '900px',
   9                 'wide' => '1150px',
  10                 'fluid' => 'calc(100% - 300px)'
  11         ];
  12
  13         function fit_content($selector, $property = "width") {
  14                 foreach (["-moz-fit-content", "fit-content"] as $pvalue) echo
  15 "@supports (width: {$pvalue}) {
  16         {$selector} {
  17                 {$property}: {$pvalue};
  18         }
  19 }
  20 ";
  21         }
  22 ?>
  23
  24 /***************/
  25 /* BASE LAYOUT */
  26 /***************/
  27
  28 html {
  29         box-sizing: border-box;
  30         font-size: 16px;
  31 }
  32 *, *::before, *::after {
  33         box-sizing: inherit;
  34 }
  35
  36 /*=------=*/
  37 /*= Body =*/
  38 /*=------=*/
  39
  40 body {
  41         padding: 0;
  42         margin: 0;
  43 }
  44 body::before {
  45         background-color: inherit;
  46         position: fixed;
  47         width: 100%;
  48         height: 100%;
  49 }
  50
  51 body.no-scroll {
  52         overflow-y: scroll;
  53         position: fixed;
  54         width: 100%;
  55 }
  56
  57 /*=----------------------------=*/
  58 /*= Immediate children of body =*/
  59 /*=----------------------------=*/
  60
  61 body > * {
  62         width: calc(100% - 300px);
  63         min-width: 900px;
  64         max-width: 900px;
  65 }
  66 #content {
  67         margin: 0 auto;
  68         padding: 0 30px;
  69         position: relative;
  70         overflow: visible;
  71         display: grid;
  72         grid-template-columns: repeat(3, 1fr);
  73         grid-auto-flow: dense;
  74 }
  75 #content::before {
  76         content: "";
  77         display: block;
  78         position: absolute;
  79         top: 0;
  80         left: 0;
  81         width: 100%;
  82         height: 100%;
  83         z-index: -1;
  84         pointer-events: none;
  85 }
  86
  87 /*=---------=*/
  88 /*= Content =*/
  89 /*=---------=*/
  90
  91 #content > * {
  92         grid-column: 1 / span 3;
  93 }
  94
  95 /*=----------------------=*/
  96 /*= Floating UI elements =*/
  97 /*=----------------------=*/
  98
  99 #ui-elements-container {
 100         position: fixed;
 101         height: 100vh;
 102         top: 0;
 103         left: 0;
 104         right: 0;
 105         margin: auto;
 106         z-index: 10000;
 107         pointer-events: none;
 108 }
 109 #ui-elements-container > * {
 110         pointer-events: auto;
 111 }
 112
 113 /*=----------------=*/
 114 /*= Images overlay =*/
 115 /*=----------------=*/
 116 /* (To exclude images in posts from theme tweaks) */
 117
 118 #images-overlay {
 119         position: absolute;
 120         z-index: 1;
 121         left: 0;
 122         right: 0;
 123         margin: auto;
 124 }
 125
 126 /***********/
 127 /* NAV BAR */
 128 /***********/
 129
 130 .nav-bar {
 131         margin: 0 -30px;
 132 }
 133 .nav-bar {
 134         display: flex;
 135 }
 136
 137 /*=---------------=*/
 138 /*= Nav bar items =*/
 139 /*=---------------=*/
 140
 141 .nav-item {
 142         flex: 1 1 auto;
 143 }
 144 .nav-item * {
 145         text-overflow: ellipsis;
 146         white-space: nowrap;
 147         overflow: hidden;
 148 }
 149 .nav-inner {
 150         padding: 12px 30px;
 151         text-align: center;
 152         display: block;
 153         position: relative;
 154 }
 155 #secondary-bar .nav-inner {
 156         padding: 4px 0;
 157 }
 158
 159 #nav-item-sequences .nav-inner::before {
 160         font-family: "Font Awesome", "Font Awesome 5 Free";
 161         content: "\F5DB";
 162 }
 163 @media only screen and (min-width: 901px) {
 164         #nav-item-about .nav-inner {
 165                 margin-right: 0.5em;
 166         }
 167         #nav-item-sequences .nav-inner::before {
 168                 font-size: 1rem;
 169                 display: block;
 170         }
 171         #secondary-bar #nav-item-sequences .nav-inner {
 172                 font-size: 0;
 173                 line-height: 1.4;
 174         }
 175 }
 176
 177 /*=------------=*/
 178 /*= Bottom bar =*/
 179 /*=------------=*/
 180
 181 h1.listing ~ #bottom-bar {
 182         margin-top: 1.25em;
 183 }
 184 #bottom-bar .nav-item {
 185         flex: 1 1 0;
 186 }
 187
 188 /*=-----------------=*/
 189 /*= Accesskey hints =*/
 190 /*=-----------------=*/
 191
 192 .nav-inner::after {
 193         content: attr(accesskey);
 194         display: none;
 195 }
 196
 197 /*=---------------=*/
 198 /*= Pagination UI =*/
 199 /*=---------------=*/
 200
 201 #bottom-bar .nav-item a::before,
 202 #top-nav-bar a::before {
 203         font-family: "Font Awesome", "Font Awesome 5 Free";
 204         font-weight: 900;
 205         font-size: 0.8em;
 206         position: relative;
 207         bottom: 1px;
 208         margin-right: 0.5em;
 209 }
 210 #bottom-bar #nav-item-first a::before,
 211 #top-nav-bar a.nav-item-first::before {
 212         content: "\F33e";
 213 }
 214 #bottom-bar #nav-item-top a::before {
 215         content: "\F062";
 216 }
 217 #bottom-bar #nav-item-prev a::before,
 218 #top-nav-bar a.nav-item-prev::before {
 219         content: "\F060";
 220 }
 221 #bottom-bar #nav-item-next a::before,
 222 #top-nav-bar a.nav-item-next::before {
 223         content: "\F061";
 224 }
 225 #bottom-bar #nav-item-last a::before,
 226 #top-nav-bar a.nav-item-last::before {
 227         content: "\F340";
 228 }
 229 #bottom-bar #nav-item-next a::before {
 230         margin-left: -2em;
 231         margin-right: 0;
 232         left: 3.8em;
 233 }
 234 #bottom-bar #nav-item-last a::before {
 235         margin-left: -1.8em;
 236         margin-right: 0;
 237         left: 3.4em;
 238 }
 239
 240 /*= Hover tooltips =*/
 241
 242 #top-nav-bar a {
 243         position: relative;
 244 }
 245 #top-nav-bar a::after {
 246         bottom: calc(100% - 3px);
 247         content: attr(data-target-page);
 248 }
 249 #bottom-bar a:not([href='#top'])::after {
 250         content: "Page " attr(data-target-page);
 251         top: unset;
 252         left: 0;
 253         bottom: 4px;
 254 }
 255 #top-nav-bar a::after,
 256 #bottom-bar a:not([href='#top'])::after {
 257         display: block;
 258         position: absolute;
 259         font-size: 0.75rem;
 260         width: 100%;
 261         line-height: 1;
 262         visibility: hidden;
 263 }
 264 #top-nav-bar a:hover::after,
 265 #bottom-bar a:hover::after {
 266         visibility: visible;
 267 }
 268
 269 /*=-----------------------=*/
 270 /*= Decorative bottom bar =*/
 271 /*=-----------------------=*/
 272 /* (On short pages with no pagination) */
 273
 274 #bottom-bar.decorative {
 275         position: relative;
 276 }
 277 #bottom-bar.decorative .nav-item {
 278         display: none;
 279 }
 280
 281 /*=------------=*/
 282 /*= Search tab =*/
 283 /*=------------=*/
 284
 285 #nav-item-search {
 286         flex: 4 1 auto;
 287 }
 288 #nav-item-search form::before {
 289         content: "\F002";
 290         font-family: "Font Awesome", "Font Awesome 5 Free";
 291         font-weight: 900;
 292         display: inline-block;
 293         vertical-align: top;
 294         height: 23px;
 295         width: 23px;
 296 }
 297 #nav-item-search input {
 298         height: 23px;
 299         width: calc(95% - 80px);
 300         padding: 1px 4px;
 301 }
 302 #nav-item-search button {
 303         height: 21px;
 304 }
 305
 306 /*=-----------=*/
 307 /*= Login tab =*/
 308 /*=-----------=*/
 309
 310 #nav-item-login {
 311         position: relative;
 312         padding-right: 0.5em;
 313 }
 314
 315 /*******************/
 316 /* INBOX INDICATOR */
 317 /*******************/
 318
 319 #inbox-indicator {
 320         position: absolute;
 321         top: 1px;
 322         right: 0;
 323         height: 100%;
 324         visibility: hidden;
 325 }
 326 #inbox-indicator::before {
 327         content: "\F0E0";
 328         font-family: "Font Awesome", "Font Awesome 5 Free";
 329         color: #bbb;
 330         font-size: 1.1875rem;
 331         position: absolute;
 332         height: 100%;
 333         right: 0;
 334         top: 0;
 335         padding: 0 0.45em;
 336         visibility: visible;
 337         font-weight: 900;
 338 }
 339 #inbox-indicator.new-messages::before {
 340         color: #f00;
 341         text-shadow:
 342                 0 0 1px #777,
 343                 0.5px 0.5px 1px #777;
 344 }
 345 a#inbox-indicator:hover::before {
 346         color: #fff;
 347         text-shadow:
 348                 0 0 1px #000,
 349                 0 0 2px #000,
 350                 0 0 4px #000,
 351                 0 0 1px #777,
 352                 0.5px 0.5px 1px #777;
 353 }
 354 a#inbox-indicator.new-messages:hover::before {
 355         text-shadow:
 356                 0 0 1px #f00,
 357                 0 0 2px #f00,
 358                 0 0 4px #f00,
 359                 0 0 1px #777,
 360                 0.5px 0.5px 1px #777;
 361 }
 362
 363 /****************/
 364 /* PAGE TOOLBAR */
 365 /****************/
 366
 367 .page-toolbar {
 368         font-size: 0.9em;
 369         line-height: 1.8;
 370         text-align: right;
 371         margin-right: -20px;
 372 }
 373 #content > .page-toolbar {
 374         grid-column: 3;
 375 }
 376 #content.user-page > .page-toolbar {
 377         grid-column: 2 / span 2;
 378 }
 379
 380 /*=--------------------------=*/
 381 /*= Page toolbar items (all) =*/
 382 /*=--------------------------=*/
 383
 384 .page-toolbar > * {
 385         display: inline-block;
 386         margin-left: 1.5em;
 387 }
 388 .page-toolbar .button::before {
 389         font-family: "Font Awesome", "Font Awesome 5 Free";
 390         font-size: 0.9em;
 391         padding-right: 0.3em;
 392 }
 393
 394 /*=-------------------------------=*/
 395 /*= Page toolbar items (specific) =*/
 396 /*=-------------------------------=*/
 397
 398 .new-post::before {
 399         content: '\F067';
 400         font-weight: 900;
 401 }
 402 .new-private-message::before {
 403         content: '\F075';
 404         font-weight: 400;
 405 }
 406 .logout-button::before {
 407         content: '\F2F5';
 408         font-weight: 900;
 409 }
 410 .ignore-button::before {
 411         content: "\F070";
 412         font-weight: 400;
 413 }
 414 .unignore-button::before {
 415         content: "\F06E";
 416         font-weight: 400;
 417 }
 418 .rss::before {
 419         content: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/rss.svg")) ?>');
 420         display: inline-block;
 421         width: 1em;
 422         padding-right: 0.2em;
 423         position: relative;
 424         top: 1px;
 425 }
 426
 427 /*********************/
 428 /* TOP PAGINATION UI */
 429 /*********************/
 430
 431 #top-nav-bar {
 432         grid-column: 2;
 433         margin: 0.25em 0 0 0;
 434         padding: 0.75em 0 0 0;
 435         text-align: center;
 436         font-size: 1.25em;
 437         display: flex;
 438         justify-content: center;
 439 }
 440 #top-nav-bar a {
 441         line-height: 1;
 442 }
 443 #top-nav-bar a.disabled {
 444         pointer-events: none;
 445         visibility: hidden;
 446 }
 447 #top-nav-bar .page-number {
 448         position: relative;
 449         display: inline-block;
 450         width: 1.5em;
 451 }
 452 #top-nav-bar .page-number-label {
 453         position: absolute;
 454         font-size: 0.5em;
 455         text-transform: uppercase;
 456         width: 100%;
 457         bottom: 90%;
 458         left: 0;
 459 }
 460 #top-nav-bar a::before {
 461         margin: 0.5em;
 462         display: inline-block;
 463 }
 464
 465 /****************/
 466 /* SUBLEVEL NAV */
 467 /****************/
 468
 469 .sublevel-nav {
 470         text-align: center;
 471         display: flex;
 472         justify-content: center;
 473         margin: 1em 0 0 0;
 474 }
 475 #content > .sublevel-nav:not(.sort) {
 476         grid-row: 5;
 477         grid-column: 2;
 478         align-self: start;
 479 }
 480 #content.sequences-page > .sublevel-nav {
 481         grid-row: unset;
 482 }
 483 .sublevel-nav .sublevel-item {
 484         flex: 0 0 6em;
 485         padding: 0.125em 0.5em;
 486         font-size: 1.125rem;
 487 }
 488 .sublevel-nav .sublevel-item:active {
 489         transform: none;
 490 }
 491 .sublevel-nav .sublevel-item.selected {
 492         cursor: default;
 493 }
 494
 495 /***********************/
 496 /* SORT ORDER SELECTOR */
 497 /***********************/
 498
 499 .sublevel-nav.sort {
 500         position: relative;
 501         margin-top: 8px;
 502         font-size: 0.75em;
 503 }
 504 #content > .sublevel-nav.sort {
 505         grid-column: 3;
 506         grid-row: 5 / span 2;
 507         justify-self: end;
 508         align-self: start;
 509         flex-flow: column;
 510 }
 511 #content.index-page > .sublevel-nav.sort {
 512         grid-column: 1;
 513         grid-row: 3 / span 1;
 514         justify-self: start;
 515         flex-flow: row;
 516 }
 517
 518 .sublevel-nav.sort::before {
 519         content: "Sort";
 520         font-size: 0.75rem;
 521         position: absolute;
 522         top: 0;
 523         left: 0;
 524         width: 100%;
 525 }
 526 .sublevel-nav.sort .sublevel-item {
 527         line-height: 1;
 528         font-size: 0.875rem;
 529         flex-basis: unset;
 530 }
 531
 532 /*******************************/
 533 /* COMMENTS SORT MODE SELECTOR */
 534 /*******************************/
 535
 536 .comments > .sublevel-nav.sort {
 537         margin: 1em auto 0 auto;
 538 }
 539 <?php fit_content(".comments > .sublevel-nav.sort"); ?>
 540
 541 /******************/
 542 /* WIDTH SELECTOR */
 543 /******************/
 544
 545 #width-selector {
 546         position: absolute;
 547         top: 4px;
 548         right: -78px;
 549 }
 550 #width-selector button {
 551         width: 22px;
 552         height: 22px;
 553         padding: 6px;
 554         margin: 1px;
 555         overflow: hidden;
 556         background-repeat: no-repeat;
 557         background-size: 100%;
 558         background-origin: content-box;
 559 }
 560 #width-selector button,
 561 #width-selector button:active,
 562 #width-selector button:focus {
 563         text-shadow: none;
 564         color: transparent;
 565 }
 566 #width-selector button:disabled {
 567         cursor: auto;
 568 }
 569 #width-selector button.select-width-normal {
 570         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/normal.gif")) ?>');
 571 }
 572 #width-selector button.select-width-wide {
 573         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/wide.gif")) ?>');
 574 }
 575 #width-selector button.select-width-fluid {
 576         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/fluid.gif")) ?>');
 577 }
 578
 579 /*=----------------=*/
 580 /*= Hover tooltips =*/
 581 /*=----------------=*/
 582
 583 #width-selector button::after {
 584         content: attr(data-name);
 585         position: absolute;
 586         display: block;
 587         left: 0;
 588         width: 100%;
 589         text-align: center;
 590         top: 56px;
 591         visibility: hidden;
 592 }
 593 #width-selector button.selected::after {
 594         content: attr(data-name) " (selected)";
 595 }
 596 #width-selector button:hover:not(:active)::after {
 597         visibility: visible;
 598 }
 599
 600 <?php
 601 global $content_width_settings;
 602 foreach ($content_width_settings as $name => $setting) {
 603         echo "head.content-width-{$name} + body > * {\n max-width: {$setting};\n}\n";
 604 }
 605 ?>
 606
 607 /******************/
 608 /* THEME SELECTOR */
 609 /******************/
 610
 611 #theme-selector {
 612         position: absolute;
 613         top: 3px;
 614         left: -41px;
 615         opacity: 0.4;
 616         display: table;
 617         max-width: 40px;
 618 }
 619 #theme-selector:hover {
 620         opacity: 1.0;
 621 }
 622
 623 /*=----------------------=*/
 624 /*= Theme select buttons =*/
 625 /*=----------------------=*/
 626
 627 .theme-selector button {
 628         display: table-cell;
 629         width: 26px;
 630         height: 26px;
 631         padding: 5px;
 632         margin: 1px 7px 0 7px;
 633         color: transparent;
 634         background-size: 16px 16px;
 635         background-origin: content-box;
 636 }
 637 .theme-selector button,
 638 .theme-selector button:hover,
 639 .theme-selector button:active,
 640 .theme-selector button:focus {
 641         text-shadow: none;
 642         color: transparent;
 643 }
 644 .theme-selector button:disabled {
 645         cursor: auto;
 646 }
 647
 648 /*=----------------------------=*/
 649 /*= Pre-rendered button images =*/
 650 /*=----------------------------=*/
 651 /*      (Each is just a capital letter A through whatever) */
 652
 653 .theme-selector button:nth-of-type(1) {
 654         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_A.gif")) ?>');
 655 }
 656 .theme-selector button:nth-of-type(2) {
 657         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_B.gif")) ?>');
 658 }
 659 .theme-selector button:nth-of-type(3) {
 660         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_C.gif")) ?>');
 661 }
 662 .theme-selector button:nth-of-type(4) {
 663         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_D.gif")) ?>');
 664 }
 665 .theme-selector button:nth-of-type(5) {
 666         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_E.gif")) ?>');
 667 }
 668 .theme-selector button:nth-of-type(6) {
 669         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_F.gif")) ?>');
 670 }
 671 .theme-selector button:nth-of-type(7) {
 672         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_G.gif")) ?>');
 673 }
 674 .theme-selector button:nth-of-type(8) {
 675         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_H.gif")) ?>');
 676 }
 677 .theme-selector button:nth-of-type(9) {
 678         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/theme_I.gif")) ?>');
 679 }
 680
 681 /*=------------------------------=*/
 682 /*= Theme select button tooltips =*/
 683 /*=------------------------------=*/
 684 /*      (with the name & description of the theme that each button selects) */
 685
 686 #theme-selector button {
 687         position: relative;
 688         z-index: 1;
 689 }
 690 #theme-selector button::before {
 691         content: attr(data-theme-name);
 692         position: absolute;
 693         top: 0;
 694         right: 100%;
 695         padding: 5px 6px 6px 6px;
 696         line-height: 1;
 697         width: 6em;
 698         text-align: right;
 699         z-index: 1;
 700         visibility: hidden;
 701 }
 702 #theme-selector:hover button::before {
 703         visibility: visible;
 704 }
 705 #theme-selector:hover ~ #theme-tweaker-toggle,
 706 #theme-selector:active ~ #theme-tweaker-toggle {
 707         z-index: -1;
 708 }
 709
 710 /************************/
 711 /* THEME TWEAKER TOGGLE */
 712 /************************/
 713
 714 #theme-tweaker-toggle {
 715         position: absolute;
 716         top: 7px;
 717         left: -75px;
 718 }
 719 #theme-tweaker-toggle button {
 720         font-family: "Font Awesome", "Font Awesome 5 Free";
 721         font-weight: 900;
 722         font-size: 1.25rem;
 723         opacity: 0.4;
 724         z-index: 1;
 725 }
 726 #theme-tweaker-toggle button:hover {
 727         opacity: 1.0;
 728 }
 729
 730 /*******************/
 731 /* QUICKNAV WIDGET */
 732 /*******************/
 733
 734 #quick-nav-ui {
 735         position: absolute;
 736         right: -67px;
 737         bottom: 20px;
 738 }
 739 #quick-nav-ui a {
 740         font-family: "Font Awesome", "Font Awesome 5 Free";
 741         font-weight: 900;
 742         font-size: 1.5rem;
 743         line-height: 1.7;
 744         text-align: center;
 745         display: block;
 746         width: 40px;
 747         height: 40px;
 748         margin: 10px 0 0 0;
 749 }
 750 #quick-nav-ui a[href='#comments'].no-comments {
 751         pointer-events: none;
 752 }
 753 #quick-nav-ui a {
 754         visibility: hidden;
 755 }
 756 #content.post-page ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
 757         visibility: visible;
 758 }
 759
 760 /************************/
 761 /* NEW COMMENT QUICKNAV */
 762 /************************/
 763
 764 #new-comment-nav-ui {
 765         position: absolute;
 766         right: -112px;
 767         bottom: 42px;
 768 }
 769 #new-comment-nav-ui > * {
 770         display: block;
 771         position: relative;
 772 }
 773 #new-comment-nav-ui.no-comments {
 774         display: none;
 775 }
 776
 777 /*=--------------------=*/
 778 /*= New comments count =*/
 779 /*=--------------------=*/
 780
 781 #new-comment-nav-ui .new-comments-count {
 782         width: 2em;
 783         font-size: 1.25rem;
 784         line-height: 1.1;
 785         text-align: center;
 786         left: 1px;
 787         cursor: pointer;
 788 }
 789 #new-comment-nav-ui .new-comments-count::selection {
 790         background-color: transparent;
 791 }
 792 #new-comment-nav-ui .new-comments-count::after {
 793         content: "NEW";
 794         display: block;
 795         font-size: 0.625rem;
 796 }
 797
 798 /*=-----------------------------------=*/
 799 /*= Next/previous new comment buttons =*/
 800 /*=-----------------------------------=*/
 801
 802 #new-comment-nav-ui .new-comment-sequential-nav-button {
 803         font-size: 1.75rem;
 804         font-family: "Font Awesome", "Font Awesome 5 Free";
 805         font-weight: 900;
 806         width: 1.5em;
 807         z-index: 5001;
 808 }
 809 #new-comment-nav-ui .new-comment-previous {
 810         top: 8px;
 811 }
 812 #new-comment-nav-ui .new-comment-next {
 813         bottom: 6px;
 814 }
 815 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
 816         cursor: auto;
 817         pointer-events: none;
 818 }
 819
 820 /*******************/
 821 /* HNS DATE PICKER */
 822 /*******************/
 823
 824 #hns-date-picker {
 825         position: absolute;
 826         bottom: 72px;
 827         right: -253px;
 828         opacity: 0.6;
 829 }
 830 #hns-date-picker:hover,
 831 #hns-date-picker:focus-within {
 832         opacity: 1.0;
 833 }
 834 #hns-date-picker.no-comments {
 835         display: none;
 836 }
 837
 838 /*=---------------=*/
 839 /*= "Since" label =*/
 840 /*=---------------=*/
 841
 842 #hns-date-picker span {
 843         display: block;
 844         font-size: 0.75rem;
 845         text-transform: uppercase;
 846 }
 847
 848 /*=--------------------=*/
 849 /*= "Since" text field =*/
 850 /*=--------------------=*/
 851
 852 #hns-date-picker input {
 853         margin-top: 1px;
 854         padding: 1px 3px;
 855         width: 140px;
 856         text-align: center;
 857         box-shadow: 0 0 0 1px transparent;
 858 }
 859
 860 /************************/
 861 /* ANTI-KIBITZER TOGGLE */
 862 /************************/
 863
 864 #anti-kibitzer-toggle {
 865         position: absolute;
 866         right: -67px;
 867         bottom: 225px;
 868 }
 869 #anti-kibitzer-toggle button {
 870         display: block;
 871         width: 40px;
 872         height: 54px;
 873         padding: 0;
 874 }
 875 #anti-kibitzer-toggle button::before,
 876 #anti-kibitzer-toggle button::after {
 877         font-family: "Font Awesome", "Font Awesome 5 Free";
 878 }
 879 #anti-kibitzer-toggle button::before {
 880         content: "\F06E";
 881         display: block;
 882         font-size: 1.75em;
 883         font-weight: 400;
 884 }
 885 #anti-kibitzer-toggle button::after {
 886         content: "\F007\2004\F164";
 887         font-size: 0.875em;
 888         font-weight: 900;
 889 }
 890 #anti-kibitzer-toggle.engaged button::before {
 891         content: "\F070";
 892 }
 893
 894 /************************/
 895 /* TEXT SIZE ADJUSTMENT */
 896 /************************/
 897
 898 #text-size-adjustment-ui {
 899         position: absolute;
 900         top: 30px;
 901         right: -78px;
 902         opacity: 0.4;
 903 }
 904 #text-size-adjustment-ui:hover {
 905         opacity: 1.0;
 906 }
 907
 908 /* This doesn't work in Mozilla browsers, so hide it */
 909 @-moz-document url-prefix() {
 910         #text-size-adjustment-ui {
 911                 display: none;
 912         }
 913 }
 914
 915 /*=---------=*/
 916 /*= Buttons =*/
 917 /*=---------=*/
 918
 919 #text-size-adjustment-ui button {
 920         font-weight: 900;
 921         font-family: "Font Awesome", "Font Awesome 5 Free";
 922         font-size: 0.75rem;
 923         width: 24px;
 924         height: 24px;
 925         padding: 0;
 926 }
 927 #text-size-adjustment-ui button.default {
 928         font-family: inherit;
 929         font-size: 1.125rem;
 930         position: relative;
 931         top: 1px;
 932 }
 933 #text-size-adjustment-ui button:disabled {
 934         opacity: 0.5;
 935 }
 936 #text-size-adjustment-ui button:disabled:hover {
 937         cursor: default;
 938 }
 939
 940 /*=----------------=*/
 941 /*= Hover tooltips =*/
 942 /*=----------------=*/
 943
 944 #text-size-adjustment-ui::after {
 945         content: "Adjust text size";
 946         position: absolute;
 947         display: block;
 948         left: 0;
 949         width: 100%;
 950         text-align: center;
 951         top: 32px;
 952         visibility: hidden;
 953         font-size: 0.9em;
 954 }
 955 #text-size-adjustment-ui:hover::after {
 956         visibility: visible;
 957 }
 958
 959 /*******************************/
 960 /* COMMENTS VIEW MODE SELECTOR */
 961 /*******************************/
 962
 963 #comments-view-mode-selector {
 964         position: absolute;
 965         bottom: 30px;
 966         left: -40px;
 967         opacity: 0.6;
 968 }
 969 #comments-view-mode-selector:hover {
 970         opacity: 1.0;
 971 }
 972
 973 /*=---------=*/
 974 /*= Buttons =*/
 975 /*=---------=*/
 976
 977 #comments-view-mode-selector a {
 978         display: block;
 979         font-family: "Font Awesome", "Font Awesome 5 Free";
 980         font-size: 1.25rem;
 981         text-align: center;
 982         opacity: 0.4;
 983         padding: 0.25em;
 984         z-index: 1;
 985 }
 986 #comments-view-mode-selector a.threaded {
 987         transform: scaleY(-1);
 988         font-weight: 900;
 989 }
 990 #comments-view-mode-selector a.chrono {
 991         font-weight: normal;
 992 }
 993 #comments-view-mode-selector a.selected,
 994 #comments-view-mode-selector a:hover {
 995         opacity: 1.0;
 996         text-decoration: none;
 997 }
 998 #comments-view-mode-selector a.selected {
 999         cursor: default;
1000 }
1001
1002 /*****************/
1003 /* KEYBOARD HELP */
1004 /*****************/
1005
1006 #keyboard-help-overlay {
1007         width: 100vw;
1008         height: 100vh;
1009         background-color: rgba(0,0,0,0.7);
1010         position: fixed;
1011         left: 0;
1012         top: 0;
1013         z-index: 5001;
1014
1015         display: flex;
1016         justify-content: center;
1017         align-items: center;
1018         padding: 20px 30px 30px 20px;
1019
1020         visibility: hidden;
1021 }
1022
1023 #keyboard-help-overlay .keyboard-help-container {
1024         background-color: #fff;
1025         filter: drop-shadow(4px 4px 2px #000);
1026         flex: 1 1 auto;
1027         max-width: 1500px;
1028         max-height: 100%;
1029         overflow-y: auto;
1030         position: relative;
1031 }
1032 #keyboard-help-overlay .keyboard-help-container h1 {
1033         text-align: center;
1034         border-bottom: 1px solid #ddd;
1035         margin: 0;
1036         padding: 10px 20px;
1037 }
1038 #keyboard-help-overlay .keyboard-help-container .note {
1039         margin: 0.5em auto;
1040         padding: 0 1em;
1041         width: fit-content;
1042 }
1043 #keyboard-help-overlay .keyboard-help-container .keyboard-shortcuts-lists {
1044         column-width: 21em;
1045         column-count: auto;
1046         column-gap: 1.5em;
1047         border-top: 1px solid #ddd;
1048         padding: 15px 20px;
1049 }
1050 #keyboard-help-overlay .keyboard-help-container ul {
1051         list-style-type: none;
1052         margin: 0;
1053         padding: 0;
1054         break-inside: avoid;
1055         white-space: nowrap;
1056 }
1057 #keyboard-help-overlay .keyboard-help-container ul:nth-of-type(n+2) {
1058         margin: 20px 0 0 0;
1059 }
1060 #keyboard-help-overlay .keyboard-help-container ul li.section {
1061         font-weight: bold;
1062         font-size: 1.125rem;
1063         break-after: avoid;
1064 }
1065 #keyboard-help-overlay .keyboard-help-container .keys {
1066         margin: 0 0.5em 0 0;
1067         min-width: 4.5em;
1068         display: inline-block;
1069 }
1070 #keyboard-help-overlay .keyboard-help-container .keys code {
1071         margin: 0 6px 0 0;
1072 }
1073 #keyboard-help-overlay .keyboard-help-container code {
1074         display: inline-block;
1075         background-color: #eee;
1076         border: 1px solid #ccc;
1077         padding: 3px 8px 4px 8px;
1078         margin: 0 1px;
1079 }
1080 #keyboard-help-overlay .keyboard-help-container code.ak {
1081         background-color: #ffeb83;
1082         border-color: #d4a500;
1083 }
1084 #keyboard-help-overlay .keyboard-help-container code.ak::before {
1085         content: "ak+";
1086         opacity: 0.3;
1087 }
1088
1089 #nav-item-about button.open-keyboard-help {
1090         display: none;
1091 }
1092 @media only screen and (hover:hover) and (pointer:fine) {
1093         #nav-item-about {
1094                 position: relative;
1095                 padding-right: 0.25em;
1096         }
1097         #nav-item-about button.open-keyboard-help {
1098                 font-family: "Font Awesome", "Font Awesome 5 Free";
1099                 font-weight: 900;
1100                 position: absolute;
1101                 top: 0;
1102                 right: 0;
1103                 height: 100%;
1104                 padding: 8px;
1105                 display: initial;
1106                 line-height: 1;
1107         }
1108 }
1109
1110 #keyboard-help-overlay button.close-keyboard-help {
1111         position: absolute;
1112         right: 0;
1113         top: 0;
1114         font-family: "Font Awesome", "Font Awesome 5 Free";
1115         font-size: 1.5rem;
1116         padding: 10px 12px;
1117 }
1118
1119 /************/
1120 /* ARCHIVES */
1121 /************/
1122
1123 .archive-nav {
1124         margin: 1.25em 0.5em 0 0.5em;
1125         padding: 0.25em;
1126 }
1127 .archive-nav > * {
1128         display: flex;
1129 }
1130 .archive-nav *[class^='archive-nav-item'] {
1131         line-height: 1;
1132         flex: 1 1 5%;
1133         text-align: center;
1134         padding: 6px 4px 4px 4px;
1135         max-width: 8%;
1136 }
1137 @-moz-document url-prefix() {
1138         .archive-nav *[class^='archive-nav-item'] {
1139                 padding: 5px 4px;
1140         }
1141 }
1142 .archive-nav-days .archive-nav-item-day {
1143         font-size: 0.8em;
1144         padding: 7px 0 5px 0;
1145         max-width: 4%;
1146 }
1147 .archive-nav-days .archive-nav-item-day:first-child {
1148         flex-basis: 10%;
1149 }
1150
1151 /************/
1152 /* ARCHIVES */
1153 /************/
1154
1155 .archive-nav {
1156         margin: 1.25em 0.5em 0 0.5em;
1157         padding: 0.25em;
1158 }
1159 .archive-nav > * {
1160         display: flex;
1161 }
1162 .archive-nav *[class^='archive-nav-item'] {
1163         line-height: 1;
1164         flex: 1 1 5%;
1165         text-align: center;
1166         padding: 6px 4px 4px 4px;
1167         max-width: 8%;
1168 }
1169 @-moz-document url-prefix() {
1170         .archive-nav *[class^='archive-nav-item'] {
1171                 padding: 5px 4px;
1172         }
1173 }
1174 .archive-nav-days .archive-nav-item-day {
1175         font-size: 0.8em;
1176         padding: 7px 0 5px 0;
1177         max-width: 4%;
1178 }
1179 .archive-nav-days .archive-nav-item-day:first-child {
1180         flex-basis: 10%;
1181 }
1182
1183 /************/
1184 /* LISTINGS */
1185 /************/
1186
1187 h1.listing {
1188         font-size: 1.875rem;
1189         line-height: 1.15;
1190         max-height: 1.15em;
1191         position: relative;
1192 }
1193
1194 h1.listing a {
1195         position: relative;
1196 }
1197
1198 /* Links to link-posts (not the link-post links themselves; that's below) */
1199 h1.listing a[href^='http'] + a {
1200         margin-left: 0.25em;
1201 }
1202 /* Link-post links */
1203 h1.listing a[href^="http"] {
1204         font-size: 0.8em;
1205         display: inline;
1206         vertical-align: top;
1207         position: relative;
1208         top: 4px;
1209 }
1210
1211 /*=----------------------=*/
1212 /*= Listing hover reveal =*/
1213 /*=----------------------=*/
1214 /*      (On desktops, hover over a multi-line listing to reveal all of it) */
1215
1216 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
1217         h1.listing a {
1218                 max-width: 100%;
1219                 display: inline-block;
1220                 white-space: nowrap;
1221                 text-overflow: ellipsis;
1222                 overflow: hidden;
1223                 border-bottom: 1px solid transparent;
1224                 -webkit-hyphens: auto;
1225                 -moz-hyphens: auto;
1226                 -ms-hyphens: auto;
1227                 hyphens: auto;
1228                 z-index: 1;
1229                 padding: 0 0 1px 1px;
1230         }
1231         h1.listing a[href^='http'] + a {
1232                 max-width: calc(100% - 33px);
1233         }
1234         h1.listing a:hover,
1235         h1.listing a:focus {
1236                 text-decoration: dotted underline;
1237                 white-space: initial;
1238                 overflow: visible;
1239                 z-index: 2;
1240         }
1241         h1.listing:focus-within::before {
1242                 content: "\F105";
1243                 font-family: "Font Awesome", "Font Awesome 5 Free";
1244                 display: block;
1245                 position: absolute;
1246                 left: -0.75em;
1247         }
1248
1249 /* Adds hysteresis to the hover area (i.e., prevents oscillation due to small
1250    mouse movements) */
1251 <?php $margin_of_hover_error = '10px'; ?>
1252
1253         h1.listing a:not(.edit-post-link):hover::before {
1254                 content: "";
1255                 position: absolute;
1256                 top: -<?php echo $margin_of_hover_error; ?>;
1257                 right: -<?php echo $margin_of_hover_error; ?>;
1258                 bottom: -<?php echo $margin_of_hover_error; ?>;
1259                 left: -<?php echo $margin_of_hover_error; ?>;
1260                 z-index: -1;
1261         }
1262         h1.listing a[href^="http"]:hover {
1263                 text-decoration: none;
1264         }
1265 }
1266
1267 /*=-----------------------=*/
1268 /*= In-listing edit links =*/
1269 /*=-----------------------=*/
1270
1271 h1.listing .edit-post-link {
1272         position: absolute;
1273         margin: 0;
1274 }
1275
1276 /*=---------------------------------=*/
1277 /*= Error messages on listing pages =*/
1278 /*=---------------------------------=*/
1279
1280 .listing-message {
1281         width: 100%;
1282         text-align: center;
1283         padding: 1.25em 0 1.25em 0;
1284         font-size: 1.375em;
1285 }
1286
1287 /*********************/
1288 /* LISTING POST-META */
1289 /*********************/
1290
1291 h1.listing + .post-meta {
1292         position: relative;
1293         justify-content: flex-start;
1294         margin: 0 20px 0 21px;
1295 }
1296
1297 h1.listing + .post-meta > * {
1298         margin: 0 1em 0 0;
1299 }
1300
1301 h1.listing + .post-meta .post-section {
1302         width: 0;
1303         margin: 0;
1304         overflow: hidden;
1305 }
1306 h1.listing + .post-meta .post-section::before {
1307         position: absolute;
1308         left: -36px;
1309 }
1310
1311 h1.listing + .post-meta .read-time {
1312         cursor: default;
1313 }
1314
1315 /*************/
1316 /* SEQUENCES */
1317 /*************/
1318
1319 .sequence-text {
1320         font-size: 1.2rem;
1321         padding: 0 22px;
1322 }
1323
1324 section {
1325         margin-top: 2em;
1326         margin-bottom: 4em;
1327 }
1328
1329 h1.sequence-chapter {
1330         font-size: 2.3rem;
1331 }
1332
1333 article {
1334         max-width: 100%;
1335 }
1336
1337 /**************/
1338 /* USER PAGES */
1339 /**************/
1340
1341 /*=------------=*/
1342 /*= Pagination =*/
1343 /*=------------=*/
1344
1345 #content.user-page > #top-nav-bar {
1346         grid-row: 6;
1347 }
1348
1349 /*=---------------------=*/
1350 /*= User's display name =*/
1351 /*=---------------------=*/
1352
1353 #content.user-page h1.page-main-heading {
1354         margin: 0.25em 0 0 0;
1355         line-height: 1.1;
1356         grid-row: 4;
1357 }
1358
1359 /*=--------------------=*/
1360 /*= User's karma total =*/
1361 /*=--------------------=*/
1362
1363 #content.user-page .user-stats {
1364         grid-column: 3;
1365         grid-row: 4;
1366         text-align: right;
1367         align-self: end;
1368 }
1369
1370 #content.user-page .user-stats .karma-type {
1371         white-space: nowrap;
1372 }
1373
1374 /*=----------------------=*/
1375 /*= Expanded vs. compact =*/
1376 /*=----------------------=*/
1377
1378 #content.user-page #comments-list-mode-selector {
1379         grid-row: 5 / span 2;
1380 }
1381 #content.user-page #comments-list-mode-selector button {
1382         display: block;
1383 }
1384
1385 /*=----------------------------------------------------=*/
1386 /*= All, Posts, Comments, Drafts, Conversations, Inbox =*/
1387 /*=----------------------------------------------------=*/
1388
1389 #content.user-page .sublevel-nav {
1390         margin-bottom: 0.5em;
1391 }
1392
1393 /*=--------------=*/
1394 /*= User's posts =*/
1395 /*=--------------=*/
1396
1397 #content.user-page h1.listing {
1398         margin: 0.5em 0 0 0;
1399 }
1400
1401 /*****************/
1402 /* CONVERSATIONS */
1403 /*****************/
1404
1405 /*=----------------------=*/
1406 /*= List of participants =*/
1407 /*=----------------------=*/
1408
1409 #content.conversation-page .conversation-participants {
1410         grid-column: 2 / span 2;
1411         grid-row: 3;
1412         text-align: right;
1413         margin: 0.5em 0 0 0;
1414 }
1415
1416 .conversation-participants ul,
1417 .conversation-participants li {
1418         list-style-type: none;
1419         display: inline-block;
1420         margin: 0;
1421         padding: 0;
1422 }
1423 .conversation-participants li {
1424         margin-left: 0.375em;
1425 }
1426 .conversation-participants li:not(:last-of-type)::after {
1427         content: ",";
1428 }
1429
1430 /*=-------------------------=*/
1431 /*= Posting controls (form) =*/
1432 /*=-------------------------=*/
1433
1434 #content.conversation-page .posting-controls {
1435         padding: 0 0 1em 0;
1436 }
1437 #content.conversation-page .post-meta-fields {
1438         overflow: auto;
1439         display: flex;
1440         flex-flow: row wrap;
1441 }
1442 #content.conversation-page textarea {
1443         margin-top: 0.375em;
1444 }
1445 #conversation-form {
1446         padding: 0 1em 3em 1em;
1447 }
1448 #conversation-form input[type='text'],
1449 #conversation-form label {
1450         margin: 0.25em 0;
1451 }
1452 #conversation-form label {
1453         width: 4em;
1454         text-align: right;
1455         padding: 2px 6px;
1456         border: 1px solid transparent;
1457 }
1458 #conversation-form input[type='text'] {
1459         width: calc(100% - 4em);
1460         padding: 0.25em;
1461 }
1462 #conversation-form input[type='submit'] {
1463         float: right;
1464 }
1465 #content.conversation-page #markdown-hints-checkbox ~ label {
1466         white-space: nowrap;
1467 }
1468 #content.conversation-page #markdown-hints {
1469         top: calc(100% + 2em);
1470 }
1471
1472 /*=--------------------=*/
1473 /*= Conversation title =*/
1474 /*=--------------------=*/
1475
1476 #content.conversation-page h1.page-main-heading {
1477         text-align: center;
1478         margin: 0.5em 0;
1479         line-height: 1.15;
1480 }
1481
1482 /*=----------=*/
1483 /*= Messages =*/
1484 /*=----------=*/
1485
1486 #content.conversation-page > ul.comment-thread:last-of-type {
1487         margin-bottom: 2em;
1488 }
1489
1490 /******************/
1491 /* SEARCH RESULTS */
1492 /******************/
1493
1494 #content.search-results-page h1.listing,
1495 #content.sequence-page h1.listing {
1496         font-size: 1.625em;
1497 }
1498
1499 /**************/
1500 /* LOGIN PAGE */
1501 /**************/
1502
1503 .login-container {
1504         margin: 2em 0;
1505         padding: 1em;
1506         display: flex;
1507         flex-flow: row wrap;
1508 }
1509
1510 .login-container form {
1511         flex-basis: 50%;
1512         display: grid;
1513         grid-row-gap: 0.5em;
1514         align-content: start;
1515 }
1516 .login-container form label {
1517         text-align: right;
1518         padding: 0.25em 0.5em;
1519         white-space: nowrap;
1520         grid-column: 1;
1521 }
1522 .login-container form input {
1523         grid-column: 2;
1524         padding: 0.25em;
1525 }
1526 .login-container form input[type='submit'],
1527 .login-container form a {
1528         grid-column: 2;
1529         justify-self: center;
1530 }
1531 .login-container form input[type='submit'] {
1532         width: 10em;
1533         padding: 0.35em;
1534         line-height: 1;
1535         margin: 0.5em 0 0 0;
1536 }
1537 .login-container form h1 {
1538         text-align: center;
1539         margin: 0;
1540         grid-column: 2;
1541 }
1542
1543 /* “Log in” form */
1544
1545 #login-form {
1546         grid-template-columns: 5.5em 1fr;
1547         padding: 0.5em 2em 0.5em 0;
1548 }
1549
1550 /* “Create account” form */
1551
1552 #signup-form {
1553         font-size: 0.9em;
1554         grid-template-columns: 8.5em 1fr;
1555         padding: 0.5em 1em 1em 1em;
1556 }
1557 #signup-form h1 {
1558         font-size: 1.7em;
1559 }
1560 #signup-form input[type='submit'] {
1561         padding: 0.4em 0.5em 0.5em 0.5em;
1562 }
1563
1564 /* Log in tip */
1565
1566 .login-container .login-tip {
1567         padding: 0.5em 0.5em 0.5em 3em;
1568         margin: 2em 4em 0 4em;
1569         text-indent: -2em;
1570         line-height: 1.4;
1571 }
1572 .login-container .login-tip span {
1573         font-weight: bold;
1574 }
1575
1576 /* Message box */
1577
1578 #content.login-page .error-box {
1579         margin: 1.5em 0.875em -1.5em 0.875em;
1580 }
1581 .error-box, .success-box {
1582         padding: 0.25em;
1583         text-align: center;
1584 }
1585
1586 /***********************/
1587 /* PASSWORD RESET PAGE */
1588 /***********************/
1589
1590 .reset-password-container {
1591         margin-bottom: 2em;
1592 }
1593 .reset-password-container input[type='submit'] {
1594         padding: 0.2em 0.5em;
1595         width: unset;
1596 }
1597 .reset-password-container input {
1598         margin-left: 0.5em;
1599         width: 12em;
1600 }
1601 .reset-password-container label {
1602         display: inline-block;
1603         width: 9em;
1604 }
1605 .reset-password-container form > div {
1606         margin: 0.2em;
1607 }
1608 .reset-password-container .action-container {
1609         padding-left: 11em;
1610         padding-top: 0.2em;
1611 }
1612 .reset-password-container .error-box {
1613         margin: unset;
1614 }
1615
1616 /*********************/
1617 /* TABLE OF CONTENTS */
1618 /*********************/
1619
1620 .contents {
1621         float: right;
1622         min-width: 6em;
1623         max-width: 40%;
1624         margin: 1.25em 0 0.75em 1.25em;
1625         padding: 7px 14px 10px 10px;
1626         position: relative;
1627         z-index: 1;
1628 }
1629
1630 .contents-head {
1631         text-align: center;
1632         margin-bottom: 0.25em;
1633 }
1634
1635 .post-body .contents ul {
1636         list-style-type: none;
1637         margin: 0 0 0 0.5em;
1638         counter-reset: toc-item-1 toc-item-2 toc-item-3;
1639         padding-left: 1em;
1640         font-size: 0.75em;
1641 }
1642 .post-body .contents li {
1643         margin: 0.15em 0 0.3em 1em;
1644         text-align: left;
1645         text-indent: -1em;
1646         line-height: 1.2;
1647         position: relative;
1648 }
1649 .post-body .contents li::before {
1650         position: absolute;
1651         width: 3em;
1652         display: block;
1653         text-align: right;
1654         left: -4.5em;
1655 }
1656 .contents .toc-item-1 {
1657         counter-increment: toc-item-1;
1658         counter-reset: toc-item-2 toc-item-3;
1659 }
1660 .contents .toc-item-1::before {
1661         content: counter(toc-item-1);
1662 }
1663 .contents .toc-item-1 ~ .toc-item-2 {
1664         margin-left: 2.9em;
1665         font-size: 0.95em;
1666 }
1667 .contents .toc-item-2 {
1668         counter-increment: toc-item-2;
1669         counter-reset: toc-item-3;
1670 }
1671 .contents .toc-item-1 ~ .toc-item-2::before {
1672         content: counter(toc-item-1) "." counter(toc-item-2);
1673 }
1674 .contents .toc-item-2::before {
1675         content: counter(toc-item-2);
1676 }
1677 .contents .toc-item-1 + .toc-item-3 {
1678         counter-increment: toc-item-2 toc-item-3;
1679 }
1680 .contents .toc-item-2 ~ .toc-item-3,
1681 .contents .toc-item-1 ~ .toc-item-3 {
1682         margin-left: 2.9em;
1683         font-size: 0.95em;
1684 }
1685 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3 {
1686         margin-left: 5.7em;
1687         font-size: 0.9em;
1688 }
1689 .contents .toc-item-3 {
1690         counter-increment: toc-item-3;
1691 }
1692 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3::before {
1693         content: counter(toc-item-1) "." counter(toc-item-2) "." counter(toc-item-3);
1694 }
1695 .contents .toc-item-1 ~ .toc-item-3::before {
1696         content: counter(toc-item-1) "." counter(toc-item-3);
1697 }
1698 .contents .toc-item-2 ~ .toc-item-3::before {
1699         content: counter(toc-item-2) "." counter(toc-item-3);
1700 }
1701 .contents .toc-item-3::before {
1702         content: counter(toc-item-3);
1703 }
1704 .contents .toc-item-4,
1705 .contents .toc-item-5,
1706 .contents .toc-item-6 {
1707         display: none;
1708 }
1709
1710 /********************/
1711 /* POSTS & COMMENTS */
1712 /********************/
1713
1714 .post-meta > *,
1715 .comment-meta > * {
1716         display: inline-block;
1717         margin-right: 1em;
1718         font-size: 1.0625em;
1719         white-space: nowrap;
1720 }
1721 .body-text {
1722         overflow-wrap: break-word;
1723         text-align: justify;
1724 }
1725 .body-text p {
1726         margin: 1em 0;
1727 }
1728 .retracted .body-text {
1729         text-decoration: line-through;
1730 }
1731
1732 .bare-url {
1733         word-break: break-all;
1734         hyphens: auto;
1735 }
1736 .body-text a:not([href]),
1737 .body-text a:not([href]):hover,
1738 .body-text a:not([href])::before,
1739 .body-text a:not([href])::after {
1740         text-decoration: none;
1741         text-shadow: unset;
1742         border: unset;
1743         color: unset;
1744         content: unset;
1745 }
1746 /*************/
1747 /* POST-META */
1748 /*************/
1749
1750 .post-meta {
1751         display: flex;
1752         flex-flow: row wrap;
1753         justify-content: center;
1754 }
1755 .post-meta .lw2-link {
1756         opacity: 0.5;
1757         order: 1;
1758 }
1759 .post-meta > *,
1760 .post-meta .post-section::before {
1761         margin: 0 0.5em;
1762 }
1763 .post-meta .post-section {
1764         order: -1;
1765         margin: 0;
1766         visibility: hidden;
1767 }
1768 .post-meta .post-section::before,
1769 .comment-meta .alignment-forum {
1770         visibility: visible;
1771         font-family: "Font Awesome", "Font Awesome 5 Free";
1772         font-weight: 900;
1773 }
1774 .post-section.frontpage::before {
1775         content: "\F015";
1776 }
1777 .post-section.featured::before {
1778         content: "\F005";
1779 }
1780 .post-section.meta::before {
1781         content: "\F077";
1782 }
1783 .post-section.personal::before {
1784         content: "\F007";
1785 }
1786 .post-section.draft::before {
1787         content: "\F15B";
1788 }
1789 .post-section.alignment-forum::before,
1790 .comment-meta .alignment-forum {
1791         content: "AF";
1792         font-family: Concourse, 'Changa One';
1793 }
1794
1795 /*= Karma controls hover tooltips =*/
1796
1797 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
1798         .post .karma,
1799         .comment-item .karma {
1800                 position: relative;
1801         }
1802         .post .karma.active-controls::after,
1803         .comment-item .karma.active-controls::after {
1804                 content: "Double-click for strong vote";
1805                 position: absolute;
1806                 pointer-events: none;
1807                 display: block;
1808                 left: 6px;
1809                 max-width: calc(100% - 12px);
1810                 line-height: 1.15;
1811                 white-space: normal;
1812                 text-align: center;
1813                 font-size: 0.875rem;
1814                 opacity: 0;
1815                 transition: opacity 0.2s ease;
1816         }
1817         .post .karma.active-controls:hover::after,
1818         .comment-item .karma.active-controls:hover::after {
1819                 opacity: 1.0;
1820         }
1821
1822         .post .karma .karma-value::after,
1823         .comment-item .karma .karma-value::after {
1824                 content: attr(title);
1825                 position: absolute;
1826                 pointer-events: none;
1827                 display: block;
1828                 left: 50%;
1829                 transform: translateX(-50%);
1830                 white-space: nowrap;
1831                 text-align: center;
1832                 font-size: 0.875rem;
1833                 color: #bbb;
1834                 opacity: 0;
1835                 transition: opacity 0.2s ease;
1836         }
1837         .post .karma .karma-value:hover::after,
1838         .comment-item .karma .karma-value:hover::after {
1839                 opacity: 1.0;
1840         }
1841         .comment-item .karma .karma-value:hover::after {
1842                 z-index: 5001;
1843         }
1844
1845         .author {
1846                 position: relative;
1847         }
1848         .author:not(.redacted)::before {
1849                 content: attr(data-full-name);
1850                 position: absolute;
1851                 pointer-events: none;
1852                 display: block;
1853                 padding: 0 1em;
1854                 left: 50%;
1855                 bottom: 2em;
1856                 transform: translateX(-50%);
1857                 white-space: nowrap;
1858                 text-align: center;
1859                 font-size: 0.875rem;
1860                 font-weight: normal;
1861                 opacity: 0;
1862                 transition: opacity 0.2s ease;
1863                 z-index: 5001;
1864         }
1865         .author:hover::before {
1866                 opacity: 1.0;
1867         }
1868 }
1869
1870 /*********/
1871 /* POSTS */
1872 /*********/
1873
1874 .post {
1875         max-width: 100%;
1876 }
1877
1878 .post-body {
1879         min-height: 8em;
1880         padding: 0 30px;
1881         line-height: 1.5;
1882         font-size: 1.3rem;
1883         overflow: auto;
1884         margin: 0.5em 0 0 0;
1885 }
1886 h1.post-title {
1887         margin: 1.1em 0 0.35em 0;
1888         padding: 0 30px;
1889         text-align: center;
1890         font-size: 2.5em;
1891         line-height: 1;
1892 }
1893 .post .post-meta {
1894         text-align: center;
1895         position: relative;
1896         z-index: 2;
1897 }
1898 .post .top-post-meta:last-child {
1899         margin-bottom: 40px;
1900 }
1901 .post .bottom-post-meta {
1902         margin: 0;
1903         padding: 20px 0;
1904 }
1905 .bottom-post-meta {
1906         border-style: solid;
1907         border-width: 1px 0;
1908 }
1909
1910 /*******************/
1911 /* POST NAVIGATION */
1912 /*******************/
1913
1914 .post-nav-item {
1915         margin: 1em 0;
1916         display: flex;
1917 }
1918 .post-nav-item > * {
1919         display: flex;
1920         flex-flow: column;
1921         justify-content: flex-start;
1922 }
1923
1924 .post-nav-title {
1925         font-size: 1.125em;
1926         line-height: 1.15;
1927         display: inline;
1928         border-bottom: 1px dotted transparent;
1929 }
1930
1931 .sequence-title {
1932         flex: 1 1 36%;
1933         align-items: center;
1934 }
1935 .sequence-title .post-nav-title {
1936         font-size: 1.5em;
1937 }
1938
1939 .post-nav {
1940         flex: 1 1 32%;
1941         display: flex;
1942         flex-flow: column;
1943         justify-content: flex-end;
1944 }
1945 .post-nav .post-nav-label {
1946         display: none;
1947 }
1948 .post-nav .post-nav-title {
1949         padding: 0 0 0.125em 0;
1950 }
1951
1952 .post-nav.prev {
1953         order: -1;
1954         margin: 0 1.5em 0 0;
1955         align-items: flex-start;
1956 }
1957 .post-nav.prev .post-nav-title::before {
1958         content: "\F0D9\2005";
1959 }
1960 .post-nav.next {
1961         margin: 0 0 0 1.5em;
1962         text-align: right;
1963         align-items: flex-end;
1964 }
1965 .post-nav.next .post-nav-title::after {
1966         content: "\2004\F0DA";
1967 }
1968 .post-nav.prev .post-nav-title::before,
1969 .post-nav.next .post-nav-title::after {
1970         font-family: Font Awesome;
1971         font-weight: 900;
1972         vertical-align: text-bottom;
1973         opacity: 0.75;
1974 }
1975
1976 @media only screen and (max-width: 900px) {
1977         .post-nav-item {
1978                 flex-flow: row wrap;
1979                 font-size: 0.875em;
1980                 margin: 0;
1981         }
1982         .post-nav.prev,
1983         .post-nav.next {
1984                 flex-basis: 50%;
1985         }
1986         .post-nav.next {
1987                 margin: 0;
1988                 padding: 0.5em;
1989         }
1990         .post-nav.prev {
1991                 margin: 0 0 0 -1px;
1992                 padding: 0.5em;
1993                 position: relative;
1994                 left: 1px;
1995         }
1996         .sequence-title {
1997                 flex-basis: 100%;
1998                 order: 2;
1999                 padding: 0.5em 0 0.75em 0;
2000         }
2001 }
2002
2003 /**************/
2004 /* LINK POSTS */
2005 /**************/
2006
2007 .post.link-post > .post-body > p:first-child {
2008         text-align: center;
2009         font-size: 1.125em;
2010         margin: 0.5em 0 0 0;
2011 }
2012 .post.link-post > .post-body > p:only-child {
2013         font-size: 1.5em;
2014         margin: 1em 0;
2015 }
2016 .post.link-post a.link-post-link::before {
2017         content: "\F0C1";
2018         font-family: "Font Awesome", "Font Awesome 5 Free";
2019         font-weight: 900;
2020         font-size: 0.75em;
2021         position: relative;
2022         top: -2px;
2023         margin-right: 0.25em;
2024 }
2025
2026 /************/
2027 /* COMMENTS */
2028 /************/
2029
2030 .comments {
2031         max-width: 100%;
2032         padding: 0 0 1px 0;
2033         position: relative;
2034 }
2035 .comments::before {
2036         content: "";
2037         position: absolute;
2038         display: block;
2039         top: 0;
2040         left: 0;
2041         width: 100%;
2042         height: 100%;
2043         pointer-events: none;
2044 }
2045 ul.comment-thread {
2046         list-style-type: none;
2047         padding: 0;
2048         max-width: 100%;
2049 }
2050 .comments .comment-thread > li {
2051         position: relative;
2052 }
2053 #content > #top-nav-bar + .comment-thread .comment-item {
2054         margin-top: 0;
2055 }
2056
2057 .comment-item {
2058         margin: 2em 0 0 0;
2059 }
2060 .comment-item .comment-item {
2061         margin: 1em 8px 8px 16px;
2062 }
2063 .comment-item .comment-item + .comment-item {
2064         margin: 2em 8px 8px 16px;
2065 }
2066
2067 .comment-body {
2068         line-height: 1.45;
2069         font-size: 1.2rem;
2070         padding: 10px;
2071 }
2072 .comment-body ul {
2073         list-style-type: circle;
2074 }
2075 .comment-body > *:first-child {
2076         margin-top: 0;
2077 }
2078 .comment-body > *:last-child {
2079         margin-bottom: 0;
2080 }
2081
2082 .comments-empty-message {
2083         width: 100%;
2084         text-align: center;
2085         padding: 0.75em 0 0.9em 0;
2086         font-size: 1.375em;
2087 }
2088
2089 /**********************************/
2090 /* DEEP COMMENT THREAD COLLAPSING */
2091 /**********************************/
2092
2093 .comment-item input[id^="expand"] {
2094         display: none;
2095 }
2096 .comment-item input[id^="expand"] + label {
2097         display: block;
2098         visibility: hidden;
2099         position: relative;
2100         margin: 8px 9px;
2101 }
2102 .comment-item input[id^="expand"] + label::after {
2103         content: "(Expand " attr(data-child-count) "    below)";
2104         visibility: visible;
2105         position: absolute;
2106         left: 0;
2107         white-space: nowrap;
2108         cursor: pointer;
2109 }
2110 .comment-item input[id^="expand"]:checked + label::after {
2111         content: "(Collapse " attr(data-child-count) "  below)";
2112 }
2113 .comment-item input[id^="expand"] ~ .comment-thread {
2114         max-height: 34px;
2115         overflow: hidden;
2116 }
2117 .comment-item input[id^="expand"] ~ .comment-thread > li:first-child {
2118         margin-top: 0;
2119 }
2120 .comment-item input[id^="expand"]:checked ~ .comment-thread {
2121         max-height: 1000000px;
2122 }
2123
2124 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
2125         margin: 0;
2126 }
2127 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item a.comment-parent-link:hover::after {
2128         display: none;
2129 }
2130
2131 /****************/
2132 /* COMMENT-META */
2133 /****************/
2134
2135 .comment-meta {
2136         padding: 2px 24px 2px 10px;
2137         margin: 0 -1px;
2138         border: none;
2139         display: flex;
2140         flex-flow: row wrap;
2141         align-items: baseline;
2142 }
2143 .user-page .comment-meta,
2144 .conversation-page .comment-meta {
2145         padding-right: 10px;
2146 }
2147 .comment-meta .comment-post-title {
2148         flex-basis: 100%;
2149         overflow: hidden;
2150         text-overflow: ellipsis;
2151         line-height: 1.3;
2152 }
2153 .conversation-page .comment-meta .comment-post-title {
2154         margin: 0;
2155         flex-basis: unset;
2156         flex: 1 0 auto;
2157         text-align: right;
2158         display: none;  /* Not sure if we need to display this... */
2159 }
2160 .comment-item .author:not(.redacted).original-poster::after {
2161         content: "\2004(OP)";
2162         font-size: 0.75em;
2163 }
2164
2165 /*****************************/
2166 /* COMMENT THREAD NAVIGATION */
2167 /*****************************/
2168
2169 a.comment-parent-link:not(.inline-author),
2170 a.comment-parent-link.inline-author::before {
2171         opacity: 0.5;
2172 }
2173 a.comment-parent-link:hover {
2174         opacity: 1.0;
2175 }
2176 a.comment-parent-link::before {
2177         content: "\F062";
2178         font-family: "Font Awesome", "Font Awesome 5 Free";
2179         font-weight: 900;
2180         font-size: 0.75rem;
2181         line-height: 1;
2182         position: absolute;
2183         z-index: 1;
2184         display: block;
2185         padding: 3px 3px 0 3px;
2186         width: 16px;
2187         height: calc(100% + 2px);
2188         top: -1px;
2189         left: -17px;
2190 }
2191 a.comment-parent-link::after {
2192         content: "";
2193         position: absolute;
2194         z-index: 0;
2195         display: block;
2196         width: calc(100% + 26px);
2197         height: calc(100% + 38px);
2198         top: -29px;
2199         left: -17px;
2200         pointer-events: none;
2201         overflow: hidden;
2202         visibility: hidden;
2203 }
2204 a.comment-parent-link:hover::after {
2205         visibility: visible;
2206 }
2207
2208 .comment-child-links {
2209         flex-basis: 100%;
2210 }
2211 .comment-child-link {
2212         margin: 0 0.25em;
2213         display: inline-block;
2214 }
2215 .comment-child-link::before {
2216         content: ">";
2217         display: inline-block;
2218         margin: 0 2px 0 0;
2219 }
2220
2221 .comment-popup {
2222         position: fixed;
2223         top: 10%;
2224         right: 10%;
2225         max-width: 700px;
2226         z-index: 10001;
2227         font-size: 1rem;
2228         white-space: unset;
2229         pointer-events: none;
2230 }
2231 .comment-popup .comment-parent-link {
2232         display: none;
2233 }
2234 .comment-popup .comment-body {
2235         font-size: 1.0625rem;
2236 }
2237
2238 /**********************/
2239 /* COMMENT PERMALINKS */
2240 /**********************/
2241 /********************/
2242 /* COMMENT LW LINKS */
2243 /********************/
2244
2245 .comment-meta .permalink::before,
2246 .comment-meta .lw2-link::before,
2247 .individual-thread-page a.comment-parent-link:empty::before {
2248         content: "";
2249         display: inline-block;
2250         width: 1rem;
2251         height: 1rem;
2252         border-radius: 3px;
2253         box-shadow:
2254                 0 0 0 1px #fff,
2255                 0 0 0 2px #00e,
2256                 0 0 0 3px transparent;
2257         padding: 0 0 0 2px;
2258         background-size: 100%;
2259         position: relative;
2260         top: 2px;
2261         opacity: 0.5;
2262 }
2263 .comment-meta .permalink::before {
2264         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-white-on-blue.gif")) ?>');
2265 }
2266 .comment-meta .lw2-link::before {
2267         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-white-on-blue.gif")) ?>');
2268 }
2269 .individual-thread-page a.comment-parent-link:empty::before {
2270         left: unset;
2271         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-white-on-blue.gif")) ?>');
2272 }
2273 .comment-meta .permalink:hover::before {
2274         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-blue-on-white.gif")) ?>');
2275 }
2276 .comment-meta .lw2-link:hover::before {
2277         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-blue-on-white.gif")) ?>');
2278 }
2279 .individual-thread-page a.comment-parent-link:empty:hover::before {
2280         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-blue-on-white.gif")) ?>');
2281 }
2282 .comment-meta .permalink:hover::before,
2283 .comment-meta .lw2-link:hover::before,
2284 .individual-thread-page a.comment-parent-link:empty:hover::before {
2285         box-shadow:
2286                 0 0 0 2px #00e,
2287                 0 0 0 3px transparent;
2288         opacity: 1.0;
2289         filter: unset;
2290 }
2291 .comment-meta .permalink:active::before,
2292 .comment-meta .lw2-link:active::before,
2293 .individual-thread-page a.comment-parent-link:empty:active::before {
2294         transform: scale(0.9);
2295 }
2296
2297 .comment-meta .permalink,
2298 .comment-meta .lw2-link,
2299 .individual-thread-page .comment-parent-link:empty {
2300         position: relative;
2301         opacity: 1.0;
2302 }
2303 .comment-meta .permalink::after,
2304 .comment-meta .lw2-link::after,
2305 .individual-thread-page .comment-parent-link:empty::after {
2306         content: "";
2307         width: 30px;
2308         height: 30px;
2309         display: block;
2310         position: absolute;
2311         top: -2px;
2312         left: -7px;
2313         box-shadow: none;
2314         pointer-events: auto;
2315         visibility: visible;
2316 }
2317
2318 /*************************/
2319 /* COMMENTS COMPACT VIEW */
2320 /*************************/
2321
2322 #comments-list-mode-selector,
2323 #content.index-page #comments-list-mode-selector,
2324 #content.user-page #comments-list-mode-selector {
2325         padding-top: 6px;
2326         grid-column: 1;
2327         position: unset;
2328         z-index: 1;
2329         justify-self: start;
2330         align-self: start;
2331 }
2332 #comments-list-mode-selector button {
2333         color: transparent;
2334         width: 32px;
2335         height: 32px;
2336         padding: 6px;
2337         margin: 1px;
2338         overflow: hidden;
2339         background-repeat: no-repeat;
2340         background-size: 100%;
2341         background-origin: content-box;
2342 }
2343 #comments-list-mode-selector button:disabled {
2344         cursor: auto;
2345 }
2346 #comments-list-mode-selector button.expanded {
2347         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/expanded_2x.gif")) ?>');
2348 }
2349 #comments-list-mode-selector button.compact {
2350         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/compact_2x.gif")) ?>');
2351 }
2352 @media only screen and (max-resolution: 1dppx) {
2353         #comments-list-mode-selector button.expanded {
2354                 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/expanded_1x.gif")) ?>');
2355         }
2356         #comments-list-mode-selector button.compact {
2357                 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/compact_1x.gif")) ?>');
2358         }
2359 }
2360
2361 #content > ul.comment-thread > li.comment-item,
2362 #content.compact > ul.comment-thread > li.comment-item {
2363         margin: 0;
2364 }
2365
2366 #content > .comment-thread {
2367         margin: 1em 0;
2368 }
2369 #content.compact > .comment-thread {
2370         font-size: 0.9375rem;
2371         margin: 0.5em 0;
2372 }
2373 #content.compact > .comment-thread:hover {
2374         z-index: 1;
2375 }
2376 #content.compact > .comment-thread .comment-body {
2377         font-size: 1.0625rem;
2378 }
2379 #content.compact > .comment-thread .comment-item,
2380 #content.index-page .comment-item.ignored,
2381 #content.inbox-user-page .comment-item.ignored {
2382         max-height: 61px;
2383         margin-top: 1em;
2384         overflow: hidden;
2385         position: relative;
2386 }
2387 #content.compact > .comment-thread .comment-item {
2388         pointer-events: none;
2389 }
2390 #content.compact > .comment-thread .comment-item::after {
2391         content: "…";
2392         position: absolute;
2393         right: 0;
2394         bottom: 0;
2395         font-size: 2rem;
2396         line-height: 1;
2397         padding: 0 16px 10px 64px;
2398         pointer-events: auto;
2399 }
2400 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
2401         #content.compact:not(:focus-within) > .comment-thread .comment-item:hover,
2402         #content.compact > .comment-thread .comment-item.expanded {
2403                 overflow: visible;
2404                 pointer-events: auto;
2405                 z-index: 10;
2406         }
2407 }
2408 @media only screen and (hover: none), only screen and (-moz-touch-enabled) {
2409         #content.compact > .comment-thread.expanded .comment-item {
2410                 overflow: visible;
2411                 pointer-events: auto;
2412                 z-index: 10;
2413         }
2414 }
2415 #content.compact > .comment-thread .comment-item .comment-meta {
2416         white-space: nowrap;
2417         overflow: hidden;
2418         text-overflow: ellipsis;
2419         padding: 2px 10px;
2420 }
2421 #content.compact > .comment-thread .comment-item:hover .comment-meta {
2422         white-space: unset;
2423 }
2424 #content.compact > .comment-thread .comment-item .comment-meta a {
2425         pointer-events: auto;
2426 }
2427 #content.compact > .comment-thread .comment-item .comment-meta .comment-post-title {
2428         display: inline;
2429 }
2430 #content.compact > .comment-thread .comment-item .comment-meta .karma + .comment-post-title {
2431         margin-left: 0.75em;
2432 }
2433 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
2434         #content.compact > .comment-thread:last-of-type .comment-item:hover,
2435         #content.compact > .comment-thread:last-of-type .comment-item.expanded {
2436                 max-height: unset;
2437         }
2438         #content.compact > .comment-thread .comment-item:hover .comment,
2439         #content.compact > .comment-thread .comment-item.expanded .comment {
2440                 position: relative;
2441                 z-index: 1;
2442                 margin-bottom: 2em;
2443                 bottom: 0;
2444         }
2445         #content.compact > .comment-thread .comment-item:hover .comment::before,
2446         #content.compact > .comment-thread .comment-item.expanded .comment::before{
2447                 content: "";
2448                 position: absolute;
2449                 display: block;
2450                 width: calc(100% + 20px);
2451                 height: calc(100% + 20px);
2452                 z-index: -1;
2453                 top: -10px;
2454                 left: -10px;
2455         }
2456         #content.compact > .comment-thread:last-of-type .comment-item:hover .comment,
2457         #content.compact > .comment-thread:last-of-type .comment-item.expanded .comment{
2458                 margin: 0;
2459         }
2460 }
2461 @media only screen and (hover: none), only screen and (-moz-touch-enabled) {
2462         #content.compact > .comment-thread.expanded:last-of-type .comment-item {
2463                 max-height: unset;
2464         }
2465         #content.compact > .comment-thread.expanded .comment-item .comment {
2466                 position: relative;
2467                 z-index: 1;
2468                 margin-bottom: 2em;
2469                 bottom: 0;
2470         }
2471         #content.compact > .comment-thread.expanded .comment-item .comment::before {
2472                 content: "";
2473                 position: absolute;
2474                 display: block;
2475                 width: calc(100% + 14px);
2476                 height: calc(100% + 20px);
2477                 z-index: -1;
2478                 top: -10px;
2479                 left: -10px;
2480         }
2481         #content.compact > .comment-thread.expanded:last-of-type .comment-item .comment {
2482                 margin: 0;
2483         }
2484         #content.compact > .comment-thread.expanded .comment-item .comment::after {
2485                 content: "";
2486                 display: block;
2487                 position: fixed;
2488                 top: 0;
2489                 left: 0;
2490                 width: 100%;
2491                 height: 100%;
2492                 z-index: -2;
2493                 background-color: rgba(0,0,0,0.5);
2494         }
2495 }
2496
2497 /*****************************/
2498 /* HIGHLIGHTING NEW COMMENTS */
2499 /*****************************/
2500
2501 .new-comment::before {
2502         content: "";
2503         position: absolute;
2504         width: 100%;
2505         height: 100%;
2506         z-index: 5000;
2507         pointer-events: none;
2508 }
2509
2510 /***********************************/
2511 /* COMMENT THREAD MINIMIZE BUTTONS */
2512 /***********************************/
2513
2514 .comment-minimize-button {
2515         font-family: "Font Awesome", "Font Awesome 5 Free";
2516         font-weight: 900;
2517         font-size: 1.25rem;
2518         line-height: 1;
2519         position: absolute;
2520         right: 1px;
2521         top: 1px;
2522         width: 18px;
2523         margin: 0;
2524         cursor: pointer;
2525 }
2526 .comment-minimize-button:active {
2527         transform: scale(0.9);
2528 }
2529 .comment-minimize-button::after {
2530         content: attr(data-child-count);
2531         font-weight: normal;
2532         font-size: 0.8125rem;
2533         position: absolute;
2534         left: 0;
2535         width: 100%;
2536         text-align: center;
2537         top: 21px;
2538 }
2539 #content.individual-thread-page .comment-minimize-button {
2540         display: none;
2541 }
2542
2543 /*****************/
2544 /* IGNORE SYSTEM */
2545 /*****************/
2546
2547 #content.comment-thread-page .comment-item.ignored {
2548         height: 38px;
2549         overflow: hidden;
2550 }
2551 .comment-item.ignored > .comment > .comment-meta > .author {
2552         text-decoration: line-through;
2553 }
2554
2555 /***********************************/
2556 /* INDIVIDUAL COMMENT THREAD PAGES */
2557 /***********************************/
2558
2559 .individual-thread-page > h1 {
2560         line-height: 1;
2561         margin: 0.75em 0 3px 0;
2562 }
2563 .individual-thread-page .comments {
2564         border: none;
2565 }
2566
2567 /****************/
2568 /* VOTE BUTTONS */
2569 /****************/
2570
2571 .vote {
2572         margin: 0;
2573 }
2574 .vote {
2575         font-family: "Font Awesome", "Font Awesome 5 Free";
2576         font-weight: 900;
2577         border: none;
2578 }
2579 .karma.waiting {
2580         opacity: 0.5;
2581 }
2582 .karma.waiting button {
2583         pointer-events: none;
2584 }
2585
2586 /* Replicated karma controls at bottom of comments. */
2587 .comment-controls .karma {
2588         float: left;
2589         margin-left: -14px;
2590         font-size: 0.9375em;
2591 }
2592
2593 /*****************************/
2594 /* COMMENTING AND POSTING UI */
2595 /*****************************/
2596
2597 .comment-controls {
2598         text-align: right;
2599         margin: 0 8px 8px 16px;
2600         position: relative;
2601         z-index: 9999;
2602 }
2603 .comment-thread .comment-controls + .comment-thread > li:first-child {
2604         margin-top: 8px;
2605 }
2606 .comments > .comment-controls {
2607         margin: 8px 0 0 0;
2608 }
2609 .comments > .comment-controls:last-child {
2610         margin: 8px 0 16px 0;
2611 }
2612
2613 .posting-controls input[type='submit'] {
2614         margin: 6px;
2615         padding: 4px 10px;
2616         font-size: 1.125rem;
2617 }
2618
2619 .comment-controls .cancel-comment-button {
2620         position: absolute;
2621         right: 0;
2622         margin: 0;
2623         height: 27px;
2624         font-size: inherit;
2625         padding: 4px 8px 2px 4px;
2626         z-index: 1;
2627 }
2628 .comment-controls .cancel-comment-button::before {
2629         font-family: "Font Awesome", "Font Awesome 5 Free";
2630         margin-right: 3px;
2631         content: '\F00D';
2632         font-weight: 900;
2633         font-size: 0.9em;
2634         opacity: 0.7;
2635 }
2636
2637 .comment + .comment-controls .action-button {
2638         font-weight: normal;
2639         font-size: 1.0625em;
2640         padding: 1px 6px;
2641 }
2642 .comment-controls .action-button::before {
2643         font-family: "Font Awesome", "Font Awesome 5 Free";
2644         margin-right: 3px;
2645 }
2646 .new-comment-button {
2647         font-size: 1.5rem;
2648         margin: 0 0.25em;
2649 }
2650 .comment-controls .reply-button::before {
2651         content: '\F3E5';
2652         font-weight: 900;
2653         font-size: 0.9em;
2654         opacity: 0.6;
2655 }
2656
2657 .post-controls {
2658         text-align: right;
2659         margin: 0.75em 0 0 0;
2660         grid-row: 3;
2661         align-self: start;
2662         justify-self: end;
2663 }
2664 .post {
2665         grid-row: 3;
2666 }
2667 .edit-post-link {
2668         display: inline-block;
2669         margin-bottom: 0.25em;
2670         font-size: 1.125rem;
2671 }
2672 .edit-post-link::before {
2673         margin-right: 0.3em;
2674 }
2675 .comment-controls .edit-button::before,
2676 .edit-post-link::before {
2677         content: '\F303';
2678         font-family: "Font Awesome", "Font Awesome 5 Free";
2679         font-weight: 900;
2680         font-size: 0.75em;
2681         position: relative;
2682         top: -1px;
2683 }
2684
2685 .comment-controls .delete-button {
2686         margin-right: 0.25em;
2687 }
2688 .comment-controls .edit-button,
2689 .comment-controls .retract-button,
2690 .comment-controls .unretract-button {
2691         margin-right: 1em;
2692 }
2693 .comment-controls .retract-button::before {
2694         content: '\F4B3';
2695         opacity: 0.6;
2696 }
2697 .comment-controls .unretract-button::before {
2698         content: '\F075';
2699         opacity: 0.9;
2700 }
2701 .comment-controls .delete-button::before {
2702         content: '\F05E';
2703         opacity: 0.7;
2704 }
2705 .comment-controls .retract-button::before,
2706 .comment-controls .unretract-button::before,
2707 .comment-controls .delete-button::before {
2708         font-weight: 900;
2709         font-size: 0.9em;
2710 }
2711
2712 .comment-controls form {
2713         position: relative;
2714 }
2715 .textarea-container {
2716         position: relative;
2717 }
2718 .posting-controls textarea {
2719         display: block;
2720         width: 100%;
2721         height: 15em;
2722         min-height: 15em;
2723         max-height: calc(100vh - 6em);
2724         margin: 2px 0 0 0;
2725         padding: 4px 5px;
2726         font-size: 1.2rem;
2727         border-style: solid;
2728         border-width: 29px 1px 1px 1px;
2729         resize: none;
2730 }
2731
2732 /* GUIEdit buttons */
2733
2734 .guiedit-buttons-container {
2735         position: absolute;
2736         left: 1px;
2737         top: 1px;
2738         width: calc(100% - 2px);
2739         height: 28px;
2740         text-align: left;
2741         padding: 1px 4px 0 4px;
2742         overflow: hidden;
2743 }
2744 .comment-thread-page .guiedit-buttons-container {
2745         padding-right: 60px;
2746 }
2747 .guiedit-buttons-container button {
2748         height: 26px;
2749         padding: 0 7px;
2750         font-weight: 900;
2751         font-size: 0.875rem;
2752         line-height: 1;
2753         position: static;
2754 }
2755 .guiedit-buttons-container button:active {
2756         transform: none;
2757 }
2758 .guiedit-buttons-container button:active div {
2759         transform: scale(0.9);
2760 }
2761 .guiedit-buttons-container button sup {
2762         font-weight: bold;
2763 }
2764 .guiedit::after {
2765         content: attr(data-tooltip);
2766         position: absolute;
2767         font-weight: normal;
2768         font-size: 1rem;
2769         top: 2px;
2770         left: 464px;
2771         height: 25px;
2772         padding: 4px 0;
2773         white-space: nowrap;
2774         visibility: hidden;
2775 }
2776 .guiedit:hover::after {
2777         visibility: visible;
2778 }
2779
2780 /* Markdown hints */
2781
2782 .posting-controls .markdown-reference-link {
2783         float: left;
2784         padding: 1px 0 0 6px;
2785 }
2786 .posting-controls .markdown-reference-link a {
2787         padding-right: 1.5em;
2788         margin-right: 0.15em;
2789         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');
2790         background-size: 1.25em;
2791         background-repeat: no-repeat;
2792         background-position: right center;
2793 }
2794
2795 #markdown-hints-checkbox + label {
2796         float: left;
2797         margin: 2px 0 0 1em;
2798         line-height: 1.3;
2799         cursor: pointer;
2800 }
2801 #edit-post-form #markdown-hints-checkbox + label {
2802         padding: 0;
2803 }
2804 #markdown-hints-checkbox {
2805         visibility: hidden;
2806         float: left;
2807 }
2808 #markdown-hints-checkbox + label::after {
2809         content: "(Show Markdown help)";
2810 }
2811 #markdown-hints-checkbox:checked + label::after {
2812         content: "(Hide Markdown help)";
2813 }
2814 #markdown-hints-checkbox + label::before {
2815         content: '\F059';
2816         font-family: "Font Awesome", "Font Awesome 5 Free";
2817         font-weight: 900;
2818         margin-right: 3px;
2819 }
2820 #markdown-hints-checkbox:checked + label::before {
2821         font-weight: normal;
2822 }
2823 #markdown-hints {
2824         margin: 4px 0 0 4px;
2825         padding: 4px 8px;
2826         position: absolute;
2827         text-align: left;
2828         top: calc(100% - 1em);
2829         z-index: 1;
2830         display: none;
2831 }
2832 .comment-controls #markdown-hints {
2833         top: calc(100% + 1.75em);
2834 }
2835 #markdown-hints-checkbox:checked ~ #markdown-hints {
2836         display: table;
2837 }
2838 .markdown-hints-row {
2839         display: table-row;
2840 }
2841 #markdown-hints .markdown-hints-row span,
2842 #markdown-hints .markdown-hints-row code {
2843         float: none;
2844         display: table-cell;
2845         border: none;
2846         background-color: inherit;
2847         padding: 0 12px 0 0;
2848 }
2849
2850 /******************/
2851 /* EDIT POST FORM */
2852 /******************/
2853
2854 #edit-post-form {
2855         padding: 1em 1em 4em 1em;
2856 }
2857 #edit-post-form .post-meta-fields {
2858         display: grid;
2859         grid-template-columns: 5em auto auto auto 1fr auto;
2860         margin-bottom: 0.625em;
2861 }
2862
2863 #edit-post-form label[for='title'],
2864 #edit-post-form label[for='url'],
2865 #edit-post-form label[for='section'] {
2866         grid-column: 1;
2867 }
2868 #edit-post-form input[type='text'] {
2869         padding: 0.25em;
2870         grid-column: 2 / span 4;
2871         margin-bottom: 0.5em;
2872 }
2873
2874 #edit-post-form .link-post-checkbox,
2875 #edit-post-form .link-post-checkbox + label {
2876         grid-row: 1;
2877         grid-column: 6;
2878 }
2879 #edit-post-form .question-checkbox,
2880 #edit-post-form .question-checkbox + label {
2881         grid-row: 3;
2882         grid-column: 5;
2883         justify-self: start;
2884         margin-left: 1.5em;
2885 }
2886
2887 #edit-post-form .post-meta-fields input[type='checkbox'] {
2888         height: 0;
2889         opacity: 0;
2890         pointer-events: none;
2891 }
2892 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2893         white-space: nowrap;
2894         position: relative;
2895         cursor: pointer;
2896         padding: 0.25em 0.5em 0.25em calc(20px + 0.25em + 0.3725em);
2897         align-self: start;
2898 }
2899 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2900         content: "";
2901         font-family: "Font Awesome", "Font Awesome 5 Free";
2902         font-size: 1.375rem;
2903         line-height: 0.7;
2904         text-indent: 1px;
2905         font-weight: 900;
2906         position: absolute;
2907         width: 20px;
2908         height: 20px;
2909         left: 5px;
2910 }
2911 #edit-post-form label[for='url'],
2912 #edit-post-form input[name='url'] {
2913         display: none;
2914 }
2915 #edit-post-form .link-post-checkbox:checked ~ label[for='url'],
2916 #edit-post-form .link-post-checkbox:checked ~ input[name='url'] {
2917         display: initial;
2918 }
2919 #edit-post-form label {
2920         line-height: normal;
2921         border: 1px solid transparent;
2922         text-align: right;
2923     padding: 0.25em 0.5em;
2924     white-space: nowrap;
2925 }
2926 #edit-post-form input[type='radio'] {
2927         width: 0;
2928         margin: 0;
2929         opacity: 0;
2930         pointer-events: none;
2931 }
2932 #edit-post-form input[type='radio'] + label {
2933         padding: 4px 12px;
2934         text-align: center;
2935         border-style: solid;
2936         border-width: 1px 1px 1px 0;
2937         cursor: pointer;
2938 }
2939 #edit-post-form input[type='radio']:checked + label {
2940         cursor: default;
2941 }
2942
2943 #edit-post-form label[for='section'] {
2944         grid-row: 3;
2945 }
2946 #edit-post-form input[type='radio'] + label {
2947         grid-row: 3;
2948 }
2949 <?php fit_content("#edit-post-form input[type='radio'] + label"); ?>
2950
2951 #edit-post-form textarea {
2952         min-height: 24em;
2953 }
2954
2955 #edit-post-form input[type='submit'] {
2956         padding: 6px 12px;
2957         float: right;
2958 }
2959 #edit-post-form #markdown-hints {
2960         top: calc(100% + 2em);
2961 }
2962
2963 #edit-post-form button.guiedit div {
2964         overflow: visible;
2965 }
2966 .guiedit-mobile-auxiliary-button {
2967         display: none;
2968 }
2969
2970 /***********/
2971 /* BUTTONS */
2972 /***********/
2973
2974 button,
2975 input[type='submit'] {
2976         font-family: inherit;
2977         font-size: inherit;
2978         background-color: inherit;
2979         cursor: pointer;
2980         border: none;
2981         border-radius: 0;
2982 }
2983
2984 /************/
2985 /* HEADINGS */
2986 /************/
2987
2988 .body-text h1,
2989 .body-text h2,
2990 .body-text h3,
2991 .body-text h4,
2992 .body-text h5,
2993 .body-text h6 {
2994         line-height: 1.1;
2995         margin: 1em 0 0.75em 0;
2996         text-align: left;
2997 }
2998
2999 .post-body h5,
3000 .post-body h6 {
3001         font-size: 1em;
3002 }
3003 .post-body h4 {
3004         font-size: 1.2em;
3005 }
3006 .post-body h3 {
3007         font-size: 1.4em;
3008 }
3009 .post-body h2 {
3010         font-size: 1.75em;
3011 }
3012 .post-body h1 {
3013         font-size: 2.1em;
3014 }
3015
3016 .comment-body h5,
3017 .comment-body h6 {
3018         font-size: 1em;
3019 }
3020 .comment-body h4 {
3021         font-size: 1.15em;
3022 }
3023 .comment-body h3 {
3024         font-size: 1.3em;
3025 }
3026 .comment-body h2 {
3027         font-size: 1.5em;
3028 }
3029 .comment-body h1 {
3030         font-size: 1.75em;
3031 }
3032
3033 /**********/
3034 /* QUOTES */
3035 /**********/
3036
3037 blockquote,
3038 .post-body .comment-box .comment-body {
3039         font-size: 0.9em;
3040         margin: 1em 0;
3041         padding-left: 0.5em;
3042         margin-left: 1px;
3043         padding-bottom: 3px;
3044 }
3045 blockquote *:first-child {
3046         margin-top: 0;
3047 }
3048 blockquote *:last-child {
3049         margin-bottom: 0;
3050 }
3051 blockquote blockquote {
3052         font-size: 0.95em;
3053 }
3054
3055 /* Pseudo-blockquotes that LW sometimes uses for some reason */
3056
3057 .post-body .comment-box .user-name {
3058         font-style: italic;
3059 }
3060 .post-body .comment-box .user-name::after {
3061         content: ":";
3062 }
3063 .post-body .comment-box {
3064         zoom: 1.25;
3065 }
3066
3067 /**********/
3068 /* IMAGES */
3069 /**********/
3070
3071 #content img {
3072         max-width: 100%;
3073 }
3074
3075 img.inline-latex {
3076         position: relative;
3077         top: 2.5px;
3078         margin: 0 2px;
3079 }
3080
3081 #content figure {
3082         text-align: center;
3083         margin: 1.5em auto;
3084 }
3085
3086 p.imgonly,
3087 div.imgonly {
3088         text-align: center;
3089 }
3090
3091 /**********/
3092 /* TABLES */
3093 /**********/
3094
3095 .body-text table {
3096         border-collapse: collapse;
3097         font-family: Inconsolata, Menlo, monospace;
3098         font-size: 0.875em;
3099 }
3100 .body-text table th,
3101 .body-text table td {
3102         text-align: left;
3103         padding: 4px 6px;
3104         line-height: 1.3;
3105 }
3106 .body-text table td:nth-of-type(n+2) {
3107         text-align: right;
3108 }
3109 .body-text table caption {
3110         margin: 0 0 0.25em 0;
3111         font-weight: bold;
3112         font-size: 1.125em;
3113 }
3114
3115 /********/
3116 /* MISC */
3117 /********/
3118
3119 /*= Superscripts & subscripts =*/
3120
3121 /*      Make sure superscripts and subscripts do not affect line spacing. */
3122 sup, sub {
3123         vertical-align: baseline;
3124         position: relative;
3125         top: -0.5em;
3126         left: 0.05em;
3127         font-size: 0.8em;
3128 }
3129 sub {
3130         top: 0.3em;
3131 }
3132
3133 /*= Code blocks & other "unstyled" text. =*/
3134
3135 pre,
3136 code {
3137         font-family: Inconsolata, Menlo, monospace;
3138 }
3139 pre {
3140         white-space: pre-wrap;
3141 }
3142 .body-text pre {
3143         text-align: left;
3144 }
3145 code {
3146         font-size: 0.95em;
3147         display: inline-block;
3148         padding: 0 4px 1px 5px;
3149 }
3150 pre > code {
3151         display: block;
3152         border-radius: 0;
3153         padding: 3px 4px 5px 8px;
3154 }
3155
3156 /*= Fractions =*/
3157
3158 .frac::after {
3159         content: "\200B";
3160 }
3161
3162 /*= Removing browser default styling of various elements =*/
3163
3164 /*      On various input elements such as text fields and buttons, remove "blue glow" focus outlines on Macs, dotted black outlines in Firefox, etc. */
3165 :focus {
3166         outline: none;
3167 }
3168
3169 /*      Remove "embossed" appearance of horizontal rules. */
3170 hr {
3171         border: none;
3172 }
3173
3174 input,
3175 button,
3176 textarea {
3177         -webkit-appearance: none;
3178         -moz-appearance: none;
3179         appearance: none;
3180 }
3181
3182 input {
3183         font-family: inherit;
3184         font-size: inherit;
3185         font-weight: inherit;
3186 }
3187
3188 /*************/
3189 /* FOOTNOTES */
3190 /*************/
3191
3192 ol {
3193         counter-reset: ordered-list;
3194 }
3195 .footnote-definition {
3196         font-size: 0.9em;
3197         list-style-type: none;
3198         counter-increment: ordered-list;
3199         position: relative;
3200 }
3201 .footnote-definition p {
3202         font-size: inherit !important;
3203 }
3204 .footnote-definition::before {
3205         content: counter(ordered-list) ".";
3206         position: absolute;
3207         left: -2.5em;
3208         font-weight: bold;
3209         text-align: right;
3210         width: 2em;
3211 }
3212
3213 /*********/
3214 /* LISTS */
3215 /*********/
3216
3217 li {
3218         margin-bottom: 0.5em;
3219 }
3220
3221 .body-text ol p,
3222 .body-text ul p {
3223         margin: 0.5em 0;
3224 }
3225
3226 .post-body ol {
3227         list-style: none;
3228         padding: 0;
3229         counter-reset: ol;
3230 }
3231 .post-body ol > li {
3232         position: relative;
3233         counter-increment: ol;
3234         padding: 0 0 0 2.5em;
3235         margin: 0.25em 0 0 0;
3236 }
3237 .post-body ol > li::before {
3238         content: counter(ol) ".";
3239         position: absolute;
3240         width: 2em;
3241         text-align: right;
3242         left: 0;
3243 }
3244 .post-body ul {
3245         list-style: none;
3246         padding: 0;
3247 }
3248 .post-body ul:not(.contents-list) > li {
3249         position: relative;
3250         padding: 0 0 0 1.75em;
3251         margin: 0.25em 0 0 0;
3252 }
3253 .post-body ul:not(.contents-list) > li ul > li {
3254         padding: 0 0 0 2em;
3255 }
3256 .post-body ul:not(.contents-list) > li::before {
3257         content: "•";
3258         position: absolute;
3259         width: 1.25em;
3260         text-align: right;
3261         left: 0;
3262 }
3263 .post-body ul:not(.contents-list) > li ul > li::before {
3264         width: 1.5em;
3265 }
3266 .post-body li > ul:first-child > li {
3267         padding-left: 0;
3268 }
3269 .post-body li > ul:first-child > li::before {
3270         content: none;
3271 }
3272
3273 /**************/
3274 /* ERROR PAGE */
3275 /**************/
3276
3277 .error-retry-form {
3278         margin: 0.5em 0;
3279 }
3280
3281 .error-retry-form input[type="submit"] {
3282         border: 1px solid #aaa;
3283         font-weight: bold;
3284         font-size: 1.125rem;
3285         padding: 0.5em 1.25em;
3286 }
3287
3288 /**************/
3289 /* ABOUT PAGE */
3290 /**************/
3291
3292 #content.about-page .contents {
3293         margin-top: 0.25em;
3294 }
3295 #content.about-page .accesskey-table {
3296         border-collapse: collapse;
3297         margin: auto;
3298 }
3299 #content.about-page .accesskey-table th,
3300 #content.about-page .accesskey-table td {
3301         padding: 2px 6px;
3302 }
3303 #content.about-page .accesskey-table td:first-child {
3304         padding-right: 1.5em;
3305 }
3306 #content.about-page .accesskey-table td:last-child {
3307         text-align: center;
3308         font-family: Inconsolata, Menlo, monospace;
3309 }
3310 #content.about-page h3:nth-of-type(n+2) {
3311         clear: both;
3312 }
3313
3314 /******************/
3315 /* IMAGES OVERLAY */
3316 /******************/
3317
3318 #images-overlay + #content .post-body img {
3319         visibility: hidden;
3320 }
3321
3322 #images-overlay div {
3323         position: absolute;
3324 }
3325 #images-overlay div::after {
3326         content: "Click to enlarge";
3327         display: block;
3328         position: absolute;
3329         margin: auto;
3330         left: 0;
3331         right: 0;
3332         bottom: 10px;
3333         padding: 6px 10px;
3334         font-size: 1.25rem;
3335         background-color: rgba(0,0,0,0.6);
3336         color: #fff;
3337         border-radius: 5px;
3338         opacity: 0.0;
3339         transition: opacity 0.15s ease;
3340         pointer-events: none;
3341 }
3342 <?php fit_content("#images-overlay div::after"); ?>
3343 #images-overlay div:hover::after {
3344         opacity: 1.0;
3345 }
3346
3347 #images-overlay img {
3348         width: 100%;
3349 }
3350
3351 /***************/
3352 /* IMAGE FOCUS */
3353 /***************/
3354
3355 /*=--------------=*/
3356 /*= Hover styles =*/
3357 /*=--------------=*/
3358
3359 #content img:hover,
3360 #images-overlay img:hover {
3361         filter: drop-shadow(0 0 3px #777);
3362         cursor: zoom-in;
3363 }
3364 #content img:active,
3365 #images-overlay img:active {
3366         transform: scale(0.975);
3367 }
3368
3369 /*=---------=*/
3370 /*= Overlay =*/
3371 /*=---------=*/
3372
3373 #image-focus-overlay {
3374         position: fixed;
3375         top: 0;
3376         right: 0;
3377         bottom: 0;
3378         left: 0;
3379         z-index: 2;
3380         display: none;
3381         cursor: zoom-out;
3382 }
3383 #image-focus-overlay::before {
3384         content: "";
3385         display: block;
3386         position: absolute;
3387         top: 0;
3388         right: 0;
3389         bottom: 0;
3390         left: 0;
3391         background-color: #000;
3392         opacity: 0.5;
3393         z-index: -1;
3394 }
3395 #image-focus-overlay.engaged {
3396         display: initial;
3397 }
3398
3399 #image-focus-overlay img {
3400         margin: auto;
3401         position: absolute;
3402         left: 50%;
3403         top: 50%;
3404         transform: translateX(-50%) translateY(-50%);
3405 }
3406
3407 /*=-------------------=*/
3408 /*= Single-image mode =*/
3409 /*=-------------------=*/
3410
3411 #image-focus-overlay:not(.slideshow) .image-number,
3412 #image-focus-overlay:not(.slideshow) .slideshow-buttons {
3413         visibility: hidden;
3414 }
3415
3416 /*=---------=*/
3417 /*= Caption =*/
3418 /*=---------=*/
3419
3420 #image-focus-overlay .caption {
3421         position: absolute;
3422         bottom: 0.75em;
3423         background-color: rgba(0,0,0,0.7);
3424         left: 9em;
3425         right: 9em;
3426         margin: auto;
3427         max-width: calc(100% - 18em);
3428         text-align: center;
3429         font-size: 1.375em;
3430         border-radius: 8px;
3431         z-index: 1;
3432         transition:
3433                 bottom 0.2s ease;
3434 }
3435 <?php fit_content("#image-focus-overlay .caption"); ?>
3436 #image-focus-overlay .caption.hidden {
3437         bottom: -5em;
3438         transition:
3439                 bottom 0.5s ease;
3440 }
3441
3442 #image-focus-overlay .caption p {
3443         margin: 1em 1.25em;
3444         color: #fff;
3445 }
3446
3447 #image-focus-overlay .caption:not(:empty)::before {
3448         content: "";
3449         display: block;
3450         position: absolute;
3451         width: 100vw;
3452         height: calc(100% + 1.5em);
3453         z-index: -1;
3454         top: -0.75em;
3455         left: calc(-50vw + 50%);
3456
3457 }
3458
3459 /*=--------------=*/
3460 /*= Help overlay =*/
3461 /*=--------------=*/
3462
3463 #image-focus-overlay .help-overlay {
3464         position: absolute;
3465         display: flex;
3466         flex-flow: column;
3467         z-index: 2;
3468         font-size: 1.5rem;
3469         padding: 1em;
3470         border-radius: 10px;
3471         bottom: 1em;
3472         right: 1em;
3473         overflow: hidden;
3474         white-space: nowrap;
3475         color: transparent;
3476         cursor: default;
3477         visibility: hidden;
3478         transition:
3479                 visibility 1s ease,
3480                 color 1s ease,
3481                 background-color 1s ease,
3482                 bottom 0.3s ease;
3483 }
3484 #image-focus-overlay .help-overlay:hover {
3485         max-width: 24em;
3486         max-height: 14em;
3487         background-color: rgba(0,0,0,0.85);
3488         color: #fff;
3489         visibility: visible;
3490         transition:
3491                 visibility 0.2s ease 0.3s,
3492                 color 0.2s ease 0.3s,
3493                 background-color 0.2s ease 0.3s;
3494 }
3495
3496 #image-focus-overlay .help-overlay::after {
3497         content: "\F128";
3498         font-family: "Font Awesome", "Font Awesome 5 Free";
3499         font-weight: 900;
3500         font-size: 2rem;
3501         position: absolute;
3502         right: 0;
3503         bottom: 0;
3504         padding: 10px;
3505         color: #000;
3506         filter: drop-shadow(0 0 6px #fff);
3507         visibility: visible;
3508         opacity: 0.85;
3509         transition:
3510                 visibility 1s ease;
3511 }
3512 #image-focus-overlay .help-overlay:hover::after {
3513         visibility: hidden;
3514         transition:
3515                 visibility 0.2s ease 0.3s;
3516 }
3517
3518 #image-focus-overlay .help-overlay p {
3519         margin: 0;
3520         text-indent: -2em;
3521         padding-left: 2em;
3522         max-width: 100%;
3523         overflow: hidden;
3524 }
3525 #image-focus-overlay .help-overlay p + p {
3526         margin: 0.75em 0 0 0;
3527 }
3528 #image-focus-overlay .help-overlay.hidden {
3529         bottom: -2em;
3530 }
3531
3532 /*=--------------=*/
3533 /*= Slide number =*/
3534 /*=--------------=*/
3535
3536 #image-focus-overlay .image-number {
3537         position: absolute;
3538         z-index: 2;
3539         font-size: 1.75rem;
3540         left: 1em;
3541         bottom: 1em;
3542         font-weight: 600;
3543         text-shadow:
3544                 0 0 3px #fff,
3545                 0 0 5px #fff,
3546                 0 0 8px #fff,
3547                 0 0 13px #fff;
3548         width: 1.5em;
3549         text-align: right;
3550         white-space: nowrap;
3551         transition: bottom 0.3s ease;
3552 }
3553 #image-focus-overlay .image-number::before {
3554         content: "#";
3555         opacity: 0.3;
3556 }
3557 #image-focus-overlay .image-number::after {
3558         content: " of " attr(data-number-of-images);
3559         opacity: 0.3;
3560 }
3561 #image-focus-overlay .image-number:hover::before,
3562 #image-focus-overlay .image-number:hover::after {
3563         opacity: 1.0;
3564 }
3565 #image-focus-overlay .image-number.hidden {
3566         bottom: -1.25em;
3567 }
3568
3569 /*=-------------------=*/
3570 /*= Slideshow buttons =*/
3571 /*=-------------------=*/
3572
3573 #image-focus-overlay .slideshow-buttons {
3574         position: absolute;
3575         top: 0;
3576         left: 0;
3577         width: 100%;
3578         height: 100%;
3579         z-index: 1;
3580         display: flex;
3581         justify-content: space-between;
3582         pointer-events: none;
3583 }
3584 #image-focus-overlay .slideshow-buttons button {
3585         font-family: "Font Awesome", "Font Awesome 5 Free";
3586         font-weight: 900;
3587         font-size: 3rem;
3588         padding: 0.5em;
3589         color: #ddd;
3590         position: relative;
3591         left: 0;
3592         transition:
3593                 left 0.3s ease;
3594         pointer-events: auto;
3595 }
3596 #image-focus-overlay .slideshow-buttons button::selection {
3597         background-color: transparent;
3598 }
3599 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
3600         #image-focus-overlay .slideshow-buttons button:hover {
3601                 background-color: rgba(0,0,0,0.1);
3602                 color: #777;
3603         }
3604 }
3605 #image-focus-overlay .slideshow-buttons button:active {
3606         transform: none;
3607         color: #888;
3608 }
3609 #image-focus-overlay .slideshow-buttons button:disabled {
3610         text-shadow: none;
3611         background-color: transparent;
3612         color: #ddd;
3613         cursor: default;
3614         opacity: 0.4;
3615 }
3616 #image-focus-overlay .slideshow-button.previous.hidden {
3617         left: -1.75em;
3618 }
3619 #image-focus-overlay .slideshow-button.next.hidden {
3620         left: 1.75em;
3621 }
3622
3623 /*=-----------------=*/
3624 /*= Background blur =*/
3625 /*=-----------------=*/
3626
3627 .blurred {
3628         filter: blur(3px);
3629 }
3630
3631 /**************************/
3632 /* QUALIFIED HYPERLINKING */
3633 /**************************/
3634
3635 #content.no-comments .comments,
3636 #content.no-comments .post-meta .comment-count,
3637 #content.no-comments .post-meta .karma,
3638 #content.no-comments + #ui-elements-container #new-comment-nav-ui,
3639 #content.no-comments + #ui-elements-container #hns-date-picker,
3640 #content.no-comments + #ui-elements-container #quick-nav-ui {
3641         display: none;
3642 }
3643
3644 #content.no-nav-bars #primary-bar,
3645 #content.no-nav-bars #secondary-bar {
3646         display: none;
3647 }
3648 #content.no-nav-bars {
3649         margin: 8px auto;
3650 }
3651 #content.no-nav-bars + #ui-elements-container > * {
3652         padding-top: 8px;
3653 }
3654
3655 #aux-about-link {
3656         position: fixed;
3657         top: 40px;
3658         left: calc((100% - 900px) / 2 - 69px);
3659         width: 1.5em;
3660         height: 1.5em;
3661         text-align: center;
3662         display: table;
3663 }
3664 #aux-about-link a {
3665         display: table-cell;
3666         width: 100%;
3667         vertical-align: middle;
3668         font-family: "Font Awesome", "Font Awesome 5 Free";
3669         font-weight: 900;
3670         font-size: 1.25rem;
3671         opacity: 0.4;
3672         z-index: 1;
3673 }
3674
3675 .qualified-linking {
3676         margin: 0;
3677         position: relative;
3678 }
3679 .qualified-linking input[type='checkbox'] {
3680         visibility: hidden;
3681         width: 0;
3682         height: 0;
3683         margin: 0;
3684 }
3685 .qualified-linking label {
3686         font-family: "Font Awesome", "Font Awesome 5 Free";
3687         font-weight: 900;
3688         font-size: 1rem;
3689         padding: 0 0.5em;
3690         display: inline-block;
3691         margin-left: 0.25em;
3692 }
3693 .qualified-linking label:hover {
3694         cursor: pointer;
3695 }
3696 .qualified-linking label:active span {
3697         display: inline-block;
3698         transform: scale(0.9);
3699 }
3700 .qualified-linking label::selection {
3701         background-color: transparent;
3702 }
3703
3704 .qualified-linking label::after {
3705         content: "";
3706         width: 100vw;
3707         height: 0;
3708         left: 0;
3709         top: 0;
3710         position: fixed;
3711         z-index: 1;
3712         cursor: default;
3713 }
3714 .qualified-linking input[type='checkbox']:checked + label::after {
3715         height: 100vh;
3716 }
3717
3718 .qualified-linking-toolbar {
3719         position: absolute;
3720         right: 0.25em;
3721         top: 110%;
3722         z-index: 1;
3723 }
3724 .qualified-linking input[type='checkbox'] ~ .qualified-linking-toolbar {
3725         display: none;
3726 }
3727 .qualified-linking input[type='checkbox']:checked ~ .qualified-linking-toolbar {
3728         display: block;
3729 }
3730 #qualified-linking-toolbar-toggle-checkbox-bottom ~ .qualified-linking-toolbar {
3731         top: unset;
3732         bottom: 125%;
3733 }
3734
3735 .qualified-linking-toolbar a {
3736         display: block;
3737         padding: 0 6px;
3738         margin: 4px;
3739 }
3740 .qualified-linking-toolbar a::selection {
3741         background-color: transparent;
3742 }
3743
3744 /********/
3745 /* MATH */
3746 /********/
3747
3748 .mathjax-block-container {
3749         overflow-y: hidden;
3750         border-radius: 6px;
3751         margin: 1em 0 1.5em 0;
3752 }
3753 .mathjax-inline-container {
3754         max-width: 100%;
3755         display: inline-block;
3756         overflow-x: auto;
3757         overflow-y: hidden;
3758         position: relative;
3759         vertical-align: text-top;
3760         padding: 0 1px;
3761 }
3762 .post .mathjax-inline-container {
3763         line-height: 1.1;
3764         top: 2px;
3765 }
3766 .comment .mathjax-inline-container {
3767         top: 3px;
3768         line-height: 1;
3769 }
3770 .mathjax-inline-container .mjx-chtml {
3771         padding: 0;
3772 }
3773
3774 /************/
3775 /* SPOILERS */
3776 /************/
3777
3778 .spoiler {
3779     color: #000;
3780     background-color: currentColor;
3781     transition: none;
3782     text-shadow: none;
3783         margin: 1em 0;
3784     box-shadow: 0 0 0 1px currentColor inset;
3785     overflow: auto;
3786 }
3787 .spoiler:not(:last-child) {
3788     margin-bottom: 0;
3789 }
3790 #content .spoiler * {
3791         color: inherit;
3792         border: none;
3793 }
3794 .spoiler:hover {
3795     color: unset;
3796     background-color: unset;
3797     text-shadow: unset;
3798     transition:
3799         color 0.1s ease-out 0.1s,
3800         background-color 0.1s ease-out 0.1s,
3801         text-shadow 0.1s ease-out 0.1s;
3802 }
3803 .spoiler::selection,
3804 .spoiler ::selection {
3805         color: #fff;
3806         background-color: #000;
3807 }
3808 .spoiler:not(:hover)::selection,
3809 .spoiler:not(:hover) ::selection {
3810     background-color: transparent;
3811 }
3812
3813 /*= Fix for LessWrong being weird =*/
3814
3815 .spoiler > p {
3816     padding: 0 7px;
3817 }
3818 .spoiler > p:first-child {
3819         margin-top: 0.25em;
3820 }
3821 .spoiler > p:last-child {
3822         margin-bottom: 0;
3823         padding-bottom: 0.25em;
3824 }
3825 .spoiler > p:hover ~ p {
3826         background-color: currentColor;
3827 }
3828 .spoiler > p + p {
3829         margin-top: -1em;
3830 }
3831 .spoiler > p:not(:first-child) {
3832         padding-top: 0.5em;
3833 }
3834 .spoiler > p:not(:last-child) {
3835         padding-bottom: 0.5em;
3836 }
3837
3838 /*******************/
3839 /* ALIGNMENT FORUM */
3840 /*******************/
3841
3842 #content.alignment-forum-index-page::after {
3843         content: "Alignment Forum";
3844         grid-row: 3;
3845         font-size: 1.5rem;
3846         margin: 0.375em 0 0 -0.375em;
3847 }
3848
3849 /**********************/
3850 /* FOR NARROW SCREENS */
3851 /**********************/
3852
3853 @media only screen and (max-width: 1440px) {
3854         #hns-date-picker {
3855                 right: -81px;
3856                 padding: 8px 10px 10px 10px;
3857                 bottom: 62px;
3858                 display: none;
3859         }
3860         #hns-date-picker::before {
3861                 content: "";
3862                 position: absolute;
3863                 display: block;
3864                 z-index: -1;
3865                 height: calc(100% + 2px);
3866                 top: -1px;
3867                 left: -1px;
3868                 width: 50%;
3869         }
3870 }
3871 @media only screen and (max-width: 1160px) {
3872         #new-comment-nav-ui {
3873                 bottom: 180px;
3874                 right: -68px;
3875         }
3876         #hns-date-picker {
3877                 bottom: 200px;
3878                 right: -36px;
3879         }
3880         #hns-date-picker::before {
3881                 width: calc(100% - 35px);
3882         }
3883         #theme-selector button::before {
3884                 right: unset;
3885                 left: 100%;
3886         }
3887         #theme-selector:hover::after {
3888                 content: "";
3889                 display: block;
3890                 position: absolute;
3891                 width: calc(6em - 7px);
3892                 height: calc(100% + 2px);
3893                 top: 0;
3894                 left: calc(100% + 1px);
3895         }
3896         #anti-kibitzer-toggle {
3897                 bottom: 330px;
3898         }
3899 }
3900 @media only screen and (max-width: 1080px) {
3901         #width-selector {
3902                 right: -30px;
3903         }
3904         #width-selector button {
3905                 display: block;
3906         }
3907         #text-size-adjustment-ui {
3908                 top: 90px;
3909                 right: -30px;
3910         }
3911         #text-size-adjustment-ui button {
3912                 display: block;
3913                 position: relative;
3914         }
3915         #text-size-adjustment-ui button.increase {
3916                 bottom: 48px;
3917         }
3918         #text-size-adjustment-ui button.decrease {
3919                 top: 50px;
3920         }
3921         #theme-selector {
3922                 top: 46px;
3923                 left: -44px;
3924         }
3925         #theme-tweaker-toggle {
3926                 left: -44px;
3927                 top: 2px;
3928         }
3929         #theme-tweaker-toggle button {
3930                 height: 2em;
3931                 width: 2em;
3932                 padding: 7px;
3933         }
3934         #quick-nav-ui {
3935                 right: -54px;
3936         }
3937         #new-comment-nav-ui {
3938                 right: -55px;
3939         }
3940         #hns-date-picker {
3941                 right: -23px;
3942         }
3943         #hns-date-picker::before {
3944                 width: calc(100% - 22px);
3945         }
3946         #anti-kibitzer-toggle {
3947                 right: -54px;
3948         }
3949 }
3950 @media only screen and (max-width: 1040px) {
3951         #quick-nav-ui {
3952                 right: -49px;
3953         }
3954         #new-comment-nav-ui {
3955                 right: -50px;
3956         }
3957         #hns-date-picker {
3958                 right: -18px;
3959         }
3960         #hns-date-picker::before {
3961                 width: calc(100% - 17px);
3962         }
3963         #anti-kibitzer-toggle {
3964                 right: -50px;
3965         }
3966 }
3967 @media only screen and (max-width: 1020px) {
3968         #quick-nav-ui {
3969                 right: -20px;
3970         }
3971         #new-comment-nav-ui {
3972                 right: -21px;
3973         }
3974         #new-comment-nav-ui .new-comments-count::before {
3975                 content: "";
3976                 position: absolute;
3977                 width: 100%;
3978                 height: calc(100% + 45px);
3979                 z-index: -1;
3980                 left: 0;
3981                 top: -22px;
3982         }
3983         #hns-date-picker {
3984                 right: 19px;
3985         }
3986         #hns-date-picker::before {
3987                 width: 100%;
3988         }
3989         #anti-kibitzer-toggle {
3990                 right: -20px;
3991         }
3992 }
3993 @media only screen and (max-width: 1000px) {
3994         #theme-selector {
3995                 left: -17px;
3996                 top: 120px;
3997                 padding: 3px 0;
3998                 max-width: 32px;
3999         }
4000         #theme-selector button {
4001                 margin: 1px 4px;
4002         }
4003         #text-size-adjustment-ui {
4004                 top: 100px;
4005                 right: -12px;
4006         }
4007         @media not screen and (hover: none), not screen and (-moz-touch-enabled) {
4008                 #quick-nav-ui,
4009                 #new-comment-nav-ui,
4010                 #new-comment-nav-ui + #hns-date-picker,
4011                 #anti-kibitzer-toggle {
4012                         opacity: 0.4;
4013                 }
4014                 #quick-nav-ui:hover,
4015                 #new-comment-nav-ui:hover,
4016                 #new-comment-nav-ui + #hns-date-picker:hover,
4017                 #new-comment-nav-ui + #hns-date-picker:focus-within,
4018                 #new-comment-nav-ui:hover + #hns-date-picker,
4019                 #anti-kibitzer-toggle:hover {
4020                         opacity: 1.0;
4021                 }
4022         }
4023         #theme-tweaker-toggle {
4024                 top: 70px;
4025                 left: -21px;
4026         }
4027 }
4028
4029 /**************/
4030 /* PRINT VIEW */
4031 /**************/
4032
4033 @media only print {
4034         .nav-bar {
4035                 visibility: hidden;
4036                 max-height: 0;
4037                 overflow: hidden;
4038         }
4039         #ui-elements-container {
4040                 display: none;
4041         }
4042         #images-overlay {
4043                 display: none;
4044         }
4045         #images-overlay + #content .post-body img {
4046                 visibility: visible;
4047         }
4048         .comment-controls {
4049                 display: none;
4050         }
4051         #comments-sort-mode-selector {
4052                 display: none;
4053         }
4054         .comment-minimize-button {
4055                 display: none;
4056         }
4057         .post-meta .qualified-linking,
4058         .post-meta .lw2-link {
4059                 display: none;
4060         }
4061         .comment-meta .permalink,
4062         .comment-meta .lw2-link,
4063         .comment-meta .comment-parent-link {
4064                 display: none;
4065         }
4066         .new-comment::before {
4067                 display: none;
4068         }
4069         #content::before {
4070                 box-shadow: none;
4071         }
4072 }
4073
4074 <?php include("style_mobile_additions.css.php"); ?>
4075
4076 <?php if (isset($argv[2]) && preg_match("/\\.css(.php)?$/", $argv[2])) include($argv[2]); ?>
4077
4078 <?php
4079
4080 ## TO BE IMPLEMENTED:
4081 ## This will be specified via command-line argument; but for now, we just
4082 ## include all available additions (currently, only 'accordius').
4083
4084 $additions = [
4085         'accordius'
4086 ];
4087
4088 foreach ($additions as $addition) {
4089         $potential_includes = [
4090                 "style.css.php",
4091                 "style_mobile_additions.css.php"
4092         ];
4093         foreach ($potential_includes as $include) {
4094                 $include_path = "{$addition}/{$include}";
4095                 if (file_exists($include_path))
4096                         include ($include_path);
4097         }
4098 }
4099
4100 ?>