andrew/mana
andrew/mana
1
0
Fork 0
mirror of https://github.com/andrewgioia/mana.git synced 2024-11-24 07:34:45 +00:00
Code Issues Projects Releases Wiki Activity

Adds support for split costs with colorless, refactors mana cost code to use CSS variables and reduce lines

Browse Source
This commit is contained in:
Andrew Gioia 2024-11-08 09:46:26 -05:00
parent d5ca70fad0
commit ecc7eb64e7
Signed by: andrew
GPG Key ID: FC09694A000800C8
13 changed files with 159 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
css/mana.css
View File

@ -24,6 +24,12 @@
vertical-align: middle; vertical-align: middle;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
--ms-mana-b: #a7999e;
--ms-mana-c: #d0c6bb;
--ms-mana-g: #9fcba6;
--ms-mana-r: #f19b79;
--ms-mana-u: #bcdaf7;
--ms-mana-w: #fdfbce;
} }
.ms-w::before { .ms-w::before {
@ -254,24 +260,27 @@
.ms-exile::before { .ms-exile::before {
content: "\e9cd"; 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, .ms-cw::after {
content: "\e600"; 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, .ms-cu::after {
content: "\e601"; 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, .ms-cb::after {
content: "\e602"; 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, .ms-cr::after {
content: "\e603"; 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, .ms-cg::after {
content: "\e604"; 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"; content: "\e607";
} }
.ms-cw::before, .ms-cu::before, .ms-cb::before, .ms-cr::before, .ms-cg::before {
content: "\e904";
}
.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"; content: "\e618";
} }
@ -1228,172 +1237,78 @@
.ms-cost.ms-g, .ms-cost.ms-gp { .ms-cost.ms-g, .ms-cost.ms-gp {
background-color: #93b483; 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-cw, .ms-cost.ms-cu, .ms-cost.ms-cb, .ms-cost.ms-cr, .ms-cost.ms-cg, .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-split-top: var(--ms-mana-c);
--ms-split-bottom: var(--ms-mana-u);
background: var(--ms-split-top);
background: -moz-linear-gradient(135deg, var(--ms-split-top) 0%, var(--ms-split-top) 50%, var(--ms-split-bottom) 50%, var(--ms-split-bottom) 100%);
background: -webkit-linear-gradient(135deg, var(--ms-split-top) 0%, var(--ms-split-top) 50%, var(--ms-split-bottom) 50%, var(--ms-split-bottom) 100%);
background: linear-gradient(135deg, var(--ms-split-top) 0%, var(--ms-split-top) 50%, var(--ms-split-bottom) 50%, var(--ms-split-bottom) 100%);
position: relative; position: relative;
width: 1.3em; width: 1.3em;
height: 1.3em; height: 1.3em;
} }
.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 { .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-cw::before, .ms-cost.ms-cw::after, .ms-cost.ms-cu::before, .ms-cost.ms-cu::after, .ms-cost.ms-cb::before, .ms-cost.ms-cb::after, .ms-cost.ms-cr::before, .ms-cost.ms-cr::after, .ms-cost.ms-cg::before, .ms-cost.ms-cg::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; font-size: 0.55em !important;
position: absolute; 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-cw::before, .ms-cost.ms-cu::before, .ms-cost.ms-cb::before, .ms-cost.ms-cr::before, .ms-cost.ms-cg::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; top: -0.38em;
left: 0.28em; 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-cw::after, .ms-cost.ms-cu::after, .ms-cost.ms-cb::after, .ms-cost.ms-cr::after, .ms-cost.ms-cg::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; top: 0.5em;
left: 1em; left: 1em;
} }
.ms-cost.ms-wu, .ms-cost.ms-wup { .ms-cost.ms-wu, .ms-cost.ms-wup {
background: #edf2b0; --ms-split-top: var(--ms-mana-w);
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));
background: -webkit-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%);
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 );
} }
.ms-cost.ms-wb, .ms-cost.ms-wbp { .ms-cost.ms-wb, .ms-cost.ms-wbp {
background: #edf2b0; --ms-split-top: var(--ms-mana-w);
background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%); --ms-split-bottom: var(--ms-mana-b);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #edf2b0), color-stop(50%, #edf2b0), color-stop(50%, #9c9188), color-stop(100%, #9c9188));
background: -webkit-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%);
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 );
} }
.ms-cost.ms-ub, .ms-cost.ms-ubp { .ms-cost.ms-ub, .ms-cost.ms-ubp {
background: #a6c1dd; --ms-split-top: var(--ms-mana-u);
background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%); --ms-split-bottom: var(--ms-mana-b);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #a6c1dd), color-stop(50%, #a6c1dd), color-stop(50%, #9c9188), color-stop(100%, #9c9188));
background: -webkit-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%);
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 );
} }
.ms-cost.ms-ur, .ms-cost.ms-urp { .ms-cost.ms-ur, .ms-cost.ms-urp {
background: #a6c1dd; --ms-split-top: var(--ms-mana-u);
background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%); --ms-split-bottom: var(--ms-mana-r);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #a6c1dd), color-stop(50%, #a6c1dd), color-stop(50%, #db8664), color-stop(100%, #db8664));
background: -webkit-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%);
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 );
} }
.ms-cost.ms-br, .ms-cost.ms-brp { .ms-cost.ms-br, .ms-cost.ms-brp {
background: #aca29a; --ms-split-top: var(--ms-mana-b);
background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%); --ms-split-bottom: var(--ms-mana-r);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #aca29a), color-stop(50%, #aca29a), color-stop(50%, #db8664), color-stop(100%, #db8664));
background: -webkit-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%);
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 );
} }
.ms-cost.ms-bg, .ms-cost.ms-bgp { .ms-cost.ms-bg, .ms-cost.ms-bgp {
background: #aca29a; --ms-split-top: var(--ms-mana-b);
background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%); --ms-split-bottom: var(--ms-mana-g);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #aca29a), color-stop(50%, #aca29a), color-stop(50%, #93b483), color-stop(100%, #93b483));
background: -webkit-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%);
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 );
} }
.ms-cost.ms-rw, .ms-cost.ms-rwp { .ms-cost.ms-rw, .ms-cost.ms-rwp {
background: #db8664; --ms-split-top: var(--ms-mana-r);
background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%); --ms-split-bottom: var(--ms-mana-w);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #db8664), color-stop(50%, #db8664), color-stop(50%, #edf2b0), color-stop(100%, #edf2b0));
background: -webkit-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%);
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 );
} }
.ms-cost.ms-rg, .ms-cost.ms-rgp { .ms-cost.ms-rg, .ms-cost.ms-rgp {
background: #db8664; --ms-split-top: var(--ms-mana-r);
background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%); --ms-split-bottom: var(--ms-mana-g);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #db8664), color-stop(50%, #db8664), color-stop(50%, #93b483), color-stop(100%, #93b483));
background: -webkit-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%);
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 );
} }
.ms-cost.ms-gw, .ms-cost.ms-gwp { .ms-cost.ms-gw, .ms-cost.ms-gwp {
background: #93b483; --ms-split-top: var(--ms-mana-g);
background: -moz-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%); --ms-split-bottom: var(--ms-mana-w);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #93b483), color-stop(50%, #93b483), color-stop(50%, #edf2b0), color-stop(100%, #edf2b0));
background: -webkit-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%);
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 );
} }
.ms-cost.ms-gu, .ms-cost.ms-gup { .ms-cost.ms-gu, .ms-cost.ms-gup {
background: #93b483; --ms-split-top: var(--ms-mana-g);
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));
background: -webkit-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%);
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 );
} }
.ms-cost.ms-2w { .ms-cost.ms-2w, .ms-cost.ms-cw {
background: #beb9b2; --ms-split-bottom: var(--ms-mana-w);
background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #beb9b2), color-stop(50%, #beb9b2), color-stop(50%, #edf2b0), color-stop(100%, #edf2b0));
background: -webkit-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%);
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 );
} }
.ms-cost.ms-2u { .ms-cost.ms-2b, .ms-cost.ms-cb {
background: #beb9b2; --ms-split-bottom: var(--ms-mana-b);
background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #beb9b2), color-stop(50%, #beb9b2), color-stop(50%, #b5cde3), color-stop(100%, #b5cde3));
background: -webkit-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%);
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 );
} }
.ms-cost.ms-2b { .ms-cost.ms-2r, .ms-cost.ms-cr {
background: #beb9b2; --ms-split-bottom: var(--ms-mana-r);
background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #beb9b2), color-stop(50%, #beb9b2), color-stop(50%, #9c9188), color-stop(100%, #9c9188));
background: -webkit-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%);
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 );
} }
.ms-cost.ms-2r { .ms-cost.ms-2g, .ms-cost.ms-cg {
background: #beb9b2; --ms-split-bottom: var(--ms-mana-g);
background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #beb9b2), color-stop(50%, #beb9b2), color-stop(50%, #db8664), color-stop(100%, #db8664));
background: -webkit-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%);
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 );
}
.ms-cost.ms-2g {
background: #beb9b2;
background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #beb9b2), color-stop(50%, #beb9b2), color-stop(50%, #93b483), color-stop(100%, #93b483));
background: -webkit-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%);
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 );
} }
.ms-cost.ms-p::before { .ms-cost.ms-p::before {
display: inline-block; display: inline-block;
@ -1401,17 +1316,13 @@
-webkit-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2); transform: scale(1.2, 1.2);
} }
.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-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-cw::before, .ms-cost.ms-cu::before, .ms-cost.ms-cb::before, .ms-cost.ms-cr::before, .ms-cost.ms-cg::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-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 {
display: inline-block; display: inline-block;
-moz-transform: scale(1.2, 1.2); transform: scale(1.2) translateX(0.01rem) translateY(-0.03rem);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
} }
.ms-cost.ms-tap-alt::before { .ms-cost.ms-tap-alt::before {
display: inline-block; display: inline-block;
-moz-transform: scale(1.2, 1.2); transform: scale(1.2);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
padding-left: 0.06em; padding-left: 0.06em;
padding-bottom: 0.1em; padding-bottom: 0.1em;
} }

