MediaWiki:Common.css

/* COPY, PASTE AND ADJUST FROM ERIC NAM WIKI*/ /***** CSS placed here will be applied to all skins on the entire site. *****/ /* Imports */ @import url('/load.php?mode=articles&articles=MediaWiki:CustomSlider.css|u:weeekly:MediaWiki:DropdownMenu.css|u:dev:MediaWiki:CategoryRefresh.css|u:dev:MediaWiki:FandomizedActivityFeed.css|u:dev:MediaWiki:FandomizedTabs/tabviews.css|u:dev:MediaWiki:BalancedInterwiki.css|u:dev:MediaWiki:MinifiedLeftTabs/code.css|u:dev:MediaWiki:MinimalistSliderText.css|u:dev:MediaWiki:ModernPolls.css|u:dev:MediaWiki:ModernRail.css|MediaWiki:Themes.css|MediaWiki:UserProfile.css|u:dev:MediaWiki:FandomizedButtons.css|MediaWiki:Infobox.css|MediaWiki:Root.css&only=styles');

/* Font */ @import url('https://fonts.googleapis.com/css?family=Roboto|Rubik&display=swap'); @import url('https://fonts.googleapis.com/css?family=Quicksand|Comfortaa|Mali|Raleway|Itim|Parisienne|Poiret+One|Roboto+Slab:400,100,300,700&subset=latin,latin-ext');

/* Font body */ .WikiaPage, .body { font-family:Roboto; }

