www/theme-classic.css.php

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