107 lines
1.8 KiB
CSS
107 lines
1.8 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;
|
|
border: 3px inset black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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 th,
|
|
#statsTable td {
|
|
border: 0;
|
|
padding: 0 .2rem;
|
|
}
|
|
|
|
#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")
|
|
}
|
|
|
|
.locked.mino {
|
|
filter: saturate(60%) brightness(200%);
|
|
}
|
|
|
|
.ghost.mino {
|
|
opacity: 50%;
|
|
} |