diff --git a/css/classic.css b/css/classic.css index a391737..0278e5b 100644 --- a/css/classic.css +++ b/css/classic.css @@ -9,6 +9,7 @@ padding: 0; opacity: 100%; border-radius: 1px; + box-shadow: 2px 2px 4px #000a; } .I.mino { diff --git a/css/common.css b/css/common.css index 0091a06..ea1e1b7 100644 --- a/css/common.css +++ b/css/common.css @@ -21,6 +21,14 @@ body { background-color: rgb(37, 41, 45); } +#matrixCard { + background: radial-gradient(#222, rgb(37, 41, 45)) +} + +.card-header { + text-shadow: 0 0 2px black; +} + .modal-title { text-shadow: 0 0 8px var(--bs-light); } diff --git a/css/pop.css b/css/pop.css index caf8093..5f03d18 100644 --- a/css/pop.css +++ b/css/pop.css @@ -24,6 +24,7 @@ body[data-bs-theme="dark"] { #matrixTable { border-spacing: 1px; + background: repeating-linear-gradient(transparent, #1118 1px); } tr.matrix td:not(.mino) { @@ -31,7 +32,7 @@ tr.matrix td:not(.mino) { } .mino { - background: radial-gradient(rgba(0, 0, 0, 25%) 10%, var(--color) 150%); + background: radial-gradient(#fff3 0%, var(--color) 170%); border: 2px solid var(--color); border-radius: 0; outline: 1px solid #0006; @@ -40,31 +41,31 @@ tr.matrix td:not(.mino) { } .I.mino { - --color: #9bf6ff; + --color: #00eaf5; } .J.mino { - --color: #a0c4ff; + --color: #00a9f7; } .L.mino { - --color: #ffd6a5; + --color: #f9b600; } .O.mino { - --color: #fdffb6; + --color: #f7f200;; } .T.mino { - --color: #bdb2ff; + --color: #d136e2;; } .S.mino { - --color: #caffbf; + --color: #35da3f; } .Z.mino { - --color: #ffadad; + --color: #ee3b3a; } .ghost.mino { @@ -78,6 +79,7 @@ tr.matrix td:not(.mino) { .locking.mino { --color: white; + box-shadow: 0 0 10px var(--color); } @keyframes locked-animation { diff --git a/css/retro.css b/css/retro.css index 58a8c6d..ff1f6c2 100644 --- a/css/retro.css +++ b/css/retro.css @@ -48,6 +48,7 @@ body { #statsTable, .card, +.card-header, #messagesSpan { font-family: "Early GameBoy", monospace; font-smooth: never;