95 lines
1.4 KiB
CSS
95 lines
1.4 KiB
CSS
:root {
|
|
--cell-size: 24px;
|
|
--sprite-size: calc(100% / 8);
|
|
--skin-url: url(https://i.imgur.com/HqGYC5G.png);
|
|
}
|
|
|
|
.card {
|
|
background-color: #1c1c1c;
|
|
}
|
|
|
|
.card-body {
|
|
background-color: black;
|
|
}
|
|
|
|
#matrixCard {
|
|
background-image: url(jstris-skin/jstris-grid.png);
|
|
background-position: bottom;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
tr.matrix td:not(.mino) {
|
|
border: none;
|
|
}
|
|
|
|
.mino {
|
|
background-image: var(--skin-url);
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position-x: calc(var(--sprite-pos) * var(--sprite-size));
|
|
}
|
|
|
|
.I {
|
|
--sprite-pos: 6;
|
|
}
|
|
|
|
.J {
|
|
--sprite-pos: 7;
|
|
}
|
|
|
|
.L {
|
|
--sprite-pos: 3;
|
|
}
|
|
|
|
.O {
|
|
--sprite-pos: 4;
|
|
}
|
|
|
|
.S {
|
|
--sprite-pos: 5;
|
|
}
|
|
|
|
.T {
|
|
--sprite-pos: 8;
|
|
}
|
|
|
|
.Z {
|
|
--sprite-pos: 2;
|
|
}
|
|
|
|
.ghost {
|
|
--sprite-pos: 1;
|
|
opacity: 50%;
|
|
}
|
|
|
|
.disabled {
|
|
--sprite-pos: 0;
|
|
}
|
|
|
|
.locking.mino {
|
|
filter: saturate(60%) brightness(180%);
|
|
}
|
|
|
|
#holdTable .mino,
|
|
#nextTable .mino {
|
|
box-shadow: 4px 4px 10px #0002;
|
|
}
|
|
|
|
.option {
|
|
display: inline-block;
|
|
height: var(--cell-size);
|
|
}
|
|
|
|
.result {
|
|
--nb-sprites: 9;
|
|
}
|
|
|
|
.select2-container:not(.select2-container--disabled) .selection {
|
|
--nb-sprites: 4;
|
|
--sprite-pos: 4;
|
|
width: calc(var(--nb-sprites) * var(--cell-size));
|
|
background-position-x: calc(-1 * var(--sprite-pos) * var(--cell-size));
|
|
background-image: var(--skin-url);
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
} |