tremble7681
9642eb6e45
Юзер обнаружил, что при поиске работ (worksPicker в Create/EditRepairPage) шапка с инпутом всё ещё уезжает под status-bar. Эти модалки и аналоги (PhotoAnnotateStep, ZoneDetailView, InspectionEditor) используют fixed inset-0 — моё прежнее правило для .fixed.top-0 их не покрывало. Добавил отдельный селектор для .fixed.inset-0.bg-background[/\95]; bg-black/40·50·90 (диалоги, фото-вьюверы) намеренно не задеты.
60 lines
2.2 KiB
CSS
60 lines
2.2 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
@layer base {
|
||
:root {
|
||
--background: 40 30% 95%; /* cream */
|
||
--foreground: 0 0% 16%; /* near-black */
|
||
--card: 0 0% 100%;
|
||
--card-foreground: 0 0% 16%;
|
||
--primary: 0 0% 16%;
|
||
--primary-foreground: 40 30% 95%;
|
||
--secondary: 40 20% 88%;
|
||
--secondary-foreground: 0 0% 16%;
|
||
--muted: 40 20% 92%;
|
||
--muted-foreground: 0 0% 40%;
|
||
--accent: 40 20% 90%;
|
||
--accent-foreground: 0 0% 16%;
|
||
--destructive: 0 70% 50%;
|
||
--destructive-foreground: 40 30% 95%;
|
||
--border: 40 15% 85%;
|
||
--input: 40 15% 85%;
|
||
--ring: 0 0% 16%;
|
||
--radius: 0.5rem;
|
||
}
|
||
}
|
||
|
||
@layer base {
|
||
* { @apply border-border; }
|
||
body {
|
||
@apply bg-background text-foreground font-sans;
|
||
/* iOS PWA: status bar (status-bar-style=black-translucent) и home-indicator
|
||
перекрывают контент при viewport-fit=cover. Сдвигаем body content вниз
|
||
на высоту safe-area, чтобы шапки/кнопки не уезжали под системные зоны. */
|
||
padding-top: env(safe-area-inset-top);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
/* iOS PWA: position:sticky + top:0 прилипает к самому верху viewport,
|
||
т.е. под статус-бар (containing-block тут не помогает). Переопределяем
|
||
top у всех Tailwind .top-0, чтобы шапки залипали ниже notch. */
|
||
.sticky.top-0,
|
||
.fixed.top-0 {
|
||
top: env(safe-area-inset-top);
|
||
}
|
||
/* Full-screen page-replacement модалки (fixed inset-0 с app background) —
|
||
поиск работ, аннотация фото, zone-detail, inspection-editor. Шапка внутри
|
||
должна сидеть ниже status-bar, нижние кнопки выше home-indicator.
|
||
bg-black/40·50·90 диалоги/просмотрщики не задеваем — у них inset-0 full-bleed. */
|
||
.fixed.inset-0.bg-background,
|
||
.fixed.inset-0.bg-background\/95 {
|
||
padding-top: env(safe-area-inset-top);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
}
|