New: Move to CSS Variables for Colorings

This commit is contained in:
Qstick
2021-11-21 17:00:02 -06:00
parent 8d39d5c6bb
commit 2b58f3131e
90 changed files with 354 additions and 547 deletions
+10 -14
View File
@@ -14,13 +14,13 @@
width: 0;
height: 100%;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
color: $white;
color: var(--white);
transition: width 0.6s ease;
}
.frontTextContainer {
z-index: 1;
color: $white;
color: var(--white);
}
.backTextContainer,
@@ -42,39 +42,35 @@
}
.primary {
background-color: $primaryColor;
background-color: var(--primaryColor);
}
.danger {
background-color: $dangerColor;
background-color: var(--dangerColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
}
}
.success {
background-color: $successColor;
background-color: var(--successColor);
}
.purple {
background-color: $purple;
background-color: var(--purple);
}
.warning {
background-color: $warningColor;
background-color: var(--warningColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
}
}
.info {
background-color: $infoColor;
}
.queue {
background-color: $queueColor;
background-color: var(--infoColor);
}
.small {