Merge pull request #49 from SlimusMinus/fix-bottom_bar

fixed navigation bottom bar

src/styles/layout.css

@@ -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;
+  position: fixed; bottom: 12px;
-  display: flex; align-items: center; justify-content: space-around;
+  left: 50%; transform: translateX(-50%);
-  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
+  display: flex; align-items: center; justify-content: space-evenly; gap: 32px;
-  background: var(--bg-surface-solid);
+  padding: 6px 28px;
-  border-top: 1px solid var(--border);
+  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);
+  color: rgba(255, 255, 255, .6);
-  transition: color .15s, transform .1s;
+  border-radius: 14px;
+  transition: color .15s, background .15s, transform .1s;
 }
-.f-bn-item:active { transform: scale(.92); }
+.f-bn-item:active { transform: scale(.9); }
-.f-bn-item svg { width: 26px; height: 26px; }
+.f-bn-item svg { width: 24px; height: 24px; }
-.f-bn-item.active { color: var(--teal); }
+.f-bn-item:hover { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9); }
-.f-bn-item.active::before {
+.f-bn-item.active { color: var(--teal); background: rgba(var(--teal-rgb), .15); }
-  content: ""; position: absolute; inset: 3px;
+
-  border-radius: 50%;
+: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;
+  width: 56px; height: 40px;
-  border-radius: 999px;
+  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;
+  display: none;
-  box-shadow: 0 0 0 2px var(--teal);
+}
+.f-bn-item.f-bn-profile.active {
+  background: none;
 }
 
 /* Indicator: активные фильтры поиска */
 .f-bn-dot {
-  position: absolute; top: 6px; right: 4px;
+  position: absolute; top: 6px; right: 5px;
-  width: 8px; height: 8px; border-radius: 50%;
+  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));
   }
 }