143 lines
3.9 KiB
CSS
143 lines
3.9 KiB
CSS
/* Tailwind palette */
|
|
/* Yes, it's that simple.
|
|
* https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
|
|
* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L909 */
|
|
/* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L715 */
|
|
html {
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
/* These need switchable client-side */
|
|
:root {
|
|
/* Foreground */
|
|
--color-fg-base: #334155;
|
|
--color-fg-deemphasized: #475569;
|
|
--color-fg-headings: #0f172a;
|
|
/* Background */
|
|
--color-bg-base: #f1f5f9;
|
|
--color-bg-raised-1: #e2e8f0;
|
|
--color-bg-raised-2: #cbd5e1;
|
|
/* Borders */
|
|
--color-bd-base: #cbd5e1;
|
|
--color-bd-highlighted: #64748b;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* Foreground */
|
|
--color-fg-base: #cbd5e1;
|
|
--color-fg-deemphasized: #94a3b8;
|
|
--color-fg-headings: #f1f5f9;
|
|
/* Background */
|
|
--color-bg-base: #0f172a;
|
|
--color-bg-raised-1: #1e293b;
|
|
--color-bg-raised-2: #334155;
|
|
/* Borders */
|
|
--color-bd-base: #334155;
|
|
--color-bd-highlighted: #64748b;
|
|
}
|
|
}
|
|
|
|
/* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L162 */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: Inter, "Inter Variable", sans-serif;
|
|
color: var(--color-fg-base);
|
|
background-color: var(--color-bg-base);
|
|
padding: 4rem 2rem;
|
|
margin: 0 auto;
|
|
max-width: 56rem;
|
|
}
|
|
body.wide {
|
|
max-width: 72rem;
|
|
}
|
|
@media not all and (min-width: var(--max-width-lg)) {
|
|
body {
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
body header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
body header h1 {
|
|
margin: 0;
|
|
color: var(--color-fg-headings);
|
|
font-size: 1.875rem;
|
|
font-weight: 800;
|
|
}
|
|
body footer {
|
|
color: var(--color-fg-deemphasized);
|
|
margin-top: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
body.paste header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
}
|
|
body.paste header .action-buttons {
|
|
display: flex;
|
|
justify-content: end;
|
|
gap: 0.5rem;
|
|
}
|
|
body.paste header .action-buttons button,
|
|
body.paste header .action-buttons [role=button] {
|
|
background-color: var(--color-bg-raised-1);
|
|
padding: 0.25rem 0.75rem;
|
|
border: 1px solid var(--color-bd-base);
|
|
border-radius: 0.5rem;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
font-size: 0.875rem;
|
|
text-decoration: none;
|
|
}
|
|
body.paste header .action-buttons button:hover, body.paste header .action-buttons button:focus-visible,
|
|
body.paste header .action-buttons [role=button]:hover,
|
|
body.paste header .action-buttons [role=button]:focus-visible {
|
|
background-color: var(--color-bg-raised-2);
|
|
border-color: var(--color-bd-highlighted);
|
|
}
|
|
body.paste main pre {
|
|
background-color: var(--color-bg-raised-1);
|
|
padding: 1rem;
|
|
border: 1px solid var(--color-bd-base);
|
|
border-radius: 0.75rem;
|
|
margin: 0;
|
|
}
|
|
|
|
body.admin-pastes main form input[type=text],
|
|
body.admin-pastes main form textarea,
|
|
body.admin-pastes main form input[type=submit] {
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 0.5rem;
|
|
background-color: var(--color-bg-raised-1);
|
|
border: 1px solid var(--color-bd-base);
|
|
font-size: inherit;
|
|
}
|
|
body.admin-pastes main form input[type=text]:hover, body.admin-pastes main form input[type=text]:focus-visible,
|
|
body.admin-pastes main form textarea:hover,
|
|
body.admin-pastes main form textarea:focus-visible,
|
|
body.admin-pastes main form input[type=submit]:hover,
|
|
body.admin-pastes main form input[type=submit]:focus-visible {
|
|
background-color: var(--color-bg-raised-2);
|
|
border-color: var(--color-bd-highlighted);
|
|
}
|
|
body.admin-pastes main form input[type=text],
|
|
body.admin-pastes main form textarea {
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
body.admin-pastes main form textarea {
|
|
min-height: 8rem;
|
|
}
|
|
body.admin-pastes main form input[type=submit] {
|
|
cursor: pointer;
|
|
margin-left: auto;
|
|
display: block;
|
|
}
|
|
|
|
/*# sourceMappingURL=style.css.map */
|