122 lines
3.0 KiB
CSS
122 lines
3.0 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 {
|
|
margin: 1px;
|
|
background: rgba(0, 0, 0, 10%) !important;
|
|
border: 3px solid #646464 !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;
|
|
} |