/**
* Player CSS - Estilos do Player de Rádio
* @version 1.0.0
*/
/* Typography */
body {
font-family: var(--font-family);
}
/* Theme Colors */
.text-primary {
color: var(--color-primary);
}
.text-secondary {
color: var(--color-secondary);
}
.text-accent {
color: var(--color-accent);
}
.bg-primary {
background-color: var(--color-primary);
}
.bg-secondary {
background-color: var(--color-secondary);
}
.bg-accent {
background-color: var(--color-accent);
}
/* Screen Reader Only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Volume Slider */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 8px;
border-radius: 4px;
background: linear-gradient(to right, #4b5563 0%, #4b5563 var(--volume-percent), #e5e7eb var(--volume-percent), #e5e7eb 100%);
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #4b5563;
border-radius: 50%;
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
background: #4b5563;
border-radius: 50%;
cursor: pointer;
border: none;
}
/* Focus States */
button:focus-visible,
input:focus-visible {
outline: none;
}
/* Textured Background */
.textured-bg {
position: relative;
background: #fff url('data:image/svg+xml,');
}
.textured-bg::after {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
z-index: 2;
}
.textured-bg section {
position: relative;
z-index: 10;
}
/* Visualizer */
.visualizer-container {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.2;
}
.visualizer-item {
width: 100%;
height: 100%;
display: block;
}
/* Play Button */
#play-button {
position: relative;
z-index: 1;
}
#play-button>svg {
position: relative;
z-index: 2;
}
/* ==========================================================================
Nome do artista e título da música
O corte com reticências depende de o bloco poder encolher. Item de flex
nasce com min-width:auto e se recusa a ficar menor que o próprio conteúdo:
sem a regra abaixo, um título longo empurra o cartão inteiro e estoura a
largura da página em vez de aparecer cortado.
Estas quatro linhas estavam sendo escritas em estilo embutido pelo
JavaScript, no elemento e em dois ancestrais, a cada atualização de
metadados - dez em dez segundos, a música toda.
========================================================================== */
.player-info {
min-width: 0;
}
#artist-name,
#song-title {
min-width: 0;
max-width: 100%;
}
/* Animations */
@keyframes slide-up {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.animate-slide-up {
animation: slide-up 0.3s ease-out;
}
/* ==========================================================================
Banner publicitário (carrossel)
Antes estas regras iam num