reorg

themes/images.css

@@ -0,0 +1,65 @@
+.empty-cell {
+    background: transparent;
+}
+
+.invisible-grid > .empty-cell {
+    border: 1px solid transparent;
+}
+
+.visible-grid > .empty-cell {
+    border: 1px inset rgba(128, 128, 128, 0.3);
+}
+
+.mino {
+    border: 1px inset rgba(128, 128, 128, 0.3);
+    border-radius: 0;
+}
+
+.I-mino {
+    background-image: url(images/blue_block.png);
+}
+
+.J-mino {
+    background-image: url(images/navy_block.png);
+}
+
+.L-mino {
+    background-image: url(images/peach_block.png);
+}
+
+.O-mino {
+    background-image: url(images/yellow_block.png);
+}
+
+.S-mino {
+    background-image: url(images/green_block.png);
+}
+
+.T-mino {
+    background-image: url(images/purple_block.png);
+}
+
+.Z-mino {
+    background-image: url(images/pink_block.png);
+}
+
+.locked-mino {
+    background: white;
+    border-radius: 1px;
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 1px;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px transparent;
+    border-radius: 1px;
+}

themes/light-relief.css

@@ -0,0 +1,64 @@
+.empty-cell {
+    background: transparent;
+}
+
+.invisible-grid > .empty-cell {
+    border: 1px solid transparent;
+}
+
+.visible-grid > .empty-cell {
+    border: 1px inset rgba(128, 128, 128, 0.3);
+}
+
+.mino {
+    border: 1px outset white;
+    border-radius: 0vmin;
+}
+
+.I-mino {
+    background: rgb(153, 255, 230);
+}
+
+.J-mino {
+    background: rgb(153, 204, 255);
+}
+
+.L-mino {
+    background: rgb(255, 204, 153);
+}
+
+.O-mino {
+    background: rgb(255, 255, 153);
+}
+
+.S-mino {
+    background: rgb(153, 255, 153);
+}
+
+.T-mino {
+    background: rgb(255, 102, 255);
+}
+
+.Z-mino {
+    background: rgb(255, 153, 153);
+}
+
+.locked-mino {
+    background: white;
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0vmin;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0vmin;
+}

themes/light-solid.css

@@ -0,0 +1,64 @@
+.empty-cell {
+    background: transparent;
+}
+
+.invisible-grid > .empty-cell {
+    border: 1px solid transparent;
+}
+
+.visible-grid > .empty-cell {
+    border: 1px inset rgba(128, 128, 128, 0.3);
+}
+
+.mino {
+    border: 1px solid white;
+    border-radius: 0vmin;
+}
+
+.I-mino {
+    background: rgb(153, 255, 230);
+}
+
+.J-mino {
+    background: rgb(153, 204, 255);
+}
+
+.L-mino {
+    background: rgb(255, 204, 153);
+}
+
+.O-mino {
+    background: rgb(255, 255, 153);
+}
+
+.S-mino {
+    background: rgb(153, 255, 153);
+}
+
+.T-mino {
+    background: rgb(255, 102, 255);
+}
+
+.Z-mino {
+    background: rgb(255, 153, 153);
+}
+
+.locked-mino {
+    background: white;
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0;
+}

themes/tetris-effect.css

@@ -0,0 +1,36 @@
+.invisible-grid > .empty-cell {
+    background: transparent;
+    border: 1px solid transparent;
+}
+
+.visible-grid > .empty-cell {
+    background: transparent;
+    border: 1px inset rgba(128, 128, 128, 0.3);
+}
+
+.mino, .I-mino, .J-mino, .L-mino, .O-mino, .S-mino, .T-mino, .Z-mino {
+    background: rgba(127, 229, 255, 0.3);
+    border: 1px solid rgba(127, 229, 255, 0.7);
+    border-radius: 0.3vmin;
+}
+
+.locked-mino {
+    background: rgba(242, 255, 255, 0.5);
+    border-color: rgba(242, 255, 255, 0.7);
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.3vmin;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0.3vmin;
+}

themes/vivid-relief.css

@@ -0,0 +1,70 @@
+.invisible-grid > .empty-cell {
+    background: transparent;
+    border: 1px solid transparent;
+}
+
+.visible-grid > .empty-cell {
+    background: transparent;
+    border: 1px inset rgba(128, 128, 128, 0.3);
+}
+
+.mino {
+    border: 1px outset;
+    border-radius: 0vmin;
+}
+
+.I-mino {
+    background: cyan;
+    border-color: lightcyan;
+}
+
+.J-mino {
+    background: blue;
+    border-color: lightblue;
+}
+
+.L-mino {
+    background: orange;
+    border-color: lightgoldenrodyellow;
+}
+
+.O-mino {
+    background: yellow;
+    border-color: lightyellow;
+}
+
+.S-mino {
+    background: green;
+    border-color: lightgreen;
+}
+
+.T-mino {
+    background: magenta;
+    border-color: pink;
+}
+
+.Z-mino {
+    background: red;
+    border-color: lightpink;
+}
+
+.locked-mino {
+    background: white;
+    border-color: white;
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0vmin;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0vmin;
+}

themes/vivid-solid.css

@@ -0,0 +1,70 @@
+.invisible-grid > .empty-cell {
+    background: transparent;
+    border: 1px solid transparent;
+}
+
+.visible-grid > .empty-cell {
+    background: transparent;
+    border: 1px inset rgba(128, 128, 128, 0.3);
+}
+
+.mino {
+    border: 1px solid;
+    border-radius: 0;
+}
+
+.I-mino {
+    background: cyan;
+    border-color: lightcyan;
+}
+
+.J-mino {
+    background: blue;
+    border-color: lightblue;
+}
+
+.L-mino {
+    background: orange;
+    border-color: lightgoldenrodyellow;
+}
+
+.O-mino {
+    background: yellow;
+    border-color: lightyellow;
+}
+
+.S-mino {
+    background: green;
+    border-color: lightgreen;
+}
+
+.T-mino {
+    background: magenta;
+    border-color: pink;
+}
+
+.Z-mino {
+    background: red;
+    border-color: lightpink;
+}
+
+.locked-mino {
+    background: white;
+    border-color: white;
+}
+
+.cleared-line {
+    background: white;
+}
+
+.trail {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0vmin;
+}
+
+.ghost {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 0vmin;
+}