MediaWiki:Common.css

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

.main-container { background: linear-gradient(rgba(2,2,17,0.7),rgba(2,2,17,0.7)),url(https://static.wikia.nocookie.net/bandori/images/8/87/Pico_fever_visual.jpg) no-repeat; background-attachment: fixed; background-size: cover; background-position: center; } .page__main:not(.page__main-is-edit) { background-color: rgba(var(--theme-page-background-color--rgb),60%); background-size: 25%; background-attachment: fixed; background-position: top center; } .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; /* temporary until UCX rollout */ }

/* template:frame */ .st-Frame { position: relative; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; overflow: hidden; padding: 15px; }

.st-Frame_Line { position: absolute; width: calc(100% - 2px); height: calc(100% - 2px); top: 1px; right: 1px; bottom: 1px; left: 1px; -webkit-box-sizing: border-box; box-sizing: border-box; outline: solid 1px #f37; }

.st-Frame_Line_Inner { position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; top: 6px; right: 6px; bottom: 6px; left: 6px; outline: solid 2px #f37; width: calc(100% - 12px); height: calc(100% - 12px); }

.st-Frame_Item { position: fixed; position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; top: 11px; right: 11px; bottom: 11px; left: 11px; width: calc(100% - 22px); height: calc(100% - 22px); filter: drop-shadow(0 0 0.2rem #f37); }

/* Header Styles */ .pinkheaderdot, .phd { background: url("https://vignette.wikia.nocookie.net/bandori/images/d/d6/Header_dot.png") 0 50% no-repeat #ff3c72; } .pinkheaderdot:after, .phd:after { background: url("https://vignette.wikia.nocookie.net/bandori/images/4/49/Icon_heading.png") 0 0 no-repeat; content: ""; width: 52px; height: 67px; position: absolute; top: -5px; right: -8px; background-size: cover; }

/* Styles in "Tabs" template, credits to Virtual YouTuber Wiki */ .vyw--tabs-placement-control { float: right; min-width: 300px; border-collapse: collapse; } .vyw--tabs-placement-control.float-right-compact { margin-left: 15px; } .vyw--tabs-placement-control.across { width: 100%; float: none; clear: both; margin-left: 0; } .vyw--tab-container { display: flex; justify-content: flex-end; } .vyw--tab-line { flex-grow: 1; } .vyw--tab-line.short { max-width: 5px; } .vyw--tab-container > ul { margin: 10px 0; padding: 0; display: flex; justify-content: flex-end; } .vyw--tab-container > ul > li { list-style-type: none; display: inline-block; margin: 0; padding: 2.5px 1rem; } .vyw--tab-selected { border: 1px solid #de1c4e; border-bottom: none; } .vyw--tab-default, .vyw--tab-line { border-bottom: 1px solid #de1c4e; } .vyw--tab-selected, .vyw--tab-default, .vyw--tab-line { margin: 10px 0; padding: 0; }

.visually-hidden { position: absolute !important; overflow: hidden; height: 1px; width: 1px; clip: rect(1px, 1px, 1px, 1px); opacity: 0; }

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

/* Highlighting Text */
 * selection {

color: white !important; background: var(--theme-accent-color); }

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

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

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

/* Styles for DIVs to make images more portable */ div.loa-img { display: inline-block; } div.loa-img>a>img { max-width: 100%; height: auto; } div.loa-img-left { margin-left: 0; margin-right: auto; } div.loa-img-left>a>img { max-width: 100%; height: auto; } div.loa-img-floatleft { float: left; margin-right:1em; } div.loa-img-floatleft>a>img { max-width: 100%; height: auto; } div.loa-img-center { display: inline-block; margin: auto; } div.loa-img-center>a>img { max-width: 100%; height: auto; } div.loa-img-right { margin-left: auto; margin-right: 0; } div.loa-img-right>a>img { max-width: 100%; height: auto; } div.loa-img-floatright { float: right; margin-left:1em; } div.loa-img-floatright>a>img { max-width: 100%; height: auto; } td#loa-adv-gems { text-align:right; border-right:0; } td#loa-adv-prob { text-align:right; border-left:0; }

/* video previews, adapted from NGNL wiki */ .episode-preview img { height: 100%; width: 100%; } .episode-preview-header { animation: slide-in ease-out 1s 3s forwards, fade-out linear 3s 10s forwards; } .episode-preview-header.no-video { animation: slide-in ease-out 1s 3s forwards; } @keyframes slide-in { 100% {		right: -3px; } } @keyframes fade-out { 0% {		opacity: 1; }	100% {		opacity: 0; } }

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

/* Spoilers */ .spoiler .hidden-text { display:none; } .spoiler:hover .hidden-text { display:block; }

/* FAQ & 4koma */ .bg_dot { background: #fff url(https://vignette.wikia.nocookie.net/bandori/images/2/2a/Bg_dot_right-end.png/revision/latest?cb=20200328113547&format=original) no-repeat right bottom; } /* 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; }

/******************** /* Navbox templates * /********************/ table.navbox { border: 2px solid #FF3B72; background: transparent; color: #e6e6e6; clear: both; font-size: 90%; margin: auto; padding: 1px; text-align: center; width: 100%; }

/* Border between adjacent navboxes */ table.navbox + table.navbox { margin-top: -1px; }

.navbox-title, .navbox-abovebelow, table.navbox th { padding-left: 1em; padding-right: 1em; text-align: center; }

.navbox-group { font-weight: bold; padding-left: 1em; padding-right: 1em; white-space: nowrap; }

/* Base background */ .navbox, .navbox-subgroup { background: transparent; }

.navbox-list { background: transparent; /* Must match background color */ }

/* Level 1 color */ .navbox-title, table.navbox th { border: 1px solid #FF3B72; background: #FF3B72; font-weight: bold; font-family: NewRodinPro-B; }

/* Level 2 styling */ .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title { background: #FF3B72; }

/* Level 3 styling */ .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: transparent; }

/* Even row striping */ .navbox-even { background: rgba(5, 5, 40, 0.1); color: #e6e6e6; }

/* Odd row striping */ .navbox-odd { background: rgba(2, 2, 17, 0.5); color: #e6e6e6; } .collapseButton { font-weight: normal; width: auto; }

.navbox .collapseButton { width: 6em; } .navbar { font-size: 88%; font-weight: normal; }

.navbox .navbar { font-size: 100%; } table.collapsed tr.collapsible { display: none; } .mw-collapsible-toggle a, .navbox .navbar a { color: #e6e6e6; }

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

/* ==== 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; } /********************** Header Color ***********************/ h1, .mw-headline, .page-content h2 { color: #e50050; }

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

/* BackToTop */ border-radius: initial; background: url("https://bang-dream.bushimo.jp/wordpress/wp-content/themes/bang-dream_gbp/assets/images/common/btn_back-to-top.png") no-repeat !important; background-size: contain !important; width: 70px; height: 80px; padding: 0; filter: drop-shadow(0 0 0.2rem #f37) }   visibility: hidden; }
 * 1) BackToTopBtn div {
 * 1) BackToTopBtn svg {

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

/*Gallery Thumbnails*/ .wikia-gallery-border-small .thumb .gallery-image-wrapper { border-radius: 1ex !important; }

/*Recolor bullets*/ li::marker { color: var(--theme-accent-color); } /*===============*/ /* 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; }