125 lines
5.3 KiB
CSS
125 lines
5.3 KiB
CSS
/* ── Modal Backdrop ── */
|
|
.f-modal-bg {
|
|
position: fixed; inset: 0; background: rgba(0,0,0,.65); 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;
|
|
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; }
|
|
|
|
/* 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-close-btn {
|
|
background: rgba(255,255,255,.07); 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; }
|
|
|
|
/* 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);
|
|
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);
|
|
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.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);
|
|
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; }
|
|
|
|
/* 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);
|
|
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); }
|
|
|
|
/* 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;
|
|
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-input { display: none; }
|
|
|
|
/* Image Preview */
|
|
.f-img-preview-wrap { position: relative; display: inline-block; width: 100%; }
|
|
.f-img-preview { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; display: block; }
|
|
.f-img-remove {
|
|
position: absolute; top: 8px; right: 8px;
|
|
background: rgba(0,0,0,0.55); border: none; border-radius: 50%;
|
|
width: 28px; height: 28px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
cursor: pointer; color: #fff; padding: 0; transition: background .2s;
|
|
}
|
|
.f-img-remove:hover { background: rgba(0,0,0,0.8); }
|
|
|
|
/* Hints & Errors */
|
|
.f-hint { font-size: .72rem; color: var(--muted); margin-top: 4px; }
|
|
.f-err-msg { font-size: .78rem; color: var(--err); margin-top: 5px; }
|
|
|
|
/* Submit Button */
|
|
.f-m-submit {
|
|
width: 100%;
|
|
background: linear-gradient(90deg, #1fc9b0, #2de0c8, #1fc9b0);
|
|
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;
|
|
animation: shimmer 3s linear infinite; transition: opacity .15s, transform .15s;
|
|
}
|
|
.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-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
|
|
.f-m-spinner {
|
|
width: 16px; height: 16px;
|
|
border: 2px solid rgba(8,35,32,.3); border-top-color: #082320;
|
|
border-radius: 50%; animation: spin .7s linear infinite;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.f-modal-bg {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.f-modal {
|
|
width: 100%;
|
|
max-height: 92vh;
|
|
border-radius: 20px 20px 0 0;
|
|
padding: 20px 16px 32px; /* 32px снизу — отступ от home indicator */
|
|
}
|
|
} |