Fix top margin of main heading on collection pages.
[lw2-viewer.git] / www / css / style-dark.linux.css
blobd0e8275a00d5db37b16168e65ca4fb8340bb97cc
1 body {
2 --invertible-display: none;
3 --inverted-display: initial;
5 /*************/
6 /* VARIABLES */
7 /*************/
9 :root {
10 --GW-comment-background-color-odd: transparent;
11 --GW-comment-background-color-even: transparent;
12 --GW-comment-background-color-target: transparent;
14 --inverted-display: none;
17 /***************/
18 /* BASE LAYOUT */
19 /***************/
21 html {
22 box-sizing: border-box;
23 font-size: 16px;
25 *, *::before, *::after {
26 box-sizing: inherit;
28 script {
29 display: none !important;
32 /*=------=*/
33 /*= Body =*/
34 /*=------=*/
36 body {
37 padding: 0;
38 margin: 0;
40 body::before {
41 background-color: inherit;
42 position: fixed;
43 width: 100%;
44 height: 100%;
47 body.no-scroll {
48 overflow-y: scroll;
49 position: fixed;
50 width: 100%;
53 /*=----------------------------=*/
54 /*= Immediate children of body =*/
55 /*=----------------------------=*/
57 body > * {
58 max-width: 900px;
61 /* Special styles for special browsers.
62 (This one is a fix for Firefox’s built-in screenshot feature.)
64 body > iframe[id^='firefox-screenshots'] {
65 max-width: unset;
68 #content {
69 margin: 0 auto;
70 padding: 0 30px;
71 position: relative;
72 overflow: visible;
73 display: grid;
74 grid-template-columns: 2fr 1fr 2fr;
76 #content::before {
77 content: "";
78 display: block;
79 position: absolute;
80 top: 0;
81 left: 0;
82 width: 100%;
83 height: 100%;
84 z-index: -1;
85 pointer-events: none;
88 /*=---------=*/
89 /*= Content =*/
90 /*=---------=*/
92 #content > * {
93 grid-column: 1 / span 3;
96 /*=----------------------=*/
97 /*= Floating UI elements =*/
98 /*=----------------------=*/
100 #ui-elements-container {
101 position: fixed;
102 height: 100vh;
103 top: 0;
104 left: 0;
105 right: 0;
106 margin: auto;
107 z-index: 10000;
108 pointer-events: none;
110 #ui-elements-container > * {
111 pointer-events: auto;
114 /*=----------------=*/
115 /*= Images overlay =*/
116 /*=----------------=*/
117 /* (To exclude images in posts from theme tweaks) */
119 #images-overlay {
120 position: absolute;
121 z-index: 1;
122 left: 0;
123 right: 0;
124 margin: auto;
127 /***********/
128 /* NAV BAR */
129 /***********/
131 .nav-bar {
132 margin: 0 -30px;
133 display: flex;
134 order: -11;
135 z-index: 1;
138 /*=---------------=*/
139 /*= Nav bar items =*/
140 /*=---------------=*/
142 .nav-item {
143 flex: 1 1 auto;
145 .nav-item * {
146 text-overflow: ellipsis;
147 white-space: nowrap;
148 overflow: hidden;
150 .nav-inner {
151 padding: 12px 30px;
152 text-align: center;
153 display: block;
154 position: relative;
155 line-height: inherit;
156 width: 100%;
157 background: unset;
159 .nav-bar-top:not(#primary-bar) .nav-inner {
160 padding: 4px 0;
163 #nav-item-sequences .nav-inner::before {
164 font-family: "Font Awesome", "Font Awesome 5 Free";
165 content: "\F5DB";
167 @media only screen and (min-width: 901px) {
168 #nav-item-about .nav-inner {
169 margin-right: 0.5em;
171 #nav-item-sequences .nav-inner::before {
172 font-size: 1rem;
173 display: block;
175 #secondary-bar #nav-item-sequences .nav-inner {
176 font-size: 0;
177 line-height: 1.4;
181 /*=------------=*/
182 /*= Bottom bar =*/
183 /*=------------=*/
185 #bottom-bar {
186 order: 11;
188 h1.listing ~ #bottom-bar {
189 margin-top: 1.25em;
191 #bottom-bar .nav-item {
192 flex: 1 1 0;
195 /*=-----------------=*/
196 /*= Accesskey hints =*/
197 /*=-----------------=*/
199 .nav-inner::after {
200 content: attr(accesskey);
201 display: none;
204 /*=---------------=*/
205 /*= Pagination UI =*/
206 /*=---------------=*/
208 #bottom-bar .nav-item a::before,
209 #top-nav-bar a::before {
210 font-family: "Font Awesome", "Font Awesome 5 Free";
211 font-weight: 900;
212 font-size: 0.8em;
213 position: relative;
214 bottom: 1px;
215 margin-right: 0.5em;
217 #bottom-bar #nav-item-first a::before,
218 #top-nav-bar a.nav-item-first::before {
219 content: "\F33e";
221 #bottom-bar #nav-item-top a::before {
222 content: "\F062";
224 #bottom-bar #nav-item-prev a::before,
225 #top-nav-bar a.nav-item-prev::before {
226 content: "\F060";
228 #bottom-bar #nav-item-next a::before,
229 #top-nav-bar a.nav-item-next::before {
230 content: "\F061";
232 #bottom-bar #nav-item-last a::before,
233 #top-nav-bar a.nav-item-last::before {
234 content: "\F340";
236 #bottom-bar #nav-item-next a::before {
237 margin-left: -2em;
238 margin-right: 0;
239 left: 3.8em;
241 #bottom-bar #nav-item-last a::before {
242 margin-left: -1.8em;
243 margin-right: 0;
244 left: 3.4em;
247 /*= Hover tooltips =*/
249 #top-nav-bar a {
250 position: relative;
252 #top-nav-bar a::after {
253 bottom: calc(100% - 3px);
254 content: attr(data-target-page);
256 #top-nav-bar a::after {
257 display: block;
258 position: absolute;
259 font-size: 0.75rem;
260 width: 100%;
261 line-height: 1;
262 visibility: hidden;
264 #top-nav-bar a:hover::after,
265 #bottom-bar a:hover::after {
266 visibility: visible;
269 /*=-----------------------=*/
270 /*= Decorative bottom bar =*/
271 /*=-----------------------=*/
272 /* (On short pages with no pagination) */
274 #bottom-bar.decorative {
275 position: relative;
277 #bottom-bar.decorative .nav-item {
278 display: none;
281 /*=------------=*/
282 /*= Search tab =*/
283 /*=------------=*/
285 #nav-item-search {
286 flex: 4 1 auto;
288 #nav-item-search form::before {
289 content: "\F002";
290 font-family: "Font Awesome", "Font Awesome 5 Free";
291 font-weight: 900;
292 display: inline-block;
293 vertical-align: top;
294 height: 23px;
295 width: 23px;
297 #nav-item-search input {
298 height: 23px;
299 width: calc(95% - 80px);
300 padding: 1px 4px;
302 #nav-item-search button {
303 height: 21px;
306 /*=-----------=*/
307 /*= Login tab =*/
308 /*=-----------=*/
310 #nav-item-login {
311 position: relative;
312 padding-right: 0.5em;
315 /*******************/
316 /* INBOX INDICATOR */
317 /*******************/
319 #inbox-indicator {
320 position: absolute;
321 top: 1px;
322 right: 0;
323 height: 100%;
324 visibility: hidden;
326 #inbox-indicator::before {
327 content: "\F0E0";
328 font-family: "Font Awesome", "Font Awesome 5 Free";
329 color: #393939;
330 font-size: 1.1875rem;
331 position: absolute;
332 height: 100%;
333 right: 0;
334 top: 0;
335 padding: 0 0.45em;
336 visibility: visible;
337 font-weight: 900;
339 #inbox-indicator.new-messages::before {
340 color: #0090e0;
341 text-shadow:
342 0 0 1px #777,
343 0.5px 0.5px 1px #777;
345 a#inbox-indicator:hover::before {
346 color: #000;
347 text-shadow:
348 0 0 1px #fff,
349 0 0 2px #fff,
350 0 0 4px #fff,
351 0 0 1px #777,
352 0.5px 0.5px 1px #777;
354 a#inbox-indicator.new-messages:hover::before {
355 text-shadow:
356 0 0 1px #0090e0,
357 0 0 2px #0090e0,
358 0 0 4px #0090e0,
359 0 0 1px #777,
360 0.5px 0.5px 1px #777;
363 /****************/
364 /* PAGE TOOLBAR */
365 /****************/
367 .page-toolbar {
368 font-size: 0.9em;
369 line-height: 1.8;
370 text-align: right;
371 margin-right: -20px;
373 #content > .page-toolbar {
374 grid-column: 3;
375 grid-row: span 3;
377 #content.user-page > .page-toolbar {
378 grid-column: 2 / span 2;
379 order: -4;
382 /*=--------------------------=*/
383 /*= Page toolbar items (all) =*/
384 /*=--------------------------=*/
386 .page-toolbar > * {
387 display: inline-block;
388 margin-left: 1.5em;
390 .page-toolbar > form button {
391 padding: 0;
392 text-align: right;
393 white-space: unset;
395 .page-toolbar > form button::before {
396 text-align: center;
398 .page-toolbar .button::before {
399 font-family: "Font Awesome", "Font Awesome 5 Free";
400 font-size: 0.9em;
401 padding-right: 0.3em;
404 /*=-------------------------------=*/
405 /*= Page toolbar items (specific) =*/
406 /*=-------------------------------=*/
408 .new-post::before {
409 content: '\F067';
410 font-weight: 900;
412 .new-private-message::before {
413 content: '\F075';
414 font-weight: 400;
416 .logout-button::before {
417 content: '\F2F5';
418 font-weight: 900;
420 #enable-push-notifications::before {
421 content: '\F0F3';
422 font-weight: 400;
424 .ignore-button::before {
425 content: "\F070";
426 font-weight: 400;
428 .unignore-button::before {
429 content: "\F06E";
430 font-weight: 400;
432 .rss::before {
433 content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiANCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJSU1NpY29uIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+DQo8ZGVmcz4NCjxsaW5lYXJHcmFkaWVudCB4MT0iMC4wODUiIHkxPSIwLjA4NSIgeDI9IjAuOTE1IiB5Mj0iMC45MTUiIGlkPSJSU1NnIj4NCjxzdG9wICBvZmZzZXQ9IjAuMCIgc3RvcC1jb2xvcj0iI0UzNzAyRCIvPjxzdG9wICBvZmZzZXQ9IjAuMTA3MSIgc3RvcC1jb2xvcj0iI0VBN0QzMSIvPg0KPHN0b3AgIG9mZnNldD0iMC4zNTAzIiBzdG9wLWNvbG9yPSIjRjY5NTM3Ii8+PHN0b3AgIG9mZnNldD0iMC41IiBzdG9wLWNvbG9yPSIjRkI5RTNBIi8+DQo8c3RvcCAgb2Zmc2V0PSIwLjcwMTYiIHN0b3AtY29sb3I9IiNFQTdDMzEiLz48c3RvcCAgb2Zmc2V0PSIwLjg4NjYiIHN0b3AtY29sb3I9IiNERTY0MkIiLz4NCjxzdG9wICBvZmZzZXQ9IjEuMCIgc3RvcC1jb2xvcj0iI0Q5NUIyOSIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiByeD0iNTUiIHJ5PSI1NSIgeD0iMCIgIHk9IjAiICBmaWxsPSIjQ0M1RDE1Ii8+DQo8cmVjdCB3aWR0aD0iMjQ2IiBoZWlnaHQ9IjI0NiIgcng9IjUwIiByeT0iNTAiIHg9IjUiICB5PSI1IiAgZmlsbD0iI0Y0OUM1MiIvPg0KPHJlY3Qgd2lkdGg9IjIzNiIgaGVpZ2h0PSIyMzYiIHJ4PSI0NyIgcnk9IjQ3IiB4PSIxMCIgeT0iMTAiIGZpbGw9InVybCgjUlNTZykiLz4NCjxjaXJjbGUgY3g9IjY4IiBjeT0iMTg5IiByPSIyNCIgZmlsbD0iI0ZGRiIvPg0KPHBhdGggZD0iTTE2MCAyMTNoLTM0YTgyIDgyIDAgMCAwIC04MiAtODJ2LTM0YTExNiAxMTYgMCAwIDEgMTE2IDExNnoiIGZpbGw9IiNGRkYiLz4NCjxwYXRoIGQ9Ik0xODQgMjEzQTE0MCAxNDAgMCAwIDAgNDQgNzMgViAzOGExNzUgMTc1IDAgMCAxIDE3NSAxNzV6IiBmaWxsPSIjRkZGIi8+DQo8L3N2Zz4NCg==');
434 display: inline-block;
435 width: 1em;
436 padding-right: 0.2em;
437 position: relative;
438 top: 1px;
441 /*********************/
442 /* TOP PAGINATION UI */
443 /*********************/
445 #top-nav-bar {
446 grid-column: 2;
447 margin: 0.25em 0 0 0;
448 padding: 0.75em 0 0 0;
449 text-align: center;
450 font-size: 1.25em;
451 display: flex;
452 justify-content: center;
454 #top-nav-bar a {
455 line-height: 1;
457 #top-nav-bar a.disabled {
458 pointer-events: none;
459 visibility: hidden;
461 #top-nav-bar .page-number {
462 position: relative;
463 display: inline-block;
464 width: 1.5em;
466 #top-nav-bar .page-number-label {
467 position: absolute;
468 font-size: 0.5em;
469 text-transform: uppercase;
470 width: 100%;
471 bottom: 90%;
472 left: 0;
474 #top-nav-bar a::before {
475 margin: 0.5em;
476 display: inline-block;
479 /****************/
480 /* SUBLEVEL NAV */
481 /****************/
483 .sublevel-nav {
484 text-align: center;
485 display: flex;
486 justify-content: center;
487 margin: 1em 0 0 0;
489 #content > .sublevel-nav:not(.sort) {
490 grid-column: 2;
491 align-self: start;
493 .sublevel-nav .sublevel-item {
494 flex: 0 0 6em;
495 padding: 0.125em 0.5em;
496 font-size: 1.125rem;
498 .sublevel-nav .sublevel-item:active {
499 transform: none;
501 .sublevel-nav .sublevel-item.selected {
502 cursor: default;
505 /***********************/
506 /* SORT ORDER SELECTOR */
507 /***********************/
509 .sublevel-nav.sort {
510 position: relative;
511 margin-top: 8px;
512 font-size: 0.75em;
514 #content > .sublevel-nav.sort {
515 grid-column: 3;
516 grid-row: span 2;
517 justify-self: end;
518 align-self: start;
519 flex-flow: column;
521 #content.index-page > .sublevel-nav.sort {
522 grid-column: 1;
523 justify-self: start;
524 flex-flow: row;
527 .sublevel-nav.sort::before {
528 content: "Sort";
529 font-size: 0.75rem;
530 position: absolute;
531 top: 0;
532 left: 0;
533 width: 100%;
535 .sublevel-nav.sort .sublevel-item {
536 line-height: 1;
537 font-size: 0.875rem;
538 flex-basis: unset;
541 /*******************************/
542 /* COMMENTS SORT MODE SELECTOR */
543 /*******************************/
545 .comments > .sublevel-nav.sort {
546 margin: 1em auto 0 auto;
548 @supports (width: -moz-fit-content) {
549 .comments > .sublevel-nav.sort {
550 width: -moz-fit-content;
553 @supports (width: fit-content) {
554 .comments > .sublevel-nav.sort {
555 width: fit-content;
559 /******************/
560 /* WIDTH SELECTOR */
561 /******************/
563 #width-selector {
564 position: absolute;
565 top: 4px;
566 right: -78px;
568 #width-selector button {
569 width: 22px;
570 height: 22px;
571 padding: 6px;
572 margin: 1px;
573 overflow: hidden;
574 background-repeat: no-repeat;
575 background-size: 100%;
576 background-origin: content-box;
578 #width-selector button,
579 #width-selector button:active,
580 #width-selector button:focus {
581 text-shadow: none;
582 color: transparent;
584 #width-selector button:disabled {
585 cursor: auto;
587 #width-selector button.select-width-normal {
588 background-image: url('data:image/gif;base64,R0lGODdhFAAUAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAUABQAAAIqnI+py+0PU5hB0Sqp1Xlu32HI9YkHGZZqyo6cC8Kmgcqr3Z5vxPf+nygAADs=');
590 #width-selector button.select-width-wide {
591 background-image: url('data:image/gif;base64,R0lGODdhFAAUAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAUABQAAAIrnI+py+0PT5jB0TqupUY37zEg95HhMk6bmpGi6aIw+7KnkmK1HvX+DzwUAAA7');
593 #width-selector button.select-width-fluid {
594 background-image: url('data:image/gif;base64,R0lGODdhFAAUAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAUABQAAAIwnI+py+0/ApIwUGOfvTGzzYELGIoTiZpdylJte7xoQp7beMc5XnL4CYlMgsSisVEAADs=');
597 /*=----------------=*/
598 /*= Hover tooltips =*/
599 /*=----------------=*/
601 #width-selector button::after {
602 content: attr(data-name);
603 position: absolute;
604 display: block;
605 left: 0;
606 width: 100%;
607 text-align: center;
608 top: 56px;
609 visibility: hidden;
611 #width-selector button.selected::after {
612 content: attr(data-name) " (selected)";
614 #width-selector button:hover:not(:active)::after {
615 visibility: visible;
618 head.content-width-normal + body > * {
619 max-width: 900px;
621 head.content-width-wide + body > * {
622 max-width: 1150px;
624 head.content-width-fluid + body > * {
625 max-width: calc(100% - 300px);
628 /******************/
629 /* THEME SELECTOR */
630 /******************/
632 #theme-selector {
633 position: absolute;
634 top: 3px;
635 left: -41px;
636 opacity: 0.4;
637 display: table;
638 max-width: 40px;
640 #theme-selector:hover {
641 opacity: 1.0;
644 /*=----------------------=*/
645 /*= Theme select buttons =*/
646 /*=----------------------=*/
648 .theme-selector button {
649 display: table-cell;
650 width: 26px;
651 height: 26px;
652 padding: 5px;
653 margin: 1px 7px 0 7px;
654 color: transparent;
655 background-size: 16px 16px;
656 background-origin: content-box;
658 .theme-selector button,
659 .theme-selector button:hover,
660 .theme-selector button:active,
661 .theme-selector button:focus {
662 text-shadow: none;
663 color: transparent;
665 .theme-selector button:disabled {
666 cursor: auto;
669 /*=----------------------------=*/
670 /*= Pre-rendered button images =*/
671 /*=----------------------------=*/
672 /* (Each is just a capital letter A through whatever) */
674 .theme-selector button:nth-of-type(1) {
675 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMQAAAA0NDRYWFhwcHCIiIioqKjU1NTs7O0BAQEtLS09PT1ZWVlxcXGNjY2VlZWZmZmpqamxsbG1tbXd3d4WFhYeHh46OjpaWlpubm6Ojo6ampqysrK+vr7GxsbKysra2tr29vcDAwMnJyc3NzdLS0tra2tvb293d3d/f3+Tk5Ofn5+rq6uvr6+3t7e7u7vHx8fb29vf39/r6+vv7+/39/f7+/v///38AAA8AAAAAAAAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGmUCbcEgsGo/IpHLJbDqf0Kh0Sq0eQwHCyVqsKQAACpdYAgMGrrGwYgZs1C9C+zAbc9rgEZeGwAMiXCRmHRdgAipWE4YtJmYYVSwCYBI2NQxgBDBUGWYSHh+SYCBTMgZ+bQs0UiKneCVRNRBmCw61DwlmYlApZnREMQVgaFCFYBpGFmZvTjRfAAIrRihmDTVq19jZ2tvc3d5CQQA7');
677 .theme-selector button:nth-of-type(2) {
678 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMQAAAA0NDRwcHCYmJioqKk1NTVVVVV1dXWJiYmNjY3d3d35+foiIiIuLi5aWlq2trbOzs7S0tLm5ucXFxcrKysvLy83NzdLS0tXV1dbW1tra2tvb2+Xl5ebm5ujo6Onp6e3t7e7u7vT09Pb29vf39/j4+Pv7+/39/f7+/v///wAAwKwtDQEAAAAQrAUAAGAAABUAAAAAAAAAEKwFAABgAABQ4VxT/38AAA8AAAAAAAAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGj0CAcEgsGo/IpHLJbDqf0Kh0Sq0KAx0TaUsqcRzWQChFLpM/BGoAZG5P1OyUiXI5lUeD6ZosEgAWd2lSeykieQllhnpxJAoMH2UZcG1lIYKDcZQhBpOUZCcFi2QjaQgeZRaiKXhCDWUaqn1CD6+qKRIQGGYbtpQoC3pjnikRapBtIhUHVszNzs/Q0dLT1ENBADs=');
680 .theme-selector button:nth-of-type(3) {
681 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMe7m4+7n5O7o5e7q6e7t7e7u7u/f2O/f2e/g2u/i3PDa0fDb0/Dc1PDd1fDd1vLAq/LKufLKuvLMvfLQwvO4oPO6o/O7pPO8pfO9pvPAq/PBrfPFsvSylvS4n/Wqi/Wxlfakg/aoiPaqi/eadPeeefiMYPiRZ/iTafiTaviUa/iWbfiXb/iYcfqBUPqCUft0Pft3Qft7RvxvNvxxOPx0PPx1Pf1mKP1nKf1nKv1pLP1pLf1qLv1rL/1sMP1tMgAAACwAAAAAIAAgAAAGnsCCcEgsGo/IpHLJbDqf0Kh0Cl1AIBEHtciR2b5f3wpBNbzA6C+OIVXo0mlcI0qAoWmhi8f1jRGiHWgkRQctInQ1YCZbRQlvNnKMRI5fMwOSQxlgJZhDG2B+nQUJOV88AaIAO2AsogUnaCBFBCojUpRgNR8QGiulPQJSgXBpFVMPpcQ2Nw9UAik3aTcoZIwEEhQWGBN/rt7f4OHi451BADs=');
683 .theme-selector button:nth-of-type(4) {
684 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMYiHh4iIiImGhYqGhYuHhYyGg46Gg5CFgJKEfpKFf5WDfJeEfJiCeZmDeZqCeZuCd56BdZ+AdKZ/cKd/bq19abJ8ZbZ6Ybd5YMR1VctzUMxzT8x0UNJxStNxSdNyStRxSddwRthvRNlvRNtvQ99uQOFuPuRsO+ZtO+dsOuhsOOtrNuxrNvBpMfBpMvNoL/ZnLPZoLvhnLPlmKvpmKvtnKvxmKPxmKf1mKA8AAAAAAAAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGn8CAcEgsGo/IpHLJbDqf0Kh0Sq0KBauX9iVrZRBWBe1GLpM11cSsZplMKqIaOTWYqmsM4uFEBtnXD0UAKDc1EVJ3gUUNNjcjiIBHITcsAlGJRxw3MASXkUYVm3VQmEYbNy6jT6VFHZudpJ9EBjI3JZA1ikQeZBe4ugEAH2QqALgUDQ4QGDFkMgt/ZmYmBVRq0i8kElbc3d7f4OHi4+REQQA7');
686 .theme-selector button:nth-of-type(5) {
687 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMQAw5wMy5gc15hI95RQ/5BhC4xtE5CZN4idN4Upo3Zai05um0p2o0qCq0aKr0aqy0Kyz0K200K+10LK4z7q+zru/zry/zr3Azr7Bzr/CzsDDzsHDzcTGzcnJzMrKzMzMzCwAAAAAIAAgAAAFbeAnjmRpnmiqrmzrvnAsz3Q9esmB7Hxh1ZsBYEgEBCo1DkHgmEiez05ymbGZlIKflYRFbkfY6lekBOh4hoitXBwq1kuG5EF/aOAC8Rir3S/7X3xjZEsQGBSIFBdwbUQNU41DC4OUlZaXmJmaViEAOw==');
689 .theme-selector button:nth-of-type(6) {
690 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMQAAAA0NDS4uLjU1NTg4OElJSVZWVmNjY21tbaOjo62trbOzs8XFxcvLy8zMzNDQ0Nvb2+Dg4OHh4ePj4+Xl5e7u7vLy8v39/f///4n/fwAAwKwtDQEAAAAeBwAAAAAAACwAAAAAIAAgAAAFWiAmjmRpnmiqrmzrvnAsz3RNJkKh70NlH4CgEBDw1RCABSXCZF5syIfthGxMTdVrKasdIQGGHWEy/Q4BjDJAIYG4IRa1tCvi0u1dvFZ/5asddIGCg4SFhoeDIQA7');
692 .theme-selector button:nth-of-type(7) {
693 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMWcEFG4QH3QZKHcfLXslM4AtOYIxPYQ1QYY4Q4tAS5VPWZpYYbKAhrSCh7iJjruPk72RlcWfosikp8qnqsyrrNK1tdO2tta7u9e+vtzExOTS0ebV0+bW1OfX1ejY1ujZ1+na1+nb2Ozf3Ozg3e3h3u7i3+/k4fDm4/Ho5PLq5vPr5/Ts6PXu6vfx7fjz7/j07/n18Pr28fr38vv48/v59Pz69f379v389/79+P//+gAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGssCccEgsGo/IpHLJbDqf0Kh0CmWhVi5q0TYhAL6AwySmFRXAaEAANOWAIScbjRT5fqQzBEAQMrYoOFIWamxaRTV6DIZGL2cbi0UgAAMtRDAyM5kzMlGSAixDjWkJN1Adk6BComgLgU8nAgEllpg2GgAKrk4yZw9IkrlRD3uzRsC6TioCAAQmRh4ArVIXYBKpMBhepFMZaAYHaBVaLA5pAA0pkDQjISEmM5Dx8vP09fb3UUEAOw==');
695 .theme-selector button:nth-of-type(8) {
696 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMVONTVSNTlaPUFeQUViQUlmRU2yeZ3Cga3KhbYKsfqbEo6jGpazIqbLMr7PNsMHWvsHWv8LXwMPXwejw5+nw6Orx6e/07vH28PX49Pf69vn7+fv9+/z9/P7//v///wAAACwAAAAAIAAgAAAFe6AnjmRpnmiqrmzrvnAsz3Rts52zbKamNBxZxwB4mC6CAEWIKJowhECF6SxBpVSjNTqNdZqSJ5fKyFzO58kA620C3nA4G/YFEAr4fAEwf9UhYn0udVokV110TYUjh1mBiH6Kj0IHVYZRS14JABFiAhY3oaKjpKWmp6g2IQA7');
698 .theme-selector button:nth-of-type(9) {
699 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMZLDlpPDl5XEmJfFmpfGm5rHnZ3JoKjPq6nPrLXWuL/cwe317e317vb69vz9/P3+/f7//v///wAAQBsmAIBgAAAQhqFS/38AAO86GpX/fwAAwAzpDQEAAAAeBwAAAAAAACwAAAAAIAAgAAAFT2AkjmRpnmiqrmzrvnAsz3RtQsig2OYSAAdeifELCkcNAfA4ghiWzIgTypwaq8/r0RqVZrvcaBhLPT4KZSExzVtrhQ4CINGt2+/4vH4/CwEAOw==');
702 /*=------------------------------=*/
703 /*= Theme select button tooltips =*/
704 /*=------------------------------=*/
705 /* (with the name & description of the theme that each button selects) */
707 #theme-selector button {
708 position: relative;
709 z-index: 1;
711 #theme-selector button::before {
712 content: attr(data-theme-name);
713 position: absolute;
714 top: 0;
715 right: 100%;
716 padding: 5px 6px 6px 6px;
717 line-height: 1;
718 width: 6em;
719 text-align: right;
720 z-index: 1;
721 visibility: hidden;
723 #theme-selector:hover button::before {
724 visibility: visible;
726 #theme-selector:hover ~ #theme-tweaker-toggle,
727 #theme-selector:active ~ #theme-tweaker-toggle {
728 z-index: -1;
731 /************************/
732 /* THEME TWEAKER TOGGLE */
733 /************************/
735 #theme-tweaker-toggle {
736 position: absolute;
737 top: 7px;
738 left: -75px;
740 #theme-tweaker-toggle button {
741 font-family: "Font Awesome", "Font Awesome 5 Free";
742 font-weight: 900;
743 font-size: 1.25rem;
744 opacity: 0.4;
745 z-index: 1;
747 #theme-tweaker-toggle button:hover {
748 opacity: 1.0;
751 /*******************/
752 /* QUICKNAV WIDGET */
753 /*******************/
755 #quick-nav-ui {
756 position: absolute;
757 right: -67px;
758 bottom: 20px;
760 #quick-nav-ui a {
761 font-family: "Font Awesome", "Font Awesome 5 Free";
762 font-weight: 900;
763 font-size: 1.5rem;
764 line-height: 1.7;
765 text-align: center;
766 display: block;
767 width: 40px;
768 height: 40px;
769 margin: 10px 0 0 0;
771 #quick-nav-ui a[href='#comments'].no-comments {
772 pointer-events: none;
774 #quick-nav-ui a {
775 visibility: hidden;
777 #content.post-page ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
778 visibility: visible;
781 /************************/
782 /* NEW COMMENT QUICKNAV */
783 /************************/
785 #new-comment-nav-ui {
786 position: absolute;
787 right: -112px;
788 bottom: 42px;
790 #new-comment-nav-ui > * {
791 display: block;
792 position: relative;
794 #new-comment-nav-ui.no-comments {
795 display: none;
798 /*=--------------------=*/
799 /*= New comments count =*/
800 /*=--------------------=*/
802 #new-comment-nav-ui .new-comments-count {
803 width: 2em;
804 font-size: 1.25rem;
805 line-height: 1.1;
806 text-align: center;
807 left: 1px;
808 cursor: pointer;
810 #new-comment-nav-ui .new-comments-count::selection {
811 background-color: transparent;
813 #new-comment-nav-ui .new-comments-count::after {
814 content: "NEW";
815 display: block;
816 font-size: 0.625rem;
819 /*=-----------------------------------=*/
820 /*= Next/previous new comment buttons =*/
821 /*=-----------------------------------=*/
823 #new-comment-nav-ui .new-comment-sequential-nav-button {
824 font-size: 1.75rem;
825 font-family: "Font Awesome", "Font Awesome 5 Free";
826 font-weight: 900;
827 width: 1.5em;
828 z-index: 5001;
830 #new-comment-nav-ui .new-comment-previous {
831 top: 8px;
833 #new-comment-nav-ui .new-comment-next {
834 bottom: 6px;
836 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
837 cursor: auto;
838 pointer-events: none;
841 /*******************/
842 /* HNS DATE PICKER */
843 /*******************/
845 #hns-date-picker {
846 position: absolute;
847 bottom: 72px;
848 right: -253px;
849 opacity: 0.6;
851 #hns-date-picker:hover,
852 #hns-date-picker:focus-within {
853 opacity: 1.0;
855 #hns-date-picker.no-comments {
856 display: none;
859 /*=---------------=*/
860 /*= "Since" label =*/
861 /*=---------------=*/
863 #hns-date-picker span {
864 display: block;
865 font-size: 0.75rem;
866 text-transform: uppercase;
869 /*=--------------------=*/
870 /*= "Since" text field =*/
871 /*=--------------------=*/
873 #hns-date-picker input {
874 margin-top: 1px;
875 padding: 1px 3px;
876 width: 140px;
877 text-align: center;
878 box-shadow: 0 0 0 1px transparent;
881 /************************/
882 /* ANTI-KIBITZER TOGGLE */
883 /************************/
885 #anti-kibitzer-toggle {
886 position: absolute;
887 right: -67px;
888 bottom: 225px;
890 #anti-kibitzer-toggle button {
891 display: block;
892 width: 40px;
893 height: 54px;
894 padding: 0;
896 #anti-kibitzer-toggle button::before,
897 #anti-kibitzer-toggle button::after {
898 font-family: "Font Awesome", "Font Awesome 5 Free";
900 #anti-kibitzer-toggle button::before {
901 content: "\F06E";
902 display: block;
903 font-size: 1.75em;
904 font-weight: 400;
906 #anti-kibitzer-toggle button::after {
907 content: "\F007\2004\F164";
908 font-size: 0.875em;
909 font-weight: 900;
911 #anti-kibitzer-toggle.engaged button::before {
912 content: "\F070";
915 /************************/
916 /* TEXT SIZE ADJUSTMENT */
917 /************************/
919 #text-size-adjustment-ui {
920 position: absolute;
921 top: 30px;
922 right: -78px;
923 opacity: 0.4;
925 #text-size-adjustment-ui:hover {
926 opacity: 1.0;
929 /* This doesn't work in Mozilla browsers, so hide it */
930 @-moz-document url-prefix() {
931 #text-size-adjustment-ui {
932 display: none;
936 /*=---------=*/
937 /*= Buttons =*/
938 /*=---------=*/
940 #text-size-adjustment-ui button {
941 font-weight: 900;
942 font-family: "Font Awesome", "Font Awesome 5 Free";
943 font-size: 0.75rem;
944 width: 24px;
945 height: 24px;
946 padding: 0;
948 #text-size-adjustment-ui button.default {
949 font-family: inherit;
950 font-size: 1.125rem;
951 position: relative;
952 top: 1px;
954 #text-size-adjustment-ui button:disabled {
955 opacity: 0.5;
957 #text-size-adjustment-ui button:disabled:hover {
958 cursor: default;
961 /*=----------------=*/
962 /*= Hover tooltips =*/
963 /*=----------------=*/
965 #text-size-adjustment-ui::after {
966 content: "Adjust text size";
967 position: absolute;
968 display: block;
969 left: 0;
970 width: 100%;
971 text-align: center;
972 top: 32px;
973 visibility: hidden;
974 font-size: 0.9em;
976 #text-size-adjustment-ui:hover::after {
977 visibility: visible;
980 /*******************************/
981 /* COMMENTS VIEW MODE SELECTOR */
982 /*******************************/
984 #comments-view-mode-selector {
985 position: absolute;
986 bottom: 30px;
987 left: -40px;
988 opacity: 0.6;
990 #comments-view-mode-selector:hover {
991 opacity: 1.0;
994 /*=---------=*/
995 /*= Buttons =*/
996 /*=---------=*/
998 #comments-view-mode-selector a {
999 display: block;
1000 font-family: "Font Awesome", "Font Awesome 5 Free";
1001 font-size: 1.25rem;
1002 text-align: center;
1003 opacity: 0.4;
1004 padding: 0.25em;
1005 z-index: 1;
1007 #comments-view-mode-selector a.threaded {
1008 transform: scaleY(-1);
1009 font-weight: 900;
1011 #comments-view-mode-selector a.chrono {
1012 font-weight: normal;
1014 #comments-view-mode-selector a.selected,
1015 #comments-view-mode-selector a:hover {
1016 opacity: 1.0;
1017 text-decoration: none;
1019 #comments-view-mode-selector a.selected {
1020 cursor: default;
1023 /*****************/
1024 /* KEYBOARD HELP */
1025 /*****************/
1027 #keyboard-help-overlay {
1028 width: 100vw;
1029 height: 100vh;
1030 background-color: rgba(255, 255, 255, 0.7);
1031 position: fixed;
1032 left: 0;
1033 top: 0;
1034 z-index: 5001;
1036 display: flex;
1037 justify-content: center;
1038 align-items: center;
1039 padding: 20px 30px 30px 20px;
1041 visibility: hidden;
1044 #keyboard-help-overlay .keyboard-help-container {
1045 background-color: #000;
1046 filter: drop-shadow(4px 4px 2px #fff);
1047 flex: 1 1 auto;
1048 max-width: 1500px;
1049 max-height: 100%;
1050 overflow-y: auto;
1051 position: relative;
1053 #keyboard-help-overlay .keyboard-help-container h1 {
1054 text-align: center;
1055 border-bottom: 1px solid #1f1f1f;
1056 margin: 0;
1057 padding: 10px 20px;
1059 #keyboard-help-overlay .keyboard-help-container .note {
1060 margin: 0.5em auto;
1061 padding: 0 1em;
1062 width: fit-content;
1064 #keyboard-help-overlay .keyboard-help-container .keyboard-shortcuts-lists {
1065 column-width: 21em;
1066 column-count: auto;
1067 column-gap: 1.5em;
1068 border-top: 1px solid #1f1f1f;
1069 padding: 15px 20px;
1071 #keyboard-help-overlay .keyboard-help-container ul {
1072 list-style-type: none;
1073 margin: 0;
1074 padding: 0;
1075 break-inside: avoid;
1076 white-space: nowrap;
1078 #keyboard-help-overlay .keyboard-help-container ul:nth-of-type(n+2) {
1079 margin: 20px 0 0 0;
1081 #keyboard-help-overlay .keyboard-help-container ul li.section {
1082 font-weight: bold;
1083 font-size: 1.125rem;
1084 break-after: avoid;
1086 #keyboard-help-overlay .keyboard-help-container .keys {
1087 margin: 0 0.5em 0 0;
1088 min-width: 4.5em;
1089 display: inline-block;
1091 #keyboard-help-overlay .keyboard-help-container .keys code {
1092 margin: 0 6px 0 0;
1094 #keyboard-help-overlay .keyboard-help-container code {
1095 display: inline-block;
1096 background-color: #131313;
1097 border: 1px solid #2c2c2c;
1098 padding: 3px 8px 4px 8px;
1099 margin: 0 1px;
1101 #keyboard-help-overlay .keyboard-help-container code.ak {
1102 background-color: #001b5f;
1103 border-color: #0052bc;
1105 #keyboard-help-overlay .keyboard-help-container code.ak::before {
1106 content: "ak+";
1107 opacity: 0.3;
1110 #nav-item-about button.open-keyboard-help {
1111 display: none;
1113 @media only screen and (hover:hover) and (pointer:fine) {
1114 #nav-item-about {
1115 position: relative;
1116 padding-right: 0.25em;
1118 #nav-item-about button.open-keyboard-help {
1119 font-family: "Font Awesome", "Font Awesome 5 Free";
1120 font-weight: 900;
1121 position: absolute;
1122 top: 0;
1123 right: 0;
1124 height: 100%;
1125 padding: 8px;
1126 display: initial;
1127 line-height: 1;
1128 background-color: transparent;
1132 #keyboard-help-overlay button.close-keyboard-help {
1133 position: absolute;
1134 right: 0;
1135 top: 0;
1136 font-family: "Font Awesome", "Font Awesome 5 Free";
1137 font-size: 1.5rem;
1138 padding: 10px 12px;
1141 /************/
1142 /* ARCHIVES */
1143 /************/
1145 .archive-nav {
1146 margin: 1.25em 0.5em 0 0.5em;
1147 padding: 0.25em;
1149 .archive-nav > * {
1150 display: flex;
1152 .archive-nav *[class^='archive-nav-item'] {
1153 line-height: 1;
1154 flex: 1 1 5%;
1155 text-align: center;
1156 padding: 6px 4px 4px 4px;
1157 max-width: 8%;
1159 @-moz-document url-prefix() {
1160 .archive-nav *[class^='archive-nav-item'] {
1161 padding: 5px 4px;
1164 .archive-nav-days .archive-nav-item-day {
1165 font-size: 0.8em;
1166 padding: 7px 0 5px 0;
1167 max-width: 4%;
1169 .archive-nav-days .archive-nav-item-day:first-child {
1170 flex-basis: 10%;
1173 /************/
1174 /* ARCHIVES */
1175 /************/
1177 .archive-nav {
1178 margin: 1.25em 0.5em 0 0.5em;
1179 padding: 0.25em;
1181 .archive-nav > * {
1182 display: flex;
1184 .archive-nav *[class^='archive-nav-item'] {
1185 line-height: 1;
1186 flex: 1 1 5%;
1187 text-align: center;
1188 padding: 6px 4px 4px 4px;
1189 max-width: 8%;
1191 @-moz-document url-prefix() {
1192 .archive-nav *[class^='archive-nav-item'] {
1193 padding: 5px 4px;
1196 .archive-nav-days .archive-nav-item-day {
1197 font-size: 0.8em;
1198 padding: 7px 0 5px 0;
1199 max-width: 4%;
1201 .archive-nav-days .archive-nav-item-day:first-child {
1202 flex-basis: 10%;
1205 /************/
1206 /* LISTINGS */
1207 /************/
1209 h1.listing {
1210 font-size: 1.875rem;
1211 line-height: 1.15;
1212 max-height: 1.15em;
1213 position: relative;
1216 h1.listing a {
1217 position: relative;
1220 /* Links to link-posts (not the link-post links themselves; that's below) */
1221 h1.listing .link-post-link + a {
1222 margin-left: 0.25em;
1225 h1.listing .link-post-link {
1226 font-size: 0.8em;
1227 display: inline;
1228 vertical-align: top;
1229 position: relative;
1230 top: 4px;
1233 /*=----------------------=*/
1234 /*= Listing hover reveal =*/
1235 /*=----------------------=*/
1236 /* (On desktops, hover over a multi-line listing to reveal all of it) */
1238 @media only screen and (min-width: 1160px) {
1239 h1.listing a {
1240 max-width: 100%;
1241 display: inline-block;
1242 white-space: nowrap;
1243 text-overflow: ellipsis;
1244 overflow: hidden;
1245 border-bottom: 1px solid transparent;
1246 -webkit-hyphens: auto;
1247 -moz-hyphens: auto;
1248 -ms-hyphens: auto;
1249 hyphens: auto;
1250 z-index: 1;
1251 padding: 0 0 1px 1px;
1253 h1.listing .link-post-link + a {
1254 max-width: calc(100% - 40px);
1256 h1.listing a:hover,
1257 h1.listing a:focus {
1258 text-decoration: dotted underline;
1259 white-space: initial;
1260 overflow: visible;
1261 z-index: 2;
1263 h1.listing:focus-within::before {
1264 content: "\F105";
1265 font-family: "Font Awesome", "Font Awesome 5 Free";
1266 display: block;
1267 position: absolute;
1268 left: -0.75em;
1271 /* Adds hysteresis to the hover area (i.e., prevents oscillation due to small
1272 mouse movements) */
1274 h1.listing a:not(.edit-post-link):hover::before {
1275 content: "";
1276 position: absolute;
1277 top: -10px;
1278 right: -10px;
1279 bottom: -10px;
1280 left: -10px;
1281 z-index: -1;
1283 h1.listing .link-post-link:hover {
1284 text-decoration: none;
1288 /*=-----------------------=*/
1289 /*= In-listing edit links =*/
1290 /*=-----------------------=*/
1292 h1.listing .edit-post-link {
1293 position: absolute;
1294 margin: 0;
1297 /*=---------------------------------=*/
1298 /*= Error messages on listing pages =*/
1299 /*=---------------------------------=*/
1301 .listing-message {
1302 width: 100%;
1303 text-align: center;
1304 padding: 1.25em 0 1.25em 0;
1305 font-size: 1.375em;
1308 /*********************/
1309 /* LISTING POST-META */
1310 /*********************/
1312 h1.listing + .post-meta {
1313 position: relative;
1314 justify-content: flex-start;
1315 margin: 0 20px 0 21px;
1318 h1.listing + .post-meta > * {
1319 margin: 0 1em 0 0;
1322 h1.listing + .post-meta .post-section {
1323 width: 0;
1324 margin: 0;
1325 overflow: hidden;
1327 h1.listing + .post-meta .post-section::before {
1328 position: absolute;
1329 left: -36px;
1332 h1.listing + .post-meta .read-time {
1333 cursor: default;
1336 /********************/
1337 /* SEQUENCES & TAGS */
1338 /********************/
1340 .sequence-text, .tag-description {
1341 font-size: 1.2rem;
1342 padding: 0 22px;
1345 #content.tag-index-page .tag-description {
1346 margin: 1em 0 0;
1349 section {
1350 max-width: 100%;
1351 margin-top: 2em;
1352 margin-bottom: 4em;
1355 h1.sequence-chapter {
1356 font-size: 2.3rem;
1359 article {
1360 max-width: 100%;
1363 .post-meta + .comments {
1364 margin-top: 3em;
1367 .tag-list {
1368 column-count: auto;
1369 column-width: 15em;
1370 margin-top: 0;
1371 border-bottom: 1px solid #575756;
1372 padding-bottom: 1em;
1373 margin-bottom: 0;
1376 #content.sequence-page h1 {
1377 margin-top: 0.1em;
1380 /**************/
1381 /* USER PAGES */
1382 /**************/
1384 /*=---------------------=*/
1385 /*= User's display name =*/
1386 /*=---------------------=*/
1388 #content.user-page h1.page-main-heading {
1389 margin: 0.25em 0 0 0;
1390 line-height: 1.1;
1391 grid-column: 1 / span 2;
1392 order: -2;
1395 #content.user-page h1.page-main-heading .user-full-name {
1396 font-size: 1rem;
1397 font-weight: normal;
1398 padding-left: 0.5em;
1401 /*=--------------------=*/
1402 /*= User's karma total =*/
1403 /*=--------------------=*/
1405 #content.user-page .user-stats {
1406 grid-column: 3;
1407 order: -2;
1408 text-align: right;
1409 align-self: end;
1412 #content.user-page .user-stats .karma-type {
1413 white-space: nowrap;
1416 /*=----------------------=*/
1417 /*= Expanded vs. compact =*/
1418 /*=----------------------=*/
1420 #content.user-page #comments-list-mode-selector {
1421 grid-row: span 2;
1423 #content.user-page #comments-list-mode-selector button {
1424 display: block;
1427 /*=----------------------------------------------------=*/
1428 /*= All, Posts, Comments, Drafts, Conversations, Inbox =*/
1429 /*=----------------------------------------------------=*/
1431 #content.user-page .sublevel-nav {
1432 margin-bottom: 0.5em;
1435 /*=--------------=*/
1436 /*= User's posts =*/
1437 /*=--------------=*/
1439 #content.user-page h1.listing {
1440 margin: 0.5em 0 0 0;
1443 #content.user-page .user-bio :first-child {
1444 margin-top: 0.5em;
1447 /*****************/
1448 /* CONVERSATIONS */
1449 /*****************/
1451 /*=----------------------=*/
1452 /*= List of participants =*/
1453 /*=----------------------=*/
1455 #content.conversation-page .conversation-participants {
1456 grid-column: 2 / span 2;
1457 text-align: right;
1458 margin: 0.5em 0 0 0;
1460 .post-meta > .conversation-participants {
1461 white-space: normal;
1463 .conversation-participants ul,
1464 .conversation-participants li {
1465 list-style-type: none;
1466 display: inline-block;
1467 margin: 0;
1468 padding: 0;
1470 .conversation-participants li {
1471 margin-left: 0.375em;
1473 .conversation-participants li:not(:last-of-type)::after {
1474 content: ",";
1477 /*=-------------------------=*/
1478 /*= Posting controls (form) =*/
1479 /*=-------------------------=*/
1481 #content.conversation-page .posting-controls {
1482 padding: 0 0 1em 0;
1484 #content.conversation-page .post-meta-fields {
1485 overflow: auto;
1486 display: flex;
1487 flex-flow: row wrap;
1489 .posting-controls.standalone textarea {
1490 margin-top: 0.375em;
1492 .posting-controls.standalone form {
1493 padding: 0 1em;
1495 #content.conversation-page .posting-controls.standalone form {
1496 padding: 0 1em 3em 1em;
1498 .posting-controls.standalone input[type='text'],
1499 .posting-controls.standalone label {
1500 margin: 0.25em 0;
1502 .posting-controls.standalone label {
1503 width: 4em;
1504 text-align: right;
1505 padding: 2px 6px;
1506 border: 1px solid transparent;
1508 .posting-controls.standalone input[type='text'] {
1509 width: calc(100% - 4em);
1510 padding: 0.25em;
1512 .posting-controls.standalone input[type='submit'] {
1513 float: right;
1515 .posting-controls.standalone #markdown-hints-checkbox ~ label {
1516 white-space: nowrap;
1518 .posting-controls.standalone #markdown-hints {
1519 top: calc(100% + 2em);
1522 /*=--------------------=*/
1523 /*= Conversation title =*/
1524 /*=--------------------=*/
1526 #content.conversation-page h1.page-main-heading {
1527 text-align: center;
1528 margin: 0.5em 0;
1529 line-height: 1.15;
1532 /*=----------=*/
1533 /*= Messages =*/
1534 /*=----------=*/
1536 #content.conversation-page > ul.comment-thread:last-of-type {
1537 margin-bottom: 2em;
1540 /******************/
1541 /* SEARCH RESULTS */
1542 /******************/
1544 #content.search-results-page h1.listing,
1545 #content.sequence-page h1.listing,
1546 #content.post-page h1.listing {
1547 font-size: 1.625em;
1550 /**************/
1551 /* LOGIN PAGE */
1552 /**************/
1554 .login-container {
1555 margin: 2em 0;
1556 padding: 1em;
1557 display: flex;
1558 flex-flow: row wrap;
1561 .login-container form {
1562 flex-basis: 50%;
1563 display: grid;
1564 grid-row-gap: 0.5em;
1565 align-content: start;
1567 .login-container form label {
1568 text-align: right;
1569 padding: 0.25em 0.5em;
1570 white-space: nowrap;
1571 grid-column: 1;
1573 .login-container form input {
1574 grid-column: 2;
1575 padding: 0.25em;
1577 .login-container form input[type='submit'],
1578 .login-container form a {
1579 grid-column: 2;
1580 justify-self: center;
1582 .login-container form input[type='submit'] {
1583 width: 10em;
1584 padding: 0.35em;
1585 line-height: 1;
1586 margin: 0.5em 0 0 0;
1588 .login-container form h1 {
1589 text-align: center;
1590 margin: 0;
1591 grid-column: 2;
1594 /* “Log in” form */
1596 #login-form {
1597 grid-template-columns: 5.5em 1fr;
1598 padding: 0.5em 2em 0.5em 0;
1601 /* “Create account” form */
1603 #signup-form {
1604 font-size: 0.9em;
1605 grid-template-columns: 8.5em 1fr;
1606 padding: 0.5em 1em 1em 1em;
1608 #signup-form h1 {
1609 font-size: 1.7em;
1611 #signup-form input[type='submit'] {
1612 padding: 0.4em 0.5em 0.5em 0.5em;
1615 /* Log in tip */
1617 .login-container .login-tip {
1618 padding: 0.5em 0.5em 0.5em 3em;
1619 margin: 2em 4em 0 4em;
1620 text-indent: -2em;
1621 line-height: 1.4;
1623 .login-container .login-tip span {
1624 font-weight: bold;
1627 /* Message box */
1629 #content.login-page .error-box {
1630 margin: 1.5em 0.875em -1.5em 0.875em;
1632 .error-box, .success-box {
1633 padding: 0.25em;
1634 text-align: center;
1637 /***********************/
1638 /* PASSWORD RESET PAGE */
1639 /***********************/
1641 .reset-password-container {
1642 margin-bottom: 2em;
1644 .reset-password-container input[type='submit'] {
1645 padding: 0.2em 0.5em;
1646 width: unset;
1648 .reset-password-container input {
1649 margin-left: 0.5em;
1650 width: 12em;
1652 .reset-password-container label {
1653 display: inline-block;
1654 width: 9em;
1656 .reset-password-container form > div {
1657 margin: 0.2em;
1659 .reset-password-container .action-container {
1660 padding-left: 11em;
1661 padding-top: 0.2em;
1663 .reset-password-container .error-box {
1664 margin: unset;
1667 /*********************/
1668 /* TABLE OF CONTENTS */
1669 /*********************/
1671 .contents {
1672 float: right;
1673 min-width: 6em;
1674 max-width: 40%;
1675 margin: 1.25em 0 0.75em 1.25em;
1676 padding: 7px 14px 10px 10px;
1677 position: relative;
1678 z-index: 1;
1681 .collection-page .contents {
1682 margin-top: 0;
1685 .contents-head {
1686 text-align: center;
1687 margin-bottom: 0.25em;
1690 .body-text .contents ul {
1691 list-style-type: none;
1692 margin: 0 0 0 0.5em;
1693 counter-reset: toc-item-1 toc-item-2 toc-item-3;
1694 padding-left: 1em;
1695 font-size: 0.75em;
1697 .body-text .contents li {
1698 margin: 0.15em 0 0.3em 1em;
1699 text-align: left;
1700 text-indent: -1em;
1701 line-height: 1.2;
1702 position: relative;
1704 .body-text .contents li::before {
1705 position: absolute;
1706 width: 3em;
1707 display: block;
1708 text-align: right;
1709 left: -4.5em;
1711 .contents .toc-item-1 {
1712 counter-increment: toc-item-1;
1713 counter-reset: toc-item-2 toc-item-3;
1715 .contents .toc-item-1::before {
1716 content: counter(toc-item-1);
1718 .contents .toc-item-1 ~ .toc-item-2 {
1719 margin-left: 2.9em;
1720 font-size: 0.95em;
1722 .contents .toc-item-2 {
1723 counter-increment: toc-item-2;
1724 counter-reset: toc-item-3;
1726 .contents .toc-item-1 ~ .toc-item-2::before {
1727 content: counter(toc-item-1) "." counter(toc-item-2);
1729 .contents .toc-item-2::before {
1730 content: counter(toc-item-2);
1732 .contents .toc-item-1 + .toc-item-3 {
1733 counter-increment: toc-item-2 toc-item-3;
1735 .contents .toc-item-2 ~ .toc-item-3,
1736 .contents .toc-item-1 ~ .toc-item-3 {
1737 margin-left: 2.9em;
1738 font-size: 0.95em;
1740 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3 {
1741 margin-left: 5.7em;
1742 font-size: 0.9em;
1744 .contents .toc-item-3 {
1745 counter-increment: toc-item-3;
1747 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3::before {
1748 content: counter(toc-item-1) "." counter(toc-item-2) "." counter(toc-item-3);
1750 .contents .toc-item-1 ~ .toc-item-3::before {
1751 content: counter(toc-item-1) "." counter(toc-item-3);
1753 .contents .toc-item-2 ~ .toc-item-3::before {
1754 content: counter(toc-item-2) "." counter(toc-item-3);
1756 .contents .toc-item-3::before {
1757 content: counter(toc-item-3);
1759 .contents .toc-item-4,
1760 .contents .toc-item-5,
1761 .contents .toc-item-6 {
1762 display: none;
1765 /********************/
1766 /* POSTS & COMMENTS */
1767 /********************/
1769 .post-meta > *,
1770 .comment-meta > * {
1771 display: inline-block;
1772 margin-right: 1em;
1773 font-size: 1.0625em;
1775 .body-text {
1776 overflow-wrap: break-word;
1777 text-align: justify;
1779 .body-text p {
1780 margin: 1em 0;
1782 .retracted .body-text {
1783 text-decoration: line-through;
1786 .bare-url {
1787 word-break: break-all;
1788 hyphens: auto;
1790 .body-text a:not([href]),
1791 .body-text a:not([href]):hover,
1792 .body-text a:not([href])::before,
1793 .body-text a:not([href])::after {
1794 text-decoration: none;
1795 text-shadow: unset;
1796 border: unset;
1797 color: unset;
1798 content: unset;
1800 /*************/
1801 /* POST-META */
1802 /*************/
1804 .post-meta {
1805 display: flex;
1806 flex-flow: row wrap;
1807 justify-content: center;
1809 .post-meta .lw2-link {
1810 opacity: 0.5;
1811 order: 1;
1813 .post-meta > *,
1814 .post-meta .post-section::before {
1815 margin: 0 0.5em;
1817 .post-meta .post-section {
1818 order: -1;
1819 margin: 0;
1820 visibility: hidden;
1822 .post-meta .post-section::before,
1823 .comment-meta .alignment-forum {
1824 visibility: visible;
1825 font-family: "Font Awesome", "Font Awesome 5 Free";
1826 font-weight: 900;
1828 .post-section.frontpage::before {
1829 content: "\F015";
1831 .post-section.featured::before {
1832 content: "\F005";
1834 .post-section.meta::before {
1835 content: "\F077";
1837 .post-section.events::before {
1838 content: "\F5A0";
1840 .post-section.personal::before {
1841 content: "\F007";
1843 .post-section.draft::before {
1844 content: "\F15B";
1846 .post-section.alignment-forum::before,
1847 .comment-meta .alignment-forum {
1848 content: "AF";
1849 font-family: Concourse, 'Changa One';
1852 /*= Karma controls hover tooltips =*/
1854 @media only screen and (pointer: fine) {
1855 .post .voting-controls,
1856 .comment-item .voting-controls {
1857 position: relative;
1859 .post .karma.active-controls::after,
1860 .comment-item .karma.active-controls::after {
1861 content: "Double-click for strong vote";
1862 position: absolute;
1863 pointer-events: none;
1864 display: block;
1865 left: 6px;
1866 width: 100%;
1867 line-height: 1.15;
1868 white-space: normal;
1869 text-align: center;
1870 font-size: 0.875rem;
1871 opacity: 0;
1872 transition: opacity 0.2s ease;
1874 .post .voting-controls.active-controls:hover::after,
1875 .comment-item .voting-controls.active-controls:hover::after {
1876 opacity: 1.0;
1879 .post .voting-controls .karma-value::after,
1880 .comment-item .voting-controls .karma-value::after {
1881 content: attr(title);
1882 position: absolute;
1883 pointer-events: none;
1884 display: block;
1885 left: 50%;
1886 transform: translateX(-50%);
1887 white-space: pre-wrap;
1888 width: max-content;
1889 text-align: center;
1890 font-size: 0.875rem;
1891 color: #393939;
1892 opacity: 0;
1893 transition: opacity 0.2s ease;
1895 .post .voting-controls.agreement .karma-value:hover::after,
1896 .comment-item .voting-controls.agreement .karma-value:hover::after {
1897 top: unset;
1898 bottom: 100%;
1900 .post .voting-controls .karma-value:hover::after,
1901 .comment-item .voting-controls .karma-value:hover::after {
1902 opacity: 1.0;
1904 .post .voting-controls.waiting .karma-value:hover::after,
1905 .comment-item .voting-controls.waiting .karma-value:hover::after {
1906 display: none;
1908 .comment-item .voting-controls .karma-value:hover::after {
1909 z-index: 5001;
1912 .author {
1913 position: relative;
1915 .author:not(.redacted)::before {
1916 content: attr(data-full-name);
1917 position: absolute;
1918 pointer-events: none;
1919 display: block;
1920 padding: 0 1em;
1921 left: 50%;
1922 bottom: 2em;
1923 transform: translateX(-50%);
1924 white-space: nowrap;
1925 text-align: center;
1926 font-size: 0.875rem;
1927 font-weight: normal;
1928 opacity: 0;
1929 transition: opacity 0.2s ease;
1930 z-index: 5001;
1932 .author:hover::before {
1933 opacity: 1.0;
1937 /*********/
1938 /* POSTS */
1939 /*********/
1941 .post {
1942 max-width: 100%;
1945 .post-body {
1946 min-height: 8em;
1947 padding: 0 30px;
1948 line-height: 1.5;
1949 font-size: 1.3rem;
1950 overflow: auto;
1951 margin: 0.5em 0 0 0;
1953 h1.post-title {
1954 margin: 1.1em 0 0.35em 0;
1955 padding: 0 30px;
1956 text-align: center;
1957 font-size: 2.5em;
1958 line-height: 1;
1960 .post .post-meta {
1961 text-align: center;
1962 position: relative;
1963 z-index: 2;
1965 .post .top-post-meta:last-child {
1966 margin-bottom: 40px;
1968 .post .bottom-post-meta {
1969 margin: 0;
1970 padding: 20px 0;
1972 .bottom-post-meta {
1973 border-style: solid;
1974 border-width: 1px 0;
1977 /**********/
1978 /* EVENTS */
1979 /**********/
1981 .event-info .map {
1982 position: relative;
1983 width: 100%;
1984 margin: 2em 0 1em;
1987 .event-info .map::before {
1988 content: "";
1989 display: block;
1990 padding-bottom: 50%;
1993 .event-info .map iframe {
1994 width: 100%;
1995 height: 100%;
1996 border: 1px solid #fff;
1997 position: absolute;
1998 top: 0;
1999 left: 0;
2002 .event-info ul {
2003 list-style: none;
2004 padding: 0;
2005 text-align: center;
2008 /*******************/
2009 /* POST NAVIGATION */
2010 /*******************/
2012 .post-nav-item {
2013 display: grid;
2014 grid-template: 100% / 32% 36% 32%;
2015 grid-template-areas:
2016 "prev seq next";
2018 .post-nav {
2019 display: flex;
2020 flex-flow: column;
2021 justify-content: flex-end;
2022 padding: 0.5em;
2025 .post-nav-title {
2026 font-size: 1.125em;
2027 line-height: 1.15;
2028 display: inline;
2029 border-top: 1px solid transparent;
2031 .post-nav.prev .post-nav-title,
2032 .post-nav.next .post-nav-title {
2033 border-bottom: 1px solid transparent;
2036 .sequence-title {
2037 align-items: center;
2038 text-align: center;
2039 grid-area: seq;
2041 .sequence-title .post-nav-title {
2042 font-size: 1.5em;
2045 .post-nav.prev {
2046 grid-area: prev;
2047 align-items: flex-start;
2049 .post-nav.prev .post-nav-title::before {
2050 content: "\F0D9\2005";
2052 .post-nav.next {
2053 grid-area: next;
2054 text-align: right;
2055 align-items: flex-end;
2057 .post-nav.prev .post-nav-label,
2058 .post-nav.next .post-nav-label {
2059 display: none;
2061 .post-nav.next .post-nav-title::after {
2062 content: "\2004\F0DA";
2064 .post-nav.prev .post-nav-title::before,
2065 .post-nav.next .post-nav-title::after {
2066 font-family: Font Awesome;
2067 font-weight: 900;
2068 vertical-align: text-bottom;
2069 opacity: 0.75;
2071 .post-nav-links {
2072 max-width: 100%;
2075 @media only screen and (max-width: 900px) {
2076 .post-nav-item {
2077 font-size: 0.875em;
2078 grid-template: auto auto / 50% 50%;
2079 grid-template-areas:
2080 "prev next"
2081 "seq seq";
2083 .post-nav.prev .post-nav-title,
2084 .post-nav.next .post-nav-title {
2085 border-bottom: none;
2087 .post-nav.prev {
2088 margin: 0 0 0 -1px;
2089 position: relative;
2090 left: 1px;
2092 .sequence-title {
2093 padding: 0.75em 0;
2096 @media only screen and (max-width: 520px) {
2097 .post-nav-links + .comments {
2098 padding: 1em 0 0 0;
2102 .related-posts, .related-post-group {
2103 padding-bottom: 1em;
2105 .related-post-type {
2106 font-size: 1.2em;
2107 font-weight: 600;
2108 margin-top: 0.5em;
2109 margin-bottom: -0.5em;
2110 list-style-type: disc;
2111 margin-left: -0.5em;
2112 opacity: 0.7;
2114 .related-post-type::before {
2115 content: "\269c";
2116 font-size: 1.375em;
2117 font-weight: normal;
2118 margin-right: 0.15em;
2119 position: relative;
2120 vertical-align: baseline;
2121 top: 0.05em;
2123 .related-posts .post-type-prefix {
2124 display: none;
2127 .crosspost {
2128 padding: 0.1em 1em;
2129 margin: 1em auto;
2132 /**************/
2133 /* LINK POSTS */
2134 /**************/
2136 .post.link-post > .post-body > p:first-child {
2137 text-align: center;
2138 font-size: 1.125em;
2139 margin: 0.5em 0 0 0;
2141 .post.link-post > .post-body > p:only-child {
2142 font-size: 1.5em;
2143 margin: 1em 0;
2145 .post.link-post a.link-post-link::before {
2146 content: "\F0C1";
2147 font-family: "Font Awesome", "Font Awesome 5 Free";
2148 font-weight: 900;
2149 font-size: 0.75em;
2150 position: relative;
2151 top: -2px;
2152 margin-right: 0.25em;
2155 /************/
2156 /* COMMENTS */
2157 /************/
2159 .comments {
2160 max-width: 100%;
2161 padding: 0 0 1px 0;
2162 position: relative;
2164 .comments::before {
2165 content: "";
2166 position: absolute;
2167 display: block;
2168 top: 0;
2169 left: 0;
2170 width: 100%;
2171 height: 100%;
2172 pointer-events: none;
2174 ul.comment-thread {
2175 list-style-type: none;
2176 padding: 0;
2177 max-width: 100%;
2179 .comments .comment-thread > li {
2180 position: relative;
2182 #content > #top-nav-bar + .comment-thread .comment-item {
2183 margin-top: 0;
2186 .comment-item {
2187 margin: 2em 0 0 0;
2189 .comment-item .comment-item {
2190 margin: 1em 8px 8px 16px;
2192 .comment-item .comment-item + .comment-item {
2193 margin: 2em 8px 8px 16px;
2196 .comment-body {
2197 line-height: 1.45;
2198 font-size: 1.2rem;
2199 padding: 10px;
2201 .comment-body ul {
2202 list-style-type: circle;
2204 .comment-body > *:first-child {
2205 margin-top: 0;
2207 .comment-body > *:last-child {
2208 margin-bottom: 0;
2211 .comments-empty-message {
2212 width: 100%;
2213 text-align: center;
2214 padding: 0.75em 0 0.9em 0;
2215 font-size: 1.375em;
2218 /**********************************/
2219 /* DEEP COMMENT THREAD COLLAPSING */
2220 /**********************************/
2222 .comment-item > input[id^="expand"] {
2223 display: none;
2225 .comment-item > input[id^="expand"] + label {
2226 display: block;
2227 visibility: hidden;
2228 position: relative;
2229 margin: 8px 9px;
2231 .comment-item > input[id^="expand"] + label::after {
2232 content: "(Expand " attr(data-child-count) " below)";
2233 visibility: visible;
2234 position: absolute;
2235 left: 0;
2236 white-space: nowrap;
2237 cursor: pointer;
2239 .comment-item > input[id^="expand"]:checked + label::after {
2240 content: "(Collapse " attr(data-child-count) " below)";
2242 .comment-item > input[id^="expand"] ~ .comment-thread {
2243 max-height: 34px;
2244 overflow: hidden;
2246 .comment-item > input[id^="expand"] ~ .comment-thread > li:first-child {
2247 margin-top: 0;
2249 .comment-item > input[id^="expand"]:checked ~ .comment-thread {
2250 max-height: 1000000px;
2253 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
2254 margin: 0;
2256 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item a.comment-parent-link:hover::after {
2257 display: none;
2260 /*************/
2261 /* BACKLINKS */
2262 /*************/
2264 .backlinks > input {
2265 display: none;
2268 .backlinks > label {
2269 margin-left: 10px;
2270 display: block;
2271 color: #00c200;
2272 cursor: pointer;
2275 .backlinks > label::before {
2276 content: " ";
2277 border-left: 5px solid currentColor;
2278 border-top: 5px solid transparent;
2279 border-bottom: 5px solid transparent;
2280 transition: transform 0.25s ease-out;
2281 transform-origin: 29% 55%;
2282 display: inline-block;
2283 padding-right: 0.5em;
2286 .backlinks > input:checked + label::before {
2287 transform: rotate(90deg);
2290 .backlinks li {
2291 margin-top: 0;
2294 .backlinks > ul {
2295 height: 0;
2296 perspective-origin: top;
2297 transform: perspective(100em) rotateX(-90deg);
2298 transform-origin: center top;
2299 opacity: 0;
2300 margin-top: 0.5em;
2301 margin-bottom: 0.5em;
2304 .backlinks > input:checked ~ ul {
2305 height: auto;
2306 transform: perspective(100em) rotateX(0deg);
2307 transition: transform 0.25s ease-in, opacity 0.25s ease-in;
2308 opacity: 1;
2311 /****************/
2312 /* COMMENT-META */
2313 /****************/
2315 .comment-meta {
2316 padding: 2px 24px 2px 10px;
2317 margin: 0 -1px;
2318 border: none;
2319 display: flex;
2320 flex-flow: row wrap;
2321 align-items: baseline;
2323 .user-page .comment-meta,
2324 .conversation-page .comment-meta {
2325 padding-right: 10px;
2327 .comment-meta .comment-post-title {
2328 flex-basis: 100%;
2329 overflow: hidden;
2330 text-overflow: ellipsis;
2331 white-space: nowrap;
2332 line-height: 1.3;
2334 .conversation-page .comment-meta .comment-post-title {
2335 margin: 0;
2336 flex-basis: unset;
2337 flex: 1 0 auto;
2338 text-align: right;
2339 display: none; /* Not sure if we need to display this... */
2341 .comment-item .author:not(.redacted).original-poster::after {
2342 content: "\2004(OP)";
2343 font-size: 0.75em;
2346 /*****************************/
2347 /* COMMENT THREAD NAVIGATION */
2348 /*****************************/
2350 a.comment-parent-link:not(.inline-author),
2351 a.comment-parent-link.inline-author::before {
2352 opacity: 0.5;
2354 a.comment-parent-link:hover {
2355 opacity: 1.0;
2357 a.comment-parent-link::before {
2358 content: "\F062";
2359 font-family: "Font Awesome", "Font Awesome 5 Free";
2360 font-weight: 900;
2361 font-size: 0.75rem;
2362 line-height: 1;
2363 position: absolute;
2364 z-index: 1;
2365 display: block;
2366 padding: 3px 3px 0 3px;
2367 width: 16px;
2368 height: calc(100% + 2px);
2369 top: -1px;
2370 left: -17px;
2372 a.comment-parent-link::after {
2373 content: "";
2374 position: absolute;
2375 z-index: 0;
2376 display: block;
2377 width: calc(100% + 26px);
2378 height: calc(100% + 38px);
2379 top: -29px;
2380 left: -17px;
2381 pointer-events: none;
2382 overflow: hidden;
2383 visibility: hidden;
2385 a.comment-parent-link:hover::after {
2386 visibility: visible;
2389 .comment-child-links {
2390 flex-basis: 100%;
2392 .comment-child-link {
2393 margin: 0 0.25em;
2394 display: inline-block;
2396 .comment-child-link::before {
2397 content: ">";
2398 display: inline-block;
2399 margin: 0 2px 0 0;
2402 .comment-popup {
2403 position: fixed;
2404 top: 10%;
2405 right: 10%;
2406 max-width: 700px;
2407 z-index: 10001;
2408 font-size: 1rem;
2409 white-space: unset;
2410 pointer-events: none;
2412 .comment-popup .comment-parent-link {
2413 display: none;
2415 .comment-popup .comment-body {
2416 font-size: 1.0625rem;
2419 .comment-item.depth-odd {
2420 --GW-comment-background-color: var(--GW-comment-background-color-odd);
2421 --GW-comment-parent-background-color: var(--GW-comment-background-color-even);
2423 .comment-item.depth-even {
2424 --GW-comment-background-color: var(--GW-comment-background-color-even);
2425 --GW-comment-parent-background-color: var(--GW-comment-background-color-odd);
2428 .comment-item:target {
2429 --GW-comment-background-color: var(--GW-comment-background-color-target);
2431 .comment-item:target > .comment-thread > .comment-item {
2432 --GW-comment-parent-background-color: var(--GW-comment-background-color-target);
2435 /**********************/
2436 /* COMMENT PERMALINKS */
2437 /**********************/
2438 /********************/
2439 /* COMMENT LW LINKS */
2440 /********************/
2442 .comment-meta .permalink::before,
2443 .comment-meta .lw2-link::before,
2444 .individual-thread-page a.comment-parent-link:empty::before {
2445 content: "";
2446 display: inline-block;
2447 width: 1rem;
2448 height: 1rem;
2449 border-radius: 3px;
2450 box-shadow:
2451 0 0 0 1px #000,
2452 0 0 0 2px #0cc800,
2453 0 0 0 3px transparent;
2454 padding: 0 0 0 2px;
2455 background-size: 100%;
2456 position: relative;
2457 top: 2px;
2458 opacity: 0.5;
2460 .comment-meta .permalink::before {
2461 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPYAMQAw5w066BxG6SZO6ipS6zJY6zhd7Dtf7Elr7k1u7lZ171178GJ/8GOA8GWC8GmF8WyH8XON8nWP8naP8oOa84Wc84ac9Ied9Iyh9I6j9JCl9ZGl9ZSo9ZWp9Zms9Zut9qKz9qi4962897G/+LPB+LTC+LjF+L3J+cLN+cTP+sXQ+srU+svU+s7X+9DZ+9HZ+9La+9Xd+9bd+9ng/Nrh/Nvh/Obq/ent/e7x/vHz/vL0/vP1/vT2/vj5//n6//r7//v7//z8//39//7+/////wAAAAAAAAAAAAAAAAAAAAAAwMyACwEAAAAPAAAAAAAAAOC8CVX/fwAAZYtHif9/AAAAPywAAGAAAHA/LAAAYAAAIJ8FAABgAAAg8A0AgGEAAJDwDQCAYQAAEOQJAABhAADYvAlV/38AAJDtsXL/fwAAkO2xcv9/AABvHvb//57//7C8CVX/fwAAG2Zyjf9/AACQ8A0AAGEAAMDkC7PFfwAAkAAAAAAAAACA7bFy/38AACwAAAAAIAAgAAAH84AAgoOEhYaHiImKi4yNjo+QhgEODQGRiiVDRERDIpeHJ5uiRCWfhAdAo5tCCaaCFZtDHyCxEK4AsERCCxG1twhBqrqttzPCNLeCDTqjOQzJGMKctq4e0kMPkQUbgxSaqtiCAR0DiwbMMoMEACybyJYAATREOQWJBjui6YMr7oPyouodEsBsFAx+/gTFUCWwkIJgo3iUA9CPCLJ4OMBlOyThWwtCFS8KchErgqIAN0SFQGhxkAhRNhhFE3XjAgAVm14AyJBSlIVGJlT5GNVDVSlHHCBKEyVEg7YUP5b2QDHx04QRL2rUaEHCZLKvYMOKHXspEAA7');
2463 .comment-meta .lw2-link::before {
2464 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPYAMQAw5w066BZB6RxG6SJL6iZO6ipS6zJY6zhd7D1h7EBk7UJl7Ulr7kts7lFx7mB+8GJ/8GmF8WyH8XON8naP8niR8n+X84GY84+k9JOn9ZSo9ZWp9Zut9qS196W296e396q6962896+++LTC+LzI+b3J+cDM+cXQ+sjS+srU+s7X+9La+9bd+9jf/Nng/Nvh/Nzi/N7k/OXq/efr/ent/eru/e3w/vDz/vHz/vL0/vT2/vb3//f4//r7//z8//39//7+/////wAAt4pHif9/AAAAAAAAAAAAAAAAAAAAAAAAwMyACwEAAAAPAAAAAAAAAOC8CVX/fwAAZYtHif9/AAAAPywAAGAAAHA/LAAAYAAAIJ8FAABgAAAg8A0AgGEAAJDwDQCAYQAAEOQJAABhAADYvAlV/38AAJDtsXL/fwAAkO2xcv9/AABvHvb//57//7C8CVX/fwAAG2Zyjf9/AACQ8A0AAGEAAKDkC7PFfwAAkAAAAAAAAACA7bFy/38AACwAAAAAIAAgAAAH5YAAgoOEhYaHiImKi4yNjo+QkZKTlJWWl5EHBwoBgwuaB56hgpqciAE3QUE6BQAIPao9BgAmqiAADT6qNac2qjuzAC2qQBQBNaovABqqQSi9v60AHM0iCbpBsifEFtBBO9IM2CwYzUAVNL/BhgG+39IAMqo4w80qPKorie3RgyHNAANu2OcO3CAIPwIG/IGAoCodAwbxawZjBsAYiiYC8dDhQwYAJQB6IAGwQ0Z3AIFEmACE2IMLzX44OKkQiAQBOVTdGEAAVhAanRwGVAkghaoUglyoGoGpqdOnUKNKnUq1qlVEgQAAOw==');
2466 .individual-thread-page a.comment-parent-link:empty::before {
2467 left: unset;
2468 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMQAw5wAw9QAw9gBj9gB39gB99i8w5y+R9y+R+T8w51eq+V8w51+R9Jeq85eq9ZfY/s/E89fL+dfl/N/E8N/L9N/L9d/4/+fL9OfY9+f4/u/R9e/4/u////fY9ffe9ffe9vfr+/f//////P////9/AAABAAAAAAAAAAAAAAAAAAAAwMyACwEAAAAwaAUAAGEAABUAAAAAAAAAMGgFAABhAABAuwlV/38AAA8AAAAAAAAAwMyACwEAAAAAAAAAAAAAACwAAAAAIAAgAAAGi0CAcEgsGo/IpHLJbDqf0Kh0Ci1IIFRkgTMaXbLFbbf7BQPEYzIYnVZP2W13lRtvl53wSKgLsqTvSwR0XRMCeyMeAYNeTQ9pFAAEhx+RgyILTAhjGkIDk0IFn00KGxVDnl2UQgcZGAZUqCOqZp2itACxs7S5t7Wpvbi2u4cdwAAMDg0JxszNzs/QZkEAOw==');
2470 .comment-meta .permalink:hover::before {
2471 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPYAMQAw5wAw6AAw6QBW5wBd6wBq6gBq6y8w5y+E7UdW508w509D50996k+k718w51+q71+x71+x8F+38G8w549W55dW55d355ed6pfL9Z++75/L86dd56eq6qex66fR86fY9a9q57+R57/L77/e9b/r+seR58fl+c+d58+k58+36s/L7c/y/8/4/9eq59fl9tf4/9+x59/E6t/e8+e36Oe+6ufL6ufe8Ofy9uf4+ef//+/R6u/e7u////fY6vfe7ffr8ffy9vf////e6//l6//l7P/r7f/y8P/47//48P//8P//8v//8///9f//9v//+f//+v///1X/fwAAZYtHif9/AAAAPywAAGAAAHA/LAAAYAAAIJ8FAABgAAAg8A0AgGEAAJDwDQCAYQAAEOQJAABhAACowQlV/38AAJDtsXL/fwAAkO2xcv9/AABvHvb//57//4DBCVX/fwAAG2Zyjf9/AACQ8A0AAGEAAKDkC7PFfwAAkAAAAAAAAACA7bFy/38AACwAAAAAIAAgAAAH84BQgoOEhYaHiImKi4yNjo+Qhk5AQJGLMQcAmh6WhzOaoAAYnYRJE6GaATmkgkSgIzqgLKxQQ6kvRbK0SA6oAAKrrE8lvg20gkYVoQU4x0K+mrOsPdAAL5FMMoNEmb7XUE42QYtKyg+DT1AtmsaDTiEABTyJShSg54PrAO3g8Jryh5YoCwUhHztBT06gMjCv0BEFqAiMU3cQSpMN3hAV6SaBkD5+UFCAWqHICQhQHwzuG1QDFAJGz0AxcAEFhqYIUHZYCEWiEQ1UA0IlQKXhkQ+I1UAFMBGpSYoF1QZkmGjpyQ8VHC5c6CDixrGvYMOKHdspEAA7');
2473 .comment-meta .lw2-link:hover::before {
2474 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPYAMQAw5wAw6AAw6gBD6gBW6gBd6wBq6gBq6wB97S8w5y997Ucw50ed70ek708w50+k7U+q8F8w51+x8G+38Xcw53dD53e38Ye37JdW55fL9ZfR9p/Y9p/e9qdW56dd56dq56d356fe9rdq57ed57fl+b9357/Y8L/y/8eR58+R58/R78/y9s/y/8/4/9eq59fR79fe9df4/9+x59///+e36O/L6u////fY6vfe6vfe6/f////l7P/r7f/y7v/47//48P/4+f/4+v//7///8f//9f//9v//+v///wAAAAAAAAAAwMyACwEAAAAPAAAAAAAAALDBCVX/fwAAZYtHif9/AAAAPywAAGAAAHA/LAAAYAAAIJ8FAABgAAAg8A0AgGEAAJDwDQCAYQAAEOQJAABhAACowQlV/38AAJDtsXL/fwAAkO2xcv9/AABvHvb//57//4DBCVX/fwAAG2Zyjf9/AACQ8A0AAGEAAJDkC7PFfwAAkAAAAAAAAACA7bFy/38AACwAAAAAIAAgAAAH2YBHgoOEhYaHiImKi4yNjo+QkZKTlJWWl5FGRkGDRkCaRoOfnZuJRR0AAAU6R0MUqQOsNKkbRz4RqQiIRR6pBKxHKakALEUfqQ1HOcMWu70Av4I3wxpCDrA6MsMnzr7AP7gAEDjDACsi3t3QwEYlqQYj5RcVqRKmz9GCNeX8wyT36QT1WNCvnAAbAFUR4lXuAYhyDBQxTGXihQoYR2YN46AxVQiJz/jF4JFgWIwdwwLMAFmwBREMqQ60egVAwaKJIo+4SDXhiBEUqTJgGkq0qNGjSJMqXcoUUSAAOw==');
2476 .individual-thread-page a.comment-parent-link:empty:hover::before {
2477 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMQAw5wBD5wBD6i8w50cw50+E6k+k70+q8F8w51+x8G8w529d53cw53e38Idq54ex7oe+8Y9d54/E8Ze+8JfL9aeR6qe+7K/L8t+359/e8N/e8vfe7ffr8ff////r7f/r7v/y7//y8P/47///8P///wABAAAAAAAAAAAAAAAAAAAAwMyACwEAAAAwaAUAAGEAABUAAAAAAAAAMGgFAABhAAAQwAlV/38AAA8AAAAAAAAAwMyACwEAAAAAAAAAAAAAACwAAAAAIAAgAAAGjECScEgsGo/IpHLJbDqf0Kh0Cg1VLlQkSAEAQLLFbbf7BZPEYzIYnVZP2ePAuAyFt+d17tiC6BYiaXRLInpdFCN9AAcjDIFNGGkSJCKJBpOFAh1MHgNdDUKUXZZnlU4bCxNDoQCjJB8OD1mrrWaTpbWgt7izuLmivba/vSIEXQnAJBwZGsjNzs/Q0bVBADs=');
2479 .comment-meta .permalink:hover::before,
2480 .comment-meta .lw2-link:hover::before,
2481 .individual-thread-page a.comment-parent-link:empty:hover::before {
2482 box-shadow:
2483 0 0 0 2px #0cc800,
2484 0 0 0 3px transparent;
2485 opacity: 1.0;
2486 filter: unset;
2488 .comment-meta .permalink:active::before,
2489 .comment-meta .lw2-link:active::before,
2490 .individual-thread-page a.comment-parent-link:empty:active::before {
2491 transform: scale(0.9);
2494 .comment-meta .permalink,
2495 .comment-meta .lw2-link,
2496 .individual-thread-page .comment-parent-link:empty {
2497 position: relative;
2498 opacity: 1.0;
2500 .comment-meta .permalink::after,
2501 .comment-meta .lw2-link::after,
2502 .individual-thread-page .comment-parent-link:empty::after {
2503 content: "";
2504 width: 30px;
2505 height: 30px;
2506 display: block;
2507 position: absolute;
2508 top: -2px;
2509 left: -7px;
2510 box-shadow: none;
2511 pointer-events: auto;
2512 visibility: visible;
2515 /*************************/
2516 /* COMMENTS COMPACT VIEW */
2517 /*************************/
2519 #comments-list-mode-selector,
2520 #content.index-page #comments-list-mode-selector,
2521 #content.user-page #comments-list-mode-selector {
2522 padding-top: 6px;
2523 grid-column: 1;
2524 position: unset;
2525 z-index: 1;
2526 justify-self: start;
2527 align-self: start;
2529 #comments-list-mode-selector button {
2530 color: transparent;
2531 width: 32px;
2532 height: 32px;
2533 padding: 6px;
2534 margin: 1px;
2535 overflow: hidden;
2536 background-repeat: no-repeat;
2537 background-size: 100%;
2538 background-origin: content-box;
2540 #comments-list-mode-selector button:disabled {
2541 cursor: auto;
2543 #comments-list-mode-selector button.expanded {
2544 background-image: url('data:image/gif;base64,R0lGODdhKAAoAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAoACgAAAJTnI+py+0Po5wn2Iuz3lrxD25eSIJjiWZnyq4s6r5kLJtJndK4eO9z77NRhsSi8YhMKpfMpvMJjTqDIR3VYr1mqdtg1/fdhXHjWll2fqVb0rY7WQAAOw==');
2546 #comments-list-mode-selector button.compact {
2547 background-image: url('data:image/gif;base64,R0lGODdhKAAoAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAoACgAAAJXnI+py+0Po5y0uoCz3rxz5YViB46mWJ7qlq5u66rWTNf2fcQxrI98H/oBSYnhSWjU4JbMJi7pK0KD0ikRYfUgp1uo8wsOM7LXHJlVPWO6SbbRPRTL57gCADs=');
2549 @media only screen and (max-resolution: 1dppx) {
2550 #comments-list-mode-selector button.expanded {
2551 background-image: url('data:image/gif;base64,R0lGODdhFAAUAKIAAAAAAKampqqqqv///wAAAAAAAAAAAAAAACH5BAkAAAQALAAAAAAUABQAAAMmSLrc/tCJSasV7Gqat+6eBYbcQopRqq5s257VeMokHdoevrm8mgAAOw==');
2553 #comments-list-mode-selector button.compact {
2554 background-image: url('data:image/gif;base64,R0lGODdhFAAUAKIAAAAAAKqqqtvb2////wAAAAAAAAAAAAAAACH5BAkAAAQALAAAAAAUABQAAAMmSLrc/tCFSasN7Gqat45g433LeHUmF65phbZvurLtFJv3OO98zyQAOw==');
2558 #content > ul.comment-thread > li.comment-item,
2559 #content.compact > ul.comment-thread > li.comment-item {
2560 margin: 0;
2563 #content > .comment-thread {
2564 margin: 1em 0;
2566 #content.compact > .comment-thread {
2567 font-size: 0.9375rem;
2568 margin: 0.5em 0;
2570 #content.compact > .comment-thread:hover {
2571 z-index: 1;
2573 #content.compact > .comment-thread .comment-body {
2574 font-size: 1.0625rem;
2576 #content.compact > .comment-thread .comment-item,
2577 #content.index-page .comment-item.ignored,
2578 #content.inbox-user-page .comment-item.ignored {
2579 max-height: 61px;
2580 margin-top: 1em;
2581 overflow: hidden;
2582 position: relative;
2584 #content.compact > .comment-thread .comment-item {
2585 pointer-events: none;
2587 #content.compact > .comment-thread .comment-item::after {
2588 content: "…";
2589 position: absolute;
2590 right: 0;
2591 bottom: 0;
2592 font-size: 2rem;
2593 line-height: 1;
2594 padding: 0 16px 10px 64px;
2595 pointer-events: auto;
2597 @media only screen and (hover: hover) {
2598 #content.compact:not(:focus-within) > .comment-thread .comment-item:hover,
2599 #content.compact > .comment-thread .comment-item.expanded {
2600 overflow: visible;
2601 pointer-events: auto;
2602 z-index: 10;
2605 @media only screen and (hover: none) {
2606 #content.compact > .comment-thread.expanded .comment-item {
2607 overflow: visible;
2608 pointer-events: auto;
2609 z-index: 10;
2612 #content.compact > .comment-thread .comment-item .comment-meta {
2613 white-space: nowrap;
2614 overflow: hidden;
2615 text-overflow: ellipsis;
2616 padding: 2px 10px;
2618 #content.compact > .comment-thread .comment-item:hover .comment-meta {
2619 white-space: unset;
2621 #content.compact > .comment-thread .comment-item .comment-meta a {
2622 pointer-events: auto;
2624 #content.compact > .comment-thread .comment-item .comment-meta .comment-post-title {
2625 display: inline;
2627 #content.compact > .comment-thread .comment-item .comment-meta .voting-controls + .comment-post-title {
2628 margin-left: 0.75em;
2630 @media only screen and (hover: hover) {
2631 #content.compact > .comment-thread:last-of-type .comment-item:hover,
2632 #content.compact > .comment-thread:last-of-type .comment-item.expanded {
2633 max-height: unset;
2635 #content.compact > .comment-thread .comment-item:hover .comment,
2636 #content.compact > .comment-thread .comment-item.expanded .comment {
2637 position: relative;
2638 z-index: 1;
2639 margin-bottom: 2em;
2640 bottom: 0;
2642 #content.compact > .comment-thread .comment-item:hover .comment::before,
2643 #content.compact > .comment-thread .comment-item.expanded .comment::before{
2644 content: "";
2645 position: absolute;
2646 display: block;
2647 width: calc(100% + 20px);
2648 height: calc(100% + 20px);
2649 z-index: -1;
2650 top: -10px;
2651 left: -10px;
2653 #content.compact > .comment-thread:last-of-type .comment-item:hover .comment,
2654 #content.compact > .comment-thread:last-of-type .comment-item.expanded .comment{
2655 margin: 0;
2658 @media only screen and (hover: none) {
2659 #content.compact > .comment-thread.expanded:last-of-type .comment-item {
2660 max-height: unset;
2662 #content.compact > .comment-thread.expanded .comment-item .comment {
2663 position: relative;
2664 z-index: 1;
2665 margin-bottom: 2em;
2666 bottom: 0;
2668 #content.compact > .comment-thread.expanded .comment-item .comment::before {
2669 content: "";
2670 position: absolute;
2671 display: block;
2672 width: calc(100% + 14px);
2673 height: calc(100% + 20px);
2674 z-index: -1;
2675 top: -10px;
2676 left: -10px;
2678 #content.compact > .comment-thread.expanded:last-of-type .comment-item .comment {
2679 margin: 0;
2681 #content.compact > .comment-thread.expanded .comment-item .comment::after {
2682 content: "";
2683 display: block;
2684 position: fixed;
2685 top: 0;
2686 left: 0;
2687 width: 100%;
2688 height: 100%;
2689 z-index: -2;
2690 background-color: rgba(255, 255, 255, 0.5);
2694 /*****************************/
2695 /* HIGHLIGHTING NEW COMMENTS */
2696 /*****************************/
2698 .new-comment::before {
2699 content: "";
2700 position: absolute;
2701 width: 100%;
2702 height: 100%;
2703 z-index: 5000;
2704 pointer-events: none;
2707 /***********************************/
2708 /* COMMENT THREAD MINIMIZE BUTTONS */
2709 /***********************************/
2711 .comment-minimize-button {
2712 font-family: "Font Awesome", "Font Awesome 5 Free";
2713 font-weight: 900;
2714 font-size: 1.25rem;
2715 line-height: 1;
2716 position: absolute;
2717 right: 1px;
2718 top: 1px;
2719 width: 18px;
2720 margin: 0;
2721 cursor: pointer;
2723 .comment-minimize-button:active {
2724 transform: scale(0.9);
2726 .comment-minimize-button::after {
2727 content: attr(data-child-count);
2728 font-weight: normal;
2729 font-size: 0.8125rem;
2730 position: absolute;
2731 left: 0;
2732 width: 100%;
2733 text-align: center;
2734 top: 21px;
2736 #content.individual-thread-page .comment-minimize-button {
2737 display: none;
2740 /*****************/
2741 /* IGNORE SYSTEM */
2742 /*****************/
2744 #content.comment-thread-page .comment-item.ignored {
2745 height: 38px;
2746 overflow: hidden;
2748 .comment-item.ignored > .comment > .comment-meta > .author {
2749 text-decoration: line-through;
2752 /***********************************/
2753 /* INDIVIDUAL COMMENT THREAD PAGES */
2754 /***********************************/
2756 .individual-thread-page > h1 {
2757 line-height: 1;
2758 margin: 0.75em 0 3px 0;
2760 .individual-thread-page .comments {
2761 border: none;
2764 /*************/
2765 /* SHORTFORM */
2766 /*************/
2768 .shortform-index-page .comments::before {
2769 border: none;
2770 box-shadow: none;
2773 .shortform-index-page .comments > .comment-thread > .comment-item:first-child {
2774 margin-top: 0;
2777 /****************/
2778 /* VOTE BUTTONS */
2779 /****************/
2781 .vote {
2782 margin: 0;
2784 .vote {
2785 font-family: "Font Awesome", "Font Awesome 5 Free";
2786 font-weight: 900;
2787 border: none;
2790 .vote:disabled {
2791 visibility: hidden;
2792 cursor: default;
2795 @keyframes waiting {
2796 0% {background-position: 200% 0%}
2797 100% {background-position: 0% 0%}
2800 .voting-controls .karma-value {
2801 opacity: 1;
2802 transition: opacity 0.5s linear;
2805 .voting-controls.waiting .karma-value {
2806 opacity: 0.5;
2807 background: repeat-x linear-gradient(70deg, #fff 50%, #000 75%, #fff);
2808 background-clip: text;
2809 -webkit-background-clip: text;
2810 color: transparent;
2811 background-position: 200% 0%;
2812 background-size: 200% 100%;
2813 animation: waiting 1s linear infinite;
2816 /* Replicated karma controls at bottom of comments. */
2817 .comment-controls .voting-controls {
2818 float: left;
2819 font-size: 0.9375em;
2822 .comment-controls .voting-controls:first-of-type {
2823 margin-left: -14px;
2826 /*****************************/
2827 /* COMMENTING AND POSTING UI */
2828 /*****************************/
2830 .comment-controls {
2831 text-align: right;
2832 margin: 0 8px 8px 16px;
2833 position: relative;
2834 z-index: 9999;
2836 .comment-thread .comment-controls + .comment-thread > li:first-child {
2837 margin-top: 8px;
2839 .comments > .comment-controls {
2840 margin: 8px 0 0 0;
2842 .comments > .comment-controls:last-child {
2843 margin: 8px 0 16px 0;
2846 .posting-controls input[type='submit'] {
2847 margin: 6px;
2848 padding: 4px 10px;
2849 font-size: 1.125rem;
2852 .comment-controls .cancel-comment-button {
2853 position: absolute;
2854 right: 0;
2855 margin: 0;
2856 height: 27px;
2857 font-size: inherit;
2858 padding: 4px 8px 2px 4px;
2859 z-index: 1;
2861 .comment-controls .cancel-comment-button::before {
2862 font-family: "Font Awesome", "Font Awesome 5 Free";
2863 margin-right: 3px;
2864 content: '\F00D';
2865 font-weight: 900;
2866 font-size: 0.9em;
2867 opacity: 0.7;
2870 .comment + .comment-controls .action-button {
2871 font-weight: normal;
2872 font-size: 1.0625em;
2873 padding: 1px 6px;
2875 .comment-controls .action-button::before {
2876 font-family: "Font Awesome", "Font Awesome 5 Free";
2877 margin-right: 3px;
2879 .new-comment-button {
2880 font-size: 1.5rem;
2881 margin: 0 0.25em;
2883 .comment-controls .reply-button::before {
2884 content: '\F3E5';
2885 font-weight: 900;
2886 font-size: 0.9em;
2887 opacity: 0.6;
2889 .comment-meta .replied::before {
2890 content: '\F3E5';
2891 font-family: "Font Awesome", "Font Awesome 5 Free";
2892 color: #9740cb;
2893 font-weight: 900;
2894 font-size: 0.9em;
2895 opacity: 0.6;
2898 .post-controls {
2899 text-align: right;
2900 margin: 0.75em 0 0 0;
2901 align-self: start;
2902 justify-self: end;
2904 .edit-post-link {
2905 display: inline-block;
2906 margin-bottom: 0.25em;
2907 font-size: 1.125rem;
2909 .edit-post-link::before {
2910 margin-right: 0.3em;
2912 .comment-controls .edit-button::before,
2913 .edit-post-link::before {
2914 content: '\F303';
2915 font-family: "Font Awesome", "Font Awesome 5 Free";
2916 font-weight: 900;
2917 font-size: 0.75em;
2918 position: relative;
2919 top: -1px;
2922 .comment-controls .delete-button {
2923 margin-right: 0.25em;
2925 .comment-controls .edit-button,
2926 .comment-controls .retract-button,
2927 .comment-controls .unretract-button {
2928 margin-right: 1em;
2930 .comment-controls .retract-button::before {
2931 content: '\F4B3';
2932 opacity: 0.6;
2934 .comment-controls .unretract-button::before {
2935 content: '\F075';
2936 opacity: 0.9;
2938 .comment-controls .delete-button::before {
2939 content: '\F05E';
2940 opacity: 0.7;
2942 .comment-controls .retract-button::before,
2943 .comment-controls .unretract-button::before,
2944 .comment-controls .delete-button::before {
2945 font-weight: 900;
2946 font-size: 0.9em;
2949 .comment-controls form {
2950 position: relative;
2952 .textarea-container {
2953 position: relative;
2955 .posting-controls textarea {
2956 display: block;
2957 width: 100%;
2958 height: 15em;
2959 min-height: 15em;
2960 max-height: calc(100vh - 6em);
2961 margin: 2px 0 0 0;
2962 padding: 4px 5px;
2963 font-size: 1.2rem;
2964 border-style: solid;
2965 border-width: 29px 1px 1px 1px;
2966 resize: none;
2969 /* GUIEdit buttons */
2971 .guiedit-buttons-container {
2972 position: absolute;
2973 left: 1px;
2974 top: 1px;
2975 width: calc(100% - 2px);
2976 height: 28px;
2977 text-align: left;
2978 padding: 1px 4px 0 4px;
2979 overflow: hidden;
2981 .comment-thread-page .guiedit-buttons-container {
2982 padding-right: 60px;
2984 .guiedit-buttons-container button {
2985 height: 26px;
2986 padding: 0 7px;
2987 font-weight: 900;
2988 font-size: 0.875rem;
2989 line-height: 1;
2990 position: static;
2992 .guiedit-buttons-container button:active {
2993 transform: none;
2995 .guiedit-buttons-container button:active div {
2996 transform: scale(0.9);
2998 .guiedit-buttons-container button sup {
2999 font-weight: bold;
3001 .guiedit::after {
3002 content: attr(data-tooltip);
3003 position: absolute;
3004 font-weight: normal;
3005 font-size: 1rem;
3006 top: 2px;
3007 left: 464px;
3008 height: 25px;
3009 padding: 4px 0;
3010 white-space: nowrap;
3011 visibility: hidden;
3013 .guiedit:hover::after {
3014 visibility: visible;
3017 /* Markdown hints */
3019 .posting-controls .markdown-reference-link {
3020 float: left;
3021 padding: 1px 0 0 6px;
3023 .posting-controls .markdown-reference-link a {
3024 padding-right: 1.5em;
3025 margin-right: 0.15em;
3026 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAQAAABNTyozAAAEDklEQVR4Ae3cY3QDjRaG0V1e27Zt27Zt27Ztf7Zt27Zt10jOdZtZzbSN2q41533+tsFO4zRi0TKRJVACJdDiJVACJVACJVACZQmUQAmUQAmUQAmUQFkCJVACJVACJVACJVDWuD7P8icnGRcVbdyJ/uRZ+jTZYxwq/lN2qMcozvtMibmySe/TsPeqi0JZ3XsAHm1SZAua9CjgoMQo6UB4uiim5gbXV7Ab1EQxT+P3RRw/dHtV3e39UL3g8XuOEw39QNX3g4LHcYwU/n5uo+q7beGKNqLwJ3U1cteKuepEQ1cid03BJIESKIESKIESKIESaIkl0I3dv7Q7a293c//ShrWym7l/abdbGaCnidJGPFzre6opUdqDtLJXitJ+svpA4Uy30dru6hJRHaCws37L37CDRbWAwvctf38S1QOqe43l7f2iikDheg+x9J5ksqpA4TS3svju5CJRXaCwvX7lG3KAqDZQ+Jby/U4kUM0rNN+7hAQSrvNAC/c4Ewn0/052C8Xd0fkigebbRp/5DdpHJFCxr5nfr4QEUqzmJYC3iQRq1jXuj8cYT6CyTnAv54oEKm9EJFBnJVAC7eoS0XJn2r8qQP/wNFOipUY8wvbVAeIjooXq3ki1gPhHC0A/oWWgQZ/37ZI2FaUdVPpb33LHlQS6scPFstrDQBtAvEpNdLEfsZJA3N3lYsnOcTvaAuKzomttqW+lgXimabFoYx5N20D8SXSlw9yElQfiE0J5dW+lI6BBu4uOO8+dWB0g1hel/YIOgbiVE0VHXefhrB7QTRwtmra3gS4AcW+Xibab8SJWE4h7uaLpn/Ud6AoQTzIu2uzDrDYQzzUjCo17HF0D4g3qoo1+yWoCld8hv5OuAvFl0XLb6V8rQGws5votXQfqs45oqaPdjLUDdNO5f7Xa32APgBhu6b2SC92VtQTEfVwlXOhO9ASI2zhNLKsRj2atAfFCo55Iz4C4nyvFks16OWsRiPvQUyCeblIs0adYq0B6DsTb1EV5fk+1gfiWKG0XAwnUZyPRtOPdggTiRg4UC7rEPUkg4PbOFIXGPIEEmt+DCmeu5rUkUHHPaXj76Qsk0MK9R/ynv5FAzfdDYS9Da+n/xe6ovd2lS/8vVlyfH7o1vQLKJVACJVACJVACJVACIYGW/A6z/A6zG8RcNbdT9d1eTcx1A8eKhn6s6vtxweNYfisaqvupu+jXV8H63cXP1Asev+Wpopi6aVMVbFpdFPMUlP6jdrY/8AgTYkHZhEcAvFNdFMpq3qFh78y/okIT3qk4j8zborn290hN91S/c6zrzapVsFnXO9bvPFXjYtEykSVQAnVUAiVQAiVQAiVQAiVQlkAJlEAJlEAJlEAJlCVQAiVQAiVQAiVQAmX/BMHb3CdNrgcrAAAAAElFTkSuQmCC');
3027 background-size: 1.25em;
3028 background-repeat: no-repeat;
3029 background-position: right center;
3032 #markdown-hints-checkbox + label {
3033 float: left;
3034 margin: 2px 0 0 1em;
3035 line-height: 1.3;
3036 cursor: pointer;
3038 #edit-post-form #markdown-hints-checkbox + label {
3039 padding: 0;
3041 #markdown-hints-checkbox {
3042 visibility: hidden;
3043 float: left;
3045 #markdown-hints-checkbox + label::after {
3046 content: "(Show Markdown help)";
3048 #markdown-hints-checkbox:checked + label::after {
3049 content: "(Hide Markdown help)";
3051 #markdown-hints-checkbox + label::before {
3052 content: '\F059';
3053 font-family: "Font Awesome", "Font Awesome 5 Free";
3054 font-weight: 900;
3055 margin-right: 3px;
3057 #markdown-hints-checkbox:checked + label::before {
3058 font-weight: normal;
3060 #markdown-hints {
3061 margin: 4px 0 0 4px;
3062 padding: 4px 8px;
3063 position: absolute;
3064 text-align: left;
3065 top: calc(100% - 1em);
3066 z-index: 1;
3067 display: none;
3069 .comment-controls #markdown-hints {
3070 top: calc(100% + 1.75em);
3072 #markdown-hints-checkbox:checked ~ #markdown-hints {
3073 display: table;
3075 .markdown-hints-row {
3076 display: table-row;
3078 #markdown-hints .markdown-hints-row span,
3079 #markdown-hints .markdown-hints-row code {
3080 float: none;
3081 display: table-cell;
3082 border: none;
3083 background-color: inherit;
3084 padding: 0 12px 0 0;
3087 /******************/
3088 /* EDIT POST FORM */
3089 /******************/
3091 #edit-post-form {
3092 padding: 1em 1em 4em 1em;
3094 #edit-post-form .post-meta-fields {
3095 display: grid;
3096 grid-template-columns: 5em auto auto auto 1fr auto;
3097 margin-bottom: 0.625em;
3100 #edit-post-form label[for='title'],
3101 #edit-post-form label[for='url'],
3102 #edit-post-form label[for='section'] {
3103 grid-column: 1;
3105 #edit-post-form input[type='text'] {
3106 padding: 0.25em;
3107 grid-column: 2 / span 4;
3108 margin-bottom: 0.5em;
3111 #edit-post-form .link-post-checkbox,
3112 #edit-post-form .link-post-checkbox + label {
3113 grid-row: 1;
3114 grid-column: 6;
3116 #edit-post-form .question-checkbox,
3117 #edit-post-form .question-checkbox + label {
3118 grid-row: 3;
3119 grid-column: 5;
3120 justify-self: start;
3121 margin-left: 1.5em;
3124 #edit-post-form .post-meta-fields label[for="submit-to-frontpage"] {
3125 grid-row: 4;
3126 grid-column: 2 / span 4;
3127 text-align: left;
3128 margin-top: 8px;
3131 #edit-post-form .post-meta-fields input[type='checkbox'] {
3132 height: 0;
3133 opacity: 0;
3134 pointer-events: none;
3136 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
3137 white-space: nowrap;
3138 position: relative;
3139 cursor: pointer;
3140 padding: 0.25em 0.5em 0.25em calc(20px + 0.25em + 0.3725em);
3141 align-self: start;
3143 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
3144 content: "";
3145 font-family: "Font Awesome", "Font Awesome 5 Free";
3146 font-size: 1.375rem;
3147 line-height: 0.7;
3148 text-indent: 1px;
3149 font-weight: 900;
3150 position: absolute;
3151 width: 20px;
3152 height: 20px;
3153 left: 5px;
3155 #edit-post-form label[for='url'],
3156 #edit-post-form input[name='url'] {
3157 display: none;
3159 #edit-post-form .link-post-checkbox:checked ~ label[for='url'],
3160 #edit-post-form .link-post-checkbox:checked ~ input[name='url'] {
3161 display: initial;
3163 #edit-post-form label {
3164 line-height: normal;
3165 border: 1px solid transparent;
3166 text-align: right;
3167 padding: 0.25em 0.5em;
3168 white-space: nowrap;
3170 #edit-post-form input[type='radio'] {
3171 width: 0;
3172 margin: 0;
3173 opacity: 0;
3174 pointer-events: none;
3176 #edit-post-form input[type='radio'] + label {
3177 padding: 4px 12px;
3178 text-align: center;
3179 border-style: solid;
3180 border-width: 1px 1px 1px 0;
3181 cursor: pointer;
3183 #edit-post-form input[type='radio']:checked + label {
3184 cursor: default;
3187 #edit-post-form label[for='section'] {
3188 grid-row: 3;
3190 #edit-post-form input[type='radio'] + label {
3191 grid-row: 3;
3193 @supports (width: -moz-fit-content) {
3194 #edit-post-form input[type='radio'] + label {
3195 width: -moz-fit-content;
3198 @supports (width: fit-content) {
3199 #edit-post-form input[type='radio'] + label {
3200 width: fit-content;
3204 #edit-post-form textarea {
3205 min-height: 24em;
3208 #edit-post-form input[type='submit'] {
3209 padding: 6px 12px;
3210 float: right;
3212 #edit-post-form #markdown-hints {
3213 top: calc(100% + 2em);
3216 #edit-post-form button.guiedit div {
3217 overflow: visible;
3219 .guiedit-mobile-auxiliary-button {
3220 display: none;
3223 /***********/
3224 /* BUTTONS */
3225 /***********/
3227 button,
3228 input[type='submit'] {
3229 font-family: inherit;
3230 font-size: inherit;
3231 background-color: inherit;
3232 cursor: pointer;
3233 border: none;
3234 border-radius: 0;
3237 /************/
3238 /* HEADINGS */
3239 /************/
3241 .body-text h1,
3242 .body-text h2,
3243 .body-text h3,
3244 .body-text h4,
3245 .body-text h5,
3246 .body-text h6 {
3247 line-height: 1.1;
3248 margin: 1em 0 0.75em 0;
3249 text-align: left;
3252 .post-body h5,
3253 .post-body h6 {
3254 font-size: 1em;
3256 .post-body h4,
3257 .body-text h4 {
3258 font-size: 1.2em;
3260 .post-body h3,
3261 .body-text h3 {
3262 font-size: 1.4em;
3264 .post-body h2,
3265 .body-text h2 {
3266 font-size: 1.75em;
3268 .post-body h1,
3269 .body-text h1 {
3270 font-size: 2.1em;
3273 .comment-body h5,
3274 .comment-body h6 {
3275 font-size: 1em;
3277 .comment-body h4 {
3278 font-size: 1.15em;
3280 .comment-body h3 {
3281 font-size: 1.3em;
3283 .comment-body h2 {
3284 font-size: 1.5em;
3286 .comment-body h1 {
3287 font-size: 1.75em;
3290 /**********/
3291 /* QUOTES */
3292 /**********/
3294 blockquote,
3295 .post-body .comment-box .comment-body {
3296 font-size: 0.9em;
3297 margin: 1em 0;
3298 padding-left: 0.5em;
3299 margin-left: 1px;
3300 padding-bottom: 3px;
3302 blockquote *:first-child {
3303 margin-top: 0;
3305 blockquote *:last-child {
3306 margin-bottom: 0;
3308 blockquote blockquote {
3309 font-size: 0.95em;
3312 /* Pseudo-blockquotes that LW sometimes uses for some reason */
3314 .post-body .comment-box .user-name {
3315 font-style: italic;
3317 .post-body .comment-box .user-name::after {
3318 content: ":";
3320 .post-body .comment-box {
3321 zoom: 1.25;
3324 /**********/
3325 /* IMAGES */
3326 /**********/
3328 #content img, #content figure {
3329 max-width: 100%;
3332 .prediction-poll > svg {
3333 width: 700px;
3334 max-width: 100%;
3337 img.inline-latex {
3338 position: relative;
3339 top: 2.5px;
3340 margin: 0 2px;
3343 #content figure {
3344 text-align: center;
3345 margin: 1.5em auto;
3348 p.imgonly,
3349 div.imgonly,
3350 figure {
3351 text-align: center;
3352 margin: auto;
3353 clear: both;
3356 .imgonly iframe {
3357 display: block;
3358 width: 100%;
3359 height: 250px;
3360 border: 0;
3363 // Aspect ratio trick from https://css-tricks.com/aspect-ratio-boxes/
3365 [style*="--aspect-ratio"] > * {
3366 width: 100%;
3368 [style*="--aspect-ratio"] > img {
3369 height: auto;
3371 @supports (--custom:property) {
3372 [style*="--aspect-ratio"] {
3373 position: relative;
3375 [style*="--aspect-ratio"]::before {
3376 content: "";
3377 display: block;
3378 padding-bottom: calc(100% / (var(--aspect-ratio)));
3380 [style*="--aspect-ratio"] > * {
3381 position: absolute;
3382 top: 0;
3383 left: 0;
3384 height: 100%;
3388 /**********/
3389 /* TABLES */
3390 /**********/
3392 .body-text table {
3393 border-collapse: collapse;
3394 font-size: 0.875em;
3396 .body-text table th,
3397 .body-text table td {
3398 text-align: left;
3399 padding: 4px 6px;
3400 line-height: 1.3;
3402 .body-text table .numeric {
3403 text-align: right;
3404 font-family: Inconsolata, Menlo, monospace;
3406 .body-text table caption {
3407 margin: 0 0 0.25em 0;
3408 font-weight: bold;
3409 font-size: 1.125em;
3412 /********/
3413 /* MISC */
3414 /********/
3416 /*= Superscripts & subscripts =*/
3418 /* Make sure superscripts and subscripts do not affect line spacing. */
3419 sup, sub {
3420 vertical-align: baseline;
3421 position: relative;
3422 top: -0.5em;
3423 left: 0.05em;
3424 font-size: 0.8em;
3426 sub {
3427 top: 0.3em;
3430 /*= Code blocks & other "unstyled" text. =*/
3432 pre,
3433 code {
3434 font-family: Inconsolata, Menlo, monospace;
3436 pre {
3437 white-space: pre-wrap;
3439 .body-text pre {
3440 text-align: left;
3442 code {
3443 font-size: 0.95em;
3444 display: inline-block;
3445 padding: 0 4px 1px 5px;
3447 pre > code {
3448 display: block;
3449 border-radius: 0;
3450 padding: 3px 4px 5px 8px;
3451 tab-size: 4;
3454 /*= Fractions =*/
3456 .frac::after {
3457 content: "\200B";
3460 /*= Removing browser default styling of various elements =*/
3462 /* On various input elements such as text fields and buttons, remove "blue glow" focus outlines on Macs, dotted black outlines in Firefox, etc. */
3463 :focus {
3464 outline: none;
3467 /* Remove "embossed" appearance of horizontal rules. */
3468 hr {
3469 border: none;
3472 input,
3473 button,
3474 textarea {
3475 -webkit-appearance: none;
3476 -moz-appearance: none;
3477 appearance: none;
3480 input {
3481 font-family: inherit;
3482 font-size: inherit;
3483 font-weight: inherit;
3486 /*************/
3487 /* FOOTNOTES */
3488 /*************/
3490 ol {
3491 counter-reset: ordered-list;
3493 .footnote-definition {
3494 font-size: 0.9em;
3495 list-style-type: none;
3496 counter-increment: ordered-list;
3497 position: relative;
3499 .footnote-definition p {
3500 font-size: inherit !important;
3502 .footnote-definition::before {
3503 content: counter(ordered-list) ".";
3504 position: absolute;
3505 left: -2.5em;
3506 font-weight: bold;
3507 text-align: right;
3508 width: 2em;
3511 /*= LW Docs footnotes =*/
3513 .footnote-item {
3514 display: flex;
3517 .footnote-item > :not(.nothing) {
3518 margin: 0 0.2em;
3521 .footnote-item > :first-child {
3522 margin-left: -0.2em;
3523 margin-right: 0;
3526 .footnote-back-link a:not(.nothing) {
3527 font-size: 0;
3528 text-decoration: none;
3529 border: none;
3532 .footnote-back-link a:not(.nothing):hover {
3533 text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #0cc800;
3534 border: none;
3535 text-decoration: none;
3538 .footnote-back-link a::after {
3539 content: '\F106';
3540 font-family: Font Awesome;
3541 font-size: 1rem;
3542 padding: 0.2em;
3543 text-decoration: none;
3544 font-weight: bold;
3547 .footnote-content > :first-child {
3548 margin-top: 0;
3551 /*********/
3552 /* LISTS */
3553 /*********/
3555 li {
3556 margin-bottom: 0.5em;
3559 .body-text ol p,
3560 .body-text ul p {
3561 margin: 0.5em 0;
3564 .body-text ol {
3565 list-style: none;
3566 padding: 0;
3567 counter-reset: ol;
3569 .body-text ol > li {
3570 position: relative;
3571 counter-increment: ol;
3572 padding: 0 0 0 2.5em;
3573 margin: 0.25em 0 0 0;
3575 .body-text ol > li::before {
3576 content: counter(ol) ".";
3577 position: absolute;
3578 width: 2em;
3579 text-align: right;
3580 left: 0;
3582 .body-text ul {
3583 list-style: none;
3584 padding: 0;
3586 .body-text ul:not(.contents-list) > li:empty {
3587 padding-bottom: 1.25em;
3589 .body-text ul:not(.contents-list) > li {
3590 position: relative;
3591 padding: 0 0 0 1.75em;
3592 margin: 0.25em 0 0 0;
3594 .body-text ul:not(.contents-list) > li ul > li {
3595 padding: 0 0 0 2em;
3597 .body-text ul:not(.contents-list) > li::before {
3598 content: "•";
3599 position: absolute;
3600 width: 1.25em;
3601 text-align: right;
3602 left: 0;
3604 .body-text ul:not(.contents-list) > li ul > li::before {
3605 width: 1.5em;
3607 .body-text li > ul:first-child > li {
3608 padding-left: 0;
3610 .body-text li > ul:first-child > li::before {
3611 content: none;
3614 /**************/
3615 /* ERROR PAGE */
3616 /**************/
3618 .error-retry-form {
3619 margin: 0.5em 0;
3622 .error-retry-form input[type="submit"] {
3623 border: 1px solid #484848;
3624 font-weight: bold;
3625 font-size: 1.125rem;
3626 padding: 0.5em 1.25em;
3629 /**************/
3630 /* ABOUT PAGE */
3631 /**************/
3633 #content.about-page .contents {
3634 margin-top: 0.25em;
3636 #content.about-page .accesskey-table {
3637 border-collapse: collapse;
3638 margin: auto;
3640 #content.about-page .accesskey-table th,
3641 #content.about-page .accesskey-table td {
3642 padding: 2px 6px;
3644 #content.about-page .accesskey-table td:first-child {
3645 padding-right: 1.5em;
3647 #content.about-page .accesskey-table td:last-child {
3648 text-align: center;
3649 font-family: Inconsolata, Menlo, monospace;
3651 #content.about-page h3:nth-of-type(n+2) {
3652 clear: both;
3655 /******************/
3656 /* IMAGES OVERLAY */
3657 /******************/
3659 #images-overlay + #content .post-body img {
3660 visibility: hidden;
3663 #images-overlay div {
3664 position: absolute;
3666 #images-overlay div::after {
3667 content: "Click to enlarge";
3668 display: block;
3669 position: absolute;
3670 margin: auto;
3671 left: 0;
3672 right: 0;
3673 bottom: 10px;
3674 padding: 6px 10px;
3675 font-size: 1.25rem;
3676 background-color: rgba(255, 255, 255, 0.6);
3677 color: #000;
3678 border-radius: 5px;
3679 opacity: 0.0;
3680 transition: opacity 0.15s ease;
3681 pointer-events: none;
3683 @supports (width: -moz-fit-content) {
3684 #images-overlay div::after {
3685 width: -moz-fit-content;
3688 @supports (width: fit-content) {
3689 #images-overlay div::after {
3690 width: fit-content;
3693 #images-overlay div:hover::after {
3694 opacity: 1.0;
3697 #images-overlay img {
3698 width: 100%;
3701 /***************/
3702 /* IMAGE FOCUS */
3703 /***************/
3705 /*=--------------=*/
3706 /*= Hover styles =*/
3707 /*=--------------=*/
3709 #content img:hover,
3710 #images-overlay img:hover {
3711 filter: drop-shadow(0 0 3px #777);
3712 cursor: zoom-in;
3714 #content img:active,
3715 #images-overlay img:active {
3716 transform: scale(0.975);
3719 /*=---------=*/
3720 /*= Overlay =*/
3721 /*=---------=*/
3723 #image-focus-overlay {
3724 position: fixed;
3725 top: 0;
3726 right: 0;
3727 bottom: 0;
3728 left: 0;
3729 z-index: 2;
3730 display: none;
3731 cursor: zoom-out;
3733 #image-focus-overlay::before {
3734 content: "";
3735 display: block;
3736 position: absolute;
3737 top: 0;
3738 right: 0;
3739 bottom: 0;
3740 left: 0;
3741 background-color: #fff;
3742 opacity: 0.5;
3743 z-index: -1;
3745 #image-focus-overlay.engaged {
3746 display: initial;
3749 #image-focus-overlay img {
3750 margin: auto;
3751 position: absolute;
3752 left: 50%;
3753 top: 50%;
3754 transform: translateX(-50%) translateY(-50%);
3757 /*=-------------------=*/
3758 /*= Single-image mode =*/
3759 /*=-------------------=*/
3761 #image-focus-overlay:not(.slideshow) .image-number,
3762 #image-focus-overlay:not(.slideshow) .slideshow-buttons {
3763 visibility: hidden;
3766 /*=---------=*/
3767 /*= Caption =*/
3768 /*=---------=*/
3770 #image-focus-overlay .caption {
3771 position: absolute;
3772 bottom: 0.75em;
3773 background-color: rgba(255, 255, 255, 0.7);
3774 left: 9em;
3775 right: 9em;
3776 margin: auto;
3777 max-width: calc(100% - 18em);
3778 text-align: center;
3779 font-size: 1.375em;
3780 border-radius: 8px;
3781 z-index: 1;
3782 transition:
3783 bottom 0.2s ease;
3785 @supports (width: -moz-fit-content) {
3786 #image-focus-overlay .caption {
3787 width: -moz-fit-content;
3790 @supports (width: fit-content) {
3791 #image-focus-overlay .caption {
3792 width: fit-content;
3795 #image-focus-overlay .caption.hidden {
3796 bottom: -5em;
3797 transition:
3798 bottom 0.5s ease;
3801 #image-focus-overlay .caption p {
3802 margin: 1em 1.25em;
3803 color: #000;
3806 #image-focus-overlay .caption:not(:empty)::before {
3807 content: "";
3808 display: block;
3809 position: absolute;
3810 width: 100vw;
3811 height: calc(100% + 1.5em);
3812 z-index: -1;
3813 top: -0.75em;
3814 left: calc(-50vw + 50%);
3818 /*=--------------=*/
3819 /*= Help overlay =*/
3820 /*=--------------=*/
3822 #image-focus-overlay .help-overlay {
3823 position: absolute;
3824 display: flex;
3825 flex-flow: column;
3826 z-index: 2;
3827 font-size: 1.5rem;
3828 padding: 1em;
3829 border-radius: 10px;
3830 bottom: 1em;
3831 right: 1em;
3832 overflow: hidden;
3833 white-space: nowrap;
3834 color: transparent;
3835 cursor: default;
3836 visibility: hidden;
3837 transition:
3838 visibility 1s ease,
3839 color 1s ease,
3840 background-color 1s ease,
3841 bottom 0.3s ease;
3843 #image-focus-overlay .help-overlay:hover {
3844 max-width: 24em;
3845 max-height: 14em;
3846 background-color: rgba(255, 255, 255, 0.85);
3847 color: #000;
3848 visibility: visible;
3849 transition:
3850 visibility 0.2s ease 0.3s,
3851 color 0.2s ease 0.3s,
3852 background-color 0.2s ease 0.3s;
3855 #image-focus-overlay .help-overlay::after {
3856 content: "\F128";
3857 font-family: "Font Awesome", "Font Awesome 5 Free";
3858 font-weight: 900;
3859 font-size: 2rem;
3860 position: absolute;
3861 right: 0;
3862 bottom: 0;
3863 padding: 10px;
3864 color: #fff;
3865 filter: drop-shadow(0 0 6px #000);
3866 visibility: visible;
3867 opacity: 0.85;
3868 transition:
3869 visibility 1s ease;
3871 #image-focus-overlay .help-overlay:hover::after {
3872 visibility: hidden;
3873 transition:
3874 visibility 0.2s ease 0.3s;
3877 #image-focus-overlay .help-overlay p {
3878 margin: 0;
3879 text-indent: -2em;
3880 padding-left: 2em;
3881 max-width: 100%;
3882 overflow: hidden;
3884 #image-focus-overlay .help-overlay p + p {
3885 margin: 0.75em 0 0 0;
3887 #image-focus-overlay .help-overlay.hidden {
3888 bottom: -2em;
3891 /*=--------------=*/
3892 /*= Slide number =*/
3893 /*=--------------=*/
3895 #image-focus-overlay .image-number {
3896 position: absolute;
3897 z-index: 2;
3898 font-size: 1.75rem;
3899 left: 1em;
3900 bottom: 1em;
3901 font-weight: 600;
3902 text-shadow:
3903 0 0 3px #000,
3904 0 0 5px #000,
3905 0 0 8px #000,
3906 0 0 13px #000;
3907 width: 1.5em;
3908 text-align: right;
3909 white-space: nowrap;
3910 transition: bottom 0.3s ease;
3912 #image-focus-overlay .image-number::before {
3913 content: "#";
3914 opacity: 0.3;
3916 #image-focus-overlay .image-number::after {
3917 content: " of " attr(data-number-of-images);
3918 opacity: 0.3;
3920 #image-focus-overlay .image-number:hover::before,
3921 #image-focus-overlay .image-number:hover::after {
3922 opacity: 1.0;
3924 #image-focus-overlay .image-number.hidden {
3925 bottom: -1.25em;
3928 /*=-------------------=*/
3929 /*= Slideshow buttons =*/
3930 /*=-------------------=*/
3932 #image-focus-overlay .slideshow-buttons {
3933 position: absolute;
3934 top: 0;
3935 left: 0;
3936 width: 100%;
3937 height: 100%;
3938 z-index: 1;
3939 display: flex;
3940 justify-content: space-between;
3941 pointer-events: none;
3943 #image-focus-overlay .slideshow-buttons button {
3944 font-family: "Font Awesome", "Font Awesome 5 Free";
3945 font-weight: 900;
3946 font-size: 3rem;
3947 padding: 0.5em;
3948 color: #1f1f1f;
3949 position: relative;
3950 left: 0;
3951 transition:
3952 left 0.3s ease;
3953 pointer-events: auto;
3955 #image-focus-overlay .slideshow-buttons button::selection {
3956 background-color: transparent;
3958 @media only screen and (hover: hover) {
3959 #image-focus-overlay .slideshow-buttons button:hover {
3960 background-color: rgba(255, 255, 255, 0.1);
3961 color: #777;
3964 #image-focus-overlay .slideshow-buttons button:active {
3965 transform: none;
3966 color: #666;
3968 #image-focus-overlay .slideshow-buttons button:disabled {
3969 text-shadow: none;
3970 background-color: transparent;
3971 color: #1f1f1f;
3972 cursor: default;
3973 opacity: 0.4;
3975 #image-focus-overlay .slideshow-button.previous.hidden {
3976 left: -1.75em;
3978 #image-focus-overlay .slideshow-button.next.hidden {
3979 left: 1.75em;
3982 /*=-----------------=*/
3983 /*= Background blur =*/
3984 /*=-----------------=*/
3986 .blurred {
3987 filter: blur(3px);
3990 /**************************/
3991 /* QUALIFIED HYPERLINKING */
3992 /**************************/
3994 #content.no-nav-bars {
3995 margin: 8px auto;
3997 #content.no-nav-bars + #ui-elements-container > * {
3998 padding-top: 8px;
4001 #aux-about-link {
4002 position: fixed;
4003 top: 40px;
4004 left: calc((100% - 900px) / 2 - 69px);
4005 width: 1.5em;
4006 height: 1.5em;
4007 text-align: center;
4008 display: table;
4010 #aux-about-link a {
4011 display: table-cell;
4012 width: 100%;
4013 vertical-align: middle;
4014 font-family: "Font Awesome", "Font Awesome 5 Free";
4015 font-weight: 900;
4016 font-size: 1.25rem;
4017 opacity: 0.4;
4018 z-index: 1;
4021 .qualified-linking {
4022 margin: 0;
4023 position: relative;
4025 .qualified-linking input[type='checkbox'] {
4026 visibility: hidden;
4027 width: 0;
4028 height: 0;
4029 margin: 0;
4031 .qualified-linking label {
4032 font-family: "Font Awesome", "Font Awesome 5 Free";
4033 font-weight: 900;
4034 font-size: 1rem;
4035 padding: 0 0.5em;
4036 display: inline-block;
4037 margin-left: 0.25em;
4039 .qualified-linking label:hover {
4040 cursor: pointer;
4042 .qualified-linking label:active span {
4043 display: inline-block;
4044 transform: scale(0.9);
4046 .qualified-linking label::selection {
4047 background-color: transparent;
4050 .qualified-linking label::after {
4051 content: "";
4052 width: 100vw;
4053 height: 0;
4054 left: 0;
4055 top: 0;
4056 position: fixed;
4057 z-index: 1;
4058 cursor: default;
4060 .qualified-linking input[type='checkbox']:checked + label::after {
4061 height: 100vh;
4064 .qualified-linking-toolbar {
4065 position: absolute;
4066 right: 0.25em;
4067 top: 110%;
4068 z-index: 1;
4070 .qualified-linking input[type='checkbox'] ~ .qualified-linking-toolbar {
4071 display: none;
4073 .qualified-linking input[type='checkbox']:checked ~ .qualified-linking-toolbar {
4074 display: block;
4076 #qualified-linking-toolbar-toggle-checkbox-bottom ~ .qualified-linking-toolbar {
4077 top: unset;
4078 bottom: 125%;
4081 .qualified-linking-toolbar a {
4082 display: block;
4083 padding: 0 6px;
4084 margin: 4px;
4086 .qualified-linking-toolbar a::selection {
4087 background-color: transparent;
4090 /*****************/
4091 /* HOVER PREVIEW */
4092 /*****************/
4094 #preview-popup-toggle {
4095 position: absolute;
4096 right: -67px;
4097 bottom: 285px;
4098 cursor: pointer;
4099 color: var(--GW-toggle-widget-color, #666);
4101 #preview-popup-toggle:hover {
4102 color: var(--GW-toggle-widget-hover-color, #aeaeae);
4105 #content.preview:not(not) {
4106 padding: 0;
4108 #content.preview > .comment-thread {
4109 margin: 2px;
4111 #content.preview.individual-thread-page > .comment-thread > .comment-item {
4112 border: none;
4114 #content.preview.user-page .page-main-heading, #content.preview.user-page .user-stats {
4115 padding: 0 8px;
4117 #content.preview.user-page .page-main-heading {
4118 margin-left: 8px;
4120 #content.preview.not(not) .body-text {
4121 margin-left: 8px;
4122 margin-right: 8px;
4124 #content.preview.user-page .user-stats {
4125 margin-right: 32px;
4127 #content.preview.user-page .page-toolbar, #content.preview.user-page nav {
4128 display: none;
4130 #content.preview button.vote {
4131 display: none;
4133 #content.preview > h1.listing {
4134 max-height: unset;
4136 #content.preview.user-page > .comment-thread {
4137 margin: 0.5em 0;
4139 #content.preview > .post {
4140 margin: 0 18px;
4142 #content.preview .post-title {
4143 margin-top: 0.5em;
4145 #content.preview .post-meta {
4146 line-height: 1.0;
4148 #content.preview .body-text {
4149 font-size: 1em;
4151 #content.preview nav.contents,
4152 #content.preview .lw2-link {
4153 display: none;
4156 .preview-popup {
4157 position: fixed;
4158 transform-origin: top;
4159 top: 10%;
4160 right: 10%;
4161 max-width: 700px;
4162 z-index: 10001;
4163 background-color: #131313;
4164 border: 1px solid #2c2c2c;
4165 box-shadow: 2px 6px 20px -4px #fff;
4166 transition: height 0.2s ease, top 0.2s ease;
4168 .popup-hide-button {
4169 position: fixed;
4170 top: 4px;
4171 right: 4px;
4172 color: #fff;
4173 background-color: #000;
4174 width: 28px;
4175 height: 28px;
4176 display: flex;
4177 font-family: "Font Awesome";
4178 font-size: 14px;
4179 line-height: 1;
4180 border: 1px solid #393939;
4181 border-radius: 28px;
4182 align-items: center;
4183 justify-content: center;
4184 //padding-bottom: 2px;
4185 padding-left: 1.5px;
4186 font-family: "Font Awesome", "Font Awesome 5 Free";
4187 cursor: pointer;
4189 .popup-hide-button:hover::before {
4190 content: "Turn off preview popups";
4191 display: block;
4192 position: absolute;
4193 width: max-content;
4194 right: 32px;
4195 color #fff;
4196 background-color: #000;
4197 border: 1px solid #131313;
4198 border-radius: 2px;
4199 padding: 4px;
4202 /********/
4203 /* MATH */
4204 /********/
4206 .mathjax-block-container {
4207 display: block;
4208 overflow-y: hidden;
4209 border-radius: 6px;
4210 margin: 1em 0 1.5em 0;
4212 .mathjax-inline-container {
4213 max-width: 100%;
4214 overflow-x: auto;
4215 overflow-y: hidden;
4216 position: relative;
4217 padding: 0 1px;
4219 #content .mathjax-inline-container,
4220 #content .mathjax-inline-container .mjpage,
4221 #content .mathjax-inline-container .mjx-chtml,
4222 #content .mathjax-inline-container .mjx-math,
4223 #content .mathjax-inline-container .mjx-mrow {
4224 display: inline;
4225 white-space: normal;
4227 .post .mathjax-inline-container {
4228 line-height: 1;
4230 .comment .mathjax-inline-container {
4231 line-height: 1;
4233 .mathjax-inline-container .mjx-chtml {
4234 padding: 0;
4237 /************/
4238 /* SPOILERS */
4239 /************/
4241 .spoiler {
4242 color: #fff;
4243 background-color: currentColor;
4244 transition: none;
4245 text-shadow: none;
4246 margin: 1em 0;
4247 box-shadow: 0 0 0 1px currentColor inset;
4248 overflow: auto;
4250 .spoiler:not(:last-child) {
4251 margin-bottom: 0;
4253 #content .spoiler * {
4254 color: inherit;
4255 border: none;
4257 .spoiler:hover {
4258 color: unset;
4259 background-color: unset;
4260 text-shadow: unset;
4261 transition:
4262 color 0.1s ease-out 0.1s,
4263 background-color 0.1s ease-out 0.1s,
4264 text-shadow 0.1s ease-out 0.1s;
4266 .spoiler::selection,
4267 .spoiler ::selection {
4268 color: #000;
4269 background-color: #fff;
4271 .spoiler:not(:hover)::selection,
4272 .spoiler:not(:hover) ::selection {
4273 background-color: transparent;
4276 /*= Fix for LessWrong being weird =*/
4278 .spoiler > p {
4279 padding: 0 7px;
4281 .spoiler > p:first-child {
4282 margin-top: 0.25em;
4284 .spoiler > p:last-child {
4285 margin-bottom: 0;
4286 padding-bottom: 0.25em;
4288 .spoiler > p:hover ~ p {
4289 background-color: currentColor;
4291 .spoiler > p + p {
4292 margin-top: -1em;
4294 .spoiler > p:not(:first-child) {
4295 padding-top: 0.5em;
4297 .spoiler > p:not(:last-child) {
4298 padding-bottom: 0.5em;
4301 .spoiler:not(:hover) pre,
4302 .spoiler:not(:hover) code {
4303 background-color: inherit;
4304 box-shadow: none;
4306 #content .spoiler pre {
4307 border-color: currentColor;
4308 border-style: solid;
4309 border-width: 0 1px;
4310 border-radius: 0;
4313 /*******************/
4314 /* PAGE LIST INDEX */
4315 /*******************/
4317 .page-list-index {
4318 margin: 1em 30px;
4319 line-height: 1.2;
4322 .page-list-index > p {
4323 font-weight: bold;
4324 font-size: 1.2em;
4327 .page-list-index > ul * {
4328 margin: 0;
4331 .page-list-index ul {
4332 padding-left: 1.5em;
4335 .page-list-index li {
4336 margin-top: 0.67em;
4339 .page-list-index li > a {
4340 display: block;
4341 font-size: 1.1em;
4342 font-weight: bold;
4343 margin: 0.33em 0;
4346 .page-list-index li > a:last-child {
4347 margin-bottom: 1em;
4351 /*****************/
4352 /* USER MENTIONS */
4353 /*****************/
4355 .textarea-container .autocomplete-container {
4356 position: absolute;
4357 overflow-y: auto;
4358 font-size: 1.125rem;
4359 cursor: default;
4360 backdrop-filter: blur(2px);
4361 width: 360px;
4363 .textarea-container .autocomplete-container:empty {
4364 display: none;
4367 @media only screen and (min-width: 521px) {
4368 .textarea-container .autocomplete-container.inside {
4369 max-height: calc(100% - 36px);
4370 top: 32px;
4372 .textarea-container .autocomplete-container.outside {
4373 max-height: calc(100% - 28px);
4374 top: 28px;
4375 z-index: 10001;
4378 .textarea-container .autocomplete-container.inside.right {
4379 right: 18px;
4381 .textarea-container .autocomplete-container.inside.left {
4382 left: 18px;
4384 .textarea-container .autocomplete-container.outside.right {
4385 left: calc(100% + 3px);
4387 .textarea-container .autocomplete-container.outside.left {
4388 right: calc(100% + 3px);
4391 head.content-width-normal + body .textarea-container .autocomplete-container.outside {
4392 max-width: calc((100vw - (900px - 40px * 2)) / 2);
4394 head.content-width-wide + body .textarea-container .autocomplete-container.outside {
4395 max-width: calc((100vw - (1150px - 40px * 2)) / 2);
4397 head.content-width-fluid + body .textarea-container .autocomplete-container.outside {
4398 max-width: calc((300px + 40px * 2) / 2);
4402 .textarea-container .autocomplete-container div {
4403 padding: 2px 8px 0 8px;
4404 white-space: nowrap;
4405 display: flex;
4406 justify-content: flex-end;
4409 .textarea-container .autocomplete-container div span.name {
4410 flex: 1 1 auto;
4411 width: calc(100% - 9em);
4412 overflow: hidden;
4413 text-overflow: ellipsis;
4415 .textarea-container .autocomplete-container div span.name:hover {
4416 overflow: visible;
4417 z-index: 1;
4419 .textarea-container .autocomplete-container div span.age,
4420 .textarea-container .autocomplete-container div span.karma {
4421 font-size: 0.9em;
4422 text-align: right;
4424 .textarea-container .autocomplete-container div span.age {
4425 flex: 0 0 3em;
4427 .textarea-container .autocomplete-container div span.karma {
4428 flex: 0 0 6em;
4432 /***************/
4433 /* COLLECTIONS */
4434 /***************/
4436 h2.sequence-chapter,
4437 h3.sequence-chapter,
4438 h4.sequence-chapter {
4439 text-align: center;
4441 h2.sequence-chapter::before,
4442 h3.sequence-chapter::before,
4443 h4.sequence-chapter::before {
4444 display: block;
4445 clear: both;
4446 margin: 1.5em 0 0.75em 0;
4447 font-style: normal;
4448 font-weight: normal;
4449 font-family: 'Concourse', 'a_Avante', 'GW-Symbols';
4451 h2.sequence-chapter::before {
4452 content: '\25A3';
4454 h3.sequence-chapter::before {
4455 content: '\25AA\2004\25AA';
4457 h4.sequence-chapter::before {
4458 content: '\00B7\2004\00B7\2004\00B7';
4462 /*******************/
4463 /* ALIGNMENT FORUM */
4464 /*******************/
4466 #content.alignment-forum-index-page::after {
4467 content: "Alignment Forum";
4468 font-size: 1.5rem;
4469 margin: 0.375em 0 0 -0.375em;
4470 order: -1;
4473 /**********************/
4474 /* FOR NARROW SCREENS */
4475 /**********************/
4477 @media only screen and (max-width: 1440px) {
4478 #hns-date-picker {
4479 right: -81px;
4480 padding: 8px 10px 10px 10px;
4481 bottom: 62px;
4482 display: none;
4484 #hns-date-picker::before {
4485 content: "";
4486 position: absolute;
4487 display: block;
4488 z-index: -1;
4489 height: calc(100% + 2px);
4490 top: -1px;
4491 left: -1px;
4492 width: 50%;
4495 @media only screen and (max-width: 1160px) {
4496 #new-comment-nav-ui {
4497 bottom: 180px;
4498 right: -68px;
4500 #hns-date-picker {
4501 bottom: 200px;
4502 right: -36px;
4504 #hns-date-picker::before {
4505 width: calc(100% - 35px);
4507 #theme-selector button::before {
4508 right: unset;
4509 left: 100%;
4511 #theme-selector:hover::after {
4512 content: "";
4513 display: block;
4514 position: absolute;
4515 width: calc(6em - 7px);
4516 height: calc(100% + 2px);
4517 top: 0;
4518 left: calc(100% + 1px);
4520 #anti-kibitzer-toggle {
4521 bottom: 330px;
4524 @media only screen and (max-width: 1080px) {
4525 #width-selector {
4526 right: -30px;
4528 #width-selector button {
4529 display: block;
4531 #text-size-adjustment-ui {
4532 top: 90px;
4533 right: -30px;
4535 #text-size-adjustment-ui button {
4536 display: block;
4537 position: relative;
4539 #text-size-adjustment-ui button.increase {
4540 bottom: 48px;
4542 #text-size-adjustment-ui button.decrease {
4543 top: 50px;
4545 #theme-selector {
4546 top: 46px;
4547 left: -44px;
4549 #theme-tweaker-toggle {
4550 left: -44px;
4551 top: 2px;
4553 #theme-tweaker-toggle button {
4554 height: 2em;
4555 width: 2em;
4556 padding: 7px;
4558 #quick-nav-ui {
4559 right: -54px;
4561 #new-comment-nav-ui {
4562 right: -55px;
4564 #hns-date-picker {
4565 right: -23px;
4567 #hns-date-picker::before {
4568 width: calc(100% - 22px);
4570 #anti-kibitzer-toggle {
4571 right: -54px;
4574 @media only screen and (max-width: 1040px) {
4575 #quick-nav-ui {
4576 right: -49px;
4578 #new-comment-nav-ui {
4579 right: -50px;
4581 #hns-date-picker {
4582 right: -18px;
4584 #hns-date-picker::before {
4585 width: calc(100% - 17px);
4587 #anti-kibitzer-toggle {
4588 right: -50px;
4591 @media only screen and (max-width: 1020px) {
4592 #quick-nav-ui {
4593 right: -20px;
4595 #new-comment-nav-ui {
4596 right: -21px;
4598 #new-comment-nav-ui .new-comments-count::before {
4599 content: "";
4600 position: absolute;
4601 width: 100%;
4602 height: calc(100% + 45px);
4603 z-index: -1;
4604 left: 0;
4605 top: -22px;
4607 #hns-date-picker {
4608 right: 19px;
4610 #hns-date-picker::before {
4611 width: 100%;
4613 #anti-kibitzer-toggle {
4614 right: -20px;
4617 @media only screen and (max-width: 1000px) {
4618 #theme-selector {
4619 left: -17px;
4620 top: 120px;
4621 padding: 3px 0;
4622 max-width: 32px;
4624 #theme-selector button {
4625 margin: 1px 4px;
4627 #text-size-adjustment-ui {
4628 top: 100px;
4629 right: -12px;
4631 @media not screen and (hover: none) {
4632 #quick-nav-ui,
4633 #new-comment-nav-ui,
4634 #new-comment-nav-ui + #hns-date-picker,
4635 #anti-kibitzer-toggle {
4636 opacity: 0.4;
4638 #quick-nav-ui:hover,
4639 #new-comment-nav-ui:hover,
4640 #new-comment-nav-ui + #hns-date-picker:hover,
4641 #new-comment-nav-ui + #hns-date-picker:focus-within,
4642 #new-comment-nav-ui:hover + #hns-date-picker,
4643 #anti-kibitzer-toggle:hover {
4644 opacity: 1.0;
4647 #theme-tweaker-toggle {
4648 top: 70px;
4649 left: -21px;
4653 /**************/
4654 /* PRINT VIEW */
4655 /**************/
4657 @media only print {
4658 .nav-bar {
4659 visibility: hidden;
4660 max-height: 0;
4661 overflow: hidden;
4663 #ui-elements-container {
4664 display: none;
4666 #images-overlay {
4667 display: none;
4669 #images-overlay + #content .post-body img {
4670 visibility: visible;
4672 .comment-controls {
4673 display: none;
4675 #comments-sort-mode-selector {
4676 display: none;
4678 .comment-minimize-button {
4679 display: none;
4681 .post-meta .qualified-linking,
4682 .post-meta .lw2-link {
4683 display: none;
4685 .comment-meta .permalink,
4686 .comment-meta .lw2-link,
4687 .comment-meta .comment-parent-link {
4688 display: none;
4690 .new-comment::before {
4691 display: none;
4693 #content::before {
4694 box-shadow: none;
4698 /*****************/
4699 /* MOBILE LAYOUT */
4700 /*****************/
4702 /* Hide the mobile elements on desktop screens: */
4704 @media only screen and (max-width: 1160px) {
4705 #post-nav-ui-toggle,
4706 #appearance-adjust-ui-toggle {
4707 display: none;
4711 @media only screen and (max-width: 1160px) {
4713 /*====================*/
4714 /* MOBILE UI ELEMENTS */
4715 /*====================*/
4717 #ui-elements-container {
4718 height: unset !important;
4719 position: unset;
4721 #ui-elements-container > * {
4722 position: fixed;
4723 visibility: hidden;
4724 opacity: 1.0;
4725 z-index: 10000;
4728 #ui-elements-container > div[id$='-ui-toggle'] {
4729 visibility: visible;
4730 display: inline-block;
4731 border-radius: 50%;
4732 z-index: 10000;
4734 #ui-elements-container > div[id$='-ui-toggle'] button,
4735 #theme-selector .theme-selector-close-button {
4736 font-family: Font Awesome;
4737 font-weight: 900;
4738 font-size: 32px;
4739 padding: 10px;
4740 opacity: 0.8;
4741 -webkit-tap-highlight-color: transparent;
4742 transition: transform 0.2s ease;
4744 #ui-elements-container > div[id$='-ui-toggle'] button::selection,
4745 #theme-selector .theme-selector-close-button::selection {
4746 background-color: transparent;
4748 #ui-elements-container > div[id$='-ui-toggle'] button::-moz-focus-inner,
4749 #theme-selector .theme-selector-close-button::-moz-focus-inner {
4750 border: none;
4752 #ui-elements-container > div[id$='-ui-toggle'] button.engaged {
4753 transform: rotate(-90deg);
4754 opacity: 1.0;
4757 #appearance-adjust-ui-toggle {
4758 bottom: 10px;
4759 left: 10px;
4762 #post-nav-ui-toggle {
4763 bottom: 10px;
4764 right: 10px;
4767 #theme-selector.engaged,
4768 #quick-nav-ui.engaged,
4769 #new-comment-nav-ui.engaged,
4770 #hns-date-picker.engaged {
4771 visibility: visible;
4774 #image-focus-overlay.engaged {
4775 visibility: visible;
4777 #image-focus-overlay .help-overlay {
4778 display: none;
4781 /*=========*/
4782 /* GENERAL */
4783 /*=========*/
4785 @media only screen and (max-width: 900px) {
4786 #content,
4787 #images-overlay,
4788 #ui-elements-container {
4789 min-width: unset;
4790 width: unset;
4792 #content {
4793 padding: 0 4px;
4797 /*================*/
4798 /* THEME SELECTOR */
4799 /*================*/
4801 #theme-selector {
4802 display: flex;
4803 flex-flow: column;
4804 background-color: #000;
4805 width: calc(100vw - 20px);
4806 max-width: 360px;
4807 padding: 0 0 3px 0;
4808 overflow: hidden;
4809 max-height: 0;
4810 transition:
4811 top 0.2s ease,
4812 max-height 0.2s ease,
4813 visibility 0.2s ease;
4814 top: calc(100% + 10px);
4815 left: 0;
4816 right: 0;
4817 margin: auto;
4819 #theme-selector.engaged {
4820 max-height: 1000px;
4821 top: 10px;
4822 z-index: 10001;
4824 #theme-selector::before {
4825 content: "Select theme";
4826 white-space: nowrap;
4827 display: block;
4828 font-weight: 600;
4829 font-size: 2rem;
4830 margin: 0.375em 1em 0.5em 1em;
4831 text-align: center;
4833 #theme-selector button {
4834 width: calc(100% - 0.5em);
4835 background-repeat: no-repeat;
4836 padding: 1em 0.875em;
4837 margin: 1px 4px;
4838 line-height: 1;
4839 height: unset;
4840 position: relative;
4842 #theme-selector button::after {
4843 content: attr(data-theme-description);
4844 color: #fff;
4845 white-space: nowrap;
4846 position: absolute;
4847 text-align: left;
4848 left: 2.5em;
4849 top: 1em;
4851 @media only screen and (max-height: 675px) {
4852 #theme-selector button {
4853 padding: 0.875em;
4855 #theme-selector button::after {
4856 top: 0.875em;
4859 #theme-selector .theme-selector-close-button {
4860 position: absolute;
4861 width: unset;
4862 background-color: transparent;
4863 top: 0;
4864 right: -3px;
4866 #theme-selector .theme-selector-close-button,
4867 #theme-selector .theme-selector-close-button:focus,
4868 #theme-selector .theme-selector-close-button:active,
4869 #theme-selector .theme-selector-close-button:hover {
4870 box-shadow: none;
4873 /*===============*/
4874 /* THEME TWEAKER */
4875 /*===============*/
4877 #theme-selector {
4878 padding: 0 0 64px 0;
4880 #theme-selector ~ #theme-tweaker-toggle {
4881 top: 100%;
4883 #theme-selector ~ #theme-tweaker-toggle::after {
4884 content: "Open theme tweaker";
4885 position: absolute;
4886 font-size: 0.625em;
4887 white-space: nowrap;
4888 left: -50%;
4889 top: 100%;
4891 #theme-selector.engaged ~ #theme-tweaker-toggle {
4892 visibility: visible;
4893 top: 530px;
4894 left: 0;
4895 right: 0;
4896 margin: auto;
4897 z-index: 11111;
4898 transition:
4899 top 0.2s ease,
4900 visibility 0.2s ease;
4902 @media only screen and (max-height: 675px) {
4903 #theme-selector.engaged ~ #theme-tweaker-toggle {
4904 top: 492px;
4907 @supports (width: -moz-fit-content) {
4908 #theme-selector.engaged ~ #theme-tweaker-toggle {
4909 width: -moz-fit-content;
4912 @supports (width: fit-content) {
4913 #theme-selector.engaged ~ #theme-tweaker-toggle {
4914 width: fit-content;
4917 #theme-selector.engaged ~ #theme-tweaker-toggle button {
4918 opacity: 1.0;
4921 #theme-tweaker-ui {
4922 visibility: visible;
4925 /*======================*/
4926 /* ANTI-KIBITZER TOGGLE */
4927 /*======================*/
4929 #theme-selector ~ #anti-kibitzer-toggle {
4930 top: 100%;
4931 bottom: unset;
4932 left: 0;
4933 right: 0;
4934 margin: auto;
4935 box-shadow: none;
4936 width: calc(100vw - 44px);
4937 max-width: 330px;
4938 text-align: right;
4939 pointer-events: none;
4941 #theme-selector.engaged ~ #anti-kibitzer-toggle {
4942 visibility: visible;
4943 z-index: 11110;
4944 top: 530px;
4945 transition:
4946 top 0.2s ease,
4947 visibility 0.2s ease;
4949 @media only screen and (max-height: 675px) {
4950 #theme-selector.engaged ~ #anti-kibitzer-toggle {
4951 top: 492px;
4954 #theme-selector.engaged ~ #anti-kibitzer-toggle button {
4955 pointer-events: auto;
4956 display: inline-block;
4959 /*=================*/
4960 /* QUICKNAV WIDGET */
4961 /*=================*/
4963 #quick-nav-ui {
4964 max-width: 0px;
4965 transition:
4966 max-width 0.2s ease,
4967 visibility 0.2s ease;
4968 display: flex;
4969 right: 72px;
4970 bottom: 14px;
4972 #quick-nav-ui.engaged {
4973 max-width: 1000px;
4975 #quick-nav-ui a {
4976 position: relative;
4977 margin: 2px;
4979 #quick-nav-ui a + a {
4980 margin-left: 5px;
4982 #quick-nav-ui a::after {
4983 position: absolute;
4984 top: calc(100% + 2px);
4985 font-size: 0.375rem;
4986 left: 0;
4987 right: 0;
4988 margin: auto;
4989 line-height: 1;
4990 padding: 2px;
4991 text-transform: uppercase;
4992 z-index: -1;
4994 @supports (width: -moz-fit-content) {
4995 #quick-nav-ui a::after {
4996 width: -moz-fit-content;
4999 @supports (width: fit-content) {
5000 #quick-nav-ui a::after {
5001 width: fit-content;
5004 #quick-nav-ui a[href='#top']::after {
5005 content: "Top";
5006 left: -1px;
5008 #quick-nav-ui a[href='#comments']::after {
5009 content: "Comments";
5011 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
5012 visibility: hidden;
5013 transition: visibility 0.2s ease;
5015 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui.engaged a[href='#comments'] {
5016 visibility: visible;
5018 #quick-nav-ui a[href='#bottom-bar']::after {
5019 content: "Bottom";
5022 /*======================*/
5023 /* NEW COMMENT QUICKNAV */
5024 /*======================*/
5026 #new-comment-nav-ui {
5027 max-width: 0px;
5028 max-height: 0px;
5029 transition:
5030 max-width 0.2s ease,
5031 max-height 0.2s ease,
5032 visibility 0.2s ease;
5033 display: flex;
5034 right: 78px;
5035 bottom: 70px;
5037 #new-comment-nav-ui::before {
5038 content: "New Comments";
5039 position: absolute;
5040 bottom: 100%;
5041 font-size: 0.5625rem;
5042 left: 0;
5043 right: 0;
5044 margin: auto;
5045 padding: 2px 3px;
5046 text-transform: uppercase;
5047 z-index: -1;
5049 @supports (width: -moz-fit-content) {
5050 #new-comment-nav-ui::before {
5051 width: -moz-fit-content;
5054 @supports (width: fit-content) {
5055 #new-comment-nav-ui::before {
5056 width: fit-content;
5059 #new-comment-nav-ui.engaged {
5060 max-width: 1000px;
5061 max-height: 1000px;
5063 #new-comment-nav-ui .new-comment-sequential-nav-button {
5064 top: unset;
5065 bottom: unset;
5066 padding: 2px 7px;
5068 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
5069 padding: 2px 7px 3px 7px;
5071 #new-comment-nav-ui .new-comments-count {
5072 padding: 4px 0 5px 0;
5074 #new-comment-nav-ui .new-comments-count::before {
5075 display: none;
5077 #new-comment-nav-ui button::after {
5078 position: absolute;
5079 font-size: 0.375rem;
5080 left: 0;
5081 right: 0;
5082 margin: auto;
5083 line-height: 1;
5084 text-transform: uppercase;
5085 pointer-events: none;
5087 #new-comment-nav-ui button.new-comment-previous::after {
5088 content: "Previous";
5089 bottom: 5px;
5091 #new-comment-nav-ui button.new-comment-next::after {
5092 content: "Next";
5093 top: 7px;
5096 /*=================*/
5097 /* HNS DATE PICKER */
5098 /*=================*/
5100 #hns-date-picker {
5101 max-height: 0px;
5102 bottom: 132px;
5103 right: 62px;
5104 transition:
5105 max-height 0.2s ease,
5106 visibility 0.2s ease;
5108 #hns-date-picker.engaged {
5109 max-height: 1000px;
5111 #hns-date-picker::before {
5112 width: calc(100% + 2px);
5113 border-width: 1px !important;
5116 /*=========*/
5117 /* NAV BAR */
5118 /*=========*/
5120 #bottom-bar {
5121 margin-left: auto;
5122 margin-right: auto;
5123 width: calc(100% - 9rem + 8px);
5124 background: rgba(0, 0, 0, 0.85);
5125 backdrop-filter: blur(1px);
5127 #content.index-page #bottom-bar {
5128 z-index: 10001;
5130 #bottom-bar .nav-item {
5131 box-shadow: none;
5132 position: relative;
5134 #bottom-bar .nav-inner {
5135 font-size: 2rem;
5136 padding: 1rem 0 1.25rem 0;
5137 visibility: hidden;
5138 position: static;
5139 width: 0;
5141 #content #bottom-bar .nav-item .nav-inner::before {
5142 margin: 0;
5143 visibility: visible;
5144 position: absolute;
5145 width: 100%;
5146 height: 100%;
5147 left: 0;
5148 top: 0;
5149 padding: 1rem 0;
5151 #bottom-bar .nav-inner::after {
5152 display: block;
5153 visibility: visible;
5154 text-transform: uppercase;
5155 color: unset;
5156 font-size: 0.75rem;
5157 top: unset;
5158 left: 0;
5159 bottom: 1rem;
5160 width: 100%;
5162 #bottom-bar #nav-item-first .nav-inner::after {
5163 content: "First Page";
5165 #bottom-bar #nav-item-prev .nav-inner::after {
5166 content: "Prev. Page";
5168 #bottom-bar #nav-item-top .nav-inner::after {
5169 content: "Top";
5171 #bottom-bar #nav-item-next .nav-inner::after {
5172 content: "Next Page";
5174 #bottom-bar #nav-item-last .nav-inner::after {
5175 content: "Last Page";
5178 @media only screen and (max-width: 900px) {
5179 .nav-bar-top {
5180 font-size: 0.75rem;
5182 .nav-bar {
5183 width: calc(100% + 8px);
5184 margin: 0 -4px;
5186 .nav-bar .nav-inner::after {
5187 display: none;
5190 #primary-bar .nav-item {
5191 flex: 1 1 100%;
5193 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) {
5194 flex: 1 1 60px;
5196 .nav-bar-top:not(#anything) .nav-inner {
5197 text-transform: uppercase;
5198 padding: 6px;
5200 .nav-bar-top .nav-inner::before {
5201 display: block;
5202 font-family: "Font Awesome";
5203 font-size: 2em;
5204 font-weight: 900;
5207 #nav-item-home .nav-inner::before {
5208 content: "\F015";
5210 #nav-item-featured .nav-inner::before {
5211 content: "\F005";
5213 #nav-item-all .nav-inner::before {
5214 content: "\F069";
5216 #nav-item-meta .nav-inner::before {
5217 content: "\F077";
5219 #nav-item-tags .nav-inner::before {
5220 content: "\F02C";
5222 #nav-item-recent-comments > * > span {
5223 display: none;
5225 #nav-item-recent-comments .nav-inner::before,
5226 #nav-item-alignment-forum-comments .nav-inner::before {
5227 content: "\F036";
5229 #nav-item-alignment-forum .nav-inner::before {
5230 content: "AF";
5231 font-family: Concourse, 'Changa One';
5233 #nav-item-questions .nav-inner::before {
5234 content: "?";
5235 font-family: Concourse, 'Changa One';
5237 #nav-item-events .nav-inner::before {
5238 content: "\F5A0";
5240 #nav-item-shortform .nav-inner::before {
5241 content: "\F2F2";
5243 #nav-item-archive .nav-inner::before {
5244 content: "\F187";
5246 #nav-item-about .nav-inner::before {
5247 content: "\F129";
5249 #nav-item-search {
5250 font-size: 2em;
5251 padding: 10px;
5253 #nav-item-search .nav-inner::before {
5254 content: none;
5256 #nav-item-search .nav-inner {
5257 height: 100%;
5258 display: flex;
5260 #nav-item-search input {
5261 width: 100%;
5262 height: 100%;
5264 #nav-item-search button {
5265 height: 100%;
5266 padding: 5px 5px 5px 10px;
5267 width: 40px;
5268 overflow: visible;
5269 visibility: hidden;
5271 #nav-item-search button::before {
5272 content: "\F002";
5273 font-family: Font Awesome;
5274 font-weight: 900;
5275 visibility: visible;
5277 #nav-item-login {
5278 padding: 0;
5280 #nav-item-login .nav-inner::before {
5281 content: "\F007";
5284 @media only screen and (max-width: 520px) {
5285 .nav-bar-top {
5286 font-size: 0.5rem;
5289 #nav-item-search,
5290 #nav-item-search .nav-inner {
5291 padding: 0;
5293 #nav-item-search button {
5294 width: 31px;
5297 #bottom-bar #nav-item-first .nav-inner::after {
5298 content: "First";
5300 #bottom-bar #nav-item-prev .nav-inner::after {
5301 content: "Prev";
5303 #bottom-bar #nav-item-next .nav-inner::after {
5304 content: "Next";
5306 #bottom-bar #nav-item-last .nav-inner::after {
5307 content: "Last";
5311 /*=================*/
5312 /* INBOX INDICATOR */
5313 /*=================*/
5315 @media only screen and (max-width: 900px) {
5316 #inbox-indicator {
5317 width: 100%;
5318 top: 0;
5319 pointer-events: none;
5321 #inbox-indicator::before {
5322 width: 100%;
5323 font-size: 1rem;
5324 text-align: right;
5325 padding: 1px 6px;
5327 #inbox-indicator.new-messages {
5328 pointer-events: auto;
5330 #inbox-indicator.new-messages::before {
5331 box-shadow: 0 0 8px 1px #0090e0 inset;
5334 @media only screen and (max-width: 520px) {
5335 #inbox-indicator::before {
5336 font-size: 0.75rem;
5337 padding: 2px 5px;
5340 @media only screen and (max-width: 374px) {
5341 #inbox-indicator::before {
5342 font-size: 0.625rem;
5346 /*===================*/
5347 /* TOP PAGINATION UI */
5348 /*===================*/
5350 #top-nav-bar {
5351 font-size: 1.75rem;
5354 /*==============*/
5355 /* PAGE TOOLBAR */
5356 /*==============*/
5358 @media only screen and (max-width: 900px) {
5359 #content > .page-toolbar {
5360 font-size: 1rem;
5361 margin-right: 0;
5363 #content.user-page > .page-toolbar {
5364 grid-column: 2 / span 2;
5365 margin: 0 0 6px 0;
5368 @media only screen and (max-width: 520px) {
5369 #content:not(.user-page) .page-toolbar {
5370 display: flex;
5371 flex-direction: column-reverse;
5372 text-align: right;
5373 align-self: start;
5374 padding: 4px 0 0 0;
5376 #content.user-page .page-toolbar {
5377 display: flex;
5378 flex-flow: row;
5379 justify-content: flex-end;
5380 padding: 2px 0 0 0;
5382 #content.user-page .page-toolbar > form,
5383 #content.user-page .page-toolbar > .button {
5384 text-align: center;
5385 flex-basis: 25%;
5386 margin-left: 1.5em;
5388 #content.user-page .page-toolbar .button {
5389 text-transform: uppercase;
5390 font-size: 0.625rem;
5392 #content.user-page .page-toolbar .button::before {
5393 font-size: 1.375rem;
5394 display: block;
5395 padding: 0;
5397 #content.user-page .page-toolbar .rss {
5398 white-space: nowrap;
5399 margin: 0 0 0 1.5em;
5401 .page-toolbar > * {
5402 line-height: 1.15;
5403 padding: 6px 0;
5404 margin: 0;
5408 /*==============*/
5409 /* SUBLEVEL NAV */
5410 /*==============*/
5412 @media only screen and (max-width: 900px) {
5413 .sublevel-nav:not(.sort) {
5414 flex-wrap: wrap;
5415 width: calc(100vw - 200px);
5417 .sublevel-nav:not(.sort) .sublevel-item {
5418 margin: 1px;
5419 flex-basis: 7em;
5422 @media only screen and (max-width: 520px) {
5423 .sublevel-nav:not(.sort) .sublevel-item {
5424 font-size: 1rem;
5428 /*=====================*/
5429 /* SORT ORDER SELECTOR */
5430 /*=====================*/
5432 @media only screen and (max-width: 720px) {
5433 #content.index-page > .sublevel-nav.sort {
5434 flex-flow: column;
5435 margin-left: 4px;
5439 /*==========*/
5440 /* ARCHIVES */
5441 /*==========*/
5443 @media only screen and (max-width: 900px) {
5444 div[class^='archive-nav-'] {
5445 flex-wrap: wrap;
5446 justify-content: flex-start;
5448 .archive-nav *[class^='archive-nav-item'],
5449 .archive-nav *[class^='archive-nav-item']:first-child {
5450 padding: 10px;
5451 margin: 2px;
5452 max-width: unset;
5453 flex: 0 1 calc((100% / 8) - 4px);
5455 .archive-nav .archive-nav-item-day,
5456 .archive-nav .archive-nav-item-day:first-child {
5457 flex-basis: calc((100% / 16) - 4px);
5459 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-'] {
5460 margin-top: 8px;
5461 position: relative;
5463 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
5464 content: "";
5465 display: block;
5466 position: absolute;
5467 height: 1px;
5468 width: calc(100% + 8px);
5469 left: -4px;
5470 top: -4px;
5473 @media only screen and (max-width: 720px) {
5474 .archive-nav .archive-nav-item-day,
5475 .archive-nav .archive-nav-item-day:first-child {
5476 flex-basis: calc((100% / 12) - 4px);
5479 @media only screen and (max-width: 520px) {
5480 .archive-nav *[class^='archive-nav-item'],
5481 .archive-nav *[class^='archive-nav-item']:first-child {
5482 flex-basis: calc((100% / 5) - 4px);
5484 .archive-nav .archive-nav-item-day,
5485 .archive-nav .archive-nav-item-day:first-child {
5486 flex-basis: calc((100% / 8) - 4px);
5490 /*==========*/
5491 /* LISTINGS */
5492 /*==========*/
5494 h1.listing {
5495 max-height: unset;
5498 /*============*/
5499 /* USER PAGES */
5500 /*============*/
5502 #content.user-page h1.page-main-heading {
5503 align-self: end;
5505 @media only screen and (max-width: 520px) {
5506 #content.user-page h1.page-main-heading {
5507 overflow: hidden;
5508 text-overflow: ellipsis;
5510 #content.user-page .user-stats .karma-type {
5511 display: block;
5515 /*============*/
5516 /* LOGIN PAGE */
5517 /*============*/
5519 @media only screen and (max-width: 640px) {
5520 .login-container {
5521 flex-flow: column;
5522 margin: 0 auto 3em auto;
5523 max-width: 400px;
5525 .login-container #login-form,
5526 .login-container #signup-form {
5527 padding: 0 1em 1.25em 1em;
5528 grid-row-gap: 0;
5530 .login-container #signup-form {
5531 padding-top: 1em;
5533 .login-container #login-form > *,
5534 .login-container #signup-form > * {
5535 grid-column: 1 / span 2;
5537 .login-container form label {
5538 text-align: left;
5539 padding: 0;
5540 line-height: 1;
5542 .login-container form input {
5543 margin: 0.25em 0 0.75em 0;
5544 padding: 0.5em;
5546 .login-container form h1 {
5547 grid-column: 1 / span 2;
5548 margin: 0 0 0.25em 0;
5550 .login-container form a {
5551 margin: 0.75em 0 0 0;
5553 .login-container .login-tip {
5554 margin: 1.5em 1em 0 1em;
5558 /*==================*/
5559 /* POSTS & COMMENTS */
5560 /*==================*/
5562 @media only screen and (max-width: 720px) {
5563 .body-text ol > li {
5564 padding: 0 0 0 2.25em;
5566 .body-text ol > li::before {
5567 width: 1.75em;
5569 .body-text ul:not(.contents-list) > li,
5570 .body-text ul:not(.contents-list) > li ul > li {
5571 padding: 0 0 0 0.75em;
5573 .body-text ul:not(.contents-list) > li::before,
5574 .body-text ul:not(.contents-list) > li ul > li::before {
5575 width: 0.125em;
5576 margin-left: -0.06em;
5580 /*===========*/
5581 /* POST-META */
5582 /*===========*/
5584 .post-meta {
5585 line-height: 1.9;
5587 @media only screen and (max-width: 720px) {
5588 .post-meta .lw2-link span,
5589 .post-meta .karma-value span,
5590 .post-meta .comment-count span {
5591 display: none;
5593 .post-meta .comment-count::before {
5594 content: "\F086";
5595 font-family: Font Awesome;
5596 font-size: 0.875em;
5597 margin: 0 0.25em 0 0;
5598 font-weight: 400;
5602 /*===================*/
5603 /* POSTS & BODY TEXT */
5604 /*===================*/
5606 @media only screen and (max-width: 900px) {
5607 .post-body,
5608 h1.post-title,
5609 .tag-description,
5610 .sequence-text {
5611 padding: 0 6px;
5614 @media only screen and (max-width: 520px) {
5615 .post-body {
5616 font-size: 1.2rem;
5617 line-height: 1.45;
5619 h1.post-title {
5620 font-size: 2em;
5624 /*==============*/
5625 /* COMMENT-META */
5626 /*==============*/
5628 a.comment-parent-link::after {
5629 display: none;
5631 @media only screen and (max-width: 900px) {
5632 .comment-meta {
5633 padding: 2px 40px 2px 10px;
5636 @media only screen and (max-width: 720px) {
5637 .comment .karma-value span {
5638 display: none;
5640 .comment-meta .comment-parent-link {
5641 opacity: 1.0;
5644 @media only screen and (max-width: 520px) {
5645 .comment-meta {
5646 padding: 2px 24px 2px 10px;
5647 position: relative;
5649 .comment-meta > * {
5650 order: 3;
5652 .comment-meta > :not(.author) {
5653 line-height: 1.8;
5655 .comment-meta .author,
5656 .comment-meta .date {
5657 order: 1;
5659 .comment-meta:before {
5660 content: "";
5661 order: 2;
5662 flex-basis: 100%;
5664 .comment-post-title2 {
5665 display: block;
5666 text-overflow: ellipsis;
5667 overflow: hidden;
5669 .comment-meta .lw2-link {
5670 display: none;
5674 /*=======================*/
5675 /* COMMENTS COMPACT VIEW */
5676 /*=======================*/
5678 /*===========================*/
5679 /* COMMENT THREAD NAVIGATION */
5680 /*===========================*/
5682 @media only screen and (max-width: 900px) {
5683 a.comment-parent-link {
5684 width: 0;
5685 visibility: hidden;
5686 position: relative;
5688 a.comment-parent-link::before {
5689 padding: 0;
5690 font-size: 1em;
5691 left: 0;
5692 top: 0;
5693 line-height: inherit;
5694 visibility: visible;
5695 content: "\F3BF";
5696 transform: scaleX(-1);
5697 width: 2em;
5698 text-align: center;
5701 @media only screen and (max-width: 520px) {
5702 a.comment-parent-link {
5703 position: static;
5705 a.comment-parent-link::before {
5706 padding: 6px;
5707 left: unset;
5708 right: 0;
5709 top: unset;
5710 bottom: 0;
5711 height: 2em;
5715 /*=================================*/
5716 /* COMMENT THREAD MINIMIZE BUTTONS */
5717 /*=================================*/
5719 @media only screen and (max-width: 520px) {
5720 .comment-minimize-button{
5721 right: 2px;
5725 /*===========================*/
5726 /* COMMENTING AND POSTING UI */
5727 /*===========================*/
5729 @media only screen and (max-width: 900px) {
5730 .comment-controls .delete-button, .comment-controls .retract-button, .comment-controls .unretract-button, .comment-controls .edit-button {
5731 font-size: 0;
5733 .comment-controls .delete-button::before, .comment-controls .retract-button::before, .comment-controls .unretract-button::before, .comment-controls .edit-button::before {
5734 font-size: 0.9rem;
5736 .comment-controls .cancel-comment-button {
5737 max-width: 1.3em;
5738 overflow: hidden;
5739 margin-right: 0.125em;
5741 .comment-controls .edit-button::before {
5742 font-size: 0.9375rem;
5744 .comments > .comment-controls .cancel-comment-button {
5745 right: 8px;
5747 .comment-controls .cancel-comment-button::before {
5748 font-size: 1.25rem;
5751 @media only screen and (max-width: 520px) {
5752 .comment-controls {
5753 position: static;
5755 .comment-controls:focus-within {
5756 z-index: 10001;
5758 .comment-controls .cancel-comment-button {
5759 right: 10px;
5761 .textarea-container:focus-within textarea {
5762 position: fixed;
5763 top: 0;
5764 left: 2px;
5765 width: calc(100vw - 4px);
5766 height: calc(100% - 100px);
5767 min-height: unset;
5768 max-height: unset;
5769 border-width: 1px;
5770 z-index: 11001;
5772 #content.conversation-page .textarea-container:focus-within textarea {
5773 height: calc(100% - 54px);
5775 #content.conversation-page .textarea-container:focus-within::after {
5776 content: "";
5777 display: block;
5778 width: 100%;
5779 height: 50px;
5780 position: fixed;
5781 left: 0;
5782 bottom: 0;
5783 z-index: 11000;
5785 .textarea-container:focus-within .guiedit-buttons-container {
5786 position: fixed;
5787 z-index: 11002;
5788 left: 0;
5789 width: 100vw;
5790 height: auto;
5791 background-image: none;
5792 padding: 3px 4px 4px 4px;
5793 margin: 0;
5794 text-align: center;
5795 top: auto;
5796 bottom: 0;
5798 .textarea-container:focus-within button.guiedit {
5799 font-size: 0.9375rem;
5800 line-height: 1.5;
5801 height: auto;
5802 width: calc((100% / 10) - 2px);
5803 padding: 10px 1px 8px 0;
5804 position: relative;
5805 margin: 1px;
5807 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
5808 z-index: 11011;
5809 position: fixed;
5810 bottom: 7px;
5811 width: calc(((100% - 16px) / 10) * 2.5 - 7px);
5812 font-size: 1.25rem;
5813 padding: 5px 5px 6px 5px;
5814 display: block;
5816 .textarea-container:focus-within button.guiedit sup {
5817 position: absolute;
5818 left: calc(50% + 0.65em);
5819 top: calc(50% - 1.3em);
5821 .textarea-container:focus-within .guiedit-mobile-help-button {
5822 left: 8px;
5824 .textarea-container:focus-within .guiedit-mobile-exit-button {
5825 right: 8px;
5827 .guiedit::after {
5828 display: none;
5831 #markdown-hints,
5832 #edit-post-form #markdown-hints {
5833 z-index: 11111;
5834 position: fixed;
5835 top: 40px;
5836 left: 0;
5837 right: 0;
5838 margin: auto;
5839 padding: 4px 0 4px 8px;
5840 width: 310px;
5841 border-width: 3px;
5842 border-style: double;
5843 pointer-events: none;
5845 #markdown-hints::after {
5846 content: "(Type to hide this help box.)";
5847 color: #9740cb;
5848 display: block;
5849 margin: 12px 18px 13px 10px;
5850 padding: 5px;
5851 font-size: 0.9em;
5852 text-align: center;
5856 /*================*/
5857 /* EDIT POST FORM */
5858 /*================*/
5860 @media only screen and (max-width: 520px) {
5861 #edit-post-form {
5862 padding-bottom: 0;
5864 #edit-post-form .post-meta-fields {
5865 grid-template-columns: 4.5em auto auto auto 1fr auto;
5867 #edit-post-form label[for='url'],
5868 #edit-post-form label[for='section'],
5869 #edit-post-form label[for='title'] {
5870 padding-left: 0;
5872 #edit-post-form .post-meta-fields input[type='checkbox'] + label.iconify {
5873 white-space: normal;
5874 line-height: 0.9;
5875 top: -1px;
5876 font-family: Font Awesome;
5877 font-weight: 900;
5878 justify-self: start;
5880 #edit-post-form .post-meta-fields .question-checkbox,
5881 #edit-post-form .post-meta-fields .question-checkbox + label {
5882 grid-column: 6;
5883 margin-left: unset;
5885 #edit-post-form .post-meta-fields input[type='radio'] + label {
5886 align-self: start;
5888 #edit-post-form .textarea-container:focus-within textarea {
5889 height: calc(100% - 101px);
5890 min-height: unset;
5893 #markdown-hints-checkbox,
5894 #markdown-hints-checkbox + label {
5895 display: none;
5898 #edit-post-form div:last-child {
5899 clear: both;
5900 overflow: auto;
5902 #edit-post-form input[type='submit'] {
5903 float: none;
5904 display: block;
5905 font-size: 1.5rem;
5906 margin: 1rem auto 1.5rem auto;
5907 padding: 6px 12px 8px 12px;
5910 #edit-post-form .textarea-container .autocomplete-container,
5911 .comment-controls .textarea-container .autocomplete-container {
5912 max-height: calc(50vh - 101px);
5913 position: fixed;
5914 top: 50vh;
5915 left: 4px;
5916 right: 4px;
5917 width: unset;
5918 z-index: 11002;
5922 /*===================*/
5923 /* TABLE OF CONTENTS */
5924 /*===================*/
5926 @media only screen and (max-width: 900px) {
5927 .contents {
5928 float: none;
5929 display: table;
5930 max-width: none;
5931 margin-left: auto;
5932 margin-right: auto;
5935 @media only screen and (max-width: 520px) {
5936 .contents {
5937 max-width: 100%;
5938 margin: 1em auto 0 auto;
5939 display: table;
5941 .contents-head {
5942 font-size: 1.2em;
5944 div.post-body .contents ul {
5945 font-size: unset;
5949 /*========================*/
5950 /* QUALIFIED HYPERLINKING */
5951 /*========================*/
5953 @media only screen and (max-width: 520px) {
5954 .qualified-linking-toolbar {
5955 right: -5em;
5959 } /* END MOBILE LAYOUT */
5962 /*****************/
5963 /* DEFAULT THEME */
5964 /*****************/
5966 /*===========*/
5967 /* VARIABLES */
5968 /*===========*/
5970 /* Color scheme.
5972 :root {
5973 --GW-comment-background-color-odd: #131313;
5974 --GW-comment-background-color-even: #000;
5975 --GW-comment-background-color-target: #00001e;
5977 --GW-toggle-widget-color: #666;
5978 --GW-toggle-widget-hover-color: #aeaeae;
5979 --GW-toggle-widget-shadow-color: rgba(0, 0, 0, 0.5);
5982 /*======*/
5983 /* BASE */
5984 /*======*/
5986 body {
5987 color: #fff;
5988 background-color: #232323;
5989 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
5990 font-feature-settings: 'ss07';
5992 #content {
5993 line-height: 1.55;
5995 #content::before {
5996 background-color: #000;
5997 box-shadow: 0px 0px 10px #9b9b9b;
6000 /*=========*/
6001 /* NAV BAR */
6002 /*=========*/
6004 .nav-inner {
6005 font-size: 1.375em;
6006 font-weight: 600;
6008 .nav-bar-top:not(#primary-bar) .nav-inner {
6009 font-size: 1em;
6012 .nav-bar .nav-item:not(.nav-current):not(#nav-item-search):hover,
6013 #bottom-bar a:hover,
6014 #nav-item-search:not(.nav-current):focus-within {
6015 background-color: #1f1f1f;
6017 .inactive-bar .nav-item:not(.nav-current):not(#nav-item-search):hover,
6018 .inactive-bar #nav-item-search:not(.nav-current):focus-within {
6019 background-color: #232323;
6022 .nav-bar a:visited {
6023 color: #0cc800;
6025 .nav-bar a:hover,
6026 .nav-bar a:focus {
6027 text-decoration: none;
6028 text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000;
6031 #bottom-bar.decorative::before,
6032 #bottom-bar.decorative::after {
6033 content: "GW";
6034 display: block;
6035 text-align: center;
6036 padding: 0.25em 0 1em 0;
6038 #bottom-bar.decorative::before {
6039 width: 100%;
6040 color: transparent;
6041 background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAMdXV1QUAACwAAAAAAQABAAACAkQBADs=');
6042 background-repeat: repeat-x;
6043 background-position: center 35%;
6044 margin: 0 30px;
6046 #bottom-bar.decorative::after {
6047 color: #232323;
6048 position: absolute;
6049 left: 0;
6050 right: 0;
6051 margin: auto;
6052 background-color: #000;
6053 padding-right: 4px;
6054 padding-left: 4px;
6056 @supports (width: -moz-fit-content) {
6057 #bottom-bar.decorative::after {
6058 width: -moz-fit-content;
6061 @supports (width: fit-content) {
6062 #bottom-bar.decorative::after {
6063 width: fit-content;
6067 /* Accesskey hints */
6069 .nav-inner::after {
6070 display: block;
6071 position: absolute;
6072 left: 5px;
6073 top: -2px;
6074 font-weight: 400;
6075 font-size: 0.7em;
6076 color: #232323;
6078 .inactive-bar .nav-inner::after {
6079 color: #2c2c2c;
6081 .nav-inner:hover::after {
6082 color: #393939;
6085 /* This makes the navbar items look like tabs: */
6087 .nav-inactive {
6088 box-shadow:
6089 0 -1px #232323 inset,
6090 1px 0 #000 inset;
6092 .nav-inactive:first-child {
6093 box-shadow: 0 -1px #232323 inset;
6095 .inactive-bar .nav-inactive {
6096 background-color: #1a1a1a;
6098 .active-bar .nav-inactive {
6099 background-color: #131313;
6101 .nav-bar + .nav-bar {
6102 position: relative;
6105 /* For Webkit: */
6106 .nav-bar:not(#bottom-bar) {
6107 box-shadow: 0 -3px 8px -2px #2c2c2c;
6109 .active-bar .nav-inactive {
6110 box-shadow:
6111 0 -4px 8px -4px #393939 inset,
6112 1px 0 #000 inset;
6114 .active-bar .nav-inactive:first-child {
6115 box-shadow:
6116 0 -4px 8px -4px #393939 inset;
6118 .active-bar .nav-current + .nav-inactive {
6119 box-shadow:
6120 5px -4px 8px -4px #393939 inset;
6122 .active-bar .nav-item-last-before-current {
6123 box-shadow:
6124 -5px -4px 8px -4px #393939 inset,
6125 1px 0 #000 inset;
6127 .active-bar .nav-item-last-before-current:first-child {
6128 box-shadow:
6129 -5px -4px 8px -4px #393939 inset;
6131 /* And for Gecko: */
6132 @-moz-document url-prefix() {
6133 .nav-bar:not(#bottom-bar) {
6134 box-shadow: 0 -3px 4px -2px #2c2c2c;
6137 .active-bar .nav-inactive {
6138 box-shadow:
6139 0 -4px 4px -4px #393939 inset,
6140 1px 0 #000 inset;
6142 .active-bar .nav-inactive:first-child {
6143 box-shadow:
6144 0 -4px 4px -4px #393939 inset;
6146 .active-bar .nav-current + .nav-inactive {
6147 box-shadow:
6148 5px -4px 4px -4px #393939 inset;
6150 .active-bar .nav-item-last-before-current {
6151 box-shadow:
6152 -5px -4px 4px -4px #393939 inset,
6153 1px 0 #000 inset;
6155 .active-bar .nav-item-last-before-current:first-child {
6156 box-shadow:
6157 -5px -4px 4px -4px #393939 inset;
6161 /* Search tab */
6163 #nav-item-search button {
6164 border: none;
6165 font-weight: inherit;
6167 #nav-item-search input::placeholder {
6168 color: #00a1e8;
6169 font-weight: normal;
6172 /*= Top pagination UI hover tooltips =*/
6174 #top-nav-bar a::after,
6175 #bottom-bar a::after {
6176 color: #fff;
6179 /*==============*/
6180 /* PAGE TOOLBAR */
6181 /*==============*/
6183 .button.new-post:not(:hover),
6184 .button.new-private-message:not(:hover),
6185 .button.unignore-button:not(:hover){
6186 color: #9740cb;
6188 .button.logout-button, .button.ignore-button {
6189 color: #0094be;
6192 /*==============*/
6193 /* SUBLEVEL NAV */
6194 /*==============*/
6196 .sublevel-nav .sublevel-item {
6197 color: #777;
6198 background-color: #000;
6200 .sublevel-nav .sublevel-item:not(.selected):hover {
6201 background-color: #1f1f1f;
6202 color: #fff;
6203 text-decoration: none;
6204 text-shadow: none;
6206 .sublevel-nav .sublevel-item:not(.selected):active,
6207 .sublevel-nav .sublevel-item.selected {
6208 background-color: #1f1f1f;
6209 color: #fff;
6210 text-shadow:
6211 0 -1px 0 #000,
6212 0 0.5px 0.5px #fff;
6215 .sublevel-nav:not(.sort) .sublevel-item {
6216 border-style: solid;
6217 border-color: #1f1f1f;
6218 border-width: 1px 0 1px 1px;
6220 .sublevel-nav:not(.sort) .sublevel-item:first-child {
6221 border-radius: 8px 0 0 8px;
6223 .sublevel-nav:not(.sort) .sublevel-item:last-child {
6224 border-width: 1px;
6225 border-radius: 0 8px 8px 0;
6228 /*=====================*/
6229 /* SORT ORDER SELECTOR */
6230 /*=====================*/
6232 .sublevel-nav.sort .sublevel-item {
6233 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
6234 letter-spacing: 0.5px;
6235 padding: 6px 7px;
6236 text-transform: uppercase;
6237 pointer-events: auto;
6238 box-shadow: 1px 1px 0 0 #484848 inset;
6240 .sublevel-nav.sort {
6241 border: 2px solid transparent;
6242 padding: 18px 0 0 0;
6243 border-radius: 8px;
6244 pointer-events: none;
6245 background-color: #393939;
6247 .sublevel-nav.sort::before {
6248 text-transform: uppercase;
6249 font-weight: 600;
6250 color: #aeaeae;
6251 text-shadow: 0.5px 0.5px 0 #000;
6252 z-index: 1;
6254 .sublevel-nav.sort::after {
6255 content: "";
6256 position: absolute;
6257 display: block;
6258 top: 0;
6259 left: 0;
6260 width: 100%;
6261 height: 100%;
6262 border-radius: 6px;
6263 box-shadow:
6264 0 18px 0 0 #393939 inset,
6265 0 0 0 1px #484848 inset,
6266 0 18px 0 1px #484848 inset,
6267 0 0 0 2px #393939;
6270 /*================*/
6271 /* WIDTH SELECTOR */
6272 /*================*/
6273 /* THEME SELECTOR */
6274 /*================*/
6276 #width-selector button,
6277 #theme-selector button {
6278 box-shadow:
6279 0 0 0 4px #232323 inset,
6280 0 0 0 5px #393939 inset;
6282 #width-selector button:hover,
6283 #width-selector button.selected,
6284 #theme-selector button:hover,
6285 #theme-selector button.selected {
6286 box-shadow:
6287 0 0 0 5px #393939 inset;
6290 #theme-selector button::before {
6291 color: #575756;
6292 background-color: #232323;
6294 #theme-selector button:hover::before,
6295 #theme-selector button.selected::before {
6296 color: #888;
6298 #width-selector button::after {
6299 color: #575756;
6302 /*======================*/
6303 /* THEME TWEAKER TOGGLE */
6304 /*======================*/
6306 #theme-tweaker-toggle button {
6307 color: #777;
6310 /*=================*/
6311 /* QUICKNAV WIDGET */
6312 /*=================*/
6314 #quick-nav-ui a {
6315 color: #575756;
6316 background-color: #1a1a1a;
6317 border-radius: 4px;
6318 text-decoration: none;
6320 #quick-nav-ui a[href='#bottom-bar'] {
6321 line-height: 1.8;
6323 #quick-nav-ui a:active {
6324 transform: scale(0.9);
6326 #quick-nav-ui a[href='#comments'].no-comments {
6327 opacity: 0.4;
6328 color: #393939;
6330 @media only screen and (hover:hover) {
6331 #quick-nav-ui a:hover {
6332 color: #fff;
6333 background-color: #131313;
6335 #quick-nav-ui a:focus:not(:hover) {
6336 transform: none;
6337 text-shadow: none;
6341 /*======================*/
6342 /* NEW COMMENT QUICKNAV */
6343 /*======================*/
6345 #new-comment-nav-ui .new-comments-count {
6346 font-weight: 600;
6347 color: #888;
6348 text-shadow: 0.5px 0.5px 0 #000;
6350 #new-comment-nav-ui .new-comments-count::after {
6351 font-weight: 600;
6352 color: #777;
6354 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
6355 color: #393939;
6356 text-shadow: none;
6358 @media only screen and (hover:hover) {
6359 #new-comment-nav-ui .new-comments-count:hover {
6360 text-shadow:
6361 0 0 1px #000,
6362 0 0 3px #000,
6363 0 0 5px #000,
6364 0 0 8px #000,
6365 0.5px 0.5px 0 #000;
6367 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
6368 color: #00a1e8;
6369 text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000;
6373 /*=================*/
6374 /* HNS DATE PICKER */
6375 /*=================*/
6377 #hns-date-picker span {
6378 color: #777;
6379 text-shadow: 0.5px 0.5px 0 #000;
6380 font-weight: 600;
6382 #hns-date-picker input {
6383 border: 1px solid #777;
6384 background-color: transparent;
6385 color: #888;
6386 box-shadow: 0 0 0 1px transparent;
6388 #hns-date-picker input:focus {
6389 color: #fff;
6392 /*======================*/
6393 /* ANTI-KIBITZER TOGGLE */
6394 /*======================*/
6396 #anti-kibitzer-toggle button::before,
6397 #anti-kibitzer-toggle button::after {
6398 background-color: var(--GW-toggle-widget-color);
6399 -webkit-background-clip: text;
6400 color: transparent;
6401 text-shadow: var(--GW-toggle-widget-shadow-color) 0px 1px 1px;
6403 #anti-kibitzer-toggle button:hover::before,
6404 #anti-kibitzer-toggle button:hover::after {
6405 background-color: var(--GW-toggle-widget-hover-color);
6408 /*======================*/
6409 /* TEXT SIZE ADJUSTMENT */
6410 /*======================*/
6412 #text-size-adjustment-ui button {
6413 color: #777;
6415 #text-size-adjustment-ui button.default {
6416 font-weight: 600;
6418 #text-size-adjustment-ui button:disabled:hover {
6419 text-shadow: none;
6421 #text-size-adjustment-ui::after {
6422 color: #575756;
6425 /*=============================*/
6426 /* COMMENTS VIEW MODE SELECTOR */
6427 /*=============================*/
6429 #comments-view-mode-selector a {
6430 color: #777;
6433 /*==========*/
6434 /* ARCHIVES */
6435 /*==========*/
6437 .archive-nav {
6438 border: 1px solid #484848;
6440 .archive-nav *[class^='archive-nav-item'] {
6441 border-style: solid;
6442 border-color: #1f1f1f;
6443 border-width: 1px 0 1px 1px;
6444 background-color: #131313;
6446 .archive-nav div[class^='archive-nav-']:nth-of-type(2) *[class^='archive-nav-item'] {
6447 border-top-width: 0;
6448 border-bottom-width: 0;
6450 .archive-nav div[class^='archive-nav-']:last-of-type *[class^='archive-nav-item'] {
6451 border-bottom-width: 1px;
6453 .archive-nav *[class^='archive-nav-item']:last-child {
6454 border-right-width: 1px;
6456 .archive-nav span[class^='archive-nav-item'] {
6457 font-weight: bold;
6458 background-color: #1f1f1f;
6461 .archive-nav a:link,
6462 .archive-nav a:visited {
6463 color: rgba(12, 200, 0, 0.7);
6465 .archive-nav a:hover {
6466 text-decoration: none;
6467 color: #00a9ed;
6468 background-color: #1d1d1d;
6469 text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000;
6471 .archive-nav a:active {
6472 transform: scale(0.9);
6474 .archive-nav a:focus:not(:hover) {
6475 transform: none;
6477 .archive-nav a.archive-nav-item-day:hover {
6478 background-color: #1f1f1f;
6481 /*==========*/
6482 /* LISTINGS */
6483 /*==========*/
6485 h1.listing {
6486 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif, 'Font Awesome', 'Font Awesome 5 Free';
6487 font-weight: 800;
6488 margin: 0.7em 20px 0 20px;
6489 max-width: calc(100% - 40px);
6490 top: 0.125em; ;
6493 h1.listing .post-title-link {
6494 color: #fff;
6496 h1.listing .link-post-link {
6497 color: #54d400;
6500 @media only screen and (hover: hover) {
6501 h1.listing a:hover,
6502 h1.listing a:focus {
6503 color: #777;
6504 background-color: rgba(0, 0, 0, 0.85);
6506 h1.listing:focus-within::before {
6507 color: #00c200;
6508 left: -0.625em;
6510 h1.listing .link-post-link:hover {
6511 color: #670;
6512 text-shadow:
6513 0.5px 0.5px 0 #000,
6514 -0.5px -0.5px 0 #000,
6515 0 0 2px #000,
6516 0 0 3px #54d400;
6520 h1.listing .edit-post-link {
6521 padding: 5px 3px 12px 0.5em;
6522 top: 0;
6523 right: 0;
6525 h1.listing .edit-post-link:hover {
6526 text-decoration: none;
6528 #content.user-page h1.listing .edit-post-link {
6529 background-color: #131313;
6532 /*======*/
6533 /* SPAM */
6534 /*======*/
6536 h1.listing.spam {
6537 opacity: 0.15;
6539 h1.listing.spam + .post-meta {
6540 opacity: 0.4;
6542 h1.listing.spam:hover,
6543 h1.listing.spam + .post-meta:hover,
6544 h1.listing.spam:hover + .post-meta {
6545 opacity: 1.0;
6548 /*===================*/
6549 /* LISTING POST-META */
6550 /*===================*/
6552 h1.listing + .post-meta {
6553 padding-right: 330px;
6555 h1.listing + .post-meta .karma-value,
6556 h1.listing + .post-meta .comment-count,
6557 h1.listing + .post-meta .lw2-link,
6558 h1.listing + .post-meta .read-time {
6559 border-radius: 4px;
6560 padding: 0 4px 0 2px;
6561 text-shadow: 0.5px 0.5px 0.5px #575756;
6562 margin: 0 0.25em 0 0.5em;
6563 position: absolute;
6564 line-height: 1.15;
6565 bottom: -6px;
6567 h1.listing + .post-meta .karma-value span,
6568 h1.listing + .post-meta .comment-count span,
6569 h1.listing + .post-meta .lw2-link span,
6570 h1.listing + .post-meta .read-time span {
6571 display: none;
6573 h1.listing + .post-meta .karma-value::before,
6574 h1.listing + .post-meta .comment-count::before,
6575 h1.listing + .post-meta .lw2-link::before,
6576 h1.listing + .post-meta .read-time::before {
6577 color: #000;
6578 font-family: 'Font Awesome', 'Font Awesome 5 Free';
6579 font-weight: 900;
6580 margin: 0 8px 0 0;
6581 box-shadow: 0 0 0 2px #1f1f1f;
6583 _::-webkit-full-page-media, _:future, :root h1.listing + .post-meta .karma-value::before,
6584 _::-webkit-full-page-media, _:future, :root h1.listing + .post-meta .comment-count::before,
6585 _::-webkit-full-page-media, _:future, :root h1.listing + .post-meta .lw2-link::before,
6586 _::-webkit-full-page-media, _:future, :root h1.listing + .post-meta .read-time::before {
6587 text-shadow: 0 0 3px #575756;
6590 h1.listing + .post-meta .karma {
6591 margin: 0;
6593 h1.listing + .post-meta .karma-value {
6594 box-shadow:
6595 22px 0 0 0 #1f1f1f inset,
6596 0 0 0 3px #1f1f1f;
6597 cursor: default;
6598 color: #00a9ed;
6599 right: 264px;
6601 h1.listing + .post-meta .karma-value::before {
6602 content: "\F139";
6603 text-shadow: none;
6604 font-size: 0.9375em;
6605 line-height: 1.3;
6608 h1.listing + .post-meta .comment-count::before {
6609 content: "\F086";
6611 h1.listing + .post-meta .comment-count {
6612 box-shadow:
6613 25px 0 0 0 #1f1f1f inset,
6614 0 0 0 3px #1f1f1f;
6615 color: #9e4acf;
6616 right: 176px;
6618 h1.listing + .post-meta .comment-count:hover {
6619 text-decoration: none;
6620 color: #000;
6621 background-color: #9e4acf;
6623 h1.listing + .post-meta .comment-count:hover::before {
6624 color: #9e4acf;
6626 h1.listing + .post-meta .comment-count.new-comments::before {
6627 color: #9e4acf;
6628 text-shadow: 0.5px 0.5px 0.5px #000;
6630 h1.listing + .post-meta .comment-count.new-comments:hover::before {
6631 text-shadow: 0.5px 0.5px 0.5px #575756;
6635 h1.listing + .post-meta .lw2-link {
6636 box-shadow:
6637 23px 0 0 0 #1f1f1f inset,
6638 0 0 0 3px #1f1f1f;
6639 right: 0;
6641 h1.listing + .post-meta .lw2-link::before {
6642 content: "\F0C1";
6644 h1.listing + .post-meta .lw2-link:hover {
6645 text-decoration: none;
6646 color: #000;
6647 background-color: #00c200;
6649 h1.listing + .post-meta .lw2-link:hover::before {
6650 color: #00c200;
6653 h1.listing + .post-meta .read-time {
6654 box-shadow:
6655 21px 0 0 0 #1f1f1f inset,
6656 0 0 0 3px #1f1f1f;
6657 right: 80px;
6659 h1.listing + .post-meta .read-time::before {
6660 content: "\F2F2";
6661 cursor: pointer;
6663 h1.listing + .post-meta .read-time::after {
6664 content: " min";
6666 h1.listing + .post-meta .read-time:hover::before {
6667 color: #777;
6670 h1.listing + .post-meta .word-count {
6671 box-shadow:
6672 22px 0 0 0 #1f1f1f inset,
6673 0 0 0 3px #1f1f1f;
6674 padding: 0 4px 0 4px;
6676 h1.listing + .post-meta .word-count::before {
6677 content: "\F15C";
6678 margin: 0 10px 0 0;
6680 h1.listing + .post-meta .read-time.word-count::after {
6681 content: none;
6684 h1.listing + .post-meta .link-post-domain {
6685 margin: 0 0 0 0.5em;
6688 h1.listing + .post-meta::after {
6689 content: "";
6690 display: block;
6691 height: 1px;
6692 width: 100%;
6693 background-color: #1f1f1f;
6694 position: absolute;
6695 bottom: -14px;
6698 /*============*/
6699 /* USER PAGES */
6700 /*============*/
6702 #content.user-page h1.page-main-heading,
6703 #content.user-page .user-stats {
6704 border-bottom: 1px solid #2c2c2c;
6707 #content.user-page h1.listing,
6708 #content.user-page h1.listing + .post-meta {
6709 background-color: #131313;
6710 border-style: solid;
6711 border-color: #2c2c2c;
6713 #content.user-page h1.listing {
6714 padding: 0 6px;
6715 padding-top: 0.25em;
6716 border-width: 1px 1px 0 1px;
6717 margin: 1rem 0 0 0;
6718 max-width: 100%;
6720 #content.own-user-page h1.listing,
6721 h1.listing.own-post-listing {
6722 padding-right: 36px;
6724 @media only screen and (hover: hover) {
6725 #content.user-page h1.listing a:hover,
6726 #content.user-page h1.listing a:focus {
6727 background-color: #131313;
6729 #content.user-page h1.listing:focus-within::before {
6730 left: -0.625em;
6733 #content.user-page h1.listing + .post-meta {
6734 padding: 0.125em 6px 1em 36px;
6735 border-width: 0 1px 1px 1px;
6736 margin: 0 0 1rem 0;
6738 #content.user-page h1.listing + .post-meta::after {
6739 display: none;
6741 @media only screen and (min-width: 521px) {
6742 #content.user-page h1.listing + .post-meta .karma-value,
6743 #content.user-page h1.listing + .post-meta .comment-count,
6744 #content.user-page h1.listing + .post-meta .lw2-link,
6745 #content.user-page h1.listing + .post-meta .read-time {
6746 bottom: 10px;
6749 #content.user-page h1.listing + .post-meta .post-section::before {
6750 left: -1px;
6753 #content.conversations-user-page h1.listing {
6754 padding: 4px 6px;
6755 font-size: 1.75rem;
6757 #content.conversations-user-page h1.listing + .post-meta {
6758 padding: 6px 4px;
6759 margin: 0 0 0.25rem 0;
6762 .user-stats .karma-total {
6763 font-weight: bold;
6766 /*===============*/
6767 /* CONVERSATIONS */
6768 /*===============*/
6770 /*============*/
6771 /* LOGIN PAGE */
6772 /*============*/
6774 .login-container form input[type='submit'] {
6775 font-weight: bold;
6776 background-color: #131313;
6777 border: 1px solid #2c2c2c;
6779 .login-container form input[type='submit']:hover,
6780 .login-container form input[type='submit']:focus {
6781 background-color: #1f1f1f;
6782 border: 1px solid #484848;
6785 /* “Create account” form */
6787 #signup-form {
6788 background-color: #0f0f0f;
6789 border: 1px solid #1f1f1f;
6791 #signup-form input[type='submit'] {
6792 background-color: #1a1a1a;
6793 border: 1px solid #2c2c2c;
6795 #signup-form input[type='submit']:hover {
6796 background-color: #232323;
6797 border: 1px solid #484848;
6800 /* Log in tip */
6802 .login-container .login-tip {
6803 border: 1px solid #131313;
6806 /* Message box */
6808 .error-box {
6809 border: 1px solid red;
6810 background-color: #004147;
6812 .success-box {
6813 border: 1px solid green;
6814 background-color: #320042;
6817 /*=====================*/
6818 /* PASSWORD RESET PAGE */
6819 /*=====================*/
6821 .reset-password-container input[type='submit'] {
6822 background-color: #1a1a1a;
6823 border: 1px solid #2c2c2c;
6824 font-weight: bold;
6827 /*===================*/
6828 /* TABLE OF CONTENTS */
6829 /*===================*/
6831 .contents {
6832 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
6833 border: 1px solid #1f1f1f;
6834 background-color: #131313;
6836 .contents-head {
6837 font-weight: bold;
6839 .body-text .contents li::before {
6840 color: #575756;
6841 font-feature-settings: "tnum";
6843 .body-text .contents a,
6844 .body-text .contents a:hover {
6845 border: none;
6847 .body-text .contents a:hover {
6848 text-decoration: underline;
6851 /*==================*/
6852 /* POSTS & COMMENTS */
6853 /*==================*/
6855 .body-text {
6856 font-family: 'Charter', 'PT Serif', 'Georgia', serif;
6859 .body-text a {
6860 border-bottom: 1px dotted #393939;
6862 .body-text a:hover {
6863 text-decoration: none;
6864 border-bottom: 1px solid currentColor;
6867 /*=======*/
6868 /* POSTS */
6869 /*=======*/
6871 h1.post-title {
6872 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
6873 font-weight: 800;
6876 /*=================*/
6877 /* POST NAVIGATION */
6878 /*=================*/
6880 .post-nav-links a,
6881 .post-nav-links a:visited {
6882 color: #fff;
6884 .post-nav-links a:hover {
6885 text-decoration: none;
6887 .post-nav-title {
6888 font-weight: 600;
6891 .post-nav-label {
6892 color: #777;
6894 .post-nav-links a:hover .post-nav-label {
6895 font-weight: 600;
6896 color: #666;
6898 .post-nav-links a:hover .post-nav-title {
6899 color: #777;
6902 @media only screen and (max-width: 900px) {
6903 .sequence-title {
6904 border-top: 1px dotted #777;
6906 .post-nav.prev {
6907 border-right: 1px dotted #777;
6909 .post-nav.next {
6910 border-left: 1px dotted #777;
6914 .crosspost {
6915 background-color: #131313;
6916 border: 1px solid #2c2c2c;
6919 /*===========*/
6920 /* POST-META */
6921 /*===========*/
6923 .post-meta .post-section::before,
6924 .comment-meta .alignment-forum {
6925 color: #000;
6926 text-shadow:
6927 1px 1px 0 #9740cb,
6928 0 1px 0 #9740cb,
6929 0 0 5px #9740cb;
6931 a.post-section:hover {
6932 text-decoration: none;
6934 a.post-section:hover::before {
6935 color: #2e0062;
6937 .post-meta .post-section.alignment-forum::before,
6938 .comment-meta .alignment-forum {
6939 text-shadow:
6940 1px 1px 0 #658100,
6941 0 1px 0 #658100,
6942 0 0 5px #658100;
6944 a.post-section.alignment-forum:hover::before {
6945 color: #181a00;
6947 .post-meta .date {
6948 color: #666;
6950 .post-meta .author {
6951 color: #9740cb;
6953 .bottom-post-meta {
6954 border-color: #1f1f1f;
6957 /*============*/
6958 /* LINK POSTS */
6959 /*============*/
6961 .post.link-post a.link-post-link {
6962 text-decoration: none;
6963 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
6964 font-weight: 600;
6966 .post.link-post a.link-post-link:hover {
6967 color: #00a9ed;
6969 .post.link-post a.link-post-link:hover::before {
6970 color: #670;
6971 text-shadow:
6972 0.5px 0.5px 0 #000,
6973 -0.5px -0.5px 0 #000,
6974 0 0 2px #000,
6975 0 0 3px #54d400;
6977 .post.link-post a.link-post-link:focus {
6978 color: #777;
6979 border-bottom: 2px dotted #777;
6982 /*==========*/
6983 /* COMMENTS */
6984 /*==========*/
6986 .comments::before {
6987 border-top: 1px solid #fff;
6988 box-shadow: 0 3px 4px -4px #fff inset;
6990 @-moz-document url-prefix() {
6991 .comments::before {
6992 box-shadow: 0 3px 3px -4px #fff inset;
6995 #content > .comment-thread .comment-meta a.date:focus,
6996 #content > .comment-thread .comment-meta a.permalink:focus {
6997 color: #666;
6998 outline: 2px dotted #575756;
6999 position: relative;
7000 background-color: #000;
7002 #content > .comment-thread .comment-meta a.date:focus {
7003 padding: 0 4px;
7004 left: -4px;
7006 #content > .comment-thread .comment-meta a.date:focus + * {
7007 margin-left: -8px;
7009 #content > .comment-thread .comment-meta a.permalink:focus {
7010 padding: 0 5px;
7011 left: -5px;
7013 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
7014 margin-left: -10px;
7016 .comment-item {
7017 border: 1px solid #2c2c2c;
7018 background-color: var(--GW-comment-background-color);
7020 .comment-parent-link::after {
7021 box-shadow:
7022 0 28px 16px -16px var(--GW-comment-parent-background-color) inset,
7023 4px 16px 0 12px var(--GW-comment-background-color-target) inset,
7024 4px 4px 0 12px var(--GW-comment-background-color-target) inset;
7027 /*================================*/
7028 /* DEEP COMMENT THREAD COLLAPSING */
7029 /*================================*/
7031 .comment-item input[id^="expand"] + label::after {
7032 color: #0cc800;
7033 font-weight: 600;
7035 .comment-item input[id^="expand"] + label:hover::after {
7036 color: #00a9ed;
7038 .comment-item input[id^="expand"] + label:active::after,
7039 .comment-item input[id^="expand"] + label:focus::after{
7040 color: #00a9ed;
7042 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
7043 border-width: 1px 0 0 0;
7046 /*==============*/
7047 /* COMMENT-META */
7048 /*==============*/
7050 .comment-meta .author {
7051 font-weight: bold;
7052 font-size: 1.25em;
7053 color: #fff;
7055 .comment-meta .author:hover {
7056 text-decoration: none;
7057 color: #9740cb;
7059 .comment-item .author:not(.redacted).original-poster::after {
7060 opacity: 0.5;
7063 .comment-item .voting-controls.active-controls::after,
7064 .comment-item .voting-controls .karma-value::after,
7065 .post .voting-controls.active-controls::after,
7066 .post .voting-controls .karma-value::after,
7067 .author::before {
7068 background-color: #000;
7069 color: #575756;
7070 border-radius: 4px;
7071 box-shadow: 0 0 0 1px #1f1f1f inset;
7073 .comment-item .voting-controls.active-controls::after,
7074 .post .voting-controls.active-controls::after {
7075 padding: 6px 4px 4px 4px;
7076 bottom: -44px;
7078 .comment-item .voting-controls .karma-value::after,
7079 .post .voting-controls .karma-value::after {
7080 padding: 2px 8px 1px 8px;
7081 top: -25px;
7082 min-width: 56px;
7085 /*====================*/
7086 /* ANTI-KIBITZER MODE */
7087 /*====================*/
7089 .author.redacted,
7090 .inline-author.redacted {
7091 opacity: 0.6;
7092 font-weight: 400;
7095 .karma-value.redacted {
7096 opacity: 0.4;
7099 .link-post-domain.redacted {
7100 opacity: 0.4;
7103 /*===========================*/
7104 /* COMMENT THREAD NAVIGATION */
7105 /*===========================*/
7107 div.comment-parent-link {
7108 font-weight: 600;
7110 a.comment-parent-link {
7111 font-weight: 400;
7113 a.comment-parent-link::before {
7114 color: #393939;
7116 a.comment-parent-link:hover::before {
7117 background-color: #00001e;
7118 color: #575756;
7121 div.comment-child-links {
7122 font-weight: 600;
7124 div.comment-child-links a {
7125 font-weight: 400;
7127 .comment-child-link::before {
7128 color: #484848;
7131 .comment-item-highlight {
7132 box-shadow:
7133 0 0 2px #0047b5,
7134 0 0 3px #0047b5,
7135 0 0 5px #0047b5,
7136 0 0 7px #0047b5,
7137 0 0 10px #0047b5;
7138 border: 1px solid #0047b5;
7140 .comment-item-highlight-faint {
7141 box-shadow:
7142 0 0 2px #00193b,
7143 0 0 3px #00193b,
7144 0 0 5px #00193b,
7145 0 0 7px #00193b,
7146 0 0 10px #00193b;
7147 border: 1px solid #00193b;
7150 .comment-popup {
7151 background-color: #000;
7154 /*=======================*/
7155 /* COMMENTS COMPACT VIEW */
7156 /*=======================*/
7158 #comments-list-mode-selector button {
7159 box-shadow:
7160 0 0 0 4px #000 inset,
7161 0 0 0 5px #393939 inset;
7163 #comments-list-mode-selector button:hover,
7164 #comments-list-mode-selector button.selected {
7165 box-shadow:
7166 0 0 0 5px #393939 inset;
7168 #content.compact > .comment-thread .comment-item::after {
7169 color: #0cc800;
7170 background: linear-gradient(to right, transparent 0%, #000 50%, #000 100%);
7173 @media only screen and (hover: hover) {
7174 #content.compact > .comment-thread .comment-item:hover .comment,
7175 #content.compact > .comment-thread .comment-item.expanded .comment {
7176 background-color: #000;
7177 outline: 3px solid #54d400;
7179 #content.compact > .comment-thread .comment-item:hover .comment::before,
7180 #content.compact > .comment-thread .comment-item.expanded .comment::before {
7181 background-color: #000;
7182 box-shadow:
7183 0 0 3px #000,
7184 0 0 5px #000,
7185 0 0 7px #000,
7186 0 0 10px #000,
7187 0 0 20px #000,
7188 0 0 30px #000,
7189 0 0 40px #000;
7192 @media only screen and (hover: none) {
7193 #content.compact > .comment-thread.expanded .comment-item .comment {
7194 background-color: #000;
7195 outline: 3px solid #54d400;
7197 #content.compact > .comment-thread.expanded .comment-item .comment::before {
7198 background-color: #000;
7199 box-shadow:
7200 0 0 3px #000,
7201 0 0 5px #000,
7202 0 0 7px #000,
7203 0 0 10px #000,
7204 0 0 20px #000,
7205 0 0 30px #000,
7206 0 0 40px #000;
7210 #content.user-page.compact > h1.listing {
7211 margin-top: 0.5rem;
7213 #content.user-page.compact > h1.listing + .post-meta {
7214 margin-bottom: 0.5rem;
7217 /*===========================*/
7218 /* HIGHLIGHTING NEW COMMENTS */
7219 /*===========================*/
7221 .new-comment::before {
7222 outline: 2px solid #7f3b92;
7223 box-shadow:
7224 0 0 6px -2px #7f3b92 inset,
7225 0 0 4px #7f3b92,
7226 0 0 6px #7f3b92;
7229 /*=================================*/
7230 /* COMMENT THREAD MINIMIZE BUTTONS */
7231 /*=================================*/
7233 .comment-minimize-button {
7234 color: #2c2c2c;
7236 .comment-minimize-button:hover {
7237 color: #484848;
7238 text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000;
7240 .comment-minimize-button::after {
7241 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
7242 color: #777;
7244 .comment-minimize-button.maximized::after {
7245 color: #2c2c2c;
7248 /*==============*/
7249 /* VOTE BUTTONS */
7250 /*==============*/
7252 .vote::before {
7253 content: "";
7254 border-radius: 50%;
7255 background-size: 17px 17px;
7256 width: 17px;
7257 height: 17px;
7258 display: inline-block;
7259 position: relative;
7260 top: 2.5px;
7262 .vote:active {
7263 transform: none;
7266 /**********/
7267 /* States.
7270 /* _ 1
7272 .upvote {
7273 filter: grayscale(100%) brightness(128%);
7275 .downvote {
7276 filter: grayscale(100%) brightness(188%);
7279 /* _ 2
7281 .vote:not(.none) {
7282 filter: drop-shadow(0 0 1px #000);
7285 /* 1 _
7287 .vote.two-temp::before {
7288 box-shadow:
7289 0 0 0 1px #000,
7290 0 0 0 4px #2f2f2f,
7291 0 0 0 5px transparent;
7294 /* 2 _
7296 .upvote.two::before {
7297 box-shadow:
7298 0 0 0 1px #000,
7299 0 0 0 4px var(--GW-upvote-button-color),
7300 0 0 0 5px transparent;
7302 .downvote.two::before {
7303 box-shadow:
7304 0 0 0 1px #000,
7305 0 0 0 4px var(--GW-downvote-button-color),
7306 0 0 0 5px transparent;
7309 /* Disabled.
7311 .vote:disabled {
7312 visibility: unset;
7313 filter: brightness(50%);
7316 /*********/
7317 /* Icons.
7320 .karma .upvote::before {
7321 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMTQ0IDI3NmMwIDYuNi01LjQgMTItMTIgMTJoLTkydjkyYzAgNi42LTUuNCAxMi0xMiAxMmgtNTZjLTYuNiAwLTEyLTUuNC0xMi0xMnYtOTJoLTkyYy02LjYgMC0xMi01LjQtMTItMTJ2LTU2YzAtNi42IDUuNC0xMiAxMi0xMmg5MnYtOTJjMC02LjYgNS40LTEyIDEyLTEyaDU2YzYuNiAwIDEyIDUuNCAxMiAxMnY5Mmg5MmM2LjYgMCAxMiA1LjQgMTIgMTJ2NTZ6IiAgIGZpbGw9IiMwMEQ4MDAiLz48L3N2Zz4=');
7323 .karma .downvote::before {
7324 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHpNMTI0IDI5NmMtNi42IDAtMTItNS40LTEyLTEydi01NmMwLTYuNiA1LjQtMTIgMTItMTJoMjY0YzYuNiAwIDEyIDUuNCAxMiAxMnY1NmMwIDYuNi01LjQgMTItMTIgMTJIMTI0eiIgZmlsbD0iI0VCNEMyQSIvPjwvc3ZnPg==');
7327 .karma .upvote:disabled::before {
7328 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMTQ0IDI3NmMwIDYuNi01LjQgMTItMTIgMTJoLTkydjkyYzAgNi42LTUuNCAxMi0xMiAxMmgtNTZjLTYuNiAwLTEyLTUuNC0xMi0xMnYtOTJoLTkyYy02LjYgMC0xMi01LjQtMTItMTJ2LTU2YzAtNi42IDUuNC0xMiAxMi0xMmg5MnYtOTJjMC02LjYgNS40LTEyIDEyLTEyaDU2YzYuNiAwIDEyIDUuNCAxMiAxMnY5Mmg5MmM2LjYgMCAxMiA1LjQgMTIgMTJ2NTZ6IiBzdHJva2U9IiNEOEQ4RDgiIHN0cm9rZS13aWR0aD0iNCUiIGZpbGw9InRyYW5zcGFyZW50Ii8+PC9zdmc+');
7330 .karma .downvote:disabled::before {
7331 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6TTEyNCAyOTZjLTYuNiAwLTEyLTUuNC0xMi0xMnYtNTZjMC02LjYgNS40LTEyIDEyLTEyaDI2NGM2LjYgMCAxMiA1LjQgMTIgMTJ2NTZjMCA2LjYtNS40IDEyLTEyIDEySDEyNHoiIHN0cm9rZT0iI0Q4RDhEOCIgc3Ryb2tlLXdpZHRoPSI0JSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=');
7334 .agreement .upvote::before {
7335 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNTA0IDI1NmMwIDEzNi45NjctMTExLjAzMyAyNDgtMjQ4IDI0OFM4IDM5Mi45NjcgOCAyNTYgMTE5LjAzMyA4IDI1NiA4czI0OCAxMTEuMDMzIDI0OCAyNDh6TTIyNy4zMTQgMzg3LjMxNGwxODQtMTg0YzYuMjQ4LTYuMjQ4IDYuMjQ4LTE2LjM3OSAwLTIyLjYyN2wtMjIuNjI3LTIyLjYyN2MtNi4yNDgtNi4yNDktMTYuMzc5LTYuMjQ5LTIyLjYyOCAwTDIxNiAzMDguMTE4bC03MC4wNTktNzAuMDU5Yy02LjI0OC02LjI0OC0xNi4zNzktNi4yNDgtMjIuNjI4IDBsLTIyLjYyNyAyMi42MjdjLTYuMjQ4IDYuMjQ4LTYuMjQ4IDE2LjM3OSAwIDIyLjYyN2wxMDQgMTA0YzYuMjQ5IDYuMjQ5IDE2LjM3OSA2LjI0OSAyMi42MjguMDAxeiIgZmlsbD0iIzAwRDgwMCIvPjwvc3ZnPg==');
7337 .agreement .downvote::before {
7338 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMTIxLjYgMzEzLjFjNC43IDQuNyA0LjcgMTIuMyAwIDE3TDMzOCAzNzcuNmMtNC43IDQuNy0xMi4zIDQuNy0xNyAwTDI1NiAzMTJsLTY1LjEgNjUuNmMtNC43IDQuNy0xMi4zIDQuNy0xNyAwTDEzNC40IDMzOGMtNC43LTQuNy00LjctMTIuMyAwLTE3bDY1LjYtNjUtNjUuNi02NS4xYy00LjctNC43LTQuNy0xMi4zIDAtMTdsMzkuNi0zOS42YzQuNy00LjcgMTIuMy00LjcgMTcgMGw2NSA2NS43IDY1LjEtNjUuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsMzkuNiAzOS42YzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMTIgMjU2bDY1LjYgNjUuMXoiIGZpbGw9IiNFQjRDMkEiLz48L3N2Zz4=');
7341 .agreement .upvote:disabled::before {
7342 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNTA0IDI1NmMwIDEzNi45NjctMTExLjAzMyAyNDgtMjQ4IDI0OFM4IDM5Mi45NjcgOCAyNTYgMTE5LjAzMyA4IDI1NiA4czI0OCAxMTEuMDMzIDI0OCAyNDh6TTIyNy4zMTQgMzg3LjMxNGwxODQtMTg0YzYuMjQ4LTYuMjQ4IDYuMjQ4LTE2LjM3OSAwLTIyLjYyN2wtMjIuNjI3LTIyLjYyN2MtNi4yNDgtNi4yNDktMTYuMzc5LTYuMjQ5LTIyLjYyOCAwTDIxNiAzMDguMTE4bC03MC4wNTktNzAuMDU5Yy02LjI0OC02LjI0OC0xNi4zNzktNi4yNDgtMjIuNjI4IDBsLTIyLjYyNyAyMi42MjdjLTYuMjQ4IDYuMjQ4LTYuMjQ4IDE2LjM3OSAwIDIyLjYyN2wxMDQgMTA0YzYuMjQ5IDYuMjQ5IDE2LjM3OSA2LjI0OSAyMi42MjguMDAxeiIgc3Ryb2tlPSIjRDhEOEQ4IiBzdHJva2Utd2lkdGg9IjQlIiBmaWxsPSJ0cmFuc3BhcmVudCIvPjwvc3ZnPg==');
7344 .agreement .downvote:disabled::before {
7345 background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMTIxLjYgMzEzLjFjNC43IDQuNyA0LjcgMTIuMyAwIDE3TDMzOCAzNzcuNmMtNC43IDQuNy0xMi4zIDQuNy0xNyAwTDI1NiAzMTJsLTY1LjEgNjUuNmMtNC43IDQuNy0xMi4zIDQuNy0xNyAwTDEzNC40IDMzOGMtNC43LTQuNy00LjctMTIuMyAwLTE3bDY1LjYtNjUtNjUuNi02NS4xYy00LjctNC43LTQuNy0xMi4zIDAtMTdsMzkuNi0zOS42YzQuNy00LjcgMTIuMy00LjcgMTcgMGw2NSA2NS43IDY1LjEtNjUuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsMzkuNiAzOS42YzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMTIgMjU2bDY1LjYgNjUuMXoiIHN0cm9rZT0iI0Q4RDhEOCIgc3Ryb2tlLXdpZHRoPSI0JSIgZmlsbD0idHJhbnNwYXJlbnQiLz48L3N2Zz4=');
7348 /*===========================*/
7349 /* COMMENTING AND POSTING UI */
7350 /*===========================*/
7352 .posting-controls input[type='submit'] {
7353 background-color: #000;
7354 border: 1px solid #484848;
7355 font-weight: bold;
7357 .posting-controls input[type='submit']:hover,
7358 .posting-controls input[type='submit']:focus {
7359 background-color: #1f1f1f;
7360 border: 1px solid #575756;
7363 .comment-controls .cancel-comment-button {
7364 font-weight: 600;
7365 color: #00a9ed;
7366 text-shadow:
7367 0 0 1px #000,
7368 0 0 2px #000;
7370 .comment-controls .cancel-comment-button:hover {
7371 color: #0090e0;
7372 text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000;
7375 .new-comment-button {
7376 font-weight: 600;
7379 .comment-controls .delete-button,
7380 .comment-controls .retract-button {
7381 color: #00bbf5;
7382 opacity: 0.85;
7384 .comment-controls .edit-button,
7385 .comment-controls .unretract-button {
7386 color: #9740cb;
7388 .comment-controls .action-button:hover {
7389 color: #0090e0;
7390 opacity: 1.0;
7393 .button.edit-post-link:not(:hover) {
7394 color: #9740cb;
7397 .posting-controls textarea {
7398 font-family: 'Charter', 'PT Serif', 'Georgia', serif;
7399 color: #fff;
7400 background-color: #000;
7401 border-color: #484848;
7402 box-shadow:
7403 0 0 0 1px #131313 inset;
7405 .posting-controls textarea:focus {
7406 background-color: #00001e;
7407 border-color: #0cc800;
7408 box-shadow:
7409 0 0 0 1px #1d1f00 inset,
7410 0 0 0 1px #000,
7411 0 0 0 2px #0cc800;
7413 .posting-controls.edit-existing-post textarea:focus,
7414 .posting-controls form.edit-existing-comment textarea:focus {
7415 border-color: #9740cb;
7416 box-shadow:
7417 0 0 0 1px #3d0061 inset,
7418 0 0 0 1px #000,
7419 0 0 0 2px #9740cb;
7422 /*= Scroll bars =*/
7424 .posting-controls textarea::-webkit-scrollbar,
7425 .textarea-container .autocomplete-container::-webkit-scrollbar {
7426 width: 16px;
7427 background-color: transparent;
7429 .posting-controls textarea::-webkit-scrollbar-track,
7430 .textarea-container .autocomplete-container::-webkit-scrollbar-track {
7431 background-color: #131313;
7432 border-left: 1px solid #484848;
7433 border-top: 1px solid #131313;
7435 .posting-controls textarea:focus::-webkit-scrollbar-track,
7436 .textarea-container .autocomplete-container::-webkit-scrollbar-track {
7437 border-left: 1px solid #0cc800;
7438 border-top: 1px solid #1d1f00;
7440 .posting-controls textarea::-webkit-scrollbar-thumb {
7441 background-color: #484848;
7442 box-shadow: 0 0 0 1px #131313 inset;
7443 border-left: 1px solid #484848;
7445 .posting-controls textarea:focus::-webkit-scrollbar-thumb,
7446 .textarea-container .autocomplete-container::-webkit-scrollbar-thumb {
7447 border-left: 1px solid #0cc800;
7448 background-color: #40a800;
7449 box-shadow:
7450 0 1px 0 0 #1d1f00 inset,
7451 0 0 0 1px #131313 inset;
7454 .posting-controls.edit-existing-post textarea:focus::-webkit-scrollbar-track,
7455 .posting-controls form.edit-existing-comment textarea:focus::-webkit-scrollbar-track {
7456 border-left: 1px solid #9740cb;
7458 .posting-controls.edit-existing-post textarea:focus::-webkit-scrollbar-thumb,
7459 .posting-controls form.edit-existing-comment textarea:focus::-webkit-scrollbar-thumb {
7460 border-left: 1px solid #9740cb;
7461 background-color: #8533c2;
7464 /* GUIEdit buttons */
7466 .guiedit-buttons-container {
7467 background-image: linear-gradient(to bottom, #000 0%, #1d1f00 50%, #252c00 75%, #344700 100%);
7470 .posting-controls.edit-existing-post .guiedit-buttons-container button,
7471 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
7472 color: #ce92ee;
7474 .guiedit-buttons-container button {
7475 font-family: 'Font Awesome', 'Font Awesome 5 Free', 'Charter', 'PT Serif', 'Georgia', serif;
7478 .guiedit::after {
7479 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
7480 color: #777;
7481 text-shadow: none;
7484 /* Markdown hints */
7486 #markdown-hints-checkbox + label {
7487 color: #0cc800;
7489 #markdown-hints-checkbox + label:hover {
7490 color: #0098e4;
7491 text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000;
7493 #markdown-hints {
7494 border: 1px solid #00a9ed;
7495 background-color: #000340;
7498 /*================*/
7499 /* EDIT POST FORM */
7500 /*================*/
7502 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
7503 top: -1px;
7505 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
7506 border-radius: 3px;
7507 border: 1px solid #1f1f1f;
7508 color: #777;
7510 @media only screen and (hover:hover) {
7511 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
7512 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
7513 text-shadow:
7514 0 0 1px #000,
7515 0 0 2px #000,
7516 0 0 2.5px #484848;
7518 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
7519 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
7520 border-color: #484848;
7523 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
7524 content: "\F00C";
7526 #edit-post-form input[type='radio'] + label {
7527 color: #777;
7528 border-color: #1f1f1f;
7529 padding: 4px 12px 5px 12px;
7531 #edit-post-form input[type='radio'][value='all'] + label {
7532 border-radius: 8px 0 0 8px;
7533 border-width: 1px;
7535 #edit-post-form input[type='radio'][value='drafts'] + label {
7536 border-radius: 0 8px 8px 0;
7538 @media only screen and (hover:hover) {
7539 #edit-post-form input[type='radio'] + label:hover,
7540 #edit-post-form input[type='radio']:focus + label {
7541 background-color: #1f1f1f;
7542 color: #fff;
7545 #edit-post-form input[type='radio']:focus + label {
7546 color: #fff;
7547 box-shadow:
7548 0 0 0 1px #484848;
7550 #edit-post-form input[type='radio']:checked + label {
7551 background-color: #1f1f1f;
7552 border-color: #1f1f1f;
7553 color: #fff;
7554 text-shadow:
7555 0 -1px 0 #000,
7556 0 0.5px 0.5px #fff;
7559 /*=======*/
7560 /* LINKS */
7561 /*=======*/
7564 text-decoration: none;
7565 color: #0cc800;
7567 a:visited {
7568 color: #76cc54;
7570 a:hover {
7571 text-decoration: underline;
7574 /*=========*/
7575 /* BUTTONS */
7576 /*=========*/
7578 button,
7579 input[type='submit'] {
7580 color: #0cc800;
7583 button:active,
7584 input[type='submit']:active {
7585 color: #0090e0;
7586 transform: scale(0.9);
7588 .button:visited {
7589 color: #0cc800;
7591 .button:active {
7592 transform: scale(0.9);
7594 @-moz-document url-prefix() {
7595 .button:active {
7596 transform: none;
7600 @media only screen and (hover:hover) {
7601 button:hover,
7602 input[type='submit']:hover,
7603 button:focus,
7604 input[type='submit']:focus {
7605 color: #0090e0;
7606 text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000;
7609 .button:hover {
7610 color: #0090e0;
7611 text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000;
7612 text-decoration: none;
7614 .button:focus:not(:hover) {
7615 transform: none;
7619 /*==========*/
7620 /* HEADINGS */
7621 /*==========*/
7623 .body-text h1,
7624 .body-text h2,
7625 .body-text h4 {
7626 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
7628 .body-text h3,
7629 .body-text h5,
7630 .body-text h6 {
7631 font-weight: 600;
7632 font-family: 'Concourse Smallcaps', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
7634 .body-text h6 {
7635 color: #9b9b9b;
7637 .body-text h1 {
7638 border-bottom: 1px solid #484848;
7641 /*========*/
7642 /* QUOTES */
7643 /*========*/
7645 blockquote {
7646 border-left: 5px solid #2c2c2c;
7649 /*========*/
7650 /* IMAGES */
7651 /*========*/
7653 #content img,
7654 #content figure.image img {
7655 border: 1px solid #2c2c2c;
7657 #content figure img {
7658 border: 1px solid #fff;
7660 #content img[src$='.svg'],
7661 #content figure img[src$='.svg'] {
7662 border: none;
7664 #content img[style^='float'] {
7665 border: 1px solid transparent;
7668 /*========*/
7669 /* TABLES */
7670 /*========*/
7672 #content:not(.tag-index-page) .body-text table,
7673 #content:not(.tag-index-page) .body-text table th,
7674 #content:not(.tag-index-page) .body-text table td {
7675 border: 1px solid #2c2c2c;
7678 /*======*/
7679 /* MISC */
7680 /*======*/
7682 hr {
7683 border-bottom: 1px solid #575756;
7686 code {
7687 background-color: #0b0b00;
7688 border: 1px solid #1d1f00;
7689 border-radius: 4px;
7692 input[type='text'],
7693 input[type='search'],
7694 input[type='password'] {
7695 background-color: #000;
7696 border: 1px solid #1f1f1f;
7697 color: #fff;
7699 input[type='text']:focus,
7700 input[type='search']:focus,
7701 input[type='password']:focus {
7702 background-color: #00001e;
7703 border: 1px solid #393939;
7704 box-shadow: 0 0 1px #393939;
7707 select {
7708 color: #fff;
7711 @-moz-document url-prefix() {
7712 h1.listing s,
7713 .post > h1:first-of-type s {
7714 position: relative;
7715 text-decoration: none;
7717 h1.listing s::after,
7718 .post > h1:first-of-type s::after {
7719 position: absolute;
7720 border-bottom: 3px solid #fff;
7721 content: "";
7722 top: 0;
7723 left: 0;
7724 width: 100%;
7725 height: 50%;
7728 /*============*/
7729 /* ABOUT PAGE */
7730 /*============*/
7732 .about-page mark {
7733 background-color: #191919;
7734 text-decoration: none;
7735 box-shadow:
7736 0 -1px 0 0 #fff inset,
7737 0 -3px 1px -2px #fff inset;
7738 padding: 0 1px;
7741 #content.about-page .accesskey-table {
7742 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
7743 border-color: #1f1f1f;
7746 #content.about-page img {
7747 border: 1px solid #fff;
7750 /*========================*/
7751 /* QUALIFIED HYPERLINKING */
7752 /*========================*/
7754 #aux-about-link a {
7755 color: #777;
7757 #aux-about-link a:hover {
7758 opacity: 1.0;
7759 text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000;
7762 .qualified-linking label {
7763 color: #0cc800;
7765 .qualified-linking label:hover {
7766 text-shadow:
7767 0 0 1px #000,
7768 0 0 3px #000,
7769 0 0 5px #0cc800;
7772 .qualified-linking-toolbar {
7773 border: 1px solid #fff;
7774 background-color: #000;
7776 .qualified-linking-toolbar a {
7777 background-color: #131313;
7778 border: 1px solid #2c2c2c;
7779 border-radius: 4px;
7781 .qualified-linking-toolbar a:visited {
7782 color: #0cc800;
7784 .qualified-linking-toolbar a:hover {
7785 text-decoration: none;
7786 background-color: #1f1f1f;
7787 text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000;
7789 .qualified-linking label::after {
7790 background-color: #232323;
7791 opacity: 0.8;
7794 /*======*/
7795 /* MATH */
7796 /*======*/
7798 .mathjax-block-container::-webkit-scrollbar {
7799 height: 12px;
7800 background-color: #0b0b00;
7801 border-radius: 6px;
7802 border: 1px solid #1d1f00;
7804 .mathjax-block-container::-webkit-scrollbar-thumb {
7805 background-color: #1e1f13;
7806 border-radius: 6px;
7807 border: 1px solid #282c11;
7809 .mathjax-inline-container::-webkit-scrollbar {
7810 height: 8px;
7811 background-color: #0b0b00;
7812 border-radius: 4px;
7813 border: 1px solid #1d1f00;
7815 .mathjax-inline-container::-webkit-scrollbar-thumb {
7816 background-color: #1e1f13;
7817 border-radius: 4px;
7818 border: 1px solid #282c11;
7822 /*===============*/
7823 /* USER MENTIONS */
7824 /*===============*/
7826 .textarea-container .autocomplete-container {
7827 background-color: rgba(0, 3, 64, 0.75);
7828 border: 1px solid rgba(10, 200, 0, 0.75);
7831 .textarea-container .autocomplete-container div.highlighted {
7832 background-color: rgba(10, 200, 0, 0.75);
7833 color: #000;
7836 .textarea-container .autocomplete-container div:not(.highlighted):hover {
7837 background-color: rgba(10, 200, 0, 0.25);
7840 .textarea-container .autocomplete-container div span.age,
7841 .textarea-container .autocomplete-container div span.karma {
7842 color: #666;
7846 /*=================*/
7847 /* ALIGNMENT FORUM */
7848 /*=================*/
7850 #content.alignment-forum-index-page::before {
7851 background-color: #131100;
7853 #content.alignment-forum-index-page::after {
7854 font-family: "Concourse SmallCaps";
7855 font-weight: bold;
7856 background-color: #658100;
7857 -webkit-background-clip: text;
7858 color: transparent;
7859 text-shadow:
7860 rgba(0, 0, 0, 0.5) 0px 3px 3px;;
7862 @media only screen and (hover: hover) {
7863 #content.alignment-forum-index-page h1.listing a:hover,
7864 #content.alignment-forum-index-page h1.listing a:focus {
7865 background-color: rgba(19, 17, 0, 0.85);
7869 /*====================*/
7870 /* FOR NARROW SCREENS */
7871 /*====================*/
7873 @media only screen and (max-width: 1440px) {
7874 #hns-date-picker {
7875 background-color: #232323;
7876 opacity: 1.0;
7878 #hns-date-picker::before {
7879 border: 1px solid #575756;
7880 border-width: 1px 0 1px 1px;
7883 @media only screen and (max-width: 1160px) {
7884 #theme-selector:hover::after {
7885 background-color: #575756;
7888 @media only screen and (max-width: 1080px) {
7889 #text-size-adjustment-ui button {
7890 border: 1px solid #575756;
7891 padding: 0 0 0 1px;
7892 border-radius: 50%;
7893 box-shadow:
7894 0 0 6px #575756 inset,
7895 0 0 0 1px transparent;
7897 #theme-tweaker-toggle button {
7898 border: 1px solid #575756;
7899 box-shadow:
7900 0 0 10px #575756 inset,
7901 0 0 0 1px transparent;
7902 border-radius: 50%;
7903 transform: scale(0.8);
7906 @media only screen and (max-width: 1020px) {
7907 #quick-nav-ui a {
7908 box-shadow:
7909 0 0 0 1px #575756,
7910 0 0 0 2px transparent;
7912 #new-comment-nav-ui .new-comments-count::before {
7913 background-color: #232323;
7914 box-shadow:
7915 0 0 0 1px #575756,
7916 0 0 0 2px transparent;
7917 border-radius: 8px;
7919 #anti-kibitzer-toggle {
7920 box-shadow:
7921 0 0 0 1px #575756,
7922 0 0 0 2px transparent;
7923 background-color: #232323;
7924 border-radius: 6px;
7925 overflow: hidden;
7928 @media only screen and (max-width: 1000px) {
7929 #theme-selector {
7930 background-color: #232323;
7931 box-shadow:
7932 0 0 0 1px #575756,
7933 0 0 0 2px transparent;
7935 #theme-selector:hover::after {
7936 width: calc(6em - 3px);
7937 height: calc(100% - 5px);
7938 top: 3px;
7939 left: 100%;
7941 #text-size-adjustment-ui button {
7942 background-color: #1f1f1f;
7944 #text-size-adjustment-ui button:hover {
7945 background-color: #131313;
7947 #theme-tweaker-toggle button {
7948 background-color: #1f1f1f;
7952 /*========*/
7953 /* MOBILE */
7954 /*========*/
7956 /**************************************************************************/
7957 @media only screen and (max-width: 1160px) {
7958 /**************************************************************************/
7960 #ui-elements-container > div[id$='-ui-toggle'] button {
7961 color: #666;
7962 text-shadow:
7963 0 0 1px #000,
7964 0 0 3px #000,
7965 0 0 5px #000,
7966 0 0 10px #000,
7967 0 0 20px #000,
7968 0 0 30px #000;
7971 #theme-selector {
7972 background-color: #232323;
7973 box-shadow:
7974 0 0 0 1px #575756,
7975 0 0 1px 3px #000,
7976 0 0 3px 3px #000,
7977 0 0 5px 3px #000,
7978 0 0 10px 3px #000,
7979 0 0 20px 3px #000;
7980 border-radius: 12px;
7982 #theme-selector::before,
7983 #theme-selector .theme-selector-close-button {
7984 color: #888;
7985 text-shadow: 0.5px 0.5px 0 #000;
7987 #theme-selector button {
7988 background-color: #191919;
7989 border-radius: 10px;
7991 #theme-selector button::after {
7992 color: #fff;
7993 padding-bottom: 2px;
7994 max-width: calc(100% - 3.25em);
7995 overflow: hidden;
7996 text-overflow: ellipsis;
7998 #theme-selector button.selected::after {
7999 text-shadow:
8000 0 -1px 0 #000,
8001 0 0.5px 0.5px #fff;
8004 #quick-nav-ui {
8005 background-color: #000;
8007 #quick-nav-ui,
8008 #new-comment-nav-ui,
8009 #hns-date-picker {
8010 box-shadow:
8011 0 0 1px 3px #000,
8012 0 0 3px 3px #000,
8013 0 0 5px 3px #000,
8014 0 0 10px 3px #000,
8015 0 0 20px 3px #000;
8017 #quick-nav-ui a::after,
8018 #new-comment-nav-ui::before {
8019 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
8020 font-weight: 600;
8021 box-shadow:
8022 0 0 1px 0 #000,
8023 0 0 3px 0 #000,
8024 0 0 5px 0 #000;
8025 background-color: #000;
8026 border-radius: 4px;
8028 #quick-nav-ui,
8029 #new-comment-nav-ui {
8030 border-radius: 8px;
8032 #new-comment-nav-ui {
8033 background-color: #232323;
8034 border: 1px solid #575756;
8036 #new-comment-nav-ui::before {
8037 color: #777;
8039 #new-comment-nav-ui .new-comment-sequential-nav-button {
8040 box-shadow: 0 0 0 1px #575756;
8041 color: #777;
8043 #new-comment-nav-ui .new-comments-count {
8044 background-color: inherit;
8045 box-shadow: 0 -1px 0 0 #575756;
8047 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
8048 color: #393939;
8050 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
8051 border-radius: 7px 0 0 7px;
8053 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
8054 border-radius: 0 7px 7px 0;
8056 #new-comment-nav-ui button::after {
8057 font-family: 'Concourse', 'a_Avante', 'Assistant', Arial, 'GW-Symbols', sans-serif;
8060 /*****************************************/
8061 @media only screen and (max-width: 900px) {
8062 /*****************************************/
8063 h1.listing {
8064 font-size: 1.75rem;
8065 line-height: 1;
8067 h1.listing .link-post-link {
8068 top: 2px;
8070 h1.listing + .post-meta .karma-value,
8071 h1.listing + .post-meta .comment-count,
8072 h1.listing + .post-meta .lw2-link,
8073 h1.listing + .post-meta .read-time {
8074 bottom: 0;
8076 h1.listing + .post-meta .post-section::before {
8077 position: unset;
8079 h1.listing + .post-meta .post-section {
8080 overflow: visible;
8081 order: 1;
8083 h1.listing + .post-meta .link-post-domain {
8084 order: 2;
8085 line-height: 1;
8086 flex-basis: 100%;
8088 h1.listing + .post-meta::after {
8089 bottom: -10px;
8091 #content.user-page h1.listing + .post-meta {
8092 margin-bottom: 1em;
8094 #content.user-page h1.link-post-listing::after {
8095 height: calc(100% + 2em);
8098 #nav-item-search button::before {
8099 color: #0cc800;
8102 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
8103 background-color: #484848;
8106 .comment-item .comment-item {
8107 margin: 0.75em 2px 4px 6px;
8108 box-shadow:
8109 0 0 2px #2c2c2c,
8110 0 0 4px #2c2c2c,
8111 0 0 7px #2c2c2c;
8113 .comment-item .comment-item + .comment-item {
8114 margin: 1.5em 2px 4px 6px;
8116 .comment-body {
8117 font-size: 1.125rem;
8120 a.comment-parent-link:hover::before {
8121 background-color: unset;
8124 .sublevel-nav:not(.sort) .sublevel-item,
8125 .sublevel-nav:not(.sort) .sublevel-item:first-child,
8126 .sublevel-nav:not(.sort) .sublevel-item:last-child {
8127 border-radius: 8px;
8128 border-width: 1px;
8129 margin: 2px;
8131 /*******************************************/
8132 } @media only screen and (max-width: 720px) {
8133 /*******************************************/
8134 h1.listing {
8135 margin: 10px 6px 6px 6px;
8136 max-width: calc(100% - 12px);
8137 font-size: 1.5rem;
8138 padding-right: 35px;
8140 #content.conversations-user-page h1.listing {
8141 font-size: 1.5rem;
8143 h1.listing + .post-meta {
8144 margin: 0 6px 0 7px;
8145 clear: both;
8147 h1.listing + .post-meta {
8148 padding: .25em 254px 0 0;
8150 h1.listing + .post-meta::after {
8151 bottom: -2px;
8153 h1.listing + .post-meta > * {
8154 line-height: 1;
8155 display: block;
8157 #content.conversations-user-page h1.listing + .post-meta > * {
8158 line-height: 1.5;
8160 h1.listing + .post-meta .date,
8161 h1.listing + .post-meta .author {
8162 line-height: 1.3;
8164 h1.listing + .post-meta .karma-value,
8165 h1.listing + .post-meta .comment-count,
8166 h1.listing + .post-meta .lw2-link,
8167 h1.listing + .post-meta .read-time {
8168 top: unset;
8169 font-size: 1rem;
8170 box-shadow: none;
8172 h1.listing + .post-meta .karma-value::before,
8173 h1.listing + .post-meta .comment-count::before,
8174 h1.listing + .post-meta .lw2-link::before,
8175 h1.listing + .post-meta .read-time::before {
8176 box-shadow: none;
8178 h1.listing + .post-meta .karma-value,
8179 h1.listing + .post-meta .comment-count,
8180 h1.listing + .post-meta .read-time,
8181 h1.listing + .post-meta .lw2-link {
8182 bottom: 4px;
8185 h1.listing + .post-meta .karma-value {
8186 right: 192px;
8188 h1.listing + .post-meta .karma-value::before {
8189 text-shadow: 0.5px 0.5px 0.5px #575756;
8191 h1.listing + .post-meta .comment-count {
8192 right: 132px;
8194 h1.listing + .post-meta .read-time {
8195 right: 56px;
8197 h1.listing + .post-meta .lw2-link {
8198 opacity: 1;
8199 right: 0;
8201 h1.listing + .post-meta .link-post-domain {
8202 margin: 0;
8203 line-height: 1.3;
8204 overflow: hidden;
8205 text-overflow: ellipsis;
8207 h1.listing + .post-meta .post-section::before {
8208 position: absolute;
8209 left: unset;
8210 right: 0;
8211 bottom: 30px;
8212 top: unset;
8214 h1.listing a {
8215 display: inline;
8217 /*******************************************/
8218 } @media only screen and (max-width: 520px) {
8219 /*******************************************/
8220 h1.listing + .post-meta {
8221 padding: .25em 144px 0 0;
8222 flex-flow: column;
8224 #content.conversations-user-page h1.listing + .post-meta {
8225 flex-flow: row wrap;
8227 h1.listing + .post-meta .date {
8228 margin: 0.375em 0 0.25em 0;
8229 line-height: 1;
8231 #content.user-page h1.listing::after {
8232 height: calc(100% + 2.125em);
8234 #content.user-page h1.link-post-listing::after {
8235 height: calc(100% + 3.125em);
8237 #content.user-page:not(.conversations-user-page) h1.listing + .post-meta {
8238 padding: 0.25em 144px 0.5em 36px;
8240 #content.conversations-user-page h1.listing + .post-meta .date {
8241 margin: 0 0 0 1em;
8244 h1.listing + .post-meta .karma-value {
8245 bottom: 28px;
8246 right: 56px;
8248 h1.listing + .post-meta .comment-count {
8249 bottom: 28px;
8250 right: 0;
8252 h1.listing + .post-meta .read-time {
8253 right: 56px;
8254 bottom: 4px;
8256 h1.listing + .post-meta .lw2-link {
8257 right: 0;
8258 bottom: 4px;
8260 h1.listing + .post-meta .link-post-domain {
8261 max-width: 100%;
8263 h1.listing + .post-meta .post-section::before {
8264 right: 120px;
8267 #content.compact > .comment-thread .comment-item {
8268 max-height: 110px;
8271 .textarea-container:focus-within button:active {
8272 background-color: #2c2c2c;
8274 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
8275 background-color: #131313;
8276 border: 1px solid #1f1f1f;
8277 border-radius: 6px;
8279 .textarea-container:focus-within .guiedit-mobile-help-button.active {
8280 border-color: #00a9ed;
8281 box-shadow:
8282 0 0 0 1px #000,
8283 0 0 0 2px #00a9ed;
8284 color: #00a9ed;
8285 font-weight: 600;
8287 #content.conversation-page .textarea-container:focus-within::after {
8288 background-color: #000;
8290 .textarea-container:focus-within .guiedit-buttons-container {
8291 background-color: white;
8292 border-top: 1px solid #1d1f00;
8294 .textarea-container:focus-within button.guiedit {
8295 background-color: #131313;
8296 border: 1px solid #1f1f1f;
8297 border-radius: 6px;
8299 #markdown-hints::after {
8300 color: #9740cb;
8303 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
8304 top: 2px;
8306 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
8307 top: 1px;
8309 /*******************************************/
8310 } @media only screen and (max-width: 320px) {
8311 /*******************************************/
8312 h1.listing {
8313 font-size: 1.25rem;
8315 #content.user-page h1.listing::after {
8316 height: calc(100% + 2.625em);
8318 #content.user-page h1.link-post-listing::after {
8319 height: calc(100% + 3.75em);
8325 /*************/
8326 /* ACCORDIUS */
8327 /*************/
8329 /*======*/
8330 /* TAGS */
8331 /*======*/
8333 #tags {
8334 order: 12;
8335 display: flex;
8336 flex-basis: 100%;
8337 justify-content: center;
8338 margin: 0;
8339 flex-flow: row wrap;
8340 align-items: flex-start;
8343 /*===============*/
8344 /* DEFAULT THEME */
8345 /*===============*/
8347 /*++++++*/
8348 /* TAGS */
8349 /*++++++*/
8351 #tags {
8352 padding: 0.5em;
8354 #tags::before {
8355 content: "Tags:";
8356 margin: 0 0.25em 0 0;
8357 opacity: 0.5;
8358 line-height: 1;
8359 align-self: center;
8361 #tags a {
8362 border-radius: 8px;
8363 background-color: #110c06;
8364 border: 1px solid #2e2416;
8365 padding: 4px 8px 5px 8px;
8366 line-height: 1;
8367 margin: 0.25em;
8368 font-size: 0.9375em;
8370 #tags a:hover {
8371 text-decoration: none;
8372 background-color: #221806;
8374 #tags a:active {
8375 color: #00a1e8;