Styling for user mention UI, part III
[lw2-viewer.git] / www / css / style-classic.linux.css
blobde2c602a04ac8950ae1eb3076e18d3064fa2942c
2 /*************/
3 /* VARIABLES */
4 /*************/
6 :root {
7 --GW-comment-background-color-odd: transparent;
8 --GW-comment-background-color-even: transparent;
9 --GW-comment-background-color-target: transparent;
11 --inverted-display: none;
14 /***************/
15 /* BASE LAYOUT */
16 /***************/
18 html {
19 box-sizing: border-box;
20 font-size: 16px;
22 *, *::before, *::after {
23 box-sizing: inherit;
25 script {
26 display: none !important;
29 /*=------=*/
30 /*= Body =*/
31 /*=------=*/
33 body {
34 padding: 0;
35 margin: 0;
37 body::before {
38 background-color: inherit;
39 position: fixed;
40 width: 100%;
41 height: 100%;
44 body.no-scroll {
45 overflow-y: scroll;
46 position: fixed;
47 width: 100%;
50 /*=----------------------------=*/
51 /*= Immediate children of body =*/
52 /*=----------------------------=*/
54 body > * {
55 max-width: 900px;
58 /* Special styles for special browsers.
59 (This one is a fix for Firefox’s built-in screenshot feature.)
61 body > iframe[id^='firefox-screenshots'] {
62 max-width: unset;
65 #content {
66 margin: 0 auto;
67 padding: 0 30px;
68 position: relative;
69 overflow: visible;
70 display: grid;
71 grid-template-columns: 2fr 1fr 2fr;
73 #content::before {
74 content: "";
75 display: block;
76 position: absolute;
77 top: 0;
78 left: 0;
79 width: 100%;
80 height: 100%;
81 z-index: -1;
82 pointer-events: none;
85 /*=---------=*/
86 /*= Content =*/
87 /*=---------=*/
89 #content > * {
90 grid-column: 1 / span 3;
93 /*=----------------------=*/
94 /*= Floating UI elements =*/
95 /*=----------------------=*/
97 #ui-elements-container {
98 position: fixed;
99 height: 100vh;
100 top: 0;
101 left: 0;
102 right: 0;
103 margin: auto;
104 z-index: 10000;
105 pointer-events: none;
107 #ui-elements-container > * {
108 pointer-events: auto;
111 /*=----------------=*/
112 /*= Images overlay =*/
113 /*=----------------=*/
114 /* (To exclude images in posts from theme tweaks) */
116 #images-overlay {
117 position: absolute;
118 z-index: 1;
119 left: 0;
120 right: 0;
121 margin: auto;
124 /***********/
125 /* NAV BAR */
126 /***********/
128 .nav-bar {
129 margin: 0 -30px;
130 display: flex;
131 order: -11;
132 z-index: 1;
135 /*=---------------=*/
136 /*= Nav bar items =*/
137 /*=---------------=*/
139 .nav-item {
140 flex: 1 1 auto;
142 .nav-item * {
143 text-overflow: ellipsis;
144 white-space: nowrap;
145 overflow: hidden;
147 .nav-inner {
148 padding: 12px 30px;
149 text-align: center;
150 display: block;
151 position: relative;
152 line-height: inherit;
153 width: 100%;
154 background: unset;
156 .nav-bar-top:not(#primary-bar) .nav-inner {
157 padding: 4px 0;
160 #nav-item-sequences .nav-inner::before {
161 font-family: "Font Awesome", "Font Awesome 5 Free";
162 content: "\F5DB";
164 @media only screen and (min-width: 901px) {
165 #nav-item-about .nav-inner {
166 margin-right: 0.5em;
168 #nav-item-sequences .nav-inner::before {
169 font-size: 1rem;
170 display: block;
172 #secondary-bar #nav-item-sequences .nav-inner {
173 font-size: 0;
174 line-height: 1.4;
178 /*=------------=*/
179 /*= Bottom bar =*/
180 /*=------------=*/
182 #bottom-bar {
183 order: 11;
185 h1.listing ~ #bottom-bar {
186 margin-top: 1.25em;
188 #bottom-bar .nav-item {
189 flex: 1 1 0;
192 /*=-----------------=*/
193 /*= Accesskey hints =*/
194 /*=-----------------=*/
196 .nav-inner::after {
197 content: attr(accesskey);
198 display: none;
201 /*=---------------=*/
202 /*= Pagination UI =*/
203 /*=---------------=*/
205 #bottom-bar .nav-item a::before,
206 #top-nav-bar a::before {
207 font-family: "Font Awesome", "Font Awesome 5 Free";
208 font-weight: 900;
209 font-size: 0.8em;
210 position: relative;
211 bottom: 1px;
212 margin-right: 0.5em;
214 #bottom-bar #nav-item-first a::before,
215 #top-nav-bar a.nav-item-first::before {
216 content: "\F33e";
218 #bottom-bar #nav-item-top a::before {
219 content: "\F062";
221 #bottom-bar #nav-item-prev a::before,
222 #top-nav-bar a.nav-item-prev::before {
223 content: "\F060";
225 #bottom-bar #nav-item-next a::before,
226 #top-nav-bar a.nav-item-next::before {
227 content: "\F061";
229 #bottom-bar #nav-item-last a::before,
230 #top-nav-bar a.nav-item-last::before {
231 content: "\F340";
233 #bottom-bar #nav-item-next a::before {
234 margin-left: -2em;
235 margin-right: 0;
236 left: 3.8em;
238 #bottom-bar #nav-item-last a::before {
239 margin-left: -1.8em;
240 margin-right: 0;
241 left: 3.4em;
244 /*= Hover tooltips =*/
246 #top-nav-bar a {
247 position: relative;
249 #top-nav-bar a::after {
250 bottom: calc(100% - 3px);
251 content: attr(data-target-page);
253 #top-nav-bar a::after {
254 display: block;
255 position: absolute;
256 font-size: 0.75rem;
257 width: 100%;
258 line-height: 1;
259 visibility: hidden;
261 #top-nav-bar a:hover::after,
262 #bottom-bar a:hover::after {
263 visibility: visible;
266 /*=-----------------------=*/
267 /*= Decorative bottom bar =*/
268 /*=-----------------------=*/
269 /* (On short pages with no pagination) */
271 #bottom-bar.decorative {
272 position: relative;
274 #bottom-bar.decorative .nav-item {
275 display: none;
278 /*=------------=*/
279 /*= Search tab =*/
280 /*=------------=*/
282 #nav-item-search {
283 flex: 4 1 auto;
285 #nav-item-search form::before {
286 content: "\F002";
287 font-family: "Font Awesome", "Font Awesome 5 Free";
288 font-weight: 900;
289 display: inline-block;
290 vertical-align: top;
291 height: 23px;
292 width: 23px;
294 #nav-item-search input {
295 height: 23px;
296 width: calc(95% - 80px);
297 padding: 1px 4px;
299 #nav-item-search button {
300 height: 21px;
303 /*=-----------=*/
304 /*= Login tab =*/
305 /*=-----------=*/
307 #nav-item-login {
308 position: relative;
309 padding-right: 0.5em;
312 /*******************/
313 /* INBOX INDICATOR */
314 /*******************/
316 #inbox-indicator {
317 position: absolute;
318 top: 1px;
319 right: 0;
320 height: 100%;
321 visibility: hidden;
323 #inbox-indicator::before {
324 content: "\F0E0";
325 font-family: "Font Awesome", "Font Awesome 5 Free";
326 color: #bbb;
327 font-size: 1.1875rem;
328 position: absolute;
329 height: 100%;
330 right: 0;
331 top: 0;
332 padding: 0 0.45em;
333 visibility: visible;
334 font-weight: 900;
336 #inbox-indicator.new-messages::before {
337 color: #f00;
338 text-shadow:
339 0 0 1px #777,
340 0.5px 0.5px 1px #777;
342 a#inbox-indicator:hover::before {
343 color: #fff;
344 text-shadow:
345 0 0 1px #000,
346 0 0 2px #000,
347 0 0 4px #000,
348 0 0 1px #777,
349 0.5px 0.5px 1px #777;
351 a#inbox-indicator.new-messages:hover::before {
352 text-shadow:
353 0 0 1px #f00,
354 0 0 2px #f00,
355 0 0 4px #f00,
356 0 0 1px #777,
357 0.5px 0.5px 1px #777;
360 /****************/
361 /* PAGE TOOLBAR */
362 /****************/
364 .page-toolbar {
365 font-size: 0.9em;
366 line-height: 1.8;
367 text-align: right;
368 margin-right: -20px;
370 #content > .page-toolbar {
371 grid-column: 3;
372 grid-row: span 3;
374 #content.user-page > .page-toolbar {
375 grid-column: 2 / span 2;
376 order: -4;
379 /*=--------------------------=*/
380 /*= Page toolbar items (all) =*/
381 /*=--------------------------=*/
383 .page-toolbar > * {
384 display: inline-block;
385 margin-left: 1.5em;
387 .page-toolbar > form button {
388 padding: 0;
389 text-align: right;
390 white-space: unset;
392 .page-toolbar > form button::before {
393 text-align: center;
395 .page-toolbar .button::before {
396 font-family: "Font Awesome", "Font Awesome 5 Free";
397 font-size: 0.9em;
398 padding-right: 0.3em;
401 /*=-------------------------------=*/
402 /*= Page toolbar items (specific) =*/
403 /*=-------------------------------=*/
405 .new-post::before {
406 content: '\F067';
407 font-weight: 900;
409 .new-private-message::before {
410 content: '\F075';
411 font-weight: 400;
413 .logout-button::before {
414 content: '\F2F5';
415 font-weight: 900;
417 #enable-push-notifications::before {
418 content: '\F0F3';
419 font-weight: 400;
421 .ignore-button::before {
422 content: "\F070";
423 font-weight: 400;
425 .unignore-button::before {
426 content: "\F06E";
427 font-weight: 400;
429 .rss::before {
430 content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiANCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIGlkPSJSU1NpY29uIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+DQo8ZGVmcz4NCjxsaW5lYXJHcmFkaWVudCB4MT0iMC4wODUiIHkxPSIwLjA4NSIgeDI9IjAuOTE1IiB5Mj0iMC45MTUiIGlkPSJSU1NnIj4NCjxzdG9wICBvZmZzZXQ9IjAuMCIgc3RvcC1jb2xvcj0iI0UzNzAyRCIvPjxzdG9wICBvZmZzZXQ9IjAuMTA3MSIgc3RvcC1jb2xvcj0iI0VBN0QzMSIvPg0KPHN0b3AgIG9mZnNldD0iMC4zNTAzIiBzdG9wLWNvbG9yPSIjRjY5NTM3Ii8+PHN0b3AgIG9mZnNldD0iMC41IiBzdG9wLWNvbG9yPSIjRkI5RTNBIi8+DQo8c3RvcCAgb2Zmc2V0PSIwLjcwMTYiIHN0b3AtY29sb3I9IiNFQTdDMzEiLz48c3RvcCAgb2Zmc2V0PSIwLjg4NjYiIHN0b3AtY29sb3I9IiNERTY0MkIiLz4NCjxzdG9wICBvZmZzZXQ9IjEuMCIgc3RvcC1jb2xvcj0iI0Q5NUIyOSIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiByeD0iNTUiIHJ5PSI1NSIgeD0iMCIgIHk9IjAiICBmaWxsPSIjQ0M1RDE1Ii8+DQo8cmVjdCB3aWR0aD0iMjQ2IiBoZWlnaHQ9IjI0NiIgcng9IjUwIiByeT0iNTAiIHg9IjUiICB5PSI1IiAgZmlsbD0iI0Y0OUM1MiIvPg0KPHJlY3Qgd2lkdGg9IjIzNiIgaGVpZ2h0PSIyMzYiIHJ4PSI0NyIgcnk9IjQ3IiB4PSIxMCIgeT0iMTAiIGZpbGw9InVybCgjUlNTZykiLz4NCjxjaXJjbGUgY3g9IjY4IiBjeT0iMTg5IiByPSIyNCIgZmlsbD0iI0ZGRiIvPg0KPHBhdGggZD0iTTE2MCAyMTNoLTM0YTgyIDgyIDAgMCAwIC04MiAtODJ2LTM0YTExNiAxMTYgMCAwIDEgMTE2IDExNnoiIGZpbGw9IiNGRkYiLz4NCjxwYXRoIGQ9Ik0xODQgMjEzQTE0MCAxNDAgMCAwIDAgNDQgNzMgViAzOGExNzUgMTc1IDAgMCAxIDE3NSAxNzV6IiBmaWxsPSIjRkZGIi8+DQo8L3N2Zz4NCg==');
431 display: inline-block;
432 width: 1em;
433 padding-right: 0.2em;
434 position: relative;
435 top: 1px;
438 /*********************/
439 /* TOP PAGINATION UI */
440 /*********************/
442 #top-nav-bar {
443 grid-column: 2;
444 margin: 0.25em 0 0 0;
445 padding: 0.75em 0 0 0;
446 text-align: center;
447 font-size: 1.25em;
448 display: flex;
449 justify-content: center;
451 #top-nav-bar a {
452 line-height: 1;
454 #top-nav-bar a.disabled {
455 pointer-events: none;
456 visibility: hidden;
458 #top-nav-bar .page-number {
459 position: relative;
460 display: inline-block;
461 width: 1.5em;
463 #top-nav-bar .page-number-label {
464 position: absolute;
465 font-size: 0.5em;
466 text-transform: uppercase;
467 width: 100%;
468 bottom: 90%;
469 left: 0;
471 #top-nav-bar a::before {
472 margin: 0.5em;
473 display: inline-block;
476 /****************/
477 /* SUBLEVEL NAV */
478 /****************/
480 .sublevel-nav {
481 text-align: center;
482 display: flex;
483 justify-content: center;
484 margin: 1em 0 0 0;
486 #content > .sublevel-nav:not(.sort) {
487 grid-column: 2;
488 align-self: start;
490 .sublevel-nav .sublevel-item {
491 flex: 0 0 6em;
492 padding: 0.125em 0.5em;
493 font-size: 1.125rem;
495 .sublevel-nav .sublevel-item:active {
496 transform: none;
498 .sublevel-nav .sublevel-item.selected {
499 cursor: default;
502 /***********************/
503 /* SORT ORDER SELECTOR */
504 /***********************/
506 .sublevel-nav.sort {
507 position: relative;
508 margin-top: 8px;
509 font-size: 0.75em;
511 #content > .sublevel-nav.sort {
512 grid-column: 3;
513 grid-row: span 2;
514 justify-self: end;
515 align-self: start;
516 flex-flow: column;
518 #content.index-page > .sublevel-nav.sort {
519 grid-column: 1;
520 justify-self: start;
521 flex-flow: row;
524 .sublevel-nav.sort::before {
525 content: "Sort";
526 font-size: 0.75rem;
527 position: absolute;
528 top: 0;
529 left: 0;
530 width: 100%;
532 .sublevel-nav.sort .sublevel-item {
533 line-height: 1;
534 font-size: 0.875rem;
535 flex-basis: unset;
538 /*******************************/
539 /* COMMENTS SORT MODE SELECTOR */
540 /*******************************/
542 .comments > .sublevel-nav.sort {
543 margin: 1em auto 0 auto;
545 @supports (width: -moz-fit-content) {
546 .comments > .sublevel-nav.sort {
547 width: -moz-fit-content;
550 @supports (width: fit-content) {
551 .comments > .sublevel-nav.sort {
552 width: fit-content;
556 /******************/
557 /* WIDTH SELECTOR */
558 /******************/
560 #width-selector {
561 position: absolute;
562 top: 4px;
563 right: -78px;
565 #width-selector button {
566 width: 22px;
567 height: 22px;
568 padding: 6px;
569 margin: 1px;
570 overflow: hidden;
571 background-repeat: no-repeat;
572 background-size: 100%;
573 background-origin: content-box;
575 #width-selector button,
576 #width-selector button:active,
577 #width-selector button:focus {
578 text-shadow: none;
579 color: transparent;
581 #width-selector button:disabled {
582 cursor: auto;
584 #width-selector button.select-width-normal {
585 background-image: url('data:image/gif;base64,R0lGODdhFAAUAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAUABQAAAIqnI+py+0PU5hB0Sqp1Xlu32HI9YkHGZZqyo6cC8Kmgcqr3Z5vxPf+nygAADs=');
587 #width-selector button.select-width-wide {
588 background-image: url('data:image/gif;base64,R0lGODdhFAAUAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAUABQAAAIrnI+py+0PT5jB0TqupUY37zEg95HhMk6bmpGi6aIw+7KnkmK1HvX+DzwUAAA7');
590 #width-selector button.select-width-fluid {
591 background-image: url('data:image/gif;base64,R0lGODdhFAAUAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAUABQAAAIwnI+py+0/ApIwUGOfvTGzzYELGIoTiZpdylJte7xoQp7beMc5XnL4CYlMgsSisVEAADs=');
594 /*=----------------=*/
595 /*= Hover tooltips =*/
596 /*=----------------=*/
598 #width-selector button::after {
599 content: attr(data-name);
600 position: absolute;
601 display: block;
602 left: 0;
603 width: 100%;
604 text-align: center;
605 top: 56px;
606 visibility: hidden;
608 #width-selector button.selected::after {
609 content: attr(data-name) " (selected)";
611 #width-selector button:hover:not(:active)::after {
612 visibility: visible;
615 head.content-width-normal + body > * {
616 max-width: 900px;
618 head.content-width-wide + body > * {
619 max-width: 1150px;
621 head.content-width-fluid + body > * {
622 max-width: calc(100% - 300px);
625 /******************/
626 /* THEME SELECTOR */
627 /******************/
629 #theme-selector {
630 position: absolute;
631 top: 3px;
632 left: -41px;
633 opacity: 0.4;
634 display: table;
635 max-width: 40px;
637 #theme-selector:hover {
638 opacity: 1.0;
641 /*=----------------------=*/
642 /*= Theme select buttons =*/
643 /*=----------------------=*/
645 .theme-selector button {
646 display: table-cell;
647 width: 26px;
648 height: 26px;
649 padding: 5px;
650 margin: 1px 7px 0 7px;
651 color: transparent;
652 background-size: 16px 16px;
653 background-origin: content-box;
655 .theme-selector button,
656 .theme-selector button:hover,
657 .theme-selector button:active,
658 .theme-selector button:focus {
659 text-shadow: none;
660 color: transparent;
662 .theme-selector button:disabled {
663 cursor: auto;
666 /*=----------------------------=*/
667 /*= Pre-rendered button images =*/
668 /*=----------------------------=*/
669 /* (Each is just a capital letter A through whatever) */
671 .theme-selector button:nth-of-type(1) {
672 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMQAAAA0NDRYWFhwcHCIiIioqKjU1NTs7O0BAQEtLS09PT1ZWVlxcXGNjY2VlZWZmZmpqamxsbG1tbXd3d4WFhYeHh46OjpaWlpubm6Ojo6ampqysrK+vr7GxsbKysra2tr29vcDAwMnJyc3NzdLS0tra2tvb293d3d/f3+Tk5Ofn5+rq6uvr6+3t7e7u7vHx8fb29vf39/r6+vv7+/39/f7+/v///38AAA8AAAAAAAAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGmUCbcEgsGo/IpHLJbDqf0Kh0Sq0eQwHCyVqsKQAACpdYAgMGrrGwYgZs1C9C+zAbc9rgEZeGwAMiXCRmHRdgAipWE4YtJmYYVSwCYBI2NQxgBDBUGWYSHh+SYCBTMgZ+bQs0UiKneCVRNRBmCw61DwlmYlApZnREMQVgaFCFYBpGFmZvTjRfAAIrRihmDTVq19jZ2tvc3d5CQQA7');
674 .theme-selector button:nth-of-type(2) {
675 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMQAAAA0NDRwcHCYmJioqKk1NTVVVVV1dXWJiYmNjY3d3d35+foiIiIuLi5aWlq2trbOzs7S0tLm5ucXFxcrKysvLy83NzdLS0tXV1dbW1tra2tvb2+Xl5ebm5ujo6Onp6e3t7e7u7vT09Pb29vf39/j4+Pv7+/39/f7+/v///wAAwKwtDQEAAAAQrAUAAGAAABUAAAAAAAAAEKwFAABgAABQ4VxT/38AAA8AAAAAAAAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGj0CAcEgsGo/IpHLJbDqf0Kh0Sq0KAx0TaUsqcRzWQChFLpM/BGoAZG5P1OyUiXI5lUeD6ZosEgAWd2lSeykieQllhnpxJAoMH2UZcG1lIYKDcZQhBpOUZCcFi2QjaQgeZRaiKXhCDWUaqn1CD6+qKRIQGGYbtpQoC3pjnikRapBtIhUHVszNzs/Q0dLT1ENBADs=');
677 .theme-selector button:nth-of-type(3) {
678 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=');
680 .theme-selector button:nth-of-type(4) {
681 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMYiHh4iIiImGhYqGhYuHhYyGg46Gg5CFgJKEfpKFf5WDfJeEfJiCeZmDeZqCeZuCd56BdZ+AdKZ/cKd/bq19abJ8ZbZ6Ybd5YMR1VctzUMxzT8x0UNJxStNxSdNyStRxSddwRthvRNlvRNtvQ99uQOFuPuRsO+ZtO+dsOuhsOOtrNuxrNvBpMfBpMvNoL/ZnLPZoLvhnLPlmKvpmKvtnKvxmKPxmKf1mKA8AAAAAAAAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGn8CAcEgsGo/IpHLJbDqf0Kh0Sq0KBauX9iVrZRBWBe1GLpM11cSsZplMKqIaOTWYqmsM4uFEBtnXD0UAKDc1EVJ3gUUNNjcjiIBHITcsAlGJRxw3MASXkUYVm3VQmEYbNy6jT6VFHZudpJ9EBjI3JZA1ikQeZBe4ugEAH2QqALgUDQ4QGDFkMgt/ZmYmBVRq0i8kElbc3d7f4OHi4+REQQA7');
683 .theme-selector button:nth-of-type(5) {
684 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMQAw5wMy5gc15hI95RQ/5BhC4xtE5CZN4idN4Upo3Zai05um0p2o0qCq0aKr0aqy0Kyz0K200K+10LK4z7q+zru/zry/zr3Azr7Bzr/CzsDDzsHDzcTGzcnJzMrKzMzMzCwAAAAAIAAgAAAFbeAnjmRpnmiqrmzrvnAsz3Q9esmB7Hxh1ZsBYEgEBCo1DkHgmEiez05ymbGZlIKflYRFbkfY6lekBOh4hoitXBwq1kuG5EF/aOAC8Rir3S/7X3xjZEsQGBSIFBdwbUQNU41DC4OUlZaXmJmaViEAOw==');
686 .theme-selector button:nth-of-type(6) {
687 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMQAAAA0NDS4uLjU1NTg4OElJSVZWVmNjY21tbaOjo62trbOzs8XFxcvLy8zMzNDQ0Nvb2+Dg4OHh4ePj4+Xl5e7u7vLy8v39/f///4n/fwAAwKwtDQEAAAAeBwAAAAAAACwAAAAAIAAgAAAFWiAmjmRpnmiqrmzrvnAsz3RNJkKh70NlH4CgEBDw1RCABSXCZF5syIfthGxMTdVrKasdIQGGHWEy/Q4BjDJAIYG4IRa1tCvi0u1dvFZ/5asddIGCg4SFhoeDIQA7');
689 .theme-selector button:nth-of-type(7) {
690 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPUAMWcEFG4QH3QZKHcfLXslM4AtOYIxPYQ1QYY4Q4tAS5VPWZpYYbKAhrSCh7iJjruPk72RlcWfosikp8qnqsyrrNK1tdO2tta7u9e+vtzExOTS0ebV0+bW1OfX1ejY1ujZ1+na1+nb2Ozf3Ozg3e3h3u7i3+/k4fDm4/Ho5PLq5vPr5/Ts6PXu6vfx7fjz7/j07/n18Pr28fr38vv48/v59Pz69f379v389/79+P//+gAAwKwtDQEAAAAAAAAAAAAAACwAAAAAIAAgAAAGssCccEgsGo/IpHLJbDqf0Kh0CmWhVi5q0TYhAL6AwySmFRXAaEAANOWAIScbjRT5fqQzBEAQMrYoOFIWamxaRTV6DIZGL2cbi0UgAAMtRDAyM5kzMlGSAixDjWkJN1Adk6BComgLgU8nAgEllpg2GgAKrk4yZw9IkrlRD3uzRsC6TioCAAQmRh4ArVIXYBKpMBhepFMZaAYHaBVaLA5pAA0pkDQjISEmM5Dx8vP09fb3UUEAOw==');
692 .theme-selector button:nth-of-type(8) {
693 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMVONTVSNTlaPUFeQUViQUlmRU2yeZ3Cga3KhbYKsfqbEo6jGpazIqbLMr7PNsMHWvsHWv8LXwMPXwejw5+nw6Orx6e/07vH28PX49Pf69vn7+fv9+/z9/P7//v///wAAACwAAAAAIAAgAAAFe6AnjmRpnmiqrmzrvnAsz3Rts52zbKamNBxZxwB4mC6CAEWIKJowhECF6SxBpVSjNTqNdZqSJ5fKyFzO58kA620C3nA4G/YFEAr4fAEwf9UhYn0udVokV110TYUjh1mBiH6Kj0IHVYZRS14JABFiAhY3oaKjpKWmp6g2IQA7');
695 .theme-selector button:nth-of-type(9) {
696 background-image: url('data:image/gif;base64,R0lGODlhIAAgAPQAMZLDlpPDl5XEmJfFmpfGm5rHnZ3JoKjPq6nPrLXWuL/cwe317e317vb69vz9/P3+/f7//v///wAAQBsmAIBgAAAQhqFS/38AAO86GpX/fwAAwAzpDQEAAAAeBwAAAAAAACwAAAAAIAAgAAAFT2AkjmRpnmiqrmzrvnAsz3RtQsig2OYSAAdeifELCkcNAfA4ghiWzIgTypwaq8/r0RqVZrvcaBhLPT4KZSExzVtrhQ4CINGt2+/4vH4/CwEAOw==');
699 /*=------------------------------=*/
700 /*= Theme select button tooltips =*/
701 /*=------------------------------=*/
702 /* (with the name & description of the theme that each button selects) */
704 #theme-selector button {
705 position: relative;
706 z-index: 1;
708 #theme-selector button::before {
709 content: attr(data-theme-name);
710 position: absolute;
711 top: 0;
712 right: 100%;
713 padding: 5px 6px 6px 6px;
714 line-height: 1;
715 width: 6em;
716 text-align: right;
717 z-index: 1;
718 visibility: hidden;
720 #theme-selector:hover button::before {
721 visibility: visible;
723 #theme-selector:hover ~ #theme-tweaker-toggle,
724 #theme-selector:active ~ #theme-tweaker-toggle {
725 z-index: -1;
728 /************************/
729 /* THEME TWEAKER TOGGLE */
730 /************************/
732 #theme-tweaker-toggle {
733 position: absolute;
734 top: 7px;
735 left: -75px;
737 #theme-tweaker-toggle button {
738 font-family: "Font Awesome", "Font Awesome 5 Free";
739 font-weight: 900;
740 font-size: 1.25rem;
741 opacity: 0.4;
742 z-index: 1;
744 #theme-tweaker-toggle button:hover {
745 opacity: 1.0;
748 /*******************/
749 /* QUICKNAV WIDGET */
750 /*******************/
752 #quick-nav-ui {
753 position: absolute;
754 right: -67px;
755 bottom: 20px;
757 #quick-nav-ui a {
758 font-family: "Font Awesome", "Font Awesome 5 Free";
759 font-weight: 900;
760 font-size: 1.5rem;
761 line-height: 1.7;
762 text-align: center;
763 display: block;
764 width: 40px;
765 height: 40px;
766 margin: 10px 0 0 0;
768 #quick-nav-ui a[href='#comments'].no-comments {
769 pointer-events: none;
771 #quick-nav-ui a {
772 visibility: hidden;
774 #content.post-page ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
775 visibility: visible;
778 /************************/
779 /* NEW COMMENT QUICKNAV */
780 /************************/
782 #new-comment-nav-ui {
783 position: absolute;
784 right: -112px;
785 bottom: 42px;
787 #new-comment-nav-ui > * {
788 display: block;
789 position: relative;
791 #new-comment-nav-ui.no-comments {
792 display: none;
795 /*=--------------------=*/
796 /*= New comments count =*/
797 /*=--------------------=*/
799 #new-comment-nav-ui .new-comments-count {
800 width: 2em;
801 font-size: 1.25rem;
802 line-height: 1.1;
803 text-align: center;
804 left: 1px;
805 cursor: pointer;
807 #new-comment-nav-ui .new-comments-count::selection {
808 background-color: transparent;
810 #new-comment-nav-ui .new-comments-count::after {
811 content: "NEW";
812 display: block;
813 font-size: 0.625rem;
816 /*=-----------------------------------=*/
817 /*= Next/previous new comment buttons =*/
818 /*=-----------------------------------=*/
820 #new-comment-nav-ui .new-comment-sequential-nav-button {
821 font-size: 1.75rem;
822 font-family: "Font Awesome", "Font Awesome 5 Free";
823 font-weight: 900;
824 width: 1.5em;
825 z-index: 5001;
827 #new-comment-nav-ui .new-comment-previous {
828 top: 8px;
830 #new-comment-nav-ui .new-comment-next {
831 bottom: 6px;
833 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
834 cursor: auto;
835 pointer-events: none;
838 /*******************/
839 /* HNS DATE PICKER */
840 /*******************/
842 #hns-date-picker {
843 position: absolute;
844 bottom: 72px;
845 right: -253px;
846 opacity: 0.6;
848 #hns-date-picker:hover,
849 #hns-date-picker:focus-within {
850 opacity: 1.0;
852 #hns-date-picker.no-comments {
853 display: none;
856 /*=---------------=*/
857 /*= "Since" label =*/
858 /*=---------------=*/
860 #hns-date-picker span {
861 display: block;
862 font-size: 0.75rem;
863 text-transform: uppercase;
866 /*=--------------------=*/
867 /*= "Since" text field =*/
868 /*=--------------------=*/
870 #hns-date-picker input {
871 margin-top: 1px;
872 padding: 1px 3px;
873 width: 140px;
874 text-align: center;
875 box-shadow: 0 0 0 1px transparent;
878 /************************/
879 /* ANTI-KIBITZER TOGGLE */
880 /************************/
882 #anti-kibitzer-toggle {
883 position: absolute;
884 right: -67px;
885 bottom: 225px;
887 #anti-kibitzer-toggle button {
888 display: block;
889 width: 40px;
890 height: 54px;
891 padding: 0;
893 #anti-kibitzer-toggle button::before,
894 #anti-kibitzer-toggle button::after {
895 font-family: "Font Awesome", "Font Awesome 5 Free";
897 #anti-kibitzer-toggle button::before {
898 content: "\F06E";
899 display: block;
900 font-size: 1.75em;
901 font-weight: 400;
903 #anti-kibitzer-toggle button::after {
904 content: "\F007\2004\F164";
905 font-size: 0.875em;
906 font-weight: 900;
908 #anti-kibitzer-toggle.engaged button::before {
909 content: "\F070";
912 /************************/
913 /* TEXT SIZE ADJUSTMENT */
914 /************************/
916 #text-size-adjustment-ui {
917 position: absolute;
918 top: 30px;
919 right: -78px;
920 opacity: 0.4;
922 #text-size-adjustment-ui:hover {
923 opacity: 1.0;
926 /* This doesn't work in Mozilla browsers, so hide it */
927 @-moz-document url-prefix() {
928 #text-size-adjustment-ui {
929 display: none;
933 /*=---------=*/
934 /*= Buttons =*/
935 /*=---------=*/
937 #text-size-adjustment-ui button {
938 font-weight: 900;
939 font-family: "Font Awesome", "Font Awesome 5 Free";
940 font-size: 0.75rem;
941 width: 24px;
942 height: 24px;
943 padding: 0;
945 #text-size-adjustment-ui button.default {
946 font-family: inherit;
947 font-size: 1.125rem;
948 position: relative;
949 top: 1px;
951 #text-size-adjustment-ui button:disabled {
952 opacity: 0.5;
954 #text-size-adjustment-ui button:disabled:hover {
955 cursor: default;
958 /*=----------------=*/
959 /*= Hover tooltips =*/
960 /*=----------------=*/
962 #text-size-adjustment-ui::after {
963 content: "Adjust text size";
964 position: absolute;
965 display: block;
966 left: 0;
967 width: 100%;
968 text-align: center;
969 top: 32px;
970 visibility: hidden;
971 font-size: 0.9em;
973 #text-size-adjustment-ui:hover::after {
974 visibility: visible;
977 /*******************************/
978 /* COMMENTS VIEW MODE SELECTOR */
979 /*******************************/
981 #comments-view-mode-selector {
982 position: absolute;
983 bottom: 30px;
984 left: -40px;
985 opacity: 0.6;
987 #comments-view-mode-selector:hover {
988 opacity: 1.0;
991 /*=---------=*/
992 /*= Buttons =*/
993 /*=---------=*/
995 #comments-view-mode-selector a {
996 display: block;
997 font-family: "Font Awesome", "Font Awesome 5 Free";
998 font-size: 1.25rem;
999 text-align: center;
1000 opacity: 0.4;
1001 padding: 0.25em;
1002 z-index: 1;
1004 #comments-view-mode-selector a.threaded {
1005 transform: scaleY(-1);
1006 font-weight: 900;
1008 #comments-view-mode-selector a.chrono {
1009 font-weight: normal;
1011 #comments-view-mode-selector a.selected,
1012 #comments-view-mode-selector a:hover {
1013 opacity: 1.0;
1014 text-decoration: none;
1016 #comments-view-mode-selector a.selected {
1017 cursor: default;
1020 /*****************/
1021 /* KEYBOARD HELP */
1022 /*****************/
1024 #keyboard-help-overlay {
1025 width: 100vw;
1026 height: 100vh;
1027 background-color: rgba(0,0,0,0.7);
1028 position: fixed;
1029 left: 0;
1030 top: 0;
1031 z-index: 5001;
1033 display: flex;
1034 justify-content: center;
1035 align-items: center;
1036 padding: 20px 30px 30px 20px;
1038 visibility: hidden;
1041 #keyboard-help-overlay .keyboard-help-container {
1042 background-color: #fff;
1043 filter: drop-shadow(4px 4px 2px #000);
1044 flex: 1 1 auto;
1045 max-width: 1500px;
1046 max-height: 100%;
1047 overflow-y: auto;
1048 position: relative;
1050 #keyboard-help-overlay .keyboard-help-container h1 {
1051 text-align: center;
1052 border-bottom: 1px solid #ddd;
1053 margin: 0;
1054 padding: 10px 20px;
1056 #keyboard-help-overlay .keyboard-help-container .note {
1057 margin: 0.5em auto;
1058 padding: 0 1em;
1059 width: fit-content;
1061 #keyboard-help-overlay .keyboard-help-container .keyboard-shortcuts-lists {
1062 column-width: 21em;
1063 column-count: auto;
1064 column-gap: 1.5em;
1065 border-top: 1px solid #ddd;
1066 padding: 15px 20px;
1068 #keyboard-help-overlay .keyboard-help-container ul {
1069 list-style-type: none;
1070 margin: 0;
1071 padding: 0;
1072 break-inside: avoid;
1073 white-space: nowrap;
1075 #keyboard-help-overlay .keyboard-help-container ul:nth-of-type(n+2) {
1076 margin: 20px 0 0 0;
1078 #keyboard-help-overlay .keyboard-help-container ul li.section {
1079 font-weight: bold;
1080 font-size: 1.125rem;
1081 break-after: avoid;
1083 #keyboard-help-overlay .keyboard-help-container .keys {
1084 margin: 0 0.5em 0 0;
1085 min-width: 4.5em;
1086 display: inline-block;
1088 #keyboard-help-overlay .keyboard-help-container .keys code {
1089 margin: 0 6px 0 0;
1091 #keyboard-help-overlay .keyboard-help-container code {
1092 display: inline-block;
1093 background-color: #eee;
1094 border: 1px solid #ccc;
1095 padding: 3px 8px 4px 8px;
1096 margin: 0 1px;
1098 #keyboard-help-overlay .keyboard-help-container code.ak {
1099 background-color: #ffeb83;
1100 border-color: #d4a500;
1102 #keyboard-help-overlay .keyboard-help-container code.ak::before {
1103 content: "ak+";
1104 opacity: 0.3;
1107 #nav-item-about button.open-keyboard-help {
1108 display: none;
1110 @media only screen and (hover:hover) and (pointer:fine) {
1111 #nav-item-about {
1112 position: relative;
1113 padding-right: 0.25em;
1115 #nav-item-about button.open-keyboard-help {
1116 font-family: "Font Awesome", "Font Awesome 5 Free";
1117 font-weight: 900;
1118 position: absolute;
1119 top: 0;
1120 right: 0;
1121 height: 100%;
1122 padding: 8px;
1123 display: initial;
1124 line-height: 1;
1125 background-color: transparent;
1129 #keyboard-help-overlay button.close-keyboard-help {
1130 position: absolute;
1131 right: 0;
1132 top: 0;
1133 font-family: "Font Awesome", "Font Awesome 5 Free";
1134 font-size: 1.5rem;
1135 padding: 10px 12px;
1138 /************/
1139 /* ARCHIVES */
1140 /************/
1142 .archive-nav {
1143 margin: 1.25em 0.5em 0 0.5em;
1144 padding: 0.25em;
1146 .archive-nav > * {
1147 display: flex;
1149 .archive-nav *[class^='archive-nav-item'] {
1150 line-height: 1;
1151 flex: 1 1 5%;
1152 text-align: center;
1153 padding: 6px 4px 4px 4px;
1154 max-width: 8%;
1156 @-moz-document url-prefix() {
1157 .archive-nav *[class^='archive-nav-item'] {
1158 padding: 5px 4px;
1161 .archive-nav-days .archive-nav-item-day {
1162 font-size: 0.8em;
1163 padding: 7px 0 5px 0;
1164 max-width: 4%;
1166 .archive-nav-days .archive-nav-item-day:first-child {
1167 flex-basis: 10%;
1170 /************/
1171 /* ARCHIVES */
1172 /************/
1174 .archive-nav {
1175 margin: 1.25em 0.5em 0 0.5em;
1176 padding: 0.25em;
1178 .archive-nav > * {
1179 display: flex;
1181 .archive-nav *[class^='archive-nav-item'] {
1182 line-height: 1;
1183 flex: 1 1 5%;
1184 text-align: center;
1185 padding: 6px 4px 4px 4px;
1186 max-width: 8%;
1188 @-moz-document url-prefix() {
1189 .archive-nav *[class^='archive-nav-item'] {
1190 padding: 5px 4px;
1193 .archive-nav-days .archive-nav-item-day {
1194 font-size: 0.8em;
1195 padding: 7px 0 5px 0;
1196 max-width: 4%;
1198 .archive-nav-days .archive-nav-item-day:first-child {
1199 flex-basis: 10%;
1202 /************/
1203 /* LISTINGS */
1204 /************/
1206 h1.listing {
1207 font-size: 1.875rem;
1208 line-height: 1.15;
1209 max-height: 1.15em;
1210 position: relative;
1213 h1.listing a {
1214 position: relative;
1217 /* Links to link-posts (not the link-post links themselves; that's below) */
1218 h1.listing .link-post-link + a {
1219 margin-left: 0.25em;
1222 h1.listing .link-post-link {
1223 font-size: 0.8em;
1224 display: inline;
1225 vertical-align: top;
1226 position: relative;
1227 top: 4px;
1230 /*=----------------------=*/
1231 /*= Listing hover reveal =*/
1232 /*=----------------------=*/
1233 /* (On desktops, hover over a multi-line listing to reveal all of it) */
1235 @media only screen and (min-width: 1160px) {
1236 h1.listing a {
1237 max-width: 100%;
1238 display: inline-block;
1239 white-space: nowrap;
1240 text-overflow: ellipsis;
1241 overflow: hidden;
1242 border-bottom: 1px solid transparent;
1243 -webkit-hyphens: auto;
1244 -moz-hyphens: auto;
1245 -ms-hyphens: auto;
1246 hyphens: auto;
1247 z-index: 1;
1248 padding: 0 0 1px 1px;
1250 h1.listing .link-post-link + a {
1251 max-width: calc(100% - 40px);
1253 h1.listing a:hover,
1254 h1.listing a:focus {
1255 text-decoration: dotted underline;
1256 white-space: initial;
1257 overflow: visible;
1258 z-index: 2;
1260 h1.listing:focus-within::before {
1261 content: "\F105";
1262 font-family: "Font Awesome", "Font Awesome 5 Free";
1263 display: block;
1264 position: absolute;
1265 left: -0.75em;
1268 /* Adds hysteresis to the hover area (i.e., prevents oscillation due to small
1269 mouse movements) */
1271 h1.listing a:not(.edit-post-link):hover::before {
1272 content: "";
1273 position: absolute;
1274 top: -10px;
1275 right: -10px;
1276 bottom: -10px;
1277 left: -10px;
1278 z-index: -1;
1280 h1.listing .link-post-link:hover {
1281 text-decoration: none;
1285 /*=-----------------------=*/
1286 /*= In-listing edit links =*/
1287 /*=-----------------------=*/
1289 h1.listing .edit-post-link {
1290 position: absolute;
1291 margin: 0;
1294 /*=---------------------------------=*/
1295 /*= Error messages on listing pages =*/
1296 /*=---------------------------------=*/
1298 .listing-message {
1299 width: 100%;
1300 text-align: center;
1301 padding: 1.25em 0 1.25em 0;
1302 font-size: 1.375em;
1305 /*********************/
1306 /* LISTING POST-META */
1307 /*********************/
1309 h1.listing + .post-meta {
1310 position: relative;
1311 justify-content: flex-start;
1312 margin: 0 20px 0 21px;
1315 h1.listing + .post-meta > * {
1316 margin: 0 1em 0 0;
1319 h1.listing + .post-meta .post-section {
1320 width: 0;
1321 margin: 0;
1322 overflow: hidden;
1324 h1.listing + .post-meta .post-section::before {
1325 position: absolute;
1326 left: -36px;
1329 h1.listing + .post-meta .read-time {
1330 cursor: default;
1333 /********************/
1334 /* SEQUENCES & TAGS */
1335 /********************/
1337 .sequence-text, .tag-description {
1338 font-size: 1.2rem;
1339 padding: 0 22px;
1342 #content.tag-index-page .tag-description {
1343 margin: 1em 0 0;
1346 section {
1347 margin-top: 2em;
1348 margin-bottom: 4em;
1351 h1.sequence-chapter {
1352 font-size: 2.3rem;
1355 article {
1356 max-width: 100%;
1359 .post-meta + .comments {
1360 margin-top: 3em;
1363 .tag-list {
1364 column-count: auto;
1365 column-width: 15em;
1366 margin-top: 0;
1367 border-bottom: 1px solid #999;
1368 padding-bottom: 1em;
1369 margin-bottom: 0;
1372 /**************/
1373 /* USER PAGES */
1374 /**************/
1376 /*=---------------------=*/
1377 /*= User's display name =*/
1378 /*=---------------------=*/
1380 #content.user-page h1.page-main-heading {
1381 margin: 0.25em 0 0 0;
1382 line-height: 1.1;
1383 grid-column: 1 / span 2;
1384 order: -2;
1387 #content.user-page h1.page-main-heading .user-full-name {
1388 font-size: 1rem;
1389 font-weight: normal;
1390 padding-left: 0.5em;
1393 /*=--------------------=*/
1394 /*= User's karma total =*/
1395 /*=--------------------=*/
1397 #content.user-page .user-stats {
1398 grid-column: 3;
1399 order: -2;
1400 text-align: right;
1401 align-self: end;
1404 #content.user-page .user-stats .karma-type {
1405 white-space: nowrap;
1408 /*=----------------------=*/
1409 /*= Expanded vs. compact =*/
1410 /*=----------------------=*/
1412 #content.user-page #comments-list-mode-selector {
1413 grid-row: span 2;
1415 #content.user-page #comments-list-mode-selector button {
1416 display: block;
1419 /*=----------------------------------------------------=*/
1420 /*= All, Posts, Comments, Drafts, Conversations, Inbox =*/
1421 /*=----------------------------------------------------=*/
1423 #content.user-page .sublevel-nav {
1424 margin-bottom: 0.5em;
1427 /*=--------------=*/
1428 /*= User's posts =*/
1429 /*=--------------=*/
1431 #content.user-page h1.listing {
1432 margin: 0.5em 0 0 0;
1435 #content.user-page .user-bio :first-child {
1436 margin-top: 0.5em;
1439 /*****************/
1440 /* CONVERSATIONS */
1441 /*****************/
1443 /*=----------------------=*/
1444 /*= List of participants =*/
1445 /*=----------------------=*/
1447 #content.conversation-page .conversation-participants {
1448 grid-column: 2 / span 2;
1449 text-align: right;
1450 margin: 0.5em 0 0 0;
1452 .post-meta > .conversation-participants {
1453 white-space: normal;
1455 .conversation-participants ul,
1456 .conversation-participants li {
1457 list-style-type: none;
1458 display: inline-block;
1459 margin: 0;
1460 padding: 0;
1462 .conversation-participants li {
1463 margin-left: 0.375em;
1465 .conversation-participants li:not(:last-of-type)::after {
1466 content: ",";
1469 /*=-------------------------=*/
1470 /*= Posting controls (form) =*/
1471 /*=-------------------------=*/
1473 #content.conversation-page .posting-controls {
1474 padding: 0 0 1em 0;
1476 #content.conversation-page .post-meta-fields {
1477 overflow: auto;
1478 display: flex;
1479 flex-flow: row wrap;
1481 .posting-controls.standalone textarea {
1482 margin-top: 0.375em;
1484 .posting-controls.standalone form {
1485 padding: 0 1em;
1487 #content.conversation-page .posting-controls.standalone form {
1488 padding: 0 1em 3em 1em;
1490 .posting-controls.standalone input[type='text'],
1491 .posting-controls.standalone label {
1492 margin: 0.25em 0;
1494 .posting-controls.standalone label {
1495 width: 4em;
1496 text-align: right;
1497 padding: 2px 6px;
1498 border: 1px solid transparent;
1500 .posting-controls.standalone input[type='text'] {
1501 width: calc(100% - 4em);
1502 padding: 0.25em;
1504 .posting-controls.standalone input[type='submit'] {
1505 float: right;
1507 .posting-controls.standalone #markdown-hints-checkbox ~ label {
1508 white-space: nowrap;
1510 .posting-controls.standalone #markdown-hints {
1511 top: calc(100% + 2em);
1514 /*=--------------------=*/
1515 /*= Conversation title =*/
1516 /*=--------------------=*/
1518 #content.conversation-page h1.page-main-heading {
1519 text-align: center;
1520 margin: 0.5em 0;
1521 line-height: 1.15;
1524 /*=----------=*/
1525 /*= Messages =*/
1526 /*=----------=*/
1528 #content.conversation-page > ul.comment-thread:last-of-type {
1529 margin-bottom: 2em;
1532 /******************/
1533 /* SEARCH RESULTS */
1534 /******************/
1536 #content.search-results-page h1.listing,
1537 #content.sequence-page h1.listing,
1538 #content.post-page h1.listing {
1539 font-size: 1.625em;
1542 /**************/
1543 /* LOGIN PAGE */
1544 /**************/
1546 .login-container {
1547 margin: 2em 0;
1548 padding: 1em;
1549 display: flex;
1550 flex-flow: row wrap;
1553 .login-container form {
1554 flex-basis: 50%;
1555 display: grid;
1556 grid-row-gap: 0.5em;
1557 align-content: start;
1559 .login-container form label {
1560 text-align: right;
1561 padding: 0.25em 0.5em;
1562 white-space: nowrap;
1563 grid-column: 1;
1565 .login-container form input {
1566 grid-column: 2;
1567 padding: 0.25em;
1569 .login-container form input[type='submit'],
1570 .login-container form a {
1571 grid-column: 2;
1572 justify-self: center;
1574 .login-container form input[type='submit'] {
1575 width: 10em;
1576 padding: 0.35em;
1577 line-height: 1;
1578 margin: 0.5em 0 0 0;
1580 .login-container form h1 {
1581 text-align: center;
1582 margin: 0;
1583 grid-column: 2;
1586 /* “Log in” form */
1588 #login-form {
1589 grid-template-columns: 5.5em 1fr;
1590 padding: 0.5em 2em 0.5em 0;
1593 /* “Create account” form */
1595 #signup-form {
1596 font-size: 0.9em;
1597 grid-template-columns: 8.5em 1fr;
1598 padding: 0.5em 1em 1em 1em;
1600 #signup-form h1 {
1601 font-size: 1.7em;
1603 #signup-form input[type='submit'] {
1604 padding: 0.4em 0.5em 0.5em 0.5em;
1607 /* Log in tip */
1609 .login-container .login-tip {
1610 padding: 0.5em 0.5em 0.5em 3em;
1611 margin: 2em 4em 0 4em;
1612 text-indent: -2em;
1613 line-height: 1.4;
1615 .login-container .login-tip span {
1616 font-weight: bold;
1619 /* Message box */
1621 #content.login-page .error-box {
1622 margin: 1.5em 0.875em -1.5em 0.875em;
1624 .error-box, .success-box {
1625 padding: 0.25em;
1626 text-align: center;
1629 /***********************/
1630 /* PASSWORD RESET PAGE */
1631 /***********************/
1633 .reset-password-container {
1634 margin-bottom: 2em;
1636 .reset-password-container input[type='submit'] {
1637 padding: 0.2em 0.5em;
1638 width: unset;
1640 .reset-password-container input {
1641 margin-left: 0.5em;
1642 width: 12em;
1644 .reset-password-container label {
1645 display: inline-block;
1646 width: 9em;
1648 .reset-password-container form > div {
1649 margin: 0.2em;
1651 .reset-password-container .action-container {
1652 padding-left: 11em;
1653 padding-top: 0.2em;
1655 .reset-password-container .error-box {
1656 margin: unset;
1659 /*********************/
1660 /* TABLE OF CONTENTS */
1661 /*********************/
1663 .contents {
1664 float: right;
1665 min-width: 6em;
1666 max-width: 40%;
1667 margin: 1.25em 0 0.75em 1.25em;
1668 padding: 7px 14px 10px 10px;
1669 position: relative;
1670 z-index: 1;
1673 .contents-head {
1674 text-align: center;
1675 margin-bottom: 0.25em;
1678 .post-body .contents ul {
1679 list-style-type: none;
1680 margin: 0 0 0 0.5em;
1681 counter-reset: toc-item-1 toc-item-2 toc-item-3;
1682 padding-left: 1em;
1683 font-size: 0.75em;
1685 .post-body .contents li {
1686 margin: 0.15em 0 0.3em 1em;
1687 text-align: left;
1688 text-indent: -1em;
1689 line-height: 1.2;
1690 position: relative;
1692 .post-body .contents li::before {
1693 position: absolute;
1694 width: 3em;
1695 display: block;
1696 text-align: right;
1697 left: -4.5em;
1699 .contents .toc-item-1 {
1700 counter-increment: toc-item-1;
1701 counter-reset: toc-item-2 toc-item-3;
1703 .contents .toc-item-1::before {
1704 content: counter(toc-item-1);
1706 .contents .toc-item-1 ~ .toc-item-2 {
1707 margin-left: 2.9em;
1708 font-size: 0.95em;
1710 .contents .toc-item-2 {
1711 counter-increment: toc-item-2;
1712 counter-reset: toc-item-3;
1714 .contents .toc-item-1 ~ .toc-item-2::before {
1715 content: counter(toc-item-1) "." counter(toc-item-2);
1717 .contents .toc-item-2::before {
1718 content: counter(toc-item-2);
1720 .contents .toc-item-1 + .toc-item-3 {
1721 counter-increment: toc-item-2 toc-item-3;
1723 .contents .toc-item-2 ~ .toc-item-3,
1724 .contents .toc-item-1 ~ .toc-item-3 {
1725 margin-left: 2.9em;
1726 font-size: 0.95em;
1728 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3 {
1729 margin-left: 5.7em;
1730 font-size: 0.9em;
1732 .contents .toc-item-3 {
1733 counter-increment: toc-item-3;
1735 .contents .toc-item-1 ~ .toc-item-2 ~ .toc-item-3::before {
1736 content: counter(toc-item-1) "." counter(toc-item-2) "." counter(toc-item-3);
1738 .contents .toc-item-1 ~ .toc-item-3::before {
1739 content: counter(toc-item-1) "." counter(toc-item-3);
1741 .contents .toc-item-2 ~ .toc-item-3::before {
1742 content: counter(toc-item-2) "." counter(toc-item-3);
1744 .contents .toc-item-3::before {
1745 content: counter(toc-item-3);
1747 .contents .toc-item-4,
1748 .contents .toc-item-5,
1749 .contents .toc-item-6 {
1750 display: none;
1753 /********************/
1754 /* POSTS & COMMENTS */
1755 /********************/
1757 .post-meta > *,
1758 .comment-meta > * {
1759 display: inline-block;
1760 margin-right: 1em;
1761 font-size: 1.0625em;
1763 .body-text {
1764 overflow-wrap: break-word;
1765 text-align: justify;
1767 .body-text p {
1768 margin: 1em 0;
1770 .retracted .body-text {
1771 text-decoration: line-through;
1774 .bare-url {
1775 word-break: break-all;
1776 hyphens: auto;
1778 .body-text a:not([href]),
1779 .body-text a:not([href]):hover,
1780 .body-text a:not([href])::before,
1781 .body-text a:not([href])::after {
1782 text-decoration: none;
1783 text-shadow: unset;
1784 border: unset;
1785 color: unset;
1786 content: unset;
1788 /*************/
1789 /* POST-META */
1790 /*************/
1792 .post-meta {
1793 display: flex;
1794 flex-flow: row wrap;
1795 justify-content: center;
1797 .post-meta .lw2-link {
1798 opacity: 0.5;
1799 order: 1;
1801 .post-meta > *,
1802 .post-meta .post-section::before {
1803 margin: 0 0.5em;
1805 .post-meta .post-section {
1806 order: -1;
1807 margin: 0;
1808 visibility: hidden;
1810 .post-meta .post-section::before,
1811 .comment-meta .alignment-forum {
1812 visibility: visible;
1813 font-family: "Font Awesome", "Font Awesome 5 Free";
1814 font-weight: 900;
1816 .post-section.frontpage::before {
1817 content: "\F015";
1819 .post-section.featured::before {
1820 content: "\F005";
1822 .post-section.meta::before {
1823 content: "\F077";
1825 .post-section.events::before {
1826 content: "\F5A0";
1828 .post-section.personal::before {
1829 content: "\F007";
1831 .post-section.draft::before {
1832 content: "\F15B";
1834 .post-section.alignment-forum::before,
1835 .comment-meta .alignment-forum {
1836 content: "AF";
1837 font-family: Concourse, 'Changa One';
1840 /*= Karma controls hover tooltips =*/
1842 @media only screen and (pointer: fine) {
1843 .post .voting-controls,
1844 .comment-item .voting-controls {
1845 position: relative;
1847 .post .karma.active-controls::after,
1848 .comment-item .karma.active-controls::after {
1849 content: "Double-click for strong vote";
1850 position: absolute;
1851 pointer-events: none;
1852 display: block;
1853 left: 6px;
1854 width: 100%;
1855 line-height: 1.15;
1856 white-space: normal;
1857 text-align: center;
1858 font-size: 0.875rem;
1859 opacity: 0;
1860 transition: opacity 0.2s ease;
1862 .post .voting-controls.active-controls:hover::after,
1863 .comment-item .voting-controls.active-controls:hover::after {
1864 opacity: 1.0;
1867 .post .voting-controls .karma-value::after,
1868 .comment-item .voting-controls .karma-value::after {
1869 content: attr(title);
1870 position: absolute;
1871 pointer-events: none;
1872 display: block;
1873 left: 50%;
1874 transform: translateX(-50%);
1875 white-space: pre-wrap;
1876 width: max-content;
1877 text-align: center;
1878 font-size: 0.875rem;
1879 color: #bbb;
1880 opacity: 0;
1881 transition: opacity 0.2s ease;
1883 .post .voting-controls.agreement .karma-value:hover::after,
1884 .comment-item .voting-controls.agreement .karma-value:hover::after {
1885 top: unset;
1886 bottom: 100%;
1888 .post .voting-controls .karma-value:hover::after,
1889 .comment-item .voting-controls .karma-value:hover::after {
1890 opacity: 1.0;
1892 .post .voting-controls.waiting .karma-value:hover::after,
1893 .comment-item .voting-controls.waiting .karma-value:hover::after {
1894 display: none;
1896 .comment-item .voting-controls .karma-value:hover::after {
1897 z-index: 5001;
1900 .author {
1901 position: relative;
1903 .author:not(.redacted)::before {
1904 content: attr(data-full-name);
1905 position: absolute;
1906 pointer-events: none;
1907 display: block;
1908 padding: 0 1em;
1909 left: 50%;
1910 bottom: 2em;
1911 transform: translateX(-50%);
1912 white-space: nowrap;
1913 text-align: center;
1914 font-size: 0.875rem;
1915 font-weight: normal;
1916 opacity: 0;
1917 transition: opacity 0.2s ease;
1918 z-index: 5001;
1920 .author:hover::before {
1921 opacity: 1.0;
1925 /*********/
1926 /* POSTS */
1927 /*********/
1929 .post {
1930 max-width: 100%;
1933 .post-body {
1934 min-height: 8em;
1935 padding: 0 30px;
1936 line-height: 1.5;
1937 font-size: 1.3rem;
1938 overflow: auto;
1939 margin: 0.5em 0 0 0;
1941 h1.post-title {
1942 margin: 1.1em 0 0.35em 0;
1943 padding: 0 30px;
1944 text-align: center;
1945 font-size: 2.5em;
1946 line-height: 1;
1948 .post .post-meta {
1949 text-align: center;
1950 position: relative;
1951 z-index: 2;
1953 .post .top-post-meta:last-child {
1954 margin-bottom: 40px;
1956 .post .bottom-post-meta {
1957 margin: 0;
1958 padding: 20px 0;
1960 .bottom-post-meta {
1961 border-style: solid;
1962 border-width: 1px 0;
1965 /**********/
1966 /* EVENTS */
1967 /**********/
1969 .event-info .map {
1970 position: relative;
1971 width: 100%;
1972 margin: 2em 0 1em;
1975 .event-info .map::before {
1976 content: "";
1977 display: block;
1978 padding-bottom: 50%;
1981 .event-info .map iframe {
1982 width: 100%;
1983 height: 100%;
1984 border: 1px solid #000;
1985 position: absolute;
1986 top: 0;
1987 left: 0;
1990 .event-info ul {
1991 list-style: none;
1992 padding: 0;
1993 text-align: center;
1996 /*******************/
1997 /* POST NAVIGATION */
1998 /*******************/
2000 .post-nav-item {
2001 display: grid;
2002 grid-template: 100% / 32% 36% 32%;
2003 grid-template-areas:
2004 "prev seq next";
2006 .post-nav {
2007 display: flex;
2008 flex-flow: column;
2009 justify-content: flex-end;
2010 padding: 0.5em;
2013 .post-nav-title {
2014 font-size: 1.125em;
2015 line-height: 1.15;
2016 display: inline;
2017 border-top: 1px solid transparent;
2019 .post-nav.prev .post-nav-title,
2020 .post-nav.next .post-nav-title {
2021 border-bottom: 1px solid transparent;
2024 .sequence-title {
2025 align-items: center;
2026 text-align: center;
2027 grid-area: seq;
2029 .sequence-title .post-nav-title {
2030 font-size: 1.5em;
2033 .post-nav.prev {
2034 grid-area: prev;
2035 align-items: flex-start;
2037 .post-nav.prev .post-nav-title::before {
2038 content: "\F0D9\2005";
2040 .post-nav.next {
2041 grid-area: next;
2042 text-align: right;
2043 align-items: flex-end;
2045 .post-nav.prev .post-nav-label,
2046 .post-nav.next .post-nav-label {
2047 display: none;
2049 .post-nav.next .post-nav-title::after {
2050 content: "\2004\F0DA";
2052 .post-nav.prev .post-nav-title::before,
2053 .post-nav.next .post-nav-title::after {
2054 font-family: Font Awesome;
2055 font-weight: 900;
2056 vertical-align: text-bottom;
2057 opacity: 0.75;
2059 .post-nav-links {
2060 max-width: 100%;
2063 @media only screen and (max-width: 900px) {
2064 .post-nav-item {
2065 font-size: 0.875em;
2066 grid-template: auto auto / 50% 50%;
2067 grid-template-areas:
2068 "prev next"
2069 "seq seq";
2071 .post-nav.prev .post-nav-title,
2072 .post-nav.next .post-nav-title {
2073 border-bottom: none;
2075 .post-nav.prev {
2076 margin: 0 0 0 -1px;
2077 position: relative;
2078 left: 1px;
2080 .sequence-title {
2081 padding: 0.75em 0;
2084 @media only screen and (max-width: 520px) {
2085 .post-nav-links + .comments {
2086 padding: 1em 0 0 0;
2090 .related-posts, .related-post-group {
2091 padding-bottom: 1em;
2093 .related-post-type {
2094 font-size: 1.2em;
2095 font-weight: 600;
2096 margin-top: 0.5em;
2097 margin-bottom: -0.5em;
2098 list-style-type: disc;
2099 margin-left: -0.5em;
2100 opacity: 0.7;
2102 .related-post-type::before {
2103 content: "\269c";
2104 font-size: 1.375em;
2105 font-weight: normal;
2106 margin-right: 0.15em;
2107 position: relative;
2108 vertical-align: baseline;
2109 top: 0.05em;
2111 .related-posts .post-type-prefix {
2112 display: none;
2115 .crosspost {
2116 padding: 0.1em 1em;
2117 margin: 1em auto;
2120 /**************/
2121 /* LINK POSTS */
2122 /**************/
2124 .post.link-post > .post-body > p:first-child {
2125 text-align: center;
2126 font-size: 1.125em;
2127 margin: 0.5em 0 0 0;
2129 .post.link-post > .post-body > p:only-child {
2130 font-size: 1.5em;
2131 margin: 1em 0;
2133 .post.link-post a.link-post-link::before {
2134 content: "\F0C1";
2135 font-family: "Font Awesome", "Font Awesome 5 Free";
2136 font-weight: 900;
2137 font-size: 0.75em;
2138 position: relative;
2139 top: -2px;
2140 margin-right: 0.25em;
2143 /************/
2144 /* COMMENTS */
2145 /************/
2147 .comments {
2148 max-width: 100%;
2149 padding: 0 0 1px 0;
2150 position: relative;
2152 .comments::before {
2153 content: "";
2154 position: absolute;
2155 display: block;
2156 top: 0;
2157 left: 0;
2158 width: 100%;
2159 height: 100%;
2160 pointer-events: none;
2162 ul.comment-thread {
2163 list-style-type: none;
2164 padding: 0;
2165 max-width: 100%;
2167 .comments .comment-thread > li {
2168 position: relative;
2170 #content > #top-nav-bar + .comment-thread .comment-item {
2171 margin-top: 0;
2174 .comment-item {
2175 margin: 2em 0 0 0;
2177 .comment-item .comment-item {
2178 margin: 1em 8px 8px 16px;
2180 .comment-item .comment-item + .comment-item {
2181 margin: 2em 8px 8px 16px;
2184 .comment-body {
2185 line-height: 1.45;
2186 font-size: 1.2rem;
2187 padding: 10px;
2189 .comment-body ul {
2190 list-style-type: circle;
2192 .comment-body > *:first-child {
2193 margin-top: 0;
2195 .comment-body > *:last-child {
2196 margin-bottom: 0;
2199 .comments-empty-message {
2200 width: 100%;
2201 text-align: center;
2202 padding: 0.75em 0 0.9em 0;
2203 font-size: 1.375em;
2206 /**********************************/
2207 /* DEEP COMMENT THREAD COLLAPSING */
2208 /**********************************/
2210 .comment-item > input[id^="expand"] {
2211 display: none;
2213 .comment-item > input[id^="expand"] + label {
2214 display: block;
2215 visibility: hidden;
2216 position: relative;
2217 margin: 8px 9px;
2219 .comment-item > input[id^="expand"] + label::after {
2220 content: "(Expand " attr(data-child-count) " below)";
2221 visibility: visible;
2222 position: absolute;
2223 left: 0;
2224 white-space: nowrap;
2225 cursor: pointer;
2227 .comment-item > input[id^="expand"]:checked + label::after {
2228 content: "(Collapse " attr(data-child-count) " below)";
2230 .comment-item > input[id^="expand"] ~ .comment-thread {
2231 max-height: 34px;
2232 overflow: hidden;
2234 .comment-item > input[id^="expand"] ~ .comment-thread > li:first-child {
2235 margin-top: 0;
2237 .comment-item > input[id^="expand"]:checked ~ .comment-thread {
2238 max-height: 1000000px;
2241 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
2242 margin: 0;
2244 .comment-item > input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item a.comment-parent-link:hover::after {
2245 display: none;
2248 /*************/
2249 /* BACKLINKS */
2250 /*************/
2252 .backlinks > input {
2253 display: none;
2256 .backlinks > label {
2257 margin-left: 10px;
2258 display: block;
2259 color: #00f;
2260 cursor: pointer;
2263 .backlinks > label::before {
2264 content: " ";
2265 border-left: 5px solid currentColor;
2266 border-top: 5px solid transparent;
2267 border-bottom: 5px solid transparent;
2268 transition: transform 0.25s ease-out;
2269 transform-origin: 29% 55%;
2270 display: inline-block;
2271 padding-right: 0.5em;
2274 .backlinks > input:checked + label::before {
2275 transform: rotate(90deg);
2278 .backlinks li {
2279 margin-top: 0;
2282 .backlinks > ul {
2283 height: 0;
2284 perspective-origin: top;
2285 transform: perspective(100em) rotateX(-90deg);
2286 transform-origin: center top;
2287 opacity: 0;
2288 margin-top: 0.5em;
2289 margin-bottom: 0.5em;
2292 .backlinks > input:checked ~ ul {
2293 height: auto;
2294 transform: perspective(100em) rotateX(0deg);
2295 transition: transform 0.25s ease-in, opacity 0.25s ease-in;
2296 opacity: 1;
2299 /****************/
2300 /* COMMENT-META */
2301 /****************/
2303 .comment-meta {
2304 padding: 2px 24px 2px 10px;
2305 margin: 0 -1px;
2306 border: none;
2307 display: flex;
2308 flex-flow: row wrap;
2309 align-items: baseline;
2311 .user-page .comment-meta,
2312 .conversation-page .comment-meta {
2313 padding-right: 10px;
2315 .comment-meta .comment-post-title {
2316 flex-basis: 100%;
2317 overflow: hidden;
2318 text-overflow: ellipsis;
2319 white-space: nowrap;
2320 line-height: 1.3;
2322 .conversation-page .comment-meta .comment-post-title {
2323 margin: 0;
2324 flex-basis: unset;
2325 flex: 1 0 auto;
2326 text-align: right;
2327 display: none; /* Not sure if we need to display this... */
2329 .comment-item .author:not(.redacted).original-poster::after {
2330 content: "\2004(OP)";
2331 font-size: 0.75em;
2334 /*****************************/
2335 /* COMMENT THREAD NAVIGATION */
2336 /*****************************/
2338 a.comment-parent-link:not(.inline-author),
2339 a.comment-parent-link.inline-author::before {
2340 opacity: 0.5;
2342 a.comment-parent-link:hover {
2343 opacity: 1.0;
2345 a.comment-parent-link::before {
2346 content: "\F062";
2347 font-family: "Font Awesome", "Font Awesome 5 Free";
2348 font-weight: 900;
2349 font-size: 0.75rem;
2350 line-height: 1;
2351 position: absolute;
2352 z-index: 1;
2353 display: block;
2354 padding: 3px 3px 0 3px;
2355 width: 16px;
2356 height: calc(100% + 2px);
2357 top: -1px;
2358 left: -17px;
2360 a.comment-parent-link::after {
2361 content: "";
2362 position: absolute;
2363 z-index: 0;
2364 display: block;
2365 width: calc(100% + 26px);
2366 height: calc(100% + 38px);
2367 top: -29px;
2368 left: -17px;
2369 pointer-events: none;
2370 overflow: hidden;
2371 visibility: hidden;
2373 a.comment-parent-link:hover::after {
2374 visibility: visible;
2377 .comment-child-links {
2378 flex-basis: 100%;
2380 .comment-child-link {
2381 margin: 0 0.25em;
2382 display: inline-block;
2384 .comment-child-link::before {
2385 content: ">";
2386 display: inline-block;
2387 margin: 0 2px 0 0;
2390 .comment-popup {
2391 position: fixed;
2392 top: 10%;
2393 right: 10%;
2394 max-width: 700px;
2395 z-index: 10001;
2396 font-size: 1rem;
2397 white-space: unset;
2398 pointer-events: none;
2400 .comment-popup .comment-parent-link {
2401 display: none;
2403 .comment-popup .comment-body {
2404 font-size: 1.0625rem;
2407 .comment-item.depth-odd {
2408 --GW-comment-background-color: var(--GW-comment-background-color-odd);
2409 --GW-comment-parent-background-color: var(--GW-comment-background-color-even);
2411 .comment-item.depth-even {
2412 --GW-comment-background-color: var(--GW-comment-background-color-even);
2413 --GW-comment-parent-background-color: var(--GW-comment-background-color-odd);
2416 .comment-item:target {
2417 --GW-comment-background-color: var(--GW-comment-background-color-target);
2419 .comment-item:target > .comment-thread > .comment-item {
2420 --GW-comment-parent-background-color: var(--GW-comment-background-color-target);
2423 /**********************/
2424 /* COMMENT PERMALINKS */
2425 /**********************/
2426 /********************/
2427 /* COMMENT LW LINKS */
2428 /********************/
2430 .comment-meta .permalink::before,
2431 .comment-meta .lw2-link::before,
2432 .individual-thread-page a.comment-parent-link:empty::before {
2433 content: "";
2434 display: inline-block;
2435 width: 1rem;
2436 height: 1rem;
2437 border-radius: 3px;
2438 box-shadow:
2439 0 0 0 1px #fff,
2440 0 0 0 2px #00e,
2441 0 0 0 3px transparent;
2442 padding: 0 0 0 2px;
2443 background-size: 100%;
2444 position: relative;
2445 top: 2px;
2446 opacity: 0.5;
2448 .comment-meta .permalink::before {
2449 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');
2451 .comment-meta .lw2-link::before {
2452 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==');
2454 .individual-thread-page a.comment-parent-link:empty::before {
2455 left: unset;
2456 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==');
2458 .comment-meta .permalink:hover::before {
2459 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');
2461 .comment-meta .lw2-link:hover::before {
2462 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==');
2464 .individual-thread-page a.comment-parent-link:empty:hover::before {
2465 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=');
2467 .comment-meta .permalink:hover::before,
2468 .comment-meta .lw2-link:hover::before,
2469 .individual-thread-page a.comment-parent-link:empty:hover::before {
2470 box-shadow:
2471 0 0 0 2px #00e,
2472 0 0 0 3px transparent;
2473 opacity: 1.0;
2474 filter: unset;
2476 .comment-meta .permalink:active::before,
2477 .comment-meta .lw2-link:active::before,
2478 .individual-thread-page a.comment-parent-link:empty:active::before {
2479 transform: scale(0.9);
2482 .comment-meta .permalink,
2483 .comment-meta .lw2-link,
2484 .individual-thread-page .comment-parent-link:empty {
2485 position: relative;
2486 opacity: 1.0;
2488 .comment-meta .permalink::after,
2489 .comment-meta .lw2-link::after,
2490 .individual-thread-page .comment-parent-link:empty::after {
2491 content: "";
2492 width: 30px;
2493 height: 30px;
2494 display: block;
2495 position: absolute;
2496 top: -2px;
2497 left: -7px;
2498 box-shadow: none;
2499 pointer-events: auto;
2500 visibility: visible;
2503 /*************************/
2504 /* COMMENTS COMPACT VIEW */
2505 /*************************/
2507 #comments-list-mode-selector,
2508 #content.index-page #comments-list-mode-selector,
2509 #content.user-page #comments-list-mode-selector {
2510 padding-top: 6px;
2511 grid-column: 1;
2512 position: unset;
2513 z-index: 1;
2514 justify-self: start;
2515 align-self: start;
2517 #comments-list-mode-selector button {
2518 color: transparent;
2519 width: 32px;
2520 height: 32px;
2521 padding: 6px;
2522 margin: 1px;
2523 overflow: hidden;
2524 background-repeat: no-repeat;
2525 background-size: 100%;
2526 background-origin: content-box;
2528 #comments-list-mode-selector button:disabled {
2529 cursor: auto;
2531 #comments-list-mode-selector button.expanded {
2532 background-image: url('data:image/gif;base64,R0lGODdhKAAoAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAoACgAAAJTnI+py+0Po5wn2Iuz3lrxD25eSIJjiWZnyq4s6r5kLJtJndK4eO9z77NRhsSi8YhMKpfMpvMJjTqDIR3VYr1mqdtg1/fdhXHjWll2fqVb0rY7WQAAOw==');
2534 #comments-list-mode-selector button.compact {
2535 background-image: url('data:image/gif;base64,R0lGODdhKAAoAJEAAAAAAKqqqv///wAAACH5BAkAAAMALAAAAAAoACgAAAJXnI+py+0Po5y0uoCz3rxz5YViB46mWJ7qlq5u66rWTNf2fcQxrI98H/oBSYnhSWjU4JbMJi7pK0KD0ikRYfUgp1uo8wsOM7LXHJlVPWO6SbbRPRTL57gCADs=');
2537 @media only screen and (max-resolution: 1dppx) {
2538 #comments-list-mode-selector button.expanded {
2539 background-image: url('data:image/gif;base64,R0lGODdhFAAUAKIAAAAAAKampqqqqv///wAAAAAAAAAAAAAAACH5BAkAAAQALAAAAAAUABQAAAMmSLrc/tCJSasV7Gqat+6eBYbcQopRqq5s257VeMokHdoevrm8mgAAOw==');
2541 #comments-list-mode-selector button.compact {
2542 background-image: url('data:image/gif;base64,R0lGODdhFAAUAKIAAAAAAKqqqtvb2////wAAAAAAAAAAAAAAACH5BAkAAAQALAAAAAAUABQAAAMmSLrc/tCFSasN7Gqat45g433LeHUmF65phbZvurLtFJv3OO98zyQAOw==');
2546 #content > ul.comment-thread > li.comment-item,
2547 #content.compact > ul.comment-thread > li.comment-item {
2548 margin: 0;
2551 #content > .comment-thread {
2552 margin: 1em 0;
2554 #content.compact > .comment-thread {
2555 font-size: 0.9375rem;
2556 margin: 0.5em 0;
2558 #content.compact > .comment-thread:hover {
2559 z-index: 1;
2561 #content.compact > .comment-thread .comment-body {
2562 font-size: 1.0625rem;
2564 #content.compact > .comment-thread .comment-item,
2565 #content.index-page .comment-item.ignored,
2566 #content.inbox-user-page .comment-item.ignored {
2567 max-height: 61px;
2568 margin-top: 1em;
2569 overflow: hidden;
2570 position: relative;
2572 #content.compact > .comment-thread .comment-item {
2573 pointer-events: none;
2575 #content.compact > .comment-thread .comment-item::after {
2576 content: "…";
2577 position: absolute;
2578 right: 0;
2579 bottom: 0;
2580 font-size: 2rem;
2581 line-height: 1;
2582 padding: 0 16px 10px 64px;
2583 pointer-events: auto;
2585 @media only screen and (hover: hover) {
2586 #content.compact:not(:focus-within) > .comment-thread .comment-item:hover,
2587 #content.compact > .comment-thread .comment-item.expanded {
2588 overflow: visible;
2589 pointer-events: auto;
2590 z-index: 10;
2593 @media only screen and (hover: none) {
2594 #content.compact > .comment-thread.expanded .comment-item {
2595 overflow: visible;
2596 pointer-events: auto;
2597 z-index: 10;
2600 #content.compact > .comment-thread .comment-item .comment-meta {
2601 white-space: nowrap;
2602 overflow: hidden;
2603 text-overflow: ellipsis;
2604 padding: 2px 10px;
2606 #content.compact > .comment-thread .comment-item:hover .comment-meta {
2607 white-space: unset;
2609 #content.compact > .comment-thread .comment-item .comment-meta a {
2610 pointer-events: auto;
2612 #content.compact > .comment-thread .comment-item .comment-meta .comment-post-title {
2613 display: inline;
2615 #content.compact > .comment-thread .comment-item .comment-meta .voting-controls + .comment-post-title {
2616 margin-left: 0.75em;
2618 @media only screen and (hover: hover) {
2619 #content.compact > .comment-thread:last-of-type .comment-item:hover,
2620 #content.compact > .comment-thread:last-of-type .comment-item.expanded {
2621 max-height: unset;
2623 #content.compact > .comment-thread .comment-item:hover .comment,
2624 #content.compact > .comment-thread .comment-item.expanded .comment {
2625 position: relative;
2626 z-index: 1;
2627 margin-bottom: 2em;
2628 bottom: 0;
2630 #content.compact > .comment-thread .comment-item:hover .comment::before,
2631 #content.compact > .comment-thread .comment-item.expanded .comment::before{
2632 content: "";
2633 position: absolute;
2634 display: block;
2635 width: calc(100% + 20px);
2636 height: calc(100% + 20px);
2637 z-index: -1;
2638 top: -10px;
2639 left: -10px;
2641 #content.compact > .comment-thread:last-of-type .comment-item:hover .comment,
2642 #content.compact > .comment-thread:last-of-type .comment-item.expanded .comment{
2643 margin: 0;
2646 @media only screen and (hover: none) {
2647 #content.compact > .comment-thread.expanded:last-of-type .comment-item {
2648 max-height: unset;
2650 #content.compact > .comment-thread.expanded .comment-item .comment {
2651 position: relative;
2652 z-index: 1;
2653 margin-bottom: 2em;
2654 bottom: 0;
2656 #content.compact > .comment-thread.expanded .comment-item .comment::before {
2657 content: "";
2658 position: absolute;
2659 display: block;
2660 width: calc(100% + 14px);
2661 height: calc(100% + 20px);
2662 z-index: -1;
2663 top: -10px;
2664 left: -10px;
2666 #content.compact > .comment-thread.expanded:last-of-type .comment-item .comment {
2667 margin: 0;
2669 #content.compact > .comment-thread.expanded .comment-item .comment::after {
2670 content: "";
2671 display: block;
2672 position: fixed;
2673 top: 0;
2674 left: 0;
2675 width: 100%;
2676 height: 100%;
2677 z-index: -2;
2678 background-color: rgba(0,0,0,0.5);
2682 /*****************************/
2683 /* HIGHLIGHTING NEW COMMENTS */
2684 /*****************************/
2686 .new-comment::before {
2687 content: "";
2688 position: absolute;
2689 width: 100%;
2690 height: 100%;
2691 z-index: 5000;
2692 pointer-events: none;
2695 /***********************************/
2696 /* COMMENT THREAD MINIMIZE BUTTONS */
2697 /***********************************/
2699 .comment-minimize-button {
2700 font-family: "Font Awesome", "Font Awesome 5 Free";
2701 font-weight: 900;
2702 font-size: 1.25rem;
2703 line-height: 1;
2704 position: absolute;
2705 right: 1px;
2706 top: 1px;
2707 width: 18px;
2708 margin: 0;
2709 cursor: pointer;
2711 .comment-minimize-button:active {
2712 transform: scale(0.9);
2714 .comment-minimize-button::after {
2715 content: attr(data-child-count);
2716 font-weight: normal;
2717 font-size: 0.8125rem;
2718 position: absolute;
2719 left: 0;
2720 width: 100%;
2721 text-align: center;
2722 top: 21px;
2724 #content.individual-thread-page .comment-minimize-button {
2725 display: none;
2728 /*****************/
2729 /* IGNORE SYSTEM */
2730 /*****************/
2732 #content.comment-thread-page .comment-item.ignored {
2733 height: 38px;
2734 overflow: hidden;
2736 .comment-item.ignored > .comment > .comment-meta > .author {
2737 text-decoration: line-through;
2740 /***********************************/
2741 /* INDIVIDUAL COMMENT THREAD PAGES */
2742 /***********************************/
2744 .individual-thread-page > h1 {
2745 line-height: 1;
2746 margin: 0.75em 0 3px 0;
2748 .individual-thread-page .comments {
2749 border: none;
2752 /*************/
2753 /* SHORTFORM */
2754 /*************/
2756 .shortform-index-page .comments::before {
2757 border: none;
2758 box-shadow: none;
2761 .shortform-index-page .comments > .comment-thread > .comment-item:first-child {
2762 margin-top: 0;
2765 /****************/
2766 /* VOTE BUTTONS */
2767 /****************/
2769 .vote {
2770 margin: 0;
2772 .vote {
2773 font-family: "Font Awesome", "Font Awesome 5 Free";
2774 font-weight: 900;
2775 border: none;
2778 .vote:disabled {
2779 visibility: hidden;
2780 cursor: default;
2783 @keyframes waiting {
2784 0% {background-position: 200% 0%}
2785 100% {background-position: 0% 0%}
2788 .voting-controls .karma-value {
2789 opacity: 1;
2790 transition: opacity 0.5s linear;
2793 .voting-controls.waiting .karma-value {
2794 opacity: 0.5;
2795 background: repeat-x linear-gradient(70deg, #000 50%, #fff 75%, #000);
2796 background-clip: text;
2797 -webkit-background-clip: text;
2798 color: transparent;
2799 background-position: 200% 0%;
2800 background-size: 200% 100%;
2801 animation: waiting 1s linear infinite;
2804 /* Replicated karma controls at bottom of comments. */
2805 .comment-controls .voting-controls {
2806 float: left;
2807 font-size: 0.9375em;
2810 .comment-controls .voting-controls:first-of-type {
2811 margin-left: -14px;
2814 /*****************************/
2815 /* COMMENTING AND POSTING UI */
2816 /*****************************/
2818 .comment-controls {
2819 text-align: right;
2820 margin: 0 8px 8px 16px;
2821 position: relative;
2822 z-index: 9999;
2824 .comment-thread .comment-controls + .comment-thread > li:first-child {
2825 margin-top: 8px;
2827 .comments > .comment-controls {
2828 margin: 8px 0 0 0;
2830 .comments > .comment-controls:last-child {
2831 margin: 8px 0 16px 0;
2834 .posting-controls input[type='submit'] {
2835 margin: 6px;
2836 padding: 4px 10px;
2837 font-size: 1.125rem;
2840 .comment-controls .cancel-comment-button {
2841 position: absolute;
2842 right: 0;
2843 margin: 0;
2844 height: 27px;
2845 font-size: inherit;
2846 padding: 4px 8px 2px 4px;
2847 z-index: 1;
2849 .comment-controls .cancel-comment-button::before {
2850 font-family: "Font Awesome", "Font Awesome 5 Free";
2851 margin-right: 3px;
2852 content: '\F00D';
2853 font-weight: 900;
2854 font-size: 0.9em;
2855 opacity: 0.7;
2858 .comment + .comment-controls .action-button {
2859 font-weight: normal;
2860 font-size: 1.0625em;
2861 padding: 1px 6px;
2863 .comment-controls .action-button::before {
2864 font-family: "Font Awesome", "Font Awesome 5 Free";
2865 margin-right: 3px;
2867 .new-comment-button {
2868 font-size: 1.5rem;
2869 margin: 0 0.25em;
2871 .comment-controls .reply-button::before {
2872 content: '\F3E5';
2873 font-weight: 900;
2874 font-size: 0.9em;
2875 opacity: 0.6;
2877 .comment-meta .replied::before {
2878 content: '\F3E5';
2879 font-family: "Font Awesome", "Font Awesome 5 Free";
2880 color: #090;
2881 font-weight: 900;
2882 font-size: 0.9em;
2883 opacity: 0.6;
2886 .post-controls {
2887 text-align: right;
2888 margin: 0.75em 0 0 0;
2889 align-self: start;
2890 justify-self: end;
2892 .edit-post-link {
2893 display: inline-block;
2894 margin-bottom: 0.25em;
2895 font-size: 1.125rem;
2897 .edit-post-link::before {
2898 margin-right: 0.3em;
2900 .comment-controls .edit-button::before,
2901 .edit-post-link::before {
2902 content: '\F303';
2903 font-family: "Font Awesome", "Font Awesome 5 Free";
2904 font-weight: 900;
2905 font-size: 0.75em;
2906 position: relative;
2907 top: -1px;
2910 .comment-controls .delete-button {
2911 margin-right: 0.25em;
2913 .comment-controls .edit-button,
2914 .comment-controls .retract-button,
2915 .comment-controls .unretract-button {
2916 margin-right: 1em;
2918 .comment-controls .retract-button::before {
2919 content: '\F4B3';
2920 opacity: 0.6;
2922 .comment-controls .unretract-button::before {
2923 content: '\F075';
2924 opacity: 0.9;
2926 .comment-controls .delete-button::before {
2927 content: '\F05E';
2928 opacity: 0.7;
2930 .comment-controls .retract-button::before,
2931 .comment-controls .unretract-button::before,
2932 .comment-controls .delete-button::before {
2933 font-weight: 900;
2934 font-size: 0.9em;
2937 .comment-controls form {
2938 position: relative;
2940 .textarea-container {
2941 position: relative;
2943 .posting-controls textarea {
2944 display: block;
2945 width: 100%;
2946 height: 15em;
2947 min-height: 15em;
2948 max-height: calc(100vh - 6em);
2949 margin: 2px 0 0 0;
2950 padding: 4px 5px;
2951 font-size: 1.2rem;
2952 border-style: solid;
2953 border-width: 29px 1px 1px 1px;
2954 resize: none;
2957 /* GUIEdit buttons */
2959 .guiedit-buttons-container {
2960 position: absolute;
2961 left: 1px;
2962 top: 1px;
2963 width: calc(100% - 2px);
2964 height: 28px;
2965 text-align: left;
2966 padding: 1px 4px 0 4px;
2967 overflow: hidden;
2969 .comment-thread-page .guiedit-buttons-container {
2970 padding-right: 60px;
2972 .guiedit-buttons-container button {
2973 height: 26px;
2974 padding: 0 7px;
2975 font-weight: 900;
2976 font-size: 0.875rem;
2977 line-height: 1;
2978 position: static;
2980 .guiedit-buttons-container button:active {
2981 transform: none;
2983 .guiedit-buttons-container button:active div {
2984 transform: scale(0.9);
2986 .guiedit-buttons-container button sup {
2987 font-weight: bold;
2989 .guiedit::after {
2990 content: attr(data-tooltip);
2991 position: absolute;
2992 font-weight: normal;
2993 font-size: 1rem;
2994 top: 2px;
2995 left: 464px;
2996 height: 25px;
2997 padding: 4px 0;
2998 white-space: nowrap;
2999 visibility: hidden;
3001 .guiedit:hover::after {
3002 visibility: visible;
3005 /* Markdown hints */
3007 .posting-controls .markdown-reference-link {
3008 float: left;
3009 padding: 1px 0 0 6px;
3011 .posting-controls .markdown-reference-link a {
3012 padding-right: 1.5em;
3013 margin-right: 0.15em;
3014 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');
3015 background-size: 1.25em;
3016 background-repeat: no-repeat;
3017 background-position: right center;
3020 #markdown-hints-checkbox + label {
3021 float: left;
3022 margin: 2px 0 0 1em;
3023 line-height: 1.3;
3024 cursor: pointer;
3026 #edit-post-form #markdown-hints-checkbox + label {
3027 padding: 0;
3029 #markdown-hints-checkbox {
3030 visibility: hidden;
3031 float: left;
3033 #markdown-hints-checkbox + label::after {
3034 content: "(Show Markdown help)";
3036 #markdown-hints-checkbox:checked + label::after {
3037 content: "(Hide Markdown help)";
3039 #markdown-hints-checkbox + label::before {
3040 content: '\F059';
3041 font-family: "Font Awesome", "Font Awesome 5 Free";
3042 font-weight: 900;
3043 margin-right: 3px;
3045 #markdown-hints-checkbox:checked + label::before {
3046 font-weight: normal;
3048 #markdown-hints {
3049 margin: 4px 0 0 4px;
3050 padding: 4px 8px;
3051 position: absolute;
3052 text-align: left;
3053 top: calc(100% - 1em);
3054 z-index: 1;
3055 display: none;
3057 .comment-controls #markdown-hints {
3058 top: calc(100% + 1.75em);
3060 #markdown-hints-checkbox:checked ~ #markdown-hints {
3061 display: table;
3063 .markdown-hints-row {
3064 display: table-row;
3066 #markdown-hints .markdown-hints-row span,
3067 #markdown-hints .markdown-hints-row code {
3068 float: none;
3069 display: table-cell;
3070 border: none;
3071 background-color: inherit;
3072 padding: 0 12px 0 0;
3075 /******************/
3076 /* EDIT POST FORM */
3077 /******************/
3079 #edit-post-form {
3080 padding: 1em 1em 4em 1em;
3082 #edit-post-form .post-meta-fields {
3083 display: grid;
3084 grid-template-columns: 5em auto auto auto 1fr auto;
3085 margin-bottom: 0.625em;
3088 #edit-post-form label[for='title'],
3089 #edit-post-form label[for='url'],
3090 #edit-post-form label[for='section'] {
3091 grid-column: 1;
3093 #edit-post-form input[type='text'] {
3094 padding: 0.25em;
3095 grid-column: 2 / span 4;
3096 margin-bottom: 0.5em;
3099 #edit-post-form .link-post-checkbox,
3100 #edit-post-form .link-post-checkbox + label {
3101 grid-row: 1;
3102 grid-column: 6;
3104 #edit-post-form .question-checkbox,
3105 #edit-post-form .question-checkbox + label {
3106 grid-row: 3;
3107 grid-column: 5;
3108 justify-self: start;
3109 margin-left: 1.5em;
3112 #edit-post-form .post-meta-fields label[for="submit-to-frontpage"] {
3113 grid-row: 4;
3114 grid-column: 2 / span 4;
3115 text-align: left;
3116 margin-top: 8px;
3119 #edit-post-form .post-meta-fields input[type='checkbox'] {
3120 height: 0;
3121 opacity: 0;
3122 pointer-events: none;
3124 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
3125 white-space: nowrap;
3126 position: relative;
3127 cursor: pointer;
3128 padding: 0.25em 0.5em 0.25em calc(20px + 0.25em + 0.3725em);
3129 align-self: start;
3131 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
3132 content: "";
3133 font-family: "Font Awesome", "Font Awesome 5 Free";
3134 font-size: 1.375rem;
3135 line-height: 0.7;
3136 text-indent: 1px;
3137 font-weight: 900;
3138 position: absolute;
3139 width: 20px;
3140 height: 20px;
3141 left: 5px;
3143 #edit-post-form label[for='url'],
3144 #edit-post-form input[name='url'] {
3145 display: none;
3147 #edit-post-form .link-post-checkbox:checked ~ label[for='url'],
3148 #edit-post-form .link-post-checkbox:checked ~ input[name='url'] {
3149 display: initial;
3151 #edit-post-form label {
3152 line-height: normal;
3153 border: 1px solid transparent;
3154 text-align: right;
3155 padding: 0.25em 0.5em;
3156 white-space: nowrap;
3158 #edit-post-form input[type='radio'] {
3159 width: 0;
3160 margin: 0;
3161 opacity: 0;
3162 pointer-events: none;
3164 #edit-post-form input[type='radio'] + label {
3165 padding: 4px 12px;
3166 text-align: center;
3167 border-style: solid;
3168 border-width: 1px 1px 1px 0;
3169 cursor: pointer;
3171 #edit-post-form input[type='radio']:checked + label {
3172 cursor: default;
3175 #edit-post-form label[for='section'] {
3176 grid-row: 3;
3178 #edit-post-form input[type='radio'] + label {
3179 grid-row: 3;
3181 @supports (width: -moz-fit-content) {
3182 #edit-post-form input[type='radio'] + label {
3183 width: -moz-fit-content;
3186 @supports (width: fit-content) {
3187 #edit-post-form input[type='radio'] + label {
3188 width: fit-content;
3192 #edit-post-form textarea {
3193 min-height: 24em;
3196 #edit-post-form input[type='submit'] {
3197 padding: 6px 12px;
3198 float: right;
3200 #edit-post-form #markdown-hints {
3201 top: calc(100% + 2em);
3204 #edit-post-form button.guiedit div {
3205 overflow: visible;
3207 .guiedit-mobile-auxiliary-button {
3208 display: none;
3211 /***********/
3212 /* BUTTONS */
3213 /***********/
3215 button,
3216 input[type='submit'] {
3217 font-family: inherit;
3218 font-size: inherit;
3219 background-color: inherit;
3220 cursor: pointer;
3221 border: none;
3222 border-radius: 0;
3225 /************/
3226 /* HEADINGS */
3227 /************/
3229 .body-text h1,
3230 .body-text h2,
3231 .body-text h3,
3232 .body-text h4,
3233 .body-text h5,
3234 .body-text h6 {
3235 line-height: 1.1;
3236 margin: 1em 0 0.75em 0;
3237 text-align: left;
3240 .post-body h5,
3241 .post-body h6 {
3242 font-size: 1em;
3244 .post-body h4 {
3245 font-size: 1.2em;
3247 .post-body h3 {
3248 font-size: 1.4em;
3250 .post-body h2 {
3251 font-size: 1.75em;
3253 .post-body h1 {
3254 font-size: 2.1em;
3257 .comment-body h5,
3258 .comment-body h6 {
3259 font-size: 1em;
3261 .comment-body h4 {
3262 font-size: 1.15em;
3264 .comment-body h3 {
3265 font-size: 1.3em;
3267 .comment-body h2 {
3268 font-size: 1.5em;
3270 .comment-body h1 {
3271 font-size: 1.75em;
3274 /**********/
3275 /* QUOTES */
3276 /**********/
3278 blockquote,
3279 .post-body .comment-box .comment-body {
3280 font-size: 0.9em;
3281 margin: 1em 0;
3282 padding-left: 0.5em;
3283 margin-left: 1px;
3284 padding-bottom: 3px;
3286 blockquote *:first-child {
3287 margin-top: 0;
3289 blockquote *:last-child {
3290 margin-bottom: 0;
3292 blockquote blockquote {
3293 font-size: 0.95em;
3296 /* Pseudo-blockquotes that LW sometimes uses for some reason */
3298 .post-body .comment-box .user-name {
3299 font-style: italic;
3301 .post-body .comment-box .user-name::after {
3302 content: ":";
3304 .post-body .comment-box {
3305 zoom: 1.25;
3308 /**********/
3309 /* IMAGES */
3310 /**********/
3312 #content img, #content figure {
3313 max-width: 100%;
3316 .prediction-poll > svg {
3317 width: 700px;
3318 max-width: 100%;
3321 img.inline-latex {
3322 position: relative;
3323 top: 2.5px;
3324 margin: 0 2px;
3327 #content figure {
3328 text-align: center;
3329 margin: 1.5em auto;
3332 p.imgonly,
3333 div.imgonly,
3334 figure {
3335 text-align: center;
3336 margin: auto;
3337 clear: both;
3340 .imgonly iframe {
3341 display: block;
3342 width: 100%;
3343 height: 250px;
3344 border: 0;
3347 // Aspect ratio trick from https://css-tricks.com/aspect-ratio-boxes/
3349 [style*="--aspect-ratio"] > * {
3350 width: 100%;
3352 [style*="--aspect-ratio"] > img {
3353 height: auto;
3355 @supports (--custom:property) {
3356 [style*="--aspect-ratio"] {
3357 position: relative;
3359 [style*="--aspect-ratio"]::before {
3360 content: "";
3361 display: block;
3362 padding-bottom: calc(100% / (var(--aspect-ratio)));
3364 [style*="--aspect-ratio"] > * {
3365 position: absolute;
3366 top: 0;
3367 left: 0;
3368 height: 100%;
3372 /**********/
3373 /* TABLES */
3374 /**********/
3376 .body-text table {
3377 border-collapse: collapse;
3378 font-size: 0.875em;
3380 .body-text table th,
3381 .body-text table td {
3382 text-align: left;
3383 padding: 4px 6px;
3384 line-height: 1.3;
3386 .body-text table .numeric {
3387 text-align: right;
3388 font-family: Inconsolata, Menlo, monospace;
3390 .body-text table caption {
3391 margin: 0 0 0.25em 0;
3392 font-weight: bold;
3393 font-size: 1.125em;
3396 /********/
3397 /* MISC */
3398 /********/
3400 /*= Superscripts & subscripts =*/
3402 /* Make sure superscripts and subscripts do not affect line spacing. */
3403 sup, sub {
3404 vertical-align: baseline;
3405 position: relative;
3406 top: -0.5em;
3407 left: 0.05em;
3408 font-size: 0.8em;
3410 sub {
3411 top: 0.3em;
3414 /*= Code blocks & other "unstyled" text. =*/
3416 pre,
3417 code {
3418 font-family: Inconsolata, Menlo, monospace;
3420 pre {
3421 white-space: pre-wrap;
3423 .body-text pre {
3424 text-align: left;
3426 code {
3427 font-size: 0.95em;
3428 display: inline-block;
3429 padding: 0 4px 1px 5px;
3431 pre > code {
3432 display: block;
3433 border-radius: 0;
3434 padding: 3px 4px 5px 8px;
3435 tab-size: 4;
3438 /*= Fractions =*/
3440 .frac::after {
3441 content: "\200B";
3444 /*= Removing browser default styling of various elements =*/
3446 /* On various input elements such as text fields and buttons, remove "blue glow" focus outlines on Macs, dotted black outlines in Firefox, etc. */
3447 :focus {
3448 outline: none;
3451 /* Remove "embossed" appearance of horizontal rules. */
3452 hr {
3453 border: none;
3456 input,
3457 button,
3458 textarea {
3459 -webkit-appearance: none;
3460 -moz-appearance: none;
3461 appearance: none;
3464 input {
3465 font-family: inherit;
3466 font-size: inherit;
3467 font-weight: inherit;
3470 /*************/
3471 /* FOOTNOTES */
3472 /*************/
3474 ol {
3475 counter-reset: ordered-list;
3477 .footnote-definition {
3478 font-size: 0.9em;
3479 list-style-type: none;
3480 counter-increment: ordered-list;
3481 position: relative;
3483 .footnote-definition p {
3484 font-size: inherit !important;
3486 .footnote-definition::before {
3487 content: counter(ordered-list) ".";
3488 position: absolute;
3489 left: -2.5em;
3490 font-weight: bold;
3491 text-align: right;
3492 width: 2em;
3495 /*= LW Docs footnotes =*/
3497 .footnote-item {
3498 display: flex;
3501 .footnote-item > :not(.nothing) {
3502 margin: 0 0.2em;
3505 .footnote-item > :first-child {
3506 margin-left: -0.2em;
3507 margin-right: 0;
3510 .footnote-back-link a:not(.nothing) {
3511 font-size: 0;
3512 text-decoration: none;
3513 border: none;
3516 .footnote-back-link a:not(.nothing):hover {
3517 text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #00e;
3518 border: none;
3519 text-decoration: none;
3522 .footnote-back-link a::after {
3523 content: '\F106';
3524 font-family: Font Awesome;
3525 font-size: 1rem;
3526 padding: 0.2em;
3527 text-decoration: none;
3528 font-weight: bold;
3531 .footnote-content > :first-child {
3532 margin-top: 0;
3535 /*********/
3536 /* LISTS */
3537 /*********/
3539 li {
3540 margin-bottom: 0.5em;
3543 .body-text ol p,
3544 .body-text ul p {
3545 margin: 0.5em 0;
3548 .body-text ol {
3549 list-style: none;
3550 padding: 0;
3551 counter-reset: ol;
3553 .body-text ol > li {
3554 position: relative;
3555 counter-increment: ol;
3556 padding: 0 0 0 2.5em;
3557 margin: 0.25em 0 0 0;
3559 .body-text ol > li::before {
3560 content: counter(ol) ".";
3561 position: absolute;
3562 width: 2em;
3563 text-align: right;
3564 left: 0;
3566 .body-text ul {
3567 list-style: none;
3568 padding: 0;
3570 .body-text ul:not(.contents-list) > li:empty {
3571 padding-bottom: 1.25em;
3573 .body-text ul:not(.contents-list) > li {
3574 position: relative;
3575 padding: 0 0 0 1.75em;
3576 margin: 0.25em 0 0 0;
3578 .body-text ul:not(.contents-list) > li ul > li {
3579 padding: 0 0 0 2em;
3581 .body-text ul:not(.contents-list) > li::before {
3582 content: "•";
3583 position: absolute;
3584 width: 1.25em;
3585 text-align: right;
3586 left: 0;
3588 .body-text ul:not(.contents-list) > li ul > li::before {
3589 width: 1.5em;
3591 .body-text li > ul:first-child > li {
3592 padding-left: 0;
3594 .body-text li > ul:first-child > li::before {
3595 content: none;
3598 /**************/
3599 /* ERROR PAGE */
3600 /**************/
3602 .error-retry-form {
3603 margin: 0.5em 0;
3606 .error-retry-form input[type="submit"] {
3607 border: 1px solid #aaa;
3608 font-weight: bold;
3609 font-size: 1.125rem;
3610 padding: 0.5em 1.25em;
3613 /**************/
3614 /* ABOUT PAGE */
3615 /**************/
3617 #content.about-page .contents {
3618 margin-top: 0.25em;
3620 #content.about-page .accesskey-table {
3621 border-collapse: collapse;
3622 margin: auto;
3624 #content.about-page .accesskey-table th,
3625 #content.about-page .accesskey-table td {
3626 padding: 2px 6px;
3628 #content.about-page .accesskey-table td:first-child {
3629 padding-right: 1.5em;
3631 #content.about-page .accesskey-table td:last-child {
3632 text-align: center;
3633 font-family: Inconsolata, Menlo, monospace;
3635 #content.about-page h3:nth-of-type(n+2) {
3636 clear: both;
3639 /******************/
3640 /* IMAGES OVERLAY */
3641 /******************/
3643 #images-overlay + #content .post-body img {
3644 visibility: hidden;
3647 #images-overlay div {
3648 position: absolute;
3650 #images-overlay div::after {
3651 content: "Click to enlarge";
3652 display: block;
3653 position: absolute;
3654 margin: auto;
3655 left: 0;
3656 right: 0;
3657 bottom: 10px;
3658 padding: 6px 10px;
3659 font-size: 1.25rem;
3660 background-color: rgba(0,0,0,0.6);
3661 color: #fff;
3662 border-radius: 5px;
3663 opacity: 0.0;
3664 transition: opacity 0.15s ease;
3665 pointer-events: none;
3667 @supports (width: -moz-fit-content) {
3668 #images-overlay div::after {
3669 width: -moz-fit-content;
3672 @supports (width: fit-content) {
3673 #images-overlay div::after {
3674 width: fit-content;
3677 #images-overlay div:hover::after {
3678 opacity: 1.0;
3681 #images-overlay img {
3682 width: 100%;
3685 /***************/
3686 /* IMAGE FOCUS */
3687 /***************/
3689 /*=--------------=*/
3690 /*= Hover styles =*/
3691 /*=--------------=*/
3693 #content img:hover,
3694 #images-overlay img:hover {
3695 filter: drop-shadow(0 0 3px #777);
3696 cursor: zoom-in;
3698 #content img:active,
3699 #images-overlay img:active {
3700 transform: scale(0.975);
3703 /*=---------=*/
3704 /*= Overlay =*/
3705 /*=---------=*/
3707 #image-focus-overlay {
3708 position: fixed;
3709 top: 0;
3710 right: 0;
3711 bottom: 0;
3712 left: 0;
3713 z-index: 2;
3714 display: none;
3715 cursor: zoom-out;
3717 #image-focus-overlay::before {
3718 content: "";
3719 display: block;
3720 position: absolute;
3721 top: 0;
3722 right: 0;
3723 bottom: 0;
3724 left: 0;
3725 background-color: #000;
3726 opacity: 0.5;
3727 z-index: -1;
3729 #image-focus-overlay.engaged {
3730 display: initial;
3733 #image-focus-overlay img {
3734 margin: auto;
3735 position: absolute;
3736 left: 50%;
3737 top: 50%;
3738 transform: translateX(-50%) translateY(-50%);
3741 /*=-------------------=*/
3742 /*= Single-image mode =*/
3743 /*=-------------------=*/
3745 #image-focus-overlay:not(.slideshow) .image-number,
3746 #image-focus-overlay:not(.slideshow) .slideshow-buttons {
3747 visibility: hidden;
3750 /*=---------=*/
3751 /*= Caption =*/
3752 /*=---------=*/
3754 #image-focus-overlay .caption {
3755 position: absolute;
3756 bottom: 0.75em;
3757 background-color: rgba(0,0,0,0.7);
3758 left: 9em;
3759 right: 9em;
3760 margin: auto;
3761 max-width: calc(100% - 18em);
3762 text-align: center;
3763 font-size: 1.375em;
3764 border-radius: 8px;
3765 z-index: 1;
3766 transition:
3767 bottom 0.2s ease;
3769 @supports (width: -moz-fit-content) {
3770 #image-focus-overlay .caption {
3771 width: -moz-fit-content;
3774 @supports (width: fit-content) {
3775 #image-focus-overlay .caption {
3776 width: fit-content;
3779 #image-focus-overlay .caption.hidden {
3780 bottom: -5em;
3781 transition:
3782 bottom 0.5s ease;
3785 #image-focus-overlay .caption p {
3786 margin: 1em 1.25em;
3787 color: #fff;
3790 #image-focus-overlay .caption:not(:empty)::before {
3791 content: "";
3792 display: block;
3793 position: absolute;
3794 width: 100vw;
3795 height: calc(100% + 1.5em);
3796 z-index: -1;
3797 top: -0.75em;
3798 left: calc(-50vw + 50%);
3802 /*=--------------=*/
3803 /*= Help overlay =*/
3804 /*=--------------=*/
3806 #image-focus-overlay .help-overlay {
3807 position: absolute;
3808 display: flex;
3809 flex-flow: column;
3810 z-index: 2;
3811 font-size: 1.5rem;
3812 padding: 1em;
3813 border-radius: 10px;
3814 bottom: 1em;
3815 right: 1em;
3816 overflow: hidden;
3817 white-space: nowrap;
3818 color: transparent;
3819 cursor: default;
3820 visibility: hidden;
3821 transition:
3822 visibility 1s ease,
3823 color 1s ease,
3824 background-color 1s ease,
3825 bottom 0.3s ease;
3827 #image-focus-overlay .help-overlay:hover {
3828 max-width: 24em;
3829 max-height: 14em;
3830 background-color: rgba(0,0,0,0.85);
3831 color: #fff;
3832 visibility: visible;
3833 transition:
3834 visibility 0.2s ease 0.3s,
3835 color 0.2s ease 0.3s,
3836 background-color 0.2s ease 0.3s;
3839 #image-focus-overlay .help-overlay::after {
3840 content: "\F128";
3841 font-family: "Font Awesome", "Font Awesome 5 Free";
3842 font-weight: 900;
3843 font-size: 2rem;
3844 position: absolute;
3845 right: 0;
3846 bottom: 0;
3847 padding: 10px;
3848 color: #000;
3849 filter: drop-shadow(0 0 6px #fff);
3850 visibility: visible;
3851 opacity: 0.85;
3852 transition:
3853 visibility 1s ease;
3855 #image-focus-overlay .help-overlay:hover::after {
3856 visibility: hidden;
3857 transition:
3858 visibility 0.2s ease 0.3s;
3861 #image-focus-overlay .help-overlay p {
3862 margin: 0;
3863 text-indent: -2em;
3864 padding-left: 2em;
3865 max-width: 100%;
3866 overflow: hidden;
3868 #image-focus-overlay .help-overlay p + p {
3869 margin: 0.75em 0 0 0;
3871 #image-focus-overlay .help-overlay.hidden {
3872 bottom: -2em;
3875 /*=--------------=*/
3876 /*= Slide number =*/
3877 /*=--------------=*/
3879 #image-focus-overlay .image-number {
3880 position: absolute;
3881 z-index: 2;
3882 font-size: 1.75rem;
3883 left: 1em;
3884 bottom: 1em;
3885 font-weight: 600;
3886 text-shadow:
3887 0 0 3px #fff,
3888 0 0 5px #fff,
3889 0 0 8px #fff,
3890 0 0 13px #fff;
3891 width: 1.5em;
3892 text-align: right;
3893 white-space: nowrap;
3894 transition: bottom 0.3s ease;
3896 #image-focus-overlay .image-number::before {
3897 content: "#";
3898 opacity: 0.3;
3900 #image-focus-overlay .image-number::after {
3901 content: " of " attr(data-number-of-images);
3902 opacity: 0.3;
3904 #image-focus-overlay .image-number:hover::before,
3905 #image-focus-overlay .image-number:hover::after {
3906 opacity: 1.0;
3908 #image-focus-overlay .image-number.hidden {
3909 bottom: -1.25em;
3912 /*=-------------------=*/
3913 /*= Slideshow buttons =*/
3914 /*=-------------------=*/
3916 #image-focus-overlay .slideshow-buttons {
3917 position: absolute;
3918 top: 0;
3919 left: 0;
3920 width: 100%;
3921 height: 100%;
3922 z-index: 1;
3923 display: flex;
3924 justify-content: space-between;
3925 pointer-events: none;
3927 #image-focus-overlay .slideshow-buttons button {
3928 font-family: "Font Awesome", "Font Awesome 5 Free";
3929 font-weight: 900;
3930 font-size: 3rem;
3931 padding: 0.5em;
3932 color: #ddd;
3933 position: relative;
3934 left: 0;
3935 transition:
3936 left 0.3s ease;
3937 pointer-events: auto;
3939 #image-focus-overlay .slideshow-buttons button::selection {
3940 background-color: transparent;
3942 @media only screen and (hover: hover) {
3943 #image-focus-overlay .slideshow-buttons button:hover {
3944 background-color: rgba(0,0,0,0.1);
3945 color: #777;
3948 #image-focus-overlay .slideshow-buttons button:active {
3949 transform: none;
3950 color: #888;
3952 #image-focus-overlay .slideshow-buttons button:disabled {
3953 text-shadow: none;
3954 background-color: transparent;
3955 color: #ddd;
3956 cursor: default;
3957 opacity: 0.4;
3959 #image-focus-overlay .slideshow-button.previous.hidden {
3960 left: -1.75em;
3962 #image-focus-overlay .slideshow-button.next.hidden {
3963 left: 1.75em;
3966 /*=-----------------=*/
3967 /*= Background blur =*/
3968 /*=-----------------=*/
3970 .blurred {
3971 filter: blur(3px);
3974 /**************************/
3975 /* QUALIFIED HYPERLINKING */
3976 /**************************/
3978 #content.no-nav-bars {
3979 margin: 8px auto;
3981 #content.no-nav-bars + #ui-elements-container > * {
3982 padding-top: 8px;
3985 #aux-about-link {
3986 position: fixed;
3987 top: 40px;
3988 left: calc((100% - 900px) / 2 - 69px);
3989 width: 1.5em;
3990 height: 1.5em;
3991 text-align: center;
3992 display: table;
3994 #aux-about-link a {
3995 display: table-cell;
3996 width: 100%;
3997 vertical-align: middle;
3998 font-family: "Font Awesome", "Font Awesome 5 Free";
3999 font-weight: 900;
4000 font-size: 1.25rem;
4001 opacity: 0.4;
4002 z-index: 1;
4005 .qualified-linking {
4006 margin: 0;
4007 position: relative;
4009 .qualified-linking input[type='checkbox'] {
4010 visibility: hidden;
4011 width: 0;
4012 height: 0;
4013 margin: 0;
4015 .qualified-linking label {
4016 font-family: "Font Awesome", "Font Awesome 5 Free";
4017 font-weight: 900;
4018 font-size: 1rem;
4019 padding: 0 0.5em;
4020 display: inline-block;
4021 margin-left: 0.25em;
4023 .qualified-linking label:hover {
4024 cursor: pointer;
4026 .qualified-linking label:active span {
4027 display: inline-block;
4028 transform: scale(0.9);
4030 .qualified-linking label::selection {
4031 background-color: transparent;
4034 .qualified-linking label::after {
4035 content: "";
4036 width: 100vw;
4037 height: 0;
4038 left: 0;
4039 top: 0;
4040 position: fixed;
4041 z-index: 1;
4042 cursor: default;
4044 .qualified-linking input[type='checkbox']:checked + label::after {
4045 height: 100vh;
4048 .qualified-linking-toolbar {
4049 position: absolute;
4050 right: 0.25em;
4051 top: 110%;
4052 z-index: 1;
4054 .qualified-linking input[type='checkbox'] ~ .qualified-linking-toolbar {
4055 display: none;
4057 .qualified-linking input[type='checkbox']:checked ~ .qualified-linking-toolbar {
4058 display: block;
4060 #qualified-linking-toolbar-toggle-checkbox-bottom ~ .qualified-linking-toolbar {
4061 top: unset;
4062 bottom: 125%;
4065 .qualified-linking-toolbar a {
4066 display: block;
4067 padding: 0 6px;
4068 margin: 4px;
4070 .qualified-linking-toolbar a::selection {
4071 background-color: transparent;
4074 /*****************/
4075 /* HOVER PREVIEW */
4076 /*****************/
4078 #preview-popup-toggle {
4079 position: absolute;
4080 right: -67px;
4081 bottom: 285px;
4082 cursor: pointer;
4083 color: var(--GW-toggle-widget-color, #888);
4085 #preview-popup-toggle:hover {
4086 color: var(--GW-toggle-widget-hover-color, #444);
4089 #content.preview:not(not) {
4090 padding: 0;
4092 #content.preview > .comment-thread {
4093 margin: 2px;
4095 #content.preview.individual-thread-page > .comment-thread > .comment-item {
4096 border: none;
4098 #content.preview.user-page .page-main-heading, #content.preview.user-page .user-stats {
4099 padding: 0 8px;
4101 #content.preview.user-page .page-main-heading {
4102 margin-left: 8px;
4104 #content.preview.not(not) .body-text {
4105 margin-left: 8px;
4106 margin-right: 8px;
4108 #content.preview.user-page .user-stats {
4109 margin-right: 32px;
4111 #content.preview.user-page .page-toolbar, #content.preview.user-page nav {
4112 display: none;
4114 #content.preview button.vote {
4115 display: none;
4117 #content.preview > h1.listing {
4118 max-height: unset;
4120 #content.preview.user-page > .comment-thread {
4121 margin: 0.5em 0;
4123 #content.preview > .post {
4124 margin: 0 18px;
4126 #content.preview .post-title {
4127 margin-top: 0.5em;
4129 #content.preview .post-meta {
4130 line-height: 1.0;
4132 #content.preview .body-text {
4133 font-size: 1em;
4135 #content.preview nav.contents,
4136 #content.preview .lw2-link {
4137 display: none;
4140 .preview-popup {
4141 position: fixed;
4142 transform-origin: top;
4143 top: 10%;
4144 right: 10%;
4145 max-width: 700px;
4146 z-index: 10001;
4147 background-color: #eee;
4148 border: 1px solid #ccc;
4149 box-shadow: 2px 6px 20px -4px #000;
4150 transition: height 0.2s ease, top 0.2s ease;
4152 .popup-hide-button {
4153 position: fixed;
4154 top: 4px;
4155 right: 4px;
4156 color: #000;
4157 background-color: #fff;
4158 width: 28px;
4159 height: 28px;
4160 display: flex;
4161 font-family: "Font Awesome";
4162 font-size: 14px;
4163 line-height: 1;
4164 border: 1px solid #bbb;
4165 border-radius: 28px;
4166 align-items: center;
4167 justify-content: center;
4168 //padding-bottom: 2px;
4169 padding-left: 1.5px;
4170 font-family: "Font Awesome", "Font Awesome 5 Free";
4171 cursor: pointer;
4173 .popup-hide-button:hover::before {
4174 content: "Turn off preview popups";
4175 display: block;
4176 position: absolute;
4177 width: max-content;
4178 right: 32px;
4179 color #000;
4180 background-color: #fff;
4181 border: 1px solid #eee;
4182 border-radius: 2px;
4183 padding: 4px;
4186 /********/
4187 /* MATH */
4188 /********/
4190 .mathjax-block-container {
4191 display: block;
4192 overflow-y: hidden;
4193 border-radius: 6px;
4194 margin: 1em 0 1.5em 0;
4196 .mathjax-inline-container {
4197 max-width: 100%;
4198 overflow-x: auto;
4199 overflow-y: hidden;
4200 position: relative;
4201 padding: 0 1px;
4203 #content .mathjax-inline-container,
4204 #content .mathjax-inline-container .mjpage,
4205 #content .mathjax-inline-container .mjx-chtml,
4206 #content .mathjax-inline-container .mjx-math,
4207 #content .mathjax-inline-container .mjx-mrow {
4208 display: inline;
4209 white-space: normal;
4211 .post .mathjax-inline-container {
4212 line-height: 1;
4214 .comment .mathjax-inline-container {
4215 line-height: 1;
4217 .mathjax-inline-container .mjx-chtml {
4218 padding: 0;
4221 /************/
4222 /* SPOILERS */
4223 /************/
4225 .spoiler {
4226 color: #000;
4227 background-color: currentColor;
4228 transition: none;
4229 text-shadow: none;
4230 margin: 1em 0;
4231 box-shadow: 0 0 0 1px currentColor inset;
4232 overflow: auto;
4234 .spoiler:not(:last-child) {
4235 margin-bottom: 0;
4237 #content .spoiler * {
4238 color: inherit;
4239 border: none;
4241 .spoiler:hover {
4242 color: unset;
4243 background-color: unset;
4244 text-shadow: unset;
4245 transition:
4246 color 0.1s ease-out 0.1s,
4247 background-color 0.1s ease-out 0.1s,
4248 text-shadow 0.1s ease-out 0.1s;
4250 .spoiler::selection,
4251 .spoiler ::selection {
4252 color: #fff;
4253 background-color: #000;
4255 .spoiler:not(:hover)::selection,
4256 .spoiler:not(:hover) ::selection {
4257 background-color: transparent;
4260 /*= Fix for LessWrong being weird =*/
4262 .spoiler > p {
4263 padding: 0 7px;
4265 .spoiler > p:first-child {
4266 margin-top: 0.25em;
4268 .spoiler > p:last-child {
4269 margin-bottom: 0;
4270 padding-bottom: 0.25em;
4272 .spoiler > p:hover ~ p {
4273 background-color: currentColor;
4275 .spoiler > p + p {
4276 margin-top: -1em;
4278 .spoiler > p:not(:first-child) {
4279 padding-top: 0.5em;
4281 .spoiler > p:not(:last-child) {
4282 padding-bottom: 0.5em;
4285 .spoiler:not(:hover) pre,
4286 .spoiler:not(:hover) code {
4287 background-color: inherit;
4288 box-shadow: none;
4290 #content .spoiler pre {
4291 border-color: currentColor;
4292 border-style: solid;
4293 border-width: 0 1px;
4294 border-radius: 0;
4297 /*******************/
4298 /* PAGE LIST INDEX */
4299 /*******************/
4301 .page-list-index {
4302 margin: 1em 30px;
4303 line-height: 1.2;
4306 .page-list-index > p {
4307 font-weight: bold;
4308 font-size: 1.2em;
4311 .page-list-index > ul * {
4312 margin: 0;
4315 .page-list-index ul {
4316 padding-left: 1.5em;
4319 .page-list-index li {
4320 margin-top: 0.67em;
4323 .page-list-index li > a {
4324 display: block;
4325 font-size: 1.1em;
4326 font-weight: bold;
4327 margin: 0.33em 0;
4330 .page-list-index li > a:last-child {
4331 margin-bottom: 1em;
4335 /*****************/
4336 /* USER MENTIONS */
4337 /*****************/
4339 .textarea-container .autocomplete-container {
4340 position: absolute;
4341 overflow-y: auto;
4342 font-size: 1.125rem;
4343 cursor: default;
4344 backdrop-filter: blur(2px);
4346 .textarea-container .autocomplete-container:empty {
4347 display: none;
4350 .textarea-container .autocomplete-container.inside {
4351 max-height: calc(100% - 36px);
4352 top: 32px;
4354 .textarea-container .autocomplete-container.outside {
4355 max-height: calc(100% - 28px);
4356 top: 28px;
4357 z-index: 10001;
4360 .textarea-container .autocomplete-container.inside.right {
4361 right: 18px;
4363 .textarea-container .autocomplete-container.inside.left {
4364 left: 18px;
4366 .textarea-container .autocomplete-container.outside.right {
4367 left: calc(100% + 3px);
4369 .textarea-container .autocomplete-container.outside.left {
4370 right: calc(100% + 3px);
4373 head.content-width-normal + body .textarea-container .autocomplete-container.outside {
4374 max-width: calc((100vw - (900px - 40px * 2)) / 2);
4376 head.content-width-wide + body .textarea-container .autocomplete-container.outside {
4377 max-width: calc((100vw - (1150px - 40px * 2)) / 2);
4379 head.content-width-fluid + body .textarea-container .autocomplete-container.outside {
4380 max-width: calc((300px + 40px * 2) / 2);
4383 .textarea-container .autocomplete-container div {
4384 padding: 2px 8px 0 8px;
4385 white-space: nowrap;
4386 overflow: hidden;
4387 text-overflow: ellipsis;
4388 display: flex;
4389 justify-content: flex-end;
4392 .textarea-container .autocomplete-container div span.name {
4393 flex: 1 0 auto;
4395 .textarea-container .autocomplete-container div span.age,
4396 .textarea-container .autocomplete-container div span.karma {
4397 font-size: 0.9em;
4398 text-align: right;
4400 .textarea-container .autocomplete-container div span.age {
4401 width: 3em;
4403 .textarea-container .autocomplete-container div span.karma {
4404 width: 6em;
4408 /*******************/
4409 /* ALIGNMENT FORUM */
4410 /*******************/
4412 #content.alignment-forum-index-page::after {
4413 content: "Alignment Forum";
4414 font-size: 1.5rem;
4415 margin: 0.375em 0 0 -0.375em;
4416 order: -1;
4419 /**********************/
4420 /* FOR NARROW SCREENS */
4421 /**********************/
4423 @media only screen and (max-width: 1440px) {
4424 #hns-date-picker {
4425 right: -81px;
4426 padding: 8px 10px 10px 10px;
4427 bottom: 62px;
4428 display: none;
4430 #hns-date-picker::before {
4431 content: "";
4432 position: absolute;
4433 display: block;
4434 z-index: -1;
4435 height: calc(100% + 2px);
4436 top: -1px;
4437 left: -1px;
4438 width: 50%;
4441 @media only screen and (max-width: 1160px) {
4442 #new-comment-nav-ui {
4443 bottom: 180px;
4444 right: -68px;
4446 #hns-date-picker {
4447 bottom: 200px;
4448 right: -36px;
4450 #hns-date-picker::before {
4451 width: calc(100% - 35px);
4453 #theme-selector button::before {
4454 right: unset;
4455 left: 100%;
4457 #theme-selector:hover::after {
4458 content: "";
4459 display: block;
4460 position: absolute;
4461 width: calc(6em - 7px);
4462 height: calc(100% + 2px);
4463 top: 0;
4464 left: calc(100% + 1px);
4466 #anti-kibitzer-toggle {
4467 bottom: 330px;
4470 @media only screen and (max-width: 1080px) {
4471 #width-selector {
4472 right: -30px;
4474 #width-selector button {
4475 display: block;
4477 #text-size-adjustment-ui {
4478 top: 90px;
4479 right: -30px;
4481 #text-size-adjustment-ui button {
4482 display: block;
4483 position: relative;
4485 #text-size-adjustment-ui button.increase {
4486 bottom: 48px;
4488 #text-size-adjustment-ui button.decrease {
4489 top: 50px;
4491 #theme-selector {
4492 top: 46px;
4493 left: -44px;
4495 #theme-tweaker-toggle {
4496 left: -44px;
4497 top: 2px;
4499 #theme-tweaker-toggle button {
4500 height: 2em;
4501 width: 2em;
4502 padding: 7px;
4504 #quick-nav-ui {
4505 right: -54px;
4507 #new-comment-nav-ui {
4508 right: -55px;
4510 #hns-date-picker {
4511 right: -23px;
4513 #hns-date-picker::before {
4514 width: calc(100% - 22px);
4516 #anti-kibitzer-toggle {
4517 right: -54px;
4520 @media only screen and (max-width: 1040px) {
4521 #quick-nav-ui {
4522 right: -49px;
4524 #new-comment-nav-ui {
4525 right: -50px;
4527 #hns-date-picker {
4528 right: -18px;
4530 #hns-date-picker::before {
4531 width: calc(100% - 17px);
4533 #anti-kibitzer-toggle {
4534 right: -50px;
4537 @media only screen and (max-width: 1020px) {
4538 #quick-nav-ui {
4539 right: -20px;
4541 #new-comment-nav-ui {
4542 right: -21px;
4544 #new-comment-nav-ui .new-comments-count::before {
4545 content: "";
4546 position: absolute;
4547 width: 100%;
4548 height: calc(100% + 45px);
4549 z-index: -1;
4550 left: 0;
4551 top: -22px;
4553 #hns-date-picker {
4554 right: 19px;
4556 #hns-date-picker::before {
4557 width: 100%;
4559 #anti-kibitzer-toggle {
4560 right: -20px;
4563 @media only screen and (max-width: 1000px) {
4564 #theme-selector {
4565 left: -17px;
4566 top: 120px;
4567 padding: 3px 0;
4568 max-width: 32px;
4570 #theme-selector button {
4571 margin: 1px 4px;
4573 #text-size-adjustment-ui {
4574 top: 100px;
4575 right: -12px;
4577 @media not screen and (hover: none) {
4578 #quick-nav-ui,
4579 #new-comment-nav-ui,
4580 #new-comment-nav-ui + #hns-date-picker,
4581 #anti-kibitzer-toggle {
4582 opacity: 0.4;
4584 #quick-nav-ui:hover,
4585 #new-comment-nav-ui:hover,
4586 #new-comment-nav-ui + #hns-date-picker:hover,
4587 #new-comment-nav-ui + #hns-date-picker:focus-within,
4588 #new-comment-nav-ui:hover + #hns-date-picker,
4589 #anti-kibitzer-toggle:hover {
4590 opacity: 1.0;
4593 #theme-tweaker-toggle {
4594 top: 70px;
4595 left: -21px;
4599 /**************/
4600 /* PRINT VIEW */
4601 /**************/
4603 @media only print {
4604 .nav-bar {
4605 visibility: hidden;
4606 max-height: 0;
4607 overflow: hidden;
4609 #ui-elements-container {
4610 display: none;
4612 #images-overlay {
4613 display: none;
4615 #images-overlay + #content .post-body img {
4616 visibility: visible;
4618 .comment-controls {
4619 display: none;
4621 #comments-sort-mode-selector {
4622 display: none;
4624 .comment-minimize-button {
4625 display: none;
4627 .post-meta .qualified-linking,
4628 .post-meta .lw2-link {
4629 display: none;
4631 .comment-meta .permalink,
4632 .comment-meta .lw2-link,
4633 .comment-meta .comment-parent-link {
4634 display: none;
4636 .new-comment::before {
4637 display: none;
4639 #content::before {
4640 box-shadow: none;
4644 /*****************/
4645 /* MOBILE LAYOUT */
4646 /*****************/
4648 /* Hide the mobile elements on desktop screens: */
4650 @media only screen and (max-width: 1160px) {
4651 #post-nav-ui-toggle,
4652 #appearance-adjust-ui-toggle {
4653 display: none;
4657 @media only screen and (max-width: 1160px) {
4659 /*====================*/
4660 /* MOBILE UI ELEMENTS */
4661 /*====================*/
4663 #ui-elements-container {
4664 height: unset !important;
4665 position: unset;
4667 #ui-elements-container > * {
4668 position: fixed;
4669 visibility: hidden;
4670 opacity: 1.0;
4671 z-index: 10000;
4674 #ui-elements-container > div[id$='-ui-toggle'] {
4675 visibility: visible;
4676 display: inline-block;
4677 border-radius: 50%;
4678 z-index: 10000;
4680 #ui-elements-container > div[id$='-ui-toggle'] button,
4681 #theme-selector .theme-selector-close-button {
4682 font-family: Font Awesome;
4683 font-weight: 900;
4684 font-size: 32px;
4685 padding: 10px;
4686 opacity: 0.8;
4687 -webkit-tap-highlight-color: transparent;
4688 transition: transform 0.2s ease;
4690 #ui-elements-container > div[id$='-ui-toggle'] button::selection,
4691 #theme-selector .theme-selector-close-button::selection {
4692 background-color: transparent;
4694 #ui-elements-container > div[id$='-ui-toggle'] button::-moz-focus-inner,
4695 #theme-selector .theme-selector-close-button::-moz-focus-inner {
4696 border: none;
4698 #ui-elements-container > div[id$='-ui-toggle'] button.engaged {
4699 transform: rotate(-90deg);
4700 opacity: 1.0;
4703 #appearance-adjust-ui-toggle {
4704 bottom: 10px;
4705 left: 10px;
4708 #post-nav-ui-toggle {
4709 bottom: 10px;
4710 right: 10px;
4713 #theme-selector.engaged,
4714 #quick-nav-ui.engaged,
4715 #new-comment-nav-ui.engaged,
4716 #hns-date-picker.engaged {
4717 visibility: visible;
4720 #image-focus-overlay.engaged {
4721 visibility: visible;
4723 #image-focus-overlay .help-overlay {
4724 display: none;
4727 /*=========*/
4728 /* GENERAL */
4729 /*=========*/
4731 @media only screen and (max-width: 900px) {
4732 #content,
4733 #images-overlay,
4734 #ui-elements-container {
4735 min-width: unset;
4736 width: unset;
4738 #content {
4739 padding: 0 4px;
4743 /*================*/
4744 /* THEME SELECTOR */
4745 /*================*/
4747 #theme-selector {
4748 display: flex;
4749 flex-flow: column;
4750 background-color: #fff;
4751 width: calc(100vw - 20px);
4752 max-width: 360px;
4753 padding: 0 0 3px 0;
4754 overflow: hidden;
4755 max-height: 0;
4756 transition:
4757 top 0.2s ease,
4758 max-height 0.2s ease,
4759 visibility 0.2s ease;
4760 top: calc(100% + 10px);
4761 left: 0;
4762 right: 0;
4763 margin: auto;
4765 #theme-selector.engaged {
4766 max-height: 1000px;
4767 top: 10px;
4768 z-index: 10001;
4770 #theme-selector::before {
4771 content: "Select theme";
4772 white-space: nowrap;
4773 display: block;
4774 font-weight: 600;
4775 font-size: 2rem;
4776 margin: 0.375em 1em 0.5em 1em;
4777 text-align: center;
4779 #theme-selector button {
4780 width: calc(100% - 0.5em);
4781 background-repeat: no-repeat;
4782 padding: 1em 0.875em;
4783 margin: 1px 4px;
4784 line-height: 1;
4785 height: unset;
4786 position: relative;
4788 #theme-selector button::after {
4789 content: attr(data-theme-description);
4790 color: #000;
4791 white-space: nowrap;
4792 position: absolute;
4793 text-align: left;
4794 left: 2.5em;
4795 top: 1em;
4797 @media only screen and (max-height: 675px) {
4798 #theme-selector button {
4799 padding: 0.875em;
4801 #theme-selector button::after {
4802 top: 0.875em;
4805 #theme-selector .theme-selector-close-button {
4806 position: absolute;
4807 width: unset;
4808 background-color: transparent;
4809 top: 0;
4810 right: -3px;
4812 #theme-selector .theme-selector-close-button,
4813 #theme-selector .theme-selector-close-button:focus,
4814 #theme-selector .theme-selector-close-button:active,
4815 #theme-selector .theme-selector-close-button:hover {
4816 box-shadow: none;
4819 /*===============*/
4820 /* THEME TWEAKER */
4821 /*===============*/
4823 #theme-selector {
4824 padding: 0 0 64px 0;
4826 #theme-selector ~ #theme-tweaker-toggle {
4827 top: 100%;
4829 #theme-selector ~ #theme-tweaker-toggle::after {
4830 content: "Open theme tweaker";
4831 position: absolute;
4832 font-size: 0.625em;
4833 white-space: nowrap;
4834 left: -50%;
4835 top: 100%;
4837 #theme-selector.engaged ~ #theme-tweaker-toggle {
4838 visibility: visible;
4839 top: 530px;
4840 left: 0;
4841 right: 0;
4842 margin: auto;
4843 z-index: 11111;
4844 transition:
4845 top 0.2s ease,
4846 visibility 0.2s ease;
4848 @media only screen and (max-height: 675px) {
4849 #theme-selector.engaged ~ #theme-tweaker-toggle {
4850 top: 492px;
4853 @supports (width: -moz-fit-content) {
4854 #theme-selector.engaged ~ #theme-tweaker-toggle {
4855 width: -moz-fit-content;
4858 @supports (width: fit-content) {
4859 #theme-selector.engaged ~ #theme-tweaker-toggle {
4860 width: fit-content;
4863 #theme-selector.engaged ~ #theme-tweaker-toggle button {
4864 opacity: 1.0;
4867 #theme-tweaker-ui {
4868 visibility: visible;
4871 /*======================*/
4872 /* ANTI-KIBITZER TOGGLE */
4873 /*======================*/
4875 #theme-selector ~ #anti-kibitzer-toggle {
4876 top: 100%;
4877 bottom: unset;
4878 left: 0;
4879 right: 0;
4880 margin: auto;
4881 box-shadow: none;
4882 width: calc(100vw - 44px);
4883 max-width: 330px;
4884 text-align: right;
4885 pointer-events: none;
4887 #theme-selector.engaged ~ #anti-kibitzer-toggle {
4888 visibility: visible;
4889 z-index: 11110;
4890 top: 530px;
4891 transition:
4892 top 0.2s ease,
4893 visibility 0.2s ease;
4895 @media only screen and (max-height: 675px) {
4896 #theme-selector.engaged ~ #anti-kibitzer-toggle {
4897 top: 492px;
4900 #theme-selector.engaged ~ #anti-kibitzer-toggle button {
4901 pointer-events: auto;
4902 display: inline-block;
4905 /*=================*/
4906 /* QUICKNAV WIDGET */
4907 /*=================*/
4909 #quick-nav-ui {
4910 max-width: 0px;
4911 transition:
4912 max-width 0.2s ease,
4913 visibility 0.2s ease;
4914 display: flex;
4915 right: 72px;
4916 bottom: 14px;
4918 #quick-nav-ui.engaged {
4919 max-width: 1000px;
4921 #quick-nav-ui a {
4922 position: relative;
4923 margin: 2px;
4925 #quick-nav-ui a + a {
4926 margin-left: 5px;
4928 #quick-nav-ui a::after {
4929 position: absolute;
4930 top: calc(100% + 2px);
4931 font-size: 0.375rem;
4932 left: 0;
4933 right: 0;
4934 margin: auto;
4935 line-height: 1;
4936 padding: 2px;
4937 text-transform: uppercase;
4938 z-index: -1;
4940 @supports (width: -moz-fit-content) {
4941 #quick-nav-ui a::after {
4942 width: -moz-fit-content;
4945 @supports (width: fit-content) {
4946 #quick-nav-ui a::after {
4947 width: fit-content;
4950 #quick-nav-ui a[href='#top']::after {
4951 content: "Top";
4952 left: -1px;
4954 #quick-nav-ui a[href='#comments']::after {
4955 content: "Comments";
4957 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui a[href='#comments'] {
4958 visibility: hidden;
4959 transition: visibility 0.2s ease;
4961 #content.post-page:not(.individual-thread-page) ~ #ui-elements-container #quick-nav-ui.engaged a[href='#comments'] {
4962 visibility: visible;
4964 #quick-nav-ui a[href='#bottom-bar']::after {
4965 content: "Bottom";
4968 /*======================*/
4969 /* NEW COMMENT QUICKNAV */
4970 /*======================*/
4972 #new-comment-nav-ui {
4973 max-width: 0px;
4974 max-height: 0px;
4975 transition:
4976 max-width 0.2s ease,
4977 max-height 0.2s ease,
4978 visibility 0.2s ease;
4979 display: flex;
4980 right: 78px;
4981 bottom: 70px;
4983 #new-comment-nav-ui::before {
4984 content: "New Comments";
4985 position: absolute;
4986 bottom: 100%;
4987 font-size: 0.5625rem;
4988 left: 0;
4989 right: 0;
4990 margin: auto;
4991 padding: 2px 3px;
4992 text-transform: uppercase;
4993 z-index: -1;
4995 @supports (width: -moz-fit-content) {
4996 #new-comment-nav-ui::before {
4997 width: -moz-fit-content;
5000 @supports (width: fit-content) {
5001 #new-comment-nav-ui::before {
5002 width: fit-content;
5005 #new-comment-nav-ui.engaged {
5006 max-width: 1000px;
5007 max-height: 1000px;
5009 #new-comment-nav-ui .new-comment-sequential-nav-button {
5010 top: unset;
5011 bottom: unset;
5012 padding: 2px 7px;
5014 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
5015 padding: 2px 7px 3px 7px;
5017 #new-comment-nav-ui .new-comments-count {
5018 padding: 4px 0 5px 0;
5020 #new-comment-nav-ui .new-comments-count::before {
5021 display: none;
5023 #new-comment-nav-ui button::after {
5024 position: absolute;
5025 font-size: 0.375rem;
5026 left: 0;
5027 right: 0;
5028 margin: auto;
5029 line-height: 1;
5030 text-transform: uppercase;
5031 pointer-events: none;
5033 #new-comment-nav-ui button.new-comment-previous::after {
5034 content: "Previous";
5035 bottom: 5px;
5037 #new-comment-nav-ui button.new-comment-next::after {
5038 content: "Next";
5039 top: 7px;
5042 /*=================*/
5043 /* HNS DATE PICKER */
5044 /*=================*/
5046 #hns-date-picker {
5047 max-height: 0px;
5048 bottom: 132px;
5049 right: 62px;
5050 transition:
5051 max-height 0.2s ease,
5052 visibility 0.2s ease;
5054 #hns-date-picker.engaged {
5055 max-height: 1000px;
5057 #hns-date-picker::before {
5058 width: calc(100% + 2px);
5059 border-width: 1px !important;
5062 /*=========*/
5063 /* NAV BAR */
5064 /*=========*/
5066 #bottom-bar {
5067 margin-left: auto;
5068 margin-right: auto;
5069 width: calc(100% - 9rem + 8px);
5070 background: rgba(255,255,255,0.85);
5071 backdrop-filter: blur(1px);
5073 #content.index-page #bottom-bar {
5074 z-index: 10001;
5076 #bottom-bar .nav-item {
5077 box-shadow: none;
5078 position: relative;
5080 #bottom-bar .nav-inner {
5081 font-size: 2rem;
5082 padding: 1rem 0 1.25rem 0;
5083 visibility: hidden;
5084 position: static;
5085 width: 0;
5087 #content #bottom-bar .nav-item .nav-inner::before {
5088 margin: 0;
5089 visibility: visible;
5090 position: absolute;
5091 width: 100%;
5092 height: 100%;
5093 left: 0;
5094 top: 0;
5095 padding: 1rem 0;
5097 #bottom-bar .nav-inner::after {
5098 display: block;
5099 visibility: visible;
5100 text-transform: uppercase;
5101 color: unset;
5102 font-size: 0.75rem;
5103 top: unset;
5104 left: 0;
5105 bottom: 1rem;
5106 width: 100%;
5108 #bottom-bar #nav-item-first .nav-inner::after {
5109 content: "First Page";
5111 #bottom-bar #nav-item-prev .nav-inner::after {
5112 content: "Prev. Page";
5114 #bottom-bar #nav-item-top .nav-inner::after {
5115 content: "Top";
5117 #bottom-bar #nav-item-next .nav-inner::after {
5118 content: "Next Page";
5120 #bottom-bar #nav-item-last .nav-inner::after {
5121 content: "Last Page";
5124 @media only screen and (max-width: 900px) {
5125 .nav-bar-top {
5126 font-size: 0.75rem;
5128 .nav-bar {
5129 width: calc(100% + 8px);
5130 margin: 0 -4px;
5132 .nav-bar .nav-inner::after {
5133 display: none;
5136 #primary-bar .nav-item {
5137 flex: 1 1 100%;
5139 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) {
5140 flex: 1 1 60px;
5142 .nav-bar-top:not(#anything) .nav-inner {
5143 text-transform: uppercase;
5144 padding: 6px;
5146 .nav-bar-top .nav-inner::before {
5147 display: block;
5148 font-family: "Font Awesome";
5149 font-size: 2em;
5150 font-weight: 900;
5153 #nav-item-home .nav-inner::before {
5154 content: "\F015";
5156 #nav-item-featured .nav-inner::before {
5157 content: "\F005";
5159 #nav-item-all .nav-inner::before {
5160 content: "\F069";
5162 #nav-item-meta .nav-inner::before {
5163 content: "\F077";
5165 #nav-item-tags .nav-inner::before {
5166 content: "\F02C";
5168 #nav-item-recent-comments > * > span {
5169 display: none;
5171 #nav-item-recent-comments .nav-inner::before,
5172 #nav-item-alignment-forum-comments .nav-inner::before {
5173 content: "\F036";
5175 #nav-item-alignment-forum .nav-inner::before {
5176 content: "AF";
5177 font-family: Concourse, 'Changa One';
5179 #nav-item-questions .nav-inner::before {
5180 content: "?";
5181 font-family: Concourse, 'Changa One';
5183 #nav-item-events .nav-inner::before {
5184 content: "\F5A0";
5186 #nav-item-shortform .nav-inner::before {
5187 content: "\F2F2";
5189 #nav-item-archive .nav-inner::before {
5190 content: "\F187";
5192 #nav-item-about .nav-inner::before {
5193 content: "\F129";
5195 #nav-item-search {
5196 font-size: 2em;
5197 padding: 10px;
5199 #nav-item-search .nav-inner::before {
5200 content: none;
5202 #nav-item-search .nav-inner {
5203 height: 100%;
5204 display: flex;
5206 #nav-item-search input {
5207 width: 100%;
5208 height: 100%;
5210 #nav-item-search button {
5211 height: 100%;
5212 padding: 5px 5px 5px 10px;
5213 width: 40px;
5214 overflow: visible;
5215 visibility: hidden;
5217 #nav-item-search button::before {
5218 content: "\F002";
5219 font-family: Font Awesome;
5220 font-weight: 900;
5221 visibility: visible;
5223 #nav-item-login {
5224 padding: 0;
5226 #nav-item-login .nav-inner::before {
5227 content: "\F007";
5230 @media only screen and (max-width: 520px) {
5231 .nav-bar-top {
5232 font-size: 0.5rem;
5235 #nav-item-search,
5236 #nav-item-search .nav-inner {
5237 padding: 0;
5239 #nav-item-search button {
5240 width: 31px;
5243 #bottom-bar #nav-item-first .nav-inner::after {
5244 content: "First";
5246 #bottom-bar #nav-item-prev .nav-inner::after {
5247 content: "Prev";
5249 #bottom-bar #nav-item-next .nav-inner::after {
5250 content: "Next";
5252 #bottom-bar #nav-item-last .nav-inner::after {
5253 content: "Last";
5257 /*=================*/
5258 /* INBOX INDICATOR */
5259 /*=================*/
5261 @media only screen and (max-width: 900px) {
5262 #inbox-indicator {
5263 width: 100%;
5264 top: 0;
5265 pointer-events: none;
5267 #inbox-indicator::before {
5268 width: 100%;
5269 font-size: 1rem;
5270 text-align: right;
5271 padding: 1px 6px;
5273 #inbox-indicator.new-messages {
5274 pointer-events: auto;
5276 #inbox-indicator.new-messages::before {
5277 box-shadow: 0 0 8px 1px #f00 inset;
5280 @media only screen and (max-width: 520px) {
5281 #inbox-indicator::before {
5282 font-size: 0.75rem;
5283 padding: 2px 5px;
5286 @media only screen and (max-width: 374px) {
5287 #inbox-indicator::before {
5288 font-size: 0.625rem;
5292 /*===================*/
5293 /* TOP PAGINATION UI */
5294 /*===================*/
5296 #top-nav-bar {
5297 font-size: 1.75rem;
5300 /*==============*/
5301 /* PAGE TOOLBAR */
5302 /*==============*/
5304 @media only screen and (max-width: 900px) {
5305 #content > .page-toolbar {
5306 font-size: 1rem;
5307 margin-right: 0;
5309 #content.user-page > .page-toolbar {
5310 grid-column: 2 / span 2;
5311 margin: 0 0 6px 0;
5314 @media only screen and (max-width: 520px) {
5315 #content:not(.user-page) .page-toolbar {
5316 display: flex;
5317 flex-direction: column-reverse;
5318 text-align: right;
5319 align-self: start;
5320 padding: 4px 0 0 0;
5322 #content.user-page .page-toolbar {
5323 display: flex;
5324 flex-flow: row;
5325 justify-content: flex-end;
5326 padding: 2px 0 0 0;
5328 #content.user-page .page-toolbar > form,
5329 #content.user-page .page-toolbar > .button {
5330 text-align: center;
5331 flex-basis: 25%;
5332 margin-left: 1.5em;
5334 #content.user-page .page-toolbar .button {
5335 text-transform: uppercase;
5336 font-size: 0.625rem;
5338 #content.user-page .page-toolbar .button::before {
5339 font-size: 1.375rem;
5340 display: block;
5341 padding: 0;
5343 #content.user-page .page-toolbar .rss {
5344 white-space: nowrap;
5345 margin: 0 0 0 1.5em;
5347 .page-toolbar > * {
5348 line-height: 1.15;
5349 padding: 6px 0;
5350 margin: 0;
5354 /*==============*/
5355 /* SUBLEVEL NAV */
5356 /*==============*/
5358 @media only screen and (max-width: 900px) {
5359 .sublevel-nav:not(.sort) {
5360 flex-wrap: wrap;
5361 width: calc(100vw - 200px);
5363 .sublevel-nav:not(.sort) .sublevel-item {
5364 margin: 1px;
5365 flex-basis: 7em;
5368 @media only screen and (max-width: 520px) {
5369 .sublevel-nav:not(.sort) .sublevel-item {
5370 font-size: 1rem;
5374 /*=====================*/
5375 /* SORT ORDER SELECTOR */
5376 /*=====================*/
5378 @media only screen and (max-width: 720px) {
5379 #content.index-page > .sublevel-nav.sort {
5380 flex-flow: column;
5381 margin-left: 4px;
5385 /*==========*/
5386 /* ARCHIVES */
5387 /*==========*/
5389 @media only screen and (max-width: 900px) {
5390 div[class^='archive-nav-'] {
5391 flex-wrap: wrap;
5392 justify-content: flex-start;
5394 .archive-nav *[class^='archive-nav-item'],
5395 .archive-nav *[class^='archive-nav-item']:first-child {
5396 padding: 10px;
5397 margin: 2px;
5398 max-width: unset;
5399 flex: 0 1 calc((100% / 8) - 4px);
5401 .archive-nav .archive-nav-item-day,
5402 .archive-nav .archive-nav-item-day:first-child {
5403 flex-basis: calc((100% / 16) - 4px);
5405 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-'] {
5406 margin-top: 8px;
5407 position: relative;
5409 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
5410 content: "";
5411 display: block;
5412 position: absolute;
5413 height: 1px;
5414 width: calc(100% + 8px);
5415 left: -4px;
5416 top: -4px;
5419 @media only screen and (max-width: 720px) {
5420 .archive-nav .archive-nav-item-day,
5421 .archive-nav .archive-nav-item-day:first-child {
5422 flex-basis: calc((100% / 12) - 4px);
5425 @media only screen and (max-width: 520px) {
5426 .archive-nav *[class^='archive-nav-item'],
5427 .archive-nav *[class^='archive-nav-item']:first-child {
5428 flex-basis: calc((100% / 5) - 4px);
5430 .archive-nav .archive-nav-item-day,
5431 .archive-nav .archive-nav-item-day:first-child {
5432 flex-basis: calc((100% / 8) - 4px);
5436 /*==========*/
5437 /* LISTINGS */
5438 /*==========*/
5440 h1.listing {
5441 max-height: unset;
5444 /*============*/
5445 /* USER PAGES */
5446 /*============*/
5448 #content.user-page h1.page-main-heading {
5449 align-self: end;
5451 @media only screen and (max-width: 520px) {
5452 #content.user-page h1.page-main-heading {
5453 overflow: hidden;
5454 text-overflow: ellipsis;
5456 #content.user-page .user-stats .karma-type {
5457 display: block;
5461 /*============*/
5462 /* LOGIN PAGE */
5463 /*============*/
5465 @media only screen and (max-width: 640px) {
5466 .login-container {
5467 flex-flow: column;
5468 margin: 0 auto 3em auto;
5469 max-width: 400px;
5471 .login-container #login-form,
5472 .login-container #signup-form {
5473 padding: 0 1em 1.25em 1em;
5474 grid-row-gap: 0;
5476 .login-container #signup-form {
5477 padding-top: 1em;
5479 .login-container #login-form > *,
5480 .login-container #signup-form > * {
5481 grid-column: 1 / span 2;
5483 .login-container form label {
5484 text-align: left;
5485 padding: 0;
5486 line-height: 1;
5488 .login-container form input {
5489 margin: 0.25em 0 0.75em 0;
5490 padding: 0.5em;
5492 .login-container form h1 {
5493 grid-column: 1 / span 2;
5494 margin: 0 0 0.25em 0;
5496 .login-container form a {
5497 margin: 0.75em 0 0 0;
5499 .login-container .login-tip {
5500 margin: 1.5em 1em 0 1em;
5504 /*==================*/
5505 /* POSTS & COMMENTS */
5506 /*==================*/
5508 @media only screen and (max-width: 720px) {
5509 .body-text ol > li {
5510 padding: 0 0 0 2.25em;
5512 .body-text ol > li::before {
5513 width: 1.75em;
5515 .body-text ul:not(.contents-list) > li,
5516 .body-text ul:not(.contents-list) > li ul > li {
5517 padding: 0 0 0 0.75em;
5519 .body-text ul:not(.contents-list) > li::before,
5520 .body-text ul:not(.contents-list) > li ul > li::before {
5521 width: 0.125em;
5522 margin-left: -0.06em;
5526 /*===========*/
5527 /* POST-META */
5528 /*===========*/
5530 .post-meta {
5531 line-height: 1.9;
5533 @media only screen and (max-width: 720px) {
5534 .post-meta .lw2-link span,
5535 .post-meta .karma-value span,
5536 .post-meta .comment-count span {
5537 display: none;
5539 .post-meta .comment-count::before {
5540 content: "\F086";
5541 font-family: Font Awesome;
5542 font-size: 0.875em;
5543 margin: 0 0.25em 0 0;
5544 font-weight: 400;
5548 /*===================*/
5549 /* POSTS & BODY TEXT */
5550 /*===================*/
5552 @media only screen and (max-width: 900px) {
5553 .post-body,
5554 h1.post-title,
5555 .tag-description,
5556 .sequence-text {
5557 padding: 0 6px;
5560 @media only screen and (max-width: 520px) {
5561 .post-body {
5562 font-size: 1.2rem;
5563 line-height: 1.45;
5565 h1.post-title {
5566 font-size: 2em;
5570 /*==============*/
5571 /* COMMENT-META */
5572 /*==============*/
5574 a.comment-parent-link::after {
5575 display: none;
5577 @media only screen and (max-width: 900px) {
5578 .comment-meta {
5579 padding: 2px 40px 2px 10px;
5582 @media only screen and (max-width: 720px) {
5583 .comment .karma-value span {
5584 display: none;
5586 .comment-meta .comment-parent-link {
5587 opacity: 1.0;
5590 @media only screen and (max-width: 520px) {
5591 .comment-meta {
5592 padding: 2px 24px 2px 10px;
5593 position: relative;
5595 .comment-meta > * {
5596 order: 3;
5598 .comment-meta > :not(.author) {
5599 line-height: 1.8;
5601 .comment-meta .author,
5602 .comment-meta .date {
5603 order: 1;
5605 .comment-meta:before {
5606 content: "";
5607 order: 2;
5608 flex-basis: 100%;
5610 .comment-post-title2 {
5611 display: block;
5612 text-overflow: ellipsis;
5613 overflow: hidden;
5615 .comment-meta .lw2-link {
5616 display: none;
5620 /*=======================*/
5621 /* COMMENTS COMPACT VIEW */
5622 /*=======================*/
5624 /*===========================*/
5625 /* COMMENT THREAD NAVIGATION */
5626 /*===========================*/
5628 @media only screen and (max-width: 900px) {
5629 a.comment-parent-link {
5630 width: 0;
5631 visibility: hidden;
5632 position: relative;
5634 a.comment-parent-link::before {
5635 padding: 0;
5636 font-size: 1em;
5637 left: 0;
5638 top: 0;
5639 line-height: inherit;
5640 visibility: visible;
5641 content: "\F3BF";
5642 transform: scaleX(-1);
5643 width: 2em;
5644 text-align: center;
5647 @media only screen and (max-width: 520px) {
5648 a.comment-parent-link {
5649 position: static;
5651 a.comment-parent-link::before {
5652 padding: 6px;
5653 left: unset;
5654 right: 0;
5655 top: unset;
5656 bottom: 0;
5657 height: 2em;
5661 /*=================================*/
5662 /* COMMENT THREAD MINIMIZE BUTTONS */
5663 /*=================================*/
5665 @media only screen and (max-width: 520px) {
5666 .comment-minimize-button{
5667 right: 2px;
5671 /*===========================*/
5672 /* COMMENTING AND POSTING UI */
5673 /*===========================*/
5675 @media only screen and (max-width: 900px) {
5676 .comment-controls .delete-button, .comment-controls .retract-button, .comment-controls .unretract-button, .comment-controls .edit-button {
5677 font-size: 0;
5679 .comment-controls .delete-button::before, .comment-controls .retract-button::before, .comment-controls .unretract-button::before, .comment-controls .edit-button::before {
5680 font-size: 0.9rem;
5682 .comment-controls .cancel-comment-button {
5683 max-width: 1.3em;
5684 overflow: hidden;
5685 margin-right: 0.125em;
5687 .comment-controls .edit-button::before {
5688 font-size: 0.9375rem;
5690 .comments > .comment-controls .cancel-comment-button {
5691 right: 8px;
5693 .comment-controls .cancel-comment-button::before {
5694 font-size: 1.25rem;
5697 @media only screen and (max-width: 520px) {
5698 .comment-controls {
5699 position: static;
5701 .comment-controls:focus-within {
5702 z-index: 10001;
5704 .comment-controls .cancel-comment-button {
5705 right: 10px;
5707 .textarea-container:focus-within textarea {
5708 position: fixed;
5709 top: 0;
5710 left: 2px;
5711 width: calc(100vw - 4px);
5712 height: calc(100% - 100px);
5713 min-height: unset;
5714 max-height: unset;
5715 border-width: 1px;
5716 z-index: 11001;
5718 #content.conversation-page .textarea-container:focus-within textarea {
5719 height: calc(100% - 54px);
5721 #content.conversation-page .textarea-container:focus-within::after {
5722 content: "";
5723 display: block;
5724 width: 100%;
5725 height: 50px;
5726 position: fixed;
5727 left: 0;
5728 bottom: 0;
5729 z-index: 11000;
5731 .textarea-container:focus-within .guiedit-buttons-container {
5732 position: fixed;
5733 z-index: 11002;
5734 left: 0;
5735 width: 100vw;
5736 height: auto;
5737 background-image: none;
5738 padding: 3px 4px 4px 4px;
5739 margin: 0;
5740 text-align: center;
5741 top: auto;
5742 bottom: 0;
5744 .textarea-container:focus-within button.guiedit {
5745 font-size: 0.9375rem;
5746 line-height: 1.5;
5747 height: auto;
5748 width: calc((100% / 10) - 2px);
5749 padding: 10px 1px 8px 0;
5750 position: relative;
5751 margin: 1px;
5753 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
5754 z-index: 11011;
5755 position: fixed;
5756 bottom: 7px;
5757 width: calc(((100% - 16px) / 10) * 2.5 - 7px);
5758 font-size: 1.25rem;
5759 padding: 5px 5px 6px 5px;
5760 display: block;
5762 .textarea-container:focus-within button.guiedit sup {
5763 position: absolute;
5764 left: calc(50% + 0.65em);
5765 top: calc(50% - 1.3em);
5767 .textarea-container:focus-within .guiedit-mobile-help-button {
5768 left: 8px;
5770 .textarea-container:focus-within .guiedit-mobile-exit-button {
5771 right: 8px;
5773 .guiedit::after {
5774 display: none;
5777 #markdown-hints,
5778 #edit-post-form #markdown-hints {
5779 z-index: 11111;
5780 position: fixed;
5781 top: 40px;
5782 left: 0;
5783 right: 0;
5784 margin: auto;
5785 padding: 4px 0 4px 8px;
5786 width: 310px;
5787 border-width: 3px;
5788 border-style: double;
5789 pointer-events: none;
5791 #markdown-hints::after {
5792 content: "(Type to hide this help box.)";
5793 color: #090;
5794 display: block;
5795 margin: 12px 18px 13px 10px;
5796 padding: 5px;
5797 font-size: 0.9em;
5798 text-align: center;
5802 /*================*/
5803 /* EDIT POST FORM */
5804 /*================*/
5806 @media only screen and (max-width: 520px) {
5807 #edit-post-form {
5808 padding-bottom: 0;
5810 #edit-post-form .post-meta-fields {
5811 grid-template-columns: 4.5em auto auto auto 1fr auto;
5813 #edit-post-form label[for='url'],
5814 #edit-post-form label[for='section'],
5815 #edit-post-form label[for='title'] {
5816 padding-left: 0;
5818 #edit-post-form .post-meta-fields input[type='checkbox'] + label.iconify {
5819 white-space: normal;
5820 line-height: 0.9;
5821 top: -1px;
5822 font-family: Font Awesome;
5823 font-weight: 900;
5824 justify-self: start;
5826 #edit-post-form .post-meta-fields .question-checkbox,
5827 #edit-post-form .post-meta-fields .question-checkbox + label {
5828 grid-column: 6;
5829 margin-left: unset;
5831 #edit-post-form .post-meta-fields input[type='radio'] + label {
5832 align-self: start;
5834 #edit-post-form .textarea-container:focus-within textarea {
5835 height: calc(100% - 101px);
5836 min-height: unset;
5839 #markdown-hints-checkbox,
5840 #markdown-hints-checkbox + label {
5841 display: none;
5844 #edit-post-form div:last-child {
5845 clear: both;
5846 overflow: auto;
5848 #edit-post-form input[type='submit'] {
5849 float: none;
5850 display: block;
5851 font-size: 1.5rem;
5852 margin: 1rem auto 1.5rem auto;
5853 padding: 6px 12px 8px 12px;
5857 /*===================*/
5858 /* TABLE OF CONTENTS */
5859 /*===================*/
5861 @media only screen and (max-width: 900px) {
5862 .contents {
5863 float: none;
5864 display: table;
5865 max-width: none;
5866 margin-left: auto;
5867 margin-right: auto;
5870 @media only screen and (max-width: 520px) {
5871 .contents {
5872 max-width: 100%;
5873 margin: 1em auto 0 auto;
5874 display: table;
5876 .contents-head {
5877 font-size: 1.2em;
5879 div.post-body .contents ul {
5880 font-size: unset;
5884 /*========================*/
5885 /* QUALIFIED HYPERLINKING */
5886 /*========================*/
5888 @media only screen and (max-width: 520px) {
5889 .qualified-linking-toolbar {
5890 right: -5em;
5894 } /* END MOBILE LAYOUT */
5897 /*****************/
5898 /* CLASSIC THEME */
5899 /*****************/
5901 /*===========*/
5902 /* VARIABLES */
5903 /*===========*/
5905 /* Color scheme.
5907 :root {
5908 --GW-comment-background-color-odd: #f7f7f8;
5909 --GW-comment-background-color-even: #fff;
5910 --GW-comment-background-color-target: #ffd;
5913 /*======*/
5914 /* BASE */
5915 /*======*/
5917 body {
5918 color: #000;
5919 background-color: #d8d8d8;
5920 font-family: 'Arial', 'GW-Symbols', sans-serif;
5922 #content {
5923 line-height: 1.5;
5925 #content::before {
5926 background-color: #fff;
5927 box-shadow: 0px 0px 10px #555;
5930 /*=========*/
5931 /* NAV BAR */
5932 /*=========*/
5934 .nav-inner {
5935 font-size: 1.125em;
5936 font-weight: bold;
5938 .nav-inner,
5939 #primary-bar.inactive-bar .nav-inner {
5940 padding: 13px 30px 11px 30px;
5942 .nav-bar-top:not(#primary-bar) .nav-inner {
5943 font-size: 0.875em;
5945 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
5946 padding: 6px 0 4px 0;
5948 @media only screen and (min-width: 901px) {
5949 #secondary-bar #nav-item-sequences .nav-inner {
5950 line-height: 1.1;
5954 #bottom-bar.decorative {
5955 background-color: #fff;
5957 #bottom-bar.decorative::before,
5958 #bottom-bar.decorative::after {
5959 content: "GW";
5960 font-weight: 200;
5961 display: block;
5962 text-align: center;
5963 padding: 0.5em 0 0.75em 0;
5965 #bottom-bar.decorative::before {
5966 width: 100%;
5967 color: transparent;
5968 background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAMdXV1QUAACwAAAAAAQABAAACAkQBADs=');
5969 background-repeat: repeat-x;
5970 background-position: center 44%;
5971 margin: 0 30px;
5972 filter: opacity(0.7);
5974 #bottom-bar.decorative::after {
5975 color: #eee;
5976 position: absolute;
5977 left: 0;
5978 right: 0;
5979 margin: auto;
5980 background-color: #fff;
5981 padding-right: 4px;
5982 padding-left: 4px;
5984 @supports (width: -moz-fit-content) {
5985 #bottom-bar.decorative::after {
5986 width: -moz-fit-content;
5989 @supports (width: fit-content) {
5990 #bottom-bar.decorative::after {
5991 width: fit-content;
5995 /* Accesskey hints */
5997 .nav-inner::after {
5998 display: block;
5999 position: absolute;
6000 left: 5px;
6001 top: 0;
6002 font-weight: normal;
6003 font-size: 0.7em;
6004 color: #ddd;
6006 .nav-inner:hover::after {
6007 color: #bbb;
6010 /* This makes the navbar items look like tabs: */
6012 .nav-bar + .nav-bar {
6013 position: relative;
6015 .nav-bar {
6016 background-color: #f5f5f5;
6018 .nav-bar {
6019 border-bottom: 1px solid #d6d5d6;
6021 .nav-bar .nav-inner {
6022 color: #999;
6024 .nav-bar .nav-inner:hover {
6025 color: #777;
6026 text-decoration: none;
6028 .nav-bar .nav-current {
6029 color: #666;
6031 .nav-item:nth-of-type(n+2) {
6032 box-shadow: -9px 0 0 -8px #d6d5d6;
6035 /* Search tab */
6037 #nav-item-search form::before {
6038 position: relative;
6039 top: 2px;
6040 opacity: 0.3;
6042 #nav-item-search button {
6043 border: none;
6044 font-weight: inherit;
6046 #nav-item-search input::placeholder {
6047 color: #d00;
6048 font-weight: normal;
6051 /*= User/login tab =*/
6053 #inbox-indicator::before {
6054 top: 1px;
6055 color: #ccc;
6058 /*= Pagination UI =*/
6060 #bottom-bar #nav-item-next a::before {
6061 margin-left: -2.2em;
6062 left: 4.0em;
6064 #bottom-bar #nav-item-last a::before {
6065 margin-left: -2.3em;
6066 left: 3.9em;
6069 /*= Top pagination UI hover tooltips =*/
6071 #top-nav-bar a::after,
6072 #bottom-bar a::after {
6073 color: #000;
6076 /*==============*/
6077 /* PAGE TOOLBAR */
6078 /*==============*/
6080 .new-post,
6081 .new-post:visited,
6082 .new-private-message,
6083 .new-private-message:visited {
6084 color: #090;
6086 .logout-button {
6087 color: #d33;
6090 /*==============*/
6091 /* SUBLEVEL NAV */
6092 /*==============*/
6094 .sublevel-nav .sublevel-item {
6095 color: #777;
6096 background-color: #fff;
6098 .sublevel-nav .sublevel-item:not(.selected):hover {
6099 background-color: #ddd;
6100 color: #000;
6101 text-decoration: none;
6102 text-shadow: none;
6104 .sublevel-nav .sublevel-item:not(.selected):active,
6105 .sublevel-nav .sublevel-item.selected {
6106 background-color: #ddd;
6107 color: #000;
6108 text-shadow:
6109 0 -1px 0 #fff,
6110 0 0.5px 0.5px #000;
6113 .sublevel-nav:not(.sort) .sublevel-item {
6114 border-style: solid;
6115 border-color: #ddd;
6116 border-width: 1px 0 1px 1px;
6118 .sublevel-nav:not(.sort) .sublevel-item:first-child {
6119 border-radius: 8px 0 0 8px;
6121 .sublevel-nav:not(.sort) .sublevel-item:last-child {
6122 border-width: 1px;
6123 border-radius: 0 8px 8px 0;
6126 /*=====================*/
6127 /* SORT ORDER SELECTOR */
6128 /*=====================*/
6130 .sublevel-nav.sort .sublevel-item {
6131 letter-spacing: 0.5px;
6132 padding: 7px 7px 6px 8px;
6133 text-transform: uppercase;
6134 pointer-events: auto;
6135 box-shadow: 1px 1px 0 0 #aaa inset;
6137 .sublevel-nav.sort {
6138 border: 2px solid transparent;
6139 padding: 18px 0 0 0;
6140 border-radius: 8px;
6141 pointer-events: none;
6142 background-color: #bbb;
6144 .sublevel-nav.sort::before {
6145 text-transform: uppercase;
6146 font-weight: 600;
6147 color: #444;
6148 text-shadow: 0.5px 0.5px 0 #fff;
6149 z-index: 1;
6151 .sublevel-nav.sort::after {
6152 content: "";
6153 position: absolute;
6154 display: block;
6155 top: 0;
6156 left: 0;
6157 width: 100%;
6158 height: 100%;
6159 border-radius: 6px;
6160 box-shadow:
6161 0 18px 0 0 #bbb inset,
6162 0 0 0 1px #aaa inset,
6163 0 18px 0 1px #aaa inset,
6164 0 0 0 2px #bbb;
6167 /*================*/
6168 /* WIDTH SELECTOR */
6169 /*================*/
6170 /* THEME SELECTOR */
6171 /*================*/
6173 #width-selector button,
6174 #theme-selector button {
6175 box-shadow:
6176 0 0 0 4px #d8d8d8 inset,
6177 0 0 0 5px #bbb inset;
6179 #width-selector button:hover,
6180 #width-selector button.selected,
6181 #theme-selector button:hover,
6182 #theme-selector button.selected {
6183 box-shadow:
6184 0 0 0 5px #bbb inset;
6187 #theme-selector button::before {
6188 font-size: 0.9375em;
6189 padding: 5px 6px 7px 6px;
6190 color: #999;
6191 background-color: #d8d8d8;
6193 #theme-selector button:hover::before,
6194 #theme-selector button.selected::before {
6195 color: #222;
6197 #width-selector button::after {
6198 color: #999;
6199 font-size: 0.9em;
6202 /*======================*/
6203 /* THEME TWEAKER TOGGLE */
6204 /*======================*/
6206 #theme-tweaker-toggle button {
6207 color: #777;
6210 /*=================*/
6211 /* QUICKNAV WIDGET */
6212 /*=================*/
6214 #quick-nav-ui a {
6215 color: #999;
6216 background-color: #e4e4e4;
6217 border-radius: 4px;
6219 #quick-nav-ui a[href='#bottom-bar'] {
6220 line-height: 1.8;
6222 #quick-nav-ui a:active {
6223 transform: scale(0.9);
6225 #quick-nav-ui a[href='#comments'].no-comments {
6226 opacity: 0.4;
6227 color: #bbb;
6229 @media only screen and (hover: hover) {
6230 #quick-nav-ui a:hover {
6231 color: #000;
6232 background-color: #eee;
6234 #quick-nav-ui a:focus:not(:hover) {
6235 transform: none;
6236 text-shadow: none;
6240 /*======================*/
6241 /* NEW COMMENT QUICKNAV */
6242 /*======================*/
6244 #new-comment-nav-ui .new-comments-count {
6245 font-weight: 600;
6246 color: #666;
6247 text-shadow: 0.5px 0.5px 0 #fff;
6249 #new-comment-nav-ui .new-comments-count::after {
6250 font-weight: 600;
6251 color: #777;
6253 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
6254 color: #bbb;
6255 text-shadow: none;
6257 @media only screen and (hover: hover) {
6258 #new-comment-nav-ui .new-comments-count:hover {
6259 text-shadow:
6260 0 0 1px #fff,
6261 0 0 3px #fff,
6262 0 0 5px #fff,
6263 0 0 8px #fff,
6264 0.5px 0.5px 0 #fff;
6266 #new-comment-nav-ui .new-comment-sequential-nav-button:focus {
6267 color: #d00;
6271 /*=================*/
6272 /* HNS DATE PICKER */
6273 /*=================*/
6275 #hns-date-picker span {
6276 color: #777;
6277 text-shadow: 0.5px 0.5px 0 #fff;
6278 font-weight: 600;
6280 #hns-date-picker input {
6281 border: 1px solid #777;
6282 background-color: transparent;
6283 color: #666;
6285 #hns-date-picker input:focus {
6286 color: #000;
6289 /*======================*/
6290 /* ANTI-KIBITZER TOGGLE */
6291 /*======================*/
6293 #anti-kibitzer-toggle button::before,
6294 #anti-kibitzer-toggle button::after {
6295 background-color: #888;
6296 -webkit-background-clip: text;
6297 color: transparent;
6298 text-shadow: rgba(255,255,255,0.5) 0px 1px 1px;
6300 #anti-kibitzer-toggle button:hover::before,
6301 #anti-kibitzer-toggle button:hover::after {
6302 background-color: #444;
6305 /*======================*/
6306 /* TEXT SIZE ADJUSTMENT */
6307 /*======================*/
6309 #text-size-adjustment-ui button {
6310 color: #777;
6312 #text-size-adjustment-ui button:hover {
6313 color: #222;
6315 #text-size-adjustment-ui button.default {
6316 font-weight: 600;
6318 #text-size-adjustment-ui button:disabled:hover {
6319 text-shadow: none;
6321 #text-size-adjustment-ui::after {
6322 color: #999;
6325 /*=============================*/
6326 /* COMMENTS VIEW MODE SELECTOR */
6327 /*=============================*/
6329 #comments-view-mode-selector a {
6330 color: #777;
6333 /*===============*/
6334 /* KEYBOARD HELP */
6335 /*===============*/
6337 #keyboard-help-overlay .keyboard-help-container .keys {
6338 margin: 0;
6341 /*==========*/
6342 /* ARCHIVES */
6343 /*==========*/
6345 .archive-nav {
6346 border: 1px solid #aaa;
6348 .archive-nav *[class^='archive-nav-item'] {
6349 border-style: solid;
6350 border-color: #ddd;
6351 border-width: 1px 0 1px 1px;
6352 background-color: #eee;
6354 .archive-nav div[class^='archive-nav-']:nth-of-type(2) *[class^='archive-nav-item'] {
6355 border-top-width: 0;
6356 border-bottom-width: 0;
6358 .archive-nav div[class^='archive-nav-']:last-of-type *[class^='archive-nav-item'] {
6359 border-bottom-width: 1px;
6361 .archive-nav *[class^='archive-nav-item']:last-child {
6362 border-right-width: 1px;
6364 .archive-nav span[class^='archive-nav-item'] {
6365 font-weight: bold;
6366 background-color: #ddd;
6369 .archive-nav a:link,
6370 .archive-nav a:visited {
6371 color: rgba(0, 0, 238, 0.7);
6373 .archive-nav a:hover {
6374 text-decoration: none;
6375 color: #c00;
6376 background-color: #e0e0e0;
6378 .archive-nav a:active {
6379 transform: scale(0.9);
6381 .archive-nav a:focus:not(:hover) {
6382 transform: none;
6384 .archive-nav a.archive-nav-item-day:hover {
6385 background-color: #ddd;
6388 /*==========*/
6389 /* LISTINGS */
6390 /*==========*/
6392 h1.listing {
6393 margin: 1.125em 20px 0.25em 20px;
6394 max-width: calc(100% - 40px);
6395 font-family: 'Arial', 'GW-Symbols', sans-serif, 'Font Awesome';
6396 font-size: 1.125rem;
6397 padding-left: 30px;
6398 max-height: unset;
6401 h1.listing .post-title-link {
6402 color: #538d4d;
6403 white-space: unset;
6404 display: inline;
6406 h1.listing .post-title:visited {
6407 color: #5a5a5b;
6409 h1.listing .link-post-link {
6410 top: 2px;
6413 @media only screen and (hover: hover) {
6414 h1.listing a:hover,
6415 h1.listing a:focus {
6416 color: #3d3d3e;
6417 text-decoration: none;
6419 h1.listing a:focus {
6420 border-bottom: 1px dotted #999;
6422 h1.listing:focus-within::before {
6423 display: none;
6425 h1.listing:focus-within + .post-meta .karma-value {
6426 box-shadow:
6427 0 0 0 3px #fff,
6428 0 0 0 6px #3d3d3e;
6430 h1.listing .link-post-link:hover,
6431 h1.listing .link-post-link:focus {
6432 color: #4879ec;
6433 text-shadow:
6434 0.5px 0.5px 0 #fff,
6435 -0.5px -0.5px 0 #fff,
6436 0 0 2px #fff,
6437 0 0 3px #00c;
6438 border: none;
6442 h1.listing .edit-post-link {
6443 padding: 5px 3px 12px 0.5em;
6444 top: 0;
6445 right: 0;
6447 h1.listing .edit-post-link:hover {
6448 text-decoration: none;
6450 #content.user-page h1.listing .edit-post-link {
6451 background-color: #f7f7f8;
6454 /*======*/
6455 /* SPAM */
6456 /*======*/
6458 h1.listing.spam {
6459 opacity: 0.15;
6461 h1.listing.spam + .post-meta {
6462 opacity: 0.2;
6464 h1.listing.spam:hover,
6465 h1.listing.spam + .post-meta:hover,
6466 h1.listing.spam:hover + .post-meta {
6467 opacity: 1.0;
6470 /*===================*/
6471 /* LISTING POST-META */
6472 /*===================*/
6474 h1.listing + .post-meta {
6475 font-size: 0.8125rem;
6476 padding-left: 30px;
6477 display: flex;
6478 justify-content: flex-end;
6481 h1.listing + .post-meta .author {
6482 font-weight: bold;
6483 color: #6a8a6b;
6484 text-decoration: none;
6485 margin: 0 0 0 1.5em;
6486 order: 0;
6488 h1.listing + .post-meta .author:hover {
6489 color: #3d3d3e;
6491 h1.listing + .post-meta .date,
6492 h1.listing + .post-meta .read-time {
6493 color: #999;
6494 font-style: italic;
6496 h1.listing + .post-meta a {
6497 color: #8a8a8b;
6498 text-decoration: underline;
6500 h1.listing + .post-meta a:hover {
6501 color: #3d3d3e;
6504 h1.listing + .post-meta .karma-value {
6505 background-color: #538d4d;
6506 color: #fff;
6507 font-weight: bold;
6508 font-size: 0.8125rem;
6509 border-radius: 1.0625em;
6510 padding: 2px 6px 1px 6px;
6511 text-align: center;
6512 display: block;
6513 min-width: 2.125em;
6514 position: absolute;
6515 right: calc(100% - 1.75em);
6516 top: -2.1em;
6518 h1.listing + .post-meta .karma-value span,
6519 h1.listing + .post-meta .lw2-link span,
6520 h1.listing + .post-meta .comment-count span {
6521 display: none;
6524 h1.listing + .post-meta > * {
6525 text-align: right;
6526 margin: 0 0 0 0.5em;
6528 h1.listing + .post-meta .read-time {
6529 width: 6.5em;
6530 order: 2;
6532 h1.listing + .post-meta .comment-count {
6533 order: -1;
6535 h1.listing + .post-meta .comment-count::before {
6536 content: "Comments ("
6538 h1.listing + .post-meta .comment-count::after {
6539 content: ")"
6541 h1.listing + .post-meta .date {
6542 width: 11em;
6543 order: 1;
6545 h1.listing + .post-meta .lw2-link {
6546 margin: 0 0 0 1em;
6547 order: 3;
6549 h1.listing + .post-meta .post-section {
6550 margin: 0;
6551 text-decoration: none;
6553 h1.listing + .post-meta .post-section::before {
6554 left: unset;
6555 right: calc(100% + 1.15em);
6556 top: -1.95em;
6558 h1.listing + .post-meta .link-post-domain {
6559 order: -2;
6560 margin: 0 1em 0 0;
6563 /*============*/
6564 /* USER PAGES */
6565 /*============*/
6567 #content.user-page h1.page-main-heading {
6568 border-bottom: 1px solid #ccc;
6571 #content.user-page h1.listing,
6572 #content.user-page h1.listing + .post-meta {
6573 background-color: #f7f7f8;
6574 border-style: solid;
6575 border-color: #bbbcbf;
6578 #content.user-page h1.listing {
6579 padding: 0.5em 6px 0 48px;
6580 border-width: 1px 1px 0 1px;
6581 margin: 1rem 0 0 0;
6582 max-width: 100%;
6584 #content.own-user-page h1.listing,
6585 h1.listing.own-post-listing {
6586 padding-right: 36px;
6588 #content.user-page h1.listing a:hover {
6589 background-color: #f7f7f8;
6592 #content.user-page h1.listing + .post-meta {
6593 padding: 0.25em 10px 0.5em 32px;
6594 border-width: 0 1px 1px 1px;
6595 margin: 0 0 1rem 0;
6597 #content.user-page h1.listing + .post-meta .karma-value {
6598 right: calc(100% - 3.25em);
6599 top: -1.8em;
6601 #content.user-page h1.listing + .post-meta .post-section::before {
6602 right: calc(100% - 5.1em);
6603 top: 4px;
6606 #content.conversations-user-page h1.listing {
6607 padding: 8px 6px 8px 10px;
6608 font-size: 1.25rem;
6610 #content.conversations-user-page h1.listing + .post-meta {
6611 padding: 0 10px 6px 4px;
6612 margin: 0;
6615 .user-stats .karma-total {
6616 font-weight: bold;
6619 /*================*/
6620 /* SEARCH RESULTS */
6621 /*================*/
6623 #content.search-results-page h1.listing {
6624 font-size: 1.125rem;
6627 /*===============*/
6628 /* CONVERSATIONS */
6629 /*===============*/
6631 #content.conversation-page h1.page-main-heading {
6632 font-size: 1.375em;
6633 text-align: left;
6636 /*============*/
6637 /* LOGIN PAGE */
6638 /*============*/
6640 .login-container form input[type='submit'] {
6641 font-weight: bold;
6642 background-color: #eee;
6643 border: 1px solid #ccc;
6645 .login-container form input[type='submit']:hover,
6646 .login-container form input[type='submit']:focus {
6647 background-color: #ddd;
6648 border: 1px solid #aaa;
6651 /* “Create account” form */
6653 #signup-form {
6654 background-color: #f3f3f3;
6655 border: 1px solid #ddd;
6657 #signup-form input[type='submit'] {
6658 background-color: #e4e4e4;
6659 border: 1px solid #ccc;
6661 #signup-form input[type='submit']:hover {
6662 background-color: #d8d8d8;
6663 border: 1px solid #aaa;
6666 /* Log in tip */
6668 .login-container .login-tip {
6669 border: 1px solid #eee;
6672 /* Message box */
6674 .error-box {
6675 border: 1px solid red;
6676 background-color: #faa;
6678 .success-box {
6679 border: 1px solid green;
6680 background-color: #afa;
6683 /*=====================*/
6684 /* PASSWORD RESET PAGE */
6685 /*=====================*/
6687 .reset-password-container input[type='submit'] {
6688 background-color: #e4e4e4;
6689 border: 1px solid #ccc;
6690 font-weight: bold;
6693 /*===================*/
6694 /* TABLE OF CONTENTS */
6695 /*===================*/
6697 .contents {
6698 font-family: 'Arial', 'GW-Symbols', sans-serif;
6699 border: 1px solid #ddd;
6700 background-color: #eee;
6701 padding: 0.75em 0.5em 0.5em 0.5em;
6703 .contents-head {
6704 font-weight: bold;
6705 font-size: 1.25em;
6707 .post-body .contents ul {
6708 font-size: 1em;
6710 .post-body .contents li::before {
6711 color: #999;
6712 font-feature-settings: "tnum";
6715 /*==================*/
6716 /* POSTS & COMMENTS */
6717 /*==================*/
6719 .body-text {
6720 font-family: 'Arial', sans-serif;
6721 font-size: 1rem;
6723 .body-text a {
6724 text-decoration: underline;
6726 .post-meta > *,
6727 .comment-meta > * {
6728 white-space: unset;
6731 /*=================*/
6732 /* POST NAVIGATION */
6733 /*=================*/
6735 .post-nav-item {
6736 font-size: 0.875em;
6737 font-weight: bold;
6738 background-color: #f5f5f5;
6740 .post-nav-label {
6741 opacity: 0.75;
6744 .post-nav.next,
6745 .sequence-title {
6746 box-shadow: -9px 0 0 -8px #d6d5d6;
6749 @media only screen and (max-width: 900px) {
6750 .post-nav.prev {
6751 padding: 0.5em 0.75em 0.5em 0.5em;
6753 .sequence-title {
6754 box-shadow: 0 -9px 0 -8px #d6d5d6;
6756 .post-nav.next {
6757 padding: 0.5em 0.5em 0.5em 0.75em;
6761 .crosspost, .crosspost:visited {
6762 color: #6a8a6b;
6763 background-color: #f8f8f8;
6764 border: 1px solid #ccc;
6767 /*===========*/
6768 /* POST-META */
6769 /*===========*/
6771 .post-meta {
6772 line-height: 1.9;
6774 .post-meta .post-section::before,
6775 .comment-meta .alignment-forum {
6776 color: #fff;
6777 text-shadow:
6778 1px 1px 0 #090,
6779 0 1px 0 #090,
6780 0 0 5px #090;
6782 a.post-section:hover::before {
6783 color: #97ff7c;
6785 .post-meta .post-section.alignment-forum::before {
6786 text-shadow:
6787 1px 1px 0 #626dd7,
6788 0 1px 0 #626dd7,
6789 0 0 5px #626dd7;
6791 a.post-section.alignment-forum:hover::before {
6792 color: #e6e5ff;
6795 .bottom-post-meta {
6796 border-color: #ddd;
6799 .post .post-meta {
6800 position: relative;
6801 font-size: 0.875rem;
6802 justify-content: flex-start;
6803 padding-left: 30px;
6805 .post .post-meta .author {
6806 font-weight: bold;
6807 color: #6a8a6b;
6808 text-decoration: none;
6810 .post .post-meta .author:hover {
6811 color: #3d3d3e;
6813 .post .post-meta .date{
6814 color: #999;
6815 font-style: italic;
6817 .post .post-meta a {
6818 color: #8a8a8b;
6819 text-decoration: underline;
6821 .post .post-meta a:hover {
6822 color: #3d3d3e;
6825 .post .post-meta .voting-controls {
6826 order: -1;
6828 .post .post-meta .karma-value {
6829 background-color: #538d4d;
6830 color: #fff;
6831 font-weight: bold;
6832 font-size: 0.8125rem;
6833 border-radius: 1.125em;
6834 padding: 2px 6px 1px 6px;
6835 text-align: center;
6836 min-width: 2.125em;
6837 display: block;
6838 float: left;
6839 margin: 0 0.5em 0 0;
6841 .post .post-meta .karma-value span,
6842 .post .post-meta .lw2-link span,
6843 .post .post-meta .comment-count span {
6844 display: none;
6847 .post .post-meta .comment-count::before {
6848 content: "Comments ("
6850 .post .post-meta .comment-count::after {
6851 content: ")"
6854 .post .post-meta .post-section::before {
6855 position: absolute;
6856 top: 1px;
6857 left: 0;
6859 .post .bottom-post-meta .post-section::before {
6860 top: 21px;
6863 /*============*/
6864 /* LINK POSTS */
6865 /*============*/
6867 .post.link-post > .post-body > p:first-child {
6868 margin: 0;
6870 .post.link-post a.link-post-link {
6871 text-decoration: none;
6872 font-family: 'Arial', 'GW-Symbols', sans-serif;
6873 font-weight: 600;
6875 .post.link-post a.link-post-link:hover {
6876 color: #c00;
6878 .post.link-post a.link-post-link:hover::before {
6879 color: #4879ec;
6880 text-shadow:
6881 0.5px 0.5px 0 #fff,
6882 -0.5px -0.5px 0 #fff,
6883 0 0 2px #fff,
6884 0 0 3px #00c;
6886 .post.link-post a.link-post-link:focus {
6887 color: #aaa;
6888 border-bottom: 2px dotted #aaa;
6891 /*=======*/
6892 /* POSTS */
6893 /*=======*/
6895 h1.post-title {
6896 font-size: 1.375rem;
6897 text-align: left;
6898 margin: 2em 0 0.5em 0;
6899 line-height: 1.2;
6902 /*==========*/
6903 /* COMMENTS */
6904 /*==========*/
6906 #comments::before {
6907 border-top: 1px solid #000;
6908 box-shadow: 0 3px 4px -4px #000 inset;
6910 @-moz-document url-prefix() {
6911 #comments::before {
6912 box-shadow: 0 3px 3px -4px #000 inset;
6915 #content > .comment-thread .comment-meta a.date:focus,
6916 #content > .comment-thread .comment-meta a.permalink:focus {
6917 color: #444;
6918 outline: 2px dotted #444;
6919 position: relative;
6920 background-color: #fff;
6921 padding: 0 5px;
6922 left: -5px;
6924 #content > .comment-thread .comment-meta a.date:focus + *,
6925 #content > .comment-thread .comment-meta a.permalink:focus + *:not(.comment-post-title) {
6926 margin-left: -10px;
6928 .comment-item {
6929 border: 1px solid #bbbcbf;
6930 background-color: var(--GW-comment-background-color);
6932 .comment-item .comment-item {
6933 margin: 1em -1px 8px 16px;
6935 .comment-item .comment-item + .comment-item {
6936 margin: 2em -1px 8px 16px;
6938 .comment-parent-link::after {
6939 box-shadow:
6940 0 28px 16px -16px var(--GW-comment-parent-background-color) inset,
6941 4px 16px 0 12px var(--GW-comment-background-color-target) inset,
6942 4px 4px 0 12px var(--GW-comment-background-color-target) inset;
6945 /*================================*/
6946 /* DEEP COMMENT THREAD COLLAPSING */
6947 /*================================*/
6949 .comment-item input[id^="expand"] + label::after {
6950 color: #6a8a6b;
6951 font-weight: 600;
6953 .comment-item input[id^="expand"] + label:hover::after {
6954 color: #c00;
6956 .comment-item input[id^="expand"] + label:active::after,
6957 .comment-item input[id^="expand"] + label:focus::after{
6958 color: #c00;
6960 .comment-item input[id^="expand"]:checked ~ .comment-thread .comment-thread .comment-item {
6961 border-width: 1px 0 0 0;
6964 /*==============*/
6965 /* COMMENT-META */
6966 /*==============*/
6968 .comment-meta > * {
6969 font-size: 0.9375rem;
6970 padding-top: 2px;
6972 .comment-meta .author {
6973 font-weight: bold;
6974 color: #538d4d;
6976 .comment-meta .date {
6977 color: #999;
6978 font-style: italic;
6980 .comment-meta .date:hover {
6981 color: #777;
6983 .comment-meta .karma-value,
6984 .comment-controls .voting-controls .karma-value {
6985 color: #666;
6986 float: left;
6987 margin-right: 0.5em;
6989 .comment-meta .karma-value:only-child {
6990 float: none;
6992 .comment-item .author:not(.redacted).original-poster::after {
6993 opacity: 0.8;
6996 .comment-item .voting-controls.active-controls::after,
6997 .comment-item .voting-controls .karma-value::after,
6998 .post .voting-controls.active-controls::after,
6999 .post .voting-controls .karma-value::after,
7000 .author::before {
7001 background-color: #fff;
7002 color: #888;
7003 box-shadow: 0 0 0 1px #ccc inset;
7004 border-radius: 4px;
7006 .comment-item .voting-controls.active-controls::after,
7007 .post .voting-controls.active-controls::after {
7008 padding: 6px;
7009 max-width: unset;
7010 bottom: -46px;
7011 width: 110px;
7013 .comment-item .voting-controls .karma-value::after,
7014 .post .voting-controls .karma-value::after {
7015 padding: 2px 8px;
7016 top: -36px;
7017 min-width: 64px;
7018 font-weight: normal;
7021 /*====================*/
7022 /* COMMENT PERMALINKS */
7023 /*====================*/
7025 .comment-meta .permalink,
7026 .comment-meta .lw2-link,
7027 .individual-thread-page .comment-parent-link:empty {
7028 top: 1px;
7029 filter: grayscale(50%);
7031 .comment-meta .permalink,
7032 .comment-meta .lw2-link,
7033 .individual-thread-page .comment-parent-link:empty {
7034 filter: unset;
7037 /*====================*/
7038 /* ANTI-KIBITZER MODE */
7039 /*====================*/
7041 .author.redacted,
7042 .inline-author.redacted {
7043 opacity: 0.8;
7044 font-weight: 400;
7047 .karma-value.redacted {
7048 opacity: 0.5;
7051 .link-post-domain.redacted {
7052 opacity: 0.5;
7055 /*===========================*/
7056 /* COMMENT THREAD NAVIGATION */
7057 /*===========================*/
7059 div.comment-parent-link {
7060 font-weight: bold;
7062 a.comment-parent-link {
7063 font-weight: normal;
7065 a.comment-parent-link::before {
7066 color: #bbb;
7068 a.comment-parent-link:hover::before {
7069 background-color: #ffd;
7070 color: #999;
7073 div.comment-child-links {
7074 font-weight: bold;
7076 div.comment-child-links a {
7077 font-weight: normal;
7079 .comment-child-link::before {
7080 color: #bbb;
7083 .comment-item-highlight {
7084 box-shadow:
7085 0 0 2px #e7b200,
7086 0 0 3px #e7b200,
7087 0 0 5px #e7b200,
7088 0 0 7px #e7b200,
7089 0 0 10px #e7b200;
7090 border: 1px solid #e7b200;
7092 .comment-item-highlight-faint {
7093 box-shadow:
7094 0 0 2px #f8e7b5,
7095 0 0 3px #f8e7b5,
7096 0 0 5px #f8e7b5,
7097 0 0 7px #f8e7b5,
7098 0 0 10px #f8e7b5;
7099 border: 1px solid #f8e7b5;
7102 .comment-popup {
7103 background-color: #fff;
7106 /*=======================*/
7107 /* COMMENTS COMPACT VIEW */
7108 /*=======================*/
7110 #comments-list-mode-selector button {
7111 box-shadow:
7112 0 0 0 4px #fff inset,
7113 0 0 0 5px #bbb inset;
7115 #comments-list-mode-selector button:hover,
7116 #comments-list-mode-selector button.selected {
7117 box-shadow:
7118 0 0 0 5px #bbb inset;
7120 #content.compact > .comment-thread .comment-item {
7121 max-height: 57px;
7123 #content.compact > .comment-thread .comment-item::after {
7124 color: #6a8a6b;
7125 background: linear-gradient(to right, transparent 0%, #fff 50%, #fff 100%);
7128 @media only screen and (hover: hover) {
7129 #content.compact > .comment-thread .comment-item:hover .comment,
7130 #content.compact > .comment-thread .comment-item.expanded .comment {
7131 background-color: #fff;
7132 outline: 3px solid #6a8a6b;
7134 #content.compact > .comment-thread .comment-item:hover .comment::before,
7135 #content.compact > .comment-thread .comment-item.expanded .comment::before {
7136 background-color: #fff;
7137 box-shadow:
7138 0 0 3px #fff,
7139 0 0 5px #fff,
7140 0 0 7px #fff,
7141 0 0 10px #fff,
7142 0 0 20px #fff,
7143 0 0 30px #fff,
7144 0 0 40px #fff;
7147 @media only screen and (hover: none) {
7148 #content.compact > .comment-thread.expanded .comment-item .comment {
7149 background-color: #fff;
7150 outline: 3px solid #6a8a6b;
7152 #content.compact > .comment-thread.expanded .comment-item .comment::before {
7153 background-color: #fff;
7154 box-shadow:
7155 0 0 3px #fff,
7156 0 0 5px #fff,
7157 0 0 7px #fff,
7158 0 0 10px #fff,
7159 0 0 20px #fff,
7160 0 0 30px #fff,
7161 0 0 40px #fff;
7165 #content.user-page.compact > h1.listing {
7166 margin-top: 0.5rem;
7168 #content.user-page.compact > h1.listing + .post-meta {
7169 margin-bottom: 0.5rem;
7172 /*===========================*/
7173 /* HIGHLIGHTING NEW COMMENTS */
7174 /*===========================*/
7176 .new-comment::before {
7177 outline: 2px solid #5a5;
7178 box-shadow:
7179 0 0 6px -2px #5a5 inset,
7180 0 0 4px #5a5,
7181 0 0 6px #5a5;
7184 /*=================================*/
7185 /* COMMENT THREAD MINIMIZE BUTTONS */
7186 /*=================================*/
7188 .comment-meta .comment-minimize-button {
7189 font-size: 1.25rem;
7190 top: -1px;
7192 .comment-meta .comment-minimize-button::after {
7193 top: 23px;
7195 .comment-minimize-button {
7196 color: #ccc;
7198 .comment-minimize-button:hover {
7199 color: #aaa;
7201 .comment-minimize-button::after {
7202 font-family: 'Arial', 'GW-Symbols', sans-serif;
7203 color: #777;
7205 .comment-minimize-button.maximized::after {
7206 color: #ccc;
7209 /*==============*/
7210 /* VOTE BUTTONS */
7211 /*==============*/
7213 .vote {
7214 padding: 0 5px;
7215 position: relative;
7217 .vote::before {
7218 position: relative;
7219 z-index: 1;
7221 .vote::after {
7222 position: absolute;
7225 .karma .upvote::before {
7226 content: '\F164';
7228 .karma .downvote::before {
7229 content: '\F165';
7230 top: 2px;
7232 .karma .upvote::after {
7233 content: "\F164";
7234 left: -1px;
7235 top: -3px;
7237 .karma .downvote::after {
7238 content: "\F165";
7239 left: -1px;
7240 top: 5px;
7243 .agreement .upvote::before {
7244 content: '\F0A6';
7246 .agreement .downvote::before {
7247 content: '\F0A7';
7248 top: 2px;
7250 .agreement .upvote::after {
7251 content: "\F0A6";
7252 left: -1px;
7253 top: -3px;
7255 .agreement .downvote::after {
7256 content: "\F0A7";
7257 left: -1px;
7258 top: 5px;
7261 /**********/
7262 /* States.
7265 /* _ 1
7267 .vote {
7268 color: #c8c8c8;
7269 text-shadow:
7270 1px 1px 0 #aaa,
7271 -1px 1px 0 #aaa,
7272 1px -1px 0 #aaa,
7273 -1px -1px 0 #aaa;
7275 @media only screen and (min-resolution: 192dpi) {
7276 .vote {
7277 text-shadow:
7278 0.5px 0.5px 0 #aaa,
7279 -0.5px 0.5px 0 #aaa,
7280 0.5px -0.5px 0 #aaa,
7281 -0.5px -0.5px 0 #aaa;
7285 /* _ 2
7287 .upvote:hover,
7288 .upvote:not(.none) {
7289 color: var(--GW-upvote-button-color);
7290 text-shadow:
7291 1px 1px 0 #080,
7292 -1px 1px 0 #080,
7293 1px -1px 0 #080,
7294 -1px -1px 0 #080;
7296 .downvote:hover,
7297 .downvote:not(.none) {
7298 color: var(--GW-downvote-button-color);
7299 text-shadow:
7300 1px 1px 0 #b00,
7301 -1px 1px 0 #a00,
7302 1px -1px 0 #b00,
7303 -1px -1px 0 #b00;
7305 @media only screen and (min-resolution: 192dpi) {
7306 .upvote:hover,
7307 .upvote:not(.none) {
7308 text-shadow:
7309 0.5px 0.5px 0 #060,
7310 -0.5px 0.5px 0 #060,
7311 0.5px -0.5px 0 #060,
7312 -0.5px -0.5px 0 #060;
7314 .downvote:hover,
7315 .downvote:not(.none) {
7316 text-shadow:
7317 0.5px 0.5px 0 #900,
7318 -0.5px 0.5px 0 #900,
7319 0.5px -0.5px 0 #900,
7320 -0.5px -0.5px 0 #900;
7324 /* 0 _
7326 .vote::after {
7327 visibility: hidden;
7330 /* 1,2 _
7332 .vote.two-temp::after,
7333 .vote.two::after {
7334 visibility: visible;
7337 /* 1 _
7339 .vote.two-temp::after {
7340 color: #c8c8c8;
7343 /* 2 _
7345 .vote.two::after {
7346 color: inherit;
7349 /* Disabled.
7351 .vote:disabled,
7352 .vote:disabled:hover {
7353 visibility: unset;
7354 color: #eee;
7355 text-shadow:
7356 1px 1px 0 #d8d8d8,
7357 -1px 1px 0 #d8d8d8,
7358 1px -1px 0 #d8d8d8,
7359 -1px -1px 0 #d8d8d8;
7361 @media only screen and (min-resolution: 192dpi) {
7362 .vote:disabled,
7363 .vote:disabled:hover {
7364 text-shadow:
7365 0.5px 0.5px 0 #d8d8d8,
7366 -0.5px 0.5px 0 #d8d8d8,
7367 0.5px -0.5px 0 #d8d8d8,
7368 -0.5px -0.5px 0 #d8d8d8;
7372 .comment-controls .voting-controls:first-of-type {
7373 margin-left: -6px;
7375 .comment-controls .voting-controls {
7376 margin-right: 1em;
7379 /*===========================*/
7380 /* COMMENTING AND POSTING UI */
7381 /*===========================*/
7383 .posting-controls input[type='submit'] {
7384 background-color: #fff;
7385 border: 1px solid #aaa;
7386 font-weight: bold;
7388 .posting-controls input[type='submit']:hover,
7389 .posting-controls input[type='submit']:focus {
7390 background-color: #ddd;
7391 border: 1px solid #999;
7394 .comment-controls .cancel-comment-button {
7395 font-weight: 600;
7396 color: #c00;
7397 text-shadow:
7398 0 0 1px #fff,
7399 0 0 2px #fff;
7400 max-width: 1.2em;
7401 overflow: hidden;
7402 margin-right: 0.375em;
7404 .comment-controls .cancel-comment-button::before {
7405 font-size: 1.25em;
7407 .comment-controls .cancel-comment-button:hover {
7408 color: #f00;
7411 .new-comment-button {
7412 font-weight: 600;
7415 .comment-controls .action-button::before {
7416 font-size: 1em;
7418 .comment-controls .action-button::after {
7419 content: attr(data-label);
7420 display: block;
7421 position: absolute;
7422 font-size: 0.5em;
7423 text-transform: uppercase;
7424 visibility: hidden;
7425 text-shadow: none;
7427 .comment-controls .action-button:hover::after {
7428 visibility: visible;
7430 .comment-controls .delete-button::before,
7431 .comment-controls .retract-button::before {
7432 color: #ca3232;
7434 .comment-controls .delete-button::after {
7435 transform: translateX(-8px);
7437 .comment-controls .retract-button::after {
7438 transform: translateX(-8px);
7440 .comment-controls .unretract-button::after {
7441 transform: translateX(-18px);
7443 .comment-controls .reply-button::before {
7444 content: "\F086";
7445 font-weight: 400;
7446 font-size: 1.125rem;
7447 color: #6a8a6b;
7449 .comment-controls .reply-button::after {
7450 transform: translateX(-4px);
7452 .comment-controls .edit-button::before {
7453 font-size: 0.9375em;
7454 color: #0b0;
7456 .comment-controls .unretract-button::before {
7457 font-size: 1.125rem;
7458 color: #0b0;
7460 .comment-controls .edit-button::after {
7461 transform: translateX(-1px);
7463 .comment-item .comment-controls .action-button:hover::before {
7464 color: #f00;
7465 text-shadow:
7466 0.5px 0.5px 0.5px #f77;
7469 h1.listing .edit-post-link,
7470 h1.listing .edit-post-link:visited,
7471 .post-controls .edit-post-link,
7472 .post-controls .edit-post-link:visited {
7473 color: #090;
7475 h1.listing .edit-post-link:hover,
7476 .post-controls .edit-post-link:hover {
7477 color: #d00;
7480 .posting-controls textarea {
7481 font-family: 'Arial', sans-serif;
7482 font-size: 1rem;
7483 color: #000;
7484 background-color: #fff;
7485 border-color: #aaa;
7486 box-shadow:
7487 0 0 0 1px #eee inset;
7489 .posting-controls textarea:focus {
7490 background-color: #ffd;
7491 border-color: #6a8a6b;
7492 box-shadow:
7493 0 0 0 1px #ddf inset,
7494 0 0 0 1px #fff,
7495 0 0 0 2px #6a8a6b;
7497 .posting-controls.edit-existing-post textarea:focus,
7498 .posting-controls form.edit-existing-comment textarea:focus {
7499 border-color: #090;
7500 box-shadow:
7501 0 0 0 1px #81ff7f inset,
7502 0 0 0 1px #fff,
7503 0 0 0 2px #090;
7506 /* GUIEdit buttons */
7508 .guiedit-buttons-container {
7509 background-image: linear-gradient(to bottom, #fff 0%, #ddf 50%, #ccf 75%, #aaf 100%);
7512 .posting-controls.edit-existing-post .guiedit-buttons-container button,
7513 .posting-controls form.edit-existing-comment .guiedit-buttons-container button {
7514 color: #050;
7516 .guiedit-buttons-container button {
7517 font-family: Font Awesome, 'Arial', sans-serif;
7520 .guiedit::after {
7521 font-family: 'Arial', 'GW-Symbols', sans-serif;
7522 color: #777;
7523 text-shadow: none;
7524 top: 4px;
7527 /* Markdown hints */
7529 #markdown-hints-checkbox + label {
7530 color: #6a8a6b;
7532 #markdown-hints-checkbox + label:hover {
7533 color: #e00;
7535 #markdown-hints {
7536 border: 1px solid #c00;
7537 background-color: #ffa;
7540 /*================*/
7541 /* EDIT POST FORM */
7542 /*================*/
7544 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
7545 border-radius: 3px;
7546 border: 1px solid #ddd;
7547 color: #777;
7548 top: 2px;
7550 @media only screen and (hover:hover) {
7551 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover,
7552 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label {
7553 text-shadow:
7554 0 0 1px #fff,
7555 0 0 2px #fff,
7556 0 0 2.5px #aaa;
7558 #edit-post-form .post-meta-fields input[type='checkbox'] + label:hover::before,
7559 #edit-post-form .post-meta-fields input[type='checkbox']:focus + label::before {
7560 border-color: #aaa;
7563 #edit-post-form .post-meta-fields input[type='checkbox']:checked + label::before {
7564 content: "\F00C";
7566 #edit-post-form input[type='radio'] + label {
7567 color: #777;
7568 border-color: #ddd;
7570 #edit-post-form input[type='radio'][value='all'] + label {
7571 border-radius: 8px 0 0 8px;
7572 border-width: 1px;
7574 #edit-post-form input[type='radio'][value='drafts'] + label {
7575 border-radius: 0 8px 8px 0;
7577 #edit-post-form input[type='radio'] + label:hover,
7578 #edit-post-form input[type='radio']:focus + label {
7579 background-color: #ddd;
7580 color: #000;
7582 #edit-post-form input[type='radio']:focus + label {
7583 color: #000;
7584 box-shadow:
7585 0 0 0 1px #aaa;
7587 #edit-post-form input[type='radio']:checked + label {
7588 background-color: #ddd;
7589 border-color: #ddd;
7590 color: #000;
7591 text-shadow:
7592 0 -1px 0 #fff,
7593 0 0.5px 0.5px #000;
7595 #edit-post-form #markdown-hints-checkbox + label {
7596 padding: 3px 0 0 14px;
7599 /*=======*/
7600 /* LINKS */
7601 /*=======*/
7604 text-decoration: none;
7605 color: #6a8a6b;
7607 a:visited {
7608 color: #8a8a8b;
7610 a:hover {
7611 color: #3d3d3e;
7614 /*=========*/
7615 /* BUTTONS */
7616 /*=========*/
7618 button,
7619 input[type='submit'] {
7620 color: #6a8a6b;
7623 button:hover,
7624 input[type='submit']:hover,
7625 button:focus,
7626 input[type='submit']:focus {
7627 color: #d00;
7629 button:active,
7630 input[type='submit']:active {
7631 color: #f00;
7632 transform: scale(0.9);
7634 .button:visited {
7635 color: #6a8a6b;
7637 .button:hover {
7638 color: #f00;
7639 text-decoration: none;
7641 .button:active {
7642 transform: scale(0.9);
7644 .button:focus:not(:hover) {
7645 transform: none;
7647 @-moz-document url-prefix() {
7648 .button:active {
7649 transform: none;
7653 /*==========*/
7654 /* HEADINGS */
7655 /*==========*/
7657 .body-text h1,
7658 .body-text h2,
7659 .body-text h4 {
7660 font-family: 'Arial', 'GW-Symbols', sans-serif;
7662 .body-text h3,
7663 .body-text h5,
7664 .body-text h6 {
7665 font-weight: 600;
7667 .body-text h6 {
7668 color: #555;
7670 .body-text h1 {
7671 border-bottom: 1px solid #aaa;
7674 /*========*/
7675 /* QUOTES */
7676 /*========*/
7678 blockquote {
7679 border-left: 5px solid #ccc;
7682 /*========*/
7683 /* IMAGES */
7684 /*========*/
7686 #content img,
7687 #content figure.image img {
7688 border: 1px solid #ccc;
7690 #content figure img {
7691 border: 1px solid #000;
7693 #content img[src$='.svg'],
7694 #content figure img[src$='.svg'] {
7695 border: none;
7697 #content img[style^='float'] {
7698 border: 1px solid transparent;
7701 /*========*/
7702 /* TABLES */
7703 /*========*/
7705 #content:not(.tag-index-page) .body-text table,
7706 #content:not(.tag-index-page) .body-text table th,
7707 #content:not(.tag-index-page) .body-text table td {
7708 border: 1px solid #bbb;
7711 /*======*/
7712 /* MISC */
7713 /*======*/
7715 hr {
7716 border-bottom: 1px solid #999;
7719 code {
7720 background-color: #f6f6ff;
7721 border: 1px solid #ddf;
7722 border-radius: 4px;
7725 input[type='text'],
7726 input[type='search'],
7727 input[type='password'] {
7728 background-color: #fff;
7729 border: 1px solid #ddd;
7730 color: #000;
7732 input[type='text']:focus,
7733 input[type='search']:focus,
7734 input[type='password']:focus {
7735 background-color: #ffd;
7736 border: 1px solid #bbb;
7737 box-shadow: 0 0 1px #bbb;
7740 select {
7741 color: #000;
7744 /*============*/
7745 /* ABOUT PAGE */
7746 /*============*/
7748 .about-page mark {
7749 background-color: #e6e6e6;
7750 text-decoration: none;
7751 box-shadow:
7752 0 -1px 0 0 #000 inset,
7753 0 -3px 1px -2px #000 inset;
7754 padding: 0 1px;
7757 #content.about-page .accesskey-table {
7758 font-family: 'Arial', 'GW-Symbols', sans-serif;
7759 border-color: #ddd;
7762 #content.about-page img {
7763 border: 1px solid #000;
7766 /*========================*/
7767 /* QUALIFIED HYPERLINKING */
7768 /*========================*/
7770 #aux-about-link a {
7771 color: #777;
7773 #aux-about-link a:hover {
7774 opacity: 1.0;
7777 .qualified-linking label {
7778 color: #6a8a6b;
7780 .qualified-linking label:hover {
7781 text-shadow:
7782 0 0 1px #fff,
7783 0 0 3px #fff,
7784 0 0 5px #00e;
7787 .qualified-linking-toolbar {
7788 border: 1px solid #000;
7789 background-color: #fff;
7791 .qualified-linking-toolbar a {
7792 background-color: #eee;
7793 border: 1px solid #ccc;
7794 border-radius: 4px;
7795 padding: 2px 12px;
7796 white-space: nowrap;
7798 .qualified-linking-toolbar a:visited {
7799 color: #6a8a6b;
7801 .qualified-linking-toolbar a:hover {
7802 text-decoration: none;
7803 background-color: #ddd;
7805 .qualified-linking label::after {
7806 background-color: #d8d8d8;
7807 opacity: 0.8;
7810 /*======*/
7811 /* MATH */
7812 /*======*/
7814 .mathjax-block-container::-webkit-scrollbar {
7815 height: 12px;
7816 background-color: #f6f6ff;
7817 border-radius: 6px;
7818 border: 1px solid #ddf;
7820 .mathjax-block-container::-webkit-scrollbar-thumb {
7821 background-color: #dde;
7822 border-radius: 6px;
7823 border: 1px solid #cce;
7825 .mathjax-inline-container::-webkit-scrollbar {
7826 height: 8px;
7827 background-color: #f6f6ff;
7828 border-radius: 4px;
7829 border: 1px solid #ddf;
7831 .mathjax-inline-container::-webkit-scrollbar-thumb {
7832 background-color: #dde;
7833 border-radius: 4px;
7834 border: 1px solid #cce;
7838 /*===============*/
7839 /* USER MENTIONS */
7840 /*===============*/
7842 .textarea-container .autocomplete-container {
7843 background-color: rgba(255, 255, 170, 0.75);
7844 border: 1px solid rgba(170, 170, 170, 0.75);
7847 .textarea-container .autocomplete-container div.highlighted {
7848 background-color: rgba(170, 170, 170, 0.75);
7849 color: #fff;
7852 .textarea-container .autocomplete-container div:not(.highlighted):hover {
7853 background-color: rgba(136, 136, 136, 0.25);
7856 .textarea-container .autocomplete-container div span.age,
7857 .textarea-container .autocomplete-container div span.karma {
7858 color: #888;
7861 .textarea-container .autocomplete-container div span.karma {
7862 width: 6.75em;
7866 /*=================*/
7867 /* ALIGNMENT FORUM */
7868 /*=================*/
7870 #content.alignment-forum-index-page::before {
7871 background-color: #f4f5ff;
7873 #content.alignment-forum-index-page::after {
7874 font-family: "Concourse SmallCaps";
7875 font-weight: 600;
7876 background-color: #7f85b2;
7877 color: transparent;
7878 -webkit-background-clip: text;
7879 text-shadow:
7880 rgba(255,255,255,0.5) 0px 3px 3px;
7882 @media only screen and (hover: hover) {
7883 #content.alignment-forum-index-page h1.listing a:hover,
7884 #content.alignment-forum-index-page h1.listing a:focus {
7885 background-color: rgba(244,245,255,0.85);
7889 /*====================*/
7890 /* FOR NARROW SCREENS */
7891 /*====================*/
7893 @media only screen and (max-width: 1440px) {
7894 #hns-date-picker {
7895 background-color: #d8d8d8;
7896 opacity: 1.0;
7898 #hns-date-picker::before {
7899 border: 1px solid #999;
7900 border-width: 1px 0 1px 1px;
7903 @media only screen and (max-width: 1160px) {
7904 #theme-selector {
7905 background-color: #d8d8d8;
7906 box-shadow:
7907 0 0 0 1px #999,
7908 0 0 0 2px transparent;
7910 #theme-selector:hover::after {
7911 width: calc(6em - 9px);
7912 height: calc(100% - 5px);
7913 top: 3px;
7914 left: 100%;
7916 #text-size-adjustment-ui button {
7917 background-color: #ddd;
7919 #text-size-adjustment-ui button:hover {
7920 background-color: #eee;
7922 #theme-tweaker-toggle button {
7923 background-color: #ddd;
7926 @media only screen and (max-width: 1080px) {
7927 #text-size-adjustment-ui button {
7928 border: 1px solid #999;
7929 padding: 0 0 0 1px;
7930 border-radius: 50%;
7931 box-shadow:
7932 0 0 6px #999 inset,
7933 0 0 0 1px transparent;
7935 #theme-tweaker-toggle button {
7936 border: 1px solid #999;
7937 box-shadow:
7938 0 0 10px #999 inset,
7939 0 0 0 1px transparent;
7940 border-radius: 50%;
7941 transform: scale(0.8);
7944 @media only screen and (max-width: 1020px) {
7945 #quick-nav-ui a {
7946 box-shadow:
7947 0 0 0 1px #999,
7948 0 0 0 2px transparent;
7950 #new-comment-nav-ui .new-comments-count::before {
7951 background-color: #d8d8d8;
7952 box-shadow:
7953 0 0 0 1px #999,
7954 0 0 0 2px transparent;
7955 border-radius: 8px;
7957 #anti-kibitzer-toggle {
7958 background-color: #d8d8d8;
7959 box-shadow:
7960 0 0 0 1px #999,
7961 0 0 0 2px transparent;
7962 border-radius: 6px;
7963 overflow: hidden;
7967 /*========*/
7968 /* MOBILE */
7969 /*========*/
7971 /*******************************************************/
7972 @media not screen and (hover:hover) and (pointer:fine) {
7973 /*******************************************************/
7974 #ui-elements-container > div[id$='-ui-toggle'] button {
7975 color: #aaa;
7976 text-shadow:
7977 0 0 1px #fff,
7978 0 0 3px #fff,
7979 0 0 5px #fff,
7980 0 0 10px #fff,
7981 0 0 20px #fff,
7982 0 0 30px #fff;
7985 #theme-selector {
7986 background-color: #d8d8d8;
7987 box-shadow:
7988 0 0 0 1px #999,
7989 0 0 1px 3px #fff,
7990 0 0 3px 3px #fff,
7991 0 0 5px 3px #fff,
7992 0 0 10px 3px #fff,
7993 0 0 20px 3px #fff;
7994 border-radius: 12px;
7996 #theme-selector::before,
7997 #theme-selector .theme-selector-close-button {
7998 color: #000;
7999 font-weight: normal;
8001 #theme-selector button {
8002 background-color: #e6e6e6;
8003 border-radius: 10px;
8005 #theme-selector button::after {
8006 color: #444;
8007 max-width: calc(100% - 3.5em);
8008 overflow: hidden;
8009 text-overflow: ellipsis;
8010 padding-bottom: 1px;
8012 #theme-selector button.selected::after {
8013 color: #000;
8014 text-shadow:
8015 0 -1px 0 #fff,
8016 0 0.5px 0.5px #000;
8019 #quick-nav-ui {
8020 background-color: #fff;
8022 #quick-nav-ui,
8023 #new-comment-nav-ui,
8024 #hns-date-picker {
8025 box-shadow:
8026 0 0 1px 3px #fff,
8027 0 0 3px 3px #fff,
8028 0 0 5px 3px #fff,
8029 0 0 10px 3px #fff,
8030 0 0 20px 3px #fff;
8032 #quick-nav-ui a::after,
8033 #new-comment-nav-ui::before {
8034 font-family: 'Arial', 'GW-Symbols', sans-serif;
8035 font-weight: bold;
8036 box-shadow:
8037 0 0 1px 0 #fff,
8038 0 0 3px 0 #fff,
8039 0 0 5px 0 #fff;
8040 background-color: #fff;
8041 border-radius: 4px;
8043 #quick-nav-ui,
8044 #new-comment-nav-ui {
8045 border-radius: 8px;
8047 #new-comment-nav-ui {
8048 background-color: #e4e4e4;
8049 border: 1px solid #999;
8051 #new-comment-nav-ui::before {
8052 color: #777;
8053 font-weight: bold;
8055 #new-comment-nav-ui .new-comment-sequential-nav-button {
8056 box-shadow: 0 0 0 1px #999;
8057 color: #538d4d;
8059 #new-comment-nav-ui .new-comment-sequential-nav-button:disabled {
8060 color: #bbb;
8062 #new-comment-nav-ui .new-comments-count {
8063 background-color: inherit;
8064 box-shadow: 0 -1px 0 0 #999;
8066 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-previous {
8067 border-radius: 7px 0 0 7px;
8069 #new-comment-nav-ui .new-comment-sequential-nav-button.new-comment-next {
8070 border-radius: 0 7px 7px 0;
8072 #new-comment-nav-ui button::after {
8073 font-family: 'Arial', 'GW-Symbols', sans-serif;
8075 #hns-date-picker {
8076 background-color: #e4e4e4;
8077 border: 1px solid #999;
8080 /*****************************************/
8081 @media only screen and (max-width: 900px) {
8082 /*****************************************/
8083 h1.listing + .post-meta .post-section {
8084 overflow: visible;
8085 order: -2;
8086 width: unset;
8088 h1.listing + .post-meta .post-section::before {
8089 position: unset;
8092 #primary-bar .nav-inner {
8093 font-size: 1.25em;
8095 .nav-bar-top:not(#primary-bar) .nav-inner {
8096 font-size: 1.125em;
8098 .nav-bar-top:not(#primary-bar) .nav-item:not(#nav-item-search) .nav-inner {
8099 padding: 6px 10px;
8102 .archive-nav *[class^='archive-nav-item-'] {
8103 border-width: 1px !important;
8105 .archive-nav > *[class^='archive-nav-'] + *[class^='archive-nav-']::before {
8106 background-color: #aaa;
8109 .comment-item .comment-item {
8110 margin: 0.75em 0 3px 6px;
8112 .comment-item .comment-item + .comment-item {
8113 margin: 1.5em 0 3px 6px;
8116 .sublevel-nav:not(.sort) .sublevel-item,
8117 .sublevel-nav:not(.sort) .sublevel-item:first-child,
8118 .sublevel-nav:not(.sort) .sublevel-item:last-child {
8119 border-radius: 8px;
8120 border-width: 1px;
8121 margin: 2px;
8123 /*******************************************/
8124 } @media only screen and (max-width: 720px) {
8125 /*******************************************/
8126 .post-meta .comment-count::before {
8127 font-family: inherit;
8128 font-size: inherit;
8129 margin: 0;
8131 /*******************************************/
8132 } @media only screen and (max-width: 520px) {
8133 /*******************************************/
8134 #primary-bar.inactive-bar .nav-inner {
8135 padding: 6px 10px;
8136 font-size: 1.375em;
8139 h1.listing {
8140 margin: 18px 6px 4px 6px;
8141 max-width: calc(100% - 12px);
8142 padding: 0;
8144 h1.listing .link-post-link {
8145 top: 2px;
8147 h1.listing + .post-meta {
8148 margin: 4px 6px;
8150 h1.listing + .post-meta > *:not(.karma) {
8151 line-height: 1.5;
8152 width: unset;
8154 h1.listing + .post-meta .karma-value {
8155 top: 0;
8156 right: calc(100% - 2.25em);
8159 #content.compact > .comment-thread .comment-item {
8160 max-height: 104px;
8163 .textarea-container:focus-within textarea {
8164 background-color: #fff;
8166 .textarea-container:focus-within .guiedit-mobile-auxiliary-button {
8167 padding: 6px;
8168 font-weight: bold;
8170 .textarea-container:focus-within .guiedit-mobile-help-button.active {
8171 box-shadow:
8172 0 0 0 2px #c00;
8173 color: #c00;
8175 .textarea-container:focus-within .guiedit-buttons-container {
8176 background-color: #fff;
8177 border-top: 1px solid #ddf;
8179 .posting-controls .textarea-container:focus-within .guiedit-buttons-container {
8180 box-shadow: none;
8182 #content.conversation-page .textarea-container:focus-within::after {
8183 background-color: #fff;
8185 .textarea-container:focus-within button.guiedit {
8186 border: 1px solid #6a8a6b;
8187 border-radius: 6px;
8190 #edit-post-form .post-meta-fields input[type='checkbox'] + label {
8191 top: 1px;
8193 #edit-post-form .post-meta-fields input[type='checkbox'] + label::before {
8194 top: 1px;
8197 #edit-post-form textarea {
8198 min-height: calc(100vh - 345px);
8203 /*************/
8204 /* ACCORDIUS */
8205 /*************/
8207 /*======*/
8208 /* TAGS */
8209 /*======*/
8211 #tags {
8212 order: 12;
8213 display: flex;
8214 flex-basis: 100%;
8215 justify-content: center;
8216 margin: 0;
8217 flex-flow: row wrap;
8218 align-items: flex-start;
8221 /*===============*/
8222 /* CLASSIC THEME */
8223 /*===============*/
8225 /*++++++*/
8226 /* TAGS */
8227 /*++++++*/
8229 #tags {
8230 padding: 0.25em 0.5em;
8231 line-height: 1;
8232 justify-content: flex-start;
8233 margin: 0.5em 0 0 0;
8235 #tags::before {
8236 content: "Tags:";
8237 margin: 0 0.25em 0 0;
8238 padding: 3px 0;
8239 color: #999;
8241 #tags a {
8242 border-radius: 6px;
8243 background-color: #fffec2;
8244 border: 1px solid #d9b600;
8245 padding: 3px 6px;
8246 line-height: 1;
8247 margin: 0.25em;
8248 font-size: 0.9375em;
8249 text-decoration: none;
8250 color: #537254;
8252 #tags a:hover {
8253 text-decoration: none;
8254 background-color: #ecc700;
8255 color: #000;
8257 #tags a:active {
8258 color: #d00;