MediaWiki:Wikia.css

/* CSS placed here will be applied to all skins on the entire site. */

/* Imports */ @import "/load.php?mode=articles&articles=u:dev:MediaWiki:ModernizedChanges.css&only=styles"; @import "/load.php?mode=articles&articles=u:dev:MediaWiki:FandomizedTabs/tabbers.css&only=styles"; @import url('https://fonts.googleapis.com/css2?family=Sanchez&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Corben&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Eczar:wght@500&display=swap');

/******* Wiki Fonts *******/

/* Wiki Font */ body { font-family: 'Sanchez', serif; font-size: 14.5px; } h1, h2, h3, h4 .WikiaPage .page-header__main { font-family: 'Corben', cursive; font-size: 20px; } .WikiaPage .page-header__sitename { font-family: 'Corben', cursive; }

/* Header Title */ .WikiaPage .page-header__title { text-transform: capitalize; font-family: 'Yellowtail', cursive !important; font-size: 24.5pt; color: #09253E; }

/******* END - Wiki Fonts *******/

/******* TOC, Rails & Category *******/

/* WikiRail */ .WikiaRail .module, .WikiaRail .rail-module { padding: 16px 10px 16px; margin: 0 0 25px 0; border: 3px solid #00274A; border-radius: 10px; background: rgb(226, 131, 145, 0.19) !important; vertical-align: text-bottom !important; }

/* Wiki Categories */ .WikiaArticleCategories, .article-categories { background: rgba(226, 131, 145, 0.19) !important; border: 1px solid #00274A !important; box-shadow: 2px 2px #00274A; color: white; border-radius: 10px; vertical-align: text-bottom !important; }

/* TOC Customization */ .WikiaArticle .toc { background: rgba(226, 131, 145, 0.19) !important; border: 2px solid #00274A; box-shadow: 2px 2px #00274A; border-radius: 10px; }

/******* END - TOC, Rails & Category *******/

/******* Wiki Involve CSS *******/

/* Wiki Background - Credits to We Bare Bears Wiki */ body.skin-oasis, body.background-dynamic.skin-oasis::after, body.background-dynamic.skin-oasis::before { background-size: cover; }

/* Hide WikiRail */ .WikiaMainContent { float:none; width:auto; }

/* Wordmark Size - Credits to Tower of God Wiki */ max-width: 100%; margin: auto; display: inline-block; }
 * 1) wmDiv img {

/* Wordmark - Credits to Shield Hero WikHoveri */ .wds-community-header__wordmark a { display: block; background: url("https://static.wikia.nocookie.net/a-business-proposal/images/8/89/Wiki-wordmark.png/revision/latest?cb=20210216084446&format=original") top left/contain no-repeat; } .wds-community-header__wordmark img { visibility: hidden; }

/* Hide Main Page Home */ .mainpage .WikiaPage .page-header__title, .mainpage .WikiaPage .page-header__separator { display: none; }

/* Hide Gallery Uploader */ .wikia-photogallery-add, .wikia-button noprint { display: none !important; }

/* Hide External Arrow */ .mw-parser-output a.external { background: none !important; content: none !important; padding-right: 0 !important; } .WikiaArticle a.external:after, .WikiaArticle a[href^="gopher://"]:after { background-image: none; content: none; }

/* Wiki Glow */ .WikiaPage > .WikiaPageContentWrapper { border: 1px solid #FFFFFF; box-shadow: 0 0 20px #ED8A8F; } .WikiaSiteWrapper > header { box-shadow: 0 0 20px #ED8A8F; }

/* Wiki Links - Credits to Studio Ghibli Wiki */ a:hover, a:active { color: #FFFFFF !important; text-decoration: none; text-shadow: #ED8A8F 0 0 7px, #ED8A8F 0 0 7px, #ED8A8F 0 0 7px, #ED8A8F 0 0 7px, #ED8A8F 0 0 7px, #ED8A8F 0 0 7px, #ED8A8F 0 0 7px, #ED8A8F 0 0 7px; transition: all 0.5s ease-in; } a.new:hover, a.new:active { color: #FFFFFF !important; text-decoration: none; text-shadow: red 0 0 7px, red 0 0 7px, red 0 0 7px, red 0 0 7px, red 0 0 7px, red 0 0 7px, red 0 0 7px, red 0 0 7px; transition: all 0.5s ease-in; } a { transition: all 0.5s ease-out; }

/* Wiki Ads Removal */ .WikiaTopAds { padding: 0; }

/******* END - Wiki Involve CSS *******/

/******* WIKI CSS *******/

/* Modern Tabs - Credits to JustLeafy and Speedit on Dev Fandom */ border: none; font-family: 'Eczar', serif; } .tabberlive > ul.tabbernav > li:last-child { margin-right: 0; } ul.tabbernav li.tabberactive:first-child a { margin-left: 0 !important; }   display: flex; flex-flow: row nowrap; padding: 0; font-family: 'Eczar', serif; overflow: auto; }   display: flex; }   background: initial; border-color: currentColor; border-width: 0 0 4px !important; color: inherit; font-size: 20px; font-weight: 700; line-height: 2em; margin: 0; padding: 13px 11px; text-align: center; text-transform: uppercase; transition: opacity 0.3s; white-space: nowrap; }   opacity: 0.25; }   opacity: 0.5; }   border: none; justify-content: center; }   display: flex; flex-flow: row nowrap; padding: 0; font-family: 'Eczar', serif; overflow: auto; }
 * 1) mw-content-text .tabber div.tabbertab,
 * 2) mw-content-text .tabber ul.tabbernav {
 * 1) mw-content-text .tabber ul.tabbernav {
 * 1) mw-content-text .tabber ul.tabbernav li {
 * 1) mw-content-text .tabber ul.tabbernav li:not(.tabberactive) a,
 * 2) mw-content-text .tabber ul.tabbernav li.tabberactive a {
 * 1) mw-content-text .tabber ul.tabbernav li:not(.tabberactive) a {
 * 1) mw-content-text .tabber ul.tabbernav li:not(.tabberactive):hover a {
 * 1) mw-content-text .tabber div.tabbertab,
 * 2) mw-content-text .tabber ul.tabbernav {
 * 1) mw-content-text .tabber ul.tabbernav {

/* Scroll - Credits to Who Made Me a Princess Wiki */
 * -webkit-scrollbar {

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

border-radius: 8px; background-color: transparent !important; color: transparent !important; background: transparent !important; }
 * -webkit-scrollbar-thumb {

background: linear-gradient(0deg, #7E8AA0, #F7A1A5); border: 1px solid #9C575B; border-radius: 7px; -webkit-box-shadow: inset 0 0 2px #F7A1A5; -moz-box-shadow: inset 0 0 2px #7E8AA0; }
 * -webkit-scrollbar-thumb:hover {

background: linear-gradient(0deg, #7E8AA0, #F7A1A5); border: 1px solid #9C575B; border-radius: 1em; -webkit-box-shadow: inset 0 0 2px #F7A1A5; -moz-box-shadow: inset 0 0 2px #F7A1A5; }
 * -webkit-scrollbar-thumb:active {

background: #C4E2F2; border: 1px solid #9C575B; border-radius: 7px; -webkit-box-shadow: inset 0 0 2px #F7A1A5; -moz-box-shadow: inset 0 0 2px #F7A1A5; }

/* Two-Column Reference - Credits to Animanga Wiki */ .references { font-size: 110%; -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } .references > li { margin-right: 25px; }

/* Hover Synopsis - Credits to My Deepest Secret Wiki */ .overlay-default { position: relative; width: 200px; } .overlay-hover { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 200px; opacity: 0; transition: 0.8s ease; } .overlay-default:hover .overlay-hover { opacity: 1; }

/* Hover Caption - Credits to ScarletRose223 */ .hovercaption { position: relative; width: 150px; } .caption-nonhover, .hovercaptionhover { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(234, 190, 190, 0.95); overflow: hidden; width: 100%; height: 27px; transition: .5s ease; } .hovercaption:hover .hovercaptionhover { height: 47px; }

/* Hover Book - Credits to the BlackPink Wiki */ .book-hover, .book-hover-image { -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: auto; } .book-hover, .book-hover-image { width: auto; } .book, .book-image { -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 0 4px rgba(97, 133, 184, 0.33); transform-origin: 125px 0; transform-style: preserve-3d; transition: 0.75s; } .book:after, .book-image:after { bottom: 0; content: ""; left: 3px; position: absolute; top: 0; width: 7px; } .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-image: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; } .book-cover img { height: auto; width: auto; max-width: 100%; vertical-align: bottom; } .book-spine-image { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #F7DCCD), color-stop(75%, #59799E)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #F7DCCD), color-stop(75%, #59799E)); background-image: -moz-linear-gradient(top, #F7DCCD 25%, #59799E 75%); background-image: -o-linear-gradient(top, #F7DCCD 25%, #59799E 75%); background-image: -ms-linear-gradient(top, #F7DCCD 25%, #59799E 75%); } .book-spine-image { -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 0 4px rgba(0, 0, 0, 0.25); color: #fff; margin-left: 5px; overflow: hidden; position: absolute; top: 0; transform-origin: 0; } .book-spine { transform: rotateY(-90deg) translateX(-30px); width: 30px; } .book-spine-image { transform: rotateY(-90deg) translateY(-1px) translateX(-26px); width: 20px; } .book-spine-image:before, .book-spine:before { content: ""; display: block; height: 100%; width: 100%; }

/* Hover Affiliates - Credits to Promised Neverland Wiki */ .hoveraffiliate img { -moz-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); -moz-transition: All 0.6863s ease; -o-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); -o-transition: All 0.6863s ease; -webkit-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); -webkit-transition: All 0.6863s ease; } .hoveraffiliate img:hover { -webkit-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); -moz-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); -ms-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); -o-transform: rotate(1deg) scale(1.090) skew(180deg) translate(0px); }

