mana/less/cost.less

275 lines
17 KiB
Plaintext
Raw Normal View History

2015-03-23 14:16:34 +00:00
/**
* Mana cost styles */
.@{prefix}-cost {
/**
* Base styles */
background-color: #BEB9B2;
border-radius: 1em;
color: #111;
font-size: 0.95em;
width: 1.3em;
height: 1.3em;
line-height: 1.35em;
text-align: center;
/**
* Single symbols */
&.@{prefix}-w,
&.@{prefix}-pw {
background-color: #F0F2C0;
}
&.@{prefix}-u,
&.@{prefix}-pu {
background-color: #B5CDE3;
}
&.@{prefix}-b,
&.@{prefix}-pb {
background-color: #ACA29A;
}
&.@{prefix}-r,
&.@{prefix}-pr {
background-color: #DB8664;
}
&.@{prefix}-g,
&.@{prefix}-pg {
background-color: #93B483;
}
/**
* Split symbols */
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 */
}
&.@{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 and size increases */
&.@{prefix}-p:before,
&.@{prefix}-pw:before,
&.@{prefix}-pu:before,
&.@{prefix}-pb:before,
&.@{prefix}-pr:before,
&.@{prefix}-pg: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 */
&.@{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 */
&.@{prefix}-s:before {
color: #fff;
-webkit-text-stroke: 2px #fff;
font-size: 0.85em;
top: -0.05em;
position: relative;
display: inline-block;
}
&.@{prefix}-s: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;
}
/**
* Tap symbols */
&.@{prefix}-untap {
background-color: #111;
color: #fff;
}
/**
* Shadow */
&.@{prefix}-shadow {
box-shadow: -0.06em 0.07em 0 #111, 0 0.06em 0 #111;
&.@{prefix}-untap {
box-shadow: -0.06em 0.07em 0 #fff, 0 0.06em 0 #fff;
}
}
}
/**
* Split costs */
.@{prefix}-split {
position: relative;
width: 1.3em;
height: 1.3em;
}
.@{prefix}-split:before,
.@{prefix}-split:after {
font-size: 0.55em !important;
position: absolute;
}
.@{prefix}-split:before {
top: -0.38em;
left: 0.28em;
}
.@{prefix}-split:after {
top: 0.5em;
left: 1.0em;
}