www/theme-grey.css.php

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