Compare commits

...

3 Commits

13 changed files with 916 additions and 435 deletions

View File

@ -1,20 +1,20 @@
@font-face {
font-family: 'Mana';
src: url('../fonts/mana.eot?v=1.15.4');
src: url('../fonts/mana.eot?#iefix&v=1.15.4') format('embedded-opentype'), url('../fonts/mana.woff?v=1.15.4') format('woff'), url('../fonts/mana.ttf?v=1.15.4') format('truetype'), url('../fonts/mana.svg?v=1.15.4#mana') format('svg');
font-family: "Mana";
src: url("../fonts/mana.eot?v=1.16.0");
src: url("../fonts/mana.eot?#iefix&v=1.16.0") format("embedded-opentype"), url("../fonts/mana.woff?v=1.16.0") format("woff"), url("../fonts/mana.ttf?v=1.16.0") format("truetype"), url("../fonts/mana.svg?v=1.16.0#mana") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MPlantin';
src: url('../fonts/mplantin.eot?v=1.15.4');
src: url('../fonts/mplantin.eot?#iefix&v=1.15.4') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.15.4') format('woff'), url('../fonts/mplantin.ttf?v=1.15.4') format('truetype'), url('../fonts/mplantin.svg?v=1.15.4#mplantin') format('svg');
font-family: "MPlantin";
src: url("../fonts/mplantin.eot?v=1.16.0");
src: url("../fonts/mplantin.eot?#iefix&v=1.16.0") format("embedded-opentype"), url("../fonts/mplantin.woff?v=1.16.0") format("woff"), url("../fonts/mplantin.ttf?v=1.16.0") format("truetype"), url("../fonts/mplantin.svg?v=1.16.0#mplantin") format("svg");
font-weight: normal;
font-style: normal;
}
.ms {
display: inline-block;
font: normal normal normal 14px/1 Mana;
font: normal normal normal 14px Mana;
font-size: inherit;
line-height: 1em;
text-rendering: auto;
@ -25,6 +25,7 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ms-w::before {
content: "\e600";
}
@ -130,15 +131,13 @@
.ms-c::before {
content: "\e904";
}
.ms-e::before,
.ms-energy::before {
.ms-e::before, .ms-energy::before {
content: "\e907";
}
.ms-acorn::before {
content: "\e929";
}
.ms-ticket::before,
.ms-tk::before {
.ms-ticket::before, .ms-tk::before {
content: "\e9c4";
}
.ms-1-2::before {
@ -174,6 +173,9 @@
.ms-enchantment::before {
content: "\e620";
}
.ms-dungeon::before {
content: "\e995";
}
.ms-instant::before {
content: "\e621";
}
@ -204,8 +206,7 @@
.ms-token::before {
content: "\e96d";
}
.ms-tribal::before,
.ms-multiple::before {
.ms-tribal::before, .ms-multiple::before {
content: "\e925";
}
.ms-vanguard::before {
@ -226,73 +227,25 @@
.ms-exile::before {
content: "\e9cd";
}
.ms-wu::before,
.ms-wb::before,
.ms-rw::after,
.ms-gw::after,
.ms-2w::after {
.ms-wu::before, .ms-wb::before, .ms-rw::after, .ms-gw::after, .ms-2w::after {
content: "\e600";
}
.ms-ub::before,
.ms-ur::before,
.ms-wu::after,
.ms-gu::after,
.ms-2u::after {
.ms-ub::before, .ms-ur::before, .ms-wu::after, .ms-gu::after, .ms-2u::after {
content: "\e601";
}
.ms-br::before,
.ms-bg::before,
.ms-wb::after,
.ms-ub::after,
.ms-2b::after {
.ms-br::before, .ms-bg::before, .ms-wb::after, .ms-ub::after, .ms-2b::after {
content: "\e602";
}
.ms-rw::before,
.ms-rg::before,
.ms-ur::after,
.ms-br::after,
.ms-2r::after {
.ms-rw::before, .ms-rg::before, .ms-ur::after, .ms-br::after, .ms-2r::after {
content: "\e603";
}
.ms-gw::before,
.ms-gu::before,
.ms-bg::after,
.ms-rg::after,
.ms-2g::after {
.ms-gw::before, .ms-gu::before, .ms-bg::after, .ms-rg::after, .ms-2g::after {
content: "\e604";
}
.ms-2w::before,
.ms-2u::before,
.ms-2b::before,
.ms-2r::before,
.ms-2g::before {
.ms-2w::before, .ms-2u::before, .ms-2b::before, .ms-2r::before, .ms-2g::before {
content: "\e607";
}
.ms-wp::before,
.ms-up::before,
.ms-bp::before,
.ms-rp::before,
.ms-gp::before,
.ms-wup::before,
.ms-wup::after,
.ms-wbp::before,
.ms-wbp::after,
.ms-ubp::before,
.ms-ubp::after,
.ms-urp::before,
.ms-urp::after,
.ms-brp::before,
.ms-brp::after,
.ms-bgp::before,
.ms-bgp::after,
.ms-rwp::before,
.ms-rwp::after,
.ms-rgp::before,
.ms-rgp::after,
.ms-gwp::before,
.ms-gwp::after,
.ms-gup::before,
.ms-gup::after {
.ms-wp::before, .ms-up::before, .ms-bp::before, .ms-rp::before, .ms-gp::before, .ms-wup::before, .ms-wup::after, .ms-wbp::before, .ms-wbp::after, .ms-ubp::before, .ms-ubp::after, .ms-urp::before, .ms-urp::after, .ms-brp::before, .ms-brp::after, .ms-bgp::before, .ms-bgp::after, .ms-rwp::before, .ms-rwp::after, .ms-rgp::before, .ms-rgp::after, .ms-gwp::before, .ms-gwp::after, .ms-gup::before, .ms-gup::after {
content: "\e618";
}
.ms-100::before {
@ -496,6 +449,9 @@
.ms-counter-minus::before {
content: "\e939";
}
.ms-counter-minus-uneven::before {
content: "\e943";
}
.ms-counter-muster::before {
content: "\e93a";
}
@ -508,6 +464,9 @@
.ms-counter-plus::before {
content: "\e93d";
}
.ms-counter-plus-uneven::before {
content: "\e944";
}
.ms-counter-scream::before {
content: "\e93e";
}
@ -523,12 +482,6 @@
.ms-counter-time::before {
content: "\e942";
}
.ms-counter-minus-uneven::before {
content: "\e943";
}
.ms-counter-plus-uneven::before {
content: "\e944";
}
.ms-counter-verse::before {
content: "\e945";
}
@ -541,9 +494,7 @@
.ms-counter-stun::before {
content: "\e9c2";
}
.ms-ability-activated::before,
.ms-ability-crew::before,
.ms-ability-cycling::before {
.ms-ability-activated::before, .ms-ability-crew::before, .ms-ability-cycling::before {
content: "\e947";
}
.ms-ability-adamant::before {
@ -789,9 +740,7 @@
.ms-ability-spectacle::before {
content: "\e96b";
}
.ms-ability-static::before,
.ms-ability-enchant::before,
.ms-ability-improvise::before {
.ms-ability-static::before, .ms-ability-enchant::before, .ms-ability-improvise::before {
content: "\e962";
}
.ms-ability-summoning-sickness::before {
@ -827,6 +776,7 @@
.ms-ability-ward::before {
content: "\e992";
}
.ms-cost {
background-color: #beb9b2;
border-radius: 1em;
@ -837,166 +787,39 @@
line-height: 1.35em;
text-align: center;
}
.ms-cost.ms-w,
.ms-cost.ms-wp {
.ms-cost.ms-w, .ms-cost.ms-wp {
background-color: #f0f2c0;
}
.ms-cost.ms-u,
.ms-cost.ms-up {
.ms-cost.ms-u, .ms-cost.ms-up {
background-color: #b5cde3;
}
.ms-cost.ms-b,
.ms-cost.ms-bp {
.ms-cost.ms-b, .ms-cost.ms-bp {
background-color: #aca29a;
}
.ms-cost.ms-r,
.ms-cost.ms-rp {
.ms-cost.ms-r, .ms-cost.ms-rp {
background-color: #db8664;
}
.ms-cost.ms-g,
.ms-cost.ms-gp {
.ms-cost.ms-g, .ms-cost.ms-gp {
background-color: #93b483;
}
.ms-cost.ms-wu,
.ms-cost.ms-wb,
.ms-cost.ms-ub,
.ms-cost.ms-ur,
.ms-cost.ms-br,
.ms-cost.ms-bg,
.ms-cost.ms-rw,
.ms-cost.ms-rg,
.ms-cost.ms-gw,
.ms-cost.ms-gu,
.ms-cost.ms-2w,
.ms-cost.ms-2u,
.ms-cost.ms-2b,
.ms-cost.ms-2r,
.ms-cost.ms-2g,
.ms-cost.ms-wup,
.ms-cost.ms-wbp,
.ms-cost.ms-ubp,
.ms-cost.ms-urp,
.ms-cost.ms-brp,
.ms-cost.ms-bgp,
.ms-cost.ms-rwp,
.ms-cost.ms-rgp,
.ms-cost.ms-gwp,
.ms-cost.ms-gup {
.ms-cost.ms-wu, .ms-cost.ms-wb, .ms-cost.ms-ub, .ms-cost.ms-ur, .ms-cost.ms-br, .ms-cost.ms-bg, .ms-cost.ms-rw, .ms-cost.ms-rg, .ms-cost.ms-gw, .ms-cost.ms-gu, .ms-cost.ms-2w, .ms-cost.ms-2u, .ms-cost.ms-2b, .ms-cost.ms-2r, .ms-cost.ms-2g, .ms-cost.ms-wup, .ms-cost.ms-wbp, .ms-cost.ms-ubp, .ms-cost.ms-urp, .ms-cost.ms-brp, .ms-cost.ms-bgp, .ms-cost.ms-rwp, .ms-cost.ms-rgp, .ms-cost.ms-gwp, .ms-cost.ms-gup {
position: relative;
width: 1.3em;
height: 1.3em;
}
.ms-cost.ms-wu::before,
.ms-cost.ms-wb::before,
.ms-cost.ms-ub::before,
.ms-cost.ms-ur::before,
.ms-cost.ms-br::before,
.ms-cost.ms-bg::before,
.ms-cost.ms-rw::before,
.ms-cost.ms-rg::before,
.ms-cost.ms-gw::before,
.ms-cost.ms-gu::before,
.ms-cost.ms-2w::before,
.ms-cost.ms-2u::before,
.ms-cost.ms-2b::before,
.ms-cost.ms-2r::before,
.ms-cost.ms-2g::before,
.ms-cost.ms-wup::before,
.ms-cost.ms-wbp::before,
.ms-cost.ms-ubp::before,
.ms-cost.ms-urp::before,
.ms-cost.ms-brp::before,
.ms-cost.ms-bgp::before,
.ms-cost.ms-rwp::before,
.ms-cost.ms-rgp::before,
.ms-cost.ms-gwp::before,
.ms-cost.ms-gup::before,
.ms-cost.ms-wu::after,
.ms-cost.ms-wb::after,
.ms-cost.ms-ub::after,
.ms-cost.ms-ur::after,
.ms-cost.ms-br::after,
.ms-cost.ms-bg::after,
.ms-cost.ms-rw::after,
.ms-cost.ms-rg::after,
.ms-cost.ms-gw::after,
.ms-cost.ms-gu::after,
.ms-cost.ms-2w::after,
.ms-cost.ms-2u::after,
.ms-cost.ms-2b::after,
.ms-cost.ms-2r::after,
.ms-cost.ms-2g::after,
.ms-cost.ms-wup::after,
.ms-cost.ms-wbp::after,
.ms-cost.ms-ubp::after,
.ms-cost.ms-urp::after,
.ms-cost.ms-brp::after,
.ms-cost.ms-bgp::after,
.ms-cost.ms-rwp::after,
.ms-cost.ms-rgp::after,
.ms-cost.ms-gwp::after,
.ms-cost.ms-gup::after {
.ms-cost.ms-wu::before, .ms-cost.ms-wu::after, .ms-cost.ms-wb::before, .ms-cost.ms-wb::after, .ms-cost.ms-ub::before, .ms-cost.ms-ub::after, .ms-cost.ms-ur::before, .ms-cost.ms-ur::after, .ms-cost.ms-br::before, .ms-cost.ms-br::after, .ms-cost.ms-bg::before, .ms-cost.ms-bg::after, .ms-cost.ms-rw::before, .ms-cost.ms-rw::after, .ms-cost.ms-rg::before, .ms-cost.ms-rg::after, .ms-cost.ms-gw::before, .ms-cost.ms-gw::after, .ms-cost.ms-gu::before, .ms-cost.ms-gu::after, .ms-cost.ms-2w::before, .ms-cost.ms-2w::after, .ms-cost.ms-2u::before, .ms-cost.ms-2u::after, .ms-cost.ms-2b::before, .ms-cost.ms-2b::after, .ms-cost.ms-2r::before, .ms-cost.ms-2r::after, .ms-cost.ms-2g::before, .ms-cost.ms-2g::after, .ms-cost.ms-wup::before, .ms-cost.ms-wup::after, .ms-cost.ms-wbp::before, .ms-cost.ms-wbp::after, .ms-cost.ms-ubp::before, .ms-cost.ms-ubp::after, .ms-cost.ms-urp::before, .ms-cost.ms-urp::after, .ms-cost.ms-brp::before, .ms-cost.ms-brp::after, .ms-cost.ms-bgp::before, .ms-cost.ms-bgp::after, .ms-cost.ms-rwp::before, .ms-cost.ms-rwp::after, .ms-cost.ms-rgp::before, .ms-cost.ms-rgp::after, .ms-cost.ms-gwp::before, .ms-cost.ms-gwp::after, .ms-cost.ms-gup::before, .ms-cost.ms-gup::after {
font-size: 0.55em !important;
position: absolute;
}
.ms-cost.ms-wu::before,
.ms-cost.ms-wb::before,
.ms-cost.ms-ub::before,
.ms-cost.ms-ur::before,
.ms-cost.ms-br::before,
.ms-cost.ms-bg::before,
.ms-cost.ms-rw::before,
.ms-cost.ms-rg::before,
.ms-cost.ms-gw::before,
.ms-cost.ms-gu::before,
.ms-cost.ms-2w::before,
.ms-cost.ms-2u::before,
.ms-cost.ms-2b::before,
.ms-cost.ms-2r::before,
.ms-cost.ms-2g::before,
.ms-cost.ms-wup::before,
.ms-cost.ms-wbp::before,
.ms-cost.ms-ubp::before,
.ms-cost.ms-urp::before,
.ms-cost.ms-brp::before,
.ms-cost.ms-bgp::before,
.ms-cost.ms-rwp::before,
.ms-cost.ms-rgp::before,
.ms-cost.ms-gwp::before,
.ms-cost.ms-gup::before {
.ms-cost.ms-wu::before, .ms-cost.ms-wb::before, .ms-cost.ms-ub::before, .ms-cost.ms-ur::before, .ms-cost.ms-br::before, .ms-cost.ms-bg::before, .ms-cost.ms-rw::before, .ms-cost.ms-rg::before, .ms-cost.ms-gw::before, .ms-cost.ms-gu::before, .ms-cost.ms-2w::before, .ms-cost.ms-2u::before, .ms-cost.ms-2b::before, .ms-cost.ms-2r::before, .ms-cost.ms-2g::before, .ms-cost.ms-wup::before, .ms-cost.ms-wbp::before, .ms-cost.ms-ubp::before, .ms-cost.ms-urp::before, .ms-cost.ms-brp::before, .ms-cost.ms-bgp::before, .ms-cost.ms-rwp::before, .ms-cost.ms-rgp::before, .ms-cost.ms-gwp::before, .ms-cost.ms-gup::before {
top: -0.38em;
left: 0.28em;
}
.ms-cost.ms-wu::after,
.ms-cost.ms-wb::after,
.ms-cost.ms-ub::after,
.ms-cost.ms-ur::after,
.ms-cost.ms-br::after,
.ms-cost.ms-bg::after,
.ms-cost.ms-rw::after,
.ms-cost.ms-rg::after,
.ms-cost.ms-gw::after,
.ms-cost.ms-gu::after,
.ms-cost.ms-2w::after,
.ms-cost.ms-2u::after,
.ms-cost.ms-2b::after,
.ms-cost.ms-2r::after,
.ms-cost.ms-2g::after,
.ms-cost.ms-wup::after,
.ms-cost.ms-wbp::after,
.ms-cost.ms-ubp::after,
.ms-cost.ms-urp::after,
.ms-cost.ms-brp::after,
.ms-cost.ms-bgp::after,
.ms-cost.ms-rwp::after,
.ms-cost.ms-rgp::after,
.ms-cost.ms-gwp::after,
.ms-cost.ms-gup::after {
.ms-cost.ms-wu::after, .ms-cost.ms-wb::after, .ms-cost.ms-ub::after, .ms-cost.ms-ur::after, .ms-cost.ms-br::after, .ms-cost.ms-bg::after, .ms-cost.ms-rw::after, .ms-cost.ms-rg::after, .ms-cost.ms-gw::after, .ms-cost.ms-gu::after, .ms-cost.ms-2w::after, .ms-cost.ms-2u::after, .ms-cost.ms-2b::after, .ms-cost.ms-2r::after, .ms-cost.ms-2g::after, .ms-cost.ms-wup::after, .ms-cost.ms-wbp::after, .ms-cost.ms-ubp::after, .ms-cost.ms-urp::after, .ms-cost.ms-brp::after, .ms-cost.ms-bgp::after, .ms-cost.ms-rwp::after, .ms-cost.ms-rgp::after, .ms-cost.ms-gwp::after, .ms-cost.ms-gup::after {
top: 0.5em;
left: 1em;
}
.ms-cost.ms-wu,
.ms-cost.ms-wup {
.ms-cost.ms-wu, .ms-cost.ms-wup {
background: #edf2b0;
background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #edf2b0), color-stop(50%, #edf2b0), color-stop(50%, #a6c1dd), color-stop(100%, #a6c1dd));
@ -1004,10 +827,9 @@
background: -o-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%);
background: -ms-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%);
background: linear-gradient(135deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#edf2b0', endColorstr='#a6c1dd', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#edf2b0", endColorstr="#a6c1dd",GradientType=1 );
}
.ms-cost.ms-wb,
.ms-cost.ms-wbp {
.ms-cost.ms-wb, .ms-cost.ms-wbp {
background: #edf2b0;
background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #edf2b0), color-stop(50%, #edf2b0), color-stop(50%, #9c9188), color-stop(100%, #9c9188));
@ -1015,10 +837,9 @@
background: -o-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%);
background: -ms-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%);
background: linear-gradient(135deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#edf2b0', endColorstr='#9c9188', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#edf2b0", endColorstr="#9c9188",GradientType=1 );
}
.ms-cost.ms-ub,
.ms-cost.ms-ubp {
.ms-cost.ms-ub, .ms-cost.ms-ubp {
background: #a6c1dd;
background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #a6c1dd), color-stop(50%, #a6c1dd), color-stop(50%, #9c9188), color-stop(100%, #9c9188));
@ -1026,10 +847,9 @@
background: -o-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%);
background: -ms-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%);
background: linear-gradient(135deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6c1dd', endColorstr='#9c9188', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a6c1dd", endColorstr="#9c9188",GradientType=1 );
}
.ms-cost.ms-ur,
.ms-cost.ms-urp {
.ms-cost.ms-ur, .ms-cost.ms-urp {
background: #a6c1dd;
background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #a6c1dd), color-stop(50%, #a6c1dd), color-stop(50%, #db8664), color-stop(100%, #db8664));
@ -1037,10 +857,9 @@
background: -o-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%);
background: -ms-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%);
background: linear-gradient(135deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6c1dd', endColorstr='#db8664', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a6c1dd", endColorstr="#db8664",GradientType=1 );
}
.ms-cost.ms-br,
.ms-cost.ms-brp {
.ms-cost.ms-br, .ms-cost.ms-brp {
background: #aca29a;
background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #aca29a), color-stop(50%, #aca29a), color-stop(50%, #db8664), color-stop(100%, #db8664));
@ -1048,10 +867,9 @@
background: -o-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%);
background: -ms-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%);
background: linear-gradient(135deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aca29a', endColorstr='#db8664', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#aca29a", endColorstr="#db8664",GradientType=1 );
}
.ms-cost.ms-bg,
.ms-cost.ms-bgp {
.ms-cost.ms-bg, .ms-cost.ms-bgp {
background: #aca29a;
background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #aca29a), color-stop(50%, #aca29a), color-stop(50%, #93b483), color-stop(100%, #93b483));
@ -1059,10 +877,9 @@
background: -o-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%);
background: -ms-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%);
background: linear-gradient(135deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aca29a', endColorstr='#93b483', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#aca29a", endColorstr="#93b483",GradientType=1 );
}
.ms-cost.ms-rw,
.ms-cost.ms-rwp {
.ms-cost.ms-rw, .ms-cost.ms-rwp {
background: #db8664;
background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #db8664), color-stop(50%, #db8664), color-stop(50%, #edf2b0), color-stop(100%, #edf2b0));
@ -1070,10 +887,9 @@
background: -o-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%);
background: -ms-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%);
background: linear-gradient(135deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#db8664', endColorstr='#edf2b0', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#db8664", endColorstr="#edf2b0",GradientType=1 );
}
.ms-cost.ms-rg,
.ms-cost.ms-rgp {
.ms-cost.ms-rg, .ms-cost.ms-rgp {
background: #db8664;
background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #db8664), color-stop(50%, #db8664), color-stop(50%, #93b483), color-stop(100%, #93b483));
@ -1081,10 +897,9 @@
background: -o-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%);
background: -ms-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%);
background: linear-gradient(135deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#db8664', endColorstr='#93b483', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#db8664", endColorstr="#93b483",GradientType=1 );
}
.ms-cost.ms-gw,
.ms-cost.ms-gwp {
.ms-cost.ms-gw, .ms-cost.ms-gwp {
background: #93b483;
background: -moz-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #93b483), color-stop(50%, #93b483), color-stop(50%, #edf2b0), color-stop(100%, #edf2b0));
@ -1092,10 +907,9 @@
background: -o-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
background: -ms-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
background: linear-gradient(135deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93b483', endColorstr='#edf2b0', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#93b483", endColorstr="#edf2b0",GradientType=1 );
}
.ms-cost.ms-gu,
.ms-cost.ms-gup {
.ms-cost.ms-gu, .ms-cost.ms-gup {
background: #93b483;
background: -moz-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #93b483), color-stop(50%, #93b483), color-stop(50%, #b5cde3), color-stop(100%, #b5cde3));
@ -1103,7 +917,7 @@
background: -o-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%);
background: -ms-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%);
background: linear-gradient(135deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93b483', endColorstr='#b5cde3', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#93b483", endColorstr="#b5cde3",GradientType=1 );
}
.ms-cost.ms-2w {
background: #beb9b2;
@ -1113,7 +927,7 @@
background: -o-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%);
background: -ms-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%);
background: linear-gradient(135deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#beb9b2', endColorstr='#edf2b0', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#beb9b2", endColorstr="#edf2b0",GradientType=1 );
}
.ms-cost.ms-2u {
background: #beb9b2;
@ -1123,7 +937,7 @@
background: -o-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%);
background: -ms-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%);
background: linear-gradient(135deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#beb9b2', endColorstr='#b5cde3', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#beb9b2", endColorstr="#b5cde3",GradientType=1 );
}
.ms-cost.ms-2b {
background: #beb9b2;
@ -1133,7 +947,7 @@
background: -o-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%);
background: -ms-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%);
background: linear-gradient(135deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#beb9b2', endColorstr='#9c9188', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#beb9b2", endColorstr="#9c9188",GradientType=1 );
}
.ms-cost.ms-2r {
background: #beb9b2;
@ -1143,7 +957,7 @@
background: -o-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%);
background: -ms-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%);
background: linear-gradient(135deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#beb9b2', endColorstr='#db8664', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#beb9b2", endColorstr="#db8664",GradientType=1 );
}
.ms-cost.ms-2g {
background: #beb9b2;
@ -1153,24 +967,9 @@
background: -o-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%);
background: -ms-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%);
background: linear-gradient(135deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#beb9b2', endColorstr='#93b483', GradientType=1);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#beb9b2", endColorstr="#93b483",GradientType=1 );
}
.ms-cost.ms-p::before,
.ms-cost.ms-wp::before,
.ms-cost.ms-up::before,
.ms-cost.ms-bp::before,
.ms-cost.ms-rp::before,
.ms-cost.ms-gp::before,
.ms-cost.ms-wup::before,
.ms-cost.ms-wbp::before,
.ms-cost.ms-ubp::before,
.ms-cost.ms-urp::before,
.ms-cost.ms-brp::before,
.ms-cost.ms-bgp::before,
.ms-cost.ms-rwp::before,
.ms-cost.ms-rgp::before,
.ms-cost.ms-gwp::before,
.ms-cost.ms-gup::before {
.ms-cost.ms-p::before, .ms-cost.ms-wp::before, .ms-cost.ms-up::before, .ms-cost.ms-bp::before, .ms-cost.ms-rp::before, .ms-cost.ms-gp::before, .ms-cost.ms-wup::before, .ms-cost.ms-wbp::before, .ms-cost.ms-ubp::before, .ms-cost.ms-urp::before, .ms-cost.ms-brp::before, .ms-cost.ms-bgp::before, .ms-cost.ms-rwp::before, .ms-cost.ms-rgp::before, .ms-cost.ms-gwp::before, .ms-cost.ms-gup::before {
display: inline-block;
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
@ -1212,28 +1011,29 @@
.ms-cost.ms-shadow.ms-untap {
box-shadow: -0.06em 0.07em 0 #fff, 0 0.06em 0 #fff;
}
/**
* Split costs (separate handling) */
.ms-split {
position: relative;
width: 1.3em;
height: 1.3em;
}
.ms-split::before,
.ms-split::after {
font-size: 0.55em !important;
position: absolute;
}
.ms-split::before {
top: -0.38em;
left: 0.28em;
}
.ms-split::after {
top: 0.5em;
left: 1em;
}
/**
* Half costs */
span.ms-half {
width: 0.675em;
overflow: hidden;
@ -1243,6 +1043,7 @@ span.ms-half {
span.ms-half > .ms-cost {
margin-left: -0.675em;
}
.ms-half {
width: 0.675em;
margin-left: 0.675em;
@ -1252,59 +1053,37 @@ span.ms-half > .ms-cost {
.ms-half::before {
margin-left: -0.65em;
}
/**
* Un-set costs */
.ms-100 {
width: 2.4em;
}
.ms-1000000 {
width: 5.4em;
}
/**
* Planeswalker symbols */
.ms-loyalty-up,
.ms-loyalty-down,
.ms-loyalty-zero,
.ms-loyalty-start {
* planeswalker and other loyalty symbols */
.ms-loyalty-up, .ms-loyalty-down, .ms-loyalty-zero, .ms-loyalty-start {
color: #111;
font-size: 21px;
font-size: 1.5em;
position: relative;
text-align: center;
line-height: 0.9em;
}
.ms-loyalty-start {
font-size: 25px;
font-size: 2em;
}
.ms-loyalty-0::after,
.ms-loyalty-1::after,
.ms-loyalty-2::after,
.ms-loyalty-3::after,
.ms-loyalty-4::after,
.ms-loyalty-5::after,
.ms-loyalty-6::after,
.ms-loyalty-7::after,
.ms-loyalty-8::after,
.ms-loyalty-9::after,
.ms-loyalty-10::after,
.ms-loyalty-11::after,
.ms-loyalty-12::after,
.ms-loyalty-13::after,
.ms-loyalty-14::after,
.ms-loyalty-15::after,
.ms-loyalty-16::after,
.ms-loyalty-17::after,
.ms-loyalty-18::after,
.ms-loyalty-19::after,
.ms-loyalty-20::after,
.ms-loyalty-25::after,
.ms-loyalty-x::after {
.ms-loyalty-zero::after {
line-height: 2.1em !important;
}
.ms-loyalty-0::after, .ms-loyalty-1::after, .ms-loyalty-2::after, .ms-loyalty-3::after, .ms-loyalty-4::after, .ms-loyalty-5::after, .ms-loyalty-6::after, .ms-loyalty-7::after, .ms-loyalty-8::after, .ms-loyalty-9::after, .ms-loyalty-10::after, .ms-loyalty-11::after, .ms-loyalty-12::after, .ms-loyalty-13::after, .ms-loyalty-14::after, .ms-loyalty-15::after, .ms-loyalty-16::after, .ms-loyalty-17::after, .ms-loyalty-18::after, .ms-loyalty-19::after, .ms-loyalty-20::after, .ms-loyalty-25::after, .ms-loyalty-x::after {
color: #fff;
display: inline-block;
font-size: 0.5em;
font-family: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;
font-family: "MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif";
position: absolute;
left: 0;
line-height: 2em;
line-height: 2.25em;
width: 100%;
text-align: center;
}
@ -1342,7 +1121,7 @@ span.ms-half > .ms-cost {
content: "+10";
}
.ms-loyalty-up.ms-loyalty-11::after {
content: "+11";
content: "+10";
}
.ms-loyalty-up.ms-loyalty-12::after {
content: "+12";
@ -1444,7 +1223,7 @@ span.ms-half > .ms-cost {
content: "X";
}
.ms-loyalty-down::after {
line-height: 1.8em;
line-height: 2em;
}
.ms-loyalty-down.ms-loyalty-1::after {
content: "-1";
@ -1512,20 +1291,28 @@ span.ms-half > .ms-cost {
.ms-loyalty-down.ms-loyalty-x::after {
content: "-X";
}
/**
* Saga loyalty */
.ms-saga-1::after,
.ms-saga-2::after,
.ms-saga-3::after,
.ms-saga-4::after,
.ms-saga-5::after {
.ms-loyalty-outline::before {
color: transparent;
-webkit-text-stroke: 0.03em #111;
}
.ms-loyalty-outline::after {
color: #111;
}
.ms-loyalty-outline.ms-loyalty-start {
font-size: 1.6em;
}
.ms-saga {
color: #111;
}
.ms-saga-1::after, .ms-saga-2::after, .ms-saga-3::after, .ms-saga-4::after, .ms-saga-5::after {
color: #fff;
display: inline-block;
font-size: 0.6em;
font-family: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;
font-family: "MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif";
position: absolute;
left: 0;
line-height: 1.75em;
line-height: 2em;
width: 100%;
text-align: center;
}
@ -1544,15 +1331,14 @@ span.ms-half > .ms-cost {
.ms-saga-5::after {
content: "V";
}
/**
* Level card levels */
.ms-level > span {
font-size: 0.33em;
position: absolute;
left: 0;
top: 0;
color: #000;
font-family: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;
font-family: "MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif";
width: 76%;
text-align: center;
line-height: 3.8;
@ -1567,41 +1353,47 @@ span.ms-half > .ms-cost {
top: 0;
width: 100%;
}
.ms-dfc {
color: #111;
border: 0.05em solid #111;
border-radius: 2em;
padding: 0.025em;
}
/*
* Larger sizes */
.ms-2x {
font-size: 1.75em;
}
.ms-3x {
font-size: 2.25em;
}
.ms-4x {
font-size: 3em;
}
.ms-5x {
font-size: 3.75em;
}
.ms-6x {
font-size: 4.5em;
}
/*
* Fixed width */
.ms-fw {
width: 1em;
text-align: center;
}
.ms-duo {
color: #fff;
}
.ms-duo::after {
color: #000;
content: '';
content: "";
display: block;
font-size: 1em;
height: 100%;
@ -1672,6 +1464,7 @@ span.ms-half > .ms-cost {
.ms-duo-color.ms-school-witherbloom::after {
color: #4f9b4f;
}
.ms-ci {
border-radius: 100%;
box-shadow: inset 0 0 1px #fff;
@ -1712,104 +1505,89 @@ span.ms-half > .ms-cost {
.ms-ci-g {
background: #3d684b;
}
.ms-ci-wu {
.ms-ci-wu, .ms-ci-uw, .ms-ci-azorius {
background: conic-gradient(#fff 45deg, #3b6ba0 45deg 225deg, #fff 225deg);
}
.ms-ci-wb {
.ms-ci-wb, .ms-ci-bw, .ms-ci-orzhov {
background: conic-gradient(#fff 45deg, #383431 45deg 225deg, #fff 225deg);
}
.ms-ci-ub {
.ms-ci-ub, .ms-ci-bu, .ms-ci-dimir {
background: conic-gradient(#3b6ba0 45deg, #383431 45deg 225deg, #3b6ba0 225deg);
}
.ms-ci-ur {
.ms-ci-ur, .ms-ci-ru, .ms-ci-izzet {
background: conic-gradient(#3b6ba0 45deg, #c6553e 45deg 225deg, #3b6ba0 225deg);
}
.ms-ci-bg {
.ms-ci-bg, .ms-ci-gb, .ms-ci-golgari, .ms-ci-rock {
background: conic-gradient(#383431 45deg, #3d684b 45deg 225deg, #383431 225deg);
}
.ms-ci-br {
.ms-ci-br, .ms-ci-rb, .ms-ci-rakdos {
background: conic-gradient(#383431 45deg, #c6553e 45deg 225deg, #383431 225deg);
}
.ms-ci-rw {
.ms-ci-rw, .ms-ci-wr, .ms-ci-boros {
background: conic-gradient(#c6553e 45deg, #fff 45deg 225deg, #c6553e 225deg);
}
.ms-ci-rg {
.ms-ci-rg, .ms-ci-gr, .ms-ci-gruul {
background: conic-gradient(#c6553e 45deg, #3d684b 45deg 225deg, #c6553e 225deg);
}
.ms-ci-gu {
.ms-ci-gu, .ms-ci-ug, .ms-ci-simic {
background: conic-gradient(#3d684b 45deg, #3b6ba0 45deg 225deg, #3d684b 225deg);
}
.ms-ci-gw {
.ms-ci-gw, .ms-ci-wg, .ms-ci-selesnya {
background: conic-gradient(#3d684b 45deg, #fff 45deg 225deg, #3d684b 225deg);
}
.ms-ci-wug,
.ms-ci-bant {
.ms-ci-wug, .ms-ci-wgu, .ms-ci-ugw, .ms-ci-uwg, .ms-ci-gwu, .ms-ci-guw, .ms-ci-bant {
background: conic-gradient(#3b6ba0 60deg, #3d684b 60deg 180deg, #fff 180deg 300deg, #3b6ba0 300deg);
}
.ms-ci-ubw,
.ms-ci-esper {
.ms-ci-ubw, .ms-ci-uwb, .ms-ci-buw, .ms-ci-bwu, .ms-ci-wub, .ms-ci-wbu, .ms-ci-esper {
background: conic-gradient(#383431 60deg, #fff 60deg 180deg, #3b6ba0 180deg 300deg, #383431 300deg);
}
.ms-ci-bru,
.ms-ci-grixis {
.ms-ci-bru, .ms-ci-bur, .ms-ci-rbu, .ms-ci-rub, .ms-ci-ubr, .ms-ci-urb, .ms-ci-grixis {
background: conic-gradient(#c6553e 60deg, #3b6ba0 60deg 180deg, #383431 180deg 300deg, #c6553e 300deg);
}
.ms-ci-rgb,
.ms-ci-jund {
.ms-ci-rgb, .ms-ci-rbg, .ms-ci-grb, .ms-ci-gbr, .ms-ci-brg, .ms-ci-bgr, .ms-ci-jund {
background: conic-gradient(#3d684b 60deg, #383431 60deg 180deg, #c6553e 180deg 300deg, #3d684b 300deg);
}
.ms-ci-gwr,
.ms-ci-naya {
.ms-ci-gwr, .ms-ci-grw, .ms-ci-wgr, .ms-ci-wrg, .ms-ci-rgw, .ms-ci-rwg, .ms-ci-naya {
background: conic-gradient(#fff 60deg, #c6553e 60deg 180deg, #3d684b 180deg 300deg, #fff 300deg);
}
.ms-ci-wbg,
.ms-ci-abzan,
.ms-ci-junk {
.ms-ci-wbg, .ms-ci-wgb, .ms-ci-bwg, .ms-ci-bgw, .ms-ci-gwb, .ms-ci-gbw, .ms-ci-abzan, .ms-ci-junk, .ms-ci-necra {
background: conic-gradient(#383431 60deg, #3d684b 60deg 180deg, #fff 180deg 300deg, #383431 300deg);
}
.ms-ci-urw,
.ms-ci-jeskai {
.ms-ci-urw, .ms-ci-uwr, .ms-ci-ruw, .ms-ci-rwu, .ms-ci-wur, .ms-ci-wru, .ms-ci-jeskai, .ms-ci-raka {
background: conic-gradient(#c6553e 60deg, #fff 60deg 180deg, #3b6ba0 180deg 300deg, #c6553e 300deg);
}
.ms-ci-bgu,
.ms-ci-sultai,
.ms-ci-bug {
.ms-ci-bgu, .ms-ci-bug, .ms-ci-gbu, .ms-ci-gub, .ms-ci-ubg, .ms-ci-ugb, .ms-ci-sultai, .ms-ci-bug, .ms-ci-ana {
background: conic-gradient(#3d684b 60deg, #3b6ba0 60deg 180deg, #383431 180deg 300deg, #3d684b 300deg);
}
.ms-ci-rwb,
.ms-ci-mardu {
.ms-ci-rwb, .ms-ci-rbw, .ms-ci-wrb, .ms-ci-wbr, .ms-ci-brw, .ms-ci-bwr, .ms-ci-mardu, .ms-ci-dega {
background: conic-gradient(#fff 60deg, #383431 60deg 180deg, #c6553e 180deg 300deg, #fff 300deg);
}
.ms-ci-gur,
.ms-ci-temur,
.ms-ci-rug {
.ms-ci-gur, .ms-ci-gru, .ms-ci-ugr, .ms-ci-urg, .ms-ci-rgu, .ms-ci-rug, .ms-ci-temur, .ms-ci-ceta {
background: conic-gradient(#3b6ba0 60deg, #c6553e 60deg 180deg, #3d684b 180deg 300deg, #3b6ba0 300deg);
}
.ms-ci-ubrg,
.ms-ci-glint {
.ms-ci-ubrg, .ms-ci-ubgr, .ms-ci-ugbr, .ms-ci-ugrb, .ms-ci-urbg, .ms-ci-urgb, .ms-ci-bgru, .ms-ci-bgur, .ms-ci-brgu, .ms-ci-brug, .ms-ci-bugr, .ms-ci-burg, .ms-ci-gbru, .ms-ci-gbur, .ms-ci-grbu, .ms-ci-grub, .ms-ci-gubr, .ms-ci-gurb, .ms-ci-rbgu, .ms-ci-rbug, .ms-ci-rgbu, .ms-ci-rgub, .ms-ci-rubg, .ms-ci-rugb, .ms-ci-glint {
background: conic-gradient(#3b6ba0 45deg, #383431 45deg 135deg, #c6553e 135deg 225deg, #3d684b 225deg 315deg, #3b6ba0 315deg);
}
.ms-ci-brgw,
.ms-ci-dune {
.ms-ci-brgw, .ms-ci-bgrw, .ms-ci-bgwr, .ms-ci-brwg, .ms-ci-bwgr, .ms-ci-bwrg, .ms-ci-gbrw, .ms-ci-gbwr, .ms-ci-grbw, .ms-ci-grwb, .ms-ci-gwbr, .ms-ci-gwrb, .ms-ci-rbgw, .ms-ci-rbwg, .ms-ci-rgbw, .ms-ci-rgwb, .ms-ci-rwbg, .ms-ci-rwgb, .ms-ci-wbgr, .ms-ci-wbrg, .ms-ci-wgbr, .ms-ci-wgrb, .ms-ci-wrbg, .ms-ci-wrgb, .ms-ci-dune {
background: conic-gradient(#383431 45deg, #c6553e 45deg 135deg, #3d684b 135deg 225deg, #fff 225deg 315deg, #383431 315deg);
}
.ms-ci-rgwu,
.ms-ci-ink {
.ms-ci-rgwu, .ms-ci-gruw, .ms-ci-grwu, .ms-ci-gurw, .ms-ci-guwr, .ms-ci-gwru, .ms-ci-gwur, .ms-ci-rguw, .ms-ci-rugw, .ms-ci-ruwg, .ms-ci-rwgu, .ms-ci-rwug, .ms-ci-ugrw, .ms-ci-ugwr, .ms-ci-urgw, .ms-ci-urwg, .ms-ci-uwgr, .ms-ci-uwrg, .ms-ci-wgru, .ms-ci-wgur, .ms-ci-wrgu, .ms-ci-wrug, .ms-ci-wugr, .ms-ci-wurg, .ms-ci-ink {
background: conic-gradient(#c6553e 45deg, #3d684b 45deg 135deg, #fff 135deg 225deg, #3b6ba0 225deg 315deg, #c6553e 315deg);
}
.ms-ci-gwub,
.ms-ci-witch {
.ms-ci-gwub, .ms-ci-bguw, .ms-ci-bgwu, .ms-ci-bugw, .ms-ci-buwg, .ms-ci-bwgu, .ms-ci-bwug, .ms-ci-gbuw, .ms-ci-gbwu, .ms-ci-gubw, .ms-ci-guwb, .ms-ci-gwbu, .ms-ci-ubgw, .ms-ci-ubwg, .ms-ci-ugbw, .ms-ci-ugwb, .ms-ci-uwbg, .ms-ci-uwgb, .ms-ci-wbgu, .ms-ci-wbug, .ms-ci-wgbu, .ms-ci-wgub, .ms-ci-wubg, .ms-ci-wugb, .ms-ci-witch {
background: conic-gradient(#3d684b 45deg, #fff 45deg 135deg, #3b6ba0 135deg 225deg, #383431 225deg 315deg, #3d684b 315deg);
}
.ms-ci-wubr,
.ms-ci-yore {
.ms-ci-wubr, .ms-ci-bruw, .ms-ci-brwu, .ms-ci-burw, .ms-ci-buwr, .ms-ci-bwru, .ms-ci-bwur, .ms-ci-rbuw, .ms-ci-rbwu, .ms-ci-rubw, .ms-ci-ruwb, .ms-ci-rwbu, .ms-ci-rwub, .ms-ci-ubrw, .ms-ci-ubwr, .ms-ci-urbw, .ms-ci-urwb, .ms-ci-uwbr, .ms-ci-uwrb, .ms-ci-wbru, .ms-ci-wbur, .ms-ci-wrbu, .ms-ci-wrub, .ms-ci-wurb, .ms-ci-yore {
background: conic-gradient(#fff 45deg, #3b6ba0 45deg 135deg, #383431 135deg 225deg, #c6553e 225deg 315deg, #fff 315deg);
}
.ms-ci-5 {
.ms-ci-wubrg, .ms-ci-rugbw, .ms-ci-rugwb, .ms-ci-ruwbg, .ms-ci-ruwgb, .ms-ci-rwbgu, .ms-ci-rwbug, .ms-ci-rwgbu, .ms-ci-rwgub, .ms-ci-rwubg, .ms-ci-rwugb, .ms-ci-ubgrw, .ms-ci-ubgwr, .ms-ci-ubrgw, .ms-ci-ubrwg, .ms-ci-ubwgr, .ms-ci-ubwrg, .ms-ci-ugbrw, .ms-ci-ugbwr, .ms-ci-ugrbw, .ms-ci-ugrwb, .ms-ci-ugwbr, .ms-ci-ugwrb, .ms-ci-urbgw, .ms-ci-urbwg, .ms-ci-urgbw, .ms-ci-urgwb, .ms-ci-urwbg, .ms-ci-urwgb, .ms-ci-uwbgr, .ms-ci-uwbrg, .ms-ci-uwgbr, .ms-ci-uwgrb, .ms-ci-uwrbg, .ms-ci-uwrgb, .ms-ci-wbgru, .ms-ci-wbgur, .ms-ci-wbrgu, .ms-ci-wbrug, .ms-ci-wbugr, .ms-ci-wburg, .ms-ci-wgbru, .ms-ci-wgbur, .ms-ci-wgrbu, .ms-ci-wgrub, .ms-ci-wgubr, .ms-ci-wgurb, .ms-ci-wrbgu, .ms-ci-wrbug, .ms-ci-wrgbu, .ms-ci-wrgub, .ms-ci-wrubg, .ms-ci-wrugb, .ms-ci-wubgr, .ms-ci-wugbr, .ms-ci-wugrb, .ms-ci-wurbg, .ms-ci-wurgb, .ms-ci-bgruw, .ms-ci-bgrwu, .ms-ci-bgurw, .ms-ci-bguwr, .ms-ci-bgwru, .ms-ci-bgwur, .ms-ci-brguw, .ms-ci-brgwu, .ms-ci-brugw, .ms-ci-bruwg, .ms-ci-brwgu, .ms-ci-brwug, .ms-ci-bugrw, .ms-ci-bugwr, .ms-ci-burgw, .ms-ci-burwg, .ms-ci-buwgr, .ms-ci-buwrg, .ms-ci-bwgru, .ms-ci-bwgur, .ms-ci-bwrgu, .ms-ci-bwrug, .ms-ci-bwugr, .ms-ci-bwurg, .ms-ci-gbruw, .ms-ci-gbrwu, .ms-ci-gburw, .ms-ci-gbuwr, .ms-ci-gbwru, .ms-ci-gbwur, .ms-ci-grbuw, .ms-ci-grbwu, .ms-ci-grubw, .ms-ci-gruwb, .ms-ci-grwbu, .ms-ci-grwub, .ms-ci-gubrw, .ms-ci-gubwr, .ms-ci-gurbw, .ms-ci-gurwb, .ms-ci-guwbr, .ms-ci-guwrb, .ms-ci-gwbru, .ms-ci-gwbur, .ms-ci-gwrbu, .ms-ci-gwrub, .ms-ci-gwubr, .ms-ci-gwurb, .ms-ci-rbguw, .ms-ci-rbgwu, .ms-ci-rbugw, .ms-ci-rbuwg, .ms-ci-rbwgu, .ms-ci-rbwug, .ms-ci-rgbuw, .ms-ci-rgbwu, .ms-ci-rgubw, .ms-ci-rguwb, .ms-ci-rgwbu, .ms-ci-rgwub, .ms-ci-rubgw, .ms-ci-rubwg, .ms-ci-5 {
background: conic-gradient(#fff 36deg, #3b6ba0 36deg 108deg, #383431 108deg 180deg, #c6553e 180deg 252deg, #3d684b 252deg 324deg, #fff 324deg);
}
.ms-mechanic {
background: linear-gradient(0deg, #c8913b 0%, #ecc65a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*# sourceMappingURL=mana.css.map */

1
css/mana.css.map Normal file

File diff suppressed because one or more lines are too long

2
css/mana.min.css vendored

File diff suppressed because one or more lines are too long

1
css/mana.min.css.map Normal file

File diff suppressed because one or more lines are too long

View File

@ -247,7 +247,12 @@
<i class="ms ms-loyalty-down ms-loyalty-x ms-3x"></i>
<i class="ms ms-loyalty-zero ms-loyalty-0 ms-3x"></i>
<i class="ms ms-loyalty-start ms-loyalty-4 ms-4x"></i>
&nbsp;&nbsp;
<i class="ms ms-loyalty-up ms-loyalty-2 ms-loyalty-outline"></i>
<i class="ms ms-loyalty-down ms-loyalty-1 ms-loyalty-outline"></i>
<i class="ms ms-loyalty-zero ms-loyalty-0 ms-loyalty-outline"></i>
<i class="ms ms-loyalty-start ms-loyalty-5 ms-loyalty-outline"></i>
</p>
<p class="grid">
<i class="ms ms-saga ms-saga-1 ms-2x"></i>
<i class="ms ms-saga ms-saga-2 ms-2x"></i>
<i class="ms ms-saga ms-saga-3 ms-2x"></i>

View File

@ -27,70 +27,91 @@
&-g { background: @ms-green; }
// 2 color backgrounds
&-wu {
&-wu,
&-uw,
&-azorius {
background: conic-gradient(
@ms-white 45deg,
@ms-blue 45deg 225deg,
@ms-white 225deg
);
}
&-wb {
&-wb,
&-bw,
&-orzhov {
background: conic-gradient(
@ms-white 45deg,
@ms-black 45deg 225deg,
@ms-white 225deg
);
}
&-ub {
&-ub,
&-bu,
&-dimir {
background: conic-gradient(
@ms-blue 45deg,
@ms-black 45deg 225deg,
@ms-blue 225deg
);
}
&-ur {
&-ur,
&-ru,
&-izzet {
background: conic-gradient(
@ms-blue 45deg,
@ms-red 45deg 225deg,
@ms-blue 225deg
);
}
&-bg {
&-bg,
&-gb,
&-golgari,
&-rock {
background: conic-gradient(
@ms-black 45deg,
@ms-green 45deg 225deg,
@ms-black 225deg
);
}
&-br {
&-br,
&-rb,
&-rakdos {
background: conic-gradient(
@ms-black 45deg,
@ms-red 45deg 225deg,
@ms-black 225deg
);
}
&-rw {
&-rw,
&-wr,
&-boros {
background: conic-gradient(
@ms-red 45deg,
@ms-white 45deg 225deg,
@ms-red 225deg
);
}
&-rg {
&-rg,
&-gr,
&-gruul {
background: conic-gradient(
@ms-red 45deg,
@ms-green 45deg 225deg,
@ms-red 225deg
);
}
&-gu {
&-gu,
&-ug,
&-simic {
background: conic-gradient(
@ms-green 45deg,
@ms-blue 45deg 225deg,
@ms-green 225deg
);
}
&-gw {
&-gw,
&-wg,
&-selesnya {
background: conic-gradient(
@ms-green 45deg,
@ms-white 45deg 225deg,
@ -100,6 +121,11 @@
// 3-color backgrounds
&-wug,
&-wgu,
&-ugw,
&-uwg,
&-gwu,
&-guw,
&-bant {
background: conic-gradient(
@ms-blue 60deg,
@ -109,6 +135,11 @@
);
}
&-ubw,
&-uwb,
&-buw,
&-bwu,
&-wub,
&-wbu,
&-esper {
background: conic-gradient(
@ms-black 60deg,
@ -118,6 +149,11 @@
);
}
&-bru,
&-bur,
&-rbu,
&-rub,
&-ubr,
&-urb,
&-grixis {
background: conic-gradient(
@ms-red 60deg,
@ -127,6 +163,11 @@
);
}
&-rgb,
&-rbg,
&-grb,
&-gbr,
&-brg,
&-bgr,
&-jund {
background: conic-gradient(
@ms-green 60deg,
@ -136,6 +177,11 @@
);
}
&-gwr,
&-grw,
&-wgr,
&-wrg,
&-rgw,
&-rwg,
&-naya {
background: conic-gradient(
@ms-white 60deg,
@ -145,8 +191,14 @@
);
}
&-wbg,
&-wgb,
&-bwg,
&-bgw,
&-gwb,
&-gbw,
&-abzan,
&-junk {
&-junk,
&-necra {
background: conic-gradient(
@ms-black 60deg,
@ms-green 60deg 180deg,
@ -155,7 +207,13 @@
);
}
&-urw,
&-jeskai {
&-uwr,
&-ruw,
&-rwu,
&-wur,
&-wru,
&-jeskai,
&-raka {
background: conic-gradient(
@ms-red 60deg,
@ms-white 60deg 180deg,
@ -164,8 +222,14 @@
);
}
&-bgu,
&-bug,
&-gbu,
&-gub,
&-ubg,
&-ugb,
&-sultai,
&-bug {
&-bug,
&-ana {
background: conic-gradient(
@ms-green 60deg,
@ms-blue 60deg 180deg,
@ -174,7 +238,13 @@
);
}
&-rwb,
&-mardu {
&-rbw,
&-wrb,
&-wbr,
&-brw,
&-bwr,
&-mardu,
&-dega {
background: conic-gradient(
@ms-white 60deg,
@ms-black 60deg 180deg,
@ -183,8 +253,13 @@
);
}
&-gur,
&-gru,
&-ugr,
&-urg,
&-rgu,
&-rug,
&-temur,
&-rug {
&-ceta {
background: conic-gradient(
@ms-blue 60deg,
@ms-red 60deg 180deg,
@ -194,8 +269,32 @@
}
// 4 color backgrounds
// note: not using aliaes like sass because less is so feature limited
&-ubrg,
&-glint {
&-glint,
&-ubgr,
&-ugbr,
&-ugrb,
&-urbg,
&-urgb,
&-bgru,
&-bgur,
&-brgu,
&-brug,
&-bugr,
&-burg,
&-gbru,
&-gbur,
&-grbu,
&-grub,
&-gubr,
&-gurb,
&-rbgu,
&-rbug,
&-rgbu,
&-rgub,
&-rubg,
&-rugb {
background: conic-gradient(
@ms-blue 45deg,
@ms-black 45deg 135deg,
@ -205,7 +304,30 @@
);
}
&-brgw,
&-dune {
&-dune,
&-bgrw,
&-bgwr,
&-brwg,
&-bwgr,
&-bwrg,
&-gbrw,
&-gbwr,
&-grbw,
&-grwb,
&-gwbr,
&-gwrb,
&-rbgw,
&-rbwg,
&-rgbw,
&-rgwb,
&-rwbg,
&-rwgb,
&-wbgr,
&-wbrg,
&-wgbr,
&-wgrb,
&-wrbg,
&-wrgb {
background: conic-gradient(
@ms-black 45deg,
@ms-red 45deg 135deg,
@ -215,7 +337,30 @@
);
}
&-rgwu,
&-ink {
&-ink,
&-gruw,
&-grwu,
&-gurw,
&-guwr,
&-gwru,
&-gwur,
&-rguw,
&-rugw,
&-ruwg,
&-rwgu,
&-rwug,
&-ugrw,
&-ugwr,
&-urgw,
&-urwg,
&-uwgr,
&-uwrg,
&-wgru,
&-wgur,
&-wrgu,
&-wrug,
&-wugr,
&-wurg {
background: conic-gradient(
@ms-red 45deg,
@ms-green 45deg 135deg,
@ -225,7 +370,30 @@
);
}
&-gwub,
&-witch {
&-witch,
&-bguw,
&-bgwu,
&-bugw,
&-buwg,
&-bwgu,
&-bwug,
&-gbuw,
&-gbwu,
&-gubw,
&-guwb,
&-gwbu,
&-ubgw,
&-ubwg,
&-ugbw,
&-ugwb,
&-uwbg,
&-uwgb,
&-wbgu,
&-wbug,
&-wgbu,
&-wgub,
&-wubg,
&-wugb {
background: conic-gradient(
@ms-green 45deg,
@ms-white 45deg 135deg,
@ -235,7 +403,30 @@
);
}
&-wubr,
&-yore {
&-yore,
&-bruw,
&-brwu,
&-burw,
&-buwr,
&-bwru,
&-bwur,
&-rbuw,
&-rbwu,
&-rubw,
&-ruwb,
&-rwbu,
&-rwub,
&-ubrw,
&-ubwr,
&-urbw,
&-urwb,
&-uwbr,
&-uwrb,
&-wbru,
&-wbur,
&-wrbu,
&-wrub,
&-wurb {
background: conic-gradient(
@ms-white 45deg,
@ms-blue 45deg 135deg,
@ -246,7 +437,127 @@
}
// 5 color background
&-5 {
&-wubrg,
&-5,
&-bgruw,
&-bgrwu,
&-bgurw,
&-bguwr,
&-bgwru,
&-bgwur,
&-brguw,
&-brgwu,
&-brugw,
&-bruwg,
&-brwgu,
&-brwug,
&-bugrw,
&-bugwr,
&-burgw,
&-burwg,
&-buwgr,
&-buwrg,
&-bwgru,
&-bwgur,
&-bwrgu,
&-bwrug,
&-bwugr,
&-bwurg,
&-gbruw,
&-gbrwu,
&-gburw,
&-gbuwr,
&-gbwru,
&-gbwur,
&-grbuw,
&-grbwu,
&-grubw,
&-gruwb,
&-grwbu,
&-grwub,
&-gubrw,
&-gubwr,
&-gurbw,
&-gurwb,
&-guwbr,
&-guwrb,
&-gwbru,
&-gwbur,
&-gwrbu,
&-gwrub,
&-gwubr,
&-gwurb,
&-rbguw,
&-rbgwu,
&-rbugw,
&-rbuwg,
&-rbwgu,
&-rbwug,
&-rgbuw,
&-rgbwu,
&-rgubw,
&-rguwb,
&-rgwbu,
&-rgwub,
&-rubgw,
&-rubwg,
&-rugbw,
&-rugwb,
&-ruwbg,
&-ruwgb,
&-rwbgu,
&-rwbug,
&-rwgbu,
&-rwgub,
&-rwubg,
&-rwugb,
&-ubgrw,
&-ubgwr,
&-ubrgw,
&-ubrwg,
&-ubwgr,
&-ubwrg,
&-ugbrw,
&-ugbwr,
&-ugrbw,
&-ugrwb,
&-ugwbr,
&-ugwrb,
&-urbgw,
&-urbwg,
&-urgbw,
&-urgwb,
&-urwbg,
&-urwgb,
&-uwbgr,
&-uwbrg,
&-uwgbr,
&-uwgrb,
&-uwrbg,
&-uwrgb,
&-wbgru,
&-wbgur,
&-wbrgu,
&-wbrug,
&-wbugr,
&-wburg,
&-wgbru,
&-wgbur,
&-wgrbu,
&-wgrub,
&-wgubr,
&-wgurb,
&-wrbgu,
&-wrbug,
&-wrgbu,
&-wrgub,
&-wrubg,
&-wrugb,
&-wubgr,
&-wugbr,
&-wugrb,
&-wurbg,
&-wurgb {
background: conic-gradient(
@ms-white 36deg,
@ms-blue 36deg 108deg,

View File

@ -1,26 +1,28 @@
/**
* Planeswalker symbols */
* planeswalker and other loyalty symbols */
.@{ms-prefix}-loyalty {
// All
// all
&-up,
&-down,
&-zero,
&-start {
color: #111;
font-size: 21px;
font-size: 1.5em;
position: relative;
text-align: center;
line-height: 0.9em;
}
// Start
// variant alterations
&-start {
font-size: 25px; // increase the size a bit by default
font-size: 2.0em; // increase the size a bit by default
}
&-zero::after {
line-height: 2.1em !important; // slight correction
}
// Counters
// base styles for counters
&-0::after,
&-1::after,
&-2::after,
@ -50,11 +52,13 @@
font-family: @ms-serif-font;
position: absolute;
left: 0;
line-height: 2em;
line-height: 2.25em;
width: 100%;
text-align: center;
}
&-0::after { content: "0"; }
&-0::after {
content: "0";
}
&-up {
&.@{ms-prefix}-loyalty-1::after { content: "+1"; }
&.@{ms-prefix}-loyalty-2::after { content: "+2"; }
@ -104,7 +108,9 @@
&.@{ms-prefix}-loyalty-x::after { content: "X"; }
}
&-down {
&::after{ line-height: 1.8em; }
&::after{
line-height: 2.0em;
}
&.@{ms-prefix}-loyalty-1::after { content: "-1"; }
&.@{ms-prefix}-loyalty-2::after { content: "-2"; }
&.@{ms-prefix}-loyalty-3::after { content: "-3"; }
@ -129,14 +135,31 @@
&.@{ms-prefix}-loyalty-x::after { content: "-X"; }
}
// outline style for card text
&-outline {
&::before {
color: transparent;
-webkit-text-stroke: 0.03em #111;
}
&::after {
color: #111;
}
// correction for starting loyalty size
&.#{$ms-prefix}-loyalty-start {
font-size: 1.6em;
}
}
}
/**
* Saga loyalty */
// saga loyalty
.@{ms-prefix}-saga {
// Numbers
// all
color: #111;
// numbers
&-1::after,
&-2::after,
&-3::after,
@ -148,7 +171,7 @@
font-family: @ms-serif-font;
position: absolute;
left: 0;
line-height: 1.75em;
line-height: 2.0em;
width: 100%;
text-align: center;
}
@ -161,8 +184,7 @@
}
/**
* Level card levels */
// level card levels
.@{ms-prefix}-level {

View File

@ -20,7 +20,8 @@
"less": "lessc less/mana.less css/mana.css",
"lessmin": "lessc --clean-css less/mana.less css/mana.min.css",
"sass": "sass sass/mana.scss css/mana.css --style=expanded",
"sassmin": "sass sass/mana.scss css/mana.css --style compressed"
"sassmin": "sass sass/mana.scss css/mana.min.css --style compressed",
"build": "npm run -s sass && npm run -s sassmin"
},
"author": "Andrew Gioia <andrew@gioia.email>",
"license": "MIT",

260
sass/_aliases.scss Normal file
View File

@ -0,0 +1,260 @@
// color indicator convenience classes
.#{$ms-prefix}-ci {
// 4 color
&-ubgr,
&-ugbr,
&-ugrb,
&-urbg,
&-urgb,
&-bgru,
&-bgur,
&-brgu,
&-brug,
&-bugr,
&-burg,
&-gbru,
&-gbur,
&-grbu,
&-grub,
&-gubr,
&-gurb,
&-rbgu,
&-rbug,
&-rgbu,
&-rgub,
&-rubg,
&-rugb {
@extend .#{$ms-prefix}-ci-ubrg;
}
&-bgrw,
&-bgwr,
&-brwg,
&-bwgr,
&-bwrg,
&-gbrw,
&-gbwr,
&-grbw,
&-grwb,
&-gwbr,
&-gwrb,
&-rbgw,
&-rbwg,
&-rgbw,
&-rgwb,
&-rwbg,
&-rwgb,
&-wbgr,
&-wbrg,
&-wgbr,
&-wgrb,
&-wrbg,
&-wrgb {
@extend .#{$ms-prefix}-ci-brgw;
}
&-gruw,
&-grwu,
&-gurw,
&-guwr,
&-gwru,
&-gwur,
&-rguw,
&-rugw,
&-ruwg,
&-rwgu,
&-rwug,
&-ugrw,
&-ugwr,
&-urgw,
&-urwg,
&-uwgr,
&-uwrg,
&-wgru,
&-wgur,
&-wrgu,
&-wrug,
&-wugr,
&-wurg {
@extend .#{$ms-prefix}-ci-rgwu;
}
&-bguw,
&-bgwu,
&-bugw,
&-buwg,
&-bwgu,
&-bwug,
&-gbuw,
&-gbwu,
&-gubw,
&-guwb,
&-gwbu,
&-ubgw,
&-ubwg,
&-ugbw,
&-ugwb,
&-uwbg,
&-uwgb,
&-wbgu,
&-wbug,
&-wgbu,
&-wgub,
&-wubg,
&-wugb {
@extend .#{$ms-prefix}-ci-gwub;
}
&-bruw,
&-brwu,
&-burw,
&-buwr,
&-bwru,
&-bwur,
&-rbuw,
&-rbwu,
&-rubw,
&-ruwb,
&-rwbu,
&-rwub,
&-ubrw,
&-ubwr,
&-urbw,
&-urwb,
&-uwbr,
&-uwrb,
&-wbru,
&-wbur,
&-wrbu,
&-wrub,
&-wurb {
@extend .#{$ms-prefix}-ci-wubr;
}
// 5 color
&-bgruw,
&-bgrwu,
&-bgurw,
&-bguwr,
&-bgwru,
&-bgwur,
&-brguw,
&-brgwu,
&-brugw,
&-bruwg,
&-brwgu,
&-brwug,
&-bugrw,
&-bugwr,
&-burgw,
&-burwg,
&-buwgr,
&-buwrg,
&-bwgru,
&-bwgur,
&-bwrgu,
&-bwrug,
&-bwugr,
&-bwurg,
&-gbruw,
&-gbrwu,
&-gburw,
&-gbuwr,
&-gbwru,
&-gbwur,
&-grbuw,
&-grbwu,
&-grubw,
&-gruwb,
&-grwbu,
&-grwub,
&-gubrw,
&-gubwr,
&-gurbw,
&-gurwb,
&-guwbr,
&-guwrb,
&-gwbru,
&-gwbur,
&-gwrbu,
&-gwrub,
&-gwubr,
&-gwurb,
&-rbguw,
&-rbgwu,
&-rbugw,
&-rbuwg,
&-rbwgu,
&-rbwug,
&-rgbuw,
&-rgbwu,
&-rgubw,
&-rguwb,
&-rgwbu,
&-rgwub,
&-rubgw,
&-rubwg {
@extend .#{$ms-prefix}-ci-wubrg;
}
// breaking this up, editor was showing a warning with so many in a row
&-rugbw,
&-rugwb,
&-ruwbg,
&-ruwgb,
&-rwbgu,
&-rwbug,
&-rwgbu,
&-rwgub,
&-rwubg,
&-rwugb,
&-ubgrw,
&-ubgwr,
&-ubrgw,
&-ubrwg,
&-ubwgr,
&-ubwrg,
&-ugbrw,
&-ugbwr,
&-ugrbw,
&-ugrwb,
&-ugwbr,
&-ugwrb,
&-urbgw,
&-urbwg,
&-urgbw,
&-urgwb,
&-urwbg,
&-urwgb,
&-uwbgr,
&-uwbrg,
&-uwgbr,
&-uwgrb,
&-uwrbg,
&-uwrgb,
&-wbgru,
&-wbgur,
&-wbrgu,
&-wbrug,
&-wbugr,
&-wburg,
&-wgbru,
&-wgbur,
&-wgrbu,
&-wgrub,
&-wgubr,
&-wgurb,
&-wrbgu,
&-wrbug,
&-wrgbu,
&-wrgub,
&-wrubg,
&-wrugb,
&-wubgr,
&-wugbr,
&-wugrb,
&-wurbg,
&-wurgb {
@extend .#{$ms-prefix}-ci-wubrg;
}
}

View File

@ -27,70 +27,91 @@
&-g { background: $ms-green; }
// 2 color backgrounds
&-wu {
&-wu,
&-uw,
&-azorius {
background: conic-gradient(
$ms-white 45deg,
$ms-blue 45deg 225deg,
$ms-white 225deg
);
}
&-wb {
&-wb,
&-bw,
&-orzhov {
background: conic-gradient(
$ms-white 45deg,
$ms-black 45deg 225deg,
$ms-white 225deg
);
}
&-ub {
&-ub,
&-bu,
&-dimir {
background: conic-gradient(
$ms-blue 45deg,
$ms-black 45deg 225deg,
$ms-blue 225deg
);
}
&-ur {
&-ur,
&-ru,
&-izzet {
background: conic-gradient(
$ms-blue 45deg,
$ms-red 45deg 225deg,
$ms-blue 225deg
);
}
&-bg {
&-bg,
&-gb,
&-golgari,
&-rock {
background: conic-gradient(
$ms-black 45deg,
$ms-green 45deg 225deg,
$ms-black 225deg
);
}
&-br {
&-br,
&-rb,
&-rakdos {
background: conic-gradient(
$ms-black 45deg,
$ms-red 45deg 225deg,
$ms-black 225deg
);
}
&-rw {
&-rw,
&-wr,
&-boros {
background: conic-gradient(
$ms-red 45deg,
$ms-white 45deg 225deg,
$ms-red 225deg
);
}
&-rg {
&-rg,
&-gr,
&-gruul {
background: conic-gradient(
$ms-red 45deg,
$ms-green 45deg 225deg,
$ms-red 225deg
);
}
&-gu {
&-gu,
&-ug,
&-simic {
background: conic-gradient(
$ms-green 45deg,
$ms-blue 45deg 225deg,
$ms-green 225deg
);
}
&-gw {
&-gw,
&-wg,
&-selesnya {
background: conic-gradient(
$ms-green 45deg,
$ms-white 45deg 225deg,
@ -100,6 +121,11 @@
// 3-color backgrounds
&-wug,
&-wgu,
&-ugw,
&-uwg,
&-gwu,
&-guw,
&-bant {
background: conic-gradient(
$ms-blue 60deg,
@ -109,6 +135,11 @@
);
}
&-ubw,
&-uwb,
&-buw,
&-bwu,
&-wub,
&-wbu,
&-esper {
background: conic-gradient(
$ms-black 60deg,
@ -118,6 +149,11 @@
);
}
&-bru,
&-bur,
&-rbu,
&-rub,
&-ubr,
&-urb,
&-grixis {
background: conic-gradient(
$ms-red 60deg,
@ -127,6 +163,11 @@
);
}
&-rgb,
&-rbg,
&-grb,
&-gbr,
&-brg,
&-bgr,
&-jund {
background: conic-gradient(
$ms-green 60deg,
@ -136,6 +177,11 @@
);
}
&-gwr,
&-grw,
&-wgr,
&-wrg,
&-rgw,
&-rwg,
&-naya {
background: conic-gradient(
$ms-white 60deg,
@ -145,8 +191,14 @@
);
}
&-wbg,
&-wgb,
&-bwg,
&-bgw,
&-gwb,
&-gbw,
&-abzan,
&-junk {
&-junk,
&-necra {
background: conic-gradient(
$ms-black 60deg,
$ms-green 60deg 180deg,
@ -155,7 +207,13 @@
);
}
&-urw,
&-jeskai {
&-uwr,
&-ruw,
&-rwu,
&-wur,
&-wru,
&-jeskai,
&-raka {
background: conic-gradient(
$ms-red 60deg,
$ms-white 60deg 180deg,
@ -164,8 +222,14 @@
);
}
&-bgu,
&-bug,
&-gbu,
&-gub,
&-ubg,
&-ugb,
&-sultai,
&-bug {
&-bug,
&-ana {
background: conic-gradient(
$ms-green 60deg,
$ms-blue 60deg 180deg,
@ -174,7 +238,13 @@
);
}
&-rwb,
&-mardu {
&-rbw,
&-wrb,
&-wbr,
&-brw,
&-bwr,
&-mardu,
&-dega {
background: conic-gradient(
$ms-white 60deg,
$ms-black 60deg 180deg,
@ -183,8 +253,13 @@
);
}
&-gur,
&-gru,
&-ugr,
&-urg,
&-rgu,
&-rug,
&-temur,
&-rug {
&-ceta {
background: conic-gradient(
$ms-blue 60deg,
$ms-red 60deg 180deg,
@ -246,6 +321,7 @@
}
// 5 color background
&-wubrg,
&-5 {
background: conic-gradient(
$ms-white 36deg,

View File

@ -2,7 +2,7 @@
.#{$ms-prefix} {
display: inline-block;
font: normal normal normal $ms-font-size-base/1 Mana;
font: normal normal normal $ms-font-size-base Mana;
font-size: inherit;
line-height: 1em;
text-rendering: auto;

View File

@ -1,4 +1,5 @@
// planeswalker specifics
/**
* planeswalker and other loyalty symbols */
.#{$ms-prefix}-loyalty {
@ -13,10 +14,13 @@
text-align: center;
}
// start
// variant alterations
&-start {
font-size: 2.0em; // increase the size a bit by default
}
&-zero::after {
line-height: 2.1em !important; // slight correction
}
// base styles for counters
&-0::after,
@ -40,6 +44,7 @@
&-18::after,
&-19::after,
&-20::after,
&-25::after,
&-x::after {
color: #fff;
display: inline-block;
@ -47,10 +52,9 @@
font-family: $ms-serif-font;
position: absolute;
left: 0;
line-height: 1.75em;
line-height: 2.25em;
width: 100%;
text-align: center;
-webkit-padding-before: 0.15em; // fix for odd webkit line-height
}
&-0::after {
content: "0";
@ -77,6 +81,7 @@
&-18::after { content: "+18"; }
&-19::after { content: "+19"; }
&-20::after { content: "+20"; }
&-25::after { content: "+25"; }
&-x::after { content: "+X"; }
}
}
@ -102,11 +107,14 @@
&-18::after { content: "18"; }
&-19::after { content: "19"; }
&-20::after { content: "20"; }
&-25::after { content: "25"; }
&-x::after { content: "X"; }
}
}
&-down {
&::after { line-height: 1.6em; }
&::after {
line-height: 2em;
}
&.#{$ms-prefix}-loyalty {
&-1::after { content: "-1"; }
&-2::after { content: "-2"; }
@ -128,17 +136,35 @@
&-18::after { content: "-18"; }
&-19::after { content: "-19"; }
&-20::after { content: "-20"; }
&-25::after { content: "-25"; }
&-x::after { content: "-X"; }
}
}
// outline style for card text
&-outline {
&::before {
color: transparent;
-webkit-text-stroke: 0.03em #111;
}
&::after {
color: #111;
}
// correction for starting loyalty size
&.#{$ms-prefix}-loyalty-start {
font-size: 1.6em;
}
}
}
/**
* Saga loyalty */
// saga loyalty
.#{$ms-prefix}-saga {
// all
color: #111;
// Numbers
// numbers
&-1::after,
&-2::after,
&-3::after,
@ -150,7 +176,7 @@
font-family: $ms-serif-font;
position: absolute;
left: 0;
line-height: 1.75em;
line-height: 2.0em;
width: 100%;
text-align: center;
}
@ -163,8 +189,7 @@
}
/**
* Level card levels */
// level card levels
.#{$ms-prefix}-level {
@ -175,7 +200,7 @@
left: 0;
top: 0;
color: #000;
font-family: @ms-serif-font;
font-family: $ms-serif-font;
width: 76%;
text-align: center;
line-height: 3.8;

View File

@ -8,4 +8,5 @@
@import "sizes";
@import "duo";
@import "colors";
@import "extras";
@import "extras";
@import "aliases";