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