www/theme-default.css.php

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