css focus styling

This commit is contained in:
neri 2021-10-13 09:34:15 +02:00
parent 95dacb20b4
commit 5a933641a4
1 changed files with 28 additions and 8 deletions

View File

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