x86-64-wordle/html/static/styles.css

221 lines
3.1 KiB
CSS

* {
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: black;
}
h1 {
color: white;
text-align: center;
font-size: 60px;
}
h2 {
font-size: 40px;
}
.setup {
text-align: center;
color: white;
}
.setup ul {
list-style-type: none;
padding: 0;
}
.setup li {
position: relative;
margin: 0 auto;
display: block;
width: 200px;
height: 40px;
border: 1px solid lightgrey;
cursor: pointer;
text-align: left;
padding: 7px 7px 7px 25px;
font-size: 20px;
}
.setup li span {
position: absolute;
left: 60px;
bottom: 10px;
font-size: 15px;
color: #aaa;
}
.setup li:hover {
background-color: #555;
}
.field {
text-align: center;
}
.cell {
position: relative;
display: inline-block;
width: 55px;
height: 55px;
margin: 3px;
border: 1px solid #555;
font-size: 35px;
color: white;
font-weight: bold;
}
.cell span {
position: absolute;
left: 0;
top: 7px;
right: 0;
bottom: 0;
text-align: center;
}
.cell.Empty {
background-color: black;
}
.cell.Unknown {
background-color: black;
border: 1px solid #888;
}
.cell.Wrong {
background-color: #555;
border: none;
}
.cell.HalfRight {
background-color: #bb0;
border: none;
}
.cell.Right {
background-color: #090;
border: none;
}
.keyboard {
text-align: center;
}
.keyboard.disabled .key {
cursor: initial;
background-color: #555;
color: #888;
}
.key {
display: inline-block;
height: 40px;
min-width: 33px;
margin: 3px;
border: 1px solid #555;
text-align: center;
font-size: 18px;
color: white;
padding-top: 8px;
padding-left: 7px;
padding-right: 7px;
font-weight: bold;
cursor: pointer;
}
.key.Unknown {;
background-color: #555;
border: none;
}
.key.Wrong {
background-color: black;
}
.key.HalfRight {
background-color: #bb0;
border: none;
}
.key.Right {
background-color: #090;
border: none;
}
@media screen and (max-width: 600px) {
.key {
height: 8vw;
min-width: 6vw;
font-size: 4vw;
}
}
.toast {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
min-height: 50px;
background-color: lightgrey;
width: 400px;
border-radius: 0 0 5px 5px;
text-align: center;
font-size: 20px;
padding-top: 10px;
padding-bottom: 10px;
transition: transform 0.3s;
}
.toast.show {
transform: translate(-50%, 0);
}
.result {
position: fixed;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-radius: 5px;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s;
}
.result h1 {
font-size: 70px;
}
.result button {
font-size: 20px;
}
.result.won {
background-color: #090;
}
.result.lost {
background-color: #900;
}
.result.show {
pointer-events: initial;
opacity: 1;
}
.github-link {
display: block;
position: fixed;
bottom: 10px;
right: 10px;
}
.github-link img {
width: 40px;
}