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