User:Joohunniee/common.css

@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&family=Encode+Sans+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Encode+Sans+Expanded:wght@100;200;300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap'); /* */ .theme-fandomdesktop-dark .portable-infobox .pi-data:nth-child(even) { background-color: rgba(255,255,255,.2); } .theme-fandomdesktop-dark .portable-infobox .pi-data:nth-child(odd) { background-color: rgba(255,255,255,.1); } /* Color presets November 1-19 theme: Mickey Mouse / Once Upon a Studio LIGHT THEME Body background color / var(--theme-body-background-color)                       #B5795D Page background color / var(--theme-page-background-color)                       #FFFFFF Secondary page background color / var(--theme-page-background-color--secondary)  TBD Border color / var(--theme-border-color)                                         TBD Link color / var(--theme-link-color)                                             #AC6420 Accent color / var(--theme-accent-color)                                         #AC6420 Sticky nav / var(--theme-sticky-nav-background-color)                            #AC6420 -  DARK THEME (to be default theme) Body background color / var(--theme-body-background-color)                       #B5795D Page background color / var(--theme-page-background-color)                       #302119 Secondary page background color / var(--theme-page-background-color--secondary)  TBD Border color / var(--theme-border-color)                                         TBD Link color / var(--theme-link-color)                                             #E09957 Accent color / var(--theme-accent-color)                                         #AC6420 Sticky nav / var(--theme-sticky-nav-background-color)                            #AC6420 */ /* Color presets November 20-27 theme: Wish LIGHT THEME Body background color / var(--theme-body-background-color)                       #245A89 Page background color / var(--theme-page-background-color)                       #ffffff Secondary page background color / var(--theme-page-background-color--secondary)  TBD Border color / var(--theme-border-color)                                         TBD Link color / var(--theme-link-color)                                             #147baf Accent color / var(--theme-accent-color)                                         #147baf Sticky nav / var(--theme-sticky-nav-background-color)                            #147baf -  DARK THEME (to be default theme) Body background color / var(--theme-body-background-color)                       #0D223F Page background color / var(--theme-page-background-color)                       #0F294A Secondary page background color / var(--theme-page-background-color--secondary)  TBD Border color / var(--theme-border-color)                                         TBD Link color / var(--theme-link-color)                                             #1999d8 Accent color / var(--theme-accent-color)                                         #147baf Sticky nav / var(--theme-sticky-nav-background-color)                            #147baf */ /* Color presets December theme: Christmas (Red and green) LIGHT THEME (winter snow) Body background color / var(--theme-body-background-color)                       #94f2f4 Page background color / var(--theme-page-background-color)                       #ffffff Secondary page background color / var(--theme-page-background-color--secondary)  TBD Border color / var(--theme-border-color)                                         TBD Link color / var(--theme-link-color)                                             #2d36ea Accent color / var(--theme-accent-color)                                         #2d36ea Sticky nav / var(--theme-sticky-nav-background-color)                            #2d36ea -  DARK THEME (to be default theme) Body background color / var(--theme-body-background-color)                       #1d653a Page background color / var(--theme-page-background-color)                       #0c301b Secondary page background color / var(--theme-page-background-color--secondary)  TBD Border color / var(--theme-border-color)                                         TBD Link color / var(--theme-link-color)                                             #23cf9f Accent color / var(--theme-accent-color)                                         #d8393c Sticky nav / var(--theme-sticky-nav-background-color)                            #BB2528 */

