nmemmert
5668686f59
black-translucent status bar overlays page content, pushing the top nav buttons behind the status bar where they can't be tapped. Switch to black (status bar takes its own space, content starts below). Also add env(safe-area-inset-top) padding on <header> elements when running in standalone/PWA mode so notched iPhones are handled too. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
53 lines
867 B
CSS
53 lines
867 B
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: #f8fafc;
|
|
color: #0f172a;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(15, 23, 42, 0.18);
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
/* When installed as a PWA, push header content below the status bar */
|
|
@media all and (display-mode: standalone) {
|
|
header {
|
|
padding-top: env(safe-area-inset-top, 0px);
|
|
}
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 9px;
|
|
height: 9px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: rgba(148, 163, 184, 0.7);
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: rgba(148, 163, 184, 0.12);
|
|
}
|