skin for superlove.sayitditto.net
veryroundbird.house
gaslight-gatekeep-girlboss.css
1@import url('https://fonts.googleapis.com/css2?family=Mystery+Quest&family=Spicy+Rice&display=swap');
2
3/* TABLE OF CONTENTS
4 I. Animation Keyframes
5 II. Base Styles
6 III. Forms
7 IV. Main Nav
8 V. Homepage
9 VI. User
10 VII.Comments
11 VIII. Dashboard
12 IX. Works
13 X. Prefs
14 XI. News
15 XII. Tag Sets
16 XIII. Skins
17 XIV. Footer
18 XV. Widgets
19 XVI. Indices
20 XVII. Tags Index
21 XVIII. Searches
22 XIX. Docs
23 XX. Icons
24*/
25
26/* I. ANIMATION KEYFRAMES */
27
28@keyframes blinkie {
29 0% {
30 opacity: 1;
31 }
32
33
34 49% {
35 opacity: 1;
36 }
37
38 50% {
39 opacity: 0;
40 }
41
42 100% {
43 opacity: 0;
44 }
45}
46
47@keyframes flippy {
48 0% {
49 transform: rotateY(0);
50 }
51
52 100% {
53 transform: rotateY(1turn);
54 }
55}
56
57@keyframes spinny {
58 0% {
59 transform: rotateX(0);
60 }
61
62 100% {
63 transform: rotateX(1turn);
64 }
65}
66
67@keyframes reversy {
68 0% {
69 transform: rotateY(0);
70 }
71
72 49.9999% {
73 transform: rotateY(0);
74 }
75
76 50% {
77 transform: rotateY(.5turn);
78 }
79
80 100% {
81 transform: rotateY(1turn);
82 }
83}
84
85@keyframes jump {
86 from,
87 20%,
88 53%,
89 80%,
90 to {
91 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
92 transform: translate3d(0, 0, 0);
93 }
94
95 40%,
96 43% {
97 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
98 transform: translate3d(0, -15px, 0);
99 }
100
101 70% {
102 animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
103 transform: translate3d(0, -5px, 0);
104 }
105
106 90% {
107 transform: translate3d(0, -4px, 0);
108 }
109}
110
111/* II. BASE STYLES */
112
113:root {
114 --cfaa-gradient: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
115 --sunset-gradient: linear-gradient(90deg,rgba(255, 140, 0, 1) 0%, rgba(197, 185, 92, 1) 25%, rgba(199, 87, 171, 1) 50%, rgba(0, 0, 105, 1) 100%);
116 --hrbg: url(https://smallbirdpics.b-cdn.net/rentlowering/barnacles.gif);
117}
118
119* {
120 image-rendering: pixelated;
121 box-sizing: border-box;
122}
123
124body {
125 font-family: 'Comic Sans MS', 'Comic Sans', sans-serif;
126 font-size: 16px;
127 background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/hearts%203.gif);
128 margin: 0;
129 padding: 20px;
130}
131
132a {
133 color: mediumvioletred;
134 text-decoration: underline dotted;
135}
136
137hr {
138 width: 240px;
139 height: 26px;
140 background-image: var(--hrbg);
141 border: none;
142}
143
144h1 {
145 font-family: 'Mystery Quest', sans-serif;
146 font-size: 4rem;
147}
148
149h1 sup {
150 animation: blinkie 1s forwards infinite;
151}
152
153h1 a {
154 text-decoration: none;
155 color: mediumvioletred;
156}
157
158h1 a sup {
159 color: deeppink;
160}
161
162h2, h3 {
163 font-weight: normal;
164 font-family: 'Spicy Rice', sans-serif;
165 letter-spacing: 1px;
166}
167
168h2 {
169 text-align: center;
170 font-size: 2rem;
171 color: deeppink;
172}
173
174h2 .help.symbol.question {
175 display: inline-flex;
176 vertical-align: middle;
177}
178
179h3 {
180 color: deeppink;
181}
182
183kbd, pre {
184 background-color: rgba(255, 255, 255, .5);
185 border: 1px deeppink solid;
186 padding: 1px;
187}
188
189.logo {
190 animation: flippy 2s infinite forwards ease-in-out;
191 backface-visibility: visible;
192 vertical-align: middle;
193 margin-left: 12px;
194}
195
196#header {
197 text-align: center;
198}
199
200#skiplinks {
201 list-style: none;
202 margin: 0;
203 padding: 0;
204}
205
206.landmark, #skiplinks {
207 position: absolute;
208 top: 0;
209 left: 0;
210 width: 1px;
211 height: 1px;
212 overflow: hidden;
213 text-indent: -999px;
214}
215
216.tip {
217 display: block;
218 font-size: .8rem;
219 margin: .5rem 0;
220}
221
222.icon a {
223 display: inline-block;
224 position: relative;
225}
226
227.icon a:before {
228 content: "";
229 position: absolute;
230 top: 0;
231 left: 0;
232 width: 100%;
233 height: 100%;
234 z-index: 3;
235 background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/02d1f250748028e83d8e5f3ea636f581.gif);
236 background-size: 100px 100px;
237 mix-blend-mode: overlay;
238}
239
240.icon a:after {
241 content: "";
242 position: absolute;
243 top: 0;
244 left: 0;
245 width: 100%;
246 height: 100%;
247 z-index: 1;
248 box-shadow: inset 0 0 20px hotpink, inset 0 0 10px deeppink, inset 0 0 5px pink;
249}
250
251.icon a img {
252 display: block;
253}
254
255span.symbol.question {
256 background-color: mediumvioletred;
257 width: 20px;
258 height: 20px;
259 display: inline-block;
260 border-radius: 100%;
261 text-align: center;
262 color: white;
263 font-size: .9rem;
264 text-decoration: none;
265}
266
267.group {
268 list-style: none;
269 margin: 0;
270 padding: 0;
271}
272
273.group .heading {
274 font-size: 1.2rem;
275 margin: 0;
276}
277
278.group .heading a {
279 color: inherit;
280 text-decoration: none;
281}
282
283.group .datetime {
284 font-size: .8rem;
285 margin: 0;
286}
287
288.required-tags {
289 list-style: none;
290 margin: 0;
291 padding: 0;
292 display: grid;
293 grid-template-columns: repeat(2, 25px);
294 grid-template-rows: auto repeat(2, 25px) 1fr;
295 grid-template-areas: "medium medium"
296 "rating warnings"
297 "pairing complete";
298 gap: 3px;
299}
300
301.required-tags li {
302 aspect-ratio: 1 / 1;
303 overflow: hidden;
304 text-indent: -999px;
305 border: 1px mediumvioletred solid;
306}
307
308.required-tags li:nth-child(1) {
309 grid-area: rating;
310}
311
312.required-tags li:nth-child(2) {
313 grid-area: warnings;
314}
315
316.required-tags li:nth-child(3) {
317 grid-area: pairing;
318}
319
320.required-tags li:nth-child(4) {
321 grid-area: medium;
322 padding: 2px;
323 background-color: mediumvioletred;
324 color: white;
325 font-size: .6rem;
326 aspect-ratio: auto;
327 text-indent: 0;
328 text-align: center;
329 text-transform: lowercase;
330}
331
332.required-tags li:nth-child(4) a {
333 color: white;
334 text-decoration: none;
335}
336
337.required-tags li:nth-child(5) {
338 grid-area: complete;
339}
340
341.required-tags span {
342 width: 100%;
343 height: 100%;
344 display: block;
345}
346
347.blurb {
348 display: grid;
349 grid-template-areas: "header header"
350 "tags tags"
351 "summary summary"
352 "series series"
353 "bookmark bookmark"
354 "actions stats"
355 "divider divider";
356 gap: 10px;
357 position: relative;
358 grid-template-columns: auto 1fr;
359}
360
361@media only screen and (max-width: 768px) {
362 .blurb {
363 grid-template-areas: "header"
364 "tags"
365 "summary"
366 "series"
367 "bookmark"
368 "actions"
369 "stats"
370 "divider";
371 }
372
373 .blurb .actions {
374 justify-content: center;
375 }
376
377 .blurb dl.stats {
378 justify-content: center;
379 }
380}
381
382.blurb:after {
383 content: "";
384 width: 240px;
385 height: 26px;
386 background-image: var(--hrbg);
387 margin: 2rem auto;
388 grid-area: divider;
389}
390
391.blurb:last-of-type:after {
392 display: none;
393}
394
395.blurb .header {
396 display: grid;
397 grid-template-areas: "icons title"
398 "icons fandom"
399 "icons date";
400 grid-template-columns: auto 1fr;
401 gap: 0 10px;
402 grid-area: header;
403}
404
405.blurb .header h4 {
406 grid-area: title;
407 font-family: 'Spicy Rice', sans-serif;
408 font-weight: normal;
409}
410
411.blurb .header h5 {
412 grid-area: fandom;
413 font-size: 1rem;
414}
415
416.blurb .tags {
417 grid-area: tags;
418}
419
420.blurb .summary {
421 margin: 0;
422 grid-area: summary;
423}
424
425.blurb .series {
426 grid-area: series;
427 list-style: none;
428 margin: 0;
429 padding: 0;
430}
431
432.blurb .user.module {
433 grid-area: bookmark;
434 border: 1px deeppink dotted;
435 padding: 10px;
436}
437
438.blurb .user.module > blockquote {
439 margin-left: 0;
440}
441
442.blurb .user.module blockquote blockquote {
443 border-left: 3px deeppink solid;
444 padding-left: 10px;
445 margin-left: 10px;
446}
447
448#main .blurb > .actions {
449 grid-area: actions;
450 margin: 0;
451 justify-content: flex-start;
452}
453
454.blurb .stats {
455 grid-area: stats;
456 justify-content: right;
457 flex-wrap: wrap;
458}
459
460.blurb .required-tags {
461 grid-area: icons;
462}
463
464.work.blurb .summary {
465 grid-area:summary;
466}
467
468#main .work.blurb .actions {
469 grid-area: actions;
470 justify-content: flex-start;
471 flex-wrap: nowrap;
472}
473
474.tagset.blurb .header {
475 grid-template-areas: "icon title date"
476 "icon owners owners";
477 gap: 5px 10px;
478 border-bottom: 1px deeppink dotted;
479 padding-bottom: 5px;
480}
481
482.tagset.blurb .header:has(.mods:nth-of-type(2)) {
483 grid-template-areas: "icon title date"
484 "icon owners owners"
485 "icon mods mods";
486}
487
488.tagset.blurb .header .icon {
489 grid-area: icon;
490 aspect-ratio: 1 / 1;
491 width: 50px;
492 background-color: deeppink;
493}
494
495.tagset.blurb .header .icon:empty {
496 display: flex;
497 justify-content: center;
498 align-items: center;
499}
500
501.tagset.blurb .header .icon:empty:before {
502 content: "🏷️";
503}
504
505.tagset.blurb .header h4.heading {
506 grid-area: title;
507}
508
509.tagset.blurb .header .datetime {
510 margin: 0;
511 grid-area: date;
512}
513
514.tagset.blurb .header .mods {
515 list-style: none;
516 margin: 0;
517 padding: 0;
518 display: flex;
519 flex-wrap: wrap;
520}
521
522.tagset.blurb .header .mods li:after {
523 content: ", ";
524}
525
526.tagset.blurb .header .mods li:last-of-type:after {
527 display: none;
528}
529
530.tagset.blurb .header .mods:before {
531 font-weight: bold;
532 margin-right: 3px;
533}
534
535.tagset.blurb .header .mods:nth-of-type(1) {
536 grid-area: owners;
537}
538
539.tagset.blurb .header .mods:nth-of-type(1):before {
540 content: "Owners: ";
541}
542
543.tagset.blurb .header .mods:nth-of-type(2) {
544 grid-area: mods;
545}
546
547.tagset.blurb .header .mods:nth-of-type(2):before {
548 content: "Mods: ";
549}
550
551.tagset.blurb .summary p {
552 margin-top: 0;
553}
554
555.tagset.blurb .summary p:last-of-type {
556 margin-bottom: 0;
557}
558
559.series.blurb .actions {
560 margin: 0;
561 grid-area: actions;
562}
563
564.series.blurb .actions a {
565 width: 88px;
566 height: 31px;
567 display: flex;
568 justify-content: center;
569 align-items: center;
570 font-size: .6rem;
571 line-height: .6rem;
572 color: mediumvioletred;
573 background-color: white;
574 border: 3px mediumvioletred outset;
575 font-weight: bold;
576 text-decoration: none;
577 gap: 5px;
578}
579
580.series.blurb .actions a:before,
581.series.blurb .actions a:after {
582 content: "♥︎";
583 font-size: .8rem;
584}
585
586.bookmark {
587 display: grid;
588 gap: 10px;
589}
590
591.bookmark .user.blurb {
592 grid-template-areas:
593 "header"
594 "summary";
595 grid-template-columns: auto;
596 border: 1px deeppink dotted;
597 padding: 10px;
598}
599
600.bookmark .user .header {
601 display: grid;
602 grid-template-areas: "status heading"
603 "status datetime";
604 position: relative;
605}
606
607.bookmark .user .header .byline {
608 grid-area: heading;
609}
610
611.bookmark .user .header .datetime {
612 grid-area: datetime;
613}
614
615.bookmark .user .header .status {
616 grid-area: status;
617 margin: 0;
618}
619
620.bookmark .user .summary blockquote {
621 border-left: 3px mediumvioletred solid;
622 padding-left: 20px;
623 margin: .5rem 0 .5rem 20px;
624}
625
626.bookmark .user .summary p {
627 margin-top: 0;
628}
629
630.bookmark .user .summary p:last-child {
631 margin-bottom: 0;
632}
633
634.bookmark .blurb > .status {
635 position: absolute;
636 top: 0;
637 right: 0;
638 margin: 0;
639 display: flex;
640}
641
642.bookmark .blurb > .status .count {
643 text-align: center;
644 font-size: .8rem;
645 font-weight: bold;
646 display: flex;
647 justify-content: center;
648 align-items: center;
649}
650
651.bookmark .blurb > .status .count a {
652 text-decoration: none;
653}
654
655.collection.blurb {
656 grid-template-areas: "header header"
657 "summary summary"
658 "type type"
659 "actions stats"
660 "divider divider";
661 gap: 10px;
662}
663
664.collection.blurb .header {
665 grid-area: header;
666 display: grid;
667 grid-template-areas: "icon title"
668 "icon datetime";
669 gap: 0 10px;
670 grid-template-rows: auto 1fr;
671 grid-template-columns: auto 1fr;
672}
673
674.collection.blurb .header .icon {
675 grid-area: icon;
676}
677
678.collection.blurb .header h4.heading {
679 grid-area: title;
680}
681
682.collection.blurb .header .datetime {
683 grid-area: datetime;
684}
685
686.collection.blurb .summary {
687 grid-area: summary
688}
689
690.collection.blurb .type {
691 grid-area: type;
692 margin: 0;
693 font-size: .8rem;
694}
695
696.collection.blurb .actions {
697 grid-area: actions;
698}
699
700.collection.blurb .stats {
701 grid-area: stats;
702 display: flex;
703 justify-content: flex-end;
704}
705
706.listbox .index.group {
707 list-style: none;
708 margin: 0;
709 padding: 0;
710}
711
712.listbox .index.group > li {
713 margin-bottom: 1rem;
714}
715
716.listbox > ul.actions {
717 width: 100%;
718}
719
720.listbox > ul.actions li {
721 width: 100%;
722}
723
724.listbox > ul.actions a {
725 font-size: 1.2rem;
726 text-align: center;
727 width: calc(100% + 40px);
728 margin: 0 -20px -20px;
729 height: auto;
730 line-height: 1;
731 padding: .5rem 0;
732 background-color: deeppink;
733 color: white;
734 border: none;
735}
736
737.listbox > ul.actions a:before,
738.listbox > ul.actions a:after {
739 display: none;
740}
741
742#inner:before {
743 content: "";
744 width: 287px;
745 height: 36px;
746 background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/heartbows.gif);
747 background-size: contain;
748 display: block;
749 margin: 2rem auto;
750}
751
752#main ul.actions {
753 display: flex;
754 flex-wrap: wrap;
755 list-style: none;
756 margin: 0;
757 padding: 0;
758 justify-content: center;
759 align-items: flex-start;
760 gap: 10px;
761 grid-area: nav;
762}
763
764#main ul.actions a,
765#main ul.actions form,
766#main ul.actions .current,
767.create ul.actions li {
768 width: 88px;
769 height: 31px;
770 font-size: .7rem;
771 border: 3px outset;
772 line-height: .6rem;
773 text-align: center;
774 background: white;
775 text-decoration: none;
776 display: flex;
777 justify-content: center;
778 padding: 0 2px;
779 align-items: center;
780 border-color: mediumvioletred;
781 gap: 2px;
782}
783
784#main ul.actions .current {
785 background-color: mediumvioletred;
786 color: white;
787}
788
789#main ul.actions input[type="submit"],
790.create ul.actions input[type="submit"] {
791 font-family: inherit;
792 color: mediumvioletred;
793 font-size: .7rem;
794 line-height: .6rem;
795 background-color: transparent;
796 border: none;
797 padding: 0;
798 margin: 0;
799 white-space: pre-wrap;
800}
801
802#main ul.actions a:before,
803#main ul.actions form:before,
804#main ul.actions .current:before,
805#main ul.actions a:after,
806#main ul.actions form:after,
807#main ul.actions .current:after,
808.create ul.actions li:before,
809.create ul.actions li:after {
810 content: "♥︎";
811 color: mediumvioletred;
812 font-size: .8rem;
813 pointer-events: none;
814}
815
816#main ul.actions .current:before,
817#main ul.actions .current:after {
818 color: white;
819}
820
821/* III. FORMS */
822
823input[type="text"],
824input[type="number"] {
825 border: 1px mediumvioletred solid;
826 padding: .25rem;
827 font-family: inherit;
828 width: 100%;
829 max-width: 300px;
830}
831
832textarea {
833 border: 1px mediumvioletred solid;
834 width: 100%;
835 max-width: 800px;
836}
837
838textarea.comment_form {
839 height: 200px;
840}
841
842textarea.large {
843 height: 1000px;
844}
845
846[role="alert"].LV_invalid {
847 display: block;
848 border: 4px mediumvioletred double;
849 margin: 0.5rem 0;
850 background-color: white;
851 padding: 5px;
852 font-size: .8rem;
853 max-width: 800px;
854}
855
856fieldset {
857 border: 2px deeppink groove;
858 margin-bottom: 1rem;
859}
860
861fieldset.group {
862 padding: 10px
863}
864
865fieldset legend {
866 font-size: 1.25rem;
867 font-weight: normal;
868 letter-spacing: 1px;
869 font-family: 'Spicy Rice', sans-serif;
870}
871
872fieldset h4 {
873 margin: 0;
874}
875
876fieldset ul {
877 list-style: none;
878 margin: 0 0 1rem;
879 padding: 0;
880}
881
882fieldset dl {
883 display: grid;
884 grid-template-columns: auto 1fr;
885 gap: 10px;
886}
887
888fieldset dl dt {
889 font-weight: bold;
890}
891
892.submit input[type="submit"] {
893 padding: .25rem 1rem;
894 border: none;
895 font-family: inherit;
896 background-color: mediumvioletred;
897 border: 3px mediumvioletred outset;
898 color: white;
899 font-size: 1rem;
900 font-weight: bold;
901}
902
903/* IV. MAIN NAV */
904
905.primary.navigation.actions {
906 list-style: none;
907 margin: 2rem auto;
908 padding: 0;
909 columns: 2 200px;
910 gap: 2rem;
911 max-width: 1100px;
912}
913
914.primary.navigation.actions > li {
915 margin-bottom: 1rem;
916}
917
918.primary.navigation.actions .dropdown-toggle {
919 color: inherit;
920 text-decoration: none;
921 font-family: 'Spicy Rice';
922 font-size: 2rem;
923 letter-spacing: 2px;
924}
925
926.primary.navigation.actions ul {
927 display: flex;
928 flex-wrap: wrap;
929 gap: 10px;
930 list-style: none;
931 margin: 0;
932 padding: 0;
933 justify-content: center;
934 align-items: center;
935}
936
937.primary.navigation.actions [href="/menu/links"] + ul {
938 display: flex;
939 gap: 10px;
940 justify-content: center;
941 align-items: stretch;
942}
943
944.primary.navigation.actions [href="/menu/links"] + ul li a {
945 border: 2px deeppink outset;
946 background-color: white;
947 font-family: 'Mystery Quest';
948 font-size: 1.25rem;
949 padding: 1rem;
950 color: deeppink;
951 text-decoration: none;
952 width: 200px;
953 height: 100%;
954 display: inline-flex;
955 align-items: center;
956 justify-content: center;
957 line-height: .95rem;
958 box-sizing: border-box;
959}
960
961.primary.navigation.actions [href="/menu/links"] + ul li a[href*="squidgeworld"] {
962 background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/plaid-gold.jpg);
963 border-color: sandybrown;
964 color: sienna;
965}
966
967.primary.navigation.actions [href="/menu/links"] + ul li a[href*="adastra"] {
968 background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/purple-glitter.gif);
969 border-color: white;
970 color: white;
971 font-size: 1.5rem
972}
973
974.primary.navigation.actions [href="/menu/links"] + ul li a[href*="cfaarchive"] {
975 background-image: var(--cfaa-gradient);
976 border-color: black;
977 color: black;
978 box-shadow: inset 0 -10px 10px rgba(0,0,0,.5);
979}
980
981.primary.navigation.actions [href="/menu/links"] + ul li a[href*="sunset"] {
982 background-image: var(--sunset-gradient);
983 border-color: white;
984 color: pink;
985 font-size: 2rem
986}
987
988/* V. HOMEPAGE */
989
990#greeting {
991 display: inline-grid;
992 grid-template-areas: "icon actions";
993 max-width: 880px;
994 margin: 0 auto;
995 gap: 10px;
996}
997
998#greeting .icon {
999 grid-area: icon;
1000}
1001
1002#greeting .user.navigation.actions {
1003 grid-area: actions;
1004 display: block;
1005 text-align: left;
1006}
1007
1008#greeting .user.navigation.actions li {
1009 margin-top: 0;
1010}
1011
1012.splash {
1013 display: grid;
1014 grid-template-areas: "welcome welcome"
1015 "navigation navigation"
1016 "news messages";
1017 gap: 3rem 2rem;
1018 max-width: 1200px;
1019 margin: 0 auto;
1020}
1021
1022@media only screen and (max-width: 480px) {
1023 .splash {
1024 grid-template-areas: "welcome"
1025 "navigation"
1026 "news"
1027 "messages";
1028 gap: 2rem;
1029 }
1030}
1031
1032.splash:before {
1033 content: "";
1034 width: 190px;
1035 height: 70px;
1036 background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/welcome7.gif);
1037 margin: 1rem auto 2rem;
1038 display: block;
1039 grid-area: welcome
1040}
1041
1042.splash .browse {
1043 text-align: center;
1044 grid-area: navigation;
1045}
1046
1047.splash .browse .heading {
1048 animation: jump 1s infinite;
1049 font-size: 1.5rem;
1050 font-weight: normal;
1051 letter-spacing: 2px;
1052 margin-bottom: 0;
1053}
1054
1055.splash .browse ul {
1056 list-style: none;
1057 margin: 0 auto;
1058 padding: 0;
1059 display: flex;
1060 flex-wrap: wrap;
1061 gap: 10px;
1062 justify-content: center;
1063 max-width: 1100px;
1064}
1065
1066.news.module {
1067 grid-area: news;
1068 max-width: 50rem;
1069}
1070
1071.messages.module {
1072 grid-area: messages;
1073}
1074
1075.news h3,
1076.messages.module h3 {
1077 font-size: 1.5rem;
1078 margin-bottom: 0;
1079 display: flex;
1080 justify-content: space-between;
1081}
1082
1083.news.module h3 .link:after,
1084.messages.module h3 .link:after {
1085 content: " ➤";
1086 display: inline-block;
1087 animation: 1s spinny infinite;
1088 color: mediumvioletred;
1089 margin-left: 10px;
1090}
1091
1092.news.module {
1093 grid-area: news;
1094}
1095
1096.messages.module {
1097 grid-area: messages;
1098}
1099
1100.news .meta {
1101 margin: 0;
1102 font-size: .8rem;
1103}
1104
1105.news.group {
1106 background-color: white;
1107 padding: 20px;
1108}
1109
1110.news.group li > blockquote {
1111 margin-left: 0;
1112}
1113
1114.news.group .jump a {
1115 font-weight: bold;
1116}
1117
1118.news.group .group li:after,
1119.news[role="article"]:after {
1120 content: "";
1121 display: block;
1122 width: 240px;
1123 height: 26px;
1124 margin: 2rem auto 0;
1125 background-image: var(--hrbg);
1126}
1127
1128.news.group .group li:last-child:after,
1129.news[role="article"]:last-of-type:after {
1130 display: none;
1131}
1132
1133/* VI. USER */
1134
1135.user.navigation.actions {
1136 list-style: none;
1137 display: flex;
1138 margin: 1em 0;
1139 padding: 0;
1140 justify-content: center;
1141}
1142
1143.user.navigation.actions > li {
1144 margin: 1em 0;
1145}
1146
1147.user.navigation.actions .dropdown-toggle {
1148 font-weight: bold;
1149}
1150
1151.user.navigation.actions ul {
1152 display: inline-flex;
1153 justify-content: center;
1154 flex-wrap: wrap;
1155 list-style: none;
1156 margin: 0 20px 0 0;
1157 padding: 0;
1158 gap: 10px;
1159}
1160
1161.user.navigation.actions ul:before {
1162 content: " ✦ ";
1163 color: deeppink;
1164 display: inline-block;
1165 animation: reversy 1s forwards infinite;
1166}
1167
1168.user.profile > .navigation.actions {
1169 grid-area: nav;
1170 justify-content: center;
1171}
1172
1173.user.home {
1174 display: grid;
1175 grid-template-areas:
1176 "header header"
1177 "fandoms list"
1178 "fandoms series";
1179 max-width: 1100px;
1180 margin: 0 auto;
1181 gap: 2rem;
1182}
1183
1184.user.profile {
1185 text-align: center;
1186 display: grid;
1187 margin: 2rem auto;
1188 grid-template-areas: "header header"
1189 "heading heading"
1190 "details bio"
1191 "nav nav";
1192 grid-template-columns: 300px 1fr;
1193 gap: 10px;
1194 max-width: 1100px;
1195}
1196
1197@media only screen and (max-width: 768px) {
1198 .user.profile {
1199 grid-template-areas: "header"
1200 "heading"
1201 "details"
1202 "bio"
1203 "nav";
1204 grid-template-columns: auto;
1205 }
1206}
1207
1208.user .fandom.listbox {
1209 grid-area: fandoms;
1210}
1211
1212.user .fandom.listbox ol {
1213 list-style: none;
1214 margin: 0;
1215 padding: 0;
1216}
1217
1218#user-works,
1219#user-series {
1220 background-color: white;
1221 padding: 20px;
1222 max-width: 800px;
1223 margin: 0 auto;
1224}
1225
1226#user-works {
1227 grid-area: list;
1228}
1229
1230#user-series {
1231 grid-area: series;
1232}
1233
1234#user-works > ul.actions {
1235 width: calc(100% + 40px);
1236}
1237
1238#user-works > ul.actions a {
1239 display: block;
1240 padding: 10px;
1241 background-color: deeppink;
1242 color: white;
1243 text-align: center;
1244 border: none;
1245 width: 100%;
1246 height: auto;
1247 font-size: 1.2rem;
1248 font-weight: bold;
1249 line-height: 1;
1250}
1251
1252.user .primary.header {
1253 display: inline-grid;
1254 grid-template-areas: "icon headline"
1255 "icon nav";
1256 grid-template-columns: 100px 1fr;
1257 grid-template-rows: auto 1fr;
1258 gap: 10px;
1259 margin: 2rem auto 0;
1260 text-align: left;
1261 grid-area: header;
1262}
1263
1264.user .primary.header .icon {
1265 grid-area: icon;
1266}
1267
1268.user .primary.header h2 {
1269 margin-bottom: 0;
1270 font-family: 'Spicy Rice', sans-serif;
1271 font-size: 2rem;
1272 font-weight: normal;
1273 letter-spacing: 1px;
1274}
1275
1276.user h3.heading {
1277 font-size: 1.5rem;
1278 text-shadow: 1px 1px 0 white;
1279 grid-area: heading;
1280}
1281
1282.user .wrapper {
1283 display: flex;
1284 text-align: left;
1285 margin: 0 auto;
1286 grid-area: details;
1287}
1288
1289.user .wrapper dl {
1290 margin: 0;
1291}
1292
1293.user .bio {
1294 text-align: left;
1295 padding: 20px;
1296 background-color: white;
1297}
1298
1299.user .bio h3 {
1300 margin: 0;
1301}
1302
1303.user .bio > blockquote.userstuff {
1304 margin: 0;
1305}
1306
1307/* VII. COMMENTS */
1308
1309li.comment.group {
1310 display: grid;
1311 grid-template-areas: "heading heading"
1312 "icon userstuff"
1313 "actions actions";
1314 margin-bottom: 2rem;
1315 padding-bottom: 2rem;
1316 gap: 0.25rem 1rem;
1317 position: relative;
1318 grid-template-columns: 100px 1fr;
1319}
1320
1321li.comment.group:after {
1322 content: "";
1323 width: 100%;
1324 height: 0;
1325 border-top: 2px deeppink groove;
1326 background-color: transparent;
1327 position: absolute;
1328 bottom: 0;
1329 left: 0;
1330}
1331
1332li.comment.group:last-child {
1333 margin-bottom: 0;
1334 padding-bottom: 0;
1335}
1336
1337li.comment.group:last-child:after {
1338 display: none;
1339}
1340
1341li.comment.group .heading {
1342 grid-area: heading;
1343}
1344
1345li.comment.group .icon {
1346 grid-area: icon;
1347}
1348
1349li.comment.group .userstuff {
1350 grid-area: userstuff;
1351 margin: 0;
1352}
1353
1354li.comment.group .userstuff p {
1355 margin-top: 0;
1356}
1357
1358li.comment.group ul.actions {
1359 grid-area: actions;
1360 margin: 0;
1361 padding: 0;
1362 list-style: none;
1363 display: flex;
1364 justify-content: flex-end;
1365 font-size: .8rem;
1366 gap: 10px;
1367}
1368
1369li.unread.comment.group .actions input[type="submit"] {
1370 border: none;
1371 background-color: transparent;
1372 padding: 0;
1373 margin: 0;
1374 font-family: inherit;
1375 color: inherit;
1376 color: mediumvioletred;
1377 text-decoration: underline dotted;
1378 cursor: pointer;
1379}
1380
1381#feedback {
1382 max-width: 1100px;
1383 margin: 2rem auto;
1384}
1385
1386#add_comment_placeholder {
1387 background-color: white;
1388 padding: 20px;
1389}
1390
1391#comments_placeholder {
1392 padding: 20px;
1393 background-color: white;
1394 margin: 1em 0;
1395}
1396
1397#comments_placeholder ol {
1398 margin: 0;
1399 padding: 0;
1400 list-style: none;
1401}
1402
1403#comments_placeholder ol ol {
1404 margin-left: 20px;
1405}
1406
1407#comments_placeholder ol.thread li .actions {
1408 grid-area: actions;
1409}
1410
1411/* VIII. DASHBOARD */
1412
1413#dashboard {
1414 text-align: center;
1415}
1416
1417#dashboard ul {
1418 display: flex;
1419 flex-wrap: wrap;
1420 justify-content: center;
1421 gap: 20px;
1422 margin: 0 0 1rem;
1423 padding: 0;
1424 list-style: none;
1425}
1426
1427#dashboard ul .current {
1428 font-weight: bold;
1429}
1430
1431#dashboard ul .current:before {
1432 content: "✦ ";
1433 color: deeppink;
1434}
1435
1436#dashboard ul .current:after {
1437 content: " ✦";
1438 color: deeppink;
1439}
1440
1441/* IX. WORKS */
1442
1443.works-new {
1444 max-width: 1100px;
1445 margin: 2rem auto;
1446}
1447
1448.work.actions,
1449.series.actions {
1450 list-style: none;
1451 margin: 0;
1452 padding: 0;
1453 display: flex;
1454 flex-wrap: wrap;
1455 justify-content: flex-end;
1456 gap: 10px;
1457}
1458
1459.work.actions input[type="submit"],
1460.series.actions input[type="submit"] {
1461 border: none;
1462 background-color: transparent;
1463 font-family: inherit;
1464 color: mediumvioletred;
1465 font-size: inherit;
1466 text-decoration: underline dotted;
1467 padding: 0;
1468 cursor: pointer;
1469}
1470
1471.works-show .wrapper,
1472.series-show .wrapper {
1473 max-width: 1100px;
1474 margin: 2rem auto;
1475 text-shadow: 1px 1px 1px rgba(255,255,255,1);
1476}
1477
1478.works-show h2.heading,
1479.series-show h2.heading {
1480 margin-bottom: 0;
1481 color: deeppink;
1482 font-size: 3rem;
1483 font-weight: normal;
1484}
1485
1486.works-show h3.byline {
1487 text-align: center;
1488 font-family: 'Comic Sans MS', sans-serif;
1489 color: black;
1490 margin: 0;
1491}
1492
1493.works-show h3.byline:before {
1494 content: "by ";
1495}
1496
1497.works-show .notes,
1498.works-show .summary {
1499 max-width: 800px;
1500 margin: 2rem auto;
1501 text-shadow: 1px 1px 1px rgba(255,255,255,1);
1502}
1503
1504.works-show .notes h3,
1505.works-show .summary h3 {
1506 margin-bottom: 0;
1507}
1508
1509.works-show .notes blockquote,
1510.works-show .summary blockquote,
1511.blurb .summary blockquote {
1512 margin-top: 0;
1513 border-left: 3px mediumvioletred solid;
1514 margin-left: 20px;
1515 padding-left: 20px;
1516}
1517
1518.works-show .notes blockquote p:first-child,
1519.works-show .summary blockquote p:first-child {
1520 margin-top: 0;
1521}
1522
1523#chapters {
1524 background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/giphy.gif);
1525 padding: 20px;
1526 max-width: 1100px;
1527 margin: 1rem auto;
1528}
1529
1530#chapters .userstuff {
1531 padding: 20px;
1532 background-color: white;
1533}
1534
1535dl.meta {
1536 display: grid;
1537 grid-template-columns: auto 1fr;
1538 gap: 10px;
1539}
1540
1541dl.meta dt {
1542 font-weight: bold;
1543}
1544
1545dl.stats {
1546 display: flex;
1547}
1548
1549dl.stats dt {
1550 font-weight: bold;
1551}
1552
1553dl.stats dd {
1554 margin-left: 5px;
1555 margin-right: 1rem;
1556}
1557
1558dl.stats dd:last-of-type {
1559 margin-right: 0;
1560}
1561
1562.tags {
1563 list-style: none;
1564 margin: 0;
1565 padding: 0;
1566}
1567
1568.tags li {
1569 display: inline;
1570}
1571
1572.tags li:after {
1573 content: ", ";
1574}
1575
1576.tags li:last-child:after {
1577 content: "";
1578}
1579
1580/* X. PREFS & BIG FORMS */
1581
1582.edit_preference,
1583form.skin,
1584form.import,
1585form.post,
1586#new_tag_search,
1587#new_bookmark_search,
1588#new_people_search,
1589#new_work_search {
1590 background-color: white;
1591 padding: 20px;
1592 max-width: 1100px;
1593 margin: 2rem auto;
1594}
1595
1596dt.restricted,
1597dt.restrict,
1598dt.moderated {
1599 text-align: right;
1600}
1601
1602/* XI. NEWS */
1603
1604#inner:has(.admin_posts-index) {
1605 display: grid;
1606 grid-template-areas: "divider divider"
1607 "dashboard news";
1608 grid-template-columns: 300px 1fr;
1609 gap: 2rem;
1610 max-width: 1100px;
1611 margin: 2rem auto;
1612}
1613
1614@media only screen and (max-width: 768px) {
1615 #inner:has(.admin_posts-index) {
1616 grid-template-areas: "divider"
1617 "dashboard"
1618 "news";
1619 grid-template-columns: auto;
1620 gap: 1rem;
1621 }
1622}
1623
1624#inner:has(.admin_posts-index):before {
1625 grid-area: divider;
1626 padding-bottom: 5rem;
1627 background-repeat: no-repeat;
1628}
1629
1630#inner:has(.admin_posts-index) #dashboard {
1631 grid-area: dashboard;
1632 text-align: left;
1633}
1634
1635#inner:has(.admin_posts-index) #dashboard ul {
1636 display: block;
1637}
1638
1639#inner:has(.admin_posts-index) #dashboard ul li {
1640 margin-bottom: .5rem;
1641}
1642
1643#inner:has(.admin_posts-index) #main {
1644 grid-area: news;
1645}
1646
1647#inner:has(.admin_posts-index) #main h2 {
1648 margin-top: -3em;
1649}
1650
1651#inner:has(.admin_posts-index) #main h2 a {
1652 color: inherit;
1653 text-decoration: none;
1654}
1655
1656#inner:has(.admin_posts-index) #main .navigation.actions {
1657 align-items: center;
1658}
1659
1660#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"] {
1661 width: auto;
1662 height: auto;
1663 border: none;
1664 padding: 0;
1665 background-color: transparent;
1666}
1667
1668#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"] label {
1669 font-weight: bold;
1670}
1671
1672#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"]:before,
1673#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"]:after {
1674 display: none;
1675}
1676
1677#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"] #tag {
1678 margin-right: 10px;
1679}
1680
1681#inner:has(.admin_posts-index) #main .navigation.actions form[action="/admin_posts"] input[type="submit"] {
1682 background-color: mediumvioletred;
1683 border: 3px mediumvioletred outset;
1684 padding: 3px 5px;
1685 color: white;
1686}
1687
1688#inner:has(.admin_posts-index) #main .news.module {
1689 max-width: none;
1690}
1691
1692#inner:has(.admin_posts-index) #main hr.clear {
1693 display: none;
1694}
1695
1696/* XII. TAG SETS */
1697
1698.owned_tag_sets-show {
1699 max-width: 1100px;
1700 margin: 2rem auto;
1701}
1702
1703.owned_tag_sets-show .index.group {
1704 background-color: white;
1705 padding: 20px;
1706}
1707
1708.owned_tag_sets-show dl.meta .mods {
1709 list-style: none;
1710 margin: 0;
1711 padding: 0;
1712}
1713
1714.owned_tag_sets-show dl.meta .mods li {
1715 display: inline;
1716}
1717
1718.owned_tag_sets-show dl.meta .mods li:after {
1719 content: ", ";
1720}
1721
1722.owned_tag_sets-show dl.meta .mods li:last-of-type:after {
1723 display: none;
1724}
1725
1726.owned_tag_sets-show dl.meta dd p {
1727 margin-top: 0;
1728}
1729
1730#list_for_unassociated_char_and_rel {
1731 padding: 20px;
1732}
1733
1734/* XIII. SKINS */
1735
1736.skins.home,
1737.skins-index {
1738 max-width: 1100px;
1739 margin: 2rem auto;
1740}
1741
1742.skins.home .css.module {
1743 padding: 20px;
1744 background-color: white;
1745 margin-bottom: 2rem;
1746}
1747
1748.skins.home .css.module h3 {
1749 margin-top: 0;
1750}
1751
1752.skins.home .css.module blockquote {
1753 margin: 1rem 0 0;
1754}
1755
1756.skins.home .css.module pre {
1757 white-space: pre-wrap;
1758 padding: 5px;
1759 background-color: #ffc0cb14;
1760}
1761
1762.skin.index.group {
1763 background-color: white;
1764 padding: 20px;
1765 display: grid;
1766 gap: 10px;
1767 margin: 2rem auto;
1768}
1769
1770.actions .edit_preference {
1771 margin: 0;
1772}
1773
1774.skins.blurb {
1775 display: block;
1776 border: 1px deeppink dotted;
1777 padding: 10px;
1778}
1779
1780.skins.blurb .header {
1781 display: grid;
1782 grid-template-areas: "image name"
1783 "image datetime";
1784 gap: 0 10px;
1785}
1786
1787.skins.blurb .header:not(:has(.icon)) {
1788 grid-template-areas: "name"
1789 "datetime";
1790}
1791
1792.skins.blurb .header .icon {
1793 grid-area: image;
1794}
1795
1796.skins.blurb .header .heading {
1797 grid-area: name;
1798}
1799
1800.skins.blurb .header .datetime {
1801 margin: 0;
1802 grid-area: datetime;
1803 font-size: .8rem;
1804}
1805
1806.skins.blurb .summary {
1807 margin: 1rem 0;
1808}
1809
1810#skin_css {
1811 height: 800px;
1812}
1813
1814/* XIV. FOOTER */
1815
1816#footer {
1817 margin-top: 2rem;
1818}
1819
1820#footer .navigation.actions {
1821 list-style: none;
1822 display: grid;
1823 grid-template-columns: repeat(4, 1fr);
1824 border: 2px mediumvioletred groove;
1825 padding: 0;
1826 margin: 0;
1827}
1828
1829#footer .navigation.actions > li {
1830 border-right: 2px mediumvioletred groove;
1831 padding: 20px;
1832}
1833
1834#footer .navigation.actions > li:nth-child(n+4) {
1835 border-right: none;
1836}
1837
1838#footer .navigation.actions > li h4 {
1839 margin: 0 0 .5rem;
1840 font-family: 'Spicy Rice', sans-serif;
1841 font-size: 1.5rem;
1842 font-weight: normal;
1843 color: black;
1844 text-align: center;
1845 letter-spacing: 1px;
1846}
1847
1848#footer .menu {
1849 list-style-image: url(https://smallbirdpics.b-cdn.net/rentlowering/bullet%2013.gif);
1850 padding: 0 0 0 15px;
1851}
1852
1853#footer .module.group {
1854 padding: 10px;
1855 border-right: 2px mediumvioletred groove;
1856}
1857
1858@media only screen and (max-width: 768px) {
1859 #footer .navigation.actions {
1860 grid-template-columns: repeat(2, 1fr);
1861 }
1862
1863 #footer .navigation.actions > li {
1864 border-bottom: 2px mediumvioletred groove;
1865 }
1866
1867 #footer .navigation.actions > li:nth-last-child(2),
1868 #footer .navigation.actions > li:last-child {
1869 border-bottom: none;
1870 }
1871
1872 #footer .navigation.actions > li:nth-child(2n+2) {
1873 border-right: none;
1874 }
1875}
1876
1877@media only screen and (max-width: 480px) {
1878 #footer .navigation.actions {
1879 grid-template-columns: auto;
1880 }
1881
1882 #footer .navigation.actions > li:nth-child(2n+2),
1883 #footer .navigation.actions > li:nth-child(4n+4) {
1884 border-right: none;
1885 }
1886
1887 #footer .navigation.actions > li {
1888 border-right: none;
1889 border-bottom: 2px mediumvioletred groove;
1890 }
1891
1892 #footer .navigation.actions > li:nth-last-child(2) {
1893 border-bottom: 2px mediumvioletred groove;
1894 }
1895
1896 #footer .navigation.actions > li:last-child {
1897 border-bottom: none;
1898 }
1899}
1900
1901/* XV. WIDGETS */
1902
1903#modal-bg, #modal-wrap {
1904 display: none;
1905 position: fixed;
1906 width: 100%;
1907 height: 100%;
1908 top: 0;
1909 left: 0;
1910}
1911
1912#modal-bg {
1913 z-index: 9;
1914 background-color: rgba(255,255,255,.5);
1915}
1916
1917#modal-wrap {
1918 z-index: 10;
1919 top: 50% !important;
1920 left: 50%;
1921 position: fixed !important;
1922 transform: translate(-50%, -50%);
1923 max-height: calc(100vh - 40px);
1924 max-width: 600px;
1925}
1926
1927#modal {
1928 display: inline-grid !important;
1929 grid-template-rows: 1fr 42px;
1930 max-height: 100%;
1931 background-image: url(https://smallbirdpics.b-cdn.net/rentlowering/giphy.gif);
1932 padding: 10px;
1933}
1934
1935#modal h4 {
1936 margin-top: 0;
1937 text-align: center;
1938 font-family: 'Spicy Rice', sans-serif;
1939 font-weight: normal;
1940 font-size: 1.5rem;
1941 color: deeppink;
1942}
1943
1944#modal .content {
1945 padding: 20px;
1946 position: relative;
1947 overflow: auto;
1948 background-color: white;
1949}
1950
1951#modal .footer {
1952 background-color: deeppink;
1953 padding: 10px;
1954 width: 100%;
1955 color: white;
1956 display: flex;
1957 justify-content: space-between;
1958}
1959
1960#modal .footer .title {
1961 font-weight: bold;
1962}
1963
1964#modal .footer a {
1965 color: white;
1966}
1967
1968dl#help dt {
1969 font-weight: bold;
1970}
1971
1972dl#help dd {
1973 margin-bottom: 1rem;
1974}
1975
1976[aria-haspopup="true"] {
1977 position: relative;
1978}
1979
1980.expandable {
1981 position: absolute;
1982 top: 100%;
1983 left: 0;
1984 list-style: none;
1985 margin: 0;
1986 padding: 0;
1987}
1988
1989.expander_parent {
1990 position: relative;
1991 display: flex;
1992 gap: 10px;
1993 align-items: center;
1994}
1995
1996.expander_parent [role="button"] {
1997 display: inline-flex;
1998 padding: 3px 5px;
1999 line-height: 1em;
2000 font-size: .8rem;
2001 letter-spacing: 0;
2002 font-family: 'Comic Sans MS', sans-serif;
2003 font-weight: bold;
2004 width: 88px;
2005 height: 31px;
2006 justify-content: center;
2007 align-items: center;
2008 text-align: center;
2009 gap: 5px;
2010 border: 3px mediumvioletred outset;
2011}
2012
2013.expander_parent [role="button"]:before,
2014.expander_parent [role="button"]:after {
2015 content: "♥︎";
2016 font-size: .8rem;
2017}
2018
2019.expander_parent .expand [role="button"],
2020.expander_parent .contract [role="button"],
2021.expander_parent .shuffle [role="button"] {
2022 margin: 0;
2023 padding: 0;
2024 border: 0;
2025 width: auto;
2026 height: auto;
2027 font-size: 1.2rem;
2028 font-weight: bold;
2029}
2030
2031.expander_parent .expand [role="button"]:before,
2032.expander_parent .expand [role="button"]:after,
2033.expander_parent .contract [role="button"]:before,
2034.expander_parent .contract [role="button"]:after,
2035.expander_parent .shuffle [role="button"]:before,
2036.expander_parent .shuffle [role="button"]:after {
2037 display: none;
2038}
2039
2040.hidden {
2041 display: none;
2042}
2043
2044.flash.notice {
2045 border: 4px double mediumvioletred;
2046 background-color: white;
2047 padding: 10px;
2048 font-weight: bold;
2049 max-width: 1100px;
2050 margin: 2rem auto 0;
2051}
2052
2053li.input {
2054 position: relative;
2055}
2056
2057.added.tag {
2058 font-size: .8rem;
2059}
2060
2061.autocomplete.dropdown p {
2062 margin: 0;
2063}
2064
2065.autocomplete.dropdown {
2066 font-size: .8rem;
2067 background-color: white;
2068 padding: 3px 5px;
2069 border: 1px mediumvioletred dotted;
2070 width: 100%;
2071}
2072
2073.pagination {
2074 list-style: none;
2075 margin: 1rem 0;
2076 padding: 0;
2077 display: flex;
2078 flex-wrap: wrap;
2079 justify-content: center;
2080 align-items: center;
2081 gap: 10px;
2082}
2083
2084/* XVI. INDICES */
2085
2086.tags-index,
2087.works-index,
2088.readings-index,
2089.subscriptions-index,
2090.bookmarks-index,
2091.challenge_assignments-index,
2092.owned_tag_sets-index,
2093.challenge_claims-index,
2094.series-index,
2095.fandoms-index,
2096.media-index,
2097.works-search,
2098.collections-index {
2099 max-width: 1100px;
2100 margin: 2rem auto;
2101}
2102
2103.tags-index h2,
2104.works-index h2,
2105.readings-index h2,
2106.subscriptions-index h2,
2107.bookmarks-index h2,
2108.challenge_assignments-index h2,
2109.owned_tag_sets-index h2,
2110.challenge_claims-index h2,
2111.series-index h2,
2112.fandoms-index h2,
2113.media-index h2,
2114.works-search h2,
2115.collections-index h2 {
2116 margin-top: 0;
2117}
2118
2119.tags-index .index.group,
2120.works-index .index.group,
2121.readings-index .index.group,
2122.subscriptions-index .index.group,
2123.bookmarks-index .index.group,
2124.challenge_assignments-index .index.group,
2125.owned_tag_sets-index .index.group,
2126.challenge_claims-index .index.group,
2127.series-index .index.group,
2128.fandoms-index .alphabet.index.group,
2129.works-search .index.group,
2130.collections-index .index.group {
2131 background-color: white;
2132 padding: 20px;
2133 max-width: 1100px;
2134 margin: 2rem auto;
2135}
2136
2137.media-index .media.fandom.index.group {
2138 display: grid;
2139 grid-template-columns: repeat(2, 1fr);
2140 gap: 2rem;
2141}
2142
2143.media-index .listbox {
2144 padding: 20px;
2145 background-color: white;
2146 border: 2px deeppink groove;
2147}
2148
2149.media-index .listbox .actions {
2150 margin: 0;
2151 display: flex;
2152 justify-content: flex-end;
2153}
2154
2155.media-index .listbox .actions a {
2156 width: 88px;
2157 height: 31px;
2158 border: 3px mediumvioletred outset;
2159 display: flex;
2160 justify-content: center;
2161 align-items: center;
2162 font-size: .6rem;
2163 line-height: .6rem;
2164 font-weight: bold;
2165 text-decoration: none;
2166 text-align: center;
2167 padding: 3px 5px
2168}
2169
2170.media-index .listbox .actions a:before,
2171.media-index .listbox .actions a:after {
2172 content: "♥︎";
2173 font-size: .8rem;
2174}
2175
2176.fandoms-index .alphabet.index.group .tags {
2177 padding: 20px;
2178}
2179
2180.filtered {
2181 display: grid;
2182 grid-template-areas:
2183 "flash flash"
2184 "heading heading"
2185 "subheading subheading"
2186 "navigation navigation"
2187 "pagination blank"
2188 "works filters"
2189 "pagination2 filters"
2190 "blank2 filters";
2191 grid-template-columns: 1fr 300px;
2192 gap: 1rem 2rem;
2193}
2194
2195@media only screen and (max-width: 960px) {
2196 .filtered {
2197 grid-template-areas:
2198 "flash"
2199 "heading"
2200 "subheading"
2201 "navigation"
2202 "pagination"
2203 "filters"
2204 "works";
2205 grid-template-columns: auto;
2206 }
2207}
2208
2209.filtered .flash {
2210 grid-area: flash;
2211}
2212
2213.filtered h2.heading {
2214 grid-area: heading;
2215 margin: 0;
2216}
2217
2218.filtered h3.heading {
2219 grid-area: subheading;
2220 text-align: center;
2221 margin: 0;
2222}
2223
2224#main.filtered .navigation.actions {
2225 grid-area: navigation;
2226}
2227
2228.filtered ol.pagination:nth-of-type(1) {
2229 grid-area: pagination;
2230}
2231
2232.filtered ol.pagination:nth-of-type(2) {
2233 grid-area: pagination2;
2234}
2235
2236.filtered .work.index.group,
2237.filtered .collection.index.group {
2238 grid-area: works;
2239 margin: 0;
2240}
2241
2242.filtered .filters {
2243 grid-area: filters;
2244}
2245
2246.filtered .filters dl {
2247 display: block;
2248}
2249
2250.filtered .filters > fieldset > dl > dt,
2251.filtered .filters dl dt.search,
2252.filtered .filters dl dt.language {
2253 margin-top: 1rem;
2254}
2255
2256.filtered .filters dl dd.language {
2257 margin-bottom: 1rem;
2258}
2259
2260.filtered .filters dl dt.heading {
2261 display: flex;
2262 gap: 5px;
2263}
2264
2265.filtered .filters dl dd {
2266 margin-left: 0;
2267}
2268
2269.filtered .filters dl dd.submit {
2270 text-align: center;
2271}
2272
2273.filtered .filters dl dt.filter-toggle button {
2274 background-color: transparent;
2275 border: none;
2276 font-family: inherit;
2277 font-size: inherit;
2278 color: mediumvioletred;
2279 cursor: pointer;
2280 padding: 0;
2281 display: flex;
2282 gap: 5px;
2283 align-items: center;
2284}
2285
2286.filtered .filters dl dt.filter-toggle button:before {
2287 content: "➤";
2288 transform: rotate(0deg);
2289}
2290
2291.filtered .filters dl dt.filter-toggle.expanded button:before {
2292 content: "➤";
2293 transform: rotate(90deg);
2294}
2295
2296.filtered .filters dl dt.filter-toggle.expanded + dd.expandable {
2297 display: block;
2298 position: static;
2299}
2300
2301.filtered .filters dl dt.filter-toggle.expanded + dd.expandable ul {
2302 display: block;
2303}
2304
2305.filtered .filters dl dt.filter-toggle.expanded + dd.expandable ul li {
2306 display: block;
2307 text-indent: -1.6rem;
2308 margin-left: 1.6rem;
2309}
2310
2311.filtered .filters dl dt.filter-toggle.expanded + dd.expandable ul li:after {
2312 display: none;
2313}
2314
2315#main ul.actions li.search form {
2316 border: none;
2317 display: flex;
2318 background-color: transparent;
2319 padding: 0;
2320 width: auto;
2321 height: auto;
2322}
2323
2324#main ul.actions li.search form:before,
2325#main ul.actions li.search form:after {
2326 display: none;
2327}
2328
2329#main ul.actions li.search form fieldset {
2330 border: none;
2331 margin: 0;
2332 padding: 0;
2333 display: flex;
2334 gap: 10px;
2335}
2336
2337#main ul.actions li.search form input[type="submit"] {
2338 font-size: 1em;
2339 background-color: mediumvioletred;
2340 border: 3px mediumvioletred outset;
2341 color: white;
2342 font-weight: bold;
2343 padding: 5px 10px;
2344 line-height: 1;
2345}
2346
2347.index.group:not(:has(li)) {
2348 display: none;
2349}
2350
2351/* XVII. TAGS INDEX */
2352
2353.cloud1 {
2354 font-size: 1rem;
2355}
2356
2357.cloud2 {
2358 font-size: 1.2rem;
2359}
2360
2361.cloud3 {
2362 font-size: 1.4rem;
2363}
2364
2365.cloud4 {
2366 font-size: 1.6rem;
2367}
2368
2369.cloud5 {
2370 font-size: 1.8rem;
2371}
2372
2373.cloud6 {
2374 font-size: 2rem;
2375}
2376
2377.cloud7 {
2378 font-size: 2.2rem;
2379}
2380
2381.cloud8 {
2382 font-size: 2.4rem;
2383}
2384
2385/* XVIII. SEARCHES */
2386
2387.bookmarks-search,
2388.people-search {
2389 max-width: 1100px;
2390 margin: 2rem auto;
2391}
2392
2393.bookmarks-search ol.bookmark {
2394 background-color: white;
2395 padding: 20px;
2396}
2397
2398.tags-search h3.heading {
2399 text-align: center;
2400 margin-top: 2rem;
2401 margin-bottom: 1rem;
2402}
2403
2404.tags-search .tag.index.group,
2405.people-search .pseud.index.group {
2406 padding: 20px;
2407 background-color: white;
2408 max-width: 1100px;
2409 margin: 0 auto 2rem;
2410 columns: 2 200px;
2411 gap: 20px;
2412}
2413
2414.user.pseud.blurb {
2415 display: block;
2416 border: 1px deeppink dotted;
2417 padding: 5px;
2418 margin-bottom: 10px;
2419}
2420
2421.user.pseud.blurb .header {
2422 display: grid;
2423 grid-template-areas: "icon username"
2424 "icon count";
2425 grid-template-rows: auto 1fr;
2426 gap: 10px;
2427}
2428
2429.user.pseud.blurb h4.heading {
2430 grid-area: username;
2431}
2432
2433.user.pseud.blurb h5.heading {
2434 font-family: 'Comic Sans MS', sans-serif;
2435 font-weight: normal;
2436 grid-area: count;
2437}
2438
2439.user.pseud.blurb .header .icon {
2440 grid-area: icon;
2441}
2442
2443/* XIX. DOCS PAGES */
2444
2445.diversity,
2446.support,
2447.tos,
2448.site_map,
2449.dmca {
2450 background-color: white;
2451 padding: 20px;
2452 max-width: 1100px;
2453 margin: 2rem auto;
2454}
2455
2456.diversity h2,
2457.support h2,
2458.tos h2,
2459.site_map h2,
2460.dmca h2 {
2461 margin-top: 0;
2462}
2463
2464/* XX. ICONS */
2465
2466.required-tags .rating-general-audience {
2467 background: url("/images/imageset.png") -50px -25px;
2468}
2469
2470.required-tags .rating-explicit {
2471 background: url("/images/imageset.png") -25px -25px;
2472}
2473
2474.required-tags .rating-mature {
2475 background: url("/images/imageset.png") -75px -25px;
2476}
2477
2478.required-tags .rating-notrated, .required-tags .category-none, .required-tags .warning-no, .status .count {
2479 background: url("/images/imageset.png") -150px 0px;
2480}
2481
2482.status .count {
2483 width: 25px;
2484 display: block;
2485 aspect-ratio: 1 / 1;
2486 background-image: none;
2487 border: 1px mediumvioletred solid;
2488}
2489
2490.status .count a {
2491 color: mediumvioletred;
2492}
2493
2494.required-tags .rating-teen {
2495 background: url("/images/imageset.png") 0px -25px;
2496}
2497
2498.required-tags .category-femslash {
2499 background: url("/images/imageset.png") -25px 0px;
2500}
2501
2502.required-tags .category-gen {
2503 background: url("/images/imageset.png") -50px 0px;
2504}
2505
2506.required-tags .category-slash {
2507 background: url("/images/imageset.png") 0px 0px;
2508}
2509
2510.required-tags .category-het {
2511 background: url("/images/imageset.png") -75px 0px;
2512}
2513
2514.required-tags .category-multi {
2515 background: url("/images/imageset.png") -100px -0px;
2516}
2517
2518.required-tags .category-other {
2519 background: url("/images/imageset.png") -125px 0px;
2520}
2521
2522.required-tags .complete-no {
2523 background: url("/images/imageset.png") -100px -25px;
2524}
2525
2526.required-tags .complete-yes {
2527 background: url("/images/imageset.png") -175px -25px;
2528}
2529
2530.required-tags .warning-yes {
2531 background: url("/images/imageset.png") -150px -25px;
2532}
2533
2534.required-tags .warning-choosenotto {
2535 background: url("/images/imageset.png") -125px -25px;
2536}
2537
2538.required-tags .external-work {
2539 background: url("/images/imageset.png") -75px -50px;
2540}
2541
2542.status .private .text {
2543 background: url("/images/imageset.png") -175px -50px;
2544}
2545
2546.status .public {
2547 background: url("/images/imageset.png") -125px -50px;
2548 aspect-ratio: 1 / 1;
2549 display: block;
2550 text-indent: -999px;
2551 width: 25px;
2552 overflow: hidden;
2553 position: relative;
2554}
2555
2556.status .hidden {
2557 background: url("/images/imageset.png") -150px -50px;
2558}
2559
2560.status .rec {
2561 background: url("/images/imageset.png") -100px -50px;
2562 aspect-ratio: 1 / 1;
2563 display: block;
2564 text-indent: -999px;
2565 width: 25px;
2566 overflow: hidden;
2567 position: relative;
2568}
2569
2570.status .rec:before,
2571.status .public:before {
2572 content: "";
2573 position: absolute;
2574 top: 0;
2575 left: 0;
2576 bottom: 0;
2577 right: 0;
2578 background-color: mediumvioletred;
2579 mix-blend-mode: hue;
2580 z-index: 0;
2581}