Template:Audio/style.css

body {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 height: 100vh;
	 overflow: hidden;
	 background: linear-gradient(to bottom right, #b968c5, skyblue);
}
 .audio-player {
	 height: 50px;
	 width: 350px;
	 background: #444;
	 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.67);
	 font-family: arial;
	 color: white;
	 font-size: 0.75em;
	 overflow: hidden;
	 display: grid;
	 grid-template-rows: 6px auto;
}
 .audio-player .timeline {
	 background: white;
	 width: 100%;
	 position: relative;
	 cursor: pointer;
}
 .audio-player .timeline .progress {
	 background: lightblue;
	 width: 0;
	 height: 100%;
	 transition: 0.25s;
}
 .audio-player .controls {
	 display: flex;
	 justify-content: space-between;
	 align-items: stretch;
	 padding: 0 5px 0 15px;
}
 .audio-player .controls > * {
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
 .audio-player .controls .toggle-play.play {
	 cursor: pointer;
	 position: relative;
	 left: 0;
	 height: 0;
	 width: 0;
	 border: 7px solid rgba(0, 0, 0, 0);
	 border-left: 13px solid white;
}
 .audio-player .controls .toggle-play.play:hover {
	 transform: scale(1.1);
}
 .audio-player .controls .toggle-play.pause {
	 height: 15px;
	 width: 20px;
	 cursor: pointer;
	 position: relative;
}
 .audio-player .controls .toggle-play.pause:before {
	 position: absolute;
	 top: 0;
	 left: 0;
	 background: white;
	 content: "";
	 height: 15px;
	 width: 3px;
}
 .audio-player .controls .toggle-play.pause:after {
	 position: absolute;
	 top: 0;
	 right: 8px;
	 background: white;
	 content: "";
	 height: 15px;
	 width: 3px;
}
 .audio-player .controls .toggle-play.pause:hover {
	 transform: scale(1.1);
}
 .audio-player .controls .time {
	 display: flex;
}
 .audio-player .controls .time > * {
	 padding: 2px;
}
 .audio-player .controls .volume-container {
	 cursor: pointer;
	 position: relative;
	 z-index: 2;
}
 .audio-player .controls .volume-container .volume-button {
	 height: 26px;
	 display: flex;
	 align-items: center;
}
 .audio-player .controls .volume-container .volume-button .volume {
	 transform: scale(0.7);
}
 .audio-player .controls .volume-container .volume-slider {
	 position: absolute;
	 left: -3px;
	 top: 15px;
	 z-index: -1;
	 width: 0;
	 height: 15px;
	 background: white;
	 box-shadow: 0 0 20px rgba(0, 0, 0, 0.67);
	 transition: 0.25s;
}
 .audio-player .controls .volume-container .volume-slider .volume-percentage {
	 background: coral;
	 height: 100%;
	 width: 75%;
}
 .audio-player .controls .volume-container:hover .volume-slider {
	 left: -123px;
	 width: 120px;
}
 .audio-player .controls .name {
	 text-align: center;
	 text-overflow: ellipsis;
	 padding: 0 4px;
}