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