www/style.css.php

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