2
css/mana.css.map
View File

File diff suppressed because one or more lines are too long

2
css/mana.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/mana.min.css.map
View File

File diff suppressed because one or more lines are too long

2
docs/assets/mana.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/mana.min.css.map
View File

File diff suppressed because one or more lines are too long

6
docs/attributes.html
View File

@ -81,6 +81,12 @@
<span class="each"> <span class="each">
<i class="ms ms-wu ms-split ms-cost"></i> .ms-wu <i class="ms ms-wu ms-split ms-cost"></i> .ms-wu
</span> </span>
<span class="each">
<i class="ms ms-bgp ms-split ms-cost"></i> .ms-bgp
</span>
<span class="each">
<i class="ms ms-cr ms-split ms-cost"></i> .ms-cr
</span>
<span class="each"> <span class="each">
<i class="ms ms-2b ms-split ms-cost ms-shadow"></i> + .ms-shadow <i class="ms ms-2b ms-split ms-cost ms-shadow"></i> + .ms-shadow
</span> </span>

2
docs/index.html
View File

@ -44,7 +44,7 @@
</a> </a>
</div> </div>
<p> <p>
Current version 1.15.9 includes all known mana and card symbols up to Wilds of Eldraine. Current version 1.17.1 includes all known mana and card symbols up to Foundations!
</p> </p>
</div> </div>
</header> </header>

