round
This commit is contained in:
424
css/stereo.css
424
css/stereo.css
@@ -6,38 +6,42 @@
|
||||
}
|
||||
|
||||
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;
|
||||
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;
|
||||
perspective: 500px;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
#sceneDiv:active {
|
||||
cursor: grabbing;
|
||||
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));
|
||||
display: block;
|
||||
transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg))
|
||||
rotateY(calc((var(--rY)) * 1deg));
|
||||
}
|
||||
|
||||
#sceneDiv,
|
||||
@@ -49,38 +53,37 @@ body {
|
||||
.minoes-table tbody,
|
||||
.minoes-table tr,
|
||||
.minoes-table td {
|
||||
display: block;
|
||||
transform-style: preserve-3d;
|
||||
display: block;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
#screenRow .col {
|
||||
display: inline-block !important;
|
||||
width: max-content;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
display: inline-block !important;
|
||||
width: max-content;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #36394180;
|
||||
background: #36394180;
|
||||
}
|
||||
|
||||
#matrixCard {
|
||||
background-image: none;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#screenRow .card>* {
|
||||
transform: translateZ(var(--cell-size));
|
||||
#screenRow .card > * {
|
||||
transform: translateZ(var(--cell-size));
|
||||
}
|
||||
|
||||
#screenRow .card-header {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card,
|
||||
.card-header {
|
||||
text-shadow:
|
||||
calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
|
||||
text-shadow: calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
|
||||
}
|
||||
|
||||
#holdTable .mino {
|
||||
@@ -95,35 +98,35 @@ body {
|
||||
|
||||
.minoes-table th,
|
||||
.minoes-table td {
|
||||
display: inline-block !important;
|
||||
width: max-content;
|
||||
display: inline-block !important;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.minoes-table tr {
|
||||
width: max-content;
|
||||
height: var(--cell-size);
|
||||
width: max-content;
|
||||
height: var(--cell-size);
|
||||
}
|
||||
|
||||
#statsTable tr {
|
||||
display: table;
|
||||
width: 100%;
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#statsTable th,
|
||||
#statsTable td {
|
||||
display: table-cell;
|
||||
border: 0;
|
||||
display: table-cell;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tr.matrix td:not(.mino) {
|
||||
border: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.minoes-table td {
|
||||
width: var(--cell-size);
|
||||
height: var(--cell-size);
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
width: var(--cell-size);
|
||||
height: var(--cell-size);
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mino,
|
||||
@@ -136,9 +139,9 @@ tr.matrix td:not(.mino) {
|
||||
--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);
|
||||
background: var(--center-color);
|
||||
border-radius: 4px;
|
||||
border: 2px outset var(--center-color);
|
||||
}
|
||||
|
||||
.mino::before,
|
||||
@@ -148,33 +151,29 @@ 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);
|
||||
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);
|
||||
--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 */
|
||||
@@ -182,13 +181,9 @@ td.trail-animation {
|
||||
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;
|
||||
--light: calc(1.1 + (var(--light-x) * -0.2) + (var(--light-y) * 0.15));
|
||||
transform: var(--t3d) rotateY(-90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
/* Right face */
|
||||
@@ -196,61 +191,111 @@ tr.cleared-line-animation td::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;
|
||||
--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;
|
||||
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;
|
||||
--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;
|
||||
--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; }
|
||||
.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.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; }
|
||||
.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),
|
||||
@@ -262,13 +307,13 @@ tr.cleared-line-animation td::after {
|
||||
#nextTable .S + :not(.mino),
|
||||
#nextTable .T + :not(.mino),
|
||||
#nextTable .Z + :not(.mino) {
|
||||
transform: translateX(50%);
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
@keyframes trail-animation {
|
||||
from {
|
||||
background-color: hsla(180, 100%, 100%, 0.1);
|
||||
border-color: hsla(180, 100%, 100%, 0.1);
|
||||
border-color: hsla(180, 100%, 100%, 0.1);
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
@@ -278,111 +323,114 @@ tr.cleared-line-animation td::after {
|
||||
|
||||
td.trail-animation::before,
|
||||
td.trail-animation::after {
|
||||
animation: trail-animation ease-out .3s;
|
||||
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);
|
||||
--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: .2s;
|
||||
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;
|
||||
}
|
||||
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 .3s;
|
||||
animation: cleared-line-animation ease-out 0.3s;
|
||||
}
|
||||
|
||||
@keyframes show-level-animation {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(200%);
|
||||
}
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(200%);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(0) scaleY(1);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0) scaleY(1);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(-100%) scaleY(0);
|
||||
line-height: 0;
|
||||
}
|
||||
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);
|
||||
}
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
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);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
|
||||
to {
|
||||
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 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: rotate(200deg);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: rotate(200deg);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateZ(0) scale3d(1, 1, 1);
|
||||
}
|
||||
30% {
|
||||
transform: translateZ(0) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
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;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.5, 0, 1);
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes game-over-animation {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(200%);
|
||||
}
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(200%);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scaleY(1);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scaleY(1);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user