www/theme-less.css.php

   1 <?php
   2         $UI_font = "'Mundo Sans', 'Helvetica', 'GW-Symbols', sans-serif";
   3         $headings_font = "'Caecilia', 'Helvetica', sans-serif";
   4         $text_font = "'Source Serif Pro', 'Helvetica', sans-serif";
   5         $hyperlink_color = "#92c396";
   6         $white_glow = "0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff";
   7 ?>
   8
   9 /**************/
  10 /* THEME LESS */
  11 /**************/
  12
  13 /*===========*/
  14 /* VARIABLES */
  15 /*===========*/
  16
  17 /*      Color scheme.
  18         */
  19 :root {
  20         --GW-comment-background-color-odd: #f6f6f6;
  21         --GW-comment-background-color-even: #fff;
  22         --GW-comment-background-color-target: #ffd;
  23 }
  24
  25 /*======*/
  26 /* BASE */
  27 /*======*/
  28
  29 body {
  30         color: #000;
  31         font-family: <?php echo $UI_font; ?>;
  32         font-weight: 300;
  33         background-color: #fff;
  34 }
  35 #content {
  36         line-height: 1.55;
  37         padding: 30px 20px 0 90px;
  38 }
  39 #content.comment-thread-page {
  40         padding: 0 0 0 60px;
  41 }
  42 #ui-elements-container {
  43         visibility: hidden;
  44 }
  45
  46 /* Compensating for Linux/Windows being terrible. */
  47
  48 .post-meta > *:not(.post-section),
  49 .comment-meta > *,
  50 #primary-bar a,
  51 #bottom-bar a,
  52 #secondary-bar a,
  53 #secondary-bar button,
  54 #nav-item-search > *,
  55 .page-toolbar > *,
  56 #top-nav-bar > *,
  57 .body-text a {
  58         text-shadow: <?php global $platform; echo ($platform == 'Mac' ? 'none' : '0 0 0 #aaa'); ?>;
  59 }
  60
  61 /* Compensating for Safari being terrible. */
  62
  63 @media not all and (min-resolution:.001dpcm) { @media {
  64         .post-meta > *:not(.post-section),
  65         .comment-meta > *,
  66         #primary-bar a,
  67         #secondary-bar a,
  68     #secondary-bar button,
  69         #bottom-bar a,
  70         #nav-item-search > *,
  71         .page-toolbar > *,
  72         #top-nav-bar > *,
  73         .body-text a {
  74                 text-shadow: 0 0 1px #888;
  75         }
  76 }}
  77
  78 /*=========*/
  79 /* NAV BAR */
  80 /*=========*/
  81
  82 #tertiary-bar {
  83         display: none; /* FIXME */
  84 }
  85
  86 /*= Layout (desktop) =*/
  87
  88 @media not screen and (hover: none) {
  89         .nav-inner {
  90                 font-size: 1.125em;
  91                 padding: 0.5rem 0.75rem;
  92                 text-align: right;
  93         }
  94         #secondary-bar .nav-inner {
  95                 font-size: 0.875em;
  96                 padding: 0.5rem 0.75rem;
  97         }
  98         #primary-bar,
  99         #secondary-bar {
 100                 margin: 0;
 101                 flex-flow: column;
 102                 line-height: 1;
 103         }
 104         #primary-bar {
 105                 position: fixed;
 106                 width: inherit;
 107                 min-width: inherit;
 108                 max-width: inherit;
 109                 left: 0;
 110                 right: 0;
 111                 margin: auto;
 112                 align-items: flex-start;
 113                 pointer-events: none;
 114         }
 115         #primary-bar > * {
 116                 position: relative;
 117                 right: 47px;
 118                 width: 112px;
 119                 pointer-events: auto;
 120         }
 121         #secondary-bar #nav-item-sequences .nav-inner {
 122                 font-size: 0.875em;
 123                 line-height: unset;
 124                 text-overflow: unset;
 125         }
 126         #nav-item-sequences .nav-inner::before {
 127                 content: unset;
 128         }
 129         #secondary-bar #nav-item-about {
 130                 padding-right: unset;
 131         }
 132         #secondary-bar #nav-item-about .nav-inner {
 133                 margin-right: unset;
 134         }
 135         #nav-item-archive,
 136         #nav-item-sequences,
 137         #nav-item-about {
 138                 position: fixed;
 139                 transform: translateX(-121px);
 140                 width: 85px;
 141         }
 142         #content.comment-thread-page #nav-item-archive,
 143         #content.comment-thread-page #nav-item-sequences,
 144         #content.comment-thread-page #nav-item-about {
 145                 transform: translateX(-81px);
 146         }
 147
 148         #nav-item-home {
 149                 padding-top: 0.5em;
 150         }
 151
 152         #bottom-bar .nav-inner {
 153                 text-align: center;
 154                 padding: 0.75em;
 155         }
 156 }
 157
 158 /*= Styling =*/
 159
 160 #bottom-bar .nav-item a::before {
 161         font-weight: 300;
 162 }
 163
 164 .nav-bar a,
 165 .nav-bar a:visited {
 166         color: #acd2af;
 167 }
 168 .nav-bar a:hover {
 169         color: #79a97e;
 170 }
 171
 172 /* Accesskey hints */
 173
 174 .nav-inner::after {
 175         display: none;
 176 }
 177
 178 /* "Tabs" */
 179
 180 .nav-current {
 181         font-weight: 500;
 182 }
 183
 184 #nav-item-recent-comments .nav-inner span {
 185         display: none;
 186 }
 187 #nav-item-login {
 188         position: absolute;
 189         top: 0;
 190         right: 0;
 191         padding-right: 1.5em;
 192 }
 193
 194 /* Search tab */
 195
 196 #nav-item-search {
 197         position: absolute;
 198         top: 0;
 199         left: 4.75em;
 200         width: 400px;
 201 }
 202 #nav-item-search .nav-inner {
 203         padding: 1px;
 204         display: flex;
 205 }
 206 #nav-item-search form::before {
 207         font-size: 1.125em;
 208         color: #e6e6e6;
 209         font-weight: 400;
 210         padding: 5px;
 211         transition: color 0.15s ease;
 212 }
 213 #nav-item-search form:focus-within::before {
 214         color: #92c396;
 215 }
 216 #nav-item-search button {
 217         border: none;
 218         font-weight: 300;
 219         padding: 6px;
 220         height: 23px;
 221 }
 222 #nav-item-search form:not(:focus-within) button:not(:hover) {
 223         color: #ddd;
 224 }
 225 #nav-item-search input {
 226         width: unset;
 227         flex: 1 0 auto;
 228         font-family: Inconsolata, monospace;
 229         padding: 2px 1px;
 230         margin: 0 0 0 2px;
 231 }
 232 #nav-item-search input::placeholder {
 233         color: #d00;
 234         font-weight: normal;
 235 }
 236
 237 /* Inbox indicator */
 238
 239 #inbox-indicator::before {
 240         color: #eaeaea;
 241         top: 3px;
 242         font-size: 1.125em;
 243 }
 244
 245 /* Decorative bottom bar */
 246
 247 #bottom-bar.decorative {
 248         margin-top: 0.25em;
 249 }
 250 #bottom-bar.decorative::before,
 251 #bottom-bar.decorative::after {
 252         content: "GW";
 253         display: block;
 254         text-align: center;
 255         padding: 0.25em 0 1em 0;
 256 }
 257 #bottom-bar.decorative::before {
 258         width: 100%;
 259         color: transparent;
 260         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
 261         background-repeat: repeat-x;
 262         background-position: center 35%;
 263         margin: 0 30px;
 264         filter: opacity(0.5);
 265 }
 266 #bottom-bar.decorative::after {
 267         color: #eee;
 268         position: absolute;
 269         left: 0;
 270         right: 0;
 271         margin: auto;
 272         background-color: #fff;
 273         padding-right: 4px;
 274         padding-left: 4px;
 275 }
 276 <?php fit_content("#bottom-bar.decorative::after"); ?>
 277
 278 /*= Top pagination UI hover tooltips =*/
 279
 280 #top-nav-bar a::after,
 281 #bottom-bar a::after {
 282         color: #000;
 283 }
 284
 285 /*==============*/
 286 /* PAGE TOOLBAR */
 287 /*==============*/
 288
 289 .page-toolbar {
 290         padding: 0 0 0 0;
 291         margin: 0;
 292         position: fixed;
 293         width: 120px;
 294 }
 295 .page-toolbar > * {
 296         display: block;
 297         text-align: right;
 298         line-height: 1;
 299         padding: 0.5rem 0.75rem;
 300         position: relative;
 301         right: 56px;
 302 }
 303 @media not screen and (hover: none) {
 304         .page-toolbar {
 305                 width: inherit;
 306                 min-width: inherit;
 307                 max-width: inherit;
 308                 left: 0;
 309                 right: 0;
 310                 margin-right: unset;
 311                 margin: auto;
 312                 align-items: flex-start;
 313                 pointer-events: none;
 314         }
 315         .page-toolbar > * {
 316                 right: 47px;
 317                 width: 112px;
 318                 margin-left: unset;
 319                 pointer-events: auto;
 320         }
 321 }
 322
 323 .page-toolbar button {
 324         padding: 0;
 325 }
 326
 327 .page-toolbar .button::before {
 328         font-size: 0.875em;
 329         font-weight: 400;
 330 }
 331
 332 .new-private-message {
 333         white-space: normal;
 334         line-height: 1.15;
 335 }
 336 .new-private-message::before {
 337         opacity: 0.7;
 338 }
 339
 340 .logout-button {
 341         color: #d33;
 342         font-weight: 300;
 343 }
 344
 345 /*===================*/
 346 /* TOP PAGINATION UI */
 347 /*===================*/
 348
 349 #top-nav-bar {
 350         justify-content: flex-start;
 351         padding: 1em 0 0.25em 0;
 352         font-size: 1em;
 353         margin: 0 0 0 -4px;
 354         grid-column: 1;
 355 }
 356 #top-nav-bar .page-number {
 357         line-height: 1.5;
 358 }
 359 #top-nav-bar .page-number span {
 360         display: none;
 361 }
 362 #top-nav-bar a::before {
 363         font-weight: 400;
 364 }
 365 #top-nav-bar a.disabled {
 366         visibility: visible;
 367         opacity: 0.4;
 368 }
 369
 370 #content.user-page > #top-nav-bar {
 371         justify-content: center;
 372         grid-column: 2;
 373         padding: 0;
 374 }
 375 .archive-nav + #top-nav-bar {
 376         margin: 0.5em 0 0 -4px;
 377         padding: 0 0 0.25em 0;
 378 }
 379
 380 /*==============*/
 381 /* SUBLEVEL NAV */
 382 /*==============*/
 383
 384 .sublevel-nav .sublevel-item {
 385         color: #92c396;
 386         padding: 4px 10px 1px 10px;
 387         background-color: #fff;
 388 }
 389 .sublevel-nav .sublevel-item:hover,
 390 .sublevel-nav .sublevel-item.selected {
 391         background-color: #c4dbc4;
 392         color: #fff;
 393 }
 394 .sublevel-nav .sublevel-item:not(.selected):active {
 395         background-color: #92c396;
 396 }
 397
 398 .sublevel-nav:not(.sort) .sublevel-item {
 399         border-style: solid;
 400         border-color: #c4dbc4;
 401         border-width: 1px 0 1px 1px;
 402 }
 403 .sublevel-nav:not(.sort) .sublevel-item:first-child {
 404         border-radius: 8px 0 0 8px;
 405 }
 406 .sublevel-nav:not(.sort) .sublevel-item:last-child {
 407         border-width: 1px;
 408         border-radius: 0 8px 8px 0;
 409 }
 410
 411 /*=====================*/
 412 /* SORT ORDER SELECTOR */
 413 /*=====================*/
 414 #content.index-page .sublevel-nav.sort {
 415         grid-row: 2;
 416         grid-column: 3;
 417         justify-self: right;
 418 }
 419
 420 .sublevel-nav.sort {
 421         padding: 18px 0 0 0;
 422         border-radius: 8px;
 423         pointer-events: none;
 424 }
 425 .sublevel-nav.sort .sublevel-item {
 426         padding: 7px 8px 3px 7px;
 427         text-transform: uppercase;
 428         pointer-events: auto;
 429 }
 430 .sublevel-nav.sort::before {
 431         text-transform: uppercase;
 432         color: #444;
 433         z-index: 1;
 434 }
 435 .sublevel-nav.sort::after {
 436         content: "";
 437         position: absolute;
 438         display: block;
 439         top: 0;
 440         left: 0;
 441         width: 100%;
 442         height: 100%;
 443         border-radius: 6px;
 444         box-shadow:
 445                 0 18px 0 0 #fff inset,
 446                 0 0 0 1px #c4dbc4 inset,
 447                 0 18px 0 1px #c4dbc4 inset,
 448                 0 0 0 4px #fff;
 449 }
 450
 451 /*============*/
 452 /* UI TOGGLES */
 453 /*============*/
 454
 455 @media not screen and (hover: none) {
 456         #site-nav-ui-toggle,
 457         #post-nav-ui-toggle,
 458         #appearance-adjust-ui-toggle {
 459                 visibility: visible;
 460                 position: absolute;
 461                 display: inline-block;
 462                 border-radius: 50%;
 463                 z-index: 1;
 464         }
 465         #site-nav-ui-toggle button,
 466         #post-nav-ui-toggle button,
 467         #appearance-adjust-ui-toggle button {
 468                 font-family: Font Awesome;
 469                 font-weight: 400;
 470                 font-size: 32px;
 471                 padding: 10px;
 472                 opacity: 0.4;
 473                 -webkit-tap-highlight-color: transparent;
 474                 transition:
 475                         transform 0.2s ease,
 476                         opacity 0.15s ease;
 477         }
 478         #site-nav-ui-toggle button:hover,
 479         #post-nav-ui-toggle button:hover,
 480         #appearance-adjust-ui-toggle button:hover {
 481                 opacity: 1.0;
 482         }
 483         #site-nav-ui-toggle button::selection,
 484         #post-nav-ui-toggle button::selection,
 485         #appearance-adjust-ui-toggle button::selection {
 486                 background-color: transparent;
 487         }
 488         #site-nav-ui-toggle button::-moz-focus-inner,
 489         #post-nav-ui-toggle button::-moz-focus-inner,
 490         #appearance-adjust-ui-toggle button::-moz-focus-inner {
 491                 border: none;
 492         }
 493         #post-nav-ui-toggle.highlighted,
 494         #appearance-adjust-ui-toggle.highlighted {
 495                 transform: scale(1.33);
 496         }
 497         #site-nav-ui-toggle.highlighted button {
 498                 transform: scale(1.33);
 499         }
 500         #site-nav-ui-toggle.highlighted button,
 501         #post-nav-ui-toggle.highlighted button,
 502         #appearance-adjust-ui-toggle.highlighted button {
 503                 opacity: 1.0;
 504                 text-shadow:
 505                         0 0 1px #fff,
 506                         0 0 1px #64ff4c,
 507                         0 0 3px #64ff4c,
 508                         0 0 5px #64ff4c,
 509                         0 0 8px #64ff4c;
 510         }
 511
 512         #site-nav-ui-toggle {
 513                 top: 0;
 514                 left: 12px;
 515                 pointer-events: none;
 516         }
 517         #site-nav-ui-toggle button {
 518                 font-weight: 300;
 519                 position: relative;
 520                 left: 0;
 521                 transition:
 522                         left 0.2s ease,
 523                         opacity 0.2s ease,
 524                         width 0.2s ease;
 525                 pointer-events: auto;
 526         }
 527         #site-nav-ui-toggle button:active {
 528                 transform: none;
 529         }
 530         #site-nav-ui-toggle button.engaged {
 531                 left: -92px;
 532                 width: 2.125rem;
 533                 overflow: hidden;
 534         }
 535         #site-nav-ui-toggle button.engaged::before {
 536                 content: "\F00D";
 537                 padding: 0 0.25em 0 0;
 538         }
 539
 540         #primary-bar,
 541         #secondary-bar #nav-item-archive,
 542         #secondary-bar #nav-item-sequences,
 543         #secondary-bar #nav-item-about,
 544         .page-toolbar {
 545                 visibility: hidden;
 546                 top: 0;
 547                 max-height: 0px;
 548         }
 549         #primary-bar,
 550         #secondary-bar #nav-item-archive,
 551         #secondary-bar #nav-item-sequences,
 552         #secondary-bar #nav-item-about,
 553         .page-toolbar {
 554                 opacity: 0.0;
 555         }
 556         #primary-bar,
 557         #secondary-bar #nav-item-archive,
 558         #secondary-bar #nav-item-sequences,
 559         #secondary-bar #nav-item-about,
 560         .page-toolbar {
 561                 transition:
 562                         top 0.2s ease,
 563                         max-height 0.2s ease,
 564                         visibility 0.2s ease,
 565                         opacity 0.2s ease;
 566         }
 567         #nav-item-search,
 568         #nav-item-login {
 569                 visibility: visible;
 570         }
 571         #primary-bar.engaged,
 572         #secondary-bar.engaged #nav-item-archive,
 573         #secondary-bar.engaged #nav-item-sequences,
 574         #secondary-bar.engaged #nav-item-about,
 575         .page-toolbar.engaged {
 576                 visibility: visible;
 577                 max-height: 1000px;
 578         }
 579         #primary-bar.engaged,
 580         #secondary-bar.engaged #nav-item-archive,
 581         #secondary-bar.engaged #nav-item-sequences,
 582         #secondary-bar.engaged #nav-item-about,
 583         .page-toolbar.engaged {
 584                 opacity: 1.0;
 585         }
 586         #primary-bar.engaged {
 587                 top: 0;
 588         }
 589         #secondary-bar.engaged #nav-item-archive {
 590                 top: 196px;
 591         }
 592         #secondary-bar.engaged #nav-item-sequences {
 593                 top: 230px;
 594         }
 595         #secondary-bar.engaged #nav-item-about {
 596                 top: 264px;
 597         }
 598         .page-toolbar.engaged {
 599                 top: 314px;
 600         }
 601
 602         #post-nav-ui-toggle {
 603                 bottom: 10px;
 604                 right: -30px;
 605         }
 606         #content.comment-thread-page ~ #ui-elements-container #post-nav-ui-toggle {
 607                 right: -54px;
 608         }
 609         #post-nav-ui-toggle button.engaged {
 610                 transform: rotate(-90deg);
 611         }
 612
 613         #quick-nav-ui,
 614         #new-comment-nav-ui,
 615         #hns-date-picker {
 616                 bottom: 0;
 617                 max-height: 0px;
 618                 opacity: 0.0;
 619                 transition:
 620                         bottom 0.2s ease,
 621                         max-height 0.2s ease,
 622                         opacity 0.2s ease,
 623                         visibility 0.2s ease;
 624         }
 625         #quick-nav-ui.engaged,
 626         #new-comment-nav-ui.engaged,
 627         #hns-date-picker.engaged {
 628                 visibility: visible;
 629                 max-height: 1000px;
 630                 opacity: 1.0;
 631         }
 632
 633         #quick-nav-ui {
 634                 right: -24px;
 635         }
 636         #content.post-page ~ #ui-elements-container #quick-nav-ui {
 637                 right: -48px;
 638         }
 639         #quick-nav-ui.engaged {
 640                 bottom: 64px;
 641         }
 642         #quick-nav-ui a {
 643                 font-weight: 400;
 644         }
 645
 646         #new-comment-nav-ui {
 647                 right: -49px;
 648         }
 649         #new-comment-nav-ui.engaged {
 650                 bottom: 216px;
 651         }
 652
 653         #hns-date-picker {
 654                 right: -186px;
 655         }
 656         #hns-date-picker.engaged {
 657                 bottom: 247px;
 658         }
 659         @media only screen and (max-width: 1440px) {
 660                 #hns-date-picker {
 661                         background-color: rgba(255,255,255,0.95);
 662                         right: -18px;
 663                 }
 664                 #hns-date-picker::before {
 665                         display: none;
 666                 }
 667                 #hns-date-picker input {
 668                         background-color: #fff;
 669                 }
 670                 #hns-date-picker span {
 671                         text-shadow:
 672                                 0 0 1px #fff,
 673                                 0 0 3px #fff,
 674                                 0 0 5px #fff,
 675                                 0 0 8px #fff,
 676                                 0 0 13px #fff,
 677                                 0 0 21px #fff;
 678                 }
 679                 #hns-date-picker.engaged {
 680                         bottom: 238px;
 681                 }
 682         }
 683
 684         #appearance-adjust-ui-toggle {
 685                 bottom: 10px;
 686                 left: 10px;
 687         }
 688         #appearance-adjust-ui-toggle button.engaged {
 689                 transform: rotate(-90deg);
 690         }
 691
 692         #comments-view-mode-selector,
 693         #theme-selector,
 694         #width-selector,
 695         #dark-mode-selector,
 696         #text-size-adjustment-ui,
 697         #theme-tweaker-toggle {
 698                 pointer-events: none;
 699                 visibility: visible;
 700                 opacity: 0.0;
 701                 transition:
 702                         opacity 0.35s ease;
 703         }
 704         <?php fit_content("#theme-tweaker-toggle"); ?>
 705         #comments-view-mode-selector::after,
 706         #theme-selector::after,
 707         #theme-selector::before,
 708         #width-selector::after,
 709         #dark-mode-selector::after,
 710         #text-size-adjustment-ui::after {
 711                 content: "";
 712                 background-color: #fff;
 713                 display: block;
 714                 position: absolute;
 715                 width: 100%;
 716                 height: 100%;
 717                 top: 0;
 718                 left: 0;
 719         }
 720         #dark-mode-selector::after {
 721                 width: calc(100% + 2px);
 722                 height: calc(100% + 2px);
 723                 top: -1px;
 724                 left: -1px;
 725         }
 726         #comments-view-mode-selector.engaged,
 727         #theme-selector.engaged,
 728         #width-selector.engaged,
 729         #dark-mode-selector.engaged,
 730         #text-size-adjustment-ui.engaged,
 731         #theme-tweaker-toggle.engaged {
 732                 pointer-events: auto;
 733                 opacity: 1.0;
 734         }
 735
 736         #comments-view-mode-selector {
 737                 left: -45px;
 738                 top: calc(100% - 180px);
 739         }
 740         #comments-view-mode-selector::after {
 741                 max-height: 1000px;
 742                 transition:
 743                         max-height 0.2s ease;
 744         }
 745         #comments-view-mode-selector.engaged::after {
 746                 max-height: 0px;
 747         }
 748
 749         #theme-selector {
 750                 display: block;
 751                 left: 16px;
 752                 top: calc(100% - 316px);
 753                 opacity: 1.0;
 754                 visibility: hidden;
 755                 transition:
 756                         visibility 0.2s ease;
 757         }
 758         #theme-selector.engaged {
 759                 visibility: visible;
 760         }
 761         #theme-selector::after,
 762         #theme-selector::before {
 763                 top: -50px;
 764                 height: calc(100% + 60px);
 765                 max-height: 300px;
 766                 transition:
 767                         max-height 0.2s ease;
 768                 z-index: 1;
 769         }
 770         #theme-selector.engaged::after,
 771         #theme-selector.engaged::before {
 772                 max-height: 0px;
 773         }
 774         #theme-selector::before {
 775                 z-index: 0;
 776         }
 777
 778         #width-selector {
 779                 display: table;
 780                 left: -68px;
 781                 top: calc(100% - 48px);
 782         }
 783         #width-selector::after {
 784                 max-width: 100px;
 785                 transition:
 786                         max-width 0.15s ease;
 787         }
 788         #width-selector.engaged::after {
 789                 max-width: 0px;
 790         }
 791
 792         <?php fit_content("#dark-mode-selector"); ?>
 793         #dark-mode-selector {
 794                 left: -67px;
 795                 top: calc(100% - 120px);
 796         }
 797         #dark-mode-selector::after {
 798                 max-width: 1000px;
 799                 max-height: 1000px;
 800                 transition:
 801                         max-width 0.2s ease,
 802                         max-height 0.2s ease;
 803         }
 804         #dark-mode-selector.engaged::after {
 805                 max-width: 0px;
 806                 max-height: 0px;
 807         }
 808
 809         #text-size-adjustment-ui {
 810                 left: -67px;
 811                 top: calc(100% - 80px);
 812         }
 813         #text-size-adjustment-ui::after {
 814                 max-width: 1000px;
 815                 max-height: 1000px;
 816                 transition:
 817                         max-width 0.2s ease,
 818                         max-height 0.2s ease;
 819         }
 820         #text-size-adjustment-ui.engaged::after {
 821                 max-width: 0px;
 822                 max-height: 0px;
 823         }
 824
 825         #theme-tweaker-toggle {
 826                 left: 19px;
 827                 top: calc(100% - 356px);
 828                 visibility: hidden;
 829                 transition:
 830                         visibility 0.5s ease-out;
 831         }
 832         #theme-tweaker-toggle.engaged {
 833                 visibility: visible;
 834         }
 835         @-moz-document url-prefix() {
 836                 #theme-tweaker-toggle {
 837                         left: 18px;
 838                 }
 839         }
 840         #theme-tweaker-toggle button {
 841                 font-weight: 400;
 842         }
 843
 844         #theme-tweaker-ui {
 845                 visibility: visible;
 846         }
 847 }
 848
 849 /*================*/
 850 /* WIDTH SELECTOR */
 851 /*================*/
 852
 853 #width-selector button {
 854         box-shadow:
 855                 0 0 0 4px #fff inset,
 856                 0 0 0 5px #aaa inset;
 857 }
 858 #width-selector button:hover,
 859 #width-selector button.selected {
 860         box-shadow:
 861                 0 0 0 1px #fff inset,
 862                 0 0 0 2px #aaa inset,
 863                 0 0 0 4px #fff inset,
 864                 0 0 0 5px #aaa inset;
 865 }
 866
 867 /*================*/
 868 /* THEME SELECTOR */
 869 /*================*/
 870
 871 #theme-selector button {
 872         box-shadow:
 873                 0 0 0 4px #fff inset,
 874                 0 0 0 5px #999 inset;
 875 }
 876 #theme-selector button:hover,
 877 #theme-selector button.selected {
 878         box-shadow:
 879                 0 0 0 1px #fff inset,
 880                 0 0 0 2px #999 inset,
 881                 0 0 0 4px #fff inset,
 882                 0 0 0 5px #999 inset;
 883 }
 884
 885 #theme-selector button::before {
 886         font-size: 0.9375em;
 887         font-weight: 300;
 888         padding: 6px;
 889         color: #aaa;
 890         background-color: #fff;
 891 }
 892 #theme-selector button:hover::before,
 893 #theme-selector button.selected::before {
 894         color: #000;
 895 }
 896
 897 /*======================*/
 898 /* THEME TWEAKER TOGGLE */
 899 /*======================*/
 900
 901 #theme-tweaker-toggle button {
 902         color: #777;
 903 }
 904
 905 /*=================*/
 906 /* QUICKNAV WIDGET */
 907 /*=================*/
 908
 909 #quick-nav-ui a {
 910         color: #acd2af;
 911         border-radius: 4px;
 912         text-decoration: none;
 913         transition:
 914                 color 0.15s ease,
 915                 box-shadow 0.15s ease-out;
 916 }
 917 #quick-nav-ui a[href='#bottom-bar'] {
 918         line-height: 1.8;
 919 }
 920 #quick-nav-ui a:active {
 921         transform: scale(0.9);
 922 }
 923 #quick-nav-ui a[href='#comments'].no-comments {
 924         opacity: 0.4;
 925         color: #ddd;
 926 }
 927 @media only screen and (hover: hover) {
 928         #quick-nav-ui a:hover {
 929                 color: #79a97e;
 930                 box-shadow:
 931                         0 0 0 1px rgba(121, 169, 126, 0.3),
 932                         0 0 0 2px #fff;
 933         }
 934         #quick-nav-ui a:focus:not(:hover) {
 935                 transform: none;
 936                 text-shadow: none;
 937         }
 938 }
 939
 940 /*======================*/
 941 /* NEW COMMENT QUICKNAV */
 942 /*======================*/
 943
 944 #new-comment-nav-ui .new-comments-count {
 945         color: #888;
 946         text-shadow: 0.5px 0.5px 0 #fff;
 947         top: 2px;
 948 }
 949 #new-comment-nav-ui .new-comments-count::after {
 950         color: #777;
 951 }
 952 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
 953         color: #e6e6e6;
 954 }
 955
 956 /*=================*/
 957 /* HNS DATE PICKER */
 958 /*=================*/
 959
 960 #hns-date-picker span {
 961         color: #999;
 962         font-weight: 400;
 963 }
 964 #hns-date-picker input {
 965         border: 1px solid #ddd;
 966         color: #999;
 967         padding: 3px 3px 0 3px;
 968 }
 969 #hns-date-picker input:focus {
 970         color: #000;
 971 }
 972
 973 /*======================*/
 974 /* ANTI-KIBITZER TOGGLE */
 975 /*======================*/
 976
 977 #anti-kibitzer-toggle {
 978         bottom: unset;
 979         top: 30px;
 980         visibility: visible;
 981         right: -48px;
 982 }
 983 #anti-kibitzer-toggle button::before {
 984         font-weight: 300;
 985 }
 986 #anti-kibitzer-toggle button::before,
 987 #anti-kibitzer-toggle button::after {
 988         opacity: 0.2;
 989 }
 990 #anti-kibitzer-toggle button:hover::before,
 991 #anti-kibitzer-toggle button:hover::after {
 992         opacity: 1.0;
 993 }
 994
 995 /*====================*/
 996 /* DARK MODE SELECTOR */
 997 /*====================*/
 998
 999 #dark-mode-selector {
