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 /*==========*/
 790 /* COMMENTS */
 791 /*==========*/
 792
 793 #comments::before {
 794         border-top: 2px solid #000;
 795 }
 796 #content > .comment-thread .comment-meta a.date:focus,
 797 #content > .comment-thread .comment-meta a.permalink:focus {
 798         color: #999;
 799         outline: 2px dotted #999;
 800         position: relative;
 801         background-color: #fff;
 802         padding: 0 5px;
 803         left: -5px;
 804 }
 805 #content > .comment-thread .comment-meta a.date:focus + *,
 806 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
 807         margin-left: -10px;
 808 }
 809 .comment-item {
 810         border: 2px solid #000;
 811 }
 812
 813 .comment-body {
 814         font-size: 1rem;
 815         line-height: 1.5;
 816 }
 817
 818 /*================================*/
 819 /* DEEP COMMENT THREAD COLLAPSING */
 820 /*================================*/
 821
 822 .comment-item input[id^="expand"] + label::after {
 823         font-weight: 600;
 824 }
 825 .comment-item input[id^="expand"] + label:hover::after {
 826         color: #c00;
 827 }
 828 .comment-item input[id^="expand"] + label:active::after,
 829 .comment-item input[id^="expand"] + label:focus::after{
 830         color: #c00;
 831 }
 832 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
 833         border-width: 1px 0 0 0;
 834 }
 835
 836 /*==============*/
 837 /* COMMENT-META */
 838 /*==============*/
 839
 840 .comment-meta .author {
 841         font-weight: bold;
 842         font-size: 1.25em;
 843 }
 844 .comment-item .author:not(.redacted).original-poster::after {
 845         opacity: 0.6;
 846 }
 847
 848 .comment-item .voting-controls.active-controls::after,
 849 .comment-item .voting-controls .karma-value::after,
 850 .post .voting-controls.active-controls::after,
 851 .post .voting-controls .karma-value::after,
 852 .author::before {
 853         background-color: #fff;
 854         color: #000;
 855         box-shadow: 0 0 0 1px #000 inset;
 856 }
 857 .comment-item .voting-controls.active-controls::after,
 858 .post .voting-controls.active-controls::after {
 859         padding: 6px;
 860         bottom: -46px;
 861         max-width: unset;
 862         transform: translateX(-2px);
 863 }
 864 .comment-item .voting-controls .karma-value::after,
 865 .post .voting-controls .karma-value::after {
 866         padding: 2px 8px;
 867         top: -26px;
 868         min-width: 80px;
 869 }
 870
 871 /*====================*/
 872 /* ANTI-KIBITZER MODE */
 873 /*====================*/
 874
 875 .author.redacted,
 876 .inline-author.redacted {
 877         opacity: 0.5;
 878         font-weight: 400;
 879 }
 880
 881 .karma-value.redacted {
 882         opacity: 0.5;
 883 }
 884
 885 .link-post-domain.redacted {
 886         opacity: 0.3;
 887 }
 888
 889 /*===========================*/
 890 /* COMMENT THREAD NAVIGATION */
 891 /*===========================*/
 892
 893 div.comment-parent-link {
 894         font-weight: 600;
 895 }
 896 a.comment-parent-link {
 897         font-weight: 400;
 898 }
 899 a.comment-parent-link::after {
 900         display: none;
 901 }
 902 a.comment-parent-link::before {
 903         color: #bbb;
 904         padding: 4px 3px 0 2px;
 905 }
 906 a.comment-parent-link:hover::before {
 907         color: #999;
 908 }
 909
 910 div.comment-child-links {
 911         font-weight: 600;
 912 }
 913 div.comment-child-links a {
 914         font-weight: 400;
 915 }
 916 .comment-child-link::before {
 917         color: #aaa;
 918 }
 919
 920 .comment-item-highlight,
 921 .comment-item-highlight-faint {
 922         border: 2px solid #ccc;
 923 }
 924
 925 .comment-popup {
 926         border: 2px solid #000;
 927         background-color: #fff;
 928 }
 929 .comment-popup .comment-body {
 930         font-size: 0.9375rem;
 931 }
 932
 933 /*====================*/
 934 /* COMMENT PERMALINKS */
 935 /*====================*/
 936
 937 .comment-meta .permalink,
 938 .comment-meta .lw2-link,
 939 .individual-thread-page .comment-parent-link:empty {
 940         filter: grayscale(100%);
 941 }
 942
 943 /*=======================*/
 944 /* COMMENTS COMPACT VIEW */
 945 /*=======================*/
 946
 947 #comments-list-mode-selector button {
 948         box-shadow:
 949                 0 0 0 4px #fff inset,
 950                 0 0 0 5px #000 inset;
 951         border: none;
 952 }
 953 #comments-list-mode-selector button:hover,
 954 #comments-list-mode-selector button.selected {
 955         box-shadow:
 956                 0 0 0 1px #fff inset,
 957                 0 0 0 2px #000 inset,
 958                 0 0 0 4px #fff inset,
 959                 0 0 0 5px #000 inset;
 960 }
 961 #content.compact > .comment-thread .comment-item::after {
 962         background: linear-gradient(to right, transparent 0%, #fff 50%, #fff 100%);
 963 }
 964
 965 @media only screen and (hover: hover) {
 966         #content.compact > .comment-thread .comment-item:hover .comment,
 967         #content.compact > .comment-thread .comment-item.expanded .comment {
 968                 background-color: #fff;
 969                 outline: 3px solid #000;
 970         }
 971         #content.compact > .comment-thread .comment-item:hover .comment::before,
 972         #content.compact > .comment-thread .comment-item.expanded .comment::before {
 973                 background-color: #fff;
 974                 box-shadow:
 975                         0 0  3px #fff,
 976                         0 0  5px #fff,
 977                         0 0  7px #fff,
 978                         0 0 10px #fff,
 979                         0 0 20px #fff,
 980                         0 0 30px #fff,
 981                         0 0 40px #fff;
 982         }
 983 }
 984 @media only screen and (hover: none) {
 985         #content.compact > .comment-thread.expanded .comment-item .comment {
 986                 background-color: #fff;
 987                 outline: 3px solid #000;
 988         }
 989         #content.compact > .comment-thread.expanded .comment-item .comment::before {
 990                 background-color: #fff;
 991                 box-shadow:
 992                         0 0  3px #fff,
 993                         0 0  5px #fff,
 994                         0 0  7px #fff,
 995                         0 0 10px #fff,
 996                         0 0 20px #fff,
 997                         0 0 30px #fff,
 998                         0 0 40px #fff;
 999         }
