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         #text-size-adjustment-ui,
 696         #theme-tweaker-toggle {
 697                 pointer-events: none;
 698                 visibility: visible;
 699                 opacity: 0.0;
 700                 transition:
 701                         opacity 0.35s ease;
 702         }
 703         <?php fit_content("#theme-tweaker-toggle"); ?>
 704         #comments-view-mode-selector::after,
 705         #theme-selector::after,
 706         #theme-selector::before,
 707         #width-selector::after,
 708         #text-size-adjustment-ui::after {
 709                 content: "";
 710                 background-color: #fff;
 711                 display: block;
 712                 position: absolute;
 713                 width: 100%;
 714                 height: 100%;
 715                 top: 0;
 716                 left: 0;
 717         }
 718         #comments-view-mode-selector.engaged,
 719         #theme-selector.engaged,
 720         #width-selector.engaged,
 721         #text-size-adjustment-ui.engaged,
 722         #theme-tweaker-toggle.engaged {
 723                 pointer-events: auto;
 724                 opacity: 1.0;
 725         }
 726
 727         #comments-view-mode-selector {
 728                 left: -45px;
 729                 top: calc(100% - 180px);
 730         }
 731         #comments-view-mode-selector::after {
 732                 max-height: 1000px;
 733                 transition:
 734                         max-height 0.2s ease;
 735         }
 736         #comments-view-mode-selector.engaged::after {
 737                 max-height: 0px;
 738         }
 739
 740         #theme-selector {
 741                 display: block;
 742                 left: 16px;
 743                 top: calc(100% - 316px);
 744                 opacity: 1.0;
 745                 visibility: hidden;
 746                 transition:
 747                         visibility 0.2s ease;
 748         }
 749         #theme-selector.engaged {
 750                 visibility: visible;
 751         }
 752         #theme-selector::after,
 753         #theme-selector::before {
 754                 top: -50px;
 755                 height: calc(100% + 60px);
 756                 max-height: 300px;
 757                 transition:
 758                         max-height 0.2s ease;
 759                 z-index: 1;
 760         }
 761         #theme-selector.engaged::after,
 762         #theme-selector.engaged::before {
 763                 max-height: 0px;
 764         }
 765         #theme-selector::before {
 766                 z-index: 0;
 767         }
 768
 769         #width-selector {
 770                 display: table;
 771                 left: -68px;
 772                 top: calc(100% - 48px);
 773         }
 774         #width-selector::after {
 775                 max-width: 100px;
 776                 transition:
 777                         max-width 0.15s ease;
 778         }
 779         #width-selector.engaged::after {
 780                 max-width: 0px;
 781         }
 782
 783         #text-size-adjustment-ui {
 784                 left: -67px;
 785                 top: calc(100% - 80px);
 786         }
 787         #text-size-adjustment-ui::after {
 788                 max-width: 1000px;
 789                 max-height: 1000px;
 790                 transition:
 791                         max-width 0.2s ease,
 792                         max-height 0.2s ease;
 793         }
 794         #text-size-adjustment-ui.engaged::after {
 795                 max-width: 0px;
 796                 max-height: 0px;
 797         }
 798
 799         #theme-tweaker-toggle {
 800                 left: 19px;
 801                 top: calc(100% - 356px);
 802                 visibility: hidden;
 803                 transition:
 804                         visibility 0.5s ease-out;
 805         }
 806         #theme-tweaker-toggle.engaged {
 807                 visibility: visible;
 808         }
 809         @-moz-document url-prefix() {
 810                 #theme-tweaker-toggle {
 811                         left: 18px;
 812                 }
 813         }
 814         #theme-tweaker-toggle button {
 815                 font-weight: 400;
 816         }
 817
 818         #theme-tweaker-ui {
 819                 visibility: visible;
 820         }
 821 }
 822
 823 /*================*/
 824 /* WIDTH SELECTOR */
 825 /*================*/
 826
 827 #width-selector button {
 828         box-shadow:
 829                 0 0 0 4px #fff inset,
 830                 0 0 0 5px #aaa inset;
 831 }
 832 #width-selector button:hover,
 833 #width-selector button.selected {
 834         box-shadow:
 835                 0 0 0 1px #fff inset,
 836                 0 0 0 2px #aaa inset,
 837                 0 0 0 4px #fff inset,
 838                 0 0 0 5px #aaa inset;
 839 }
 840
 841 /*================*/
 842 /* THEME SELECTOR */
 843 /*================*/
 844
 845 #theme-selector button {
 846         box-shadow:
 847                 0 0 0 4px #fff inset,
 848                 0 0 0 5px #999 inset;
 849 }
 850 #theme-selector button:hover,
 851 #theme-selector button.selected {
 852         box-shadow:
 853                 0 0 0 1px #fff inset,
 854                 0 0 0 2px #999 inset,
 855                 0 0 0 4px #fff inset,
 856                 0 0 0 5px #999 inset;
 857 }
 858
 859 #theme-selector button::before {
 860         font-size: 0.9375em;
 861         font-weight: 300;
 862         padding: 6px;
 863         color: #aaa;
 864         background-color: #fff;
 865 }
 866 #theme-selector button:hover::before,
 867 #theme-selector button.selected::before {
 868         color: #000;
 869 }
 870
 871 /*======================*/
 872 /* THEME TWEAKER TOGGLE */
 873 /*======================*/
 874
 875 #theme-tweaker-toggle button {
 876         color: #777;
 877 }
 878
 879 /*=================*/
 880 /* QUICKNAV WIDGET */
 881 /*=================*/
 882
 883 #quick-nav-ui a {
 884         color: #acd2af;
 885         border-radius: 4px;
 886         text-decoration: none;
 887         transition:
 888                 color 0.15s ease,
 889                 box-shadow 0.15s ease-out;
 890 }
 891 #quick-nav-ui a[href='#bottom-bar'] {
 892         line-height: 1.8;
 893 }
 894 #quick-nav-ui a:active {
 895         transform: scale(0.9);
 896 }
 897 #quick-nav-ui a[href='#comments'].no-comments {
 898         opacity: 0.4;
 899         color: #ddd;
 900 }
 901 @media only screen and (hover: hover) {
 902         #quick-nav-ui a:hover {
 903                 color: #79a97e;
 904                 box-shadow:
 905                         0 0 0 1px rgba(121, 169, 126, 0.3),
 906                         0 0 0 2px #fff;
 907         }
 908         #quick-nav-ui a:focus:not(:hover) {
 909                 transform: none;
 910                 text-shadow: none;
 911         }
 912 }
 913
 914 /*======================*/
 915 /* NEW COMMENT QUICKNAV */
 916 /*======================*/
 917
 918 #new-comment-nav-ui .new-comments-count {
 919         color: #888;
 920         text-shadow: 0.5px 0.5px 0 #fff;
 921         top: 2px;
 922 }
 923 #new-comment-nav-ui .new-comments-count::after {
 924         color: #777;
 925 }
 926 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
 927         color: #e6e6e6;
 928 }
 929
 930 /*=================*/
 931 /* HNS DATE PICKER */
 932 /*=================*/
 933
 934 #hns-date-picker span {
 935         color: #999;
 936         font-weight: 400;
 937 }
 938 #hns-date-picker input {
 939         border: 1px solid #ddd;
 940         color: #999;
 941         padding: 3px 3px 0 3px;
 942 }
 943 #hns-date-picker input:focus {
 944         color: #000;
 945 }
 946
 947 /*======================*/
 948 /* ANTI-KIBITZER TOGGLE */
 949 /*======================*/
 950
 951 #anti-kibitzer-toggle {
 952         bottom: unset;
 953         top: 30px;
 954         visibility: visible;
 955         right: -48px;
 956 }
 957 #anti-kibitzer-toggle button::before {
 958         font-weight: 300;
 959 }
 960 #anti-kibitzer-toggle button::before,
 961 #anti-kibitzer-toggle button::after {
 962         opacity: 0.2;
 963 }
 964 #anti-kibitzer-toggle button:hover::before,
 965 #anti-kibitzer-toggle button:hover::after {
 966         opacity: 1.0;
 967 }
 968
 969 /*======================*/
 970 /* TEXT SIZE ADJUSTMENT */
 971 /*======================*/
 972
 973 #text-size-adjustment-ui button {
 974         font-weight: 400;
 975 }
 976
 977 /*=============================*/
 978 /* COMMENTS VIEW MODE SELECTOR */
 979 /*=============================*/
 980
 981 #comments-view-mode-selector a {
 982         color: #acd2af;
 983         opacity: 0.5;
 984 }
 985
 986 /*===============*/
 987 /* KEYBOARD HELP */
 988 /*===============*/
 989
 990 #keyboard-help-overlay {
 991         font-weight: 400;
 992 }
 993 #keyboard-help-overlay .keyboard-help-container h1 {
 994         padding: 15px 20px 5px 20px;
 995 }
 996 #nav-item-about button.open-keyboard-help {
 997         font-size: 0.875em;
 998         left: 0;
 999         top: -1px;
