Template:Audio/style.css

.audio-player {
	 height: 50px;
	 width: 100%;
	 max-width: 350px;
	 background: #444;
	 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.67);
	 font-family: arial;
	 color: white;
	 font-size: 1em;
	 overflow: hidden;
	 display: grid;
	 grid-template-rows: 6px auto;
}
.audio-pause {
	 height: 40px;
     width: 40px;
  	 background: #444;
     box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.67);
	 font-family: arial;
	 color: white;
	 font-size: 1em;
	 overflow: hidden;
}
.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-button .icon-volume-medium {
	font-family: Roboto,sans-serif;
    width: 0;
    height: 0;
    border: 7px solid;
    border-left: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
    padding: 6px 3px;
    box-shadow: inset 4px 0;
    margin: 4px 16px 4px 5px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-style: normal;
    color: currentColor;
    text-align: left;
    text-indent: -9999px;
    direction: ltr;
    box-sizing: border-box;
    transition: all .2s;
}

.audio-player .controls .volume-container .volume-button .icon-volume-medium::before {
    content: '';
    pointer-events: none;
    border-style: double;
    border-width: 6px;
    left: -2px;
    width: 15px;
    height: 15px;
    position: absolute;
    border-radius: 50%;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    top: 50%;
    transform: translateY(-50%);
}

.audio-player .controls .volume-container .volume-button .icon-muted {
    font-family: Roboto,sans-serif;
    width: 0;
    height: 0;
    border: 7px solid;
    border-left: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
    padding: 6px 3px;
    box-shadow: inset 4px 0;
    margin: 4px 16px 4px 5px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-style: normal;
    color: currentColor;
    text-align: left;
    text-indent: -9999px;
    direction: ltr;
    box-sizing: border-box;
    transition: all .2s;
}

.audio-player .controls .volume-container .volume-button .icon-muted:before {
    content: '';
    pointer-events: none;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 2px;
    box-shadow: inset 0 0 0 32px;
    left: 17px;
    position: absolute;
    top: 50%;
}

.audio-player .controls .volume-container .volume-button .icon-muted:after {
    content: '';
    pointer-events: none;
    transform: translateY(-50%) rotate(45deg);
    height: 10px;
    width: 2px;
    left: 21px;
    box-shadow: inset 0 0 0 32px;
    position: absolute;
    top: 50%;
}

.audio-player .controls .volume-container .volume-slider {
	 position: absolute;
	 left: -3px;
	 /* top: 0; */
	 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;
	 line-height: normal;
}

.audio-player .controls .name a {
	color: inherit;
}