www/theme-grey.css.php

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