67 lines
1.7 KiB
CSS
67 lines
1.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
/* Notizarr is dark-first with no light mode, so this is unconditional —
|
|
tells the browser to use its own dark widget theme for anything it
|
|
renders itself: <select> dropdown popups, <input type="time/date">
|
|
pickers, checkboxes, scrollbars. Without it those stay light regardless
|
|
of how the surrounding elements are styled, since that part of the UI
|
|
isn't actually drawn by our CSS. */
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
font-family:
|
|
ui-sans-serif,
|
|
system-ui,
|
|
-apple-system,
|
|
'Segoe UI',
|
|
Roboto,
|
|
'Helvetica Neue',
|
|
Arial,
|
|
sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* iOS Safari auto-zooms the page on focus for any text input under 16px,
|
|
and doesn't always zoom back out cleanly — forcing 16px here (rather
|
|
than bumping every input's Tailwind text size, which would also change
|
|
how they look) is the standard fix. !important is genuinely needed, not
|
|
just convenient: Tailwind's own size utilities (e.g. text-sm) are class
|
|
selectors, which beat a plain `input { }` element selector in the
|
|
cascade regardless of source order, so a bare rule here silently loses
|
|
to whatever text-size class an individual input uses. */
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
/* Safe-area padding for iPhone notch / Dynamic Island / home indicator. */
|
|
.safe-top {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
.safe-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: theme('colors.base.border');
|
|
border-radius: 999px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|