merge and rename themes

css/jazz.css

@@ -0,0 +1,222 @@
+body {
+    --bs-gutter-x: 0;
+    background: black !important;
+}
+
+#screenRow {
+    gap: 0 !important;
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+}
+
+#screenRow {
+    --bs-gutter-x: 0;
+}
+
+.card {
+    background: black;
+    border: none;
+    border-radius: 0;
+    margin-bottom: 0.5em !important;
+    width: min-content !important;
+}
+
+.card:first-of-type {
+    border-bottom: 3px solid white;
+}
+
+.card-header,
+.card-header th{
+    background: transparent;
+    font-weight: 400 !important;
+    font-size: 1.3em;
+    border: none;
+}
+
+#screenRow .table {
+    --bs-border-width: 0;
+}
+
+.minoes-table {
+    display: flex;
+    flex-direction: column;
+    filter: 
+        drop-shadow(-2px 0 0 white)
+        drop-shadow(2px 0 0 white)
+        drop-shadow(0 -2px 0 white)
+        drop-shadow(0 2px 0 white)
+        drop-shadow(5px 8px 0 rgba(9, 9, 9, 22%));
+}
+
+.minoes-table tr {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    z-index: calc(100 - var(--row));
+}
+
+#holdTable {
+    margin: 0 0 0 auto !important;
+}
+
+#statsTable {
+    margin-right: 1.5em;
+}
+
+#statsTable tr {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+}
+
+#statsTable td,
+#statsTable th {
+    margin: 0;
+    padding: 0 !important;
+    width: auto;
+    height: auto;
+    text-transform: uppercase;
+}
+
+#statsTable th {
+    display: inline;
+    flex-flow: row;
+    font-size: 0.8em;
+    text-align: center;
+    width: 200%;
+}
+
+#statsTable td {
+    font-size: 1.3em;
+    font-weight: 600;
+    color: white;
+}
+
+td#timeCell {
+  text-align: center;
+}
+
+#matrixCard {
+    background: transparent;
+    border-top: none;
+    border-left: 3px solid white;
+    border-right: 3px solid white;
+    border-bottom: 3px solid white;
+}
+
+tr.matrix td:not(.mino) {
+    border: 0;
+}
+
+.minoes-table td {
+    display: inline-block;
+    width: var(--cell-side);
+    height: var(--cell-side);
+    padding: 0 !important;
+    z-index: calc(200 - var(--row));
+}
+
+.mino {
+    width: inherit;
+    height: inherit;
+    display: block;
+    padding: 0;
+    opacity: 100%;
+    border-width: 1px;
+    border-style: solid;
+    box-shadow: 0 -6px 0 var(--box-shadow-color);
+}
+
+.I.mino {
+    background-color: #42AFE1;
+    border-color: #6CEAFF;
+    --box-shadow-color: #6CEAFF;
+}
+
+.J.mino {
+    background-color: #1165B5;
+    border-color: #339BFF;
+    --box-shadow-color: #339BFF;
+}
+
+.L.mino {
+    background-color: #F38927;
+    border-color: #FFBA59;
+    --box-shadow-color: #FFBA59;
+}
+
+.O.mino {
+    background-color: #F6D03C;
+    border-color: #FFFF7F;
+    --box-shadow-color: #FFFF7F;
+}
+
+.S.mino {
+    background-color: #32ee3e;
+    border-color: #84F880;
+    --box-shadow-color: #84F880;
+}
+
+.T.mino {
+    background-color: #9739A2;
+    border-color: #D958E9;
+    --box-shadow-color: #D958E9;
+}
+
+.Z.mino {
+    background-color: #EB4F65;
+    border-color: #FF7F79;
+    --box-shadow-color: #FF7F79;
+}
+
+.ghost.mino {
+    background-color: #fff4;
+    border-color: #fff8;
+    opacity: 5%;
+    box-shadow: none;
+    transform: translateY(-6px);
+}
+
+.moving.mino {
+    filter: saturate(80%) brightness(130%);
+}
+
+.locking.mino {
+    filter: saturate(20%) brightness(300%);
+}
+
+.locked.mino {
+    animation: locked-animation;
+    animation-duration: 0.2s;
+}
+
+.disabled.mino {
+    filter: brightness(50%) contrast(65%);
+    opacity: 70%;
+}
+
+@keyframes locked-animation {
+    from {
+        filter: saturate(50%) brightness(300%);
+    }
+}
+
+@keyframes cleared-line-animation {
+    from {
+        background-color: #eeeeee;
+    }
+    to {
+        background-color: transparent;
+    }
+}
+
+@keyframes trail-animation {
+    from {
+        background-color: #ceffff05;
+        filter: saturate(50%) brightness(110%);
+    }
+    to {
+        background-color: transparent;
+    }
+}

