commit d6868c91cfbf1b77e4c000354d005f9be06e5f48 Author: Andrew Gioia Date: Mon Mar 23 10:16:34 2015 -0400 Initial v0.1 commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..47bd540 --- /dev/null +++ b/README.md @@ -0,0 +1,33 @@ +# Mana v0.1 + +## The Magic: the Gathering mana symbol font! + +Mana is a complete set of Magic: the Gathering mana, tap, and card type symbols as a pictographic font. You can use this font anywhere you want to display mana and tap symbols—in your MtG app or website, documents, card images, anything! + +## Usage + +Each mana symbol has its own font character. Display them in a manner similar to [Keyrune](http://andrewgioia.github.io/Keyrune) using the `` element and class syntax. Class name codes are based on textual mana symbol codes (like g for Green or 3 for, well, {3}). + +To use Mana, move the web font files to your `/fonts` directory and include the mana.css stylesheet in your ``: + +```html + +``` + +## Editing the Source + +Feel free to edit the source files and compile Mana to fit your needs. Currently LESS is supported, with Sass coming soon. + +## License + +All mana, tap, and card type symbol images are copyright Wizards of the Coast ([http://magicthegathering.com](http://magicthegathering.com)) + +The Mana font is licensed under the the SIL OFL 1.1 ([http://scripts.sil.org/OFL](http://scripts.sil.org/OFL)) + +Mana CSS, LESS, and Sass files are licensed under the MIT License ([http://opensource.org/licenses/mit-license.html](http://opensource.org/licenses/mit-license.html)) + +Attribution is **greatly appreciated** but not required! + +## Changelog + +* v0.1 - initial font creation and CSS/LESS files added diff --git a/css/mana.css b/css/mana.css new file mode 100644 index 0000000..54758a4 --- /dev/null +++ b/css/mana.css @@ -0,0 +1,588 @@ +/** + * Global */ +@font-face { + font-family: 'Mana'; + src: url('../fonts/mana.eot?v=0.1'); + src: url('../fonts/mana.eot?#iefix&v=0.1') format('embedded-opentype'), url('../fonts/mana.woff?v=0.1') format('woff'), url('../fonts/mana.ttf?v=0.1') format('truetype'), url('../fonts/mana.svg?v=0.1#mana') format('svg'); + font-weight: normal; + font-style: normal; +} +.ms { + display: inline-block; + font: normal normal normal 14px/1 Mana; + font-size: inherit; + line-height: 1em; + text-rendering: auto; + transform: translate(0, 0); + speak: none; + text-transform: none; + vertical-align: middle; + /* Better font rendering */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +/** + * Mana cost styles */ +.ms-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 */ + /** + * Split symbols */ + /** + * Phyrexian mana and size increases */ + /** + * Alternate tap */ + /** + * Snow mana */ + /** + * Tap symbols */ + /** + * Shadow */ +} +.ms-cost.ms-w, +.ms-cost.ms-pw { + background-color: #F0F2C0; +} +.ms-cost.ms-u, +.ms-cost.ms-pu { + background-color: #B5CDE3; +} +.ms-cost.ms-b, +.ms-cost.ms-pb { + background-color: #ACA29A; +} +.ms-cost.ms-r, +.ms-cost.ms-pr { + background-color: #DB8664; +} +.ms-cost.ms-g, +.ms-cost.ms-pg { + background-color: #93B483; +} +.ms-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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-cost.ms-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 */ +} +.ms-cost.ms-p:before, +.ms-cost.ms-pw:before, +.ms-cost.ms-pu:before, +.ms-cost.ms-pb:before, +.ms-cost.ms-pr:before, +.ms-cost.ms-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); +} +.ms-cost.ms-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; +} +.ms-cost.ms-s:before { + color: #fff; + -webkit-text-stroke: 2px #fff; + font-size: 0.85em; + top: -0.05em; + position: relative; + display: inline-block; +} +.ms-cost.ms-s:after { + content: "\e619"; + position: absolute; + color: #333; + margin-left: -0.9em; + font-size: 1.1em; +} +.ms-cost.ms-untap { + background-color: #111; + color: #fff; +} +.ms-cost.ms-shadow { + box-shadow: -0.06em 0.07em 0 #111111, 0 0.06em 0 #111111; +} +.ms-cost.ms-shadow.ms-untap { + box-shadow: -0.06em 0.07em 0 #ffffff, 0 0.06em 0 #ffffff; +} +/** + * Split costs */ +.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: 1.0em; +} +/** + * Larger sizes */ +.ms-2x { + font-size: 1.75em; +} +.ms-3x { + font-size: 2.25em; +} +.ms-4x { + font-size: 3.0em; +} +.ms-5x { + font-size: 3.75em; +} +.ms-6x { + font-size: 4.5em; +} +/** + * Mana */ +.ms-w:before { + content: "\e600"; +} +.ms-u:before { + content: "\e601"; +} +.ms-b:before { + content: "\e602"; +} +.ms-r:before { + content: "\e603"; +} +.ms-g:before { + content: "\e604"; +} +.ms-0:before { + content: "\e605"; +} +.ms-1:before { + content: "\e606"; +} +.ms-2:before { + content: "\e607"; +} +.ms-3:before { + content: "\e608"; +} +.ms-4:before { + content: "\e609"; +} +.ms-5:before { + content: "\e60a"; +} +.ms-6:before { + content: "\e60b"; +} +.ms-7:before { + content: "\e60c"; +} +.ms-8:before { + content: "\e60d"; +} +.ms-9:before { + content: "\e60e"; +} +.ms-10:before { + content: "\e60f"; +} +.ms-11:before { + content: "\e610"; +} +.ms-12:before { + content: "\e611"; +} +.ms-13:before { + content: "\e612"; +} +.ms-14:before { + content: "\e613"; +} +.ms-15:before { + content: "\e614"; +} +.ms-x:before { + content: "\e615"; +} +.ms-y:before { + content: "\e616"; +} +.ms-z:before { + content: "\e617"; +} +.ms-p:before, +.ms-pw:before, +.ms-pu:before, +.ms-pb:before, +.ms-pr:before, +.ms-pg:before { + content: "\e618"; +} +.ms-s:before { + content: "\e619"; +} +/** + * Tap/roll symbols */ +.ms-tap:before { + content: "\e61a"; +} +.ms-untap:before { + content: "\e61b"; +} +.ms-tap-alt:before { + content: "\e61c"; +} +.ms-chaos:before { + content: "\e61d"; +} +/** + * Card types */ +.ms-artifact:before { + content: "\e61e"; +} +.ms-creature:before { + content: "\e61f"; +} +.ms-enchantment:before { + content: "\e620"; +} +.ms-instant:before { + content: "\e621"; +} +.ms-land:before { + content: "\e622"; +} +.ms-planeswalker:before { + content: "\e623"; +} +.ms-sorcery:before { + content: "\e624"; +} +/** + * Split symbols */ +.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 { + content: "\e601"; +} +.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 { + content: "\e603"; +} +.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 { + content: "\e607"; +} diff --git a/fonts/mana.eot b/fonts/mana.eot new file mode 100755 index 0000000..58eea64 Binary files /dev/null and b/fonts/mana.eot differ diff --git a/fonts/mana.svg b/fonts/mana.svg new file mode 100755 index 0000000..2a1487d --- /dev/null +++ b/fonts/mana.svg @@ -0,0 +1,47 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/mana.ttf b/fonts/mana.ttf new file mode 100755 index 0000000..822e9ec Binary files /dev/null and b/fonts/mana.ttf differ diff --git a/fonts/mana.woff b/fonts/mana.woff new file mode 100755 index 0000000..83b0272 Binary files /dev/null and b/fonts/mana.woff differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..50e71aa --- /dev/null +++ b/index.html @@ -0,0 +1,124 @@ + + + + + + Mana + + + + + +

