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