improve style

css/common.css

@@ -56,7 +56,10 @@ tr.buffer-zone td:not(.mino) {
 }
 
 tr.matrix td:not(.mino) {
-    border: 1px solid #333;
+    border-left  : 1px solid #333;
+    border-right : 1px solid #333;
+    border-top   : 1px solid #303030;
+    border-bottom: 1px solid #303030;
 }
 
 td {

css/electro.css

@@ -30,8 +30,8 @@ body {
     --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.7)   0%,
+        rgba(204, 238, 247, 0.9)   0%,
-        rgba(0, 159, 218, 0.7) 150%);
+        rgba(10, 159, 218, 0.9) 150%);
     mask: 
        linear-gradient(#666 0 0) content-box, 
        linear-gradient(#fff 0 0);
@@ -44,11 +44,10 @@ body {
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 3px;
     box-shadow:
-        -1px -1px 8px rgba(242, 255, 255, 16%),
+        -1px -1px 8px rgba(242, 255, 255, 32%),
-        -1px  1px 8px rgba(242, 255, 255, 16%),
+        -1px  1px 8px rgba(242, 255, 255, 32%),
-         1px -1px 8px rgba(242, 255, 255, 16%),
+         1px -1px 8px rgba(242, 255, 255, 32%),
-         1px  1px 8px rgba(242, 255, 255, 16%);
+         1px  1px 8px rgba(242, 255, 255, 32%);
-    filter: blur(1px);
 }
 
 .moving.mino {
@@ -58,14 +57,15 @@ body {
 }
 
 .locking.mino {
-    border-width: 1px;
+    border-width: 3px;
     background: rgba(186, 211, 255, 70%);
     border-color: rgba(242, 255, 255, 0.7);
+    border-radius: 4px;
     box-shadow:
-        -1px -1px 4px rgba(186, 211, 255, 27%),
+        -1px -1px 8px rgba(186, 211, 255, 27%),
-        -1px  1px 4px rgba(186, 211, 255, 27%),
+        -1px  1px 8px rgba(186, 211, 255, 27%),
-         1px -1px 4px rgba(186, 211, 255, 27%),
+         1px -1px 8px rgba(186, 211, 255, 27%),
-         1px  1px 4px rgba(186, 211, 255, 27%);
+         1px  1px 8px rgba(186, 211, 255, 27%);
 }
 
 @keyframes locked-animation {

css/pop.css

@@ -14,6 +14,13 @@ body {
     }
 }
 
+tr.matrix td:not(.mino) {
+    border-left  : 1px solid #222;
+    border-right : 1px solid #222;
+    border-top   : 1px solid #111;
+    border-bottom: 1px solid #111;
+}
+
 .mino {
     background: rgba(255, 255, 255, 33%);
     border: 6px solid var(--color);

css/retro.css

@@ -121,11 +121,61 @@ td {
 }
 
 @keyframes cleared-line-animation {
-    from {
+    5% {
-        background-color: rgb(206, 255, 255, 40%);
+        opacity: 0;
-        filter: saturate(50%) brightness(300%);
     }
-    to {
+    10% {
-        background-color: transparent;
+        opacity: 100%;
+    }
+    15% {
+        opacity: 0;
+    }
+    20% {
+        opacity: 100%;
+    }
+    25% {
+        opacity: 0;
+    }
+    30% {
+        opacity: 100%;
+    }
+    35% {
+        opacity: 0;
+    }
+    40% {
+        opacity: 100%;
+    }
+    45% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 100%;
+    }
+    55% {
+        opacity: 0;
+    }
+    60% {
+        opacity: 100%;
+    }
+    65% {
+        opacity: 0;
+    }
+    70% {
+        opacity: 100%;
+    }
+    75% {
+        opacity: 0;
+    }
+    80% {
+        opacity: 100%;
+    }
+    85% {
+        opacity: 0;
+    }
+    90% {
+        opacity: 100%;
+    }
+    95% {
+        opacity: 0;
     }
 }

index.html

@@ -10,9 +10,9 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="css/classic.css" title="Classique">
+    <link rel="alternate stylesheet" href="css/minimal.css" title="Minimal">
     <link rel="alternate stylesheet" href="css/electro.css" title="Électro">
     <link rel="alternate stylesheet" href="css/pop.css" title="Pop">
-    <link rel="alternate stylesheet" href="css/minimal.css" title="Minimal">
     <link rel="alternate stylesheet" href="css/retro.css" title="Rétro">
     <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="favicons/T-2.png">
@@ -62,9 +62,9 @@
                 <div class="col-sm-4">
                   <select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="document.selectedStyleSheetSet=this.value">
                     <option selected>Classique</option>
+                    <option>Minimal</option>
                     <option>Pop</option>
                     <option>Électro</option>
-                    <option>Minimal</option>
                     <option>Rétro</option>
                   </select>
                 </div>
@@ -200,31 +200,13 @@
     </div>
 
     <span style="display: none;">
-      <img src="I-0.png"/>
+      <img src="I-0.png"/><img src="I-1.png"/><img src="I-2.png"/><img src="I-3.png"/>
-      <img src="I-1.png"/>
+      <img src="J-0.png"/><img src="J-1.png"/><img src="J-2.png"/><img src="J-3.png"/>
-      <img src="I-2.png"/>
+      <img src="L-0.png"/><img src="L-1.png"/><img src="L-2.png"/><img src="L-3.png"/>
-      <img src="I-3.png"/>
-      <img src="J-0.png"/>
-      <img src="J-1.png"/>
-      <img src="J-2.png"/>
-      <img src="J-3.png"/>
-      <img src="L-0.png"/>
-      <img src="L-1.png"/>
-      <img src="L-2.png"/>
-      <img src="L-3.png"/>
       <img src="O-0.png"/>
-      <img src="S-0.png"/>
+      <img src="S-0.png"/><img src="S-1.png"/><img src="S-2.png"/><img src="S-3.png"/>
-      <img src="S-1.png"/>
+      <img src="T-0.png"/><img src="T-1.png"/><img src="T-2.png"/><img src="T-3.png"/>
-      <img src="S-2.png"/>
+      <img src="Z-0.png"/><img src="Z-1.png"/><img src="Z-2.png"/><img src="Z-3.png"/>
-      <img src="S-3.png"/>
-      <img src="T-0.png"/>
-      <img src="T-1.png"/>
-      <img src="T-2.png"/>
-      <img src="T-3.png"/>
-      <img src="Z-0.png"/>
-      <img src="Z-1.png"/>
-      <img src="Z-2.png"/>
-      <img src="Z-3.png"/>
     </span>
     
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>