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