www/theme-less.css.php

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