css focus styling

This commit is contained in:
neri 2021-10-13 09:34:15 +02:00
parent ac533f085d
commit 9c1067eaaa
1 changed files with 27 additions and 7 deletions

View File

@ -1,6 +1,11 @@
:root {
--bg: #222222;
--bg-alt: #444444;
--accent: #007600;
--accent-alt: #228b22;
--fg: #e9e9e9;
--fg-light: #b6b6b6;
--radius: 5px;
}
html {
@ -59,11 +64,25 @@ textarea,
color: var(--fg);
padding: 0.5rem;
border: 2px solid var(--fg);
border-radius: 5px;
border-radius: var(--radius);
margin-bottom: 1rem;
max-width: calc(100vw - 2rem);
}
details {
display: inline;
}
input:focus-within,
select:focus-within,
textarea:focus-within,
.button:focus-within,
details:focus-within,
footer > a:focus-within {
outline: solid cornflowerblue 2px;
border-radius: var(--radius);
}
textarea {
height: 30vh;
}
@ -72,7 +91,7 @@ textarea {
display: none;
}
input[type="checkbox"] {
input[type='checkbox'] {
margin-bottom: 1.5rem;
}
@ -94,15 +113,15 @@ a.button:visited {
}
.button:hover {
background-color: #444444;
background-color: var(--bg-alt);
}
.button.main {
background-color: #007600;
background-color: var(--accent);
}
.button.main:hover {
background-color: forestgreen;
background-color: var(--accent-alt);
}
.usage {
@ -121,6 +140,7 @@ a.button:visited {
}
footer {
font-family: sans;
flex-shrink: 0;
display: flex;
justify-content: flex-end;
@ -129,12 +149,12 @@ footer {
.repo {
padding: 0.5rem;
color: #b6b6b6;
color: var(--fg-light);
text-decoration: none;
}
.repo:visited {
color: #b6b6b6;
color: var(--fg-light);
}
.repo:hover {