andrew/keyrune
andrew/keyrune
1
0
Fork 0
mirror of https://github.com/andrewgioia/keyrune.git synced 2024-12-22 07:29:56 +00:00
Code Issues Projects Releases Wiki Activity

Readds support for text-stroke borders by default, and manual glyph borders as an override on specific symbols. Note that .ss-border is not working well when .ss-grad is also applied, due to the way that the gradient has to be applied to the glyph (via text-clip)

Browse Source
This commit is contained in:
Andrew Gioia 2024-10-28 11:50:19 -04:00
parent ca33bf9957
commit fce67a180c
Signed by: andrew
GPG Key ID: FC09694A000800C8
6 changed files with 766 additions and 508 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

345
css/keyrune.css
View File

@ -160,111 +160,62 @@
.ss-common { .ss-common {
color: #1A1718; color: #1A1718;
} }
.ss-common.ss-grad { .ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c)); background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%); background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%);
-webkit-text-stroke: 0.03em #000; background: linear-gradient(90deg, #302b2c 0%, #474040 50%, #302b2c 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text !important;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.ss-common.ss-grad.ss-no-border, .ss-grad.ss-duo::after {
.ss-common.ss-grad.ss-duo { -webkit-text-fill-color: inherit;
-webkit-text-stroke: 0;
} }
.ss-uncommon { .ss-uncommon {
color: #707883; color: #707883;
} }
.ss-uncommon.ss-grad { .ss-uncommon.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%); background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
-webkit-text-stroke: 0.03em #111; background: linear-gradient(90deg, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-uncommon.ss-grad.ss-no-border,
.ss-uncommon.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-uncommon.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-rare { .ss-rare {
color: #A58E4A; color: #A58E4A;
} }
.ss-rare.ss-grad { .ss-rare.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%); background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
-webkit-text-stroke: 0.03em #333; background: linear-gradient(90deg, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-rare.ss-grad.ss-no-border,
.ss-rare.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-rare.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-mythic { .ss-mythic {
color: #BF4427; color: #BF4427;
} }
.ss-mythic.ss-grad { .ss-mythic.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%); background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
-webkit-text-stroke: 0.03em #333; background: linear-gradient(90deg, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-mythic.ss-grad.ss-no-border,
.ss-mythic.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-mythic.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-timeshifted { .ss-timeshifted {
color: #652978; color: #652978;
} }
.ss-timeshifted.ss-grad { .ss-timeshifted.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #652978), color-stop(50%, #c09ac5), color-stop(100%, #652978)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #652978), color-stop(50%, #c09ac5), color-stop(100%, #652978));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #652978 0%, #c09ac5 50%, #652978 100%); background: -webkit-linear-gradient(-45deg, #652978 0%, #c09ac5 50%, #652978 100%);
/* Chrome10-25,Safari5.1-6 */ /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #652978 0%, #c09ac5 50%, #652978 100%); background: linear-gradient(90deg, #652978 0%, #c09ac5 50%, #652978 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-timeshifted.ss-grad.ss-no-border,
.ss-timeshifted.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-timeshifted.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-foil { .ss-foil {
color: #a6dced; color: #a6dced;
} }
.ss-foil.ss-grad { .ss-foil.ss-grad::before {
background: -webkit-linear-gradient(-45deg, #ea8d66 0%, #ea8d66 10%, #fdef8a 17%, #8bcc93 33%, #a6dced 50%, #6f75aa 67%, #e599c2 83%, #eeeeee 100%); background: -webkit-linear-gradient(-45deg, #ea8d66 0%, #ea8d66 10%, #fdef8a 17%, #8bcc93 33%, #a6dced 50%, #6f75aa 67%, #e599c2 83%, #eeeeee 100%);
/* Chrome10-25,Safari5.1-6 */ /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ea8d66 0%, #ea8d66 15%, #fdef8a 28%, #8bcc93 42%, #a6dced 55%, #6f75aa 68%, #e599c2 84%, #e599c2 100%); background: linear-gradient(135deg, #ea8d66 0%, #ea8d66 15%, #fdef8a 28%, #8bcc93 42%, #a6dced 55%, #6f75aa 68%, #e599c2 84%, #e599c2 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-foil.ss-grad.ss-no-border,
.ss-foil.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-foil.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
/** /**
* Fixed width */ * Fixed width */
@ -1437,75 +1388,160 @@
.ss-30a:before { .ss-30a:before {
content: "\e9aa"; content: "\e9aa";
} }
/**
*
* Border layer using ::after as well
*
* Symbols cannot have both .duo and .border applied as both
* make use of the same pseudoelement in v3.
*
* For duo icons that have an inner white layer as well as a
* border layer, we need to use all 3 available pseudoelements.
*/
.ss-border { .ss-border {
/*&:not(.ss-duo)::after { /**
content: ""; * specific border glyphs for these sets, handled via ::after
position: absolute; */
left: -.05em; }
top: 0em; .ss-border::before {
paint-order: stroke fill;
-webkit-text-stroke: 0.1em #000;
}
.ss-border.ss-common::before {
-webkit-text-stroke: 0.1em #fff;
}
.ss-border.ss-40k::before,
.ss-border.ss-arc::before,
.ss-border.ss-c13::before,
.ss-border.ss-c14::before,
.ss-border.ss-c15::before,
.ss-border.ss-c16::before,
.ss-border.ss-cm1::before,
.ss-border.ss-cmd::before,
.ss-border.ss-cns::before,
.ss-border.ss-dft::before,
.ss-border.ss-dmc::before,
.ss-border.ss-dsc::before,
.ss-border.ss-hop::before,
.ss-border.ss-inr::before,
.ss-border.ss-pc2::before,
.ss-border.ss-sis::before,
.ss-border.ss-van::before {
-webkit-text-stroke: 0 !important;
}
.ss-border.ss-40k:not(.ss-duo)::after,
.ss-border.ss-arc:not(.ss-duo)::after,
.ss-border.ss-c13:not(.ss-duo)::after,
.ss-border.ss-c14:not(.ss-duo)::after,
.ss-border.ss-c15:not(.ss-duo)::after,
.ss-border.ss-c16:not(.ss-duo)::after,
.ss-border.ss-cm1:not(.ss-duo)::after,
.ss-border.ss-cmd:not(.ss-duo)::after,
.ss-border.ss-cns:not(.ss-duo)::after,
.ss-border.ss-dft:not(.ss-duo)::after,
.ss-border.ss-dmc:not(.ss-duo)::after,
.ss-border.ss-dsc:not(.ss-duo)::after,
.ss-border.ss-hop:not(.ss-duo)::after,
.ss-border.ss-inr:not(.ss-duo)::after,
.ss-border.ss-pc2:not(.ss-duo)::after,
.ss-border.ss-sis:not(.ss-duo)::after,
.ss-border.ss-van:not(.ss-duo)::after {
color: #fff; color: #fff;
font-size: 1.15em; content: '';
z-index: -1; display: block;
background: #fff; font-size: 1em;
-webkit-text-stroke: 0.05em #fff; height: 100%;
-webkit-background-clip: text; left: 0;
-webkit-text-fill-color: transparent; position: absolute;
}*/ top: 0;
/*&:not(.ss-duo)::after { // this needs ::after to get the same content as ::before to work again width: 100%;
-webkit-text-stroke: 0.05em #fff;
text-stroke: 0.5em #fff;
}*/
} }
.ss-border.ss-van:after { .ss-border.ss-40k:not(.ss-duo).ss-uncommon::after,
content: "\e655"; .ss-border.ss-arc:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-c13:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-hop:after { .ss-border.ss-c14:not(.ss-duo).ss-uncommon::after,
content: "\e656"; .ss-border.ss-c15:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-c16:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-arc:after { .ss-border.ss-cm1:not(.ss-duo).ss-uncommon::after,
content: "\e657"; .ss-border.ss-cmd:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-cns:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-cmd:after { .ss-border.ss-dft:not(.ss-duo).ss-uncommon::after,
content: "\e658"; .ss-border.ss-dmc:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-dsc:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-pc2:after { .ss-border.ss-hop:not(.ss-duo).ss-uncommon::after,
content: "\e659"; .ss-border.ss-inr:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-pc2:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-cm1:after { .ss-border.ss-sis:not(.ss-duo).ss-uncommon::after,
content: "\e65a"; .ss-border.ss-van:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-40k:not(.ss-duo).ss-rare::after,
.ss-border.ss-c13:after { .ss-border.ss-arc:not(.ss-duo).ss-rare::after,
content: "\e65b"; .ss-border.ss-c13:not(.ss-duo).ss-rare::after,
} .ss-border.ss-c14:not(.ss-duo).ss-rare::after,
.ss-border.ss-cns:after { .ss-border.ss-c15:not(.ss-duo).ss-rare::after,
content: "\e65c"; .ss-border.ss-c16:not(.ss-duo).ss-rare::after,
} .ss-border.ss-cm1:not(.ss-duo).ss-rare::after,
.ss-border.ss-c14:after { .ss-border.ss-cmd:not(.ss-duo).ss-rare::after,
content: "\e65d"; .ss-border.ss-cns:not(.ss-duo).ss-rare::after,
} .ss-border.ss-dft:not(.ss-duo).ss-rare::after,
.ss-border.ss-c15:after { .ss-border.ss-dmc:not(.ss-duo).ss-rare::after,
content: "\e900"; .ss-border.ss-dsc:not(.ss-duo).ss-rare::after,
} .ss-border.ss-hop:not(.ss-duo).ss-rare::after,
.ss-border.ss-inr:after { .ss-border.ss-inr:not(.ss-duo).ss-rare::after,
content: "\e9e3"; .ss-border.ss-pc2:not(.ss-duo).ss-rare::after,
} .ss-border.ss-sis:not(.ss-duo).ss-rare::after,
.ss-border.ss-sis::before { .ss-border.ss-van:not(.ss-duo).ss-rare::after,
content: "\e9b3"; .ss-border.ss-40k:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-arc:not(.ss-duo).ss-mythic::after,
.ss-border.ss-sis::after { .ss-border.ss-c13:not(.ss-duo).ss-mythic::after,
content: "\e9b2"; .ss-border.ss-c14:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-c15:not(.ss-duo).ss-mythic::after,
.ss-border.ss-c16::before { .ss-border.ss-c16:not(.ss-duo).ss-mythic::after,
content: "\e910"; .ss-border.ss-cm1:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-cmd:not(.ss-duo).ss-mythic::after,
.ss-border.ss-c16::after { .ss-border.ss-cns:not(.ss-duo).ss-mythic::after,
content: "\e9e5"; .ss-border.ss-dft:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-dmc:not(.ss-duo).ss-mythic::after,
.ss-border.ss-dft::before { .ss-border.ss-dsc:not(.ss-duo).ss-mythic::after,
content: "\e9e1"; .ss-border.ss-hop:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-inr:not(.ss-duo).ss-mythic::after,
.ss-border.ss-dft::after { .ss-border.ss-pc2:not(.ss-duo).ss-mythic::after,
content: "\e9e0"; .ss-border.ss-sis:not(.ss-duo).ss-mythic::after,
.ss-border.ss-van:not(.ss-duo).ss-mythic::after,
.ss-border.ss-40k:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-arc:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c13:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c14:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c15:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c16:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-cm1:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-cmd:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-cns:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-dft:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-dmc:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-dsc:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-hop:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-inr:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-pc2:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-sis:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-van:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-40k:not(.ss-duo).ss-foil::after,
.ss-border.ss-arc:not(.ss-duo).ss-foil::after,
.ss-border.ss-c13:not(.ss-duo).ss-foil::after,
.ss-border.ss-c14:not(.ss-duo).ss-foil::after,
.ss-border.ss-c15:not(.ss-duo).ss-foil::after,
.ss-border.ss-c16:not(.ss-duo).ss-foil::after,
.ss-border.ss-cm1:not(.ss-duo).ss-foil::after,
.ss-border.ss-cmd:not(.ss-duo).ss-foil::after,
.ss-border.ss-cns:not(.ss-duo).ss-foil::after,
.ss-border.ss-dft:not(.ss-duo).ss-foil::after,
.ss-border.ss-dmc:not(.ss-duo).ss-foil::after,
.ss-border.ss-dsc:not(.ss-duo).ss-foil::after,
.ss-border.ss-hop:not(.ss-duo).ss-foil::after,
.ss-border.ss-inr:not(.ss-duo).ss-foil::after,
.ss-border.ss-pc2:not(.ss-duo).ss-foil::after,
.ss-border.ss-sis:not(.ss-duo).ss-foil::after,
.ss-border.ss-van:not(.ss-duo).ss-foil::after {
color: #000;
} }
.ss-border.ss-40k { .ss-border.ss-40k {
display: list-item; display: list-item;
@ -1520,6 +1556,39 @@
content: "\e99a"; content: "\e99a";
color: #000; color: #000;
} }
.ss-border.ss-arc:after {
content: "\e657";
}
.ss-border.ss-c13:after {
content: "\e65b";
}
.ss-border.ss-c14:after {
content: "\e65d";
}
.ss-border.ss-c15:after {
content: "\e900";
}
.ss-border.ss-c16::before {
content: "\e910";
}
.ss-border.ss-c16::after {
content: "\e9e5";
}
.ss-border.ss-cm1:after {
content: "\e65a";
}
.ss-border.ss-cmd:after {
content: "\e658";
}
.ss-border.ss-cns:after {
content: "\e65c";
}
.ss-border.ss-dft::before {
content: "\e9e1";
}
.ss-border.ss-dft::after {
content: "\e9e0";
}
.ss-border.ss-dmc { .ss-border.ss-dmc {
display: list-item; display: list-item;
list-style-position: inside; list-style-position: inside;
@ -1549,3 +1618,21 @@
content: "\e9dd"; content: "\e9dd";
color: #000; color: #000;
} }
.ss-border.ss-hop:after {
content: "\e656";
}
.ss-border.ss-inr:after {
content: "\e9e3";
}
.ss-border.ss-pc2:after {
content: "\e659";
}
.ss-border.ss-sis::before {
content: "\e9b3";
}
.ss-border.ss-sis::after {
content: "\e9b2";
}
.ss-border.ss-van:after {
content: "\e655";
}

345
css/keyrune.min.css vendored
View File

@ -160,111 +160,62 @@
.ss-common { .ss-common {
color: #1A1718; color: #1A1718;
} }
.ss-common.ss-grad { .ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c)); background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%); background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%);
-webkit-text-stroke: 0.03em #000; background: linear-gradient(90deg, #302b2c 0%, #474040 50%, #302b2c 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text !important;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.ss-common.ss-grad.ss-no-border, .ss-grad.ss-duo::after {
.ss-common.ss-grad.ss-duo { -webkit-text-fill-color: inherit;
-webkit-text-stroke: 0;
} }
.ss-uncommon { .ss-uncommon {
color: #707883; color: #707883;
} }
.ss-uncommon.ss-grad { .ss-uncommon.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%); background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
-webkit-text-stroke: 0.03em #111; background: linear-gradient(90deg, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-uncommon.ss-grad.ss-no-border,
.ss-uncommon.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-uncommon.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-rare { .ss-rare {
color: #A58E4A; color: #A58E4A;
} }
.ss-rare.ss-grad { .ss-rare.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%); background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
-webkit-text-stroke: 0.03em #333; background: linear-gradient(90deg, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-rare.ss-grad.ss-no-border,
.ss-rare.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-rare.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-mythic { .ss-mythic {
color: #BF4427; color: #BF4427;
} }
.ss-mythic.ss-grad { .ss-mythic.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%); background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
-webkit-text-stroke: 0.03em #333; background: linear-gradient(90deg, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-mythic.ss-grad.ss-no-border,
.ss-mythic.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-mythic.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-timeshifted { .ss-timeshifted {
color: #652978; color: #652978;
} }
.ss-timeshifted.ss-grad { .ss-timeshifted.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #652978), color-stop(50%, #c09ac5), color-stop(100%, #652978)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #652978), color-stop(50%, #c09ac5), color-stop(100%, #652978));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #652978 0%, #c09ac5 50%, #652978 100%); background: -webkit-linear-gradient(-45deg, #652978 0%, #c09ac5 50%, #652978 100%);
/* Chrome10-25,Safari5.1-6 */ /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #652978 0%, #c09ac5 50%, #652978 100%); background: linear-gradient(90deg, #652978 0%, #c09ac5 50%, #652978 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-timeshifted.ss-grad.ss-no-border,
.ss-timeshifted.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-timeshifted.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-foil { .ss-foil {
color: #a6dced; color: #a6dced;
} }
.ss-foil.ss-grad { .ss-foil.ss-grad::before {
background: -webkit-linear-gradient(-45deg, #ea8d66 0%, #ea8d66 10%, #fdef8a 17%, #8bcc93 33%, #a6dced 50%, #6f75aa 67%, #e599c2 83%, #eeeeee 100%); background: -webkit-linear-gradient(-45deg, #ea8d66 0%, #ea8d66 10%, #fdef8a 17%, #8bcc93 33%, #a6dced 50%, #6f75aa 67%, #e599c2 83%, #eeeeee 100%);
/* Chrome10-25,Safari5.1-6 */ /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ea8d66 0%, #ea8d66 15%, #fdef8a 28%, #8bcc93 42%, #a6dced 55%, #6f75aa 68%, #e599c2 84%, #e599c2 100%); background: linear-gradient(135deg, #ea8d66 0%, #ea8d66 15%, #fdef8a 28%, #8bcc93 42%, #a6dced 55%, #6f75aa 68%, #e599c2 84%, #e599c2 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-foil.ss-grad.ss-no-border,
.ss-foil.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-foil.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
/** /**
* Fixed width */ * Fixed width */
@ -1437,75 +1388,160 @@
.ss-30a:before { .ss-30a:before {
content: "\e9aa"; content: "\e9aa";
} }
/**
*
* Border layer using ::after as well
*
* Symbols cannot have both .duo and .border applied as both
* make use of the same pseudoelement in v3.
*
* For duo icons that have an inner white layer as well as a
* border layer, we need to use all 3 available pseudoelements.
*/
.ss-border { .ss-border {
/*&:not(.ss-duo)::after { /**
content: ""; * specific border glyphs for these sets, handled via ::after
position: absolute; */
left: -.05em; }
top: 0em; .ss-border::before {
paint-order: stroke fill;
-webkit-text-stroke: 0.1em #000;
}
.ss-border.ss-common::before {
-webkit-text-stroke: 0.1em #fff;
}
.ss-border.ss-40k::before,
.ss-border.ss-arc::before,
.ss-border.ss-c13::before,
.ss-border.ss-c14::before,
.ss-border.ss-c15::before,
.ss-border.ss-c16::before,
.ss-border.ss-cm1::before,
.ss-border.ss-cmd::before,
.ss-border.ss-cns::before,
.ss-border.ss-dft::before,
.ss-border.ss-dmc::before,
.ss-border.ss-dsc::before,
.ss-border.ss-hop::before,
.ss-border.ss-inr::before,
.ss-border.ss-pc2::before,
.ss-border.ss-sis::before,
.ss-border.ss-van::before {
-webkit-text-stroke: 0 !important;
}
.ss-border.ss-40k:not(.ss-duo)::after,
.ss-border.ss-arc:not(.ss-duo)::after,
.ss-border.ss-c13:not(.ss-duo)::after,
.ss-border.ss-c14:not(.ss-duo)::after,
.ss-border.ss-c15:not(.ss-duo)::after,
.ss-border.ss-c16:not(.ss-duo)::after,
.ss-border.ss-cm1:not(.ss-duo)::after,
.ss-border.ss-cmd:not(.ss-duo)::after,
.ss-border.ss-cns:not(.ss-duo)::after,
.ss-border.ss-dft:not(.ss-duo)::after,
.ss-border.ss-dmc:not(.ss-duo)::after,
.ss-border.ss-dsc:not(.ss-duo)::after,
.ss-border.ss-hop:not(.ss-duo)::after,
.ss-border.ss-inr:not(.ss-duo)::after,
.ss-border.ss-pc2:not(.ss-duo)::after,
.ss-border.ss-sis:not(.ss-duo)::after,
.ss-border.ss-van:not(.ss-duo)::after {
color: #fff; color: #fff;
font-size: 1.15em; content: '';
z-index: -1; display: block;
background: #fff; font-size: 1em;
-webkit-text-stroke: 0.05em #fff; height: 100%;
-webkit-background-clip: text; left: 0;
-webkit-text-fill-color: transparent; position: absolute;
}*/ top: 0;
/*&:not(.ss-duo)::after { // this needs ::after to get the same content as ::before to work again width: 100%;
-webkit-text-stroke: 0.05em #fff;
text-stroke: 0.5em #fff;
}*/
} }
.ss-border.ss-van:after { .ss-border.ss-40k:not(.ss-duo).ss-uncommon::after,
content: "\e655"; .ss-border.ss-arc:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-c13:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-hop:after { .ss-border.ss-c14:not(.ss-duo).ss-uncommon::after,
content: "\e656"; .ss-border.ss-c15:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-c16:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-arc:after { .ss-border.ss-cm1:not(.ss-duo).ss-uncommon::after,
content: "\e657"; .ss-border.ss-cmd:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-cns:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-cmd:after { .ss-border.ss-dft:not(.ss-duo).ss-uncommon::after,
content: "\e658"; .ss-border.ss-dmc:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-dsc:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-pc2:after { .ss-border.ss-hop:not(.ss-duo).ss-uncommon::after,
content: "\e659"; .ss-border.ss-inr:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-pc2:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-cm1:after { .ss-border.ss-sis:not(.ss-duo).ss-uncommon::after,
content: "\e65a"; .ss-border.ss-van:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-40k:not(.ss-duo).ss-rare::after,
.ss-border.ss-c13:after { .ss-border.ss-arc:not(.ss-duo).ss-rare::after,
content: "\e65b"; .ss-border.ss-c13:not(.ss-duo).ss-rare::after,
} .ss-border.ss-c14:not(.ss-duo).ss-rare::after,
.ss-border.ss-cns:after { .ss-border.ss-c15:not(.ss-duo).ss-rare::after,
content: "\e65c"; .ss-border.ss-c16:not(.ss-duo).ss-rare::after,
} .ss-border.ss-cm1:not(.ss-duo).ss-rare::after,
.ss-border.ss-c14:after { .ss-border.ss-cmd:not(.ss-duo).ss-rare::after,
content: "\e65d"; .ss-border.ss-cns:not(.ss-duo).ss-rare::after,
} .ss-border.ss-dft:not(.ss-duo).ss-rare::after,
.ss-border.ss-c15:after { .ss-border.ss-dmc:not(.ss-duo).ss-rare::after,
content: "\e900"; .ss-border.ss-dsc:not(.ss-duo).ss-rare::after,
} .ss-border.ss-hop:not(.ss-duo).ss-rare::after,
.ss-border.ss-inr:after { .ss-border.ss-inr:not(.ss-duo).ss-rare::after,
content: "\e9e3"; .ss-border.ss-pc2:not(.ss-duo).ss-rare::after,
} .ss-border.ss-sis:not(.ss-duo).ss-rare::after,
.ss-border.ss-sis::before { .ss-border.ss-van:not(.ss-duo).ss-rare::after,
content: "\e9b3"; .ss-border.ss-40k:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-arc:not(.ss-duo).ss-mythic::after,
.ss-border.ss-sis::after { .ss-border.ss-c13:not(.ss-duo).ss-mythic::after,
content: "\e9b2"; .ss-border.ss-c14:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-c15:not(.ss-duo).ss-mythic::after,
.ss-border.ss-c16::before { .ss-border.ss-c16:not(.ss-duo).ss-mythic::after,
content: "\e910"; .ss-border.ss-cm1:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-cmd:not(.ss-duo).ss-mythic::after,
.ss-border.ss-c16::after { .ss-border.ss-cns:not(.ss-duo).ss-mythic::after,
content: "\e9e5"; .ss-border.ss-dft:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-dmc:not(.ss-duo).ss-mythic::after,
.ss-border.ss-dft::before { .ss-border.ss-dsc:not(.ss-duo).ss-mythic::after,
content: "\e9e1"; .ss-border.ss-hop:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-inr:not(.ss-duo).ss-mythic::after,
.ss-border.ss-dft::after { .ss-border.ss-pc2:not(.ss-duo).ss-mythic::after,
content: "\e9e0"; .ss-border.ss-sis:not(.ss-duo).ss-mythic::after,
.ss-border.ss-van:not(.ss-duo).ss-mythic::after,
.ss-border.ss-40k:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-arc:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c13:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c14:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c15:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c16:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-cm1:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-cmd:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-cns:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-dft:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-dmc:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-dsc:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-hop:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-inr:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-pc2:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-sis:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-van:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-40k:not(.ss-duo).ss-foil::after,
.ss-border.ss-arc:not(.ss-duo).ss-foil::after,
.ss-border.ss-c13:not(.ss-duo).ss-foil::after,
.ss-border.ss-c14:not(.ss-duo).ss-foil::after,
.ss-border.ss-c15:not(.ss-duo).ss-foil::after,
.ss-border.ss-c16:not(.ss-duo).ss-foil::after,
.ss-border.ss-cm1:not(.ss-duo).ss-foil::after,
.ss-border.ss-cmd:not(.ss-duo).ss-foil::after,
.ss-border.ss-cns:not(.ss-duo).ss-foil::after,
.ss-border.ss-dft:not(.ss-duo).ss-foil::after,
.ss-border.ss-dmc:not(.ss-duo).ss-foil::after,
.ss-border.ss-dsc:not(.ss-duo).ss-foil::after,
.ss-border.ss-hop:not(.ss-duo).ss-foil::after,
.ss-border.ss-inr:not(.ss-duo).ss-foil::after,
.ss-border.ss-pc2:not(.ss-duo).ss-foil::after,
.ss-border.ss-sis:not(.ss-duo).ss-foil::after,
.ss-border.ss-van:not(.ss-duo).ss-foil::after {
color: #000;
} }
.ss-border.ss-40k { .ss-border.ss-40k {
display: list-item; display: list-item;
@ -1520,6 +1556,39 @@
content: "\e99a"; content: "\e99a";
color: #000; color: #000;
} }
.ss-border.ss-arc:after {
content: "\e657";
}
.ss-border.ss-c13:after {
content: "\e65b";
}
.ss-border.ss-c14:after {
content: "\e65d";
}
.ss-border.ss-c15:after {
content: "\e900";
}
.ss-border.ss-c16::before {
content: "\e910";
}
.ss-border.ss-c16::after {
content: "\e9e5";
}
.ss-border.ss-cm1:after {
content: "\e65a";
}
.ss-border.ss-cmd:after {
content: "\e658";
}
.ss-border.ss-cns:after {
content: "\e65c";
}
.ss-border.ss-dft::before {
content: "\e9e1";
}
.ss-border.ss-dft::after {
content: "\e9e0";
}
.ss-border.ss-dmc { .ss-border.ss-dmc {
display: list-item; display: list-item;
list-style-position: inside; list-style-position: inside;
@ -1549,3 +1618,21 @@
content: "\e9dd"; content: "\e9dd";
color: #000; color: #000;
} }
.ss-border.ss-hop:after {
content: "\e656";
}
.ss-border.ss-inr:after {
content: "\e9e3";
}
.ss-border.ss-pc2:after {
content: "\e659";
}
.ss-border.ss-sis::before {
content: "\e9b3";
}
.ss-border.ss-sis::after {
content: "\e9b2";
}
.ss-border.ss-van:after {
content: "\e655";
}

345
docs/assets/keyrune.min.css vendored
View File

@ -160,111 +160,62 @@
.ss-common { .ss-common {
color: #1A1718; color: #1A1718;
} }
.ss-common.ss-grad { .ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c)); background: -webkit-gradient(linear, left top, right top, color-stop(1%, #302b2c), color-stop(50%, #474040), color-stop(100%, #302b2c));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%); background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%);
-webkit-text-stroke: 0.03em #000; background: linear-gradient(90deg, #302b2c 0%, #474040 50%, #302b2c 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text !important;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.ss-common.ss-grad.ss-no-border, .ss-grad.ss-duo::after {
.ss-common.ss-grad.ss-duo { -webkit-text-fill-color: inherit;
-webkit-text-stroke: 0;
} }
.ss-uncommon { .ss-uncommon {
color: #707883; color: #707883;
} }
.ss-uncommon.ss-grad { .ss-uncommon.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5a6572), color-stop(50%, #9e9e9e), color-stop(100%, #5a6572));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%); background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
-webkit-text-stroke: 0.03em #111; background: linear-gradient(90deg, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-uncommon.ss-grad.ss-no-border,
.ss-uncommon.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-uncommon.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-rare { .ss-rare {
color: #A58E4A; color: #A58E4A;
} }
.ss-rare.ss-grad { .ss-rare.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #876a3b), color-stop(50%, #dfbd6b), color-stop(100%, #876a3b));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%); background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
-webkit-text-stroke: 0.03em #333; background: linear-gradient(90deg, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-rare.ss-grad.ss-no-border,
.ss-rare.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-rare.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-mythic { .ss-mythic {
color: #BF4427; color: #BF4427;
} }
.ss-mythic.ss-grad { .ss-mythic.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b21f0f), color-stop(50%, #f38300), color-stop(100%, #b21f0f));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%); background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
-webkit-text-stroke: 0.03em #333; background: linear-gradient(90deg, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-mythic.ss-grad.ss-no-border,
.ss-mythic.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-mythic.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-timeshifted { .ss-timeshifted {
color: #652978; color: #652978;
} }
.ss-timeshifted.ss-grad { .ss-timeshifted.ss-grad::before {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #652978), color-stop(50%, #c09ac5), color-stop(100%, #652978)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #652978), color-stop(50%, #c09ac5), color-stop(100%, #652978));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #652978 0%, #c09ac5 50%, #652978 100%); background: -webkit-linear-gradient(-45deg, #652978 0%, #c09ac5 50%, #652978 100%);
/* Chrome10-25,Safari5.1-6 */ /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #652978 0%, #c09ac5 50%, #652978 100%); background: linear-gradient(90deg, #652978 0%, #c09ac5 50%, #652978 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-timeshifted.ss-grad.ss-no-border,
.ss-timeshifted.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-timeshifted.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
.ss-foil { .ss-foil {
color: #a6dced; color: #a6dced;
} }
.ss-foil.ss-grad { .ss-foil.ss-grad::before {
background: -webkit-linear-gradient(-45deg, #ea8d66 0%, #ea8d66 10%, #fdef8a 17%, #8bcc93 33%, #a6dced 50%, #6f75aa 67%, #e599c2 83%, #eeeeee 100%); background: -webkit-linear-gradient(-45deg, #ea8d66 0%, #ea8d66 10%, #fdef8a 17%, #8bcc93 33%, #a6dced 50%, #6f75aa 67%, #e599c2 83%, #eeeeee 100%);
/* Chrome10-25,Safari5.1-6 */ /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ea8d66 0%, #ea8d66 15%, #fdef8a 28%, #8bcc93 42%, #a6dced 55%, #6f75aa 68%, #e599c2 84%, #e599c2 100%); background: linear-gradient(135deg, #ea8d66 0%, #ea8d66 15%, #fdef8a 28%, #8bcc93 42%, #a6dced 55%, #6f75aa 68%, #e599c2 84%, #e599c2 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-foil.ss-grad.ss-no-border,
.ss-foil.ss-grad.ss-duo {
-webkit-text-stroke: 0;
}
.ss-foil.ss-grad.ss-duo::after {
-webkit-text-fill-color: inherit;
} }
/** /**
* Fixed width */ * Fixed width */
@ -1437,75 +1388,160 @@
.ss-30a:before { .ss-30a:before {
content: "\e9aa"; content: "\e9aa";
} }
/**
*
* Border layer using ::after as well
*
* Symbols cannot have both .duo and .border applied as both
* make use of the same pseudoelement in v3.
*
* For duo icons that have an inner white layer as well as a
* border layer, we need to use all 3 available pseudoelements.
*/
.ss-border { .ss-border {
/*&:not(.ss-duo)::after { /**
content: ""; * specific border glyphs for these sets, handled via ::after
position: absolute; */
left: -.05em; }
top: 0em; .ss-border::before {
paint-order: stroke fill;
-webkit-text-stroke: 0.1em #000;
}
.ss-border.ss-common::before {
-webkit-text-stroke: 0.1em #fff;
}
.ss-border.ss-40k::before,
.ss-border.ss-arc::before,
.ss-border.ss-c13::before,
.ss-border.ss-c14::before,
.ss-border.ss-c15::before,
.ss-border.ss-c16::before,
.ss-border.ss-cm1::before,
.ss-border.ss-cmd::before,
.ss-border.ss-cns::before,
.ss-border.ss-dft::before,
.ss-border.ss-dmc::before,
.ss-border.ss-dsc::before,
.ss-border.ss-hop::before,
.ss-border.ss-inr::before,
.ss-border.ss-pc2::before,
.ss-border.ss-sis::before,
.ss-border.ss-van::before {
-webkit-text-stroke: 0 !important;
}
.ss-border.ss-40k:not(.ss-duo)::after,
.ss-border.ss-arc:not(.ss-duo)::after,
.ss-border.ss-c13:not(.ss-duo)::after,
.ss-border.ss-c14:not(.ss-duo)::after,
.ss-border.ss-c15:not(.ss-duo)::after,
.ss-border.ss-c16:not(.ss-duo)::after,
.ss-border.ss-cm1:not(.ss-duo)::after,
.ss-border.ss-cmd:not(.ss-duo)::after,
.ss-border.ss-cns:not(.ss-duo)::after,
.ss-border.ss-dft:not(.ss-duo)::after,
.ss-border.ss-dmc:not(.ss-duo)::after,
.ss-border.ss-dsc:not(.ss-duo)::after,
.ss-border.ss-hop:not(.ss-duo)::after,
.ss-border.ss-inr:not(.ss-duo)::after,
.ss-border.ss-pc2:not(.ss-duo)::after,
.ss-border.ss-sis:not(.ss-duo)::after,
.ss-border.ss-van:not(.ss-duo)::after {
color: #fff; color: #fff;
font-size: 1.15em; content: '';
z-index: -1; display: block;
background: #fff; font-size: 1em;
-webkit-text-stroke: 0.05em #fff; height: 100%;
-webkit-background-clip: text; left: 0;
-webkit-text-fill-color: transparent; position: absolute;
}*/ top: 0;
/*&:not(.ss-duo)::after { // this needs ::after to get the same content as ::before to work again width: 100%;
-webkit-text-stroke: 0.05em #fff;
text-stroke: 0.5em #fff;
}*/
} }
.ss-border.ss-van:after { .ss-border.ss-40k:not(.ss-duo).ss-uncommon::after,
content: "\e655"; .ss-border.ss-arc:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-c13:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-hop:after { .ss-border.ss-c14:not(.ss-duo).ss-uncommon::after,
content: "\e656"; .ss-border.ss-c15:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-c16:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-arc:after { .ss-border.ss-cm1:not(.ss-duo).ss-uncommon::after,
content: "\e657"; .ss-border.ss-cmd:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-cns:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-cmd:after { .ss-border.ss-dft:not(.ss-duo).ss-uncommon::after,
content: "\e658"; .ss-border.ss-dmc:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-dsc:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-pc2:after { .ss-border.ss-hop:not(.ss-duo).ss-uncommon::after,
content: "\e659"; .ss-border.ss-inr:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-pc2:not(.ss-duo).ss-uncommon::after,
.ss-border.ss-cm1:after { .ss-border.ss-sis:not(.ss-duo).ss-uncommon::after,
content: "\e65a"; .ss-border.ss-van:not(.ss-duo).ss-uncommon::after,
} .ss-border.ss-40k:not(.ss-duo).ss-rare::after,
.ss-border.ss-c13:after { .ss-border.ss-arc:not(.ss-duo).ss-rare::after,
content: "\e65b"; .ss-border.ss-c13:not(.ss-duo).ss-rare::after,
} .ss-border.ss-c14:not(.ss-duo).ss-rare::after,
.ss-border.ss-cns:after { .ss-border.ss-c15:not(.ss-duo).ss-rare::after,
content: "\e65c"; .ss-border.ss-c16:not(.ss-duo).ss-rare::after,
} .ss-border.ss-cm1:not(.ss-duo).ss-rare::after,
.ss-border.ss-c14:after { .ss-border.ss-cmd:not(.ss-duo).ss-rare::after,
content: "\e65d"; .ss-border.ss-cns:not(.ss-duo).ss-rare::after,
} .ss-border.ss-dft:not(.ss-duo).ss-rare::after,
.ss-border.ss-c15:after { .ss-border.ss-dmc:not(.ss-duo).ss-rare::after,
content: "\e900"; .ss-border.ss-dsc:not(.ss-duo).ss-rare::after,
} .ss-border.ss-hop:not(.ss-duo).ss-rare::after,
.ss-border.ss-inr:after { .ss-border.ss-inr:not(.ss-duo).ss-rare::after,
content: "\e9e3"; .ss-border.ss-pc2:not(.ss-duo).ss-rare::after,
} .ss-border.ss-sis:not(.ss-duo).ss-rare::after,
.ss-border.ss-sis::before { .ss-border.ss-van:not(.ss-duo).ss-rare::after,
content: "\e9b3"; .ss-border.ss-40k:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-arc:not(.ss-duo).ss-mythic::after,
.ss-border.ss-sis::after { .ss-border.ss-c13:not(.ss-duo).ss-mythic::after,
content: "\e9b2"; .ss-border.ss-c14:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-c15:not(.ss-duo).ss-mythic::after,
.ss-border.ss-c16::before { .ss-border.ss-c16:not(.ss-duo).ss-mythic::after,
content: "\e910"; .ss-border.ss-cm1:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-cmd:not(.ss-duo).ss-mythic::after,
.ss-border.ss-c16::after { .ss-border.ss-cns:not(.ss-duo).ss-mythic::after,
content: "\e9e5"; .ss-border.ss-dft:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-dmc:not(.ss-duo).ss-mythic::after,
.ss-border.ss-dft::before { .ss-border.ss-dsc:not(.ss-duo).ss-mythic::after,
content: "\e9e1"; .ss-border.ss-hop:not(.ss-duo).ss-mythic::after,
} .ss-border.ss-inr:not(.ss-duo).ss-mythic::after,
.ss-border.ss-dft::after { .ss-border.ss-pc2:not(.ss-duo).ss-mythic::after,
content: "\e9e0"; .ss-border.ss-sis:not(.ss-duo).ss-mythic::after,
.ss-border.ss-van:not(.ss-duo).ss-mythic::after,
.ss-border.ss-40k:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-arc:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c13:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c14:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c15:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-c16:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-cm1:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-cmd:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-cns:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-dft:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-dmc:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-dsc:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-hop:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-inr:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-pc2:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-sis:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-van:not(.ss-duo).ss-timeshifted::after,
.ss-border.ss-40k:not(.ss-duo).ss-foil::after,
.ss-border.ss-arc:not(.ss-duo).ss-foil::after,
.ss-border.ss-c13:not(.ss-duo).ss-foil::after,
.ss-border.ss-c14:not(.ss-duo).ss-foil::after,
.ss-border.ss-c15:not(.ss-duo).ss-foil::after,
.ss-border.ss-c16:not(.ss-duo).ss-foil::after,
.ss-border.ss-cm1:not(.ss-duo).ss-foil::after,
.ss-border.ss-cmd:not(.ss-duo).ss-foil::after,
.ss-border.ss-cns:not(.ss-duo).ss-foil::after,
.ss-border.ss-dft:not(.ss-duo).ss-foil::after,
.ss-border.ss-dmc:not(.ss-duo).ss-foil::after,
.ss-border.ss-dsc:not(.ss-duo).ss-foil::after,
.ss-border.ss-hop:not(.ss-duo).ss-foil::after,
.ss-border.ss-inr:not(.ss-duo).ss-foil::after,
.ss-border.ss-pc2:not(.ss-duo).ss-foil::after,
.ss-border.ss-sis:not(.ss-duo).ss-foil::after,
.ss-border.ss-van:not(.ss-duo).ss-foil::after {
color: #000;
} }
.ss-border.ss-40k { .ss-border.ss-40k {
display: list-item; display: list-item;
@ -1520,6 +1556,39 @@
content: "\e99a"; content: "\e99a";
color: #000; color: #000;
} }
.ss-border.ss-arc:after {
content: "\e657";
}
.ss-border.ss-c13:after {
content: "\e65b";
}
.ss-border.ss-c14:after {
content: "\e65d";
}
.ss-border.ss-c15:after {
content: "\e900";
}
.ss-border.ss-c16::before {
content: "\e910";
}
.ss-border.ss-c16::after {
content: "\e9e5";
}
.ss-border.ss-cm1:after {
content: "\e65a";
}
.ss-border.ss-cmd:after {
content: "\e658";
}
.ss-border.ss-cns:after {
content: "\e65c";
}
.ss-border.ss-dft::before {
content: "\e9e1";
}
.ss-border.ss-dft::after {
content: "\e9e0";
}
.ss-border.ss-dmc { .ss-border.ss-dmc {
display: list-item; display: list-item;
list-style-position: inside; list-style-position: inside;
@ -1549,3 +1618,21 @@
content: "\e9dd"; content: "\e9dd";
color: #000; color: #000;
} }
.ss-border.ss-hop:after {
content: "\e656";
}
.ss-border.ss-inr:after {
content: "\e9e3";
}
.ss-border.ss-pc2:after {
content: "\e659";
}
.ss-border.ss-sis::before {
content: "\e9b3";
}
.ss-border.ss-sis::after {
content: "\e9b2";
}
.ss-border.ss-van:after {
content: "\e655";
}

2
docs/icons.html
View File

@ -499,7 +499,7 @@
<div class="icon" id="cn2" name="Conspiracy 2: Take the Crown" data-name="Conspiracy 2: Take the Crown" data-class="cn2" data-unicode="e904" data-added="v1.5.2"> <div class="icon" id="cn2" name="Conspiracy 2: Take the Crown" data-name="Conspiracy 2: Take the Crown" data-class="cn2" data-unicode="e904" data-added="v1.5.2">
<span class="name"><i class="ss ss-cn2"></i> Conspiracy 2: Take the Crown <em>(cn2)</em></span> <span class="name"><i class="ss ss-cn2"></i> Conspiracy 2: Take the Crown <em>(cn2)</em></span>
</div> </div>
<div class="icon" id="c16" name="Commander 2016" data-name="Commander 2016" data-class="c16" data-unicode="e910" data-added="v1.7.0" data-duo="true"> <div class="icon" id="c16" name="Commander 2016" data-name="Commander 2016" data-class="c16" data-unicode="e910" data-added="v1.7.0" data-duo="false">
<span class="name"><i class="ss ss-c16"></i> Commander 2016 <em>(c16)</em></span> <span class="name"><i class="ss ss-c16"></i> Commander 2016 <em>(c16)</em></span>
</div> </div>
<div class="icon" id="pca" name="Planechase Anthology" data-name="Planechase Anthology" data-class="pca" data-unicode="e911" data-added="v1.7.0"> <div class="icon" id="pca" name="Planechase Anthology" data-name="Planechase Anthology" data-class="pca" data-unicode="e911" data-added="v1.7.0">

157
less/border.less
View File

@ -1,65 +1,75 @@
/**
*
* Border layer using ::after as well
*
* Symbols cannot have both .duo and .border applied as both
* make use of the same pseudoelement in v3.
*
* For duo icons that have an inner white layer as well as a
* border layer, we need to use all 3 available pseudoelements.
*/
.@{ss-prefix}-border { .@{ss-prefix}-border {
/*&:not(.ss-duo)::after { &::before {
content: ""; paint-order: stroke fill;
position: absolute; -webkit-text-stroke: 0.1em #000;
left: -.05em; }
top: 0em;
&.@{ss-prefix}-common::before {
-webkit-text-stroke: 0.1em #fff;
}
/**
* specific border glyphs for these sets, handled via ::after
*/
&.@{ss-prefix}-40k,
&.@{ss-prefix}-arc,
&.@{ss-prefix}-c13,
&.@{ss-prefix}-c14,
&.@{ss-prefix}-c15,
&.@{ss-prefix}-c16,
&.@{ss-prefix}-cm1,
&.@{ss-prefix}-cmd,
&.@{ss-prefix}-cns,
&.@{ss-prefix}-dft,
&.@{ss-prefix}-dmc,
&.@{ss-prefix}-dsc,
&.@{ss-prefix}-hop,
&.@{ss-prefix}-inr,
&.@{ss-prefix}-pc2,
&.@{ss-prefix}-sis,
&.@{ss-prefix}-van {
&::before {
-webkit-text-stroke: 0 !important;
}
&:not(.ss-duo) {
&::after {
color: #fff; color: #fff;
font-size: 1.15em; content: '';
z-index: -1; display: block;
background: #fff; font-size: 1em;
-webkit-text-stroke: 0.05em #fff; height: 100%;
-webkit-background-clip: text; left: 0;
-webkit-text-fill-color: transparent; position: absolute;
}*/ top: 0;
/*&:not(.ss-duo)::after { // this needs ::after to get the same content as ::before to work again width: 100%;
-webkit-text-stroke: 0.05em #fff; }
text-stroke: 0.5em #fff;
}*/
&.@{ss-prefix}-van:after { content: "\e655"; } // Vanguard // all non-common rarities get a black border
&.@{ss-prefix}-hop:after { content: "\e656"; } // Planechase 2009 &.@{ss-prefix}-uncommon::after,
&.@{ss-prefix}-arc:after { content: "\e657"; } // Archenemy &.@{ss-prefix}-rare::after,
&.@{ss-prefix}-cmd:after { content: "\e658"; } // Commander &.@{ss-prefix}-mythic::after,
&.@{ss-prefix}-pc2:after { content: "\e659"; } // Planechase 2012 &.@{ss-prefix}-timeshifted::after,
&.@{ss-prefix}-cm1:after { content: "\e65a"; } // Commander's Arsenal &.@{ss-prefix}-foil::after {
&.@{ss-prefix}-c13:after { content: "\e65b"; } // Commander 2013 color: #000;
&.@{ss-prefix}-cns:after { content: "\e65c"; } // Conspiracy
&.@{ss-prefix}-c14:after { content: "\e65d"; } // Commander 2014
&.@{ss-prefix}-c15:after { content: "\e900"; } // Commander 2015
&.@{ss-prefix}-inr:after { content: "\e9e3"; } // Innistrad Remastered
// corrections for various duo icons
// SIS: the regular symbol becomes the border now
&.@{ss-prefix}-sis {
&::before {
content: "\e9b3";
} }
&::after {
content: "\e9b2";
}
}
// c16: regular symbol becomes the border
&.@{ss-prefix}-c16 {
&::before {
content: "\e910"; // rarity
}
&::after {
content: "\e9e5"; // new border
}
}
// dft: regular symbol becomes the border
&.@{ss-prefix}-dft {
&::before {
content: "\e9e1"; // rarity
}
&::after {
content: "\e9e0"; // new border
} }
} }
// experimental ::marker for 3 layer icons // glyphs per set
&.@{ss-prefix}-40k { //
&.@{ss-prefix}-40k { // experimental ::marker for 3 layer icons
display: list-item; display: list-item;
list-style-position: inside; list-style-position: inside;
@ -73,6 +83,29 @@
color: #000; color: #000;
} }
} }
&.@{ss-prefix}-arc:after { content: "\e657"; } // Archenemy
&.@{ss-prefix}-c13:after { content: "\e65b"; } // Commander 2013
&.@{ss-prefix}-c14:after { content: "\e65d"; } // Commander 2014
&.@{ss-prefix}-c15:after { content: "\e900"; } // Commander 2015
&.@{ss-prefix}-c16 { // c16: regular symbol becomes the border
&::before {
content: "\e910"; // rarity
}
&::after {
content: "\e9e5"; // new border
}
}
&.@{ss-prefix}-cm1:after { content: "\e65a"; } // Commander's Arsenal
&.@{ss-prefix}-cmd:after { content: "\e658"; } // Commander
&.@{ss-prefix}-cns:after { content: "\e65c"; } // Conspiracy
&.@{ss-prefix}-dft { // dft: regular symbol becomes the border
&::before {
content: "\e9e1"; // rarity
}
&::after {
content: "\e9e0"; // new border
}
}
&.@{ss-prefix}-dmc { &.@{ss-prefix}-dmc {
display: list-item; display: list-item;
list-style-position: inside; list-style-position: inside;
@ -87,7 +120,7 @@
color: #000; color: #000;
} }
} }
&.@{ss-prefix}-dsc { &.@{ss-prefix}-dsc { // experimental ::marker for 3 layer icons
display: list-item; display: list-item;
list-style-position: inside; list-style-position: inside;
@ -105,4 +138,16 @@
color: #000; color: #000;
} }
} }
&.@{ss-prefix}-hop:after { content: "\e656"; } // Planechase 2009
&.@{ss-prefix}-inr:after { content: "\e9e3"; } // Innistrad Remastered
&.@{ss-prefix}-pc2:after { content: "\e659"; } // Planechase 2012
&.@{ss-prefix}-sis { // SIS: the regular symbol becomes the border now
&::before {
content: "\e9b3";
}
&::after {
content: "\e9b2";
}
}
&.@{ss-prefix}-van:after { content: "\e655"; } // Vanguard
} }

96
less/rarities.less
View File

@ -1,114 +1,66 @@
/** /**
* Rarity colors */ * Rarity colors */
.@{ss-prefix}-common { .@{ss-prefix}-common {
color: #1A1718; color: #1A1718;
&.@{ss-prefix}-grad { }
// webkit outline/gradient
.@{ss-prefix}-grad {
&::before {
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#302b2c), color-stop(50%,#474040), color-stop(100%,#302b2c)); /* Chrome,Safari4+ */ 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+ background: -webkit-linear-gradient(left, #302b2c 1%, #474040 50%, #302b2c 100%); // Chrome10+,Safari5.1+
-webkit-text-stroke: 0.03em #000; background: linear-gradient(90deg, #302b2c 0%, #474040 50%, #302b2c 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text !important;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
&.@{ss-prefix}-no-border,
&.@{ss-prefix}-duo {
-webkit-text-stroke: 0;
} }
&.@{ss-prefix}-duo::after {
-webkit-text-fill-color: inherit;
} }
} }
.@{ss-prefix}-uncommon { .@{ss-prefix}-uncommon {
color: #707883; color: #707883;
&.@{ss-prefix}-grad { &.@{ss-prefix}-grad::before {
// 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-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+ background: -webkit-linear-gradient(left, #5a6572 0%, #9e9e9e 50%, #5a6572 100%); // Chrome10+,Safari5.1+
-webkit-text-stroke: 0.03em #111; background: linear-gradient(90deg, #5a6572 0%, #9e9e9e 50%, #5a6572 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
&.@{ss-prefix}-no-border,
&.@{ss-prefix}-duo {
-webkit-text-stroke: 0;
}
&.@{ss-prefix}-duo::after {
-webkit-text-fill-color: inherit;
}
} }
} }
.@{ss-prefix}-rare { .@{ss-prefix}-rare {
color: #A58E4A; color: #A58E4A;
&.@{ss-prefix}-grad { &.@{ss-prefix}-grad::before {
// 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-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+ background: -webkit-linear-gradient(left, #876a3b 0%, #dfbd6b 50%, #876a3b 100%); // Chrome10+,Safari5.1+
-webkit-text-stroke: 0.03em #333; background: linear-gradient(90deg, #876a3b 0%, #dfbd6b 50%, #876a3b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
&.@{ss-prefix}-no-border,
&.@{ss-prefix}-duo {
-webkit-text-stroke: 0;
}
&.@{ss-prefix}-duo::after {
-webkit-text-fill-color: inherit;
}
} }
} }
.@{ss-prefix}-mythic { .@{ss-prefix}-mythic {
color: #BF4427; color: #BF4427;
&.@{ss-prefix}-grad { &.@{ss-prefix}-grad::before {
// 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-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+ background: -webkit-linear-gradient(left, #b21f0f 0%, #f38300 50%, #b21f0f 100%); // Chrome10+, Safari5.1+
-webkit-text-stroke: 0.03em #333; background: linear-gradient(90deg, #b21f0f 0%, #f38300 50%, #b21f0f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
&.@{ss-prefix}-no-border,
&.@{ss-prefix}-duo {
-webkit-text-stroke: 0;
}
&.@{ss-prefix}-duo::after {
-webkit-text-fill-color: inherit;
}
} }
} }
.@{ss-prefix}-timeshifted { .@{ss-prefix}-timeshifted {
color: #652978; color: #652978;
&.@{ss-prefix}-grad { &.@{ss-prefix}-grad::before {
// webkit outline/gradient
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#652978), color-stop(50%,#c09ac5), color-stop(100%,#652978)); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#652978), color-stop(50%,#c09ac5), color-stop(100%,#652978)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #652978 0%,#c09ac5 50%,#652978 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(-45deg, #652978 0%,#c09ac5 50%,#652978 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #652978 0%,#c09ac5 50%,#652978 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(90deg, #652978 0%,#c09ac5 50%,#652978 100%);
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
&.@{ss-prefix}-no-border,
&.@{ss-prefix}-duo {
-webkit-text-stroke: 0;
}
&.@{ss-prefix}-duo::after {
-webkit-text-fill-color: inherit;
}
} }
} }
.@{ss-prefix}-foil { .@{ss-prefix}-foil {
color: #a6dced; color: #a6dced;
&.@{ss-prefix}-grad { &.@{ss-prefix}-grad::before {
// webkit outline/gradient
background: -webkit-linear-gradient(-45deg, #ea8d66 0%,#ea8d66 10%,#fdef8a 17%,#8bcc93 33%,#a6dced 50%,#6f75aa 67%,#e599c2 83%,#eeeeee 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(-45deg, #ea8d66 0%,#ea8d66 10%,#fdef8a 17%,#8bcc93 33%,#a6dced 50%,#6f75aa 67%,#e599c2 83%,#eeeeee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ea8d66 0%,#ea8d66 15%,#fdef8a 28%,#8bcc93 42%,#a6dced 55%,#6f75aa 68%,#e599c2 84%,#e599c2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(135deg, #ea8d66 0%,#ea8d66 15%,#fdef8a 28%,#8bcc93 42%,#a6dced 55%,#6f75aa 68%,#e599c2 84%,#e599c2 100%);
-webkit-text-stroke: 0.03em #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
&.@{ss-prefix}-no-border,
&.@{ss-prefix}-duo {
-webkit-text-stroke: 0;
}
&.@{ss-prefix}-duo::after {
-webkit-text-fill-color: inherit;
}
} }
} }