1000         outline: 1px solid #92c396;
1001 }
1002 #dark-mode-selector button {
1003         color: #92c396;
1004 }
1005 #dark-mode-selector button.selected {
1006         background-color: #92c396;
1007         color: #fff;
1008 }
1009 #dark-mode-selector button:not(.selected) + button:not(.selected) {
1010         box-shadow: 1px 0 0 0 #92c396 inset;
1011 }
1012 #dark-mode-selector button:disabled:hover {
1013         text-shadow: none;
1014 }
1015 #dark-mode-selector button::after {
1016         font-family: <?php echo $UI_font; ?>;
1017         color: #92c396;
1018         text-shadow: none;
1019         top: -36px;
1020 }
1021
1022 /*======================*/
1023 /* TEXT SIZE ADJUSTMENT */
1024 /*======================*/
1025
1026 #text-size-adjustment-ui button {
1027         font-weight: 400;
1028 }
1029
1030 /*=============================*/
1031 /* COMMENTS VIEW MODE SELECTOR */
1032 /*=============================*/
1033
1034 #comments-view-mode-selector a {
1035         color: #acd2af;
1036         opacity: 0.5;
1037 }
1038
1039 /*===============*/
1040 /* KEYBOARD HELP */
1041 /*===============*/
1042
1043 #keyboard-help-overlay {
1044         font-weight: 400;
1045 }
1046 #keyboard-help-overlay .keyboard-help-container h1 {
1047         padding: 15px 20px 5px 20px;
1048 }
1049 #nav-item-about button.open-keyboard-help {
1050         font-size: 0.875em;
1051         left: 0;
1052         top: -1px;
1053 }
1054
1055 /*==========*/
1056 /* ARCHIVES */
1057 /*==========*/
1058
1059 .archive-nav {
1060         border: 1px solid transparent;
1061         margin: 1.25em 0 0 0;
1062         padding: 0;
1063 }
1064 .archive-nav *[class^='archive-nav-item'] {
1065         color: <?php echo $hyperlink_color; ?>;
1066         border-style: solid;
1067         border-color: #c4dbc4;
1068         border-width: 1px 0 1px 1px;
1069 }
1070 .archive-nav div[class^='archive-nav-']:nth-of-type(2) *[class^='archive-nav-item'] {
1071         border-top-width: 0;
1072         border-bottom-width: 0;
1073 }
1074 .archive-nav div[class^='archive-nav-']:last-of-type *[class^='archive-nav-item'] {
1075         border-bottom-width: 1px;
1076 }
1077 .archive-nav *[class^='archive-nav-item']:last-child {
1078         border-right-width: 1px;
1079 }
1080 .archive-nav a:hover,
1081 .archive-nav span[class^='archive-nav-item'] {
1082         background-color: #c4dbc4;
1083         color: #fff;
1084 }
1085
1086 .archive-nav a:active {
1087         background-color: <?php echo $hyperlink_color; ?>;
1088 }
1089
1090 /*==========*/
1091 /* LISTINGS */
1092 /*==========*/
1093
1094 h1.listing,
1095 #content.search-results-page h1.listing {
1096         margin: 0.7em 20px 0.1em 0;
1097         max-width: calc(100% - 20px);
1098         font-family: <?php echo $headings_font; ?>, 'Font Awesome';
1099         font-size: 1.25rem;
1100         line-height: 1.2;
1101 }
1102
1103 h1.listing .link-post-link {
1104         color: #bbb;
1105         font-weight: 400;
1106         font-size: 0.8125em;
1107         top: 3px;
1108 }
1109 h1.listing .post-title-link {
1110         font-weight: 300;
1111         text-shadow: <?php global $platform; echo ($platform == 'Mac' ? 'none' : '0 0 0 #444'); ?>;
1112         color: <?php global $platform; echo ($platform == 'Mac' ? '#444' : '#000'); ?>;
1113 }
1114 @-moz-document url-prefix() {
1115         h1.listing .post-title-link {
1116                 text-shadow: none;
1117         }
1118 }
1119 @media not all and (min-resolution:.001dpcm) { @media {
1120         h1.listing .post-title-link {
1121                 color: #000;
1122         }
1123 }}
1124
1125 @media only screen and (hover: hover) {
1126         h1.listing a:hover,
1127         h1.listing a:focus {
1128                 color: #92c396;
1129                 background-color: rgba(255,255,255,0.85);
1130         }
1131         h1.listing:focus-within::before {
1132                 color: #79a97e;
1133                 font-weight: 400;
1134                 left: -0.625em;
1135         }
1136         h1.listing .link-post-link:hover {
1137                 color: #79a97e;
1138         }
1139         h1.listing .link-post-link:focus {
1140                 color: #a0d3a2;
1141                 text-decoration: none;
1142                 border-bottom: 2px dotted #a0d3a2;
1143         }
1144 }
1145
1146 h1.listing .edit-post-link {
1147         padding: 5px 3px 24px 0.5em;
1148         top: 0;
1149         right: 0;
1150 }
1151 h1.listing .edit-post-link:hover {
1152         text-decoration: none;
1153 }
1154 #content.user-page h1.listing .edit-post-link {
1155         background-color: #fff;
1156 }
1157
1158 /*======*/
1159 /* SPAM */
1160 /*======*/
1161
1162 h1.listing.spam {
1163         opacity: 0.15;
1164 }
1165 h1.listing.spam + .post-meta {
1166         opacity: 0.35;
1167 }
1168 h1.listing.spam:hover,
1169 h1.listing.spam + .post-meta:hover,
1170 h1.listing.spam:hover + .post-meta {
1171         opacity: 1.0;
1172 }
1173
1174 /*===================*/
1175 /* LISTING POST-META */
1176 /*===================*/
1177
1178 h1.listing + .post-meta {
1179         font-size: 0.875rem;
1180         margin: 0 20px 0 1px;
1181 }
1182
1183 h1.listing + .post-meta > * {
1184         color: #bbb;
1185         margin: 0 1.25em 0 0;
1186 }
1187 h1.listing + .post-meta a {
1188         color: #92c396;
1189 }
1190 h1.listing + .post-meta a:hover {
1191         color: #79a97e;
1192 }
1193 h1.listing + .post-meta .karma-value {
1194         cursor: default;
1195 }
1196 h1.listing + .post-meta .lw2-link {
1197         display: none;
1198 }
1199 h1.listing + .post-meta .post-section {
1200         overflow: visible;
1201         order: 1;
1202 }
1203 h1.listing + .post-meta .post-section::before {
1204         position: relative;
1205         left: unset;
1206         top: -1px;
1207 }
1208
1209 /*============*/
1210 /* USER PAGES */
1211 /*============*/
1212
1213 #content.user-page h1.page-main-heading,
1214 #content.user-page .user-stats {
1215         grid-row: 1;
1216 }
1217 #content.user-page #comments-list-mode-selector,
1218 #content.user-page .sublevel-nav.sort {
1219         grid-row: 2 / span 2;
1220 }
1221 #content.user-page .sublevel-nav {
1222         grid-row: 2;
1223         margin-bottom: 1em;
1224 }
1225 #content.user-page #top-nav-bar {
1226         grid-row: 3;
1227 }
1228
1229 #content.user-page h1.page-main-heading,
1230 #content.conversation-page h1.page-main-heading {
1231         font-family: <?php echo $headings_font; ?>;
1232         font-weight: normal;
1233         margin: 0.5em 0 0 0;
1234 }
1235 #content.user-page h1.page-main-heading {
1236         border-bottom: 1px solid #e6e6e6;
1237         line-height: 1;
1238 }
1239
1240 #content.user-page h1.listing,
1241 #content.user-page h1.listing + .post-meta {
1242         border-color: #ddd;
1243         border-style: solid;
1244 }
1245 #content.user-page h1.listing {
1246         max-width: 100%;
1247         padding: 6px 8px 0 8px;
1248         border-width: 1px 1px 0 1px;
1249         margin: 1rem 0 0 0;
1250 }
1251 #content.own-user-page h1.listing,
1252 h1.listing.own-post-listing {
1253         padding-right: 36px;
1254 }
1255 @media only screen and (hover: hover) {
1256         #content.user-page h1.listing:focus-within::before {
1257                 left: -0.625em;
1258         }
1259 }
1260 #content.user-page h1.listing + .post-meta {
1261         margin: 0 0 1rem 0;
1262         padding: 12px 8px 3px 8px;
1263         border-width: 0 1px 1px 1px;
1264         line-height: 1;
1265 }
1266
1267 #content.conversations-user-page h1.listing {
1268         padding: 8px 6px 28px 10px;
1269         font-size: 1.25rem;
1270 }
1271 #content.conversations-user-page h1.listing + .post-meta {
1272         padding: 4px 10px 0.5em 6px;
1273         margin: 0;
1274 }
1275
1276 .user-stats .karma-total {
1277         font-weight: 500;
1278 }
1279
1280 /*===============*/
1281 /* CONVERSATIONS */
1282 /*===============*/
1283
1284 /*============*/
1285 /* LOGIN PAGE */
1286 /*============*/
1287
1288 .login-container form h1 {
1289         font-family: <?php echo $headings_font; ?>;
1290         font-weight: 300;
1291 }
1292
1293 .login-container form label {
1294         color: #aaa;
1295 }
1296
1297 /* “Create account” form */
1298
1299 #signup-form {
1300         border: 1px solid #e4e4e4;
1301 }
1302 #signup-form input[type='submit'] {
1303         padding: 8px 12px 6px 12px;
1304 }
1305
1306 /* Log in tip */
1307
1308 .login-container .login-tip {
1309         border: 1px solid #eee;
1310 }
1311
1312 /* Message box */
1313
1314 .error-box {
1315         border: 1px solid red;
1316         background-color: #faa;
1317 }
1318 .success-box {
1319         border: 1px solid green;
1320         background-color: #afa;
1321 }
1322
1323 /*=====================*/
1324 /* PASSWORD RESET PAGE */
1325 /*=====================*/
1326
1327 .reset-password-container input[type='submit'] {
1328         background-color: #e4e4e4;
1329         border: 1px solid #ccc;
1330         font-weight: bold;
1331 }
1332
1333 /*===================*/
1334 /* TABLE OF CONTENTS */
1335 /*===================*/
1336
1337 .contents {
1338         font-family: <?php echo $UI_font; ?>;
1339         padding-top: 0;
1340         margin-top: 1em;
1341         background-color: #fff;
1342 }
1343 .body-text .contents ul {
1344         font-size: 0.8125em;
1345 }
1346 .body-text .contents li::before {
1347         color: #bbb;
1348 }
1349
1350 .contents .toc-collapse-toggle-button {
1351         color: #ddd;
1352         font-weight: 300;
1353         box-shadow: 0 0 0 1px transparent;
1354 }
1355 .contents .toc-collapse-toggle-button:hover {
1356         color: #bbb;
1357         text-shadow: <?php echo $white_glow; ?>;
1358 }
1359
1360 /*==================*/
1361 /* POSTS & COMMENTS */
1362 /*==================*/
1363
1364 .body-text {
1365         font-family: <?php echo $text_font; ?>;
1366         text-shadow: <?php global $platform; echo ($platform == 'Mac' ? '0 0 0 rgba(0,0,0,0.7)' : 'none'); ?>;
1367         font-weight: <?php global $platform; echo ($platform == 'Mac' ? '300' : '400'); ?>;
1368 }
1369
1370 /*=======*/
1371 /* POSTS */
1372 /*=======*/
1373
1374 .post {
1375         overflow: visible;
1376         padding: 2em 0 0 0;
1377 }
1378
1379 .post-body {
1380         font-size: 1.25rem;
1381 }
1382
1383 h1.post-title {
1384         font-size: 2.75rem;
1385         font-family: <?php echo $headings_font; ?>;
1386         font-weight: 300;
1387         line-height: 1.1;
1388         margin: 1.375em 0 0.5em 0;
1389 }
1390
1391 /*=================*/
1392 /* POST NAVIGATION */
1393 /*=================*/
1394
1395 .post-nav-item {
1396         padding: 0 0 0 10px;
1397 }
1398
1399 @media only screen and (max-width: 900px) {
1400         .post-nav-item {
1401                 padding: 0;
1402         }
1403         .sequence-title {
1404                 border-top: 1px solid #ddd;
1405                 padding: 0.375em 0.5em 0.125em 0.5em
1406         }
1407         .post-nav.prev {
1408                 border-right: 1px solid #ddd;
1409         }
1410         .post-nav.next {
1411                 border-left: 1px solid #ddd;
1412         }
1413 }
1414
1415 /*===========*/
1416 /* POST-META */
1417 /*===========*/
1418
1419 .post-meta .post-section::before,
1420 .comment-meta .alignment-forum {
1421         color: #dfdfdf;
1422         font-weight: 400;
1423         padding: 1px;
1424 }
1425 .post-meta .post-section.alignment-forum::before {
1426         color: #d6d7ff;
1427 }
1428 .post .post-meta .post-section::before {
1429         position: relative;
1430         top: -3px;
1431 }
1432
1433 a.post-section::before {
1434         transition: color 0.15s ease;
1435 }
1436 a.post-section:hover::before {
1437         color: #79a97e;
1438 }
1439 a.post-section.alignment-forum:hover::before {
1440         color: #999bc1;
1441 }
1442
1443 .post-meta > * {
1444         color: #bbb;
1445 }
1446 .post-meta a,
1447 .post-meta a:visited {
1448         color: #92c396;
1449 }
1450 .post-meta a:hover {
1451         color: #79a97e;
1452 }
1453 .post-meta .lw2-link:hover {
1454         opacity: 1;
1455 }
1456
1457 .post .top-post-meta {
1458         flex-flow: column;
1459         position: relative;
1460 }
1461 .post .top-post-meta .karma,
1462 .post .top-post-meta .author,
1463 .post .top-post-meta .qualified-linking {
1464         margin: auto;
1465 }
1466 <?php fit_content(".post .top-post-meta .karma, .post .top-post-meta .author, .post .top-post-meta .qualified-linking"); ?>
1467
1468 .post .top-post-meta .karma {
1469         order: -1;
1470         display: flex;
1471         flex-flow: column;
1472 }
1473 .post .top-post-meta .karma .karma-value {
1474         padding: 5px 0 0 0;
1475         color: #999;
1476         font-size: 1.125em;
1477         position: relative;
1478         background-color: #fff;
1479         width: 2.25em;
1480 }
1481 .post .top-post-meta .karma .karma-value::before {
1482         content: "";
1483         position: absolute;
1484         display: block;
1485         background-color: #ccc;
1486         height: 1px;
1487         width: 244px;
1488         top: 50%;
1489         left: -100px;
1490         z-index: -1;
1491 }
1492 .post .top-post-meta .karma .karma-value span {
1493         display: none;
1494 }
1495
1496 .post .post-meta .karma.active-controls::after {
1497         bottom: -32px;
1498         padding: 0 4px;
1499 }
1500 .post .post-meta .karma.active-controls:hover::after {
1501         opacity: 0.7;
1502 }
1503 .post .top-post-meta .karma.active-controls::after {
1504         bottom: 0;
1505         left: calc(100% + 16px);
1506         max-width: unset;
1507         padding: 0;
1508         white-space: nowrap;
1509 }
1510 .post .post-meta .karma .karma-value::after {
1511         top: -20px;
1512 }
1513 .post .post-meta .karma .karma-value:hover::after {
1514         opacity: 0.7;
1515 }
1516 .post .top-post-meta .karma .karma-value::after {
1517         top: -6px;
1518         left: unset;
1519         width: unset;
1520         right: calc(100% + 8px);
1521 }
1522
1523 .post .top-post-meta .author {
1524         padding: 4px 0 0 0;
1525         margin: 0.25em auto;
1526 }
1527 .post .top-post-meta .qualified-linking {
1528         z-index: 1;
1529 }
1530 .post .top-post-meta .qualified-linking label {
1531         margin: 0;
1532 }
1533
1534 .post .top-post-meta .post-section,
1535 .post .top-post-meta .lw2-link {
1536         display: none;
1537 }
1538
1539 .post .top-post-meta .date,
1540 .post .top-post-meta .comment-count {
1541         position: absolute;
1542         right: 100%;
1543 }
1544 .post .top-post-meta .date {
1545         top: calc(100% + 34px);
1546 }
1547 .post .top-post-meta .comment-count {
1548         top: calc(100% + 60px);
1549 }
1550 .post .top-post-meta .date > span,
1551 .post .top-post-meta .comment-count > span {
1552         position: fixed;
1553         transform: translateX(-100%);
1554 }
1555
1556 .post .bottom-post-meta {
1557         padding: 1.5em 0 1em 0;
1558         margin: 0.5em 0 0 0;
1559         position: relative;
1560         border-color: transparent;
1561 }
1562 .post .bottom-post-meta::before,
1563 .post .bottom-post-meta::after {
1564         content: "";
1565         position: absolute;
1566         display: block;
1567         background-color: #ddd;
1568         height: 1px;
1569         width: calc(100% - 60px);
1570 }
1571 .post .bottom-post-meta::before {
1572         top: 0;
1573 }
1574 .post .bottom-post-meta::after {
1575         bottom: 0;
1576 }
1577
1578 @media only screen and (max-width: 520px) {
1579         .post .bottom-post-meta {
1580                 padding: 0.75em 0 0.125em 0;
1581         }
1582 }
1583
1584 /*============*/
1585 /* LINK POSTS */
1586 /*============*/
1587
1588 .post.link-post a.link-post-link {
1589         font-family: <?php echo $UI_font; ?>;
1590 }
1591 .post.link-post a.link-post-link::before {
1592         opacity: 0.6;
1593 }
1594 .post.link-post a.link-post-link:hover::before {
1595         opacity: 1;
1596 }
1597 .post.link-post a.link-post-link:focus {
1598         color: #79a97e;
1599         border-bottom: 2px dotted #79a97e;
1600 }
1601
1602 /*==========*/
1603 /* COMMENTS */
1604 /*==========*/
1605
1606 .comments::before {
1607         border-top: 1px solid #ddd;
1608 }
1609
1610 .comments {
1611         padding: 0 0 0 10px;
1612 }
1613 #content > .comment-thread .comment-meta a.date:focus,
1614 #content > .comment-thread .comment-meta a.permalink:focus {
1615         color: #888;
1616         outline: 1px dotted #999;
1617         position: relative;
1618         background-color: #fff;
1619         padding: 0 5px;
1620         left: -5px;
1621 }
1622 #content > .comment-thread .comment-meta a.date:focus + *,
1623 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1624         margin-left: -10px;
1625 }
1626 #content > .comment-thread .comment-meta a.permalink:focus {
1627         outline: 2px dotted #999;
1628 }
1629 .comment-item {
1630         border: 1px solid #ddd;
1631         background-color: var(--GW-comment-background-color);
1632 }
1633 .comment-parent-link::after {
1634         box-shadow:
1635                 0 28px 16px -16px var(--GW-comment-parent-background-color) inset,
1636                 4px 16px 0 12px var(--GW-comment-background-color-target) inset,
1637                 4px     4px 0 12px var(--GW-comment-background-color-target) inset;
1638 }
1639
1640 .comment-body {
1641         font-size: 1.1875rem;
1642 }
1643 #content.user-page .comment-body,
1644 #content.index-page .comment-body {
1645         font-size: 1.125rem;
1646 }
1647
1648 /*================================*/
1649 /* DEEP COMMENT THREAD COLLAPSING */
1650 /*================================*/
1651
1652 .comment-item input[id^="expand"] + label::after {
1653         color: <?php echo $hyperlink_color; ?>;
1654         font-weight: 400;
1655 }
1656 .comment-item input[id^="expand"] + label:hover::after {
1657         color: #c00;
1658 }
1659 .comment-item input[id^="expand"] + label:active::after,
1660 .comment-item input[id^="expand"] + label:focus::after{
1661         color: #c00;
1662 }
1663 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
1664         border-width: 1px 0 0 0;
1665 }
1666
1667 /*==============*/
1668 /* COMMENT-META */
1669 /*==============*/
1670
1671 .comment-meta {
1672         padding-top: 4px;
1673 }
1674 .comment-meta > * {
1675         color: #bbb;
1676 }
1677 .comment-meta a,
1678 .comment-meta a:visited {
1679         color: #92c396;
1680 }
1681 .comment-meta a:hover {
1682         color: #79a97e;
1683 }
1684 .comment-meta .author {
1685         font-size: 1.125em;
1686         font-weight: normal;
1687 }
1688
1689 .comment-controls .voting-controls {
1690         color: #bbb;
1691 }
1692
1693 .comment-item .voting-controls.active-controls::after,
1694 .comment-item .voting-controls .karma-value::after,
1695 .author::before {
1696         background-color: #fff;
1697         color: #bbb;
1698         border-radius: 4px;
1699         box-shadow: 0 0 0 1px #eee inset;
1700 }
1701 .comment-item .voting-controls.active-controls::after {
1702         padding: 6px 4px 4px 4px;
1703         bottom: -42px;
1704 }
1705 .comment-item .voting-controls .karma-value::after {
1706         padding: 4px 8px 0 8px;
1707         top: -30px;
1708 }
1709
1710 /*====================*/
1711 /* ANTI-KIBITZER MODE */
1712 /*====================*/
1713
1714 .author.redacted,
1715 .inline-author.redacted {
1716         opacity: 0.9;
1717         font-weight: 300;
1718 }
1719
1720 .karma-value.redacted {
1721         opacity: 0.7;
1722 }
1723
1724 .link-post-domain.redacted {
1725         opacity: 0.6;
1726 }
1727
1728 /*===========================*/
1729 /* COMMENT THREAD NAVIGATION */
1730 /*===========================*/
1731
1732 div.comment-parent-link {
1733         font-weight: 400;
1734 }
1735 a.comment-parent-link {
1736         font-weight: 300;
1737 }
1738 a.comment-parent-link::before {
1739         color: #bbb;
1740         font-weight: 400;
1741 }
1742 a.comment-parent-link:hover::before {
1743         background-color: #ffd;
1744         color: #999;
1745 }
1746
1747 div.comment-child-links {
1748         font-weight: 400;
1749 }
1750 div.comment-child-links a {
1751         font-weight: 300;
1752 }
1753 .comment-child-link::before {
1754         color: #ccc;
1755 }
1756
1757 .comment-item-highlight {
1758         box-shadow:
1759                 0 0     2px #e7b200,
1760                 0 0     3px #e7b200,
1761                 0 0     5px #e7b200,
1762                 0 0     7px #e7b200,
1763                 0 0 10px #e7b200;
1764         border: 1px solid #e7b200;
1765 }
1766 .comment-item-highlight-faint {
1767         box-shadow:
1768                 0 0     2px #f8e7b5,
1769                 0 0     3px #f8e7b5,
1770                 0 0     5px #f8e7b5,
1771                 0 0     7px #f8e7b5,
1772                 0 0 10px #f8e7b5;
1773         border: 1px solid #f8e7b5;
1774 }
1775
1776 .comment-popup {
1777         background-color: #fff;
1778 }
1779
1780 /*====================*/
1781 /* COMMENT PERMALINKS */
1782 /*====================*/
1783
1784 .comment-meta .permalink::before {
1785         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-blue-on-white.gif")) ?>');
1786 }
1787 .comment-meta .lw2-link::before {
1788         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-blue-on-white.gif")) ?>');
1789 }
1790 .individual-thread-page a.comment-parent-link:empty::before {
1791         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-blue-on-white.gif")) ?>');
1792 }
1793 .comment-meta .permalink:hover::before {
1794         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-white-on-blue.gif")) ?>');
1795 }
1796 .comment-meta .lw2-link:hover::before {
1797         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-white-on-blue.gif")) ?>');
1798 }
1799 .individual-thread-page a.comment-parent-link:hover:empty::before {
1800         left: unset;
1801         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-white-on-blue.gif")) ?>');
1802 }
1803
1804 .comment-meta .permalink,
1805 .comment-meta .lw2-link,
1806 .individual-thread-page .comment-parent-link:empty {
1807         filter: hue-rotate(270deg);
1808         opacity: 0.4;
1809 }
1810 .comment-meta .permalink:hover,
1811 .comment-meta .lw2-link:hover,
1812 .individual-thread-page .comment-parent-link:empty:hover {
1813         opacity: 1.0;
1814 }
1815
1816 /*=======================*/
1817 /* COMMENTS COMPACT VIEW */
1818 /*=======================*/
1819
1820 #comments-list-mode-selector {
1821         opacity: 0.4;
1822         transition: opacity 0.15s ease;
1823 }
1824 #content.index-page #comments-list-mode-selector {
1825         grid-column: 3;
1826         justify-self: end;
1827 }
1828 #comments-list-mode-selector:hover {
1829         opacity: 1.0;
1830 }
1831
1832 #comments-list-mode-selector button {
1833         border: none;
1834         background-color: transparent;
1835         box-shadow:
1836                 0 0 0 4px #fff inset,
1837                 0 0 0 5px #aaa inset;
1838 }
1839 #comments-list-mode-selector button:hover,
1840 #comments-list-mode-selector button.selected {
1841         box-shadow:
1842                 0 0 0 1px #fff inset,
1843                 0 0 0 2px #aaa inset,
1844                 0 0 0 4px #fff inset,
1845                 0 0 0 5px #aaa inset;
1846 }
1847
1848 #content.compact > .comment-thread .comment-item {
1849         max-height: 53px;
1850 }
1851 #content.compact > .comment-thread .comment-item::after {
1852         color: <?php echo $hyperlink_color; ?>;
1853         background: linear-gradient(to right, transparent 0%, #fff 50%, #fff 100%);
1854 }
1855
1856 @media only screen and (hover: hover) {
1857         #content.compact > .comment-thread .comment-item:hover .comment,
1858         #content.compact > .comment-thread .comment-item.expanded .comment {
1859                 background-color: #fff;
1860                 outline: 1px solid #92c396;
1861         }
1862         #content.compact > .comment-thread .comment-item:hover .comment::before,
1863         #content.compact > .comment-thread .comment-item.expanded .comment::before {
1864                 background-color: #fff;
1865                 box-shadow:
1866                         0 0  3px #fff,
1867                         0 0  5px #fff,
1868                         0 0  7px #fff,
1869                         0 0 10px #fff,
1870                         0 0 20px #fff,
1871                         0 0 30px #fff,
1872                         0 0 40px #fff;
1873         }
1874 }
1875 @media only screen and (hover: none) {
1876         #content.compact > .comment-thread.expanded .comment-item .comment {
1877                 background-color: #fff;
1878                 outline: 1px solid #92c396;
1879         }
1880         #content.compact > .comment-thread.expanded .comment-item .comment::before {
1881                 background-color: #fff;
1882                 box-shadow:
1883                         0 0  3px #fff,
1884                         0 0  5px #fff,
1885                         0 0  7px #fff,
1886                         0 0 10px #fff,
1887                         0 0 20px #fff,
1888                         0 0 30px #fff,
1889                         0 0 40px #fff;
1890         }
1891 }
1892 #content.compact > .comment-thread .comment-item:hover .comment {
1893         background-color: #fff;
1894         outline: 1px solid #92c396;
1895 }
1896 #content.compact > .comment-thread .comment-item:hover .comment::before {
1897         background-color: #fff;
1898         box-shadow:
1899                 0 0  3px #fff,
1900                 0 0  5px #fff,
1901                 0 0  7px #fff,
1902                 0 0 10px #fff,
1903                 0 0 20px #fff,
1904                 0 0 30px #fff,
1905                 0 0 40px #fff;
1906 }
1907
1908 #content.user-page.compact > h1.listing {
1909         margin-top: 0.5rem;
1910 }
1911 #content.user-page.compact > h1.listing + .post-meta {
1912         margin-bottom: 1rem;
1913 }
1914
1915 /*===========================*/
1916 /* HIGHLIGHTING NEW COMMENTS */
1917 /*===========================*/
1918
1919 .new-comment::before {
1920         outline: 1px solid #5a5;
1921         box-shadow:
1922                 0 0 6px -2px #5a5 inset,
1923                 0 0 4px #5a5;
1924 }
1925
1926 /*=================================*/
1927 /* COMMENT THREAD MINIMIZE BUTTONS */
1928 /*=================================*/
1929
1930 .comment-minimize-button {
1931         color: #ddd;
1932         font-weight: 300;
1933         box-shadow: 0 0 0 1px transparent;
1934 }
1935 .comment-minimize-button:hover {
1936         color: #bbb;
1937         text-shadow: <?php echo $white_glow; ?>;
1938 }
1939 .comment-minimize-button::after {
1940         font-family: <?php echo $UI_font; ?>;
1941         color: #999;
1942 }
1943 .comment-minimize-button.maximized::after {
1944         color: #ccc;
1945 }
1946
1947 /*=================================*/
1948 /* INDIVIDUAL COMMENT THREAD PAGES */
1949 /*=================================*/
1950
1951 .individual-thread-page > h1 {
1952         margin: 2em 0 0 30px;
1953         font-weight: 300;
1954         font-family: <?php echo $headings_font; ?>;
1955 }
1956 .individual-thread-page > .comments {
1957         padding: 0 0 0 30px;
1958 }
1959 .individual-thread-page > #bottom-bar.decorative::before {
1960         margin: 0 30px 0 60px;
1961 }
1962
1963 /*==============*/
1964 /* VOTE BUTTONS */
1965 /*==============*/
1966
1967 .vote {
1968         position: relative;
1969 }
1970 .vote::before {
1971         position: relative;
1972         z-index: 1;
1973 }
1974 .vote::after {
1975         position: absolute;
1976 }
1977
1978 .karma .upvote::before {
1979         content: "\F077";
1980         top: 1px;
1981 }
1982 .karma .downvote::before {
1983         content: "\F078";
1984         left: -2px;
1985 }
1986 .karma .upvote::after {
1987         content: "\F325";
1988         left: 6px;
1989         bottom: 4px;
1990 }
1991 .karma .downvote::after {
1992         content: "\F322";
1993         left: 4px;
1994         top: 4px;
1995 }
1996 @-moz-document url-prefix() {
1997         .karma .upvote::after {
1998                 left: 4px;
1999                 bottom: 4px;
2000         }
2001         .karma .downvote::after {
2002                 left: 2px;
2003                 top: 5px;
2004         }
2005 }
2006
2007 .agreement .upvote::before {
2008         content: "\F00C";
2009         top: 1px;
2010 }
2011 .agreement .downvote::before {
2012         content: "\F00D";
2013         left: -2px;
2014 }
2015 .agreement .upvote::after {
2016         content: "\F560";
2017         left: 6px;
2018         bottom: 2px;
2019 }
2020 .agreement .downvote::after {
2021         content: "\E59B";
2022         left: 2px;
2023         top: 1px;
2024 }
2025 @-moz-document url-prefix() {
2026         .agreement .upvote::after {
2027                 left: 4px;
2028                 bottom: 2px;
2029         }
2030         .agreement .downvote::after {
2031                 left: 0;
2032                 top: 1px;
2033         }
2034 }
2035
2036 /**********/
2037 /*      States.
2038  */
2039
2040 /*      _ 1
2041  */
2042 .vote {
2043         color: #ddd;
2044         font-weight: 400;
2045 }
2046
2047 /*      _ 2
2048  */
2049 .upvote:hover,
2050 .upvote:not(.none) {
2051         color: var(--GW-upvote-button-color);
2052         text-shadow:
2053                 0 0 0.5px #fff,
2054                 0 0 8px #0f0;
2055 }
2056 .downvote:hover,
2057 .downvote:not(.none) {
2058         color: var(--GW-downvote-button-color);
2059         text-shadow:
2060                 0 0 0.5px #fff,
2061                 0 0 8px #f00;
2062 }
2063
2064 /*      0 _
2065  */
2066 .vote::after {
2067         visibility: hidden;
2068 }
2069
2070 /*      1,2 _
2071  */
2072 .vote.two-temp::after,
2073 .vote.two::after {
2074         visibility: visible;
2075 }
2076
2077 /*      1 _
2078  */
2079 .vote.two-temp::after {
2080         color: #ddd;
2081         text-shadow: none;
2082 }
2083
2084 /*      Disabled.
2085  */
2086 .vote:disabled {
2087         visibility: unset;
2088         color: #e6e6e6;
2089 }
2090 .post .vote:disabled {
2091         color: #f4f4f4;
2092 }
2093 .vote:disabled:hover {
2094         text-shadow: none;
2095 }
2096
2097 .post .top-post-meta .downvote::before {
2098         left: 0;
2099 }
2100 .post .top-post-meta .upvote::after,
2101 .post .top-post-meta .downvote::after {
2102         left: 14px;
2103 }
2104 .post .top-post-meta .downvote::after {
2105         top: 5px;
2106 }
2107
2108 /*===========================*/
2109 /* COMMENTING AND POSTING UI */
2110 /*===========================*/
2111
2112 .posting-controls input[type='submit'] {
2113         padding: 6px 12px 3px 12px;
2114 }
2115
2116 .comment-controls {
2117         margin: 0 4px 4px 16px;
2118 }
2119 .comment + .comment-controls .action-button {
2120         font-weight: 300;
2121 }
2122
2123 .new-comment-button {
2124         margin: 0;
2125         padding: 0.125em;
2126 }
2127
2128 .comment-controls .cancel-comment-button {
2129         color: #c00;
2130         text-shadow:
2131                 0 0 1px #fff,
2132                 0 0 2px #fff;
2133         padding: 6px 8px 1px 4px;
2134 }
2135 .comment-controls .cancel-comment-button:hover {
2136         color: #f00;
2137 }
2138
2139 .comment-controls .delete-button,
2140 .comment-controls .retract-button {
2141         color: #fd7354;
2142 }
2143 .comment-controls .delete-button::before,
2144 .comment-controls .unretract-button::before {
2145         font-weight: 300;
2146 }
2147 .comment-controls .retract-button::before {
2148         font-weight: 400;
2149 }
2150 .comment-controls .edit-button,
2151 .comment-controls .unretract-button {
2152         color: #0b0;
2153 }
2154 .comment-controls .edit-button::before {
2155         font-weight: 300;
2156 }
2157 .comment-controls .action-button:hover {
2158         color: #f00;
2159         text-shadow: 0 0 0.5px #faa;
2160 }
2161
2162 .post-controls {
2163         margin: 3em 2.5em 0 0;
2164         grid-row: 2;
2165 }
2166 .post {
2167         grid-row: 2;
2168 }
2169 .edit-post-link,
2170 .edit-post-link:visited {
2171         color: #090;
2172 }
2173
2174 .posting-controls textarea {
2175         font-family: <?php echo $text_font; ?>;
2176         font-weight: 300;
2177         color: #000;
2178         text-shadow: 0 0 0 #000;
2179         border-color: #eee;
2180         transition: border-color 0.15s ease;
2181 }
2182 .posting-controls textarea:focus {
2183         border-width: 29px 1px 1px 1px;
2184         border-color: #92c396;
2185 }
2186 .posting-controls.edit-existing-post textarea:focus,
2187 .posting-controls form.edit-existing-comment textarea:focus {
2188         border-color: #090;
2189 }
2190
2191 /*= Scroll bars =*/
2192
2193 .posting-controls textarea::-webkit-scrollbar,
2194 .textarea-container .autocomplete-container::-webkit-scrollbar {
2195         width: 16px;
2196         background-color: transparent;
2197 }
2198 .posting-controls textarea::-webkit-scrollbar-track,
2199 .textarea-container .autocomplete-container::-webkit-scrollbar-track {
2200         background-color: #fff;
2201 }
2202 .posting-controls textarea::-webkit-scrollbar-thumb {
2203         background-color: #eee;
2204         box-shadow: 0 0 0 1px #fff inset;
2205 }
2206 .posting-controls textarea:focus::-webkit-scrollbar-thumb,
2207 .textarea-container .autocomplete-container::-webkit-scrollbar-thumb {
2208         background-color: #c4dbc4;
2209         box-shadow: 0 0 0 1px #fff inset;
2210 }
2211
2212 /* GUIEdit buttons */
2213
2214 .guiedit-buttons-container {
2215         background-color: #fff;
2216         border-bottom: 1px solid #eee;
2217 }
2218
2219 .posting-controls.edit-existing-post .guiedit-buttons-container button,
2220 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
2221     color: #050;
2222 }
2223 .guiedit-buttons-container button {
2224         font-family: Font Awesome, <?php echo $text_font; ?>;
2225         border: 1px solid transparent;
2226 }
2227
2228 .guiedit::after {
2229         font-family: <?php echo $UI_font; ?>;
2230         color: #999;
2231         font-weight: 300;
2232         text-shadow: 0 0 0 #999;
2233         top: 3px;
2234 }
2235
2236 .posting-controls .markdown-reference-link a {
2237         background-position: right 70%;
2238 }
2239 .markdown-reference-link {
2240         color: #999;
2241 }
2242
2243 /* Markdown hints */
2244
2245 #markdown-hints-checkbox + label {
2246         color: <?php echo $hyperlink_color; ?>;
2247 }
2248 #markdown-hints-checkbox + label:hover {
2249         color: #79a97e;
2250 }
2251 #markdown-hints {
2252         border: 1px solid #faa;
2253         background-color: #fff;
2254 }
2255 #markdown-hints .markdown-hints-row span,
2256 #markdown-hints .markdown-hints-row code {
2257         padding: 2px 12px 2px 2px;
2258 }
2259
2260 /*================*/
2261 /* EDIT POST FORM */
2262 /*================*/
2263
2264 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2265         top: 2px;
2266         color: #acd2af;
2267         transition: color 0.15s ease;
2268 }
2269 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover {
2270         color: #79a97e;
2271 }
2272 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2273         top: 2px;
2274         border: 1px solid #eee;
2275         color: #bbb;
2276         transition:
2277                 box-shadow 0.3s ease,
2278                 border-color 0.15s ease;
2279 }
2280 @media only screen and (hover:hover) {
2281         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before {
2282                 border-color: #c4dbc4;
2283         }
2284 }
2285 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
2286         border-color: #c4dbc4;
2287         box-shadow:
2288                 0 0 0 4px #fff inset,
2289                 0 0 0 1em #c4dbc4 inset;
2290 }
2291
2292 #edit-post-form label[for='url'],
2293 #edit-post-form input[name='url'] {
2294         display: block;
2295         transition:
2296                 max-height 0.15s ease,
2297                 overflow 0.15s ease,
2298                 margin-top 0.15s ease,
2299                 margin-bottom 0.15s ease,
2300                 padding 0.15s ease,
2301                 border-color 0.15s ease;
2302
2303 }
2304 #edit-post-form .link-post-checkbox:not(:checked) ~ label[for='url'],
2305 #edit-post-form .link-post-checkbox:not(:checked) ~ input[name='url'] {
2306         max-height: 0;
2307         overflow: hidden;
2308         margin-top: 0;
2309         margin-bottom: 0;
2310         padding: 0;
2311         border-color: transparent;
2312 }
2313
2314 #edit-post-form label[for='title'],
2315 #edit-post-form label[for='url'],
2316 #edit-post-form label[for='section'] {
2317         color: #aaa;
2318         text-shadow: 0 0 0 #aaa;
2319 }
2320
2321 #edit-post-form input[type='radio'] + label {
2322         color: #92c396;
2323         border-color: #c4dbc4;
2324         padding: 6px 12px 3px 12px;
2325         position: relative;
2326         top: -2px;
2327         transition:
2328                 background-color 0.15s ease,
2329                 color 0.15s ease,
2330                 border-color 0.15s ease;
2331 }
2332 #edit-post-form input[type='radio'][value='all'] + label {
2333         border-radius: 8px 0 0 8px;
2334         border-width: 1px;
2335 }
2336 #edit-post-form input[type='radio'][value='drafts'] + label {
2337         border-radius: 0 8px 8px 0;
2338         padding-right: 13px;
2339 }
2340 #edit-post-form input[type='radio'] + label:hover,
2341 #edit-post-form input[type='radio']:focus + label,
2342 #edit-post-form input[type='radio']:checked + label {
2343         background-color: #c4dbc4;
2344         color: #fff;
2345 }
2346 #edit-post-form input[type='radio']:active + label {
2347         border-color: #92c396;
2348         background-color: #92c396;
2349 }
2350
2351 #edit-post-form input[type='submit'] {
2352         padding: 7px 14px 4px 14px;
2353 }
2354
2355 /*=======*/
2356 /* LINKS */
2357 /*=======*/
2358
2359 a {
2360         text-decoration: none;
2361         color: <?php echo $hyperlink_color; ?>;
2362         transition: color 0.15s ease;
2363 }
2364 a:visited {
2365         color: #bebb84;
2366 }
2367 a:hover {
2368         color: #bbb;
2369 }
2370
2371 /*=========*/
2372 /* BUTTONS */
2373 /*=========*/
2374
2375 button,
2376 input[type='submit'] {
2377         color: #92c396;
2378 }
2379 input[type='submit'] {
2380         color: #92c396;
2381         background-color: #fff;
2382         border: 1px solid #c4dbc4;
2383         transition:
2384                 color 0.15s ease,
2385                 background-color 0.15s ease,
2386                 border-color 0.15s ease;
2387 }
2388
2389 input[type='submit']:hover,
2390 input[type='submit']:focus {
2391         background-color: #c4dbc4;
2392         color: #fff;
2393 }
2394 input[type='submit']:active {
2395         background-color: #92c396;
2396         border-color: #92c396;
2397 }
2398 .button:visited {
2399         color: #92c396;
2400 }
2401 button:hover,
2402 .button:hover {
2403         color: #79a97e;
2404         text-decoration: none;
2405 }
2406 button:active,
2407 .button:active {
2408         transform: scale(0.9);
2409 }
2410 button:focus:not(:hover),
2411 .button:focus:not(:hover) {
2412         transform: none;
2413 }
2414 @-moz-document url-prefix() {
2415         .button:active {
2416                 transform: none;
2417         }
2418 }
2419
2420 /*==========*/
2421 /* HEADINGS */
2422 /*==========*/
2423
2424 .body-text h1,
2425 .body-text h2,
2426 .body-text h3,
2427 .body-text h4,
2428 .body-text h5,
2429 .body-text h6 {
2430         font-family: <?php echo $headings_font; ?>;
2431         font-weight: 300;
2432 }
2433 .body-text h1 {
2434         margin-top: 1.25em;
2435         box-shadow:
2436                 0 -7px 0 0 #fff inset,
2437                 0 -8px 0 0 #eee inset;
2438 }
2439 .body-text h6 {
2440         color: #555;
2441 }
2442
2443 /*========*/
2444 /* QUOTES */
2445 /*========*/
2446
2447 blockquote {
2448         border-left: 5px solid #e6e6e6;
2449 }
2450
2451 /*========*/
2452 /* IMAGES */
2453 /*========*/
2454
2455 #content img,
2456 #content figure.image img {
2457         border: 1px solid #ccc;
2458 }
2459 #content figure img {
2460         border: 1px solid #000;
2461 }
2462 #content img[src$='.svg'],
2463 #content figure img[src$='.svg'] {
2464         border: none;
2465 }
2466 #content img[style^='float'] {
2467         border: 1px solid transparent;
2468 }
2469
2470 #images-overlay div::after {
2471         font-weight: 400;
2472         padding: 10px 12px 6px 12px;
2473 }
2474
2475 /*=============*/
2476 /* IMAGE FOCUS */
2477 /*=============*/
2478
2479 #image-focus-overlay {
2480         visibility: visible;
2481 }
2482
2483 #image-focus-overlay .caption p {
2484         margin: 1em 1.25em 0.875em 1.25em;
2485         font-weight: 400;
2486 }
2487
2488 /*======*/
2489 /* MISC */
2490 /*======*/
2491
2492 hr {
2493         margin: 1em 0;
2494 }
2495 hr::before {
2496         content: "• • •";
2497         letter-spacing: 7px;
2498         color: #aaa;
2499         text-align: center;
2500         display: block;
2501         font-size: 0.875em;
2502 }
2503
2504 code,
2505 pre {
2506         font-family: 'Source Code Pro', Inconsolata, monospace;
2507         font-size: 0.9375em;
2508         font-feature-settings: 'ss04';
2509 }
2510 code {
2511         background-color: #eee;
2512         padding: 0 5px 1px 5px;
2513         box-shadow: 0 0 0 1px #fff inset;
2514 }
2515
2516 input[type='text'],
2517 input[type='search'],
2518 input[type='password'] {
2519         border: 1px solid #999;
2520         color: #000;
2521         background-color: transparent;
2522         border-color: transparent;
2523         border-bottom-color: #eee;
2524         transition: border-color 0.15s ease;
2525 }
2526 input[type='text']:focus,
2527 input[type='search']:focus,
2528 input[type='password']:focus {
2529         border-bottom-color: #c4dbc4;
2530 }
2531
2532 select {
2533         color: #000;
2534 }
2535
2536 strong, b {
2537         font-weight: 600;
2538 }
2539
2540 /*============*/
2541 /* ABOUT PAGE */
2542 /*============*/
2543
2544 .about-page mark {
2545         background-color: #e6e6e6;
2546         text-decoration: none;
2547         box-shadow:
2548                 0 -1px 0 0 #000 inset,
2549                 0 -3px 1px -2px #000 inset;
2550         padding: 0 1px;
2551 }
2552
2553 #content.about-page .accesskey-table {
2554         font-family: <?php echo $UI_font; ?>;
2555         border-color: #ddd;
2556 }
2557
2558 #content.about-page img {
2559         border: 1px solid #000;
2560 }
2561
2562 /*========================*/
2563 /* QUALIFIED HYPERLINKING */
2564 /*========================*/
2565
2566 #content.no-nav-bars ~ #ui-elements-container #site-nav-ui-toggle {
2567         display: none;
2568 }
2569 #content.no-comments ~ #ui-elements-container #post-nav-ui-toggle {
2570         display: none;
2571 }
2572
2573 #aux-about-link a {
2574         color: #777;
2575 }
2576 #aux-about-link a:hover {
2577         opacity: 1.0;
2578         text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff;
2579 }
2580
2581 .qualified-linking label {
2582         color: #ccc;
2583         font-weight: 400;
2584 }
2585 .qualified-linking label:hover {
2586         color: #92c396;
2587 }
2588
2589 .qualified-linking-toolbar {
2590         border: 1px solid #ccc;
2591         background-color: #fff;
2592 }
2593 .qualified-linking-toolbar a {
2594         padding: 3px 6px 0 6px;
2595 }
2596 .qualified-linking-toolbar a,
2597 .qualified-linking-toolbar a:visited {
2598         color: #acd2af;
2599 }
2600 .qualified-linking-toolbar a:hover {
2601         color: #92c396;
2602         text-decoration: none;
2603         background-color: #e4f1e5;
2604 }
2605 .qualified-linking label::after {
2606         background-color: #fff;
2607         opacity: 0.8;
2608 }
2609
2610 /*======*/
2611 /* MATH */
2612 /*======*/
2613
2614 .mathjax-block-container::-webkit-scrollbar {
2615         height: 12px;
2616         background-color: #f6f6ff;
2617         border-radius: 6px;
2618         border: 1px solid #ddf;
2619 }
2620 .mathjax-block-container::-webkit-scrollbar-thumb {
2621         background-color: #dde;
2622         border-radius: 6px;
2623         border: 1px solid #cce;
2624 }
2625 .mathjax-inline-container::-webkit-scrollbar {
2626         height: 8px;
2627         background-color: #f6f6ff;
2628         border-radius: 4px;
2629         border: 1px solid #ddf;
2630 }
2631 .mathjax-inline-container::-webkit-scrollbar-thumb {
2632         background-color: #dde;
2633         border-radius: 4px;
2634         border: 1px solid #cce;
2635 }
2636
2637
2638 /*===============*/
2639 /* USER MENTIONS */
2640 /*===============*/
2641
2642 .textarea-container .autocomplete-container {
2643         background-color: rgba(255, 255, 255, 0.75);
2644         border: 1px solid rgba(196, 219, 196, 0.75);
2645 }
2646
2647 .textarea-container .autocomplete-container div.highlighted {
2648         background-color: rgba(196, 219, 196, 0.75);
2649         color: #fff;
2650         padding: 4px 8px 0 8px;
2651         line-height: 1.5;
2652 }
2653
2654 .textarea-container .autocomplete-container div:not(.highlighted):hover {
2655         background-color: rgba(196, 219, 196, 0.35);
2656 }
2657
2658 .textarea-container .autocomplete-container div span.age,
2659 .textarea-container .autocomplete-container div span.karma {
2660         color: #999;
2661 }
2662
2663
2664 /*=================*/
2665 /* ALIGNMENT FORUM */
2666 /*=================*/
2667
2668 #content.alignment-forum-index-page::after {
2669         margin: -0.25em 0 0.25em 0;
2670         text-align: center;
2671         grid-column: 2;
2672         font-family: "Concourse SmallCaps";
2673         font-weight: 600;
2674         background-color: #7f85b2;
2675         color: transparent;
2676         -webkit-background-clip: text;
2677         text-shadow:
2678                 rgba(255,255,255,0.5) 0px 3px 3px;
2679 }
2680
2681 /*====================*/
2682 /* FOR NARROW SCREENS */
2683 /*====================*/
2684
2685 @media not screen and (hover: none) {
2686         @media only screen and (max-width: 1080px) {
2687                 #site-nav-ui-toggle button.engaged {
2688                         left: -72px;
2689                 }
2690                 #text-size-adjustment-ui {
2691                         left: -22px;
2692                         top: calc(100% - 240px);
2693                 }
2694                 #width-selector {
2695                         left: -23px;
2696                         top: calc(100% - 140px);
2697                 }
2698                 #theme-tweaker-toggle button {
2699                         width: unset;
2700                         height: unset;
2701                 }
2702         }
2703         @media only screen and (max-width: 1020px) {
2704         }
2705         @media only screen and (max-width: 1000px) {
2706                 #site-nav-ui-toggle button.engaged {
2707                         left: -56px;
2708                 }
2709                 #theme-selector {
2710                         padding: 0;
2711                 }
2712                 #theme-selector button {
2713                         margin: 1px 7px 0 7px;
2714                 }
2715         }
2716 }
2717
2718 /*========*/
2719 /* MOBILE */
2720 /*========*/
2721
2722 /*******************************************/
2723 @media only screen and (max-width: 1160px) {
2724 /*******************************************/
2725
2726         #site-nav-ui-toggle {
2727                 top: 10px;
2728                 left: 10px;
2729         }
2730         #site-nav-ui-toggle button.engaged {
2731                 width: 1.125em;
2732                 overflow: hidden;
2733                 position: relative;
2734                 left: 5px;
2735                 top: -3px;
2736         }
2737         #site-nav-ui-toggle button.engaged::before {
2738                 content: "\F00D";
2739                 font-size: 34px;
2740                 padding: 0 0.25em 0 0;
2741         }
2742         #ui-elements-container > #site-nav-ui-toggle button.engaged {
2743                 transform: rotate(90deg);
2744         }
2745
2746         #ui-elements-container > div[id$='-ui-toggle'] button,
2747         #theme-selector .theme-selector-close-button  {
2748                 color: #bbb;
2749                 text-shadow:
2750                         0 0 1px #fff,
2751                         0 0 3px #fff,
2752                         0 0 5px #fff,
2753                         0 0 10px #fff,
2754                         0 0 20px #fff,
2755                         0 0 30px #fff;
2756         }
2757         #ui-elements-container > div[id$='-ui-toggle'] button {
2758                 font-weight: 400;
2759         }
2760         #theme-selector .theme-selector-close-button {
2761                 font-weight: 300;
2762         }
2763
2764         #theme-selector {
2765                 background-color: #fff;
2766                 box-shadow:
2767                         0 0 0 1px #999,
2768                         0 0 1px 3px #fff,
2769                         0 0 3px 3px #fff,
2770                         0 0 5px 3px #fff,
2771                         0 0 10px 3px #fff,
2772                         0 0 20px 3px #fff;
2773                 border-radius: 12px;
2774         }
2775         #theme-selector::before {
2776                 color: #999;
2777                 font-weight: 300;
2778                 position: relative;
2779                 top: 6px;
2780         }
2781         #theme-selector button,
2782         #theme-selector button.selected {
2783                 background-color: #fff;
2784                 border-radius: 10px;
2785                 box-shadow:
2786                         0 0 0 4px #fff inset,
2787                         0 0 0 5px #999 inset;
2788         }
2789         #theme-selector button.selected {
2790                 background-color: #c4dbc4;
2791         }
2792         #theme-selector button::after {
2793                 color: #819681;
2794                 font-weight: 300;
2795                 max-width: calc(100% - 3.5em);
2796                 overflow: hidden;
2797                 text-overflow: ellipsis;
2798                 padding: 1px 0 0 0;
2799         }
2800         #theme-selector button.selected::after {
2801                 color: #fff;
2802         }
2803
2804         #theme-tweaker-toggle button {
2805                 color: #999;
2806                 font-weight: 400;
2807         }
2808
2809         #theme-selector .auxiliary-controls-container {
2810                 border-top-color: #aaa;
2811         }
2812         #theme-selector .auxiliary-controls-container button {
2813                 box-shadow: none;
2814                 border: 1px solid #999;
2815         }
2816         #theme-selector #theme-tweaker-toggle button {
2817                 color: #819681;
2818         }
2819         #theme-selector #anti-kibitzer-toggle button::before,
2820         #theme-selector #anti-kibitzer-toggle button::after {
2821                 color: #819681;
2822                 opacity: 1.0;
2823         }
2824         #theme-selector #anti-kibitzer-toggle button::before {
2825                 font-size: 1.5em;
2826                 font-weight: 300;
2827         }
2828         #theme-selector #anti-kibitzer-toggle button::after {
2829                 font-weight: 400;
2830         }
2831         #theme-selector #dark-mode-selector {
2832                 border: 1px solid #999;
2833         }
2834         #theme-selector #dark-mode-selector button {
2835                 color: #819681;
2836         }
2837         #theme-selector #dark-mode-selector button.selected {
2838                 background-color: #c4dbc4;
2839                 color: #fff;
2840         }
2841         #theme-selector #dark-mode-selector button + button {
2842                 box-shadow:
2843                         -1px 0 0 0 #999;
2844         }
2845         #theme-selector #dark-mode-selector button:first-child.selected {
2846                 border-radius: 10px 0 0 10px;
2847         }
2848         #theme-selector #dark-mode-selector button:last-child.selected {
2849                 border-radius: 0 10px 10px 0;
2850         }
2851         #theme-selector #dark-mode-selector button.selected::after {
2852                 text-shadow: 0 0 1px #fff;
2853         }
2854
2855         #quick-nav-ui {
2856                 background-color: #fff;
2857         }
2858         #quick-nav-ui,
2859         #new-comment-nav-ui,
2860         #hns-date-picker {
2861                 box-shadow:
2862                         0 0 1px 3px #fff,
2863                         0 0 3px 3px #fff,
2864                         0 0 5px 3px #fff,
2865                         0 0 10px 3px #fff,
2866                         0 0 20px 3px #fff;
2867         }
2868         #quick-nav-ui a::after,
2869         #new-comment-nav-ui::before {
2870                 font-family: <?php echo $UI_font; ?>;
2871                 font-weight: bold;
2872                 box-shadow:
2873                         0 0 1px 0 #fff,
2874                         0 0 3px 0 #fff,
2875                         0 0 5px 0 #fff;
2876                 background-color: #fff;
2877                 border-radius: 4px;
2878         }
2879         #quick-nav-ui,
2880         #new-comment-nav-ui {
2881                 border-radius: 8px;
2882         }
2883         #new-comment-nav-ui {
2884                 background-color: #fff;
2885                 border: 1px solid #fff;
2886         }
2887         #new-comment-nav-ui::before {
2888                 color: #aaa;
2889                 font-weight: 500;
2890         }
2891         #new-comment-nav-ui .new-comment-sequential-nav-button {
2892                 color: #79a97e;
2893         }
2894         #new-comment-nav-ui .new-comments-count {
2895                 background-color: inherit;
2896                 top: 0;
2897         }
2898         #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2899                 color: #e6e6e6;
2900         }
2901         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2902                 border-radius: 7px 0 0 7px;
2903         }
2904         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2905                 border-radius: 0 7px 7px 0;
2906         }
2907         #new-comment-nav-ui button::after {
2908                 font-family: <?php echo $UI_font; ?>;
2909         }
2910         #hns-date-picker {
2911                 background-color: #fff;
2912                 border: 1px solid #fff;
2913         }
2914
2915         #top-nav-bar {
2916                 padding: 1.25em 0 0.25em 0;
2917                 font-size: 1.625rem;
2918                 margin: 0;
2919                 grid-row: 2;
2920                 grid-column: 2;
2921         }
2922         #top-nav-bar .page-number {
2923                 line-height: 1.7;
2924         }
2925         #top-nav-bar .page-number span {
2926                 display: block;
2927         }
2928         #top-nav-bar a.disabled {
2929                 opacity: 0.2;
2930         }
2931
2932         /*****************************************/
2933         @media only screen and (max-width: 900px) {
2934         /*****************************************/
2935                 #theme-less-mobile-first-row-placeholder {
2936                         grid-row: 1;
2937                         grid-column: 2 / span 2;
2938                         height: 50px;
2939                 }
2940
2941                 #primary-bar,
2942                 #secondary-bar {
2943                         position: static;
2944                         width: 0;
2945                         height: 0;
2946                 }
2947
2948                 #primary-bar {
2949                         position: fixed;
2950                         left: 0;
2951                         margin: 0;
2952                         padding: 5px 0 5px 0;
2953                         height: unset;
2954                         background-color: #fff;
2955                         border-bottom: 1px solid #ddd;
2956                         box-shadow: 0 0 0 1px #fff;
2957                         z-index: 2;
2958                         visibility: hidden;
2959                         transition:
2960                                 visibility 0.2s ease,
2961                                 width 0.2s ease,
2962                                 opacity 0.2s ease,
2963                                 filter 0.2s ease;
2964                 }
2965                 #primary-bar.engaged {
2966                         width: 100%;
2967                         visibility: visible;
2968                         padding: 5px 4px 75px 60px;
2969                 }
2970                 #secondary-bar #nav-item-archive,
2971                 #secondary-bar #nav-item-sequences,
2972                 #secondary-bar #nav-item-about {
2973                         opacity: 0.0;
2974                         transition:
2975                                 opacity 0.3s ease,
2976                                 filter 0.2s ease;
2977                 }
2978                 #secondary-bar.engaged #nav-item-archive,
2979                 #secondary-bar.engaged #nav-item-sequences,
2980                 #secondary-bar.engaged #nav-item-about {
2981                         opacity: 1.0;
2982                         position: fixed;
2983                         top: 80px;
2984                         z-index: 3;
2985                         width: 64px;
2986                 }
2987                 #secondary-bar.engaged #nav-item-archive {
2988                         left: 8px;
2989                 }
2990                 #secondary-bar.engaged #nav-item-sequences {
2991                         left: 72px;
2992                 }
2993                 #secondary-bar.engaged #nav-item-about {
2994                         left: 136px;
2995                 }
2996
2997                 #primary-bar.engaged.translucent-on-scroll,
2998                 #secondary-bar.engaged.translucent-on-scroll #nav-item-archive,
2999                 #secondary-bar.engaged.translucent-on-scroll #nav-item-sequences,
3000                 #secondary-bar.engaged.translucent-on-scroll #nav-item-about,
3001                 .page-toolbar.engaged.translucent-on-scroll {
3002                         opacity: 0.6;
3003                         filter: blur(2px);
3004                         pointer-events: none;
3005                 }
3006
3007                 .page-toolbar {
3008                         position: fixed;
3009                         height: unset;
3010                         width: unset;
3011                         z-index: 4;
3012                         right: 100%;
3013                         top: 80px;
3014                         transition:
3015                                 right 0.2s ease,
3016                                 opacity 0.2s ease,
3017                                 filter 0.2s ease;
3018                 }
3019                 .page-toolbar.engaged {
3020                         right: 0;
3021                 }
3022                 .page-toolbar,
3023                 #content:not(.user-page) .page-toolbar {
3024                         display: flex;
3025                         flex-flow: row;
3026                         justify-content: flex-end;
3027                         padding: 0 8px 0 0;
3028                 }
3029                 .page-toolbar > * {
3030                         right: unset;
3031                         line-height: 1.15;
3032                         padding: 6px 0;
3033                         margin: 0;
3034                 }
3035                 .page-toolbar > form,
3036                 .page-toolbar > .button {
3037                         text-align: center;
3038                         flex-basis: 25%;
3039                         margin-left: 1.5em;
3040                 }
3041                 .page-toolbar .button {
3042                         text-transform: uppercase;
3043                         font-size: 0.625rem;
3044                 }
3045                 .page-toolbar .button::before,
3046                 #content.user-page .page-toolbar .button::before,
3047                 .page-toolbar form::before,
3048                 #content.user-page .page-toolbar form::before {
3049                         font-size: 1.375rem;
3050                         display: block;
3051                         padding: 2px;
3052                         font-size: 1.375rem;
3053                         display: block;
3054                 }
3055                 .page-toolbar .rss {
3056                         white-space: nowrap;
3057                         position: fixed;
3058                         top: 143px;
3059                         left: -60px;
3060                         padding: 6px 10px 5px 10px;
3061                         visibility: hidden;
3062                         background-color: #fff;
3063                         border-style: solid;
3064                         border-color: #ddd;
3065                         border-width: 0 1px 1px 0;
3066                         box-shadow:
3067                                 0 1px 0 0 #fff,
3068                                 1px 1px 0 0 #fff;
3069                         transition: left 0.2s ease;
3070                 }
3071                 .page-toolbar .rss,
3072                 #content.user-page .page-toolbar .rss {
3073                         margin: 0;
3074                 }
3075                 .page-toolbar.engaged .rss {
3076                         visibility: visible;
3077                         left: 0;
3078                 }
3079
3080                 #primary-bar .nav-inner {
3081                         font-size: 1.375em;
3082                 }
3083                 #secondary-bar .nav-inner {
3084                         font-size: 1.125em;
3085                 }
3086                 #secondary-bar .nav-item:not(#nav-item-search) .nav-inner {
3087                         padding: 6px 10px;
3088                 }
3089
3090                 #nav-item-search {
3091                         max-width: calc(100% - 180px);
3092                         top: 4px;
3093                         left: 68px;
3094                 }
3095                 #nav-item-search input {
3096                         width: calc(100% - 32px);
3097                 }
3098                 #nav-item-search button {
3099                         position: relative;
3100                         bottom: 5px;
3101                         visibility: visible;
3102                         height: 32px;
3103                         width: 40px;
3104                         padding: 9px 15px 3px 5px;
3105                 }
3106                 #nav-item-search form:not(:focus-within) button:not(:hover) {
3107                         color: transparent;
3108                 }
3109                 #nav-item-search button::before {
3110                         color: #ddd;
3111                 }
3112
3113                 #nav-item-login {
3114                         top: 16px;
3115                         right: 8px;
3116                 }
3117                 #nav-item-login .nav-inner {
3118                         text-transform: none;
3119                         font-size: 1.75em;
3120                 }
3121                 #nav-item-login .nav-inner::before {
3122                         display: none;
3123                 }
3124                 #inbox-indicator::before {
3125                         font-size: 1.75em;
3126                         left: 2px;
3127                 }
3128
3129                 #bottom-bar .nav-inner {
3130                         padding: 1rem 0 1.25rem 0;
3131                 }
3132                 #bottom-bar .nav-inner::after {
3133                         position: absolute;
3134                 }
3135
3136                 #content.search-results-page #comments-list-mode-selector {
3137                         grid-column: 3;
3138                         grid-row: 2;
3139                         justify-self: end;
3140                 }
3141
3142                 #content,
3143                 #content.comment-thread-page {
3144                         padding: 0 4px;
3145                 }
3146
3147                 h1.listing + .post-meta > * {
3148                         line-height: 1.5;
3149                 }
3150                 h1.listing + .post-meta .post-section {
3151                         overflow: visible;
3152                         order: 1;
3153                         width: unset;
3154                 }
3155                 h1.listing + .post-meta .post-section::before {
3156                         position: unset;
3157                 }
3158
3159                 .archive-nav *[class^='archive-nav-item-'] {
3160                         border-width: 1px !important;
3161                 }
3162                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
3163                         background-color: #aaa;
3164                 }
3165
3166                 .post {
3167                         padding: 0;
3168                 }
3169                 .post .top-post-meta .author {
3170                         margin: 1em auto 0 auto;
3171                 }
3172                 .post .top-post-meta .date,
3173                 .post .top-post-meta .comment-count {
3174                         position: static;
3175                 }
3176                 .post .top-post-meta .date {
3177                         margin: 1.5em auto 0 auto;
3178                 }
3179                 .post .top-post-meta .comment-count span {
3180                         display: initial;
3181                         position: static;
3182                 }
3183                 h1.post-title {
3184                         line-height: 1.3;
3185                 }
3186
3187                 .comments {
3188                         padding: 0;
3189                 }
3190                 .comment-item .comment-item {
3191                         margin: 0.75em 3px 3px 6px;
3192                 }
3193                 .comment-item .comment-item + .comment-item {
3194                         margin: 1.5em 3px 3px 6px;
3195                 }
3196
3197                 .comment-controls {
3198                         position: relative;
3199                 }
3200                 .comment-controls .cancel-comment-button,
3201                 .comments > .comment-controls .cancel-comment-button {
3202                         right: 4px;
3203                 }
3204
3205                 .sublevel-nav:not(.sort) .sublevel-item,
3206                 .sublevel-nav:not(.sort) .sublevel-item:first-child,
3207                 .sublevel-nav:not(.sort) .sublevel-item:last-child {
3208                         border-radius: 8px;
3209                         border-width: 1px;
3210                         margin: 2px;
3211                 }
3212
3213                 #content.user-page #theme-less-mobile-first-row-placeholder {
3214                         height: 60px;
3215                 }
3216                 #content.user-page h1.page-main-heading,
3217                 #content.user-page .user-stats {
3218                         grid-row: 2;
3219                 }
3220                 #content.user-page h1.page-main-heading {
3221                         margin: 0.5em 0 0 0.125em;
3222                 }
3223                 #content.user-page #comments-list-mode-selector,
3224                 #content.user-page .sublevel-nav.sort {
3225                         grid-row: 3 / span 2;
3226                 }
3227                 #content.user-page .sublevel-nav {
3228                         grid-row: 3;
3229                         margin-bottom: 1em;
3230                 }
3231                 #content.user-page #top-nav-bar {
3232                         grid-row: 4;
3233                         margin: 0.5em 0 0 0;
3234                 }
3235
3236                 #content.conversation-page #theme-less-mobile-first-row-placeholder {
3237                         height: 64px;
3238                 }
3239                 #content.conversation-page #comments-list-mode-selector {
3240                         grid-row: 6;
3241                         margin-top: -32px;
3242                 }
3243                 #content.conversation-page .conversation-participants {
3244                         grid-row: 4;
3245                         align-self: end;
3246                 }
3247         /*******************************************/
3248         } @media only screen and (max-width: 720px) {
3249         /*******************************************/
3250                 #content.index-page > .sublevel-nav.sort {
3251                         flex-flow: column;
3252                         margin-right: 4px;
3253                 }
3254         /*******************************************/
3255         } @media only screen and (max-width: 520px) {
3256         /*******************************************/
3257                 h1.listing,
3258                 #content.search-results-page h1.listing {
3259                         font-size: 1.25rem;
3260                         margin: 18px 6px 4px 6px;
3261                         max-width: calc(100% - 12px);
3262                 }
3263                 h1.listing + .post-meta {
3264                         margin: 4px 6px;
3265                 }
3266                 #content.conversations-user-page h1.listing::after {
3267                         height: calc(100% + 2.25em);
3268                 }
3269                 #content.conversations-user-page h1.listing + .post-meta .date {
3270                         margin: 0 0 0 1em;
3271                 }
3272
3273                 .comment-body {
3274                         font-size: 1.125rem;
3275                 }
3276
3277                 #content.compact > .comment-thread .comment-item {
3278                         max-height: 105px;
3279                 }
3280
3281                 .textarea-container:focus-within textarea {
3282                         background-color: #fff;
3283                         border-width: 1px;
3284                         box-shadow: 0 0 0 2px #fff;
3285                 }
3286                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
3287                         padding: 5px 6px 6px 6px;
3288                         font-weight: bold;
3289                 }
3290                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
3291                         color: #c00;
3292                 }
3293                 .textarea-container:focus-within .guiedit-buttons-container {
3294                         background-color: #fff;
3295                         border-top: 1px solid #ddf;
3296                 }
3297                 .posting-controls .textarea-container:focus-within .guiedit-buttons-container {
3298                         box-shadow: none;
3299                 }
3300                 #content.conversation-page .textarea-container:focus-within::after {
3301                         background-color: #fff;
3302                 }
3303                 #markdown-hints::after {
3304                         color: #090;
3305                 }
3306
3307                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
3308                         top: 2px;
3309                         font-weight: 400;
3310                 }
3311                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
3312                         top: 1px;
3313                 }
3314         }
3315 }
3316