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

global refactoring

Browse Source
This commit is contained in:
SlimusMinus
2026-06-02 01:10:56 +03:00
parent b53207166b
commit fbdcada3d2
26 changed files with 738 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/styles/card.css Normal file
View File

@@ -0,0 +1,93 @@
/* ── Ad Card ── */
.f-card {
flex-shrink: 0;
background: linear-gradient(155deg, #1d2436, #131720);
border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
transition: border-color .2s, transform .2s; cursor: pointer;
}
.f-card:hover { border-color: rgba(45,224,200,.3); transform: translateY(-2px); }
.f-card-inner {
display: flex; flex-direction: row; min-height: 160px;
}
/* Image Panel */
.f-card-img {
width: 180px; min-width: 180px;
background: linear-gradient(135deg, #1a3a4a 0%, #0f2235 100%);
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden; flex-shrink: 0;
}
.f-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-card-emoji { font-size: 3rem; opacity: .22; }
/* Badges */
.f-card-badges {
display: flex; align-items: center; justify-content: space-between;
gap: 6px; margin-bottom: 8px;
}
.f-cat-badge {
background: rgba(13,16,24,.8); backdrop-filter: blur(8px);
border: 1px solid var(--border); border-radius: 20px;
padding: 3px 10px; font-size: .72rem; font-weight: 700; color: var(--teal);
}
.f-type-badge {
border-radius: 20px; padding: 3px 10px;
font-size: .72rem; font-weight: 900;
}
.f-type-loss { background: rgba(255,107,107,.2); color: #ff6b6b; border: 1px solid rgba(255,107,107,.3); }
.f-type-found { background: rgba(45,224,200,.2); color: #2de0c8; border: 1px solid rgba(45,224,200,.3); }
/* Body */
.f-card-body {
flex: 1; padding: 14px 16px;
display: flex; flex-direction: column; min-width: 0;
}
.f-card-title { color: #fff; font-weight: 900; font-size: 1rem; margin-bottom: 5px; line-height: 1.3; }
.f-card-desc {
color: var(--muted); font-size: .82rem; line-height: 1.5; margin-bottom: 10px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Meta pills */
.f-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.f-meta-pill {
display: flex; align-items: center; gap: 4px;
background: rgba(255,255,255,.05); border: 1px solid var(--border);
border-radius: 20px; padding: 3px 9px; font-size: .73rem; color: var(--muted);
}
/* Map stub */
.f-card-map {
width: 100%; height: 76px;
background: #080f1c; margin-bottom: 14px; border-radius: 12px;
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
gap: 8px; color: var(--muted); font-size: .78rem;
cursor: pointer; transition: border-color .2s;
font-family: var(--font); font-weight: 600;
}
.f-card-map:hover { border-color: rgba(45,224,200,.3); color: var(--teal); }
/* Footer */
.f-card-foot {
display: flex; align-items: center; justify-content: space-between;
padding-top: 10px; border-top: 1px solid var(--border); margin-top: auto;
}
.f-card-foot-left { display: flex; align-items: center; }
.f-card-foot-right { display: flex; align-items: center; gap: 6px; }
.f-card-phone {
color: var(--teal); font-size: .82rem; font-weight: 700;
text-decoration: none; display: flex; align-items: center; gap: 5px;
}
.f-card-date { color: var(--muted2); font-size: .75rem; }
.f-like-btn {
display: flex; align-items: center; gap: 5px;
background: none; border: 1px solid var(--border);
border-radius: 20px; padding: 5px 11px; cursor: pointer;
font-family: var(--font); font-size: .8rem; font-weight: 700;
color: var(--muted); transition: all .2s; line-height: 1;
}
.f-like-btn:hover, .f-like-btn.liked {
border-color: rgba(255,107,107,.5); color: #ff6b6b; background: rgba(255,107,107,.08);
}