User:Choocolatiah/common.css

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:Accordion.css&only=styles";

/*fix lila's color in dark mode, cause eyes matter*/ a[href$=":ShikiMeiLover"], a[href$="/ShikiMeiLover"] { filter: invert(100%); }

/*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); } .frame1.cool { background: url(https://static.wikia.nocookie.net/bandori/images/3/39/Frame-1-cool.png/revision/latest?cb=20220328033556); } .frame1.pure { background: url(https://static.wikia.nocookie.net/bandori/images/f/f6/Frame-1-pure.png/revision/latest?cb=20220328033622); } .frame1.happy { background: url(https://static.wikia.nocookie.net/bandori/images/2/2d/Frame-1-happy.png/revision/latest?cb=20220328034626); } .frame2 { background: url(https://static.wikia.nocookie.net/bandori/images/4/46/Frame-2.png/revision/latest?cb=20220328033007); } .frame3 { background: url(https://static.wikia.nocookie.net/bandori/images/2/25/Frame-3.png/revision/latest?cb=20220328032637); } .frame4 { background: url(https://static.wikia.nocookie.net/bandori/images/8/82/Frame-4.png/revision/latest?cb=20220328032833); } .frame1, .frame2, .frame3, .frame4 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 650px; height: 437px; background-size: 653px 440px; } .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; }