www/style.css.php

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