www/theme-brutalist.css.php

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