MediaWiki:Common.css

@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:Common.css");

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

/*** BACKGROUND ***/ @media screen and (min-width: 1025px) { body.theme-fandomdesktop-light { background: linear-gradient(135deg, #67e6d7,#5adfc5,#5adfac,#5adf98,#46c88b,#46c868,#63cc70,#7fd96a,#82eb75,#ffee64,#ffc199,#ffa060) fixed; } }

@media screen and (min-width: 1025px) { body.theme-fandomdesktop-dark { background: linear-gradient(135deg, #67e6d7,#5adfc5,#5adfac,#5adf98,#46c88b,#46c868,#63cc70,#7fd96a,#82eb75,#ffee64,#ffc199,#ffa060) fixed; } }

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

/*** LIGHT THEME (DEFAULT) ***/ .theme-fandomdesktop-light .resizable-container .page::before { opacity: 0.3; background: transparent url("https://static.wikia.nocookie.net/aroha/images/6/65/Astro_Switch_On_2.png/revision/latest") 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("") 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; }

/* Table of Contents Background Color */ .page-content #toc { background: var(--theme-page-background-color); }

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

/*** TABVIEW ***/ border-radius: 0 0 0 2px; } padding: 0; } .tabBody.selected { background: var(--activity-dark-background-color) !important; border-radius: 2px 2px 3px 3px !important; padding: 1em !important; } font-size: 10px; padding: 11px 9px; } .wds-community-header__local-navigation [href="/wiki/Discography"] span::after, .wds-community-header__local-navigation [href="/wiki/Category:Mini_album"] span::after, .wds-community-header__local-navigation [href="/wiki/Switch_On"]::after{ content: 'new'; position: relative; background-color: #ffe300; top: 0; padding: 0 2px; font-size: 80%; font-weight: normal; border-radius: 4px; text-transform: lowercase; color: black; margin-left: 5px; }
 * 1) mw-content-text .tabs li.selected a:first-child {
 * 1) mw-content-text .tabs {
 * 1) mw-content-text .tabs li:not(.selected) a,
 * 2) mw-content-text .tabs li.selected a {

/*** CUSTOM SLIDER ***/ background: transparent; width: 100%; height: auto; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; text-align: center; } position: relative; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transition-timing-function: cubic-bezier(.67,.01,.23,1); -o-transition-timing-function: cubic-bezier(.67,.01,.23,1); transition-timing-function: cubic-bezier(.67,.01,.23,1); } margin: 0px; padding: 0px; } margin: 0px; } .Sld { height: auto; list-style: none; display: inline; float: left; } .SlideIMG { width: 100%; } .SlideIMG img { display: block; max-width: 100%; height: auto; min-width: 100%; min-height: 100%; position: relative; } position: absolute; display: block; } .NavBtn { position: relative; display: block; top: 0px; width: auto; height: auto; list-style: none; margin: 0px; background: transparent; } .nmLeft { height: 100%; left: 0px; background: linear-gradient(to right, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent); } .nmLeft li { list-style: none; padding: 10px 100px 10px 10px; } .nmLeft li:hover { cursor: pointer; background: linear-gradient(to right, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent); } .nmRight { height: 100%; right: 0px; background: linear-gradient(to left, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent); text-align: left; } .nmRight li { list-style: none; padding: 10px 10px 10px 100px; } .nmRight li:hover { cursor: pointer; background: linear-gradient(to left, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent); } .nmTop { width: 100%; top: 0px; background: linear-gradient(to bottom, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent); text-align: left; } .nmTop li { display: inline-block; list-style: none; padding: 10px 10px 20px 10px; } .nmTop li:hover { cursor: pointer; background: linear-gradient(to bottom, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent); } .nmBottom { width: 100%; bottom: 0px; background: linear-gradient(to top, rgba(61,61,61,0.8), rgba(61,61,61,0.8), transparent); text-align: left; } .nmBottom li { display: inline-block; list-style: none; padding: 20px 10px 10px 10px; } .nmBottom li:hover { cursor: pointer; background: linear-gradient(to top, rgba(81,81,81,0.8), rgba(81,81,81,0.8), transparent); } .nbActiveLeft { background: linear-gradient(to right, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent); } .nbActiveRight { background: linear-gradient(to left, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent); } .nbActiveTop { background: linear-gradient(to bottom, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent); } .nbActiveBottom { background: linear-gradient(to top, rgba(111,111,111,0.8), rgba(111,111,111,0.8), transparent); }
 * 1) SliderView {
 * 1) SliderWrapper {
 * 1) SliderWrapper, #SliderWrapper ul, #SliderWrapper li, #NavBtns, #NavBtns ul {
 * 1) NavBtns li {
 * 1) NavBtns {

/*** TABBER STYLING ***/ .tabbernav { font-family: inherit !important; font-weight: normal !important; font-size: 15px !important; border-bottom: 3px solid #b03238 !important; padding: 0.3em 0 !important; } .tabbernav a { padding: 0.3em 0.5em !important; margin: 0 !important; color: #000 !important; border: none !important; background: transparent !important; } .tabberactive a { color: white !important; background: #b03238 !important; } .tabbernav :not(.tabberactive) a:hover { background: #4b0708 !important; } .tabbertab { border: none !important; padding: 0 !important; } /*** SCROLLBAR ***/
 * -webkit-scrollbar {

width: 7px; height: 10px; }
 * -webkit-scrollbar-thumb {

background:#b03238; border-radius:5px; }
 * -webkit-scrollbar-thumb:hover {

background:#4b0708 !important; border-radius:5px; }
 * -webkit-scrollbar-thumb:active {

background:#4b0708 !important; border-radius:5px; }

/*** Hover ***/ .increase img { opacity: 1; filter: alpha(opacity=100); transition: all 0.6s ease; } .increase img:hover { opacity: 0.8; filter: alpha(opacity=80); transform:scaleX(1.05) scaleY(1.05); }

.hoverimage 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; opacity: 1; filter: alpha(opacity=100); } .hoverimage img:hover { opacity: 0.5; filter: alpha(opacity=50); } .grayscalehover { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .grayscalehover:hover { -webkit-filter: invert(100%); }

.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); }

.hoverimage img { transition: all 0.4s ease; opacity: 1; filter: alpha(opacity=100); } .hoverimage img:hover { opacity: 0.8; filter: alpha(opacity=80); transform:scaleX(0.95) scaleY(0.95); } .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); }