MediaWiki:Mainpage.css

/* Credits to Jpdori site for base design AruLyrics for the character positioning and welcome to bandori wiki logo .index-Mainvisual { width: 100%; height: 30.2500vw; background: url(https://static.wikia.nocookie.net/bandori/images/b/b4/Girls_Band_Party%21_2022_KV.jpg) 0 -65px no-repeat; background-size: 100%; position: relative; overflow: hidden; user-select: none; } .is-content-expanded .index-Mainvisual { height: 35.10417vw; }

.index-Mainvisual_Line { position: absolute; width: calc(100% - 10px); height: calc(100% - 10px); top: 5px; right: 5px; bottom: 5px; left: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; outline: solid 1px #ff0040; }

.index-Mainvisual_Line_Inner { position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; top: 11px; right: 11px; bottom: 11px; left: 11px; outline: solid 2px #ff0040; width: calc(100% - 22px); height: calc(100% - 22px); }

.index-Mainvisual_Logo { width: 24.1875vw; margin: 0 auto; position: absolute; bottom: -4%; right: -1%; z-index: 4; }

.index-Mainvisual_Logo img { width: 100%; height: auto; } /* .index-Mainvisual_Character>div { position: absolute; }

.index-Mainvisual_Character .mashiro { width: 30.59375vw; height: 27.10417vw; top: 10.48958vw; left: 2.72917vw; filter: drop-shadow(12px 12px 7px rgba(102,119,204,0.5)); background: url(https://bang-dream.bushimo.jp/wordpress/wp-content/themes/bang-dream_gbp/assets/images/common/index/img_mainvisual_4th_mashiro.png) 0 0/contain no-repeat; }

.index-Mainvisual_Character .ran { width: 36.58333vw; height: 36.15625vw; top: 3.86458vw; left: 11.4375vw; filter: drop-shadow(12px 12px 7px rgba(238,0,34,0.5)); background: url(https://bang-dream.bushimo.jp/wordpress/wp-content/themes/bang-dream_gbp/assets/images/common/index/img_mainvisual_4th_ran.png) 0 0/contain no-repeat; }

.index-Mainvisual_Character .kokoro { width: 38.125vw; height: 28.9375vw; top: 0.30625vw; left: 27.76042vw; filter: drop-shadow(12px 12px 7px rgba(255,237,34,0.5)); background: url(https://bang-dream.bushimo.jp/wordpress/wp-content/themes/bang-dream_gbp/assets/images/common/index/img_mainvisual_4th_kokoro.png) 0 0/contain no-repeat; }

.index-Mainvisual_Character .layer { width: 42.21875vw; height: 38.01042vw; top: 8.6875vw; left: 32.59375vw; filter: drop-shadow(12px 12px 7px rgba(204,0,0,0.5)); background: url(https://bang-dream.bushimo.jp/wordpress/wp-content/themes/bang-dream_gbp/assets/images/common/index/img_mainvisual_4th_layer.png) 0 0/contain no-repeat; }

.index-Mainvisual_Character .aya { width: 30.6875vw; height: 31.1875vw; top: -2.08333vw; left: 17.20833vw; filter: drop-shadow(12px 12px 7px rgba(255,136,187,0.5)); background: url(https://bang-dream.bushimo.jp/wordpress/wp-content/themes/bang-dream_gbp/assets/images/common/index/img_mainvisual_4th_aya.png) 0 0/contain no-repeat; }

.index-Mainvisual_Character .yukina { width: 35.76042vw; height: 40.28125vw; top: 12.125vw; left: 10.16667vw; filter: drop-shadow(12px 12px 7px rgba(136,17,136,0.5)); background: url(https://bang-dream.bushimo.jp/wordpress/wp-content/themes/bang-dream_gbp/assets/images/common/index/img_mainvisual_4th_yukina.png) 0 0/contain no-repeat; }

.index-Mainvisual_Character .kasumi { width: 45.02083vw; height: 40.64583vw; top: 8.4375vw; left: 20.77292vw; filter: drop-shadow(12px 12px 7px rgba(255,86,34,0.5)); background: url(https://bang-dream.bushimo.jp/wordpress/wp-content/themes/bang-dream_gbp/assets/images/common/index/img_mainvisual_4th_kasumi.png) 0 0/contain no-repeat; }*/ /*==================Main Page Customizations==================*/ .page-BanG_Dream_Wikia h1.page-header__title { display: none; }

/*New Releases CD Spin*/ .cbg { background-size: contain; background-position: center; background-repeat: no-repeat; font-size: inherit; overflow: hidden; } .cover-panel { width: 700px; height: 700px; background-image: url("https://static.wikia.nocookie.net/bandori/images/f/f4/Decorate-panel.png"); position: relative; top: -100px; left: 0; }

