158 lines
2.0 KiB
CSS
158 lines
2.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
@theme {
|
|
--color-red-600: rgba(231, 0, 11, 1);
|
|
--color-red-800: rgba(159, 7, 18, 1);
|
|
--color-red-800-50: rgba(159, 7, 18, 0.5);
|
|
--color-sky-600: rgba(0, 132, 209, 1);
|
|
--color-sky-800: rgba(0, 89, 138, 1);
|
|
--color-sky-800-50: rgba(0, 89, 138, 0.5);
|
|
--color-gray-200: rgba(229, 231, 235, 1);
|
|
--color-gray-300: rgba(209, 213, 220, 1);
|
|
}
|
|
|
|
@keyframes slideInOut {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
95% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
.ring-4-red-600 {
|
|
box-shadow: 0 0 0 4px rgba(231, 0, 11, 1);
|
|
}
|
|
|
|
.ring-4-sky-600 {
|
|
box-shadow: 0 0 0 4px rgba(0, 132, 209, 1);
|
|
}
|
|
|
|
.scaler-200 {
|
|
transform: scale(2);
|
|
}
|
|
|
|
.scaler-125 {
|
|
transform: scale(1.25);
|
|
}
|
|
|
|
.scaler-105 {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.scaler-90 {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.scaler-75 {
|
|
transform: scale(0.75);
|
|
}
|
|
|
|
.scaler-50 {
|
|
transform: scale(0.5);
|
|
}
|
|
|
|
|
|
.slide-animation {
|
|
animation: slideInOut 30s ease-in-out forwards;
|
|
}
|
|
|
|
.game:nth-child(1) {
|
|
opacity: 1.00;
|
|
}
|
|
|
|
.game:nth-child(2) {
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.game:nth-child(3) {
|
|
opacity: 0.90;
|
|
}
|
|
|
|
.game:nth-child(4) {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.game:nth-child(5) {
|
|
opacity: 0.80;
|
|
}
|
|
|
|
.game:nth-child(6) {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.lose {
|
|
filter: grayscale(0.25);
|
|
}
|
|
|
|
.game.old>.background {
|
|
filter: grayscale(0.75);
|
|
}
|
|
|
|
.game.old>.background>.champion {
|
|
filter: blur(1px) grayscale(0.85);
|
|
}
|
|
|
|
.floating-box {
|
|
animation: float 5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(-0.5rem);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-1.5rem);
|
|
}
|
|
}
|
|
|
|
@keyframes slide {
|
|
|
|
0%,
|
|
40% {
|
|
transform: translateY(0%);
|
|
}
|
|
|
|
50%,
|
|
90% {
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
|
|
.slide-box {
|
|
animation: slide 15s ease-in-out infinite;
|
|
} |