121 lines
2.9 KiB
CSS
121 lines
2.9 KiB
CSS
.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: 1px;
|
|
}
|
|
|
|
.I.mino {
|
|
--background-color: #009FdA;
|
|
--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: #2E00FB;
|
|
--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: #FF7900;
|
|
--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: #FeCB00;
|
|
--frontier-color: #fce15c;
|
|
--light-color: #ffedac;;
|
|
border-top-color: #ffe364;
|
|
border-left-color: #e7ba23;
|
|
border-right-color: #e3a707;
|
|
border-bottom-color: #ca9501;
|
|
}
|
|
|
|
.S.mino {
|
|
--background-color: #67EE12;
|
|
--frontier-color: #93f85a;
|
|
--light-color: #C8FBA8;
|
|
border-top-color: #a4fc6d;
|
|
border-left-color: #5ee82b;
|
|
border-right-color: #35db00;
|
|
border-bottom-color: #1cbc02;
|
|
}
|
|
|
|
.T.mino {
|
|
--background-color: #B000FE;
|
|
--frontier-color: #c541fc;
|
|
--light-color: #edb2ff;
|
|
border-top-color: #d380ff;
|
|
border-left-color: #b42deb;
|
|
border-right-color: #8000cd;
|
|
border-bottom-color: #6e019a;
|
|
}
|
|
|
|
.Z.mino {
|
|
--background-color: #ed2939;
|
|
--frontier-color: #fe6483;
|
|
--light-color: #ffb8c5;
|
|
border-top-color: #fd718d;
|
|
border-left-color: #e62250;
|
|
border-right-color: #e20332;
|
|
border-bottom-color: #ad1936;
|
|
}
|
|
|
|
.ghost.mino {
|
|
background: rgba(0, 0, 0, 10%) !important;
|
|
border: 3px solid rgba(128, 128, 128, 25%) !important;
|
|
box-shadow:
|
|
-2px -2px 6px rgba(128, 128, 128, 25%),
|
|
-2px 2px 6px rgba(128, 128, 128, 25%),
|
|
2px -2px 6px rgba(128, 128, 128, 25%),
|
|
2px 2px 6px rgba(128, 128, 128, 25%);
|
|
}
|
|
|
|
.moving.mino {
|
|
filter: saturate(80%) brightness(150%);
|
|
}
|
|
|
|
.locking.mino {
|
|
filter: saturate(50%) brightness(200%);
|
|
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%);
|
|
}
|
|
|
|
@keyframes locked-animation {
|
|
from {
|
|
filter: saturate(50%) brightness(400%);
|
|
box-shadow:
|
|
-1px -1px 4px rgba(255, 255, 255, 25%),
|
|
-1px 1px 4px rgba(255, 255, 255, 25%),
|
|
1px -1px 4px rgba(255, 255, 255, 25%),
|
|
1px 1px 4px rgba(255, 255, 255, 25%);
|
|
}
|
|
}
|
|
|
|
.locked.mino {
|
|
animation: locked-animation;
|
|
animation-duration: 0.2s;
|
|
} |