103 lines
3.2 KiB
CSS
103 lines
3.2 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/forms";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
/* Class-based dark mode: the FOUC script in app.html and the theme store add
|
|
`dark` to <html> so `dark:` utilities apply without relying on prefers-color-scheme. */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Tailwind 4's preflight drops the pointer cursor on buttons; restore it for
|
|
enabled buttons (disabled ones keep the default arrow). */
|
|
button:not(:disabled),
|
|
[role="button"]:not([aria-disabled="true"]) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-neutral-100);
|
|
}
|
|
:where(.dark) body {
|
|
background-color: var(--color-neutral-800);
|
|
}
|
|
|
|
.no-scrollbar {
|
|
scrollbar-width: none;
|
|
}
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
@layer base {
|
|
/* Form inputs in dark mode — the forms plugin defaults to a white background,
|
|
which would punch holes through panels. Override at the element level so we
|
|
don't have to add `dark:bg-neutral-800` to every <input>/<textarea>. */
|
|
:where(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
|
|
:where(.dark) textarea,
|
|
:where(.dark) select {
|
|
background-color: var(--color-neutral-800);
|
|
color: var(--color-neutral-100);
|
|
}
|
|
:where(.dark) input::placeholder,
|
|
:where(.dark) textarea::placeholder {
|
|
color: var(--color-neutral-500);
|
|
}
|
|
|
|
/* Redraw the native search clear button so it follows our palette instead
|
|
of the OS accent color. Firefox renders no button at all. */
|
|
input[type="search"]::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
background-color: var(--color-neutral-400);
|
|
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 10.6 6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4z"/></svg>')
|
|
no-repeat center / contain;
|
|
cursor: pointer;
|
|
}
|
|
:where(.dark) input[type="search"]::-webkit-search-cancel-button {
|
|
background-color: var(--color-neutral-500);
|
|
}
|
|
}
|
|
|
|
/* Tighter heading rhythm for all rendered (prose) content. Overrides the
|
|
typography plugin's em-based heading margins; the first block stays flush. */
|
|
.prose :is(h1, h2, h3, h4, h5, h6) {
|
|
margin-top: 0.8em;
|
|
margin-bottom: 0.3em;
|
|
font-weight: normal;
|
|
}
|
|
.prose :is(h1) {
|
|
font-size: 1.65rem;
|
|
color: var(--color-accent);
|
|
}
|
|
.prose :is(p) {
|
|
margin-top: 0;
|
|
}
|
|
.prose > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Prose headings/strong/links default to dark text colors; flip them in dark mode. */
|
|
:where(.dark) .prose :is(h1, h2, h3, h4, h5, h6, strong, th) {
|
|
color: var(--color-neutral-100);
|
|
}
|
|
:where(.dark) .prose :is(h1) {
|
|
color: var(--color-accent);
|
|
}
|
|
:where(.dark) .prose :is(blockquote) {
|
|
color: var(--color-neutral-400);
|
|
border-left-color: var(--color-neutral-700);
|
|
}
|
|
:where(.dark) .prose :is(hr, thead, tbody tr) {
|
|
border-color: var(--color-neutral-700);
|
|
}
|
|
|
|
@theme {
|
|
--color-accent: #e32a6d;
|
|
--color-accent-hover: #c4205a;
|
|
--color-secondary: #ffaf25;
|
|
--color-secondary-hover: #e69e1a;
|
|
}
|