www/theme-brutalist.css.php

   1 <?php
   2         $UI_font = "'Anonymous Pro', 'GW-Symbols', monospace";
   3         $text_font = "'Input Sans', sans-serif"
   4 ?>
   5
   6 /*******************/
   7 /* BRUTALIST THEME */
   8 /*******************/
   9
  10 /*===========*/
  11 /* VARIABLES */
  12 /*===========*/
  13
  14 /*      Color scheme.
  15         */
  16 :root {
  17         --GW-toggle-widget-color: #999;
  18         --GW-toggle-widget-hover-color: #000;
  19         --GW-toggle-widget-shadow-color: rgba(255,255,255,0.5);
  20 }
  21
  22 /*======*/
  23 /* BASE */
  24 /*======*/
  25
  26 body {
  27         color: #000;
  28         background-color: #fff;
  29         font-family: <?php echo $UI_font; ?>;
  30 }
  31 #content {
  32         line-height: 1.55;
  33 }
  34 #content::before {
  35         background-color: #fff;
  36         box-shadow:
  37                 -1px 0 0 #000 inset,
  38                 0 2px 0 #000;
  39         border-style: solid;
  40         border-color: #000;
  41         border-width: 0 1px 0 2px;
  42 }
  43 #content.no-nav-bars::before {
  44         border-width: 2px;
  45         box-shadow: none;
  46 }
  47
  48 /*=========*/
  49 /* NAV BAR */
  50 /*=========*/
  51
  52 .nav-bar {
  53         justify-content: flex-start;
  54 }
  55 .nav-bar:nth-of-type(2) {
  56         border-bottom: 2px solid #000;
  57 }
  58 .nav-inner {
  59         font-size: 1.375em;
  60         font-weight: 600;
  61         border-style: solid;
  62         border-color: transparent;
  63         border-width: 0 2px;
  64 }
  65 .nav-bar-top:not(#primary-bar) .nav-inner {
  66         font-size: 1em;
  67 }
  68
  69 .nav-current:not(#nav-item-search) .nav-inner,
  70 .nav-bar a.nav-inner:hover {
  71         box-shadow:
  72                 0 0 0 4px #fff inset,
  73                 0 0 0 6px #000 inset;
  74 }
  75 .nav-bar a.nav-inner:active {
  76         box-shadow:
  77                 0 0 0 8px #fff inset,
  78                 0 0 0 10px #000 inset;
  79 }
  80
  81 #bottom-bar.decorative::before,
  82 #bottom-bar.decorative::after {
  83         content: "GW";
  84         display: block;
  85         text-align: center;
  86         padding: 0.25em 0 1em 0;
  87 }
  88 #bottom-bar.decorative::before {
  89         width: 100%;
  90         color: transparent;
  91         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
  92         background-repeat: repeat-x;
  93         background-position: center 35%;
  94         margin: 0 30px;
  95         filter: contrast(90%);
  96 }
  97 #bottom-bar.decorative::after {
  98         color: #d8d8d8;
  99         position: absolute;
 100         left: 0;
 101         right: 0;
 102         margin: auto;
 103         background-color: #fff;
 104         padding-right: 5px;
 105         padding-left: 6px;
 106 }
 107 <?php fit_content("#bottom-bar.decorative::after"); ?>
 108
 109 /* Accesskey hints */
 110
 111 .nav-inner::after {
 112         display: block;
 113         position: absolute;
 114         left: 8px;
 115         top: 3px;
 116         font-weight: 400;
 117         font-size: 0.7em;
 118         color: #d8d8d8;
 119 }
 120 .inactive-bar .nav-inner::after {
 121         color: #ccc;
 122 }
 123 .nav-inner:hover::after {
 124         color: #bbb;
 125 }
 126
 127 /* Search tab */
 128
 129 #nav-item-search button {
 130         border: none;
 131         font-weight: inherit;
 132 }
 133 #nav-item-search input::placeholder {
 134         color: #d00;
 135         font-weight: normal;
 136 }
 137
 138 /* Inbox indicator */
 139
 140 #inbox-indicator {
 141         text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff;
 142 }
 143
 144 /*==============*/
 145 /* PAGE TOOLBAR */
 146 /*==============*/
 147
 148 .page-toolbar button,
 149 .page-toolbar button:hover,
 150 .page-toolbar button:active,
 151 .page-toolbar button:focus {
 152         border: none;
 153         box-shadow: none;
 154 }
 155 .page-toolbar a:hover,
 156 .page-toolbar button:hover {
 157         text-decoration: dotted underline;
 158 }
 159 .page-toolbar a:active,
 160 .page-toolbar button:active {
 161         transform: scale(0.9);
 162 }
 163
 164 .rss::before {
 165         filter: grayscale(100%);
 166 }
 167
 168 /*==============*/
 169 /* SUBLEVEL NAV */
 170 /*==============*/
 171
 172 .sublevel-nav .sublevel-item {
 173         border-color: #000;
 174         border-style: solid;
 175         border-width: 1px 1px 1px 0;
 176 }
 177 .sublevel-nav .sublevel-item:first-child {
 178         border-width: 1px;
 179 }
 180 .sublevel-nav .sublevel-item:hover {
 181         box-shadow:
 182                 0 0 0 2px #fff inset,
 183                 0 0 0 3px #000 inset;
 184 }
 185 .sublevel-nav .sublevel-item:active {
 186         box-shadow:
 187                 0 0 0 4px #fff inset,
 188                 0 0 0 5px #000 inset;
 189         font-weight: normal;
 190 }
 191 .sublevel-nav .sublevel-item:disabled,
 192 .sublevel-nav span.sublevel-item {
 193         box-shadow:
 194                 0 0 0 2px #fff inset,
 195                 0 0 0 3px #000 inset;
 196         font-weight: bold;
 197         color: inherit;
 198 }
 199
 200 /*=====================*/
 201 /* SORT ORDER SELECTOR */
 202 /*=====================*/
 203
 204 .sublevel-nav.sort {
 205         padding: 18px 0 0 0;
 206         border: 2px solid #000;
 207 }
 208 .sublevel-nav.sort::before {
 209         text-transform: uppercase;
 210         font-weight: 600;
 211 }
 212 .sublevel-nav.sort .sublevel-item {
 213         padding: 7px 8px 6px 9px;
 214         text-transform: uppercase;
 215         border: none;
 216 }
 217
 218 /*================*/
 219 /* WIDTH SELECTOR */
 220 /*================*/
 221
 222 #width-selector button {
 223         box-shadow:
 224                 0 0 0 4px #fff inset,
 225                 0 0 0 5px #000 inset;
 226 }
 227 #width-selector button:hover,
 228 #width-selector button.selected {
 229         box-shadow:
 230                 0 0 0 1px #fff inset,
 231                 0 0 0 2px #000 inset,
 232                 0 0 0 4px #fff inset,
 233                 0 0 0 5px #000 inset;
 234 }
 235 #width-selector button::after {
 236         color: #000;
 237         font-size: 0.9em;
 238 }
 239
 240 /*================*/
 241 /* THEME SELECTOR */
 242 /*================*/
 243
 244 #theme-selector button {
 245         box-shadow:
 246                 0 0 0 5px #fff inset;
 247 }
 248 #theme-selector button:hover,
 249 #theme-selector button.selected {
 250         box-shadow:
 251                 0 0 0 2px #fff inset,
 252                 0 0 0 3px #000 inset,
 253                 0 0 0 5px #fff inset;
 254 }
 255
 256 #theme-selector button::before {
 257         font-size: 0.9375em;
 258         padding: 6px;
 259         width: 7em;
 260         color: #aaa;
 261         background-color: #fff;
 262 }
 263 #theme-selector button:hover::before,
 264 #theme-selector button.selected::before {
 265         color: #000;
 266 }
 267
 268 /*======================*/
 269 /* ANTI-KIBITZER TOGGLE */
 270 /*======================*/
 271
 272 #anti-kibitzer-toggle button:hover {
 273         box-shadow: none;
 274 }
 275 #anti-kibitzer-toggle button:hover::before,
 276 #anti-kibitzer-toggle button:hover::after {
 277         background-color: #000;
 278 }
 279
 280 /*======================*/
 281 /* PREVIEW POPUP TOGGLE */
 282 /*======================*/
 283
 284 #anti-kibitzer-toggle:hover, #preview-popup-toggle:hover {
 285         --GW-toggle-widget-shadow-color: transparent;
 286 }
 287
 288 /*====================*/
 289 /* DARK MODE SELECTOR */
 290 /*====================*/
 291
 292 #dark-mode-selector {
 293         outline: 1px solid #000;
 294 }
 295 #dark-mode-selector button {
 296         color: #000;
 297 }
 298 #dark-mode-selector button:hover {
 299         box-shadow: none;
 300         background-color: #ccc;
 301 }
 302 #dark-mode-selector button.selected {
 303         background-color: #000;
 304         color: #fff;
 305 }
 306 #dark-mode-selector button:not(.selected) + button:not(.selected) {
 307         box-shadow: 1px 0 0 0 #000 inset;
 308 }
 309 #dark-mode-selector button:disabled:hover {
 310         text-shadow: none;
 311 }
 312 #dark-mode-selector button::after {
 313         font-family: <?php echo $UI_font; ?>;
 314         color: #000;
 315         text-shadow: none;
 316 }
 317
 318 /*=========================*/
 319 /* TEXT SIZE ADJUSTMENT UI */
 320 /*=========================*/
 321
 322 #text-size-adjustment-ui button:hover,
 323 #text-size-adjustment-ui button:active,
 324 #text-size-adjustment-ui button:focus {
 325         box-shadow: none;
 326         color: #777;
 327 }
 328 #text-size-adjustment-ui::after {
 329         color: #000;
 330 }
 331
 332 /*======================*/
 333 /* THEME TWEAKER TOGGLE */
 334 /*======================*/
 335
 336 #theme-tweaker-toggle button:hover,
 337 #theme-tweaker-toggle button:active {
 338         box-shadow: none;
 339 }
 340
 341 /*=================*/
 342 /* QUICKNAV WIDGET */
 343 /*=================*/
 344
 345 #quick-nav-ui a {
 346         color: #000;
 347         box-shadow:
 348                 0 0 0 1px #fff,
 349                 0 0 0 3px #000;
 350 }
 351 #quick-nav-ui a[href='#bottom-bar'] {
 352         line-height: 1.8;
 353 }
 354 @media only screen and (hover: hover) {
 355         #quick-nav-ui a:hover {
 356                 box-shadow:
 357                         0 0 0 1px #fff inset,
 358                         0 0 0 3px #000 inset,
 359                         0 0 0 1px #fff,
 360                         0 0 0 3px #000;
 361         }
 362 }
 363 #quick-nav-ui a:active {
 364         box-shadow:
 365                 0 0 0 3px #fff inset,
 366                 0 0 0 5px #000 inset,
 367                 0 0 0 1px #fff,
 368                 0 0 0 3px #000;
 369 }
 370 #quick-nav-ui a[href='#comments'].no-comments {
 371         opacity: 0.4;
 372         color: #bbb;
 373 }
 374
 375 /*======================*/
 376 /* NEW COMMENT QUICKNAV */
 377 /*======================*/
 378
 379 #new-comment-nav-ui .new-comments-count {
 380         left: 2px;
 381 }
 382 #new-comment-nav-ui .new-comments-count::after {
 383         position: relative;
 384         right: 1px;
 385 }
 386 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
 387         color: #bbb;
 388 }
 389
 390 /*=================*/
 391 /* HNS DATE PICKER */
 392 /*=================*/
 393
 394 #hns-date-picker {
 395         bottom: 75px;
 396         text-indent: -16px;
 397 }
 398 #hns-date-picker span {
 399         color: #777;
 400         font-weight: 600;
 401         text-indent: 0px;
 402 }
 403 #hns-date-picker input {
 404         color: #666;
 405         width: 160px;
 406 }
 407 #hns-date-picker input:focus {
 408         color: #000;
 409 }
 410
 411 /*======================*/
 412 /* TEXT SIZE ADJUSTMENT */
 413 /*======================*/
 414
 415 /*=============================*/
 416 /* COMMENTS VIEW MODE SELECTOR */
 417 /*=============================*/
 418
 419 /*===============*/
 420 /* KEYBOARD HELP */
 421 /*===============*/
 422
 423 #keyboard-help-overlay {
 424         font-family: Concourse;
 425 }
 426
 427 #nav-item-about button.open-keyboard-help {
 428         border: none;
 429 }
 430
 431 /*==========*/
 432 /* ARCHIVES */
 433 /*==========*/
 434
 435 .archive-nav {
 436         border: 2px solid #000;
 437 }
 438 .archive-nav span[class^='archive-nav-item'],
 439 .archive-nav a:hover {
 440         font-weight: bold;
 441         box-shadow:
 442                 0 0 0 1px #fff inset,
 443                 0 0 0 3px #000 inset;
 444 }
 445 .archive-nav a:active {
 446         transform: none;
 447         box-shadow:
 448                 0 0 0 3px #fff inset,
 449                 0 0 0 5px #000 inset;
 450 }
 451
 452 /*==========*/
 453 /* LISTINGS */
 454 /*==========*/
 455
 456 h1.listing {
 457         margin: 0.7em 20px 0.1em 20px;
 458         max-width: calc(100% - 40px);
 459         font-family: <?php echo $UI_font; ?>, 'Font Awesome';
 460         font-size: 1.625rem;
 461 }
 462
 463 h1.listing .link-post-link {
 464         font-size: 0.7em;
 465         top: 6px;
 466         color: #fff;
 467         text-shadow:
 468                  0.5px 0.5px 0 #000,
 469                 -0.5px -0.5px 0 #000,
 470                  0 0 2px #000;
 471 }
 472
 473 @media only screen and (hover: hover) {
 474         h1.listing a:hover,
 475         h1.listing a:focus {
 476                 color: #777;
 477                 background-color: rgba(255,255,255,0.85);
 478         }
 479         h1.listing:focus-within::before {
 480                 color: #000;
 481                 left: -0.625em;
 482         }
 483         h1.listing .link-post-link:hover {
 484                 color: #fff;
 485                 text-shadow:
 486                          0.5px 0.5px 0 #000,
 487                         -0.5px -0.5px 0 #000,
 488                          0 0 2px #000,
 489                          0 0 3px #000;
 490         }
 491 }
 492
 493 h1.listing .edit-post-link {
 494         padding: 5px 3px 36px 0.5em;
 495         top: 0;
 496         right: 0;
 497 }
 498 h1.listing .edit-post-link:hover {
 499         text-decoration: none;
 500 }
 501 #content.user-page h1.listing .edit-post-link {
 502         background-color: #fff;
 503 }
 504
 505 /*===================*/
 506 /* TOP PAGINATION UI */
 507 /*===================*/
 508
 509 #top-nav-bar a:hover {
 510         color: #777;
 511 }
 512 #bottom-bar #nav-item-last a::before {
 513         margin-left: -2.3em;
 514         left: 3.9em;
 515 }
 516
 517 /*= Top pagination UI hover tooltips =*/
 518
 519 #top-nav-bar a::after,
 520 #bottom-bar a::after {
 521         color: #000;
 522 }
 523 #bottom-bar a:not([href='#top'])::after {
 524         background-color: #fff;
 525         left: 0;
 526         right: 0;
 527         margin: auto;
 528         padding: 1px 6px;
 529         bottom: 2px;
 530 }
 531 <?php fit_content("#bottom-bar a:not([href='#top'])::after"); ?>
 532
 533 /*======*/
 534 /* SPAM */
 535 /*======*/
 536
 537 h1.listing.spam {
 538         opacity: 0.1;
 539 }
 540 h1.listing.spam + .post-meta {
 541         opacity: 0.2;
 542 }
 543 h1.listing.spam:hover,
 544 h1.listing.spam + .post-meta:hover,
 545 h1.listing.spam:hover + .post-meta {
 546         opacity: 1.0;
 547 }
 548
 549 /*===================*/
 550 /* LISTING POST-META */
 551 /*===================*/
 552
 553 h1.listing + .post-meta > * {
 554         line-height: 1.5;
 555 }
 556 h1.listing + .post-meta .read-time {
 557         opacity: 0.5;
 558 }
 559
 560 /*============*/
 561 /* USER PAGES */
 562 /*============*/
 563
 564 #content.user-page h1.page-main-heading {
 565         border-bottom: 1px dotted #000;
 566 }
 567
 568 #content.user-page h1.listing,
 569 #content.user-page h1.listing + .post-meta {
 570         border-style: solid;
 571         border-color: #000;
 572 }
 573 #content.user-page h1.listing {
 574         padding: 0 6px;
 575         padding-top: 0.25em;
 576         border-width: 2px 2px 0 2px;
 577         margin: 1rem 0 0 0;
 578         max-width: 100%;
 579 }
 580 #content.own-user-page h1.listing,
 581 h1.listing.own-post-listing {
 582         padding-right: 36px;
 583 }
 584 @media only screen and (hover: hover) {
 585         #content.user-page h1.listing:focus-within::before {
 586                 left: -0.625em;
 587         }
 588 }
 589 #content.user-page h1.listing + .post-meta {
 590         padding: 0.75em 6px 0.5em 33px;
 591         border-width: 0 2px 2px 2px;
 592         margin: 0 0 1rem 0;
 593 }
 594 #content.user-page h1.listing + .post-meta .post-section::before {
 595         left: -2px;
 596         top: unset;
 597 }
 598
 599 #content.conversations-user-page h1.listing {
 600         padding: 8px 6px 8px 10px;
 601         font-size: 1.5rem;
 602 }
 603 #content.conversations-user-page h1.listing + .post-meta {
 604         padding: 10px 4px 6px 4px;
 605         margin: 0;
 606 }
 607
 608 .user-stats .karma-total {
 609         font-weight: bold;
 610 }
 611
 612 /*===============*/
 613 /* CONVERSATIONS */
 614 /*===============*/
 615
 616 #content.conversation-page textarea {
 617         border-top-width: 2px;
 618 }
 619
 620 /*============*/
 621 /* LOGIN PAGE */
 622 /*============*/
 623
 624 .login-container form input[type='submit'] {
 625         font-weight: bold;
 626 }
 627
 628 /* “Log in” form */
 629 #login-form {
 630     grid-template-columns: 5.75em 1fr;
 631 }
 632
 633 #login-form a:hover {
 634         text-decoration: dotted underline;
 635 }
 636 #login-form a:active {
 637         transform: scale(0.9);
 638 }
 639
 640 /* “Create account” form */
 641
 642 #signup-form {
 643     grid-template-columns: 10.5em 1fr;
 644         border: 2px solid #000;
 645 }
 646
 647 /* Log in tip */
 648
 649 .login-container .login-tip {
 650         border: 1px solid #000;
 651 }
 652
 653 /* Message box */
 654
 655 .error-box {
 656         border: 1px solid red;
 657         background-color: #faa;
 658 }
 659 .success-box {
 660         border: 1px solid green;
 661         background-color: #afa;
 662 }
 663
 664 /*=====================*/
 665 /* PASSWORD RESET PAGE */
 666 /*=====================*/
 667
 668 .reset-password-container label {
 669         width: 12em;
 670 }
 671 .reset-password-container input[type='submit'] {
 672         font-weight: bold;
 673 }
 674
 675 /*===================*/
 676 /* TABLE OF CONTENTS */
 677 /*===================*/
 678
 679 .contents {
 680         font-family: <?php echo $UI_font; ?>;
 681         border: 2px solid #000;
 682         background-color: #fff;
 683 }
 684 .contents-head {
 685         font-weight: bold;
 686         font-size: 1.125em;
 687 }
 688 .body-text .contents ul {
 689         font-size: 0.9375em;
 690 }
 691 .contents ul a {
 692         border-bottom: 2px dotted #999;
 693 }
 694 .body-text .contents li::before {
 695         color: #999;
 696         font-feature-settings: "tnum";
 697 }
 698
 699 .contents .toc-collapse-toggle-button {
 700         border: none;
 701         color: #ccc;
 702 }
 703 .contents .toc-collapse-toggle-button:hover {
 704         color: #aaa;
 705 }
 706
 707 /*==================*/
 708 /* POSTS & COMMENTS */
 709 /*==================*/
 710
 711 .body-text {
 712         font-family: <?php echo $text_font; ?>;
 713         font-weight: 200;
 714 }
 715 .body-text a {
 716         border-bottom: 2px dotted #000;
 717 }
 718 .body-text a:hover {
 719         color: #999;
 720 }
 721 .post-meta a:hover,
 722 .comment-meta a:hover {
 723         text-decoration: dotted underline;
 724 }
 725
 726 /*===========*/
 727 /* POST-META */
 728 /*===========*/
 729
 730 .post-meta .post-section::before,
 731 .comment-meta .alignment-forum {
 732         color: #fff;
 733         top: -1px;
 734         text-shadow:
 735                 1px 1px 0 #777,
 736                 0 1px 0 #777,
 737                 0 0 5px #777;
 738 }
 739 a.post-section:hover {
 740         text-decoration: none;
 741 }
 742 a.post-section:hover::before {
 743         color: #eee;
 744 }
 745 .post-meta .date {
 746         color: #888;
 747 }
 748 .bottom-post-meta {
 749         border-color: #000;
 750         border-style: dotted;
 751 }
 752
 753 /*============*/
 754 /* LINK POSTS */
 755 /*============*/
 756
 757 .post.link-post a.link-post-link {
 758         font-family: <?php echo $UI_font; ?>;
 759         font-weight: 600;
 760         font-size: 1.25em;
 761         border: none;
 762 }
 763 .post.link-post a.link-post-link::before {
 764         color: #fff;
 765         text-shadow:
 766                  0.5px 0.5px 0 #000,
 767                 -0.5px -0.5px 0 #000,
 768                  0 0 2px #000;
 769 }
 770 .post.link-post a.link-post-link:hover {
 771         color: inherit;
 772         border-bottom: 2px dotted #000;
 773 }
 774 .post.link-post a.link-post-link:hover::before {
 775         text-shadow:
 776                  0.5px 0.5px 0 #000,
 777                 -0.5px -0.5px 0 #000,
 778                  0 0 2px #000,
 779                  0 0 3px #000;
 780 }
 781 .post.link-post a.link-post-link:focus {
 782         color: #999;
 783         border-bottom: 2px dotted #999;
 784 }
 785
 786 /*=======*/
 787 /* POSTS */
 788 /*=======*/
 789
 790 .post-body {
 791         font-size: 1.125rem;
 792         margin-top: 1em;
 793 }
 794 h1.post-title {
 795         font-size: 2.25rem;
 796         margin-top: 1.375em;
 797 }
 798
 799 /*=================*/
 800 /* POST NAVIGATION */
 801 /*=================*/
 802
 803 .post-nav-links a:hover {
 804         box-shadow:
 805                 0 0 0 2px #fff inset,
 806                 0 0 0 4px #000 inset;
 807 }
 808 .post-nav-links a:active {
 809         box-shadow:
 810                 0 0 0 6px #fff inset,
 811                 0 0 0 8px #000 inset;
 812 }
 813
 814 .post-nav-label {
 815         opacity: 0.75;
 816 }
 817
 818 @media only screen and (max-width: 900px) {
 819         .sequence-title {
 820                 border-top: 1px dotted #000;
 821         }
 822         .post-nav.prev {
 823                 border-right: 1px dotted #000;
 824         }
 825         .post-nav.next {
 826                 border-left: 1px dotted #000;
 827         }
 828 }
 829
 830 .crosspost {
 831         border: 1px solid #000;
 832 }
 833
 834 /*==========*/
 835 /* COMMENTS */
 836 /*==========*/
 837
 838 #comments::before {
 839         border-top: 2px solid #000;
 840 }
 841 #content > .comment-thread .comment-meta a.date:focus,
 842 #content > .comment-thread .comment-meta a.permalink:focus {
 843         color: #999;
 844         outline: 2px dotted #999;
 845         position: relative;
 846         background-color: #fff;
 847         padding: 0 5px;
 848         left: -5px;
 849 }
 850 #content > .comment-thread .comment-meta a.date:focus + *,
 851 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
 852         margin-left: -10px;
 853 }
 854 .comment-item {
 855         border: 2px solid #000;
 856 }
 857
 858 .comment-body {
 859         font-size: 1rem;
 860         line-height: 1.5;
 861 }
 862
 863 /*================================*/
 864 /* DEEP COMMENT THREAD COLLAPSING */
 865 /*================================*/
 866
 867 .comment-item input[id^="expand"] + label::after {
 868         font-weight: 600;
 869 }
 870 .comment-item input[id^="expand"] + label:hover::after {
 871         color: #c00;
 872 }
 873 .comment-item input[id^="expand"] + label:active::after,
 874 .comment-item input[id^="expand"] + label:focus::after{
 875         color: #c00;
 876 }
 877 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
 878         border-width: 1px 0 0 0;
 879 }
 880
 881 /*==============*/
 882 /* COMMENT-META */
 883 /*==============*/
 884
 885 .comment-meta .author {
 886         font-weight: bold;
 887         font-size: 1.25em;
 888 }
 889 .comment-item .author:not(.redacted).original-poster::after {
 890         opacity: 0.6;
 891 }
 892
 893 .comment-item .voting-controls.active-controls::after,
 894 .comment-item .voting-controls .karma-value::after,
 895 .post .voting-controls.active-controls::after,
 896 .post .voting-controls .karma-value::after,
 897 .author::before {
 898         background-color: #fff;
 899         color: #000;
 900         box-shadow: 0 0 0 1px #000 inset;
 901 }
 902 .comment-item .voting-controls.active-controls::after,
 903 .post .voting-controls.active-controls::after {
 904         padding: 6px;
 905         bottom: -46px;
 906         max-width: unset;
 907         transform: translateX(-2px);
 908 }
 909 .comment-item .voting-controls .karma-value::after,
 910 .post .voting-controls .karma-value::after {
 911         padding: 2px 8px;
 912         top: -26px;
 913         min-width: 80px;
 914 }
 915
 916 /*====================*/
 917 /* ANTI-KIBITZER MODE */
 918 /*====================*/
 919
 920 .author.redacted,
 921 .inline-author.redacted {
 922         opacity: 0.5;
 923         font-weight: 400;
 924 }
 925
 926 .karma-value.redacted {
 927         opacity: 0.5;
 928 }
 929
 930 .link-post-domain.redacted {
 931         opacity: 0.3;
 932 }
 933
 934 /*===========================*/
 935 /* COMMENT THREAD NAVIGATION */
 936 /*===========================*/
 937
 938 div.comment-parent-link {
 939         font-weight: 600;
 940 }
 941 a.comment-parent-link {
 942         font-weight: 400;
 943 }
 944 a.comment-parent-link::after {
 945         display: none;
 946 }
 947 a.comment-parent-link::before {
 948         color: #bbb;
 949         padding: 4px 3px 0 2px;
 950 }
 951 a.comment-parent-link:hover::before {
 952         color: #999;
 953 }
 954
 955 div.comment-child-links {
 956         font-weight: 600;
 957 }
 958 div.comment-child-links a {
 959         font-weight: 400;
 960 }
 961 .comment-child-link::before {
 962         color: #aaa;
 963 }
 964
 965 .comment-item-highlight,
 966 .comment-item-highlight-faint {
 967         border: 2px solid #ccc;
 968 }
 969
 970 .comment-popup {
 971         border: 2px solid #000;
 972         background-color: #fff;
 973 }
 974 .comment-popup .comment-body {
 975         font-size: 0.9375rem;
 976 }
 977
 978 /*====================*/
 979 /* COMMENT PERMALINKS */
 980 /*====================*/
 981
 982 .comment-meta .permalink,
 983 .comment-meta .lw2-link,
 984 .individual-thread-page .comment-parent-link:empty {
 985         filter: grayscale(100%);
 986 }
 987
 988 /*=======================*/
 989 /* COMMENTS COMPACT VIEW */
 990 /*=======================*/
 991
 992 #comments-list-mode-selector button {
 993         box-shadow:
 994                 0 0 0 4px #fff inset,
 995                 0 0 0 5px #000 inset;
 996         border: none;
 997 }
 998 #comments-list-mode-selector button:hover,
 999 #comments-list-mode-selector button.selected {
