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 .textarea-container .autocomplete-container::-webkit-scrollbar {
1243         width: 16px;
1244         background-color: transparent;
1245 }
1246 .posting-controls textarea::-webkit-scrollbar-track,
1247 .textarea-container .autocomplete-container::-webkit-scrollbar-track {
1248         background-color: #fff;
1249         border-left: 1px solid #0040ff;
1250         border-top: 1px solid #eee;
1251 }
1252 .posting-controls textarea:focus::-webkit-scrollbar-track {
1253         border-top: 1px solid #ddf;
1254         border-left: 2px solid #0040ff;
1255 }
1256 .posting-controls textarea::-webkit-scrollbar-thumb {
1257         background-color: #acacff;
1258         box-shadow: 0 0 0 1px #eee inset;
1259         border-left: 1px solid #0040ff;
1260 }
1261 .posting-controls textarea:focus::-webkit-scrollbar-thumb {
1262         background-color: #0040ff;
1263         border-left: 2px solid #0040ff;
1264         box-shadow:
1265                 0 1px 0 0 #ddf inset,
1266                 0 0 0 1px #eee inset;
1267 }
1268 .textarea-container .autocomplete-container::-webkit-scrollbar-thumb {
1269         background-color: #0040ff;
1270         border-left: 1px solid #0040ff;
1271         box-shadow:
1272                 0 1px 0 0 #ddf inset,
1273                 0 0 0 1px #eee inset;
1274 }
1275
1276 .posting-controls.edit-existing-post textarea:focus::-webkit-scrollbar-track,
1277 .posting-controls form.edit-existing-comment textarea:focus::-webkit-scrollbar-track {
1278         border-left: 2px solid #090;
1279 }
1280 .posting-controls.edit-existing-post textarea:focus::-webkit-scrollbar-thumb,
1281 .posting-controls form.edit-existing-comment textarea:focus::-webkit-scrollbar-thumb {
1282         border-left: 2px solid #090;
1283         background-color: #28a708;
1284 }
1285
1286 /* GUIEdit buttons */
1287
1288 .guiedit-buttons-container {
1289         background-image: linear-gradient(to bottom, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1290 }
1291
1292 .posting-controls.edit-existing-post .guiedit-buttons-container button,
1293 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
1294         color: #050;
1295 }
1296 .guiedit-buttons-container button {
1297         font-family: Font Awesome, <?php echo $text_font; ?>;
1298 }
1299
1300 .guiedit::after {
1301         font-family: <?php echo $UI_font; ?>;
1302         color: #777;
1303         text-shadow: none;
1304 }
1305
1306 /* Markdown hints */
1307
1308 #markdown-hints-checkbox + label {
1309         color: <?php echo $hyperlink_color; ?>;
1310 }
1311 #markdown-hints-checkbox + label:hover {
1312         color: #e00;
1313         text-shadow: <?php echo $white_glow; ?>;
1314 }
1315 #markdown-hints {
1316         border: 1px solid #c00;
1317         background-color: #ffa;
1318 }
1319
1320 /*================*/
1321 /* EDIT POST FORM */
1322 /*================*/
1323
1324 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1325         top: -2px;
1326 }
1327 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1328         border-radius: 3px;
1329         border: 1px solid #ddd;
1330         color: #777;
1331 }
1332 @media only screen and (hover:hover) {
1333         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1334         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1335                 text-shadow:
1336                         0 0 1px #fff,
1337                         0 0 2px #fff,
1338                         0 0 2.5px #aaa;
1339         }
1340         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1341         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1342                 border-color: #aaa;
1343         }
1344 }
1345 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1346         content: "\F00C";
1347 }
1348 #edit-post-form input[type='radio'] + label {
1349         color: #777;
1350         border-color: #ddd;
1351 }
1352 #edit-post-form input[type='radio'][value='all'] + label {
1353         border-radius: 8px 0 0 8px;
1354         border-width: 1px;
1355 }
1356 #edit-post-form input[type='radio'][value='drafts'] + label {
1357         border-radius: 0 8px 8px 0;
1358 }
1359 #edit-post-form input[type='radio'] + label:hover,
1360 #edit-post-form input[type='radio']:focus + label {
1361         background-color: #ddd;
1362         color: #000;
1363 }
1364 #edit-post-form input[type='radio']:focus + label {
1365         color: #000;
1366         box-shadow:
1367                 0 0 0 1px #aaa;
1368 }
1369 #edit-post-form input[type='radio']:checked + label {
1370         background-color: #ddd;
1371         border-color: #ddd;
1372         color: #000;
1373         text-shadow:
1374                 0 -1px 0 #fff,
1375                 0 0.5px 0.5px #000;
1376 }
1377
1378 /*=======*/
1379 /* LINKS */
1380 /*=======*/
1381
1382 a {
1383         text-decoration: none;
1384         color: <?php echo $hyperlink_color; ?>;
1385 }
1386 a:visited {
1387         color: #551a8b;
1388 }
1389 a:hover {
1390         text-decoration: underline;
1391 }
1392
1393 /*=========*/
1394 /* BUTTONS */
1395 /*=========*/
1396
1397 button,
1398 input[type='submit'] {
1399         color: <?php echo $hyperlink_color; ?>;
1400 }
1401
1402 button:hover,
1403 input[type='submit']:hover,
1404 button:focus,
1405 input[type='submit']:focus {
1406         color: #d00;
1407         text-shadow: <?php echo $white_glow; ?>;
1408 }
1409 button:active,
1410 input[type='submit']:active {
1411         color: #f00;
1412         transform: scale(0.9);
1413 }
1414 .button:visited {
1415         color: <?php echo $hyperlink_color; ?>;
1416 }
1417 .button:hover {
1418         color: #d00;
1419         text-shadow: <?php echo $white_glow; ?>;
1420         text-decoration: none;
1421 }
1422 .button:active {
1423         transform: scale(0.9);
1424 }
1425 .button:focus:not(:hover) {
1426         transform: none;
1427 }
1428 @-moz-document url-prefix() {
1429         .button:active {
1430                 transform: none;
1431         }
1432 }
1433
1434 /*==========*/
1435 /* HEADINGS */
1436 /*==========*/
1437
1438 .body-text h1,
1439 .body-text h2,
1440 .body-text h3,
1441 .body-text h4,
1442 .body-text h5,
1443 .body-text h6 {
1444         font-family: <?php echo $UI_font; ?>;
1445 }
1446 .body-text h6 {
1447         color: #555;
1448 }
1449
1450 /*========*/
1451 /* QUOTES */
1452 /*========*/
1453
1454 blockquote {
1455         border-left: 5px solid #ccc;
1456 }
1457
1458 /*========*/
1459 /* IMAGES */
1460 /*========*/
1461
1462 #content img,
1463 #content figure.image img {
1464         border: 1px solid #ccc;
1465 }
1466 #content figure img {
1467         border: 1px solid #000;
1468 }
1469 #content img[src$='.svg'],
1470 #content figure img[src$='.svg'] {
1471         border: none;
1472 }
1473 #content img[style^='float'] {
1474         border: 1px solid transparent;
1475 }
1476
1477 /*========*/
1478 /* TABLES */
1479 /*========*/
1480
1481 #content:not(.tag-index-page) .body-text table,
1482 #content:not(.tag-index-page) .body-text table th,
1483 #content:not(.tag-index-page) .body-text table td {
1484         border: 1px solid #ccc;
1485 }
1486
1487 /*======*/
1488 /* MISC */
1489 /*======*/
1490
1491 hr {
1492         border-bottom: 1px solid #999;
1493 }
1494
1495 code {
1496         background-color: #f6f6ff;
1497         border: 1px solid #ddf;
1498         border-radius: 4px;
1499 }
1500
1501 input[type='text'],
1502 input[type='search'],
1503 input[type='password'] {
1504         border: 1px solid #999;
1505         color: #000;
1506         background-color: transparent;
1507 }
1508 input[type='text']:focus,
1509 input[type='search']:focus,
1510 input[type='password']:focus {
1511         border: 1px solid #00e;
1512         outline: 1px solid #00e;
1513 }
1514
1515 select {
1516         color: #000;
1517 }
1518
1519 /*============*/
1520 /* ABOUT PAGE */
1521 /*============*/
1522
1523 .about-page mark {
1524         background-color: #e6e6e6;
1525         text-decoration: none;
1526         box-shadow:
1527                 0 -1px 0 0 #000 inset,
1528                 0 -3px 1px -2px #000 inset;
1529         padding: 0 1px;
1530 }
1531
1532 #content.about-page .accesskey-table {
1533         font-family: <?php echo $UI_font; ?>;
1534         border-color: #ddd;
1535 }
1536
1537 #content.about-page img {
1538         border: 1px solid #000;
1539 }
1540
1541 /*========================*/
1542 /* QUALIFIED HYPERLINKING */
1543 /*========================*/
1544
1545 #aux-about-link a {
1546         color: #777;
1547 }
1548 #aux-about-link a:hover {
1549         opacity: 1.0;
1550         text-shadow: <?php echo $white_glow; ?>;
1551 }
1552
1553 .qualified-linking label {
1554         color: <?php echo $hyperlink_color; ?>;
1555 }
1556 .qualified-linking label:hover {
1557         text-shadow:
1558                 0 0 1px #fff,
1559                 0 0 3px #fff,
1560                 0 0 5px #00e;
1561 }
1562
1563 .qualified-linking-toolbar {
1564         border: 1px solid #000;
1565         background-color: #fff;
1566 }
1567 .qualified-linking-toolbar a {
1568         background-color: #eee;
1569         border: 1px solid #ccc;
1570         border-radius: 4px;
1571 }
1572 .qualified-linking-toolbar a:visited {
1573         color: <?php echo $hyperlink_color; ?>;
1574 }
1575 .qualified-linking-toolbar a:hover {
1576         text-decoration: none;
1577         background-color: #ddd;
1578         text-shadow: <?php echo $white_glow; ?>;
1579 }
1580 .qualified-linking label::after {
1581         background-color: #eee;
1582         opacity: 0.8;
1583 }
1584
1585 /*======*/
1586 /* MATH */
1587 /*======*/
1588
1589 .mathjax-block-container::-webkit-scrollbar {
1590         height: 12px;
1591         background-color: #f6f6ff;
1592         border-radius: 6px;
1593         border: 1px solid #ddf;
1594 }
1595 .mathjax-block-container::-webkit-scrollbar-thumb {
1596         background-color: #dde;
1597         border-radius: 6px;
1598         border: 1px solid #cce;
1599 }
1600 .mathjax-inline-container::-webkit-scrollbar {
1601         height: 8px;
1602         background-color: #f6f6ff;
1603         border-radius: 4px;
1604         border: 1px solid #ddf;
1605 }
1606 .mathjax-inline-container::-webkit-scrollbar-thumb {
1607         background-color: #dde;
1608         border-radius: 4px;
1609         border: 1px solid #cce;
1610 }
1611
1612
1613 /*===============*/
1614 /* USER MENTIONS */
1615 /*===============*/
1616
1617 .textarea-container .autocomplete-container {
1618         background-color: rgba(255, 255, 170, 0.75);
1619         border: 1px solid rgba(7, 0, 238, 0.75);
1620 }
1621
1622 .textarea-container .autocomplete-container div.highlighted {
1623         background-color: rgba(7, 0, 238, 0.75);
1624         color: #fff;
1625 }
1626
1627 .textarea-container .autocomplete-container div:not(.highlighted):hover {
1628         background-color: rgba(7, 0, 238, 0.25);
1629 }
1630
1631 .textarea-container .autocomplete-container div span.age,
1632 .textarea-container .autocomplete-container div span.karma {
1633         color: #888;
1634 }
1635
1636
1637 /*=================*/
1638 /* ALIGNMENT FORUM */
1639 /*=================*/
1640
1641 #content.alignment-forum-index-page::before {
1642         background-color: #eaedff;
1643 }
1644 #content.alignment-forum-index-page::after {
1645         font-family: "Concourse SmallCaps";
1646         font-weight: 600;
1647         background-color: #7f85b2;
1648         color: transparent;
1649         -webkit-background-clip: text;
1650         text-shadow:
1651                 rgba(255,255,255,0.5) 0px 3px 3px;
1652 }
1653 @media only screen and (hover: hover) {
1654         #content.alignment-forum-index-page h1.listing a:hover,
1655         #content.alignment-forum-index-page h1.listing a:focus {
1656                 background-color: rgba(234,237,255,0.85);
1657         }
1658 }
1659
1660 /*====================*/
1661 /* FOR NARROW SCREENS */
1662 /*====================*/
1663
1664 @media only screen and (max-width: 1440px) {
1665         #hns-date-picker {
1666                 background-color: #d8d8d8;
1667                 opacity: 1.0;
1668         }
1669         #hns-date-picker::before {
1670                 border: 1px solid #999;
1671                 border-width: 1px 0 1px 1px;
1672         }
1673 }
1674 @media only screen and (max-width: 1200px) {
1675         #hns-date-picker {
1676                 background-color: #eee;
1677         }
1678         #hns-date-picker::before {
1679                 display: none;
1680         }
1681 }
1682 @media only screen and (max-width: 1080px) {
1683         #text-size-adjustment-ui button {
1684                 border: 1px solid #999;
1685                 padding: 0 0 0 1px;
1686                 border-radius: 50%;
1687                 box-shadow:
1688                         0 0 6px #999 inset,
1689                         0 0 0 1px transparent;
1690         }
1691         #theme-tweaker-toggle button {
1692                 border: 1px solid #999;
1693                 box-shadow:
1694                         0 0 10px #999 inset,
1695                         0 0 0 1px transparent;
1696                 border-radius: 50%;
1697                 transform: scale(0.8);
1698         }
1699 }
1700 @media only screen and (max-width: 1020px) {
1701         #quick-nav-ui a {
1702                 box-shadow:
1703                         0 0 0 1px #999,
1704                         0 0 0 2px transparent;
1705         }
1706         #new-comment-nav-ui .new-comments-count::before {
1707                 background-color: #d8d8d8;
1708                 box-shadow:
1709                         0 0 0 1px #999,
1710                         0 0 0 2px transparent;
1711                 border-radius: 8px;
1712         }
1713 }
1714 @media only screen and (max-width: 1160px) {
1715         #theme-selector {
1716                 background-color: #eee;
1717                 box-shadow:
1718                         0 0 0 1px #999,
1719                         0 0 0 2px transparent;
1720         }
1721         #theme-selector:hover::after {
1722                 background-color: #999;
1723                 width: calc(6em - 3px);
1724                 height: calc(100% - 5px);
1725                 top: 3px;
1726                 left: 100%;
1727         }
1728         #text-size-adjustment-ui button {
1729                 background-color: #ddd;
1730         }
1731         #text-size-adjustment-ui button:hover {
1732                 background-color: #eee;
1733         }
1734         #theme-tweaker-toggle button {
1735                 background-color: #ddd;
1736         }
1737 }
1738
1739 /*========*/
1740 /* MOBILE */
1741 /*========*/
1742
1743 /*******************************************************/
1744 @media not screen and (hover:hover) and (pointer:fine) {
1745 /*******************************************************/
1746         #ui-elements-container > div[id$='-ui-toggle'] button,
1747         #theme-selector .theme-selector-close-button  {
1748                 color: #aaa;
1749                 text-shadow:
1750                         0 0 1px #fff,
1751                         0 0 3px #fff,
1752                         0 0 5px #fff,
1753                         0 0 10px #fff,
1754                         0 0 20px #fff,
1755                         0 0 30px #fff;
1756         }
1757
1758         #theme-selector {
1759                 background-color: #eee;
1760                 box-shadow:
1761                         0 0 0 1px #999,
1762                         0 0 1px 3px #fff,
1763                         0 0 3px 3px #fff,
1764                         0 0 5px 3px #fff,
1765                         0 0 10px 3px #fff,
1766                         0 0 20px 3px #fff;
1767                 border-radius: 12px;
1768         }
1769         #theme-selector::before {
1770                 color: #777;
1771                 font-weight: normal;
1772                 text-shadow: 0.5px 0.5px 0 #aaa;
1773         }
1774         #theme-selector button {
1775                 background-color: #e6e6e6;
1776                 border-radius: 10px;
1777         }
1778         #theme-selector button::after {
1779                 color: #000;
1780                 max-width: calc(100% - 3.5em);
1781                 overflow: hidden;
1782                 text-overflow: ellipsis;
1783                 padding: 0 0 2px 0;
1784         }
1785         #theme-selector button.selected::after {
1786                 text-shadow:
1787                         0 -1px 0 #fff,
1788                         0 0.5px 0.5px #000;
1789         }
1790
1791         #quick-nav-ui {
1792                 background-color: #fff;
1793         }
1794         #quick-nav-ui,
1795         #new-comment-nav-ui,
1796         #hns-date-picker {
1797                 box-shadow:
1798                         0 0 1px 3px #fff,
1799                         0 0 3px 3px #fff,
1800                         0 0 5px 3px #fff,
1801                         0 0 10px 3px #fff,
1802                         0 0 20px 3px #fff;
1803         }
1804         #quick-nav-ui a::after,
1805         #new-comment-nav-ui::before {
1806                 font-family: <?php echo $UI_font; ?>;
1807                 font-weight: bold;
1808                 box-shadow:
1809                         0 0 1px 0 #fff,
1810                         0 0 3px 0 #fff,
1811                         0 0 5px 0 #fff;
1812                 background-color: #fff;
1813                 border-radius: 4px;
1814         }
1815         #quick-nav-ui,
1816         #new-comment-nav-ui {
1817                 border-radius: 8px;
1818         }
1819         #new-comment-nav-ui {
1820                 background-color: #fff;
1821                 border: 1px solid #999;
1822         }
1823         #new-comment-nav-ui::before {
1824                 color: #777;
1825                 font-weight: bold;
1826         }
1827         #new-comment-nav-ui .new-comment-sequential-nav-button {
1828                 box-shadow: 0 0 0 1px #999;
1829                 color: #00c;
1830         }
1831         #new-comment-nav-ui .new-comments-count {
1832                 background-color: inherit;
1833                 box-shadow: 0 -1px 0 0 #999;
1834         }
1835         #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
1836                 color: #bbb;
1837         }
1838         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
1839                 border-radius: 7px 0 0 7px;
1840         }
1841         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
1842                 border-radius: 0 7px 7px 0;
1843         }
1844         #new-comment-nav-ui button::after {
1845                 font-family: <?php echo $UI_font; ?>;
1846         }
1847         #hns-date-picker {
1848                 background-color: #fff;
1849                 border: 1px solid #999;
1850         }
1851
1852         /*****************************************/
1853         @media only screen and (max-width: 900px) {
1854         /*****************************************/
1855                 h1.listing + .post-meta > * {
1856                         line-height: 1.5;
1857                 }
1858                 h1.listing + .post-meta .post-section {
1859                         overflow: visible;
1860                         order: 1;
1861                 }
1862                 h1.listing + .post-meta .post-section::before {
1863                         position: unset;
1864                 }
1865
1866                 #primary-bar .nav-inner {
1867                         font-size: 1.375em;
1868                 }
1869                 .nav-bar-top:not(#primary-bar) .nav-inner {
1870                         font-size: 1.125em;
1871                 }
1872                 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
1873                         padding: 6px 10px;
1874                 }
1875
1876                 .archive-nav *[class^='archive-nav-item-'] {
1877                         border-width: 1px !important;
1878                 }
1879                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
1880                         background-color: #aaa;
1881                 }
1882
1883                 .comment-item .comment-item {
1884                         margin: 0.75em 3px 3px 6px;
1885                 }
1886                 .comment-item .comment-item + .comment-item {
1887                         margin: 1.5em 3px 3px 6px;
1888                 }
1889
1890                 .sublevel-nav:not(.sort) .sublevel-item,
1891                 .sublevel-nav:not(.sort) .sublevel-item:first-child,
1892                 .sublevel-nav:not(.sort) .sublevel-item:last-child {
1893                         border-radius: 8px;
1894                         border-width: 1px;
1895                         margin: 2px;
1896                 }
1897         /*******************************************/
1898         } @media only screen and (max-width: 720px) {
1899         /*******************************************/
1900         /*******************************************/
1901         } @media only screen and (max-width: 520px) {
1902         /*******************************************/
1903                 h1.listing {
1904                         font-size: 1.25rem;
1905                         margin: 18px 6px 4px 6px;
1906                         max-width: calc(100% - 12px);
1907                 }
1908                 h1.listing + .post-meta {
1909                         margin: 4px 6px;
1910                 }
1911                 h1.listing .link-post-link {
1912                         top: 2px;
1913                 }
1914                 #content.conversations-user-page h1.listing::after {
1915                         height: calc(100% + 2.25em);
1916                 }
1917                 #content.conversations-user-page h1.listing + .post-meta .date {
1918                         margin: 0 0 0 1em;
1919                 }
1920
1921                 .comment-body {
1922                         font-size: 1.125rem;
1923                 }
1924
1925                 #content.compact > .comment-thread .comment-item {
1926                         max-height: 105px;
1927                 }
1928
1929                 .textarea-container:focus-within textarea {
1930                         background-color: #fff;
1931                         border-width: 1px;
1932                 }
1933                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
1934                         padding: 5px 6px 6px 6px;
1935                         font-weight: bold;
1936                 }
1937                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
1938                         box-shadow:
1939                                 0 0 0 2px #c00;
1940                         color: #c00;
1941                 }
1942                 .textarea-container:focus-within .guiedit-buttons-container {
1943                         background-color: #fff;
1944                         border-top: 1px solid #ddf;
1945                 }
1946                 .posting-controls .textarea-container:focus-within .guiedit-buttons-container {
1947                         box-shadow: none;
1948                 }
1949                 #content.conversation-page .textarea-container:focus-within::after {
1950                         background-color: #fff;
1951                 }
1952                 .textarea-container:focus-within button.guiedit {
1953                         border: 1px solid #00c;
1954                         border-radius: 6px;
1955                 }
1956                 #markdown-hints::after {
1957                         color: #090;
1958                 }
1959
1960                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1961                         top: 2px;
1962                 }
1963                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1964                         top: 1px;
1965                 }
1966         }
1967 }
1968