added button back from map and fix post on map
This commit is contained in:
SlimusMinus
@@ -18,27 +18,108 @@
|
||||
min-width: 0; height: 100vh; height: 100dvh; overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Topbar (mobile only; desktop uses the nav sidebar) ── */
|
||||
/* ── Topbar (telegram-style; mobile only; desktop uses the nav sidebar) ──
|
||||
Фон отсутствует полностью: стеклянными выглядят только сами кнопки. */
|
||||
.f-topbar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-surface);
|
||||
z-index: 10;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
padding-top: calc(8px + env(safe-area-inset-top));
|
||||
}
|
||||
.f-menu-btn {
|
||||
background: none; border: none; cursor: pointer;
|
||||
padding: 6px; border-radius: 8px; transition: background .15s;
|
||||
flex-shrink: 0; line-height: 0; width: 32px;
|
||||
|
||||
/* Кнопка-логотип по центру: wordmark «Находка» в округлой стеклянной капсуле */
|
||||
.f-logo-btn {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
height: 38px;
|
||||
padding: 0 30px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(8px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(8px) saturate(150%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
cursor: pointer;
|
||||
line-height: 0;
|
||||
transition: background .15s;
|
||||
}
|
||||
.f-logo-btn:hover { background: rgba(255, 255, 255, 0.22); }
|
||||
.f-logo-btn .f-topbar-logo {
|
||||
height: 34px;
|
||||
width: auto;
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Галочка-индикатор фильтра на кнопке-логотипе: поворачивается при открытии */
|
||||
.f-topbar-chevron {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--text-primary);
|
||||
transform: translateY(-50%);
|
||||
transition: transform .25s ease;
|
||||
}
|
||||
.f-menu-btn:hover { background: var(--hover-bg); }
|
||||
.f-topbar-chevron.open {
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
|
||||
/* Кнопка вызова SideBar: стеклянный squircle (приближение iOS) */
|
||||
.f-menu-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 22%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(12px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(150%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
line-height: 0;
|
||||
color: var(--text-primary);
|
||||
transition: background .15s, transform .1s;
|
||||
}
|
||||
.f-menu-btn:hover { background: rgba(255, 255, 255, 0.22); }
|
||||
.f-menu-btn:active { transform: scale(.92); }
|
||||
.f-menu-btn svg { width: 45%; height: 45%; }
|
||||
|
||||
.f-topbar-center { flex: 1; display: flex; justify-content: center; min-width: 0; }
|
||||
.f-topbar-wordmark {
|
||||
color: var(--text-primary); font-weight: 900; font-size: 1.05rem;
|
||||
letter-spacing: -.4px; white-space: nowrap; margin-left: 2px;
|
||||
}
|
||||
.f-topbar-spacer { width: 32px; flex-shrink: 0; }
|
||||
.f-topbar img,
|
||||
.f-topbar svg { flex-shrink: 0; }
|
||||
|
||||
/* Когда открыт левый SideBar — верхний TopBar уходит за него (ниже по z-index) */
|
||||
.f-app.f-sb-open .f-topbar,
|
||||
.f-app.f-sb-open .f-feed > .f-topbar-dropdown-wrap {
|
||||
z-index: 10;
|
||||
}
|
||||
/* Мобильный drawer делаем полупрозрачным, чтобы TopBar просвечивал за ним */
|
||||
@media (max-width: 900px) {
|
||||
.f-app.f-sb-open .f-sidebar {
|
||||
background: var(--bg-filter);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Topbar Profile ── */
|
||||
.f-topbar-profile {
|
||||
@@ -121,30 +202,23 @@
|
||||
color: var(--teal); font-weight: 700;
|
||||
}
|
||||
|
||||
/* ── Topbar Dropdown (Instagram-style) ── */
|
||||
/* ── Topbar Dropdown (фильтр типа привязан к кнопке-логотипу) ── */
|
||||
.f-topbar-dropdown-wrap {
|
||||
position: relative;
|
||||
}
|
||||
.f-topbar-dropdown-wrap .f-topbar {
|
||||
z-index: 10;
|
||||
/* В ленте шапка липнет к верху скроллера: контент прокручивается под ней
|
||||
и «замыливается» через backdrop-filter на .f-topbar */
|
||||
.f-feed > .f-topbar-dropdown-wrap {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
margin: -20px -16px 0;
|
||||
}
|
||||
.f-topbar-dropdown-btn {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
|
||||
background: none; border: none; cursor: pointer;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font); font-weight: 900; font-size: 1.25rem;
|
||||
letter-spacing: -.4px; white-space: nowrap;
|
||||
padding: 0 6px; border-radius: 8px;
|
||||
transition: background .15s;
|
||||
@media (max-width: 900px) {
|
||||
.f-feed > .f-topbar-dropdown-wrap {
|
||||
margin: -10px -10px 0;
|
||||
}
|
||||
}
|
||||
.f-topbar-dropdown-btn:hover { background: var(--hover-bg); }
|
||||
.f-topbar-logo { height: auto; display: block; min-width: 0; max-width: 100%; flex-shrink: 1; margin-top: 10px; }
|
||||
|
||||
.f-topbar-chevron {
|
||||
width: 18px; height: 18px; flex-shrink: 0;
|
||||
transition: transform .25s ease;
|
||||
}
|
||||
.f-topbar-chevron.open { transform: rotate(180deg); }
|
||||
|
||||
.f-topbar-dropdown-overlay {
|
||||
position: fixed; inset: 0; z-index: 45;
|
||||
@@ -504,7 +578,7 @@
|
||||
.f-wrap { display: flex; flex: 1; overflow: hidden; min-height: 0; }
|
||||
|
||||
.f-feed {
|
||||
flex: 1; overflow-y: scroll; overscroll-behavior: contain; min-height: 0;
|
||||
flex: 1; overflow-y: scroll; overflow-x: hidden; overscroll-behavior: contain; min-height: 0;
|
||||
padding: 20px 16px; display: flex; flex-direction: column; gap: 16px;
|
||||
width: 100%; max-width: 660px; margin: 0 auto;
|
||||
}
|
||||
@@ -525,6 +599,13 @@
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
/* Мобильная версия: прижимаем логотип-капсулу влево (к кнопке-гамбургеру) */
|
||||
.f-main-feed .f-topbar {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.f-main-feed .f-logo-btn { margin-left: 64px; }
|
||||
.f-main-feed .f-topbar-spacer { flex: 1; }
|
||||
|
||||
.f-mapview-back {
|
||||
/* Поднимаем кнопку выше плавающей нижней навигации */
|
||||
bottom: calc(84px + env(safe-area-inset-bottom));
|
||||
@@ -535,10 +616,6 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.f-topbar {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.f-post-btn {
|
||||
padding: 8px 14px;
|
||||
font-size: 0.78rem;
|
||||
@@ -563,8 +640,6 @@
|
||||
.f-city-ms-input { font-size: 0.85rem; }
|
||||
.f-city-ms-tag { font-size: 0.75rem; padding: 2px 8px; }
|
||||
|
||||
.f-topbar-dropdown-btn { font-size: 1.15rem; padding: 0 4px; }
|
||||
.f-topbar-chevron { width: 18px; height: 18px; }
|
||||
.f-topbar-dropdown-menu {
|
||||
padding: 6px 10px; gap: 5px;
|
||||
margin-top: 4px; border-radius: 999px;
|
||||
|
||||
Reference in New Issue
Block a user