andrew/keyrune
andrew/keyrune
1
0
Fork 0
mirror of https://github.com/andrewgioia/keyrune.git synced 2025-11-03 23:50:45 +00:00
Code Issues Projects Releases Wiki Activity

Rarities now support gradients for webkit browsers with .ss-grad

Browse Source
This commit is contained in:
Andrew Gioia 2015-03-21 20:39:38 -04:00
parent f899d84794
commit 8e89b507fb
4 changed files with 139 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
css/keyrune.css
View File

@ -41,16 +41,56 @@
/** /**
* Rarity colors */ * Rarity colors */
.ss-common { .ss-common {
color: #333; color: #1A1718;
}
.ss-common.ss-grad {
/* webkit outline/gradient */
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%);
/* Chrome10+,Safari5.1+ */
-webkit-text-stroke: 0.03em #000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.ss-uncommon { .ss-uncommon {
color: #7795A1; color: #707883;
}
.ss-uncommon.ss-grad {
/* webkit outline/gradient */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
/* Chrome10+,Safari5.1+ */
-webkit-text-stroke: 0.03em #111;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.ss-rare { .ss-rare {
color: #A58E4A; color: #A58E4A;
} }
.ss-rare.ss-grad {
/* webkit outline/gradient */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
/* Chrome10+,Safari5.1+ */
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-mythic { .ss-mythic {
color: #A2472A; color: #BF4427;
}
.ss-mythic.ss-grad {
/* webkit outline/gradient */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
/* Chrome10+,Safari5.1+ */
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
/** /**
* Fixed width */ * Fixed width */

2
css/keyrune.min.css vendored
View File

File diff suppressed because one or more lines are too long

51
index.html Normal file
View File

@ -0,0 +1,51 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Keyrune</title>
<link rel="stylesheet" href="css/keyrune.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<style type="text/css">
body {
color: #333;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.6em;
padding: 0 100px;
}
</style>
</head>
<body>
<h1>Keyrune</h1>
<h2>Set Symbol Demos</h2>
<p>
This HTML file is for demo purposes and is not necessary for Keyrune installation or use. You can view a few of the set symbol font icons and the available examples below (some may only be available for specific browsers).
</p>
<p>
<i class="ss ss-leg ss-3x ss-common ss-grad"></i>&nbsp;
<i class="ss ss-leg ss-2x ss-common"></i>&nbsp;
<i class="ss ss-leg ss-common"></i>&nbsp;
Common (Legends)
</p>
<p>
<i class="ss ss-ons ss-3x ss-uncommon ss-grad"></i>&nbsp;
<i class="ss ss-ons ss-2x ss-uncommon"></i>&nbsp;
<i class="ss ss-ons ss-uncommon"></i>&nbsp;
Uncommon (Onslaught)
</p>
<p>
<i class="ss ss-fut ss-3x ss-rare ss-grad"></i>&nbsp;
<i class="ss ss-fut ss-2x ss-rare"></i>&nbsp;
<i class="ss ss-fut ss-rare"></i>&nbsp;
Rare (Future Sight)
</p>
<p>
<i class="ss ss-zen ss-3x ss-mythic ss-grad"></i>&nbsp;
<i class="ss ss-zen ss-2x ss-mythic"></i>&nbsp;
<i class="ss ss-zen ss-mythic"></i>&nbsp;
Mythic Rare (Worldwake)
</p>
</body>
</html>

48
less/rarities.less
View File

@ -1,10 +1,50 @@
/** /**
* Rarity colors */ * Rarity colors */
.@{prefix}-common { color: #333; } .@{prefix}-common {
color: #1A1718;
&.ss-grad {
/* webkit outline/gradient */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#302b2c), color-stop(50%,#474040), color-stop(100%,#302b2c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #302b2c 1%,#474040 50%,#302b2c 100%); /* Chrome10+,Safari5.1+ */
-webkit-text-stroke: 0.03em #000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.@{prefix}-uncommon { color: #7795A1; } .@{prefix}-uncommon {
color: #707883;
&.ss-grad {
/* webkit outline/gradient */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5a6572), color-stop(50%,#9e9e9e), color-stop(100%,#5a6572)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #5a6572 0%,#9e9e9e 50%,#5a6572 100%); /* Chrome10+,Safari5.1+ */
-webkit-text-stroke: 0.03em #111;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.@{prefix}-rare { color: #A58E4A; } .@{prefix}-rare {
color: #A58E4A;
&.ss-grad {
/* webkit outline/gradient */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#876a3b), color-stop(50%,#dfbd6b), color-stop(100%,#876a3b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #876a3b 0%,#dfbd6b 50%,#876a3b 100%); /* Chrome10+,Safari5.1+ */
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.@{prefix}-mythic { color: #A2472A; } .@{prefix}-mythic {
color: #BF4427;
&.ss-grad {
/* webkit outline/gradient */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b21f0f), color-stop(50%,#f38300), color-stop(100%,#b21f0f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #b21f0f 0%,#f38300 50%,#b21f0f 100%); /* Chrome10+,Safari5.1+ */
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}