www/theme-default.css.php

   1 <?php
   2         $UI_font = ((1 || $platform == 'Mac') ? "'Concourse', 'a_Avante'" : "'Whitney', 'a_Avante'") . ", 'Assistant', Arial, sans-serif";
   3         $listings_font = ((1 || $platform == 'Mac') ? "'Concourse', 'a_Avante'" : "'Mundo Sans', 'a_Avante'") . ", 'Assistant', Arial, sans-serif";
   4         $UI_font_smallcaps = ((1 || $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 /*===========*/
  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 .karma.active-controls::after,
1098 .comment-item .karma .karma-value::after,
1099 .post .karma.active-controls::after,
1100 .post .karma .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 .karma.active-controls::after,
1108 .post .karma.active-controls::after {
1109         padding: 6px 4px 4px 4px;
1110         bottom: -44px;
1111 }
1112 .comment-item .karma .karma-value::after,
1113 .post .karma .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
1297 .vote:disabled {
1298         visibility: unset;
1299 }
1300 .karma button.downvote:disabled::before {
1301         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6TTEyNCAyOTZjLTYuNiAwLTEyLTUuNC0xMi0xMnYtNTZjMC02LjYgNS40LTEyIDEyLTEyaDI2NGM2LjYgMCAxMiA1LjQgMTIgMTJ2NTZjMCA2LjYtNS40IDEyLTEyIDEySDEyNHoiIHN0cm9rZT0iI0Q4RDhEOCIgc3Ryb2tlLXdpZHRoPSI0JSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=');
1302         filter: brightness(50%);
1303 }
1304 .karma button.upvote:disabled::before {
1305         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTE0NCAyNzZjMCA2LjYtNS40IDEyLTEyIDEyaC05MnY5MmMwIDYuNi01LjQgMTItMTIgMTJoLTU2Yy02LjYgMC0xMi01LjQtMTItMTJ2LTkyaC05MmMtNi42IDAtMTItNS40LTEyLTEydi01NmMwLTYuNiA1LjQtMTIgMTItMTJoOTJ2LTkyYzAtNi42IDUuNC0xMiAxMi0xMmg1NmM2LjYgMCAxMiA1LjQgMTIgMTJ2OTJoOTJjNi42IDAgMTIgNS40IDEyIDEydjU2eiIgc3Ryb2tlPSIjRDhEOEQ4IiBzdHJva2Utd2lkdGg9IjQlIiBmaWxsPSJ0cmFuc3BhcmVudCIvPjwvc3ZnPg==');
1306         filter: brightness(50%);
1307 }
1308
1309 .vote:active {
1310         transform: none;
1311 }
1312 .vote.selected::before,
1313 .vote.clicked-once::before,
1314 .vote.clicked-twice::before {
1315         filter: drop-shadow(0 0 1px #fff);
1316 }
1317
1318 .upvote::before,
1319 .waiting .upvote.big-vote.clicked-twice::before {
1320         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/upvote-green-circle-plus.svg")) ?>');
1321         filter: grayscale(100%) brightness(128%);
1322 }
1323 .downvote::before,
1324 .waiting .downvote.big-vote.clicked-twice::before {
1325         background-image: url('data:image/svg+xml;base64,<?php echo base64_encode(file_get_contents("assets/downvote-red-circle-minus.svg")) ?>');
1326         filter: grayscale(100%) brightness(188%);
1327 }
1328
1329 .vote.clicked-once::before,
1330 .vote.big-vote.clicked-once::before {
1331         box-shadow:
1332                 0 0 0 1px #fff,
1333                 0 0 0 4px #c8c8c8,
1334                 0 0 0 5px transparent;
1335 }
1336
1337 .vote.big-vote.clicked-twice::before,
1338 .waiting .vote.big-vote:not(.clicked-twice)::before,
1339 .waiting .vote:not(.big-vote).clicked-once::before {
1340         box-shadow: none;
1341 }
1342
1343 .upvote.clicked-twice::before,
1344 .upvote.big-vote::before {
1345         box-shadow:
1346                 0 0 0 1px #fff,
1347                 0 0 0 4px #00d800,
1348                 0 0 0 5px transparent;
1349 }
1350
1351 .downvote.clicked-twice::before,
1352 .downvote.big-vote::before {
1353         box-shadow:
1354                 0 0 0 1px #fff,
1355                 0 0 0 4px #eb4c2a,
1356                 0 0 0 5px transparent;
1357 }
1358
1359 /*===========================*/
1360 /* COMMENTING AND POSTING UI */
1361 /*===========================*/
1362
1363 .posting-controls input[type='submit'] {
1364         background-color: #fff;
1365         border: 1px solid #aaa;
1366         font-weight: bold;
1367 }
1368 .posting-controls input[type='submit']:hover,
1369 .posting-controls input[type='submit']:focus {
1370         background-color: #ddd;
1371         border: 1px solid #999;
1372 }
1373
1374 .comment-controls .cancel-comment-button {
1375         font-weight: 600;
1376         color: #c00;
1377         text-shadow:
1378                 0 0 1px #fff,
1379                 0 0 2px #fff;
1380 }
1381 .comment-controls .cancel-comment-button:hover {
1382         color: #f00;
1383         text-shadow: <?php echo $white_glow; ?>;
1384 }
1385
1386 .new-comment-button {
1387         font-weight: 600;
1388 }
1389
1390 .comment-controls .delete-button,
1391 .comment-controls .retract-button {
1392         color: #a00;
1393         opacity: 0.85;
1394 }
1395 .comment-controls .edit-button,
1396 .comment-controls .unretract-button {
1397         color: #090;
1398 }
1399 .comment-controls .action-button:hover {
1400         color: #f00;
1401         opacity: 1.0;
1402 }
1403
1404 .button.edit-post-link:not(:hover) {
1405         color: #090;
1406 }
1407
1408 .posting-controls textarea {
1409         font-family: <?php echo $text_font; ?>;
1410         color: #000;
1411         background-color: #fff;
1412         border-color: #aaa;
1413         box-shadow:
1414                 0 0 0 1px #eee inset;
1415 }
1416 .posting-controls textarea:focus {
1417         background-color: #ffd;
1418         border-color: <?php echo $hyperlink_color; ?>;
1419         box-shadow:
1420                 0 0 0 1px #ddf inset,
1421                 0 0 0 1px #fff,
1422                 0 0 0 2px <?php echo $hyperlink_color; ?>;
1423 }
1424 .posting-controls.edit-existing-post textarea:focus,
1425 .posting-controls form.edit-existing-comment textarea:focus {
1426         border-color: #090;
1427         box-shadow:
1428                 0 0 0 1px #81ff7f inset,
1429                 0 0 0 1px #fff,
1430                 0 0 0 2px #090;
1431 }
1432
1433 /*= Scroll bars =*/
1434
1435 .posting-controls textarea::-webkit-scrollbar {
1436         width: 16px;
1437         background-color: transparent;
1438 }
1439 .posting-controls textarea::-webkit-scrollbar-track {
1440         background-color: #eee;
1441         border-left: 1px solid #aaa;
1442         border-top: 1px solid #eee;
1443 }
1444 .posting-controls textarea:focus::-webkit-scrollbar-track {
1445         border-left: 1px solid #00e;
1446         border-top: 1px solid #ddf;
1447 }
1448 .posting-controls textarea::-webkit-scrollbar-thumb {
1449         background-color: #aaa;
1450         box-shadow: 0 0 0 1px #eee inset;
1451         border-left: 1px solid #aaa;
1452 }
1453 .posting-controls textarea:focus::-webkit-scrollbar-thumb {
1454         border-left: 1px solid #00e;
1455         background-color: #0040ff;
1456         box-shadow:
1457                 0 1px 0 0 #ddf inset,
1458                 0 0 0 1px #eee inset;
1459 }
1460
1461 .posting-controls.edit-existing-post textarea:focus::-webkit-scrollbar-track,
1462 .posting-controls form.edit-existing-comment textarea:focus::-webkit-scrollbar-track {
1463         border-left: 1px solid #090;
1464 }
1465 .posting-controls.edit-existing-post textarea:focus::-webkit-scrollbar-thumb,
1466 .posting-controls form.edit-existing-comment textarea:focus::-webkit-scrollbar-thumb {
1467         border-left: 1px solid #090;
1468         background-color: #28a708;
1469 }
1470
1471 /* GUIEdit buttons */
1472
1473 .guiedit-buttons-container {
1474         background-image: linear-gradient(to bottom, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
1475 }
1476
1477 .posting-controls.edit-existing-post .guiedit-buttons-container button,
1478 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
1479         color: #050;
1480 }
1481 .guiedit-buttons-container button {
1482         font-family: 'Font Awesome', 'Font Awesome 5 Free', <?php echo $text_font; ?>;
1483 }
1484
1485 .guiedit::after {
1486         font-family: <?php echo $UI_font; ?>;
1487         color: #777;
1488         text-shadow: none;
1489 }
1490
1491 /* Markdown hints */
1492
1493 #markdown-hints-checkbox + label {
1494         color: <?php echo $hyperlink_color; ?>;
1495 }
1496 #markdown-hints-checkbox + label:hover {
1497         color: #e00;
1498         text-shadow: <?php echo $white_glow; ?>;
1499 }
1500 #markdown-hints {
1501         border: 1px solid #c00;
1502         background-color: #ffa;
1503 }
1504
1505 /*================*/
1506 /* EDIT POST FORM */
1507 /*================*/
1508
1509 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
1510         top: -1px;
1511 }
1512 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1513         border-radius: 3px;
1514         border: 1px solid #ddd;
1515         color: #777;
1516 }
1517 @media only screen and (hover:hover) {
1518         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1519         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1520                 text-shadow:
1521                         0 0 1px #fff,
1522                         0 0 2px #fff,
1523                         0 0 2.5px #aaa;
1524         }
1525         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1526         #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1527                 border-color: #aaa;
1528         }
1529 }
1530 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1531         content: "\F00C";
1532 }
1533 #edit-post-form input[type='radio'] + label {
1534         color: #777;
1535         border-color: #ddd;
1536         padding: 4px 12px 5px 12px;
1537 }
1538 #edit-post-form input[type='radio'][value='all'] + label {
1539         border-radius: 8px 0 0 8px;
1540         border-width: 1px;
1541 }
1542 #edit-post-form input[type='radio'][value='drafts'] + label {
1543         border-radius: 0 8px 8px 0;
1544 }
1545 @media only screen and (hover:hover) {
1546         #edit-post-form input[type='radio'] + label:hover,
1547         #edit-post-form input[type='radio']:focus + label {
1548                 background-color: #ddd;
1549                 color: #000;
1550         }
1551 }
1552 #edit-post-form input[type='radio']:focus + label {
1553         color: #000;
1554         box-shadow:
1555                 0 0 0 1px #aaa;
1556 }
1557 #edit-post-form input[type='radio']:checked + label {
1558         background-color: #ddd;
1559         border-color: #ddd;
1560         color: #000;
1561         text-shadow:
1562                 0 -1px 0 #fff,
1563                 0 0.5px 0.5px #000;
1564 }
1565
1566 /*=======*/
1567 /* LINKS */
1568 /*=======*/
1569
1570 a {
1571         text-decoration: none;
1572         color: <?php echo $hyperlink_color; ?>;
1573 }
1574 a:visited {
1575         color: #551a8b;
1576 }
1577 a:hover {
1578         text-decoration: underline;
1579 }
1580
1581 /*=========*/
1582 /* BUTTONS */
1583 /*=========*/
1584
1585 button,
1586 input[type='submit'] {
1587         color: <?php echo $hyperlink_color; ?>;
1588 }
1589
1590 button:active,
1591 input[type='submit']:active {
1592         color: #f00;
1593         transform: scale(0.9);
1594 }
1595 .button:visited {
1596         color: <?php echo $hyperlink_color; ?>;
1597 }
1598 .button:active {
1599         transform: scale(0.9);
1600 }
1601 @-moz-document url-prefix() {
1602         .button:active {
1603                 transform: none;
1604         }
1605 }
1606
1607 @media only screen and (hover:hover) {
1608         button:hover,
1609         input[type='submit']:hover,
1610         button:focus,
1611         input[type='submit']:focus {
1612                 color: #f00;
1613                 text-shadow: <?php echo $white_glow; ?>;
1614         }
1615
1616         .button:hover {
1617                 color: #f00;
1618                 text-shadow: <?php echo $white_glow; ?>;
1619                 text-decoration: none;
1620         }
1621         .button:focus:not(:hover) {
1622                 transform: none;
1623         }
1624 }
1625
1626 /*==========*/
1627 /* HEADINGS */
1628 /*==========*/
1629
1630 .body-text h1,
1631 .body-text h2,
1632 .body-text h4 {
1633         font-family: <?php echo $UI_font; ?>;
1634 }
1635 .body-text h3,
1636 .body-text h5,
1637 .body-text h6 {
1638         font-weight: 600;
1639         font-family: <?php echo $UI_font_smallcaps; ?>;
1640 }
1641 .body-text h6 {
1642         color: #555;
1643 }
1644 .body-text h1 {
1645         border-bottom: 1px solid #aaa;
1646 }
1647
1648 /*========*/
1649 /* QUOTES */
1650 /*========*/
1651
1652 blockquote {
1653         border-left: 5px solid #ccc;
1654 }
1655
1656 /*========*/
1657 /* IMAGES */
1658 /*========*/
1659
1660 #content img,
1661 #content figure.image img {
1662         border: 1px solid #ccc;
1663 }
1664 #content figure img {
1665         border: 1px solid #000;
1666 }
1667 #content img[src$='.svg'],
1668 #content figure img[src$='.svg'] {
1669         border: none;
1670 }
1671 #content img[style^='float'] {
1672         border: 1px solid transparent;
1673 }
1674
1675 /*========*/
1676 /* TABLES */
1677 /*========*/
1678
1679 #content:not(.tag-index-page) .body-text table,
1680 #content:not(.tag-index-page) .body-text table th,
1681 #content:not(.tag-index-page) .body-text table td {
1682         border: 1px solid #ccc;
1683 }
1684
1685 /*======*/
1686 /* MISC */
1687 /*======*/
1688
1689 hr {
1690         border-bottom: 1px solid #999;
1691 }
1692
1693 code {
1694         background-color: #f6f6ff;
1695         border: 1px solid #ddf;
1696         border-radius: 4px;
1697 }
1698
1699 input[type='text'],
1700 input[type='search'],
1701 input[type='password'] {
1702         background-color: #fff;
1703         border: 1px solid #ddd;
1704         color: #000;
1705 }
1706 input[type='text']:focus,
1707 input[type='search']:focus,
1708 input[type='password']:focus {
1709         background-color: #ffd;
1710         border: 1px solid #bbb;
1711         box-shadow: 0 0 1px #bbb;
1712 }
1713
1714 select {
1715         color: #000;
1716 }
1717
1718 <?php if ($platform != 'Mac') echo <<<EOT
1719 @-moz-document url-prefix() {
1720         h1.listing s,
1721         .post > h1:first-of-type s {
1722           position: relative;
1723           text-decoration: none;
1724         }
1725         h1.listing s::after,
1726         .post > h1:first-of-type s::after {
1727           position: absolute;
1728           border-bottom: 3px solid #000;
1729           content: "";
1730           top: 0;
1731           left: 0;
1732           width: 100%;
1733           height: 50%;
1734         }
1735 }
1736 EOT;
1737 ?>
1738
1739 /*============*/
1740 /* ABOUT PAGE */
1741 /*============*/
1742
1743 .about-page mark {
1744         background-color: #e6e6e6;
1745         text-decoration: none;
1746         box-shadow:
1747                 0 -1px 0 0 #000 inset,
1748                 0 -3px 1px -2px #000 inset;
1749         padding: 0 1px;
1750 }
1751
1752 #content.about-page .accesskey-table {
1753         font-family: <?php echo $UI_font; ?>;
1754         border-color: #ddd;
1755 }
1756
1757 #content.about-page img {
1758         border: 1px solid #000;
1759 }
1760
1761 /*========================*/
1762 /* QUALIFIED HYPERLINKING */
1763 /*========================*/
1764
1765 #aux-about-link a {
1766         color: #777;
1767 }
1768 #aux-about-link a:hover {
1769         opacity: 1.0;
1770         text-shadow: <?php echo $white_glow; ?>;
1771 }
1772
1773 .qualified-linking label {
1774         color: <?php echo $hyperlink_color; ?>;
1775 }
1776 .qualified-linking label:hover {
1777         text-shadow:
1778                 0 0 1px #fff,
1779                 0 0 3px #fff,
1780                 0 0 5px #00e;
1781 }
1782
1783 .qualified-linking-toolbar {
1784         border: 1px solid #000;
1785         background-color: #fff;
1786 }
1787 .qualified-linking-toolbar a {
1788         background-color: #eee;
1789         border: 1px solid #ccc;
1790         border-radius: 4px;
1791 }
1792 .qualified-linking-toolbar a:visited {
1793         color: <?php echo $hyperlink_color; ?>;
1794 }
1795 .qualified-linking-toolbar a:hover {
1796         text-decoration: none;
1797         background-color: #ddd;
1798         text-shadow: <?php echo $white_glow; ?>;
1799 }
1800 .qualified-linking label::after {
1801         background-color: #d8d8d8;
1802         opacity: 0.8;
1803 }
1804
1805 /*======*/
1806 /* MATH */
1807 /*======*/
1808
1809 .mathjax-block-container::-webkit-scrollbar {
1810         height: 12px;
1811         background-color: #f6f6ff;
1812         border-radius: 6px;
1813         border: 1px solid #ddf;
1814 }
1815 .mathjax-block-container::-webkit-scrollbar-thumb {
1816         background-color: #dde;
1817         border-radius: 6px;
1818         border: 1px solid #cce;
1819 }
1820 .mathjax-inline-container::-webkit-scrollbar {
1821         height: 8px;
1822         background-color: #f6f6ff;
1823         border-radius: 4px;
1824         border: 1px solid #ddf;
1825 }
1826 .mathjax-inline-container::-webkit-scrollbar-thumb {
1827         background-color: #dde;
1828         border-radius: 4px;
1829         border: 1px solid #cce;
1830 }
1831
1832 /*=================*/
1833 /* ALIGNMENT FORUM */
1834 /*=================*/
1835
1836 #content.alignment-forum-index-page::before {
1837         background-color: #eef0ff;
1838 }
1839 #content.alignment-forum-index-page::after {
1840         font-family: "Concourse SmallCaps";
1841         font-weight: bold;
1842         background-color: #626dd7;
1843         -webkit-background-clip: text;
1844         color: transparent;
1845         text-shadow:
1846                 rgba(255,255,255,0.5) 0px 3px 3px;;
1847 }
1848 @media only screen and (hover: hover) {
1849         #content.alignment-forum-index-page h1.listing a:hover,
1850         #content.alignment-forum-index-page h1.listing a:focus {
1851                 background-color: rgba(238,240,255,0.85);
1852         }
1853 }
1854
1855 /*====================*/
1856 /* FOR NARROW SCREENS */
1857 /*====================*/
1858
1859 @media only screen and (max-width: 1440px) {
1860         #hns-date-picker {
1861                 background-color: #d8d8d8;
1862                 opacity: 1.0;
1863         }
1864         #hns-date-picker::before {
1865                 border: 1px solid #999;
1866                 border-width: 1px 0 1px 1px;
1867         }
1868 }
1869 @media only screen and (max-width: 1160px) {
1870         #theme-selector:hover::after {
1871                 background-color: #999;
1872         }
1873 }
1874 @media only screen and (max-width: 1080px) {
1875         #text-size-adjustment-ui button {
1876                 border: 1px solid #999;
1877                 padding: 0 0 0 1px;
1878                 border-radius: 50%;
1879                 box-shadow:
1880                         0 0 6px #999 inset,
1881                         0 0 0 1px transparent;
1882         }
1883         #theme-tweaker-toggle button {
1884                 border: 1px solid #999;
1885                 box-shadow:
1886                         0 0 10px #999 inset,
1887                         0 0 0 1px transparent;
1888                 border-radius: 50%;
1889                 transform: scale(0.8);
1890         }
1891 }
1892 @media only screen and (max-width: 1020px) {
1893         #quick-nav-ui a {
1894                 box-shadow:
1895                         0 0 0 1px #999,
1896                         0 0 0 2px transparent;
1897         }
1898         #new-comment-nav-ui .new-comments-count::before {
1899                 background-color: #d8d8d8;
1900                 box-shadow:
1901                         0 0 0 1px #999,
1902                         0 0 0 2px transparent;
1903                 border-radius: 8px;
1904         }
1905         #anti-kibitzer-toggle {
1906                 box-shadow:
1907                         0 0 0 1px #999,
1908                         0 0 0 2px transparent;
1909                 background-color: #d8d8d8;
1910                 border-radius: 6px;
1911                 overflow: hidden;
1912         }
1913 }
1914 @media only screen and (max-width: 1000px) {
1915         #theme-selector {
1916                 background-color: #d8d8d8;
1917                 box-shadow:
1918                         0 0 0 1px #999,
1919                         0 0 0 2px transparent;
1920         }
1921         #theme-selector:hover::after {
1922                 width: calc(6em - 3px);
1923                 height: calc(100% - 5px);
1924                 top: 3px;
1925                 left: 100%;
1926         }
1927         #text-size-adjustment-ui button {
1928                 background-color: #ddd;
1929         }
1930         #text-size-adjustment-ui button:hover {
1931                 background-color: #eee;
1932         }
1933         #theme-tweaker-toggle button {
1934                 background-color: #ddd;
1935         }
1936 }
1937
1938 /*========*/
1939 /* MOBILE */
1940 /*========*/
1941
1942 /**************************************************************************/
1943 @media only screen and (max-width: 1160px) {
1944 /**************************************************************************/
1945
1946         #ui-elements-container > div[id$='-ui-toggle'] button  {
1947                 color: #888;
1948                 text-shadow:
1949                         0 0 1px #fff,
1950                         0 0 3px #fff,
1951                         0 0 5px #fff,
1952                         0 0 10px #fff,
1953                         0 0 20px #fff,
1954                         0 0 30px #fff;
1955         }
1956
1957         #theme-selector {
1958                 background-color: #d8d8d8;
1959                 box-shadow:
1960                         0 0 0 1px #999,
1961                         0 0 1px 3px #fff,
1962                         0 0 3px 3px #fff,
1963                         0 0 5px 3px #fff,
1964                         0 0 10px 3px #fff,
1965                         0 0 20px 3px #fff;
1966                 border-radius: 12px;
1967         }
1968         #theme-selector::before,
1969         #theme-selector .theme-selector-close-button {
1970                 color: #666;
1971                 text-shadow: 0.5px 0.5px 0 #fff;
1972         }
1973         #theme-selector button {
1974                 background-color: #e6e6e6;
1975                 border-radius: 10px;
1976         }
1977         #theme-selector button::after {
1978                 color: #000;
1979                 padding-bottom: 2px;
1980                 max-width: calc(100% - 3.25em);
1981                 overflow: hidden;
1982                 text-overflow: ellipsis;
1983         }
1984         #theme-selector button.selected::after {
1985                 text-shadow:
1986                         0 -1px 0 #fff,
1987                         0 0.5px 0.5px #000;
1988         }
1989
1990         #quick-nav-ui {
1991                 background-color: #fff;
1992         }
1993         #quick-nav-ui,
1994         #new-comment-nav-ui,
1995         #hns-date-picker {
1996                 box-shadow:
1997                         0 0 1px 3px #fff,
1998                         0 0 3px 3px #fff,
1999                         0 0 5px 3px #fff,
2000                         0 0 10px 3px #fff,
2001                         0 0 20px 3px #fff;
2002         }
2003         #quick-nav-ui a::after,
2004         #new-comment-nav-ui::before {
2005                 font-family: <?php echo $UI_font; ?>;
2006                 font-weight: 600;
2007                 box-shadow:
2008                         0 0 1px 0 #fff,
2009                         0 0 3px 0 #fff,
2010                         0 0 5px 0 #fff;
2011                 background-color: #fff;
2012                 border-radius: 4px;
2013         }
2014         #quick-nav-ui,
2015         #new-comment-nav-ui {
2016                 border-radius: 8px;
2017         }
2018         #new-comment-nav-ui {
2019                 background-color: #d8d8d8;
2020                 border: 1px solid #999;
2021         }
2022         #new-comment-nav-ui::before {
2023                 color: #777;
2024         }
2025         #new-comment-nav-ui .new-comment-sequential-nav-button {
2026                 box-shadow: 0 0 0 1px #999;
2027                 color: #777;
2028         }
2029         #new-comment-nav-ui .new-comments-count {
2030                 background-color: inherit;
2031                 box-shadow: 0 -1px 0 0 #999;
2032         }
2033         #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2034                 color: #bbb;
2035         }
2036         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2037                 border-radius: 7px 0 0 7px;
2038         }
2039         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2040                 border-radius: 0 7px 7px 0;
2041         }
2042         #new-comment-nav-ui button::after {
2043                 font-family: <?php echo $UI_font; ?>;
2044         }
2045
2046         /*****************************************/
2047         @media only screen and (max-width: 900px) {
2048         /*****************************************/
2049                 h1.listing {
2050                         font-size: 1.75rem;
2051                         line-height: 1;
2052                 }
2053                 h1.listing .link-post-link {
2054                         top: 2px;
2055                 }
2056                 h1.listing + .post-meta .karma-value,
2057                 h1.listing + .post-meta .comment-count,
2058                 h1.listing + .post-meta .lw2-link,
2059                 h1.listing + .post-meta .read-time {
2060                         bottom: 0;
2061                 }
2062                 h1.listing + .post-meta .post-section::before {
2063                         position: unset;
2064                 }
2065                 h1.listing + .post-meta .post-section {
2066                         overflow: visible;
2067                         order: 1;
2068                 }
2069                 h1.listing + .post-meta .link-post-domain {
2070                         order: 2;
2071                         line-height: 1;
2072                         flex-basis: 100%;
2073                 }
2074                 h1.listing + .post-meta::after {
2075                         bottom: -10px;
2076                 }
2077                 #content.user-page h1.listing + .post-meta {
2078                         margin-bottom: 1em;
2079                 }
2080                 #content.user-page h1.link-post-listing::after {
2081                         height: calc(100% + 2em);
2082                 }
2083
2084                 #nav-item-search button::before {
2085                         color: #00e;
2086                 }
2087
2088                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
2089                         background-color: #aaa;
2090                 }
2091
2092                 .comment-item .comment-item {
2093                         margin: 0.75em 2px 4px 6px;
2094                         box-shadow:
2095                                 0 0 2px #ccc,
2096                                 0 0 4px #ccc,
2097                                 0 0 7px #ccc;
2098                 }
2099                 .comment-item .comment-item + .comment-item {
2100                         margin: 1.5em 2px 4px 6px;
2101                 }
2102                 .comment-body {
2103                         font-size: 1.125rem;
2104                 }
2105
2106                 a.comment-parent-link:hover::before {
2107                         background-color: unset;
2108                 }
2109
2110                 .sublevel-nav:not(.sort) .sublevel-item,
2111                 .sublevel-nav:not(.sort) .sublevel-item:first-child,
2112                 .sublevel-nav:not(.sort) .sublevel-item:last-child {
2113                         border-radius: 8px;
2114                         border-width: 1px;
2115                         margin: 2px;
2116                 }
2117         /*******************************************/
2118         } @media only screen and (max-width: 720px) {
2119         /*******************************************/
2120                 h1.listing {
2121                         margin: 10px 6px 6px 6px;
2122                         max-width: calc(100% - 12px);
2123                         font-size: 1.5rem;
2124                         padding-right: 35px;
2125                 }
2126                 #content.conversations-user-page h1.listing {
2127                         font-size: 1.5rem;
2128                 }
2129                 h1.listing + .post-meta {
2130                         margin: 0 6px 0 7px;
2131                         clear: both;
2132                 }
2133                 h1.listing + .post-meta {
2134                         padding: .25em 254px 0 0;
2135                 }
2136                 h1.listing + .post-meta::after {
2137                         bottom: -2px;
2138                 }
2139                 h1.listing + .post-meta > * {
2140                         line-height: 1;
2141                         display: block;
2142                 }
2143                 #content.conversations-user-page h1.listing + .post-meta > * {
2144                         line-height: 1.5;
2145                 }
2146                 h1.listing + .post-meta .date,
2147                 h1.listing + .post-meta .author {
2148                         line-height: 1.3;
2149                 }
2150                 h1.listing + .post-meta .karma-value,
2151                 h1.listing + .post-meta .comment-count,
2152                 h1.listing + .post-meta .lw2-link,
2153                 h1.listing + .post-meta .read-time {
2154                         top: unset;
2155                         font-size: 1rem;
2156                         box-shadow: none;
2157                 }
2158                 h1.listing + .post-meta .karma-value::before,
2159                 h1.listing + .post-meta .comment-count::before,
2160                 h1.listing + .post-meta .lw2-link::before,
2161                 h1.listing + .post-meta .read-time::before {
2162                         box-shadow: none;
2163                 }
2164                 h1.listing + .post-meta .karma-value,
2165                 h1.listing + .post-meta .comment-count,
2166                 h1.listing + .post-meta .read-time,
2167                 h1.listing + .post-meta .lw2-link {
2168                         bottom: 4px;
2169                 }
2170
2171                 h1.listing + .post-meta .karma-value {
2172                         right: 192px;
2173                 }
2174                 h1.listing + .post-meta .karma-value::before {
2175                         text-shadow: 0.5px 0.5px 0.5px #999;
2176                 }
2177                 h1.listing + .post-meta .comment-count {
2178                         right: 132px;
2179                 }
2180                 h1.listing + .post-meta .read-time {
2181                         right: 56px;
2182                 }
2183                 h1.listing + .post-meta .lw2-link {
2184                         opacity: 1;
2185                         right: 0;
2186                 }
2187                 h1.listing + .post-meta .link-post-domain {
2188                         margin: 0;
2189                         line-height: 1.3;
2190                         overflow: hidden;
2191                         text-overflow: ellipsis;
2192                 }
2193                 h1.listing + .post-meta .post-section::before {
2194                         position: absolute;
2195                         left: unset;
2196                         right: 0;
2197                         bottom: 30px;
2198                         top: unset;
2199                 }
2200                 h1.listing a {
2201                         display: inline;
2202                 }
2203         /*******************************************/
2204         } @media only screen and (max-width: 520px) {
2205         /*******************************************/
2206                 h1.listing + .post-meta {
2207                         padding: .25em 144px 0 0;
2208                         flex-flow: column;
2209                 }
2210                 #content.conversations-user-page h1.listing + .post-meta {
2211                         flex-flow: row wrap;
2212                 }
2213                 h1.listing + .post-meta .date {
2214                         margin: 0.375em 0 0.25em 0;
2215                         line-height: 1;
2216                 }
2217                 #content.user-page h1.listing::after {
2218                         height: calc(100% + 2.125em);
2219                 }
2220                 #content.user-page h1.link-post-listing::after {
2221                         height: calc(100% + 3.125em);
2222                 }
2223                 #content.user-page:not(.conversations-user-page) h1.listing + .post-meta {
2224                         padding: 0.25em 144px 0.5em 36px;
2225                 }
2226                 #content.conversations-user-page h1.listing + .post-meta .date {
2227                         margin: 0 0 0 1em;
2228                 }
2229
2230                 h1.listing + .post-meta .karma-value {
2231                         bottom: 28px;
2232                         right: 56px;
2233                 }
2234                 h1.listing + .post-meta .comment-count {
2235                         bottom: 28px;
2236                         right: 0;
2237                 }
2238                 h1.listing + .post-meta .read-time {
2239                         right: 56px;
2240                         bottom: 4px;
2241                 }
2242                 h1.listing + .post-meta .lw2-link {
2243                         right: 0;
2244                         bottom: 4px;
2245                 }
2246                 h1.listing + .post-meta .link-post-domain {
2247                         max-width: 100%;
2248                 }
2249                 h1.listing + .post-meta .post-section::before {
2250                         right: 120px;
2251                 }
2252
2253                 #content.compact > .comment-thread .comment-item {
2254                         max-height: 110px;
2255                 }
2256
2257                 .textarea-container:focus-within button:active {
2258                         background-color: #ccc;
2259                 }
2260                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
2261                         background-color: #eee;
2262                         border: 1px solid #ddd;
2263                         border-radius: 6px;
2264                 }
2265                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
2266                         border-color: #c00;
2267                         box-shadow:
2268                                 0 0 0 1px #fff,
2269                                 0 0 0 2px #c00;
2270                         color: #c00;
2271                         font-weight: 600;
2272                 }
2273                 #content.conversation-page .textarea-container:focus-within::after {
2274                         background-color: #fff;
2275                 }
2276                 .textarea-container:focus-within .guiedit-buttons-container {
2277                         background-color: white;
2278                         border-top: 1px solid #ddf;
2279                 }
2280                 .textarea-container:focus-within button.guiedit {
2281                         background-color: #eee;
2282                         border: 1px solid #ddd;
2283                         border-radius: 6px;
2284                 }
2285                 #markdown-hints::after {
2286                         color: #090;
2287                 }
2288
2289                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2290                         top: 2px;
2291                 }
2292                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2293                         top: 1px;
2294                 }
2295         /*******************************************/
2296         } @media only screen and (max-width: 320px) {
2297         /*******************************************/
2298                 h1.listing {
2299                         font-size: 1.25rem;
2300                 }
2301                 #content.user-page h1.listing::after {
2302                         height: calc(100% + 2.625em);
2303                 }
2304                 #content.user-page h1.link-post-listing::after {
2305                         height: calc(100% + 3.75em);
2306                 }
2307         }
2308 }
2309