5K/settings.css at master · TravisMain/5K · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* Clean, consolidated settings panel overlay (replaces broken nested CSS) */
#settingsPanel {
    position: fixed; inset: 0;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 2rem 1rem 3.5rem;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(8px) saturate(140%);
    z-index: 2000;
}
#settingsPanel[hidden]{ display:none !important; }
#settingsPanel .settingsContent {
    background:#1d1f23;
    color:#f1f5f9;
    width:100%; max-width:500px;
    border-radius:22px;
    padding:1.25rem 1.35rem 2.4rem;
    box-shadow:0 12px 40px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05) inset;
    font-size:0.95rem;
    line-height:1.35;
    max-height:100%; overflow-y:auto;
}
#settingsPanel h2 { margin:0 0 0.85rem; font-size:1.35rem; letter-spacing:.5px; font-weight:600; }
#settingsPanel label { display:block; margin:.9rem 0 .25rem; font-weight:500; letter-spacing:.4px; font-size:.78rem; text-transform:uppercase; color:#8fa3b8; }
#settingsPanel input[type=range]{ width:100%; accent-color:#2563eb; }
#settingsPanel input[type=number],
#settingsPanel select { background:#262a30; color:#f1f5f9; border:1px solid #32363d; border-radius:12px; padding:.65rem .75rem; font:inherit; box-sizing:border-box; width:100%; }
#settingsPanel input[type=number]:focus, #settingsPanel select:focus { outline:2px solid #3b82f6; outline-offset:2px; }
#settingsPanel .settingsRowToggles label { display:flex; align-items:center; gap:.55em; font-size:.75rem; font-weight:500; color:#d1d5db; text-transform:none; letter-spacing:.3px; }
#settingsPanel .settingsRowToggles input[type=checkbox]{ width:18px; height:18px; accent-color:#2563eb; }
#closeSettingsBtn { margin-top:1.4rem; width:100%; background:linear-gradient(145deg,#2563eb,#1d4ed8); font-weight:600; letter-spacing:.4px; }
#closeSettingsBtn:hover { background:linear-gradient(145deg,#1d4ed8,#1e40af); }
#resetProgressBtn { width:100%; }
#exportProgressBtn, #importProgressBtn { flex:1; }

/* Weight row layout */
.weightRow { display:flex; gap:.6rem; align-items:stretch; margin-top:.15rem; }
.weightRow input[type=number]{ flex:1; }
.weightRow select { width:90px; }

/* Scrollbar refinement */
#settingsPanel .settingsContent::-webkit-scrollbar { width:10px; }
#settingsPanel .settingsContent::-webkit-scrollbar-track { background:#1d1f23; }
#settingsPanel .settingsContent::-webkit-scrollbar-thumb { background:#30343b; border-radius:6px; }
#settingsPanel .settingsContent::-webkit-scrollbar-thumb:hover { background:#3a3f47; }