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