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