Mana

+

MTG Mana Symbol Demos

+

+ This HTML file is for demo purposes and is not necessary for Mana installation or use. + You can view all of the mana symbol font icons and the available examples below (casting cost background and increased sizes). +

+

Regular mana symbols

+

+ + + + + + + + + + + + + + + + + + + + + + + + +

+

Phyrexian, snow, and split symbols

+

+ + + + + + +
+ + + + + + + + + + + + + + + +

+

Tap and roll symbols

+

+ + + + +

+

2x size (3-6x also included)

+

+ + + + + +

+

Future Sight type symbols

+

+ + + + + + + +

+ + + diff --git a/less/core.less b/less/core.less new file mode 100644 index 0000000..74f9005 --- /dev/null +++ b/less/core.less @@ -0,0 +1,14 @@ +.@{prefix} { + display: inline-block; + font: normal normal normal @font-size-base/1 Mana; + font-size: inherit; + line-height: 1em; + text-rendering: auto; + transform: translate(0, 0); + speak: none; + text-transform: none; + vertical-align: middle; + /* Better font rendering */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/less/cost.less b/less/cost.less new file mode 100644 index 0000000..750fd9e --- /dev/null +++ b/less/cost.less @@ -0,0 +1,274 @@ +/** + * 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; +} diff --git a/less/icons.less b/less/icons.less new file mode 100644 index 0000000..01c560e --- /dev/null +++ b/less/icons.less @@ -0,0 +1,87 @@ +/** + * Mana */ + +.@{prefix}-w:before { content: "\e600"; } +.@{prefix}-u:before { content: "\e601"; } +.@{prefix}-b:before { content: "\e602"; } +.@{prefix}-r:before { content: "\e603"; } +.@{prefix}-g:before { content: "\e604"; } +.@{prefix}-0:before { content: "\e605"; } +.@{prefix}-1:before { content: "\e606"; } +.@{prefix}-2:before { content: "\e607"; } +.@{prefix}-3:before { content: "\e608"; } +.@{prefix}-4:before { content: "\e609"; } +.@{prefix}-5:before { content: "\e60a"; } +.@{prefix}-6:before { content: "\e60b"; } +.@{prefix}-7:before { content: "\e60c"; } +.@{prefix}-8:before { content: "\e60d"; } +.@{prefix}-9:before { content: "\e60e"; } +.@{prefix}-10:before { content: "\e60f"; } +.@{prefix}-11:before { content: "\e610"; } +.@{prefix}-12:before { content: "\e611"; } +.@{prefix}-13:before { content: "\e612"; } +.@{prefix}-14:before { content: "\e613"; } +.@{prefix}-15:before { content: "\e614"; } +.@{prefix}-x:before { content: "\e615"; } +.@{prefix}-y:before { content: "\e616"; } +.@{prefix}-z:before { content: "\e617"; } +.@{prefix}-p:before, +.@{prefix}-pw:before, +.@{prefix}-pu:before, +.@{prefix}-pb:before, +.@{prefix}-pr:before, +.@{prefix}-pg:before { content: "\e618"; } +.@{prefix}-s:before { content: "\e619"; } + +/** + * Tap/roll symbols */ + +.@{prefix}-tap:before { content: "\e61a"; } +.@{prefix}-untap:before { content: "\e61b"; } +.@{prefix}-tap-alt:before { content: "\e61c"; } +.@{prefix}-chaos:before { content: "\e61d"; } + +/** + * Card types */ + +.@{prefix}-artifact:before { content: "\e61e"; } +.@{prefix}-creature:before { content: "\e61f"; } +.@{prefix}-enchantment:before { content: "\e620"; } +.@{prefix}-instant:before { content: "\e621"; } +.@{prefix}-land:before { content: "\e622"; } +.@{prefix}-planeswalker:before { content: "\e623"; } +.@{prefix}-sorcery:before { content: "\e624"; } + +/** + * Split symbols */ + +.@{prefix}-wu:before, +.@{prefix}-wb:before, +.@{prefix}-rw:after, +.@{prefix}-gw:after, +.@{prefix}-2w:after { content: "\e600"; } // white +.@{prefix}-ub:before, +.@{prefix}-ur:before, +.@{prefix}-wu:after, +.@{prefix}-gu:after, +.@{prefix}-2u:after { content: "\e601"; } // blue +.@{prefix}-br:before, +.@{prefix}-bg:before, +.@{prefix}-wb:after, +.@{prefix}-ub:after, +.@{prefix}-2b:after { content: "\e602"; } // black +.@{prefix}-rw:before, +.@{prefix}-rg:before, +.@{prefix}-ur:after, +.@{prefix}-br:after, +.@{prefix}-2r:after { content: "\e603"; } // red +.@{prefix}-gw:before, +.@{prefix}-gu:before, +.@{prefix}-bg:after, +.@{prefix}-rg:after, +.@{prefix}-2g:after { content: "\e604"; } // green +.@{prefix}-2w:before, +.@{prefix}-2u:before, +.@{prefix}-2b:before, +.@{prefix}-2r:before, +.@{prefix}-2g:before { content: "\e607"; } // 2 diff --git a/less/mana.less b/less/mana.less new file mode 100644 index 0000000..9ec4c71 --- /dev/null +++ b/less/mana.less @@ -0,0 +1,6 @@ +@import "variables.less"; +@import "path.less"; +@import "core.less"; +@import "cost.less"; +@import "sizes.less"; +@import "icons.less"; diff --git a/less/path.less b/less/path.less new file mode 100644 index 0000000..db7f1ee --- /dev/null +++ b/less/path.less @@ -0,0 +1,10 @@ +@font-face { + font-family: 'Mana'; + src:url( '@{font-path}/mana.eot?v=@{version}' ); + src:url( '@{font-path}/mana.eot?#iefix&v=@{version}') format( 'embedded-opentype' ), + url( '@{font-path}/mana.woff?v=@{version}') format( 'woff' ), + url( '@{font-path}/mana.ttf?v=@{version}') format( 'truetype' ), + url( '@{font-path}/mana.svg?v=@{version}#mana') format( 'svg' ); + font-weight: normal; + font-style: normal; +} diff --git a/less/sizes.less b/less/sizes.less new file mode 100644 index 0000000..c0599cc --- /dev/null +++ b/less/sizes.less @@ -0,0 +1,8 @@ +/** + * Larger sizes */ + +.@{prefix}-2x { font-size: 1.75em; } +.@{prefix}-3x { font-size: 2.25em; } +.@{prefix}-4x { font-size: 3.0em; } +.@{prefix}-5x { font-size: 3.75em; } +.@{prefix}-6x { font-size: 4.5em; } diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000..c0bcbc8 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,7 @@ +/** + * Global */ + +@font-path: '../fonts'; +@version: '0.1'; +@font-size-base: 14px; +@prefix: ms;