1000         box-shadow:
1001                 0 0 0 1px #fff inset,
1002                 0 0 0 2px #000 inset,
1003                 0 0 0 4px #fff inset,
1004                 0 0 0 5px #000 inset;
1005 }
1006 #content.compact > .comment-thread .comment-item::after {
1007         background: linear-gradient(to right, transparent 0%, #fff 50%, #fff 100%);
1008 }
1009
1010 @media only screen and (hover: hover) {
1011         #content.compact > .comment-thread .comment-item:hover .comment,
1012         #content.compact > .comment-thread .comment-item.expanded .comment {
1013                 background-color: #fff;
1014                 outline: 3px solid #000;
1015         }
1016         #content.compact > .comment-thread .comment-item:hover .comment::before,
1017         #content.compact > .comment-thread .comment-item.expanded .comment::before {
1018                 background-color: #fff;
1019                 box-shadow:
1020                         0 0  3px #fff,
1021                         0 0  5px #fff,
1022                         0 0  7px #fff,
1023                         0 0 10px #fff,
1024                         0 0 20px #fff,
1025                         0 0 30px #fff,
1026                         0 0 40px #fff;
1027         }
1028 }
1029 @media only screen and (hover: none) {
1030         #content.compact > .comment-thread.expanded .comment-item .comment {
1031                 background-color: #fff;
1032                 outline: 3px solid #000;
1033         }
1034         #content.compact > .comment-thread.expanded .comment-item .comment::before {
1035                 background-color: #fff;
1036                 box-shadow:
1037                         0 0  3px #fff,
1038                         0 0  5px #fff,
1039                         0 0  7px #fff,
1040                         0 0 10px #fff,
1041                         0 0 20px #fff,
1042                         0 0 30px #fff,
1043                         0 0 40px #fff;
1044         }
1045 }
1046
1047 #content.user-page.compact > h1.listing {
1048         margin-top: 0.5rem;
1049 }
1050 #content.user-page.compact > h1.listing + .post-meta {
1051         margin-bottom: 0.5rem;
1052 }
1053
1054 /*===========================*/
1055 /* HIGHLIGHTING NEW COMMENTS */
1056 /*===========================*/
1057
1058 .new-comment {
1059         border: 2px dotted #000;
1060 }
1061 .new-comment::before {
1062         display: none;
1063 }
1064
1065 /*=================================*/
1066 /* COMMENT THREAD MINIMIZE BUTTONS */
1067 /*=================================*/
1068
1069 .comment-minimize-button {
1070         color: #ccc;
1071         font-family: Font Awesome, <?php echo $UI_font; ?>;
1072 }
1073 .comment-minimize-button:hover {
1074         color: #aaa;
1075 }
1076 .comment-minimize-button::after {
1077         font-size: 0.8125rem;
1078         top: 20px;
1079         left: 0.5px;
1080         color: #777;
1081 }
1082 .comment-minimize-button.maximized::after {
1083         color: #ccc;
1084 }
1085
1086 /*=================================*/
1087 /* INDIVIDUAL COMMENT THREAD PAGES */
1088 /*=================================*/
1089
1090 .individual-thread-page > h1 a:hover {
1091         color: #777;
1092         text-decoration: dotted underline;
1093 }
1094
1095 .individual-thread-page > .comments {
1096         border-top: 2px solid #000;
1097 }
1098
1099 /*==============*/
1100 /* VOTE BUTTONS */
1101 /*==============*/
1102
1103 .vote::before {
1104         content: "";
1105         border-radius: 2px;
1106         background-size: 17px 17px;
1107         width: 17px;
1108         height: 17px;
1109         display: inline-block;
1110         position: relative;
1111         top: 2.5px;
1112 }
1113 .vote:active {
1114         transform: none;
1115 }
1116
1117 .vote:hover {
1118         box-shadow: none;
1119 }
1120
1121 /**********/
1122 /*      States.
1123  */
1124
1125 /*      _ 1
1126  */
1127 .vote {
1128         filter: contrast(5%) brightness(182%);
1129 }
1130
1131 /*      _ 2
1132  */
1133 .vote:not(.none) {
1134         filter: drop-shadow(0 0 1px #fff);
1135 }
1136
1137 /*      1 _
1138  */
1139 .vote.two-temp::before {
1140         box-shadow:
1141                 0 0 0 3px #ccc,
1142                 0 0 0 4px transparent;
1143 }
1144
1145 /*      2 _
1146  */
1147 .vote.two::before {
1148         box-shadow:
1149                 0 0 0 3px #000,
1150                 0 0 0 4px transparent;
1151 }
1152
1153 /*      Disabled.
1154  */
1155 .vote:disabled {
1156         visibility: unset;
1157         filter: brightness(50%);
1158 }
1159
1160 /*********/
1161 /*      Icons.
1162  */
1163
1164 .karma .upvote::before {
1165         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/upvote-black-square-plus.svg")) ?>');
1166 }
1167 .karma .downvote::before {
1168         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/downvote-black-square-minus.svg")) ?>');
1169 }
1170
1171 .karma .upvote:disabled::before {
1172         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/upvote-disabled-grey-square-plus.svg")) ?>');
1173 }
1174 .karma .downvote:disabled::before {
1175         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/downvote-disabled-grey-square-minus.svg")) ?>');
1176 }
1177
1178 .agreement .upvote::before {
1179         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/agree-black-square-check.svg")) ?>');
1180 }
1181 .agreement .downvote::before {
1182         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/disagree-black-square-x.svg")) ?>');
1183 }
1184
1185 .agreement .upvote:disabled::before {
1186         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/agree-disabled-grey-square-check.svg")) ?>');
1187 }
1188 .agreement .downvote:disabled::before {
1189         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/disagree-disabled-grey-square-x.svg")) ?>');
1190 }
1191
1192 /*===========================*/
1193 /* COMMENTING AND POSTING UI */
1194 /*===========================*/
1195
1196 .comment-controls .cancel-comment-button {
1197         height: 28px;
1198         color: #fff;
1199         padding: 4px 6px 2px 6px;
1200 }
1201
1202 .posting-controls input[type='submit'],
1203 .comment-controls .cancel-comment-button,
1204 .new-comment-button {
1205         font-weight: 600;
1206 }
1207
1208 .comment-controls .delete-button::before,
1209 .comment-controls .retract-button::before,
1210 .comment-controls .unretract-button::before {
1211         opacity: 0.8;
1212 }
1213
1214 .posting-controls .action-button {
1215         border: none;
1216 }
1217 .posting-controls .action-button:hover,
1218 .posting-controls .action-button:active,
1219 .posting-controls .action-button:focus {
1220         box-shadow: none;
1221         text-decoration: dotted underline;
1222 }
1223 .posting-controls .action-button:active {
1224         transform: scale(0.9);
1225 }
1226
1227 .posting-controls textarea {
1228         font-family: <?php echo $text_font; ?>;
1229         font-weight: 200;
1230         font-size: 1rem;
1231         line-height: 1.4;
1232         color: #000;
1233         background-color: #fff;
1234         border-color: #000;
1235         border-width: 28px 2px 2px 2px;
1236 }
1237 .posting-controls textarea:focus {
1238         border-style: dotted;
1239         border-width: 28px 2px 2px 2px;
1240 }
1241 .posting-controls textarea::selection {
1242         background-color: #000;
1243         color: #fff;
1244 }
1245
1246 .posting-controls textarea::-webkit-scrollbar,
1247 .textarea-container .autocomplete-container::-webkit-scrollbar {
1248         width: 18px;
1249 }
1250 .posting-controls textarea::-webkit-scrollbar-track,
1251 .textarea-container .autocomplete-container::-webkit-scrollbar-track {
1252         background-color: #fff;
1253 }
1254 .posting-controls textarea::-webkit-scrollbar-thumb,
1255 .textarea-container .autocomplete-container::-webkit-scrollbar-thumb {
1256         background-color: #000;
1257         background-image: url('data:image/gif;base64,R0lGODlhBAAEAPAAMXd3d////ywAAAAABAAEAAACBgQShqgJBQA7');
1258         background-size: 2px 2px;
1259         box-shadow:
1260                 0 2px 0 1px #fff inset,
1261                 0 0 0 1px #fff inset,
1262                 0 2px 0 1.5px #777 inset,
1263                 0 0 0 1.5px #777 inset;
1264 }
1265 .textarea-container .autocomplete-container::-webkit-scrollbar-thumb {
1266         box-shadow:
1267                 0 0 0 1px #fff inset,
1268                 0 0 0 1.5px #777 inset;
1269 }
1270 .posting-controls textarea::-webkit-scrollbar-thumb:active {
1271         background-image: url('data:image/gif;base64,R0lGODlhBAAEAPAAMQAAAP///ywAAAAABAAEAAACBgQShqgJBQA7');
1272         box-shadow:
1273                 0 2px 0 1px #fff inset,
1274                 0 0 0 1px #fff inset,
1275                 0 2px 0 1.5px #000 inset,
1276                 0 0 0 1.5px #000 inset;
1277 }
1278
1279 /* GUIEdit buttons */
1280
1281 .guiedit-buttons-container {
1282         background-color: #000;
1283         box-shadow: 0 0 0 1px #000;
1284 }
1285
1286 .posting-controls.edit-existing-post .guiedit-buttons-container button,
1287 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
1288         color: #0c0;
1289 }
1290
1291 button.guiedit {
1292         font-family: Font Awesome, <?php echo $UI_font; ?>;
1293         color: #fff;
1294         border: none;
1295 }
1296 button.guiedit:hover,
1297 button.guiedit:active,
1298 button.guiedit:focus {
1299         box-shadow: none;
1300         color: #777;
1301 }
1302 button.guiedit::after {
1303         color: #fff;
1304         top: 2px;
1305         height: 25px;
1306         text-shadow: none;
1307 }
1308
1309 /* Markdown hints */
1310
1311 #markdown-hints {
1312         border: 2px solid #000;
1313         background-color: #fff;
1314 }
1315
1316 /*================*/
1317 /* EDIT POST FORM */
1318 /*================*/
1319
1320 #edit-post-form .post-meta-fields {
1321         grid-template-columns: 6em auto auto auto 1fr auto;
1322 }
1323 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1324         color: #000;
1325         border: 1px solid #000;
1326         top: 2px;
1327 }
1328 @media only screen and (hover:hover) {
1329         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1330         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1331                 box-shadow:
1332                         0 0 0 1px #fff inset,
1333                         0 0 0 2px #000 inset;
1334         }
1335 }
1336 #edit-post-form .post-meta-fields input[type='checkbox']:active + label::before,
1337 #edit-post-form .post-meta-fields input[type='checkbox']:checked:active + label::before {
1338         background-color: #fff;
1339         box-shadow:
1340                 0 0 0 3px #fff inset,
1341                 0 0 0 4px #000 inset;
1342 }
1343 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1344         content: "";
1345         background-color: #000;
1346         box-shadow:
1347                 0 0 0 4px #fff inset;
1348 }
1349 #edit-post-form input[type='radio'] + label {
1350         border-color: #000;
1351         color: #000;
1352 }
1353 #edit-post-form input[type='radio'][value='all'] + label {
1354         border-width: 1px;
1355 }
1356 #edit-post-form input[type='radio'][value='drafts'] + label {
1357 }
1358 #edit-post-form input[type='radio'] + label:hover,
1359 #edit-post-form input[type='radio']:focus + label {
1360         color: #000;
1361         box-shadow:
1362                 0 0 0 1px #fff inset,
1363                 0 0 0 2px #000 inset;
1364 }
1365 #edit-post-form input[type='radio']:active + label {
1366         box-shadow:
1367                 0 0 0 2px #fff inset,
1368                 0 0 0 3px #000 inset;
1369 }
1370 #edit-post-form input[type='radio']:focus + label {
1371         box-shadow:
1372                 0 0 0 1px #000;
1373 }
1374 #edit-post-form input[type='radio']:checked + label {
1375         border-color: #000;
1376         box-shadow:
1377                 0 0 0 1px #fff inset,
1378                 0 0 0 2px #000 inset;
1379         font-weight: bold;
1380 }
1381
1382 #edit-post-form #markdown-hints-checkbox + label {
1383         padding: 4px 0 0 6px;
1384 }
1385
1386 /*=======*/
1387 /* LINKS */
1388 /*=======*/
1389
1390 a:link,
1391 a:visited {
1392         color: inherit;
1393         text-decoration: none;
1394 }
1395
1396 /*=========*/
1397 /* BUTTONS */
1398 /*=========*/
1399
1400 button,
1401 input[type='submit'] {
1402         border: 2px solid #000;
1403         box-shadow: 0 0 0 1px transparent;
1404 }
1405 #ui-elements-container button {
1406         border: none;
1407 }
1408
1409 button:hover,
1410 input[type='submit']:hover,
1411 button:focus,
1412 input[type='submit']:focus {
1413         text-decoration: none;
1414         background-color: transparent;
1415         color: inherit;
1416         box-shadow:
1417                 0 0 0 2px #fff inset,
1418                 0 0 0 4px #000 inset,
1419                 0 0 0 1px transparent;
1420 }
1421 button:active,
1422 input[type='submit']:active {
1423         box-shadow:
1424                 0 0 0 4px #fff inset,
1425                 0 0 0 6px #000 inset,
1426                 0 0 0 1px transparent;
1427 }
1428
1429 /*==========*/
1430 /* HEADINGS */
1431 /*==========*/
1432
1433 .body-text h1,
1434 .body-text h2,
1435 .body-text h4 {
1436         font-family: <?php echo $UI_font; ?>;
1437 }
1438 .body-text h3,
1439 .body-text h5,
1440 .body-text h6 {
1441         font-weight: 600;
1442 }
1443 .body-text h6 {
1444         color: #555;
1445 }
1446 .body-text h1 {
1447         border-bottom: 2px solid #000;
1448 }
1449
1450 /*========*/
1451 /* QUOTES */
1452 /*========*/
1453
1454 blockquote {
1455         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/checkerboard_1px.gif")) ?>');
1456         background-size: 5px 2px;
1457         background-repeat: repeat-y;
1458         background-position: top left;
1459         padding-left: calc(0.5em + 5px);
1460 }
1461
1462 /*========*/
1463 /* IMAGES */
1464 /*========*/
1465
1466 #content img,
1467 #content figure.image img {
1468         border: 1px dotted #000;
1469 }
1470 #content figure img {
1471         border: 1px solid #000;
1472 }
1473 #content img[src$='.svg'],
1474 #content figure img[src$='.svg'] {
1475         border: none;
1476 }
1477 #content img[style^='float'] {
1478         border: 1px solid transparent;
1479 }
1480
1481 /*========*/
1482 /* TABLES */
1483 /*========*/
1484
1485 #content:not(.tag-index-page) .body-text table,
1486 #content:not(.tag-index-page) .body-text table th,
1487 #content:not(.tag-index-page) .body-text table td {
1488         border: 1px solid #000;
1489 }
1490
1491 /*======*/
1492 /* MISC */
1493 /*======*/
1494
1495 hr {
1496         border-bottom: 1px solid #999;
1497 }
1498
1499 code {
1500         border: 1px dotted #000;
1501 }
1502
1503 input[type='text'],
1504 input[type='search'],
1505 input[type='password'],
1506 textarea {
1507         background-color: transparent;
1508         border: 1px solid #000;
1509         color: #000;
1510 }
1511 input[type='text']:focus,
1512 input[type='search']:focus,
1513 input[type='password']:focus,
1514 textarea:focus {
1515         border: 1px dashed #000;
1516 }
1517
1518 select {
1519         color: #000;
1520 }
1521
1522 .frac sup {
1523         position: relative;
1524         left: -1px;
1525 }
1526 .frac sub {
1527         position: relative;
1528         left: -0.5px;
1529 }
1530
1531 /*============*/
1532 /* ABOUT PAGE */
1533 /*============*/
1534
1535 .about-page mark {
1536         background-color: #e6e6e6;
1537         text-decoration: none;
1538         box-shadow:
1539                 0 -1px 0 0 #000 inset,
1540                 0 -3px 1px -2px #000 inset;
1541         padding: 0 1px;
1542 }
1543
1544 #content.about-page .accesskey-table {
1545         font-family: <?php echo $UI_font; ?>;
1546         border-color: #ddd;
1547 }
1548
1549 #content.about-page img {
1550         border: 1px solid #000;
1551 }
1552
1553 /*========================*/
1554 /* QUALIFIED HYPERLINKING */
1555 /*========================*/
1556
1557 #aux-about-link a:hover {
1558         color: #777;
1559 }
1560
1561 .qualified-linking label:hover {
1562         color: #777;
1563 }
1564
1565 .qualified-linking-toolbar {
1566         border: 2px solid #000;
1567         background-color: #fff;
1568 }
1569 .qualified-linking-toolbar a {
1570 }
1571 .qualified-linking-toolbar a:hover {
1572         box-shadow: 0 0 0 2px #000;
1573 }
1574 .qualified-linking-toolbar a:active {
1575         box-shadow: 0 0 0 2px #000 inset;
1576 }
1577 .qualified-linking label::after {
1578         background-color: #fff;
1579         opacity: 0.8;
1580 }
1581
1582 /*======*/
1583 /* MATH */
1584 /*======*/
1585
1586 .mathjax-block-container::-webkit-scrollbar {
1587         height: 12px;
1588         background-color: #f6f6ff;
1589         border-radius: 6px;
1590         border: 1px solid #ddf;
1591 }
1592 .mathjax-block-container::-webkit-scrollbar-thumb {
1593         background-color: #dde;
1594         border-radius: 6px;
1595         border: 1px solid #cce;
1596 }
1597 .mathjax-inline-container::-webkit-scrollbar {
1598         height: 8px;
1599         background-color: #f6f6ff;
1600         border-radius: 4px;
1601         border: 1px solid #ddf;
1602 }
1603 .mathjax-inline-container::-webkit-scrollbar-thumb {
1604         background-color: #dde;
1605         border-radius: 4px;
1606         border: 1px solid #cce;
1607 }
1608
1609
1610 /*===============*/
1611 /* USER MENTIONS */
1612 /*===============*/
1613
1614 .textarea-container .autocomplete-container {
1615         background-color: rgba(255, 255, 255, 0.75);
1616         border: 2px solid #000;
1617 }
1618
1619 .textarea-container .autocomplete-container div.highlighted {
1620         background-color: #000;
1621         color: #fff;
1622 }
1623
1624 .textarea-container .autocomplete-container div:not(.highlighted):hover {
1625         background-color: rgba(0, 0, 0, 0.25);
1626 }
1627
1628 .textarea-container .autocomplete-container div span.age,
1629 .textarea-container .autocomplete-container div span.karma {
1630         color: #888;
1631 }
1632
1633
1634 /*=================*/
1635 /* ALIGNMENT FORUM */
1636 /*=================*/
1637
1638 #content.alignment-forum-index-page::before {
1639         background-color: #f2f6ff;
1640 }
1641 #content.alignment-forum-index-page::after {
1642         font-family: "Concourse SmallCaps";
1643         font-weight: 600;
1644         background-color: #7f85b2;
1645         color: transparent;
1646         -webkit-background-clip: text;
1647         text-shadow:
1648                 rgba(255,255,255,0.5) 0px 3px 3px;
1649 }
1650 @media only screen and (hover: hover) {
1651         #content.alignment-forum-index-page h1.listing a:hover,
1652         #content.alignment-forum-index-page h1.listing a:focus {
1653                 background-color: rgba(242,246,255,0.85);
1654         }
1655 }
1656
1657 /*====================*/
1658 /* FOR NARROW SCREENS */
1659 /*====================*/
1660
1661 @media only screen and (max-width: 1440px) {
1662         #hns-date-picker {
1663                 right: -70px;
1664                 bottom: 64px;
1665                 background-color: #fff;
1666                 opacity: 1.0;
1667         }
1668         #hns-date-picker::before {
1669                 width: 56%;
1670                 border: 2px solid #000;
1671                 box-shadow: 0 0 0 1px #000;
1672         }
1673 }
1674 @media only screen and (max-width: 1160px) {
1675         #hns-date-picker {
1676                 bottom: 203px;
1677                 right: -24px;
1678         }
1679         #hns-date-picker::before {
1680                 width: 85%;
1681         }
1682         #theme-selector,
1683         #quick-nav-ui,
1684         #new-comment-nav-ui,
1685         #new-comment-nav-ui + #hns-date-picker,
1686         #theme-tweaker-toggle button,
1687         #text-size-adjustment-ui,
1688         #anti-kibitzer-toggle {
1689                 opacity: 1.0;
1690         }
1691         #theme-selector {
1692                 background-color: #fff;
1693                 border: 1px solid #000;
1694         }
1695         #theme-selector:hover::after {
1696                 width: calc(6em + 6px);
1697                 height: calc(100% - 5px);
1698                 top: 3px;
1699                 left: 100%;
1700         }
1701         #text-size-adjustment-ui {
1702                 background-color: #fff;
1703                 box-shadow: 0 0 0 1px #000;
1704                 padding: 2px 0 4px 0;
1705         }
1706         #theme-tweaker-toggle {
1707                 left: -19px;
1708         }
1709         #theme-tweaker-toggle button {
1710                 background-color: #fff;
1711                 box-shadow: none;
1712                 border: 1px solid #000;
1713         }
1714         #theme-tweaker-toggle button:hover {
1715                 color: #777;
1716         }
1717 }
1718 @media only screen and (max-width: 1080px) {
1719         #theme-tweaker-toggle button {
1720                 border: 1px solid #999;
1721                 box-shadow:
1722                         0 0 10px #999 inset,
1723                         0 0 0 1px transparent;
1724                 transform: scale(0.8);
1725         }
1726         #hns-date-picker {
1727                 right: -14px;
1728         }
1729         #hns-date-picker::before {
1730                 width: 92%;
1731         }
1732 }
1733 @media only screen and (max-width: 1040px) {
1734         #hns-date-picker {
1735                 right: -8px;
1736         }
1737         #hns-date-picker::before {
1738                 width: 94%;
1739         }
1740 }
1741 @media only screen and (max-width: 1020px) {
1742         #hns-date-picker {
1743                 right: 19px;
1744         }
1745         #hns-date-picker::before {
1746                 width: 100%;
1747         }
1748         #quick-nav-ui {
1749                 background-color: #fff;
1750                 box-shadow: 0 9px 0 0px #fff;
1751         }
1752         #new-comment-nav-ui .new-comments-count::before {
1753                 background-color: #fff;
1754                 box-shadow:
1755                         0 0 0 2px #000,
1756                         0 0 0 10px #fff;
1757         }
1758         #anti-kibitzer-toggle {
1759                 background-color: #fff;
1760                 box-shadow:
1761                         0 0 0 2px #000,
1762                         0 0 0 10px #fff;
1763         }
1764 }
1765
1766 /*========*/
1767 /* MOBILE */
1768 /*========*/
1769
1770 /*******************************************/
1771 @media only screen and (max-width: 1160px) {
1772 /*******************************************/
1773
1774         #ui-elements-container > div[id$='-ui-toggle'] button,
1775         #theme-selector .theme-selector-close-button  {
1776                 color: #000;
1777                 opacity: 1.0;
1778         }
1779         #appearance-adjust-ui-toggle button,
1780         #post-nav-ui-toggle button {
1781                 background-color: #fff;
1782                 box-shadow:
1783                         0 0 0 2px #fff,
1784                         0 0 0 2px #000 inset;
1785         }
1786
1787         #theme-selector {
1788                 background-color: #fff;
1789                 box-shadow:
1790                         0 0 0 1px #000,
1791                         0 0 0 7px #fff;
1792         }
1793         #theme-selector::before {
1794                 color: #000;
1795         }
1796         #theme-selector button {
1797                 background-color: #fff;
1798                 box-shadow:
1799                         0 0 0 1px #fff inset,
1800                         0 0 0 3px #000 inset,
1801                         0 0 0 5px #fff inset;
1802         }
1803         #theme-selector button::after {
1804                 color: #000;
1805                 max-width: calc(100% - 3.5em);
1806                 overflow: hidden;
1807                 text-overflow: ellipsis;
1808                 padding-left: 1px;
1809         }
1810         #theme-selector button.selected {
1811                 box-shadow:
1812                         0 0 0 1px #fff inset,
1813                         0 0 0 3px #000 inset,
1814                         0 0 0 5px #fff inset,
1815                         0 0 0 7px #000 inset;
1816         }
1817         #theme-selector button.selected::after {
1818                 font-weight: bold;
1819         }
1820         #theme-selector .theme-selector-close-button {
1821                 font-weight: 400;
1822         }
1823
1824         #theme-selector .auxiliary-controls-container {
1825                 border-top-color: #000;
1826                 border-top-width: 2px;
1827                 margin: 8px 0 0 0;
1828                 padding: 8px;
1829                 padding-left: 8px;
1830                 padding-right: 8px;
1831         }
1832         #theme-selector .auxiliary-controls-container button {
1833                 border: 2px solid #000;
1834                 box-shadow: none;
1835                 border-radius: 0;
1836         }
1837         #theme-selector #theme-tweaker-toggle button {
1838                 color: #000;
1839         }
1840         #theme-selector #anti-kibitzer-toggle button {
1841                 border-radius: 0;
1842         }
1843         #theme-selector #anti-kibitzer-toggle button::before,
1844         #theme-selector #anti-kibitzer-toggle button::after {
1845                 background-color: #000;
1846                 color: #000;
1847         }
1848         #theme-selector #anti-kibitzer-toggle button::before {
1849                 font-size: 1.5em;
1850         }
1851         #theme-selector #dark-mode-selector {
1852                 border: 2px solid #000;
1853                 border-radius: 0;
1854         }
1855         #theme-selector #dark-mode-selector button.selected {
1856                 color: #000;
1857                 box-shadow:
1858                         0 0 0 2px #fff inset,
1859                         0 0 0 4px #000 inset;
1860         }
1861         #theme-selector #dark-mode-selector button.select-mode-light,
1862         #theme-selector #dark-mode-selector button.select-mode-dark {
1863                 font-weight: 900;
1864         }
1865         #theme-selector #dark-mode-selector button::after {
1866                 font-size: 0.875rem;
1867                 font-weight: 700;
1868         }
1869
1870         #quick-nav-ui {
1871                 background-color: #fff;
1872         }
1873         #quick-nav-ui a {
1874                 box-shadow:
1875                         0 0 0 2px #000;
1876         }
1877         #quick-nav-ui a::after,
1878         #new-comment-nav-ui::before {
1879                 font-family: <?php echo $UI_font; ?>;
1880                 font-weight: bold;
1881                 font-size: 0.5rem;
1882                 background-color: #fff;
1883         }
1884         #new-comment-nav-ui {
1885                 background-color: #fff;
1886                 border: 1px solid #000;
1887                 box-shadow: 0 0 0 1px #000;
1888         }
1889         #new-comment-nav-ui::before {
1890                 color: #000;
1891                 font-size: 0.6875rem;
1892                 font-weight: bold;
1893                 bottom: calc(100% + 2px);
1894                 padding: 2px 0 0 0;
1895         }
1896         #new-comment-nav-ui .new-comment-sequential-nav-button {
1897                 color: #000;
1898         }
1899         #new-comment-nav-ui .new-comments-count,
1900         #new-comment-nav-ui .new-comments-count::after {
1901                 color: #000;
1902         }
1903         #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
1904                 color: #bbb;
1905         }
1906         #new-comment-nav-ui button::after {
1907                 font-family: <?php echo $UI_font; ?>;
1908         }
1909
1910         #hns-date-picker {
1911                 bottom: 130px;
1912                 right: 52px;
1913                 text-indent: 0;
1914         }
1915
1916         /*****************************************/
1917         @media only screen and (max-width: 900px) {
1918         /*****************************************/
1919                 h1.listing {
1920                         line-height: 1;
1921                         margin-bottom: 6px;
1922                 }
1923                 h1.listing + .post-meta {
1924                         font-family: Input Sans Narrow;
1925                         font-weight: 300;
1926                 }
1927                 h1.listing + .post-meta .post-section {
1928                         overflow: visible;
1929                         order: 1;
1930                 }
1931                 h1.listing + .post-meta .post-section::before {
1932                         position: unset;
1933                 }
1934
1935                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
1936                         background-color: #000;
1937                         height: 2px;
1938                 }
1939
1940                 .comment-item .comment-item {
1941                         margin: 0.75em 2px 3px 6px;
1942                 }
1943                 .comment-item .comment-item + .comment-item {
1944                         margin: 1.5em 2px 3px 6px;
1945                 }
1946
1947                 a.comment-parent-link::before {
1948                         line-height: 1;
1949                 }
1950
1951                 #edit-post-form textarea {
1952                         min-height: calc(100vh - 400px)
1953                 }
1954                 #edit-post-form #markdown-hints {
1955                         position: fixed;
1956                         top: 74px;
1957                         left: 0;
1958                         right: 0;
1959                         max-width: 330px;
1960                         margin: auto;
1961                 }
1962                 #edit-post-form input[type='submit'] {
1963                         background-color: #fff;
1964                 }
1965
1966                 .comment-controls .cancel-comment-button {
1967                         max-width: 1.4em;
1968                 }
1969                 .comment-controls .cancel-comment-button::before {
1970                         opacity: 1.0;
1971                         position: relative;
1972                         top: -1px;
1973                 }
1974
1975                 .sublevel-nav .sublevel-item,
1976                 .sublevel-nav .sublevel-item:first-child,
1977                 .sublevel-nav .sublevel-item:last-child {
1978                         border-width: 1px;
1979                 }
1980         /*******************************************/
1981         } @media only screen and (max-width: 720px) {
1982         /*******************************************/
1983                 #content.conversations-user-page h1.listing + .post-meta .date {
1984                         margin: 0 0 0 1em;
1985                 }
1986         /*******************************************/
1987         } @media only screen and (max-width: 520px) {
1988         /*******************************************/
1989                 h1.listing {
1990                         font-size: 1.375rem;
1991                         margin: 18px 6px 4px 6px;
1992                         max-width: calc(100% - 12px);
1993                 }
1994                 h1.listing .link-post-link {
1995                         top: 4px;
1996                 }
1997                 h1.listing + .post-meta {
1998                         margin: 4px 6px;
1999                         font-family: Input Sans Condensed;
2000                         font-weight: 300;
2001                 }
2002                 h1.listing + .post-meta .post-section {
2003                         order: 1;
2004                         overflow: visible;
2005                 }
2006                 h1.listing + .post-meta .post-section::before {
2007                         position: relative;
2008                         top: -1px;
2009                         left: 0;
2010                 }
2011                 #content.conversations-user-page h1.listing {
2012                         font-size: 1.375rem;
2013                 }
2014                 #content.conversations-user-page h1.listing + .post-meta .conversation-participants {
2015                         margin: 0;
2016                 }
2017                 #content.conversations-user-page h1.listing + .post-meta .messages-count {
2018                         margin: 0 0 0 1em;
2019                 }
2020
2021                 #content.compact > .comment-thread .comment-item {
2022                         max-height: 110px;
2023                 }
2024
2025                 .textarea-container:focus-within textarea {
2026                         background-color: #fff;
2027                         border: none;
2028                         box-shadow:
2029                                 0 0 0 2px #000;
2030                 }
2031                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
2032                         padding: 5px 6px 6px 6px;
2033                         color: #fff;
2034                         font-weight: bold;
2035                         box-shadow: none;
2036                 }
2037                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
2038                         box-shadow:
2039                                 0 0 0 1px #000 inset,
2040                                 0 0 0 3px #fff inset,
2041                                 0 0 0 2px #fff;
2042                 }
2043                 .textarea-container:focus-within .guiedit-buttons-container {
2044                         border-top: 2px solid #000;
2045                 }
2046                 .posting-controls .textarea-container:focus-within .guiedit-buttons-container {
2047                         padding-bottom: 5px;
2048                 }
2049                 #content.conversation-page .textarea-container:focus-within::after {
2050                         background-color: #000;
2051                 }
2052                 .textarea-container:focus-within button.guiedit {
2053                         border: 1px solid transparent;
2054                 }
2055                 #markdown-hints,
2056                 #edit-post-form #markdown-hints {
2057                         border: 2px solid #000;
2058                         box-shadow:
2059                                 0 0 0 2px #fff,
2060                                 0 0 0 4px #000;
2061                 }
2062                 #markdown-hints::after {
2063                         color: #000;
2064                 }
2065
2066                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2067                         top: 0;
2068                 }
2069                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2070                         top: 1px;
2071                 }
2072         }
2073 }