www/theme-zero.css.php

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