change design

This commit is contained in:
SlimusMinus
2026-08-17 23:17:30 +03:00
parent ed92e45f84
commit f02b25e8f3
24 changed files with 1199 additions and 799 deletions

View File

@@ -43,7 +43,7 @@
.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); }
.f-m-field.err { border-color: rgba(237,73,86,.55); }
/* Type Toggle */
.f-type-toggle { display: flex; gap: 8px; }
@@ -53,7 +53,7 @@
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.loss { border-color: rgba(237,73,86,.5); background: rgba(237,73,86,.12); color: #ff6b6b; }
.f-type-opt.found { border-color: rgba(var(--teal-rgb), .5); background: rgba(var(--teal-rgb), .1); color: var(--teal); }
/* Map picker */
@@ -211,13 +211,13 @@
/* Submit Button */
.f-m-submit {
width: 100%;
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;
animation: shimmer 3s linear infinite; transition: opacity .15s, transform .15s;
background: var(--teal);
border: none; border-radius: 13px;
padding: 14px; color: #fff; font-family: var(--font);
font-size: 1rem; font-weight: 800; cursor: pointer; margin-top: 6px;
transition: background .15s, opacity .15s, transform .15s;
}
.f-m-submit:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.f-m-submit:hover:not(:disabled) { background: var(--teal2); transform: translateY(-1px); }
.f-m-submit:active:not(:disabled) { transform: translateY(0); }
.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; }
@@ -225,18 +225,18 @@
/* ── Modal Logout Button ── */
.f-modal-logout {
display: block; width: 100%; margin-top: 16px; padding: 10px;
border-radius: 10px; border: 1px solid rgba(255,107,107,.3);
background: rgba(255,107,107,.08); color: rgba(255,107,107,.8);
border-radius: 10px; border: 1px solid rgba(237,73,86,.3);
background: rgba(237,73,86,.08); color: rgba(237,73,86,.8);
font-family: var(--font); font-size: .9rem; font-weight: 700; cursor: pointer;
transition: background .15s, border-color .15s;
}
.f-modal-logout:hover {
background: rgba(255,107,107,.18);
border-color: rgba(255,107,107,.5);
background: rgba(237,73,86,.18);
border-color: rgba(237,73,86,.5);
}
.f-m-spinner {
width: 16px; height: 16px;
border: 2px solid var(--border); border-top-color: var(--teal);
border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
border-radius: 50%; animation: spin .7s linear infinite;
}
@@ -302,7 +302,7 @@
.f-rules-input:checked + .f-rules-checkmark::after {
content: ""; position: absolute; left: 5px; top: 1px;
width: 6px; height: 10px;
border: solid #082320; border-width: 0 2.5px 2.5px 0;
border: solid #fff; border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.f-rules-input:focus + .f-rules-checkmark {
@@ -357,15 +357,13 @@
.f-result-btn:hover { opacity: .88; transform: translateY(-1px); }
.f-result-btn:active { transform: translateY(0); }
.f-result-btn.ok {
background: linear-gradient(90deg, var(--teal2), var(--teal), var(--teal2));
background-size: 200% 100%;
color: #082320;
animation: shimmer 3s linear infinite;
background: var(--teal);
color: #fff;
}
.f-result-btn.err {
background: rgba(255, 107, 107, .12);
border: 1.5px solid rgba(255, 107, 107, .35);
color: #ff6b6b;
background: rgba(237, 73, 86, .1);
border: 1.5px solid rgba(237, 73, 86, .35);
color: #ed4956;
}
.f-map-frame {