new theme

css/opera.css

@@ -0,0 +1,147 @@
+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;
+}
+
+.card-header,
+.card-header th{
+    background: transparent;
+    font-weight: 400 !important;
+    font-size: 1.3em;
+    border: none;
+}
+
+#screenRow .table {
+    --bs-border-width: 0;
+}
+
+#holdTable {
+    margin: 0 0 0 auto !important;
+}
+
+#holdTable,
+#nextTable {
+    border-bottom: 2px solid white;
+}
+
+#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;
+}
+
+#matrixCard {
+    background: transparent;
+    border-top: none;
+    border-left: 4px solid white;
+    border-right: 4px solid white;
+    border-bottom: 4px solid white;
+}
+
+.mino {
+    background: var(--color);
+    padding: 0;
+    opacity: 100%;
+    border: 1px outset var(--color);
+}
+
+.I.mino {
+    --color: #00eaf5;
+}
+
+.J.mino {
+    --color: #00a9f7;
+}
+
+.L.mino {
+    --color: #f9b600;
+}
+
+.O.mino {
+    --color: #f7f200;;
+}
+
+.T.mino {
+    --color: #d136e2;;
+}
+
+.S.mino {
+    --color: #35da3f;
+}
+
+.Z.mino {
+    --color: #ee3b3a;
+}
+
+.ghost.mino {
+    --color: #fff4;
+}
+
+.moving.mino {
+    filter: saturate(80%) brightness(150%);
+}
+
+.locking.mino {
+    filter: saturate(50%) brightness(200%);
+}
+
+.disabled.mino {
+    filter: brightness(50%) contrast(80%);
+    opacity: 70%;
+}
+
+@keyframes locked-animation {
+    from {
+        filter: saturate(50%) brightness(400%);
+    }
+}
+
+.locked.mino {
+    animation: locked-animation;
+    animation-duration: 0.2s;
+}

index.html

@@ -63,6 +63,7 @@
                   <option value="css/pop.css">Pop</option>
                   <option value="css/electro.css">Électro</option>
                   <option value="css/retro.css">Rétro</option>
+                  <option value="css/opera.css">Opéra</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>