www/theme-default.css.php

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