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: 45.10417vw; background: url(https://bang-dream.bushimo.jp/wordpress/wp-content/themes/bang-dream_gbp/assets/images/pc/index/bg_mainvisual_4th.jpg) 0 0 no-repeat; background-size: 100%; position: relative; overflow: hidden; user-select: none; } .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: 28.1875vw; margin: 0 auto; position: absolute; top: -2.5%; right: 0; left: -1.5%; z-index: 4; } .index-Mainvisual_Logo img { width: 100%; height: auto; } .index-Mainvisual_Links { width: 97%; margin: 0 auto; position: absolute; top: 89%; left: 1%; z-index: 4; color: #000; } .index-Mainvisual_Character>div { position: absolute; } .index-Mainvisual_Character .mashiro { width: 37.59375vw; height: 33.10417vw; top: 11.48958vw; left: 12.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: 44.58333vw; height: 45.15625vw; top: 4.86458vw; left: 22.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: 47.125vw; height: 35.9375vw; top: -0.30625vw; left: 35.20833vw; 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: 56.21875vw; height: 52.01042vw; top: 13.6875vw; left: 47.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: 38.6875vw; height: 42.1875vw; top: 0.08333vw; left: 47.76042vw; 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: 48.76042vw; height: 53.28125vw; top: 21.125vw; left: 13.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: 68.02083vw; height: 48.64583vw; top: 15.4375vw; left: 27.57292vw; 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#firstHeading.page-header__title, .mainpage .WikiaPage .page-header__separator { display: none; } .page-BanG_Dream_Wikia .WikiaSiteWrapper .WikiaPageContentWrapper { padding: 0; } /*	New Releases Album Art Design Credits to CNdori garupa site for the design and images .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/choo-co-la-tiah/images/2/20/Decoroate-panel.png"); position: relative; top: -100px; left: 0; }

.cover-panel .decoroate.d-1 { background-image: url("https://static.wikia.nocookie.net/choo-co-la-tiah/images/9/96/Decoroate-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/choo-co-la-tiah/images/0/09/Decoroate-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/choo-co-la-tiah/images/a/a1/Decoroate-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; } /******************MARQUEE***************/ .marquee { height: 70px; overflow: hidden; position: relative; } .marquee .marquee-item { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 1; text-align: center;

/* Starting position */ -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%);

/* Apply animation to this element */ -moz-animation: marquee 15s linear infinite; -webkit-animation: marquee 15s linear infinite; animation: marquee 15s linear infinite; }

/* Move it (define the animation) */ @-moz-keyframes marquee { 0%  { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } }     @-webkit-keyframes marquee { 0%  { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } }     @keyframes marquee { 0%  {        -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%); }      100% {        -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-100%); }     }

/*** Now Showing - EoR version ***/ .st-Frame { position: relative; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; }

.st-Frame_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 #ddf; }

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

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

.st-Frame_Item_Top:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 70px; height: 86px; background: url(https://roselia-movie.bang-dream.com/wordpress/wp-content/themes/roselia-movie_v2/assets/images/common/corner_top-l.svg) left top/100% auto no-repeat; } /* .st-Frame_Item_Bottom:before { left: 0; background: url(https://roselia-movie.bang-dream.com/wordpress/wp-content/themes/roselia-movie_v2/assets/images/common/corner-bottom-l.svg) left top/100% auto no-repeat; } .st-Frame_Item_Bottom:after { right: 0; background: url(https://roselia-movie.bang-dream.com/wordpress/wp-content/themes/roselia-movie_v2/assets/images/common/corner-bottom-r.svg) left top/100% auto no-repeat; }

.st-Frame_Item_Bottom:before, .st-Frame_Item_Bottom:after { content: ''; display: block; position: absolute; bottom: 0; width: 70px; height: 86px; }