From 1b18b0061906adc2415839d22345f922a76365dd Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Tue, 28 Nov 2023 23:25:15 +0100
Subject: [PATCH] improve styles

---
 css/electro.css | 32 ++++++++++++++++++--------------
 css/minimal.css |  4 ++--
 css/pop.css     | 25 +++++++++++++------------
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/css/electro.css b/css/electro.css
index d05c7c3..8b4ae7e 100644
--- a/css/electro.css
+++ b/css/electro.css
@@ -8,13 +8,14 @@ body {
 }
 
 .mino:not(.ghost):not(.locking) {
-    padding: 0;
+    padding: 1px;
     position: relative;
     z-index: 0;
-    box-shadow: -1px -1px 4px rgba(128, 128, 128, 25%),
-        -1px 1px 4px rgba(128, 128, 128, 25%),
-        1px -1px 4px rgba(128, 128, 128, 25%),
-        1px 1px 4px rgba(128, 128, 128, 25%);
+    box-shadow:
+        -1px -1px 4px rgba(128, 128, 128, 25%),
+        -1px  1px 4px rgba(128, 128, 128, 25%),
+         1px -1px 4px rgba(128, 128, 128, 25%),
+         1px  1px 4px rgba(128, 128, 128, 25%);
 }
 
 .mino:not(.ghost):not(.locking):before {
@@ -22,14 +23,15 @@ body {
     position: absolute;
     z-index: -1;
     inset: 0;
-    padding: 1px;
-    border-radius: 0.3vmin;
+    margin: 1px;
+    padding: 2px;
+    border-radius: 4px;
     --glint-x: calc(50% + 50% * (var(--piece-column) - var(--column))/10);
     --glint-y: calc(50% + 50% * (var(--piece-row) - var(--row))/25);
     background: radial-gradient(
         at var(--glint-x) var(--glint-y),
-        rgba(204, 238, 247, 0.9)   0%,
-        rgba(0, 159, 218, 0.9) 150%);
+        rgba(204, 238, 247, 0.7)   0%,
+        rgba(0, 159, 218, 0.7) 150%);
     mask: 
        linear-gradient(#666 0 0) content-box, 
        linear-gradient(#fff 0 0);
@@ -46,11 +48,12 @@ body {
         -1px  1px 8px rgba(242, 255, 255, 16%),
          1px -1px 8px rgba(242, 255, 255, 16%),
          1px  1px 8px rgba(242, 255, 255, 16%);
+    filter: blur(1px);
 }
 
 .moving.mino {
     border-width: 1px;
-    background: rgba(186, 211, 255, 30%);
+    background:   rgba(186, 211, 255, 30%);
     border-color: rgba(242, 255, 255, 0.7);
 }
 
@@ -58,10 +61,11 @@ body {
     border-width: 1px;
     background: rgba(186, 211, 255, 70%);
     border-color: rgba(242, 255, 255, 0.7);
-    box-shadow: -1px -1px 4px rgba(186, 211, 255, 27%),
-        -1px 1px 4px rgba(186, 211, 255, 27%),
-        1px -1px 4px rgba(186, 211, 255, 27%),
-        1px 1px 4px rgba(186, 211, 255, 27%);
+    box-shadow:
+        -1px -1px 4px rgba(186, 211, 255, 27%),
+        -1px  1px 4px rgba(186, 211, 255, 27%),
+         1px -1px 4px rgba(186, 211, 255, 27%),
+         1px  1px 4px rgba(186, 211, 255, 27%);
 }
 
 @keyframes locked-animation {
diff --git a/css/minimal.css b/css/minimal.css
index dd90dab..5ca8b15 100644
--- a/css/minimal.css
+++ b/css/minimal.css
@@ -71,7 +71,7 @@ tr.matrix td:not(.mino) {
 }
 
 .ghost.mino {
-    --background-color: rgba(175, 175, 175, 80%);
+    opacity: 50%;
     box-shadow: none;
 }
 
@@ -99,6 +99,6 @@ tr.matrix td:not(.mino) {
         background-color: #eeeeee;
     }
     to {
-        background-color: #363941;
+        background-color: transparent;
     }
 }
\ No newline at end of file
diff --git a/css/pop.css b/css/pop.css
index 8aec632..051d02f 100644
--- a/css/pop.css
+++ b/css/pop.css
@@ -15,40 +15,41 @@ body {
 }
 
 .mino {
-    background: rgba(255, 255, 255, 10%);
-    border: 5px solid;
+    background: rgba(255, 255, 255, 33%);
+    border: 6px solid var(--color);
     padding: 0;
     opacity: 100%;
     border-radius: 4px;
-    filter: blur(1px)
+    filter: blur(1px);
+    box-shadow: 0 0 10px var(--color);
 }
 
 .I.mino {
-    border-color: #9bf6ff;
+    --color: #9bf6ff;
 }
 
 .J.mino {
-    border-color: #a0c4ff;
+    --color: #a0c4ff;
 }
 
 .L.mino {
-    border-color: #ffd6a5;
+    --color: #ffd6a5;
 }
 
 .O.mino {
-    border-color: #fdffb6;
+    --color: #fdffb6;
 }
 
 .T.mino {
-    border-color: #bdb2ff;
+    --color: #bdb2ff;
 }
 
 .S.mino {
-    border-color: #caffbf;
+    --color: #caffbf;
 }
 
 .Z.mino {
-    border-color: #ffadad;
+    --color: #ffadad;
 }
 
 .ghost.mino {
@@ -61,14 +62,14 @@ body {
 }
 
 .locking.mino {
-    border-color: white;
+    --color: white;
     filter: blur(2px);
 }
 
 @keyframes locked-animation {
     from {
         background: white;
-        border-color: white;
+        --color: white;
     }
 }