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

fix mobile version

Browse Source
This commit is contained in:
SlimusMinus
2026-08-14 00:41:44 +03:00
parent a5a3c6f1e2
commit 134b5c5849
7 changed files with 51 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/styles/layout.css
View File

@@ -266,10 +266,10 @@
padding: 10px 12px;
}
/* Кнопка создания объявления — меньше */
/* Кнопка создания объявления — как «Войти» */
.f-post-btn {
padding: 10px 16px;
font-size: 0.85rem;
padding: 10px 14px;
font-size: 0.8rem;
}
.f-login-btn {
@@ -296,16 +296,16 @@
@media (max-width: 600px) {
.f-post-btn {
padding: 4px 8px;
font-size: 0.7rem;
gap: 3px;
border-radius: 10px;
padding: 8px 8px;
font-size: 0.68rem;
gap: 4px;
border-radius: 8px;
}
.f-post-btn span {
width: 14px;
height: 14px;
font-size: 0.75rem;
width: 12px;
height: 12px;
font-size: 0.7rem;
}
.f-login-btn {

39
src/styles/ui.css
View File

@@ -1,28 +1,43 @@
/* ── Post Button (topbar CTA) ── */
.f-post-btn {
display: flex; align-items: center; gap: 10px;
padding: 12px 28px; border-radius: 16px;
font-family: var(--font); font-weight: 900; font-size: 0.95rem; letter-spacing: 0.3px;
display: flex; align-items: center; gap: 6px;
padding: 14px 18px; border-radius: 14px;
font-family: var(--font); font-weight: 900; font-size: 0.85rem; letter-spacing: 0.3px;
color: var(--teal);
background: rgba(var(--teal-rgb), 0.12); backdrop-filter: blur(14px);
border: 1px solid rgba(var(--teal-rgb), 0.25);
box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 0 12px rgba(var(--teal-rgb), 0.15), 0 0 18px rgba(var(--teal-rgb), 0.15);
box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 6px rgba(var(--teal-rgb), 0.15), 0 0 9px rgba(var(--teal-rgb), 0.15);
cursor: pointer; transition: all 0.25s ease;
position: relative; overflow: hidden;
animation: postBtnGlow 3s ease-in-out infinite;
}
.f-post-btn::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(120deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05) 40%, transparent 60%);
opacity: 0.4; pointer-events: none;
content: ""; position: absolute; top: 0; left: 0;
width: 60%; height: 100%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.15) 62%, transparent);
transform: skewX(-20deg) translateX(-150%);
pointer-events: none;
animation: postBtnShine 2.6s ease-in-out infinite;
}
.f-post-btn:hover {
transform: translateY(-2px) scale(1.02);
border-color: rgba(var(--teal-rgb), 0.5);
box-shadow: 0 12px 32px rgba(0,0,0,0.45), inset 0 0 18px rgba(var(--teal-rgb), 0.25), 0 0 26px rgba(var(--teal-rgb), 0.35);
box-shadow: 0 6px 16px rgba(0,0,0,0.45), inset 0 0 9px rgba(var(--teal-rgb), 0.25), 0 0 13px rgba(var(--teal-rgb), 0.35);
}
.f-post-btn:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 0 10px rgba(var(--teal-rgb), 0.2);
box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 5px rgba(var(--teal-rgb), 0.2);
}
@keyframes postBtnShine {
0% { transform: skewX(-20deg) translateX(-150%); }
55% { transform: skewX(-20deg) translateX(250%); }
100% { transform: skewX(-20deg) translateX(250%); }
}
@keyframes postBtnGlow {
0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 6px rgba(var(--teal-rgb), 0.15), 0 0 8px rgba(var(--teal-rgb), 0.25); }
50% { box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 12px rgba(var(--teal-rgb), 0.3), 0 0 18px rgba(var(--teal-rgb), 0.5); }
}
/* ── Login Button (topbar) ── */
.f-login-btn {
@@ -53,9 +68,9 @@
.f-post-btn span {
display: flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(var(--teal-rgb), 0.2); box-shadow: 0 0 10px rgba(var(--teal-rgb), 0.4);
font-size: 1.2rem; transform: translateY(-2px);
width: 16px; height: 16px; border-radius: 50%;
background: rgba(var(--teal-rgb), 0.2); box-shadow: 0 0 6px rgba(var(--teal-rgb), 0.4);
font-size: 0.9rem; transform: translateY(-1px);
}
/* ── Feed Empty / Error States ── */