UI: шапка вплотную к верхнему краю — снят viewport-fit=cover
В DuckDuckGo шапка держала отступ от адресной строки — тот же safe-area, что раньше отодвигал подвал снизу. Insets браузер отдаёт именно из-за viewport-fit=cover: он передаёт управление безопасной зоной странице. После отказа от отступов сверху и снизу компенсировать нечего, поэтому cover снят — вьюпорт снова размещает браузер, а env() везде даёт ноль. Следом убран --safe-top и три его использования (.top-bar, .side-menu, .toast-top-wrap): без cover переменная всегда нулевая. Токенов safe-area в проекте больше нет. #4 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ps52xzuUXnWrJ5SRnEeaLk
This commit is contained in:
+1
-1
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1.0, user-scalable=no"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<meta name="theme-color" content="#0f1115" />
|
||||
<title>Forbidden Stars — учёт партий</title>
|
||||
|
||||
@@ -448,7 +448,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
|
||||
/* Всплывашки сверху экрана в момент прихода */
|
||||
.toast-top-wrap {
|
||||
position: fixed;
|
||||
top: calc(var(--safe-top) + 10px);
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: min(var(--app-max-w), 94vw);
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: calc(var(--safe-top) + 12px) 16px 12px;
|
||||
padding: 12px 16px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
@@ -231,7 +231,6 @@
|
||||
z-index: 61;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: var(--safe-top);
|
||||
}
|
||||
.side-menu.open { transform: translateX(0); }
|
||||
|
||||
|
||||
@@ -20,11 +20,6 @@
|
||||
--fab-height: 62.5px;
|
||||
--radius: 14px;
|
||||
--radius-sm: 10px;
|
||||
/* Safe-area с потолком: часть мобильных браузеров (DuckDuckGo, Firefox Focus) при
|
||||
viewport-fit=cover отдаёт inset поверх уже смещённого вьюпорта — без ограничения
|
||||
шапка раздувается вдвое, а её содержимое съезжает вниз. Снизу отступ не нужен:
|
||||
подвал и купол FAB прижаты вплотную к нижнему краю экрана. */
|
||||
--safe-top: min(env(safe-area-inset-top, 0px), 24px);
|
||||
|
||||
/* Брейкпоинты (для справки) */
|
||||
--bp-lg: 768px;
|
||||
|
||||
Reference in New Issue
Block a user