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