365 lines
8.1 KiB
CSS
365 lines
8.1 KiB
CSS
body {
|
|
background-image: url(stereo/bg.jpg),
|
|
radial-gradient(circle at center,
|
|
#39444f 0%,
|
|
#2c323b 25%,
|
|
#293036 28%,
|
|
#252b32 34%,
|
|
#242930 38%,
|
|
#1a1d22 52%,
|
|
#191c22 53%,
|
|
#151519 63%,
|
|
#141418 65%,
|
|
#0f0f12 74%,
|
|
#0a0c0d 100%);
|
|
background-repeat: round;
|
|
}
|
|
|
|
#sceneDiv {
|
|
perspective: 500px;
|
|
cursor: grab;
|
|
}
|
|
|
|
#sceneDiv:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
#sceneDiv * {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
#screenRow {
|
|
display: block;
|
|
transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg));
|
|
}
|
|
|
|
#screenRow * {
|
|
display: block;
|
|
}
|
|
|
|
#screenRow .col {
|
|
display: inline-block !important;
|
|
width: max-content;
|
|
height: 100%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.card {
|
|
background: #36394180;
|
|
}
|
|
|
|
#matrixCard {
|
|
background-image: none;
|
|
}
|
|
|
|
#screenRow .card>* {
|
|
transform: translateZ(var(--cell-side));
|
|
}
|
|
|
|
#screenRow .card-header {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.card,
|
|
.card-header {
|
|
text-shadow:
|
|
calc(-0.01px * var(--rY) - 1px) calc(0.02px * var(--rX) - 1px) #ccc,
|
|
calc(-0.02px * var(--rY) - 1px) calc(0.04px * var(--rX) - 1px) #ccc,
|
|
calc(-0.01px * var(--rY) + 1px) calc(0.02px * var(--rX) + 1px) #222,
|
|
calc(-0.02px * var(--rY) + 1px) calc(0.04px * var(--rX) + 1px) #222,
|
|
calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
|
|
}
|
|
|
|
#holdTable .mino {
|
|
--row: 10;
|
|
--column: -5;
|
|
}
|
|
|
|
#nextTable .mino {
|
|
--row: 15;
|
|
--column: 20;
|
|
}
|
|
|
|
.minoes-table th,
|
|
.minoes-table td {
|
|
display: inline-block !important;
|
|
width: max-content;
|
|
}
|
|
|
|
.minoes-table tr {
|
|
width: max-content;
|
|
height: var(--cell-side);
|
|
}
|
|
|
|
#statsTable tr {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
|
|
#statsTable th,
|
|
#statsTable td {
|
|
display: table-cell;
|
|
border: 0;
|
|
}
|
|
|
|
tr.matrix td:not(.mino) {
|
|
border: 0;
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.minoes-table td {
|
|
width: var(--cell-side) !important;
|
|
height: var(--cell-side) !important;
|
|
overflow: visible;
|
|
}
|
|
|
|
.minoes-table .mino,
|
|
.minoes-table .mino::before,
|
|
.minoes-table .mino + :not(.mino)::before,
|
|
.minoes-table .mino::after {
|
|
--light-x: calc(-0.5 - var(--rY) / 30 - var(--column) / 10 + 1);
|
|
--light-y: calc(-0.5 + var(--rX) / 20 - var(--row) / 6 + 4);
|
|
--center-x: calc(35% + var(--light-x) * 10%);
|
|
--center-y: calc(35% + var(--light-y) * 10%);
|
|
--center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.1), var(--a));
|
|
--edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.9)), var(--a));
|
|
background: radial-gradient(
|
|
circle at var(--center-x) var(--center-y),
|
|
var(--center-color) 10%,
|
|
var(--edge-color) 100%
|
|
);
|
|
border-radius: 2px;
|
|
border: 2px outset var(--center-color);
|
|
box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 20%);
|
|
}
|
|
|
|
#holdTable .mino,
|
|
#holdTable .mino::before,
|
|
#holdTable .mino + :not(.mino)::before,
|
|
#holdTable .mino::after {
|
|
--light-x: calc(-0.5 - var(--rY) / 30 - (var(--column) + -10) / 10 + 1);
|
|
}
|
|
|
|
#nextTable .mino,
|
|
#nextTable .mino::before,
|
|
#nextTable .mino + :not(.mino)::before,
|
|
#nextTable .mino::after {
|
|
--light-x: calc(-0.5 - var(--rY) / 30 - (var(--column) + 10) / 10 + 1);
|
|
}
|
|
|
|
.minoes-table .mino::before,
|
|
.minoes-table .mino + :not(.mino)::before,
|
|
.minoes-table .mino::after,
|
|
td.trail-animation::before,
|
|
td.trail-animation::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: var(--cell-side);
|
|
height: var(--cell-side);
|
|
}
|
|
|
|
/* Front face */
|
|
.minoes-table .mino,
|
|
td.trail-animation {
|
|
--light: calc(
|
|
1
|
|
+ (var(--light-y) * 0.3)
|
|
+ (var(--light-x) * 0.2)
|
|
);
|
|
}
|
|
|
|
/* Left face */
|
|
.minoes-table .mino::before,
|
|
.left .minoes-table .mino + .mino::before {
|
|
--light: calc(
|
|
1.1
|
|
+ (var(--light-x) * -0.2)
|
|
+ (var(--light-y) * 0.15)
|
|
);
|
|
transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateY(-90deg);
|
|
transform-origin: left;
|
|
}
|
|
|
|
/* Right face */
|
|
.right .minoes-table .mino + .mino::before,
|
|
.minoes-table .mino + :not(.mino)::before,
|
|
.right .minoes-table .mino:last-child::before {
|
|
--light: calc(
|
|
0.85
|
|
+ (var(--light-x) * -0.2)
|
|
+ (var(--light-y) * -0.15)
|
|
);
|
|
--center-x: calc(65% + var(--light-x) * 10%);
|
|
--center-y: calc(35% + var(--light-y) * 10%);
|
|
filter: saturate(0.95);
|
|
transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(-90deg);
|
|
transform-origin: left;
|
|
}
|
|
|
|
.right .minoes-table .mino:last-child::before {
|
|
transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
|
|
transform-origin: right !important;
|
|
}
|
|
|
|
/* Top face */
|
|
.minoes-table .mino::after {
|
|
--light: calc(
|
|
1.5
|
|
+ (var(--light-y) * 0.2)
|
|
);
|
|
transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateX(90deg);
|
|
transform-origin: top;
|
|
}
|
|
|
|
/* Bottom face */
|
|
.bottom .minoes-table .mino::after {
|
|
--light: calc(
|
|
1.1
|
|
+ (var(--light-y) * -0.3)
|
|
);
|
|
--center-x: calc(65% + var(--light-x) * 10%);
|
|
--center-y: calc(65% + var(--light-y) * 10%);
|
|
filter: saturate(0.95);
|
|
transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateX(-90deg);
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
.J.mino, .J.mino + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.8; }
|
|
.L.mino, .L.mino + :not(.mino) { --h: 28deg; --s: 85%; --l: 52%; --a: 0.8; }
|
|
.O.mino, .O.mino + :not(.mino) { --h: 48deg; --s: 88%; --l: 52%; --a: 0.8; }
|
|
.I.mino, .I.mino + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.8; }
|
|
.S.mino, .S.mino + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.8; }
|
|
.T.mino, .T.mino + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.8; }
|
|
.Z.mino, .Z.mino + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.8; }
|
|
|
|
.ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; }
|
|
.locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; }
|
|
.disabled.mino, .disabled.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 45%; --a: 0.72; }
|
|
td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; }
|
|
|
|
|
|
#holdTable .J + :not(.mino),
|
|
#holdTable .L + :not(.mino),
|
|
#holdTable .S + :not(.mino),
|
|
#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 trail-animation {
|
|
from {
|
|
background-color: hsla(180, 100%, 100%, 0.1);
|
|
box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2);
|
|
}
|
|
to {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
td.trail-animation::before,
|
|
td.trail-animation::after {
|
|
animation: trail-animation ease-out .3s;
|
|
}
|
|
|
|
td.trail-animation::before {
|
|
transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(-90deg);
|
|
transform-origin: left;
|
|
}
|
|
|
|
td.trail-animation::after {
|
|
transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
|
|
transform-origin: right !important;
|
|
}
|
|
|
|
tr.cleared-line-animation {
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes show-level-animation {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(200%);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(0) scaleY(1);
|
|
line-height: var(--bs-body-line-height);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(-100%) scaleY(0);
|
|
line-height: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes zoom-in-animation {
|
|
from {
|
|
opacity: 1;
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
line-height: var(--bs-body-line-height);
|
|
}
|
|
|
|
30% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
80% {
|
|
transform: scale3d(1, 1, 1);
|
|
line-height: var(--bs-body-line-height);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale3d(1.5, 0, 1);
|
|
line-height: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-in-animation {
|
|
0% {
|
|
opacity: 1;
|
|
transform: rotate(200deg);
|
|
line-height: var(--bs-body-line-height);
|
|
}
|
|
|
|
30% {
|
|
transform: translateZ(0);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
80% {
|
|
transform: scale3d(1, 1, 1);
|
|
line-height: var(--bs-body-line-height);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale3d(1.5, 0, 1);
|
|
line-height: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes game-over-animation {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(200%);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scaleY(1);
|
|
line-height: var(--bs-body-line-height);
|
|
}
|
|
}
|