.cover-panel .decoroate.d-1 { background-image: url("https://static.wikia.nocookie.net/bandori/images/c/c1/Decorate-1.png"); } .cover-panel .decoroate.d-1.active { -webkit-animation: rotate 15s linear reverse infinite; animation: rotate 15s linear reverse infinite; }

.cover-panel .decoroate.d-2 { background-image: url("https://static.wikia.nocookie.net/bandori/images/b/b1/Decorate-2.png"); } .cover-panel .decoroate.d-2.active { animation: rotate 15s linear infinite; }

.cover-panel .decoroate.d-3 { background-image: url("https://static.wikia.nocookie.net/bandori/images/c/c2/Decorate-3.png"); } .cover-panel .decoroate.d-3.active { -webkit-animation: rotate 15s linear reverse infinite; animation: rotate 15s linear reverse infinite; } @keyframes rotate { 0% {		transform: rotate(0); }	100% {		transform: rotate(359deg); } }

.cover-panel .decoroate { width: 700px; height: 700px; background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; }

.song-cover img { width: 240px; height: 240px; position: absolute; top: 32.9%; left: 32.9%; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; border-radius: 50%; animation: rotate 15s linear infinite; } /******************Tiles, copied from BnHA Wiki***************/ .tiles { border-spacing: 0; margin: 0 auto; max-width: 750px; table-layout: fixed; width: 98%; } .tiles td { box-shadow: 0 0 10px #000; outline: 1px solid #000; position: relative; } .tiles td > div { height: 150px; overflow: hidden; } .tiles__description a { align-items: center; background-color: rgba(0, 0, 0, 0.2); bottom: 0; color: #fff !important; display: flex; font-size: 24px; font-weight: bold; justify-content: center; left: 0; height: 100%; max-height: 100%; position: absolute; right: 0; text-align: center; text-decoration: none; text-shadow: 1px 1px 0 #000, 2px 1px 0 #000, 1px 2px 0 #000, 2px 2px 0 #000, 3px 3px 4px #000; text-transform: uppercase; z-index: 1; } .tiles td:hover .tiles__description a { background-color: rgba(0, 0, 0, 0.8); max-height: 35px; transition: background-color 0.5s, max-height 0.5s; }

/*Now Showing*/ .sw-Film { width: 100%; height: 130px; position: relative; background: url(https://popipa-movie.bang-dream.com/wordpress/wp-content/themes/popipa-movie_v1/assets/images/common/index/txt_rsdate.png) 0 center no-repeat,url(https://popipa-movie.bang-dream.com/wordpress/wp-content/themes/popipa-movie_v1/assets/images/common/img_logo_horizontal_color.png) 100% center no-repeat; background-size: 50%,50%; }

/*bdays, cr: enstars wiki*/ .home-birthday-char { display:flex; align-items:center; margin-bottom:5px } .home-birthday-icon { flex-grow:0 } .home-birthday-text { margin-left:15px; line-height:1; } .home-birthday-name { font:700 14pt 'Twinkle Star',cursive !important } .home-birthday-date { font:500 11pt 'Lexend',sans-serif !important } .home-birthday-char { transition:margin 1s cubic-bezier(.03,.66,.09,.99) } .home-birthday-char:hover { margin-left:5px } .home-seiyuu-crop { overflow: hidden; } .home-seiyuu-crop img { height: 50px; width: 50px; }

/*Welcome Animation*/ @-webkit-keyframes bandori { 0% {color: #ff0a6f;} 5% {color: #ff358c;} 10% {color: #df509c;} 15% {color: #bc72ba;} 20% {color: #807fcf;} 25% {color: #009cff;} 30% {color: #33a5d5;} 35% {color: #65ad8f;} 40% {color: #9fb46a;} 45% {color: #d0c20b;} 50% {color: #f5c000;} 55% {color: #d0c20b;} 60% {color: #9fb46a;} 65% {color: #65ad8f;} 70% {color: #33a5d5;} 75% {color: #009cff;} 80% {color: #807fcf;} 85% {color: #bc72ba;} 90% {color: #df509c;} 95% {color: #ff358c;} 100% {color: #ff0a6f;} } @keyframes bandori { 0% {color: #ff0a6f;} 5% {color: #ff358c;} 10% {color: #df509c;} 15% {color: #bc72ba;} 20% {color: #807fcf;} 25% {color: #009cff;} 30% {color: #33a5d5;} 35% {color: #65ad8f;} 40% {color: #9fb46a;} 45% {color: #d0c20b;} 50% {color: #f5c000;} 55% {color: #d0c20b;} 60% {color: #9fb46a;} 65% {color: #65ad8f;} 70% {color: #33a5d5;} 75% {color: #009cff;} 80% {color: #807fcf;} 85% {color: #bc72ba;} 90% {color: #df509c;} 95% {color: #ff358c;} 100% {color: #ff0a6f;} } .bandori_ani { -webkit-animation: bandori 40s infinite; -moz-animation: bandori 40s infinite; -ms-animation: bandori 40s infinite; animation: bandori 40s infinite; }