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: -115px; width: 533px; height: 400px; } .card_img_trained_t2 a img { position: relative; left: -115px; width: 533px; height: 400px; }

/* 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; } /* event cards */ .eventcard a img { position: relative; left: -64px; width: 293px; height: 220px; } .eventcard1 a img { position: relative; left: 0; width: 293px; height: 220px; }

/******************MP Spotlight Bday Card******************/ .card { perspective: 150rem; position: relative; height: 26.7rem; max-width: 373px; margin: 1.5rem; box-shadow: none; background: none; }

.card-side { height: 24.7rem; border-radius: 15px; transition: all 0.8s ease; backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 80%; color: white; padding: 1.5rem; }

.card-side.back { transform: rotateY(-180deg); background-color: #d04158; background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%); }

.card-side.front { background-color: #e90093; background-image: linear-gradient(160deg, #e90093 0%, #d080b1 100%); }

.card:hover .card-side.front { transform: rotateY(180deg); }

.card:hover .card-side.back { transform: rotateY(0deg); } .card-img a img { position: relative; left: -116.5px; width: 533px; height: 400px; } /**** Not centered chars*/ .card-img-left a img { position: relative; left: -20px; width: 533px; height: 400px; } .card-img-right a img { position: relative; left: -233px; width: 533px; height: 400px; }