1000 }
1001
1002 /*==========*/
1003 /* ARCHIVES */
1004 /*==========*/
1005
1006 .archive-nav {
1007         border: 1px solid transparent;
1008         margin: 1.25em 0 0 0;
1009         padding: 0;
1010 }
1011 .archive-nav *[class^='archive-nav-item'] {
1012         color: <?php echo $hyperlink_color; ?>;
1013         border-style: solid;
1014         border-color: #c4dbc4;
1015         border-width: 1px 0 1px 1px;
1016 }
1017 .archive-nav div[class^='archive-nav-']:nth-of-type(2) *[class^='archive-nav-item'] {
1018         border-top-width: 0;
1019         border-bottom-width: 0;
1020 }
1021 .archive-nav div[class^='archive-nav-']:last-of-type *[class^='archive-nav-item'] {
1022         border-bottom-width: 1px;
1023 }
1024 .archive-nav *[class^='archive-nav-item']:last-child {
1025         border-right-width: 1px;
1026 }
1027 .archive-nav a:hover,
1028 .archive-nav span[class^='archive-nav-item'] {
1029         background-color: #c4dbc4;
1030         color: #fff;
1031 }
1032
1033 .archive-nav a:active {
1034         background-color: <?php echo $hyperlink_color; ?>;
1035 }
1036
1037 /*==========*/
1038 /* LISTINGS */
1039 /*==========*/
1040
1041 h1.listing,
1042 #content.search-results-page h1.listing {
1043         margin: 0.7em 20px 0.1em 0;
1044         max-width: calc(100% - 20px);
1045         font-family: <?php echo $headings_font; ?>, 'Font Awesome';
1046         font-size: 1.25rem;
1047         line-height: 1.2;
1048 }
1049
1050 h1.listing .link-post-link {
1051         color: #bbb;
1052         font-weight: 400;
1053         font-size: 0.8125em;
1054         top: 3px;
1055 }
1056 h1.listing .post-title-link {
1057         font-weight: 300;
1058         text-shadow: <?php global $platform; echo ($platform == 'Mac' ? 'none' : '0 0 0 #444'); ?>;
1059         color: <?php global $platform; echo ($platform == 'Mac' ? '#444' : '#000'); ?>;
1060 }
1061 @-moz-document url-prefix() {
1062         h1.listing .post-title-link {
1063                 text-shadow: none;
1064         }
1065 }
1066 @media not all and (min-resolution:.001dpcm) { @media {
1067         h1.listing .post-title-link {
1068                 color: #000;
1069         }
1070 }}
1071
1072 @media only screen and (hover: hover) {
1073         h1.listing a:hover,
1074         h1.listing a:focus {
1075                 color: #92c396;
1076                 background-color: rgba(255,255,255,0.85);
1077         }
1078         h1.listing:focus-within::before {
1079                 color: #79a97e;
1080                 font-weight: 400;
1081                 left: -0.625em;
1082         }
1083         h1.listing .link-post-link:hover {
1084                 color: #79a97e;
1085         }
1086         h1.listing .link-post-link:focus {
1087                 color: #a0d3a2;
1088                 text-decoration: none;
1089                 border-bottom: 2px dotted #a0d3a2;
1090         }
1091 }
1092
1093 h1.listing .edit-post-link {
1094         padding: 5px 3px 24px 0.5em;
1095         top: 0;
1096         right: 0;
1097 }
1098 h1.listing .edit-post-link:hover {
1099         text-decoration: none;
1100 }
1101 #content.user-page h1.listing .edit-post-link {
1102         background-color: #fff;
1103 }
1104
1105 /*======*/
1106 /* SPAM */
1107 /*======*/
1108
1109 h1.listing.spam {
1110         opacity: 0.15;
1111 }
1112 h1.listing.spam + .post-meta {
1113         opacity: 0.35;
1114 }
1115 h1.listing.spam:hover,
1116 h1.listing.spam + .post-meta:hover,
1117 h1.listing.spam:hover + .post-meta {
1118         opacity: 1.0;
1119 }
1120
1121 /*===================*/
1122 /* LISTING POST-META */
1123 /*===================*/
1124
1125 h1.listing + .post-meta {
1126         font-size: 0.875rem;
1127         margin: 0 20px 0 1px;
1128 }
1129
1130 h1.listing + .post-meta > * {
1131         color: #bbb;
1132         margin: 0 1.25em 0 0;
1133 }
1134 h1.listing + .post-meta a {
1135         color: #92c396;
1136 }
1137 h1.listing + .post-meta a:hover {
1138         color: #79a97e;
1139 }
1140 h1.listing + .post-meta .karma-value {
1141         cursor: default;
1142 }
1143 h1.listing + .post-meta .lw2-link {
1144         display: none;
1145 }
1146 h1.listing + .post-meta .post-section {
1147         overflow: visible;
1148         order: 1;
1149 }
1150 h1.listing + .post-meta .post-section::before {
1151         position: relative;
1152         left: unset;
1153         top: -1px;
1154 }
1155
1156 /*============*/
1157 /* USER PAGES */
1158 /*============*/
1159
1160 #content.user-page h1.page-main-heading,
1161 #content.user-page .user-stats {
1162         grid-row: 1;
1163 }
1164 #content.user-page #comments-list-mode-selector,
1165 #content.user-page .sublevel-nav.sort {
1166         grid-row: 2 / span 2;
1167 }
1168 #content.user-page .sublevel-nav {
1169         grid-row: 2;
1170         margin-bottom: 1em;
1171 }
1172 #content.user-page #top-nav-bar {
1173         grid-row: 3;
1174 }
1175
1176 #content.user-page h1.page-main-heading,
1177 #content.conversation-page h1.page-main-heading {
1178         font-family: <?php echo $headings_font; ?>;
1179         font-weight: normal;
1180         margin: 0.5em 0 0 0;
1181 }
1182 #content.user-page h1.page-main-heading {
1183         border-bottom: 1px solid #e6e6e6;
1184         line-height: 1;
1185 }
1186
1187 #content.user-page h1.listing,
1188 #content.user-page h1.listing + .post-meta {
1189         border-color: #ddd;
1190         border-style: solid;
1191 }
1192 #content.user-page h1.listing {
1193         max-width: 100%;
1194         padding: 6px 8px 0 8px;
1195         border-width: 1px 1px 0 1px;
1196         margin: 1rem 0 0 0;
1197 }
1198 #content.own-user-page h1.listing,
1199 h1.listing.own-post-listing {
1200         padding-right: 36px;
1201 }
1202 @media only screen and (hover: hover) {
1203         #content.user-page h1.listing:focus-within::before {
1204                 left: -0.625em;
1205         }
1206 }
1207 #content.user-page h1.listing + .post-meta {
1208         margin: 0 0 1rem 0;
1209         padding: 12px 8px 3px 8px;
1210         border-width: 0 1px 1px 1px;
1211         line-height: 1;
1212 }
1213
1214 #content.conversations-user-page h1.listing {
1215         padding: 8px 6px 28px 10px;
1216         font-size: 1.25rem;
1217 }
1218 #content.conversations-user-page h1.listing + .post-meta {
1219         padding: 4px 10px 0.5em 6px;
1220         margin: 0;
1221 }
1222
1223 .user-stats .karma-total {
1224         font-weight: 500;
1225 }
1226
1227 /*===============*/
1228 /* CONVERSATIONS */
1229 /*===============*/
1230
1231 /*============*/
1232 /* LOGIN PAGE */
1233 /*============*/
1234
1235 .login-container form h1 {
1236         font-family: <?php echo $headings_font; ?>;
1237         font-weight: 300;
1238 }
1239
1240 .login-container form label {
1241         color: #aaa;
1242 }
1243
1244 /* “Create account” form */
1245
1246 #signup-form {
1247         border: 1px solid #e4e4e4;
1248 }
1249 #signup-form input[type='submit'] {
1250         padding: 8px 12px 6px 12px;
1251 }
1252
1253 /* Log in tip */
1254
1255 .login-container .login-tip {
1256         border: 1px solid #eee;
1257 }
1258
1259 /* Message box */
1260
1261 .error-box {
1262         border: 1px solid red;
1263         background-color: #faa;
1264 }
1265 .success-box {
1266         border: 1px solid green;
1267         background-color: #afa;
1268 }
1269
1270 /*=====================*/
1271 /* PASSWORD RESET PAGE */
1272 /*=====================*/
1273
1274 .reset-password-container input[type='submit'] {
1275         background-color: #e4e4e4;
1276         border: 1px solid #ccc;
1277         font-weight: bold;
1278 }
1279
1280 /*===================*/
1281 /* TABLE OF CONTENTS */
1282 /*===================*/
1283
1284 .contents {
1285         font-family: <?php echo $UI_font; ?>;
1286         padding-top: 0;
1287         margin-top: 1em;
1288         background-color: #fff;
1289 }
1290 .post-body .contents ul {
1291         font-size: 0.8125em;
1292 }
1293 .post-body .contents li::before {
1294         color: #bbb;
1295 }
1296
1297 /*==================*/
1298 /* POSTS & COMMENTS */
1299 /*==================*/
1300
1301 .body-text {
1302         font-family: <?php echo $text_font; ?>;
1303         text-shadow: <?php global $platform; echo ($platform == 'Mac' ? '0 0 0 rgba(0,0,0,0.7)' : 'none'); ?>;
1304         font-weight: <?php global $platform; echo ($platform == 'Mac' ? '300' : '400'); ?>;
1305 }
1306
1307 /*=======*/
1308 /* POSTS */
1309 /*=======*/
1310
1311 .post {
1312         overflow: visible;
1313         padding: 2em 0 0 0;
1314 }
1315
1316 .post-body {
1317         font-size: 1.25rem;
1318 }
1319
1320 h1.post-title {
1321         font-size: 2.75rem;
1322         font-family: <?php echo $headings_font; ?>;
1323         font-weight: 300;
1324         line-height: 1.1;
1325         margin: 1.375em 0 0.5em 0;
1326 }
1327
1328 /*=================*/
1329 /* POST NAVIGATION */
1330 /*=================*/
1331
1332 .post-nav-item {
1333         padding: 0 0 0 10px;
1334 }
1335
1336 @media only screen and (max-width: 900px) {
1337         .post-nav-item {
1338                 padding: 0;
1339         }
1340         .sequence-title {
1341                 border-top: 1px solid #ddd;
1342                 padding: 0.375em 0.5em 0.125em 0.5em
1343         }
1344         .post-nav.prev {
1345                 border-right: 1px solid #ddd;
1346         }
1347         .post-nav.next {
1348                 border-left: 1px solid #ddd;
1349         }
1350 }
1351
1352 /*===========*/
1353 /* POST-META */
1354 /*===========*/
1355
1356 .post-meta .post-section::before,
1357 .comment-meta .alignment-forum {
1358         color: #dfdfdf;
1359         font-weight: 400;
1360         padding: 1px;
1361 }
1362 .post-meta .post-section.alignment-forum::before {
1363         color: #d6d7ff;
1364 }
1365 .post .post-meta .post-section::before {
1366         position: relative;
1367         top: -3px;
1368 }
1369
1370 a.post-section::before {
1371         transition: color 0.15s ease;
1372 }
1373 a.post-section:hover::before {
1374         color: #79a97e;
1375 }
1376 a.post-section.alignment-forum:hover::before {
1377         color: #999bc1;
1378 }
1379
1380 .post-meta > * {
1381         color: #bbb;
1382 }
1383 .post-meta a,
1384 .post-meta a:visited {
1385         color: #92c396;
1386 }
1387 .post-meta a:hover {
1388         color: #79a97e;
1389 }
1390 .post-meta .lw2-link:hover {
1391         opacity: 1;
1392 }
1393
1394 .post .top-post-meta {
1395         flex-flow: column;
1396         position: relative;
1397 }
1398 .post .top-post-meta .karma,
1399 .post .top-post-meta .author,
1400 .post .top-post-meta .qualified-linking {
1401         margin: auto;
1402 }
1403 <?php fit_content(".post .top-post-meta .karma, .post .top-post-meta .author, .post .top-post-meta .qualified-linking"); ?>
1404
1405 .post .top-post-meta .karma {
1406         order: -1;
1407         display: flex;
1408         flex-flow: column;
1409 }
1410 .post .top-post-meta .karma .karma-value {
1411         padding: 5px 0 0 0;
1412         color: #999;
1413         font-size: 1.125em;
1414         position: relative;
1415         background-color: #fff;
1416         width: 2.25em;
1417 }
1418 .post .top-post-meta .karma .karma-value::before {
1419         content: "";
1420         position: absolute;
1421         display: block;
1422         background-color: #ccc;
1423         height: 1px;
1424         width: 244px;
1425         top: 50%;
1426         left: -100px;
1427         z-index: -1;
1428 }
1429 .post .top-post-meta .karma .karma-value span {
1430         display: none;
1431 }
1432
1433 .post .post-meta .karma.active-controls::after {
1434         bottom: -32px;
1435         padding: 0 4px;
1436 }
1437 .post .post-meta .karma.active-controls:hover::after {
1438         opacity: 0.7;
1439 }
1440 .post .top-post-meta .karma.active-controls::after {
1441         bottom: 0;
1442         left: calc(100% + 16px);
1443         max-width: unset;
1444         padding: 0;
1445         white-space: nowrap;
1446 }
1447 .post .post-meta .karma .karma-value::after {
1448         top: -20px;
1449 }
1450 .post .post-meta .karma .karma-value:hover::after {
1451         opacity: 0.7;
1452 }
1453 .post .top-post-meta .karma .karma-value::after {
1454         top: -6px;
1455         left: unset;
1456         width: unset;
1457         right: calc(100% + 8px);
1458 }
1459
1460 .post .top-post-meta .author {
1461         padding: 4px 0 0 0;
1462         margin: 0.25em auto;
1463 }
1464 .post .top-post-meta .qualified-linking {
1465         z-index: 1;
1466 }
1467 .post .top-post-meta .qualified-linking label {
1468         margin: 0;
1469 }
1470
1471 .post .top-post-meta .post-section,
1472 .post .top-post-meta .lw2-link {
1473         display: none;
1474 }
1475
1476 .post .top-post-meta .date,
1477 .post .top-post-meta .comment-count {
1478         position: absolute;
1479         right: 100%;
1480 }
1481 .post .top-post-meta .date {
1482         top: calc(100% + 34px);
1483 }
1484 .post .top-post-meta .comment-count {
1485         top: calc(100% + 60px);
1486 }
1487 .post .top-post-meta .date > span,
1488 .post .top-post-meta .comment-count > span {
1489         position: fixed;
1490         transform: translateX(-100%);
1491 }
1492
1493 .post .bottom-post-meta {
1494         padding: 1.5em 0 1em 0;
1495         margin: 0.5em 0 0 0;
1496         position: relative;
1497         border-color: transparent;
1498 }
1499 .post .bottom-post-meta::before,
1500 .post .bottom-post-meta::after {
1501         content: "";
1502         position: absolute;
1503         display: block;
1504         background-color: #ddd;
1505         height: 1px;
1506         width: calc(100% - 60px);
1507 }
1508 .post .bottom-post-meta::before {
1509         top: 0;
1510 }
1511 .post .bottom-post-meta::after {
1512         bottom: 0;
1513 }
1514
1515 @media only screen and (max-width: 520px) {
1516         .post .bottom-post-meta {
1517                 padding: 0.75em 0 0.125em 0;
1518         }
1519 }
1520
1521 /*============*/
1522 /* LINK POSTS */
1523 /*============*/
1524
1525 .post.link-post a.link-post-link {
1526         font-family: <?php echo $UI_font; ?>;
1527 }
1528 .post.link-post a.link-post-link::before {
1529         opacity: 0.6;
1530 }
1531 .post.link-post a.link-post-link:hover::before {
1532         opacity: 1;
1533 }
1534 .post.link-post a.link-post-link:focus {
1535         color: #79a97e;
1536         border-bottom: 2px dotted #79a97e;
1537 }
1538
1539 /*==========*/
1540 /* COMMENTS */
1541 /*==========*/
1542
1543 .comments::before {
1544         border-top: 1px solid #ddd;
1545 }
1546
1547 .comments {
1548         padding: 0 0 0 10px;
1549 }
1550 #content > .comment-thread .comment-meta a.date:focus,
1551 #content > .comment-thread .comment-meta a.permalink:focus {
1552         color: #888;
1553         outline: 1px dotted #999;
1554         position: relative;
1555         background-color: #fff;
1556         padding: 0 5px;
1557         left: -5px;
1558 }
1559 #content > .comment-thread .comment-meta a.date:focus + *,
1560 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
1561         margin-left: -10px;
1562 }
1563 #content > .comment-thread .comment-meta a.permalink:focus {
1564         outline: 2px dotted #999;
1565 }
1566 .comment-item {
1567         border: 1px solid #ddd;
1568         background-color: var(--GW-comment-background-color);
1569 }
1570 .comment-parent-link::after {
1571         box-shadow:
1572                 0 28px 16px -16px var(--GW-comment-parent-background-color) inset,
1573                 4px 16px 0 12px var(--GW-comment-background-color-target) inset,
1574                 4px     4px 0 12px var(--GW-comment-background-color-target) inset;
1575 }
1576
1577 .comment-body {
1578         font-size: 1.1875rem;
1579 }
1580 #content.user-page .comment-body,
1581 #content.index-page .comment-body {
1582         font-size: 1.125rem;
1583 }
1584
1585 /*================================*/
1586 /* DEEP COMMENT THREAD COLLAPSING */
1587 /*================================*/
1588
1589 .comment-item input[id^="expand"] + label::after {
1590         color: <?php echo $hyperlink_color; ?>;
1591         font-weight: 400;
1592 }
1593 .comment-item input[id^="expand"] + label:hover::after {
1594         color: #c00;
1595 }
1596 .comment-item input[id^="expand"] + label:active::after,
1597 .comment-item input[id^="expand"] + label:focus::after{
1598         color: #c00;
1599 }
1600 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
1601         border-width: 1px 0 0 0;
1602 }
1603
1604 /*==============*/
1605 /* COMMENT-META */
1606 /*==============*/
1607
1608 .comment-meta {
1609         padding-top: 4px;
1610 }
1611 .comment-meta > * {
1612         color: #bbb;
1613 }
1614 .comment-meta a,
1615 .comment-meta a:visited {
1616         color: #92c396;
1617 }
1618 .comment-meta a:hover {
1619         color: #79a97e;
1620 }
1621 .comment-meta .author {
1622         font-size: 1.125em;
1623         font-weight: normal;
1624 }
1625
1626 .comment-controls .voting-controls {
1627         color: #bbb;
1628 }
1629
1630 .comment-item .voting-controls.active-controls::after,
1631 .comment-item .voting-controls .karma-value::after,
1632 .author::before {
1633         background-color: #fff;
1634         color: #bbb;
1635         border-radius: 4px;
1636         box-shadow: 0 0 0 1px #eee inset;
1637 }
1638 .comment-item .voting-controls.active-controls::after {
1639         padding: 6px 4px 4px 4px;
1640         bottom: -42px;
1641 }
1642 .comment-item .voting-controls .karma-value::after {
1643         padding: 4px 8px 0 8px;
1644         top: -30px;
1645 }
1646
1647 /*====================*/
1648 /* ANTI-KIBITZER MODE */
1649 /*====================*/
1650
1651 .author.redacted,
1652 .inline-author.redacted {
1653         opacity: 0.9;
1654         font-weight: 300;
1655 }
1656
1657 .karma-value.redacted {
1658         opacity: 0.7;
1659 }
1660
1661 .link-post-domain.redacted {
1662         opacity: 0.6;
1663 }
1664
1665 /*===========================*/
1666 /* COMMENT THREAD NAVIGATION */
1667 /*===========================*/
1668
1669 div.comment-parent-link {
1670         font-weight: 400;
1671 }
1672 a.comment-parent-link {
1673         font-weight: 300;
1674 }
1675 a.comment-parent-link::before {
1676         color: #bbb;
1677         font-weight: 400;
1678 }
1679 a.comment-parent-link:hover::before {
1680         background-color: #ffd;
1681         color: #999;
1682 }
1683
1684 div.comment-child-links {
1685         font-weight: 400;
1686 }
1687 div.comment-child-links a {
1688         font-weight: 300;
1689 }
1690 .comment-child-link::before {
1691         color: #ccc;
1692 }
1693
1694 .comment-item-highlight {
1695         box-shadow:
1696                 0 0     2px #e7b200,
1697                 0 0     3px #e7b200,
1698                 0 0     5px #e7b200,
1699                 0 0     7px #e7b200,
1700                 0 0 10px #e7b200;
1701         border: 1px solid #e7b200;
1702 }
1703 .comment-item-highlight-faint {
1704         box-shadow:
1705                 0 0     2px #f8e7b5,
1706                 0 0     3px #f8e7b5,
1707                 0 0     5px #f8e7b5,
1708                 0 0     7px #f8e7b5,
1709                 0 0 10px #f8e7b5;
1710         border: 1px solid #f8e7b5;
1711 }
1712
1713 .comment-popup {
1714         background-color: #fff;
1715 }
1716
1717 /*====================*/
1718 /* COMMENT PERMALINKS */
1719 /*====================*/
1720
1721 .comment-meta .permalink::before {
1722         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-blue-on-white.gif")) ?>');
1723 }
1724 .comment-meta .lw2-link::before {
1725         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-blue-on-white.gif")) ?>');
1726 }
1727 .individual-thread-page a.comment-parent-link:empty::before {
1728         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-blue-on-white.gif")) ?>');
1729 }
1730 .comment-meta .permalink:hover::before {
1731         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/anchor-white-on-blue.gif")) ?>');
1732 }
1733 .comment-meta .lw2-link:hover::before {
1734         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/lw-white-on-blue.gif")) ?>');
1735 }
1736 .individual-thread-page a.comment-parent-link:hover:empty::before {
1737         left: unset;
1738         background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/up-arrow-white-on-blue.gif")) ?>');
1739 }
1740
1741 .comment-meta .permalink,
1742 .comment-meta .lw2-link,
1743 .individual-thread-page .comment-parent-link:empty {
1744         filter: hue-rotate(270deg);
1745         opacity: 0.4;
1746 }
1747 .comment-meta .permalink:hover,
1748 .comment-meta .lw2-link:hover,
1749 .individual-thread-page .comment-parent-link:empty:hover {
1750         opacity: 1.0;
1751 }
1752
1753 /*=======================*/
1754 /* COMMENTS COMPACT VIEW */
1755 /*=======================*/
1756
1757 #comments-list-mode-selector {
1758         opacity: 0.4;
1759         transition: opacity 0.15s ease;
1760 }
1761 #content.index-page #comments-list-mode-selector {
1762         grid-column: 3;
1763         justify-self: end;
1764 }
1765 #comments-list-mode-selector:hover {
1766         opacity: 1.0;
1767 }
1768
1769 #comments-list-mode-selector button {
1770         border: none;
1771         background-color: transparent;
1772         box-shadow:
1773                 0 0 0 4px #fff inset,
1774                 0 0 0 5px #aaa inset;
1775 }
1776 #comments-list-mode-selector button:hover,
1777 #comments-list-mode-selector button.selected {
1778         box-shadow:
1779                 0 0 0 1px #fff inset,
1780                 0 0 0 2px #aaa inset,
1781                 0 0 0 4px #fff inset,
1782                 0 0 0 5px #aaa inset;
1783 }
1784
1785 #content.compact > .comment-thread .comment-item {
1786         max-height: 53px;
1787 }
1788 #content.compact > .comment-thread .comment-item::after {
1789         color: <?php echo $hyperlink_color; ?>;
1790         background: linear-gradient(to right, transparent 0%, #fff 50%, #fff 100%);
1791 }
1792
1793 @media only screen and (hover: hover) {
1794         #content.compact > .comment-thread .comment-item:hover .comment,
1795         #content.compact > .comment-thread .comment-item.expanded .comment {
1796                 background-color: #fff;
1797                 outline: 1px solid #92c396;
1798         }
1799         #content.compact > .comment-thread .comment-item:hover .comment::before,
1800         #content.compact > .comment-thread .comment-item.expanded .comment::before {
1801                 background-color: #fff;
1802                 box-shadow:
1803                         0 0  3px #fff,
1804                         0 0  5px #fff,
1805                         0 0  7px #fff,
1806                         0 0 10px #fff,
1807                         0 0 20px #fff,
1808                         0 0 30px #fff,
1809                         0 0 40px #fff;
1810         }
1811 }
1812 @media only screen and (hover: none) {
1813         #content.compact > .comment-thread.expanded .comment-item .comment {
1814                 background-color: #fff;
1815                 outline: 1px solid #92c396;
1816         }
1817         #content.compact > .comment-thread.expanded .comment-item .comment::before {
1818                 background-color: #fff;
1819                 box-shadow:
1820                         0 0  3px #fff,
1821                         0 0  5px #fff,
1822                         0 0  7px #fff,
1823                         0 0 10px #fff,
1824                         0 0 20px #fff,
1825                         0 0 30px #fff,
1826                         0 0 40px #fff;
1827         }
1828 }
1829 #content.compact > .comment-thread .comment-item:hover .comment {
1830         background-color: #fff;
1831         outline: 1px solid #92c396;
1832 }
1833 #content.compact > .comment-thread .comment-item:hover .comment::before {
1834         background-color: #fff;
1835         box-shadow:
1836                 0 0  3px #fff,
1837                 0 0  5px #fff,
1838                 0 0  7px #fff,
1839                 0 0 10px #fff,
1840                 0 0 20px #fff,
1841                 0 0 30px #fff,
1842                 0 0 40px #fff;
1843 }
1844
1845 #content.user-page.compact > h1.listing {
1846         margin-top: 0.5rem;
1847 }
1848 #content.user-page.compact > h1.listing + .post-meta {
1849         margin-bottom: 1rem;
1850 }
1851
1852 /*===========================*/
1853 /* HIGHLIGHTING NEW COMMENTS */
1854 /*===========================*/
1855
1856 .new-comment::before {
1857         outline: 1px solid #5a5;
1858         box-shadow:
1859                 0 0 6px -2px #5a5 inset,
1860                 0 0 4px #5a5;
1861 }
1862
1863 /*=================================*/
1864 /* COMMENT THREAD MINIMIZE BUTTONS */
1865 /*=================================*/
1866
1867 .comment-minimize-button {
1868         color: #ddd;
1869         font-weight: 300;
1870         box-shadow: 0 0 0 1px transparent;
1871 }
1872 .comment-minimize-button:hover {
1873         color: #bbb;
1874         text-shadow: <?php echo $white_glow; ?>;
1875 }
1876 .comment-minimize-button::after {
1877         font-family: <?php echo $UI_font; ?>;
1878         color: #999;
1879 }
1880 .comment-minimize-button.maximized::after {
1881         color: #ccc;
1882 }
1883
1884 /*=================================*/
1885 /* INDIVIDUAL COMMENT THREAD PAGES */
1886 /*=================================*/
1887
1888 .individual-thread-page > h1 {
1889         margin: 2em 0 0 30px;
1890         font-weight: 300;
1891         font-family: <?php echo $headings_font; ?>;
1892 }
1893 .individual-thread-page > .comments {
1894         padding: 0 0 0 30px;
1895 }
1896 .individual-thread-page > #bottom-bar.decorative::before {
1897         margin: 0 30px 0 60px;
1898 }
1899
1900 /*==============*/
1901 /* VOTE BUTTONS */
1902 /*==============*/
1903
1904 .vote {
1905         position: relative;
1906 }
1907 .vote::before {
1908         position: relative;
1909         z-index: 1;
1910 }
1911 .vote::after {
1912         position: absolute;
1913 }
1914
1915 .karma .upvote::before {
1916         content: "\F077";
1917         top: 1px;
1918 }
1919 .karma .downvote::before {
1920         content: "\F078";
1921         left: -2px;
1922 }
1923 .karma .upvote::after {
1924         content: "\F325";
1925         left: 6px;
1926         bottom: 4px;
1927 }
1928 .karma .downvote::after {
1929         content: "\F322";
1930         left: 4px;
1931         top: 4px;
1932 }
1933 @-moz-document url-prefix() {
1934         .karma .upvote::after {
1935                 left: 4px;
1936                 bottom: 4px;
1937         }
1938         .karma .downvote::after {
1939                 left: 2px;
1940                 top: 5px;
1941         }
1942 }
1943
1944 .agreement .upvote::before {
1945         content: "\F00C";
1946         top: 1px;
1947 }
1948 .agreement .downvote::before {
1949         content: "\F00D";
1950         left: -2px;
1951 }
1952 .agreement .upvote::after {
1953         content: "\F560";
1954         left: 6px;
1955         bottom: 2px;
1956 }
1957 .agreement .downvote::after {
1958         content: "\E59B";
1959         left: 2px;
1960         top: 1px;
1961 }
1962 @-moz-document url-prefix() {
1963         .agreement .upvote::after {
1964                 left: 4px;
1965                 bottom: 2px;
1966         }
1967         .agreement .downvote::after {
1968                 left: 0;
1969                 top: 1px;
1970         }
1971 }
1972
1973 /**********/
1974 /*      States.
1975  */
1976
1977 /*      _ 1
1978  */
1979 .vote {
1980         color: #ddd;
1981         font-weight: 400;
1982 }
1983
1984 /*      _ 2
1985  */
1986 .upvote:hover,
1987 .upvote:not(.none) {
1988         color: var(--GW-upvote-button-color);
1989         text-shadow:
1990                 0 0 0.5px #fff,
1991                 0 0 8px #0f0;
1992 }
1993 .downvote:hover,
1994 .downvote:not(.none) {
1995         color: var(--GW-downvote-button-color);
1996         text-shadow:
1997                 0 0 0.5px #fff,
1998                 0 0 8px #f00;
1999 }
2000
2001 /*      0 _
2002  */
2003 .vote::after {
2004         visibility: hidden;
2005 }
2006
2007 /*      1,2 _
2008  */
2009 .vote.two-temp::after,
2010 .vote.two::after {
2011         visibility: visible;
2012 }
2013
2014 /*      1 _
2015  */
2016 .vote.two-temp::after {
2017         color: #ddd;
2018         text-shadow: none;
2019 }
2020
2021 /*      Disabled.
2022  */
2023 .vote:disabled {
2024         visibility: unset;
2025         color: #e6e6e6;
2026 }
2027 .post .vote:disabled {
2028         color: #f4f4f4;
2029 }
2030 .vote:disabled:hover {
2031         text-shadow: none;
2032 }
2033
2034 .post .top-post-meta .downvote::before {
2035         left: 0;
2036 }
2037 .post .top-post-meta .upvote::after,
2038 .post .top-post-meta .downvote::after {
2039         left: 14px;
2040 }
2041 .post .top-post-meta .downvote::after {
2042         top: 5px;
2043 }
2044
2045 /*===========================*/
2046 /* COMMENTING AND POSTING UI */
2047 /*===========================*/
2048
2049 .posting-controls input[type='submit'] {
2050         padding: 6px 12px 3px 12px;
2051 }
2052
2053 .comment-controls {
2054         margin: 0 4px 4px 16px;
2055 }
2056 .comment + .comment-controls .action-button {
2057         font-weight: 300;
2058 }
2059
2060 .new-comment-button {
2061         margin: 0;
2062         padding: 0.125em;
2063 }
2064
2065 .comment-controls .cancel-comment-button {
2066         color: #c00;
2067         text-shadow:
2068                 0 0 1px #fff,
2069                 0 0 2px #fff;
2070         padding: 6px 8px 1px 4px;
2071 }
2072 .comment-controls .cancel-comment-button:hover {
2073         color: #f00;
2074 }
2075
2076 .comment-controls .delete-button,
2077 .comment-controls .retract-button {
2078         color: #fd7354;
2079 }
2080 .comment-controls .delete-button::before,
2081 .comment-controls .unretract-button::before {
2082         font-weight: 300;
2083 }
2084 .comment-controls .retract-button::before {
2085         font-weight: 400;
2086 }
2087 .comment-controls .edit-button,
2088 .comment-controls .unretract-button {
2089         color: #0b0;
2090 }
2091 .comment-controls .edit-button::before {
2092         font-weight: 300;
2093 }
2094 .comment-controls .action-button:hover {
2095         color: #f00;
2096         text-shadow: 0 0 0.5px #faa;
2097 }
2098
2099 .post-controls {
2100         margin: 3em 2.5em 0 0;
2101         grid-row: 2;
2102 }
2103 .post {
2104         grid-row: 2;
2105 }
2106 .edit-post-link,
2107 .edit-post-link:visited {
2108         color: #090;
2109 }
2110
2111 .posting-controls textarea {
2112         font-family: <?php echo $text_font; ?>;
2113         font-weight: 300;
2114         color: #000;
2115         text-shadow: 0 0 0 #000;
2116         border-color: #eee;
2117         transition: border-color 0.15s ease;
2118 }
2119 .posting-controls textarea:focus {
2120         border-width: 29px 1px 1px 1px;
2121         border-color: #92c396;
2122 }
2123 .posting-controls.edit-existing-post textarea:focus,
2124 .posting-controls form.edit-existing-comment textarea:focus {
2125         border-color: #090;
2126 }
2127
2128 /*= Scroll bars =*/
2129
2130 .posting-controls textarea::-webkit-scrollbar {
2131         width: 16px;
2132         background-color: transparent;
2133 }
2134 .posting-controls textarea::-webkit-scrollbar-track {
2135         background-color: #fff;
2136 }
2137 .posting-controls textarea::-webkit-scrollbar-thumb {
2138         background-color: #eee;
2139         box-shadow: 0 0 0 1px #fff inset;
2140 }
2141 .posting-controls textarea:focus::-webkit-scrollbar-thumb {
2142         background-color: #c4dbc4;
2143         box-shadow: 0 0 0 1px #fff inset;
2144 }
2145
2146 /* GUIEdit buttons */
2147
2148 .guiedit-buttons-container {
2149         background-color: #fff;
2150         border-bottom: 1px solid #eee;
2151 }
2152
2153 .posting-controls.edit-existing-post .guiedit-buttons-container button,
2154 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
2155     color: #050;
2156 }
2157 .guiedit-buttons-container button {
2158         font-family: Font Awesome, <?php echo $text_font; ?>;
2159         border: 1px solid transparent;
2160 }
2161
2162 .guiedit::after {
2163         font-family: <?php echo $UI_font; ?>;
2164         color: #999;
2165         font-weight: 300;
2166         text-shadow: 0 0 0 #999;
2167         top: 3px;
2168 }
2169
2170 .posting-controls .markdown-reference-link a {
2171         background-position: right 70%;
2172 }
2173 .markdown-reference-link {
2174         color: #999;
2175 }
2176
2177 /* Markdown hints */
2178
2179 #markdown-hints-checkbox + label {
2180         color: <?php echo $hyperlink_color; ?>;
2181 }
2182 #markdown-hints-checkbox + label:hover {
2183         color: #79a97e;
2184 }
2185 #markdown-hints {
2186         border: 1px solid #faa;
2187         background-color: #fff;
2188 }
2189 #markdown-hints .markdown-hints-row span,
2190 #markdown-hints .markdown-hints-row code {
2191         padding: 2px 12px 2px 2px;
2192 }
2193
2194 /*================*/
2195 /* EDIT POST FORM */
2196 /*================*/
2197
2198 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2199         top: 2px;
2200         color: #acd2af;
2201         transition: color 0.15s ease;
2202 }
2203 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover {
2204         color: #79a97e;
2205 }
2206 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2207         top: 2px;
2208         border: 1px solid #eee;
2209         color: #bbb;
2210         transition:
2211                 box-shadow 0.3s ease,
2212                 border-color 0.15s ease;
2213 }
2214 @media only screen and (hover:hover) {
2215         #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before {
2216                 border-color: #c4dbc4;
2217         }
2218 }
2219 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
2220         border-color: #c4dbc4;
2221         box-shadow:
2222                 0 0 0 4px #fff inset,
2223                 0 0 0 1em #c4dbc4 inset;
2224 }
2225
2226 #edit-post-form label[for='url'],
2227 #edit-post-form input[name='url'] {
2228         display: block;
2229         transition:
2230                 max-height 0.15s ease,
2231                 overflow 0.15s ease,
2232                 margin-top 0.15s ease,
2233                 margin-bottom 0.15s ease,
2234                 padding 0.15s ease,
2235                 border-color 0.15s ease;
2236
2237 }
2238 #edit-post-form .link-post-checkbox:not(:checked) ~ label[for='url'],
2239 #edit-post-form .link-post-checkbox:not(:checked) ~ input[name='url'] {
2240         max-height: 0;
2241         overflow: hidden;
2242         margin-top: 0;
2243         margin-bottom: 0;
2244         padding: 0;
2245         border-color: transparent;
2246 }
2247
2248 #edit-post-form label[for='title'],
2249 #edit-post-form label[for='url'],
2250 #edit-post-form label[for='section'] {
2251         color: #aaa;
2252         text-shadow: 0 0 0 #aaa;
2253 }
2254
2255 #edit-post-form input[type='radio'] + label {
2256         color: #92c396;
2257         border-color: #c4dbc4;
2258         padding: 6px 12px 3px 12px;
2259         position: relative;
2260         top: -2px;
2261         transition:
2262                 background-color 0.15s ease,
2263                 color 0.15s ease,
2264                 border-color 0.15s ease;
2265 }
2266 #edit-post-form input[type='radio'][value='all'] + label {
2267         border-radius: 8px 0 0 8px;
2268         border-width: 1px;
2269 }
2270 #edit-post-form input[type='radio'][value='drafts'] + label {
2271         border-radius: 0 8px 8px 0;
2272         padding-right: 13px;
2273 }
2274 #edit-post-form input[type='radio'] + label:hover,
2275 #edit-post-form input[type='radio']:focus + label,
2276 #edit-post-form input[type='radio']:checked + label {
2277         background-color: #c4dbc4;
2278         color: #fff;
2279 }
2280 #edit-post-form input[type='radio']:active + label {
2281         border-color: #92c396;
2282         background-color: #92c396;
2283 }
2284
2285 #edit-post-form input[type='submit'] {
2286         padding: 7px 14px 4px 14px;
2287 }
2288
2289 /*=======*/
2290 /* LINKS */
2291 /*=======*/
2292
2293 a {
2294         text-decoration: none;
2295         color: <?php echo $hyperlink_color; ?>;
2296         transition: color 0.15s ease;
2297 }
2298 a:visited {
2299         color: #bebb84;
2300 }
2301 a:hover {
2302         color: #bbb;
2303 }
2304
2305 /*=========*/
2306 /* BUTTONS */
2307 /*=========*/
2308
2309 button,
2310 input[type='submit'] {
2311         color: #92c396;
2312 }
2313 input[type='submit'] {
2314         color: #92c396;
2315         background-color: #fff;
2316         border: 1px solid #c4dbc4;
2317         transition:
2318                 color 0.15s ease,
2319                 background-color 0.15s ease,
2320                 border-color 0.15s ease;
2321 }
2322
2323 input[type='submit']:hover,
2324 input[type='submit']:focus {
2325         background-color: #c4dbc4;
2326         color: #fff;
2327 }
2328 input[type='submit']:active {
2329         background-color: #92c396;
2330         border-color: #92c396;
2331 }
2332 .button:visited {
2333         color: #92c396;
2334 }
2335 button:hover,
2336 .button:hover {
2337         color: #79a97e;
2338         text-decoration: none;
2339 }
2340 button:active,
2341 .button:active {
2342         transform: scale(0.9);
2343 }
2344 button:focus:not(:hover),
2345 .button:focus:not(:hover) {
2346         transform: none;
2347 }
2348 @-moz-document url-prefix() {
2349         .button:active {
2350                 transform: none;
2351         }
2352 }
2353
2354 /*==========*/
2355 /* HEADINGS */
2356 /*==========*/
2357
2358 .body-text h1,
2359 .body-text h2,
2360 .body-text h3,
2361 .body-text h4,
2362 .body-text h5,
2363 .body-text h6 {
2364         font-family: <?php echo $headings_font; ?>;
2365         font-weight: 300;
2366 }
2367 .body-text h1 {
2368         margin-top: 1.25em;
2369         box-shadow:
2370                 0 -7px 0 0 #fff inset,
2371                 0 -8px 0 0 #eee inset;
2372 }
2373 .body-text h6 {
2374         color: #555;
2375 }
2376
2377 /*========*/
2378 /* QUOTES */
2379 /*========*/
2380
2381 blockquote {
2382         border-left: 5px solid #e6e6e6;
2383 }
2384
2385 /*========*/
2386 /* IMAGES */
2387 /*========*/
2388
2389 #content img,
2390 #content figure.image img {
2391         border: 1px solid #ccc;
2392 }
2393 #content figure img {
2394         border: 1px solid #000;
2395 }
2396 #content img[src$='.svg'],
2397 #content figure img[src$='.svg'] {
2398         border: none;
2399 }
2400 #content img[style^='float'] {
2401         border: 1px solid transparent;
2402 }
2403
2404 #images-overlay div::after {
2405         font-weight: 400;
2406         padding: 10px 12px 6px 12px;
2407 }
2408
2409 /*=============*/
2410 /* IMAGE FOCUS */
2411 /*=============*/
2412
2413 #image-focus-overlay {
2414         visibility: visible;
2415 }
2416
2417 #image-focus-overlay .caption p {
2418         margin: 1em 1.25em 0.875em 1.25em;
2419         font-weight: 400;
2420 }
2421
2422 /*======*/
2423 /* MISC */
2424 /*======*/
2425
2426 hr {
2427         margin: 1em 0;
2428 }
2429 hr::before {
2430         content: "• • •";
2431         letter-spacing: 7px;
2432         color: #aaa;
2433         text-align: center;
2434         display: block;
2435         font-size: 0.875em;
2436 }
2437
2438 code,
2439 pre {
2440         font-family: 'Source Code Pro', Inconsolata, monospace;
2441         font-size: 0.9375em;
2442         font-feature-settings: 'ss04';
2443 }
2444 code {
2445         background-color: #eee;
2446         padding: 0 5px 1px 5px;
2447         box-shadow: 0 0 0 1px #fff inset;
2448 }
2449
2450 input[type='text'],
2451 input[type='search'],
2452 input[type='password'] {
2453         border: 1px solid #999;
2454         color: #000;
2455         background-color: transparent;
2456         border-color: transparent;
2457         border-bottom-color: #eee;
2458         transition: border-color 0.15s ease;
2459 }
2460 input[type='text']:focus,
2461 input[type='search']:focus,
2462 input[type='password']:focus {
2463         border-bottom-color: #c4dbc4;
2464 }
2465
2466 select {
2467         color: #000;
2468 }
2469
2470 strong, b {
2471         font-weight: 600;
2472 }
2473
2474 /*============*/
2475 /* ABOUT PAGE */
2476 /*============*/
2477
2478 .about-page mark {
2479         background-color: #e6e6e6;
2480         text-decoration: none;
2481         box-shadow:
2482                 0 -1px 0 0 #000 inset,
2483                 0 -3px 1px -2px #000 inset;
2484         padding: 0 1px;
2485 }
2486
2487 #content.about-page .accesskey-table {
2488         font-family: <?php echo $UI_font; ?>;
2489         border-color: #ddd;
2490 }
2491
2492 #content.about-page img {
2493         border: 1px solid #000;
2494 }
2495
2496 /*========================*/
2497 /* QUALIFIED HYPERLINKING */
2498 /*========================*/
2499
2500 #content.no-nav-bars ~ #ui-elements-container #site-nav-ui-toggle {
2501         display: none;
2502 }
2503 #content.no-comments ~ #ui-elements-container #post-nav-ui-toggle {
2504         display: none;
2505 }
2506
2507 #aux-about-link a {
2508         color: #777;
2509 }
2510 #aux-about-link a:hover {
2511         opacity: 1.0;
2512         text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff;
2513 }
2514
2515 .qualified-linking label {
2516         color: #ccc;
2517         font-weight: 400;
2518 }
2519 .qualified-linking label:hover {
2520         color: #92c396;
2521 }
2522
2523 .qualified-linking-toolbar {
2524         border: 1px solid #ccc;
2525         background-color: #fff;
2526 }
2527 .qualified-linking-toolbar a {
2528         padding: 3px 6px 0 6px;
2529 }
2530 .qualified-linking-toolbar a,
2531 .qualified-linking-toolbar a:visited {
2532         color: #acd2af;
2533 }
2534 .qualified-linking-toolbar a:hover {
2535         color: #92c396;
2536         text-decoration: none;
2537         background-color: #e4f1e5;
2538 }
2539 .qualified-linking label::after {
2540         background-color: #fff;
2541         opacity: 0.8;
2542 }
2543
2544 /*======*/
2545 /* MATH */
2546 /*======*/
2547
2548 .mathjax-block-container::-webkit-scrollbar {
2549         height: 12px;
2550         background-color: #f6f6ff;
2551         border-radius: 6px;
2552         border: 1px solid #ddf;
2553 }
2554 .mathjax-block-container::-webkit-scrollbar-thumb {
2555         background-color: #dde;
2556         border-radius: 6px;
2557         border: 1px solid #cce;
2558 }
2559 .mathjax-inline-container::-webkit-scrollbar {
2560         height: 8px;
2561         background-color: #f6f6ff;
2562         border-radius: 4px;
2563         border: 1px solid #ddf;
2564 }
2565 .mathjax-inline-container::-webkit-scrollbar-thumb {
2566         background-color: #dde;
2567         border-radius: 4px;
2568         border: 1px solid #cce;
2569 }
2570
2571 /*=================*/
2572 /* ALIGNMENT FORUM */
2573 /*=================*/
2574
2575 #content.alignment-forum-index-page::after {
2576         margin: -0.25em 0 0.25em 0;
2577         text-align: center;
2578         grid-column: 2;
2579         font-family: "Concourse SmallCaps";
2580         font-weight: 600;
2581         background-color: #7f85b2;
2582         color: transparent;
2583         -webkit-background-clip: text;
2584         text-shadow:
2585                 rgba(255,255,255,0.5) 0px 3px 3px;
2586 }
2587
2588 /*====================*/
2589 /* FOR NARROW SCREENS */
2590 /*====================*/
2591
2592 @media not screen and (hover: none) {
2593         @media only screen and (max-width: 1080px) {
2594                 #site-nav-ui-toggle button.engaged {
2595                         left: -72px;
2596                 }
2597                 #text-size-adjustment-ui {
2598                         left: -22px;
2599                         top: calc(100% - 240px);
2600                 }
2601                 #width-selector {
2602                         left: -23px;
2603                         top: calc(100% - 140px);
2604                 }
2605                 #theme-tweaker-toggle button {
2606                         width: unset;
2607                         height: unset;
2608                 }
2609         }
2610         @media only screen and (max-width: 1020px) {
2611         }
2612         @media only screen and (max-width: 1000px) {
2613                 #site-nav-ui-toggle button.engaged {
2614                         left: -56px;
2615                 }
2616                 #theme-selector {
2617                         padding: 0;
2618                 }
2619                 #theme-selector button {
2620                         margin: 1px 7px 0 7px;
2621                 }
2622         }
2623 }
2624
2625 /*========*/
2626 /* MOBILE */
2627 /*========*/
2628
2629 /*******************************************************/
2630 @media not screen and (hover:hover) and (pointer:fine) {
2631 /*******************************************************/
2632         #site-nav-ui-toggle {
2633                 top: 10px;
2634                 left: 10px;
2635         }
2636         #site-nav-ui-toggle button.engaged {
2637                 width: 1.125em;
2638                 overflow: hidden;
2639                 position: relative;
2640                 left: 5px;
2641                 top: -3px;
2642         }
2643         #site-nav-ui-toggle button.engaged::before {
2644                 content: "\F00D";
2645                 font-size: 34px;
2646                 padding: 0 0.25em 0 0;
2647         }
2648         #ui-elements-container > #site-nav-ui-toggle button.engaged {
2649                 transform: rotate(90deg);
2650         }
2651
2652         #ui-elements-container > div[id$='-ui-toggle'] button,
2653         #theme-selector .theme-selector-close-button  {
2654                 color: #bbb;
2655                 text-shadow:
2656                         0 0 1px #fff,
2657                         0 0 3px #fff,
2658                         0 0 5px #fff,
2659                         0 0 10px #fff,
2660                         0 0 20px #fff,
2661                         0 0 30px #fff;
2662         }
2663         #ui-elements-container > div[id$='-ui-toggle'] button {
2664                 font-weight: 400;
2665         }
2666         #theme-selector .theme-selector-close-button {
2667                 font-weight: 300;
2668         }
2669
2670         #theme-selector {
2671                 background-color: #fff;
2672                 box-shadow:
2673                         0 0 0 1px #999,
2674                         0 0 1px 3px #fff,
2675                         0 0 3px 3px #fff,
2676                         0 0 5px 3px #fff,
2677                         0 0 10px 3px #fff,
2678                         0 0 20px 3px #fff;
2679                 border-radius: 12px;
2680         }
2681         #theme-selector::before {
2682                 color: #999;
2683                 font-weight: 300;
2684                 position: relative;
2685                 top: 6px;
2686         }
2687         #theme-selector button,
2688         #theme-selector button.selected {
2689                 background-color: #fff;
2690                 border-radius: 10px;
2691                 box-shadow:
2692                         0 0 0 4px #fff inset,
2693                         0 0 0 5px #999 inset;
2694         }
2695         #theme-selector button.selected {
2696                 background-color: #c4dbc4;
2697         }
2698         #theme-selector button::after {
2699                 color: #819681;
2700                 font-weight: 300;
2701                 max-width: calc(100% - 3.5em);
2702                 overflow: hidden;
2703                 text-overflow: ellipsis;
2704                 padding: 1px 0 0 0;
2705         }
2706         #theme-selector button.selected::after {
2707                 color: #fff;
2708         }
2709
2710         #theme-tweaker-toggle button {
2711                 color: #999;
2712                 font-weight: 400;
2713         }
2714
2715         #quick-nav-ui {
2716                 background-color: #fff;
2717         }
2718         #quick-nav-ui,
2719         #new-comment-nav-ui,
2720         #hns-date-picker {
2721                 box-shadow:
2722                         0 0 1px 3px #fff,
2723                         0 0 3px 3px #fff,
2724                         0 0 5px 3px #fff,
2725                         0 0 10px 3px #fff,
2726                         0 0 20px 3px #fff;
2727         }
2728         #quick-nav-ui a::after,
2729         #new-comment-nav-ui::before {
2730                 font-family: <?php echo $UI_font; ?>;
2731                 font-weight: bold;
2732                 box-shadow:
2733                         0 0 1px 0 #fff,
2734                         0 0 3px 0 #fff,
2735                         0 0 5px 0 #fff;
2736                 background-color: #fff;
2737                 border-radius: 4px;
2738         }
2739         #quick-nav-ui,
2740         #new-comment-nav-ui {
2741                 border-radius: 8px;
2742         }
2743         #new-comment-nav-ui {
2744                 background-color: #fff;
2745                 border: 1px solid #fff;
2746         }
2747         #new-comment-nav-ui::before {
2748                 color: #aaa;
2749                 font-weight: 500;
2750         }
2751         #new-comment-nav-ui .new-comment-sequential-nav-button {
2752                 color: #79a97e;
2753         }
2754         #new-comment-nav-ui .new-comments-count {
2755                 background-color: inherit;
2756                 top: 0;
2757         }
2758         #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
2759                 color: #e6e6e6;
2760         }
2761         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
2762                 border-radius: 7px 0 0 7px;
2763         }
2764         #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
2765                 border-radius: 0 7px 7px 0;
2766         }
2767         #new-comment-nav-ui button::after {
2768                 font-family: <?php echo $UI_font; ?>;
2769         }
2770         #hns-date-picker {
2771                 background-color: #fff;
2772                 border: 1px solid #fff;
2773         }
2774
2775         #top-nav-bar {
2776                 padding: 1.25em 0 0.25em 0;
2777                 font-size: 1.625rem;
2778                 margin: 0;
2779                 grid-row: 2;
2780                 grid-column: 2;
2781         }
2782         #top-nav-bar .page-number {
2783                 line-height: 1.7;
2784         }
2785         #top-nav-bar .page-number span {
2786                 display: block;
2787         }
2788         #top-nav-bar a.disabled {
2789                 opacity: 0.2;
2790         }
2791
2792         /*****************************************/
2793         @media only screen and (max-width: 900px) {
2794         /*****************************************/
2795                 #theme-less-mobile-first-row-placeholder {
2796                         grid-row: 1;
2797                         grid-column: 2 / span 2;
2798                         height: 50px;
2799                 }
2800
2801                 #primary-bar,
2802                 #secondary-bar {
2803                         position: static;
2804                         width: 0;
2805                         height: 0;
2806                 }
2807
2808                 #primary-bar {
2809                         position: fixed;
2810                         left: 0;
2811                         margin: 0;
2812                         padding: 5px 0 5px 0;
2813                         height: unset;
2814                         background-color: #fff;
2815                         border-bottom: 1px solid #ddd;
2816                         box-shadow: 0 0 0 1px #fff;
2817                         z-index: 2;
2818                         visibility: hidden;
2819                         transition:
2820                                 visibility 0.2s ease,
2821                                 width 0.2s ease,
2822                                 opacity 0.2s ease,
2823                                 filter 0.2s ease;
2824                 }
2825                 #primary-bar.engaged {
2826                         width: 100%;
2827                         visibility: visible;
2828                         padding: 5px 4px 75px 60px;
2829                 }
2830                 #secondary-bar #nav-item-archive,
2831                 #secondary-bar #nav-item-sequences,
2832                 #secondary-bar #nav-item-about {
2833                         opacity: 0.0;
2834                         transition:
2835                                 opacity 0.3s ease,
2836                                 filter 0.2s ease;
2837                 }
2838                 #secondary-bar.engaged #nav-item-archive,
2839                 #secondary-bar.engaged #nav-item-sequences,
2840                 #secondary-bar.engaged #nav-item-about {
2841                         opacity: 1.0;
2842                         position: fixed;
2843                         top: 80px;
2844                         z-index: 3;
2845                         width: 64px;
2846                 }
2847                 #secondary-bar.engaged #nav-item-archive {
2848                         left: 8px;
2849                 }
2850                 #secondary-bar.engaged #nav-item-sequences {
2851                         left: 72px;
2852                 }
2853                 #secondary-bar.engaged #nav-item-about {
2854                         left: 136px;
2855                 }
2856
2857                 #primary-bar.engaged.translucent-on-scroll,
2858                 #secondary-bar.engaged.translucent-on-scroll #nav-item-archive,
2859                 #secondary-bar.engaged.translucent-on-scroll #nav-item-sequences,
2860                 #secondary-bar.engaged.translucent-on-scroll #nav-item-about,
2861                 .page-toolbar.engaged.translucent-on-scroll {
2862                         opacity: 0.6;
2863                         filter: blur(2px);
2864                         pointer-events: none;
2865                 }
2866
2867                 .page-toolbar {
2868                         position: fixed;
2869                         height: unset;
2870                         width: unset;
2871                         z-index: 4;
2872                         right: 100%;
2873                         top: 80px;
2874                         transition:
2875                                 right 0.2s ease,
2876                                 opacity 0.2s ease,
2877                                 filter 0.2s ease;
2878                 }
2879                 .page-toolbar.engaged {
2880                         right: 0;
2881                 }
2882                 .page-toolbar,
2883                 #content:not(.user-page) .page-toolbar {
2884                         display: flex;
2885                         flex-flow: row;
2886                         justify-content: flex-end;
2887                         padding: 0 8px 0 0;
2888                 }
2889                 .page-toolbar > * {
2890                         right: unset;
2891                         line-height: 1.15;
2892                         padding: 6px 0;
2893                         margin: 0;
2894                 }
2895                 .page-toolbar > form,
2896                 .page-toolbar > .button {
2897                         text-align: center;
2898                         flex-basis: 25%;
2899                         margin-left: 1.5em;
2900                 }
2901                 .page-toolbar .button {
2902                         text-transform: uppercase;
2903                         font-size: 0.625rem;
2904                 }
2905                 .page-toolbar .button::before,
2906                 #content.user-page .page-toolbar .button::before,
2907                 .page-toolbar form::before,
2908                 #content.user-page .page-toolbar form::before {
2909                         font-size: 1.375rem;
2910                         display: block;
2911                         padding: 2px;
2912                         font-size: 1.375rem;
2913                         display: block;
2914                 }
2915                 .page-toolbar .rss {
2916                         white-space: nowrap;
2917                         position: fixed;
2918                         top: 143px;
2919                         left: -60px;
2920                         padding: 6px 10px 5px 10px;
2921                         visibility: hidden;
2922                         background-color: #fff;
2923                         border-style: solid;
2924                         border-color: #ddd;
2925                         border-width: 0 1px 1px 0;
2926                         box-shadow:
2927                                 0 1px 0 0 #fff,
2928                                 1px 1px 0 0 #fff;
2929                         transition: left 0.2s ease;
2930                 }
2931                 .page-toolbar .rss,
2932                 #content.user-page .page-toolbar .rss {
2933                         margin: 0;
2934                 }
2935                 .page-toolbar.engaged .rss {
2936                         visibility: visible;
2937                         left: 0;
2938                 }
2939
2940                 #primary-bar .nav-inner {
2941                         font-size: 1.375em;
2942                 }
2943                 #secondary-bar .nav-inner {
2944                         font-size: 1.125em;
2945                 }
2946                 #secondary-bar .nav-item:not(#nav-item-search) .nav-inner {
2947                         padding: 6px 10px;
2948                 }
2949
2950                 #nav-item-search {
2951                         max-width: calc(100% - 180px);
2952                         top: 4px;
2953                         left: 68px;
2954                 }
2955                 #nav-item-search input {
2956                         width: calc(100% - 32px);
2957                 }
2958                 #nav-item-search button {
2959                         position: relative;
2960                         bottom: 5px;
2961                         visibility: visible;
2962                         height: 32px;
2963                         width: 40px;
2964                         padding: 9px 15px 3px 5px;
2965                 }
2966                 #nav-item-search form:not(:focus-within) button:not(:hover) {
2967                         color: transparent;
2968                 }
2969                 #nav-item-search button::before {
2970                         color: #ddd;
2971                 }
2972
2973                 #nav-item-login {
2974                         top: 16px;
2975                         right: 8px;
2976                 }
2977                 #nav-item-login .nav-inner {
2978                         text-transform: none;
2979                         font-size: 1.75em;
2980                 }
2981                 #nav-item-login .nav-inner::before {
2982                         display: none;
2983                 }
2984                 #inbox-indicator::before {
2985                         font-size: 1.75em;
2986                         left: 2px;
2987                 }
2988
2989                 #bottom-bar .nav-inner {
2990                         padding: 1rem 0 1.25rem 0;
2991                 }
2992                 #bottom-bar .nav-inner::after {
2993                         position: absolute;
2994                 }
2995
2996                 #content.search-results-page #comments-list-mode-selector {
2997                         grid-column: 3;
2998                         grid-row: 2;
2999                         justify-self: end;
3000                 }
3001
3002                 #content,
3003                 #content.comment-thread-page {
3004                         padding: 0 4px;
3005                 }
3006
3007                 h1.listing + .post-meta > * {
3008                         line-height: 1.5;
3009                 }
3010                 h1.listing + .post-meta .post-section {
3011                         overflow: visible;
3012                         order: 1;
3013                         width: unset;
3014                 }
3015                 h1.listing + .post-meta .post-section::before {
3016                         position: unset;
3017                 }
3018
3019                 .archive-nav *[class^='archive-nav-item-'] {
3020                         border-width: 1px !important;
3021                 }
3022                 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
3023                         background-color: #aaa;
3024                 }
3025
3026                 .post {
3027                         padding: 0;
3028                 }
3029                 .post .top-post-meta .author {
3030                         margin: 1em auto 0 auto;
3031                 }
3032                 .post .top-post-meta .date,
3033                 .post .top-post-meta .comment-count {
3034                         position: static;
3035                 }
3036                 .post .top-post-meta .date {
3037                         margin: 1.5em auto 0 auto;
3038                 }
3039                 .post .top-post-meta .comment-count span {
3040                         display: initial;
3041                         position: static;
3042                 }
3043                 h1.post-title {
3044                         line-height: 1.3;
3045                 }
3046
3047                 .comments {
3048                         padding: 0;
3049                 }
3050                 .comment-item .comment-item {
3051                         margin: 0.75em 3px 3px 6px;
3052                 }
3053                 .comment-item .comment-item + .comment-item {
3054                         margin: 1.5em 3px 3px 6px;
3055                 }
3056
3057                 .comment-controls {
3058                         position: relative;
3059                 }
3060                 .comment-controls .cancel-comment-button,
3061                 .comments > .comment-controls .cancel-comment-button {
3062                         right: 4px;
3063                 }
3064
3065                 .sublevel-nav:not(.sort) .sublevel-item,
3066                 .sublevel-nav:not(.sort) .sublevel-item:first-child,
3067                 .sublevel-nav:not(.sort) .sublevel-item:last-child {
3068                         border-radius: 8px;
3069                         border-width: 1px;
3070                         margin: 2px;
3071                 }
3072
3073                 #content.user-page #theme-less-mobile-first-row-placeholder {
3074                         height: 60px;
3075                 }
3076                 #content.user-page h1.page-main-heading,
3077                 #content.user-page .user-stats {
3078                         grid-row: 2;
3079                 }
3080                 #content.user-page h1.page-main-heading {
3081                         margin: 0.5em 0 0 0.125em;
3082                 }
3083                 #content.user-page #comments-list-mode-selector,
3084                 #content.user-page .sublevel-nav.sort {
3085                         grid-row: 3 / span 2;
3086                 }
3087                 #content.user-page .sublevel-nav {
3088                         grid-row: 3;
3089                         margin-bottom: 1em;
3090                 }
3091                 #content.user-page #top-nav-bar {
3092                         grid-row: 4;
3093                         margin: 0.5em 0 0 0;
3094                 }
3095
3096                 #content.conversation-page #theme-less-mobile-first-row-placeholder {
3097                         height: 64px;
3098                 }
3099                 #content.conversation-page #comments-list-mode-selector {
3100                         grid-row: 6;
3101                         margin-top: -32px;
3102                 }
3103                 #content.conversation-page .conversation-participants {
3104                         grid-row: 4;
3105                         align-self: end;
3106                 }
3107         /*******************************************/
3108         } @media only screen and (max-width: 720px) {
3109         /*******************************************/
3110                 #content.index-page > .sublevel-nav.sort {
3111                         flex-flow: column;
3112                         margin-right: 4px;
3113                 }
3114         /*******************************************/
3115         } @media only screen and (max-width: 520px) {
3116         /*******************************************/
3117                 h1.listing,
3118                 #content.search-results-page h1.listing {
3119                         font-size: 1.25rem;
3120                         margin: 18px 6px 4px 6px;
3121                         max-width: calc(100% - 12px);
3122                 }
3123                 h1.listing + .post-meta {
3124                         margin: 4px 6px;
3125                 }
3126                 #content.conversations-user-page h1.listing::after {
3127                         height: calc(100% + 2.25em);
3128                 }
3129                 #content.conversations-user-page h1.listing + .post-meta .date {
3130                         margin: 0 0 0 1em;
3131                 }
3132
3133                 .comment-body {
3134                         font-size: 1.125rem;
3135                 }
3136
3137                 #content.compact > .comment-thread .comment-item {
3138                         max-height: 105px;
3139                 }
3140
3141                 .textarea-container:focus-within textarea {
3142                         background-color: #fff;
3143                         border-width: 1px;
3144                         box-shadow: 0 0 0 2px #fff;
3145                 }
3146                 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
3147                         padding: 5px 6px 6px 6px;
3148                         font-weight: bold;
3149                 }
3150                 .textarea-container:focus-within .guiedit-mobile-help-button.active {
3151                         color: #c00;
3152                 }
3153                 .textarea-container:focus-within .guiedit-buttons-container {
3154                         background-color: #fff;
3155                         border-top: 1px solid #ddf;
3156                 }
3157                 .posting-controls .textarea-container:focus-within .guiedit-buttons-container {
3158                         box-shadow: none;
3159                 }
3160                 #content.conversation-page .textarea-container:focus-within::after {
3161                         background-color: #fff;
3162                 }
3163                 #markdown-hints::after {
3164                         color: #090;
3165                 }
3166
3167                 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
3168                         top: 2px;
3169                         font-weight: 400;
3170                 }
3171                 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
3172                         top: 1px;
3173                 }
3174         }
3175 }
3176