body:not(.dark-mode) .component_audioplayer > .audioplayer_container { background: #525659; } .component_audioplayer{ display: flex; flex-direction: column; flex: 1; width: 100%; > .audioplayer_container { display: flex; flex-direction: column; flex: 1; width: 100%; text-align: center; height: 100%; overflow: hidden; padding: 20px; box-sizing: border-box; .audioplayer_error { color: white; margin-top: 30px; } .audioplayer_box { background: #f1f1f1; box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px; position: relative; border-radius: 3px; padding: 10px 0 30px 0; .audioplayer_control { padding-top: 20px; img { height: 25px; width: 25px; cursor: pointer; } .buttons { float: left; padding-left: 15px; margin-top: -10px; display: flex; > span { margin-right: 10px; } input[type="range"] { margin-left: -5px; width: 60px; cursor: pointer; outline: none; -webkit-appearance: none; background: transparent; &::-webkit-slider-thumb { -webkit-appearance: none; height: 12px; width: 12px; border: none; border-radius: 50%; background: #6f6f6f; margin-top: -5px; } &::-moz-range-thumb { -webkit-appearance: none; height: 12px; width: 12px; border: none; border-radius: 50%; background: #6f6f6f; margin-top: -5px; } &::-webkit-slider-runnable-track { width: 100%; height: 2px; background-color: #6f6f6f; border-radius: 2px; } &::-moz-range-track { width: 100%; height: 2px; background-color: #6f6f6f; border-radius: 2px; } } } .timecode { float: right; padding-right: 25px; margin-top: -5px; #separator { padding: 0 5px; } @media screen and (max-width: 450px) { #separator, #currentTime { display: none; } } } } .audioplayer_loader { height: 260px; background: var(--color); position: absolute; opacity: 0.1; top: 0; left: 0; } .component_icon[alt="loading"] { position: absolute; margin: 50px 0px } .chromecast_loader .component_icon[alt="loading"] { margin: 0; right: 20px; top: 20px; width: 30px; } .percent { position: absolute; margin: 100px 0px; width: 120px; font-size: 1.4rem; } } } }