1000 }
1001
1002 #content.user-page.compact > h1.listing {
1003         margin-top: 0.5rem;
1004 }
1005 #content.user-page.compact > h1.listing + .post-meta {
1006         margin-bottom: 0.5rem;
1007 }
1008
1009 /*===========================*/
1010 /* HIGHLIGHTING NEW COMMENTS */
1011 /*===========================*/
1012
1013 .new-comment {
1014         border: 2px dotted #000;
1015 }
1016 .new-comment::before {
1017         display: none;
1018 }
1019
1020 /*=================================*/
1021 /* COMMENT THREAD MINIMIZE BUTTONS */
1022 /*=================================*/
1023
1024 .comment-minimize-button {
1025         color: #ccc;
1026         font-family: Font Awesome, <?php echo $UI_font; ?>;
1027 }
1028 .comment-minimize-button:hover {
1029         color: #aaa;
1030 }
1031 .comment-minimize-button::after {
1032         font-size: 0.8125rem;
1033         top: 20px;
1034         left: 0.5px;
1035         color: #777;
1036 }
1037 .comment-minimize-button.maximized::after {
1038         color: #ccc;
1039 }
1040
1041 /*=================================*/
1042 /* INDIVIDUAL COMMENT THREAD PAGES */
1043 /*=================================*/
1044
1045 .individual-thread-page > h1 a:hover {
1046         color: #777;
1047         text-decoration: dotted underline;
1048 }
1049
1050 .individual-thread-page > .comments {
1051         border-top: 2px solid #000;
1052 }
1053
1054 /*==============*/
1055 /* VOTE BUTTONS */
1056 /*==============*/
1057
1058 .vote::before {
1059         content: "";
1060         border-radius: 2px;
1061         background-size: 17px 17px;
1062         width: 17px;
1063         height: 17px;
1064         display: inline-block;
1065         position: relative;
1066         top: 2.5px;
1067 }
1068 .vote:active {
1069         transform: none;
1070 }
1071
1072 .vote:hover {
1073         box-shadow: none;
1074 }
1075
1076 /**********/
1077 /*      States.
1078  */
1079
1080 /*      _ 1
1081  */
1082 .vote {
1083         filter: contrast(5%) brightness(182%);
1084 }
1085
1086 /*      _ 2
1087  */
1088 .vote:not(.none) {
1089         filter: drop-shadow(0 0 1px #fff);
1090 }
1091
1092 /*      1 _
1093  */
1094 .vote.two-temp::before {
1095         box-shadow:
1096                 0 0 0 3px #ccc,
1097                 0 0 0 4px transparent;
1098 }
1099
1100 /*      2 _
1101  */
1102 .vote.two::before {
1103         box-shadow:
1104                 0 0 0 3px #000,
1105                 0 0 0 4px transparent;
1106 }
1107
1108 /*      Disabled.
1109  */
1110 .vote:disabled {
1111         visibility: unset;
1112         filter: brightness(50%);
1113 }
1114
1115 /*********/
1116 /*      Icons.
1117  */
1118
1119 .karma .upvote::before {
1120         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/upvote-black-square-plus.svg")) ?>');
1121 }
1122 .karma .downvote::before {
1123         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/downvote-black-square-minus.svg")) ?>');
1124 }
1125
1126 .karma .upvote:disabled::before {
1127         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")) ?>');
1128 }
1129 .karma .downvote:disabled::before {
1130         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")) ?>');
1131 }
1132
1133 .agreement .upvote::before {
1134         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/agree-black-square-check.svg")) ?>');
1135 }
1136 .agreement .downvote::before {
1137         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/disagree-black-square-x.svg")) ?>');
1138 }
1139
1140 .agreement .upvote:disabled::before {
1141         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")) ?>');
1142 }
1143 .agreement .downvote:disabled::before {
1144         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")) ?>');
1145 }
1146
1147 /*===========================*/
1148 /* COMMENTING AND POSTING UI */
1149 /*===========================*/
1150
1151 .comment-controls .cancel-comment-button {
1152         height: 28px;
1153         color: #fff;
1154         padding: 4px 6px 2px 6px;
1155 }
1156
1157 .posting-controls input[type='submit'],
1158 .comment-controls .cancel-comment-button,
1159 .new-comment-button {
1160         font-weight: 600;
1161 }
1162
1163 .comment-controls .delete-button::before,
1164 .comment-controls .retract-button::before,
1165 .comment-controls .unretract-button::before {
1166         opacity: 0.8;
1167 }
1168
1169 .posting-controls .action-button {
1170         border: none;
1171 }
1172 .posting-controls .action-button:hover,
1173 .posting-controls .action-button:active,
1174 .posting-controls .action-button:focus {
1175         box-shadow: none;
1176         text-decoration: dotted underline;
1177 }
1178 .posting-controls .action-button:active {
1179         transform: scale(0.9);
1180 }
1181
1182 .posting-controls textarea {
1183         font-family: <?php echo $text_font; ?>;
1184         font-weight: 200;
1185         font-size: 1rem;
1186         line-height: 1.4;
1187         color: #000;
1188         background-color: #fff;
1189         border-color: #000;
1190         border-width: 28px 2px 2px 2px;
1191 }
1192 .posting-controls textarea:focus {
1193         border-style: dotted;
1194         border-width: 28px 2px 2px 2px;
1195 }
1196 .posting-controls textarea::selection {
1197         background-color: #000;
1198         color: #fff;
1199 }
1200 .posting-controls textarea::-webkit-scrollbar {
1201         width: 18px;
1202 }
1203 .posting-controls textarea::-webkit-scrollbar-track {
1204         background-color: #fff;
1205 }
1206 .posting-controls textarea::-webkit-scrollbar-thumb {
1207         background-color: #000;
1208         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/checkerboard2_1px_gray.gif")) ?>');
1209         background-size: 2px 2px;
1210         box-shadow:
1211                 0 2px 0 1px #fff inset,
1212                 0 0 0 1px #fff inset,
1213                 0 2px 0 1.5px #777 inset,
1214                 0 0 0 1.5px #777 inset;
1215 }
1216 .posting-controls textarea::-webkit-scrollbar-thumb:active {
1217         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/checkerboard2_1px.gif")) ?>');
1218         box-shadow:
1219                 0 2px 0 1px #fff inset,
1220                 0 0 0 1px #fff inset,
1221                 0 2px 0 1.5px #000 inset,
1222                 0 0 0 1.5px #000 inset;
1223 }
1224
1225 /* GUIEdit buttons */
1226
1227 .guiedit-buttons-container {
1228         background-color: #000;
1229         box-shadow: 0 0 0 1px #000;
1230 }
1231
1232 .posting-controls.edit-existing-post .guiedit-buttons-container button,
1233 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
1234         color: #0c0;
1235 }
1236
1237 button.guiedit {
1238         font-family: Font Awesome, <?php echo $UI_font; ?>;
1239         color: #fff;
1240         border: none;
1241 }
1242 button.guiedit:hover,
1243 button.guiedit:active,
1244 button.guiedit:focus {
1245         box-shadow: none;
1246         color: #777;
1247 }
1248 button.guiedit::after {
1249         color: #fff;
1250         top: 2px;
1251         height: 25px;
1252         text-shadow: none;
1253 }
1254
1255 /* Markdown hints */
1256
1257 #markdown-hints {
1258         border: 2px solid #000;
1259         background-color: #fff;
1260 }
1261
1262 /*================*/
1263 /* EDIT POST FORM */
1264 /*================*/
1265
1266 #edit-post-form .post-meta-fields {
1267         grid-template-columns: 6em auto auto auto 1fr auto;
1268 }
1269 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1270         color: #000;
1271         border: 1px solid #000;
1272         top: 2px;
1273 }
1274 @media only screen and (hover:hover) {
1275         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1276         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1277                 box-shadow:
1278                         0 0 0 1px #fff inset,
1279                         0 0 0 2px #000 inset;
1280         }
1281 }
1282 #edit-post-form .post-meta-fields input[type='checkbox']:active + label::before,
1283 #edit-post-form .post-meta-fields input[type='checkbox']:checked:active + label::before {
1284         background-color: #fff;
1285         box-shadow:
1286                 0 0 0 3px #fff inset,
1287                 0 0 0 4px #000 inset;
1288 }
1289 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1290         content: "";
1291         background-color: #000;
1292         box-shadow:
1293                 0 0 0 4px #fff inset;
1294 }
1295 #edit-post-form input[type='radio'] + label {
1296         border-color: #000;
1297         color: #000;
1298 }
1299 #edit-post-form input[type='radio'][value='all'] + label {
1300         border-width: 1px;
1301 }
1302 #edit-post-form input[type='radio'][value='drafts'] + label {
1303 }
1304 #edit-post-form input[type='radio'] + label:hover,
1305 #edit-post-form input[type='radio']:focus + label {
1306         color: #000;
1307         box-shadow:
1308                 0 0 0 1px #fff inset,
1309                 0 0 0 2px #000 inset;
1310 }
1311 #edit-post-form input[type='radio']:active + label {
1312         box-shadow:
1313                 0 0 0 2px #fff inset,
1314                 0 0 0 3px #000 inset;
1315 }
1316 #edit-post-form input[type='radio']:focus + label {
1317         box-shadow:
1318                 0 0 0 1px #000;
1319 }
1320 #edit-post-form input[type='radio']:checked + label {
1321         border-color: #000;
1322         box-shadow:
1323                 0 0 0 1px #fff inset,
1324                 0 0 0 2px #000 inset;
1325         font-weight: bold;
1326 }
1327
1328 #edit-post-form #markdown-hints-checkbox + label {
1329         padding: 4px 0 0 6px;
1330 }
1331
1332 /*=======*/
1333 /* LINKS */
1334 /*=======*/
1335
1336 a:link,
1337 a:visited {
1338         color: inherit;
1339         text-decoration: none;
1340 }
1341
1342 /*=========*/
1343 /* BUTTONS */
1344 /*=========*/
1345
1346 button,
1347 input[type='submit'] {
1348         border: 2px solid #000;
1349         box-shadow: 0 0 0 1px transparent;
1350 }
1351 #ui-elements-container button {
1352         border: none;
1353 }
1354
1355 button:hover,
1356 input[type='submit']:hover,
1357 button:focus,
1358 input[type='submit']:focus {
1359         text-decoration: none;
1360         background-color: transparent;
1361         color: inherit;
1362         box-shadow:
1363                 0 0 0 2px #fff inset,
1364                 0 0 0 4px #000 inset,
1365                 0 0 0 1px transparent;
1366 }
1367 button:active,
1368 input[type='submit']:active {
1369         box-shadow:
1370                 0 0 0 4px #fff inset,
1371                 0 0 0 6px #000 inset,
1372                 0 0 0 1px transparent;
1373 }
1374
1375 /*==========*/
1376 /* HEADINGS */
1377 /*==========*/
1378
1379 .body-text h1,
1380 .body-text h2,
1381 .body-text h4 {
1382         font-family: <?php echo $UI_font; ?>;
1383 }
1384 .body-text h3,
1385 .body-text h5,
1386 .body-text h6 {
1387         font-weight: 600;
1388 }
1389 .body-text h6 {
1390         color: #555;
1391 }
1392 .body-text h1 {
1393         border-bottom: 2px solid #000;
1394 }
1395
1396 /*========*/
1397 /* QUOTES */
1398 /*========*/
1399
1400 blockquote {
1401         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/checkerboard_1px.gif")) ?>');
1402         background-size: 5px 2px;
1403         background-repeat: repeat-y;
1404         background-position: top left;
1405         padding-left: calc(0.5em + 5px);
1406 }
1407
1408 /*========*/
1409 /* IMAGES */
1410 /*========*/
1411
1412 #content img,
1413 #content figure.image img {
1414         border: 1px dotted #000;
1415 }
1416 #content figure img {
1417         border: 1px solid #000;
1418 }
1419 #content img[src$='.svg'],
1420 #content figure img[src$='.svg'] {
1421         border: none;
1422 }
1423 #content img[style^='float'] {
1424         border: 1px solid transparent;
1425 }
1426
1427 /*========*/
1428 /* TABLES */
1429 /*========*/
1430
1431 #content:not(.tag-index-page) .body-text table,
1432 #content:not(.tag-index-page) .body-text table th,
1433 #content:not(.tag-index-page) .body-text table td {
1434         border: 1px solid #000;
1435 }
1436
1437 /*======*/
1438 /* MISC */
1439 /*======*/
1440
1441 hr {
1442         border-bottom: 1px solid #999;
1443 }
1444
1445 code {
1446         border: 1px dotted #000;
1447 }
1448
1449 input[type='text'],
1450 input[type='search'],
1451 input[type='password'],
1452 textarea {
1453         background-color: transparent;
1454         border: 1px solid #000;
1455         color: #000;
1456 }
1457 input[type='text']:focus,
1458 input[type='search']:focus,
1459 input[type='password']:focus,
1460 textarea:focus {
1461         border: 1px dashed #000;
1462 }
1463
1464 select {
1465         color: #000;
1466 }
1467
1468 .frac sup {
1469         position: relative;
1470         left: -1px;
1471 }
1472 .frac sub {
1473         position: relative;
1474         left: -0.5px;
1475 }
1476
1477 /*============*/
1478 /* ABOUT PAGE */
1479 /*============*/
1480
1481 .about-page mark {
1482         background-color: #e6e6e6;
1483         text-decoration: none;
1484         box-shadow:
1485                 0 -1px 0 0 #000 inset,
1486                 0 -3px 1px -2px #000 inset;
1487         padding: 0 1px;
1488 }
1489
1490 #content.about-page .accesskey-table {
1491         font-family: <?php echo $UI_font; ?>;
1492         border-color: #ddd;
1493 }
1494
1495 #content.about-page img {
1496         border: 1px solid #000;
1497 }
1498
1499 /*========================*/
1500 /* QUALIFIED HYPERLINKING */
1501 /*========================*/
1502
1503 #aux-about-link a:hover {
1504         color: #777;
1505 }
1506
1507 .qualified-linking label:hover {
1508         color: #777;
1509 }
1510
1511 .qualified-linking-toolbar {
1512         border: 2px solid #000;
1513         background-color: #fff;
1514 }
1515 .qualified-linking-toolbar a {
1516 }
1517 .qualified-linking-toolbar a:hover {
1518         box-shadow: 0 0 0 2px #000;
1519 }
1520 .qualified-linking-toolbar a:active {
1521         box-shadow: 0 0 0 2px #000 inset;
1522 }
1523 .qualified-linking label::after {
1524         background-color: #fff;
1525         opacity: 0.8;
1526 }
1527
1528 /*======*/
1529 /* MATH */
1530 /*======*/
1531
1532 .mathjax-block-container::-webkit-scrollbar {
1533         height: 12px;
1534         background-color: #f6f6ff;
1535         border-radius: 6px;
1536         border: 1px solid #ddf;
1537 }
1538 .mathjax-block-container::-webkit-scrollbar-thumb {
1539         background-color: #dde;
1540         border-radius: 6px;
1541         border: 1px solid #cce;
1542 }
1543 .mathjax-inline-container::-webkit-scrollbar {
1544         height: 8px;
1545         background-color: #f6f6ff;
1546         border-radius: 4px;
1547         border: 1px solid #ddf;
1548 }
1549 .mathjax-inline-container::-webkit-scrollbar-thumb {
1550         background-color: #dde;
1551         border-radius: 4px;
1552         border: 1px solid #cce;
1553 }
1554
1555 /*=================*/
1556 /* ALIGNMENT FORUM */
1557 /*=================*/
1558
1559 #content.alignment-forum-index-page::before {
1560         background-color: #f2f6ff;
1561 }
1562 #content.alignment-forum-index-page::after {
1563         font-family: "Concourse SmallCaps";
1564         font-weight: 600;
1565         background-color: #7f85b2;
1566         color: transparent;
1567         -webkit-background-clip: text;
1568         text-shadow:
1569                 rgba(255,255,255,0.5) 0px 3px 3px;
1570 }
1571 @media only screen and (hover: hover) {
1572         #content.alignment-forum-index-page h1.listing a:hover,
1573         #content.alignment-forum-index-page h1.listing a:focus {
1574                 background-color: rgba(242,246,255,0.85);
1575         }
1576 }
1577
1578 /*====================*/
1579 /* FOR NARROW SCREENS */
1580 /*====================*/
1581
1582 @media only screen and (max-width: 1440px) {
1583         #hns-date-picker {
1584                 right: -70px;
1585                 bottom: 64px;
1586                 background-color: #fff;
1587                 opacity: 1.0;
1588         }
1589         #hns-date-picker::before {
1590                 width: 56%;
1591                 border: 2px solid #000;
1592                 box-shadow: 0 0 0 1px #000;
1593         }
1594 }
1595 @media only screen and (max-width: 1160px) {
1596         #hns-date-picker {
1597                 bottom: 203px;
1598                 right: -24px;
1599         }
1600         #hns-date-picker::before {
1601                 width: 85%;
1602         }
1603         #theme-selector,
1604         #quick-nav-ui,
1605         #new-comment-nav-ui,
1606         #new-comment-nav-ui + #hns-date-picker,
1607         #theme-tweaker-toggle button,
1608         #text-size-adjustment-ui,
1609         #anti-kibitzer-toggle {
1610                 opacity: 1.0;
1611         }
1612         #theme-selector {
1613                 background-color: #fff;
1614                 border: 1px solid #000;
1615         }
1616         #theme-selector:hover::after {
1617                 width: calc(6em + 6px);
1618                 height: calc(100% - 5px);
1619                 top: 3px;
1620                 left: 100%;
1621         }
1622         #text-size-adjustment-ui {
1623                 background-color: #fff;
1624                 box-shadow: 0 0 0 1px #000;
1625                 padding: 2px 0 4px 0;
1626         }
1627         #theme-tweaker-toggle {
1628                 left: -19px;
1629         }
1630         #theme-tweaker-toggle button {
1631                 background-color: #fff;
1632                 box-shadow: none;
1633                 border: 1px solid #000;
1634         }
1635         #theme-tweaker-toggle button:hover {
1636                 color: #777;
1637         }
1638 }
1639 @media only screen and (max-width: 1080px) {
1640         #theme-tweaker-toggle button {
1641                 border: 1px solid #999;
1642                 box-shadow:
1643                         0 0 10px #999 inset,
1644                         0 0 0 1px transparent;
1645                 transform: scale(0.8);
1646         }
1647         #hns-date-picker {
1648                 right: -14px;
1649         }
1650         #hns-date-picker::before {
1651                 width: 92%;
1652         }
1653 }
1654 @media only screen and (max-width: 1040px) {
1655         #hns-date-picker {
1656                 right: -8px;
1657         }
1658         #hns-date-picker::before {
1659                 width: 94%;
1660         }
1661 }
1662 @media only screen and (max-width: 1020px) {
1663         #hns-date-picker {
1664                 right: 19px;
1665         }
1666         #hns-date-picker::before {
1667                 width: 100%;
1668         }
1669         #quick-nav-ui {
1670                 background-color: #fff;
1671                 box-shadow: 0 9px 0 0px #fff;
1672         }
1673         #new-comment-nav-ui .new-comments-count::before {
1674                 background-color: #fff;
1675                 box-shadow:
1676                         0 0 0 2px #000,
1677                         0 0 0 10px #fff;
1678         }
1679         #anti-kibitzer-toggle {
1680                 background-color: #fff;
1681                 box-shadow:
1682                         0 0 0 2px #000,
1683                         0 0 0 10px #fff;
1684         }
1685 }
1686
1687 /*========*/
1688 /* MOBILE */
1689 /*========*/
1690
1691 /*******************************************************/
1692 @media not screen and (hover:hover) and (pointer:fine) {
1693 /*******************************************************/
1694         #ui-elements-container > div[id$='-ui-toggle'] button,
1695         #theme-selector .theme-selector-close-button  {
1696                 color: #000;
1697                 opacity: 1.0;
1698         }
1699         #appearance-adjust-ui-toggle button,
1700         #post-nav-ui-toggle button {
1701                 background-color: #fff;
1702                 box-shadow:
1703                         0 0 0 2px #fff,
1704                         0 0 0 2px #000 inset;
1705         }
1706
1707         #theme-selector {
1708                 background-color: #fff;
1709                 box-shadow:
1710                         0 0 0 1px #000,
1711                         0 0 0 7px #fff;
1712         }
1713         #theme-selector::before {
1714                 color: #000;
1715         }
1716         #theme-selector button {
1717                 background-color: #fff;
1718                 box-shadow:
1719                         0 0 0 1px #fff inset,
1720                         0 0 0 3px #000 inset,
1721                         0 0 0 5px #fff inset;
1722         }
1723         #theme-selector button::after {
1724                 color: #000;
1725                 max-width: calc(100% - 3.5em);
1726                 overflow: hidden;
1727                 text-overflow: ellipsis;
1728                 padding-left: 1px;
1729         }
1730         #theme-selector button.selected {
1731                 box-shadow:
1732                         0 0 0 1px #fff inset,
1733                         0 0 0 3px #000 inset,
1734                         0 0 0 5px #fff inset,
1735                         0 0 0 7px #000 inset;
1736         }
1737         #theme-selector button.selected::after {
1738                 font-weight: bold;
1739         }
1740         #theme-selector .theme-selector-close-button {
1741                 font-weight: 400;
1742         }
1743
1744         #quick-nav-ui {
1745                 background-color: #fff;
1746         }
1747         #quick-nav-ui a {
1748                 box-shadow:
1749                         0 0 0 2px #000;
1750         }
1751         #quick-nav-ui a::after,
1752         #new-comment-nav-ui::before {
1753                 font-family: <?php echo $UI_font; ?>;
1754                 font-weight: bold;
1755                 font-size: 0.5rem;
1756                 background-color: #fff;
1757         }
1758         #new-comment-nav-ui {
1759                 background-color: #fff;
1760                 border: 1px solid #000;
1761                 box-shadow: 0 0 0 1px #000;
1762         }
1763         #new-comment-nav-ui::before {
1764                 color: #000;
1765                 font-size: 0.6875rem;
1766                 font-weight: bold;
1767                 bottom: calc(100% + 2px);
1768                 padding: 2px 0 0 0;
1769         }
1770         #new-comment-nav-ui .new-comment-sequential-nav-button {
1771                 color: #000;
1772         }
1773         #new-comment-nav-ui .new-comments-count,
1774         #new-comment-nav-ui .new-comments-count::after {
1775                 color: #000;
1776         }
1777         #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
1778                 color: #bbb;
1779         }
1780         #new-comment-nav-ui button::after {
1781                 font-family: <?php echo $UI_font; ?>;
1782         }
1783
1784         #hns-date-picker {
1785                 bottom: 130px;
1786                 right: 52px;
1787                 text-indent: 0;
1788         }
1789
1790         /*****************************************/
1791         @media only screen and (max-width: 900px) {
1792         /*****************************************/
1793                 h1.listing {
1794                         line-height: 1;
1795                         margin-bottom: 6px;
1796                 }
1797                 h1.listing + .post-meta {
1798                         font-family: Input Sans Narrow;
1799                         font-weight: 300;
1800                 }
1801                 h1.listing + .post-meta .post-section {
1802                         overflow: visible;
1803                         order: 1;
1804                 }
1805                 h1.listing + .post-meta .post-section::before {
1806                         position: unset;
1807                 }
1808
1809                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
1810                         background-color: #000;
1811                         height: 2px;
1812                 }
1813
1814                 .comment-item .comment-item {
1815                         margin: 0.75em 2px 3px 6px;
1816                 }
1817                 .comment-item .comment-item + .comment-item {
1818                         margin: 1.5em 2px 3px 6px;
1819                 }
1820
1821                 a.comment-parent-link::before {
1822                         line-height: 1;
1823                 }
1824
1825                 #edit-post-form textarea {
1826                         min-height: calc(100vh - 400px)
1827                 }
1828                 #edit-post-form #markdown-hints {
1829                         position: fixed;
1830                         top: 74px;
1831                         left: 0;
1832                         right: 0;
1833                         max-width: 330px;
1834                         margin: auto;
1835                 }
1836                 #edit-post-form input[type='submit'] {
1837                         background-color: #fff;
1838                 }
1839
1840                 .comment-controls .cancel-comment-button {
1841                         max-width: 1.4em;
1842                 }
1843                 .comment-controls .cancel-comment-button::before {
1844                         opacity: 1.0;
1845                         position: relative;
1846                         top: -1px;
1847                 }
1848
1849                 .sublevel-nav .sublevel-item,
1850                 .sublevel-nav .sublevel-item:first-child,
1851                 .sublevel-nav .sublevel-item:last-child {
1852                         border-width: 1px;
1853                 }
1854         /*******************************************/
1855         } @media only screen and (max-width: 720px) {
1856         /*******************************************/
1857                 #content.conversations-user-page h1.listing + .post-meta .date {
1858                         margin: 0 0 0 1em;
1859                 }
1860         /*******************************************/
1861         } @media only screen and (max-width: 520px) {
1862         /*******************************************/
1863                 h1.listing {
1864                         font-size: 1.375rem;
1865                         margin: 18px 6px 4px 6px;
1866                         max-width: calc(100% - 12px);
1867                 }
1868                 h1.listing .link-post-link {
1869                         top: 4px;
1870                 }
1871                 h1.listing + .post-meta {
1872                         margin: 4px 6px;
1873                         font-family: Input Sans Condensed;
1874                         font-weight: 300;
1875                 }
1876                 h1.listing + .post-meta .post-section {
1877                         order: 1;
1878                         overflow: visible;
1879                 }
1880                 h1.listing + .post-meta .post-section::before {
1881                         position: relative;
1882                         top: -1px;
1883                         left: 0;
1884                 }
1885                 #content.conversations-user-page h1.listing {
1886                         font-size: 1.375rem;
1887                 }
1888                 #content.conversations-user-page h1.listing + .post-meta .conversation-participants {
1889                         margin: 0;
1890                 }
1891                 #content.conversations-user-page h1.listing + .post-meta .messages-count {
1892                         margin: 0 0 0 1em;
1893                 }
1894
1895                 #content.compact > .comment-thread .comment-item {
1896                         max-height: 110px;
1897                 }
1898
1899                 .textarea-container:focus-within textarea {
1900                         background-color: #fff;
1901                         border: none;
1902                         box-shadow:
1903                                 0 0 0 2px #000;
1904                 }
1905                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
1906                         padding: 5px 6px 6px 6px;
1907                         color: #fff;
1908                         font-weight: bold;
1909                         box-shadow: none;
1910                 }
1911                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
1912                         box-shadow:
1913                                 0 0 0 1px #000 inset,
1914                                 0 0 0 3px #fff inset,
1915                                 0 0 0 2px #fff;
1916                 }
1917                 .textarea-container:focus-within .guiedit-buttons-container {
1918                         border-top: 2px solid #000;
1919                 }
1920                 .posting-controls .textarea-container:focus-within .guiedit-buttons-container {
1921                         padding-bottom: 5px;
1922                 }
1923                 #content.conversation-page .textarea-container:focus-within::after {
1924                         background-color: #000;
1925                 }
1926                 .textarea-container:focus-within button.guiedit {
1927                         border: 1px solid transparent;
1928                 }
1929                 #markdown-hints,
1930                 #edit-post-form #markdown-hints {
1931                         border: 2px solid #000;
1932                         box-shadow:
1933                                 0 0 0 2px #fff,
1934                                 0 0 0 4px #000;
1935                 }
1936                 #markdown-hints::after {
1937                         color: #000;
1938                 }
1939
1940                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1941                         top: 0;
1942                 }
1943                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1944                         top: 1px;
1945                 }
1946         }
1947 }