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

4
css/minimal.css
View File

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

25
css/pop.css
View File

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