www/theme-default.css.php

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