mNo edit summary |
mNo edit summary |
||
(50 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | /* |
||
− | Credits to |
||
− | Jpdori site for base design |
||
− | AruLyrics for the character positioning and welcome to bandori wiki logo |
||
− | */ |
||
.index-Mainvisual { |
.index-Mainvisual { |
||
− | width: |
+ | width: 100%; |
− | height: |
+ | height: 30.2500vw; |
− | background: url(https:// |
+ | background: url(https://static.wikia.nocookie.net/bandori/images/8/81/Girls_Band_Party%21_2024_KV.jpg) 0 -65px no-repeat; |
background-size: 100%; |
background-size: 100%; |
||
position: relative; |
position: relative; |
||
Line 13: | Line 8: | ||
user-select: none; |
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 { |
.index-Mainvisual_Logo { |
||
− | width: |
+ | width: 24.1875vw; |
margin: 0 auto; |
margin: 0 auto; |
||
position: absolute; |
position: absolute; |
||
− | + | bottom: -4%; |
|
− | right: |
+ | right: -1%; |
− | left: -1.5%; |
||
z-index: 4; |
z-index: 4; |
||
} |
} |
||
+ | |||
.index-Mainvisual_Logo img { |
.index-Mainvisual_Logo img { |
||
width: 100%; |
width: 100%; |
||
height: auto; |
height: auto; |
||
} |
} |
||
+ | |||
− | .index-Mainvisual_Links { |
||
+ | /* Main Page Customizations */ |
||
− | width: 95%; |
||
+ | .page-BanG_Dream_Wikia h1.page-header__title, |
||
− | margin: 0 auto; |
||
+ | .page-BanG_Dream_Wikia #lastEdited { |
||
− | 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; |
display: none; |
||
} |
} |
||
+ | |||
− | .page-BanG_Dream_Wikia .WikiaSiteWrapper .WikiaPageContentWrapper { |
||
+ | /* New Releases CD Spin */ |
||
− | padding: 0; |
||
− | } |
||
− | /*==================New Releases Album Art Design==================*/ |
||
.cbg { |
.cbg { |
||
background-size: contain; |
background-size: contain; |
||
Line 113: | Line 69: | ||
width: 700px; |
width: 700px; |
||
height: 700px; |
height: 700px; |
||
− | background-image: url("https://static.wikia.nocookie.net/ |
+ | background-image: url("https://static.wikia.nocookie.net/bandori/images/f/f4/Decorate-panel.png"); |
position: relative; |
position: relative; |
||
top: -100px; |
top: -100px; |
||
Line 120: | Line 76: | ||
.cover-panel .decoroate.d-1 { |
.cover-panel .decoroate.d-1 { |
||
− | background-image: url("https://static.wikia.nocookie.net/ |
+ | background-image: url("https://static.wikia.nocookie.net/bandori/images/c/c1/Decorate-1.png"); |
} |
} |
||
.cover-panel .decoroate.d-1.active { |
.cover-panel .decoroate.d-1.active { |
||
Line 128: | Line 84: | ||
.cover-panel .decoroate.d-2 { |
.cover-panel .decoroate.d-2 { |
||
− | background-image: url("https://static.wikia.nocookie.net/ |
+ | background-image: url("https://static.wikia.nocookie.net/bandori/images/b/b1/Decorate-2.png"); |
} |
} |
||
.cover-panel .decoroate.d-2.active { |
.cover-panel .decoroate.d-2.active { |
||
Line 135: | Line 91: | ||
.cover-panel .decoroate.d-3 { |
.cover-panel .decoroate.d-3 { |
||
− | background-image: url("https://static.wikia.nocookie.net/ |
+ | background-image: url("https://static.wikia.nocookie.net/bandori/images/c/c2/Decorate-3.png"); |
} |
} |
||
.cover-panel .decoroate.d-3.active { |
.cover-panel .decoroate.d-3.active { |
||
Line 173: | Line 129: | ||
animation: rotate 15s linear infinite; |
animation: rotate 15s linear infinite; |
||
} |
} |
||
+ | /* Tiles, copied from BnHA Wiki */ |
||
− | /******************MARQUEE***************/ |
||
− | . |
+ | .tiles { |
+ | border-spacing: 0; |
||
− | height: 70px; |
||
− | + | margin: 0 auto; |
|
− | + | max-width: 750px; |
|
+ | table-layout: fixed; |
||
+ | width: 98%; |
||
} |
} |
||
+ | |||
− | .marquee .marquee-item { |
||
+ | .tiles td { |
||
− | position: absolute; |
||
− | + | 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%; |
height: 100%; |
||
− | + | max-height: 100%; |
|
− | + | position: absolute; |
|
+ | right: 0; |
||
text-align: center; |
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*/ |
||
− | /* Starting position */ |
||
+ | .sw-Film { |
||
− | -moz-transform:translateX(100%); |
||
− | + | width: 100%; |
|
+ | height: 130px; |
||
− | transform:translateX(100%); |
||
+ | 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*/ |
||
− | /* Apply animation to this element */ |
||
+ | .home-birthday-char { |
||
− | -moz-animation: marquee 15s linear infinite; |
||
+ | display:flex; |
||
− | -webkit-animation: marquee 15s linear infinite; |
||
+ | align-items:center; |
||
− | animation: marquee 15s linear infinite; |
||
+ | margin-bottom:5px |
||
+ | } |
||
+ | .home-birthday-icon { |
||
+ | flex-grow:0 |
||
+ | } |
||
+ | .home-birthday-text { |
||
+ | margin-left:15px; |
||
+ | line-height:1; |
||
+ | } |
||
+ | .home-birthday-name { |
||
+ | font:700 14pt 'Lexend',sans-serif !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*/ |
||
− | /* Move it (define the animation) */ |
||
− | + | @-webkit-keyframes bandori { |
|
− | + | 0% {color: #ff0a6f;} |
|
+ | 5% {color: #ff358c;} |
||
− | 100% { -moz-transform: translateX(-100%); } |
||
− | + | 10% {color: #df509c;} |
|
+ | 15% {color: #bc72ba;} |
||
− | @-webkit-keyframes marquee { |
||
+ | 20% {color: #807fcf;} |
||
− | 0% { -webkit-transform: translateX(100%); } |
||
+ | 25% {color: #009cff;} |
||
− | 100% { -webkit-transform: translateX(-100%); } |
||
− | + | 30% {color: #33a5d5;} |
|
+ | 35% {color: #65ad8f;} |
||
− | @keyframes marquee { |
||
− | + | 40% {color: #9fb46a;} |
|
+ | 45% {color: #d0c20b;} |
||
− | -moz-transform: translateX(100%); /* Firefox bug fix */ |
||
+ | 50% {color: #f5c000;} |
||
− | -webkit-transform: translateX(100%); /* Firefox bug fix */ |
||
+ | 55% {color: #d0c20b;} |
||
− | transform: translateX(100%); |
||
− | + | 60% {color: #9fb46a;} |
|
− | + | 65% {color: #65ad8f;} |
|
+ | 70% {color: #33a5d5;} |
||
− | -moz-transform: translateX(-100%); /* Firefox bug fix */ |
||
+ | 75% {color: #009cff;} |
||
− | -webkit-transform: translateX(-100%); /* Firefox bug fix */ |
||
+ | 80% {color: #807fcf;} |
||
− | transform: translateX(-100%); |
||
− | + | 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; |
||
+ | } |
Latest revision as of 14:42, 29 February 2024
.index-Mainvisual {
width: 100%;
height: 30.2500vw;
background: url(https://static.wikia.nocookie.net/bandori/images/8/81/Girls_Band_Party%21_2024_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;
}
/* Main Page Customizations */
.page-BanG_Dream_Wikia h1.page-header__title,
.page-BanG_Dream_Wikia #lastEdited {
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 'Lexend',sans-serif !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;
}