MediaWiki:Card.css

/* For card pages*/ .rarity1 { background-image: url('https://vignette.wikia.nocookie.net/bandori/images/6/6a/Star_untrained.png/revision/latest?cb=20170522121406'); width: 38px; height: 38px; position: relative; top: -58px; left: -4px; } .rarity2 { background-image: url('https://vignette.wikia.nocookie.net/bandori/images/6/6a/Star_untrained.png/revision/latest?cb=20170522121406'); width: 38px; height: 76px; position: relative; top: -96px; left: -4px; } .rarity3 { background-image: url('https://vignette.wikia.nocookie.net/bandori/images/1/11/Star_trained.png/revision/latest/scale-to-width-down/38?cb=20190728034940'); width: 38px; height: 114px; position: relative; top: -134px; left: -4px; } .rarity4 { background-image: url('https://vignette.wikia.nocookie.net/bandori/images/1/11/Star_trained.png/revision/latest/scale-to-width-down/38?cb=20190728034940'); width: 38px; height: 152px; position: relative; top: -172px; left: -4px; } .card_img_normal_t1 a img { position: relative; top: -15px; width: 593px; height: 445px; } .card_img_normal_t2 a img { position: relative; left: -129px; width: 590px; height: 443px; } .card_img_trained_t2 a img { position: relative; left: -129px; width: 590px; height: 443px; }

