optimization
This commit is contained in:
534
css/common.css
534
css/common.css
@@ -1,290 +1,388 @@
|
||||
:root {
|
||||
--cell-side: 25px;
|
||||
--rX: -15;
|
||||
--rY: 0;
|
||||
--tZ: 25px;
|
||||
--rbw: 4px;
|
||||
--tl: calc(-1 * var(--rbw));
|
||||
--cell-side-opposite: calc(-1 * var(--cell-side));
|
||||
--t3d: translate3d(var(--tl), var(--tl), var(--cell-side-opposite));
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(#212529, #14171a) fixed;
|
||||
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;
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur()) {
|
||||
.modal::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
#sceneDiv {
|
||||
perspective: 500px;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #212529b3;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
#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-color: #25292d;
|
||||
background: #36394180;
|
||||
}
|
||||
|
||||
#matrixCard {
|
||||
background-image: radial-gradient(#222, #25292d)
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#screenRow .card>* {
|
||||
transform: translateZ(var(--cell-side));
|
||||
}
|
||||
|
||||
#screenRow .card-header {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card,
|
||||
.card-header {
|
||||
text-shadow: 0 0 2px black;
|
||||
text-shadow:
|
||||
calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
text-shadow: 0 0 8px var(--bs-light);
|
||||
font-weight: 600;
|
||||
#holdTable .mino {
|
||||
--row: 7;
|
||||
--column: -5;
|
||||
}
|
||||
|
||||
#statsTable td,
|
||||
#statsModal td {
|
||||
text-align: right;
|
||||
#nextTable .mino {
|
||||
--row: 15;
|
||||
--column: 15;
|
||||
}
|
||||
|
||||
td#timeCell {
|
||||
min-width: 10ch;
|
||||
.minoes-table th,
|
||||
.minoes-table td {
|
||||
display: inline-block !important;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.minoes-table {
|
||||
--piece-column: 0;
|
||||
--piece-row : 0;
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: min-content;
|
||||
.minoes-table tr {
|
||||
width: max-content;
|
||||
height: var(--cell-side);
|
||||
}
|
||||
|
||||
#matrixTable {
|
||||
margin-top: calc(-1 * var(--buffer-zone-rows) * var(--cell-side));
|
||||
#statsTable tr {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes hard-dropped-table-animation {
|
||||
25% {
|
||||
transform: translateY(3px);
|
||||
}
|
||||
}
|
||||
.hard-dropped-table-animation {
|
||||
animation: hard-dropped-table-animation .2s;
|
||||
}
|
||||
|
||||
tr.buffer-zone td:not(.mino) {
|
||||
border-width: 0;
|
||||
#statsTable th,
|
||||
#statsTable td {
|
||||
display: table-cell;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tr.matrix td:not(.mino) {
|
||||
border-left : 1px solid #333;
|
||||
border-right : 1px solid #333;
|
||||
border-top : 1px solid #303030;
|
||||
border-bottom: 1px solid #303030;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
overflow: hidden;
|
||||
width: var(--cell-side);
|
||||
height: var(--cell-side);
|
||||
box-sizing: border-box;
|
||||
.minoes-table td {
|
||||
width: var(--cell-side);
|
||||
height: var(--cell-side);
|
||||
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-side);
|
||||
height: var(--cell-side);
|
||||
}
|
||||
|
||||
/* 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-side-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.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; }
|
||||
|
||||
#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: #ceffff40;
|
||||
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 .3s;
|
||||
}
|
||||
|
||||
@keyframes locked-animation {
|
||||
from {
|
||||
filter: saturate(50%) brightness(400%);
|
||||
--h: 0deg; --s: 0%; --l: 100%; --a: 1;
|
||||
box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.locked.mino {
|
||||
.locked.mino::before,
|
||||
.locked.mino::after {
|
||||
animation: locked-animation;
|
||||
animation-duration: 0.2s;
|
||||
}
|
||||
|
||||
td.trail-animation {
|
||||
animation: trail-animation ease-out .3s;
|
||||
animation-duration: .2s;
|
||||
}
|
||||
|
||||
@keyframes cleared-line-animation {
|
||||
from {
|
||||
background-color: white;
|
||||
filter: saturate(50%) brightness(300%);
|
||||
box-shadow: 0 0 0 #adb5bd, 0 0 0 #adb5bd;
|
||||
}
|
||||
60% {
|
||||
box-shadow: -60px 0 2px #adb5bd66, 60px 0 2px #adb5bd66;
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
box-shadow: -100px 0 5px transparent, 100px 0 5px 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 {
|
||||
animation: cleared-line-animation ease-out .3s;
|
||||
}
|
||||
|
||||
#holdTable .J,
|
||||
#holdTable .L,
|
||||
#holdTable .S,
|
||||
#holdTable .T,
|
||||
#holdTable .Z,
|
||||
#nextTable .J,
|
||||
#nextTable .L,
|
||||
#nextTable .S,
|
||||
#nextTable .T,
|
||||
#nextTable .Z {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
#messagesSpan {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
color: #fffc;
|
||||
text-shadow: 1px 1px #000c;
|
||||
font-size: 3vmin;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#messagesSpan div {
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
tr.cleared-line-animation td::before,
|
||||
tr.cleared-line-animation td::after {
|
||||
animation: cleared-line-animation ease-out .3s;
|
||||
}
|
||||
|
||||
@keyframes show-level-animation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(200%);
|
||||
}
|
||||
50% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0) scaleY(1);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%) scaleY(0);
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(200%);
|
||||
}
|
||||
|
||||
#messagesSpan div.show-level-animation {
|
||||
animation: show-level-animation;
|
||||
animation-timing-function: (0.4, 0, 0.6, 1);
|
||||
animation-duration: 2s;
|
||||
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: 0;
|
||||
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% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(1.5, 0, 1);
|
||||
line-height: 0;
|
||||
}
|
||||
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:0;
|
||||
transform:rotate(200deg);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
30% {
|
||||
opacity:1;
|
||||
transform:translateZ(0);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(1.5, 0, 1);
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: rotate(200deg);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
|
||||
#messagesSpan div.rotate-in-animation {
|
||||
animation-name: rotate-in-animation;
|
||||
animation-timing-function: cubic-bezier(.25,.46,.45,.94);
|
||||
animation-duration: 1s;
|
||||
}
|
||||
30% {
|
||||
transform: translateZ(0) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
#messagesSpan div.zoom-in-animation {
|
||||
animation-name: zoom-in-animation;
|
||||
animation-timing-function: cubic-bezier(.25,.46,.45,.94);
|
||||
transform-origin:center;
|
||||
animation-duration: 1s;
|
||||
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: 0;
|
||||
transform: translateY(200%);
|
||||
}
|
||||
to {
|
||||
opacity: 100%;
|
||||
transform: translateY(0) scaleY(1);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
}
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(200%);
|
||||
}
|
||||
|
||||
#messagesSpan div.game-over-animation {
|
||||
animation: game-over-animation;
|
||||
animation-timing-function: (0.4, 0, 0.6, 1);
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
#statsModal table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#statsModal th {
|
||||
padding-left: 0;
|
||||
padding-right: 0.5rem;
|
||||
padding-bottom: 0.2rem;
|
||||
border-left: 0.5rem solid transparent;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
#statsModal td {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0.2rem;
|
||||
border-left: 0;
|
||||
border-right: 0.5rem solid transparent;
|
||||
}
|
||||
|
||||
#statsModal tr:last-child th,
|
||||
#statsModal tr:last-child td {
|
||||
border-bottom: none;
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scaleY(1);
|
||||
line-height: var(--bs-body-line-height);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,4 +85,5 @@ tr.matrix td:not(.mino) {
|
||||
.ghost {
|
||||
--hue: 0;
|
||||
--saturation: 0%;
|
||||
opacity: 30%;
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
:root {
|
||||
--bw: 4px;
|
||||
--tl: calc(-1 * var(--bw) + 0.5px);
|
||||
--rbw: 4px;
|
||||
--tl: calc(-1 * var(--rbw));
|
||||
--cell-side-opposite: calc(-1 * var(--cell-side));
|
||||
--t3d: translate3d(var(--tl), var(--tl), var(--cell-side-opposite));
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -31,17 +33,24 @@ body {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
#sceneDiv * {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
#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));
|
||||
}
|
||||
|
||||
#screenRow * {
|
||||
#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 {
|
||||
@@ -111,17 +120,20 @@ tr.matrix td:not(.mino) {
|
||||
}
|
||||
|
||||
.minoes-table td {
|
||||
width: var(--cell-side) !important;
|
||||
height: var(--cell-side) !important;
|
||||
width: var(--cell-side);
|
||||
height: var(--cell-side);
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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);
|
||||
.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);
|
||||
@@ -129,9 +141,9 @@ tr.matrix td:not(.mino) {
|
||||
border: 2px outset var(--center-color);
|
||||
}
|
||||
|
||||
.minoes-table .mino::before,
|
||||
.minoes-table .mino + :not(.mino)::before,
|
||||
.minoes-table .mino::after,
|
||||
.mino::before,
|
||||
.mino + :not(.mino)::before,
|
||||
.mino::after,
|
||||
td.trail-animation::before,
|
||||
td.trail-animation::after,
|
||||
tr.cleared-line-animation td::before,
|
||||
@@ -146,7 +158,7 @@ tr.cleared-line-animation td::after {
|
||||
}
|
||||
|
||||
/* Front face */
|
||||
.minoes-table .mino,
|
||||
.mino,
|
||||
td.trail-animation {
|
||||
--light: calc(
|
||||
1
|
||||
@@ -160,28 +172,28 @@ td.trail-animation {
|
||||
var(--center-color) 15%,
|
||||
var(--edge-color) 100%
|
||||
);
|
||||
box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 20%);
|
||||
box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%);
|
||||
border-style: ridge;
|
||||
border-width: var(--bw);
|
||||
border-width: var(--rbw);
|
||||
}
|
||||
|
||||
/* Left face */
|
||||
.minoes-table .mino::before,
|
||||
.mino::before,
|
||||
td.trail-animation::before,
|
||||
tr.cleared-line-animation td::before,
|
||||
.left .minoes-table .mino + .mino::before {
|
||||
.mino + .mino::before {
|
||||
--light: calc(
|
||||
1.1
|
||||
+ (var(--light-x) * -0.2)
|
||||
+ (var(--light-y) * 0.15)
|
||||
);
|
||||
transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateY(-90deg);
|
||||
transform: var(--t3d) rotateY(-90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
/* Right face */
|
||||
.right .minoes-table .mino + .mino::before,
|
||||
.minoes-table .mino + :not(.mino)::before,
|
||||
.mino + :not(.mino)::before,
|
||||
.right .mino + .mino::before,
|
||||
.right td.trail-animation::before,
|
||||
.right tr.cleared-line-animation td::before {
|
||||
--light: calc(
|
||||
@@ -192,29 +204,29 @@ tr.cleared-line-animation td::before,
|
||||
--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: translate3d(0, 0, var(--cell-side-opposite)) rotateY(-90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.right .minoes-table .mino:last-child::before {
|
||||
transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateY(90deg) !important;
|
||||
.right .mino:last-child::before {
|
||||
transform: var(--t3d) rotateY(90deg) !important;
|
||||
transform-origin: right !important;
|
||||
}
|
||||
|
||||
/* Top face */
|
||||
.minoes-table .mino::after,
|
||||
.mino::after,
|
||||
td.trail-animation::after,
|
||||
tr.cleared-line-animation td::after {
|
||||
--light: calc(
|
||||
1.5
|
||||
+ (var(--light-y) * 0.2)
|
||||
);
|
||||
transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateX(90deg);
|
||||
transform: var(--t3d) rotateX(90deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
/* Bottom face */
|
||||
.bottom .minoes-table .mino::after,
|
||||
.bottom .mino::after,
|
||||
.bottom td.trail-animation::after,
|
||||
.bottom tr.cleared-line-animation td::after {
|
||||
--light: calc(
|
||||
@@ -224,17 +236,17 @@ tr.cleared-line-animation td::after {
|
||||
--center-x: calc(65% + var(--light-x) * 10%);
|
||||
--center-y: calc(65% + var(--light-y) * 10%);
|
||||
filter: saturate(0.95);
|
||||
transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateX(-90deg);
|
||||
transform: var(--t3d) rotateX(-90deg);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.J.mino, .J.mino + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.75; }
|
||||
.L.mino, .L.mino + :not(.mino) { --h: 28deg; --s: 85%; --l: 52%; --a: 0.75; }
|
||||
.O.mino, .O.mino + :not(.mino) { --h: 48deg; --s: 88%; --l: 52%; --a: 0.75; }
|
||||
.I.mino, .I.mino + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.75; }
|
||||
.S.mino, .S.mino + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.75; }
|
||||
.T.mino, .T.mino + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.75; }
|
||||
.Z.mino, .Z.mino + :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; }
|
||||
@@ -347,8 +359,7 @@ tr.cleared-line-animation td::after {
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateZ(0);
|
||||
transform: scale3d(1, 1, 1);
|
||||
transform: translateZ(0) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
80% {
|
||||
|
||||
Reference in New Issue
Block a user