/* WIP for planned redesign .page-content #toc { background-color: #2d36ea; color: white; border: none; border-radius: 10px; } .toc:not(.sticky-toc) .toctitle, .toc:not(.sticky-toc) .toctitle h2, .toc:not(.sticky-toc) .toctitle .wds-icon, .toc:not(.sticky-toc) .tocnumber, .toc:not(.sticky-toc) ul li a, .toc:not(.sticky-toc) ul li a:hover, .toc:not(.sticky-toc) ul li a:hover .tocnumber, .toctogglespan .toctogglelabel, .toctogglespan .toctogglelabel:hover, .toctogglespan:after, .toctogglespan:before { color: white; } .toc:not(.sticky-toc) .toctitle { border-bottom: none; padding-bottom: 6px; } .toctogglecheckbox:checked ~ .toctitle { padding-bottom: 12px; } .toc:not(.sticky-toc) ul li a:hover { background-color: rgba(255, 255, 255, .15); } .theme-fandomdesktop-light .portable-infobox { --border-color: #aaa; } .theme-fandomdesktop-dark .portable-infobox { --border-color: rgba(255, 255, 255, .33); } .portable-infobox { border-radius: 0 !important; width: 260px; } .portable-infobox.pi-background { background-color: var(--general-bg-color); } .portable-infobox .pi-data { background: none !important; } .portable-infobox .pi-title { font-weight: normal !important; background: none !important; font-size: 18px !important; text-align: left; color: var(--border-color) !important; } .portable-infobox .pi-header { font-weight: normal !important; background: none !important; color: var(--border-color) !important; border-bottom-width: 1px !important; border-style: solid !important; border-image: linear-gradient(to right, transparent, var(--border-color), var(--border-color), transparent) 9; } .portable-infobox .pi-navigation { background: none !important; border-top-width: 1px !important; border-style: solid !important; border-image: linear-gradient(to right, transparent, var(--border-color), var(--border-color), transparent) 9; color: inherit !important; } .portable-infobox .pi-navigation a { color: var(--theme-link-color) !important; } .portable-infobox .pi-navigation a:is(:hover, :focus, :active) { color: var(--theme-link-color--hover) !important; } .portable-infobox .pi-data { display: block; } .portable-infobox .pi-navigation, .portable-infobox .pi-navigation .selflink { font-weight: normal !important; } .portable-infobox .pi-navigation small { font-size: 100% !important; } .portable-infobox .pi-data-value { margin-left: 15px; } .portable-infobox .pi-data-value ul, .portable-infobox .pi-data-value ol { margin-left: 0; list-style: none; } .portable-infobox .pi-data-label, .portable-infobox .pi-data-value { width: 100% !important; } .page-header__title { font-family: 'Montserrat', sans-serif; font-weight: 500; } .page-content, .page-footer, .page__right-rail { font-family: 'Montserrat', sans-serif; } .page-content .mw-headline, .page-content h2 { font-family: 'Montserrat', sans-serif; font-weight: bold; } .page-content .toc .toctitle h2, .page-footer .wds-collapsible-panel__header { font-weight: bold; } .portable-infobox .pi-title, .portable-infobox .pi-header, .portable-infobox .pi-navigation, .portable-infobox .pi-navigation .selflink { font-weight: bold !important; } .page-content a, .page-footer .wds-collapsible-panel, .page-footer .license-description { font-weight: 500; }

/* Reference Popups CSS */