/* TOC (JustLeafy's Wiki) */ border-left: 2px solid var(--theme-accent-color) !important; border: none; padding: 1em; background-color: var(--activity-light-background-color); border-radius: 0 3px 3px 0; }
 * 1) toc {

.WikiaArticle #toctitle h2 { font-size: 16px; font-weight: bold; }

.WikiaArticle h2 { font-weight: bold; }

.WikiaArticle h5 { font-size: 15px; }

/* Background (Credits to UtauSteam) */ @media screen and (min-width: 1025px) { body.skin-oasis { background-image: linear-gradient(#F5F4E9,#FFFFFF,#E2E4E8); } .WikiaSiteWrapper .WikiaPage { padding-top:0; }

.WikiaPage .WikiaPageContentWrapper { background: transparent; position: relative; border: 2px solid var(--theme-border-color); border-top:2px solid var(--theme-accent-color); box-shadow:0 0 20px var(--theme-accent-color); }

/* Remove ugly header gradient */ .fandom-community-header__background { visibility: hidden; }

/* Translucent article backgrounds */ .page__main, .page__right-rail, background-color: rgba(var(--theme-page-background-color--rgb), 0.86); }
 * 1) mixed-content-footer {

.page__right-rail .rail-module { background: transparent; }

/* Import background from image URL */ body.mediawiki { background: url('https://kpopping.com/documents/03/4/2048/EBwijlGU8AAhedG.jpeg'); background-attachment: fixed; background-size: cover; }

/* Wordmark hover */ .wds-community-header__wordmark img { opacity: 1; filter: alpha(opacity=100); transition: all 1.5s ease; } .wds-community-header__wordmark img:hover { opacity: 0.6; filter: alpha(opacity=60); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); }

/* Navigation Bar Hover - Credits to DubuHasBeenSnatched of Enhypen Wiki*/ @keyframes topnav-Dropdown { 0%{opacity: 0; top: 30px;} 100%{opacity: 1; top: 40px;} } @-webkit-keyframes topnav-Dropdown { 0%{opacity: 0; top: 30px;} 100%{opacity: 1; top: 40px;} } @keyframes Dropdown { 0%{opacity: 0; transform: translateX(-10px);} 100%{opacity: 1; transform: translateX(0);} } @-webkit-keyframes Dropdown { 0%{opacity: 0; transform: translateX(-10px);} 100%{opacity: 1; transform: translateX(0);} } @keyframes global-Dropdown { 0%{opacity: 0; top: 45px;} 100%{opacity: 1;} } @-webkit-keyframes global-Dropdown { 0%{opacity: 0; top: 45px;} 100% {opacity: 1;} } @keyframes contribution-Dropdown { 0%{opacity: 0; top: 25px;} 100%{opacity: 1; top: 35px;} } @-webkit-keyframes contribution-Dropdown { 0%{opacity: 0; top: 25px;} 100%{opacity: 1; top: 35px;} } @-webkit-keyframes searchsuggestions-Dropdown { 0%{top: 80%; opacity: 0;} 100%{top: calc(1px+100%); opacity: 1;} } @keyframes searchsuggestions-Dropdown { 0%{top: 80%; opacity: 0;} 100%{top: calc(1px+100%); opacity: 1;} }

.wds-icon-tiny { transition: transform 0.2s; } .wds-community-header .wds-community-header__local-navigation .wds-tabs .wds-tabs__tab .wds-dropdown .wds-dropdown__content { animation: topnav-Dropdown 0.2s; -webkit-animation: topnav-Dropdown 0.2s; -moz-animation: topnav-Dropdown 0.2s; } .wds-community-header .wds-community-header__local-navigation .wds-tabs .wds-tabs__tab .wds-dropdown .wds-dropdown__content .wds-dropdown-level-2__content { animation: Dropdown 0.2s; -webkit-animation: Dropdown 0.2s; -moz-animation: Dropdown 0.2s; } .page-header .page-header__contribution .page-header__contribution-buttons .wds-button-group .wds-dropdown .wds-dropdown__content, #PageHeader #EditMessageWallGreeting .wds-button-group .wds-dropdown .wds-dropdown__content, .wds-community-header__wiki-buttons .wds-dropdown .wds-dropdown__content { -webkit-animation: contribution-Dropdown 0.2s; -moz-animation: contribution-Dropdown 0.2s; animation: contribution-Dropdown 0.2s; } .wds-dropdown__content.wds-global-navigation__search-suggestions { -webkit-animation: searchsuggestions-Dropdown 0.25s; -moz-animation: searchsuggestions-Dropdown 0.25s; animation: searchsuggestions-Dropdown 0.25s; }

.wds-dropdown::after, .wds-dropdown::before { z-index: 500; /*display: none !important;*/ } .wds-dropdown__content .wds-list.wds-is-linked > li > a svg { transition: transform cubic-bezier(0.66, 0.52, 0.25, 1.25) 0.25s; }   transform: rotate(180deg); } .wds-community-header .wds-dropdown__content .wds-list.wds-is-linked li:hover > a svg { transform: rotate(90deg); }
 * 1) wds-icons-dropdown-tiny,
 * 1) wds-icons-dropdown-tiny:hover {

/* Tabber (Credit to ITZY Wiki) */ ul.tabbernav { color:var(--theme-text-color); font-weight:bold !important; padding:5px 0px !important; border: none !important; text-transform: uppercase !important;} ul.tabbernav li a { color:var(--theme-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(--theme-text-color); border-bottom: 2px solid var(--theme-accent-color) !important; margin-right: 2px !important;} ul.tabbernav li a:visited { color:var(--theme-text-color); border-bottom: 2px solid var(--theme-accent-color) !important; margin-right: 2px !important;} ul.tabbernav li a:hover { color:var(--theme-text-color); border-bottom: 2px solid var(--theme-accent-color) !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(--theme-text-color); border-bottom: 2px solid var(--theme-accent-color) !important; background-color: transparent !important; margin-right: 2px !important;} ul.tabbernav li.tabberactive a:hover { color:var(--theme-text-color); border-bottom: 2px solid var(--theme-accent-color) !important; margin-right: 2px !important;} .tabberlive .tabbertab { color:var(--theme-text-color); border:0px solid transparent !important; border-top:0 !important;} /*End*/

/*Avatar Style -Credit to ITZY Wiki*/ .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); }

/** Rotate **/ .rotate img { opacity: 1; filter: alpha(opacity=100); transition: all 1.5s ease; }

.rotate img:hover { opacity: 0.5; filter: alpha(opacity=50); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg); transform: rotateY(360deg); } /*End*/

/* Spanse */ .spanse, .spancr, .spanmm, .spanen, .spanqunew, .spansk{ float:left; display: block; position: relative; z-index: 99; }

