MediaWiki:Common.css

/* All imports should go at the top of this page. */ @import url('https://fonts.googleapis.com/css2?family=Lexend&family=Noto+Sans+JP&family=Hahmlet&family=Noto+Sans+KR&family=Noto+Sans+SC&family=Noto+Sans+TC&family=Poppins:wght@300;400;500;600;700&display=swap'); @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:Card.css|MediaWiki:Discord.css|MediaWiki:Fonts.css|MediaWiki:Fonts.css/NewRodinPro-B.css|MediaWiki:LinkColors.css|MediaWiki:Mainpage.css|MediaWiki:Mbox.css|MediaWiki:Navbox.css|MediaWiki:Templates.css|MediaWiki:Themes.css"); @import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:ExternalIcons.css|u:dev:MediaWiki:FontAwesome.css");

/* Background */ .main-container { background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(https://static.wikia.nocookie.net/bandori/images/1/11/Girls_Band_Party%21_5th_Anniversary_%22Band_life_with...%22.png) no-repeat; background-attachment: fixed; background-size: cover; background-position: center top; } .page { background-image: url("https://i.imgur.com/S7J64oD.png"); background-size: 100%; } .page__main:not(.page__main-is-edit), .page-is-edit, .page__right-rail { background-color: rgba(2,2,17,0.8); } .rail-module { background-color: transparent; } .search-modal__content { background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(https://static.wikia.nocookie.net/bandori/images/b/b4/Girls_Band_Party%21_2022_KV.jpg); background-position: center 10%; background-repeat: no-repeat; background-size: cover; } /* Card Table */ .article-table-wrapper { background-color: unset; } .article-table.card-table td { text-align: center; } .article-table.card-table th, .article-table.card-table td { padding: 6px 12px; } .card-table { background: transparent; }

/* Line running through gallery headers - Credits to Horimiya Wiki */ .linethrough:before, .linethrough:after { background: #de1c4e; display: inline-block; position: relative; vertical-align: middle; content: ""; width: 20%; height: 2px; } .linethrough:before { right: 12px; } .linethrough:after { left: 12px; }

/*band colors gradient underline*/ .bandcolorsunderline { position: relative; z-index: 2; padding: 5px 16px 5px 16px; text-align: center; letter-spacing: 1px; color: #e6e6e6; border-bottom-width: 2px; border-style: solid; border-image: linear-gradient(to right, transparent, #f37, #e34, #fd0, #3da, #2cc, #3af, #34a, transparent) 1 } .bandcolorsunderline::after, .bandcolorsunderline::before { content: ""; position: absolute; width: 50%; height: 100%; top: 0; background-color: transparent; z-index: -1 }

.bandcolorsunderline span { text-shadow: 0 1px 5px #000 }

/*Hover underline animation, credits to 30secondsofcode.org */ .hover-underline-animation { display: inline-block; position: relative; color: #de1c4e; }

.hover-underline-animation:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: #de1c4e; transform-origin: bottom right; transition: transform 0.25s ease-out; }

.hover-underline-animation:hover:after { transform: scaleX(1); transform-origin: bottom left; }

/* */ code { background: linear-gradient(rgb(216, 41, 98), rgb(155, 28, 63)); padding: .125rem; border-radius: .2em; font-size: smaller; font-weight: bold; }

/* */ hr { border-color: #de1c4e; } /*Scrollbar*/
 * -webkit-scrollbar {

width:10px; height: 7px; box-shadow: 0px 0px 6px #f37; }


 * -webkit-scrollbar-track {

background: white; border: 1px solid #de1c4e; }


 * -webkit-scrollbar-thumb {

background: #de1c4e; border: 1px solid #de1c4e; }


 * -webkit-scrollbar-thumb:hover {

background:#e50050; border: 1px solid #e50050; }

/* toolbar */ .WikiaBarWrapper { color: #fff; background: url("https://vignette.wikia.nocookie.net/bandori/images/d/d6/Header_dot.png") 0 50% no-repeat #de1c4e; } .WikiaBarWrapper .tools .wds-dropdown__toggle>a, .WikiaBarWrapper .tools>li>a, .WikiaBarWrapper .tools .wds-dropdown__toggle>svg, .WikiaBarWrapper .tools>li>svg { color: #fff }

/* Auto fullwidth images folllowing parent div size */ .container_img a img { width: 100%; height: 100%; }

/* story texts */ .storytext { background: url("https://static.wikia.nocookie.net/bandori/images/a/a1/Story_text.png") left top /  99% 120px no-repeat; height: 125px; margin-left: 80px; margin-top: -8%; max-width: 899px; } /*for wide screens */ @media only screen and (min-width:1500px) { .storytext { margin-top: -6%; } }

/* to replace some */ .stars_row { background-image: url(https://static.wikia.nocookie.net/bandori/images/3/3c/Stars.png); background-position: center; height: 5px; background-size: 50px; display: block; }

/*Redtowhite bg, usually as table header/colored divider*/ .redtowhite { content: ""; background: -moz-linear-gradient(left, #ff0a50 0%, #ff2362 16%, #ff3b73 32%, #ff5384 48%, #ff6c96 64%, #ff84a7 80%, #ff9db9 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ff0a50), color-stop(16%, #ff2362), color-stop(32%, #ff3b73), color-stop(48%, #ff5384), color-stop(64%, #ff6c96), color-stop(80%, #ff84a7), color-stop(100%, #ff9db9)); background: -webkit-linear-gradient(left, #ff0a50 0%, #ff2362 16%, #ff3b73 32%, #ff5384 48%, #ff6c96 64%, #ff84a7 80%, #ff9db9 100%); background: -o-linear-gradient(left, #ff0a50 0%, #ff2362 16%, #ff3b73 32%, #ff5384 48%, #ff6c96 64%, #ff84a7 80%, #ff9db9 100%); background: -ms-linear-gradient(left, #ff0a50 0%, #ff2362 16%, #ff3b73 32%, #ff5384 48%, #ff6c96 64%, #ff84a7 80%, #ff9db9 100%); background: linear-gradient(to right, #ff0a50 0%, #ff2362 16%, #ff3b73 32%, #ff5384 48%, #ff6c96 64%, #ff84a7 80%, #ff9db9 100%); }

/********************** h2 etc Customizations ***********************/ /* ==== Hover Edit button - Credits to the Hollow Knight Wiki ===== */ h1 > .mw-editsection, h2 > .mw-editsection, h3 > .mw-editsection, h4 > .mw-editsection, h5 > .mw-editsection, h6 > .mw-editsection { opacity: 0; transition: 0.5s; } h1:hover > .mw-editsection, h2:hover > .mw-editsection, h3:hover > .mw-editsection, h4:hover > .mw-editsection, h5:hover > .mw-editsection, h6:hover > .mw-editsection { opacity: 1; transition: 0.5s; } .mw-headline, .toc .toctitle h2 { background-image: url(https://static.wikia.nocookie.net/bandori/images/b/bc/Wiki.png); background-position: left; background-repeat: no-repeat; padding-left: 25px; background-size: 20px; }

.toc .toctitle h2 .wds-icon { display: none; } /********************** TabberEx alignment fix ***********************/ div#tabberex_0.oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget.oo-ui-selectWidget-unpressed.oo-ui-selectWidget-depressed.oo-ui-tabSelectWidget { text-align: center; }

/*Round Images*/ .round-img img { border-radius: 50%; }

/* Recolors */ h1, .mw-headline, .page-content h2, li::marker { color: #e50050; } .article-table tr th, .wikitable tr th { background-color: var(--theme-accent-color) !important; } .article-table tr th a, .wikitable tr th a, code a { color: #fff; } /*===============*/ /* Media icons  */ /*===============*/

margin-bottom: 1em; overflow: hidden; }
 * 1) media-icons {

float: right; margin: 0; }
 * 1) media-icons ul {

float: left; line-height: 0; list-style-type: none; margin: 0 5px 0 0; }
 * 1) media-icons li {

.mi-current a, .mi-other a { border: 2px solid #ff0040; border-radius: 0.5em; display: inline-block; height: 50px; opacity: 0.5; overflow: hidden; position: relative; width: auto; }

.mi-current a, .mi-other a:hover { opacity: 1; }

.mi-mobile { display: none; }

/*AP star as divider*/ .apstar { background: url(https://static.wikia.nocookie.net/bandori/images/5/57/AllPerfect.png) bottom/10px no-repeat; width: 10px; height: 10px; display: inline-block; }

/* Character TOPPAGE*/ .mp_char_container { display: flex; flex-wrap: wrap; justify-content: space-evenly; margin: 0 auto; max-width: 800px; flex-direction: row; overflow: hidden; } .mp_char_bg { position: relative; display: inline-block; } .mp_char_bg { width: 160px; height: 420px; } .mp_char_img { position: absolute; top: 0; overflow: hidden; } .mp_char_img img { width: 158px; height: 415px; transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .mp_char_img img:hover { transform: scale(1.075); } .mp_char_name { position: absolute; top: 0; right: 5%; font: oblique bold 20px/1 Softsoul Bold, Impact; text-shadow: 0 0 5px #000; z-index: 99; } .mp_band { position: relative; bottom: 100px; max-width: 400px; max-height: 60px; }