www/theme-less.css.php

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