Give the pages one switch and one prefix each
Three pages had reimplemented the same sliding toggle, and two both claimed vv-set-* with disjoint class names, which reads as shared and is not.
This commit is contained in:
@@ -95,13 +95,6 @@
|
||||
|
||||
/* ── Settings card ───────────────────────────────────────── */
|
||||
.vv-arr-set-card { grid-column:1/-1; }
|
||||
.vv-arr-tog-wrap { display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none; }
|
||||
.vv-arr-tog-track{ width:28px;height:16px;border-radius:8px;background:#1e1e1e;border:1px solid #2a2a2a;
|
||||
position:relative;transition:background .15s,border-color .15s;flex-shrink:0; }
|
||||
.vv-arr-tog-track.on { background:#1a3a1a;border-color:#2d5a2d; }
|
||||
.vv-arr-tog-track::after { content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;
|
||||
border-radius:50%;background:#444;transition:left .15s,background .15s; }
|
||||
.vv-arr-tog-track.on::after { left:14px;background:#4caf50; }
|
||||
.vv-arr-tog-lbl { font-size:11px;color:#666; }
|
||||
.vv-arr-set-inp { background:#0d0d0d;border:1px solid #252525;border-radius:3px;color:#888;
|
||||
font-size:11px;padding:3px 7px;outline:none;width:60px; }
|
||||
@@ -348,8 +341,8 @@ function _settingsCard(s) {
|
||||
const myId = s.my_id || 'HOST1';
|
||||
|
||||
const _tog = (id, on, key, file, label) =>
|
||||
`<label class="vv-arr-tog-wrap">
|
||||
<div class="vv-arr-tog-track${on?' on':''}" id="vv-arr-tog-${id}"
|
||||
`<label class="vv-cf-toggle">
|
||||
<div class="vv-cf-track${on?' on':''}" id="vv-arr-tog-${id}"
|
||||
onclick="event.stopPropagation();vvArrToggle(this,'${key}','${file}')"></div>
|
||||
<span class="vv-arr-tog-lbl">${label}</span>
|
||||
</label>`;
|
||||
|
||||
Reference in New Issue
Block a user