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 .post-body .contents ul {
 809         font-size: 1em;
 810 }
 811 .post-body .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 /*===========*/
 863 /* POST-META */
 864 /*===========*/
 865
 866 .post-meta {
 867         line-height: 1.9;
 868 }
 869 .post-meta .post-section::before,
 870 .comment-meta .alignment-forum {
 871         color: #fff;
 872         text-shadow:
 873                 1px 1px 0 #090,
 874                 0 1px 0 #090,
 875                 0 0 5px #090;
 876 }
 877 a.post-section:hover::before {
 878     color: #97ff7c;
 879 }
 880 .post-meta .post-section.alignment-forum::before {
 881         text-shadow:
 882                 1px 1px 0   #626dd7,
 883                 0   1px 0   #626dd7,
 884                 0   0   5px #626dd7;
 885 }
 886 a.post-section.alignment-forum:hover::before {
 887     color: #e6e5ff;
 888 }
 889
 890 .bottom-post-meta {
 891         border-color: #ddd;
 892 }
 893
 894 .post .post-meta {
 895         position: relative;
 896         font-size: 0.875rem;
 897         justify-content: flex-start;
 898         padding-left: 30px;
 899 }
 900 .post .post-meta .author {
 901         font-weight: bold;
 902         color: #6a8a6b;
 903         text-decoration: none;
 904 }
 905 .post .post-meta .author:hover {
 906         color: #3d3d3e;
 907 }
 908 .post .post-meta .date{
 909         color: #999;
 910         font-style: italic;
 911 }
 912 .post .post-meta a {
 913         color: #8a8a8b;
 914         text-decoration: underline;
 915 }
 916 .post .post-meta a:hover {
 917         color: #3d3d3e;
 918 }
 919
 920 .post .post-meta .voting-controls {
 921         order: -1;
 922 }
 923 .post .post-meta .karma-value {
 924         background-color: #538d4d;
 925         color: #fff;
 926         font-weight: bold;
 927         font-size: 0.8125rem;
 928         border-radius: 1.125em;
 929         padding: 2px 6px 1px 6px;
 930         text-align: center;
 931         min-width: 2.125em;
 932         display: block;
 933         float: left;
 934         margin: 0 0.5em 0 0;
 935 }
 936 .post .post-meta .karma-value span,
 937 .post .post-meta .lw2-link span,
 938 .post .post-meta .comment-count span {
 939         display: none;
 940 }
 941
 942 .post .post-meta .comment-count::before {
 943         content: "Comments ("
 944 }
 945 .post .post-meta .comment-count::after {
 946         content: ")"
 947 }
 948
 949 .post .post-meta .post-section::before {
 950         position: absolute;
 951         top: 1px;
 952         left: 0;
 953 }
 954 .post .bottom-post-meta .post-section::before {
 955         top: 21px;
 956 }
 957
 958 /*============*/
 959 /* LINK POSTS */
 960 /*============*/
 961
 962 .post.link-post > .post-body > p:first-child {
 963         margin: 0;
 964 }
 965 .post.link-post a.link-post-link {
 966         text-decoration: none;
 967         font-family: <?php echo $UI_font; ?>;
 968         font-weight: 600;
 969 }
 970 .post.link-post a.link-post-link:hover {
 971         color: #c00;
 972 }
 973 .post.link-post a.link-post-link:hover::before {
 974         color: #4879ec;
 975         text-shadow:
 976                 0.5px 0.5px 0 #fff,
 977                 -0.5px -0.5px 0 #fff,
 978                 0 0 2px #fff,
 979                 0 0 3px #00c;
 980 }
 981 .post.link-post a.link-post-link:focus {
 982         color: #aaa;
 983         border-bottom: 2px dotted #aaa;
 984 }
 985
 986 /*=======*/
 987 /* POSTS */
 988 /*=======*/
 989
 990 h1.post-title {
 991         font-size: 1.375rem;
 992         text-align: left;
 993         margin: 2em 0 0.5em 0;
 994         line-height: 1.2;
 995 }
 996
 997 /*==========*/
 998 /* COMMENTS */
 999 /*==========*/
