You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
1.7 KiB
CSS
107 lines
1.7 KiB
CSS
button#shuffle::after {
|
|
content: "Shuffle";
|
|
}
|
|
|
|
table#guesses_and_entry td {
|
|
width: 3.5vw;
|
|
}
|
|
input.lock {
|
|
display: none;
|
|
text-align: center;
|
|
}
|
|
input.lock:checked + div > label::after {
|
|
content: '\2744'; /* snowflake symbol */
|
|
}
|
|
input.lock + div > label::after {
|
|
content: '\1f31e'; /* sun symbol */
|
|
}
|
|
input.lock + div {
|
|
text-align: center;
|
|
}
|
|
input.lock + div > label {
|
|
font-size: 4ex;
|
|
}
|
|
div.letter {
|
|
text-align: center;
|
|
}
|
|
input.letter {
|
|
width: 3.5vw;
|
|
font-size: 2ex;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
input.lock:checked ~ div.letter > input.letter {
|
|
background: #ccf;
|
|
}
|
|
input.letter.focused {
|
|
border-color: yellow;
|
|
}
|
|
|
|
#guesses .guess {
|
|
border: solid black 1px;
|
|
width: fit-content;
|
|
}
|
|
#guesses .guess td {
|
|
font-size: 3ex;
|
|
text-align: center;
|
|
width: 3.5vw;
|
|
border: solid black 1px;
|
|
}
|
|
#guesses .guess .elsewhere {
|
|
background: yellow;
|
|
}
|
|
#guesses .guess .unused {
|
|
background: #f99;
|
|
}
|
|
#guesses .guess .match {
|
|
background: #9f9;
|
|
}
|
|
|
|
#submit_buttons, button {
|
|
font-size: 2ex;
|
|
margin: 1vw;
|
|
}
|
|
|
|
#available_letters button {
|
|
font-size: 4ex;
|
|
text-align: center;
|
|
width: 12.5vw;
|
|
margin: 2.5vw;
|
|
}
|
|
#available_letters button.unknown, #available_letters button.space {
|
|
background: lightgrey;
|
|
}
|
|
#available_letters button.unknown.not_here {
|
|
background: grey;
|
|
}
|
|
#available_letters button.elsewhere {
|
|
background: yellow;
|
|
}
|
|
#available_letters button.elsewhere.not_here {
|
|
background: #76760a;
|
|
}
|
|
#available_letters button.unused {
|
|
background: #971c1c;
|
|
}
|
|
#available_letters button.match {
|
|
background: #9f9;
|
|
}
|
|
#available_letters button.match.not_here {
|
|
background: #4a4;
|
|
}
|
|
|
|
#links {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
#permalink {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
#random {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|