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 /*==================*/
 840 /* POSTS & COMMENTS */
 841 /*==================*/
 842
 843 .body-text {
 844         font-family: <?php echo $text_font; ?>;
 845         font-weight: 400;
 846 }
 847 @-moz-document url-prefix() {
 848         .body-text {
 849                 font-weight: <?php global $platform; echo ($platform == 'Windows' ? '300' : '400'); ?>;
 850         }
 851 }
 852
 853 h1.post-title {
 854         margin: 1.1em 0 0.25em 0;
 855         font-weight: 400;
 856         color: #222;
 857         font-size: 3em;
 858 }
 859
 860 .post-body {
 861         font-size: 1.1875rem;
 862         line-height: 1.6;
 863 }
 864 @media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 191dpi) {
 865         .post-body {
 866                 font-size: 1.125rem;
 867         }
 868 }
 869 .comment-body {
 870         font-size: 1.125rem;
 871 }
 872
 873 /*===========*/
 874 /* POST-META */
 875 /*===========*/
 876
 877 .post-meta a,
 878 .post-meta .date {
 879         color: #222;
 880 }
 881
 882 .post-meta > * {
 883         margin: 0;
 884 }
 885 .post-meta .comment-count span,
 886 .post-meta .read-time span,
 887 .post-meta .word-count span,
 888 .post-meta .lw2-link span {
 889         display: none;
 890 }
 891 .post-meta .comment-count::before,
 892 .post-meta .read-time::before,
 893 .post-meta .word-count::before,
 894 .post-meta .lw2-link::before {
 895         font-family: Font Awesome;
 896         margin: 0 0.25em 0 0;
 897         font-size: 0.875em;
 898         color: #ccc;
 899 }
 900 .post-meta .comment-count {
 901         margin: 0 0.25em 0 0;
 902 }
 903 .post-meta .read-time,
 904 .post-meta .word-count,
 905 .post-meta .lw2-link {
 906         margin: 0 0.25em 0 0.5em;
 907 }
 908 .post-meta .lw2-link {
 909         opacity: 1;
 910 }
 911 .post-meta .comment-count:hover,
 912 .post-meta .lw2-link:hover {
 913         text-decoration: none;
 914         text-shadow:
 915                 0 0 0.5px #fff,
 916                 0 0 1px #fff,
 917                 0 0 8px #777;
 918 }
 919 .post-meta .comment-count:hover::before,
 920 .post-meta .lw2-link:hover::before {
 921         color: #777;
 922 }
 923 .post-meta .read-time:hover::before {
 924         color: #777;
 925         cursor: pointer;
 926 }
 927 .post-meta .comment-count::before {
 928         content: "\F086";
 929 }
 930 .post-meta .read-time::before {
 931         content: "\F017";
 932 }
 933 .post-meta .read-time::after {
 934         content: " min";
 935 }
 936 .post-meta .word-count::before {
 937         content: "\F15C";
 938 }
 939 .post-meta .word-count::after {
 940         content: "";
 941 }
 942 .post-meta .lw2-link::before {
 943         content: "\F0C1";
 944         font-weight: 900;
 945         opacity: 0.8;
 946         font-size: 0.75em;
 947         position: relative;
 948         bottom: 1px;
 949 }
 950
 951 .post .post-meta .author {
 952         margin: 0 0.75em 0 0;
 953 }
 954 .post .post-meta .comment-count {
 955         margin: 0 0.5em;
 956 }
 957 .post .post-meta .lw2-link {
 958         margin: 0 1em 0 0.5em;
 959 }
 960 .post .post-meta .voting-controls {
 961         margin: 0 0 0 0.5em;
 962 }
 963
 964 .post-meta .post-section::before,
 965 .comment-meta .alignment-forum {
 966         color: #fff;
 967         text-shadow:
 968                 1px 1px 0 #090,
 969                 0 1px 0 #090,
 970                 0 0 5px #090;
 971 }
 972 a.post-section:hover {
 973         text-decoration: none;
 974 }
 975 a.post-section:hover::before {
 976         color: #97ff7c;
 977 }
 978 .post-meta .post-section.alignment-forum::before {
 979         text-shadow:
 980                 1px 1px 0   #626dd7,
 981                 0   1px 0   #626dd7,
 982                 0   0   5px #626dd7;
 983 }
 984 a.post-section.alignment-forum:hover::before {
 985         color: #e6e5ff;
 986 }
 987
 988 .bottom-post-meta {
 989         border-color: #ddd;
 990 }
 991
 992 /*============*/
 993 /* LINK POSTS */
 994 /*============*/
 995
 996 .post.link-post a.link-post-link {
 997         text-decoration: none;
 998         font-family: <?php echo $UI_font; ?>;
 999         font-weight: 600;
1000 }
1001 .post.link-post a.link-post-link:hover {
1002         color: #c00;
1003 }
1004 .post.link-post a.link-post-link:hover::before {
1005         color: #4879ec;
1006         text-shadow:
1007                 0.5px 0.5px 0 #fff,
1008                 -0.5px -0.5px 0 #fff,
1009                 0 0 2px #fff,
1010                 0 0 3px #00c;
1011 }
1012 .post.link-post a.link-post-link:focus {
1013         color: #777;
1014         border-bottom: 2px dotted #777;
1015 }
1016
1017 /*==========*/
1018 /* COMMENTS */
1019 /*==========*/
1020
1021 #comments::before {
1022         border-top: 1px solid #000;
1023         box-shadow: 0 3px 4px -4px #000 inset;
1024 }
1025 @-moz-document url-prefix() {
1026         #comments::before {
1027                 box-shadow: 0 3px 3px -4px #000 inset;
1028         }
1029 }
1030 #content > .comment-thread .comment-meta a.date:focus,
1031 #content > .comment-thread .comment-meta a.permalink:focus {
1032         color: #999;
1033         outline: 2px dotted #aaa;
1034         position: relative;
1035         background-color: #fff;
1036 }
1037 #content > .comment-thread .comment-meta a.date:focus {
1038         padding: 0 4px;
1039         left: -4px;
1040 }
1041 #content > .comment-thread .comment-meta a.date:focus + * {
1042         margin-left: -8px;
1043 }
1044 #content > .comment-thread .comment-meta a.permalink:focus {
1045         padding: 0 5px;
1046         left: -5px;
1047 }
1048 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1049         margin-left: -10px;
1050 }
1051 .comment-item {
1052         border: 1px solid #ccc;
1053         background-color: var(--GW-comment-background-color);
1054 }
1055 .comment-parent-link::after {
1056         box-shadow:
1057                 0 28px 16px -16px var(--GW-comment-parent-background-color) inset,
1058                 4px 16px 0 12px var(--GW-comment-background-color-target) inset,
1059                 4px     4px 0 12px var(--GW-comment-background-color-target) inset;
1060 }
1061
1062 /*================================*/
1063 /* DEEP COMMENT THREAD COLLAPSING */
1064 /*================================*/
1065
1066 .comment-item input[id^="expand"] + label::after {
1067         color: <?php echo $hyperlink_color; ?>;
1068         font-weight: 600;
1069 }
1070 .comment-item input[id^="expand"] + label:hover::after {
1071         color: #c00;
1072 }
1073 .comment-item input[id^="expand"] + label:active::after,
1074 .comment-item input[id^="expand"] + label:focus::after{
1075         color: #c00;
1076 }
1077 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
1078         border-width: 1px 0 0 0;
1079 }
1080
1081 /*==============*/
1082 /* COMMENT-META */
1083 /*==============*/
1084
1085 .comment-meta a {
1086         color: #222;
1087 }
1088 .comment-meta .author {
1089         color: #999;
1090         font-size: 1.25em;
1091         font-weight: 600;
1092 }
1093 .comment-meta .author:hover {
1094         text-decoration: none;
1095         color: #090;
1096 }
1097 .comment-item .author:not(.redacted).original-poster::after {
1098         opacity: 0.8;
1099 }
1100
1101 .comment-item .voting-controls.active-controls::after,
1102 .comment-item .voting-controls .karma-value::after,
1103 .post .voting-controls.active-controls::after,
1104 .post .voting-controls .karma-value::after,
1105 .author::before {
1106         background-color: #fff;
1107         color: #999;
1108         border-radius: 4px;
1109         box-shadow: 0 0 0 1px #ddd inset;
1110 }
1111 .comment-item .voting-controls.active-controls::after,
1112 .post .voting-controls.active-controls::after {
1113         padding: 6px 4px 4px 4px;
1114         bottom: -44px;
1115 }
1116 .comment-item .voting-controls .karma-value::after,
1117 .post .voting-controls .karma-value::after {
1118         padding: 2px 8px 1px 8px;
1119         top: -25px;
1120         min-width: 56px;
1121 }
1122
1123 /*====================*/
1124 /* ANTI-KIBITZER MODE */
1125 /*====================*/
1126
1127 .author.redacted,
1128 .inline-author.redacted {
1129         opacity: 0.8;
1130         font-weight: 400;
1131 }
1132
1133 .karma-value.redacted {
1134         opacity: 0.4;
1135 }
1136
1137 .link-post-domain.redacted {
1138         opacity: 0.7;
1139 }
1140
1141 /*===========================*/
1142 /* COMMENT THREAD NAVIGATION */
1143 /*===========================*/
1144
1145 div.comment-parent-link {
1146         font-weight: 600;
1147 }
1148 a.comment-parent-link {
1149         font-weight: 400;
1150 }
1151 a.comment-parent-link::before {
1152         color: #bbb;
1153 }
1154 a.comment-parent-link:hover::before {
1155         background-color: #ffd;
1156         color: #999;
1157 }
1158
1159 div.comment-child-links {
1160         font-weight: 600;
1161 }
1162 div.comment-child-links a {
1163         font-weight: 400;
1164 }
1165 .comment-child-link::before {
1166         color: #aaa;
1167 }
1168
1169 .comment-item-highlight {
1170         box-shadow:
1171                 0 0     2px #e7b200,
1172                 0 0     3px #e7b200,
1173                 0 0     5px #e7b200,
1174                 0 0     7px #e7b200,
1175                 0 0 10px #e7b200;
1176         border: 1px solid #e7b200;
1177 }
1178 .comment-item-highlight-faint {
1179         box-shadow:
1180                 0 0     2px #f8e7b5,
1181                 0 0     3px #f8e7b5,
1182                 0 0     5px #f8e7b5,
1183                 0 0     7px #f8e7b5,
1184                 0 0 10px #f8e7b5;
1185         border: 1px solid #f8e7b5;
1186 }
1187
1188 .comment-popup {
1189         background-color: #fff;
1190 }
1191
1192 /*=======================*/
1193 /* COMMENTS COMPACT VIEW */
1194 /*=======================*/
1195
1196 #comments-list-mode-selector button {
1197         box-shadow:
1198                 0 0 0 4px #fff inset,
1199                 0 0 0 5px #bbb inset;
1200 }
1201 #comments-list-mode-selector button:hover,
1202 #comments-list-mode-selector button.selected {
1203         box-shadow:
1204                 0 0 0 5px #bbb inset;
1205 }
1206 #content.compact > .comment-thread .comment-item::after {
1207         color: <?php echo $hyperlink_color; ?>;
1208         background: linear-gradient(to right, transparent 0%, #fff 50%, #fff 100%);
1209 }
1210
1211 @media only screen and (hover: hover) {
1212         #content.compact > .comment-thread .comment-item:hover .comment,
1213         #content.compact > .comment-thread .comment-item.expanded .comment {
1214                 background-color: #fff;
1215                 outline: 3px solid <?php echo $hyperlink_color; ?>;
1216         }
1217         #content.compact > .comment-thread .comment-item:hover .comment::before,
1218         #content.compact > .comment-thread .comment-item.expanded .comment::before {
1219                 background-color: #fff;
1220                 box-shadow:
1221                         0 0  3px #fff,
1222                         0 0  5px #fff,
1223                         0 0  7px #fff,
1224                         0 0 10px #fff,
1225                         0 0 20px #fff,
1226                         0 0 30px #fff,
1227                         0 0 40px #fff;
1228         }
1229 }
1230 @media only screen and (hover: none) {
1231         #content.compact > .comment-thread.expanded .comment-item .comment {
1232                 background-color: #fff;
1233                 outline: 3px solid <?php echo $hyperlink_color; ?>;
1234         }
1235         #content.compact > .comment-thread.expanded .comment-item .comment::before {
1236                 background-color: #fff;
1237                 box-shadow:
1238                         0 0  3px #fff,
1239                         0 0  5px #fff,
1240                         0 0  7px #fff,
1241                         0 0 10px #fff,
1242                         0 0 20px #fff,
1243                         0 0 30px #fff,
1244                         0 0 40px #fff;
1245         }
1246 }
1247
1248 #content.user-page.compact > h1.listing {
1249         margin-top: 0.5rem;
1250 }
1251 #content.user-page.compact > h1.listing + .post-meta {
1252         margin-bottom: 0.5rem;
1253 }
1254
1255 /*===========================*/
1256 /* HIGHLIGHTING NEW COMMENTS */
1257 /*===========================*/
1258
1259 .new-comment::before {
1260         outline: 2px solid #9037ff;
1261         box-shadow:
1262                 0 0 6px -2px #9037ff inset,
1263                 0 0 4px #9037ff,
1264                 0 0 6px #9037ff;
1265 }
1266
1267 /*=================================*/
1268 /* COMMENT THREAD MINIMIZE BUTTONS */
1269 /*=================================*/
1270
1271 .comment-minimize-button {
1272         color: #ccc;
1273 }
1274 .comment-minimize-button:hover {
1275         color: #aaa;
1276         text-shadow: <?php echo $white_glow; ?>;
1277 }
1278 .comment-minimize-button::after {
1279         font-family: <?php echo $UI_font; ?>;
1280         color: #777;
1281 }
1282 .comment-minimize-button.maximized::after {
1283         color: #ccc;
1284 }
1285
1286 /*=================================*/
1287 /* INDIVIDUAL COMMENT THREAD PAGES */
1288 /*=================================*/
1289
1290 .individual-thread-page > h1 {
1291         font-weight: normal;
1292 }
1293
1294 /*==============*/
1295 /* VOTE BUTTONS */
1296 /*==============*/
1297
1298 .vote {
1299         position: relative;
1300 }
1301 .vote::before {
1302         position: relative;
1303         z-index: 1;
1304 }
1305 .vote::after {
1306         position: absolute;
1307 }
1308
1309 .karma .upvote::before {
1310         content: "\F077";
1311         top: 1px;
1312 }
1313 .karma .downvote::before {
1314         content: "\F078";
1315         left: -2px;
1316 }
1317 .karma .upvote::after {
1318         content: "\F325";
1319         left: 6px;
1320         bottom: 4px;
1321 }
1322 .karma .downvote::after {
1323         content: "\F322";
1324         left: 4px;
1325         top: 4px;
1326 }
1327 @-moz-document url-prefix() {
1328         .karma .upvote::after {
1329                 left: 4px;
1330                 bottom: 4px;
1331         }
1332         .karma .downvote::after {
1333                 left: 2px;
1334                 top: 5px;
1335         }
1336 }
1337
1338 .agreement .upvote::before {
1339         content: "\F00C";
1340         top: 1px;
1341 }
1342 .agreement .downvote::before {
1343         content: "\F00D";
1344         left: -2px;
1345 }
1346 .agreement .upvote::after {
1347         content: "\F560";
1348         left: 6px;
1349         bottom: 2px;
1350 }
1351 .agreement .downvote::after {
1352         content: "\E59B";
1353         left: 2px;
1354         top: 1px;
1355 }
1356 @-moz-document url-prefix() {
1357         .agreement .upvote::after {
1358                 left: 4px;
1359                 bottom: 2px;
1360         }
1361         .agreement .downvote::after {
1362                 left: 0;
1363                 top: 1px;
1364         }
1365 }
1366
1367 /**********/
1368 /*      States.
1369  */
1370
1371 /*      _ 1
1372  */
1373 .vote {
1374         color: #c8c8c8;
1375 }
1376
1377 /*      _ 2
1378  */
1379 .upvote:hover,
1380 .upvote:not(.none) {
1381         color: var(--GW-upvote-button-color);
1382         text-shadow:
1383                 0 0 0.5px #fff,
1384                 0 0 8px #0f0;
1385 }
1386 .downvote:hover,
1387 .downvote:not(.none) {
1388         color: var(--GW-downvote-button-color);
1389         text-shadow:
1390                 0 0 0.5px #fff,
1391                 0 0 8px #f00;
1392 }
1393
1394 /*      0 _
1395  */
1396 .vote::after {
1397         visibility: hidden;
1398 }
1399
1400 /*      1,2 _
1401  */
1402 .vote.two-temp::after,
1403 .vote.two::after {
1404         visibility: visible;
1405 }
1406
1407 /*      1 _
1408  */
1409 .vote.two-temp::after {
1410         color: #c8c8c8;
1411         text-shadow: none;
1412 }
1413
1414 /*      Disabled.
1415  */
1416 .vote:disabled {
1417         visibility: unset;
1418         color: #e6e6e6;
1419 }
1420 .vote:disabled:hover {
1421         text-shadow: none;
1422 }
1423
1424 /*===========================*/
1425 /* COMMENTING AND POSTING UI */
1426 /*===========================*/
1427
1428 .posting-controls input[type='submit'] {
1429         background-color: #fff;
1430         border: 1px solid #aaa;
1431         font-weight: bold;
1432 }
1433 .posting-controls input[type='submit']:hover,
1434 .posting-controls input[type='submit']:focus {
1435         background-color: #ddd;
1436         border: 1px solid #999;
1437 }
1438
1439 .comment-controls .cancel-comment-button {
1440         font-weight: 600;
1441         color: #c00;
1442         text-shadow:
1443                 0 0 1px #fff,
1444                 0 0 2px #fff;
1445 }
1446 .comment-controls .cancel-comment-button:hover {
1447         color: #f00;
1448         text-shadow: <?php echo $white_glow; ?>;
1449 }
1450
1451 .new-comment-button {
1452         font-weight: 600;
1453 }
1454
1455 .comment-controls .delete-button,
1456 .comment-controls .retract-button {
1457         color: #d00;
1458 }
1459 .comment-controls .edit-button,
1460 .comment-controls .unretract-button {
1461         color: #0b0;
1462 }
1463 .comment-controls .action-button:hover {
1464         color: #f00;
1465 }
1466
1467 .edit-post-link,
1468 .edit-post-link:visited {
1469         color: #090;
1470 }
1471
1472 .posting-controls textarea {
1473         font-weight: 400;
1474         font-family: <?php echo $text_font; ?>;
1475         color: #000;
1476         background-color: #fff;
1477         border-color: #aaa;
1478         box-shadow:
1479                 0 0 0 1px #eee inset;
1480 }
1481 @-moz-document url-prefix() {
1482         .posting-controls textarea {
1483                 font-weight: <?php global $platform; echo ($platform == 'Windows' ? '300' : '400'); ?>;
1484         }
1485 }
1486 .posting-controls textarea:focus {
1487         background-color: #ffe;
1488         border-color: <?php echo $hyperlink_color; ?>;
1489         box-shadow:
1490                 0 0 0 1px #ddf inset,
1491                 0 0 0 1px #fff,
1492                 0 0 0 2px <?php echo $hyperlink_color; ?>;
1493 }
1494 .posting-controls.edit-existing-post textarea:focus,
1495 .posting-controls form.edit-existing-comment textarea:focus {
1496         border-color: #090;
1497         box-shadow:
1498                 0 0 0 1px #81ff7f inset,
1499                 0 0 0 1px #fff,
1500                 0 0 0 2px #090;
1501 }
1502
1503 /*= Scroll bars =*/
1504
1505 .posting-controls textarea::-webkit-scrollbar {
1506         width: 16px;
1507         background-color: transparent;
1508 }
1509 .posting-controls textarea::-webkit-scrollbar-track {
1510         background-color: #eee;
1511         border-left: 1px solid #bbb;
1512         border-top: 1px solid #eee;
1513 }
1514 .posting-controls textarea:focus::-webkit-scrollbar-track {
1515         border-left: 1px solid #f60;
1516         border-top: 1px solid #ddf;
1517 }
1518 .posting-controls textarea::-webkit-scrollbar-thumb {
1519         background-color: #bbb;
1520         box-shadow: 0 0 0 1px #eee inset;
1521         border-left: 1px solid #bbb;
1522 }
1523 .posting-controls textarea:focus::-webkit-scrollbar-thumb {
1524         border-left: 1px solid #f60;
1525         background-color: #f60;
1526         box-shadow:
1527                 0 1px 0 0 #ddf inset,
1528                 0 0 0 1px #eee inset;
1529 }
1530
1531 .posting-controls.edit-existing-post textarea:focus::-webkit-scrollbar-track,
1532 .posting-controls form.edit-existing-comment textarea:focus::-webkit-scrollbar-track {
1533         border-left: 1px solid #090;
1534 }
1535 .posting-controls.edit-existing-post textarea:focus::-webkit-scrollbar-thumb,
1536 .posting-controls form.edit-existing-comment textarea:focus::-webkit-scrollbar-thumb {
1537         border-left: 1px solid #090;
1538         background-color: #28a708;
1539 }
1540
1541 /* GUIEdit buttons */
1542
1543 .guiedit-buttons-container {
1544         background-image: linear-gradient(to bottom, #fff 0%, #ddd 50%, #ccc 75%, #aaa 100%);
1545 }
1546
1547 .posting-controls.edit-existing-post .guiedit-buttons-container button,
1548 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
1549         color: #050;
1550 }
1551 button.guiedit {
1552         font-family: Font Awesome, <?php echo $text_font; ?>;
1553 }
1554
1555 button.guiedit::after {
1556         font-family: <?php echo $UI_font; ?>;
1557         color: #777;
1558         text-shadow: none;
1559 }
1560
1561 /* Markdown hints */
1562
1563 #markdown-hints-checkbox + label {
1564         color: #999;
1565 }
1566 #markdown-hints-checkbox + label:hover {
1567         color: #e00;
1568         text-shadow: <?php echo $white_glow; ?>;
1569 }
1570 #markdown-hints {
1571         border: 1px solid #c00;
1572         background-color: #ffa;
1573 }
1574
1575 /*================*/
1576 /* EDIT POST FORM */
1577 /*================*/
1578
1579 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1580         top: -2px;
1581 }
1582 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1583         border-radius: 3px;
1584         border: 1px solid #ddd;
1585         color: #777;
1586 }
1587 @media only screen and (hover:hover) {
1588         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1589         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1590                 text-shadow:
1591                         0 0 1px #fff,
1592                         0 0 2px #fff,
1593                         0 0 2.5px #aaa;
1594         }
1595         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1596         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1597                 border-color: #aaa;
1598         }
1599 }
1600 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1601         content: "\F00C";
1602 }
1603 #edit-post-form input[type='radio'] + label {
1604         color: #777;
1605         border-color: #ddd;
1606         padding: 4px 12px 5px 12px;
1607 }
1608 #edit-post-form input[type='radio'][value='all'] + label {
1609         border-radius: 8px 0 0 8px;
1610         border-width: 1px;
1611 }
1612 #edit-post-form input[type='radio'][value='drafts'] + label {
1613         border-radius: 0 8px 8px 0;
1614 }
1615 #edit-post-form input[type='radio'] + label:hover,
1616 #edit-post-form input[type='radio']:focus + label {
1617         background-color: #ddd;
1618         color: #000;
1619 }
1620 #edit-post-form input[type='radio']:focus + label {
1621         color: #000;
1622         box-shadow:
1623                 0 0 0 1px #aaa;
1624 }
1625 #edit-post-form input[type='radio']:checked + label {
1626         background-color: #ddd;
1627         border-color: #ddd;
1628         color: #000;
1629         text-shadow:
1630                 0 -1px 0 #fff,
1631                 0 0.5px 0.5px #000;
1632 }
1633
1634 /*=======*/
1635 /* LINKS */
1636 /*=======*/
1637
1638 a {
1639         text-decoration: none;
1640         color: <?php echo $hyperlink_color; ?>;
1641 }
1642 a:visited {
1643         color: #ff943b;
1644 }
1645 a:hover {
1646         text-decoration: underline;
1647 }
1648
1649 /*=========*/
1650 /* BUTTONS */
1651 /*=========*/
1652
1653 button,
1654 input[type='submit'] {
1655         color: <?php echo $hyperlink_color; ?>;
1656 }
1657
1658 .button,
1659 .button:visited {
1660         color: #999;
1661 }
1662
1663 button:hover,
1664 input[type='submit']:hover,
1665 button:focus,
1666 input[type='submit']:focus {
1667         color: #d00;
1668         text-shadow: <?php echo $white_glow; ?>;
1669 }
1670 button:active,
1671 input[type='submit']:active {
1672         color: #f00;
1673         transform: scale(0.9);
1674 }
1675 .button:hover {
1676         color: #d00;
1677         text-shadow: <?php echo $white_glow; ?>;
1678         text-decoration: none;
1679 }
1680 .button:active {
1681         transform: scale(0.9);
1682 }
1683 .button:focus:not(:hover) {
1684         transform: none;
1685 }
1686 @-moz-document url-prefix() {
1687         .button:active {
1688                 transform: none;
1689         }
1690 }
1691
1692 /*==========*/
1693 /* HEADINGS */
1694 /*==========*/
1695
1696 .body-text h1,
1697 .body-text h2,
1698 .body-text h4 {
1699         font-family: <?php echo $UI_font; ?>;
1700 }
1701 .body-text h3,
1702 .body-text h5,
1703 .body-text h6 {
1704         font-family: <?php echo $UI_font_smallcaps; ?>;
1705 }
1706 .body-text h1,
1707 .body-text h2,
1708 .body-text h3,
1709 .body-text h4,
1710 .body-text h5,
1711 .body-text h6 {
1712         font-weight: 400;
1713 }
1714 .body-text h6 {
1715         color: #555;
1716 }
1717 .body-text h1 {
1718         border-bottom: 1px solid #aaa;
1719 }
1720 .post-body h2 {
1721         border-bottom: 1px dotted #ccc;
1722 }
1723
1724 /*========*/
1725 /* QUOTES */
1726 /*========*/
1727
1728 blockquote {
1729         border-left: 5px solid #ccc;
1730 }
1731
1732 /*========*/
1733 /* IMAGES */
1734 /*========*/
1735
1736 #content img,
1737 #content figure.image img {
1738         border: 1px solid #ccc;
1739 }
1740 #content figure img {
1741         border: 1px solid #000;
1742 }
1743 #content img[src$='.svg'],
1744 #content figure img[src$='.svg'] {
1745         border: none;
1746 }
1747 #content img[style^='float'] {
1748         border: 1px solid transparent;
1749 }
1750
1751 /*========*/
1752 /* TABLES */
1753 /*========*/
1754
1755 #content:not(.tag-index-page) .body-text table,
1756 #content:not(.tag-index-page) .body-text table th,
1757 #content:not(.tag-index-page) .body-text table td {
1758         border: 1px solid #ddd;
1759 }
1760
1761 /*======*/
1762 /* MISC */
1763 /*======*/
1764
1765 hr {
1766         border-bottom: 1px solid #999;
1767 }
1768
1769 code {
1770         background-color: #f6f6ff;
1771         border: 1px solid #ddf;
1772         border-radius: 4px;
1773 }
1774
1775 input[type='text'],
1776 input[type='search'],
1777 input[type='password'] {
1778         background-color: #fff;
1779         border: 1px solid #ddd;
1780         color: #000;
1781 }
1782 input[type='text']:focus,
1783 input[type='search']:focus,
1784 input[type='password']:focus {
1785         background-color: #ffe;
1786         border: 1px solid #bbb;
1787         box-shadow: 0 0 1px #bbb;
1788 }
1789
1790 select {
1791         color: #000;
1792 }
1793
1794 .frac {
1795         padding-left: 2px;
1796 }
1797 .frac sup {
1798         position: relative;
1799         left: -1px;
1800 }
1801 .frac sub {
1802         position: relative;
1803         left: -0.5px;
1804 }
1805
1806 /*============*/
1807 /* ABOUT PAGE */
1808 /*============*/
1809
1810 .about-page mark {
1811         background-color: #e6e6e6;
1812         text-decoration: none;
1813         box-shadow:
1814                 0 -1px 0 0 #000 inset,
1815                 0 -3px 1px -2px #000 inset;
1816         padding: 0 1px;
1817 }
1818
1819 #content.about-page .accesskey-table {
1820         font-family: <?php echo $UI_font; ?>;
1821         border-color: #ddd;
1822 }
1823
1824 #content.about-page img {
1825         border: 1px solid #000;
1826 }
1827
1828 /*========================*/
1829 /* QUALIFIED HYPERLINKING */
1830 /*========================*/
1831
1832 #aux-about-link a {
1833         color: #777;
1834 }
1835 #aux-about-link a:hover {
1836         opacity: 1.0;
1837         text-shadow: <?php echo $white_glow; ?>;
1838 }
1839
1840 .qualified-linking label {
1841         color: <?php echo $hyperlink_color; ?>;
1842 }
1843 .qualified-linking label:hover {
1844         text-shadow:
1845                 0 0 1px #fff,
1846                 0 0 3px #fff,
1847                 0 0 5px #00e;
1848 }
1849
1850 .qualified-linking-toolbar {
1851         border: 1px solid #000;
1852         background-color: #fff;
1853 }
1854 .qualified-linking-toolbar a {
1855         background-color: #eee;
1856         border: 1px solid #ccc;
1857         border-radius: 4px;
1858         color: <?php echo $hyperlink_color; ?>;
1859 }
1860 .qualified-linking-toolbar a:visited {
1861         color: <?php echo $hyperlink_color; ?>;
1862 }
1863 .qualified-linking-toolbar a:hover {
1864         text-decoration: none;
1865         background-color: #ddd;
1866         text-shadow: <?php echo $white_glow; ?>;
1867 }
1868 .qualified-linking label::after {
1869         background-color: #eee;
1870         opacity: 0.8;
1871 }
1872
1873 /*======*/
1874 /* MATH */
1875 /*======*/
1876
1877 .mathjax-block-container::-webkit-scrollbar {
1878         height: 12px;
1879         background-color: #f6f6ff;
1880         border-radius: 6px;
1881         border: 1px solid #ddf;
1882 }
1883 .mathjax-block-container::-webkit-scrollbar-thumb {
1884         background-color: #dde;
1885         border-radius: 6px;
1886         border: 1px solid #cce;
1887 }
1888 .mathjax-inline-container::-webkit-scrollbar {
1889         height: 8px;
1890         background-color: #f6f6ff;
1891         border-radius: 4px;
1892         border: 1px solid #ddf;
1893 }
1894 .mathjax-inline-container::-webkit-scrollbar-thumb {
1895         background-color: #dde;
1896         border-radius: 4px;
1897         border: 1px solid #cce;
1898 }
1899
1900 /*=================*/
1901 /* ALIGNMENT FORUM */
1902 /*=================*/
1903
1904 #content.alignment-forum-index-page::before {
1905         background-color: #f1f3ff;
1906 }
1907 #content.alignment-forum-index-page::after {
1908         font-family: <?php echo $UI_font_smallcaps; ?>;
1909         font-weight: 600;
1910         background-color: #626dd7;
1911         -webkit-background-clip: text;
1912         color: transparent;
1913         text-shadow:
1914                 rgba(255,255,255,0.5) 0px 3px 3px;;
1915 }
1916 @media only screen and (hover: hover) {
1917         #content.alignment-forum-index-page h1.listing a:hover,
1918         #content.alignment-forum-index-page h1.listing a:focus {
1919                 background-color: rgba(241,243,255,0.85);
1920         }
1921 }
1922
1923 /*====================*/
1924 /* FOR NARROW SCREENS */
1925 /*====================*/
1926
1927 @media only screen and (max-width: 1440px) {
1928         #hns-date-picker {
1929                 background-color: #eee;
1930                 opacity: 1.0;
1931         }
1932         #hns-date-picker::before {
1933                 border: 1px solid #ccc;
1934                 border-width: 1px 0 1px 1px;
1935         }
1936 }
1937 @media only screen and (max-width: 1160px) {
1938         #theme-selector {
1939                 background-color: #eee;
1940                 box-shadow:
1941                         0 0 0 1px #999,
1942                         0 0 0 2px transparent;
1943         }
1944         #theme-selector:hover::after {
1945                 background-color: #999;
1946                 width: calc(6em - 3px);
1947                 height: calc(100% - 5px);
1948                 top: 3px;
1949                 left: 100%;
1950         }
1951         #text-size-adjustment-ui button {
1952                 background-color: #ddd;
1953         }
1954         #text-size-adjustment-ui button:hover {
1955                 background-color: #eee;
1956         }
1957         #theme-tweaker-toggle button {
1958                 background-color: #ddd;
1959         }
1960 }
1961 @media only screen and (max-width: 1080px) {
1962         #text-size-adjustment-ui button {
1963                 border: 1px solid #999;
1964                 padding: 0 0 0 1px;
1965                 border-radius: 50%;
1966                 box-shadow:
1967                         0 0 6px #999 inset,
1968                         0 0 0 1px transparent;
1969         }
1970         #theme-tweaker-toggle button {
1971                 border: 1px solid #999;
1972                 box-shadow:
1973                         0 0 10px #999 inset,
1974                         0 0 0 1px transparent;
1975                 border-radius: 50%;
1976                 transform: scale(0.8);
1977         }
1978 }
1979 @media only screen and (max-width: 1020px) {
1980         #quick-nav-ui a {
1981                 box-shadow:
1982                         0 0 0 1px #ccc,
1983                         0 0 0 2px transparent;
1984         }
1985         #new-comment-nav-ui .new-comments-count::before {
1986                 background-color: #eee;
1987                 box-shadow:
1988                         0 0 0 1px #ccc,
1989                         0 0 0 2px transparent;
1990                 border-radius: 8px;
1991         }
1992         #anti-kibitzer-toggle {
1993                 box-shadow:
1994                         0 0 0 1px #ccc,
1995                         0 0 0 2px transparent;
1996                 background-color: #eee;
1997                 border-radius: 6px;
1998                 overflow: hidden;
1999         }
2000 }
2001
2002 /*========*/
2003 /* MOBILE */
2004 /*========*/
2005
2006 /*******************************************************/
2007 @media not screen and (hover:hover) and (pointer:fine) {
2008 /*******************************************************/
2009         #ui-elements-container > div[id$='-ui-toggle'] button  {
2010                 color: #aaa;
2011                 text-shadow:
2012                         0 0 1px #fff,
2013                         0 0 3px #fff,
2014                         0 0 5px #fff,
2015                         0 0 10px #fff,
2016                         0 0 20px #fff,
2017                         0 0 30px #fff;
2018         }
2019
2020         #theme-selector {
2021                 background-color: #eee;
2022                 box-shadow:
2023                         0 0 0 1px #999,
2024                         0 0 1px 3px #fff,
2025                         0 0 3px 3px #fff,
2026                         0 0 5px 3px #fff,
2027                         0 0 10px 3px #fff,
2028                         0 0 20px 3px #fff;
2029                 border-radius: 12px;
2030         }
2031         #theme-selector::before,
2032         #theme-selector .theme-selector-close-button {
2033                 color: #888;
2034                 text-shadow: 0.5px 0.5px 0 #fff;
2035         }
2036         #theme-selector button {
2037                 background-color: #e6e6e6;
2038                 border-radius: 10px;
2039         }
2040         #theme-selector button::after {
2041                 color: #000;
2042                 padding-bottom: 2px;
2043                 max-width: calc(100% - 3.25em);
2044                 overflow: hidden;
2045                 text-overflow: ellipsis;
2046         }
2047         #theme-selector button.selected::after {
2048                 text-shadow:
2049                         0 -1px 0 #fff,
2050                         0 0.5px 0.5px #000;
2051         }
2052
2053         #quick-nav-ui {
2054                 background-color: #fff;
2055         }
2056         #quick-nav-ui a {
2057                 background-color: #eee;
2058                 box-shadow: 0 0 0 1px #999;
2059         }
2060         #quick-nav-ui,
2061         #new-comment-nav-ui,
2062         #hns-date-picker {
2063                 box-shadow:
2064                         0 0 1px 3px #fff,
2065                         0 0 3px 3px #fff,
2066                         0 0 5px 3px #fff,
2067                         0 0 10px 3px #fff,
2068                         0 0 20px 3px #fff;
2069         }
2070         #quick-nav-ui a::after,
2071         #new-comment-nav-ui::before {
2072                 font-family: <?php echo $UI_font; ?>;
2073                 font-weight: 600;
2074                 box-shadow:
2075                         0 0 1px 0 #fff,
2076                         0 0 3px 0 #fff,
2077                         0 0 5px 0 #fff;
2078                 background-color: #fff;
2079                 border-radius: 4px;
2080         }
2081         #quick-nav-ui,
2082         #new-comment-nav-ui {
2083                 border-radius: 8px;
2084         }
2085         #new-comment-nav-ui {
2086                 background-color: #eee;
2087                 border: 1px solid #999;
2088         }
2089         #new-comment-nav-ui::before {
2090                 color: #777;
2091                 font-weight: 600;
2092         }
2093         #new-comment-nav-ui .new-comment-sequential-nav-button {
2094                 box-shadow: 0 0 0 1px #999;
2095                 color: #777;
2096         }
2097         #new-comment-nav-ui .new-comments-count {
2098                 background-color: inherit;
2099                 box-shadow: 0 -1px 0 0 #999;
2100         }
2101         #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2102                 color: #bbb;
2103         }
2104         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2105                 border-radius: 7px 0 0 7px;
2106         }
2107         #new-comment-nav-ui button::after {
2108                 font-family: <?php echo $UI_font; ?>;
2109         }
2110         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2111                 border-radius: 0 7px 7px 0;
2112         }
2113
2114         /*****************************************/
2115         @media only screen and (max-width: 900px) {
2116         /*****************************************/
2117                 h1.listing + .post-meta > * {
2118                         line-height: 1.5;
2119                 }
2120                 h1.listing + .post-meta .post-section::before {
2121                         position: unset;
2122                 }
2123
2124                 .nav-bar-top:not(#primary-bar) .nav-inner {
2125                         font-size: 1em;
2126                 }
2127                 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2128                         padding: 6px 10px;
2129                 }
2130                 .nav-bar-top .nav-inner::before {
2131                         opacity: 0.8;
2132                 }
2133
2134                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
2135                         background-color: #aaa;
2136                 }
2137
2138                 .comment-item .comment-item {
2139                         margin: 0.75em 2px 4px 6px;
2140                 }
2141                 .comment-item .comment-item + .comment-item {
2142                         margin: 1.5em 2px 4px 6px;
2143                 }
2144
2145                 a.comment-parent-link:hover::before {
2146                         background-color: unset;
2147                 }
2148
2149                 .sublevel-nav:not(.sort) .sublevel-item,
2150                 .sublevel-nav:not(.sort) .sublevel-item:first-child,
2151                 .sublevel-nav:not(.sort) .sublevel-item:last-child {
2152                         border-radius: 8px;
2153                         border-width: 1px;
2154                         margin: 2px;
2155                 }
2156         /*******************************************/
2157         } @media only screen and (max-width: 720px) {
2158         /*******************************************/
2159         /*******************************************/
2160         } @media only screen and (max-width: 520px) {
2161         /*******************************************/
2162                 h1.listing {
2163                         font-size: 1.25rem;
2164                         margin: 18px 6px 4px 6px;
2165                         max-width: calc(100% - 12px);
2166                 }
2167                 h1.listing + .post-meta {
2168                         margin: 4px 6px;
2169                 }
2170                 h1.listing .link-post-link {
2171                         top: 2px;
2172                 }
2173
2174                 #content.compact > .comment-thread .comment-item {
2175                         max-height: 108px;
2176                 }
2177
2178                 .textarea-container:focus-within button:active {
2179                         background-color: #ccc;
2180                 }
2181                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
2182                         background-color: #eee;
2183                         border: 1px solid #ddd;
2184                         border-radius: 6px;
2185                 }
2186                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
2187                         border-color: #c00;
2188                         box-shadow:
2189                                 0 0 0 1px #fff,
2190                                 0 0 0 2px #c00;
2191                         color: #c00;
2192                         font-weight: 600;
2193                 }
2194                 .textarea-container:focus-within .guiedit-buttons-container {
2195                         background-color: #fff;
2196                         border-top: 1px solid #ddf;
2197                 }
2198                 #content.conversation-page .textarea-container:focus-within::after {
2199                         background-color: #fff;
2200                 }
2201                 .textarea-container:focus-within button.guiedit {
2202                         background-color: #eee;
2203                         border: 1px solid #ddd;
2204                         border-radius: 6px;
2205                 }
2206                 #markdown-hints::after {
2207                         color: #090;
2208                 }
2209
2210                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2211                         top: 2px;
2212                 }
2213                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2214                         top: 1px;
2215                 }
2216         }
2217 }