datatrash/static/index.css

208 lines
2.8 KiB
CSS
Raw Normal View History

2020-08-03 00:41:36 +00:00
:root {
2023-02-08 11:34:24 +00:00
--bg: #262824;
--bg-alt: #434742;
2023-04-25 09:30:57 +00:00
--accent: #007100;
2021-10-13 07:34:15 +00:00
--accent-alt: #228b22;
2023-02-08 11:34:24 +00:00
--fg: #dfe1de;
--fg-light: #afb3ab;
2021-10-13 07:34:15 +00:00
--radius: 5px;
2023-02-08 11:34:24 +00:00
--separators: 1px;
--separators-wide: 2px;
2020-08-03 00:41:36 +00:00
}
2020-08-19 14:25:03 +00:00
2021-06-27 23:11:10 +00:00
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
2020-07-08 19:26:46 +00:00
body {
display: flex;
flex-direction: column;
justify-content: space-between;
2020-08-19 14:25:03 +00:00
background-color: var(--bg);
2021-09-09 20:18:42 +00:00
min-height: 100vh;
margin: 0;
2021-12-10 19:31:04 +00:00
font-family: sans-serif;
2020-07-08 19:26:46 +00:00
}
main {
2020-08-03 00:41:36 +00:00
color: var(--fg);
width: 100%;
2022-01-29 12:16:04 +00:00
max-width: 1000px;
2020-07-08 19:26:46 +00:00
margin: 0 auto;
2023-02-08 11:34:24 +00:00
padding: 1em;
2020-07-08 19:26:46 +00:00
}
2020-07-09 17:27:24 +00:00
h1 > a,
h1 > a:visited {
2020-08-03 00:41:36 +00:00
color: var(--fg);
2020-07-09 17:27:24 +00:00
}
2023-07-10 20:33:17 +00:00
.icon {
height: 1.2em;
margin-right: 0.1em;
}
2020-07-09 17:27:24 +00:00
a {
color: cornflowerblue;
}
a:visited {
color: mediumorchid;
}
label {
2020-08-03 00:41:36 +00:00
display: inline-block;
margin-right: 0.25em;
2020-08-03 00:41:36 +00:00
margin-bottom: 0.5em;
}
2020-07-09 17:27:24 +00:00
input,
select,
textarea,
.button {
display: inline-block;
2023-02-08 11:34:24 +00:00
background-color: var(--bg-alt);
2020-08-03 00:41:36 +00:00
color: var(--fg);
2023-02-08 11:34:24 +00:00
padding: 0.5em;
border: var(--separators) solid var(--fg-light);
2021-10-13 07:34:15 +00:00
border-radius: var(--radius);
2023-02-08 11:34:24 +00:00
margin-bottom: 1.5em;
max-width: calc(100vw - 2em);
2020-07-09 17:27:24 +00:00
}
2021-10-13 07:34:15 +00:00
details {
display: inline;
2023-02-10 23:37:58 +00:00
max-width: 100%;
}
details > pre {
margin: 0;
padding: 1rem 0.5rem;
overflow-x: scroll;
2021-10-13 07:34:15 +00:00
}
details summary {
cursor: pointer;
2023-02-08 11:34:24 +00:00
padding: 0.5em;
}
details[open] summary {
border-bottom: var(--separators) solid var(--fg-light);
}
2021-10-13 07:34:15 +00:00
input:focus-within,
select:focus-within,
textarea:focus-within,
.button:focus-within,
details:focus-within,
a:focus-within {
2023-02-08 11:34:24 +00:00
outline: solid cornflowerblue var(--separators);
2021-10-13 07:34:15 +00:00
border-radius: var(--radius);
}
textarea {
2022-01-29 12:16:04 +00:00
width: 100%;
height: 30vh;
}
2023-01-05 19:43:50 +00:00
h1 + textarea {
height: 60vh;
}
2021-09-09 20:18:42 +00:00
.hidden {
display: none;
}
2023-07-10 20:33:17 +00:00
input[type="checkbox"] {
2023-02-08 11:34:24 +00:00
margin-top: 0.5em;
margin-bottom: 1.5em;
}
.button {
cursor: pointer;
2021-12-10 19:31:04 +00:00
font-family: sans-serif;
2021-08-18 21:22:50 +00:00
font-weight: normal;
2023-02-08 11:34:24 +00:00
font-size: 1em;
margin-right: 0.5em;
margin-top: 1em;
2021-09-09 20:18:42 +00:00
user-select: none;
2023-02-08 11:34:24 +00:00
border-width: var(--separators-wide);
}
a.button {
text-decoration: none;
}
a.button:visited {
2020-08-03 00:41:36 +00:00
color: var(--fg);
}
.button:hover {
2021-10-13 07:34:15 +00:00
background-color: var(--bg-alt);
2023-02-08 11:34:24 +00:00
border-color: var(--fg);
}
.button.main {
2021-10-13 07:34:15 +00:00
background-color: var(--accent);
2020-07-09 17:27:24 +00:00
}
.button.main:hover {
2021-10-13 07:34:15 +00:00
background-color: var(--accent-alt);
}
.usage {
margin-top: 2em;
overflow: auto;
2023-02-08 11:34:24 +00:00
color: var(--fg-light);
}
2021-09-09 20:18:42 +00:00
.usage > p {
display: flex;
flex-direction: column;
}
.usage > p > label {
font-weight: 500;
}
.usage > p > code {
margin-left: 1rem;
}
2021-09-09 20:18:42 +00:00
.large-link {
2021-10-13 07:34:15 +00:00
display: inline-block;
2021-09-09 20:18:42 +00:00
margin-bottom: 1em;
max-height: 60vh;
overflow-y: auto;
2023-02-08 11:34:24 +00:00
font-size: clamp(1em, 3vw, 1.5em);
2021-09-09 20:18:42 +00:00
overflow-wrap: anywhere;
}
footer {
flex-shrink: 0;
display: flex;
justify-content: flex-end;
2023-02-08 11:34:24 +00:00
padding: 0.5em;
}
2023-02-10 23:16:51 +00:00
footer > * {
2023-02-08 11:34:24 +00:00
padding: 0.5em;
2021-10-13 07:34:15 +00:00
color: var(--fg-light);
text-decoration: none;
}
2023-02-10 23:16:51 +00:00
footer > *:visited {
2021-10-13 07:34:15 +00:00
color: var(--fg-light);
}
2023-02-10 23:16:51 +00:00
footer > *:hover {
color: var(--fg);
}