MediaWiki:Card.css

/* For card pages*/ /*new card template*/ .card_container { width: 650px; height: 437px; margin: auto; position: relative; overflow: hidden; border-radius: 12px; } .card_img { position: absolute; top: 50%; transform: translate(0, -50%); overflow: hidden; } .card_img a img { width: 100%; height: auto; } .frame1.powerful { background: url(https://static.wikia.nocookie.net/bandori/images/5/54/Frame-1-powerful.png/revision/latest?cb=20220328033410); background-size: 653px 440px; } .frame1.cool { background: url(https://static.wikia.nocookie.net/bandori/images/3/39/Frame-1-cool.png/revision/latest?cb=20220328033556); background-size: 653px 440px; } .frame1.pure { background: url(https://static.wikia.nocookie.net/bandori/images/f/f6/Frame-1-pure.png/revision/latest?cb=20220328033622); background-size: 653px 440px; } .frame1.happy { background: url(https://static.wikia.nocookie.net/bandori/images/2/2d/Frame-1-happy.png/revision/latest?cb=20220328034626); background-size: 653px 440px; } .frame2 { background: url(https://static.wikia.nocookie.net/bandori/images/4/46/Frame-2.png/revision/latest?cb=20220328033007); background-size: 653px 440px; } .frame3 { background: url(https://static.wikia.nocookie.net/bandori/images/2/25/Frame-3.png/revision/latest?cb=20220328032637); background-size: 653px 440px; } .frame4 { background: url(https://static.wikia.nocookie.net/bandori/images/8/82/Frame-4.png/revision/latest?cb=20220328032833); background-size: 653px 440px; } .frame1.powerful, .frame1.cool, .frame1.pure, .frame1.happy, .frame2, .frame3, .frame4 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 650px; height: 437px; } .rarity_untrained { background: url(https://static.wikia.nocookie.net/bandori/images/6/6a/Star_untrained.png/revision/latest?cb=20210210051637); background-size: 50px; } .rarity_trained { background: url(https://static.wikia.nocookie.net/bandori/images/1/11/Star_trained.png/revision/latest?cb=20210210051739); background-size: 50px; } .rarity1 { height: 50px; } .rarity2 { height: 100px; } .rarity3 { height: 150px; } .rarity4 { height: 200px; } .rarity1, .rarity2, .rarity3, .rarity4 { width: 50px; position: absolute; bottom: 5px; left: 9px; } .type_powerful { background: url(https://static.wikia.nocookie.net/bandori/images/9/97/Powerful.svg/revision/latest?cb=20191102143956); } .type_cool { background: url(https://static.wikia.nocookie.net/bandori/images/f/f4/Cool.svg/revision/latest?cb=20191102143955); } .type_pure { background: url(https://static.wikia.nocookie.net/bandori/images/3/3c/Pure.svg/revision/latest?cb=20191102143956); } .type_happy { background: url(https://static.wikia.nocookie.net/bandori/images/c/ce/Happy.svg/revision/latest?cb=20191102143956); } .type_powerful, .type_cool, .type_pure, .type_happy { position: absolute; top: 7px; right: 7px; width: 68px; height: 68px; background-size: 68px; } .band1 { background: url(https://static.wikia.nocookie.net/bandori/images/d/d2/Band_1.svg/revision/latest?cb=20191102143957); }/*popipa*/ .band2 { background: url(https://static.wikia.nocookie.net/bandori/images/2/21/Band_2.svg/revision/latest?cb=20191102143958); }/*afterglow*/ .band3 { background: url(https://static.wikia.nocookie.net/bandori/images/3/3e/Band_4.svg/revision/latest?cb=20191102143958); }/*pasupare*/ .band4 { background: url(https://static.wikia.nocookie.net/bandori/images/f/fd/Band_5.svg/revision/latest?cb=20191102143958); }/*roselia*/ .band5 { background: url(https://static.wikia.nocookie.net/bandori/images/8/82/Band_3.svg/revision/latest?cb=20191102143958); }/*hhw*/ .band6 { background: url(https://static.wikia.nocookie.net/bandori/images/7/77/Band_21.svg/revision/latest?cb=20200315154510); }/*morfo*/ .band7 { background: url(https://static.wikia.nocookie.net/bandori/images/7/7f/Band_18.svg/revision/latest?cb=20200610042902); }/*ras*/ .band1, .band2, .band3, .band4, .band5, .band6, .band7 { position: absolute; top: 7px; left: 9px; width: 70px; height: 70px; background-size: 70px; } .cardtoggle { width: 650px; margin: auto; display: flex; text-align: center; } .cardtoggle div { flex: 1; } .filterdata:not(.a) { display:none; } .btn:hover img { animation: spin 1.5s 1; } @keyframes spin { 100% {       transform: rotate(360deg); } } .btn-grad { background-image: linear-gradient(to right,#E55D87 0%,#5FC3E4 51%,#E55D87 100%); margin: 10px; padding-top: 10px; padding-bottom: 10px; text-align: center; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 10px; display: block; } .btn-grad:hover { background-position: right center; color: #fff; text-decoration: none; }

/*old card code*/ .cards_img { position: relative; width: 644px; height: 432px; overflow: hidden; border-radius: 12px; left: 0.5%; } .cards_img a img { width: 100%; height: auto; transform: translate(0, -23.355px); } .card_icons { position: absolute; max-width: 620px; margin: auto; } .attribute_icon { position: absolute; left: 574.8px; top: -421px; } .band_icon { position: absolute; left: 8px; top: -425px; } .cards_frame { position: absolute; left: 0; top: 0; } /* for cards with 2 arts using custom toggle */ .mw-customtoggle-test:hover { animation: spin 1.5s 1; } @keyframes spin { 100% {       transform: rotate(360deg); } } /* For Template:CardImages */ /*for cards with 2 arts */ .cardimg a img { position: relative; left: -56px; width: 257px; height: 193px; } /*for cards with 1 art */ .cardimg_1 a img { position: relative; left: 0; width: 290px; height: 203px; object-fit: cover; } /* Template:Event2 */ .eventcard a img { position: relative; left: -64px; width: 293px; height: 220px; } .eventcard1 a img { position: relative; left: 0; width: 330px; height: 248px; object-fit: cover; transform: translate(0, -14px); } /*New Card Tooltip Hover*/ .card-detail-hover a img { position: relative; left: -43px; width: auto; height: 260px; object-fit: cover; } .card-tag { height: 25px; position: relative; }

.card-tag-type { position: absolute; width: auto; bottom: 0; right: 0; background: slategray; clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%); box-shadow: 1px 1px 3px #555; color: #fff; font-size: 12px; font-weight: bold; height: 18px; letter-spacing: 0.9px; line-height: 18px; padding: 0 10px; z-index: 4; } /******* Drop Shadows *******/ .drop-shadow_kasumi {filter: drop-shadow(0 0 0.2rem #f52);} .drop-shadow_tae {filter: drop-shadow(0 0 0.2rem #07d);} .drop-shadow_rimi {filter: drop-shadow(0 0 0.2rem #f5b);} .drop-shadow_saaya {filter: drop-shadow(0 0 0.2rem #fc1);} .drop-shadow_arisa {filter: drop-shadow(0 0 0.2rem #a6d);} .drop-shadow_ran {filter: drop-shadow(0 0 0.2rem #e02);} .drop-shadow_moca {filter: drop-shadow(0 0 0.2rem #0ca);} .drop-shadow_himari {filter: drop-shadow(0 0 0.2rem #f99);} .drop-shadow_tomoe {filter: drop-shadow(0 0 0.2rem #b03);} .drop-shadow_tsugumi {filter: drop-shadow(0 0 0.2rem #fe8);} .drop-shadow_aya {filter: drop-shadow(0 0 0.2rem #f8b);} .drop-shadow_hina {filter: drop-shadow(0 0 0.2rem #5de);} .drop-shadow_chisato {filter: drop-shadow(0 0 0.2rem #fea);} .drop-shadow_maya {filter: drop-shadow(0 0 0.2rem #9d8);} .drop-shadow_eve {filter: drop-shadow(0 0 0.2rem #dbf);} .drop-shadow_yukina {filter: drop-shadow(0 0 0.2rem #818);} .drop-shadow_sayo {filter: drop-shadow(0 0 0.2rem #0ab);} .drop-shadow_lisa {filter: drop-shadow(0 0 0.2rem #d20);} .drop-shadow_ako {filter: drop-shadow(0 0 0.2rem #d08);} .drop-shadow_rinko {filter: drop-shadow(0 0 0.2rem #bbb);} .drop-shadow_kokoro {filter: drop-shadow(0 0 0.2rem #fe2);} .drop-shadow_kaoru {filter: drop-shadow(0 0 0.2rem #a3c);} .drop-shadow_hagumi {filter: drop-shadow(0 0 0.2rem #f92);} .drop-shadow_kanon {filter: drop-shadow(0 0 0.2rem #4df);} .drop-shadow_misaki {filter: drop-shadow(0 0 0.2rem #069);} .drop-shadow_mashiro {filter: drop-shadow(0 0 0.2rem #67c);} .drop-shadow_touko {filter: drop-shadow(0 0 0.2rem #e66);} .drop-shadow_nanami {filter: drop-shadow(0 0 0.2rem #e74);} .drop-shadow_tsukushi {filter: drop-shadow(0 0 0.2rem #e78);} .drop-shadow_rui {filter: drop-shadow(0 0 0.2rem #698);} .drop-shadow_rei {filter: drop-shadow(0 0 0.2rem #c00);} .drop-shadow_rokka {filter: drop-shadow(0 0 0.2rem #ae2);} .drop-shadow_masuki {filter: drop-shadow(0 0 0.2rem #eb4);} .drop-shadow_reona {filter: drop-shadow(0 0 0.2rem #f9b);} .drop-shadow_chiyu {filter: drop-shadow(0 0 0.2rem #0bf);} .drop-shadow_default {filter: drop-shadow(0 0 0.2rem #f37);}

/*Template:CardIcon*/ .icon_container { position: relative; width: auto; display: inline-block; }

.icon_img { display: block; width: auto; height: auto; }

.icon_overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: transparent; }

.icon_container:hover .icon_overlay { opacity: 1; }