6
index.html
View File

@ -152,11 +152,17 @@
<i class="ms ms-rg ms-cost ms-shadow"></i> <i class="ms ms-rg ms-cost ms-shadow"></i>
<i class="ms ms-gw ms-cost ms-shadow"></i> <i class="ms ms-gw ms-cost ms-shadow"></i>
<i class="ms ms-gu ms-cost ms-shadow"></i> <i class="ms ms-gu ms-cost ms-shadow"></i>
<br />
<i class="ms ms-2w ms-cost ms-shadow"></i> <i class="ms ms-2w ms-cost ms-shadow"></i>
<i class="ms ms-2u ms-cost ms-shadow"></i> <i class="ms ms-2u ms-cost ms-shadow"></i>
<i class="ms ms-2b ms-cost ms-shadow"></i> <i class="ms ms-2b ms-cost ms-shadow"></i>
<i class="ms ms-2r ms-cost ms-shadow"></i> <i class="ms ms-2r ms-cost ms-shadow"></i>
<i class="ms ms-2g ms-cost ms-shadow"></i> <i class="ms ms-2g ms-cost ms-shadow"></i>
<i class="ms ms-cw ms-cost ms-shadow"></i>
<i class="ms ms-cu ms-cost ms-shadow"></i>
<i class="ms ms-cb ms-cost ms-shadow"></i>
<i class="ms ms-cr ms-cost ms-shadow"></i>
<i class="ms ms-cg ms-cost ms-shadow"></i>
<br /> <br />
<i class="ms ms-wup ms-cost ms-shadow"></i> <i class="ms ms-wup ms-cost ms-shadow"></i>
<i class="ms ms-wbp ms-cost ms-shadow"></i> <i class="ms ms-wbp ms-cost ms-shadow"></i>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "mana-font", "name": "mana-font",
"version": "1.17.0", "version": "1.17.1",
"description": "Magic: the Gathering mana symbol pictographic font", "description": "Magic: the Gathering mana symbol pictographic font",
"main": "css/mana.css", "main": "css/mana.css",
"repository": { "repository": {

8
sass/_core.scss
View File

@ -1,7 +1,6 @@
@use "variables"; @use "variables";
// base // base
.#{variables.$ms-prefix} { .#{variables.$ms-prefix} {
display: inline-block; display: inline-block;
font: normal normal normal variables.$ms-font-size-base Mana; font: normal normal normal variables.$ms-font-size-base Mana;
@ -15,4 +14,11 @@
// Better font rendering // Better font rendering
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
--ms-mana-b: #a7999e;
--ms-mana-c: #d0c6bb;
--ms-mana-g: #9fcba6; //#9ba;
--ms-mana-r: #f19b79;
--ms-mana-u: #bcdaf7;
--ms-mana-w: #fdfbce;
} }

