adrien/quatuor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix paste error

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-03-05 08:46:10 +01:00
parent f261f01684
commit bf18998caa
2 changed files with 220 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

536
css/common.css
View File

@@ -1,388 +1,290 @@
:root { :root {
--rbw: 4px; --cell-side: 25px;
--tl: calc(-1 * var(--rbw)); --rX: -15;
--cell-side-opposite: calc(-1 * var(--cell-side)); --rY: 0;
--t3d: translate3d(var(--tl), var(--tl), var(--cell-side-opposite)); --tZ: 25px;
} }
body { body {
background-image: url(stereo/bg.jpg), background: linear-gradient(#212529, #14171a) fixed;
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 { @supports (backdrop-filter: blur()) {
perspective: 500px; .modal::before {
cursor: grab; content: "";
} position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
backdrop-filter: blur(2px);
}
#sceneDiv:active { .modal-content {
cursor: grabbing; background-color: #212529b3;
} backdrop-filter: blur(10px);
}
#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 { .card {
background: #36394180; background-color: #25292d;
} }
#matrixCard { #matrixCard {
background-image: none; background-image: radial-gradient(#222, #25292d)
} }
#screenRow .card>* {
transform: translateZ(var(--cell-side));
}
#screenRow .card-header {
background-color: transparent;
border: none;
}
.card,
.card-header { .card-header {
text-shadow: text-shadow: 0 0 2px black;
calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
} }
#holdTable .mino { .modal-title {
--row: 7; text-shadow: 0 0 8px var(--bs-light);
--column: -5; font-weight: 600;
} }
#nextTable .mino { #statsTable td,
--row: 15; #statsModal td {
--column: 15; text-align: right;
} }
.minoes-table th, td#timeCell {
.minoes-table td { min-width: 10ch;
display: inline-block !important;
width: max-content;
} }
.minoes-table tr { .minoes-table {
width: max-content; --piece-column: 0;
height: var(--cell-side); --piece-row : 0;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
width: min-content;
} }
#statsTable tr { #matrixTable {
display: table; margin-top: calc(-1 * var(--buffer-zone-rows) * var(--cell-side));
width: 100%;
} }
#statsTable th, @keyframes hard-dropped-table-animation {
#statsTable td { 25% {
display: table-cell; transform: translateY(3px);
border: 0; }
}
.hard-dropped-table-animation {
animation: hard-dropped-table-animation .2s;
}
tr.buffer-zone td:not(.mino) {
border-width: 0;
} }
tr.matrix td:not(.mino) { tr.matrix td:not(.mino) {
border: 0; border-left : 1px solid #333;
border-right : 1px solid #333;
border-top : 1px solid #303030;
border-bottom: 1px solid #303030;
} }
.minoes-table td { td {
width: var(--cell-side); overflow: hidden;
height: var(--cell-side); width: var(--cell-side);
overflow: visible; height: var(--cell-side);
position: relative; box-sizing: border-box;
}
.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 { @keyframes trail-animation {
from { from {
background-color: hsla(180, 100%, 100%, 0.1); background-color: #ceffff40;
border-color: hsla(180, 100%, 100%, 0.1);
} }
to { to {
background-color: transparent; background-color: transparent;
border-color: transparent;
} }
} }
td.trail-animation::before,
td.trail-animation::after {
animation: trail-animation ease-out .3s;
}
@keyframes locked-animation { @keyframes locked-animation {
from { from {
--h: 0deg; --s: 0%; --l: 100%; --a: 1; filter: saturate(50%) brightness(400%);
box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2);
} }
} }
.locked.mino::before, .locked.mino {
.locked.mino::after {
animation: locked-animation; animation: locked-animation;
animation-duration: .2s; animation-duration: 0.2s;
}
td.trail-animation {
animation: trail-animation ease-out .3s;
} }
@keyframes cleared-line-animation { @keyframes cleared-line-animation {
from { from {
background-color: white !important; background-color: white;
box-shadow: 0 0 0 white; filter: saturate(50%) brightness(300%);
} box-shadow: 0 0 0 #adb5bd, 0 0 0 #adb5bd;
to { }
background-color: #fff0; 60% {
box-shadow: 0 0 100px transparent; box-shadow: -60px 0 2px #adb5bd66, 60px 0 2px #adb5bd66;
} }
to {
background-color: transparent;
box-shadow: -100px 0 5px transparent, 100px 0 5px transparent;
}
} }
tr.cleared-line-animation td::before, tr.cleared-line-animation {
tr.cleared-line-animation td::after { animation: cleared-line-animation ease-out .3s;
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;
} }
@keyframes show-level-animation { @keyframes show-level-animation {
from { from {
opacity: 1; opacity: 0;
transform: translateY(200%); 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;
}
}
50% { #messagesSpan div.show-level-animation {
transform: translateY(0) scaleY(1); animation: show-level-animation;
line-height: var(--bs-body-line-height); animation-timing-function: (0.4, 0, 0.6, 1);
} animation-duration: 2s;
to {
opacity: 1;
transform: translateY(-100%) scaleY(0);
line-height: 0;
}
} }
@keyframes zoom-in-animation { @keyframes zoom-in-animation {
from { from {
opacity: 1; opacity: 0;
transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);
line-height: var(--bs-body-line-height); line-height: var(--bs-body-line-height);
}
30% { }
transform: scale3d(1, 1, 1); 30% {
} opacity: 1;
transform: scale3d(1, 1, 1);
80% { }
transform: scale3d(1, 1, 1); 80% {
line-height: var(--bs-body-line-height); opacity: 1;
} transform: scale3d(1, 1, 1);
line-height: var(--bs-body-line-height);
to { }
opacity: 1; to {
transform: scale3d(1.5, 0, 1); opacity: 0;
line-height: 0; transform: scale3d(1.5, 0, 1);
} line-height: 0;
}
} }
@keyframes rotate-in-animation { @keyframes rotate-in-animation {
0% { 0% {
opacity: 1; opacity:0;
transform: rotate(200deg); transform:rotate(200deg);
line-height: var(--bs-body-line-height); 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;
}
}
30% { #messagesSpan div.rotate-in-animation {
transform: translateZ(0) scale3d(1, 1, 1); animation-name: rotate-in-animation;
} animation-timing-function: cubic-bezier(.25,.46,.45,.94);
animation-duration: 1s;
}
80% { #messagesSpan div.zoom-in-animation {
transform: scale3d(1, 1, 1); animation-name: zoom-in-animation;
line-height: var(--bs-body-line-height); animation-timing-function: cubic-bezier(.25,.46,.45,.94);
} transform-origin:center;
animation-duration: 1s;
to {
opacity: 1;
transform: scale3d(1.5, 0, 1);
line-height: 0;
}
} }
@keyframes game-over-animation { @keyframes game-over-animation {
from { from {
opacity: 1; opacity: 0;
transform: translateY(200%); transform: translateY(200%);
} }
to {
to { opacity: 100%;
opacity: 1; transform: translateY(0) scaleY(1);
transform: translateY(0) scaleY(1); line-height: var(--bs-body-line-height);
line-height: var(--bs-body-line-height); }
} }
#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;
} }

2
css/stereo.css
View File

@@ -172,7 +172,7 @@ td.trail-animation {
var(--center-color) 15%, var(--center-color) 15%,
var(--edge-color) 100% var(--edge-color) 100%
); );
box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%); box-shadow: 0 0 6px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%);
border-style: ridge; border-style: ridge;
border-width: var(--rbw); border-width: var(--rbw);
} }