437 lines
8.5 KiB
CSS
437 lines
8.5 KiB
CSS
:root {
|
|
--rbw: 4px;
|
|
--tl: calc(-1 * var(--rbw));
|
|
--cell-size-opposite: calc(-1 * var(--cell-size));
|
|
--t3d: translate3d(var(--tl), var(--tl), var(--cell-size-opposite));
|
|
}
|
|
|
|
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: space;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
|
|
#sceneDiv {
|
|
perspective: 500px;
|
|
cursor: grab;
|
|
}
|
|
|
|
#sceneDiv:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
#screenRow {
|
|
--light-rX: calc(-1 * var(--rY) / 30);
|
|
--light-rY: calc(var(--rX) / 20);
|
|
display: block;
|
|
transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg))
|
|
rotateY(calc((var(--rY)) * 1deg));
|
|
}
|
|
|
|
#sceneDiv,
|
|
#screenRow,
|
|
#screenRow .col,
|
|
#screenRow .card,
|
|
#screenRow .card-body,
|
|
.minoes-table,
|
|
.minoes-table tbody,
|
|
.minoes-table tr,
|
|
.minoes-table td {
|
|
display: block;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
#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-size));
|
|
}
|
|
|
|
#screenRow .card-header {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.card,
|
|
.card-header {
|
|
text-shadow: calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
|
|
}
|
|
|
|
#holdTable .mino {
|
|
--row: 7;
|
|
--column: -5;
|
|
}
|
|
|
|
#nextTable .mino {
|
|
--row: 15;
|
|
--column: 15;
|
|
}
|
|
|
|
.minoes-table th,
|
|
.minoes-table td {
|
|
display: inline-block !important;
|
|
width: max-content;
|
|
}
|
|
|
|
.minoes-table tr {
|
|
width: max-content;
|
|
height: var(--cell-size);
|
|
}
|
|
|
|
#statsTable tr {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
|
|
#statsTable th,
|
|
#statsTable td {
|
|
display: table-cell;
|
|
border: 0;
|
|
}
|
|
|
|
tr.matrix td:not(.mino) {
|
|
border: 0;
|
|
}
|
|
|
|
.minoes-table td {
|
|
width: var(--cell-size);
|
|
height: var(--cell-size);
|
|
overflow: visible;
|
|
position: relative;
|
|
}
|
|
|
|
.mino,
|
|
.mino::before,
|
|
.mino + :not(.mino)::before,
|
|
.mino::after {
|
|
--light-pX: calc(0.5 - var(--column) / 10);
|
|
--light-pY: calc(3.5 - var(--row) / 6);
|
|
--light-x: calc(var(--light-rX) + var(--light-pX));
|
|
--light-y: calc(var(--light-rY) + var(--light-pY));
|
|
--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: var(--center-color);
|
|
border-radius: 4px;
|
|
border: 2px outset var(--center-color);
|
|
}
|
|
|
|
.mino::before,
|
|
.mino + :not(.mino)::before,
|
|
.mino::after,
|
|
td.trail-animation::before,
|
|
td.trail-animation::after,
|
|
tr.cleared-line-animation td::before,
|
|
tr.cleared-line-animation td::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: var(--cell-size);
|
|
height: var(--cell-size);
|
|
}
|
|
|
|
/* Front face */
|
|
.mino,
|
|
td.trail-animation {
|
|
--light: calc(1 + (var(--light-y) * 0.3) + (var(--light-x) * 0.2));
|
|
--center-x: calc(35% + var(--light-x) * 10%);
|
|
--center-y: calc(35% + var(--light-y) * 10%);
|
|
background: radial-gradient(
|
|
circle at var(--center-x) var(--center-y),
|
|
var(--center-color) 15%,
|
|
var(--edge-color) 100%
|
|
);
|
|
box-shadow: 0 0 6px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%);
|
|
border-style: ridge;
|
|
border-width: var(--rbw);
|
|
}
|
|
|
|
/* Left face */
|
|
.mino::before,
|
|
td.trail-animation::before,
|
|
tr.cleared-line-animation td::before,
|
|
.mino + .mino::before {
|
|
--light: calc(1.1 + (var(--light-x) * -0.2) + (var(--light-y) * 0.15));
|
|
transform: var(--t3d) rotateY(-90deg);
|
|
transform-origin: left;
|
|
}
|
|
|
|
/* Right face */
|
|
.mino + :not(.mino)::before,
|
|
.right .mino + .mino::before,
|
|
.right td.trail-animation::before,
|
|
.right tr.cleared-line-animation td::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, var(--cell-size-opposite)) rotateY(-90deg);
|
|
transform-origin: left;
|
|
}
|
|
|
|
.right .mino:last-child::before {
|
|
transform: var(--t3d) rotateY(90deg) !important;
|
|
transform-origin: right !important;
|
|
}
|
|
|
|
/* Top face */
|
|
.mino::after,
|
|
td.trail-animation::after,
|
|
tr.cleared-line-animation td::after {
|
|
--light: calc(1.5 + (var(--light-y) * 0.2));
|
|
transform: var(--t3d) rotateX(90deg);
|
|
transform-origin: top;
|
|
}
|
|
|
|
/* Bottom face */
|
|
.bottom .mino::after,
|
|
.bottom td.trail-animation::after,
|
|
.bottom tr.cleared-line-animation td::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: var(--t3d) rotateX(-90deg);
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
.J,
|
|
.J + :not(.mino) {
|
|
--h: 210deg;
|
|
--s: 78%;
|
|
--l: 52%;
|
|
--a: 0.75;
|
|
}
|
|
.L,
|
|
.L + :not(.mino) {
|
|
--h: 28deg;
|
|
--s: 85%;
|
|
--l: 52%;
|
|
--a: 0.75;
|
|
}
|
|
.O,
|
|
.O + :not(.mino) {
|
|
--h: 48deg;
|
|
--s: 88%;
|
|
--l: 52%;
|
|
--a: 0.75;
|
|
}
|
|
.I,
|
|
.I + :not(.mino) {
|
|
--h: 200deg;
|
|
--s: 70%;
|
|
--l: 52%;
|
|
--a: 0.75;
|
|
}
|
|
.S,
|
|
.S + :not(.mino) {
|
|
--h: 118deg;
|
|
--s: 45%;
|
|
--l: 52%;
|
|
--a: 0.75;
|
|
}
|
|
.T,
|
|
.T + :not(.mino) {
|
|
--h: 293deg;
|
|
--s: 48%;
|
|
--l: 52%;
|
|
--a: 0.75;
|
|
}
|
|
.Z,
|
|
.Z + :not(.mino) {
|
|
--h: 352deg;
|
|
--s: 75%;
|
|
--l: 52%;
|
|
--a: 0.75;
|
|
}
|
|
|
|
.ghost.mino,
|
|
.ghost.mino + :not(.mino) {
|
|
--h: 0deg;
|
|
--s: 0%;
|
|
--l: 55%;
|
|
--a: 0.4;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
#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);
|
|
border-color: hsla(180, 100%, 100%, 0.1);
|
|
}
|
|
to {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
td.trail-animation::before,
|
|
td.trail-animation::after {
|
|
animation: trail-animation ease-out 0.3s;
|
|
}
|
|
|
|
@keyframes locked-animation {
|
|
from {
|
|
--h: 0deg;
|
|
--s: 0%;
|
|
--l: 100%;
|
|
--a: 1;
|
|
box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2);
|
|
}
|
|
}
|
|
|
|
.locked.mino::before,
|
|
.locked.mino::after {
|
|
animation: locked-animation;
|
|
animation-duration: 0.2s;
|
|
}
|
|
|
|
@keyframes cleared-line-animation {
|
|
from {
|
|
background-color: white !important;
|
|
box-shadow: 0 0 0 white;
|
|
}
|
|
to {
|
|
background-color: #fff0;
|
|
box-shadow: 0 0 100px transparent;
|
|
}
|
|
}
|
|
|
|
tr.cleared-line-animation td::before,
|
|
tr.cleared-line-animation td::after {
|
|
animation: cleared-line-animation ease-out 0.3s;
|
|
}
|
|
|
|
@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) 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);
|
|
}
|
|
}
|