admin/nahodka-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #49 from SlimusMinus/fix-bottom_bar

Browse Source 
fixed navigation bottom bar
This commit is contained in:
SlimusMinus
2026-08-19 23:54:50 +03:00
committed by GitHub
parent b22f876418 9b8d4bb112
commit 016b2f0146
1 changed files with 72 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/styles/layout.css
View File

@@ -163,6 +163,12 @@
box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
:root:not([data-theme="dark"]) .f-topbar-dropdown-menu {
background: rgba(255, 255, 255, .92);
border-color: rgba(0, 0, 0, .08);
box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
}
.f-topbar-dropdown-item {
display: flex; align-items: center; justify-content: center;
padding: 8px 16px;
@@ -183,6 +189,19 @@
color: var(--teal);
}
:root:not([data-theme="dark"]) .f-topbar-dropdown-item {
background: rgba(0, 0, 0, .06);
color: rgba(0, 0, 0, .75);
}
:root:not([data-theme="dark"]) .f-topbar-dropdown-item:hover {
background: rgba(0, 0, 0, .1);
color: #000;
}
:root:not([data-theme="dark"]) .f-topbar-dropdown-item.active {
background: rgba(var(--teal-rgb), .15);
color: var(--teal);
}
/* ── City Multiselect ── */
.f-city-filter-wrap {
position: relative; z-index: 20;
@@ -304,36 +323,58 @@
padding: 10px; text-align: center; color: var(--muted); font-size: 0.85rem;
}
/* ── Bottom Navigation (Instagram-style) ── */
/* ── Bottom Navigation (Telegram-style floating pill) ── */
.f-bottom-nav {
position: fixed; left: 0; right: 0; bottom: 0;
display: flex; align-items: center; justify-content: space-around;
padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
background: var(--bg-surface-solid);
border-top: 1px solid var(--border);
position: fixed; bottom: 12px;
left: 50%; transform: translateX(-50%);
display: flex; align-items: center; justify-content: space-evenly; gap: 32px;
padding: 6px 28px;
width: calc(100% - 24px);
max-width: 500px;
background: rgba(20, 20, 20, .55);
backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, .3), inset 0 0.5px 0 rgba(255,255,255,.08);
z-index: 35;
}
:root:not([data-theme="dark"]) .f-bottom-nav {
background: rgba(255, 255, 255, .6);
border-color: rgba(0, 0, 0, .08);
box-shadow: 0 8px 32px rgba(0, 0, 0, .08), inset 0 0.5px 0 rgba(255,255,255,.7);
}
.f-bn-item {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
width: 44px; height: 40px;
border: none; background: none; cursor: pointer;
color: var(--text-primary);
transition: color .15s, transform .1s;
color: rgba(255, 255, 255, .6);
border-radius: 14px;
transition: color .15s, background .15s, transform .1s;
}
.f-bn-item:active { transform: scale(.92); }
.f-bn-item svg { width: 26px; height: 26px; }
.f-bn-item.active { color: var(--teal); }
.f-bn-item.active::before {
content: ""; position: absolute; inset: 3px;
border-radius: 50%;
.f-bn-item:active { transform: scale(.9); }
.f-bn-item svg { width: 24px; height: 24px; }
.f-bn-item:hover { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9); }
.f-bn-item.active { color: var(--teal); background: rgba(var(--teal-rgb), .15); }
:root:not([data-theme="dark"]) .f-bn-item {
color: rgba(0, 0, 0, .45);
}
:root:not([data-theme="dark"]) .f-bn-item:hover {
background: rgba(0, 0, 0, .06);
color: rgba(0, 0, 0, .75);
}
:root:not([data-theme="dark"]) .f-bn-item.active {
color: var(--teal);
background: rgba(var(--teal-rgb), .12);
}
/* Create button — бирюзовая рамка как у старой кнопки «Разместить» */
/* Create button */
.f-bn-create {
width: 44px; height: 44px;
border-radius: 999px;
width: 56px; height: 40px;
border-radius: 14px;
background: var(--teal);
color: #fff;
box-shadow: 0 2px 10px rgba(var(--teal-rgb), .35);
@@ -344,20 +385,25 @@
/* Profile avatar inside the nav */
.f-bn-profile .f-profile-avatar,
.f-bn-profile .f-profile-avatar-placeholder {
width: 28px; height: 28px;
width: 26px; height: 26px;
}
.f-bn-profile .f-profile-avatar-placeholder { font-size: 1rem; }
.f-bn-profile .f-profile-avatar-placeholder { font-size: .95rem; }
.f-bn-item.f-bn-profile.active::before {
inset: -1px;
box-shadow: 0 0 0 2px var(--teal);
display: none;
}
.f-bn-item.f-bn-profile.active {
background: none;
}
/* Indicator: активные фильтры поиска */
.f-bn-dot {
position: absolute; top: 6px; right: 4px;
width: 8px; height: 8px; border-radius: 50%;
position: absolute; top: 6px; right: 5px;
width: 7px; height: 7px; border-radius: 50%;
background: #ff3040;
box-shadow: 0 0 0 2px var(--bg-surface-solid);
box-shadow: 0 0 0 2px rgba(0, 0, 0, .4);
}
:root:not([data-theme="dark"]) .f-bn-dot {
box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
}
/* Search panel — видна только во вкладке «Поиск» (на десктопе всегда) */
@@ -432,7 +478,7 @@
/* Нижняя панель fixed — освобождаем место в конце ленты */
.f-feed {
padding-bottom: calc(130px + env(safe-area-inset-bottom));
padding-bottom: calc(150px + env(safe-area-inset-bottom));
}
}