54 lines
973 B
CSS
54 lines
973 B
CSS
|
html {
|
||
|
|
height: 100%;
|
||
|
|
background: black;
|
||
|
|
color: white;
|
||
|
|
font-size: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
label, label::before {
|
||
|
|
display: block;
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
label::before {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
margin: auto;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
input { display:none; label: pointer-events: none; }
|
||
|
|
|
||
|
|
label { pointer-events: none; }
|
||
|
|
|
||
|
|
input ~ main label::before { content: "O"; }
|
||
|
|
#won { display: initial; user-select: none; }
|
||
|
|
input[data-safe]:not(:checked) ~ footer #won { display: none; }
|
||
|
|
input[data-safe]:not(:checked) ~ main label { pointer-events: initial; }
|
||
|
|
|
||
|
|
#lost { display: none; user-select: none ; }
|
||
|
|
input[data-mine]:checked ~ footer #lost { display: initial; }
|
||
|
|
input[data-mine]:checked ~ main label { pointer-events: none; }
|
||
|
|
|
||
|
|
footer {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#lost, #won {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
}
|