MediaWiki:Wikia.css

/* Google Fonts */ @import url('https://fonts.googleapis.com/css?family=Quicksand|Nanum+Gothic|Comfortaa|Open+Sans|Roboto|Noto+Sans+TC|Noto↓+Sans+SC|Noto+Sans+HK|Noto+Sans+JP|Noto+Sans+KR|Montserrat|Rubik|Helvetica|Lobster');

/* Font body */ body { font-family:'Montserrat' !important; }

/* highlight Admin link */ a[href="/wiki/User:StannerOfLOONA"] {color: pink} a[href="/wiki/User:DubuHasBeenSnateched"] {color: yellow} a[href="/wiki/User:BumbleMonica"] {color: pink}

a[href="/wiki/User:StannerOfLOONA"]:hover { color:pink ; transition: all .2s ; text-shadow: 0 0 20px pink ; }

a[href="/wiki/User:DubuHasBeenSnateched"]:hover { color:yellow ; transition: all .2s ; text-shadow: 0 0 20px yellow ; } a[href="/wiki/User:BumbleMonica"]:hover { color:pink ; transition: all .2s ; text-shadow: 0 0 20px pink ; }

/*End Glow Link*/

/***Wiki Background (Credits to UtauSteam)***/ @media screen and (min-width: 1080px) { body.skin-oasis { background-image: linear-gradient(to right,#1a1b41,#282b6d,#4657b8,#74a0d2); }   .WikiaPage .WikiaPageContentWrapper { background: transparent; position: relative; border: 1px solid var(--themed-text-color); border-top: 2px solid var(--themed-link-color) !important; }

.WikiaPage .WikiaPageContentWrapper::before { opacity: 0.25; background: #fff url("https://secretnumber.fandom.com/wiki/Special:FilePath/Got_That_Boom_SECRET_NUMBER_teaser_photo3.png") center fixed; background-size: 1280px; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }

.page-Léa .WikiaPage .WikiaPageContentWrapper::before, .page-Léa_Gallery .WikiaPage .WikiaPageContentWrapper::before, .page-Léa_Facts .WikiaPage .WikiaPageContentWrapper::before{ opacity: 0.25; background: #000 url("https://secretnumber.fandom.com/wiki/Special:FilePath/Got_That_Boom_Léa_promo.png") top center fixed !important; background-size:1280px; }

.page-Dita .WikiaPage .WikiaPageContentWrapper::before, .page-Dita_Gallery .WikiaPage .WikiaPageContentWrapper::before, .page-Dita_Facts .WikiaPage .WikiaPageContentWrapper::before{ opacity: 0.25; background: #000 url("https://secretnumber.fandom.com/wiki/Special:FilePath/Got_That_Boom_Dita_promo.png") top center fixed !important; background-size:1280px; }

.page-Jinny .WikiaPage .WikiaPageContentWrapper::before, .page-Jinny_Gallery .WikiaPage .WikiaPageContentWrapper::before, .page-Jinny_Facts .WikiaPage .WikiaPageContentWrapper::before{ opacity: 0.25; background: #000 url("https://secretnumber.fandom.com/wiki/Special:FilePath/Got_That_Boom_Jinny_promo.png") top center fixed !important; background-size:1280px; }

.page-Soodam .WikiaPage .WikiaPageContentWrapper::before, .page-Soodam_Gallery .WikiaPage .WikiaPageContentWrapper::before, .page-Soodam_Facts .WikiaPage .WikiaPageContentWrapper::before{ opacity: 0.25; background: #000 url("https://secretnumber.fandom.com/wiki/Special:FilePath/Got_That_Boom_Soodam_promo.png") top center fixed !important; background-size:1280px; }

.page-Denise .WikiaPage .WikiaPageContentWrapper::before, .page-Denise_Gallery .WikiaPage .WikiaPageContentWrapper::before, .page-Denise_Facts .WikiaPage .WikiaPageContentWrapper::before{ opacity: 0.25; background: #000 url("https://secretnumber.fandom.com/wiki/Special:FilePath/Got_That_Boom_Léa_promo.png") top center fixed !important; background-size:1280px; }

/** Lyrics [credits: LOONA Wiki]**/ .pi-theme-lyrics.portable-infobox { width: auto; float: none; transition-duration: 0.3s; } .pi-theme-lyrics .pi-data { width: 90%; margin: 0 auto; } .pi-theme-lyrics .pi-navigation { background:transparent; font-size: 14px; font-weight: 100; } .pi-theme-lyrics.portable-infobox .pi-header { display: none; }

/* Scroll Bar -Credit to DubuHasBeenSnatched*/
 * -webkit-scrollbar {

background: linear-gradient(#5CB768,#00B3E6); border-radius: 10px; }
 * -webkit-scrollbar-thumb {

background:linear-gradient(#8989BB,#FF4DBB); border-radius: 10px 0px; }
 * -webkit-scrollbar-thumb:hover {

background:linear-gradient(#FF4DBB,#8989BB); border-radius: 10px 0px; }
 * -webkit-scrollbar-thumb {

width:1px; } /***** SCROLL BAR ENDS *****/ /* Custom Dropdown Menu */ .WikiaArticle { overflow: visible; } .custom-dropdown { padding: 1px 8px; font-family: 'Roboto' !important; background: #000; } .custom-dropdown:hover { background: #261920 !important; border: 1px solid #000; } .custom-dropdown ul { list-style: none; min-width: 100%; top: 23px; } .custom-dropdown:hover ul { display: block; } .custom-dropdown li a { height: 14px; line-height: 14px; } .custom-dropdown strong.selflink { color: #d4d5d5; } /***********************************************************************/ /* Wordmark (Jiaer) */ .wds-community-header__wordmark img { opacity: 1; filter: alpha(opacity=100); transition: all 1.5s ease; } .wds-community-header__wordmark 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); }

/* highlight Members */ a[href="/wiki/Lea"] {color: #CCFFCC} a[href="/wiki/Dita"] {color: #FF68FA} a[href="/wiki/Jinny"] {color: #507CFF} a[href="/wiki/Soodam"] {color: #FF5638} a[href="/wiki/Denise"] {color: #64FF10}

a[href="/wiki/Lea"]:hover, a[href="/wiki/Lea/Gallery"]:hover, a[href="/wiki/Lea/Facts"]:hover { color:#CCFFCC; transition: all .2s ; text-shadow: 0 0 20px #CCFFCC; }

a[href="/wiki/Dita"]:hover, a[href="/wiki/Dita/Gallery"]:hover, a[href="/wiki/Dita/Facts"]:hover { color:#FF68FA; transition: all .2s ; text-shadow: 0 0 20px #FF68FA; }

a[href="/wiki/Jinny"]:hover, a[href="/wiki/Jinny/Gallery"]:hover, a[href="/wiki/Jinny/Facts"]:hover { color:#507CFF; transition: all .2s ; text-shadow: 0 0 20px #507CFF; }

a[href="/wiki/Soodam"]:hover, a[href="/wiki/Soodam/Gallery"]:hover, a[href="/wiki/Soodam/Facts"]:hover { color:#FF5638; transition: all .2s ; text-shadow: 0 0 20px #FF5638; }

a[href="/wiki/Denise"]:hover, a[href="/wiki/Denise/Gallery"]:hover, a[href="/wiki/Denise/Facts"]:hover { color:#64FF10; transition: all .2s ; text-shadow: 0 0 20px #64FF10; } /*End*/

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

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

/* 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: #eeeeee; } .book-spine-comic2 { background: #28C4C0; } .book-spine-comic3 { background: #5453A3; } .book-spine-comic4 { background: lightgreen; } .book-spine-comic5 { background: skyblue; } .book-spine-comic6 { background: pink; }

.book-spine-comic1, .book-spine-comic2, .book-spine-comic3, .book-spine-comic4, .book-spine-comic5, .book-spine-comic6, .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, .book-spine-comic4, .book-spine-comic5, .book-spine-comic6 { transform: rotateY(-90deg) translateX(-20px); width: 20px; } .book-spine-comic1 h1, .book-spine-comic2 h1, .book-spine-comic3 h1, .book-spine-comic4 h1, .book-spine-comic5 h1, .book-spine-comic6 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-comic4:before, .book-spine-comic5:before, .book-spine-comic6:before, .book-spine:before { content: ""; display: block; height: 100%; width: 100%; } /*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); }

/* Profile (Credit to TWICE Wiki)*/ .avatar { border-radius: 50%; border-width: 1px; border:2px solid #D3E1FF !important; position: relative; } img.avatar { -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; -ms-transition: all 0.6s ease; transition: all 0.6s ease; }

img.avatar:hover { border:2px solid #FFD3E6 !important; border-radius: 100%; box-shadow:0 0 20px #dcb7ac; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

/* Navigation Bar Hover */ @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 { display: none !important; }   transition: transform cubic-bezier(0.66, 0.52, 0.25, 1.25) 0.25s; }   transform: rotate(180deg); }
 * 1) wds-icons-dropdown-tiny {
 * 1) wds-icons-dropdown-tiny:hover {

/* Infoboxes (Credit to LOONA Wiki) */ .portable-infobox .pi-image-collection-tabs .pi-tab-link { border: none; border-bottom: 2px solid var(--themed-text-color); margin: 2px; padding: 0 5px; color: CurrentColor; font-weight: bold; } ul.pi-image-collection-tabs { margin: 0 -1px -1px 0 !important; } .portable-infobox .pi-image-collection-tabs .pi-tab-link.current { color: CurrentColor; border-bottom: 2px solid var(--themed-button-background); }

.pi-data-label, .pi-title, .pi-header { font-family: 'Roboto', sans-serif; }

.portable-infobox .pi-header { font-size: small; }

.portable-infobox .pi-title { border-radius: 3px 3px 0 0; }

.portable-infobox .pi-item-spacing { border-color: transparent; }

.pi-image-collection-tabs li.tabberactive { background-color: #EDEDED; }

.pi-border-color { border-color: var(--activity-dark-background-color); }

.pi-image-collection-tabs li, .portable-infobox .pi-data, .portable-infobox .pi-horizontal-group, .pi-smart-group-body { background-color: var(--activity-dark-background-color); }

.pi-smart-group-body a.external:after { display: none; }

.portable-infobox.pi-background, .portable-infobox.pi-header { background-color: #96969655; }

.pi-title, .pi-header, .pi-horizontal-group .pi-header { color: #fff; font-weight: bold; text-align: center; background-color: var(--themed-button-background); }

.portable-infobox .pi-image img { max-width: 100%; height: auto; background-color: var(--activity-dark-background-color); } .pi-data, .pi-group { border-bottom-width: 0; } .pi-horizontal-group { border-radius: 0 0 3px 3px; }

/* Portal */ .portalmember { opacity: 1; filter: alpha(opacity=100); transition: all 0.6s ease; position:absolute; background:black; border-radius:1em; width:150px; height:150px; background: linear-gradient(transparent,black); overflow:hidden; } .portalmember:hover { opacity: 0.8; filter: alpha(opacity=80); transform:scaleX(1.05) scaleY(1.05); position:absolute; background:black; border-radius:1em; width:150px; height:150px; background: linear-gradient(transparent,black); overflow:hidden; }

/* Heading */ h1,h2,h3,h4,h5,h6{ font-family:Lobster; }

/* Toolbar */ .WikiaBarWrapper { font-family: Rubik, sans serif; text-transform: uppercase; font-weight:bold; background:url("wiki/Special:FilePath/Got_That_Boom_Texture.jpg"); }

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

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

background: var(--themed-link-color); color: #FFFFFF; text-shadow: none; }