.refpopups-popup.refpopups-demo-black > .refpopups-box { background: #0A0A0A; background: rgba(0,0,0,0.85); border: 2px solid rgb(8, 100, 200); border-radius: 1ex; color: #EEE; } .refpopups-popup.refpopups-demo-black > .refpopups-chevron-in, .refpopups-popup.refpopups-demo-black > .refpopups-chevron-out { display: none; }

/* End */

/* Outer container. * This is invisible. It exists purely for bounding-box calculations. */ .refpopups-popup { position: absolute !important; z-index: 20000000; } /* The actual (visible) popup box. * This is directly descended from the invisible popup container. */ .refpopups-box { width: 20em; background-color: rgb(243, 243, 243); color: black; border: 2px solid rgb(8, 0, 134); padding: 1em; position: relative; box-shadow: 2px 2px 4px black; box-shadow: 2px 2px 4px rgba(0,0,0,0.66); } .refpopups-box.WikiaArticle { min-width: 0; max-width: none; min-height: 0; max-height: none; height: auto; z-index: auto; } .WikiaPage.WikiaGrid .WikiaArticle.refpopups-box { padding: 1em; } .refpopups-chevron-out { border:10px solid; border-bottom-width: 0; border-color: rgb(8, 0, 134) transparent transparent; position: absolute; bottom: -8px; z-index: 1; } .refpopups-chevron-in { border:8px solid; border-bottom-width: 0; border-color: rgb(243, 243, 243) transparent transparent; position: absolute; bottom: -6px; z-index: 1; } .refpopups-flipped > .refpopups-chevron-out { bottom: auto; top: -8px; border-bottom-width: 10px; border-top-width: 0; border-color: transparent transparent rgb(8, 0, 134); } .refpopups-flipped > .refpopups-chevron-in { bottom: auto; top: -6px; border-bottom-width: 8px; border-top-width: 0; border-color: transparent transparent rgb(243, 243, 243); } .refpopups-configure { display: block; position: absolute; width: 16px; height: 16px; /* //upload.wikimedia.org/wikipedia/commons/e/ed/Cog.png */ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAAK%2FINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAL8SURBVHjaYvz%2F%2Fz8DNnDmzJnkP3%2F%2BxPz9%2B5fh9%2B%2FfSxwcHOZiUwcQQIzIBly6dEkTqOEpEH8Ban4hJycnCpI%2FceLEay4uLgmgGA%2FQMOmgoKDrMD0AAcSEpHk2UOMVoKKbQEXiQPz358%2BfDCDMxsb2FyT269evm0B8ZcmSJbNh%2BgACCGzAxYsXq7m5uVPk5eWZBAUFQTbdBmLxHz9%2BMHz%2F%2Fp3h379%2FIANvA%2BUlgF5hEhERSenp6akG6QUIIBYQATSV6cWLFyC%2FMIJsFBcX52ZiYgL5HWyLpqYmSJwbJPfw4UOGQ4cO%2FQcaDrYcIIDgYXDs2LFWfn7%2BKpCtoID7%2BPEjw6NHjxhYWVkZFBUVGVhYWMAGfvv2DeTdtrKyMrALAAKIERhAZ4HOFQNibgkJCcGvX78yvH%2F%2FHmTgcSC7jp2dnQHorSYTExNLkGVArzLs37%2F%2FPdCwr0A9rwACiAVIGKiqqjK9ffsWbCvIxpcvXzIAvVDX0dGxB2TL7NmzQWK7gRYwgNRZWVkJAr0p2NfXJwUQQEwgZ4H8BjQI7HSQLTw8PAxA78CjF6QGJA8MTLAaYJgxgFwK8g5AALE8efLkAhCIAZ3Jra%2BvLwgKdWlpaZBNTbNmzQJrBuImSUlJsEZQ4AKj8f2XL1%2B%2BAsVfAQQQPBDXrl3bClRUBbIJFGAghY8fPwbbKCUlBaZBhoNsBoZB27Rp08CBCBBA4KhYs2ZNLdD0SgEBAbBmYMJhAKY8BmC8MygoKIADDhSYHBwc4BgBhlNlRkZGLUgvQACB0wEwDP4BA4iRk5MTlKgY7t69%2BxXoAi57e3tGkL%2BXLVv2n5GR8ZuFhQW3qKgog5CQECMwKv%2BB9AIEENwLTU1Ns9%2B9e5cEdOIroAIjXl7ecx4eHqBUCYqFF8D0YQQ07Bww4MSAfp%2B3bdu2VJA%2BgACC54W6ujqQgA7Q%2BepAb7wEKmb%2B9OkTw%2BvXr0EuZAbKvQSKq4PUwDSDAEAAMeLKznl5eclAzTGgKAY6fwkwkLFmZ4AAAwDzKLPEVR9s%2FQAAAABJRU5ErkJggg%3D%3D"); right: 0; top: 0; opacity: 0.6; } .refpopups-configure:hover { opacity: 1; } .refpopups-configure-page { display: block; float: right; clear: right; font-size: smaller; } /* Don't print any of this stuff */ @media print { .refpopups-configure-page { display: none; }	.refpopups-popup { display: none; } }

/* Configuration form tweaks */ width: 100%; } .refpopups-delay-slider-table { width: 100%; table-layout: fixed; } .refpopups-delay-slider-instant, .refpopups-delay-slider-normal, .refpopups-delay-slider-slow, .refpopups-delay-slider-late { overflow: hidden; border-left: 1px solid; padding-left: 1ex; padding-right: 1ex; } .refpopups-delay-slider-instant { width: 15%; } .refpopups-delay-slider-normal { width: 25% } .refpopups-delay-slider-slow { width: 25%; } /* Oasis jQuery UI Slider Styling Hack (Colors are set in the main script) */ .skin-oasis #refpopups-delay-slider { background-color: transparent; margin: 1ex 0 1ex; border: 1px solid; border-radius: 1ex; } .skin-oasis #refpopups-delay-slider > .ui-slider-handle { border-radius: 1em; width: 1ex; /* Default = 1em */ top: -0.35em; } .skin-oasis #refpopups-delay-slider.ui-disabled { background: transparent; } .skin-oasis #refpopups-delay-slider.ui-disabled > .ui-slider-handle { background: transparent; }
 * 1) refpopups-disable {

/* Thumb design */ .mw-parser-output .thumb.tleft, .mw-parser-output .thumb.tright { background-color: var(--general-bg-color); border: 1px solid var(--border-color); border-spacing: 0; padding: 4px; overflow: hidden; box-sizing: initial; }

/* columns-2 and columns-3 are legacy for "2 or more" column view from when the * template was implemented with column-count. */ .reflist-columns-2 { column-width: 30em; }

.reflist-columns-3 { column-width: 25em; }

/* Reset top margin for lists embedded in columns */ .reflist-columns { margin-top: 0.3em; }

.reflist-columns ol { margin-top: 0; }

/* Avoid elements breaking between columns */ .reflist-columns li { page-break-inside: avoid; /* Removed from CSS in favor of break-inside c. 2020 */ break-inside: avoid-column; }

/* body bg - Just Dance 2024 Edition inspired body { background: linear-gradient(135deg, rgba(236,72,57,1) 0%, rgba(110,25,174,1) 66%, rgba(32,26,224,1) 100%) fixed; } .fandom-community-header__background { display: none; }

/* Just Dance-inspired UI .WikiaBarWrapper, .wikia-bar-collapse, .fandom-sticky-header, .page .wds-button, .oo-ui-buttonElement-button { background: linear-gradient(30deg, #ff1694, #fc46aa, #fa86c4); color: white !important; border: none !important; } .oo-ui-buttonElement-framed { border: none !important; } .cancelLink .oo-ui-buttonElement-button { background: linear-gradient(30deg, #b90e0a, #d21404, #e3242b); }

.portable-infobox .pi-title, .portable-infobox .pi-navigation { background: linear-gradient(30deg, #ff1694, #fc46aa, #fa86c4); background-color: transparent !important; color: white !important; } .portable-infobox .pi-header { background: linear-gradient(30deg, #d5e3e3, #cedede, #c8e6e6); background-color: transparent !important; color: black !important; } .portable-infobox .pi-data { background: linear-gradient(90deg, #e6eded, #e1f5f5); background-color: transparent !important; } .theme-fandomdesktop-dark .portable-infobox .pi-data { background: linear-gradient(90deg, rgba(230, 237, 237, .2), rgba(225, 245, 245, .2)); } .mbox { background: linear-gradient(90deg, #e6eded, #e1f5f5); background-color: transparent !important; border-color: #e1f5f5; } .theme-fandomdesktop-dark .mbox { background: linear-gradient(90deg, rgba(230, 237, 237, .2), rgba(225, 245, 245, .2)); } .page-side-tool { background: var(--theme-page-background-color) linear-gradient(90deg, #e6eded, #e1f5f5); color: #ff1694 !important; } .theme-fandomdesktop-dark .page-side-tool { background-image: linear-gradient(90deg, rgba(230, 237, 237, .2), rgba(225, 245, 245, .2)); color: #fa86c4 !important; }