/* Card BG */ .card_rarity_4 { background: -webkit-gradient(linear, left top, right bottom, from(#F97EE6), color-stop(13%, #FEE4F8), color-stop(25%, #F8A382), color-stop(38%, #F8C74F), color-stop(50%, #A8E651), color-stop(63%, #4CE1EE), color-stop(75%, #669EF5), color-stop(88%, #E5E5FD), to(#ED7DDF)); background: -moz-linear-gradient(140deg, #F97EE6,#FEE4F8,#F8A382,#F8C74F,#A8E651,#4CE1EE,#669EF5,#E5E5FD,#ED7DDF); }

.card_rarity_3 { background: -webkit-gradient(linear, left top, right bottom, from(#FFDA3C), color-stop(10%, #FFFFE8), color-stop(20%, #FFC537), color-stop(30%, #FBA922), color-stop(40%, #FFFFE8), color-stop(50%, #FFFFE8), color-stop(60%, #FFD02D), color-stop(70%, #FAA41A), color-stop(80%, #FFFFE8), color-stop(90%, #FEBF35), to(#FEBF35)); background: -moz-linear-gradient(140deg,#FFDA3C,#FFFFE8,#FFC537,#FBA922,#FFFFE8,#FFFFE8,#FFD02D,#FAA41A,#FFFFE8,#FEBF35,#FEBF35); }

.card_rarity_2 { background: -webkit-gradient(linear, left top, right bottom, from(#9FB5C7), color-stop(13%, #D9FFFF), color-stop(25%, #97B5C9), color-stop(38%, #D9FFFF), color-stop(50%, #95ADBA), color-stop(63%, #D9FFFF), color-stop(75%, #9FB5C7), color-stop(88%, #D9FFFF), to(#9FB5C7)); background: -moz-linear-gradient(140deg,#9FB5C7,#D9FFFF,#97B5C9,#D9FFFF,#95ADBA,#D9FFFF,#9FB5C7,#D9FFFF,#9FB5C7); }

.card_rarity_1pure { background: -webkit-gradient(linear, left top, right bottom, from(#44C527), color-stop(10%, #85e36f), color-stop(20%, #44C527), color-stop(30%, #85e36f), color-stop(40%, #44C527), color-stop(50%, #85e36f), color-stop(60%, #44C527), color-stop(70%, #85e36f), color-stop(80%, #44C527), color-stop(90%, #85e36f), to(#44C527)); background: -moz-linear-gradient(140deg,#44C527,#85e36f,#44C527,#85e36f,#44C527,#85e36f,#44C527,#85e36f,#44C527,#85e36f,#44C527,#85e36f,#44C527,#85e36f,#44C527,#85e36f,#44C527,#85e36f); }

.card_rarity_1power { background: -webkit-gradient(linear, left top, right bottom, from(#FF2D54), color-stop(10%, #ff93a7), color-stop(20%, #FF2D54), color-stop(30%, #ff93a7), color-stop(40%, #FF2D54), color-stop(50%, #ff93a7), color-stop(60%, #FF2D54), color-stop(70%, #ff93a7), color-stop(80%, #FF2D54), color-stop(90%, #ff93a7), to(#FF2D54)); background: -moz-linear-gradient(140deg,#FF2D54,#ff93a7,#FF2D54,#ff93a7,#FF2D54,#ff93a7,#FF2D54,#ff93a7,#FF2D54,#ff93a7,#FF2D54,#ff93a7,#FF2D54,#ff93a7,#FF2D54,#ff93a7,#FF2D54,#ff93a7); }

.card_rarity_1happy { background: -webkit-gradient(linear, left top, right bottom, from(#FF8400), color-stop(10%, #ffb566), color-stop(20%, #FF8400), color-stop(30%, #ffb566), color-stop(40%, #FF8400), color-stop(50%, #ffb566), color-stop(60%, #FF8400), color-stop(70%, #ffb566), color-stop(80%, #FF8400), color-stop(90%, #ffb566), to(#FF8400)); background: -moz-linear-gradient(140deg,#FF8400,#ffb566,#FF8400,#ffb566,#FF8400,#ffb566,#FF8400,#ffb566,#FF8400,#ffb566,#FF8400,#ffb566,#FF8400,#ffb566,#FF8400,#ffb566,#FF8400,#ffb566); }

.card_rarity_1cool { background: -webkit-gradient(linear, left top, right bottom, from(#4057E3), color-stop(10%, #99a5f0), color-stop(20%, #4057E3), color-stop(30%, #99a5f0), color-stop(40%, #4057E3), color-stop(50%, #99a5f0), color-stop(60%, #4057E3), color-stop(70%, #99a5f0), color-stop(80%, #4057E3), color-stop(90%, #99a5f0), to(#4057E3)); background: -moz-linear-gradient(140deg,#4057E3,#99a5f0,#4057E3,#99a5f0,#4057E3,#99a5f0,#4057E3,#99a5f0,#4057E3,#99a5f0,#4057E3,#99a5f0,#4057E3,#99a5f0,#4057E3,#99a5f0,#4057E3,#99a5f0); } /* Text Gradients */ /* rainbow, based on the bands colors */ .rainbowtextgradient { background: #ed7ddf; background-color: #ed7ddf; background-image: linear-gradient(to right, rgba(255,51,119,0.8), rgba(238,51,58,0.8), rgba(255,221,0,0.8), rgba(51,221,170,0.8), rgba(51,204,204,0.8), rgba(51,170,255,0.8), rgba(51,69,170,0.8)); background-size: 100%; background-repeat: repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; } /* redtowhite */ .redtowhitegradient { background: #FF5384; background-color: #FF5384; background-image: linear-gradient(to right, rgba(255,10,80,0.8), rgba(255,35,98,0.8), rgba(255,59,115,0.8), rgba(255,83,132,0.8), rgba(255,108,150,0.8), rgba(255,132,167,0.8), rgba(255,157,185,0.8)); background-size: 100%; background-repeat: repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; }

/* 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: 257px; height: 193px; } /* Template:Event2 */ .eventcard a img { position: relative; left: -64px; width: 293px; height: 220px; } .eventcard1 a img { position: relative; left: 0; width: 293px; height: 220px; } /* Template:CardGallery -> DreamFes Pages */ .dreamfes a img { position: relative; left: 0; width: 330px; height: 248px; }

/******************MP Spotlight Bday Card******************/ /******* Hover Book - Credits to the BlackPink Wiki *******/ .book-hover, .book-hover-image { -moz-perspective: 1200px; -webkit-perspective: 1200px; -moz-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; -webkit-user-drag: none; user-drag: none; display: block; margin: 0 auto; perspective: 1200px; width: 275px; } .book-hover, .book-hover-image { width: 275px; } .book, .book-image { -moz-transform-origin: 125px 0; -moz-transform-style: preserve-3d; -moz-transition: 0.75s; -webkit-transform-origin: 125px 0; -webkit-transform-style: preserve-3d; -webkit-transition: 0.75s; box-shadow: 0 0 4px rgba(227, 109, 118, 0.25); transform-origin: 125px 0; transform-style: preserve-3d; transition: 0.75s; } .book:after, .book-image:after { bottom: 0; content: ""; left: 3px; position: absolute; top: 0; width: 7px; } .book:hover { -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); } .book-image:hover { -moz-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); } .book-cover { position: relative; } .book-cover img { height: auto; max-width: 100%; vertical-align: bottom; } .book-spine-image { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #9994C3), color-stop(75%, #F08C9E)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #9994C3), color-stop(75%, #F08C9E)); background-image: -moz-linear-gradient(top, #9994C3 25%, #F08C9E 75%); background-image: -o-linear-gradient(top, #9994C3 25%, #F08C9E 75%); background-image: -ms-linear-gradient(top, #9994C3 25%, #F08C9E 75%); } .book-spine-image { -moz-transform-origin: 0; -moz-transform: rotateY(-90deg) translateX(-49px); -webkit-transform-origin: 0; -webkit-transform: rotateY(-90deg) translateX(-49px); background-size: auto 100%; bottom: 0; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); color: #fff; margin-left: 5px; overflow: hidden; position: absolute; top: 0; transform-origin: 0; } .book-spine { transform: rotateY(-90deg) translateX(-30px); width: 30px; } .book-spine-image { transform: rotateY(-90deg) translateY(-1px) translateX(-26px); width: 20px; } .book-spine-image:before, .book-spine:before { content: ""; display: block; height: 100%; width: 100%; }

/* Special birthday! Card List*/ /*centered character*/ .bdaycardimg a img { position: relative; left: -52.5px; width: 240px; height: 180px; } /*left aligned character*/ .bdaycardimg-left a img { position: relative; left: 0; width: 240px; height: 180px; } /*right aligned character*/ .bdaycardimg-right a img { position: relative; left: -85px; width: 240px; height: 180px; }

/******* 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);}