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";
8 /*********************/
9 /* ULTRAMODERN THEME */
10 /*********************/
14 background
-color
: #888;
15 font
-family
: <?php
echo $UI_font; ?
>;
27 border
: 1px solid transparent
;
28 border
-bottom
-color
: #666;
30 0 1.5px
1.5px
-1.5px
#bbb,
32 margin
: 0 -30px
0 -2px
;
38 padding
: 11px
30px
13px
30px
;
40 .nav
-current
.nav
-inner
{
44 #secondary-bar .nav-inner {
47 #secondary-bar .nav-item:not(#nav-item-search) .nav-inner {
51 #bottom-bar.decorative::before,
52 #bottom-bar.decorative::after {
56 padding
: 0.25em
0 1em
0;
58 #bottom-bar.decorative::before {
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%
;
65 filter
: brightness(50%
) opacity(0.6);
67 #bottom-bar.decorative::after {
73 background
-color
: #888;
77 <?php
fit_content("#bottom-bar.decorative::after"); ?
>
86 text
-decoration
: underline
;
100 .inactive
-bar
.nav
-inner
::after
{
104 .nav
-inner
:hover
::after
{
110 #nav-item-search form::before {
112 font
-size
: 0.9375rem
;
114 #nav-item-search button {
118 #nav-item-search input::placeholder {
123 /* Inbox indicator */
129 /*= Top pagination UI =*/
131 #top-nav-bar a::before {
135 /*= Bottom pagination UI =*/
137 #bottom-bar .nav-item a::before {
141 /*= Pagination UI hover tooltips =*/
143 #top-nav-bar a::after,
144 #bottom-bar a::after {
157 .logout
-button
::before
{
160 .page
-toolbar
.button
:hover
{
161 text
-decoration
: none
;
168 .sublevel
-nav
.sublevel
-item
{
170 background
-color
: #888;
172 .sublevel
-nav
.sublevel
-item
:not(.selected
):hover
{
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
{
185 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
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
{
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;
210 border
: 2px solid transparent
;
213 pointer
-events
: none
;
214 background
-color
: #999;
216 .sublevel
-nav
.sort
::before
{
217 text
-transform
: uppercase
;
222 .sublevel
-nav
.sort
::after
{
232 0 18px
0 0 #888 inset,
233 0 0 0 1px
#777 inset,
234 0 18px
0 1px
#777 inset,
242 #width-selector button {
244 0 0 0 4px
#888 inset,
245 0 0 0 5px
#ccc inset;
247 #width-selector button:hover,
248 #width-selector button.selected {
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 {
264 #theme-selector button {
266 0 0 0 5px
#888 inset;
268 #theme-selector button:hover,
269 #theme-selector button.selected {
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 {
278 background
-color
: #888;
280 #theme-selector button:hover::before,
281 #theme-selector button.selected::before {
285 /*======================*/
286 /* THEME TWEAKER TOGGLE */
287 /*======================*/
289 #theme-tweaker-toggle button:hover {
290 text
-decoration
: none
;
293 /*=================*/
294 /* QUICKNAV WIDGET */
295 /*=================*/
300 box
-shadow
: 0 0 0 1px
#999;
301 text
-decoration
: none
;
303 #quick-nav-ui a[href='#bottom-bar'] {
306 #quick-nav-ui a:active {
307 transform
: scale(0.9);
309 #quick-nav-ui a[href='#comments'].no-comments {
313 @media only screen
and (hover
: hover
), not screen
and (-moz
-touch
-enabled
) {
314 #quick-nav-ui a:hover {
316 box
-shadow
: 0 0 0 1px
#ccc;
318 #quick-nav-ui a:focus:not(:hover) {
324 /*======================*/
325 /* NEW COMMENT QUICKNAV */
326 /*======================*/
328 #new-comment-nav-ui .new-comments-count {
332 #new-comment-nav-ui .new-comments-count::after {
336 #new-comment-nav-ui .new-comment-sequential-nav-button {
339 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
342 @media only screen
and (hover
: hover
), not screen
and (-moz
-touch
-enabled
) {
343 #new-comment-nav-ui .new-comments-count:hover {
351 #new-comment-nav-ui .new-comment-sequential-nav-button:hover {
353 text
-decoration
: none
;
355 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
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 {
369 #hns-date-picker input {
370 border
: 1px solid
#999;
371 background
-color
: transparent
;
374 #hns-date-picker input:focus {
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
;
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 {
402 #text-size-adjustment-ui button.default {
405 #text-size-adjustment-ui button:hover {
406 text
-decoration
: none
;
409 #text-size-adjustment-ui::after {
414 /*=============================*/
415 /* COMMENTS VIEW MODE SELECTOR */
416 /*=============================*/
418 #comments-view-mode-selector a {
427 border
: 1px solid
#ccc;
429 .archive
-nav div
[class^
='archive-nav-']:nth
-of
-type(2) *[class^
='archive-nav-item'] {
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'] {
443 .archive
-nav span
[class^
="archive-nav-item"],
444 .archive
-nav a
:hover
{
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"] {
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
) {
472 margin
: 0.7em
20px
0.1em
20px
;
473 max
-width
: calc(100%
- 40px
);
474 font
-family
: <?php
echo $UI_font; ?
>, 'Font Awesome';
477 h1
.listing a
[href^
='/posts'] {
478 font
-family
: <?php
echo $text_font; ?
>;
479 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
482 0.5px
0.5px
1px
#aaa,
483 0.5px
0.5px
1px
#bbb;
485 h1
.listing a
[href^
="http"] {
489 @media only screen
and (hover
: hover
), not screen
and (-moz
-touch
-enabled
) {
492 background
-color
: rgba(136,136,136,0.85);
496 0.5px
0.5px
1px
#aaa,
497 0.5px
0.5px
1px
#bbb,
502 h1
.listing
:focus
-within
::before
{
507 h1
.listing a
[href^
="http"]:hover
{
511 -0.5px
-0.5px
0 #fff,
517 h1
.listing
.edit
-post
-link
{
518 padding
: 10px
3px
30px
0.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;
536 h1
.listing
.spam +
.post
-meta
{
539 h1
.listing
.spam
:hover
,
540 h1
.listing
.spam +
.post
-meta
:hover
,
541 h1
.listing
.spam
:hover +
.post
-meta
{
545 /*===================*/
546 /* LISTING POST-META */
547 /*===================*/
549 h1
.listing +
.post
-meta
> * {
553 h1
.listing +
.post
-meta
.karma
::after
{
556 h1
.listing +
.post
-meta
.date
::before
{
559 h1
.listing +
.post
-meta
.date
::after
{
562 margin
: 0 0.5em
0 0.125em
;
564 h1
.listing +
.post
-meta
.comment
-count
.new-comments
::before
{
567 h1
.listing
:last
-of
-type +
.post
-meta
{
570 h1
.listing +
.post
-meta
.karma
{
572 margin
-right
: 0.25em
;
574 h1
.listing +
.post
-meta
.author
{
575 margin
-right
: 0.25em
;
577 h1
.listing +
.post
-meta
.date
{
580 h1
.listing +
.post
-meta
.post
-section
{
584 h1
.listing +
.post
-meta
.post
-section
::before
{
588 h1
.listing +
.post
-meta
.link
-post
-domain
{
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 {
604 border
-width
: 0 0 0 1px
;
606 1.5px
0 1.5px
-1.5px
#bbb inset,
607 1px
0 1px
-1px
#777 inset;
609 #content.user-page h1.listing {
614 @media only screen
and (hover
: hover
), not screen
and (-moz
-touch
-enabled
) {
615 #content.user-page h1.listing:focus-within::before {
620 #content.user-page h1.listing + .post-meta {
622 padding
: 0.5em
6px
6px
34px
;
624 #content.user-page h1.listing + .post-meta .post-section::before {
628 #content.conversations-user-page h1.listing {
629 padding
: 6px
6px
4px
8px
;
632 #content.conversations-user-page h1.listing + .post-meta {
634 margin
: 0 0 0.25rem
0;
636 #content.conversations-user-page h1.listing + .post-meta .date::after {
640 .user
-stats
.karma
-total
{
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'); ?
>;
654 0.5px
0.5px
1px
#aaa,
655 0.5px
0.5px
1px
#bbb;
662 .login
-container h1
{
666 /* “Create account” form */
669 border
: 1px solid
#aaa;
674 .login
-container
.login
-tip
{
675 border
: 1px solid transparent
;
681 border
: 1px solid red
;
682 background
-color
: #faa;
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;
699 /*===================*/
700 /* TABLE OF CONTENTS */
701 /*===================*/
704 background
-color
: #888;
709 .post
-body
.contents ul
{
712 .post
-body
.contents li
::before
{
714 font
-feature
-settings
: "tnum";
717 /*==================*/
718 /* POSTS & COMMENTS */
719 /*==================*/
723 font
-family
: <?php
echo $text_font; ?
>;
724 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'300' : '400'); ?
>;
728 0.5px
0.5px
1px
#aaa,
729 0.5px
0.5px
1px
#bbb;
732 .comment
-body strong
{
737 .comment
-body a
:link
{
741 0.5px
0.5px
1px
#f68a84,
742 0.5px
0.5px
1px
#ff9b8c;
744 .post
-body a
:visited
,
745 .comment
-body a
:visited
{
749 0.5px
0.5px
1px
#d9f,
750 0.5px
0.5px
1px
#efa9ff;
753 .comment
-body a
:hover
{
757 0.5px
0.5px
1px
#f68a84,
758 0.5px
0.5px
1px
#ff9b8c,
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'); ?
>;
770 0.5px
0.5px
1px
#aaa,
771 0.5px
0.5px
1px
#bbb;
775 font
-size
: 1.1875rem
;
778 @media
(-webkit
-max
-device
-pixel
-ratio
: 1), (max
-resolution
: 191dpi
) {
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
{
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;
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
;
834 .post
-meta
.comment
-count
:hover
::before
,
835 .post
-meta
.lw2
-link
:hover
::before
,
836 .post
-meta
.read
-time
:hover
::before
{
839 .post
-meta
.read
-time
:hover
::before
{
842 .post
-meta
.comment
-count
::before
{
845 .post
-meta
.read
-time
::before
{
848 .post
-meta
.read
-time
::after
{
851 .post
-meta
.word
-count
::before
{
854 .post
-meta
.word
-count
::after
{
857 .post
-meta
.lw2
-link
::before
{
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
;
873 .post
.post
-meta
.comment
-count
{
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
{
890 a
.post
-section
:hover
{
891 text
-decoration
: none
;
893 a
.post
-section
:hover
::before
{
896 .post
-meta
.post
-section
.alignment
-forum
::before
{
902 a
.post
-section
.alignment
-forum
:hover
::before
{
910 .post
.link
-post a
.link
-post
-link
{
911 text
-decoration
: none
;
912 font
-family
: <?php
echo $UI_font; ?
>;
915 .post
.link
-post a
.link
-post
-link
:hover
{
918 .post
.link
-post a
.link
-post
-link
:hover
::before
{
922 -0.5px
-0.5px
0 #fff,
926 .post
.link
-post a
.link
-post
-link
:focus
{
928 border
-bottom
: 2px dotted
#f60;
931 0.5px
0.5px
1px
#aaa,
932 0.5px
0.5px
1px
#bbb,
942 #content > .comment-thread .comment-meta a.date:focus,
943 #content > .comment-thread .comment-meta a.permalink:focus {
945 outline
: 2px dotted
#ccc;
947 background
-color
: #444;
949 #content > .comment-thread .comment-meta a.date:focus {
953 #content > .comment-thread .comment-meta a.date:focus + * {
956 #content > .comment-thread .comment-meta a.permalink:focus {
960 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
964 border
: 1px solid transparent
;
965 border
-left
-color
: #666;
967 1.5px
0 1.5px
-1.5px
#bbb inset,
968 1px
0 1px
-1px
#777 inset;
970 @-moz
-document url
-prefix() {
973 1.5px
0 1.5px
-1px
#bbb inset,
974 1px
0 1px
-1px
#777 inset;
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--)
987 $comment_nesting_depth = 10;
990 a
.comment
-parent
-link
::after
{
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; ?
>;
1005 .comment
-item input
[id^
="expand"] + label
:hover
::after
{
1008 .comment
-item input
[id^
="expand"] + label
:active
::after
,
1009 .comment
-item input
[id^
="expand"] + label
:focus
::after
{
1012 .comment
-item input
[id^
="expand"]:checked ~
.comment
-thread
.comment
-thread
.comment
-item
{
1013 border
-width
: 1px
0 0 0;
1023 .comment
-meta
.author
{
1027 font
-weight
: normal
;
1029 .comment
-item
.author
:not(.redacted
).original
-poster
::after
{
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;
1040 box
-shadow
: 0 0 0 1px
#bbb inset;
1042 .comment
-item
.karma
.active
-controls
::after
,
1043 .post
.karma
.active
-controls
::after
{
1047 .comment
-item
.karma
.karma
-value
::after
,
1048 .post
.karma
.karma
-value
::after
{
1054 /*====================*/
1055 /* ANTI-KIBITZER MODE */
1056 /*====================*/
1059 .inline
-author
.redacted
{
1064 .karma
-value
.redacted
{
1068 .link
-post
-domain
.redacted
{
1072 /*===========================*/
1073 /* COMMENT THREAD NAVIGATION */
1074 /*===========================*/
1076 div
.comment
-parent
-link
{
1079 a
.comment
-parent
-link
{
1082 a
.comment
-parent
-link
::before
{
1085 a
.comment
-parent
-link
:hover
::before
{
1089 div
.comment
-child
-links
{
1092 div
.comment
-child
-links a
{
1095 .comment
-child
-link
::before
{
1099 .comment
-item
-highlight
{
1106 border
: 1px solid
#e7b200;
1108 .comment
-item
-highlight
-faint
{
1115 border
: 1px solid
#f8e7b5;
1119 background
-color
: #949494;
1122 /*=======================*/
1123 /* COMMENTS COMPACT VIEW */
1124 /*=======================*/
1126 #comments-list-mode-selector button {
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 {
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 {
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;
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;
1181 #content.user-page.compact > h1.listing {
1184 #content.user-page.compact > h1.listing + .post-meta {
1185 margin
-bottom
: 0.5rem
;
1188 /*===========================*/
1189 /* HIGHLIGHTING NEW COMMENTS */
1190 /*===========================*/
1192 .new-comment
::before
{
1196 border
: 1px solid
#e00;
1202 /*=================================*/
1203 /* COMMENT THREAD MINIMIZE BUTTONS */
1204 /*=================================*/
1206 .comment
-minimize
-button
{
1209 .comment
-minimize
-button
:hover
{
1211 text
-shadow
: <?php
echo $white_glow; ?
>;
1213 .comment
-minimize
-button
::after
{
1214 font
-family
: <?php
echo $UI_font; ?
>;
1217 .comment
-minimize
-button
.maximized
::after
{
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
{
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'); ?
>;
1273 .downvote
.selected
{
1283 .vote
:hover
::after
{
1286 .vote
:not(:hover
)::after
{
1289 .karma
.waiting
.vote
.big
-vote
::after
{
1292 .vote
.big
-vote
::after
,
1293 .vote
:not(.big
-vote
).clicked
-twice
::after
{
1296 .karma
:not(.waiting
) .vote
.clicked
-once
::after
{
1310 @-moz
-document url
-prefix() {
1321 /*===========================*/
1322 /* COMMENTING AND POSTING UI */
1323 /*===========================*/
1325 .comment
-controls
.cancel
-comment
-button
{
1326 font
-weight
: normal
;
1329 .comment
-controls
.cancel
-comment
-button
:hover
{
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
;
1344 .comment
-controls
.delete
-button
,
1345 .comment
-controls
.retract
-button
{
1348 .comment
-controls
.edit
-button
,
1349 .comment
-controls
.unretract
-button
{
1352 .comment
-controls
.action
-button
:hover
{
1354 text
-decoration
: none
;
1358 .edit
-post
-link
:visited
{
1362 .posting
-controls textarea
{
1364 font
-family
: <?php
echo $text_font; ?
>;
1366 background
-color
: transparent
;
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
{
1384 .posting
-controls textarea
::-webkit
-scrollbar
{
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;
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
;
1427 button
.guiedit
:hover
{
1431 /* Markdown hints */
1433 #markdown-hints-checkbox + label {
1436 #markdown-hints-checkbox + label:hover {
1437 text
-decoration
: underline
;
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 {
1450 border
: 1px solid
#999;
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 {
1463 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
1466 #edit-post-form input[type='radio'] + label {
1470 #edit-post-form input[type='radio'][value='all'] + label {
1471 border
-radius
: 8px
0 0 8px
;
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 {
1486 #edit-post-form input[type='radio']:active + label,
1487 #edit-post-form input[type='radio']:checked + label {
1496 text
-decoration
: none
;
1497 color
: <?php
echo $hyperlink_color; ?
>;
1500 text
-decoration
: underline
;
1508 input
[type
='submit'] {
1510 font
-weight
: normal
;
1519 input
[type
='submit']:hover
,
1521 input
[type
='submit']:focus
{
1524 input
[type
='submit']:hover
,
1525 input
[type
='submit']:focus
{
1526 text
-decoration
: underline
;
1529 input
[type
='submit']:active
{
1531 transform
: scale(0.9);
1537 transform
: scale(0.9);
1539 .button
:focus
:not(:hover
) {
1542 @-moz
-document url
-prefix() {
1564 font
-weight
: <?php
global $platform; echo ($platform == 'Mac' ?
'100' : '200'); ?
>;
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
;
1584 padding
-bottom
: 2px
;
1585 border
-bottom
-color
: #777;
1588 border
-bottom
: 1px dotted
#ccc;
1596 border
-left
: 5px solid
#777;
1604 border
: 1px solid
#666;
1606 #content img[style^='float'] {
1607 border
: 1px solid transparent
;
1609 #content img[src$='.svg'] {
1612 #content figure img {
1613 border
: 1px solid
#000;
1615 #content figure img[src$='.svg'] {
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;
1637 border
-bottom
: 1px solid
#999;
1642 font
-family
: 'Tired of Courier', Courier
, Courier
New, monospace
;
1643 font
-size
: 0.9375em
;
1647 border
: 1px solid
#444;
1650 1px
1px
1px
#aaa inset,
1655 input
[type
='search'],
1656 input
[type
='password'] {
1657 border
: 1px solid
#999;
1659 background
-color
: transparent
;
1661 input
[type
='text']:focus
,
1662 input
[type
='search']:focus
,
1663 input
[type
='password']:focus
{
1664 border
: 1px solid
#ccc;
1673 font
-feature
-settings
: 'lnum';
1685 .post
-body
*::selection
,
1686 .comment
-body
*::selection
,
1687 textarea
::selection
,
1689 background
-color
: #d8d8d8;
1697 background
-color
: #e6e6e6;
1698 text
-decoration
: none
;
1700 0 -1px
0 0 #000 inset,
1701 0 -3px
1px
-2px
#000 inset;
1705 #content.about-page .accesskey-table {
1706 font
-family
: <?php
echo $UI_font; ?
>;
1710 #content.about-page img {
1711 border
: 1px solid
#000;
1714 /*========================*/
1715 /* QUALIFIED HYPERLINKING */
1716 /*========================*/
1721 #aux-about-link a:hover {
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;
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;
1753 .mathjax
-block
-container
::-webkit
-scrollbar
{
1755 background
-color
: #f6f6ff;
1757 border
: 1px solid
#ddf;
1759 .mathjax
-block
-container
::-webkit
-scrollbar
-thumb
{
1760 background
-color
: #dde;
1762 border
: 1px solid
#cce;
1764 .mathjax
-inline
-container
::-webkit
-scrollbar
{
1766 background
-color
: #f6f6ff;
1768 border
: 1px solid
#ddf;
1770 .mathjax
-inline
-container
::-webkit
-scrollbar
-thumb
{
1771 background
-color
: #dde;
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";
1786 background
-color
: #222d4b;
1788 -webkit
-background
-clip
: text
;
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
) {
1805 background
-color
: #888;
1810 #hns-date-picker::before {
1814 @media only screen
and (max
-width
: 1160px
) {
1820 @media only screen
and (max
-width
: 1080px
) {
1821 #text-size-adjustment-ui button {
1822 border
: 1px solid
#999;
1827 0 0 0 1px transparent
;
1833 @media only screen
and (max
-width
: 1040px
) {
1838 @media only screen
and (max
-width
: 1020px
) {
1843 @media only screen
and (max
-width
: 1000px
) {
1844 #theme-tweaker-toggle {
1848 #new-comment-nav-ui,
1849 #new-comment-nav-ui + #hns-date-picker {
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 {
1872 background
-color
: #888;
1880 border
-radius
: 12px
;
1882 #theme-selector::before {
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 {
1895 max
-width
: calc(100%
- 3.5em
);
1897 text
-overflow
: ellipsis
;
1899 #theme-selector button.selected::after {
1907 background
-color
: #999;
1910 background
-color
: #888;
1911 box
-shadow
: 0 0 0 1px
#444;
1915 #new-comment-nav-ui,
1924 #quick-nav-ui a::after,
1925 #new-comment-nav-ui::before {
1926 font
-family
: <?php
echo $UI_font; ?
>;
1932 background
-color
: #999;
1936 #new-comment-nav-ui {
1939 #new-comment-nav-ui {
1940 background
-color
: #888;
1941 border
: 1px solid
#444;
1943 #new-comment-nav-ui::before {
1947 #new-comment-nav-ui .new-comments-count,
1948 #new-comment-nav-ui .new-comments-count::after {
1951 #new-comment-nav-ui .new-comment-sequential-nav-button {
1952 box
-shadow
: 0 0 0 1px
#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 {
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 {
1975 border
: 1px solid
#444;
1977 #hns-date-picker span,
1978 #hns-date-picker input {
1982 /*****************************************/
1983 @media only screen
and (max
-width
: 900px
) {
1984 /*****************************************/
1985 h1
.listing +
.post
-meta
.post
-section
::before
{
1989 #secondary-bar .nav-inner {
1992 #secondary-bar .nav-item:not(#nav-item-search) .nav-inner {
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
{
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
{
2020 /*****************************************/
2021 @media only screen
and (max
-width
: 720px
) {
2022 /*****************************************/
2023 /*******************************************/
2024 } @media only screen
and (max
-width
: 520px
) {
2025 /*******************************************/
2028 margin
: 18px
6px
4px
6px
;
2029 max
-width
: calc(100%
- 12px
);
2031 h1
.listing +
.post
-meta
{
2034 h1
.listing +
.post
-meta
> * {
2037 h1
.listing a
[href^
='http'] {
2041 #content.compact > .comment-thread .comment-item {
2045 .textarea
-container
:focus
-within textarea
{
2046 background
-color
: #888;
2048 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
2049 border
: 1px solid transparent
;
2052 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
.active
{
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 {
2074 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
2077 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {