body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#wrapper {
width: auto;
height: auto;
box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
#audioContainer {
position: relative;
height: 20em;
width: 20em;
border-radius: 10px 10px 0 0 ;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#cover {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.9;
}
#infoContainer {
height: 10em;
width: 20em;
border-radius: 0 0 10px 10px;
background-color: rgb(245, 245, 245);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#toggleButton {
position: relative;
z-index: 1;
width: 8em;
height: 8em;
background-color: transparent;
border: none;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
#pauseButton {
display: none;
width: 6em;
height: 6em;
transition: opacity 2s ease-in-out;
}
#playButton {
width: 6em;
height: 6.5em;
transition: opacity 2s ease-in-out;
}
#toggleButton img {
max-width: 100%;
max-height: 100%;
}
#artistElement,
#titleElement {
margin: 0;
padding: 0;
line-height: 2;
}
#bsrc {
font-size: x-small;
margin-top: 3em;
}
#progressSlider {
width: 90%;
height: 8px;
margin-bottom: 6px;
-webkit-appearance: none;
appearance: none;
background-color: #ddd;
border-radius: 5px;
outline: none;
}
#progressSlider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #4CAF50;
cursor: pointer;
}
#remainingTime {
height: 6px;
font-size: x-small;
margin-left: 240px;
}
/* Signed by Hertenbek */