@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.ac_player{
padding: 0 20px 20px 0;
display: none;
}
#ac_actual_label{
display: block;
font-size: 12px;
}
#ac_actual{
font-weight: 900;
}
#ac_player{
border: 1px solid #1B2839;
border-radius: 5px;
padding: 15px 20px;
box-shadow: 0px 0px 0px rgba(0, 0, 0, .6);
background-color: rgba(0,0,0,.2);
margin-bottom: 20px;
}
.ac_player_actual{
margin: 15px 0 0 0;
}
#canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ac-loading {
animation: rotation 2s infinite linear;
} @keyframes loadingPulse {
0%, 100% {
box-shadow: 0 0 15px rgba(255, 165, 0, 0.6);
}
50% {
box-shadow: 0 0 25px rgba(255, 165, 0, 0.9);
}
}
.ac-play-button-loading {
background-color: #FFA500 !important;
box-shadow: 0 0 15px rgba(255, 165, 0, 0.6) !important;
cursor: wait !important;
pointer-events: none;
animation: loadingPulse 1.5s ease-in-out infinite;
}
.ac-play-button-loading .material-symbols-outlined {
opacity: 0.9;
}
.to-volume{
width: 100%;
position: relative;
display: contents;
}
.volume::-moz-range-thumb{
height: 10px !important;
width: 10px !important;
background: #0FAF9F  !important;
border: 8px solid #095851 !important;
}
.volume{
border-radius: 5px 5px 5px 5px;
height: 5px;
width: 85% !important;
}
.volume::-moz-range-track {
-webkit-appearance: menulist !important;
width: 100%;
height: 8px !important;
cursor: pointer;
box-shadow: 0px 0px 0px #ccc,0 0 2.6px #d9d9d9 !important;
background: rgba(255,255,255,.5) !important;
border-radius: 13.6px;
border: 0px solid #fff !important;
}
.ac_player_actual_sound{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10px;
border: 2px solid #0faf9f23;
border-radius: 10px;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
margin: 2px 0px 0 1px;
}
#playAudio, #playAudioMini, #playAudioLinea{
height: 50px;
width: 50px;
border-radius:50%;
border: 0px;
background-color: #0FAF9F;
color: #fff;
cursor: pointer;
transition: .2s;
margin: 0;
padding: 0;
z-index: 9999;
position: relative;
}
#playAudioMobile{
height: 48px;
width: 48px;
min-width: 48px;
min-height: 48px;
border-radius:50%;
border: 0px;
background-color: #0FAF9F;
color: #fff;
cursor: pointer;
transition: .2s;
margin: 0;
padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0.1);
touch-action: manipulation; box-shadow: 0 2px 8px rgba(15, 175, 159, 0.3);
}
#playAudio:hover, #playAudioMini:hover, #playAudioMobile:hover{
box-shadow: 0px 0px 6px rgba(0,0,0,0.6) ;
transition: .2s;
} #playAudioMobile:hover, #playAudioMobile:active{
transform: scale(0.95);
box-shadow: 0 4px 12px rgba(15, 175, 159, 0.5);
transition: all 0.1s ease;
}  .volume {
appearance: none;
cursor: pointer;
width: 25rem;
} .volume:focus {
outline: none;
}  .volume::-webkit-slider-runnable-track {
background-color: #e5f9ff;
border-radius: 1rem;
height: 0.5rem;
} .volume::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
margin-top: -8px; background-color: #83ed2c;
border-radius: 1rem;
height: 1.5rem;
width: 1.5rem;
}
.volume:focus::-webkit-slider-thumb {
outline: 3px solid #83ed2c;
outline-offset: 0px;
}  .volume::-moz-range-track {
background-color: #0bbcf1;
border-radius: 1rem;
height: 0.5rem;
} .volume::-moz-range-thumb {
background-color: #83ed2c;
border: none; border-radius: 1rem;
height: 1.5rem;
width: 1.5rem;
}
.volume:focus::-moz-range-thumb{
outline: 3px solid #83ed2c;
outline-offset: 0.125rem;
}
@property --bg-angle {
inherits: false;
initial-value: 0deg;
syntax: "<angle>";
}
@keyframes spin {
to {
--bg-angle: 360deg;
}
}
.ac_player_mini{
animation: spin 2.5s infinite linear paused;
background:
linear-gradient( to bottom, #111a28, #111a28 ) padding-box, conic-gradient( from var(--bg-angle) in oklch longer hue, rgb(0, 255, 207) 0 0 ) border-box;
border: 8px solid transparent;
animation-play-state: running;
&:hover {
animation-play-state: running;
}
}
.ac_player_mini{
border-radius: 50%;
box-shadow: 0.125rem 0.25rem 0.25rem 0.5rem oklch(0.1 0.37 315 / 0.25);
color: white;
padding: 0rem;
& span {
line-height: 1.1;
margin: 0;
}
& p {
margin: 0.75rem 0 0;
}
}
.ac_player_linea_volume{
margin: 0;
padding: 0
}
#ac_player, .ac_player_linea {
animation: spin 2.5s infinite linear paused;
background:
linear-gradient( to bottom, #111a28, #111a28 ) padding-box, conic-gradient( from var(--bg-angle) in oklch longer hue, rgb(0, 255, 207) 0 0 ) border-box;
border: 3px solid transparent;
animation-play-state: running;
&:hover {
animation-play-state: running;
}
}
#ac_player, .ac_player_linea  {
border-radius: 1rem;
box-shadow: 0.125rem 0.25rem 0.25rem 0.5rem oklch(0.1 0.37 315 / 0.25);
color: white;
padding: 1rem;
& span {
line-height: 1.1;
margin: 0;
}
& p {
margin: 0.75rem 0 0;
}
}
#myinput {
border-radius: 8px;
height: 4px;
width: 150px;
outline: none;
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-thumb {
width: 6px;
-webkit-appearance: none;
height: 12px;
background: black;
border-radius: 2px;
}
.ac_player_linea{
display: grid;
align-items: center;
padding: 20px 30px;
border-radius: 10px;
margin: 10px 0 5px 0;
width: 100%;
gap: 5px;
grid-template-columns: 50px 30px 30% 30px 58%;
grid-template-areas: 
"box-area-1 box-area-2 box-area-3 box-area-4 box-area-5"
;
}
.ac_player_linea_volume_down {
margin: 0 0px 0 5px;
}
.ac_player_linea_volume_up {
margin: 0 5px 0 0;
}
.ac_player_linea_play_now{
margin: 0 0 0 5px;
}
.ac_player_linea_play{
width: 50px;
}
.ac_player_linea_volume_down, .ac_player_linea_play_volume_up{
}
#play_now{
font-weight: 900;
}
.ac_player_linea_volume input{
box-shadow: initial !important;
border-radius: 5px 5px 5px 5px;
height: 5px;
width: 100% !important;
}
input[type="range"]::-moz-range-track {
box-shadow: 00.1px 0.1px 0.1px #ccc, 0 0 0.1px #d9d9d9 !important;
}
.ac_player_linea_play_now{
display: grid;
}
.ac_actual_label_linea{
display: block;
font-size: 10px;
margin: -9px 0 0 0;
padding: 0;
line-height: 6px;
}
.play_now_linea{
font-weight: 900;
}
.linea_volume::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
margin-top: -8px; background-color: #83ed2c;
border-radius: 1rem;
height: 1.5rem;
width: 1.5rem;
}
input[type=range] {
-webkit-appearance: radio !important;
width: 100%;
margin: 0px 0 6px 0 !important;
padding: 0;
border: none;
}
.material-symbols-outlined {
font-size: 30px !important;
}
@media only screen and (max-width: 1365px) {
.volume{
width: 75% !important;
}
}
@media only screen and (max-width: 1023px) {
.volume{
width: 55% !important;
}
}
@media only screen and (max-width: 600px) {
.volume{
width: 55% !important;
}
}
@media only screen and (max-width:56em){
.ac_player_linea{
grid-template-columns: 50px 30px 80% 30px 100%;
grid-template-areas: 
"box-area-1 box-area-2 box-area-3 box-area-4"
"box-area-5 box-area-5 box-area-5 box-area-5"
;
}
.ac_actual_label_linea {
margin: 9px 0 9px 0;
}
}
@media only screen and (max-width:612px){
.ac_player_linea{
grid-template-columns: 50px 30px 66% 30px 100%;
grid-template-areas: 
"box-area-1 box-area-2 box-area-3 box-area-4"
"box-area-5 box-area-5 box-area-5 box-area-5"
;
}
.ac_actual_label_linea {
margin: 9px 0 9px 0;
}
.material-symbols-outlined {
font-size: 25px !important;
}
.ac_player_mini{
border: 8px solid transparent;
}
}
@media only screen and (max-width:380px){
.ac_player_linea{
grid-template-columns: 50px 30px 52% 30px 100%;
grid-template-areas: 
"box-area-1 box-area-2 box-area-3 box-area-4"
"box-area-5 box-area-5 box-area-5 box-area-5"
;
padding: 10px;
}
}
@property --angle{
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.ac_player_mobile::after, .ac_player_mobile::before{
content: '';
position: absolute;
height: 50px;
width: 50px;
background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
top: 50%;
left: 50%;
translate: -50% -50%;
z-index: -1;
border-radius: 50%;
animation: 3s spin linear infinite;
display: block;
opacity: 0.8;
margin-top: -0.2%;
} @media (prefers-reduced-motion: reduce) {
.ac_player_mobile::after, .ac_player_mobile::before {
animation: none;
opacity: 0.3;
}
.ac_player_mini {
animation: none;
}
#ac_player, .ac_player_linea {
animation: none;
}
} .ac_player_mobile.paused-animation::after,
.ac_player_mobile.paused-animation::before {
animation-play-state: paused;
}
.ac_player_mobile::before{
filter: blur(1.5rem);
opacity: 0.5;
}
@keyframes spin{
from{
--angle: 0deg;
}
to{
--angle: 360deg;
}
}
#status{
font-size: 8px;
}  .ac_canvas {
width: 100%;
background-color: #333;
border-radius: 5px;
display: block;
} .ac_player_visualization {
margin: 15px 0;
padding: 10px;
background-color: rgba(0,0,0,0.1);
border-radius: 8px;
}
.ac_player_visualization .ac_canvas {
height: 200px;
} .ac_player_linea_visualization {
margin: 10px 0;
padding: 5px;
background-color: rgba(0,0,0,0.05);
border-radius: 5px;
}
.ac_canvas_linea {
height: 80px;
} .ac_player_mobile_visualization {
margin: 10px 0;
padding: 8px;
background-color: rgba(0,0,0,0.1);
border-radius: 8px;
position: relative;
}
.ac_canvas_mobile {
height: 120px;
} .ac_player_mini_visualization {
margin: 8px 0;
padding: 5px;
background-color: rgba(0,0,0,0.05);
border-radius: 50%;
width: 60px;
height: 60px;
margin: 8px auto;
position: relative;
}
.ac_canvas_mini {
height: 50px;
width: 50px;
border-radius: 50%;
} @media only screen and (max-width: 768px) {
.ac_player_visualization .ac_canvas {
height: 150px;
}
.ac_canvas_linea {
height: 60px;
}
.ac_canvas_mobile {
height: 100px;
}
.ac_canvas_mini {
height: 40px;
width: 40px;
}
.ac_player_mini_visualization {
width: 50px;
height: 50px;
}
}
@media only screen and (max-width: 480px) {
.ac_player_visualization .ac_canvas {
height: 120px;
}
.ac_canvas_linea {
height: 50px;
}
.ac_canvas_mobile {
height: 80px;
}
.ac_canvas_mini {
height: 35px;
width: 35px;
}
.ac_player_mini_visualization {
width: 45px;
height: 45px;
}
} .ac_player_linea {
grid-template-columns: 50px 30px 30% 30px 58% 100%;
grid-template-areas: 
"box-area-1 box-area-2 box-area-3 box-area-4 box-area-5 box-area-6"
;
}
@media only screen and (max-width:56em){
.ac_player_linea{
grid-template-columns: 50px 30px 80% 30px 100% 100%;
grid-template-areas: 
"box-area-1 box-area-2 box-area-3 box-area-4"
"box-area-5 box-area-5 box-area-5 box-area-5"
"box-area-6 box-area-6 box-area-6 box-area-6"
;
}
}
@media only screen and (max-width:612px){
.ac_player_linea{
grid-template-columns: 50px 30px 66% 30px 100% 100%;
grid-template-areas: 
"box-area-1 box-area-2 box-area-3 box-area-4"
"box-area-5 box-area-5 box-area-5 box-area-5"
"box-area-6 box-area-6 box-area-6 box-area-6"
;
}
}
@media only screen and (max-width:380px){
.ac_player_linea{
grid-template-columns: 50px 30px 52% 30px 100% 100%;
grid-template-areas: 
"box-area-1 box-area-2 box-area-3 box-area-4"
"box-area-5 box-area-5 box-area-5 box-area-5"
"box-area-6 box-area-6 box-area-6 box-area-6"
;
padding: 10px;
}
}