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

use external skins

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-03-07 23:13:45 +01:00
parent aed0601933
commit d0a2f1b7f9
14 changed files with 300 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
css/_common.css
View File

@@ -1,5 +1,5 @@
:root {
--cell-side: 25px;
--cell-size: 25px;
--rX: -15;
--rY: 0;
--tZ: 25px;
@@ -62,7 +62,7 @@ td#timeCell {
}
#matrixTable {
margin-top: calc(-1 * var(--buffer-zone-rows) * var(--cell-side));
margin-top: calc(-1 * var(--buffer-zone-rows) * var(--cell-size));
}
@keyframes hard-dropped-table-animation {
@@ -87,8 +87,8 @@ tr.matrix td:not(.mino) {
td {
overflow: hidden;
width: var(--cell-side);
height: var(--cell-side);
width: var(--cell-size);
height: var(--cell-size);
box-sizing: border-box;
}
@@ -157,6 +157,7 @@ tr.cleared-line-animation {
text-shadow: 1px 1px #000c;
font-size: 3vmin;
text-align: center;
z-index: 200;
}
#messagesSpan div {

79
css/custom.css Normal file
View File

@@ -0,0 +1,79 @@
:root {
--cell-size: 30px;
--sprite-size: calc(100% / 11);
--skin-url: url(https://tetrio.team2xh.net/images/skins/tf/tf.svg);
--bg-url: url();
}
body {
background-image: var(--bg-url) fixed;
background-size: cover;
background-position: center;
}
.mino {
width: var(--cell-size);
height: var(--cell-size);
background-image: var(--skin-url);
background-size: cover;
background-repeat: no-repeat;
background-position-x: calc(var(--mino-sprite) * var(--sprite-size));
}
.I {
--mino-sprite: 4;
}
.J {
--mino-sprite: 5;
}
.L {
--mino-sprite: 1;
}
.O {
--mino-sprite: 2;
}
.S {
--mino-sprite: 3;
}
.T {
--mino-sprite: 6;
}
.Z {
--mino-sprite: 0;
}
.ghost,
.disabled,
.locking {
background-image:
var(--skin-url),
var(--skin-url);
background-size:
cover,
cover;
background-repeat:
no-repeat,
no-repeat;
background-position-x:
calc(var(--mino-sprite) * var(--sprite-size)),
calc(var(--overlay-sprite) * var(--sprite-size));
background-blend-mode: overlay;
}
.ghost {
--overlay-sprite: 7;
}
.disabled {
--overlay-sprite: 8;
}
.locking {
--overlay-sprite: 9;
}

6
css/heavy-metal.css
View File

@@ -2,7 +2,7 @@
perspective: 500px;
}
#screenRow {
transform: rotateX(20deg);
transform: rotateX(15deg);
}
#screenRow .card {
@@ -28,10 +28,6 @@ tr.matrix td:not(.mino) {
backdrop-filter: blur(6px);
}
tr:last-of-type .mino {
boxd-shadow: none;
}
.I {
--hue: 197;
}

4
css/jazz.css
View File

@@ -110,8 +110,8 @@ tr.matrix td:not(.mino) {
.minoes-table td {
display: inline-block;
width: var(--cell-side);
height: var(--cell-side);
width: var(--cell-size);
height: var(--cell-size);
padding: 0 !important;
z-index: calc(200 - var(--row));
}

118
css/jazz2.css Normal file
View File

@@ -0,0 +1,118 @@
.minoes-table {
display: flex;
flex-direction: column;
filter: drop-shadow(0 8px 1px #0008);
}
.minoes-table tr {
display: flex;
position: relative;
flex-direction: row;
z-index: calc(100 - var(--row));
}
tr.matrix td:not(.mino) {
border: none;
border-right: 1px solid #8884;
}
.minoes-table td {
display: inline-block;
width: var(--cell-size);
height: var(--cell-size);
padding: 0 !important;
z-index: calc(200 - var(--row));
}
.mino {
width: inherit;
height: inherit;
display: block;
padding: 0;
opacity: 100%;
border: none;
box-shadow: 0 -6px 0 var(--box-shadow-color);
}
.I.mino {
background-color: #0293b0;
--box-shadow-color: #05d2f2;
}
.J.mino {
background-color: #2c69c2;
--box-shadow-color: #7bb7f6;
}
.L.mino {
background-color: #fa9b23;
--box-shadow-color: #FFBA59;
}
.O.mino {
background-color: #f9d92c;
--box-shadow-color: #fff194;
}
.S.mino {
background-color: #01a493;
--box-shadow-color: #03e7d3;;
}
.T.mino {
background-color: #6830d1;
--box-shadow-color: #bb88fc;
}
.Z.mino {
background-color: #ee2b58;
--box-shadow-color: #fd4487;;
}
.ghost.mino {
background-color: #fff8;
box-shadow: none;
transform: blue(4px);
}
.moving.mino {
filter: saturate(80%) brightness(130%);
}
.locking.mino {
filter: saturate(20%) brightness(300%);
}
.locked.mino {
animation: locked-animation;
animation-duration: 0.2s;
}
.disabled.mino {
filter: brightness(50%) contrast(65%);
}
@keyframes locked-animation {
from {
filter: saturate(50%) brightness(300%);
}
}
@keyframes cleared-line-animation {
from {
background-color: #eeeeee;
}
to {
background-color: transparent;
}
}
@keyframes trail-animation {
from {
background-color: #ceffff05;
filter: saturate(50%) brightness(110%);
}
to {
background-color: transparent;
}
}

4
css/minimal.css
View File

@@ -26,8 +26,8 @@ tr.matrix td:not(.mino) {
.minoes-table td {
display: inline-block;
width: var(--cell-side);
height: var(--cell-side);
width: var(--cell-size);
height: var(--cell-size);
padding: 0 !important;
z-index: calc(200 - var(--row));
}

2
css/neo-classic.css
View File

@@ -33,7 +33,7 @@ tr.matrix td:not(.mino) {
}
.mino:after {
--size: calc(var(--cell-side) - 12px);
--size: calc(var(--cell-size) - 12px);
position: absolute;
content: "";
box-sizing: content-box;

2
css/old-school.css
View File

@@ -1,5 +1,5 @@
:root {
--cell-side: 20px;
--cell-size: 20px;
--sprite-size: 40px;
}

18
css/stereo.css
View File

@@ -1,8 +1,8 @@
:root {
--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));
--cell-size-opposite: calc(-1 * var(--cell-size));
--t3d: translate3d(var(--tl), var(--tl), var(--cell-size-opposite));
}
body {
@@ -69,7 +69,7 @@ body {
}
#screenRow .card>* {
transform: translateZ(var(--cell-side));
transform: translateZ(var(--cell-size));
}
#screenRow .card-header {
@@ -101,7 +101,7 @@ body {
.minoes-table tr {
width: max-content;
height: var(--cell-side);
height: var(--cell-size);
}
#statsTable tr {
@@ -120,8 +120,8 @@ tr.matrix td:not(.mino) {
}
.minoes-table td {
width: var(--cell-side);
height: var(--cell-side);
width: var(--cell-size);
height: var(--cell-size);
overflow: visible;
position: relative;
}
@@ -153,8 +153,8 @@ tr.cleared-line-animation td::after {
top: 0;
left: 0;
display: block;
width: var(--cell-side);
height: var(--cell-side);
width: var(--cell-size);
height: var(--cell-size);
}
/* Front face */
@@ -204,7 +204,7 @@ 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, var(--cell-side-opposite)) rotateY(-90deg);
transform: translate3d(0, 0, var(--cell-size-opposite)) rotateY(-90deg);
transform-origin: left;
}

43
css/svg.css Normal file
View File

@@ -0,0 +1,43 @@
tr.matrix td:not(.mino),
tr.matrix td.mino {
border-left: none;
border-right: 1px solid #333;
border-top: 1px solid #333;
border-bottom: none;
}
.mino {
background-size: cover
}
.I {
background-image: url(https://www.svgrepo.com/show/395902/blue-square.svg)
}
.J {
background-image: url(https://www.svgrepo.com/show/395944/brown-square.svg);
}
.L {
background-image: url(https://www.svgrepo.com/show/397681/orange-square.svg);
}
.O {
background-image: url(https://www.svgrepo.com/show/398716/yellow-square.svg);
}
.S {
background-image: url(https://www.svgrepo.com/show/396582/green-square.svg);
}
.T {
background-image: url(https://www.svgrepo.com/show/398143/purple-square.svg);
}
.Z {
background-image: url(https://www.svgrepo.com/show/397699/red-square.svg);
}
.ghost {
background-image: url(https://www.svgrepo.com/show/398610/white-large-square.svg);
}

4
css/synthwave.css
View File

@@ -1,5 +1,5 @@
body {
background-image: url(synthwave/bg.png);
background-image: url(synthwave/wtCSusF.jpeg);
background-size: cover;
}
@@ -21,7 +21,7 @@ body[data-bs-theme="dark"] {
.card,
#matrixCard {
background: repeating-linear-gradient(transparent, #111 1px);
background: repeating-linear-gradient(transparent, transparent 1px, #1114 2px, #1114 4px);
backdrop-filter: blur(3px);
}

BIN
css/synthwave/wtCSusF.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 972 KiB