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