change design
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user