// costs .#{$ms-prefix}-cost { background-color: $ms-base-colorless; border-radius: 1em; color: #111; font-size: 0.95em; width: 1.3em; height: 1.3em; line-height: 1.35em; text-align: center; // single costs &.#{$ms-prefix}-w, &.#{$ms-prefix}-wp { background-color: $ms-base-white; } &.#{$ms-prefix}-u, &.#{$ms-prefix}-up { background-color: $ms-base-blue; } &.#{$ms-prefix}-b, &.#{$ms-prefix}-bp { background-color: $ms-base-black; } &.#{$ms-prefix}-r, &.#{$ms-prefix}-rp { background-color: $ms-base-red; } &.#{$ms-prefix}-g, &.#{$ms-prefix}-gp { background-color: $ms-base-green; } // split costs &.#{$ms-prefix}-wu, &.#{$ms-prefix}-wb, &.#{$ms-prefix}-ub, &.#{$ms-prefix}-ur, &.#{$ms-prefix}-br, &.#{$ms-prefix}-bg, &.#{$ms-prefix}-rw, &.#{$ms-prefix}-rg, &.#{$ms-prefix}-gw, &.#{$ms-prefix}-gu, &.#{$ms-prefix}-2w, &.#{$ms-prefix}-2u, &.#{$ms-prefix}-2b, &.#{$ms-prefix}-2r, &.#{$ms-prefix}-2g { position: relative; width: 1.3em; height: 1.3em; &::before, &::after { font-size: 0.55em !important; position: absolute; } &::before { top: -0.38em; left: 0.28em; } &::after { top: 0.5em; left: 1.0em; } } &.#{$ms-prefix}-wu { background: #edf2b0; // Old browsers 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 } &.#{$ms-prefix}-wb { background: #edf2b0; // Old browsers background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%); // FF3.6+ 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 } &.#{$ms-prefix}-ub { background: #a6c1dd; // Old browsers background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%); // FF3.6+ 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 } &.#{$ms-prefix}-ur { background: #a6c1dd; // Old browsers background: -moz-linear-gradient(-45deg, #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%); // FF3.6+ 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 } &.#{$ms-prefix}-br { background: #aca29a; // Old browsers background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%); // FF3.6+ 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 } &.#{$ms-prefix}-bg { background: #aca29a; // Old browsers background: -moz-linear-gradient(-45deg, #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%); // FF3.6+ 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 } &.#{$ms-prefix}-rw { background: #db8664; // Old browsers background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+ 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 } &.#{$ms-prefix}-rg { background: #db8664; // Old browsers background: -moz-linear-gradient(-45deg, #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%); // FF3.6+ 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 } &.#{$ms-prefix}-gw { background: #93b483; // Old browsers background: -moz-linear-gradient(-45deg, #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+ 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 } &.#{$ms-prefix}-gu { background: #93b483; // Old browsers 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 } &.#{$ms-prefix}-2w { background: #beb9b2; // Old browsers background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+ 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 } &.#{$ms-prefix}-2u { background: #beb9b2; // Old browsers background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+ 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 } &.#{$ms-prefix}-2b { background: #beb9b2; // Old browsers background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%); // FF3.6+ 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 } &.#{$ms-prefix}-2r { background: #beb9b2; // Old browsers background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%); // FF3.6+ 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 } &.#{$ms-prefix}-2g { background: #beb9b2; // Old browsers background: -moz-linear-gradient(-45deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%); // FF3.6+ 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 &.#{$ms-prefix}-p::before, &.#{$ms-prefix}-wp::before, &.#{$ms-prefix}-up::before, &.#{$ms-prefix}-bp::before, &.#{$ms-prefix}-rp::before, &.#{$ms-prefix}-gp::before { display: inline-block; -moz-transform: scale( 1.2, 1.2 ); -webkit-transform: scale( 1.2, 1.2 ); transform: scale( 1.2, 1.2 ); } // alternate tap &.#{$ms-prefix}-tap-alt::before { display: inline-block; -moz-transform: scale( 1.2, 1.2 ); -webkit-transform: scale( 1.2, 1.2 ); transform: scale( 1.2, 1.2 ); padding-left: .06em; padding-bottom: 0.10em; } // snow mana &.#{$ms-prefix}-s { &::before { color: #fff; -webkit-text-stroke: 2px #fff; font-size: 0.85em; top: -0.05em; position: relative; display: inline-block; } &::after { //text-shadow: -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff; content: "\e619"; position: absolute; color: #333; margin-left: -0.9em; font-size: 1.1em; } &-mtga::before { color: #fff; } } // tap symbols &.#{$ms-prefix}-untap { background-color: #111; color: #fff; } // shadow alternative &.#{$ms-prefix}-shadow { box-shadow: -0.06em 0.07em 0 #111, 0 0.06em 0 #111; &.#{$ms-prefix}-untap { box-shadow: -0.06em 0.07em 0 #fff, 0 0.06em 0 #fff; } } } // split cost specifics .#{$ms-prefix}-split { position: relative; width: 1.3em; height: 1.3em; } .#{$ms-prefix}-split::before, .#{$ms-prefix}-split::after { font-size: 0.55em !important; position: absolute; } .#{$ms-prefix}-split::before { top: -0.38em; left: 0.28em; } .#{$ms-prefix}-split::after { top: 0.5em; left: 1.0em; } // half costs specifics span.#{$ms-prefix}-half { // legacy handling with tag width: .675em; overflow: hidden; display: inline-block; margin-left: .675em; > .#{$ms-prefix}-cost { margin-left: -.675em; } } .#{$ms-prefix}-half { // new single-element handling! width: .675em; margin-left: .675em; overflow: hidden; border-radius: 0 1em 1em 0; &::before { margin-left: -.65em; } } // un-set costs .#{$ms-prefix}-100 { width: 2.4em; } .#{$ms-prefix}-1000000 { width: 5.4em; }