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