177 lines
3.5 KiB
CSS
177 lines
3.5 KiB
CSS
:root {
|
|
--top-bar-height: 6vh;
|
|
--fade-height: 12vh;
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
#minefield {
|
|
width: 35% !important;
|
|
}
|
|
|
|
#minefield > div {
|
|
font-size: 3vh !important;
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
image-rendering: crisp-edges;
|
|
image-rendering: pixelated;
|
|
|
|
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("res/gfx/background.png");
|
|
background-size: cover;
|
|
|
|
font-family: serif;
|
|
}
|
|
|
|
/* Main menu state visibility. */
|
|
body.main-menu {
|
|
#main-menu { display: flex; }
|
|
#game-view { display: none; }
|
|
}
|
|
|
|
/* Game view state visibility. */
|
|
body.game-view {
|
|
#main-menu { display: none; }
|
|
#game-view { display: flex; }
|
|
}
|
|
|
|
/* Victory & failure popups. */
|
|
body.popup-victory, body.popup-failure {
|
|
#finished-popup { display: flex; }
|
|
#restart, #newgame { display: none; }
|
|
|
|
/* #minefield {
|
|
padding-top: calc(var(--top-bar-height) * 2 + 4em);
|
|
} */
|
|
|
|
#top-bar {
|
|
background: black;
|
|
}
|
|
}
|
|
|
|
body.popup-failure { #nextlevel { display: none; } }
|
|
body.popup-victory { #nextlevel { display: block; } }
|
|
|
|
#particle-canvas {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#main-menu {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
color: white;
|
|
}
|
|
|
|
span#game-title {
|
|
font-size: 3em;
|
|
margin: 16px;
|
|
}
|
|
|
|
#button-list {
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
#button-list button {
|
|
padding: 1em;
|
|
margin: 8px;
|
|
}
|
|
|
|
#game-view {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#top-bar {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: var(--top-bar-height);
|
|
background-image: linear-gradient(black, black, transparent);
|
|
display: flex;
|
|
}
|
|
|
|
#top-bar > span {
|
|
padding: 1em;
|
|
color: white;
|
|
align-content: center;
|
|
}
|
|
|
|
#top-bar .data { flex: 1; }
|
|
|
|
#bottom-fade {
|
|
bottom: 0;
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: var(--fade-height);
|
|
background-image: linear-gradient(transparent, black);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#finished-popup {
|
|
position: fixed;
|
|
width: 100vw;
|
|
margin-top: var(--top-bar-height);
|
|
background-image: linear-gradient(black, black, transparent);
|
|
display: none;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
color: white;
|
|
}
|
|
|
|
#finished-popup span {
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
margin: 12px;
|
|
}
|
|
|
|
#finished-popup button {
|
|
padding: 1em;
|
|
flex: 1;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
#minefield {
|
|
width: 100%;
|
|
display: grid;
|
|
user-select: none;
|
|
grid-template-columns: repeat(8, 12.5%);
|
|
padding: 2em;
|
|
/* Padding for the top info bar. */
|
|
padding-top: calc(var(--top-bar-height) + 2em);
|
|
/* Padding for the bottom fade. */
|
|
padding-bottom: calc(var(--fade-height) + 2em);
|
|
}
|
|
|
|
/* Cells. */
|
|
#minefield > div {
|
|
aspect-ratio: 1/1;
|
|
font-weight: bold;
|
|
text-shadow: 0 -2px white;
|
|
-webkit-text-stroke: 1px white;
|
|
text-align: center;
|
|
font-size: 5vw;
|
|
margin: 3px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.unknown, .known { background-size: cover; }
|
|
.unknown { background-image: url("./res/gfx/unknown-1.png"); }
|
|
.known { background-image: url("./res/gfx/known.png"); }
|
|
.flagged { background-image: url("./res/gfx/flagged.png"); }
|
|
.exploded { background-image: url("./res/gfx/explosion.png"); }
|
|
.known.mine { background-image: url("./res/gfx/bomb.png"); }
|
|
|
|
.n1 { color: blue; }
|
|
.n2 { color: green; }
|
|
.n3 { color: red; }
|
|
.n4 { color: purple; }
|
|
.n5 { color: orange; }
|
|
.n6 { color: cyan; }
|
|
.n7 { color: pink; }
|
|
.n8 { color: teal; }
|