Align listening action button styles

This commit is contained in:
Smittix
2026-02-04 11:23:32 +00:00
parent 5d0df18dac
commit 4a38d7512d
3 changed files with 21 additions and 10 deletions

View File

@@ -6083,16 +6083,27 @@ body::before {
cursor: not-allowed;
}
.radio-action-btn.scan {
.radio-action-btn.scan,
.radio-action-btn.listen {
background: var(--accent-green);
border-color: var(--accent-green);
color: #000;
}
.radio-action-btn.scan:hover:not(:disabled) {
.radio-action-btn.scan:hover:not(:disabled),
.radio-action-btn.listen:hover:not(:disabled) {
box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}
.radio-action-btn.listen.active {
background: var(--accent-red);
border-color: var(--accent-red);
}
.radio-action-btn.listen.active:hover:not(:disabled) {
box-shadow: 0 0 20px var(--accent-red-dim);
}
/* Statistics Box */
.stat-box {
background: rgba(0, 0, 0, 0.3);

View File

@@ -2387,12 +2387,10 @@ function updateDirectListenUI(isPlaying, freq) {
if (listenBtn) {
if (isPlaying) {
listenBtn.innerHTML = Icons.stop('icon--sm') + ' STOP';
listenBtn.style.background = 'var(--accent-red)';
listenBtn.style.borderColor = 'var(--accent-red)';
listenBtn.classList.add('active');
} else {
listenBtn.innerHTML = Icons.headphones('icon--sm') + ' LISTEN';
listenBtn.style.background = 'var(--accent-purple)';
listenBtn.style.borderColor = 'var(--accent-purple)';
listenBtn.classList.remove('active');
}
}

View File

@@ -1255,10 +1255,12 @@
</div>
</div>
<!-- Action Buttons -->
<button class="radio-action-btn scan" id="radioScanBtn" onclick="toggleScanner()"
style="padding: 12px; font-size: 13px; width: 100%; font-weight: bold;"><span class="icon icon--sm" style="margin-right: 4px;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg></span>SCAN</button>
<button class="radio-action-btn" id="radioListenBtn" onclick="toggleDirectListen()"
style="padding: 10px; font-size: 12px; width: 100%; background: var(--accent-green); border: none; color: #fff;"><span class="icon icon--sm" style="margin-right: 4px;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/></svg></span>LISTEN</button>
<button class="radio-action-btn scan" id="radioScanBtn" onclick="toggleScanner()">
<span class="icon icon--sm" style="margin-right: 4px;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg></span>SCAN
</button>
<button class="radio-action-btn listen" id="radioListenBtn" onclick="toggleDirectListen()">
<span class="icon icon--sm" style="margin-right: 4px;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/></svg></span>LISTEN
</button>
</div>
</div>
</div>