.spanse2, .spancr2, .spanmm2, .spanen2, .spanqunew2, .spansk2{ transition-duration: 1s; 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; } /*End*/

/*Hover*/ .hoverimage img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; opacity: 1; filter: alpha(opacity=100); }

.hoverimage img:hover { opacity: 0.5; filter: alpha(opacity=50); }

/* Member Higlight (CCTO) and Hover (Birbfriend) (Credit to Enhypen Wiki) */ /* == The Rose == */ a[href="/wiki/The_Rose"], a[href="/wiki/The_Rose/Discography"], a[href="/wiki/The_Rose/Gallery"], a[href="/wiki/The_Rose/Facts"], a[href="/wiki/The_Rose/Fancams"], a[href="/wiki/Category:The_Rose"] { color:#96162e; font-weight:bold; } a[href="/wiki/The_Rose"]:hover, a[href="/wiki/The_Rose/Discography"]:hover, a[href="/wiki/The_Rose/Gallery"]:hover, a[href="/wiki/The_Rose/Facts"]:hover, a[href="/wiki/The_Rose/Fancams"]:hover, a[href="/wiki/Category:The_Rose"]:hover{ color:#96162e !important; transition: all .2s !important; text-shadow: 0 0 20px #96162e !important; font-weight:bold; }

/* == Woosung == */ /* */ a[href="/wiki/Woosung"], a[href="/wiki/Woosung/Gallery"], a[href="/wiki/Woosung/Fancams"], a[href="/wiki/Woosung/Facts"], a[href="/wiki/Category:Woosung"] { color:#FFFFFF; font-weight:bold; } a[href="/wiki/Woosung"]:hover, a[href="/wiki/Woosung/Gallery"]:hover, a[href="/wiki/Woosung/Fancams"]:hover, a[href="/wiki/Woosung/Facts"]:hover, a[href="/wiki/Category:Woosung"]:hover{ color:#FFFFFF !important; transition: all .2s !important; text-shadow: 0 0 20px #FFFFFF !important; font-weight:bold; }

/* == Dojoon == */ a[href="/wiki/Dojoon"], a[href="/wiki/Dojoon/Gallery"], a[href="/wiki/Dojoon/Fancams"], a[href="/wiki/Dojoon/Facts"], a[href="/wiki/Category:Dojoon"] { color:##96162e font-weight:bold; } a[href="/wiki/Dojoon"]:hover, a[href="/wiki/Dojoon/Gallery"]:hover, a[href="/wiki/Dojoon/Fancams"]:hover, a[href="/wiki/Dojoon/Facts"]:hover, a[href="/wiki/Category:Dojoon"]{ color:#96162e !important; transition: all .2s !important; text-shadow: 0 0 20px #96162e !important; font-weight:bold; }

/* == Hajoon == */ a[href="/wiki/Hajoon"], a[href="/wiki/Hajoon/Gallery"], a[href="/wiki/Hajoon/Fancams"], a[href="/wiki/Hajoon/Facts"], a[href="/wiki/Category:Hajoon"] { color:#28348f; font-weight:bold; } a[href="/wiki/Hajoon"]:hover, a[href="/wiki/Hajoon/Gallery"]:hover, a[href="/wiki/Hajoon/Fancams"]:hover, a[href="/wiki/Hajoon/Facts"]:hover, a[href="/wiki/Category:Hajoon"]{ color:#28348f !important; transition: all .2s !important; text-shadow: 0 0 20px #28348f !important; font-weight:bold; }

/* == Jaehyeong == */ a[href="/wiki/Jaehyeong"], a[href="/wiki/Jaehyeong/Gallery"], a[href="/wiki/Jaehyeong/Fancams"], a[href="/wiki/Jaehyeong/Facts"], a[href="/wiki/Category:Jaehyeong"] { color:#cc6785; font-weight:bold; } a[href="/wiki/Jaehyeong"]:hover, a[href="/wiki/Jaehyeong/Gallery"]:hover, a[href="/wiki/Jaehyeong/Fancams"]:hover, a[href="/wiki/Jaehyeong/Facts"]:hover, a[href="/wiki/Category:Jaehyeong"]{ color:#cc6785 !important; transition: all .2s !important; text-shadow: 0 0 20px #cc6785 !important; font-weight:bold; }

/* Gallery border-color (Credit to DubuHasBeenSnatched) */ .wikia-gallery-border-small .thumb .gallery-image-wrapper { border-color:var(--theme-link-color); }

.wikia-gallery-border-medium .thumb .gallery-image-wrapper { border-color:var(--theme-link-color); }

/* Userbox */ .userboxbg { background-color:var(--theme-accent-color); }

.userboxborder { border-color:var(--theme-link-color); }

.userboxtext { color:var(--theme-text-color); }

/* Selection (Credit to DubuHasBeenSnatched)*/
 * selection {

background: var(--theme-accent-color); color: #FFFFFF; text-shadow: none; }

/* Toolbar .WikiaBarWrapper { font-family: Roboto; text-transform: uppercase; font-weight:bold; background:url("wiki/Special:FilePath/Wiki-wrapper.jpg"); }

.WikiaBarWrapper .toolbar .tools { display: flex; flex-wrap: wrap; justify-content: center; padding-left: 0; text-align:center; }

/* Albums -Credit to BLACKPINK Wiki*/

.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: var(--theme-link-color); } .book-spine-comic2 { background: var(--theme-background-background); } .book-spine-comic3 { background: var(--theme-link-color); }

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

/* Make The Infobox Tabs Centered, and Transparent Infobox Background*/ .pi-europa.pi-background { background-color: var(--activity-light-background-color); border-radius:5px; }

.pi-europa.pi-image-collection { background-color: var(--activity-light-background-color); }

.pi-europa .pi-image-collection-tabs .pi-tab-link { border: none; border-bottom: 2px solid; border-color: var(--theme-link-color); margin: 2px; padding: 0 5px; font-weight: bold; background: var(--activity-light-background-color); }

.pi-europa .pi-image-collection-tabs .pi-tab-link.current { color: #fff; border-bottom: 2px solid; border-color: var(--theme-link-color); background: var(--theme-accent-color); }

.pi-europa .pi-image-collection-tabs .pi-tab-link:not(.current):hover { border-bottom: 2px solid; border-color: var(--theme-link-color--hover); }

.pi-europa .pi-image-collection-tabs { text-align: center; background:none; }

.pi-europa .pi-header, .pi-europa .pi-title { background-color: var(--theme-accent-color); color: #FFF; text-align: center; }

/* Link */ .WikiaPage a { font-weight:bold; }

/* Heading (Credit to ITZY Wiki) */ .wds-community-header__local-navigation [href="/wiki/Soloist_Discography"] span::after, .wds-community-header__local-navigation [href="/wiki/Category:Mini_Album"] span::after, .wds-community-header__local-navigation [href="/wiki/Genre"]::after { content: 'new'; position: relative; background-color: var(--theme-accent-color--hover); top: 0; padding: 0 2px; font-size: 80%; font-weight: normal; border-radius: 4px; text-transform: lowercase; color: white; margin-left: 5px; }

/* Label to match BalancedInterwiki and CategoryRefresh (LOONA Wiki) */ .article-inter-lang-header, .special-categories { display: block; height: 28px; margin-top: 3px; box-sizing: border-box; padding: 6px 10px !important; background-color: rgba(0, 0, 0, .08); border-radius: 3px; font-size: 14px !important; font-weight: bold !important; letter-spacing: 0; line-height: 16px !important; }

.CategorySelect.articlePage .add { background-color: var(--wds-primary-button-background-color); border: 1px solid var(--wds-primary-button-background-color); color: var(--wds-primary-button-label-color); -webkit-transition: all .2s ease-out 0s; -moz-transition: all .2s ease-out 0s; -ms-transition: all .2s ease-out 0s; -o-transition: all .2s ease-out 0s; transition: all .2s ease-out 0s; opacity: 1; font-size: 12px; text-transform: uppercase; }

.CategorySelect.articlePage .add:hover { background-color: var(--wds-primary-button-background-color--hover); border: 1px solid var(--wds-primary-button-background-color--hover); color: var(--wds-primary-button-label-color); }