www/theme-classic.css.php

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