www/theme-rts.css.php

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