improve style
This commit is contained in:
@ -56,7 +56,10 @@ tr.buffer-zone td:not(.mino) {
|
||||
}
|
||||
|
||||
tr.matrix td:not(.mino) {
|
||||
border: 1px solid #333;
|
||||
border-left : 1px solid #333;
|
||||
border-right : 1px solid #333;
|
||||
border-top : 1px solid #303030;
|
||||
border-bottom: 1px solid #303030;
|
||||
}
|
||||
|
||||
td {
|
||||
|
@ -30,8 +30,8 @@ body {
|
||||
--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.7) 0%,
|
||||
rgba(0, 159, 218, 0.7) 150%);
|
||||
rgba(204, 238, 247, 0.9) 0%,
|
||||
rgba(10, 159, 218, 0.9) 150%);
|
||||
mask:
|
||||
linear-gradient(#666 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
@ -44,11 +44,10 @@ body {
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
box-shadow:
|
||||
-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);
|
||||
-1px -1px 8px rgba(242, 255, 255, 32%),
|
||||
-1px 1px 8px rgba(242, 255, 255, 32%),
|
||||
1px -1px 8px rgba(242, 255, 255, 32%),
|
||||
1px 1px 8px rgba(242, 255, 255, 32%);
|
||||
}
|
||||
|
||||
.moving.mino {
|
||||
@ -58,14 +57,15 @@ body {
|
||||
}
|
||||
|
||||
.locking.mino {
|
||||
border-width: 1px;
|
||||
border-width: 3px;
|
||||
background: rgba(186, 211, 255, 70%);
|
||||
border-color: rgba(242, 255, 255, 0.7);
|
||||
border-radius: 4px;
|
||||
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 8px rgba(186, 211, 255, 27%),
|
||||
-1px 1px 8px rgba(186, 211, 255, 27%),
|
||||
1px -1px 8px rgba(186, 211, 255, 27%),
|
||||
1px 1px 8px rgba(186, 211, 255, 27%);
|
||||
}
|
||||
|
||||
@keyframes locked-animation {
|
||||
|
@ -14,6 +14,13 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
tr.matrix td:not(.mino) {
|
||||
border-left : 1px solid #222;
|
||||
border-right : 1px solid #222;
|
||||
border-top : 1px solid #111;
|
||||
border-bottom: 1px solid #111;
|
||||
}
|
||||
|
||||
.mino {
|
||||
background: rgba(255, 255, 255, 33%);
|
||||
border: 6px solid var(--color);
|
||||
|
@ -121,11 +121,61 @@ td {
|
||||
}
|
||||
|
||||
@keyframes cleared-line-animation {
|
||||
from {
|
||||
background-color: rgb(206, 255, 255, 40%);
|
||||
filter: saturate(50%) brightness(300%);
|
||||
5% {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
10% {
|
||||
opacity: 100%;
|
||||
}
|
||||
15% {
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 100%;
|
||||
}
|
||||
25% {
|
||||
opacity: 0;
|
||||
}
|
||||
30% {
|
||||
opacity: 100%;
|
||||
}
|
||||
35% {
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 100%;
|
||||
}
|
||||
45% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 100%;
|
||||
}
|
||||
55% {
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
opacity: 100%;
|
||||
}
|
||||
65% {
|
||||
opacity: 0;
|
||||
}
|
||||
70% {
|
||||
opacity: 100%;
|
||||
}
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
80% {
|
||||
opacity: 100%;
|
||||
}
|
||||
85% {
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
opacity: 100%;
|
||||
}
|
||||
95% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user