qwörtle/index.css

90 lines
1.2 KiB
CSS
Raw Normal View History

2022-02-22 21:53:28 +00:00
body {
background-color: #1f2937;
color: #fff;
2022-02-23 10:26:58 +00:00
--columns: 2;
--rows: 2;
}
body.wide {
--columns: 4;
--rows: 1;
2022-02-22 21:53:28 +00:00
}
.centering {
display: flex;
flex-direction: column;
align-items: center;
}
#main {
display: grid;
2022-02-23 10:26:58 +00:00
grid-template-columns: repeat(var(--columns), max-content);
grid-template-rows: repeat(var(--rows), max-content);
2022-02-22 21:53:28 +00:00
gap: 2em;
}
.row {
margin-top: 0;
margin-bottom: 0;
}
.invalid {
color: red;
}
.correct {
2022-02-23 10:16:34 +00:00
background-color: rgb(0 204 136);
color: #000;
2022-02-22 21:53:28 +00:00
}
.wrong-position {
2022-02-23 10:16:34 +00:00
background-color: rgb(255 204 0);
2022-02-22 21:53:28 +00:00
color: #000;
}
.cell {
padding: 0.5em;
display: inline-block;
width: 1em;
height: 1em;
font-family: monospace;
font-size: xx-large;
border: 1px solid #bbb;
vertical-align: top;
2022-02-23 10:16:34 +00:00
text-align: center;
}
#keyboard {
margin-top: 1em;
}
/*
.keyboard-row:nth-child(2) {
margin-left: 0.75em;
}
.keyboard-row:nth-child(3) {
margin-left: 1.5em;
2022-02-22 21:53:28 +00:00
}
2022-02-23 10:16:34 +00:00
*/
.key {
width: 1.5em;
height: 1.5em;
font-size: xx-large;
margin: 0.05em;
vertical-align: top;
color: #fff;
background-color: rgb(107 114 128);
border-color: rgb(55 65 81);
cursor: pointer;
}
#backspace, #enter {
width: 3em;
margin: 0.1em;
display: inline-flex;
justify-content: center;
align-items: center;
}