Align listening action button styles

This commit is contained in:
Smittix
2026-02-04 11:23:32 +00:00
parent 523175abc3
commit 1d7c3d9154
3 changed files with 21 additions and 10 deletions
+13 -2
View File
@@ -6083,16 +6083,27 @@ body::before {
cursor: not-allowed; cursor: not-allowed;
} }
.radio-action-btn.scan { .radio-action-btn.scan,
.radio-action-btn.listen {
background: var(--accent-green); background: var(--accent-green);
border-color: var(--accent-green); border-color: var(--accent-green);
color: #000; 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); 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 */ /* Statistics Box */
.stat-box { .stat-box {
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
+2 -4
View File
@@ -2387,12 +2387,10 @@ function updateDirectListenUI(isPlaying, freq) {
if (listenBtn) { if (listenBtn) {
if (isPlaying) { if (isPlaying) {
listenBtn.innerHTML = Icons.stop('icon--sm') + ' STOP'; listenBtn.innerHTML = Icons.stop('icon--sm') + ' STOP';
listenBtn.style.background = 'var(--accent-red)'; listenBtn.classList.add('active');
listenBtn.style.borderColor = 'var(--accent-red)';
} else { } else {
listenBtn.innerHTML = Icons.headphones('icon--sm') + ' LISTEN'; listenBtn.innerHTML = Icons.headphones('icon--sm') + ' LISTEN';
listenBtn.style.background = 'var(--accent-purple)'; listenBtn.classList.remove('active');
listenBtn.style.borderColor = 'var(--accent-purple)';
} }
} }
+6 -4
View File
@@ -1255,10 +1255,12 @@
</div> </div>
</div> </div>
<!-- Action Buttons --> <!-- Action Buttons -->
<button class="radio-action-btn scan" id="radioScanBtn" onclick="toggleScanner()" <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> <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 class="radio-action-btn" id="radioListenBtn" onclick="toggleDirectListen()" </button>
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 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> </div>
</div> </div>