Дебаг вёрстки шапки и подвала сайта (#4) #18
@@ -196,7 +196,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
|
||||
.toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: calc(var(--bottombar-height) + var(--safe-bottom) + 16px);
|
||||
bottom: calc(var(--bottombar-height) + 16px);
|
||||
transform: translateX(-50%);
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
|
||||
@@ -39,8 +39,7 @@
|
||||
.bottom-bar {
|
||||
position: relative;
|
||||
flex: none;
|
||||
height: calc(var(--bottombar-height) + var(--safe-bottom));
|
||||
padding-bottom: var(--safe-bottom);
|
||||
height: var(--bottombar-height);
|
||||
background: var(--surface);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
@@ -70,7 +69,7 @@
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: calc(var(--safe-bottom) + 8px);
|
||||
bottom: 0;
|
||||
width: var(--fab-width);
|
||||
height: var(--fab-height);
|
||||
border: 1px solid var(--accent);
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
--radius-sm: 10px;
|
||||
/* Safe-area с потолком: часть мобильных браузеров (DuckDuckGo, Firefox Focus) при
|
||||
viewport-fit=cover отдаёт inset поверх уже смещённого вьюпорта — без ограничения
|
||||
шапка раздувается вдвое, а её содержимое съезжает вниз. */
|
||||
--safe-bottom: min(env(safe-area-inset-bottom, 0px), 24px);
|
||||
шапка раздувается вдвое, а её содержимое съезжает вниз. Снизу отступ не нужен:
|
||||
подвал и купол FAB прижаты вплотную к нижнему краю экрана. */
|
||||
--safe-top: min(env(safe-area-inset-top, 0px), 24px);
|
||||
|
||||
/* Брейкпоинты (для справки) */
|
||||
|
||||
Reference in New Issue
Block a user