198
sass/_cost.scss
View File

@ -51,6 +51,11 @@
&.#{variables.$ms-prefix}-2b, &.#{variables.$ms-prefix}-2b,
&.#{variables.$ms-prefix}-2r, &.#{variables.$ms-prefix}-2r,
&.#{variables.$ms-prefix}-2g, &.#{variables.$ms-prefix}-2g,
&.#{variables.$ms-prefix}-cw,
&.#{variables.$ms-prefix}-cu,
&.#{variables.$ms-prefix}-cb,
&.#{variables.$ms-prefix}-cr,
&.#{variables.$ms-prefix}-cg,
&.#{variables.$ms-prefix}-wup, &.#{variables.$ms-prefix}-wup,
&.#{variables.$ms-prefix}-wbp, &.#{variables.$ms-prefix}-wbp,
&.#{variables.$ms-prefix}-ubp, &.#{variables.$ms-prefix}-ubp,
@ -61,6 +66,12 @@
&.#{variables.$ms-prefix}-rgp, &.#{variables.$ms-prefix}-rgp,
&.#{variables.$ms-prefix}-gwp, &.#{variables.$ms-prefix}-gwp,
&.#{variables.$ms-prefix}-gup { &.#{variables.$ms-prefix}-gup {
--ms-split-top: var(--ms-mana-c);
--ms-split-bottom: var(--ms-mana-u);
background: var(--ms-split-top); // fallback
background: -moz-linear-gradient(135deg, var(--ms-split-top) 0%, var(--ms-split-top) 50%, var(--ms-split-bottom) 50%, var(--ms-split-bottom) 100%);
background: -webkit-linear-gradient(135deg, var(--ms-split-top) 0%, var(--ms-split-top) 50%, var(--ms-split-bottom) 50%, var(--ms-split-bottom) 100%);
background: linear-gradient(135deg, var(--ms-split-top) 0%, var(--ms-split-top) 50%, var(--ms-split-bottom) 50%, var(--ms-split-bottom) 100%);
position: relative; position: relative;
width: 1.3em; width: 1.3em;
height: 1.3em; height: 1.3em;
@ -80,166 +91,76 @@
} }
&.#{variables.$ms-prefix}-wu, &.#{variables.$ms-prefix}-wu,
&.#{variables.$ms-prefix}-wup { &.#{variables.$ms-prefix}-wup {
background: #edf2b0; // Old browsers --ms-split-top: var(--ms-mana-w);
background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%); // FF3.6+
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#edf2b0), color-stop(50%,#edf2b0), color-stop(50%,#a6c1dd), color-stop(100%,#a6c1dd)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // IE10+
background: linear-gradient(135deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf2b0', endColorstr='#a6c1dd',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-wb, &.#{variables.$ms-prefix}-wb,
&.#{variables.$ms-prefix}-wbp { &.#{variables.$ms-prefix}-wbp {
background: #edf2b0; // Old browsers --ms-split-top: var(--ms-mana-w);
background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-b);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#edf2b0), color-stop(50%,#edf2b0), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // IE10+
background: linear-gradient(135deg, #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf2b0', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-ub, &.#{variables.$ms-prefix}-ub,
&.#{variables.$ms-prefix}-ubp { &.#{variables.$ms-prefix}-ubp {
background: #a6c1dd; // Old browsers --ms-split-top: var(--ms-mana-u);
background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-b);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a6c1dd), color-stop(50%,#a6c1dd), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // IE10+
background: linear-gradient(135deg, #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c1dd', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-ur, &.#{variables.$ms-prefix}-ur,
&.#{variables.$ms-prefix}-urp { &.#{variables.$ms-prefix}-urp {
background: #a6c1dd; // Old browsers --ms-split-top: var(--ms-mana-u);
background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-r);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a6c1dd), color-stop(50%,#a6c1dd), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // IE10+
background: linear-gradient(135deg, #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c1dd', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-br, &.#{variables.$ms-prefix}-br,
&.#{variables.$ms-prefix}-brp { &.#{variables.$ms-prefix}-brp {
background: #aca29a; // Old browsers --ms-split-top: var(--ms-mana-b);
background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-r);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aca29a), color-stop(50%,#aca29a), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // IE10+
background: linear-gradient(135deg, #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aca29a', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-bg, &.#{variables.$ms-prefix}-bg,
&.#{variables.$ms-prefix}-bgp { &.#{variables.$ms-prefix}-bgp {
background: #aca29a; // Old browsers --ms-split-top: var(--ms-mana-b);
background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-g);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aca29a), color-stop(50%,#aca29a), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // IE10+
background: linear-gradient(135deg, #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aca29a', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-rw, &.#{variables.$ms-prefix}-rw,
&.#{variables.$ms-prefix}-rwp { &.#{variables.$ms-prefix}-rwp {
background: #db8664; // Old browsers --ms-split-top: var(--ms-mana-r);
background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-w);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#db8664), color-stop(50%,#db8664), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // IE10+
background: linear-gradient(135deg, #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8664', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-rg, &.#{variables.$ms-prefix}-rg,
&.#{variables.$ms-prefix}-rgp { &.#{variables.$ms-prefix}-rgp {
background: #db8664; // Old browsers --ms-split-top: var(--ms-mana-r);
background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-g);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#db8664), color-stop(50%,#db8664), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // IE10+
background: linear-gradient(135deg, #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8664', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-gw, &.#{variables.$ms-prefix}-gw,
&.#{variables.$ms-prefix}-gwp { &.#{variables.$ms-prefix}-gwp {
background: #93b483; // Old browsers --ms-split-top: var(--ms-mana-g);
background: -moz-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-w);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // IE10+
background: linear-gradient(135deg, #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b483', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-gu, &.#{variables.$ms-prefix}-gu,
&.#{variables.$ms-prefix}-gup { &.#{variables.$ms-prefix}-gup {
background: #93b483; // Old browsers --ms-split-top: var(--ms-mana-g);
background: -moz-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#b5cde3), color-stop(100%,#b5cde3)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // IE10+
background: linear-gradient(135deg, #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b483', endColorstr='#b5cde3',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-2w { &.#{variables.$ms-prefix}-2w,
background: #beb9b2; // Old browsers &.#{variables.$ms-prefix}-cw {
background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-w);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // IE10+
background: linear-gradient(135deg, #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-2u { &.#{variables.$ms-prefix}-2u,
background: #beb9b2; // Old browsers &.#{variables.$ms-prefix}-cu {
background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+ // defaults
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#b5cde3), color-stop(100%,#b5cde3)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // IE10+
background: linear-gradient(135deg, #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#b5cde3',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-2b { &.#{variables.$ms-prefix}-2b,
background: #beb9b2; // Old browsers &.#{variables.$ms-prefix}-cb {
background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-b);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // IE10+
background: linear-gradient(135deg, #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-2r { &.#{variables.$ms-prefix}-2r,
background: #beb9b2; // Old browsers &.#{variables.$ms-prefix}-cr {
background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-r);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // IE10+
background: linear-gradient(135deg, #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
&.#{variables.$ms-prefix}-2g { &.#{variables.$ms-prefix}-2g,
background: #beb9b2; // Old browsers &.#{variables.$ms-prefix}-cg {
background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%); // FF3.6+ --ms-split-bottom: var(--ms-mana-g);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
background: -webkit-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+
background: -o-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // Opera 11.10+
background: -ms-linear-gradient(-45deg, #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // IE10+
background: linear-gradient(135deg, #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
} }
// phyrexian mana size increases // new tan: #d0c6bb
// phyrexian and other split mana size increases
@if variables.$ms-phyrexian-h { @if variables.$ms-phyrexian-h {
&.#{variables.$ms-prefix}-h::before { &.#{variables.$ms-prefix}-h::before {
display: inline-block; display: inline-block;
@ -260,6 +181,11 @@
&.#{variables.$ms-prefix}-bp::before, &.#{variables.$ms-prefix}-bp::before,
&.#{variables.$ms-prefix}-rp::before, &.#{variables.$ms-prefix}-rp::before,
&.#{variables.$ms-prefix}-gp::before, &.#{variables.$ms-prefix}-gp::before,
&.#{variables.$ms-prefix}-cw::before,
&.#{variables.$ms-prefix}-cu::before,
&.#{variables.$ms-prefix}-cb::before,
&.#{variables.$ms-prefix}-cr::before,
&.#{variables.$ms-prefix}-cg::before,
&.#{variables.$ms-prefix}-wup::before, &.#{variables.$ms-prefix}-wup::before,
&.#{variables.$ms-prefix}-wbp::before, &.#{variables.$ms-prefix}-wbp::before,
&.#{variables.$ms-prefix}-ubp::before, &.#{variables.$ms-prefix}-ubp::before,
@ -269,19 +195,25 @@
&.#{variables.$ms-prefix}-rwp::before, &.#{variables.$ms-prefix}-rwp::before,
&.#{variables.$ms-prefix}-rgp::before, &.#{variables.$ms-prefix}-rgp::before,
&.#{variables.$ms-prefix}-gwp::before, &.#{variables.$ms-prefix}-gwp::before,
&.#{variables.$ms-prefix}-gup::before { &.#{variables.$ms-prefix}-gup::before,
&.#{variables.$ms-prefix}-wup::after,
&.#{variables.$ms-prefix}-wbp::after,
&.#{variables.$ms-prefix}-ubp::after,
&.#{variables.$ms-prefix}-urp::after,
&.#{variables.$ms-prefix}-brp::after,
&.#{variables.$ms-prefix}-bgp::after,
&.#{variables.$ms-prefix}-rwp::after,
&.#{variables.$ms-prefix}-rgp::after,
&.#{variables.$ms-prefix}-gwp::after,
&.#{variables.$ms-prefix}-gup::after {
display: inline-block; display: inline-block;
-moz-transform: scale( 1.2, 1.2 ); transform: scale(1.2) translateX(0.01rem) translateY(-0.03rem);
-webkit-transform: scale( 1.2, 1.2 );
transform: scale( 1.2, 1.2 );
} }
// alternate tap // alternate tap
&.#{variables.$ms-prefix}-tap-alt::before { &.#{variables.$ms-prefix}-tap-alt::before {
display: inline-block; display: inline-block;
-moz-transform: scale( 1.2, 1.2 ); transform: scale(1.2);
-webkit-transform: scale( 1.2, 1.2 );
transform: scale( 1.2, 1.2 );
padding-left: .06em; padding-left: .06em;
padding-bottom: 0.10em; padding-bottom: 0.10em;
} }

20
sass/_icons.scss
View File

@ -109,32 +109,42 @@
&-wb::before, &-wb::before,
&-rw::after, &-rw::after,
&-gw::after, &-gw::after,
&-2w::after { content: "\e600"; } // white &-2w::after,
&-cw::after { content: "\e600"; } // white
&-ub::before, &-ub::before,
&-ur::before, &-ur::before,
&-wu::after, &-wu::after,
&-gu::after, &-gu::after,
&-2u::after { content: "\e601"; } // blue &-2u::after,
&-cu::after { content: "\e601"; } // blue
&-br::before, &-br::before,
&-bg::before, &-bg::before,
&-wb::after, &-wb::after,
&-ub::after, &-ub::after,
&-2b::after { content: "\e602"; } // black &-2b::after,
&-cb::after { content: "\e602"; } // black
&-rw::before, &-rw::before,
&-rg::before, &-rg::before,
&-ur::after, &-ur::after,
&-br::after, &-br::after,
&-2r::after { content: "\e603"; } // red &-2r::after,
&-cr::after { content: "\e603"; } // red
&-gw::before, &-gw::before,
&-gu::before, &-gu::before,
&-bg::after, &-bg::after,
&-rg::after, &-rg::after,
&-2g::after { content: "\e604"; } // green &-2g::after,
&-cg::after { content: "\e604"; } // green
&-2w::before, &-2w::before,
&-2u::before, &-2u::before,
&-2b::before, &-2b::before,
&-2r::before, &-2r::before,
&-2g::before { content: "\e607"; } // 2 &-2g::before { content: "\e607"; } // 2
&-cw::before,
&-cu::before,
&-cb::before,
&-cr::before,
&-cg::before { content: "\e904"; } // c
// phyrexian splits // phyrexian splits
&-wp::before, &-wp::before,