5 /* Hide the mobile elements on desktop screens: */
7 @media only screen
and (max
-width
: 1160px
) {
9 #appearance-adjust-ui-toggle {
14 @media only screen
and (max
-width
: 1160px
) {
16 /*====================*/
17 /* MOBILE UI ELEMENTS */
18 /*====================*/
20 #ui-elements-container {
21 height
: unset !important
;
24 #ui-elements-container > * {
31 #ui-elements-container > div[id$='-ui-toggle'] {
33 display
: inline
-block
;
37 #ui-elements-container > div[id$='-ui-toggle'] button,
38 #theme-selector .theme-selector-close-button {
39 font
-family
: Font Awesome
;
44 -webkit
-tap
-highlight
-color
: transparent
;
45 transition
: transform
0.2s ease
;
47 #ui-elements-container > div[id$='-ui-toggle'] button::selection,
48 #theme-selector .theme-selector-close-button::selection {
49 background
-color
: transparent
;
51 #ui-elements-container > div[id$='-ui-toggle'] button::-moz-focus-inner,
52 #theme-selector .theme-selector-close-button::-moz-focus-inner {
55 #ui-elements-container > div[id$='-ui-toggle'] button.engaged {
56 transform
: rotate(-90deg
);
60 #appearance-adjust-ui-toggle {
70 #theme-selector.engaged,
71 #quick-nav-ui.engaged,
72 #new-comment-nav-ui.engaged,
73 #hns-date-picker.engaged {
77 #image-focus-overlay.engaged {
80 #image-focus-overlay .help-overlay {
88 @media only screen
and (max
-width
: 900px
) {
91 #ui-elements-container {
107 background
-color
: #fff;
108 width
: calc(100vw
- 20px
);
115 max
-height
0.2s ease
,
116 visibility
0.2s ease
;
117 top
: calc(100% +
10px
);
122 #theme-selector.engaged {
127 #theme-selector::before {
128 content
: "Select theme";
133 margin
: 0.375em
1em
0.5em
1em
;
136 #theme-selector button {
137 width
: calc(100%
- 0.5em
);
138 background
-repeat
: no
-repeat
;
139 padding
: 1em
0.875em
;
145 #theme-selector button::after {
146 content
: attr(data
-theme
-description
);
154 @media only screen
and (max
-height
: 675px
) {
155 #theme-selector button {
158 #theme-selector button::after {
162 #theme-selector .theme-selector-close-button {
165 background
-color
: transparent
;
169 #theme-selector .theme-selector-close-button,
170 #theme-selector .theme-selector-close-button:focus,
171 #theme-selector .theme-selector-close-button:active,
172 #theme-selector .theme-selector-close-button:hover {
183 #theme-selector ~ #theme-tweaker-toggle {
186 #theme-selector ~ #theme-tweaker-toggle::after {
187 content
: "Open theme tweaker";
194 #theme-selector.engaged ~ #theme-tweaker-toggle {
203 visibility
0.2s ease
;
205 @media only screen
and (max
-height
: 675px
) {
206 #theme-selector.engaged ~ #theme-tweaker-toggle {
210 <?php
fit_content("#theme-selector.engaged ~ #theme-tweaker-toggle"); ?
>
211 #theme-selector.engaged ~ #theme-tweaker-toggle button {
219 /*======================*/
220 /* ANTI-KIBITZER TOGGLE */
221 /*======================*/
223 #theme-selector ~ #anti-kibitzer-toggle {
230 width
: calc(100vw
- 44px
);
233 pointer
-events
: none
;
235 #theme-selector.engaged ~ #anti-kibitzer-toggle {
241 visibility
0.2s ease
;
243 @media only screen
and (max
-height
: 675px
) {
244 #theme-selector.engaged ~ #anti-kibitzer-toggle {
248 #theme-selector.engaged ~ #anti-kibitzer-toggle button {
249 pointer
-events
: auto
;
250 display
: inline
-block
;
253 /*=================*/
254 /* QUICKNAV WIDGET */
255 /*=================*/
261 visibility
0.2s ease
;
266 #quick-nav-ui.engaged {
273 #quick-nav-ui a + a {
276 #quick-nav-ui a::after {
278 top
: calc(100% +
2px
);
285 text
-transform
: uppercase
;
288 <?php
fit_content("#quick-nav-ui a::after"); ?
>
289 #quick-nav-ui a[href='#top']::after {
293 #quick-nav-ui a[href='#comments']::after {
296 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
298 transition
: visibility
0.2s ease
;
300 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui.engaged a[href='#comments'] {
303 #quick-nav-ui a[href='#bottom-bar']::after {
307 /*======================*/
308 /* NEW COMMENT QUICKNAV */
309 /*======================*/
311 #new-comment-nav-ui {
316 max
-height
0.2s ease
,
317 visibility
0.2s ease
;
322 #new-comment-nav-ui::before {
323 content
: "New Comments";
326 font
-size
: 0.5625rem
;
331 text
-transform
: uppercase
;
334 <?php
fit_content("#new-comment-nav-ui::before"); ?
>
335 #new-comment-nav-ui.engaged {
339 #new-comment-nav-ui .new-comment-sequential-nav-button {
344 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
345 padding
: 2px
7px
3px
7px
;
347 #new-comment-nav-ui .new-comments-count {
348 padding
: 4px
0 5px
0;
350 #new-comment-nav-ui .new-comments-count::before {
353 #new-comment-nav-ui button::after {
360 text
-transform
: uppercase
;
361 pointer
-events
: none
;
363 #new-comment-nav-ui button.new-comment-previous::after {
367 #new-comment-nav-ui button.new-comment-next::after {
372 /*=================*/
373 /* HNS DATE PICKER */
374 /*=================*/
381 max
-height
0.2s ease
,
382 visibility
0.2s ease
;
384 #hns-date-picker.engaged {
387 #hns-date-picker::before {
388 width
: calc(100% +
2px
);
389 border
-width
: 1px
!important
;
399 width
: calc(100%
- 9rem +
8px
);
400 background
: rgba(255,255,255,0.85);
401 backdrop
-filter
: blur(1px
);
403 #content.index-page #bottom-bar {
406 #bottom-bar .nav-item {
410 #bottom-bar .nav-inner {
412 padding
: 1rem
0 1.25rem
0;
417 #content #bottom-bar .nav-item .nav-inner::before {
427 #bottom-bar .nav-inner::after {
430 text
-transform
: uppercase
;
438 #bottom-bar #nav-item-first .nav-inner::after {
439 content
: "First Page";
441 #bottom-bar #nav-item-prev .nav-inner::after {
442 content
: "Prev. Page";
444 #bottom-bar #nav-item-top .nav-inner::after {
447 #bottom-bar #nav-item-next .nav-inner::after {
448 content
: "Next Page";
450 #bottom-bar #nav-item-last .nav-inner::after {
451 content
: "Last Page";
454 @media only screen
and (max
-width
: 900px
) {
459 width
: calc(100% +
8px
);
462 .nav
-bar
.nav
-inner
::after
{
466 #primary-bar .nav-item {
469 .nav
-bar
-top
:not(#primary-bar) .nav-item:not(#nav-item-search) {
472 .nav
-bar
-top
:not(#anything) .nav-inner {
473 text
-transform
: uppercase
;
476 .nav
-bar
-top
.nav
-inner
::before
{
478 font
-family
: "Font Awesome";
483 #nav-item-home .nav-inner::before {
486 #nav-item-featured .nav-inner::before {
489 #nav-item-all .nav-inner::before {
492 #nav-item-meta .nav-inner::before {
495 #nav-item-tags .nav-inner::before {
498 #nav-item-recent-comments > * > span {
501 #nav-item-recent-comments .nav-inner::before,
502 #nav-item-alignment-forum-comments .nav-inner::before {
505 #nav-item-alignment-forum .nav-inner::before {
507 font
-family
: Concourse
, 'Changa One';
509 #nav-item-questions .nav-inner::before {
511 font
-family
: Concourse
, 'Changa One';
513 #nav-item-events .nav-inner::before {
516 #nav-item-shortform .nav-inner::before {
519 #nav-item-archive .nav-inner::before {
522 #nav-item-about .nav-inner::before {
529 #nav-item-search .nav-inner::before {
532 #nav-item-search .nav-inner {
536 #nav-item-search input {
540 #nav-item-search button {
542 padding
: 5px
5px
5px
10px
;
547 #nav-item-search button::before {
549 font
-family
: Font Awesome
;
556 #nav-item-login .nav-inner::before {
560 @media only screen
and (max
-width
: 520px
) {
566 #nav-item-search .nav-inner {
569 #nav-item-search button {
573 #bottom-bar #nav-item-first .nav-inner::after {
576 #bottom-bar #nav-item-prev .nav-inner::after {
579 #bottom-bar #nav-item-next .nav-inner::after {
582 #bottom-bar #nav-item-last .nav-inner::after {
587 /*=================*/
588 /* INBOX INDICATOR */
589 /*=================*/
591 @media only screen
and (max
-width
: 900px
) {
595 pointer
-events
: none
;
597 #inbox-indicator::before {
603 #inbox-indicator.new-messages {
604 pointer
-events
: auto
;
606 #inbox-indicator.new-messages::before {
607 box
-shadow
: 0 0 8px
1px
#f00 inset;
610 @media only screen
and (max
-width
: 520px
) {
611 #inbox-indicator::before {
616 @media only screen
and (max
-width
: 374px
) {
617 #inbox-indicator::before {
622 /*===================*/
623 /* TOP PAGINATION UI */
624 /*===================*/
634 @media only screen
and (max
-width
: 900px
) {
635 #content > .page-toolbar {
639 #content.user-page > .page-toolbar {
640 grid
-column
: 2 / span
2;
644 @media only screen
and (max
-width
: 520px
) {
645 #content:not(.user-page) .page-toolbar {
647 flex
-direction
: column
-reverse
;
652 #content.user-page .page-toolbar {
655 justify
-content
: flex
-end
;
658 #content.user-page .page-toolbar > form,
659 #content.user-page .page-toolbar > .button {
664 #content.user-page .page-toolbar .button {
665 text
-transform
: uppercase
;
668 #content.user-page .page-toolbar .button::before {
673 #content.user-page .page-toolbar .rss {
688 @media only screen
and (max
-width
: 900px
) {
689 .sublevel
-nav
:not(.sort
) {
691 width
: calc(100vw
- 200px
);
693 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
698 @media only screen
and (max
-width
: 520px
) {
699 .sublevel
-nav
:not(.sort
) .sublevel
-item
{
704 /*=====================*/
705 /* SORT ORDER SELECTOR */
706 /*=====================*/
708 @media only screen
and (max
-width
: 720px
) {
709 #content.index-page > .sublevel-nav.sort {
719 @media only screen
and (max
-width
: 900px
) {
720 div
[class^
='archive-nav-'] {
722 justify
-content
: flex
-start
;
724 .archive
-nav
*[class^
='archive-nav-item'],
725 .archive
-nav
*[class^
='archive-nav-item']:first
-child
{
729 flex
: 0 1 calc((100%
/ 8) - 4px
);
731 .archive
-nav
.archive
-nav
-item
-day
,
732 .archive
-nav
.archive
-nav
-item
-day
:first
-child
{
733 flex
-basis
: calc((100%
/ 16) - 4px
);
735 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-'] {
739 .archive
-nav
> *[class^
='archive-nav-'] +
*[class^
='archive-nav-']::before
{
744 width
: calc(100% +
8px
);
749 @media only screen
and (max
-width
: 720px
) {
750 .archive
-nav
.archive
-nav
-item
-day
,
751 .archive
-nav
.archive
-nav
-item
-day
:first
-child
{
752 flex
-basis
: calc((100%
/ 12) - 4px
);
755 @media only screen
and (max
-width
: 520px
) {
756 .archive
-nav
*[class^
='archive-nav-item'],
757 .archive
-nav
*[class^
='archive-nav-item']:first
-child
{
758 flex
-basis
: calc((100%
/ 5) - 4px
);
760 .archive
-nav
.archive
-nav
-item
-day
,
761 .archive
-nav
.archive
-nav
-item
-day
:first
-child
{
762 flex
-basis
: calc((100%
/ 8) - 4px
);
778 #content.user-page h1.page-main-heading {
781 @media only screen
and (max
-width
: 520px
) {
782 #content.user-page h1.page-main-heading {
784 text
-overflow
: ellipsis
;
786 #content.user-page .user-stats .karma-type {
795 @media only screen
and (max
-width
: 640px
) {
798 margin
: 0 auto
3em auto
;
801 .login
-container
#login-form,
802 .login
-container
#signup-form {
803 padding
: 0 1em
1.25em
1em
;
806 .login
-container
#signup-form {
809 .login
-container
#login-form > *,
810 .login
-container
#signup-form > * {
811 grid
-column
: 1 / span
2;
813 .login
-container form label
{
818 .login
-container form input
{
819 margin
: 0.25em
0 0.75em
0;
822 .login
-container form h1
{
823 grid
-column
: 1 / span
2;
824 margin
: 0 0 0.25em
0;
826 .login
-container form a
{
827 margin
: 0.75em
0 0 0;
829 .login
-container
.login
-tip
{
830 margin
: 1.5em
1em
0 1em
;
834 /*==================*/
835 /* POSTS & COMMENTS */
836 /*==================*/
838 @media only screen
and (max
-width
: 720px
) {
840 padding
: 0 0 0 2.25em
;
842 .body
-text ol
> li
::before
{
845 .body
-text ul
:not(.contents
-list) > li
,
846 .body
-text ul
:not(.contents
-list) > li ul
> li
{
847 padding
: 0 0 0 0.75em
;
849 .body
-text ul
:not(.contents
-list) > li
::before
,
850 .body
-text ul
:not(.contents
-list) > li ul
> li
::before
{
852 margin
-left
: -0.06em
;
863 @media only screen
and (max
-width
: 720px
) {
864 .post
-meta
.lw2
-link span
,
865 .post
-meta
.karma
-value span
,
866 .post
-meta
.comment
-count span
{
869 .post
-meta
.comment
-count
::before
{
871 font
-family
: Font Awesome
;
873 margin
: 0 0.25em
0 0;
878 /*===================*/
879 /* POSTS & BODY TEXT */
880 /*===================*/
882 @media only screen
and (max
-width
: 900px
) {
890 @media only screen
and (max
-width
: 520px
) {
904 a
.comment
-parent
-link
::after
{
907 @media only screen
and (max
-width
: 900px
) {
909 padding
: 2px
40px
2px
10px
;
912 @media only screen
and (max
-width
: 720px
) {
913 .comment
.karma
-value span
{
916 .comment
-meta
.comment
-parent
-link
{
920 @media only screen
and (max
-width
: 520px
) {
922 padding
: 2px
24px
2px
10px
;
928 .comment
-meta
> :not(.author
) {
931 .comment
-meta
.author
,
932 .comment
-meta
.date
{
935 .comment
-meta
:before
{
940 .comment
-post
-title2
{
942 text
-overflow
: ellipsis
;
945 .comment
-meta
.lw2
-link
{
950 /*=======================*/
951 /* COMMENTS COMPACT VIEW */
952 /*=======================*/
954 /*===========================*/
955 /* COMMENT THREAD NAVIGATION */
956 /*===========================*/
958 @media only screen
and (max
-width
: 900px
) {
959 a
.comment
-parent
-link
{
964 a
.comment
-parent
-link
::before
{
969 line
-height
: inherit
;
972 transform
: scaleX(-1);
977 @media only screen
and (max
-width
: 520px
) {
978 a
.comment
-parent
-link
{
981 a
.comment
-parent
-link
::before
{
991 /*=================================*/
992 /* COMMENT THREAD MINIMIZE BUTTONS */
993 /*=================================*/
995 @media only screen
and (max
-width
: 520px
) {
996 .comment
-minimize
-button
{
1001 /*===========================*/
1002 /* COMMENTING AND POSTING UI */
1003 /*===========================*/
1005 @media only screen
and (max
-width
: 900px
) {
1006 .comment
-controls
.delete
-button
, .comment
-controls
.retract
-button
, .comment
-controls
.unretract
-button
, .comment
-controls
.edit
-button
{
1009 .comment
-controls
.delete
-button
::before
, .comment
-controls
.retract
-button
::before
, .comment
-controls
.unretract
-button
::before
, .comment
-controls
.edit
-button
::before
{
1012 .comment
-controls
.cancel
-comment
-button
{
1015 margin
-right
: 0.125em
;
1017 .comment
-controls
.edit
-button
::before
{
1018 font
-size
: 0.9375rem
;
1020 .comments
> .comment
-controls
.cancel
-comment
-button
{
1023 .comment
-controls
.cancel
-comment
-button
::before
{
1027 @media only screen
and (max
-width
: 520px
) {
1031 .comment
-controls
:focus
-within
{
1034 .comment
-controls
.cancel
-comment
-button
{
1037 .textarea
-container
:focus
-within textarea
{
1041 width
: calc(100vw
- 4px
);
1042 height
: calc(100%
- 100px
);
1048 #content.conversation-page .textarea-container:focus-within textarea {
1049 height
: calc(100%
- 54px
);
1051 #content.conversation-page .textarea-container:focus-within::after {
1061 .textarea
-container
:focus
-within
.guiedit
-buttons
-container
{
1067 background
-image
: none
;
1068 padding
: 3px
4px
4px
4px
;
1074 .textarea
-container
:focus
-within button
.guiedit
{
1075 font
-size
: 0.9375rem
;
1078 width
: calc((100%
/ 10) - 2px
);
1079 padding
: 10px
1px
8px
0;
1083 .textarea
-container
:focus
-within
.guiedit
-mobile
-auxiliary
-button
{
1087 width
: calc(((100%
- 16px
) / 10) * 2.5 - 7px
);
1089 padding
: 5px
5px
6px
5px
;
1092 .textarea
-container
:focus
-within button
.guiedit sup
{
1094 left
: calc(50% +
0.65em
);
1095 top
: calc(50%
- 1.3em
);
1097 .textarea
-container
:focus
-within
.guiedit
-mobile
-help
-button
{
1100 .textarea
-container
:focus
-within
.guiedit
-mobile
-exit-button
{
1108 #edit-post-form #markdown-hints {
1115 padding
: 4px
0 4px
8px
;
1118 border
-style
: double;
1119 pointer
-events
: none
;
1121 #markdown-hints::after {
1122 content
: "(Type to hide this help box.)";
1125 margin
: 12px
18px
13px
10px
;
1132 /*================*/
1133 /* EDIT POST FORM */
1134 /*================*/
1136 @media only screen
and (max
-width
: 520px
) {
1140 #edit-post-form .post-meta-fields {
1141 grid
-template
-columns
: 4.5em auto auto auto
1fr auto
;
1143 #edit-post-form label[for='url'],
1144 #edit-post-form label[for='section'],
1145 #edit-post-form label[for='title'] {
1148 #edit-post-form .post-meta-fields input[type='checkbox'] + label.iconify {
1149 white
-space
: normal
;
1152 font
-family
: Font Awesome
;
1154 justify
-self
: start
;
1156 #edit-post-form .post-meta-fields .question-checkbox,
1157 #edit-post-form .post-meta-fields .question-checkbox + label {
1161 #edit-post-form .post-meta-fields input[type='radio'] + label {
1164 #edit-post-form .textarea-container:focus-within textarea {
1165 height
: calc(100%
- 101px
);
1169 #markdown-hints-checkbox,
1170 #markdown-hints-checkbox + label {
1174 #edit-post-form div:last-child {
1178 #edit-post-form input[type='submit'] {
1182 margin
: 1rem auto
1.5rem auto
;
1183 padding
: 6px
12px
8px
12px
;
1187 /*===================*/
1188 /* TABLE OF CONTENTS */
1189 /*===================*/
1191 @media only screen
and (max
-width
: 900px
) {
1200 @media only screen
and (max
-width
: 520px
) {
1203 margin
: 1em auto
0 auto
;
1209 div
.post
-body
.contents ul
{
1214 /*========================*/
1215 /* QUALIFIED HYPERLINKING */
1216 /*========================*/
1218 @media only screen
and (max
-width
: 520px
) {
1219 .qualified
-linking
-toolbar
{
1224 } /* END MOBILE LAYOUT */