diff --git a/css/stereo.css b/css/stereo.css index d2accfd..f1d7496 100644 --- a/css/stereo.css +++ b/css/stereo.css @@ -1,3 +1,8 @@ +:root { + --bw: 4px; + --tl: calc(-1 * var(--bw) + 0.5px); +} + body { background-image: url(stereo/bg.jpg), radial-gradient(circle at center, @@ -120,7 +125,7 @@ tr.matrix td:not(.mino) { --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: 2px; + border-radius: 4px; border: 2px outset var(--center-color); } @@ -156,6 +161,8 @@ td.trail-animation { var(--edge-color) 100% ); box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 20%); + border-style: ridge; + border-width: var(--bw); } /* Left face */ @@ -168,7 +175,7 @@ tr.cleared-line-animation td::before, + (var(--light-x) * -0.2) + (var(--light-y) * 0.15) ); - transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(-90deg); + transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateY(-90deg); transform-origin: left; } @@ -190,7 +197,7 @@ tr.cleared-line-animation td::before, } .right .minoes-table .mino:last-child::before { - transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(90deg) !important; + transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateY(90deg) !important; transform-origin: right !important; } @@ -202,7 +209,7 @@ tr.cleared-line-animation td::after { 1.5 + (var(--light-y) * 0.2) ); - transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(90deg); + transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateX(90deg); transform-origin: top; } @@ -217,7 +224,7 @@ 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(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(-90deg); + transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateX(-90deg); transform-origin: bottom; }