MediaWiki:Wikia.css

/* Important Fonts */ @import url('https://fonts.googleapis.com/css?family=Rubik'); /*Font*/ body { font-family: 'Rubik', sans-serif; } /* Background (Credits to UtauSteam) */ body { background-image: -moz-linear-gradient(#000000, #bd0067); background-image: -webkit-linear-gradient(#000000, #bd0067); background-image: -o-linear-gradient(#000000, #bd0067); background-image: linear-gradient(to bottom,#000000, #bd0067); } .WikiaPage { background: url("/wiki/Special:FilePath/XUM_DDALALA_Concept_Photo_1.jpg") center fixed !important; } .WikiaSiteWrapper .WikiaPage { padding-top: 0; border: 2px solid #bd0067; } /* Infoboxes */ .portable-infobox.pi-background { background: #00000040; } .portable-infobox .pi-header { text-align: center; background: linear-gradient(to right, #000000, #bd0067, #bd0067, #000000); color: #ffffff; padding: 6px; } .portable-infobox .pi-title { background: linear-gradient(to right, #000000, #bd0067, #bd0067, #000000); color: #ffffff; padding-top: 10px; text-align: center; } .portable-infobox { background: #00000040; border: 3px solid #000000; } .pi-collapse .pi-header:first-child::after { border-color: #00000040; } .portable-infobox .pi-navigation { background: linear-gradient(to right, #000000, #bd0067, #bd0067, #000000); color: #ffffff; text-align: right; padding: 5px; } .portable-infobox .pi-navigation a { color: #ffffff; } .portable-infobox .pi-navigation a:hover { color: linear-gradient(to right, #000000, #bd0067, #bd0067, #000000); } .portable-infobox .pi-image-collection-tabs { background: #00000040; text-align: center; border-bottom: 2px solid #000000; } .portable-infobox .pi-image-collection-tabs .current { background: linear-gradient(to right, #000000, #bd0067, #bd0067, #000000); color: #ffffff; } ul.pi-image-collection-tabs li { border:0; } li.pi-tab-link.pi-item-spacing:hover { background: gba(0, 0, 0, 0.2); } li.pi-tab-link.pi-item-spacing:active { color: #ffffff; } /* Table */ .table { width: 100%; margin: 0 auto; border-collapse: separate; border-spacing: 2px; text-align: center; border: 2px solid #000000; } .table td, .table tr { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border: 2px solid #000000; } .table th { color: linear-gradient(to right, #000000, #bd0067, #bd0067, #000000); border: 2px solid #000000; } .table tr { background: #00000040; border: 2px solid #000000; } .table tr:not(:first-child) th { background: linear-gradient(to right, #000000, #bd0067, #bd0067, #000000); color: #ffffff; } .table tr:first-child th { background: linear-gradient(to right, #000000, #bd0067, #bd0067, #000000); color: #ffffff; } /* Tabber   */ ul.tabbernav li a { border:1px !important; background: #ffffff!important; color: #444444 !important; font-weight: 400 !important; margin:0 !important; padding:7px 7px !important; cursor:default; } ul.tabbernav li:first-child a { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } ul.tabbernav li:last-of-type a { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .tabberlive .tabbertab { border: none !important; border-radius: 3px !important; } ul.tabbernav { background: #00000040; border-bottom: 0 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; } ul.tabbernav li a:active { background: #000000!important; } ul.tabbernav li.tabberactive a { background: #000000!important; color :#ffffff!important; } ul.tabbernav li.tabberactive a:active { background: #000000!important; color:#ffffff!important; } /* Links */ .WikiaPage a { font-weight: bold; transition: opacity 0.3s ease; } .WikiaPage a:hover { background: linear-gradient(90deg, #bd0067,#000000,#ffffff); background-size: 2400% 2400%; -webkit-background-clip: text; -webkit-text-fill-color: #00000040; -webkit-animation: izdient 8s ease infinite; -moz-animation: izdient 8s ease infinite; animation: izdient 8s ease infinite; text-shadow: 0 0 2px currentColor; } /* 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: 175px; } .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; 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: #80c4e9; } .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%; } /* Spanses */ .spanse, .spancr, .spanmm, .spanen, .spanqunew, .spansk{ float:left; display: block; position: relative; z-index: 99; } .spanse2, .spancr2, .spanmm2, .spanen2, .spanqunew2, .spansk2{ transition-duration: 0.4s; transition-timing-function: ease-out; display: block; position: absolute; z-index: 100; } .spanse2, .spancr2, .spanmm2, .spanen2, .spanqunew2, .spansk2 { opacity: 0; } .spanse2:hover, .spanmm2:hover, .spanen2:hover, .spancr2:hover, .spanqunew2:hover, .spansk2:hover{ opacity: 100; } /* New in Navigation (Credits to IZ*ONE Wiki)*/ .wds-community-header__local-navigation [href="/wiki/Mark Siwat/Discography"] span::after, .wds-community-header__local-navigation [href="/wiki/Category:Digital Singles"] span::after, .wds-community-header__local-navigation [href="/wiki/Mark Siwat/Videography"] span::after, .wds-community-header__local-navigation [href="/wiki/Mark Siwat/Events"] span::after{ content: 'new'; position: relative; background-color: #f5a2c0; top: 0; padding: 0 2px; font-size: 80%; font-weight: normal; border-radius: 4px; text-transform: lowercase; color: black; margin-left: 5px; } /**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 {