mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-08-01 08:36:37 -05:00
127 lines
2.4 KiB
CSS
127 lines
2.4 KiB
CSS
:root {
|
|
--tier-bg-1: hsl(45, 100%, 47%);
|
|
--tier-bg-2: hsl(280, 90%, 44%);
|
|
--tier-bg-3: hsl(280, 65%, 52%);
|
|
--tier-bg-4: hsl(212, 95%, 44%);
|
|
--tier-bg-5: hsl(212, 80%, 51%);
|
|
--tier-bg-6: hsl(145, 80%, 34%);
|
|
--tier-bg-7: hsl(145, 60%, 41%);
|
|
--tier-bg-8: hsl(220, 10%, 40%);
|
|
--tier-bg-9: hsl(220, 8%, 49%);
|
|
--tier-text-1: hsl(45, 100%, 12%);
|
|
--tier-text-2: hsl(280, 100%, 94%);
|
|
--tier-text-3: hsl(280, 100%, 95%);
|
|
--tier-text-4: hsl(212, 100%, 93%);
|
|
--tier-text-5: hsl(212, 100%, 95%);
|
|
--tier-text-6: hsl(145, 85%, 92%);
|
|
--tier-text-7: hsl(145, 75%, 94%);
|
|
--tier-text-8: hsl(220, 15%, 92%);
|
|
--tier-text-9: hsl(220, 15%, 95%);
|
|
}
|
|
|
|
.pill {
|
|
font-size: var(--font-2xs);
|
|
font-weight: var(--weight-bold);
|
|
border-radius: var(--radius-selector);
|
|
padding: 0 var(--s-1-5);
|
|
height: var(--selector-size-sm);
|
|
display: grid;
|
|
place-items: center;
|
|
min-width: 33px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tierX {
|
|
--_polished-bg: var(--tier-bg-1);
|
|
background-color: var(--tier-bg-1);
|
|
color: var(--tier-text-1);
|
|
}
|
|
|
|
.tierSPlus {
|
|
--_polished-bg: var(--tier-bg-2);
|
|
background-color: var(--tier-bg-2);
|
|
color: var(--tier-text-2);
|
|
}
|
|
|
|
.tierS {
|
|
--_polished-bg: var(--tier-bg-3);
|
|
background-color: var(--tier-bg-3);
|
|
color: var(--tier-text-3);
|
|
}
|
|
|
|
.tierAPlus {
|
|
background-color: var(--tier-bg-4);
|
|
color: var(--tier-text-4);
|
|
}
|
|
|
|
.tierA {
|
|
background-color: var(--tier-bg-5);
|
|
color: var(--tier-text-5);
|
|
}
|
|
|
|
.tierBPlus {
|
|
background-color: var(--tier-bg-6);
|
|
color: var(--tier-text-6);
|
|
}
|
|
|
|
.tierB {
|
|
background-color: var(--tier-bg-7);
|
|
color: var(--tier-text-7);
|
|
}
|
|
|
|
.tierCPlus {
|
|
background-color: var(--tier-bg-8);
|
|
color: var(--tier-text-8);
|
|
}
|
|
|
|
.tierC {
|
|
background-color: var(--tier-bg-9);
|
|
color: var(--tier-text-9);
|
|
}
|
|
|
|
.polished {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-image: linear-gradient(
|
|
160deg,
|
|
hsl(from var(--_polished-bg) calc(h + 2) s calc(l + 14)),
|
|
var(--_polished-bg) 50%,
|
|
hsl(from var(--_polished-bg) calc(h - 3) s calc(l - 9))
|
|
);
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
115deg,
|
|
transparent 35%,
|
|
hsl(0, 0%, 100%, 0.5) 50%,
|
|
transparent 65%
|
|
);
|
|
transform: translateX(-100%);
|
|
animation: shine-sweep 6s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes shine-sweep {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
12% {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.polished::after {
|
|
animation: none;
|
|
visibility: hidden;
|
|
}
|
|
}
|