MediaWiki:Wikia.css

/* Imports */ @import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap'); body, .category-gallery-item .snippet .text, a.wikia-button, .wikia-single-button a, .wikia-menu-button, input, .button, button, select {font-family: 'Questrial', sans-serif;}

/* Staff Name Colors */ a[href="/wiki/User:Aestri"] { color: #ff14f7; }

/* Background */ @media screen and (min-width: 1025px) { body.skin-oasis { background-image: linear-gradient(to bottom, #8c8ee2, #6b94cc); }

.WikiaPage .WikiaPageContentWrapper { border: 2px solid #d0f1ff; box-shadow: 0px 0px 28px #d0f1ff; border-top: 2px solid {color:#d0f1ff} !important; } .WikiaSiteWrapper .WikiaPage { padding-top: 0; } .WikiaPage .WikiaPageContentWrapper { background: #0004; position: relative; } .WikiaPage .WikiaPageContentWrapper::before { opacity: 0.40; background: #000 url("/wiki/Special:FilePath/Day_Dream_Promotional_Photo.png") center fixed; background-size: 1280px; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }

/* Image Hover */ .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); }

/* Album Hover */ .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: #cdd2dd; } .book-spine-comic2 { background: #FF69B4; } .book-spine-comic3 { background: black; } .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%; }

/* Customization of Featured Article */ .view { width: 300px; height: 300px; margin-left: auto; margin-right: auto; float: left; overflow: hidden; position: relative; } .view .mask, .view .content { width: 300px; height: 300px; border-radius:27px; position: absolute; overflow: hidden; top: 30px; left: 0 } .view img { display: block; position: relative } .view h2 { color: #EBEBEB; font-weight:bold; text-align: center; position: relative; font-size: 150%; background: rgba(0, 0, 0, 0.9); } .view p { font-size: 120%; position: relative; color: #EBEBEB; padding: 10px 20px 20px; text-align: left; } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #FFB6C1; color: #fff; text-transform: uppercase; box-shadow: 0 0 1px #000 } .view a.info:hover { box-shadow: 0 0 5px #000 } .view img { transition: all 0.4s ease-in-out 0.5s; } .view .mask{ background-color: rgba(227, 109, 118,0.8); opacity:0; transition: all 0.3s ease-in 0.4s; } .view h2{ opacity:0; border-bottom: 1px solid rgba(227, 109, 118, 0.3); background: transparent; margin: 20px 40px 0px 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; }

/* Custom Tabber */ ul.tabbernav { color:var(--themed-text-color); font-weight:bold !important; padding:5px 0px !important; border: none !important; text-transform: uppercase !important;} ul.tabbernav li a { color:var(--themed-text-color); padding:5px 5px !important; margin-left:0px !important; border:0 !important; background: transparent !important; transition-duration: 1s !important; transition-timing-function: ease-out !important;} ul.tabbernav li a:link { color:var(--themed-text-color); border-bottom: 2px solid var(--themed-button-background) !important; margin-right: 2px !important;} ul.tabbernav li a:visited { color:var(--themed-text-color); border-bottom: 2px solid var(--themed-button-background) !important; margin-right: 2px !important;} ul.tabbernav li a:hover { color:var(--themed-text-color); border-bottom: 2px solid var(--themed-button-background) !important; background-color: transparent !important; margin-right: 2px !important; transition-duration: 1s !important; transition-timing-function: ease-out !important;} ul.tabbernav li.tabberactive a { color:var(--themed-text-color); border-bottom: 2px solid var(--themed-button-background) !important; background-color: transparent !important; margin-right: 2px !important;} ul.tabbernav li.tabberactive a:hover { color:var(--themed-text-color); border-bottom: 2px solid var(--themed-button-background) !important; margin-right: 2px !important;} .tabberlive .tabbertab { color:var(--themed-text-color); border:0px solid transparent !important; border-top:0 !important;}