new theme

css/common.css

@@ -89,6 +89,7 @@ td {
     overflow: hidden;
     width: var(--cell-side);
     height: var(--cell-side);
+    box-sizing: border-box;
 }
 
 @keyframes trail-animation {

css/pop.css

@@ -0,0 +1,64 @@
+.mino {
+  background-color: var(--color);
+  background-image: radial-gradient(
+    ellipse 140% 150% at 50% 140%,
+    var(--light),
+    var(--color) 70%,
+    var(--light) 250%
+  );
+  border: 3px outset var(--color);
+  border-top-color: var(--light);
+  border-radius: 3px;
+}
+.mino {
+  background-color: var(--color);
+  background-image: radial-gradient(
+    ellipse 130% 150% at 50% 150%,
+    var(--light),
+    var(--color) 75%,
+    var(--light) 250%
+  );
+  border: 3px outset var(--color);
+  border-top-color: var(--light);
+  border-radius: 3px;
+}
+
+.I {
+  --color: #009fcf;
+  --light: #cfeaf1;
+}
+
+.J {
+  --color: #0048a8;
+  --light: #cfdcf0;
+}
+
+.L {
+  --color: #f96700;
+  --light: #f8d3b8;
+}
+
+.O {
+  --color: #fdba00;
+  --light: #f6e0b8;
+}
+
+.S {
+  --color: #59b616;
+  --light: #dceecf;
+}
+
+.T {
+  --color: #852687;
+  --light: #e3c7e3;
+}
+
+.Z {
+  --color: #a90f16;
+  --light: #ebc6c8;
+}
+
+.ghost {
+  opacity: 35%;
+  filter: saturate(30%) brightness(150%);
+}

index.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="css/classic.css" title="Thème sélectionné" id="selectedStyleSheet">
     <link rel="alternate stylesheet" href="css/classic.css"   title="Classique">
+    <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/electro.css"   title="Électro">
     <link rel="alternate stylesheet" href="css/synthwave.css" title="Synthwave">
@@ -70,6 +71,7 @@
                 <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/pop.css">Pop</option>
                   <option value="css/minimal.css">Minimal</option>
                   <option value="css/synthwave.css">Synthwave</option>
                   <option value="css/electro.css">Électro</option>