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