/* Hover Item - Credits to Akatsuki no Yona Wiki */ .hoveritem { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); -webkit-transition-duration: 0.3s; -webkit-transition-property: transform; } .hoveritem:hover, .hoveritem:focus, .hoveritem:active { -webkit-transform: scale(1.1); transform: scale(1.1); }

/* Hover Up - Credits to the My Deepest Secret Wiki */ .view { width: 225px; height: 384px; margin-left: auto; margin-right: auto; float: left; overflow: hidden; position: relative; } .view .mask, .view .content { width: 220px; height: 400px; border-radius: 0; position: absolute; overflow: hidden; bottom: 0; left: 0 } .view img { display: block; position: relative } .view h2 { position: relative; color: #0E235C; font-weight: bold; font-size: 150%; font-family: 'Eczar', serif; text-align: center; background: rgb(0, 0, 0, 0.9); padding-top: 15px; border: none; } .view p { position: relative; color: white; font-size: 105%; text-align: center; padding: 0 30px; line-height: 35px; } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #F7DCCD; color: white; text-transform: uppercase; box-shadow: 0 0 3px #F7DCCD } .view a.info:hover { box-shadow: 0 0 5px #F7DCCD } .view img { transition: all 0.4s ease-in-out 0.5s; } .view .mask { background: rgb(97, 133, 184, 0.33); opacity: 0; transition: all 0.3s ease-in 0.4s; } .view h2 { opacity: 0; background: transparent; margin: 40px 40px 0 40px; transform: scale(10); transition: all 0.3s ease-in-out 0.1s; } .view p { opacity: 0; transform: scale(10); transition: all 0.3s ease-in-out 0.2s; } .view a.info { opacity: 0; transform: translateY(100px); transition: all 0.3s ease-in-out 0.1s; } .view:hover .mask { opacity: 1; transition-delay: 0s; }																			 .view:hover img { transition-delay: 0s; } .view:hover h2 { opacity: 1; transform: scale(1); transition-delay: 0.1s; } .view:hover p { opacity: 1; transform: scale(1); transition-delay: 0.2s; } .view:hover a.info { opacity: 1; transform: translateY(0px); transition-delay: 0.3s; }

/******* END - WIKI CSS *******/

/******* Wiki Staff Colors *******/

/** Diamaker **/ a[href$="/wiki/User:Diamaker"], a[href$="Message_Wall:Diamaker"], a[href*="Message_Wall:Diamaker"], a[href="/wiki/User_blog:Diamaker"], a[href="/wiki/Message_Wall:Diamaker"], a[href="/wiki/Special:Contributions/Diamaker"], a[href="/wiki/Special:UserProfileActivity/Diamaker"] { font-weight: bold !important; color: #815A6B !important; } .Wall .edited-by a.subtle[href$="Wall:Diamaker"]:after{ color: #815A6B !important; content: "BUREAUCRAT" !important; } /******* END - Wiki Staff Colors *******/

/****** Infobox Themes *******/

/** Character Infobox **/

.portable-infobox.pi-theme-character .pi-title { background: #293660; color: #FAF4F7; font-family: 'Eczar', serif; font-size: 15pt; line-height: 28px; margin: 0px; padding: 5px; text-align: center; } .portable-infobox.pi-theme-character .pi-header { background: #293660; border-radius: 0px; color: #FAF4F7; font-family: 'Eczar', serif; font-size: 12pt; line-height: 23px; margin: 0px; padding: 4px; text-align: center; } .portable-infobox.pi-theme-character .pi-navigation { background: #293660; color: #FAF4F7; font-family: 'Corben', serif; font-size: 9.5pt; line-height: 17px; margin: 0px; padding: 3px; text-align: center; } .portable-infobox.pi-theme-character { background-color: transparent; border-radius: 24px; overflow: hidden; } .portable-infobox.pi-theme-character { border: 3px solid #293660; } .portable-infobox.pi-theme-character .pi-image-collection-tabs { display: flex; justify-content: center; margin: 0; } .portable-infobox.pi-theme-character .pi-image-collection-tabs li { background: rgb(97, 133, 184, 0.33); border: none; box-sizing: border-box; color: #FAF4F7; font-family: 'Eczar', serif; font-size: 12px; line-height: 20px; flex: 1 0 auto; margin: 0; } .portable-infobox.pi-theme-character .pi-image-collection-tabs li.current, .portable-infobox.pi-theme-character .pi-image-collection-tabs li:hover { background: rgb(97, 133, 184, 0.33); color: #6C7593; font-weight: normal; transition: all 0.5s; } .portable-infobox.pi-theme-character .pi-image-thumbnail { height: auto; width: 100%; } .portable-infobox.pi-theme-character .pi-data-label { color: inherit; font-family: 'Sanchez', serif; font-size: 8.5pt; } .portable-infobox.pi-theme-character .pi-data-value { border-radius: 3px; }

/** END of Character Infobox **/

/** Episode Infobox **/ .portable-infobox.pi-theme-episode .pi-title { background: #E28391; color: #F2F4F7; font-family: 'Eczar', serif; font-size: 15pt; line-height: 28px; margin: 0px; padding: 5px; text-align: center; } .portable-infobox.pi-theme-episode .pi-header { background: #E28391; border-radius: 0px; color: #F2F4F7; font-family: 'Eczar', serif; font-size: 12pt; line-height: 23px; margin: 0px; padding: 4px; text-align: center; } .portable-infobox.pi-theme-episode .pi-navigation { background: #E28391; color: #F2F4F7; font-family: 'Corben', serif; font-size: 9.5pt; line-height: 17px; margin: 0px; padding: 3px; text-align: center; } .portable-infobox.pi-theme-episode { background-color: transparent; border-radius: 24px; overflow: hidden; } .portable-infobox.pi-theme-episode { border: 3px solid #E28391; } .portable-infobox.pi-theme-episode .pi-image-collection-tabs { display: flex; justify-content: center; margin: 0; } .portable-infobox.pi-theme-episode .pi-image-collection-tabs li { background: rgba(226, 131, 145, 0.33); border: none; box-sizing: border-box; color: #3D4A66; font-family: 'Eczar', serif; font-size: 12px; line-height: 20px; flex: 1 0 auto; margin: 0; } .portable-infobox.pi-theme-episode .pi-image-collection-tabs li.current, .portable-infobox.pi-theme-episode .pi-image-collection-tabs li:hover { background: rgba(226, 131, 145, 0.33); color: #936C7E; font-weight: normal; transition: all 0.5s; } .portable-infobox.pi-theme-episode .pi-image-thumbnail { height: auto; width: 100%; } .portable-infobox.pi-theme-episode .pi-data-label { color: inherit; font-family: 'Sanchez', serif; font-size: 8.5pt; } .portable-infobox.pi-theme-episode .pi-data-value { border-radius: 3px; }

/** END of Episode Infobox **/

/** Location Infobox **/

.portable-infobox.pi-theme-location .pi-title { background: #E28391; color: black; font-family: 'Eczar', serif; font-size: 15pt; line-height: 28px; margin: 0px; padding: 5px; text-align: center; } .portable-infobox.pi-theme-location .pi-header { background: #E28391; border-radius: 0px; color: black; font-family: 'Eczar', serif; font-size: 12pt; line-height: 23px; margin: 0px; padding: 4px; text-align: center; } .portable-infobox.pi-theme-location .pi-navigation { background: #E28391; color: black; font-family: 'Corben', serif; font-size: 9.5pt; line-height: 17px; margin: 0px; padding: 3px; text-align: center; } .portable-infobox.pi-theme-location { background-color: transparent; border-radius: 24px; overflow: hidden; } .portable-infobox.pi-theme-location { border: 3px solid #E28391; } .portable-infobox.pi-theme-location .pi-image-collection-tabs { display: flex; justify-content: center; margin: 0; } .portable-infobox.pi-theme-location .pi-image-collection-tabs li { background: rgba(236, 191, 131, 0.33); border: none; box-sizing: border-box; color: #ECBF83; font-family: 'Eczar', serif; font-size: 12px; line-height: 20px; flex: 1 0 auto; margin: 0; } .portable-infobox.pi-theme-location .pi-image-collection-tabs li.current, .portable-infobox.pi-theme-location .pi-image-collection-tabs li:hover { background: rgba(236, 191, 131, 0.33); color: #ECBF83; font-weight: normal; transition: all 0.5s; } .portable-infobox.pi-theme-location .pi-image-thumbnail { height: auto; width: 100%; } .portable-infobox.pi-theme-location .pi-data-label { color: inherit; font-family: 'Sanchez', serif; font-size: 8.5pt; } .portable-infobox.pi-theme-location .pi-data-value { border-radius: 3px; }

/** END of Location Infobox **/

/******* END of Infobox Themes *******/