MediaWiki:Card.css

/* For card pages*/ .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; }