.mobile-header-radio-btn {
display: flex;
align-items: center;
justify-content: center;
background: var(--theme-color, #3498db);
color: white;
border: none;
border-radius: 40px;
width: 40px;
height: 40px;
padding: 0;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin: 0 8px;
flex-shrink: 0;
}
.mobile-header-radio-btn:hover {
background: var(--theme-dark, #2980b9);
transform: scale(1.05);
}
.mobile-header-radio-btn:active {
transform: scale(0.95);
}
.mobile-header-radio-btn .play-icon {
width: 20px;
height: 20px;
margin-left: 2px; /* Klein beetje offset voor visueel centreren */
}
jQuery(document).ready(function($) {
// Gebruik themakleur uit de plugin
const themeColor = window.RadiospelerConfig?.themeColor || '#e50526';
// Bereken donkere variant voor hover
const r = parseInt(themeColor.slice(1,3), 16);
const g = parseInt(themeColor.slice(3,5), 16);
const b = parseInt(themeColor.slice(5,7), 16);
const darkerR = Math.max(0, Math.floor(r * 0.85));
const darkerG = Math.max(0, Math.floor(g * 0.85));
const darkerB = Math.max(0, Math.floor(b * 0.85));
const darkerColor = `#${darkerR.toString(16).padStart(2,'0')}${darkerG.toString(16).padStart(2,'0')}${darkerB.toString(16).padStart(2,'0')}`;
// Pas stijlen toe
$('.mobile-header-radio-btn').css({
'background-color': themeColor,
'--theme-dark': darkerColor
});
// Click handler
$('.mobile-header-radio-btn').on('click', function(e) {
e.preventDefault();
const quality = localStorage.getItem('radiospeler_quality') || 'normal';
const popupUrl = new URL(RadiospelerData.popupUrl, window.location.origin);
popupUrl.searchParams.set('quality', quality);
window.open(
popupUrl.toString(),
'radiospeler_popup',
`width=${RadiospelerData.popupWidth || 460},height=${RadiospelerData.popupHeight || 760},resizable=yes,scrollbars=yes,status=no,toolbar=no,menubar=no,location=no`
);
});
});