145 lines
2.4 KiB
CSS
145 lines
2.4 KiB
CSS
:root {
|
|
--cell-side: 20px;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Early GameBoy";
|
|
src: url("retro/Early GameBoy.ttf");
|
|
}
|
|
|
|
#screenRow {
|
|
background-image: url("retro/bg.png");
|
|
background-size: 10px;
|
|
padding: 40px 20px;
|
|
border: 3px inset black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.col {
|
|
gap: 8px;
|
|
}
|
|
|
|
.card {
|
|
background: #8D8E04;
|
|
border-radius: 0;
|
|
border-image-source: url("retro/border-sm.png");
|
|
border-image-slice: 25;
|
|
border-image-width: 13px;
|
|
border-image-repeat: repeat;
|
|
border-image-outset: 12px;
|
|
box-shadow: unset;
|
|
width: 100%;
|
|
}
|
|
|
|
.card-header {
|
|
background: #8D8E04;
|
|
}
|
|
|
|
#matrixCard {
|
|
background: #808302;
|
|
border-image-source: url("retro/border-lg.png");
|
|
border-image-slice: 30;
|
|
border-image-width: 15px;
|
|
border-image-outset: 15px;
|
|
}
|
|
|
|
#statsTable,
|
|
.card,
|
|
#messagesSpan {
|
|
font-family: "Early GameBoy", monospace;
|
|
color: #254806;
|
|
text-shadow: -1px -1px 3px rgba(0, 0, 0, 40%), 1px 1px 1px rgba(0, 0, 0, 40%);
|
|
}
|
|
|
|
#statsTable {
|
|
font-size: .7em;
|
|
letter-spacing: -.1em;
|
|
}
|
|
|
|
#statsTable tr {
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
#statsTable th,
|
|
#statsTable td {
|
|
border: 0;
|
|
padding: 0 .2rem;
|
|
}
|
|
|
|
#statsTable td {
|
|
width: auto;
|
|
text-align: end;
|
|
}
|
|
|
|
#messagesSpan {
|
|
text-shadow: -2px -2px #808302, -2px 2px #808302, 2px -2px #808302, 2px 2px #808302;
|
|
}
|
|
|
|
td {
|
|
border: 0 !important;
|
|
}
|
|
|
|
.mino {
|
|
box-shadow: -2px -2px 5px rgba(0, 0, 0, 40%), 1px 1px 2px rgba(0, 0, 0, 40%);
|
|
background-size: 100%;
|
|
}
|
|
|
|
.I.mino {
|
|
background-image: url("retro/I-mino.png")
|
|
}
|
|
|
|
.J.mino {
|
|
background-image: url("retro/J-mino.png")
|
|
}
|
|
|
|
.L.mino {
|
|
background-image: url("retro/L-mino.png")
|
|
}
|
|
|
|
.O.mino {
|
|
background-image: url("retro/O-mino.png")
|
|
}
|
|
|
|
.S.mino {
|
|
background-image: url("retro/S-mino.png")
|
|
}
|
|
|
|
.T.mino {
|
|
background-image: url("retro/T-mino.png")
|
|
}
|
|
|
|
.Z.mino {
|
|
background-image: url("retro/Z-mino.png")
|
|
}
|
|
|
|
@keyframes blinker {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.locking.mino {
|
|
animation: blinker 0.04s step-start infinite;
|
|
}
|
|
|
|
.ghost.mino {
|
|
opacity: 50%;
|
|
}
|
|
|
|
.locked.mino {
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes cleared-line-animation {
|
|
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
|
|
opacity: 0;
|
|
}
|
|
10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
|
|
tr.cleared-line-animation {
|
|
animation: cleared-line-animation ease-out .4s;
|
|
} |