pop2 style

css/common.css

@@ -41,6 +41,10 @@ body {
     text-align: right;
 }
 
+#timeCell {
+    min-width: 10ch;
+}
+
 .minoes-table {
     --piece-column: 0;
     --piece-row   : 0;

css/pop2.css

@@ -0,0 +1,70 @@
+body {
+    background-image: url("pop/bg.png");
+    background-size: cover;
+}
+
+body[data-bs-theme="dark"] {
+    --bs-body-bg: #2125296b;
+}
+
+.btn-dark {
+    --bs-btn-bg: #2125296b;
+}
+
+.card {
+  background: #25292d66;
+}
+
+#matrixCard {
+  background-image: radial-gradient(#2226, #25292d66);
+}
+
+.minoes-table {
+  background: transparent;
+}
+
+.mino {
+  background: var(--color);
+  border: 3px solid var(--border);
+  box-shadow: 0 0 8px var(--border);
+}
+
+.I {
+  --color: #00eaf888;
+  --border: #00eaf5;
+}
+
+.J {
+  --color: #00a9f788;
+  --border: #00a9f7;
+}
+
+.L {
+  --color: #f9b60088;
+  --border: #f9b600;
+}
+
+.O {
+  --color: #e3e04988;
+  --border: #e3e049;
+}
+
+.S {
+  --color: #7bd59e88;
+  --border: #7bd59e;
+}
+
+.T {
+  --color: #d136e288;
+  --border: #d136e2;
+}
+
+.Z {
+  --color: #E67D8688;
+  --border: #E67D86;
+}
+
+.ghost {
+  --color: #fff4;
+  --border: #fff5;
+}

index.html

@@ -14,9 +14,10 @@
     <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/pop2.css"     title="Pop 2">
     <link rel="alternate stylesheet" href="css/retro.css"   title="Rétro">
     <link rel="alternate stylesheet" href="css/opera.css"   title="Opéra">
-    <link rel="alternate stylesheet" href="css/binaural.css"   title="Binaural">
+    <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">
     <link rel="icon" type="image/png" sizes="32x32"   href="favicons/T-2.png">
     <link rel="icon" type="image/png" sizes="16x16"   href="favicons/favicon-16x16.png">
@@ -72,10 +73,11 @@
                   <option value="css/classic.css" selected>Classique</option>
                   <option value="css/minimal.css">Minimal</option>
                   <option value="css/pop.css">Pop</option>
+                  <option value="css/pop2.css">Pop 2</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/binaural.css">Binaural</option>
+                  <option value="css/stereo.css">Stéréo</option>
                 </select></div>
                 <div class="col-4 d-flex align-items-baseline"><input name="sfxVolumeRange" id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></div>
                 <label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>