MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/* Font imports */ @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* ITZY Wiki Home Page Imports */ @import "/load.php?mode=articles&articles=u:itzy:MediaWiki:Home.css&only=styles";

/* Mark redirects in Special:Allpages and Special:Watchlist */ .allpagesredirect { font-style: italic; } .allpagesredirect:after { color: #808080; content: " (redirect)" } .watchlistredir { font-style: italic; }

/* Variables */ .theme-fandomdesktop-light { --border: #020024; --box-shadow: #545454; }

.theme-fandomdesktop-dark { --border: #53adcb; --box-shadow: #00d4ff; }

/* Mbox */ .mbox { display: flex; position: relative; background: var(--theme-page-background-color--secondary); border-left-width: 8px; border-left-color: solid var(--theme-accent-color); border-radius: 6px; margin-bottom: 5px; min-height: 32px; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); }

.mbox__content { display: table; box-sizing: border-box; width: 100%; padding: 8px 15px; }

.mbox__content__image { display: table-cell; width: 40px; height: 100%; text-align: center; vertical-align: middle; padding-right: 15px; }

.mbox__content__wrapper { display: table-cell; vertical-align: middle; }

.mbox__content__header { display: block; font-weight: bold; font-size: 20px; }

.mbox__content__text { display: block; }

.mbox__content__text__comment { font-size: small; }

.mbox__content__aside { display: table-cell; width: 100px; vertical-align: middle; text-align: center; padding-left: 15px; }

.mbox__close { position: absolute; right: 0; top: 0; padding: 2px 7px; font-weight: bold; font-size: 16px; color: #bbb; cursor: pointer; transition: all .15s ease-in; }

.mbox__close:hover { color: #777; }

.mbox__close:after { content: '×'; }

.mw-collapsed + .mbox__close { transform: rotate(45deg); padding: 4px 7px 5px 2px; }

/* TOC */ .toc { border-color: transparent; background-color: var(--theme-page-background-color--secondary); }

/* --- */ /* Scrollbar */
 * -webkit-scrollbar {

width: 12px !important; -webkit-overflow-scrolling: auto !important; background: var(--theme-sticky-nav-background-color); }


 * -webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important; -webkit-border-radius: 10px !important; border-radius: 10px !important; }


 * -webkit-scrollbar-thumb {

-webkit-border-radius: 10px !important; border-radius: 10px !important; background: #00f !important; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; }


 * -webkit-scrollbar-thumb:window-inactive {

background: #00f !important; }


 * -webkit-scrollbar-thumb:hover {

background: #00008B !important; }
 * -webkit-scrollbar-thumb:active {

background: #0ff !important; }

/* Firefox */ html, body { scrollbar-color: #00f var(--theme-sticky-nav-background-color); }

/* Navigation Bar Hover - Credits to Rheinaldi kian jiu */ .wds-icon-tiny { transition: transform 0.2s; }   transform: rotate(180deg); } .wds-dropdown__content .wds-list.wds-is-linked li:hover > a svg.wds-dropdown-chevron { transform: rotate(90deg); } .wds-dropdown.wds-open-to-left .wds-dropdown__content .wds-list.wds-is-linked li:hover > a svg.wds-dropdown-chevron { transform: rotate(-90deg) !important; }
 * 1) wds-icons-dropdown-tiny:hover {

/* Portal */ .portal img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .portal img:hover { transform: scale(1.10,1.10) translate3d(2px, 2px, 0); }

/* Tabber - Credits to Dev Wiki */ .tabber .wds-tabs__wrapper { border-bottom: 0; }

.tabber .wds-tabs__wrapper .wds-tabs { font-size: 13px; border-bottom: 3px solid blue; padding: 0.3em 0 0; }

.tabber .wds-tabs .wds-tabs__tab-label { height: auto; margin: 0; }

.tabber .wds-tabs__tab a { font-weight: normal; font-size: 13px; padding: 0.3em 0.5em; color: darkblue !important; }

.tabber .wds-tabs__tab.wds-is-current { box-shadow: none; }

.tabber .wds-tabs__tab.wds-is-current a { color: white !important; background: blue; }

.tabber .wds-tabs__tab:not(.wds-is-current) a:hover { background: rgba(0,0,255, 0.2); }

/* Infoboxes - Credits to MNL48 Wiki */ .portable-infobox { border: unset; border-radius: unset; float: right; } .portable-infobox .pi-data { border: unset; padding: 2px; } .portable-infobox .pi-data:nth-child(odd) { background-color: var(--theme-page-background-color); } .portable-infobox .pi-data:nth-child(even) { background-color: var(--theme-page-background-color--secondary); }

/* Background (FandomDesktop) --> Credits to TWICE Wiki Note: Do not use the Header background cause it will be overlaped by the background There's eight element on this code: Gradient background & Font, Border and box shadow, To make the background visible, Background, Remove the Header background (something like that), Make the right rail background transparent, Table of Contents Background Color, Article Table Background */ /* == Gradient background & Font == */ @media screen and (min-width: 1025px) { body.theme-fandomdesktop-light { background: linear-gradient(to bottom,#add8e6,#97cee0,#80c3d9,#6ab8d2,#53adcb) fixed; font-family: 'Work Sans', sans-serif; } }

@media screen and (min-width: 1025px) { body.theme-fandomdesktop-dark { background: linear-gradient(to bottom,#020024,#02355b,#016a92,#019fc9,#00d4ff) fixed; font-family: 'Work Sans', sans-serif; } }

/* == Border and box shadow == */ .theme-fandomdesktop-light .resizable-container .page { border:2px solid var(--border); box-shadow:0 0 20px var(--box-shadow); }

.theme-fandomdesktop-dark .resizable-container .page { border:2px solid var(--border); box-shadow:0 0 20px var(--box-shadow); }

/* == To make the background visible == */ .page__main { background-color: transparent; border-radius: 3px; min-height: 480px; padding: 24px 36px; position: relative; }

/* == Background == */ /* === Light Theme (Default) */ .theme-fandomdesktop-light .resizable-container .page::before { opacity: 0.3; background: transparent url("https://static.wikia.nocookie.net/sb19/images/0/0f/SB19_Wiki_Background.jpg/revision/latest?cb=20211105022825") center top fixed; background-size: 1300px; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;z-index: -1; }

/* === Dark Theme === */ .theme-fandomdesktop-dark .resizable-container .page::before { opacity: 0.3; background: transparent url("https://static.wikia.nocookie.net/sb19/images/a/ad/SB19_Wiki_Background_Dark.jpg/revision/latest") center fixed; background-size: 1300px; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }

/* == Remove the Header background == */ .fandom-community-header__background { background: var(--theme-body-background-image) no-repeat; height: 160px; position: fixed; top: 0; width: 100%; z-index: -2; opacity: 0; }

/* == Make the right rail background transparent == */ .page__right-rail { background-color: transparent; }

/* == Transparent Rail Module Background == */ .rail-module { background-color: transparent; border-bottom: transparent; }

/* Make sure the SB19 logo is visible in light and dark themes/modes. */ .theme-fandomdesktop-dark .fandom-sticky-header__logo img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }

.theme-fandomdesktop-dark .fandom-community-header__image img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }

.theme-fandomdesktop-light .lightimg img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1) }

.theme-fandomdesktop-dark .darkimg img { -webkit-filter: invert(1); filter: invert(1); }

.hoverspin img { opacity: 1; filter: alpha(opacity=100); transition: all 0.6s ease; } .hoverspin img:hover { opacity: 0.5; filter: alpha(opacity=50); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

.fandom-community-header__image img { opacity: 1; filter: alpha(opacity=100); transition: all 1.5s ease; }

.fandom-community-header__image img:hover { opacity: 0.5; filter: alpha(opacity=50); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); }

/** Lyrics (Credits to IZ*ONE Wiki)**/ .pi-theme-lyrics.portable-infobox { background: transparent; width: auto; float: none; } .pi-theme-lyrics .pi-data { width: 90%; margin: 0 auto; } .pi-theme-lyrics .pi-data-value { font-size: 14px; } .pi-theme-lyrics .pi-navigation { background:#0013; font-size: 14px; font-weight: initial; } .portable-infobox .pi-section-tab:only-child { display: none; } .pi-theme-lyrics .pi-section-contents { background: #001c; } .pi-theme-lyrics .pi-panel-scroll-wrapper { background: #0013; }

.theme-fandomdesktop-light .KenBox { background-color: white !important; color: black !important; }

/* Links */ .theme-fandomdesktop-light { --ken: #222222; } .theme-fandomdesktop-dark { --ken: #aaaaaa; /* Ken color settings as his individual color is black */ } a[href="/wiki/Josh"] { color: red; }

a[href="/wiki/Pablo"] { color: purple; }

a[href="/wiki/Stell"] { color: yellow; }

a[href="/wiki/Ken"] { color: var(--ken); }

a[href="/wiki/Justin"] { color: green; } a[href="/wiki/Josh"]:hover, a[href="/wiki/Pablo"]:hover, a[href="/wiki/Stell"]:hover, a[href="/wiki/Ken"]:hover, a[href="/wiki/Justin"]:hover { text-decoration:none; } a[href="/wiki/Josh"]:hover { filter:drop-shadow(0 0 3px black) blur(5px); color: #f99 !important; text-decoration:none; }

a[href="/wiki/Pablo"]:hover { filter:drop-shadow(0 0 3px black) blur(5px); color: #CBC3E3 !important; text-decoration:none; }

a[href="/wiki/Stell"]:hover { filter:drop-shadow(0 0 3px black) blur(5px); color: #ffff90 !important; text-decoration:none; }

a[href="/wiki/Ken"]:hover { filter:drop-shadow(0 0 3px black) blur(5px); color: #ffffff !important; text-decoration:none; }

a[href="/wiki/Justin"]:hover { filter:drop-shadow(0 0 3px black) blur(5px); color: #9f9 !important; text-decoration:none; }

/* Shadow Hover */ a[href="/wiki/Josh"]:hover { filter:drop-shadow(0 0 5px #f99); -webkit-filter:drop-shadow(0 0 5px #f99); }

a[href="/wiki/Pablo"]:hover { filter:drop-shadow(0 0 5px #CBC3E3); -webkit-filter:drop-shadow(0 0 5px #CBC3E3); }

a[href="/wiki/Stell"]:hover { filter:drop-shadow(0 0 5px #ffff90); -webkit-filter:drop-shadow(0 0 5px #ffff90); }

a[href="/wiki/Ken"]:hover { filter:drop-shadow(0 0 5px #ffffff); -webkit-filter:drop-shadow(0 0 5px #ffffff); }

a[href="/wiki/Justin"]:hover { filter:drop-shadow(0 0 5px #9f9); -webkit-filter:drop-shadow(0 0 5px #9f9); }

a[href="/wiki/Josh"], a[href="/wiki/Pablo"], a[href="/wiki/Stell"], a[href="/wiki/Ken"], a[href="/wiki/Justin"] { -webkit-transition: all .4s linear 0s; -moz-transition: all .4s linear 0s; -ms-transition: all .4s linear 0s; -o-transition: all .4s linear 0s; transition: all .4s linear 0s; text-shadow: 2px 2px 4px rgba(0,0,0,0.5) } .theme-fandomdesktop-dark .Ken, .theme-fandomdesktop-dark .ken { color: var(--ken) !important; }

/* Mainpage banner, credits to Normani Wiki */ /* Banner 1, Releases */ .hp-banner { background: url(https://static.wikia.nocookie.net/sb19/images/f/ff/SB19_Home_Banner.jpg/revision/latest/scale-to-width-down/800); background-size: cover; background-position: center; background-position-y: top; border: 1px solid transparent; margin-bottom: 0px; -webkit-transform: scaleX(-1); transform: scaleX(-1); } .banner { background: linear-gradient(360deg,#000000cf,transparent); -webkit-transform: scaleX(-1); transform: scaleX(-1); }

/* Banner 2, Welcome */ .hp-banner2 { background: url(https://static.wikia.nocookie.net/itzy/images/b/bc/ITZY_home_banner_1.png/revision/latest/scale-to-width-down/800?cb=20211118002423); background-size: cover; background-position: center; background-position-y: top; border: 1px solid transparent; margin-bottom: 0px; -webkit-transform: scaleX(1); transform: scaleX(1); } .banner2 { background: transparent; -webkit-transform: scaleX(1); transform: scaleX(1); }

/* ==========    ALBUMS ========== */

.book-container, .book-container-comic { -moz-perspective: 1200px; -webkit-perspective: 1200px; -moz-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; -webkit-user-drag: none; user-drag: none; display: block; margin: 0 auto; perspective: 1200px; width: 250px; }

.book-container { width: 250px; }

.book-container-comic { width: 150px; }

.book, .book-comic { -moz-transform-origin: 125px 0; -moz-transform-style: preserve-3d; -moz-transition: 0.75s; -webkit-transform-origin: 125px 0; -webkit-transform-style: preserve-3d; -webkit-transition: 0.75s; box-shadow: 0 2px 4px rgba(227, 109, 118, 0.25); transform-origin: 125px 0; transform-style: preserve-3d; transition: 0.75s; z-index: 5; }

.book:after, .book-comic:after { bottom: 0; content: ""; left: 3px; position: absolute; top: 0; width: 7px; z-index: 20; }

.book:hover { -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); }

.book-comic:hover { -moz-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); }

.book-cover { position: relative; z-index: 10; }

.book-cover img { height: auto; max-width: 100%; vertical-align: bottom; }

.book-spine { background: url(https://i.imgur.com/Mshm8sZ.png); }

.book-spine-comic1 { background: #EF0070; }

.book-spine-comic2 { background: #2F29B0; }

.book-spine-comic3 { background: #7229B0; } .book-spine-comic1, .book-spine-comic2, .book-spine-comic3, .book-spine { -moz-transform-origin: 0; -moz-transform: rotateY(-90deg) translateX(-49px); -webkit-transform-origin: 0; -webkit-transform: rotateY(-90deg) translateX(-49px); background-size: auto 100%; bottom: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); color: #fff; smargin-left: 5px; overflow: hidden; position: absolute; top: 0; transform-origin: 0; z-index: 5; }

.book-spine { transform: rotateY(-90deg) translateX(-30px); width: 30px; }

.book-spine-comic1, .book-spine-comic2, .book-spine-comic3 { transform: rotateY(-90deg) translateX(-20px); width: 20px; }

.book-spine-comic1 h1, .book-spine-comic2 h1, .book-spine-comic3 h1, .book-spine h1 { -moz-transform-origin: 0; -moz-transform: rotateZ(90deg); -webkit-font-smoothing: antialiased; -webkit-transform-origin: 0; -webkit-transform: rotateZ(90deg); color: #fff; display: block; font-size: 2em; font-weight: normal; left: 39px; opacity: 0.75; position: absolute; text-align: left; text-indent: 43px; text-transform: uppercase; top: 0; transform-origin: 0; transform: rotateZ(90deg); width: 250px; }

.book-spine-comic1:before, .book-spine-comic2:before, .book-spine-comic3:before, .book-spine:before { content: ""; display: block; height: 100%; width: 100%; }

/* Bolding page title */ .page-header__title, .page-content h1 { font-weight: 500; }

/* Hides the word "Home" on the main page. */ .mainpage .page-header__title, .mainpage .page-header__separator { display: none; }

/* Credits to TV5 Wiki and Animal Crossing Wiki. */ .community-header-wrapper { margin-bottom: -12px; padding: 15px 20px 15px 20px; background: rgb(var(--theme-page-background-color--rgb)); background: -moz-linear-gradient(0deg, rgba(var(--theme-page-background-color--rgb),1) 0%, rgba(var(--theme-page-background-color--rgb),0) 100%); background: -webkit-linear-gradient(0deg, rgba(var(--theme-page-background-color--rgb),1) 0%, rgba(var(--theme-page-top-and-bottom-border-color--rgb),0) 100%); background: linear-gradient(0deg, rgba(var(--theme-page-background-color--rgb),1) 0%, rgba(var(--theme-page-background-color--rgb),0) 100%); }