www/theme-classic.css.php

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