left face from right neighbour
This commit is contained in:
386
css/stereo.css
386
css/stereo.css
@@ -1,278 +1,306 @@
|
|||||||
body {
|
body {
|
||||||
background-image: url(stereo/bg.jpg),
|
background-image: url(stereo/bg.jpg),
|
||||||
radial-gradient(
|
radial-gradient(circle at center,
|
||||||
circle at center,
|
#39444f 0%,
|
||||||
#39444f 0%,
|
#2c323b 25%,
|
||||||
#2c323b 25%,
|
#293036 28%,
|
||||||
#293036 28%,
|
#252b32 34%,
|
||||||
#252b32 34%,
|
#242930 38%,
|
||||||
#242930 38%,
|
#1a1d22 52%,
|
||||||
#1a1d22 52%,
|
#191c22 53%,
|
||||||
#191c22 53%,
|
#151519 63%,
|
||||||
#151519 63%,
|
#141418 65%,
|
||||||
#141418 65%,
|
#0f0f12 74%,
|
||||||
#0f0f12 74%,
|
#0a0c0d 100%);
|
||||||
#0a0c0d 100%
|
background-repeat: round;
|
||||||
);
|
|
||||||
background-repeat: round;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sceneDiv {
|
#sceneDiv {
|
||||||
perspective: 500px;
|
perspective: 500px;
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sceneDiv:active {
|
#sceneDiv:active {
|
||||||
cursor: grabbing;
|
cursor: grabbing;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sceneDiv * {
|
#sceneDiv * {
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
}
|
}
|
||||||
|
|
||||||
#screenRow {
|
#screenRow {
|
||||||
display: block;
|
display: block;
|
||||||
transform: translateZ(var(--tZ)) rotateX(var(--rX)) rotateY(var(--rY));
|
transform: translateZ(var(--tZ)) rotateX(var(--rX)) rotateY(var(--rY));
|
||||||
}
|
}
|
||||||
|
|
||||||
#screenRow * {
|
#screenRow * {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#screenRow .col {
|
#screenRow .col {
|
||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background: #36394180;
|
background: #36394180;
|
||||||
}
|
}
|
||||||
|
|
||||||
#matrixCard {
|
#matrixCard {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#screenRow .card > * {
|
#screenRow .card>* {
|
||||||
transform: translateZ(var(--cell-side));
|
transform: translateZ(var(--cell-side));
|
||||||
}
|
}
|
||||||
|
|
||||||
#screenRow .card-header {
|
#screenRow .card-header {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.minoes-table th,
|
.minoes-table th,
|
||||||
.minoes-table td {
|
.minoes-table td {
|
||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.minoes-table tr {
|
.minoes-table tr {
|
||||||
width: max-content;
|
width: max-content;
|
||||||
height: var(--cell-side);
|
height: var(--cell-side);
|
||||||
}
|
}
|
||||||
|
|
||||||
#statsTable tr {
|
#statsTable tr {
|
||||||
display: table;
|
display: table;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#statsTable th,
|
#statsTable th,
|
||||||
#statsTable td {
|
#statsTable td {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.matrix td:not(.mino) {
|
tr.matrix td:not(.mino) {
|
||||||
border: 0;
|
border: 0;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.minoes-table td {
|
.minoes-table td {
|
||||||
width: var(--cell-side) !important;
|
width: var(--cell-side) !important;
|
||||||
height: var(--cell-side);
|
height: var(--cell-side);
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.minoes-table .mino {
|
.minoes-table .mino {
|
||||||
background: radial-gradient(circle at -150% -200%, #fffb 0%, var(--background-color) 100%);
|
background: radial-gradient(circle at -150% -200%, #fffb 0%, var(--background-color) 100%);
|
||||||
overflow: visible;
|
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mino::before,
|
.minoes-table .mino::before,
|
||||||
.mino::after {
|
.minoes-table .mino + :not(.mino)::before,
|
||||||
content: '';
|
.minoes-table .mino::after {
|
||||||
position: absolute;
|
content: '';
|
||||||
display: block;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: inherit;
|
display: block;
|
||||||
height: inherit;
|
width: inherit;
|
||||||
border-radius: 2px;
|
height: inherit;
|
||||||
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:not(.mino) + .mino::before {
|
.minoes-table .mino::before,
|
||||||
background: var(--light-color);
|
.minoes-table .mino + :not(.mino)::before {
|
||||||
transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
|
background: var(--light-color);
|
||||||
transform-origin: left;
|
transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
|
||||||
|
transform-origin: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mino::before {
|
.minoes-table .mino::after {
|
||||||
background: var(--dark-color);
|
background: var(--light-color);
|
||||||
transform: translateZ(calc(-1 * var(--cell-side))) rotateY(90deg);
|
transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
|
||||||
transform-origin: right;
|
transform-origin: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mino::after {
|
.bottom .minoes-table .mino::after {
|
||||||
background: var(--light-color);
|
background: var(--dark-color);
|
||||||
transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
|
transform: translateZ(calc(-1 * var(--cell-side))) rotateX(-90deg);
|
||||||
transform-origin: top;
|
transform-origin: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom .mino::after {
|
.I.mino,
|
||||||
background: var(--dark-color);
|
.I.mino + :not(.mino) {
|
||||||
transform: translateZ(calc(-1 * var(--cell-side))) rotateX(-90deg);
|
--background-color: #42afe1b0;
|
||||||
transform-origin: bottom;
|
--light-color: #6ceaff80;
|
||||||
|
--dark-color: #00a4b0b0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.I.mino {
|
.J.mino,
|
||||||
--background-color: #42afe1b0;
|
.J.mino + :not(.mino) {
|
||||||
--light-color: #6ceaff80;
|
--background-color: #1165b5b0;
|
||||||
--dark-color: #00a4b0b0;
|
--light-color: #339bff80;
|
||||||
|
--dark-color: #00009db0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.J.mino {
|
.L.mino,
|
||||||
--background-color: #1165b5b0;
|
.L.mino + :not(.mino) {
|
||||||
--light-color: #339bff80;
|
--background-color: #f38927b0;
|
||||||
--dark-color: #00009db0;
|
--light-color: #ffba5980;
|
||||||
|
--dark-color: #c54800b0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.L.mino {
|
.O.mino,
|
||||||
--background-color: #f38927b0;
|
.O.mino + :not(.mino) {
|
||||||
--light-color: #ffba5980;
|
--background-color: #f6d03cb0;
|
||||||
--dark-color: #c54800b0;
|
--light-color: #ffff7f80;
|
||||||
|
--dark-color: #ca9501b0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.O.mino {
|
.S.mino,
|
||||||
--background-color: #f6d03cb0;
|
.S.mino + :not(.mino) {
|
||||||
--light-color: #ffff7f80;
|
--background-color: #51b84db0;
|
||||||
--dark-color: #ca9501b0;
|
--light-color: #84f88080;
|
||||||
|
--dark-color: #1cbc02b0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.S.mino {
|
.T.mino,
|
||||||
--background-color: #51b84db0;
|
.T.mino + :not(.mino) {
|
||||||
--light-color: #84f88080;
|
--background-color: #9739a2b0;
|
||||||
--dark-color: #1cbc02b0;
|
--light-color: #d958e980;
|
||||||
|
--dark-color: #6e019ab0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.T.mino {
|
.Z.mino,
|
||||||
--background-color: #9739a2b0;
|
.Z.mino + :not(.mino) {
|
||||||
--light-color: #d958e980;
|
--background-color: #eb4f65b0;
|
||||||
--dark-color: #6e019ab0;
|
--light-color: #ff7f7980;
|
||||||
|
--dark-color: #ad1936b0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Z.mino {
|
.ghost.mino,
|
||||||
--background-color: #eb4f65b0;
|
.ghost.mino + :not(.mino) {
|
||||||
--light-color: #ff7f7980;
|
--background-color: #8886;
|
||||||
--dark-color: #ad1936b0;
|
--light-color: #ccc6;
|
||||||
|
--dark-color: #6666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ghost.mino {
|
.locking.mino,
|
||||||
--background-color: #8886;
|
.locking.mino + :not(.mino) {
|
||||||
--light-color: #ccc6;
|
--background-color: #eeeb;
|
||||||
--dark-color: #6666;
|
--light-color: #fffb;
|
||||||
|
--dark-color: #dddb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.locking.mino {
|
.disabled.mino,
|
||||||
--background-color: #eeeb;
|
.disabled.mino + :not(.mino) {
|
||||||
--light-color: #fffb;
|
--background-color: #888b;
|
||||||
--dark-color: #dddb;
|
--light-color: #cccb;
|
||||||
|
--dark-color: #6666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled.mino {
|
#holdTable .J + :not(.mino),
|
||||||
--background-color: #888b;
|
#holdTable .L + :not(.mino),
|
||||||
--light-color: #cccb;
|
#holdTable .S + :not(.mino),
|
||||||
--dark-color: #333b;
|
#holdTable .T + :not(.mino),
|
||||||
|
#holdTable .Z + :not(.mino),
|
||||||
|
#nextTable .J + :not(.mino),
|
||||||
|
#nextTable .L + :not(.mino),
|
||||||
|
#nextTable .S + :not(.mino),
|
||||||
|
#nextTable .T + :not(.mino),
|
||||||
|
#nextTable .Z + :not(.mino) {
|
||||||
|
transform: translateX(50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes cleared-line-animation {
|
@keyframes cleared-line-animation {
|
||||||
from {
|
from {
|
||||||
background-color: #ceffff66;
|
background-color: #ceffff66;
|
||||||
box-shadow: -200px 0 5px white, 200px 0 5px white;
|
box-shadow: -200px 0 5px white, 200px 0 5px white;
|
||||||
}
|
}
|
||||||
to {
|
|
||||||
background-color: transparent;
|
to {
|
||||||
}
|
background-color: transparent;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes show-level-animation {
|
@keyframes show-level-animation {
|
||||||
from {
|
from {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(200%);
|
transform: translateY(200%);
|
||||||
}
|
}
|
||||||
50% {
|
|
||||||
transform: translateY(0) scaleY(1);
|
50% {
|
||||||
line-height: var(--bs-body-line-height);
|
transform: translateY(0) scaleY(1);
|
||||||
}
|
line-height: var(--bs-body-line-height);
|
||||||
to {
|
}
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(-100%) scaleY(0);
|
to {
|
||||||
line-height: 0;
|
opacity: 1;
|
||||||
}
|
transform: translateY(-100%) scaleY(0);
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes zoom-in-animation {
|
@keyframes zoom-in-animation {
|
||||||
from {
|
from {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale3d(0.3, 0.3, 0.3);
|
transform: scale3d(0.3, 0.3, 0.3);
|
||||||
line-height: var(--bs-body-line-height);
|
line-height: var(--bs-body-line-height);
|
||||||
}
|
}
|
||||||
30% {
|
|
||||||
transform: scale3d(1, 1, 1);
|
30% {
|
||||||
}
|
transform: scale3d(1, 1, 1);
|
||||||
80% {
|
}
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
line-height: var(--bs-body-line-height);
|
80% {
|
||||||
}
|
transform: scale3d(1, 1, 1);
|
||||||
to {
|
line-height: var(--bs-body-line-height);
|
||||||
opacity: 1;
|
}
|
||||||
transform: scale3d(1.5, 0, 1);
|
|
||||||
line-height: 0;
|
to {
|
||||||
}
|
opacity: 1;
|
||||||
|
transform: scale3d(1.5, 0, 1);
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes rotate-in-animation {
|
@keyframes rotate-in-animation {
|
||||||
0% {
|
0% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: rotate(200deg);
|
transform: rotate(200deg);
|
||||||
line-height: var(--bs-body-line-height);
|
line-height: var(--bs-body-line-height);
|
||||||
}
|
}
|
||||||
30% {
|
|
||||||
transform: translateZ(0);
|
30% {
|
||||||
transform: scale3d(1, 1, 1);
|
transform: translateZ(0);
|
||||||
}
|
transform: scale3d(1, 1, 1);
|
||||||
80% {
|
}
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
line-height: var(--bs-body-line-height);
|
80% {
|
||||||
}
|
transform: scale3d(1, 1, 1);
|
||||||
to {
|
line-height: var(--bs-body-line-height);
|
||||||
opacity: 1;
|
}
|
||||||
transform: scale3d(1.5, 0, 1);
|
|
||||||
line-height: 0;
|
to {
|
||||||
}
|
opacity: 1;
|
||||||
|
transform: scale3d(1.5, 0, 1);
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes game-over-animation {
|
@keyframes game-over-animation {
|
||||||
from {
|
from {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(200%);
|
transform: translateY(200%);
|
||||||
}
|
}
|
||||||
to {
|
|
||||||
opacity: 1;
|
to {
|
||||||
transform: translateY(0) scaleY(1);
|
opacity: 1;
|
||||||
line-height: var(--bs-body-line-height);
|
transform: translateY(0) scaleY(1);
|
||||||
}
|
line-height: var(--bs-body-line-height);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user