www/theme-zero.css.php

   1 <?php
   2         $UI_font = "Trade Gothic, Helvetica, 'GW-Symbols', 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 .voting-controls.active-controls::after,
 875 .comment-item .voting-controls .karma-value::after,
 876 .post .voting-controls.active-controls::after,
 877 .post .voting-controls .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 .voting-controls.active-controls::after,
 885 .post .voting-controls.active-controls::after {
 886         padding: 6px;
 887         bottom: -46px;
 888 }
 889 .comment-item .voting-controls .karma-value::after,
 890 .post .voting-controls .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:disabled {
1083         visibility: unset;
1084         filter: brightness(50%);
1085 }
1086
1087 /**********/
1088 /*      States.
1089  */
1090
1091 /*      _ 1
1092  */
1093 .upvote {
1094         filter: grayscale(100%) brightness(128%);
1095 }
1096 .downvote {
1097         filter: grayscale(100%) brightness(188%);
1098 }
1099
1100 /*      _ 2
1101  */
1102 .vote:not(.none) {
1103         filter: drop-shadow(0 0 1px #fff);
1104 }
1105
1106 /*      1 _
1107  */
1108 .vote.two-temp::before {
1109         box-shadow:
1110                 0 0 0 1px #fff,
1111                 0 0 0 4px #c8c8c8,
1112                 0 0 0 5px transparent;
1113 }
1114
1115 /*      2 _
1116  */
1117 .upvote.two::before {
1118         box-shadow:
1119                 0 0 0 1px #fff,
1120                 0 0 0 4px #00d800,
1121                 0 0 0 5px transparent;
1122 }
1123 .downvote.two::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 /*      Icons.
1132  */
1133
1134 .karma .upvote::before {
1135         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/upvote-green-circle-plus.svg")) ?>');
1136 }
1137 .karma .downvote::before {
1138         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/downvote-red-circle-minus.svg")) ?>');
1139 }
1140
1141 .karma .upvote:disabled::before {
1142         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/upvote-disabled-grey-circle-plus.svg")) ?>');
1143 }
1144 .karma .downvote:disabled::before {
1145         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/downvote-disabled-grey-circle-minus.svg")) ?>');
1146 }
1147
1148 .agreement .upvote::before {
1149         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/agree-green-circle-check.svg")) ?>');
1150 }
1151 .agreement .downvote::before {
1152         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/disagree-red-circle-x.svg")) ?>');
1153 }
1154
1155 .agreement .upvote:disabled::before {
1156         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/agree-disabled-grey-circle-check.svg")) ?>');
1157 }
1158 .agreement .downvote:disabled::before {
1159         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/vote_button_icons/disagree-disabled-grey-circle-x.svg")) ?>');
1160 }
1161
1162 /*===========================*/
1163 /* COMMENTING AND POSTING UI */
1164 /*===========================*/
1165
1166 .posting-controls input[type='submit'] {
1167         background-color: #fff;
1168         border: 1px solid #aaa;
1169         font-weight: bold;
1170 }
1171 .posting-controls input[type='submit']:hover,
1172 .posting-controls input[type='submit']:focus {
1173         background-color: #ddd;
1174         border: 1px solid #999;
1175 }
1176
1177 .comment-controls .cancel-comment-button {
1178         font-weight: 600;
1179         color: #c00;
1180         text-shadow:
1181                 0 0 1px #fff,
1182                 0 0 2px #fff;
1183 }
1184 .comment-controls .cancel-comment-button:hover {
1185         color: #f00;
1186         text-shadow: <?php echo $white_glow; ?>;
1187 }
1188
1189 .new-comment-button {
1190         font-weight: 600;
1191 }
1192
1193 .comment-controls .delete-button,
1194 .comment-controls .retract-button {
1195         color: #c00;
1196 }
1197 .comment-controls .delete-button::before {
1198         font-size: 1em;
1199         font-weight: 400;
1200         opacity: 0.7;
1201 }
1202 .comment-controls .edit-button,
1203 .comment-controls .unretract-button {
1204         color: #0a0;
1205 }
1206 .comment-controls .action-button:hover {
1207         color: #f00
1208 }
1209
1210 .post-controls {
1211         margin: 0.25em -1em 0 0;
1212 }
1213 h1.listing .edit-post-link,
1214 h1.listing .edit-post-link:visited,
1215 .post-controls .edit-post-link,
1216 .post-controls .edit-post-link:visited {
1217         color: #090;
1218 }
1219 h1.listing .edit-post-link:hover,
1220 .post-controls .edit-post-link:hover {
1221         color: #d00;
1222 }
1223
1224 .posting-controls textarea {
1225         font-family: <?php echo $text_font; ?>;
1226         color: #000;
1227         border-color: #00e;
1228 }
1229 .posting-controls textarea:focus {
1230         border-width: 29px 1px 1px 1px;
1231         box-shadow: 0 0 0 1px #00e;
1232 }
1233 .posting-controls.edit-existing-post textarea:focus,
1234 .posting-controls form.edit-existing-comment textarea:focus {
1235         border-color: #090;
1236         box-shadow: 0 0 0 1px #090;
1237 }
1238
1239 /*= Scroll bars =*/
1240
1241 .posting-controls textarea::-webkit-scrollbar {
1242         width: 16px;
1243         background-color: transparent;
1244 }
1245 .posting-controls textarea::-webkit-scrollbar-track {
1246         background-color: #fff;
1247         border-left: 1px solid #0040ff;
1248         border-top: 1px solid #eee;
1249 }
1250 .posting-controls textarea:focus::-webkit-scrollbar-track {
1251         border-top: 1px solid #ddf;
1252         border-left: 2px solid #0040ff;
1253 }
1254 .posting-controls textarea::-webkit-scrollbar-thumb {
1255         background-color: #acacff;
1256         box-shadow: 0 0 0 1px #eee inset;
1257         border-left: 1px solid #0040ff;
1258 }
1259 .posting-controls textarea:focus::-webkit-scrollbar-thumb {
1260         background-color: #0040ff;
1261         border-left: 2px solid #0040ff;
1262         box-shadow:
1263                 0 1px 0 0 #ddf inset,
1264                 0 0 0 1px #eee inset;
1265 }
1266
1267 .posting-controls.edit-existing-post textarea:focus::-webkit-scrollbar-track,
1268 .posting-controls form.edit-existing-comment textarea:focus::-webkit-scrollbar-track {
1269         border-left: 2px solid #090;
1270 }
1271 .posting-controls.edit-existing-post textarea:focus::-webkit-scrollbar-thumb,
1272 .posting-controls form.edit-existing-comment textarea:focus::-webkit-scrollbar-thumb {
1273         border-left: 2px solid #090;
1274         background-color: #28a708;
1275 }
1276
1277 /* GUIEdit buttons */
1278
1279 .guiedit-buttons-container {
1280         background-image: linear-gradient(to bottom, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1281 }
1282
1283 .posting-controls.edit-existing-post .guiedit-buttons-container button,
1284 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
1285         color: #050;
1286 }
1287 .guiedit-buttons-container button {
1288         font-family: Font Awesome, <?php echo $text_font; ?>;
1289 }
1290
1291 .guiedit::after {
1292         font-family: <?php echo $UI_font; ?>;
1293         color: #777;
1294         text-shadow: none;
1295 }
1296
1297 /* Markdown hints */
1298
1299 #markdown-hints-checkbox + label {
1300         color: <?php echo $hyperlink_color; ?>;
1301 }
1302 #markdown-hints-checkbox + label:hover {
1303         color: #e00;
1304         text-shadow: <?php echo $white_glow; ?>;
1305 }
1306 #markdown-hints {
1307         border: 1px solid #c00;
1308         background-color: #ffa;
1309 }
1310
1311 /*================*/
1312 /* EDIT POST FORM */
1313 /*================*/
1314
1315 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1316         top: -2px;
1317 }
1318 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1319         border-radius: 3px;
1320         border: 1px solid #ddd;
1321         color: #777;
1322 }
1323 @media only screen and (hover:hover) {
1324         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1325         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1326                 text-shadow:
1327                         0 0 1px #fff,
1328                         0 0 2px #fff,
1329                         0 0 2.5px #aaa;
1330         }
1331         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1332         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1333                 border-color: #aaa;
1334         }
1335 }
1336 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1337         content: "\F00C";
1338 }
1339 #edit-post-form input[type='radio'] + label {
1340         color: #777;
1341         border-color: #ddd;
1342 }
1343 #edit-post-form input[type='radio'][value='all'] + label {
1344         border-radius: 8px 0 0 8px;
1345         border-width: 1px;
1346 }
1347 #edit-post-form input[type='radio'][value='drafts'] + label {
1348         border-radius: 0 8px 8px 0;
1349 }
1350 #edit-post-form input[type='radio'] + label:hover,
1351 #edit-post-form input[type='radio']:focus + label {
1352         background-color: #ddd;
1353         color: #000;
1354 }
1355 #edit-post-form input[type='radio']:focus + label {
1356         color: #000;
1357         box-shadow:
1358                 0 0 0 1px #aaa;
1359 }
1360 #edit-post-form input[type='radio']:checked + label {
1361         background-color: #ddd;
1362         border-color: #ddd;
1363         color: #000;
1364         text-shadow:
1365                 0 -1px 0 #fff,
1366                 0 0.5px 0.5px #000;
1367 }
1368
1369 /*=======*/
1370 /* LINKS */
1371 /*=======*/
1372
1373 a {
1374         text-decoration: none;
1375         color: <?php echo $hyperlink_color; ?>;
1376 }
1377 a:visited {
1378         color: #551a8b;
1379 }
1380 a:hover {
1381         text-decoration: underline;
1382 }
1383
1384 /*=========*/
1385 /* BUTTONS */
1386 /*=========*/
1387
1388 button,
1389 input[type='submit'] {
1390         color: <?php echo $hyperlink_color; ?>;
1391 }
1392
1393 button:hover,
1394 input[type='submit']:hover,
1395 button:focus,
1396 input[type='submit']:focus {
1397         color: #d00;
1398         text-shadow: <?php echo $white_glow; ?>;
1399 }
1400 button:active,
1401 input[type='submit']:active {
1402         color: #f00;
1403         transform: scale(0.9);
1404 }
1405 .button:visited {
1406         color: <?php echo $hyperlink_color; ?>;
1407 }
1408 .button:hover {
1409         color: #d00;
1410         text-shadow: <?php echo $white_glow; ?>;
1411         text-decoration: none;
1412 }
1413 .button:active {
1414         transform: scale(0.9);
1415 }
1416 .button:focus:not(:hover) {
1417         transform: none;
1418 }
1419 @-moz-document url-prefix() {
1420         .button:active {
1421                 transform: none;
1422         }
1423 }
1424
1425 /*==========*/
1426 /* HEADINGS */
1427 /*==========*/
1428
1429 .body-text h1,
1430 .body-text h2,
1431 .body-text h3,
1432 .body-text h4,
1433 .body-text h5,
1434 .body-text h6 {
1435         font-family: <?php echo $UI_font; ?>;
1436 }
1437 .body-text h6 {
1438         color: #555;
1439 }
1440
1441 /*========*/
1442 /* QUOTES */
1443 /*========*/
1444
1445 blockquote {
1446         border-left: 5px solid #ccc;
1447 }
1448
1449 /*========*/
1450 /* IMAGES */
1451 /*========*/
1452
1453 #content img,
1454 #content figure.image img {
1455         border: 1px solid #ccc;
1456 }
1457 #content figure img {
1458         border: 1px solid #000;
1459 }
1460 #content img[src$='.svg'],
1461 #content figure img[src$='.svg'] {
1462         border: none;
1463 }
1464 #content img[style^='float'] {
1465         border: 1px solid transparent;
1466 }
1467
1468 /*========*/
1469 /* TABLES */
1470 /*========*/
1471
1472 #content:not(.tag-index-page) .body-text table,
1473 #content:not(.tag-index-page) .body-text table th,
1474 #content:not(.tag-index-page) .body-text table td {
1475         border: 1px solid #ccc;
1476 }
1477
1478 /*======*/
1479 /* MISC */
1480 /*======*/
1481
1482 hr {
1483         border-bottom: 1px solid #999;
1484 }
1485
1486 code {
1487         background-color: #f6f6ff;
1488         border: 1px solid #ddf;
1489         border-radius: 4px;
1490 }
1491
1492 input[type='text'],
1493 input[type='search'],
1494 input[type='password'] {
1495         border: 1px solid #999;
1496         color: #000;
1497         background-color: transparent;
1498 }
1499 input[type='text']:focus,
1500 input[type='search']:focus,
1501 input[type='password']:focus {
1502         border: 1px solid #00e;
1503         outline: 1px solid #00e;
1504 }
1505
1506 select {
1507         color: #000;
1508 }
1509
1510 /*============*/
1511 /* ABOUT PAGE */
1512 /*============*/
1513
1514 .about-page mark {
1515         background-color: #e6e6e6;
1516         text-decoration: none;
1517         box-shadow:
1518                 0 -1px 0 0 #000 inset,
1519                 0 -3px 1px -2px #000 inset;
1520         padding: 0 1px;
1521 }
1522
1523 #content.about-page .accesskey-table {
1524         font-family: <?php echo $UI_font; ?>;
1525         border-color: #ddd;
1526 }
1527
1528 #content.about-page img {
1529         border: 1px solid #000;
1530 }
1531
1532 /*========================*/
1533 /* QUALIFIED HYPERLINKING */
1534 /*========================*/
1535
1536 #aux-about-link a {
1537         color: #777;
1538 }
1539 #aux-about-link a:hover {
1540         opacity: 1.0;
1541         text-shadow: <?php echo $white_glow; ?>;
1542 }
1543
1544 .qualified-linking label {
1545         color: <?php echo $hyperlink_color; ?>;
1546 }
1547 .qualified-linking label:hover {
1548         text-shadow:
1549                 0 0 1px #fff,
1550                 0 0 3px #fff,
1551                 0 0 5px #00e;
1552 }
1553
1554 .qualified-linking-toolbar {
1555         border: 1px solid #000;
1556         background-color: #fff;
1557 }
1558 .qualified-linking-toolbar a {
1559         background-color: #eee;
1560         border: 1px solid #ccc;
1561         border-radius: 4px;
1562 }
1563 .qualified-linking-toolbar a:visited {
1564         color: <?php echo $hyperlink_color; ?>;
1565 }
1566 .qualified-linking-toolbar a:hover {
1567         text-decoration: none;
1568         background-color: #ddd;
1569         text-shadow: <?php echo $white_glow; ?>;
1570 }
1571 .qualified-linking label::after {
1572         background-color: #eee;
1573         opacity: 0.8;
1574 }
1575
1576 /*======*/
1577 /* MATH */
1578 /*======*/
1579
1580 .mathjax-block-container::-webkit-scrollbar {
1581         height: 12px;
1582         background-color: #f6f6ff;
1583         border-radius: 6px;
1584         border: 1px solid #ddf;
1585 }
1586 .mathjax-block-container::-webkit-scrollbar-thumb {
1587         background-color: #dde;
1588         border-radius: 6px;
1589         border: 1px solid #cce;
1590 }
1591 .mathjax-inline-container::-webkit-scrollbar {
1592         height: 8px;
1593         background-color: #f6f6ff;
1594         border-radius: 4px;
1595         border: 1px solid #ddf;
1596 }
1597 .mathjax-inline-container::-webkit-scrollbar-thumb {
1598         background-color: #dde;
1599         border-radius: 4px;
1600         border: 1px solid #cce;
1601 }
1602
1603 /*=================*/
1604 /* ALIGNMENT FORUM */
1605 /*=================*/
1606
1607 #content.alignment-forum-index-page::before {
1608         background-color: #eaedff;
1609 }
1610 #content.alignment-forum-index-page::after {
1611         font-family: "Concourse SmallCaps";
1612         font-weight: 600;
1613         background-color: #7f85b2;
1614         color: transparent;
1615         -webkit-background-clip: text;
1616         text-shadow:
1617                 rgba(255,255,255,0.5) 0px 3px 3px;
1618 }
1619 @media only screen and (hover: hover) {
1620         #content.alignment-forum-index-page h1.listing a:hover,
1621         #content.alignment-forum-index-page h1.listing a:focus {
1622                 background-color: rgba(234,237,255,0.85);
1623         }
1624 }
1625
1626 /*====================*/
1627 /* FOR NARROW SCREENS */
1628 /*====================*/
1629
1630 @media only screen and (max-width: 1440px) {
1631         #hns-date-picker {
1632                 background-color: #d8d8d8;
1633                 opacity: 1.0;
1634         }
1635         #hns-date-picker::before {
1636                 border: 1px solid #999;
1637                 border-width: 1px 0 1px 1px;
1638         }
1639 }
1640 @media only screen and (max-width: 1200px) {
1641         #hns-date-picker {
1642                 background-color: #eee;
1643         }
1644         #hns-date-picker::before {
1645                 display: none;
1646         }
1647 }
1648 @media only screen and (max-width: 1080px) {
1649         #text-size-adjustment-ui button {
1650                 border: 1px solid #999;
1651                 padding: 0 0 0 1px;
1652                 border-radius: 50%;
1653                 box-shadow:
1654                         0 0 6px #999 inset,
1655                         0 0 0 1px transparent;
1656         }
1657         #theme-tweaker-toggle button {
1658                 border: 1px solid #999;
1659                 box-shadow:
1660                         0 0 10px #999 inset,
1661                         0 0 0 1px transparent;
1662                 border-radius: 50%;
1663                 transform: scale(0.8);
1664         }
1665 }
1666 @media only screen and (max-width: 1020px) {
1667         #quick-nav-ui a {
1668                 box-shadow:
1669                         0 0 0 1px #999,
1670                         0 0 0 2px transparent;
1671         }
1672         #new-comment-nav-ui .new-comments-count::before {
1673                 background-color: #d8d8d8;
1674                 box-shadow:
1675                         0 0 0 1px #999,
1676                         0 0 0 2px transparent;
1677                 border-radius: 8px;
1678         }
1679 }
1680 @media only screen and (max-width: 1160px) {
1681         #theme-selector {
1682                 background-color: #eee;
1683                 box-shadow:
1684                         0 0 0 1px #999,
1685                         0 0 0 2px transparent;
1686         }
1687         #theme-selector:hover::after {
1688                 background-color: #999;
1689                 width: calc(6em - 3px);
1690                 height: calc(100% - 5px);
1691                 top: 3px;
1692                 left: 100%;
1693         }
1694         #text-size-adjustment-ui button {
1695                 background-color: #ddd;
1696         }
1697         #text-size-adjustment-ui button:hover {
1698                 background-color: #eee;
1699         }
1700         #theme-tweaker-toggle button {
1701                 background-color: #ddd;
1702         }
1703 }
1704
1705 /*========*/
1706 /* MOBILE */
1707 /*========*/
1708
1709 /*******************************************************/
1710 @media not screen and (hover:hover) and (pointer:fine) {
1711 /*******************************************************/
1712         #ui-elements-container > div[id$='-ui-toggle'] button,
1713         #theme-selector .theme-selector-close-button  {
1714                 color: #aaa;
1715                 text-shadow:
1716                         0 0 1px #fff,
1717                         0 0 3px #fff,
1718                         0 0 5px #fff,
1719                         0 0 10px #fff,
1720                         0 0 20px #fff,
1721                         0 0 30px #fff;
1722         }
1723
1724         #theme-selector {
1725                 background-color: #eee;
1726                 box-shadow:
1727                         0 0 0 1px #999,
1728                         0 0 1px 3px #fff,
1729                         0 0 3px 3px #fff,
1730                         0 0 5px 3px #fff,
1731                         0 0 10px 3px #fff,
1732                         0 0 20px 3px #fff;
1733                 border-radius: 12px;
1734         }
1735         #theme-selector::before {
1736                 color: #777;
1737                 font-weight: normal;
1738                 text-shadow: 0.5px 0.5px 0 #aaa;
1739         }
1740         #theme-selector button {
1741                 background-color: #e6e6e6;
1742                 border-radius: 10px;
1743         }
1744         #theme-selector button::after {
1745                 color: #000;
1746                 max-width: calc(100% - 3.5em);
1747                 overflow: hidden;
1748                 text-overflow: ellipsis;
1749                 padding: 0 0 2px 0;
1750         }
1751         #theme-selector button.selected::after {
1752                 text-shadow:
1753                         0 -1px 0 #fff,
1754                         0 0.5px 0.5px #000;
1755         }
1756
1757         #quick-nav-ui {
1758                 background-color: #fff;
1759         }
1760         #quick-nav-ui,
1761         #new-comment-nav-ui,
1762         #hns-date-picker {
1763                 box-shadow:
1764                         0 0 1px 3px #fff,
1765                         0 0 3px 3px #fff,
1766                         0 0 5px 3px #fff,
1767                         0 0 10px 3px #fff,
1768                         0 0 20px 3px #fff;
1769         }
1770         #quick-nav-ui a::after,
1771         #new-comment-nav-ui::before {
1772                 font-family: <?php echo $UI_font; ?>;
1773                 font-weight: bold;
1774                 box-shadow:
1775                         0 0 1px 0 #fff,
1776                         0 0 3px 0 #fff,
1777                         0 0 5px 0 #fff;
1778                 background-color: #fff;
1779                 border-radius: 4px;
1780         }
1781         #quick-nav-ui,
1782         #new-comment-nav-ui {
1783                 border-radius: 8px;
1784         }
1785         #new-comment-nav-ui {
1786                 background-color: #fff;
1787                 border: 1px solid #999;
1788         }
1789         #new-comment-nav-ui::before {
1790                 color: #777;
1791                 font-weight: bold;
1792         }
1793         #new-comment-nav-ui .new-comment-sequential-nav-button {
1794                 box-shadow: 0 0 0 1px #999;
1795                 color: #00c;
1796         }
1797         #new-comment-nav-ui .new-comments-count {
1798                 background-color: inherit;
1799                 box-shadow: 0 -1px 0 0 #999;
1800         }
1801         #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
1802                 color: #bbb;
1803         }
1804         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
1805                 border-radius: 7px 0 0 7px;
1806         }
1807         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
1808                 border-radius: 0 7px 7px 0;
1809         }
1810         #new-comment-nav-ui button::after {
1811                 font-family: <?php echo $UI_font; ?>;
1812         }
1813         #hns-date-picker {
1814                 background-color: #fff;
1815                 border: 1px solid #999;
1816         }
1817
1818         /*****************************************/
1819         @media only screen and (max-width: 900px) {
1820         /*****************************************/
1821                 h1.listing + .post-meta > * {
1822                         line-height: 1.5;
1823                 }
1824                 h1.listing + .post-meta .post-section {
1825                         overflow: visible;
1826                         order: 1;
1827                 }
1828                 h1.listing + .post-meta .post-section::before {
1829                         position: unset;
1830                 }
1831
1832                 #primary-bar .nav-inner {
1833                         font-size: 1.375em;
1834                 }
1835                 .nav-bar-top:not(#primary-bar) .nav-inner {
1836                         font-size: 1.125em;
1837                 }
1838                 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
1839                         padding: 6px 10px;
1840                 }
1841
1842                 .archive-nav *[class^='archive-nav-item-'] {
1843                         border-width: 1px !important;
1844                 }
1845                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
1846                         background-color: #aaa;
1847                 }
1848
1849                 .comment-item .comment-item {
1850                         margin: 0.75em 3px 3px 6px;
1851                 }
1852                 .comment-item .comment-item + .comment-item {
1853                         margin: 1.5em 3px 3px 6px;
1854                 }
1855
1856                 .sublevel-nav:not(.sort) .sublevel-item,
1857                 .sublevel-nav:not(.sort) .sublevel-item:first-child,
1858                 .sublevel-nav:not(.sort) .sublevel-item:last-child {
1859                         border-radius: 8px;
1860                         border-width: 1px;
1861                         margin: 2px;
1862                 }
1863         /*******************************************/
1864         } @media only screen and (max-width: 720px) {
1865         /*******************************************/
1866         /*******************************************/
1867         } @media only screen and (max-width: 520px) {
1868         /*******************************************/
1869                 h1.listing {
1870                         font-size: 1.25rem;
1871                         margin: 18px 6px 4px 6px;
1872                         max-width: calc(100% - 12px);
1873                 }
1874                 h1.listing + .post-meta {
1875                         margin: 4px 6px;
1876                 }
1877                 h1.listing .link-post-link {
1878                         top: 2px;
1879                 }
1880                 #content.conversations-user-page h1.listing::after {
1881                         height: calc(100% + 2.25em);
1882                 }
1883                 #content.conversations-user-page h1.listing + .post-meta .date {
1884                         margin: 0 0 0 1em;
1885                 }
1886
1887                 .comment-body {
1888                         font-size: 1.125rem;
1889                 }
1890
1891                 #content.compact > .comment-thread .comment-item {
1892                         max-height: 105px;
1893                 }
1894
1895                 .textarea-container:focus-within textarea {
1896                         background-color: #fff;
1897                         border-width: 1px;
1898                 }
1899                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
1900                         padding: 5px 6px 6px 6px;
1901                         font-weight: bold;
1902                 }
1903                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
1904                         box-shadow:
1905                                 0 0 0 2px #c00;
1906                         color: #c00;
1907                 }
1908                 .textarea-container:focus-within .guiedit-buttons-container {
1909                         background-color: #fff;
1910                         border-top: 1px solid #ddf;
1911                 }
1912                 .posting-controls .textarea-container:focus-within .guiedit-buttons-container {
1913                         box-shadow: none;
1914                 }
1915                 #content.conversation-page .textarea-container:focus-within::after {
1916                         background-color: #fff;
1917                 }
1918                 .textarea-container:focus-within button.guiedit {
1919                         border: 1px solid #00c;
1920                         border-radius: 6px;
1921                 }
1922                 #markdown-hints::after {
1923                         color: #090;
1924                 }
1925
1926                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1927                         top: 2px;
1928                 }
1929                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1930                         top: 1px;
1931                 }
1932         }
1933 }
1934