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