Adds outlined version of loyalty symbols that a few cards use in the card text (#97)

This commit is contained in:
Andrew Gioia 2023-03-10 15:42:43 -05:00
parent ee43118df7
commit 7a86b2ce31
No known key found for this signature in database
GPG Key ID: FC09694A000800C8
7 changed files with 63 additions and 6 deletions

View File

@ -1073,6 +1073,9 @@ span.ms-half > .ms-cost {
.ms-loyalty-start {
font-size: 2em;
}
.ms-loyalty-zero::after {
line-height: 2.1em !important;
}
.ms-loyalty-0::after, .ms-loyalty-1::after, .ms-loyalty-2::after, .ms-loyalty-3::after, .ms-loyalty-4::after, .ms-loyalty-5::after, .ms-loyalty-6::after, .ms-loyalty-7::after, .ms-loyalty-8::after, .ms-loyalty-9::after, .ms-loyalty-10::after, .ms-loyalty-11::after, .ms-loyalty-12::after, .ms-loyalty-13::after, .ms-loyalty-14::after, .ms-loyalty-15::after, .ms-loyalty-16::after, .ms-loyalty-17::after, .ms-loyalty-18::after, .ms-loyalty-19::after, .ms-loyalty-20::after, .ms-loyalty-25::after, .ms-loyalty-x::after {
color: #fff;
display: inline-block;
@ -1288,7 +1291,20 @@ span.ms-half > .ms-cost {
.ms-loyalty-down.ms-loyalty-x::after {
content: "-X";
}
.ms-loyalty-outline::before {
color: transparent;
-webkit-text-stroke: 0.03em #111;
}
.ms-loyalty-outline::after {
color: #111;
}
.ms-loyalty-outline.ms-loyalty-start {
font-size: 1.6em;
}
.ms-saga {
color: #111;
}
.ms-saga-1::after, .ms-saga-2::after, .ms-saga-3::after, .ms-saga-4::after, .ms-saga-5::after {
color: #fff;
display: inline-block;

File diff suppressed because one or more lines are too long

2
css/mana.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -247,7 +247,12 @@
<i class="ms ms-loyalty-down ms-loyalty-x ms-3x"></i>
<i class="ms ms-loyalty-zero ms-loyalty-0 ms-3x"></i>
<i class="ms ms-loyalty-start ms-loyalty-4 ms-4x"></i>
&nbsp;&nbsp;
<i class="ms ms-loyalty-up ms-loyalty-2 ms-loyalty-outline"></i>
<i class="ms ms-loyalty-down ms-loyalty-1 ms-loyalty-outline"></i>
<i class="ms ms-loyalty-zero ms-loyalty-0 ms-loyalty-outline"></i>
<i class="ms ms-loyalty-start ms-loyalty-5 ms-loyalty-outline"></i>
</p>
<p class="grid">
<i class="ms ms-saga ms-saga-1 ms-2x"></i>
<i class="ms ms-saga ms-saga-2 ms-2x"></i>
<i class="ms ms-saga ms-saga-3 ms-2x"></i>

View File

@ -14,10 +14,13 @@
text-align: center;
}
// start
// variant alterations
&-start {
font-size: 2.0em; // increase the size a bit by default
}
&-zero::after {
line-height: 2.1em !important; // slight correction
}
// base styles for counters
&-0::after,
@ -132,6 +135,21 @@
&.@{ms-prefix}-loyalty-x::after { content: "-X"; }
}
// outline style for card text
&-outline {
&::before {
color: transparent;
-webkit-text-stroke: 0.03em #111;
}
&::after {
color: #111;
}
// correction for starting loyalty size
&.#{$ms-prefix}-loyalty-start {
font-size: 1.6em;
}
}
}
// saga loyalty

View File

@ -14,10 +14,13 @@
text-align: center;
}
// start
// variant alterations
&-start {
font-size: 2.0em; // increase the size a bit by default
}
&-zero::after {
line-height: 2.1em !important; // slight correction
}
// base styles for counters
&-0::after,
@ -137,6 +140,21 @@
&-x::after { content: "-X"; }
}
}
// outline style for card text
&-outline {
&::before {
color: transparent;
-webkit-text-stroke: 0.03em #111;
}
&::after {
color: #111;
}
// correction for starting loyalty size
&.#{$ms-prefix}-loyalty-start {
font-size: 1.6em;
}
}
}
// saga loyalty