almost done
This commit is contained in:
91
css/99.css
Normal file
91
css/99.css
Normal file
@ -0,0 +1,91 @@
|
||||
.mino {
|
||||
background: radial-gradient(
|
||||
ellipse 140% 66% at 122% 88%,
|
||||
var(--background-color) 100%,
|
||||
var(--frontier-color) 105%,
|
||||
var(--light-color) 130%
|
||||
);
|
||||
border: 4px solid;
|
||||
padding: 0;
|
||||
opacity: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.I.mino {
|
||||
--background-color: #00d6fb;
|
||||
--frontier-color: #43e7fd;
|
||||
--light-color: #afeff9;
|
||||
border-top-color: #7cf2fd;
|
||||
border-left-color: #2ed5e5;
|
||||
border-right-color: #00b8ca;
|
||||
border-bottom-color: #00a4b0;
|
||||
}
|
||||
|
||||
.J.mino {
|
||||
--background-color: #2d00fa;
|
||||
--frontier-color: #7054fb;
|
||||
--light-color: #b8b4ff;
|
||||
border-top-color: #4985fd;
|
||||
border-left-color: #2f36ea;
|
||||
border-right-color: #0006ca;
|
||||
border-bottom-color: #00009d;
|
||||
}
|
||||
|
||||
.L.mino {
|
||||
--background-color: #ff6c13;
|
||||
--frontier-color: #fe9551;
|
||||
--light-color: #fdd0b7;
|
||||
border-top-color: #fd9f6b;
|
||||
border-left-color: #e76d28;
|
||||
border-right-color: #e74f00;
|
||||
border-bottom-color: #c54800;
|
||||
}
|
||||
|
||||
.O.mino {
|
||||
--background-color: #ffce12;
|
||||
--frontier-color: #fce15c;
|
||||
--light-color: #ffedac;;
|
||||
border-top-color: #ffe364;
|
||||
border-left-color: #e7ba23;
|
||||
border-right-color: #e3a707;
|
||||
border-bottom-color: #ca9501;
|
||||
}
|
||||
|
||||
.T.mino {
|
||||
--background-color: #ad00fa;
|
||||
--frontier-color: #c541fc;
|
||||
--light-color: #edb2ff;
|
||||
border-top-color: #d380ff;
|
||||
border-left-color: #b42deb;
|
||||
border-right-color: #8000cd;
|
||||
border-bottom-color: #6e019a;
|
||||
}
|
||||
|
||||
.S.mino {
|
||||
--background-color: #6e1;
|
||||
--frontier-color: #93f85a;
|
||||
--light-color: #93f85a;
|
||||
border-top-color: #a4fc6d;
|
||||
border-left-color: #5ee82b;
|
||||
border-right-color: #35db00;
|
||||
border-bottom-color: #1cbc02;
|
||||
}
|
||||
|
||||
.Z.mino {
|
||||
--background-color: #ff1945;
|
||||
--frontier-color: #fe6483;
|
||||
--light-color: #ffb8c5;
|
||||
border-top-color: #fd718d;
|
||||
border-left-color: #e62250;
|
||||
border-right-color: #e20332;
|
||||
border-bottom-color: #ad1936;
|
||||
}
|
||||
|
||||
.locked.mino {
|
||||
filter: saturate(50%) brightness(200%)
|
||||
}
|
||||
|
||||
.ghost.mino {
|
||||
opacity: 20%;
|
||||
filter: brightness(200%)
|
||||
}
|
||||
196
css/common.css
Normal file
196
css/common.css
Normal file
@ -0,0 +1,196 @@
|
||||
:root {
|
||||
--cell-side: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: rgba(33, 37, 41, 30%);
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgb(37, 41, 45);
|
||||
}
|
||||
|
||||
.minoes-table {
|
||||
table-layout: fixed;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
height: calc(var(--rows) * var(--cell-side));
|
||||
width: calc(var(--columns) * var(--cell-side));
|
||||
}
|
||||
|
||||
#matrixTable {
|
||||
margin-top: calc(-1 * var(--no-bordered-rows) * var(--cell-side));
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes hard-dropped-table-animation {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
#matrixTable.hard-dropped-table-animation {
|
||||
animation: hard-dropped-table-animation .2s;
|
||||
}
|
||||
|
||||
tr.no-border td:not(.mino) {
|
||||
border-width: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
tr.border td:not(.mino) {
|
||||
border: 1px solid #333;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
td {
|
||||
overflow: hidden;
|
||||
width: calc(var(--cell-side) + 4px);
|
||||
height: calc(var(--cell-side) + 4px);
|
||||
}
|
||||
|
||||
@keyframes hard-drop-animation {
|
||||
from {
|
||||
background-color: rgb(206, 255, 255, 40%);
|
||||
filter: saturate(50%) brightness(300%);
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
td.hard-drop-animation {
|
||||
animation: hard-drop-animation ease-out .3s;
|
||||
}
|
||||
|
||||
@keyframes line-cleared-animation {
|
||||
from {
|
||||
background-color: rgb(206, 255, 255, 40%);
|
||||
filter: saturate(50%) brightness(300%);
|
||||
box-shadow: -60px 0 5px white, 60px 0 5px white;
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
tr.line-cleared-animation{
|
||||
animation: line-cleared-animation ease-out .3s;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
|
||||
font-size: 3vmin;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#levelSpan {
|
||||
font-size: 4vmin;
|
||||
font-weight: bold;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes show-level-animation {
|
||||
from {
|
||||
opacity: 0;
|
||||
top: 70%;
|
||||
}
|
||||
50% {
|
||||
opacity: 100%;
|
||||
top: 40%
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
top: 20%
|
||||
}
|
||||
}
|
||||
|
||||
#levelSpan.show-level-animation {
|
||||
animation: cubic-bezier(0.4, 0, 0.6, 1) 2s show-level-animation;
|
||||
}
|
||||
|
||||
@keyframes zoom-in-animation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(1.5, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-in-animation {
|
||||
0% {
|
||||
opacity:0;
|
||||
transform:rotate(200deg);
|
||||
}
|
||||
30% {
|
||||
opacity:1;
|
||||
transform:translateZ(0);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(1.5, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
#messagesSpan div {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#messagesSpan div.rotate-in-animation {
|
||||
animation-name: rotate-in-animation;
|
||||
animation-timing-function: cubic-bezier(.25,.46,.45,.94);
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
#messagesSpan div.zoom-in-animation {
|
||||
animation-name: zoom-in-animation;
|
||||
animation-timing-function: cubic-bezier(.25,.46,.45,.94);
|
||||
transform-origin:center;
|
||||
}
|
||||
#messagesSpan div.zoom-in-animation:first-child {
|
||||
animation-duration: 1s;
|
||||
}
|
||||
#messagesSpan div.zoom-in-animation:nth-child(2) {
|
||||
animation-delay: .2s;
|
||||
animation-duration: .9s;
|
||||
}
|
||||
#messagesSpan div.zoom-in-animation:nth-child(3) {
|
||||
animation-delay: .4s;
|
||||
animation-duration: .8s;
|
||||
}
|
||||
#messagesSpan div.zoom-in-animation:nth-child(4) {
|
||||
animation-delay: .6s;
|
||||
animation-duration: .7s;
|
||||
}
|
||||
#messagesSpan div.zoom-in-animation:nth-child(5) {
|
||||
animation-delay: .8s;
|
||||
animation-duration: .6s;
|
||||
}
|
||||
16
css/effect.css
Normal file
16
css/effect.css
Normal file
@ -0,0 +1,16 @@
|
||||
.mino {
|
||||
background: rgba(127, 229, 255, 0.3);
|
||||
border: 1px solid rgba(127, 229, 255, 0.7);
|
||||
border-radius: 0.3vmin;
|
||||
}
|
||||
|
||||
.ghost.mino {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
border-radius: 0.3vmin;
|
||||
}
|
||||
|
||||
.locked.mino {
|
||||
background: rgba(242, 255, 255, 0.5);
|
||||
border-color: rgba(242, 255, 255, 0.7);
|
||||
}
|
||||
Reference in New Issue
Block a user