diff --git a/css/common.css b/css/common.css index f03ca5e..5c0da87 100644 --- a/css/common.css +++ b/css/common.css @@ -21,8 +21,8 @@ body { } .modal-content { - background-color: #2125294d; - backdrop-filter: blur(15px); + background-color: #212529b3; + backdrop-filter: blur(10px); } } diff --git a/css/stereo.css b/css/stereo.css index 537ccd8..357bbc2 100644 --- a/css/stereo.css +++ b/css/stereo.css @@ -29,9 +29,6 @@ body { } #screenRow { - --light-x: calc(0.5 - var(--rY) / 90); - --light-y: calc(0.5 - var(--rX) / 90); - --light-z: 1; display: block; transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg)); } @@ -64,6 +61,16 @@ body { border: none; } +#holdTable .mino { + --row: 10; + --column: -5; +} + +#nextTable .mino { + --row: 15; + --column: 20; +} + .minoes-table th, .minoes-table td { display: inline-block !important; @@ -102,17 +109,15 @@ tr.matrix td:not(.mino) { .minoes-table .mino::before, .minoes-table .mino + :not(.mino)::before, .minoes-table .mino::after { - --light: calc( - 1 - + (var(--light-y) * 0.3) - + (var(--light-x) * 0.2) - ); - --center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light)), var(--a)); - --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.8)), var(--a)); --highlight: hsla(60deg, 100%, 95%, 0.3); --shadow: hsla(0deg, 0%, 0%, 0.15); + --light-x: calc(-0.5 - var(--rY) / 30 - var(--column) / 10 + 1); + --light-y: calc(-0.5 + var(--rX) / 20 - var(--row) / 6 + 4); + --light-z: 1; --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)), var(--a)); + --edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.8)), var(--a)); background: radial-gradient( circle at var(--center-x) var(--center-y), var(--center-color) 0%, @@ -133,24 +138,35 @@ tr.matrix td:not(.mino) { height: var(--cell-side); } -.minoes-table :not(.mino) + .mino::before, +/* Front face */ +.minoes-table .mino { + --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.5) - + (var(--light-y) * 0.1) + + (var(--light-x) * -0.2) + + (var(--light-y) * 0.15) ); transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg); transform-origin: left; } -.right .minoes-table .mino + .mino::before, +/* Right face */ +.right .minoes-table .mino::before, .minoes-table .mino + :not(.mino)::before, .right .minoes-table .mino:last-child::before { --light: calc( 0.85 - + (var(--light-x) * -0.5) - + (var(--light-y) * -0.1) + + (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%); @@ -164,19 +180,21 @@ tr.matrix td:not(.mino) { transform-origin: right !important; } +/* Top face */ .minoes-table .mino::after { --light: calc( - 0.9 - + (var(--light-y) * 0.6) + 1.1 + + (var(--light-y) * -0.3) ); transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg); transform-origin: top; } +/* Bottom face */ .bottom .minoes-table .mino::after { --light: calc( - 0.75 - + (var(--light-y) * -0.6) + 1.1 + + (var(--light-y) * -0.3) ); --center-x: calc(65% + var(--light-x) * 10%); --center-y: calc(65% + var(--light-y) * 10%); @@ -185,10 +203,10 @@ tr.matrix td:not(.mino) { transform-origin: bottom; } -.I.mino, .I.mino + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.85; } .J.mino, .J.mino + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.85; } .L.mino, .L.mino + :not(.mino) { --h: 28deg; --s: 85%; --l: 52%; --a: 0.85; } .O.mino, .O.mino + :not(.mino) { --h: 48deg; --s: 88%; --l: 52%; --a: 0.85; } +.I.mino, .I.mino + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.85; } .S.mino, .S.mino + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.85; } .T.mino, .T.mino + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.85; } .Z.mino, .Z.mino + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.85; }