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:
Gmer4Lfe
2026-08-11 21:59:27 -04:00
parent 67510b8fad
commit 999dbcfdf3
4 changed files with 46 additions and 64 deletions
+6 -13
View File
@@ -77,13 +77,6 @@ $_aiEnabled = strtolower(trim($_vars['AI_ENABLED'] ?? 'false')) === 'true';
.vv-set-info { font-size:11px;color:#444;line-height:1.6;margin-bottom:10px; }
.vv-set-warn-box { background:#1a1200;border:1px solid #3a2800;border-radius:4px;
padding:8px 12px;font-size:11px;color:#ffb74d;margin-top:8px;display:none; }
.vv-set-tog-wrap { display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none; }
.vv-set-tog-track{ width:32px;height:18px;border-radius:9px;background:#222;border:1px solid #333;
position:relative;transition:background .15s,border-color .15s;flex-shrink:0; }
.vv-set-tog-track.on { background:#1a3a1a;border-color:#2d5a2d; }
.vv-set-tog-track::after { content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;
border-radius:50%;background:#555;transition:left .15s,background .15s; }
.vv-set-tog-track.on::after { left:16px;background:#4caf50; }
.vv-set-tog-lbl { font-size:12px;color:#888; }
.vv-set-tog-sub { font-size:10px;color:#3a3a3a;margin-top:1px; }
.vv-set-inp { background:#0d0d0d;border:1px solid #2a2a2a;border-radius:3px;color:#888;
@@ -137,16 +130,16 @@ $_aiEnabled = strtolower(trim($_vars['AI_ENABLED'] ?? 'false')) === 'true';
<div class="vv-set-hdr">Notifications</div>
<div style="display:flex;flex-direction:column;gap:10px;margin-bottom:14px;">
<label class="vv-set-tog-wrap">
<div class="vv-set-tog-track<?= $_notifyUnraid ? ' on' : '' ?>" id="vv-ntf-unraid"
<label class="vv-cf-toggle">
<div class="vv-cf-track<?= $_notifyUnraid ? ' on' : '' ?>" id="vv-ntf-unraid"
onclick="vvNtfToggle(this,'NOTIFY_UNRAID')"></div>
<div>
<div class="vv-set-tog-lbl">Unraid native notifications</div>
<div class="vv-set-tog-sub">Appears in the Unraid bell icon — job completions, warnings, errors</div>
</div>
</label>
<label class="vv-set-tog-wrap">
<div class="vv-set-tog-track<?= $_enableLogging ? ' on' : '' ?>" id="vv-ntf-logging"
<label class="vv-cf-toggle">
<div class="vv-cf-track<?= $_enableLogging ? ' on' : '' ?>" id="vv-ntf-logging"
onclick="vvNtfToggle(this,'ENABLE_LOGGING')"></div>
<div>
<div class="vv-set-tog-lbl">Verbose logging</div>
@@ -179,8 +172,8 @@ $_aiEnabled = strtolower(trim($_vars['AI_ENABLED'] ?? 'false')) === 'true';
<div class="vv-set-card">
<div class="vv-set-hdr">AI</div>
<label class="vv-set-tog-wrap" style="margin-bottom:12px;">
<div class="vv-set-tog-track<?= $_aiEnabled ? ' on' : '' ?>" id="vv-set-ai-tog"
<label class="vv-cf-toggle" style="margin-bottom:12px;">
<div class="vv-cf-track<?= $_aiEnabled ? ' on' : '' ?>" id="vv-set-ai-tog"
onclick="vvSetAiToggle(this)"></div>
<div>
<div class="vv-set-tog-lbl">AI features</div>