MediaWiki:Wikia.css

/*Import*/ @import url('/load.php?mode=articles&only=styles&articles=|u:dev:MediaWiki:CustomSlider.css|u:dev:MediaWiki:EditorSourceMinimal/code.css|u:dev:MediaWiki:ModernProfile/Masthead.css|u:dev:MediaWiki:ModernProfile/Wall.css|u:dev:MediaWiki:FandomizedLoadingScreens.css|u:dev:MediaWiki:ModernPolls.css|MediaWiki:ModernProfile/Masthead.css|u:dev:MediaWiki:FandomizedButtons.css|u:dev:MediaWiki:FandomizedMasthead.css|u:dev:MediaWiki:DropdownMenu.css|u:dev:MediaWiki:FandomizedTabs/tabviews.css|MediaWiki:Hover.css|MediaWiki:Background.css|u:dev:MediaWiki:MinifiedLeftTabs/code.css|MediaWiki:Hover.css|MediaWiki:Styling.css|MediaWiki:Heading.css|u:dev:MediaWiki:UpgradedToolbar.css|u:dev:MediaWiki:ModernLightbox.css|u:dev:MediaWiki:FandomizedActivityFeed.css|u:dev:MediaWiki:ModernCommentsSection.css|u:dev:MediaWiki:ModernCommentsSection.css|u:dev:MediaWiki:MinimalistSliderText.css|u:dev:MediaWiki:FandomizedInputboxes/code.css|u:dev:MediaWiki:ModernPopovers.css.css|u:dev:MediaWiki:FandomizedToggles/code.css|u:dev:MediaWiki:FandomizedFieldsets/code.css|u:dev:MediaWiki:FandomizedDesigner.css|u:dev:MediaWiki:FandomIcons.css|u:dev:MediaWiki:FandomizedWikiFeatures.css|u:dev:MediaWiki:RedesignedAdminDashboard.css|u:dev:MediaWiki:Nord.css&only=styles');

/* 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');

/* Import Custom Font * /* == Filmlet (Online Web Font), Real Name: Doppelganger-Display == */ @font-face {font-family: "Filmlet"; src: url("//db.onlinewebfonts.com/t/751859ed48262433504a363c60cc08f8.eot"); src: url("//db.onlinewebfonts.com/t/751859ed48262433504a363c60cc08f8.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/751859ed48262433504a363c60cc08f8.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/751859ed48262433504a363c60cc08f8.woff") format("woff"), url("//db.onlinewebfonts.com/t/751859ed48262433504a363c60cc08f8.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/751859ed48262433504a363c60cc08f8.svg#Display") format("svg"); }

/*Heading (Credit to ITZY Wiki)*/

