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         max-width: 100%;
1359         margin-top: 2em;
1360         margin-bottom: 4em;
1361 }
1362
1363 h1.sequence-chapter {
1364         font-size: 2.3rem;
1365 }
1366
1367 article {
1368         max-width: 100%;
1369 }
1370
1371 .post-meta + .comments {
1372         margin-top: 3em;
1373 }
1374
1375 .tag-list {
1376         column-count: auto;
1377         column-width: 15em;
1378         margin-top: 0;
1379         border-bottom: 1px solid #999;
1380         padding-bottom: 1em;
1381         margin-bottom: 0;
1382 }
1383
1384 /**************/
1385 /* USER PAGES */
1386 /**************/
1387
1388 /*=---------------------=*/
1389 /*= User's display name =*/
1390 /*=---------------------=*/
1391
1392 #content.user-page h1.page-main-heading {
1393         margin: 0.25em 0 0 0;
1394         line-height: 1.1;
1395         grid-column: 1 / span 2;
1396         order: -2;
1397 }
1398
1399 #content.user-page h1.page-main-heading .user-full-name {
1400         font-size: 1rem;
1401         font-weight: normal;
1402         padding-left: 0.5em;
1403 }
1404
1405 /*=--------------------=*/
1406 /*= User's karma total =*/
1407 /*=--------------------=*/
1408
1409 #content.user-page .user-stats {
1410         grid-column: 3;
1411         order: -2;
1412         text-align: right;
1413         align-self: end;
1414 }
1415
1416 #content.user-page .user-stats .karma-type {
1417         white-space: nowrap;
1418 }
1419
1420 /*=----------------------=*/
1421 /*= Expanded vs. compact =*/
1422 /*=----------------------=*/
1423
1424 #content.user-page #comments-list-mode-selector {
1425         grid-row: span 2;
1426 }
1427 #content.user-page #comments-list-mode-selector button {
1428         display: block;
1429 }
1430
1431 /*=----------------------------------------------------=*/
1432 /*= All, Posts, Comments, Drafts, Conversations, Inbox =*/
1433 /*=----------------------------------------------------=*/
1434
1435 #content.user-page .sublevel-nav {
1436         margin-bottom: 0.5em;
1437 }
1438
1439 /*=--------------=*/
1440 /*= User's posts =*/
1441 /*=--------------=*/
1442
1443 #content.user-page h1.listing {
1444         margin: 0.5em 0 0 0;
1445 }
1446
1447 #content.user-page .user-bio :first-child {
1448         margin-top: 0.5em;
1449 }
1450
1451 /*****************/
1452 /* CONVERSATIONS */
1453 /*****************/
1454
1455 /*=----------------------=*/
1456 /*= List of participants =*/
1457 /*=----------------------=*/
1458
1459 #content.conversation-page .conversation-participants {
1460         grid-column: 2 / span 2;
1461         text-align: right;
1462         margin: 0.5em 0 0 0;
1463 }
1464 .post-meta > .conversation-participants {
1465         white-space: normal;
1466 }
1467 .conversation-participants ul,
1468 .conversation-participants li {
1469         list-style-type: none;
1470         display: inline-block;
1471         margin: 0;
1472         padding: 0;
1473 }
1474 .conversation-participants li {
1475         margin-left: 0.375em;
1476 }
1477 .conversation-participants li:not(:last-of-type)::after {
1478         content: ",";
1479 }
1480
1481 /*=-------------------------=*/
1482 /*= Posting controls (form) =*/
1483 /*=-------------------------=*/
1484
1485 #content.conversation-page .posting-controls {
1486         padding: 0 0 1em 0;
1487 }
1488 #content.conversation-page .post-meta-fields {
1489         overflow: auto;
1490         display: flex;
1491         flex-flow: row wrap;
1492 }
1493 .posting-controls.standalone textarea {
1494         margin-top: 0.375em;
1495 }
1496 .posting-controls.standalone form {
1497         padding: 0 1em;
1498 }
1499 #content.conversation-page .posting-controls.standalone form {
1500         padding: 0 1em 3em 1em;
1501 }
1502 .posting-controls.standalone input[type='text'],
1503 .posting-controls.standalone label {
1504         margin: 0.25em 0;
1505 }
1506 .posting-controls.standalone label {
1507         width: 4em;
1508         text-align: right;
1509         padding: 2px 6px;
1510         border: 1px solid transparent;
1511 }
1512 .posting-controls.standalone input[type='text'] {
1513         width: calc(100% - 4em);
1514         padding: 0.25em;
1515 }
1516 .posting-controls.standalone input[type='submit'] {
1517         float: right;
1518 }
1519 .posting-controls.standalone #markdown-hints-checkbox ~ label {
1520         white-space: nowrap;
1521 }
1522 .posting-controls.standalone #markdown-hints {
1523         top: calc(100% + 2em);
1524 }
1525
1526 /*=--------------------=*/
1527 /*= Conversation title =*/
1528 /*=--------------------=*/
1529
1530 #content.conversation-page h1.page-main-heading {
1531         text-align: center;
1532         margin: 0.5em 0;
1533         line-height: 1.15;
1534 }
1535
1536 /*=----------=*/
1537 /*= Messages =*/
1538 /*=----------=*/
1539
1540 #content.conversation-page > ul.comment-thread:last-of-type {
1541         margin-bottom: 2em;
1542 }
1543
1544 /******************/
1545 /* SEARCH RESULTS */
1546 /******************/
1547
1548 #content.search-results-page h1.listing,
1549 #content.sequence-page h1.listing,
1550 #content.post-page h1.listing {
1551         font-size: 1.625em;
1552 }
1553
1554 /**************/
1555 /* LOGIN PAGE */
1556 /**************/
1557
1558 .login-container {
1559         margin: 2em 0;
1560         padding: 1em;
1561         display: flex;
1562         flex-flow: row wrap;
1563 }
1564
1565 .login-container form {
1566         flex-basis: 50%;
1567         display: grid;
1568         grid-row-gap: 0.5em;
1569         align-content: start;
1570 }
1571 .login-container form label {
1572         text-align: right;
1573         padding: 0.25em 0.5em;
1574         white-space: nowrap;
1575         grid-column: 1;
1576 }
1577 .login-container form input {
1578         grid-column: 2;
1579         padding: 0.25em;
1580 }
1581 .login-container form input[type='submit'],
1582 .login-container form a {
1583         grid-column: 2;
1584         justify-self: center;
1585 }
1586 .login-container form input[type='submit'] {
1587         width: 10em;
1588         padding: 0.35em;
1589         line-height: 1;
1590         margin: 0.5em 0 0 0;
1591 }
1592 .login-container form h1 {
1593         text-align: center;
1594         margin: 0;
1595         grid-column: 2;
1596 }
1597
1598 /* “Log in” form */
1599
1600 #login-form {
1601         grid-template-columns: 5.5em 1fr;
1602         padding: 0.5em 2em 0.5em 0;
1603 }
1604
1605 /* “Create account” form */
1606
1607 #signup-form {
1608         font-size: 0.9em;
1609         grid-template-columns: 8.5em 1fr;
1610         padding: 0.5em 1em 1em 1em;
1611 }
1612 #signup-form h1 {
1613         font-size: 1.7em;
1614 }
1615 #signup-form input[type='submit'] {
1616         padding: 0.4em 0.5em 0.5em 0.5em;
1617 }
1618
1619 /* Log in tip */
1620
1621 .login-container .login-tip {
1622         padding: 0.5em 0.5em 0.5em 3em;
1623         margin: 2em 4em 0 4em;
1624         text-indent: -2em;
1625         line-height: 1.4;
1626 }
1627 .login-container .login-tip span {
1628         font-weight: bold;
1629 }
1630
1631 /* Message box */
1632
1633 #content.login-page .error-box {
1634         margin: 1.5em 0.875em -1.5em 0.875em;
1635 }
1636 .error-box, .success-box {
1637         padding: 0.25em;
1638         text-align: center;
1639 }
1640
1641 /***********************/
1642 /* PASSWORD RESET PAGE */
1643 /***********************/
1644
1645 .reset-password-container {
1646         margin-bottom: 2em;
1647 }
1648 .reset-password-container input[type='submit'] {
1649         padding: 0.2em 0.5em;
1650         width: unset;
1651 }
1652 .reset-password-container input {
1653         margin-left: 0.5em;
1654         width: 12em;
1655 }
1656 .reset-password-container label {
1657         display: inline-block;
1658         width: 9em;
1659 }
1660 .reset-password-container form > div {
1661         margin: 0.2em;
1662 }
1663 .reset-password-container .action-container {
1664         padding-left: 11em;
1665         padding-top: 0.2em;
1666 }
1667 .reset-password-container .error-box {
1668         margin: unset;
1669 }
1670
1671 /*********************/
1672 /* TABLE OF CONTENTS */
1673 /*********************/
1674
1675 .contents {
1676         float: right;
1677         min-width: 6em;
1678         max-width: 40%;
1679         margin: 1.25em 0 0.75em 1.25em;
1680         padding: 7px 14px 10px 10px;
1681         position: relative;
1682         z-index: 1;
1683 }
1684
1685 .contents-head {
1686         text-align: center;
1687         margin-bottom: 0.25em;
1688 }
1689
1690 .post-body .contents ul {
1691         list-style-type: none;
1692         margin: 0 0 0 0.5em;
1693         counter-reset: toc-item-1 toc-item-2 toc-item-3;
1694         padding-left: 1em;
1695         font-size: 0.75em;
1696 }
1697 .post-body .contents li {
1698         margin: 0.15em 0 0.3em 1em;
1699         text-align: left;
1700         text-indent: -1em;
1701         line-height: 1.2;
1702         position: relative;
1703 }
1704 .post-body .contents li::before {
1705         position: absolute;
1706         width: 3em;
1707         display: block;
1708         text-align: right;
1709         left: -4.5em;
1710 }
1711 .contents .toc-item-1 {
1712         counter-increment: toc-item-1;
1713         counter-reset: toc-item-2 toc-item-3;
1714 }
1715 .contents .toc-item-1::before {
1716         content: counter(toc-item-1);
1717 }
1718 .contents .toc-item-1 ~ .toc-item-2 {
1719         margin-left: 2.9em;
1720         font-size: 0.95em;
1721 }
1722 .contents .toc-item-2 {
1723         counter-increment: toc-item-2;
1724         counter-reset: toc-item-3;
1725 }
1726 .contents .toc-item-1 ~ .toc-item-2::before {
1727         content: counter(toc-item-1) "." counter(toc-item-2);
1728 }
1729 .contents .toc-item-2::before {
1730         content: counter(toc-item-2);
1731 }
1732 .contents .toc-item-1 + .toc-item-3 {
1733         counter-increment: toc-item-2 toc-item-3;
1734 }
1735 .contents .toc-item-2 ~ .toc-item-3,
1736 .contents .toc-item-1 ~ .toc-item-3 {
1737         margin-left: 2.9em;
1738         font-size: 0.95em;
1739 }
1740 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3 {
1741         margin-left: 5.7em;
1742         font-size: 0.9em;
1743 }
1744 .contents .toc-item-3 {
1745         counter-increment: toc-item-3;
1746 }
1747 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3::before {
1748         content: counter(toc-item-1) "." counter(toc-item-2) "." counter(toc-item-3);
1749 }
1750 .contents .toc-item-1 ~ .toc-item-3::before {
1751         content: counter(toc-item-1) "." counter(toc-item-3);
1752 }
1753 .contents .toc-item-2 ~ .toc-item-3::before {
1754         content: counter(toc-item-2) "." counter(toc-item-3);
1755 }
1756 .contents .toc-item-3::before {
1757         content: counter(toc-item-3);
1758 }
1759 .contents .toc-item-4,
1760 .contents .toc-item-5,
1761 .contents .toc-item-6 {
1762         display: none;
1763 }
1764
1765 /********************/
1766 /* POSTS & COMMENTS */
1767 /********************/
1768
1769 .post-meta > *,
1770 .comment-meta > * {
1771         display: inline-block;
1772         margin-right: 1em;
1773         font-size: 1.0625em;
1774 }
1775 .body-text {
1776         overflow-wrap: break-word;
1777         text-align: justify;
1778 }
1779 .body-text p {
1780         margin: 1em 0;
1781 }
1782 .retracted .body-text {
1783         text-decoration: line-through;
1784 }
1785
1786 .bare-url {
1787         word-break: break-all;
1788         hyphens: auto;
1789 }
1790 .body-text a:not([href]),
1791 .body-text a:not([href]):hover,
1792 .body-text a:not([href])::before,
1793 .body-text a:not([href])::after {
1794         text-decoration: none;
1795         text-shadow: unset;
1796         border: unset;
1797         color: unset;
1798         content: unset;
1799 }
1800 /*************/
1801 /* POST-META */
1802 /*************/
1803
1804 .post-meta {
1805         display: flex;
1806         flex-flow: row wrap;
1807         justify-content: center;
1808 }
1809 .post-meta .lw2-link {
1810         opacity: 0.5;
1811         order: 1;
1812 }
1813 .post-meta > *,
1814 .post-meta .post-section::before {
1815         margin: 0 0.5em;
1816 }
1817 .post-meta .post-section {
1818         order: -1;
1819         margin: 0;
1820         visibility: hidden;
1821 }
1822 .post-meta .post-section::before,
1823 .comment-meta .alignment-forum {
1824         visibility: visible;
1825         font-family: "Font Awesome", "Font Awesome 5 Free";
1826         font-weight: 900;
1827 }
1828 .post-section.frontpage::before {
1829         content: "\F015";
1830 }
1831 .post-section.featured::before {
1832         content: "\F005";
1833 }
1834 .post-section.meta::before {
1835         content: "\F077";
1836 }
1837 .post-section.events::before {
1838         content: "\F5A0";
1839 }
1840 .post-section.personal::before {
1841         content: "\F007";
1842 }
1843 .post-section.draft::before {
1844         content: "\F15B";
1845 }
1846 .post-section.alignment-forum::before,
1847 .comment-meta .alignment-forum {
1848         content: "AF";
1849         font-family: Concourse, 'Changa One';
1850 }
1851
1852 /*= Karma controls hover tooltips =*/
1853
1854 @media only screen and (pointer: fine) {
1855         .post .voting-controls,
1856         .comment-item .voting-controls {
1857                 position: relative;
1858         }
1859         .post .karma.active-controls::after,
1860         .comment-item .karma.active-controls::after {
1861                 content: "Double-click for strong vote";
1862                 position: absolute;
1863                 pointer-events: none;
1864                 display: block;
1865                 left: 6px;
1866                 width: 100%;
1867                 line-height: 1.15;
1868                 white-space: normal;
1869                 text-align: center;
1870                 font-size: 0.875rem;
1871                 opacity: 0;
1872                 transition: opacity 0.2s ease;
1873         }
1874         .post .voting-controls.active-controls:hover::after,
1875         .comment-item .voting-controls.active-controls:hover::after {
1876                 opacity: 1.0;
1877         }
1878
1879         .post .voting-controls .karma-value::after,
1880         .comment-item .voting-controls .karma-value::after {
1881                 content: attr(title);
1882                 position: absolute;
1883                 pointer-events: none;
1884                 display: block;
1885                 left: 50%;
1886                 transform: translateX(-50%);
1887                 white-space: pre-wrap;
1888                 width: max-content;
1889                 text-align: center;
1890                 font-size: 0.875rem;
1891                 color: #bbb;
1892                 opacity: 0;
1893                 transition: opacity 0.2s ease;
1894         }
1895         .post .voting-controls.agreement .karma-value:hover::after,
1896         .comment-item .voting-controls.agreement .karma-value:hover::after {
1897                 top: unset;
1898                 bottom: 100%;
1899         }
1900         .post .voting-controls .karma-value:hover::after,
1901         .comment-item .voting-controls .karma-value:hover::after {
1902                 opacity: 1.0;
1903         }
1904         .post .voting-controls.waiting .karma-value:hover::after,
1905         .comment-item .voting-controls.waiting .karma-value:hover::after {
1906                 display: none;
1907         }
1908         .comment-item .voting-controls .karma-value:hover::after {
1909                 z-index: 5001;
1910         }
1911
1912         .author {
1913                 position: relative;
1914         }
1915         .author:not(.redacted)::before {
1916                 content: attr(data-full-name);
1917                 position: absolute;
1918                 pointer-events: none;
1919                 display: block;
1920                 padding: 0 1em;
1921                 left: 50%;
1922                 bottom: 2em;
1923                 transform: translateX(-50%);
1924                 white-space: nowrap;
1925                 text-align: center;
1926                 font-size: 0.875rem;
1927                 font-weight: normal;
1928                 opacity: 0;
1929                 transition: opacity 0.2s ease;
1930                 z-index: 5001;
1931         }
1932         .author:hover::before {
1933                 opacity: 1.0;
1934         }
1935 }
1936
1937 /*********/
1938 /* POSTS */
1939 /*********/
1940
1941 .post {
1942         max-width: 100%;
1943 }
1944
1945 .post-body {
1946         min-height: 8em;
1947         padding: 0 30px;
1948         line-height: 1.5;
1949         font-size: 1.3rem;
1950         overflow: auto;
1951         margin: 0.5em 0 0 0;
1952 }
1953 h1.post-title {
1954         margin: 1.1em 0 0.35em 0;
1955         padding: 0 30px;
1956         text-align: center;
1957         font-size: 2.5em;
1958         line-height: 1;
1959 }
1960 .post .post-meta {
1961         text-align: center;
1962         position: relative;
1963         z-index: 2;
1964 }
1965 .post .top-post-meta:last-child {
1966         margin-bottom: 40px;
1967 }
1968 .post .bottom-post-meta {
1969         margin: 0;
1970         padding: 20px 0;
1971 }
1972 .bottom-post-meta {
1973         border-style: solid;
1974         border-width: 1px 0;
1975 }
1976
1977 /**********/
1978 /* EVENTS */
1979 /**********/
1980
1981 .event-info .map {
1982         position: relative;
1983         width: 100%;
1984         margin: 2em 0 1em;
1985 }
1986
1987 .event-info .map::before {
1988         content: "";
1989         display: block;
1990         padding-bottom: 50%;
1991 }
1992
1993 .event-info .map iframe {
1994         width: 100%;
1995         height: 100%;
1996         border: 1px solid #000;
1997         position: absolute;
1998         top: 0;
1999         left: 0;
2000 }
2001
2002 .event-info ul {
2003         list-style: none;
2004         padding: 0;
2005         text-align: center;
2006 }
2007
2008 /*******************/
2009 /* POST NAVIGATION */
2010 /*******************/
2011
2012 .post-nav-item {
2013         display: grid;
2014         grid-template: 100% / 32% 36% 32%;
2015         grid-template-areas:
2016                 "prev seq next";
2017 }
2018 .post-nav {
2019         display: flex;
2020         flex-flow: column;
2021         justify-content: flex-end;
2022         padding: 0.5em;
2023 }
2024
2025 .post-nav-title {
2026         font-size: 1.125em;
2027         line-height: 1.15;
2028         display: inline;
2029         border-top: 1px solid transparent;
2030 }
2031 .post-nav.prev .post-nav-title,
2032 .post-nav.next .post-nav-title {
2033         border-bottom: 1px solid transparent;
2034 }
2035
2036 .sequence-title {
2037         align-items: center;
2038         text-align: center;
2039         grid-area: seq;
2040 }
2041 .sequence-title .post-nav-title {
2042         font-size: 1.5em;
2043 }
2044
2045 .post-nav.prev {
2046         grid-area: prev;
2047         align-items: flex-start;
2048 }
2049 .post-nav.prev .post-nav-title::before {
2050         content: "\F0D9\2005";
2051 }
2052 .post-nav.next {
2053         grid-area: next;
2054         text-align: right;
2055         align-items: flex-end;
2056 }
2057 .post-nav.prev .post-nav-label,
2058 .post-nav.next .post-nav-label {
2059         display: none;
2060 }
2061 .post-nav.next .post-nav-title::after {
2062         content: "\2004\F0DA";
2063 }
2064 .post-nav.prev .post-nav-title::before,
2065 .post-nav.next .post-nav-title::after {
2066         font-family: Font Awesome;
2067         font-weight: 900;
2068         vertical-align: text-bottom;
2069         opacity: 0.75;
2070 }
2071 .post-nav-links {
2072         max-width: 100%;
2073 }
2074
2075 @media only screen and (max-width: 900px) {
2076         .post-nav-item {
2077                 font-size: 0.875em;
2078                 grid-template: auto auto / 50% 50%;
2079                 grid-template-areas:
2080                         "prev next"
2081                         "seq seq";
2082         }
2083         .post-nav.prev .post-nav-title,
2084         .post-nav.next .post-nav-title {
2085                 border-bottom: none;
2086         }
2087         .post-nav.prev {
2088                 margin: 0 0 0 -1px;
2089                 position: relative;
2090                 left: 1px;
2091         }
2092         .sequence-title {
2093                 padding: 0.75em 0;
2094         }
2095 }
2096 @media only screen and (max-width: 520px) {
2097         .post-nav-links + .comments {
2098                 padding: 1em 0 0 0;
2099         }
2100 }
2101
2102 .related-posts, .related-post-group {
2103         padding-bottom: 1em;
2104 }
2105 .related-post-type {
2106         font-size: 1.2em;
2107         font-weight: 600;
2108         margin-top: 0.5em;
2109         margin-bottom: -0.5em;
2110         list-style-type: disc;
2111         margin-left: -0.5em;
2112         opacity: 0.7;
2113 }
2114 .related-post-type::before {
2115         content: "\269c";
2116         font-size: 1.375em;
2117         font-weight: normal;
2118         margin-right: 0.15em;
2119         position: relative;
2120         vertical-align: baseline;
2121         top: 0.05em;
2122 }
2123 .related-posts .post-type-prefix {
2124         display: none;
2125 }
2126
2127 .crosspost {
2128         padding: 0.1em 1em;
2129         margin: 1em auto;
2130 }
2131
2132 /**************/
2133 /* LINK POSTS */
2134 /**************/
2135
2136 .post.link-post > .post-body > p:first-child {
2137         text-align: center;
2138         font-size: 1.125em;
2139         margin: 0.5em 0 0 0;
2140 }
2141 .post.link-post > .post-body > p:only-child {
2142         font-size: 1.5em;
2143         margin: 1em 0;
2144 }
2145 .post.link-post a.link-post-link::before {
2146         content: "\F0C1";
2147         font-family: "Font Awesome", "Font Awesome 5 Free";
2148         font-weight: 900;
2149         font-size: 0.75em;
2150         position: relative;
2151         top: -2px;
2152         margin-right: 0.25em;
2153 }
2154
2155 /************/
2156 /* COMMENTS */
2157 /************/
2158
2159 .comments {
2160         max-width: 100%;
2161         padding: 0 0 1px 0;
2162         position: relative;
2163 }
2164 .comments::before {
2165         content: "";
2166         position: absolute;
2167         display: block;
2168         top: 0;
2169         left: 0;
2170         width: 100%;
2171         height: 100%;
2172         pointer-events: none;
2173 }
2174 ul.comment-thread {
2175         list-style-type: none;
2176         padding: 0;
2177         max-width: 100%;
2178 }
2179 .comments .comment-thread > li {
2180         position: relative;
2181 }
2182 #content > #top-nav-bar + .comment-thread .comment-item {
2183         margin-top: 0;
2184 }
2185
2186 .comment-item {
2187         margin: 2em 0 0 0;
2188 }
2189 .comment-item .comment-item {
2190         margin: 1em 8px 8px 16px;
2191 }
2192 .comment-item .comment-item + .comment-item {
2193         margin: 2em 8px 8px 16px;
2194 }
2195
2196 .comment-body {
2197         line-height: 1.45;
2198         font-size: 1.2rem;
2199         padding: 10px;
2200 }
2201 .comment-body ul {
2202         list-style-type: circle;
2203 }
2204 .comment-body > *:first-child {
2205         margin-top: 0;
2206 }
2207 .comment-body > *:last-child {
2208         margin-bottom: 0;
2209 }
2210
2211 .comments-empty-message {
2212         width: 100%;
2213         text-align: center;
2214         padding: 0.75em 0 0.9em 0;
2215         font-size: 1.375em;
2216 }
2217
2218 /**********************************/
2219 /* DEEP COMMENT THREAD COLLAPSING */
2220 /**********************************/
2221
2222 .comment-item > input[id^="expand"] {
2223         display: none;
2224 }
2225 .comment-item > input[id^="expand"] + label {
2226         display: block;
2227         visibility: hidden;
2228         position: relative;
2229         margin: 8px 9px;
2230 }
2231 .comment-item > input[id^="expand"] + label::after {
2232         content: "(Expand " attr(data-child-count) "    below)";
2233         visibility: visible;
2234         position: absolute;
2235         left: 0;
2236         white-space: nowrap;
2237         cursor: pointer;
2238 }
2239 .comment-item > input[id^="expand"]:checked + label::after {
2240         content: "(Collapse " attr(data-child-count) "  below)";
2241 }
2242 .comment-item > input[id^="expand"] ~ .comment-thread {
2243         max-height: 34px;
2244         overflow: hidden;
2245 }
2246 .comment-item > input[id^="expand"] ~ .comment-thread > li:first-child {
2247         margin-top: 0;
2248 }
2249 .comment-item > input[id^="expand"]:checked ~ .comment-thread {
2250         max-height: 1000000px;
2251 }
2252
2253 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
2254         margin: 0;
2255 }
2256 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item a.comment-parent-link:hover::after {
2257         display: none;
2258 }
2259
2260 /*************/
2261 /* BACKLINKS */
2262 /*************/
2263
2264 .backlinks > input {
2265         display: none;
2266 }
2267
2268 .backlinks > label {
2269         margin-left: 10px;
2270         display: block;
2271         color: #00f;
2272         cursor: pointer;
2273 }
2274
2275 .backlinks > label::before {
2276         content: " ";
2277         border-left: 5px solid currentColor;
2278         border-top: 5px solid transparent;
2279         border-bottom: 5px solid transparent;
2280         transition: transform 0.25s ease-out;
2281         transform-origin: 29% 55%;
2282         display: inline-block;
2283         padding-right: 0.5em;
2284 }
2285
2286 .backlinks > input:checked + label::before {
2287         transform: rotate(90deg);
2288 }
2289
2290 .backlinks li {
2291         margin-top: 0;
2292 }
2293
2294 .backlinks > ul {
2295         height: 0;
2296         perspective-origin: top;
2297         transform: perspective(100em) rotateX(-90deg);
2298         transform-origin: center top;
2299         opacity: 0;
2300         margin-top: 0.5em;
2301         margin-bottom: 0.5em;
2302 }
2303
2304 .backlinks > input:checked ~ ul {
2305         height: auto;
2306         transform: perspective(100em) rotateX(0deg);
2307         transition: transform 0.25s ease-in, opacity 0.25s ease-in;
2308         opacity: 1;
2309 }
2310
2311 /****************/
2312 /* COMMENT-META */
2313 /****************/
2314
2315 .comment-meta {
2316         padding: 2px 24px 2px 10px;
2317         margin: 0 -1px;
2318         border: none;
2319         display: flex;
2320         flex-flow: row wrap;
2321         align-items: baseline;
2322 }
2323 .user-page .comment-meta,
2324 .conversation-page .comment-meta {
2325         padding-right: 10px;
2326 }
2327 .comment-meta .comment-post-title {
2328         flex-basis: 100%;
2329         overflow: hidden;
2330         text-overflow: ellipsis;
2331         white-space: nowrap;
2332         line-height: 1.3;
2333 }
2334 .conversation-page .comment-meta .comment-post-title {
2335         margin: 0;
2336         flex-basis: unset;
2337         flex: 1 0 auto;
2338         text-align: right;
2339         display: none;  /* Not sure if we need to display this... */
2340 }
2341 .comment-item .author:not(.redacted).original-poster::after {
2342         content: "\2004(OP)";
2343         font-size: 0.75em;
2344 }
2345
2346 /*****************************/
2347 /* COMMENT THREAD NAVIGATION */
2348 /*****************************/
2349
2350 a.comment-parent-link:not(.inline-author),
2351 a.comment-parent-link.inline-author::before {
2352         opacity: 0.5;
2353 }
2354 a.comment-parent-link:hover {
2355         opacity: 1.0;
2356 }
2357 a.comment-parent-link::before {
2358         content: "\F062";
2359         font-family: "Font Awesome", "Font Awesome 5 Free";
2360         font-weight: 900;
2361         font-size: 0.75rem;
2362         line-height: 1;
2363         position: absolute;
2364         z-index: 1;
2365         display: block;
2366         padding: 3px 3px 0 3px;
2367         width: 16px;
2368         height: calc(100% + 2px);
2369         top: -1px;
2370         left: -17px;
2371 }
2372 a.comment-parent-link::after {
2373         content: "";
2374         position: absolute;
2375         z-index: 0;
2376         display: block;
2377         width: calc(100% + 26px);
2378         height: calc(100% + 38px);
2379         top: -29px;
2380         left: -17px;
2381         pointer-events: none;
2382         overflow: hidden;
2383         visibility: hidden;
2384 }
2385 a.comment-parent-link:hover::after {
2386         visibility: visible;
2387 }
2388
2389 .comment-child-links {
2390         flex-basis: 100%;
2391 }
2392 .comment-child-link {
2393         margin: 0 0.25em;
2394         display: inline-block;
2395 }
2396 .comment-child-link::before {
2397         content: ">";
2398         display: inline-block;
2399         margin: 0 2px 0 0;
2400 }
2401
2402 .comment-popup {
2403         position: fixed;
2404         top: 10%;
2405         right: 10%;
2406         max-width: 700px;
2407         z-index: 10001;
2408         font-size: 1rem;
2409         white-space: unset;
2410         pointer-events: none;
2411 }
2412 .comment-popup .comment-parent-link {
2413         display: none;
2414 }
2415 .comment-popup .comment-body {
2416         font-size: 1.0625rem;
2417 }
2418
2419 .comment-item.depth-odd {
2420         --GW-comment-background-color: var(--GW-comment-background-color-odd);
2421         --GW-comment-parent-background-color: var(--GW-comment-background-color-even);
2422 }
2423 .comment-item.depth-even {
2424         --GW-comment-background-color: var(--GW-comment-background-color-even);
2425         --GW-comment-parent-background-color: var(--GW-comment-background-color-odd);
2426 }
2427
2428 .comment-item:target {
2429         --GW-comment-background-color: var(--GW-comment-background-color-target);
2430 }
2431 .comment-item:target > .comment-thread > .comment-item {
2432         --GW-comment-parent-background-color: var(--GW-comment-background-color-target);
2433 }
2434
2435 /**********************/
2436 /* COMMENT PERMALINKS */
2437 /**********************/
2438 /********************/
2439 /* COMMENT LW LINKS */
2440 /********************/
2441
2442 .comment-meta .permalink::before,
2443 .comment-meta .lw2-link::before,
2444 .individual-thread-page a.comment-parent-link:empty::before {
2445         content: "";
2446         display: inline-block;
2447         width: 1rem;
2448         height: 1rem;
2449         border-radius: 3px;
2450         box-shadow:
2451                 0 0 0 1px #fff,
2452                 0 0 0 2px #00e,
2453                 0 0 0 3px transparent;
2454         padding: 0 0 0 2px;
2455         background-size: 100%;
2456         position: relative;
2457         top: 2px;
2458         opacity: 0.5;
2459 }
2460 .comment-meta .permalink::before {
2461         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-white-on-blue.gif")) ?>');
2462 }
2463 .comment-meta .lw2-link::before {
2464         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-white-on-blue.gif")) ?>');
2465 }
2466 .individual-thread-page a.comment-parent-link:empty::before {
2467         left: unset;
2468         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-white-on-blue.gif")) ?>');
2469 }
2470 .comment-meta .permalink:hover::before {
2471         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-blue-on-white.gif")) ?>');
2472 }
2473 .comment-meta .lw2-link:hover::before {
2474         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-blue-on-white.gif")) ?>');
2475 }
2476 .individual-thread-page a.comment-parent-link:empty:hover::before {
2477         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-blue-on-white.gif")) ?>');
2478 }
2479 .comment-meta .permalink:hover::before,
2480 .comment-meta .lw2-link:hover::before,
2481 .individual-thread-page a.comment-parent-link:empty:hover::before {
2482         box-shadow:
2483                 0 0 0 2px #00e,
2484                 0 0 0 3px transparent;
2485         opacity: 1.0;
2486         filter: unset;
2487 }
2488 .comment-meta .permalink:active::before,
2489 .comment-meta .lw2-link:active::before,
2490 .individual-thread-page a.comment-parent-link:empty:active::before {
2491         transform: scale(0.9);
2492 }
2493
2494 .comment-meta .permalink,
2495 .comment-meta .lw2-link,
2496 .individual-thread-page .comment-parent-link:empty {
2497         position: relative;
2498         opacity: 1.0;
2499 }
2500 .comment-meta .permalink::after,
2501 .comment-meta .lw2-link::after,
2502 .individual-thread-page .comment-parent-link:empty::after {
2503         content: "";
2504         width: 30px;
2505         height: 30px;
2506         display: block;
2507         position: absolute;
2508         top: -2px;
2509         left: -7px;
2510         box-shadow: none;
2511         pointer-events: auto;
2512         visibility: visible;
2513 }
2514
2515 /*************************/
2516 /* COMMENTS COMPACT VIEW */
2517 /*************************/
2518
2519 #comments-list-mode-selector,
2520 #content.index-page #comments-list-mode-selector,
2521 #content.user-page #comments-list-mode-selector {
2522         padding-top: 6px;
2523         grid-column: 1;
2524         position: unset;
2525         z-index: 1;
2526         justify-self: start;
2527         align-self: start;
2528 }
2529 #comments-list-mode-selector button {
2530         color: transparent;
2531         width: 32px;
2532         height: 32px;
2533         padding: 6px;
2534         margin: 1px;
2535         overflow: hidden;
2536         background-repeat: no-repeat;
2537         background-size: 100%;
2538         background-origin: content-box;
2539 }
2540 #comments-list-mode-selector button:disabled {
2541         cursor: auto;
2542 }
2543 #comments-list-mode-selector button.expanded {
2544         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/expanded_2x.gif")) ?>');
2545 }
2546 #comments-list-mode-selector button.compact {
2547         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/compact_2x.gif")) ?>');
2548 }
2549 @media only screen and (max-resolution: 1dppx) {
2550         #comments-list-mode-selector button.expanded {
2551                 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/expanded_1x.gif")) ?>');
2552         }
2553         #comments-list-mode-selector button.compact {
2554                 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/compact_1x.gif")) ?>');
2555         }
2556 }
2557
2558 #content > ul.comment-thread > li.comment-item,
2559 #content.compact > ul.comment-thread > li.comment-item {
2560         margin: 0;
2561 }
2562
2563 #content > .comment-thread {
2564         margin: 1em 0;
2565 }
2566 #content.compact > .comment-thread {
2567         font-size: 0.9375rem;
2568         margin: 0.5em 0;
2569 }
2570 #content.compact > .comment-thread:hover {
2571         z-index: 1;
2572 }
2573 #content.compact > .comment-thread .comment-body {
2574         font-size: 1.0625rem;
2575 }
2576 #content.compact > .comment-thread .comment-item,
2577 #content.index-page .comment-item.ignored,
2578 #content.inbox-user-page .comment-item.ignored {
2579         max-height: 61px;
2580         margin-top: 1em;
2581         overflow: hidden;
2582         position: relative;
2583 }
2584 #content.compact > .comment-thread .comment-item {
2585         pointer-events: none;
2586 }
2587 #content.compact > .comment-thread .comment-item::after {
2588         content: "…";
2589         position: absolute;
2590         right: 0;
2591         bottom: 0;
2592         font-size: 2rem;
2593         line-height: 1;
2594         padding: 0 16px 10px 64px;
2595         pointer-events: auto;
2596 }
2597 @media only screen and (hover: hover) {
2598         #content.compact:not(:focus-within) > .comment-thread .comment-item:hover,
2599         #content.compact > .comment-thread .comment-item.expanded {
2600                 overflow: visible;
2601                 pointer-events: auto;
2602                 z-index: 10;
2603         }
2604 }
2605 @media only screen and (hover: none) {
2606         #content.compact > .comment-thread.expanded .comment-item {
2607                 overflow: visible;
2608                 pointer-events: auto;
2609                 z-index: 10;
2610         }
2611 }
2612 #content.compact > .comment-thread .comment-item .comment-meta {
2613         white-space: nowrap;
2614         overflow: hidden;
2615         text-overflow: ellipsis;
2616         padding: 2px 10px;
2617 }
2618 #content.compact > .comment-thread .comment-item:hover .comment-meta {
2619         white-space: unset;
2620 }
2621 #content.compact > .comment-thread .comment-item .comment-meta a {
2622         pointer-events: auto;
2623 }
2624 #content.compact > .comment-thread .comment-item .comment-meta .comment-post-title {
2625         display: inline;
2626 }
2627 #content.compact > .comment-thread .comment-item .comment-meta .voting-controls + .comment-post-title {
2628         margin-left: 0.75em;
2629 }
2630 @media only screen and (hover: hover) {
2631         #content.compact > .comment-thread:last-of-type .comment-item:hover,
2632         #content.compact > .comment-thread:last-of-type .comment-item.expanded {
2633                 max-height: unset;
2634         }
2635         #content.compact > .comment-thread .comment-item:hover .comment,
2636         #content.compact > .comment-thread .comment-item.expanded .comment {
2637                 position: relative;
2638                 z-index: 1;
2639                 margin-bottom: 2em;
2640                 bottom: 0;
2641         }
2642         #content.compact > .comment-thread .comment-item:hover .comment::before,
2643         #content.compact > .comment-thread .comment-item.expanded .comment::before{
2644                 content: "";
2645                 position: absolute;
2646                 display: block;
2647                 width: calc(100% + 20px);
2648                 height: calc(100% + 20px);
2649                 z-index: -1;
2650                 top: -10px;
2651                 left: -10px;
2652         }
2653         #content.compact > .comment-thread:last-of-type .comment-item:hover .comment,
2654         #content.compact > .comment-thread:last-of-type .comment-item.expanded .comment{
2655                 margin: 0;
2656         }
2657 }
2658 @media only screen and (hover: none) {
2659         #content.compact > .comment-thread.expanded:last-of-type .comment-item {
2660                 max-height: unset;
2661         }
2662         #content.compact > .comment-thread.expanded .comment-item .comment {
2663                 position: relative;
2664                 z-index: 1;
2665                 margin-bottom: 2em;
2666                 bottom: 0;
2667         }
2668         #content.compact > .comment-thread.expanded .comment-item .comment::before {
2669                 content: "";
2670                 position: absolute;
2671                 display: block;
2672                 width: calc(100% + 14px);
2673                 height: calc(100% + 20px);
2674                 z-index: -1;
2675                 top: -10px;
2676                 left: -10px;
2677         }
2678         #content.compact > .comment-thread.expanded:last-of-type .comment-item .comment {
2679                 margin: 0;
2680         }
2681         #content.compact > .comment-thread.expanded .comment-item .comment::after {
2682                 content: "";
2683                 display: block;
2684                 position: fixed;
2685                 top: 0;
2686                 left: 0;
2687                 width: 100%;
2688                 height: 100%;
2689                 z-index: -2;
2690                 background-color: rgba(0,0,0,0.5);
2691         }
2692 }
2693
2694 /*****************************/
2695 /* HIGHLIGHTING NEW COMMENTS */
2696 /*****************************/
2697
2698 .new-comment::before {
2699         content: "";
2700         position: absolute;
2701         width: 100%;
2702         height: 100%;
2703         z-index: 5000;
2704         pointer-events: none;
2705 }
2706
2707 /***********************************/
2708 /* COMMENT THREAD MINIMIZE BUTTONS */
2709 /***********************************/
2710
2711 .comment-minimize-button {
2712         font-family: "Font Awesome", "Font Awesome 5 Free";
2713         font-weight: 900;
2714         font-size: 1.25rem;
2715         line-height: 1;
2716         position: absolute;
2717         right: 1px;
2718         top: 1px;
2719         width: 18px;
2720         margin: 0;
2721         cursor: pointer;
2722 }
2723 .comment-minimize-button:active {
2724         transform: scale(0.9);
2725 }
2726 .comment-minimize-button::after {
2727         content: attr(data-child-count);
2728         font-weight: normal;
2729         font-size: 0.8125rem;
2730         position: absolute;
2731         left: 0;
2732         width: 100%;
2733         text-align: center;
2734         top: 21px;
2735 }
2736 #content.individual-thread-page .comment-minimize-button {
2737         display: none;
2738 }
2739
2740 /*****************/
2741 /* IGNORE SYSTEM */
2742 /*****************/
2743
2744 #content.comment-thread-page .comment-item.ignored {
2745         height: 38px;
2746         overflow: hidden;
2747 }
2748 .comment-item.ignored > .comment > .comment-meta > .author {
2749         text-decoration: line-through;
2750 }
2751
2752 /***********************************/
2753 /* INDIVIDUAL COMMENT THREAD PAGES */
2754 /***********************************/
2755
2756 .individual-thread-page > h1 {
2757         line-height: 1;
2758         margin: 0.75em 0 3px 0;
2759 }
2760 .individual-thread-page .comments {
2761         border: none;
2762 }
2763
2764 /*************/
2765 /* SHORTFORM */
2766 /*************/
2767
2768 .shortform-index-page .comments::before {
2769         border: none;
2770         box-shadow: none;
2771 }
2772
2773 .shortform-index-page .comments > .comment-thread > .comment-item:first-child {
2774         margin-top: 0;
2775 }
2776
2777 /****************/
2778 /* VOTE BUTTONS */
2779 /****************/
2780
2781 .vote {
2782         margin: 0;
2783 }
2784 .vote {
2785         font-family: "Font Awesome", "Font Awesome 5 Free";
2786         font-weight: 900;
2787         border: none;
2788 }
2789
2790 .vote:disabled {
2791         visibility: hidden;
2792         cursor: default;
2793 }
2794
2795 @keyframes waiting {
2796         0% {background-position: 200% 0%}
2797         100% {background-position: 0% 0%}
2798 }
2799
2800 .voting-controls .karma-value {
2801         opacity: 1;
2802         transition: opacity 0.5s linear;
2803 }
2804
2805 .voting-controls.waiting .karma-value {
2806         opacity: 0.5;
2807         background: repeat-x linear-gradient(70deg, #000 50%, #fff 75%, #000);
2808         background-clip: text;
2809         -webkit-background-clip: text;
2810         color: transparent;
2811         background-position: 200% 0%;
2812         background-size: 200% 100%;
2813         animation: waiting 1s linear infinite;
2814 }
2815
2816 /* Replicated karma controls at bottom of comments. */
2817 .comment-controls .voting-controls {
2818         float: left;
2819         font-size: 0.9375em;
2820 }
2821
2822 .comment-controls .voting-controls:first-of-type {
2823         margin-left: -14px;
2824 }
2825
2826 /*****************************/
2827 /* COMMENTING AND POSTING UI */
2828 /*****************************/
2829
2830 .comment-controls {
2831         text-align: right;
2832         margin: 0 8px 8px 16px;
2833         position: relative;
2834         z-index: 9999;
2835 }
2836 .comment-thread .comment-controls + .comment-thread > li:first-child {
2837         margin-top: 8px;
2838 }
2839 .comments > .comment-controls {
2840         margin: 8px 0 0 0;
2841 }
2842 .comments > .comment-controls:last-child {
2843         margin: 8px 0 16px 0;
2844 }
2845
2846 .posting-controls input[type='submit'] {
2847         margin: 6px;
2848         padding: 4px 10px;
2849         font-size: 1.125rem;
2850 }
2851
2852 .comment-controls .cancel-comment-button {
2853         position: absolute;
2854         right: 0;
2855         margin: 0;
2856         height: 27px;
2857         font-size: inherit;
2858         padding: 4px 8px 2px 4px;
2859         z-index: 1;
2860 }
2861 .comment-controls .cancel-comment-button::before {
2862         font-family: "Font Awesome", "Font Awesome 5 Free";
2863         margin-right: 3px;
2864         content: '\F00D';
2865         font-weight: 900;
2866         font-size: 0.9em;
2867         opacity: 0.7;
2868 }
2869
2870 .comment + .comment-controls .action-button {
2871         font-weight: normal;
2872         font-size: 1.0625em;
2873         padding: 1px 6px;
2874 }
2875 .comment-controls .action-button::before {
2876         font-family: "Font Awesome", "Font Awesome 5 Free";
2877         margin-right: 3px;
2878 }
2879 .new-comment-button {
2880         font-size: 1.5rem;
2881         margin: 0 0.25em;
2882 }
2883 .comment-controls .reply-button::before {
2884         content: '\F3E5';
2885         font-weight: 900;
2886         font-size: 0.9em;
2887         opacity: 0.6;
2888 }
2889 .comment-meta .replied::before {
2890         content: '\F3E5';
2891         font-family: "Font Awesome", "Font Awesome 5 Free";
2892         color: #090;
2893         font-weight: 900;
2894         font-size: 0.9em;
2895         opacity: 0.6;
2896 }
2897
2898 .post-controls {
2899         text-align: right;
2900         margin: 0.75em 0 0 0;
2901         align-self: start;
2902         justify-self: end;
2903 }
2904 .edit-post-link {
2905         display: inline-block;
2906         margin-bottom: 0.25em;
2907         font-size: 1.125rem;
2908 }
2909 .edit-post-link::before {
2910         margin-right: 0.3em;
2911 }
2912 .comment-controls .edit-button::before,
2913 .edit-post-link::before {
2914         content: '\F303';
2915         font-family: "Font Awesome", "Font Awesome 5 Free";
2916         font-weight: 900;
2917         font-size: 0.75em;
2918         position: relative;
2919         top: -1px;
2920 }
2921
2922 .comment-controls .delete-button {
2923         margin-right: 0.25em;
2924 }
2925 .comment-controls .edit-button,
2926 .comment-controls .retract-button,
2927 .comment-controls .unretract-button {
2928         margin-right: 1em;
2929 }
2930 .comment-controls .retract-button::before {
2931         content: '\F4B3';
2932         opacity: 0.6;
2933 }
2934 .comment-controls .unretract-button::before {
2935         content: '\F075';
2936         opacity: 0.9;
2937 }
2938 .comment-controls .delete-button::before {
2939         content: '\F05E';
2940         opacity: 0.7;
2941 }
2942 .comment-controls .retract-button::before,
2943 .comment-controls .unretract-button::before,
2944 .comment-controls .delete-button::before {
2945         font-weight: 900;
2946         font-size: 0.9em;
2947 }
2948
2949 .comment-controls form {
2950         position: relative;
2951 }
2952 .textarea-container {
2953         position: relative;
2954 }
2955 .posting-controls textarea {
2956         display: block;
2957         width: 100%;
2958         height: 15em;
2959         min-height: 15em;
2960         max-height: calc(100vh - 6em);
2961         margin: 2px 0 0 0;
2962         padding: 4px 5px;
2963         font-size: 1.2rem;
2964         border-style: solid;
2965         border-width: 29px 1px 1px 1px;
2966         resize: none;
2967 }
2968
2969 /* GUIEdit buttons */
2970
2971 .guiedit-buttons-container {
2972         position: absolute;
2973         left: 1px;
2974         top: 1px;
2975         width: calc(100% - 2px);
2976         height: 28px;
2977         text-align: left;
2978         padding: 1px 4px 0 4px;
2979         overflow: hidden;
2980 }
2981 .comment-thread-page .guiedit-buttons-container {
2982         padding-right: 60px;
2983 }
2984 .guiedit-buttons-container button {
2985         height: 26px;
2986         padding: 0 7px;
2987         font-weight: 900;
2988         font-size: 0.875rem;
2989         line-height: 1;
2990         position: static;
2991 }
2992 .guiedit-buttons-container button:active {
2993         transform: none;
2994 }
2995 .guiedit-buttons-container button:active div {
2996         transform: scale(0.9);
2997 }
2998 .guiedit-buttons-container button sup {
2999         font-weight: bold;
3000 }
3001 .guiedit::after {
3002         content: attr(data-tooltip);
3003         position: absolute;
3004         font-weight: normal;
3005         font-size: 1rem;
3006         top: 2px;
3007         left: 464px;
3008         height: 25px;
3009         padding: 4px 0;
3010         white-space: nowrap;
3011         visibility: hidden;
3012 }
3013 .guiedit:hover::after {
3014         visibility: visible;
3015 }
3016
3017 /* Markdown hints */
3018
3019 .posting-controls .markdown-reference-link {
3020         float: left;
3021         padding: 1px 0 0 6px;
3022 }
3023 .posting-controls .markdown-reference-link a {
3024         padding-right: 1.5em;
3025         margin-right: 0.15em;
3026         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');
3027         background-size: 1.25em;
3028         background-repeat: no-repeat;
3029         background-position: right center;
3030 }
3031
3032 #markdown-hints-checkbox + label {
3033         float: left;
3034         margin: 2px 0 0 1em;
3035         line-height: 1.3;
3036         cursor: pointer;
3037 }
3038 #edit-post-form #markdown-hints-checkbox + label {
3039         padding: 0;
3040 }
3041 #markdown-hints-checkbox {
3042         visibility: hidden;
3043         float: left;
3044 }
3045 #markdown-hints-checkbox + label::after {
3046         content: "(Show Markdown help)";
3047 }
3048 #markdown-hints-checkbox:checked + label::after {
3049         content: "(Hide Markdown help)";
3050 }
3051 #markdown-hints-checkbox + label::before {
3052         content: '\F059';
3053         font-family: "Font Awesome", "Font Awesome 5 Free";
3054         font-weight: 900;
3055         margin-right: 3px;
3056 }
3057 #markdown-hints-checkbox:checked + label::before {
3058         font-weight: normal;
3059 }
3060 #markdown-hints {
3061         margin: 4px 0 0 4px;
3062         padding: 4px 8px;
3063         position: absolute;
3064         text-align: left;
3065         top: calc(100% - 1em);
3066         z-index: 1;
3067         display: none;
3068 }
3069 .comment-controls #markdown-hints {
3070         top: calc(100% + 1.75em);
3071 }
3072 #markdown-hints-checkbox:checked ~ #markdown-hints {
3073         display: table;
3074 }
3075 .markdown-hints-row {
3076         display: table-row;
3077 }
3078 #markdown-hints .markdown-hints-row span,
3079 #markdown-hints .markdown-hints-row code {
3080         float: none;
3081         display: table-cell;
3082         border: none;
3083         background-color: inherit;
3084         padding: 0 12px 0 0;
3085 }
3086
3087 /******************/
3088 /* EDIT POST FORM */
3089 /******************/
3090
3091 #edit-post-form {
3092         padding: 1em 1em 4em 1em;
3093 }
3094 #edit-post-form .post-meta-fields {
3095         display: grid;
3096         grid-template-columns: 5em auto auto auto 1fr auto;
3097         margin-bottom: 0.625em;
3098 }
3099
3100 #edit-post-form label[for='title'],
3101 #edit-post-form label[for='url'],
3102 #edit-post-form label[for='section'] {
3103         grid-column: 1;
3104 }
3105 #edit-post-form input[type='text'] {
3106         padding: 0.25em;
3107         grid-column: 2 / span 4;
3108         margin-bottom: 0.5em;
3109 }
3110
3111 #edit-post-form .link-post-checkbox,
3112 #edit-post-form .link-post-checkbox + label {
3113         grid-row: 1;
3114         grid-column: 6;
3115 }
3116 #edit-post-form .question-checkbox,
3117 #edit-post-form .question-checkbox + label {
3118         grid-row: 3;
3119         grid-column: 5;
3120         justify-self: start;
3121         margin-left: 1.5em;
3122 }
3123
3124 #edit-post-form .post-meta-fields label[for="submit-to-frontpage"] {
3125         grid-row: 4;
3126         grid-column: 2 / span 4;
3127         text-align: left;
3128         margin-top: 8px;
3129 }
3130
3131 #edit-post-form .post-meta-fields input[type='checkbox'] {
3132         height: 0;
3133         opacity: 0;
3134         pointer-events: none;
3135 }
3136 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
3137         white-space: nowrap;
3138         position: relative;
3139         cursor: pointer;
3140         padding: 0.25em 0.5em 0.25em calc(20px + 0.25em + 0.3725em);
3141         align-self: start;
3142 }
3143 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
3144         content: "";
3145         font-family: "Font Awesome", "Font Awesome 5 Free";
3146         font-size: 1.375rem;
3147         line-height: 0.7;
3148         text-indent: 1px;
3149         font-weight: 900;
3150         position: absolute;
3151         width: 20px;
3152         height: 20px;
3153         left: 5px;
3154 }
3155 #edit-post-form label[for='url'],
3156 #edit-post-form input[name='url'] {
3157         display: none;
3158 }
3159 #edit-post-form .link-post-checkbox:checked ~ label[for='url'],
3160 #edit-post-form .link-post-checkbox:checked ~ input[name='url'] {
3161         display: initial;
3162 }
3163 #edit-post-form label {
3164         line-height: normal;
3165         border: 1px solid transparent;
3166         text-align: right;
3167     padding: 0.25em 0.5em;
3168     white-space: nowrap;
3169 }
3170 #edit-post-form input[type='radio'] {
3171         width: 0;
3172         margin: 0;
3173         opacity: 0;
3174         pointer-events: none;
3175 }
3176 #edit-post-form input[type='radio'] + label {
3177         padding: 4px 12px;
3178         text-align: center;
3179         border-style: solid;
3180         border-width: 1px 1px 1px 0;
3181         cursor: pointer;
3182 }
3183 #edit-post-form input[type='radio']:checked + label {
3184         cursor: default;
3185 }
3186
3187 #edit-post-form label[for='section'] {
3188         grid-row: 3;
3189 }
3190 #edit-post-form input[type='radio'] + label {
3191         grid-row: 3;
3192 }
3193 <?php fit_content("#edit-post-form input[type='radio'] + label"); ?>
3194
3195 #edit-post-form textarea {
3196         min-height: 24em;
3197 }
3198
3199 #edit-post-form input[type='submit'] {
3200         padding: 6px 12px;
3201         float: right;
3202 }
3203 #edit-post-form #markdown-hints {
3204         top: calc(100% + 2em);
3205 }
3206
3207 #edit-post-form button.guiedit div {
3208         overflow: visible;
3209 }
3210 .guiedit-mobile-auxiliary-button {
3211         display: none;
3212 }
3213
3214 /***********/
3215 /* BUTTONS */
3216 /***********/
3217
3218 button,
3219 input[type='submit'] {
3220         font-family: inherit;
3221         font-size: inherit;
3222         background-color: inherit;
3223         cursor: pointer;
3224         border: none;
3225         border-radius: 0;
3226 }
3227
3228 /************/
3229 /* HEADINGS */
3230 /************/
3231
3232 .body-text h1,
3233 .body-text h2,
3234 .body-text h3,
3235 .body-text h4,
3236 .body-text h5,
3237 .body-text h6 {
3238         line-height: 1.1;
3239         margin: 1em 0 0.75em 0;
3240         text-align: left;
3241 }
3242
3243 .post-body h5,
3244 .post-body h6 {
3245         font-size: 1em;
3246 }
3247 .post-body h4,
3248 .body-text h4 {
3249         font-size: 1.2em;
3250 }
3251 .post-body h3,
3252 .body-text h3 {
3253         font-size: 1.4em;
3254 }
3255 .post-body h2,
3256 .body-text h2 {
3257         font-size: 1.75em;
3258 }
3259 .post-body h1,
3260 .body-text h1 {
3261         font-size: 2.1em;
3262 }
3263
3264 .comment-body h5,
3265 .comment-body h6 {
3266         font-size: 1em;
3267 }
3268 .comment-body h4 {
3269         font-size: 1.15em;
3270 }
3271 .comment-body h3 {
3272         font-size: 1.3em;
3273 }
3274 .comment-body h2 {
3275         font-size: 1.5em;
3276 }
3277 .comment-body h1 {
3278         font-size: 1.75em;
3279 }
3280
3281 /**********/
3282 /* QUOTES */
3283 /**********/
3284
3285 blockquote,
3286 .post-body .comment-box .comment-body {
3287         font-size: 0.9em;
3288         margin: 1em 0;
3289         padding-left: 0.5em;
3290         margin-left: 1px;
3291         padding-bottom: 3px;
3292 }
3293 blockquote *:first-child {
3294         margin-top: 0;
3295 }
3296 blockquote *:last-child {
3297         margin-bottom: 0;
3298 }
3299 blockquote blockquote {
3300         font-size: 0.95em;
3301 }
3302
3303 /* Pseudo-blockquotes that LW sometimes uses for some reason */
3304
3305 .post-body .comment-box .user-name {
3306         font-style: italic;
3307 }
3308 .post-body .comment-box .user-name::after {
3309         content: ":";
3310 }
3311 .post-body .comment-box {
3312         zoom: 1.25;
3313 }
3314
3315 /**********/
3316 /* IMAGES */
3317 /**********/
3318
3319 #content img, #content figure {
3320         max-width: 100%;
3321 }
3322
3323 .prediction-poll > svg {
3324         width: 700px;
3325         max-width: 100%;
3326 }
3327
3328 img.inline-latex {
3329         position: relative;
3330         top: 2.5px;
3331         margin: 0 2px;
3332 }
3333
3334 #content figure {
3335         text-align: center;
3336         margin: 1.5em auto;
3337 }
3338
3339 p.imgonly,
3340 div.imgonly,
3341 figure {
3342         text-align: center;
3343         margin: auto;
3344         clear: both;
3345 }
3346
3347 .imgonly iframe {
3348         display: block;
3349         width: 100%;
3350         height: 250px;
3351         border: 0;
3352 }
3353
3354 // Aspect ratio trick from https://css-tricks.com/aspect-ratio-boxes/
3355
3356 [style*="--aspect-ratio"] > * {
3357         width: 100%;
3358 }
3359 [style*="--aspect-ratio"] > img {
3360         height: auto;
3361 }
3362 @supports (--custom:property) {
3363         [style*="--aspect-ratio"] {
3364                 position: relative;
3365         }
3366         [style*="--aspect-ratio"]::before {
3367                 content: "";
3368                 display: block;
3369                 padding-bottom: calc(100% / (var(--aspect-ratio)));
3370         }
3371         [style*="--aspect-ratio"] > * {
3372                 position: absolute;
3373                 top: 0;
3374                 left: 0;
3375                 height: 100%;
3376         }
3377 }
3378
3379 /**********/
3380 /* TABLES */
3381 /**********/
3382
3383 .body-text table {
3384         border-collapse: collapse;
3385         font-size: 0.875em;
3386 }
3387 .body-text table th,
3388 .body-text table td {
3389         text-align: left;
3390         padding: 4px 6px;
3391         line-height: 1.3;
3392 }
3393 .body-text table .numeric {
3394         text-align: right;
3395         font-family: Inconsolata, Menlo, monospace;
3396 }
3397 .body-text table caption {
3398         margin: 0 0 0.25em 0;
3399         font-weight: bold;
3400         font-size: 1.125em;
3401 }
3402
3403 /********/
3404 /* MISC */
3405 /********/
3406
3407 /*= Superscripts & subscripts =*/
3408
3409 /*      Make sure superscripts and subscripts do not affect line spacing. */
3410 sup, sub {
3411         vertical-align: baseline;
3412         position: relative;
3413         top: -0.5em;
3414         left: 0.05em;
3415         font-size: 0.8em;
3416 }
3417 sub {
3418         top: 0.3em;
3419 }
3420
3421 /*= Code blocks & other "unstyled" text. =*/
3422
3423 pre,
3424 code {
3425         font-family: Inconsolata, Menlo, monospace;
3426 }
3427 pre {
3428         white-space: pre-wrap;
3429 }
3430 .body-text pre {
3431         text-align: left;
3432 }
3433 code {
3434         font-size: 0.95em;
3435         display: inline-block;
3436         padding: 0 4px 1px 5px;
3437 }
3438 pre > code {
3439         display: block;
3440         border-radius: 0;
3441         padding: 3px 4px 5px 8px;
3442         tab-size: 4;
3443 }
3444
3445 /*= Fractions =*/
3446
3447 .frac::after {
3448         content: "\200B";
3449 }
3450
3451 /*= Removing browser default styling of various elements =*/
3452
3453 /*      On various input elements such as text fields and buttons, remove "blue glow" focus outlines on Macs, dotted black outlines in Firefox, etc. */
3454 :focus {
3455         outline: none;
3456 }
3457
3458 /*      Remove "embossed" appearance of horizontal rules. */
3459 hr {
3460         border: none;
3461 }
3462
3463 input,
3464 button,
3465 textarea {
3466         -webkit-appearance: none;
3467         -moz-appearance: none;
3468         appearance: none;
3469 }
3470
3471 input {
3472         font-family: inherit;
3473         font-size: inherit;
3474         font-weight: inherit;
3475 }
3476
3477 /*************/
3478 /* FOOTNOTES */
3479 /*************/
3480
3481 ol {
3482         counter-reset: ordered-list;
3483 }
3484 .footnote-definition {
3485         font-size: 0.9em;
3486         list-style-type: none;
3487         counter-increment: ordered-list;
3488         position: relative;
3489 }
3490 .footnote-definition p {
3491         font-size: inherit !important;
3492 }
3493 .footnote-definition::before {
3494         content: counter(ordered-list) ".";
3495         position: absolute;
3496         left: -2.5em;
3497         font-weight: bold;
3498         text-align: right;
3499         width: 2em;
3500 }
3501
3502 /*= LW Docs footnotes =*/
3503
3504 .footnote-item {
3505         display: flex;
3506 }
3507
3508 .footnote-item > :not(.nothing) {
3509         margin: 0 0.2em;
3510 }
3511
3512 .footnote-item > :first-child {
3513         margin-left: -0.2em;
3514         margin-right: 0;
3515 }
3516
3517 .footnote-back-link a:not(.nothing) {
3518         font-size: 0;
3519         text-decoration: none;
3520         border: none;
3521 }
3522
3523 .footnote-back-link a:not(.nothing):hover {
3524         text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #00e;
3525         border: none;
3526         text-decoration: none;
3527 }
3528
3529 .footnote-back-link a::after {
3530         content: '\F106';
3531         font-family: Font Awesome;
3532         font-size: 1rem;
3533         padding: 0.2em;
3534         text-decoration: none;
3535         font-weight: bold;
3536 }
3537
3538 .footnote-content > :first-child {
3539         margin-top: 0;
3540 }
3541
3542 /*********/
3543 /* LISTS */
3544 /*********/
3545
3546 li {
3547         margin-bottom: 0.5em;
3548 }
3549
3550 .body-text ol p,
3551 .body-text ul p {
3552         margin: 0.5em 0;
3553 }
3554
3555 .body-text ol {
3556         list-style: none;
3557         padding: 0;
3558         counter-reset: ol;
3559 }
3560 .body-text ol > li {
3561         position: relative;
3562         counter-increment: ol;
3563         padding: 0 0 0 2.5em;
3564         margin: 0.25em 0 0 0;
3565 }
3566 .body-text ol > li::before {
3567         content: counter(ol) ".";
3568         position: absolute;
3569         width: 2em;
3570         text-align: right;
3571         left: 0;
3572 }
3573 .body-text ul {
3574         list-style: none;
3575         padding: 0;
3576 }
3577 .body-text ul:not(.contents-list) > li:empty {
3578         padding-bottom: 1.25em;
3579 }
3580 .body-text ul:not(.contents-list) > li {
3581         position: relative;
3582         padding: 0 0 0 1.75em;
3583         margin: 0.25em 0 0 0;
3584 }
3585 .body-text ul:not(.contents-list) > li ul > li {
3586         padding: 0 0 0 2em;
3587 }
3588 .body-text ul:not(.contents-list) > li::before {
3589         content: "•";
3590         position: absolute;
3591         width: 1.25em;
3592         text-align: right;
3593         left: 0;
3594 }
3595 .body-text ul:not(.contents-list) > li ul > li::before {
3596         width: 1.5em;
3597 }
3598 .body-text li > ul:first-child > li {
3599         padding-left: 0;
3600 }
3601 .body-text li > ul:first-child > li::before {
3602         content: none;
3603 }
3604
3605 /**************/
3606 /* ERROR PAGE */
3607 /**************/
3608
3609 .error-retry-form {
3610         margin: 0.5em 0;
3611 }
3612
3613 .error-retry-form input[type="submit"] {
3614         border: 1px solid #aaa;
3615         font-weight: bold;
3616         font-size: 1.125rem;
3617         padding: 0.5em 1.25em;
3618 }
3619
3620 /**************/
3621 /* ABOUT PAGE */
3622 /**************/
3623
3624 #content.about-page .contents {
3625         margin-top: 0.25em;
3626 }
3627 #content.about-page .accesskey-table {
3628         border-collapse: collapse;
3629         margin: auto;
3630 }
3631 #content.about-page .accesskey-table th,
3632 #content.about-page .accesskey-table td {
3633         padding: 2px 6px;
3634 }
3635 #content.about-page .accesskey-table td:first-child {
3636         padding-right: 1.5em;
3637 }
3638 #content.about-page .accesskey-table td:last-child {
3639         text-align: center;
3640         font-family: Inconsolata, Menlo, monospace;
3641 }
3642 #content.about-page h3:nth-of-type(n+2) {
3643         clear: both;
3644 }
3645
3646 /******************/
3647 /* IMAGES OVERLAY */
3648 /******************/
3649
3650 #images-overlay + #content .post-body img {
3651         visibility: hidden;
3652 }
3653
3654 #images-overlay div {
3655         position: absolute;
3656 }
3657 #images-overlay div::after {
3658         content: "Click to enlarge";
3659         display: block;
3660         position: absolute;
3661         margin: auto;
3662         left: 0;
3663         right: 0;
3664         bottom: 10px;
3665         padding: 6px 10px;
3666         font-size: 1.25rem;
3667         background-color: rgba(0,0,0,0.6);
3668         color: #fff;
3669         border-radius: 5px;
3670         opacity: 0.0;
3671         transition: opacity 0.15s ease;
3672         pointer-events: none;
3673 }
3674 <?php fit_content("#images-overlay div::after"); ?>
3675 #images-overlay div:hover::after {
3676         opacity: 1.0;
3677 }
3678
3679 #images-overlay img {
3680         width: 100%;
3681 }
3682
3683 /***************/
3684 /* IMAGE FOCUS */
3685 /***************/
3686
3687 /*=--------------=*/
3688 /*= Hover styles =*/
3689 /*=--------------=*/
3690
3691 #content img:hover,
3692 #images-overlay img:hover {
3693         filter: drop-shadow(0 0 3px #777);
3694         cursor: zoom-in;
3695 }
3696 #content img:active,
3697 #images-overlay img:active {
3698         transform: scale(0.975);
3699 }
3700
3701 /*=---------=*/
3702 /*= Overlay =*/
3703 /*=---------=*/
3704
3705 #image-focus-overlay {
3706         position: fixed;
3707         top: 0;
3708         right: 0;
3709         bottom: 0;
3710         left: 0;
3711         z-index: 2;
3712         display: none;
3713         cursor: zoom-out;
3714 }
3715 #image-focus-overlay::before {
3716         content: "";
3717         display: block;
3718         position: absolute;
3719         top: 0;
3720         right: 0;
3721         bottom: 0;
3722         left: 0;
3723         background-color: #000;
3724         opacity: 0.5;
3725         z-index: -1;
3726 }
3727 #image-focus-overlay.engaged {
3728         display: initial;
3729 }
3730
3731 #image-focus-overlay img {
3732         margin: auto;
3733         position: absolute;
3734         left: 50%;
3735         top: 50%;
3736         transform: translateX(-50%) translateY(-50%);
3737 }
3738
3739 /*=-------------------=*/
3740 /*= Single-image mode =*/
3741 /*=-------------------=*/
3742
3743 #image-focus-overlay:not(.slideshow) .image-number,
3744 #image-focus-overlay:not(.slideshow) .slideshow-buttons {
3745         visibility: hidden;
3746 }
3747
3748 /*=---------=*/
3749 /*= Caption =*/
3750 /*=---------=*/
3751
3752 #image-focus-overlay .caption {
3753         position: absolute;
3754         bottom: 0.75em;
3755         background-color: rgba(0,0,0,0.7);
3756         left: 9em;
3757         right: 9em;
3758         margin: auto;
3759         max-width: calc(100% - 18em);
3760         text-align: center;
3761         font-size: 1.375em;
3762         border-radius: 8px;
3763         z-index: 1;
3764         transition:
3765                 bottom 0.2s ease;
3766 }
3767 <?php fit_content("#image-focus-overlay .caption"); ?>
3768 #image-focus-overlay .caption.hidden {
3769         bottom: -5em;
3770         transition:
3771                 bottom 0.5s ease;
3772 }
3773
3774 #image-focus-overlay .caption p {
3775         margin: 1em 1.25em;
3776         color: #fff;
3777 }
3778
3779 #image-focus-overlay .caption:not(:empty)::before {
3780         content: "";
3781         display: block;
3782         position: absolute;
3783         width: 100vw;
3784         height: calc(100% + 1.5em);
3785         z-index: -1;
3786         top: -0.75em;
3787         left: calc(-50vw + 50%);
3788
3789 }
3790
3791 /*=--------------=*/
3792 /*= Help overlay =*/
3793 /*=--------------=*/
3794
3795 #image-focus-overlay .help-overlay {
3796         position: absolute;
3797         display: flex;
3798         flex-flow: column;
3799         z-index: 2;
3800         font-size: 1.5rem;
3801         padding: 1em;
3802         border-radius: 10px;
3803         bottom: 1em;
3804         right: 1em;
3805         overflow: hidden;
3806         white-space: nowrap;
3807         color: transparent;
3808         cursor: default;
3809         visibility: hidden;
3810         transition:
3811                 visibility 1s ease,
3812                 color 1s ease,
3813                 background-color 1s ease,
3814                 bottom 0.3s ease;
3815 }
3816 #image-focus-overlay .help-overlay:hover {
3817         max-width: 24em;
3818         max-height: 14em;
3819         background-color: rgba(0,0,0,0.85);
3820         color: #fff;
3821         visibility: visible;
3822         transition:
3823                 visibility 0.2s ease 0.3s,
3824                 color 0.2s ease 0.3s,
3825                 background-color 0.2s ease 0.3s;
3826 }
3827
3828 #image-focus-overlay .help-overlay::after {
3829         content: "\F128";
3830         font-family: "Font Awesome", "Font Awesome 5 Free";
3831         font-weight: 900;
3832         font-size: 2rem;
3833         position: absolute;
3834         right: 0;
3835         bottom: 0;
3836         padding: 10px;
3837         color: #000;
3838         filter: drop-shadow(0 0 6px #fff);
3839         visibility: visible;
3840         opacity: 0.85;
3841         transition:
3842                 visibility 1s ease;
3843 }
3844 #image-focus-overlay .help-overlay:hover::after {
3845         visibility: hidden;
3846         transition:
3847                 visibility 0.2s ease 0.3s;
3848 }
3849
3850 #image-focus-overlay .help-overlay p {
3851         margin: 0;
3852         text-indent: -2em;
3853         padding-left: 2em;
3854         max-width: 100%;
3855         overflow: hidden;
3856 }
3857 #image-focus-overlay .help-overlay p + p {
3858         margin: 0.75em 0 0 0;
3859 }
3860 #image-focus-overlay .help-overlay.hidden {
3861         bottom: -2em;
3862 }
3863
3864 /*=--------------=*/
3865 /*= Slide number =*/
3866 /*=--------------=*/
3867
3868 #image-focus-overlay .image-number {
3869         position: absolute;
3870         z-index: 2;
3871         font-size: 1.75rem;
3872         left: 1em;
3873         bottom: 1em;
3874         font-weight: 600;
3875         text-shadow:
3876                 0 0 3px #fff,
3877                 0 0 5px #fff,
3878                 0 0 8px #fff,
3879                 0 0 13px #fff;
3880         width: 1.5em;
3881         text-align: right;
3882         white-space: nowrap;
3883         transition: bottom 0.3s ease;
3884 }
3885 #image-focus-overlay .image-number::before {
3886         content: "#";
3887         opacity: 0.3;
3888 }
3889 #image-focus-overlay .image-number::after {
3890         content: " of " attr(data-number-of-images);
3891         opacity: 0.3;
3892 }
3893 #image-focus-overlay .image-number:hover::before,
3894 #image-focus-overlay .image-number:hover::after {
3895         opacity: 1.0;
3896 }
3897 #image-focus-overlay .image-number.hidden {
3898         bottom: -1.25em;
3899 }
3900
3901 /*=-------------------=*/
3902 /*= Slideshow buttons =*/
3903 /*=-------------------=*/
3904
3905 #image-focus-overlay .slideshow-buttons {
3906         position: absolute;
3907         top: 0;
3908         left: 0;
3909         width: 100%;
3910         height: 100%;
3911         z-index: 1;
3912         display: flex;
3913         justify-content: space-between;
3914         pointer-events: none;
3915 }
3916 #image-focus-overlay .slideshow-buttons button {
3917         font-family: "Font Awesome", "Font Awesome 5 Free";
3918         font-weight: 900;
3919         font-size: 3rem;
3920         padding: 0.5em;
3921         color: #ddd;
3922         position: relative;
3923         left: 0;
3924         transition:
3925                 left 0.3s ease;
3926         pointer-events: auto;
3927 }
3928 #image-focus-overlay .slideshow-buttons button::selection {
3929         background-color: transparent;
3930 }
3931 @media only screen and (hover: hover) {
3932         #image-focus-overlay .slideshow-buttons button:hover {
3933                 background-color: rgba(0,0,0,0.1);
3934                 color: #777;
3935         }
3936 }
3937 #image-focus-overlay .slideshow-buttons button:active {
3938         transform: none;
3939         color: #888;
3940 }
3941 #image-focus-overlay .slideshow-buttons button:disabled {
3942         text-shadow: none;
3943         background-color: transparent;
3944         color: #ddd;
3945         cursor: default;
3946         opacity: 0.4;
3947 }
3948 #image-focus-overlay .slideshow-button.previous.hidden {
3949         left: -1.75em;
3950 }
3951 #image-focus-overlay .slideshow-button.next.hidden {
3952         left: 1.75em;
3953 }
3954
3955 /*=-----------------=*/
3956 /*= Background blur =*/
3957 /*=-----------------=*/
3958
3959 .blurred {
3960         filter: blur(3px);
3961 }
3962
3963 /**************************/
3964 /* QUALIFIED HYPERLINKING */
3965 /**************************/
3966
3967 #content.no-nav-bars {
3968         margin: 8px auto;
3969 }
3970 #content.no-nav-bars + #ui-elements-container > * {
3971         padding-top: 8px;
3972 }
3973
3974 #aux-about-link {
3975         position: fixed;
3976         top: 40px;
3977         left: calc((100% - 900px) / 2 - 69px);
3978         width: 1.5em;
3979         height: 1.5em;
3980         text-align: center;
3981         display: table;
3982 }
3983 #aux-about-link a {
3984         display: table-cell;
3985         width: 100%;
3986         vertical-align: middle;
3987         font-family: "Font Awesome", "Font Awesome 5 Free";
3988         font-weight: 900;
3989         font-size: 1.25rem;
3990         opacity: 0.4;
3991         z-index: 1;
3992 }
3993
3994 .qualified-linking {
3995         margin: 0;
3996         position: relative;
3997 }
3998 .qualified-linking input[type='checkbox'] {
3999         visibility: hidden;
4000         width: 0;
4001         height: 0;
4002         margin: 0;
4003 }
4004 .qualified-linking label {
4005         font-family: "Font Awesome", "Font Awesome 5 Free";
4006         font-weight: 900;
4007         font-size: 1rem;
4008         padding: 0 0.5em;
4009         display: inline-block;
4010         margin-left: 0.25em;
4011 }
4012 .qualified-linking label:hover {
4013         cursor: pointer;
4014 }
4015 .qualified-linking label:active span {
4016         display: inline-block;
4017         transform: scale(0.9);
4018 }
4019 .qualified-linking label::selection {
4020         background-color: transparent;
4021 }
4022
4023 .qualified-linking label::after {
4024         content: "";
4025         width: 100vw;
4026         height: 0;
4027         left: 0;
4028         top: 0;
4029         position: fixed;
4030         z-index: 1;
4031         cursor: default;
4032 }
4033 .qualified-linking input[type='checkbox']:checked + label::after {
4034         height: 100vh;
4035 }
4036
4037 .qualified-linking-toolbar {
4038         position: absolute;
4039         right: 0.25em;
4040         top: 110%;
4041         z-index: 1;
4042 }
4043 .qualified-linking input[type='checkbox'] ~ .qualified-linking-toolbar {
4044         display: none;
4045 }
4046 .qualified-linking input[type='checkbox']:checked ~ .qualified-linking-toolbar {
4047         display: block;
4048 }
4049 #qualified-linking-toolbar-toggle-checkbox-bottom ~ .qualified-linking-toolbar {
4050         top: unset;
4051         bottom: 125%;
4052 }
4053
4054 .qualified-linking-toolbar a {
4055         display: block;
4056         padding: 0 6px;
4057         margin: 4px;
4058 }
4059 .qualified-linking-toolbar a::selection {
4060         background-color: transparent;
4061 }
4062
4063 /*****************/
4064 /* HOVER PREVIEW */
4065 /*****************/
4066
4067 #preview-popup-toggle {
4068         position: absolute;
4069         right: -67px;
4070         bottom: 285px;
4071         cursor: pointer;
4072         color: var(--GW-toggle-widget-color, #888);
4073 }
4074 #preview-popup-toggle:hover {
4075         color: var(--GW-toggle-widget-hover-color, #444);
4076 }
4077
4078 #content.preview:not(not) {
4079         padding: 0;
4080 }
4081 #content.preview > .comment-thread {
4082         margin: 2px;
4083 }
4084 #content.preview.individual-thread-page > .comment-thread > .comment-item {
4085         border: none;
4086 }
4087 #content.preview.user-page .page-main-heading, #content.preview.user-page .user-stats {
4088         padding: 0 8px;
4089 }
4090 #content.preview.user-page .page-main-heading {
4091         margin-left: 8px;
4092 }
4093 #content.preview.not(not) .body-text {
4094         margin-left: 8px;
4095         margin-right: 8px;
4096 }
4097 #content.preview.user-page .user-stats {
4098         margin-right: 32px;
4099 }
4100 #content.preview.user-page .page-toolbar, #content.preview.user-page nav {
4101         display: none;
4102 }
4103 #content.preview button.vote {
4104         display: none;
4105 }
4106 #content.preview > h1.listing {
4107         max-height: unset;
4108 }
4109 #content.preview.user-page > .comment-thread {
4110         margin: 0.5em 0;
4111 }
4112 #content.preview > .post {
4113         margin: 0 18px;
4114 }
4115 #content.preview .post-title {
4116         margin-top: 0.5em;
4117 }
4118 #content.preview .post-meta {
4119         line-height: 1.0;
4120 }
4121 #content.preview .body-text {
4122         font-size: 1em;
4123 }
4124 #content.preview nav.contents,
4125 #content.preview .lw2-link {
4126         display: none;
4127 }
4128
4129 .preview-popup {
4130         position: fixed;
4131         transform-origin: top;
4132         top: 10%;
4133         right: 10%;
4134         max-width: 700px;
4135         z-index: 10001;
4136         background-color: #eee;
4137         border: 1px solid #ccc;
4138         box-shadow: 2px 6px 20px -4px #000;
4139         transition: height 0.2s ease, top 0.2s ease;
4140 }
4141 .popup-hide-button {
4142         position: fixed;
4143         top: 4px;
4144         right: 4px;
4145         color: #000;
4146         background-color: #fff;
4147         width: 28px;
4148         height: 28px;
4149         display: flex;
4150         font-family: "Font Awesome";
4151         font-size: 14px;
4152         line-height: 1;
4153         border: 1px solid #bbb;
4154         border-radius: 28px;
4155         align-items: center;
4156         justify-content: center;
4157         //padding-bottom: 2px;
4158         padding-left: 1.5px;
4159         font-family: "Font Awesome", "Font Awesome 5 Free";
4160         cursor: pointer;
4161 }
4162 .popup-hide-button:hover::before {
4163         content: "Turn off preview popups";
4164         display: block;
4165         position: absolute;
4166         width: max-content;
4167         right: 32px;
4168         color #000;
4169         background-color: #fff;
4170         border: 1px solid #eee;
4171         border-radius: 2px;
4172         padding: 4px;
4173 }
4174
4175 /********/
4176 /* MATH */
4177 /********/
4178
4179 .mathjax-block-container {
4180         display: block;
4181         overflow-y: hidden;
4182         border-radius: 6px;
4183         margin: 1em 0 1.5em 0;
4184 }
4185 .mathjax-inline-container {
4186         max-width: 100%;
4187         overflow-x: auto;
4188         overflow-y: hidden;
4189         position: relative;
4190         padding: 0 1px;
4191 }
4192 #content .mathjax-inline-container,
4193 #content .mathjax-inline-container .mjpage,
4194 #content .mathjax-inline-container .mjx-chtml,
4195 #content .mathjax-inline-container .mjx-math,
4196 #content .mathjax-inline-container .mjx-mrow {
4197     display: inline;
4198     white-space: normal;
4199 }
4200 .post .mathjax-inline-container {
4201         line-height: 1;
4202 }
4203 .comment .mathjax-inline-container {
4204         line-height: 1;
4205 }
4206 .mathjax-inline-container .mjx-chtml {
4207         padding: 0;
4208 }
4209
4210 /************/
4211 /* SPOILERS */
4212 /************/
4213
4214 .spoiler {
4215     color: #000;
4216     background-color: currentColor;
4217     transition: none;
4218     text-shadow: none;
4219         margin: 1em 0;
4220     box-shadow: 0 0 0 1px currentColor inset;
4221     overflow: auto;
4222 }
4223 .spoiler:not(:last-child) {
4224     margin-bottom: 0;
4225 }
4226 #content .spoiler * {
4227         color: inherit;
4228         border: none;
4229 }
4230 .spoiler:hover {
4231     color: unset;
4232     background-color: unset;
4233     text-shadow: unset;
4234     transition:
4235         color 0.1s ease-out 0.1s,
4236         background-color 0.1s ease-out 0.1s,
4237         text-shadow 0.1s ease-out 0.1s;
4238 }
4239 .spoiler::selection,
4240 .spoiler ::selection {
4241         color: #fff;
4242         background-color: #000;
4243 }
4244 .spoiler:not(:hover)::selection,
4245 .spoiler:not(:hover) ::selection {
4246     background-color: transparent;
4247 }
4248
4249 /*= Fix for LessWrong being weird =*/
4250
4251 .spoiler > p {
4252     padding: 0 7px;
4253 }
4254 .spoiler > p:first-child {
4255         margin-top: 0.25em;
4256 }
4257 .spoiler > p:last-child {
4258         margin-bottom: 0;
4259         padding-bottom: 0.25em;
4260 }
4261 .spoiler > p:hover ~ p {
4262         background-color: currentColor;
4263 }
4264 .spoiler > p + p {
4265         margin-top: -1em;
4266 }
4267 .spoiler > p:not(:first-child) {
4268         padding-top: 0.5em;
4269 }
4270 .spoiler > p:not(:last-child) {
4271         padding-bottom: 0.5em;
4272 }
4273
4274 .spoiler:not(:hover) pre,
4275 .spoiler:not(:hover) code {
4276         background-color: inherit;
4277         box-shadow: none;
4278 }
4279 #content .spoiler pre {
4280         border-color: currentColor;
4281         border-style: solid;
4282         border-width: 0 1px;
4283         border-radius: 0;
4284 }
4285
4286 /*******************/
4287 /* PAGE LIST INDEX */
4288 /*******************/
4289
4290 .page-list-index {
4291         margin: 1em 30px;
4292         line-height: 1.2;
4293 }
4294
4295 .page-list-index > p {
4296         font-weight: bold;
4297         font-size: 1.2em;
4298 }
4299
4300 .page-list-index > ul * {
4301         margin: 0;
4302 }
4303
4304 .page-list-index ul {
4305         padding-left: 1.5em;
4306 }
4307
4308 .page-list-index li {
4309         margin-top: 0.67em;
4310 }
4311
4312 .page-list-index li > a {
4313         display: block;
4314         font-size: 1.1em;
4315         font-weight: bold;
4316         margin: 0.33em 0;
4317 }
4318
4319 .page-list-index li > a:last-child {
4320         margin-bottom: 1em;
4321 }
4322
4323
4324 /*****************/
4325 /* USER MENTIONS */
4326 /*****************/
4327
4328 .textarea-container .autocomplete-container {
4329         position: absolute;
4330         overflow-y: auto;
4331         font-size: 1.125rem;
4332         cursor: default;
4333         backdrop-filter: blur(2px);
4334         width: 360px;
4335 }
4336 .textarea-container .autocomplete-container:empty {
4337         display: none;
4338 }
4339
4340 @media only screen and (min-width: 521px) {
4341         .textarea-container .autocomplete-container.inside {
4342                 max-height: calc(100% - 36px);
4343                 top: 32px;
4344         }
4345         .textarea-container .autocomplete-container.outside {
4346                 max-height: calc(100% - 28px);
4347                 top: 28px;
4348                 z-index: 10001;
4349         }
4350
4351         .textarea-container .autocomplete-container.inside.right {
4352                 right: 18px;
4353         }
4354         .textarea-container .autocomplete-container.inside.left {
4355                 left: 18px;
4356         }
4357         .textarea-container .autocomplete-container.outside.right {
4358                 left: calc(100% + 3px);
4359         }
4360         .textarea-container .autocomplete-container.outside.left {
4361                 right: calc(100% + 3px);
4362         }
4363
4364         head.content-width-normal + body .textarea-container .autocomplete-container.outside {
4365                 max-width: calc((100vw - (900px - 40px * 2)) / 2);
4366         }
4367         head.content-width-wide + body .textarea-container .autocomplete-container.outside {
4368                 max-width: calc((100vw - (1150px - 40px * 2)) / 2);
4369         }
4370         head.content-width-fluid + body .textarea-container .autocomplete-container.outside {
4371                 max-width: calc((300px + 40px * 2) / 2);
4372         }
4373 }
4374
4375 .textarea-container .autocomplete-container div {
4376         padding: 2px 8px 0 8px;
4377         white-space: nowrap;
4378         display: flex;
4379         justify-content: flex-end;
4380 }
4381
4382 .textarea-container .autocomplete-container div span.name {
4383         flex: 1 1 auto;
4384         width: calc(100% - 9em);
4385         overflow: hidden;
4386         text-overflow: ellipsis;
4387 }
4388 .textarea-container .autocomplete-container div span.name:hover {
4389         overflow: visible;
4390         z-index: 1;
4391 }
4392 .textarea-container .autocomplete-container div span.age,
4393 .textarea-container .autocomplete-container div span.karma {
4394         font-size: 0.9em;
4395         text-align: right;
4396 }
4397 .textarea-container .autocomplete-container div span.age {
4398         flex: 0 0 3em;
4399 }
4400 .textarea-container .autocomplete-container div span.karma {
4401         flex: 0 0 6em;
4402 }
4403
4404
4405 /***************/
4406 /* COLLECTIONS */
4407 /***************/
4408
4409 h2.sequence-chapter,
4410 h3.sequence-chapter,
4411 h4.sequence-chapter {
4412         text-align: center;
4413 }
4414 h2.sequence-chapter::before,
4415 h3.sequence-chapter::before,
4416 h4.sequence-chapter::before {
4417         display: block;
4418         margin: 1.5em 0 0.75em 0;
4419         font-style: normal;
4420         font-weight: normal;
4421         font-family: <?php echo $UI_font; ?>;
4422 }
4423 h2.sequence-chapter::before {
4424         content: '\25A3';
4425 }
4426 h3.sequence-chapter::before {
4427         content: '\25AA\2004\25AA';
4428 }
4429 h4.sequence-chapter::before {
4430         content: '\00B7\2004\00B7\2004\00B7';
4431 }
4432
4433
4434 /*******************/
4435 /* ALIGNMENT FORUM */
4436 /*******************/
4437
4438 #content.alignment-forum-index-page::after {
4439         content: "Alignment Forum";
4440         font-size: 1.5rem;
4441         margin: 0.375em 0 0 -0.375em;
4442         order: -1;
4443 }
4444
4445 /**********************/
4446 /* FOR NARROW SCREENS */
4447 /**********************/
4448
4449 @media only screen and (max-width: 1440px) {
4450         #hns-date-picker {
4451                 right: -81px;
4452                 padding: 8px 10px 10px 10px;
4453                 bottom: 62px;
4454                 display: none;
4455         }
4456         #hns-date-picker::before {
4457                 content: "";
4458                 position: absolute;
4459                 display: block;
4460                 z-index: -1;
4461                 height: calc(100% + 2px);
4462                 top: -1px;
4463                 left: -1px;
4464                 width: 50%;
4465         }
4466 }
4467 @media only screen and (max-width: 1160px) {
4468         #new-comment-nav-ui {
4469                 bottom: 180px;
4470                 right: -68px;
4471         }
4472         #hns-date-picker {
4473                 bottom: 200px;
4474                 right: -36px;
4475         }
4476         #hns-date-picker::before {
4477                 width: calc(100% - 35px);
4478         }
4479         #theme-selector button::before {
4480                 right: unset;
4481                 left: 100%;
4482         }
4483         #theme-selector:hover::after {
4484                 content: "";
4485                 display: block;
4486                 position: absolute;
4487                 width: calc(6em - 7px);
4488                 height: calc(100% + 2px);
4489                 top: 0;
4490                 left: calc(100% + 1px);
4491         }
4492         #anti-kibitzer-toggle {
4493                 bottom: 330px;
4494         }
4495 }
4496 @media only screen and (max-width: 1080px) {
4497         #width-selector {
4498                 right: -30px;
4499         }
4500         #width-selector button {
4501                 display: block;
4502         }
4503         #text-size-adjustment-ui {
4504                 top: 90px;
4505                 right: -30px;
4506         }
4507         #text-size-adjustment-ui button {
4508                 display: block;
4509                 position: relative;
4510         }
4511         #text-size-adjustment-ui button.increase {
4512                 bottom: 48px;
4513         }
4514         #text-size-adjustment-ui button.decrease {
4515                 top: 50px;
4516         }
4517         #theme-selector {
4518                 top: 46px;
4519                 left: -44px;
4520         }
4521         #theme-tweaker-toggle {
4522                 left: -44px;
4523                 top: 2px;
4524         }
4525         #theme-tweaker-toggle button {
4526                 height: 2em;
4527                 width: 2em;
4528                 padding: 7px;
4529         }
4530         #quick-nav-ui {
4531                 right: -54px;
4532         }
4533         #new-comment-nav-ui {
4534                 right: -55px;
4535         }
4536         #hns-date-picker {
4537                 right: -23px;
4538         }
4539         #hns-date-picker::before {
4540                 width: calc(100% - 22px);
4541         }
4542         #anti-kibitzer-toggle {
4543                 right: -54px;
4544         }
4545 }
4546 @media only screen and (max-width: 1040px) {
4547         #quick-nav-ui {
4548                 right: -49px;
4549         }
4550         #new-comment-nav-ui {
4551                 right: -50px;
4552         }
4553         #hns-date-picker {
4554                 right: -18px;
4555         }
4556         #hns-date-picker::before {
4557                 width: calc(100% - 17px);
4558         }
4559         #anti-kibitzer-toggle {
4560                 right: -50px;
4561         }
4562 }
4563 @media only screen and (max-width: 1020px) {
4564         #quick-nav-ui {
4565                 right: -20px;
4566         }
4567         #new-comment-nav-ui {
4568                 right: -21px;
4569         }
4570         #new-comment-nav-ui .new-comments-count::before {
4571                 content: "";
4572                 position: absolute;
4573                 width: 100%;
4574                 height: calc(100% + 45px);
4575                 z-index: -1;
4576                 left: 0;
4577                 top: -22px;
4578         }
4579         #hns-date-picker {
4580                 right: 19px;
4581         }
4582         #hns-date-picker::before {
4583                 width: 100%;
4584         }
4585         #anti-kibitzer-toggle {
4586                 right: -20px;
4587         }
4588 }
4589 @media only screen and (max-width: 1000px) {
4590         #theme-selector {
4591                 left: -17px;
4592                 top: 120px;
4593                 padding: 3px 0;
4594                 max-width: 32px;
4595         }
4596         #theme-selector button {
4597                 margin: 1px 4px;
4598         }
4599         #text-size-adjustment-ui {
4600                 top: 100px;
4601                 right: -12px;
4602         }
4603         @media not screen and (hover: none) {
4604                 #quick-nav-ui,
4605                 #new-comment-nav-ui,
4606                 #new-comment-nav-ui + #hns-date-picker,
4607                 #anti-kibitzer-toggle {
4608                         opacity: 0.4;
4609                 }
4610                 #quick-nav-ui:hover,
4611                 #new-comment-nav-ui:hover,
4612                 #new-comment-nav-ui + #hns-date-picker:hover,
4613                 #new-comment-nav-ui + #hns-date-picker:focus-within,
4614                 #new-comment-nav-ui:hover + #hns-date-picker,
4615                 #anti-kibitzer-toggle:hover {
4616                         opacity: 1.0;
4617                 }
4618         }
4619         #theme-tweaker-toggle {
4620                 top: 70px;
4621                 left: -21px;
4622         }
4623 }
4624
4625 /**************/
4626 /* PRINT VIEW */
4627 /**************/
4628
4629 @media only print {
4630         .nav-bar {
4631                 visibility: hidden;
4632                 max-height: 0;
4633                 overflow: hidden;
4634         }
4635         #ui-elements-container {
4636                 display: none;
4637         }
4638         #images-overlay {
4639                 display: none;
4640         }
4641         #images-overlay + #content .post-body img {
4642                 visibility: visible;
4643         }
4644         .comment-controls {
4645                 display: none;
4646         }
4647         #comments-sort-mode-selector {
4648                 display: none;
4649         }
4650         .comment-minimize-button {
4651                 display: none;
4652         }
4653         .post-meta .qualified-linking,
4654         .post-meta .lw2-link {
4655                 display: none;
4656         }
4657         .comment-meta .permalink,
4658         .comment-meta .lw2-link,
4659         .comment-meta .comment-parent-link {
4660                 display: none;
4661         }
4662         .new-comment::before {
4663                 display: none;
4664         }
4665         #content::before {
4666                 box-shadow: none;
4667         }
4668 }
4669
4670 <?php include("style_mobile_additions.css.php"); ?>
4671
4672 <?php if (isset($argv[2]) && preg_match("/\\.css(.php)?$/", $argv[2])) include($argv[2]); ?>
4673
4674 <?php
4675
4676 ## TO BE IMPLEMENTED:
4677 ## This will be specified via command-line argument; but for now, we just
4678 ## include all available additions (currently, only 'accordius').
4679
4680 $additions = [
4681         'accordius'
4682 ];
4683
4684 foreach ($additions as $addition) {
4685         $potential_includes = [
4686                 "style.css.php",
4687                 "style_mobile_additions.css.php"
4688         ];
4689         foreach ($potential_includes as $include) {
4690                 $include_path = "{$addition}/{$include}";
4691                 if (file_exists($include_path))
4692                         include ($include_path);
4693         }
4694 }
4695
4696 ?>