www/theme-ultramodern.css.php

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