Further edit-post-form layout fixing, VII
[lw2-viewer.git] / www / theme-ultramodern.css.php
blob57f8986225270d1071ebc5d08bde68bf76d1c1c8
1 <?php
2 $UI_font = "'Proxima Nova'";
3 $text_font = "'Raleway', 'Helvetica', 'Arial', 'Verdana', sans-serif;";
4 $hyperlink_color = "#f60";
5 $white_glow = "0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff";
6 ?>
8 /*********************/
9 /* ULTRAMODERN THEME */
10 /*********************/
12 body {
13 color: #444;
14 background-color: #888;
15 font-family: <?php echo $UI_font; ?>;
16 font-weight: 300;
18 #content {
19 line-height: 1.55;
22 /*=========*/
23 /* NAV BAR */
24 /*=========*/
26 .active-bar {
27 border: 1px solid transparent;
28 border-bottom-color: #666;
29 box-shadow:
30 0 1.5px 1.5px -1.5px #bbb,
31 0 1px 1px -1px #777;
32 margin: 0 -30px 0 -2px;
35 .nav-inner {
36 font-weight: normal;
37 font-size: 1.1875em;
38 padding: 11px 30px 13px 30px;
40 .nav-current .nav-inner {
41 font-weight: 300;
42 color: #ccc;
44 #secondary-bar .nav-inner {
45 font-size: 0.875rem;
47 #secondary-bar .nav-item:not(#nav-item-search) .nav-inner {
48 padding: 5px 0 3px 0;
51 #bottom-bar.decorative::before,
52 #bottom-bar.decorative::after {
53 content: "GW";
54 display: block;
55 text-align: center;
56 padding: 0.25em 0 1em 0;
58 #bottom-bar.decorative::before {
59 width: 100%;
60 color: transparent;
61 background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/one_pixel_DDD.gif")) ?>');
62 background-repeat: repeat-x;
63 background-position: center 35%;
64 margin: 0 30px;
65 filter: brightness(50%) opacity(0.6);
67 #bottom-bar.decorative::after {
68 color: #777;
69 position: absolute;
70 left: 0;
71 right: 0;
72 margin: auto;
73 background-color: #888;
74 padding-right: 4px;
75 padding-left: 4px;
77 <?php fit_content("#bottom-bar.decorative::after"); ?>
79 .nav-bar a:link,
80 .nav-bar a:visited {
81 color: #444;
82 font-weight: 300;
84 .nav-bar a:hover,
85 .nav-bar a:focus {
86 text-decoration: underline;
89 /* Accesskey hints */
91 .nav-inner::after {
92 display: block;
93 position: absolute;
94 left: 5px;
95 top: -2px;
96 font-weight: 400;
97 font-size: 0.7em;
98 color: #7c7c7c;
100 .inactive-bar .nav-inner::after {
101 color: #777;
102 top: 0;
104 .nav-inner:hover::after {
105 color: #666;
108 /* Search tab */
110 #nav-item-search form::before {
111 opacity: 0.4;
112 font-size: 0.9375rem;
114 #nav-item-search button {
115 border: none;
116 font-weight: 300;
118 #nav-item-search input::placeholder {
119 color: #f00;
120 font-weight: normal;
123 /* Inbox indicator */
125 #inbox-indicator {
126 top: 0;
129 /*= Top pagination UI =*/
131 #top-nav-bar a::before {
132 font-weight: 300;
135 /*= Bottom pagination UI =*/
137 #bottom-bar .nav-item a::before {
138 font-weight: 400;
141 /*= Pagination UI hover tooltips =*/
143 #top-nav-bar a::after,
144 #bottom-bar a::after {
145 color: #222;
148 /*==============*/
149 /* PAGE TOOLBAR */
150 /*==============*/
152 .page-toolbar > * {
153 color: #444;
154 font-weight: 300;
156 .new-post::before,
157 .logout-button::before {
158 opacity: 0.8;
160 .page-toolbar .button:hover {
161 text-decoration: none;
164 /*==============*/
165 /* SUBLEVEL NAV */
166 /*==============*/
168 .sublevel-nav .sublevel-item {
169 color: #444;
170 background-color: #888;
172 .sublevel-nav .sublevel-item:not(.selected):hover {
173 color: #000;
174 text-decoration: none;
176 .sublevel-nav .sublevel-item:hover,
177 .sublevel-nav .sublevel-item.selected {
178 background-color: #999;
180 .sublevel-nav .sublevel-item:not(.selected):active,
181 .sublevel-nav .sublevel-item.selected {
182 color: #fff;
185 .sublevel-nav:not(.sort) .sublevel-item {
186 border-style: solid;
187 border-color: #999;
188 border-width: 1px 0 1px 1px;
190 .sublevel-nav:not(.sort) .sublevel-item:first-child {
191 border-radius: 8px 0 0 8px;
193 .sublevel-nav:not(.sort) .sublevel-item:last-child {
194 border-width: 1px;
195 border-radius: 0 8px 8px 0;
198 /*=====================*/
199 /* SORT ORDER SELECTOR */
200 /*=====================*/
202 .sublevel-nav.sort .sublevel-item {
203 font-family: <?php echo $UI_font; ?>;
204 padding: 8px 8px 6px 8px;
205 text-transform: uppercase;
206 pointer-events: auto;
207 box-shadow: 1px 1px 0 0 #777 inset;
209 .sublevel-nav.sort {
210 border: 2px solid transparent;
211 padding: 18px 0 0 0;
212 border-radius: 8px;
213 pointer-events: none;
214 background-color: #999;
216 .sublevel-nav.sort::before {
217 text-transform: uppercase;
218 font-weight: 600;
219 color: #444;
220 z-index: 1;
222 .sublevel-nav.sort::after {
223 content: "";
224 position: absolute;
225 display: block;
226 top: 0;
227 left: 0;
228 width: 100%;
229 height: 100%;
230 border-radius: 6px;
231 box-shadow:
232 0 18px 0 0 #888 inset,
233 0 0 0 1px #777 inset,
234 0 18px 0 1px #777 inset,
235 0 0 0 2px #888;
238 /*================*/
239 /* WIDTH SELECTOR */
240 /*================*/
242 #width-selector button {
243 box-shadow:
244 0 0 0 4px #888 inset,
245 0 0 0 5px #ccc inset;
247 #width-selector button:hover,
248 #width-selector button.selected {
249 box-shadow:
250 0 0 0 1px #888 inset,
251 0 0 0 2px #ccc inset,
252 0 0 0 4px #888 inset,
253 0 0 0 5px #ccc inset;
255 #width-selector button::after {
256 color: #ccc;
257 font-weight: 300;
260 /*================*/
261 /* THEME SELECTOR */
262 /*================*/
264 #theme-selector button {
265 box-shadow:
266 0 0 0 5px #888 inset;
268 #theme-selector button:hover,
269 #theme-selector button.selected {
270 box-shadow:
271 0 0 0 2px #888 inset,
272 0 0 0 3px #ccc inset,
273 0 0 0 5px #888 inset;
276 #theme-selector button::before {
277 color: #aaa;
278 background-color: #888;
280 #theme-selector button:hover::before,
281 #theme-selector button.selected::before {
282 color: #ccc;
285 /*======================*/
286 /* THEME TWEAKER TOGGLE */
287 /*======================*/
289 #theme-tweaker-toggle button:hover {
290 text-decoration: none;
293 /*=================*/
294 /* QUICKNAV WIDGET */
295 /*=================*/
297 #quick-nav-ui a {
298 color: #666;
299 border-radius: 4px;
300 box-shadow: 0 0 0 1px #999;
301 text-decoration: none;
303 #quick-nav-ui a[href='#bottom-bar'] {
304 line-height: 1.8;
306 #quick-nav-ui a:active {
307 transform: scale(0.9);
309 #quick-nav-ui a[href='#comments'].no-comments {
310 opacity: 0.4;
311 color: #777;
313 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
314 #quick-nav-ui a:hover {
315 color: #444;
316 box-shadow: 0 0 0 1px #ccc;
318 #quick-nav-ui a:focus:not(:hover) {
319 transform: none;
320 text-shadow: none;
324 /*======================*/
325 /* NEW COMMENT QUICKNAV */
326 /*======================*/
328 #new-comment-nav-ui .new-comments-count {
329 font-weight: 600;
330 color: #666;
332 #new-comment-nav-ui .new-comments-count::after {
333 font-weight: 600;
334 color: #666;
336 #new-comment-nav-ui .new-comment-sequential-nav-button {
337 color: #bbb;
339 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
340 color: #929292;
342 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
343 #new-comment-nav-ui .new-comments-count:hover {
344 text-shadow:
345 0 0 1px #fff,
346 0 0 3px #fff,
347 0 0 5px #fff,
348 0 0 8px #fff,
349 0.5px 0.5px 0 #fff;
351 #new-comment-nav-ui .new-comment-sequential-nav-button:hover {
352 color: #444;
353 text-decoration: none;
355 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
356 color: #d00;
357 text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff;
361 /*=================*/
362 /* HNS DATE PICKER */
363 /*=================*/
365 #hns-date-picker span {
366 color: #666;
367 font-weight: 600;
369 #hns-date-picker input {
370 border: 1px solid #999;
371 background-color: transparent;
372 color: #666;
374 #hns-date-picker input:focus {
375 color: #000;
376 border: 1px solid #ccc;
379 /*======================*/
380 /* ANTI-KIBITZER TOGGLE */
381 /*======================*/
383 #anti-kibitzer-toggle button::before,
384 #anti-kibitzer-toggle button::after {
385 background-color: #222;
386 -webkit-background-clip: text;
387 color: transparent;
388 text-shadow: rgba(255,255,255,0.4) 0px 1px 1px;
390 #anti-kibitzer-toggle button:hover::before,
391 #anti-kibitzer-toggle button:hover::after {
392 background-color: #000;
395 /*======================*/
396 /* TEXT SIZE ADJUSTMENT */
397 /*======================*/
399 #text-size-adjustment-ui button {
400 color: #444;
402 #text-size-adjustment-ui button.default {
403 font-weight: 600;
405 #text-size-adjustment-ui button:hover {
406 text-decoration: none;
407 color: #aaa;
409 #text-size-adjustment-ui::after {
410 color: #ccc;
411 font-weight: 300;
414 /*=============================*/
415 /* COMMENTS VIEW MODE SELECTOR */
416 /*=============================*/
418 #comments-view-mode-selector a {
419 color: #ccc;
422 /*==========*/
423 /* ARCHIVES */
424 /*==========*/
426 .archive-nav {
427 border: 1px solid #ccc;
429 .archive-nav div[class^='archive-nav-']:nth-of-type(2) *[class^='archive-nav-item'] {
430 border-top-width: 0;
431 border-bottom-width: 0;
433 .archive-nav div[class^='archive-nav-']:last-of-type *[class^='archive-nav-item'] {
434 border-bottom-width: 1px;
436 .archive-nav *[class^='archive-nav-item']:last-child {
437 border-right-width: 1px;
439 .archive-nav span[class^='archive-nav-item'] {
440 font-weight: bold;
443 .archive-nav span[class^="archive-nav-item"],
444 .archive-nav a:hover {
445 color: #ffb359;
446 box-shadow:
447 0 0 0 3px #888 inset,
448 0 0 0 4px #ccc inset,
449 0 0 0 5px #888 inset;
450 text-decoration: none;
452 .archive-nav span[class^="archive-nav-item"] {
453 font-weight: normal;
454 box-shadow:
455 0 0 0 1px #ccc inset,
456 0 0 0 3px #888 inset,
457 0 0 0 4px #ccc inset,
458 0 0 0 5px #888 inset;
460 .archive-nav a:active {
461 transform: scale(0.9);
463 .archive-nav a:focus:not(:hover) {
464 transform: none;
467 /*==========*/
468 /* LISTINGS */
469 /*==========*/
471 h1.listing {
472 margin: 0.7em 20px 0.1em 20px;
473 max-width: calc(100% - 40px);
474 font-family: <?php echo $UI_font; ?>, 'Font Awesome';
475 font-size: 1.5rem;
477 h1.listing a[href^='/posts'] {
478 font-family: <?php echo $text_font; ?>;
479 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '100' : '200'); ?>;
480 text-shadow:
481 0px 0px 1px #777,
482 0.5px 0.5px 1px #aaa,
483 0.5px 0.5px 1px #bbb;
485 h1.listing a[href^="http"] {
486 color: #aaa;
489 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
490 h1.listing a:hover,
491 h1.listing a:focus {
492 background-color: rgba(136,136,136,0.85);
493 color: #f60;
494 text-shadow:
495 0px 0px 1px #777,
496 0.5px 0.5px 1px #aaa,
497 0.5px 0.5px 1px #bbb,
498 0 0 1px #f60,
499 0 0 2px #f60,
500 0 0 3px #f60;
502 h1.listing:focus-within::before {
503 color: #f60;
504 left: -0.625em;
505 top: 1px;
507 h1.listing a[href^="http"]:hover {
508 color: #4879ec;
509 text-shadow:
510 0.5px 0.5px 0 #fff,
511 -0.5px -0.5px 0 #fff,
512 0 0 2px #fff,
513 0 0 3px #00c;
517 h1.listing .edit-post-link {
518 padding: 10px 3px 30px 0.5em;
519 top: 0;
520 right: -1.5em;
522 h1.listing .edit-post-link:hover {
523 text-decoration: none;
525 #content.user-page h1.listing .edit-post-link {
526 background-color: #888;
529 /*======*/
530 /* SPAM */
531 /*======*/
533 h1.listing.spam {
534 opacity: 0.35;
536 h1.listing.spam + .post-meta {
537 opacity: 0.3;
539 h1.listing.spam:hover,
540 h1.listing.spam + .post-meta:hover,
541 h1.listing.spam:hover + .post-meta {
542 opacity: 1.0;
545 /*===================*/
546 /* LISTING POST-META */
547 /*===================*/
549 h1.listing + .post-meta > * {
550 color: #222;
551 font-size: 1em;
553 h1.listing + .post-meta .karma::after {
554 content: " by";
556 h1.listing + .post-meta .date::before {
557 content: "on ";
559 h1.listing + .post-meta .date::after {
560 content: " — ";
561 opacity: 0.5;
562 margin: 0 0.5em 0 0.125em;
564 h1.listing + .post-meta .comment-count.new-comments::before {
565 color: #0f0;
567 h1.listing:last-of-type + .post-meta {
568 margin-bottom: 0;
570 h1.listing + .post-meta .karma {
571 order: -1;
572 margin-right: 0.25em;
574 h1.listing + .post-meta .author {
575 margin-right: 0.25em;
577 h1.listing + .post-meta .date {
578 margin: 0;
580 h1.listing + .post-meta .post-section {
581 overflow: visible;
582 order: 2;
584 h1.listing + .post-meta .post-section::before {
585 font-size: 0.9375em;
586 left: -32px;
588 h1.listing + .post-meta .link-post-domain {
589 order: 1;
592 /*============*/
593 /* USER PAGES */
594 /*============*/
596 #content.user-page h1.page-main-heading {
597 border-bottom: 1px solid #777;
600 #content.user-page h1.listing,
601 #content.user-page h1.listing + .post-meta {
602 border-style: solid;
603 border-color: #666;
604 border-width: 0 0 0 1px;
605 box-shadow:
606 1.5px 0 1.5px -1.5px #bbb inset,
607 1px 0 1px -1px #777 inset;
609 #content.user-page h1.listing {
610 max-width: 100%;
611 margin: 1rem 0 0 0;
612 padding: 6px;
614 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
615 #content.user-page h1.listing:focus-within::before {
616 left: -0.625em;
617 top: 8px;
620 #content.user-page h1.listing + .post-meta {
621 margin: 0 0 1rem 0;
622 padding: 0.5em 6px 6px 34px;
624 #content.user-page h1.listing + .post-meta .post-section::before {
625 left: 1px;
628 #content.conversations-user-page h1.listing {
629 padding: 6px 6px 4px 8px;
630 font-size: 1.5rem;
632 #content.conversations-user-page h1.listing + .post-meta {
633 padding: 6px 4px;
634 margin: 0 0 0.25rem 0;
636 #content.conversations-user-page h1.listing + .post-meta .date::after {
637 display: none;
640 .user-stats .karma-total {
641 font-weight: bold;
644 /*===============*/
645 /* CONVERSATIONS */
646 /*===============*/
648 #content.conversation-page h1.page-main-heading {
649 font-family: <?php echo $text_font; ?>;
650 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '100' : '200'); ?>;
651 color: #000;
652 text-shadow:
653 0px 0px 1px #777,
654 0.5px 0.5px 1px #aaa,
655 0.5px 0.5px 1px #bbb;
658 /*============*/
659 /* LOGIN PAGE */
660 /*============*/
662 .login-container h1 {
663 font-weight: 300;
666 /* “Create account” form */
668 #signup-form {
669 border: 1px solid #aaa;
672 /* Log in tip */
674 .login-container .login-tip {
675 border: 1px solid transparent;
678 /* Message box */
680 .error-box {
681 border: 1px solid red;
682 background-color: #faa;
684 .success-box {
685 border: 1px solid green;
686 background-color: #afa;
689 /*=====================*/
690 /* PASSWORD RESET PAGE */
691 /*=====================*/
693 .reset-password-container input[type='submit'] {
694 background-color: #e4e4e4;
695 border: 1px solid #ccc;
696 font-weight: 600;
699 /*===================*/
700 /* TABLE OF CONTENTS */
701 /*===================*/
703 .contents {
704 background-color: #888;
706 .contents-head {
707 font-weight: 300;
709 .post-body .contents ul {
710 font-size: 0.85em;
712 .post-body .contents li::before {
713 color: #999;
714 font-feature-settings: "tnum";
717 /*==================*/
718 /* POSTS & COMMENTS */
719 /*==================*/
721 .post-body,
722 .comment-body {
723 font-family: <?php echo $text_font; ?>;
724 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '300' : '400'); ?>;
725 color: #000;
726 text-shadow:
727 0px 0px 1px #777,
728 0.5px 0.5px 1px #aaa,
729 0.5px 0.5px 1px #bbb;
731 .post-body strong,
732 .comment-body strong {
733 font-weight: 500;
736 .post-body a:link,
737 .comment-body a:link {
738 color: inherit;
739 text-shadow:
740 0px 0px 1px #bd5984,
741 0.5px 0.5px 1px #f68a84,
742 0.5px 0.5px 1px #ff9b8c;
744 .post-body a:visited,
745 .comment-body a:visited {
746 color: inherit;
747 text-shadow:
748 0px 0px 1px #a766dd,
749 0.5px 0.5px 1px #d9f,
750 0.5px 0.5px 1px #efa9ff;
752 .post-body a:hover,
753 .comment-body a:hover {
754 color: #f60;
755 text-shadow:
756 0px 0px 1px #bd5984,
757 0.5px 0.5px 1px #f68a84,
758 0.5px 0.5px 1px #ff9b8c,
759 0px 0px 5px #f60;
762 h1.post-title {
763 margin: 1.1em 0 0.25em 0;
764 font-family: <?php echo $text_font; ?>;
765 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '100' : '200'); ?>;
766 color: #000;
767 font-size: 3em;
768 text-shadow:
769 0px 0px 1px #777,
770 0.5px 0.5px 1px #aaa,
771 0.5px 0.5px 1px #bbb;
774 .post-body {
775 font-size: 1.1875rem;
776 line-height: 1.6;
778 @media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 191dpi) {
779 .post-body {
780 font-size: 1.125rem;
783 .comment-body {
784 font-size: 1.125rem;
787 /*===========*/
788 /* POST-META */
789 /*===========*/
791 .post-meta a,
792 .post-meta .date {
793 color: #444;
796 .post-meta > * {
797 margin: 0;
798 text-shadow:
799 0px 0px 1px #777,
800 0.5px 0.5px 1px #aaa,
801 0.5px 0.5px 1px #bbb;
803 .post-meta .comment-count span,
804 .post-meta .read-time span,
805 .post-meta .word-count span,
806 .post-meta .lw2-link span {
807 display: none;
809 .post-meta .comment-count::before,
810 .post-meta .read-time::before,
811 .post-meta .word-count::before,
812 .post-meta .lw2-link::before {
813 font-family: Font Awesome;
814 margin: 0 0.25em 0 0;
815 font-size: 0.875em;
816 color: #666;
818 .post-meta .comment-count {
819 margin: 0 0.25em 0 0;
821 .post-meta .read-time,
822 .post-meta .word-count,
823 .post-meta .lw2-link {
824 margin: 0 0.25em 0 0.5em;
826 .post-meta .comment-count:hover,
827 .post-meta .lw2-link:hover {
828 text-decoration: none;
829 text-shadow:
830 0 0 0.5px #000,
831 0 0 1px #fff,
832 0 0 8px #000;
834 .post-meta .comment-count:hover::before,
835 .post-meta .lw2-link:hover::before,
836 .post-meta .read-time:hover::before {
837 color: #ccc;
839 .post-meta .read-time:hover::before {
840 cursor: pointer;
842 .post-meta .comment-count::before {
843 content: "\F086";
845 .post-meta .read-time::before {
846 content: "\F017";
848 .post-meta .read-time::after {
849 content: " min";
851 .post-meta .word-count::before {
852 content: "\F15C";
854 .post-meta .word-count::after {
855 content: "";
857 .post-meta .lw2-link::before {
858 content: "\F0C1";
859 font-weight: 900;
860 font-size: 0.75em;
861 position: relative;
862 bottom: 1px;
865 .post .post-meta .author {
866 margin: 0 0.75em 0 0;
868 .post-meta .author:hover,
869 .comment-meta .author:hover {
870 text-decoration: none;
871 color: #090;
873 .post .post-meta .comment-count {
874 margin: 0 0.5em;
876 .post .post-meta .lw2-link {
877 margin: 0 1em 0 0.5em;
879 .post .post-meta .karma {
880 margin: 0 0.5em 0 1em;
883 .post-meta .post-section::before {
884 color: #888;
885 text-shadow:
886 1px 1px 0 #ccc,
887 0 1px 0 #ccc,
888 0 0 5px #ccc;
890 a.post-section:hover {
891 text-decoration: none;
893 a.post-section:hover::before {
894 color: #999;
896 .post-meta .post-section.alignment-forum::before {
897 text-shadow:
898 1px 1px 0 #b9bbff,
899 0 1px 0 #b9bbff,
900 0 0 5px #b9bbff;
902 a.post-section.alignment-forum:hover::before {
903 color: #9093d4;
906 /*============*/
907 /* LINK POSTS */
908 /*============*/
910 .post.link-post a.link-post-link {
911 text-decoration: none;
912 font-family: <?php echo $UI_font; ?>;
913 font-weight: 600;
915 .post.link-post a.link-post-link:hover {
916 color: #f60;
918 .post.link-post a.link-post-link:hover::before {
919 color: #4879ec;
920 text-shadow:
921 0.5px 0.5px 0 #fff,
922 -0.5px -0.5px 0 #fff,
923 0 0 2px #fff,
924 0 0 3px #00c;
926 .post.link-post a.link-post-link:focus {
927 color: #f60;
928 border-bottom: 2px dotted #f60;
929 text-shadow:
930 0px 0px 1px #777,
931 0.5px 0.5px 1px #aaa,
932 0.5px 0.5px 1px #bbb,
933 0 0 1px #f60,
934 0 0 2px #f60,
935 0 0 3px #f60;
938 /*==========*/
939 /* COMMENTS */
940 /*==========*/
942 #content > .comment-thread .comment-meta a.date:focus,
943 #content > .comment-thread .comment-meta a.permalink:focus {
944 color: #ccc;
945 outline: 2px dotted #ccc;
946 position: relative;
947 background-color: #444;
949 #content > .comment-thread .comment-meta a.date:focus {
950 padding: 0 6px;
951 left: -6px;
953 #content > .comment-thread .comment-meta a.date:focus + * {
954 margin-left: -12px;
956 #content > .comment-thread .comment-meta a.permalink:focus {
957 padding: 0 5px;
958 left: -5px;
960 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
961 margin-left: -10px;
963 .comment-item {
964 border: 1px solid transparent;
965 border-left-color: #666;
966 box-shadow:
967 1.5px 0 1.5px -1.5px #bbb inset,
968 1px 0 1px -1px #777 inset;
970 @-moz-document url-prefix() {
971 .comment-item {
972 box-shadow:
973 1.5px 0 1.5px -1px #bbb inset,
974 1px 0 1px -1px #777 inset;
978 <?php
979 function nested_stuff($segment, $tip, $last_tip, $nesting_levels) {
980 for ($i = $nesting_levels; $i > 0; $i--) {
981 for ($j = $i; $j > 0; $j--)
982 echo $segment;
983 echo $tip;
985 echo $last_tip;
987 $comment_nesting_depth = 10;
990 a.comment-parent-link::after {
991 display: none;
993 a.comment-parent-link::before {
994 padding: 2px 3px 0 4px;
997 /*================================*/
998 /* DEEP COMMENT THREAD COLLAPSING */
999 /*================================*/
1001 .comment-item input[id^="expand"] + label::after {
1002 color: <?php echo $hyperlink_color; ?>;
1003 font-weight: 600;
1005 .comment-item input[id^="expand"] + label:hover::after {
1006 color: #c00;
1008 .comment-item input[id^="expand"] + label:active::after,
1009 .comment-item input[id^="expand"] + label:focus::after{
1010 color: #c00;
1012 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
1013 border-width: 1px 0 0 0;
1016 /*==============*/
1017 /* COMMENT-META */
1018 /*==============*/
1020 .comment-meta a {
1021 color: #222;
1023 .comment-meta .author {
1024 font-weight: 300;
1025 font-size: 1.125em;
1026 color: #444;
1027 font-weight: normal;
1029 .comment-item .author:not(.redacted).original-poster::after {
1030 opacity: 0.8;
1033 .comment-item .karma.active-controls::after,
1034 .comment-item .karma .karma-value::after,
1035 .post .karma.active-controls::after,
1036 .post .karma .karma-value::after {
1037 background-color: #888;
1038 color: #ccc;
1039 border-radius: 4px;
1040 box-shadow: 0 0 0 1px #bbb inset;
1042 .comment-item .karma.active-controls::after,
1043 .post .karma.active-controls::after {
1044 padding: 6px;
1045 bottom: -46px;
1047 .comment-item .karma .karma-value::after,
1048 .post .karma .karma-value::after {
1049 padding: 2px 8px;
1050 top: -28px;
1051 min-width: 64px;
1054 /*====================*/
1055 /* ANTI-KIBITZER MODE */
1056 /*====================*/
1058 .author.redacted,
1059 .inline-author.redacted {
1060 opacity: 0.8;
1061 font-weight: 300;
1064 .karma-value.redacted {
1065 opacity: 0.6;
1068 .link-post-domain.redacted {
1069 opacity: 0.6;
1072 /*===========================*/
1073 /* COMMENT THREAD NAVIGATION */
1074 /*===========================*/
1076 div.comment-parent-link {
1077 font-weight: 400;
1079 a.comment-parent-link {
1080 font-weight: 300;
1082 a.comment-parent-link::before {
1083 color: #666;
1085 a.comment-parent-link:hover::before {
1086 color: #aaa;
1089 div.comment-child-links {
1090 font-weight: 400;
1092 div.comment-child-links a {
1093 font-weight: 300;
1095 .comment-child-link::before {
1096 color: #666;
1099 .comment-item-highlight {
1100 box-shadow:
1101 0 0 2px #e7b200,
1102 0 0 3px #e7b200,
1103 0 0 5px #e7b200,
1104 0 0 7px #e7b200,
1105 0 0 10px #e7b200;
1106 border: 1px solid #e7b200;
1108 .comment-item-highlight-faint {
1109 box-shadow:
1110 0 0 2px #f8e7b5,
1111 0 0 3px #f8e7b5,
1112 0 0 5px #f8e7b5,
1113 0 0 7px #f8e7b5,
1114 0 0 10px #f8e7b5;
1115 border: 1px solid #f8e7b5;
1118 .comment-popup {
1119 background-color: #949494;
1122 /*=======================*/
1123 /* COMMENTS COMPACT VIEW */
1124 /*=======================*/
1126 #comments-list-mode-selector button {
1127 box-shadow:
1128 0 0 0 4px #888 inset,
1129 0 0 0 5px #ccc inset;
1131 #comments-list-mode-selector button:hover,
1132 #comments-list-mode-selector button.selected {
1133 box-shadow:
1134 0 0 0 1px #888 inset,
1135 0 0 0 2px #ccc inset,
1136 0 0 0 4px #888 inset,
1137 0 0 0 5px #ccc inset;
1139 #content.compact > .comment-thread .comment-item::after {
1140 color: #ccc;
1141 background: linear-gradient(to right, transparent 0%, #888 50%, #888 100%);
1144 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
1145 #content.compact > .comment-thread .comment-item:hover .comment,
1146 #content.compact > .comment-thread .comment-item.expanded .comment {
1147 background-color: #999;
1148 outline: 3px solid #ccc;
1150 #content.compact > .comment-thread .comment-item:hover .comment::before,
1151 #content.compact > .comment-thread .comment-item.expanded .comment::before {
1152 background-color: #999;
1153 box-shadow:
1154 0 0 3px #999,
1155 0 0 5px #999,
1156 0 0 7px #999,
1157 0 0 10px #999,
1158 0 0 20px #999,
1159 0 0 30px #999,
1160 0 0 40px #999;
1163 @media only screen and (hover: none), only screen and (-moz-touch-enabled) {
1164 #content.compact > .comment-thread.expanded .comment-item .comment {
1165 background-color: #999;
1166 outline: 3px solid #ccc;
1168 #content.compact > .comment-thread.expanded .comment-item .comment::before {
1169 background-color: #999;
1170 box-shadow:
1171 0 0 3px #999,
1172 0 0 5px #999,
1173 0 0 7px #999,
1174 0 0 10px #999,
1175 0 0 20px #999,
1176 0 0 30px #999,
1177 0 0 40px #999;
1181 #content.user-page.compact > h1.listing {
1182 margin-top: 0.5rem;
1184 #content.user-page.compact > h1.listing + .post-meta {
1185 margin-bottom: 0.5rem;
1188 /*===========================*/
1189 /* HIGHLIGHTING NEW COMMENTS */
1190 /*===========================*/
1192 .new-comment::before {
1193 display: none;
1195 .new-comment {
1196 border: 1px solid #e00;
1197 box-shadow:
1198 0 0 1px #f00,
1199 0 0 1px #f00 inset;
1202 /*=================================*/
1203 /* COMMENT THREAD MINIMIZE BUTTONS */
1204 /*=================================*/
1206 .comment-minimize-button {
1207 color: #777;
1209 .comment-minimize-button:hover {
1210 color: #aaa;
1211 text-shadow: <?php echo $white_glow; ?>;
1213 .comment-minimize-button::after {
1214 font-family: <?php echo $UI_font; ?>;
1215 color: #777;
1217 .comment-minimize-button.maximized::after {
1218 color: #ccc;
1221 /*====================*/
1222 /* COMMENT PERMALINKS */
1223 /*====================*/
1224 /*==================*/
1225 /* COMMENT LW LINKS */
1226 /*==================*/
1228 .comment-meta .permalink::before,
1229 .comment-meta .lw2-link::before,
1230 .individual-thread-page a.comment-parent-link:empty::before {
1231 opacity: 1.0;
1232 filter: saturate(10%) contrast(20%);
1235 /*=================================*/
1236 /* INDIVIDUAL COMMENT THREAD PAGES */
1237 /*=================================*/
1239 .individual-thread-page > h1 {
1240 font-family: <?php echo $text_font; ?>;
1241 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '200' : '300'); ?>;
1244 /*==============*/
1245 /* VOTE BUTTONS */
1246 /*==============*/
1248 .upvote,
1249 .downvote {
1250 color: #666;
1251 position: relative;
1253 .vote::before {
1254 position: relative;
1255 z-index: 1;
1257 .upvote::before {
1258 content: "\F077";
1259 top: 1px;
1261 .downvote::before {
1262 content: "\F078";
1263 position: relative;
1264 left: -2px;
1266 .upvote:hover,
1267 .upvote.selected {
1268 text-shadow:
1269 0 0 0.5px #fff,
1270 0 0 8px #0f0;
1272 .downvote:hover,
1273 .downvote.selected {
1274 text-shadow:
1275 0 0 0.5px #fff,
1276 0 0 8px #f00;
1279 .vote::after {
1280 position: absolute;
1281 color: transparent;
1283 .vote:hover::after {
1284 color: #888;
1286 .vote:not(:hover)::after {
1287 text-shadow: none;
1289 .karma.waiting .vote.big-vote::after {
1290 color: #888;
1292 .vote.big-vote::after,
1293 .vote:not(.big-vote).clicked-twice::after {
1294 color: inherit;
1296 .karma:not(.waiting) .vote.clicked-once::after {
1297 color: #666;
1300 .upvote::after {
1301 content: "\F325";
1302 left: 7px;
1303 bottom: 4px;
1305 .downvote::after {
1306 content: "\F322";
1307 left: 5px;
1308 top: 4px;
1310 @-moz-document url-prefix() {
1311 .upvote::after {
1312 bottom: 3px;
1313 left: 8px;
1315 .downvote::after {
1316 top: 3px;
1317 left: 6px;
1321 /*===========================*/
1322 /* COMMENTING AND POSTING UI */
1323 /*===========================*/
1325 .comment-controls .cancel-comment-button {
1326 font-weight: normal;
1327 color: #f00;
1329 .comment-controls .cancel-comment-button:hover {
1330 color: #f00;
1331 text-shadow: <?php echo $white_glow; ?>;
1334 .posting-controls .action-button,
1335 .posting-controls input[type='submit'] {
1336 font-weight: normal;
1338 .posting-controls .action-button:hover,
1339 .posting-controls input[type='submit']:hover {
1340 text-decoration: underline;
1341 color: #444;
1344 .comment-controls .delete-button,
1345 .comment-controls .retract-button {
1346 color: #900;
1348 .comment-controls .edit-button,
1349 .comment-controls .unretract-button {
1350 color: #070;
1352 .comment-controls .action-button:hover {
1353 color: #bbb;
1354 text-decoration: none;
1357 .edit-post-link,
1358 .edit-post-link:visited {
1359 color: #090;
1362 .posting-controls textarea {
1363 font-weight: 300;
1364 font-family: <?php echo $text_font; ?>;
1365 color: #000;
1366 background-color: transparent;
1367 border-color: #999;
1368 text-shadow:
1369 0px 0px 1px #777,
1370 0.5px 0.5px 1px #aaa,
1371 0.5px 0.5px 1px #bbb;
1373 @-moz-document url-prefix() {
1374 .posting-controls textarea {
1375 font-weight: <?php global $platform; echo ($platform == 'Windows' ? '300' : '400'); ?>;
1378 .posting-controls textarea:focus {
1379 border-color: #ccc;
1382 /*= Scroll bars =*/
1384 .posting-controls textarea::-webkit-scrollbar {
1385 width: 16px;
1386 background-color: transparent;
1388 .posting-controls textarea::-webkit-scrollbar-track {
1389 border-left: 1px solid #999;
1391 .posting-controls textarea:focus::-webkit-scrollbar-track {
1392 border-left: 1px solid #999;
1394 .posting-controls textarea::-webkit-scrollbar-thumb {
1395 background-color: #999;
1396 box-shadow: 0 0 0 1px #888 inset;
1397 border-left: 1px solid #999;
1399 .posting-controls textarea:focus::-webkit-scrollbar-thumb {
1400 border-left: 1px solid #999;
1401 background-color: #ccc;
1402 box-shadow: 0 0 0 1px #888 inset;
1405 /* GUIEdit buttons */
1407 .guiedit-buttons-container {
1408 background-color: #888;
1409 box-shadow: 0 -1px 0 0 #999 inset;
1411 .textarea-container:focus-within .guiedit-buttons-container {
1412 box-shadow: 0 -1px 0 0 #ccc inset;
1415 button.guiedit {
1416 color: #444;
1417 background-color: transparent;
1418 font-family: Font Awesome, Source Sans Pro, Trebuchet MS, Helvetica, Arial, Verdana, sans-serif;
1420 button.guiedit::after {
1421 font-family: Proxima Nova;
1422 font-weight: 300;
1423 color: #444;
1424 top: 2px;
1425 height: 25px;
1427 button.guiedit:hover {
1428 color: #ccc;
1431 /* Markdown hints */
1433 #markdown-hints-checkbox + label {
1434 color: #444;
1436 #markdown-hints-checkbox + label:hover {
1437 text-decoration: underline;
1439 #markdown-hints {
1440 background-color: #888;
1441 border: 1px solid #ccc;
1444 /*================*/
1445 /* EDIT POST FORM */
1446 /*================*/
1448 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
1449 border-radius: 3px;
1450 border: 1px solid #999;
1451 color: #aaa;
1453 @media only screen and (hover:hover), not screen and (-moz-touch-enabled) {
1454 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
1455 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
1456 text-decoration: underline;
1458 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
1459 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
1460 border-color: #ccc;
1463 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1464 content: "\F00C";
1466 #edit-post-form input[type='radio'] + label {
1467 color: #444;
1468 border-color: #999;
1470 #edit-post-form input[type='radio'][value='all'] + label {
1471 border-radius: 8px 0 0 8px;
1472 border-width: 1px;
1474 #edit-post-form input[type='radio'][value='drafts'] + label {
1475 border-radius: 0 8px 8px 0;
1477 #edit-post-form input[type='radio'] + label:hover,
1478 #edit-post-form input[type='radio']:focus + label,
1479 #edit-post-form input[type='radio']:checked + label {
1480 background-color: #999;
1482 #edit-post-form input[type='radio'] + label:hover,
1483 #edit-post-form input[type='radio']:focus + label {
1484 color: #000;
1486 #edit-post-form input[type='radio']:active + label,
1487 #edit-post-form input[type='radio']:checked + label {
1488 color: #fff;
1491 /*=======*/
1492 /* LINKS */
1493 /*=======*/
1496 text-decoration: none;
1497 color: <?php echo $hyperlink_color; ?>;
1499 a:hover {
1500 text-decoration: underline;
1503 /*=========*/
1504 /* BUTTONS */
1505 /*=========*/
1507 button,
1508 input[type='submit'] {
1509 color: #444;
1510 font-weight: normal;
1513 .button,
1514 .button:visited {
1515 color: #444;
1518 button:hover,
1519 input[type='submit']:hover,
1520 button:focus,
1521 input[type='submit']:focus {
1522 color: #aaa;
1524 input[type='submit']:hover,
1525 input[type='submit']:focus {
1526 text-decoration: underline;
1528 button:active,
1529 input[type='submit']:active {
1530 color: #ccc;
1531 transform: scale(0.9);
1533 .button:hover {
1534 color: #aaa;
1536 .button:active {
1537 transform: scale(0.9);
1539 .button:focus:not(:hover) {
1540 transform: none;
1542 @-moz-document url-prefix() {
1543 .button:active {
1544 transform: none;
1548 /*==========*/
1549 /* HEADINGS */
1550 /*==========*/
1552 .post-body h1,
1553 .post-body h2,
1554 .post-body h3,
1555 .post-body h4,
1556 .post-body h5,
1557 .post-body h6,
1558 .comment-body h1,
1559 .comment-body h2,
1560 .comment-body h3,
1561 .comment-body h4,
1562 .comment-body h5,
1563 .comment-body h6 {
1564 font-weight: <?php global $platform; echo ($platform == 'Mac' ? '100' : '200'); ?>;
1565 text-shadow:
1566 0px 0px 1px #777,
1567 0.5px 0.5px 1px #aaa,
1568 0.5px 0.5px 1px #bbb;
1570 .post-body h1 strong,
1571 .post-body h2 strong,
1572 .post-body h3 strong,
1573 .post-body h4 strong,
1574 .post-body h5 strong,
1575 .post-body h6 strong {
1576 font-weight: normal;
1578 .post-body h6,
1579 .comment-body h6 {
1580 color: #555;
1582 .post-body h1,
1583 .comment-body h1 {
1584 padding-bottom: 2px;
1585 border-bottom-color: #777;
1587 .post-body h2 {
1588 border-bottom: 1px dotted #ccc;
1591 /*========*/
1592 /* QUOTES */
1593 /*========*/
1595 blockquote {
1596 border-left: 5px solid #777;
1599 /*========*/
1600 /* IMAGES */
1601 /*========*/
1603 #content img {
1604 border: 1px solid #666;
1606 #content img[style^='float'] {
1607 border: 1px solid transparent;
1609 #content img[src$='.svg'] {
1610 border: none;
1612 #content figure img {
1613 border: 1px solid #000;
1615 #content figure img[src$='.svg'] {
1616 border: none;
1619 /*========*/
1620 /* TABLES */
1621 /*========*/
1623 .post-body table,
1624 .comment-body table,
1625 .post-body table th,
1626 .post-body table td,
1627 .comment-body table th,
1628 .comment-body table td {
1629 border: 1px solid #ccc;
1632 /*======*/
1633 /* MISC */
1634 /*======*/
1636 hr {
1637 border-bottom: 1px solid #999;
1640 code,
1641 pre {
1642 font-family: 'Tired of Courier', Courier, Courier New, monospace;
1643 font-size: 0.9375em;
1646 pre {
1647 border: 1px solid #444;
1648 box-shadow:
1649 0px 0px 1px #777,
1650 1px 1px 1px #aaa inset,
1651 1px 1px 1px #bbb;
1654 input[type='text'],
1655 input[type='search'],
1656 input[type='password'] {
1657 border: 1px solid #999;
1658 color: #000;
1659 background-color: transparent;
1661 input[type='text']:focus,
1662 input[type='search']:focus,
1663 input[type='password']:focus {
1664 border: 1px solid #ccc;
1667 select {
1668 color: #000;
1671 .frac {
1672 padding-left: 2px;
1673 font-feature-settings: 'lnum';
1674 font-size: 0.95em;
1676 .frac sup {
1677 position: relative;
1678 left: -1px;
1680 .frac sub {
1681 position: relative;
1682 left: -0.5px;
1685 .post-body *::selection,
1686 .comment-body *::selection,
1687 textarea::selection,
1688 input::selection {
1689 background-color: #d8d8d8;
1692 /*============*/
1693 /* ABOUT PAGE */
1694 /*============*/
1696 .about-page mark {
1697 background-color: #e6e6e6;
1698 text-decoration: none;
1699 box-shadow:
1700 0 -1px 0 0 #000 inset,
1701 0 -3px 1px -2px #000 inset;
1702 padding: 0 1px;
1705 #content.about-page .accesskey-table {
1706 font-family: <?php echo $UI_font; ?>;
1707 border-color: #ddd;
1710 #content.about-page img {
1711 border: 1px solid #000;
1714 /*========================*/
1715 /* QUALIFIED HYPERLINKING */
1716 /*========================*/
1718 #aux-about-link a {
1719 color: #444;
1721 #aux-about-link a:hover {
1722 opacity: 1.0;
1723 text-shadow: <?php echo $white_glow; ?>;
1726 .qualified-linking label:hover {
1727 text-shadow: <?php echo $white_glow; ?>;
1730 .qualified-linking-toolbar {
1731 border: 1px solid #000;
1732 background-color: #777;
1734 .qualified-linking-toolbar a {
1735 border: 1px solid #888;
1736 border-radius: 4px;
1737 color: #444;
1739 .qualified-linking-toolbar a:hover {
1740 border: 1px solid #999;
1741 text-decoration: none;
1742 text-shadow: <?php echo $white_glow; ?>;
1744 .qualified-linking label::after {
1745 background-color: #888;
1746 opacity: 0.8;
1749 /*======*/
1750 /* MATH */
1751 /*======*/
1753 .mathjax-block-container::-webkit-scrollbar {
1754 height: 12px;
1755 background-color: #f6f6ff;
1756 border-radius: 6px;
1757 border: 1px solid #ddf;
1759 .mathjax-block-container::-webkit-scrollbar-thumb {
1760 background-color: #dde;
1761 border-radius: 6px;
1762 border: 1px solid #cce;
1764 .mathjax-inline-container::-webkit-scrollbar {
1765 height: 8px;
1766 background-color: #f6f6ff;
1767 border-radius: 4px;
1768 border: 1px solid #ddf;
1770 .mathjax-inline-container::-webkit-scrollbar-thumb {
1771 background-color: #dde;
1772 border-radius: 4px;
1773 border: 1px solid #cce;
1776 /*=================*/
1777 /* ALIGNMENT FORUM */
1778 /*=================*/
1780 #content.alignment-forum-index-page::before {
1781 background-color: #878a9f;
1783 #content.alignment-forum-index-page::after {
1784 font-family: "Concourse SmallCaps";
1785 font-weight: 600;
1786 background-color: #222d4b;
1787 color: transparent;
1788 -webkit-background-clip: text;
1789 text-shadow:
1790 rgba(136,136,136,0.5) 0px 3px 3px;
1792 @media only screen and (hover: hover), not screen and (-moz-touch-enabled) {
1793 #content.alignment-forum-index-page h1.listing a:hover,
1794 #content.alignment-forum-index-page h1.listing a:focus {
1795 background-color: rgba(135,138,159,0.85);
1799 /*====================*/
1800 /* FOR NARROW SCREENS */
1801 /*====================*/
1803 @media only screen and (max-width: 1440px) {
1804 #hns-date-picker {
1805 background-color: #888;
1806 bottom: 61px;
1807 opacity: 1.0;
1808 right: -77px;
1810 #hns-date-picker::before {
1811 display: none;
1814 @media only screen and (max-width: 1160px) {
1815 #hns-date-picker {
1816 bottom: 204px;
1817 right: -30px;
1820 @media only screen and (max-width: 1080px) {
1821 #text-size-adjustment-ui button {
1822 border: 1px solid #999;
1823 padding: 0 0 0 1px;
1824 border-radius: 50%;
1825 box-shadow:
1826 0 0 6px #999 inset,
1827 0 0 0 1px transparent;
1829 #hns-date-picker {
1830 right: -18px;
1833 @media only screen and (max-width: 1040px) {
1834 #hns-date-picker {
1835 right: -13px;
1838 @media only screen and (max-width: 1020px) {
1839 #hns-date-picker {
1840 right: 15px;
1843 @media only screen and (max-width: 1000px) {
1844 #theme-tweaker-toggle {
1845 left: -19px;
1847 #quick-nav-ui,
1848 #new-comment-nav-ui,
1849 #new-comment-nav-ui + #hns-date-picker {
1850 opacity: 1.0;
1854 /*========*/
1855 /* MOBILE */
1856 /*========*/
1858 @media only screen and (hover: none), only screen and (-moz-touch-enabled) {
1859 #ui-elements-container > div[id$='-ui-toggle'] button,
1860 #theme-selector .theme-selector-close-button {
1861 color: #444;
1862 text-shadow:
1863 0 0 1px #999,
1864 0 0 3px #999,
1865 0 0 5px #999,
1866 0 0 10px #999,
1867 0 0 20px #999,
1868 0 0 30px #999;
1871 #theme-selector {
1872 background-color: #888;
1873 box-shadow:
1874 0 0 0 1px #444,
1875 0 0 1px 3px #999,
1876 0 0 3px 3px #999,
1877 0 0 5px 3px #999,
1878 0 0 10px 3px #999,
1879 0 0 20px 3px #999;
1880 border-radius: 12px;
1882 #theme-selector::before {
1883 color: #222;
1884 font-weight: 300;
1885 text-shadow:
1886 0px 0px 1px #777,
1887 0.5px 0.5px 1px #aaa,
1888 0.5px 0.5px 1px #bbb;
1890 #theme-selector button {
1891 border-radius: 10px;
1893 #theme-selector button::after {
1894 color: #444;
1895 max-width: calc(100% - 3.5em);
1896 overflow: hidden;
1897 text-overflow: ellipsis;
1899 #theme-selector button.selected::after {
1900 color: #000;
1901 text-shadow:
1902 0 -1px 0 #fff,
1903 0 0.5px 0.5px #000;
1906 #quick-nav-ui {
1907 background-color: #999;
1909 #quick-nav-ui a {
1910 background-color: #888;
1911 box-shadow: 0 0 0 1px #444;
1912 color: #444;
1914 #quick-nav-ui,
1915 #new-comment-nav-ui,
1916 #hns-date-picker {
1917 box-shadow:
1918 0 0 1px 3px #999,
1919 0 0 3px 3px #999,
1920 0 0 5px 3px #999,
1921 0 0 10px 3px #999,
1922 0 0 20px 3px #999;
1924 #quick-nav-ui a::after,
1925 #new-comment-nav-ui::before {
1926 font-family: <?php echo $UI_font; ?>;
1927 font-weight: bold;
1928 box-shadow:
1929 0 0 1px 0 #999,
1930 0 0 3px 0 #999,
1931 0 0 5px 0 #999;
1932 background-color: #999;
1933 border-radius: 4px;
1935 #quick-nav-ui,
1936 #new-comment-nav-ui {
1937 border-radius: 8px;
1939 #new-comment-nav-ui {
1940 background-color: #888;
1941 border: 1px solid #444;
1943 #new-comment-nav-ui::before {
1944 color: #444;
1945 font-weight: bold;
1947 #new-comment-nav-ui .new-comments-count,
1948 #new-comment-nav-ui .new-comments-count::after {
1949 color: #444;
1951 #new-comment-nav-ui .new-comment-sequential-nav-button {
1952 box-shadow: 0 0 0 1px #444;
1953 color: #444;
1955 #new-comment-nav-ui .new-comments-count {
1956 background-color: inherit;
1957 box-shadow: 0 -1px 0 0 #444;
1959 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
1960 color: #999;
1962 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
1963 border-radius: 7px 0 0 7px;
1965 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
1966 border-radius: 0 7px 7px 0;
1968 #new-comment-nav-ui button::after {
1969 font-family: <?php echo $UI_font; ?>;
1972 #hns-date-picker.engaged {
1973 bottom: 124px;
1974 right: 61px;
1975 border: 1px solid #444;
1977 #hns-date-picker span,
1978 #hns-date-picker input {
1979 color: #444;
1982 /*****************************************/
1983 @media only screen and (max-width: 900px) {
1984 /*****************************************/
1985 h1.listing + .post-meta .post-section::before {
1986 position: unset;
1989 #secondary-bar .nav-inner {
1990 font-size: 1em;
1992 #secondary-bar .nav-item:not(#nav-item-search) .nav-inner {
1993 padding: 6px 10px;
1996 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
1997 background-color: #ccc;
2000 .comment-item .comment-item {
2001 margin: 0.75em 0 4px 6px;
2003 .comment-item .comment-item + .comment-item {
2004 margin: 1.5em 0 4px 6px;
2007 .comment-controls .cancel-comment-button::before {
2008 text-shadow:
2009 0 0 1px #fff,
2010 0 0 3px #fff;
2013 .sublevel-nav:not(.sort) .sublevel-item,
2014 .sublevel-nav:not(.sort) .sublevel-item:first-child,
2015 .sublevel-nav:not(.sort) .sublevel-item:last-child {
2016 border-radius: 8px;
2017 border-width: 1px;
2018 margin: 2px;
2020 /*****************************************/
2021 @media only screen and (max-width: 720px) {
2022 /*****************************************/
2023 /*******************************************/
2024 } @media only screen and (max-width: 520px) {
2025 /*******************************************/
2026 h1.listing {
2027 font-size: 1.25rem;
2028 margin: 18px 6px 4px 6px;
2029 max-width: calc(100% - 12px);
2031 h1.listing + .post-meta {
2032 margin: 4px 6px;
2034 h1.listing + .post-meta > * {
2035 line-height: 1.5;
2037 h1.listing a[href^='http'] {
2038 top: 3px;
2041 #content.compact > .comment-thread .comment-item {
2042 max-height: 105px;
2045 .textarea-container:focus-within textarea {
2046 background-color: #888;
2048 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
2049 border: 1px solid transparent;
2050 padding: 6px;
2052 .textarea-container:focus-within .guiedit-mobile-help-button.active {
2053 box-shadow:
2054 0 0 0 1px #ccc,
2055 0 0 0 2px #888,
2056 0 0 0 3px #ccc;
2057 color: #ccc;
2058 font-weight: 600;
2060 .textarea-container:focus-within .guiedit-buttons-container {
2061 background-color: #888;
2062 border-top: 1px solid #ddf;
2064 #content.conversation-page .textarea-container:focus-within::after {
2065 background-color: #888;
2067 .textarea-container:focus-within button.guiedit {
2068 border: 1px solid transparent;
2070 #markdown-hints::after {
2071 color: #0f0;
2074 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2075 top: 2px;
2077 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
2078 top: 1px;