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

added frame on posts

Browse Source
This commit is contained in:
SlimusMinus
2026-06-30 00:44:04 +03:00
parent 56e72812b2
commit 441b3c5f8d
10 changed files with 143 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/styles/modal.css
View File

@@ -1,79 +1,79 @@
/* ── Modal Backdrop ── */
.f-modal-bg {
position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 100;
position: fixed; inset: 0; background: var(--bg-overlay); z-index: 100;
display: flex; align-items: center; justify-content: center;
animation: mfadeIn .2s ease;
}
.f-modal {
background: linear-gradient(155deg, #1d2436, #131720);
border: 1px solid rgba(255,255,255,.12); border-radius: 24px;
background: var(--bg-card);
border: 1px solid var(--border); border-radius: 24px;
width: 440px; max-height: 90vh; overflow-y: auto; padding: 26px 28px 24px;
animation: mslideUp .3s cubic-bezier(.34,1.56,.64,1);
}
.f-modal::-webkit-scrollbar { width: 4px; }
.f-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
.f-modal::-webkit-scrollbar-thumb { background: var(--muted2); border-radius: 2px; }
/* Header */
.f-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.f-modal-title { color: #fff; font-weight: 900; font-size: 1.1rem; }
.f-modal-title { color: var(--text-primary); font-weight: 900; font-size: 1.1rem; }
.f-close-btn {
background: rgba(255,255,255,.07); border: 1px solid var(--border);
background: var(--hover-bg); border: 1px solid var(--border);
border-radius: 8px; width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--muted); transition: background .15s;
}
.f-close-btn:hover { background: rgba(255,255,255,.13); color: #fff; }
.f-close-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
/* Form Fields */
.f-m-group { margin-bottom: 14px; }
.f-m-row { display: flex; gap: 10px; }
.f-m-row .f-m-group { flex: 1; }
.f-m-label {
display: block; color: rgba(255,255,255,.45);
display: block; color: var(--muted);
font-size: .72rem; font-weight: 700; letter-spacing: .6px;
margin-bottom: 6px; text-transform: uppercase; font-family: var(--font);
}
.f-m-field {
width: 100%; background: rgba(255,255,255,.055);
border: 1.5px solid rgba(255,255,255,.09); border-radius: 12px;
padding: 11px 14px; color: #fff; font-family: var(--font);
width: 100%; background: var(--bg-input);
border: 1.5px solid var(--border); border-radius: 12px;
padding: 11px 14px; color: var(--text-primary); font-family: var(--font);
font-size: .9rem; outline: none; resize: none;
transition: border-color .2s, box-shadow .2s;
}
.f-m-field:focus { border-color: #2de0c8; background: rgba(45,224,200,.07); box-shadow: 0 0 0 3px rgba(45,224,200,.12); }
.f-m-field::placeholder { color: rgba(255,255,255,.32); }
.f-m-field option { background: #1d2436; color: #fff; }
.f-m-field:focus { border-color: var(--teal); background: rgba(var(--teal-rgb), .07); box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .12); }
.f-m-field::placeholder { color: var(--muted); }
.f-m-field option { background: var(--bg-surface-solid); color: var(--text-primary); }
.f-m-field.err { border-color: rgba(255,107,107,.55); }
/* Type Toggle */
.f-type-toggle { display: flex; gap: 8px; }
.f-type-opt {
flex: 1; padding: 10px; border-radius: 10px;
border: 1.5px solid rgba(255,255,255,.09); background: rgba(255,255,255,.04);
border: 1.5px solid var(--border); background: var(--bg-input);
color: var(--muted); font-family: var(--font); font-size: .85rem;
font-weight: 800; cursor: pointer; text-align: center; transition: all .2s;
}
.f-type-opt.loss { border-color: rgba(255,107,107,.5); background: rgba(255,107,107,.12); color: #ff6b6b; }
.f-type-opt.found { border-color: rgba(45,224,200,.5); background: rgba(45,224,200,.1); color: #2de0c8; }
.f-type-opt.found { border-color: rgba(var(--teal-rgb), .5); background: rgba(var(--teal-rgb), .1); color: var(--teal); }
/* Map picker */
.f-map-pick {
height: 80px; background: linear-gradient(135deg, #0f2235, #0a1a2e);
border-radius: 12px; border: 1.5px dashed rgba(255,255,255,.15);
height: 80px; background: var(--bg-card-img);
border-radius: 12px; border: 1.5px dashed var(--border);
display: flex; align-items: center; justify-content: center;
gap: 8px; color: var(--muted); font-size: .83rem; cursor: pointer;
transition: border-color .2s; font-family: var(--font); font-weight: 600;
}
.f-map-pick:hover { border-color: rgba(45,224,200,.4); color: var(--teal); }
.f-map-pick:hover { border-color: rgba(var(--teal-rgb), .4); color: var(--teal); }
/* Image Upload */
.f-img-upload-label {
display: flex; align-items: center; justify-content: center; gap: 8px;
border: 2px dashed rgba(255,255,255,.15); border-radius: 12px; padding: 20px;
border: 2px dashed var(--border); border-radius: 12px; padding: 20px;
cursor: pointer; color: var(--muted); font-size: .85rem; font-family: var(--font);
transition: border-color .2s, background .2s;
}
.f-img-upload-label:hover { border-color: var(--teal); background: rgba(45,224,200,.05); color: var(--teal); }
.f-img-upload-label:hover { border-color: var(--teal); background: rgba(var(--teal-rgb), .05); color: var(--teal); }
.f-img-input { display: none; }
/* Image Preview */
@@ -95,7 +95,7 @@
/* Submit Button */
.f-m-submit {
width: 100%;
background: linear-gradient(90deg, #1fc9b0, #2de0c8, #1fc9b0);
background: linear-gradient(90deg, var(--teal2), var(--teal), var(--teal2));
background-size: 200% 100%; border: none; border-radius: 13px;
padding: 14px; color: #082320; font-family: var(--font);
font-size: 1rem; font-weight: 900; cursor: pointer; margin-top: 6px;
@@ -103,7 +103,7 @@
}
.f-m-submit:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.f-m-submit:active:not(:disabled) { transform: translateY(0); }
.f-m-submit:disabled { opacity: .5; cursor: not-allowed; animation: none; background: #444; color: #aaa; }
.f-m-submit:disabled { opacity: .5; cursor: not-allowed; animation: none; background: var(--muted2); color: var(--muted); }
.f-m-submit-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* ── Modal Logout Button ── */
@@ -120,7 +120,7 @@
}
.f-m-spinner {
width: 16px; height: 16px;
border: 2px solid rgba(8,35,32,.3); border-top-color: #082320;
border: 2px solid var(--border); border-top-color: var(--teal);
border-radius: 50%; animation: spin .7s linear infinite;
}