1000
1001 #comments::before {
1002         border-top: 1px solid #000;
1003         box-shadow: 0 3px 4px -4px #000 inset;
1004 }
1005 @-moz-document url-prefix() {
1006         #comments::before {
1007                 box-shadow: 0 3px 3px -4px #000 inset;
1008         }
1009 }
1010 #content > .comment-thread .comment-meta a.date:focus,
1011 #content > .comment-thread .comment-meta a.permalink:focus {
1012         color: #444;
1013         outline: 2px dotted #444;
1014         position: relative;
1015         background-color: #fff;
1016         padding: 0 5px;
1017         left: -5px;
1018 }
1019 #content > .comment-thread .comment-meta a.date:focus + *,
1020 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1021         margin-left: -10px;
1022 }
1023 .comment-item {
1024         border: 1px solid #bbbcbf;
1025         background-color: var(--GW-comment-background-color);
1026 }
1027 .comment-item .comment-item {
1028         margin: 1em -1px 8px 16px;
1029 }
1030 .comment-item .comment-item + .comment-item {
1031         margin: 2em -1px 8px 16px;
1032 }
1033 .comment-parent-link::after {
1034         box-shadow:
1035                 0 28px 16px -16px var(--GW-comment-parent-background-color) inset,
1036                 4px 16px 0 12px var(--GW-comment-background-color-target) inset,
1037                 4px     4px 0 12px var(--GW-comment-background-color-target) inset;
1038 }
1039
1040 /*================================*/
1041 /* DEEP COMMENT THREAD COLLAPSING */
1042 /*================================*/
1043
1044 .comment-item input[id^="expand"] + label::after {
1045         color: <?php echo $hyperlink_color; ?>;
1046         font-weight: 600;
1047 }
1048 .comment-item input[id^="expand"] + label:hover::after {
1049         color: #c00;
1050 }
1051 .comment-item input[id^="expand"] + label:active::after,
1052 .comment-item input[id^="expand"] + label:focus::after{
1053         color: #c00;
1054 }
1055 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
1056         border-width: 1px 0 0 0;
1057 }
1058
1059 /*==============*/
1060 /* COMMENT-META */
1061 /*==============*/
1062
1063 .comment-meta > * {
1064         font-size: 0.9375rem;
1065         padding-top: 2px;
1066 }
1067 .comment-meta .author {
1068         font-weight: bold;
1069         color: #538d4d;
1070 }
1071 .comment-meta .date {
1072         color: #999;
1073         font-style: italic;
1074 }
1075 .comment-meta .date:hover {
1076         color: #777;
1077 }
1078 .comment-meta .karma-value,
1079 .comment-controls .voting-controls .karma-value {
1080         color: #666;
1081         float: left;
1082         margin-right: 0.5em;
1083 }
1084 .comment-meta .karma-value:only-child {
1085         float: none;
1086 }
1087 .comment-item .author:not(.redacted).original-poster::after {
1088         opacity: 0.8;
1089 }
1090
1091 .comment-item .voting-controls.active-controls::after,
1092 .comment-item .voting-controls .karma-value::after,
1093 .post .voting-controls.active-controls::after,
1094 .post .voting-controls .karma-value::after,
1095 .author::before {
1096         background-color: #fff;
1097         color: #888;
1098         box-shadow: 0 0 0 1px #ccc inset;
1099         border-radius: 4px;
1100 }
1101 .comment-item .voting-controls.active-controls::after,
1102 .post .voting-controls.active-controls::after {
1103         padding: 6px;
1104         max-width: unset;
1105         bottom: -46px;
1106         width: 110px;
1107 }
1108 .comment-item .voting-controls .karma-value::after,
1109 .post .voting-controls .karma-value::after {
1110         padding: 2px 8px;
1111         top: -36px;
1112         min-width: 64px;
1113         font-weight: normal;
1114 }
1115
1116 /*====================*/
1117 /* COMMENT PERMALINKS */
1118 /*====================*/
1119
1120 .comment-meta .permalink,
1121 .comment-meta .lw2-link,
1122 .individual-thread-page .comment-parent-link:empty {
1123         top: 1px;
1124         filter: grayscale(50%);
1125 }
1126 .comment-meta .permalink,
1127 .comment-meta .lw2-link,
1128 .individual-thread-page .comment-parent-link:empty {
1129         filter: unset;
1130 }
1131
1132 /*====================*/
1133 /* ANTI-KIBITZER MODE */
1134 /*====================*/
1135
1136 .author.redacted,
1137 .inline-author.redacted {
1138         opacity: 0.8;
1139         font-weight: 400;
1140 }
1141
1142 .karma-value.redacted {
1143         opacity: 0.5;
1144 }
1145
1146 .link-post-domain.redacted {
1147         opacity: 0.5;
1148 }
1149
1150 /*===========================*/
1151 /* COMMENT THREAD NAVIGATION */
1152 /*===========================*/
1153
1154 div.comment-parent-link {
1155         font-weight: bold;
1156 }
1157 a.comment-parent-link {
1158         font-weight: normal;
1159 }
1160 a.comment-parent-link::before {
1161         color: #bbb;
1162 }
1163 a.comment-parent-link:hover::before {
1164         background-color: #ffd;
1165         color: #999;
1166 }
1167
1168 div.comment-child-links {
1169         font-weight: bold;
1170 }
1171 div.comment-child-links a {
1172         font-weight: normal;
1173 }
1174 .comment-child-link::before {
1175         color: #bbb;
1176 }
1177
1178 .comment-item-highlight {
1179         box-shadow:
1180                 0 0     2px #e7b200,
1181                 0 0     3px #e7b200,
1182                 0 0     5px #e7b200,
1183                 0 0     7px #e7b200,
1184                 0 0 10px #e7b200;
1185         border: 1px solid #e7b200;
1186 }
1187 .comment-item-highlight-faint {
1188         box-shadow:
1189                 0 0     2px #f8e7b5,
1190                 0 0     3px #f8e7b5,
1191                 0 0     5px #f8e7b5,
1192                 0 0     7px #f8e7b5,
1193                 0 0 10px #f8e7b5;
1194         border: 1px solid #f8e7b5;
1195 }
1196
1197 .comment-popup {
1198         background-color: #fff;
1199 }
1200
1201 /*=======================*/
1202 /* COMMENTS COMPACT VIEW */
1203 /*=======================*/
1204
1205 #comments-list-mode-selector button {
1206         box-shadow:
1207                 0 0 0 4px #fff inset,
1208                 0 0 0 5px #bbb inset;
1209 }
1210 #comments-list-mode-selector button:hover,
1211 #comments-list-mode-selector button.selected {
1212         box-shadow:
1213                 0 0 0 5px #bbb inset;
1214 }
1215 #content.compact > .comment-thread .comment-item {
1216     max-height: 57px;
1217 }
1218 #content.compact > .comment-thread .comment-item::after {
1219         color: <?php echo $hyperlink_color; ?>;
1220         background: linear-gradient(to right, transparent 0%, #fff 50%, #fff 100%);
1221 }
1222
1223 @media only screen and (hover: hover) {
1224         #content.compact > .comment-thread .comment-item:hover .comment,
1225         #content.compact > .comment-thread .comment-item.expanded .comment {
1226                 background-color: #fff;
1227                 outline: 3px solid <?php echo $hyperlink_color; ?>;
1228         }
1229         #content.compact > .comment-thread .comment-item:hover .comment::before,
1230         #content.compact > .comment-thread .comment-item.expanded .comment::before {
1231                 background-color: #fff;
1232                 box-shadow:
1233                         0 0  3px #fff,
1234                         0 0  5px #fff,
1235                         0 0  7px #fff,
1236                         0 0 10px #fff,
1237                         0 0 20px #fff,
1238                         0 0 30px #fff,
1239                         0 0 40px #fff;
1240         }
1241 }
1242 @media only screen and (hover: none) {
1243         #content.compact > .comment-thread.expanded .comment-item .comment {
1244                 background-color: #fff;
1245                 outline: 3px solid <?php echo $hyperlink_color; ?>;
1246         }
1247         #content.compact > .comment-thread.expanded .comment-item .comment::before {
1248                 background-color: #fff;
1249                 box-shadow:
1250                         0 0  3px #fff,
1251                         0 0  5px #fff,
1252                         0 0  7px #fff,
1253                         0 0 10px #fff,
1254                         0 0 20px #fff,
1255                         0 0 30px #fff,
1256                         0 0 40px #fff;
1257         }
1258 }
1259
1260 #content.user-page.compact > h1.listing {
1261         margin-top: 0.5rem;
1262 }
1263 #content.user-page.compact > h1.listing + .post-meta {
1264         margin-bottom: 0.5rem;
1265 }
1266
1267 /*===========================*/
1268 /* HIGHLIGHTING NEW COMMENTS */
1269 /*===========================*/
1270
1271 .new-comment::before {
1272         outline: 2px solid #5a5;
1273         box-shadow:
1274                 0 0 6px -2px #5a5 inset,
1275                 0 0 4px #5a5,
1276                 0 0 6px #5a5;
1277 }
1278
1279 /*=================================*/
1280 /* COMMENT THREAD MINIMIZE BUTTONS */
1281 /*=================================*/
1282
1283 .comment-meta .comment-minimize-button {
1284         font-size: 1.25rem;
1285         top: -1px;
1286 }
1287 .comment-meta .comment-minimize-button::after {
1288         top: 23px;
1289 }
1290 .comment-minimize-button {
1291         color: #ccc;
1292 }
1293 .comment-minimize-button:hover {
1294         color: #aaa;
1295 }
1296 .comment-minimize-button::after {
1297         font-family: <?php echo $UI_font; ?>;
1298         color: #777;
1299 }
1300 .comment-minimize-button.maximized::after {
1301         color: #ccc;
1302 }
1303
1304 /*==============*/
1305 /* VOTE BUTTONS */
1306 /*==============*/
1307
1308 .vote {
1309         padding: 0 5px;
1310         position: relative;
1311 }
1312 .vote::before {
1313         position: relative;
1314         z-index: 1;
1315 }
1316 .vote::after {
1317         position: absolute;
1318 }
1319
1320 .karma .upvote::before {
1321         content: '\F164';
1322 }
1323 .karma .downvote::before {
1324         content: '\F165';
1325         top: 2px;
1326 }
1327 .karma .upvote::after {
1328         content: "\F164";
1329         left: -1px;
1330         top: -3px;
1331 }
1332 .karma .downvote::after {
1333         content: "\F165";
1334         left: -1px;
1335         top: 5px;
1336 }
1337
1338 .agreement .upvote::before {
1339         content: '\F0A6';
1340 }
1341 .agreement .downvote::before {
1342         content: '\F0A7';
1343         top: 2px;
1344 }
1345 .agreement .upvote::after {
1346         content: "\F0A6";
1347         left: -1px;
1348         top: -3px;
1349 }
1350 .agreement .downvote::after {
1351         content: "\F0A7";
1352         left: -1px;
1353         top: 5px;
1354 }
1355
1356 /**********/
1357 /*      States.
1358  */
1359
1360 /*      _ 1
1361  */
1362 .vote {
1363         color: #c8c8c8;
1364         text-shadow:
1365                  1px  1px 0 #aaa,
1366                 -1px  1px 0 #aaa,
1367                  1px -1px 0 #aaa,
1368                 -1px -1px 0 #aaa;
1369 }
1370 @media only screen and (min-resolution: 192dpi) {
1371         .vote {
1372                 text-shadow:
1373                          0.5px  0.5px 0 #aaa,
1374                         -0.5px  0.5px 0 #aaa,
1375                          0.5px -0.5px 0 #aaa,
1376                         -0.5px -0.5px 0 #aaa;
1377         }
1378 }
1379
1380 /*      _ 2
1381  */
1382 .upvote:hover,
1383 .upvote:not(.none) {
1384         color: var(--GW-upvote-button-color);
1385         text-shadow:
1386                  1px  1px 0 #080,
1387                 -1px  1px 0 #080,
1388                  1px -1px 0 #080,
1389                 -1px -1px 0 #080;
1390 }
1391 .downvote:hover,
1392 .downvote:not(.none) {
1393         color: var(--GW-downvote-button-color);
1394         text-shadow:
1395                  1px  1px 0 #b00,
1396                 -1px  1px 0 #a00,
1397                  1px -1px 0 #b00,
1398                 -1px -1px 0 #b00;
1399 }
1400 @media only screen and (min-resolution: 192dpi) {
1401         .upvote:hover,
1402         .upvote:not(.none) {
1403                 text-shadow:
1404                          0.5px  0.5px 0 #060,
1405                         -0.5px  0.5px 0 #060,
1406                          0.5px -0.5px 0 #060,
1407                         -0.5px -0.5px 0 #060;
1408         }
1409         .downvote:hover,
1410         .downvote:not(.none) {
1411                 text-shadow:
1412                          0.5px  0.5px 0 #900,
1413                         -0.5px  0.5px 0 #900,
1414                          0.5px -0.5px 0 #900,
1415                         -0.5px -0.5px 0 #900;
1416         }
1417 }
1418
1419 /*      0 _
1420  */
1421 .vote::after {
1422         visibility: hidden;
1423 }
1424
1425 /*      1,2 _
1426  */
1427 .vote.two-temp::after,
1428 .vote.two::after {
1429         visibility: visible;
1430 }
1431
1432 /*      1 _
1433  */
1434 .vote.two-temp::after {
1435         color: #c8c8c8;
1436 }
1437
1438 /*      2 _
1439  */
1440 .vote.two::after {
1441         color: inherit;
1442 }
1443
1444 /*      Disabled.
1445  */
1446 .vote:disabled,
1447 .vote:disabled:hover {
1448         visibility: unset;
1449         color: #eee;
1450         text-shadow:
1451                  1px  1px 0 #d8d8d8,
1452                 -1px  1px 0 #d8d8d8,
1453                  1px -1px 0 #d8d8d8,
1454                 -1px -1px 0 #d8d8d8;
1455 }
1456 @media only screen and (min-resolution: 192dpi) {
1457         .vote:disabled,
1458         .vote:disabled:hover {
1459                 text-shadow:
1460                          0.5px  0.5px 0 #d8d8d8,
1461                         -0.5px  0.5px 0 #d8d8d8,
1462                          0.5px -0.5px 0 #d8d8d8,
1463                         -0.5px -0.5px 0 #d8d8d8;
1464         }
1465 }
1466
1467 .comment-controls .voting-controls:first-of-type {
1468         margin-left: -6px;
1469 }
1470 .comment-controls .voting-controls {
1471         margin-right: 1em;
1472 }
1473
1474 /*===========================*/
1475 /* COMMENTING AND POSTING UI */
1476 /*===========================*/
1477
1478 .posting-controls input[type='submit'] {
1479         background-color: #fff;
1480         border: 1px solid #aaa;
1481         font-weight: bold;
1482 }
1483 .posting-controls input[type='submit']:hover,
1484 .posting-controls input[type='submit']:focus {
1485         background-color: #ddd;
1486         border: 1px solid #999;
1487 }
1488
1489 .comment-controls .cancel-comment-button {
1490         font-weight: 600;
1491         color: #c00;
1492         text-shadow:
1493                 0 0 1px #fff,
1494                 0 0 2px #fff;
1495         max-width: 1.2em;
1496         overflow: hidden;
1497         margin-right: 0.375em;
1498 }
1499 .comment-controls .cancel-comment-button::before {
1500         font-size: 1.25em;
1501 }
1502 .comment-controls .cancel-comment-button:hover {
1503         color: #f00;
1504 }
1505
1506 .new-comment-button {
1507         font-weight: 600;
1508 }
1509
1510 .comment-controls .action-button::before {
1511         font-size: 1em;
1512 }
1513 .comment-controls .action-button::after {
1514         content: attr(data-label);
1515         display: block;
1516         position: absolute;
1517         font-size: 0.5em;
1518         text-transform: uppercase;
1519         visibility: hidden;
1520         text-shadow: none;
1521 }
1522 .comment-controls .action-button:hover::after {
1523         visibility: visible;
1524 }
1525 .comment-controls .delete-button::before,
1526 .comment-controls .retract-button::before {
1527         color: #ca3232;
1528 }
1529 .comment-controls .delete-button::after {
1530         transform: translateX(-8px);
1531 }
1532 .comment-controls .retract-button::after {
1533         transform: translateX(-8px);
1534 }
1535 .comment-controls .unretract-button::after {
1536         transform: translateX(-18px);
1537 }
1538 .comment-controls .reply-button::before {
1539         content: "\F086";
1540         font-weight: 400;
1541         font-size: 1.125rem;
1542         color: #6a8a6b;
1543 }
1544 .comment-controls .reply-button::after {
1545         transform: translateX(-4px);
1546 }
1547 .comment-controls .edit-button::before {
1548         font-size: 0.9375em;
1549         color: #0b0;
1550 }
1551 .comment-controls .unretract-button::before {
1552         font-size: 1.125rem;
1553         color: #0b0;
1554 }
1555 .comment-controls .edit-button::after {
1556         transform: translateX(-1px);
1557 }
1558 .comment-item .comment-controls .action-button:hover::before {
1559         color: #f00;
1560         text-shadow:
1561                 0.5px 0.5px 0.5px #f77;
1562 }
1563
1564 h1.listing .edit-post-link,
1565 h1.listing .edit-post-link:visited,
1566 .post-controls .edit-post-link,
1567 .post-controls .edit-post-link:visited {
1568         color: #090;
1569 }
1570 h1.listing .edit-post-link:hover,
1571 .post-controls .edit-post-link:hover {
1572         color: #d00;
1573 }
1574
1575 .posting-controls textarea {
1576         font-family: <?php echo $text_font; ?>;
1577         font-size: 1rem;
1578         color: #000;
1579         background-color: #fff;
1580         border-color: #aaa;
1581         box-shadow:
1582                 0 0 0 1px #eee inset;
1583 }
1584 .posting-controls textarea:focus {
1585         background-color: #ffd;
1586         border-color: <?php echo $hyperlink_color; ?>;
1587         box-shadow:
1588                 0 0 0 1px #ddf inset,
1589                 0 0 0 1px #fff,
1590                 0 0 0 2px <?php echo $hyperlink_color; ?>;
1591 }
1592 .posting-controls.edit-existing-post textarea:focus,
1593 .posting-controls form.edit-existing-comment textarea:focus {
1594         border-color: #090;
1595     box-shadow:
1596         0 0 0 1px #81ff7f inset,
1597         0 0 0 1px #fff,
1598         0 0 0 2px #090;
1599 }
1600
1601 /* GUIEdit buttons */
1602
1603 .guiedit-buttons-container {
1604         background-image: linear-gradient(to bottom, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1605 }
1606
1607 .posting-controls.edit-existing-post .guiedit-buttons-container button,
1608 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
1609     color: #050;
1610 }
1611 .guiedit-buttons-container button {
1612         font-family: Font Awesome, <?php echo $text_font; ?>;
1613 }
1614
1615 .guiedit::after {
1616         font-family: <?php echo $UI_font; ?>;
1617         color: #777;
1618         text-shadow: none;
1619         top: 4px;
1620 }
1621
1622 /* Markdown hints */
1623
1624 #markdown-hints-checkbox + label {
1625         color: <?php echo $hyperlink_color; ?>;
1626 }
1627 #markdown-hints-checkbox + label:hover {
1628         color: #e00;
1629 }
1630 #markdown-hints {
1631         border: 1px solid #c00;
1632         background-color: #ffa;
1633 }
1634
1635 /*================*/
1636 /* EDIT POST FORM */
1637 /*================*/
1638
1639 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1640         border-radius: 3px;
1641         border: 1px solid #ddd;
1642         color: #777;
1643         top: 2px;
1644 }
1645 @media only screen and (hover:hover) {
1646         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1647         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1648                 text-shadow:
1649                         0 0 1px #fff,
1650                         0 0 2px #fff,
1651                         0 0 2.5px #aaa;
1652         }
1653         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1654         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1655                 border-color: #aaa;
1656         }
1657 }
1658 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1659         content: "\F00C";
1660 }
1661 #edit-post-form input[type='radio'] + label {
1662         color: #777;
1663         border-color: #ddd;
1664 }
1665 #edit-post-form input[type='radio'][value='all'] + label {
1666         border-radius: 8px 0 0 8px;
1667         border-width: 1px;
1668 }
1669 #edit-post-form input[type='radio'][value='drafts'] + label {
1670         border-radius: 0 8px 8px 0;
1671 }
1672 #edit-post-form input[type='radio'] + label:hover,
1673 #edit-post-form input[type='radio']:focus + label {
1674         background-color: #ddd;
1675         color: #000;
1676 }
1677 #edit-post-form input[type='radio']:focus + label {
1678         color: #000;
1679         box-shadow:
1680                 0 0 0 1px #aaa;
1681 }
1682 #edit-post-form input[type='radio']:checked + label {
1683         background-color: #ddd;
1684         border-color: #ddd;
1685         color: #000;
1686         text-shadow:
1687                 0 -1px 0 #fff,
1688                 0 0.5px 0.5px #000;
1689 }
1690 #edit-post-form #markdown-hints-checkbox + label {
1691         padding: 3px 0 0 14px;
1692 }
1693
1694 /*=======*/
1695 /* LINKS */
1696 /*=======*/
1697
1698 a {
1699         text-decoration: none;
1700         color: <?php echo $hyperlink_color; ?>;
1701 }
1702 a:visited {
1703         color: #8a8a8b;
1704 }
1705 a:hover {
1706         color: #3d3d3e;
1707 }
1708
1709 /*=========*/
1710 /* BUTTONS */
1711 /*=========*/
1712
1713 button,
1714 input[type='submit'] {
1715         color: <?php echo $hyperlink_color; ?>;
1716 }
1717
1718 button:hover,
1719 input[type='submit']:hover,
1720 button:focus,
1721 input[type='submit']:focus {
1722         color: #d00;
1723 }
1724 button:active,
1725 input[type='submit']:active {
1726         color: #f00;
1727         transform: scale(0.9);
1728 }
1729 .button:visited {
1730         color: <?php echo $hyperlink_color; ?>;
1731 }
1732 .button:hover {
1733         color: #f00;
1734         text-decoration: none;
1735 }
1736 .button:active {
1737         transform: scale(0.9);
1738 }
1739 .button:focus:not(:hover) {
1740         transform: none;
1741 }
1742 @-moz-document url-prefix() {
1743         .button:active {
1744                 transform: none;
1745         }
1746 }
1747
1748 /*==========*/
1749 /* HEADINGS */
1750 /*==========*/
1751
1752 .body-text h1,
1753 .body-text h2,
1754 .body-text h4 {
1755         font-family: <?php echo $UI_font; ?>;
1756 }
1757 .body-text h3,
1758 .body-text h5,
1759 .body-text h6 {
1760         font-weight: 600;
1761 }
1762 .body-text h6 {
1763         color: #555;
1764 }
1765 .body-text h1 {
1766         border-bottom: 1px solid #aaa;
1767 }
1768
1769 /*========*/
1770 /* QUOTES */
1771 /*========*/
1772
1773 blockquote {
1774         border-left: 5px solid #ccc;
1775 }
1776
1777 /*========*/
1778 /* IMAGES */
1779 /*========*/
1780
1781 #content img,
1782 #content figure.image img {
1783         border: 1px solid #ccc;
1784 }
1785 #content figure img {
1786         border: 1px solid #000;
1787 }
1788 #content img[src$='.svg'],
1789 #content figure img[src$='.svg'] {
1790         border: none;
1791 }
1792 #content img[style^='float'] {
1793         border: 1px solid transparent;
1794 }
1795
1796 /*========*/
1797 /* TABLES */
1798 /*========*/
1799
1800 #content:not(.tag-index-page) .body-text table,
1801 #content:not(.tag-index-page) .body-text table th,
1802 #content:not(.tag-index-page) .body-text table td {
1803         border: 1px solid #bbb;
1804 }
1805
1806 /*======*/
1807 /* MISC */
1808 /*======*/
1809
1810 hr {
1811         border-bottom: 1px solid #999;
1812 }
1813
1814 code {
1815         background-color: #f6f6ff;
1816         border: 1px solid #ddf;
1817         border-radius: 4px;
1818 }
1819
1820 input[type='text'],
1821 input[type='search'],
1822 input[type='password'] {
1823         background-color: #fff;
1824         border: 1px solid #ddd;
1825         color: #000;
1826 }
1827 input[type='text']:focus,
1828 input[type='search']:focus,
1829 input[type='password']:focus {
1830         background-color: #ffd;
1831         border: 1px solid #bbb;
1832         box-shadow: 0 0 1px #bbb;
1833 }
1834
1835 select {
1836         color: #000;
1837 }
1838
1839 /*============*/
1840 /* ABOUT PAGE */
1841 /*============*/
1842
1843 .about-page mark {
1844         background-color: #e6e6e6;
1845         text-decoration: none;
1846         box-shadow:
1847                 0 -1px 0 0 #000 inset,
1848                 0 -3px 1px -2px #000 inset;
1849         padding: 0 1px;
1850 }
1851
1852 #content.about-page .accesskey-table {
1853         font-family: <?php echo $UI_font; ?>;
1854         border-color: #ddd;
1855 }
1856
1857 #content.about-page img {
1858         border: 1px solid #000;
1859 }
1860
1861 /*========================*/
1862 /* QUALIFIED HYPERLINKING */
1863 /*========================*/
1864
1865 #aux-about-link a {
1866         color: #777;
1867 }
1868 #aux-about-link a:hover {
1869         opacity: 1.0;
1870 }
1871
1872 .qualified-linking label {
1873         color: <?php echo $hyperlink_color; ?>;
1874 }
1875 .qualified-linking label:hover {
1876         text-shadow:
1877                 0 0 1px #fff,
1878                 0 0 3px #fff,
1879                 0 0 5px #00e;
1880 }
1881
1882 .qualified-linking-toolbar {
1883         border: 1px solid #000;
1884         background-color: #fff;
1885 }
1886 .qualified-linking-toolbar a {
1887         background-color: #eee;
1888         border: 1px solid #ccc;
1889         border-radius: 4px;
1890         padding: 2px 12px;
1891         white-space: nowrap;
1892 }
1893 .qualified-linking-toolbar a:visited {
1894         color: <?php echo $hyperlink_color; ?>;
1895 }
1896 .qualified-linking-toolbar a:hover {
1897         text-decoration: none;
1898         background-color: #ddd;
1899 }
1900 .qualified-linking label::after {
1901         background-color: #d8d8d8;
1902         opacity: 0.8;
1903 }
1904
1905 /*======*/
1906 /* MATH */
1907 /*======*/
1908
1909 .mathjax-block-container::-webkit-scrollbar {
1910         height: 12px;
1911         background-color: #f6f6ff;
1912         border-radius: 6px;
1913         border: 1px solid #ddf;
1914 }
1915 .mathjax-block-container::-webkit-scrollbar-thumb {
1916         background-color: #dde;
1917         border-radius: 6px;
1918         border: 1px solid #cce;
1919 }
1920 .mathjax-inline-container::-webkit-scrollbar {
1921         height: 8px;
1922         background-color: #f6f6ff;
1923         border-radius: 4px;
1924         border: 1px solid #ddf;
1925 }
1926 .mathjax-inline-container::-webkit-scrollbar-thumb {
1927         background-color: #dde;
1928         border-radius: 4px;
1929         border: 1px solid #cce;
1930 }
1931
1932 /*=================*/
1933 /* ALIGNMENT FORUM */
1934 /*=================*/
1935
1936 #content.alignment-forum-index-page::before {
1937         background-color: #f4f5ff;
1938 }
1939 #content.alignment-forum-index-page::after {
1940         font-family: "Concourse SmallCaps";
1941         font-weight: 600;
1942         background-color: #7f85b2;
1943         color: transparent;
1944         -webkit-background-clip: text;
1945         text-shadow:
1946                 rgba(255,255,255,0.5) 0px 3px 3px;
1947 }
1948 @media only screen and (hover: hover) {
1949         #content.alignment-forum-index-page h1.listing a:hover,
1950         #content.alignment-forum-index-page h1.listing a:focus {
1951                 background-color: rgba(244,245,255,0.85);
1952         }
1953 }
1954
1955 /*====================*/
1956 /* FOR NARROW SCREENS */
1957 /*====================*/
1958
1959 @media only screen and (max-width: 1440px) {
1960         #hns-date-picker {
1961                 background-color: #d8d8d8;
1962                 opacity: 1.0;
1963         }
1964         #hns-date-picker::before {
1965                 border: 1px solid #999;
1966                 border-width: 1px 0 1px 1px;
1967         }
1968 }
1969 @media only screen and (max-width: 1160px) {
1970         #theme-selector {
1971                 background-color: #d8d8d8;
1972                 box-shadow:
1973                         0 0 0 1px #999,
1974                         0 0 0 2px transparent;
1975         }
1976         #theme-selector:hover::after {
1977                 width: calc(6em - 9px);
1978                 height: calc(100% - 5px);
1979                 top: 3px;
1980                 left: 100%;
1981         }
1982         #text-size-adjustment-ui button {
1983                 background-color: #ddd;
1984         }
1985         #text-size-adjustment-ui button:hover {
1986                 background-color: #eee;
1987         }
1988         #theme-tweaker-toggle button {
1989                 background-color: #ddd;
1990         }
1991 }
1992 @media only screen and (max-width: 1080px) {
1993         #text-size-adjustment-ui button {
1994                 border: 1px solid #999;
1995                 padding: 0 0 0 1px;
1996                 border-radius: 50%;
1997                 box-shadow:
1998                         0 0 6px #999 inset,
1999                         0 0 0 1px transparent;
2000         }
2001         #theme-tweaker-toggle button {
2002                 border: 1px solid #999;
2003                 box-shadow:
2004                         0 0 10px #999 inset,
2005                         0 0 0 1px transparent;
2006                 border-radius: 50%;
2007                 transform: scale(0.8);
2008         }
2009 }
2010 @media only screen and (max-width: 1020px) {
2011         #quick-nav-ui a {
2012                 box-shadow:
2013                         0 0 0 1px #999,
2014                         0 0 0 2px transparent;
2015         }
2016         #new-comment-nav-ui .new-comments-count::before {
2017                 background-color: #d8d8d8;
2018                 box-shadow:
2019                         0 0 0 1px #999,
2020                         0 0 0 2px transparent;
2021                 border-radius: 8px;
2022         }
2023         #anti-kibitzer-toggle {
2024                 background-color: #d8d8d8;
2025                 box-shadow:
2026                         0 0 0 1px #999,
2027                         0 0 0 2px transparent;
2028                 border-radius: 6px;
2029                 overflow: hidden;
2030         }
2031 }
2032
2033 /*========*/
2034 /* MOBILE */
2035 /*========*/
2036
2037 /*******************************************************/
2038 @media not screen and (hover:hover) and (pointer:fine) {
2039 /*******************************************************/
2040         #ui-elements-container > div[id$='-ui-toggle'] button  {
2041                 color: #aaa;
2042                 text-shadow:
2043                         0 0 1px #fff,
2044                         0 0 3px #fff,
2045                         0 0 5px #fff,
2046                         0 0 10px #fff,
2047                         0 0 20px #fff,
2048                         0 0 30px #fff;
2049         }
2050
2051         #theme-selector {
2052                 background-color: #d8d8d8;
2053                 box-shadow:
2054                         0 0 0 1px #999,
2055                         0 0 1px 3px #fff,
2056                         0 0 3px 3px #fff,
2057                         0 0 5px 3px #fff,
2058                         0 0 10px 3px #fff,
2059                         0 0 20px 3px #fff;
2060                 border-radius: 12px;
2061         }
2062         #theme-selector::before,
2063         #theme-selector .theme-selector-close-button {
2064                 color: #000;
2065                 font-weight: normal;
2066         }
2067         #theme-selector button {
2068                 background-color: #e6e6e6;
2069                 border-radius: 10px;
2070         }
2071         #theme-selector button::after {
2072                 color: #444;
2073                 max-width: calc(100% - 3.5em);
2074                 overflow: hidden;
2075                 text-overflow: ellipsis;
2076                 padding-bottom: 1px;
2077         }
2078         #theme-selector button.selected::after {
2079                 color: #000;
2080                 text-shadow:
2081                         0 -1px 0 #fff,
2082                         0 0.5px 0.5px #000;
2083         }
2084
2085         #quick-nav-ui {
2086                 background-color: #fff;
2087         }
2088         #quick-nav-ui,
2089         #new-comment-nav-ui,
2090         #hns-date-picker {
2091                 box-shadow:
2092                         0 0 1px 3px #fff,
2093                         0 0 3px 3px #fff,
2094                         0 0 5px 3px #fff,
2095                         0 0 10px 3px #fff,
2096                         0 0 20px 3px #fff;
2097         }
2098         #quick-nav-ui a::after,
2099         #new-comment-nav-ui::before {
2100                 font-family: <?php echo $UI_font; ?>;
2101                 font-weight: bold;
2102                 box-shadow:
2103                         0 0 1px 0 #fff,
2104                         0 0 3px 0 #fff,
2105                         0 0 5px 0 #fff;
2106                 background-color: #fff;
2107                 border-radius: 4px;
2108         }
2109         #quick-nav-ui,
2110         #new-comment-nav-ui {
2111                 border-radius: 8px;
2112         }
2113         #new-comment-nav-ui {
2114                 background-color: #e4e4e4;
2115                 border: 1px solid #999;
2116         }
2117         #new-comment-nav-ui::before {
2118                 color: #777;
2119                 font-weight: bold;
2120         }
2121         #new-comment-nav-ui .new-comment-sequential-nav-button {
2122                 box-shadow: 0 0 0 1px #999;
2123                 color: #538d4d;
2124         }
2125         #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2126                 color: #bbb;
2127         }
2128         #new-comment-nav-ui .new-comments-count {
2129                 background-color: inherit;
2130                 box-shadow: 0 -1px 0 0 #999;
2131         }
2132         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2133                 border-radius: 7px 0 0 7px;
2134         }
2135         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2136                 border-radius: 0 7px 7px 0;
2137         }
2138         #new-comment-nav-ui button::after {
2139                 font-family: <?php echo $UI_font; ?>;
2140         }
2141         #hns-date-picker {
2142                 background-color: #e4e4e4;
2143                 border: 1px solid #999;
2144         }
2145
2146         /*****************************************/
2147         @media only screen and (max-width: 900px) {
2148         /*****************************************/
2149                 h1.listing + .post-meta .post-section {
2150                         overflow: visible;
2151                         order: -2;
2152                         width: unset;
2153                 }
2154                 h1.listing + .post-meta .post-section::before {
2155                         position: unset;
2156                 }
2157
2158                 #primary-bar .nav-inner {
2159                         font-size: 1.25em;
2160                 }
2161                 .nav-bar-top:not(#primary-bar) .nav-inner {
2162                         font-size: 1.125em;
2163                 }
2164                 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
2165                         padding: 6px 10px;
2166                 }
2167
2168                 .archive-nav *[class^='archive-nav-item-'] {
2169                         border-width: 1px !important;
2170                 }
2171                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
2172                         background-color: #aaa;
2173                 }
2174
2175                 .comment-item .comment-item {
2176                         margin: 0.75em 0 3px 6px;
2177                 }
2178                 .comment-item .comment-item + .comment-item {
2179                         margin: 1.5em 0 3px 6px;
2180                 }
2181
2182                 .sublevel-nav:not(.sort) .sublevel-item,
2183                 .sublevel-nav:not(.sort) .sublevel-item:first-child,
2184                 .sublevel-nav:not(.sort) .sublevel-item:last-child {
2185                         border-radius: 8px;
2186                         border-width: 1px;
2187                         margin: 2px;
2188                 }
2189         /*******************************************/
2190         } @media only screen and (max-width: 720px) {
2191         /*******************************************/
2192                 .post-meta .comment-count::before {
2193                         font-family: inherit;
2194                         font-size: inherit;
2195                         margin: 0;
2196                 }
2197         /*******************************************/
2198         } @media only screen and (max-width: 520px) {
2199         /*******************************************/
2200                 #primary-bar.inactive-bar .nav-inner {
2201                         padding: 6px 10px;
2202                         font-size: 1.375em;
2203                 }
2204
2205                 h1.listing {
2206                         margin: 18px 6px 4px 6px;
2207                         max-width: calc(100% - 12px);
2208                         padding: 0;
2209                 }
2210                 h1.listing .link-post-link {
2211                         top: 2px;
2212                 }
2213                 h1.listing + .post-meta {
2214                         margin: 4px 6px;
2215                 }
2216                 h1.listing + .post-meta > *:not(.karma) {
2217                         line-height: 1.5;
2218                         width: unset;
2219                 }
2220                 h1.listing + .post-meta .karma-value {
2221                         top: 0;
2222                         right: calc(100% - 2.25em);
2223                 }
2224
2225                 #content.compact > .comment-thread .comment-item {
2226                         max-height: 104px;
2227                 }
2228
2229                 .textarea-container:focus-within textarea {
2230                         background-color: #fff;
2231                 }
2232                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
2233                         padding: 6px;
2234                         font-weight: bold;
2235                 }
2236                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
2237                         box-shadow:
2238                                 0 0 0 2px #c00;
2239                         color: #c00;
2240                 }
2241                 .textarea-container:focus-within .guiedit-buttons-container {
2242                         background-color: #fff;
2243                         border-top: 1px solid #ddf;
2244                 }
2245                 .posting-controls .textarea-container:focus-within .guiedit-buttons-container {
2246                         box-shadow: none;
2247                 }
2248                 #content.conversation-page .textarea-container:focus-within::after {
2249                         background-color: #fff;
2250                 }
2251                 .textarea-container:focus-within button.guiedit {
2252                         border: 1px solid #6a8a6b;
2253                         border-radius: 6px;
2254                 }
2255
2256                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2257                         top: 1px;
2258                 }
2259                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2260                         top: 1px;
2261                 }
2262
2263                 #edit-post-form textarea {
2264                         min-height: calc(100vh - 345px);
2265                 }
2266         }
2267 }