css/old-school.css

@@ -4,11 +4,11 @@
 
 @font-face {
     font-family: "Early GameBoy";
-    src: url("retro/Early GameBoy.ttf");
+    src: url("old-school/Early GameBoy.ttf");
 }
 
 #screenRow {
-    background-image: url("retro/bg.png");
+    background-image: url("old-school/bg.png");
     background-size: 10px;
     padding: 40px 20px;
     border: 3px inset black;
@@ -22,7 +22,7 @@
 .card {
     background: #8D8E04;
     border-radius: 0;
-    border-image-source: url("retro/border-sm.png");
+    border-image-source: url("old-school/border-sm.png");
     border-image-slice: 25;
     border-image-width: 13px;
     border-image-repeat: repeat;
@@ -37,7 +37,7 @@
 
 #matrixCard {
     background: #808302;
-    border-image-source: url("retro/border-lg.png");
+    border-image-source: url("old-school/border-lg.png");
     border-image-slice: 30;
     border-image-width: 15px;
     border-image-outset: 15px;
@@ -89,31 +89,31 @@
 }
 
 .I.mino {
-    background-image: url("retro/I-mino.png")
+    background-image: url("old-school/I-mino.png")
 }
 
 .J.mino {
-    background-image: url("retro/J-mino.png")
+    background-image: url("old-school/J-mino.png")
 }
 
 .L.mino {
-    background-image: url("retro/L-mino.png")
+    background-image: url("old-school/L-mino.png")
 }
 
 .O.mino {
-    background-image: url("retro/O-mino.png")
+    background-image: url("old-school/O-mino.png")
 }
 
 .S.mino {
-    background-image: url("retro/S-mino.png")
+    background-image: url("old-school/S-mino.png")
 }
 
 .T.mino {
-    background-image: url("retro/T-mino.png")
+    background-image: url("old-school/T-mino.png")
 }
 
 .Z.mino {
-    background-image: url("retro/Z-mino.png")
+    background-image: url("old-school/Z-mino.png")
 }
 
 @keyframes blinker {

css/synthwave.css

@@ -31,7 +31,7 @@ body[data-bs-theme="dark"] {
 
 .mino {
   background: var(--color);
-  border: 3px solid var(--border);
+  border: 1px solid var(--border);
   box-shadow: 0 0 8px var(--border);
 }
 

index.html

@@ -14,7 +14,7 @@
     <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/synthwave.css" title="Synthwave">
-    <link rel="alternate stylesheet" href="css/retro.css"     title="Rétro">
+    <link rel="alternate stylesheet" href="css/old-school.css"     title="Rétro">
     <link rel="alternate stylesheet" href="css/opera.css"     title="Opéra">
     <link rel="alternate stylesheet" href="css/stereo.css"    title="Stéréo">
     <link rel="apple-touch-icon"      sizes="180x180" href="favicons/apple-touch-icon.png">
@@ -70,12 +70,11 @@
                 <label for="stylesheetSelect" class="col-2 col-form-label">Thème</label>
                 <div class="col-4"><select name="stylesheet" id="stylesheetSelect" class="form-select" oninput="selectedStyleSheet.href = this.value">
                   <option value="css/classic.css" selected>Classique</option>
-                  <option value="css/minimal.css">Minimal</option>
                   <option value="css/synthwave.css">Synthwave</option>
                   <option value="css/electro.css">Électro</option>
-                  <option value="css/retro.css">Rétro</option>
-                  <option value="css/opera.css">Opéra</option>
-                  <option value="css/stereo.css">Stéréo</option>
+                  <option value="css/old-school.css">Old School</option>
+                  <option value="css/jazz.css">Jazz</option>
+                  <option value="css/stereo.css">Stéréo 3D</option>
                 </select></div>
                 <div class="col-4">
                   <div class="form-check form-switch text-start">