mNo edit summary |
mNo edit summary |
||
| Line 115: | Line 115: | ||
background-image: url("https://static.wikia.nocookie.net/choo-co-la-tiah/images/2/20/Decoroate-panel.png"); |
background-image: url("https://static.wikia.nocookie.net/choo-co-la-tiah/images/2/20/Decoroate-panel.png"); |
||
position: relative; |
position: relative; |
||
| − | top: - |
+ | top: -100px; |
left: 0; |
left: 0; |
||
} |
} |
||
| Line 123: | Line 123: | ||
} |
} |
||
.cover-panel .decoroate.d-1.active { |
.cover-panel .decoroate.d-1.active { |
||
| − | -webkit-animation: rotate 15s linear infinite; |
+ | -webkit-animation: rotate 15s linear reverse infinite; |
| − | animation: rotate 15s linear infinite; |
+ | animation: rotate 15s linear reverse infinite; |
} |
} |
||
| Line 131: | Line 131: | ||
} |
} |
||
.cover-panel .decoroate.d-2.active { |
.cover-panel .decoroate.d-2.active { |
||
| − | animation: rotate 15s linear |
+ | animation: rotate 15s linear infinite; |
} |
} |
||
| Line 138: | Line 138: | ||
} |
} |
||
.cover-panel .decoroate.d-3.active { |
.cover-panel .decoroate.d-3.active { |
||
| − | -webkit-animation: rotate 15s linear infinite; |
+ | -webkit-animation: rotate 15s linear reverse infinite; |
| − | animation: rotate 15s linear infinite; |
+ | animation: rotate 15s linear reverse infinite; |
} |
} |
||
@keyframes rotate { |
@keyframes rotate { |
||
| Line 162: | Line 162: | ||
.song-cover img { |
.song-cover img { |
||
| − | + | width: 240px; |
|
| − | + | height: 240px; |
|
position: absolute; |
position: absolute; |
||
| − | top: |
+ | top: 32.9%; |
| − | left: |
+ | left: 32.9%; |
-webkit-transition: all .5s; |
-webkit-transition: all .5s; |
||
-o-transition: all .5s; |
-o-transition: all .5s; |
||
transition: all .5s; |
transition: all .5s; |
||
border-radius: 50%; |
border-radius: 50%; |
||
| + | animation: rotate 15s linear infinite; |
||
} |
} |
||
/******************MARQUEE***************/ |
/******************MARQUEE***************/ |
||
Revision as of 15:41, 12 April 2021
/*
Credits to
Jpdori site for base design
AruLyrics for the character positioning and welcome to bandori wiki logo
*/
.index-Mainvisual {
width: 1100px;
height: 716px;
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_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: 95%;
margin: 0 auto;
position: absolute;
top: 91%;
left: 0;
z-index: 4;
color: #000;
}
.index-Mainvisual_Character>div {
position: absolute;
}
.index-Mainvisual_Character .mashiro {
width: 35.59375vw;
height: 32.10417vw;
top: 11.98958vw;
left: 13.22917vw;
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: 42.58333vw;
height: 43.15625vw;
top: 6.36458vw;
left: 22.9375vw;
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.625vw;
height: 35.4375vw;
top: 0.00625vw;
left: 34.70833vw;
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: 57.21875vw;
height: 52.01042vw;
top: 17.6875vw;
left: 50.09375vw;
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: 39.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: 49.76042vw;
height: 55.28125vw;
top: 22.125vw;
left: 11.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: 70.02083vw;
height: 55.64583vw;
top: 16.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==================*/
.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%);
}
}