forked from neri/datatrash
css focus styling
This commit is contained in:
parent
95dacb20b4
commit
5a933641a4
|
@ -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,
|
||||
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 {
|
||||
|
@ -111,7 +130,7 @@ a.button:visited {
|
|||
}
|
||||
|
||||
.large-link {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
margin-bottom: 1em;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue