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

improve styles

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-11-28 23:25:15 +01:00
parent 682b0c61a1
commit 1b18b00619
3 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
css/electro.css
View File

@ -8,13 +8,14 @@ body {
} }
.mino:not(.ghost):not(.locking) { .mino:not(.ghost):not(.locking) {
padding: 0; padding: 1px;
position: relative; position: relative;
z-index: 0; z-index: 0;
box-shadow: -1px -1px 4px rgba(128, 128, 128, 25%), box-shadow:
-1px 1px 4px rgba(128, 128, 128, 25%), -1px -1px 4px rgba(128, 128, 128, 25%),
1px -1px 4px rgba(128, 128, 128, 25%), -1px 1px 4px rgba(128, 128, 128, 25%),
1px 1px 4px rgba(128, 128, 128, 25%); 1px -1px 4px rgba(128, 128, 128, 25%),
1px 1px 4px rgba(128, 128, 128, 25%);
} }
.mino:not(.ghost):not(.locking):before { .mino:not(.ghost):not(.locking):before {
@ -22,14 +23,15 @@ body {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
inset: 0; inset: 0;
padding: 1px; margin: 1px;
border-radius: 0.3vmin; padding: 2px;
border-radius: 4px;
--glint-x: calc(50% + 50% * (var(--piece-column) - var(--column))/10); --glint-x: calc(50% + 50% * (var(--piece-column) - var(--column))/10);
--glint-y: calc(50% + 50% * (var(--piece-row) - var(--row))/25); --glint-y: calc(50% + 50% * (var(--piece-row) - var(--row))/25);
background: radial-gradient( background: radial-gradient(
at var(--glint-x) var(--glint-y), at var(--glint-x) var(--glint-y),
rgba(204, 238, 247, 0.9) 0%, rgba(204, 238, 247, 0.7) 0%,
rgba(0, 159, 218, 0.9) 150%); rgba(0, 159, 218, 0.7) 150%);
mask: mask:
linear-gradient(#666 0 0) content-box, linear-gradient(#666 0 0) content-box,
linear-gradient(#fff 0 0); linear-gradient(#fff 0 0);
@ -46,11 +48,12 @@ body {
-1px 1px 8px rgba(242, 255, 255, 16%), -1px 1px 8px rgba(242, 255, 255, 16%),
1px -1px 8px rgba(242, 255, 255, 16%), 1px -1px 8px rgba(242, 255, 255, 16%),
1px 1px 8px rgba(242, 255, 255, 16%); 1px 1px 8px rgba(242, 255, 255, 16%);
filter: blur(1px);
} }
.moving.mino { .moving.mino {
border-width: 1px; border-width: 1px;
background: rgba(186, 211, 255, 30%); background: rgba(186, 211, 255, 30%);
border-color: rgba(242, 255, 255, 0.7); border-color: rgba(242, 255, 255, 0.7);
} }
@ -58,10 +61,11 @@ body {
border-width: 1px; border-width: 1px;
background: rgba(186, 211, 255, 70%); background: rgba(186, 211, 255, 70%);
border-color: rgba(242, 255, 255, 0.7); border-color: rgba(242, 255, 255, 0.7);
box-shadow: -1px -1px 4px rgba(186, 211, 255, 27%), box-shadow:
-1px 1px 4px rgba(186, 211, 255, 27%), -1px -1px 4px rgba(186, 211, 255, 27%),
1px -1px 4px rgba(186, 211, 255, 27%), -1px 1px 4px rgba(186, 211, 255, 27%),
1px 1px 4px rgba(186, 211, 255, 27%); 1px -1px 4px rgba(186, 211, 255, 27%),
1px 1px 4px rgba(186, 211, 255, 27%);
} }
@keyframes locked-animation { @keyframes locked-animation {

4
css/minimal.css
View File

@ -71,7 +71,7 @@ tr.matrix td:not(.mino) {
} }
.ghost.mino { .ghost.mino {
--background-color: rgba(175, 175, 175, 80%); opacity: 50%;
box-shadow: none; box-shadow: none;
} }
@ -99,6 +99,6 @@ tr.matrix td:not(.mino) {
background-color: #eeeeee; background-color: #eeeeee;
} }
to { to {
background-color: #363941; background-color: transparent;
} }
} }

25
css/pop.css
View File

@ -15,40 +15,41 @@ body {
} }
.mino { .mino {
background: rgba(255, 255, 255, 10%); background: rgba(255, 255, 255, 33%);
border: 5px solid; border: 6px solid var(--color);
padding: 0; padding: 0;
opacity: 100%; opacity: 100%;
border-radius: 4px; border-radius: 4px;
filter: blur(1px) filter: blur(1px);
box-shadow: 0 0 10px var(--color);
} }
.I.mino { .I.mino {
border-color: #9bf6ff; --color: #9bf6ff;
} }
.J.mino { .J.mino {
border-color: #a0c4ff; --color: #a0c4ff;
} }
.L.mino { .L.mino {
border-color: #ffd6a5; --color: #ffd6a5;
} }
.O.mino { .O.mino {
border-color: #fdffb6; --color: #fdffb6;
} }
.T.mino { .T.mino {
border-color: #bdb2ff; --color: #bdb2ff;
} }
.S.mino { .S.mino {
border-color: #caffbf; --color: #caffbf;
} }
.Z.mino { .Z.mino {
border-color: #ffadad; --color: #ffadad;
} }
.ghost.mino { .ghost.mino {
@ -61,14 +62,14 @@ body {
} }
.locking.mino { .locking.mino {
border-color: white; --color: white;
filter: blur(2px); filter: blur(2px);
} }
@keyframes locked-animation { @keyframes locked-animation {
from { from {
background: white; background: white;
border-color: white; --color: white;
} }
} }