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