www/theme-ultramodern.css.php

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