datatrash/static/index.css

167 lines
2.2 KiB
CSS

:root {
--bg: #222222;
--bg-alt: #444444;
--accent: #007600;
--accent-alt: #228b22;
--fg: #e9e9e9;
--fg-light: #b6b6b6;
--radius: 5px;
}
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: var(--bg);
min-height: 100vh;
margin: 0;
font-family: sans-serif;
}
main {
color: var(--fg);
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
h1 > a,
h1 > a:visited {
color: var(--fg);
}
a {
color: cornflowerblue;
}
a:visited {
color: mediumorchid;
}
label {
display: inline-block;
margin-right: 0.25em;
margin-bottom: 0.5em;
}
input,
select,
textarea,
.button {
display: inline-block;
background-color: var(--bg);
color: var(--fg);
padding: 0.5rem;
border: 2px solid var(--fg);
border-radius: var(--radius);
margin-bottom: 1rem;
max-width: calc(100vw - 2rem);
}
details {
display: inline;
}
details summary {
cursor: pointer;
}
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;
}
.hidden {
display: none;
}
input[type="checkbox"] {
margin-bottom: 1.5rem;
}
.button {
cursor: pointer;
font-family: sans-serif;
font-weight: normal;
font-size: 1rem;
margin-right: 0.5rem;
margin-top: 1rem;
user-select: none;
}
a.button {
text-decoration: none;
}
a.button:visited {
color: var(--fg);
}
.button:hover {
background-color: var(--bg-alt);
}
.button.main {
background-color: var(--accent);
}
.button.main:hover {
background-color: var(--accent-alt);
}
.usage {
margin-top: 2em;
overflow: auto;
}
.large-link {
display: inline-block;
margin-bottom: 1em;
max-height: 60vh;
overflow-y: auto;
font-size: clamp(1rem, 3vw, 1.5rem);
overflow-wrap: anywhere;
}
footer {
flex-shrink: 0;
display: flex;
justify-content: flex-end;
padding: 0.5rem;
}
.repo {
padding: 0.5rem;
color: var(--fg-light);
text-decoration: none;
}
.repo:visited {
color: var(--fg-light);
}
.repo:hover {
color: var(--fg);
}