MediaWiki:Wikia.css

/* Google Web Fonts */ /********************/ @import url('https://fonts.googleapis.com/css?family=Muli'); @import url('https://fonts.googleapis.com/css?family=Muli');

.WikiaPage { font-family: 'Muli'; }

/* Scroll Bar (from the Little Mix wiki)*/
 * -webkit-scrollbar {

background: #951F2B ; }
 * -webkit-scrollbar-thumb {

background:black !important; }
 * -webkit-scrollbar-thumb:hover {

background:black !important; }
 * -webkit-scrollbar-thumb {

width:auto !important; }

/***** SCROLL BAR ENDS *****/

/* Wordmark (Credits to Elena of Avalor Wiki) */ .WikiHeader .wordmark { -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; color: #ff87c3; font-weight: bold; margin-bottom: 10px; width: 250px; word-wrap: break-word; } .WikiHeader .wordmark: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); } .pph-wiki-header .wordmark { -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; color: #ff87c3; font-weight: bold; margin-bottom: 10px; width: 250px; word-wrap: break-word; } .pph-wiki-header .wordmark: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); } .wds-community-header__wordmark 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; color: #ff87c3; font-weight: bold; margin-bottom: 10px; word-wrap: break-word; } .wds-community-header__wordmark 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); }

/***** WORDMARK ENDS *****/

/* Rounded corners for nav */ .WikiHeader .navbackground, .WikiHeader > nav .subnav-2 { border-radius: 0 0.75em 0 0.75em; } .WikiHeader > nav li:first-child { border-radius: 0.75em 0 0 0; } .WikiHeader > nav li:last-child { border-radius: 0 0.75em 0 0; } .WikiHeader nav li.marked, .WikiHeader > nav .subnav-2 .marked2 .subnav-2a { border-radius: 0.75em 0.75em 0 0; } .WikiHeader nav { border-radius: 1em 1em 0 0; } .WikiHeader > nav li.marked > a { border-top: none; } .WikiHeader > nav .subnav-3 { border-radius: 0 0.75em 0.75em 0.75em; } .GlobalNavigation .subnav { border-radius: 0 0 0.75em 0.75em; } /* Rounded chat avatars */ .ChatModule .avatar { border-radius: 10px; }

/* Rounding chat avatars*/ .ChatModule .avatar { border-radius: 10px; }

/***** BORDER ENDS *****/

/* Hover images */ .imgUnder { overflow: visible; display: inline-block; position: relative } .imgOver { display: block; visibility: hidden; width: inherit; height: inherit; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.imgUnder:hover .imgOver { visibility: visible !important; } /***** HOVER IMAGES ENDS *****/ .comments li[data-user="Violetlover1234"] blockquote:after { border-color: transparent #ff69b4 #ff69b4 transparent !important; }

.comments li[data-user="Violetlover1234"] blockquote { color: black !important; font-family: segoe ui; font-size: 16px !important; border: 3px solid #ff69b4 !important; }

.comments li[data-user="Phoenix107"] blockquote:after { border-color: transparent #ff69b4 #ff69b4 transparent !important; } .comments li[data-user="Phoenix107"] blockquote { color: black !important; font-family: segoe ui; font-size: 16px !important; border: 3px solid #ff69b4 !important; }

.comments li[data-user="Nick2345"] blockquote:after { border-color: transparent #ff69b4 #ff69b4 transparent !important; } .comments li[data-user="Nick2345"] blockquote { color: black !important; font-family: segoe ui !important; font-size: 16px !important; border: 3px solid #ff69b4 !important; } /********************/

/* 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: #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; }