Initial commit

apps/web/src/index.css

@@ -0,0 +1,66 @@
+@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;
+}