rename styles

2026-01-03 04:52:13 +01:00
parent d2d4a8e737
commit 3f665d115a
4 changed files with 75 additions and 3 deletions
--- a/css/synthwave.css
+++ b/css/synthwave.css
@@ -0,0 +1,123 @@
+body {
+    background-image: url("new-wave/bg.png");
+    background-size: cover;
+}
+
+body[data-bs-theme="dark"] {
+    --bs-body-bg: #2125296b;
+}
+
+.btn-dark {
+    --bs-btn-bg: #2125296b;
+}
+
+.card,
+#matrixCard {
+    background: repeating-linear-gradient(transparent, #111 1px);
+    backdrop-filter: blur(3px);
+}
+
+.card-header {
+    background-color: rgba(37, 41, 45, 50%);
+}
+
+#matrixTable {
+    border-spacing: 1px;
+}
+
+tr.matrix td:not(.mino) {
+    border: 1px solid #111;
+}
+
+.mino {
+    background: radial-gradient(#fff3 0%, var(--color) 170%);
+    border: 2px solid var(--color);
+    border-radius: 0;
+    outline: 1px solid #0006;
+    opacity: 100%;
+    box-shadow: 0 0 12px var(--color);
+}
+
+.I.mino {
+    --color: #00eaf5;
+}
+
+.J.mino {
+    --color: #00a9f7;
+}
+
+.L.mino {
+    --color: #f9b600;
+}
+
+.O.mino {
+    --color: #f7f200;;
+}
+
+.T.mino {
+    --color: #d136e2;;
+}
+
+.S.mino {
+    --color: #35da3f;
+}
+
+.Z.mino {
+    --color: #ee3b3a;
+}
+
+.ghost.mino {
+    background: transparent;
+    opacity: 50%;
+}
+
+.moving.mino {
+    filter: brightness(120%);
+}
+
+.locking.mino {
+    --color: white;
+    box-shadow: 0 0 10px var(--color);
+}
+
+@keyframes locked-animation {
+    from {
+        background: white;
+        --color: white;
+    }
+}
+
+.locked.mino {
+    animation: locked-animation;
+    animation-duration: 0.2s;
+}
+
+.disabled.mino {
+    outline: 0px;
+    box-shadow: none;
+    filter: contrast(40%) brightness(50%);
+}
+
+tr.cleared-line-animation {
+    animation: none;
+}
+
+tr.cleared-line-animation::after {
+    content: "";
+    width: 100%;
+    height: var(--cell-side);
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    display: block;
+    background: repeating-linear-gradient(transparent, #fffb 1px);
+    opacity: 0;
+    animation: cleared-line-animation ease-out .3s;
+}
+
+@keyframes cleared-line-animation {
+    25% {
+        width: 200%;
+        opacity: 100%;
+    }
+}