/**Filmlet**/ .wds-community-header__local-navigation [href="/wiki/BOL4/Discography"] span::after, .wds-community-header__local-navigation [href="/wiki/Category:Single_Albums"] span::after, .wds-community-header__local-navigation [href="/wiki/Filmlet"]::after { content: 'new'; position: relative; background-color: darkred; top: 0; padding: 0 2px; font-size: 80%; font-weight: normal; border-radius: 4px; text-transform: lowercase; color: #FFFFFF; margin-left: 5px; }

/* Dancing Cartoon */ .wds-community-header__local-navigation [href="/wiki/Category:Singles"] span::after, .wds-community-header__local-navigation [href="/wiki/Dancing_Cartoon"]::after { content: 'new'; position: relative; background-color: darkred; top: 0; padding: 0 2px; font-size: 80%; font-weight: normal; border-radius: 4px; text-transform: lowercase; color: #FFFFFF; margin-left: 5px; }

/* Body Font */ body { font-family:Montserrat, Noto Sans KR, Noto Sans JP; }

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

/* Background (Credits to UtauSteam) */ @media screen and (min-width: 1025px) { body.skin-oasis { background-image: linear-gradient(to bottom,#202020,#151515,#000000) }   .WikiaPage .WikiaPageBackground { opacity: 0.20; background: #000 url("https://bolbbalgan4.fandom.com/wiki/Special:FilePath/Background.jpg") center fixed; } } /***********************************************************************/

/* Toolbar */ .WikiaBarWrapper { text-transform: uppercase; font-weight:bold; background:url("https://bolbbalgan4.fandom.com/wiki/Special:FilePath/Wiki-toolbar.jpg"); }

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

/* Infobox */ .pi-europa.pi-background { background-color: #130e0d33; border-radius:10px; }

.pi-europa .pi-horizontal-group-item:nth-child(even) { background-color: #1e0e0d33; text-align:center; }

.pi-europa .pi-header, .pi-europa .pi-title { background-image: url(https://bolbbalgan4.fandom.com//wiki/Special:FilePath/Wiki-header.jpg); }

.pi-europa .pi-horizontal-group .pi-horizontal-group-item { text-align: center; }

/** Tabs (Credit to LOONA Wiki)**/ .mw-parser-output { overflow-x: visible; }

.pi-theme-tab.portable-infobox { display: table; width: fit-content; float: none; border: 0; margin: 0 auto; position: absolute; top: -20px; left: 50%; transform: translateX(-50%) translateY(-50%); } .pi-theme-tab.portable-infobox .pi-secondary-background { font-size:100%; } .pi-theme-tab.portable-infobox .pi-header { display: inline-block; } .pi-theme-tab .activetab .selflink { color: var(--text-color--light) !important; } .pi-theme-tab.portable-infobox .pi-header:not(.activetab) { background-color:var(--activity-dark-background-color); }

.pi-theme-tab.portable-infobox .pi-header:first-of-type { border-bottom-left-radius:3px; }

.pi-theme-tab.portable-infobox .pi-header:last-of-type { border-bottom-right-radius:3px; }

/* Header background (dev, Jiaer) */ header.wds-community-header { background-image: url("https://bolbbalgan4.fandom.com//wiki/Special:FilePath/Wiki-header.jpg") !important; background-position: right center !important; background-size: auto !important; } .wds-community-header::before { background: url(https://bolbbalgan4.fandom.com//wiki/Special:FilePath/Wiki-header.jpg) }

/*Slider*/ .cslider { background-color: #000; color: #fff; display: flex; height: 415px; margin: auto; overflow: hidden; position: relative; transition: background-color 400ms ease; width: 670px; } .cslider ul { display: inline-flex; padding: 0; margin: 0; position: relative; top: 0; left: 0; } .cslider ul li { list-style: none; margin: 0 !important; } .cslider ul li img { width: 670px; } .cslider figure { height: 406px; overflow: hidden; margin: 0 !important; } .cslider figcaption { background: rgba(0, 0, 0, .5); box-sizing: border-box; height: 31px; padding: 3px 12px; } .cslider-prev, .cslider-next { cursor: pointer; font-size: 30px; position: absolute; transform: scaleX(2); } .cslider-prev { left: 15px; } .cslider-next { right: 15px; } .cslider-caption { background: rgba(0, 0, 0, .5); bottom: 0; box-sizing: border-box; height: 90px; padding: 10px 15px; position: absolute; width: 670px; z-index: 10; } .cslider-caption h2 { border: none; font-size: 16px !important; font-weight: 700; } .cslider-caption p { font-size: 12px; } .cslider-caption a { background-color: #6176ed; background-image: -moz-linear-gradient(top, #6176ed 35%, #2841d3 65%); background-image: -webkit-gradient(top, 0% 0%, 0% 100%, color-stop(35%, #6176ed), color-stop(65%, #2841d3)); background-image: -o-linear-gradient(top, #6176ed 35%, #2841d3 65%); background-image: -ms-linear-gradient(top, #6176ed 35%, #2841d3 65%); border: 1px solid #6176ed; border-radius: 4px; color: #e5d99c; display: inline-block; font-size: 12px; text-decoration: none !important; line-height: 20px; padding: 0 10px; margin-top: 5px; } .cslider-caption p, .cslider-caption h2 { line-height: 20px; margin: 0 !important; padding: 0 !important; } .cslider-nav { display: flex; height: 40px; justify-content: center; margin: auto; padding: 5px 0; position: relative; width: 670px; z-index: 50; } .cslider-nav .active { border: 1px solid #fff; } .cslider-thumbs { height: 40px; } .cslider-thumbs img { border: 1px solid #444; box-sizing: border-box; cursor: pointer; display: inline-block; margin: 0 3px; height: 40px; }

.cslider .WikiaArticle .toc { background-color: transparent; border: 1px solid #404040; border-collapse: separate; margin: 1em 0; padding: 5px; display: none; }

/* Border */ .WikiaPage { border: 1px solid darkred; border-top: 2px solid darkred !important; }

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

/* Tabber Customization */ .tabbernav { border-bottom: 0 !important; padding: 3px 0 !important; line-height: 20px !important; color: #FFF !important; /*2lines tabber fix*/ } .tabbertab .ajax-poll, .tabbertab { border: none !important; color: #FFF !important; } .noarticletext { border: none !important; color: #FFF !important; }

ul.tabbernav li a { border-top:1px solid rgba(0, 0, 0, 0.25) !important; border-bottom:1px solid rgba(0, 0, 0, 0.25) !important; border-left:#8b000033 !important; border-right:#8b000033 !important; background: #0002 !important; font-family: Helvetica !important; font-size: 12px !important; color: #FFF !important; font-weight: 300 !important; margin:0 !important; padding:2px 12px !important; font-size: 13px !important; cursor:default; } ul.tabbernav li:first-child a { border-left:#8b000033 !important; border-top-left-radius: 3px; border-bottom-left-radius: 3px; color: #FFF !important; } ul.tabbernav li:last-of-type a { border-right:#8b000033 !important; border-top-right-radius: 3px; border-bottom-right-radius: 3px; color: #FFF !important; } .tabberlive .tabbertab { border: #8b0000 !important; border-radius: 3px !important; color: #FFF !important; } ul.tabbernav { border-bottom: #8b000033 !important; padding: 3px 0 !important; text-align:center; margin: 0 0 -10px 0 !important; color: #FFF !important; } ul.tabbernav li.tabberactive a { background:#8b0000 !important; color:white !important; color: #FFF !important; } ul.tabbernav li.tabberactive a:active { background:#8b000033 !important; color:white !important; color: #FFF !important; }

/* Arrow Animations + Dropdown Styling */ transition: transform cubic-bezier(0.66,0.52,0.26,1) 0.35s; }	transform: rotate(180deg) } .wds-dropdown__content .wds-list.wds-is-linked>li > a svg { transition: transform cubic-bezier(0.6, 1.8, 0.6, 0.8) 0.4s; } .wds-community-header .wds-dropdown__content .wds-list.wds-is-linked li:hover > a svg { transform: rotate(90deg); } .WikiaFooter .toolbar .tools .arrow-icon-single, .WikiaBarWrapper .toolbar .tools .arrow-icon-single:hover { transform: rotate(180deg); margin-left: 0px; }
 * 1) wds-icons-dropdown-tiny {
 * 1) wds-icons-dropdown-tiny:hover {

/** Dropdown Slide **/ .wds-dropdown.wds-has-dark-shadow .wds-dropdown__content, .wds-dropdown.wds-has-shadow .wds-dropdown__content, .WikiaPage .page-header .wds-dropdown__content, .wds-tabs__tab .wds-dropdown__content, .pi-section-tab .wds-dropdown__content, .wds-community-header .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content, .wds-community-header .wds-dropdown__content { border: 0 !important; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); } .wds-dropdown.wds-is-active:not(.wds-no-chevron)::after, .wds-dropdown.wds-is-active:not(.wds-no-chevron)::before, .wds-dropdown:not(.wds-is-touch-device):hover:not(.wds-no-chevron)::after, .wds-dropdown:not(.wds-is-touch-device):hover:not(.wds-no-chevron)::before { display: none !important; } .wds-dropdown.wds-has-dark-shadow .wds-dropdown__content, .wds-dropdown.wds-has-shadow .wds-dropdown__content, .WikiaPage .page-header .wds-dropdown__content, .wds-tabs__tab .wds-dropdown__content, .pi-section-tab .wds-dropdown__content, .wds-community-header .wds-dropdown__content { animation: slideDownFade 0.2s ease normal; } @keyframes slideDownFade { 0%{opacity: 0; margin-top: -10px;} 100%{opacity: 1; margin-top: 0px;} } .wds-community-header .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content { animation: slideLeftFade 0.2s ease normal; } @keyframes slideLeftFade { 0%{opacity: 0; margin-left: -10px;} 100%{opacity: 1; margin-left: 0px;} }

/* TOC (JustLeafy's Wiki) */

border-left: 2px solid var(--themed-button-background) !important; border: none; padding: 1em; background-color: var(--activity-dark-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-image: url("https://images.wikia.nocookie.net/dev/images/8/89/Ui-icons_666666_256x240.png") !important; }
 * 1) toc-open {