diff --git a/css/common.css b/css/common.css index 17e7458..dcaebd5 100644 --- a/css/common.css +++ b/css/common.css @@ -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 { diff --git a/css/electro.css b/css/electro.css index 8b4ae7e..327876d 100644 --- a/css/electro.css +++ b/css/electro.css @@ -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 { diff --git a/css/pop.css b/css/pop.css index 051d02f..c2e4311 100644 --- a/css/pop.css +++ b/css/pop.css @@ -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); diff --git a/css/retro.css b/css/retro.css index 6fe48c8..da9af6e 100644 --- a/css/retro.css +++ b/css/retro.css @@ -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; } } \ No newline at end of file diff --git a/index.html b/index.html index e5448da..2e130b1 100644 --- a/index.html +++ b/index.html @@ -10,9 +10,9 @@ + - @@ -62,9 +62,9 @@
@@ -200,31 +200,13 @@ - - - - - - - - - - - - + + + - - - - - - - - - - - - + + +