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

/* Card details on hover */ .custom-tooltip .wds-dropdown__content { min-width: 300px; padding: 0; text-align: center; background: #000111; box-shadow: 0px 0px 15px gray; } .custom-tooltip .wds-dropdown__content .inset { color: #fff; width: 100%; position: relative; z-index: 1; }

.rainbowtextgradient { background: #ed7ddf; background-color: #ed7ddf; background-image: radial-gradient(circle farthest-corner at center, rgba(249, 126, 230, 1) 10%, rgba(254, 228, 248, 1) 20%, rgba(248, 163, 130, 1) 35%, rgba(248, 199, 79, 1) 45%, rgba(168, 230, 81, 1) 55%, rgba(76, 225, 238, 1) 65%, rgba(102, 158, 245, 1) 80%, rgba(229, 229, 253, 1) 90%, rgba(237, 125, 223, 1) 100%); background-size: 100%; background-repeat: repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; }