/* >> reset */ * { -webkit-tap-highlight-color: transparent; } html, body, div, span, h1, h2, p, a, ol, li, audio, :before, :after { box-sizing: border-box; border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; } ol { list-style: none; margin: 0; padding: 0; } ol li { margin: 0; display: block; list-style: decimal outside; } html, body { height: 100%; } a, a:focus, a:active, a:hover, a:visited { text-decoration: none; } a[href], a[href]:link, a[href]:active, a[href]:visited, a[href]:focus, a[href]:hover { outline: 0 none; text-decoration: underline; } /* << reset */ /* page style */ body { background: #ddd none; font-family: "Helvetica", "Arial", sans-serif; font-size: 14px; color: #eee; } .page { position: relative; margin: 0 auto; height: 100%; max-width: 400px; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Audio Player */ .player-wrap { position: relative; margin: 0 auto; padding: 0; min-width: 250px; overflow: hidden; background: #fff none no-repeat center center; background-size: cover; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif; line-height: 1.3em; font-size: 12pt; color: #fefefe; /* Playlist */ } .player-wrap.view-port { max-width: 100vmin; max-height: 100vmin; } .player-wrap svg { position: relative; margin: 20%; width: 60%; height: 60%; fill: currentColor; } .player-wrap .player { display: none; } .player-wrap .title-text { font-weight: bold; font-size: 1.16em; } .player-wrap .big-play-button, .player-wrap .big-pause-button, .player-wrap .play-button, .player-wrap .pause-button, .player-wrap .prev-button, .player-wrap .next-button, .player-wrap .playlist-button { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 100%; vertical-align: top; text-align: center; cursor: pointer; } .player-wrap .big-play-button:before, .player-wrap .big-pause-button:before, .player-wrap .play-button:before, .player-wrap .pause-button:before, .player-wrap .prev-button:before, .player-wrap .next-button:before, .player-wrap .playlist-button:before { content: ""; position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; } .player-wrap .prev-button, .player-wrap .next-button, .player-wrap .playlist-button { display: none; } .player-wrap .big-play-pause, .player-wrap .play-pause { position: relative; z-index: 2; display: none; overflow: hidden; } .player-wrap .big-play-pause { display: none; color: #fefefe; } .player-wrap .big-play-pause .big-play-button:before, .player-wrap .big-play-pause .big-pause-button:before { background-color: rgba(0, 0, 0, 0.6); } .player-wrap .big-play-pause:hover .big-play-button:before, .player-wrap .big-play-pause:hover .big-pause-button:before { background-color: #46aaff; } .player-wrap .big-play-pause:before { float: left; content: ""; display: block; padding: 100% 0 0 0; width: 0; height: 0; } .player-wrap .big-play-button, .player-wrap .big-pause-button { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .player-wrap .play-button:hover, .player-wrap .pause-button:hover, .player-wrap .prev-button:hover, .player-wrap .next-button:hover, .player-wrap .playlist-button:hover { color: #46aaff; } .player-wrap .play-button:hover:before, .player-wrap .pause-button:hover:before, .player-wrap .prev-button:hover:before, .player-wrap .next-button:hover:before, .player-wrap .playlist-button:hover:before { background-color: rgba(70, 170, 255, 0.1); } .player-wrap .next-button { left: auto; right: 0; } .player-wrap .playlist-button { color: #888; border-radius: 15%; } .player-wrap .seek-wrap { height: 1em; line-height: 1em; } .player-wrap .seek-bar { margin: 0; padding: 0; width: 100%; height: 100%; } .player-wrap .current-time { float: left; font-size: 0.79em; } .player-wrap .duration-time { float: right; font-size: 0.79em; } .player-wrap audio, .player-wrap .big-pause-button, .player-wrap .pause-button { display: none; } .player-wrap .playlist-wrap { position: absolute; left: 0; top: 0; padding-top: 10.5em; width: 100%; height: 100%; overflow: hidden; color: #434546; } .player-wrap .playlist-wrap h2 { position: absolute; left: 0; top: 8em; padding: 0 1em; width: 100%; background-color: #f4f4f4; line-height: 2.5em; font-weight: bold; font-size: 1em; } .player-wrap .playlist-wrap ol { display: block; height: 100%; overflow: auto; background-color: #f4f4f4; counter-reset: track-counter; list-style: none inside; } .player-wrap .playlist-wrap li { margin: 0; border-top: 1px solid #e4e4e4; padding: 0; } .player-wrap .playlist-wrap a { display: block; padding: 0.25em 1em 0.25em 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player-wrap .playlist-wrap li a:before { display: inline-block; content: counter(track-counter, decimal); counter-increment: track-counter; width: 2em; margin-right: 1em; text-align: right; } .player-wrap .playlist-wrap li, .player-wrap .playlist-wrap a[href]:link, .player-wrap .playlist-wrap a[href]:active, .player-wrap .playlist-wrap a[href]:visited { text-decoration: none; color: #434546; } .player-wrap .playlist-wrap a[href]:focus, .player-wrap .playlist-wrap a[href]:hover { background-color: #eee; text-decoration: none; color: #434546; } .player-wrap .playlist-wrap li.sel a[href] { background-color: #ff7646; color: #ffffff; } /*background-color: #eee;*/ /*color: #46aaff;*/ /* Cover Art (optional playlist) */ .player-wrap.cover-art.enabled { min-height: 250px; } .player-wrap.cover-art.enabled:after, .player-wrap.cover-art.enabled:before { content: ""; display: block; width: 0; height: 0; } .player-wrap.cover-art.enabled:before { float: left; padding: 100% 0 0 0; } .player-wrap.cover-art.enabled:after { clear: both; } .player-wrap.cover-art.enabled .artist-text { display: none; } .player-wrap.cover-art.enabled .player { position: absolute; left: 0; bottom: 0; display: block; padding: 10% 6% 4%; width: 100%; background: #434546; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.6) 100%); } .player-wrap.cover-art.enabled .big-play-pause { position: absolute; left: 50%; bottom: 50%; display: block; margin: 0 0 -13% -13%; width: 26%; height: 26%; } .player-wrap.cover-art.enabled.list-view .big-play-pause, .player-wrap.cover-art.enabled .play-pause, .player-wrap.cover-art.enabled .prev-button, .player-wrap.cover-art.enabled .next-button, .player-wrap.cover-art.enabled .playlist-button { display: none; } .player-wrap.cover-art.enabled.list-view { background-position: center top; background-size: 100% auto; } .player-wrap.cover-art.enabled.list-view:before, .player-wrap.cover-art.enabled.list-view:after { height: 70px; } .player-wrap.cover-art.enabled.list-view .player { z-index: 1; top: 100%; bottom: auto; margin-top: -9em; padding: 0; height: 9em; } .player-wrap.cover-art.enabled.list-view .title-text { position: absolute; left: 0; bottom: 5.25em; padding: 0 6%; width: 100%; } .player-wrap.cover-art.enabled.list-view .controls { position: absolute; left: 0; bottom: 0; margin-top: 4%; padding: 2.5em 6% 0; width: 100%; height: 5em; background: #fff none; color: #434546; border-radius: 1em 1em 0 0; } .player-wrap.cover-art.enabled.list-view .play-pause, .player-wrap.cover-art.enabled.list-view .prev-button, .player-wrap.cover-art.enabled.list-view .next-button, .player-wrap.cover-art.enabled.list-view .playlist-button { position: absolute; top: 10%; display: block; width: 2em; height: 2em; } .player-wrap.cover-art.enabled.list-view .play-pause { left: 56%; } .player-wrap.cover-art.enabled.list-view .prev-button { left: 31%; } .player-wrap.cover-art.enabled.list-view .next-button { left: 79%; } .player-wrap.cover-art.enabled.list-view .playlist-button { left: 8%; background: none no-repeat center center; background-size: cover; } .player-wrap.cover-art.enabled.list-view .current-time, .player-wrap.cover-art.enabled.list-view .duration-time { color: #888; } .player-wrap.cover-art.enabled.list-view .playlist-wrap { position: absolute; left: 0; top: 100%; height: 100%; width: 100%; padding-top: 5em; } .player-wrap.cover-art.enabled.list-view.show-list .player { top: 5em; } .player-wrap.cover-art.enabled.list-view.show-list .player .playlist-button svg { display: none; } .player-wrap.cover-art.enabled.list-view.show-list .playlist-wrap { top: 0; } .player-wrap.cover-art.enabled.list-view .player, .player-wrap.cover-art.enabled.list-view .playlist-wrap { transition: top 0.2s ease; } /* Track View (optional playlist) */ .player-wrap.track-view.enabled { background-position: -100% -100%; background-size: contain; border-radius: 0.5em; color: #434546; } .player-wrap.track-view.enabled:before, .player-wrap.track-view.enabled:after { display: none; } .player-wrap.track-view.enabled .player { position: relative; display: block; padding: 1em; } .player-wrap.track-view.enabled .player:after { content: ""; display: block; clear: both; } .player-wrap.track-view.enabled .title-text { margin-left: 2.55em; } .player-wrap.track-view.enabled .artist-text { margin-left: 3em; } .player-wrap.track-view.enabled .play-pause { position: absolute; left: 0.5em; top: 0.5em; display: block; width: 3em; height: 3em; } .player-wrap.track-view.enabled .play-pause:hover { color: #46aaff; } .player-wrap.track-view.enabled .current-time, .player-wrap.track-view.enabled .duration-time { color: #888; } .player-wrap.track-view.enabled.list-view { height: 100%; min-height: 200px; background-position: 1em 0.5em; background-size: 7em 7em; } .player-wrap.track-view.enabled.list-view .player { position: absolute; z-index: 1; left: 0; top: 0; padding: 2em 1em 2.5em 9em; width: 100%; height: 8em; overflow: hidden; } .player-wrap.track-view.enabled.list-view .play-pause { left: 8.5em; top: 1.5em; } /* Button Only */ .player-wrap.button-only.enabled { min-width: 0; background: transparent none !important; } .player-wrap.button-only.enabled .player, .player-wrap.button-only.enabled .playlist-wrap { display: none; } .player-wrap.button-only.enabled .big-play-pause { display: block; color: #434546; } .player-wrap.button-only.enabled .big-play-pause :before { background-color: #fff; } .player-wrap.button-only.enabled .big-play-pause :hover { color: #fefefe; } .player-wrap.button-only.enabled .big-play-pause :hover:before { background-color: #46aaff; } /* >> input[type=range] class: seek-bar */ input.seek-bar[type=range] { box-sizing: border-box; margin: 0; padding: 0; width: 100%; height: 100%; overflow: visible; outline: 0 none; background-color: transparent; line-height: 1em; vertical-align: top; font-size: 1em; -webkit-appearance: none; cursor: pointer; } input.seek-bar[type=range]:focus { outline: 0 none; } input.seek-bar[type=range]::-webkit-slider-runnable-track { box-sizing: border-box; width: 98%; height: 0.125em; background-color: #fefefe; cursor: pointer; transition: all 0.2s ease; } input.seek-bar[type=range]::-webkit-slider-thumb { box-sizing: border-box; width: 0.5em; height: 0.5em; margin-top: -0.175em; border-radius: 0.5em; background-color: #fefefe; -webkit-appearance: none; } .seek-wrap.sel input.seek-bar[type=range]::-webkit-slider-thumb, .seek-wrap:hover input.seek-bar[type=range]::-webkit-slider-thumb { margin-top: -0.3em; margin-left: -0.05em; width: 0.75em; height: 0.75em; background-color: #46aaff; } input.seek-bar[type=range]:focus::-webkit-slider-runnable-track { background-color: #fefefe; } input.seek-bar[type=range]::-moz-range-track { box-sizing: border-box; border: 0 solid #fefefe; width: 98%; height: 0.125em; background-color: #fefefe; border-radius: 0.125em; transition: all 0.2s ease; } input.seek-bar[type=range]::-moz-range-thumb { box-sizing: border-box; border: 0 solid #fefefe; width: 0.5em; height: 0.5em; background-color: #fefefe; border-radius: 0.5em; } .seek-wrap.sel input.seek-bar[type=range]::-moz-range-thumb, .seek-wrap:hover input.seek-bar[type=range]::-moz-range-thumb, input.seek-bar[type=range]::-moz-range-thumb:hover { margin-top: -0.175em; margin-left: -0.1em; width: 0.75em; height: 0.75em; background-color: #46aaff; } input.seek-bar[type=range]::-ms-track { box-sizing: border-box; border: 0 none; width: 99%; height: 0.125em; background-color: transparent; color: transparent; transition: all 0.2s ease; } input.seek-bar[type=range]::-ms-fill-lower { background-color: #fefefe; border-radius: 0.125em; } input.seek-bar[type=range]::-ms-fill-upper { background-color: #fefefe; border-radius: 0.125em; } input.seek-bar[type=range]::-ms-thumb { position: relative; margin-top: 0.1em; box-sizing: border-box; width: 0.5em; height: 0.5em; background-color: #fefefe; border-radius: 0.5em; } .seek-wrap.sel input.seek-bar[type=range]::-ms-thumb, .seek-wrap:hover input.seek-bar[type=range]::-ms-thumb { margin-top: -0.01em; margin-left: -0.1em; width: 0.75em; height: 0.75em; background-color: #46aaff; } input.seek-bar[type=range]:focus::-ms-fill-lower { background-color: #fefefe; } input.seek-bar[type=range]:focus::-ms-fill-upper { background-color: #fefefe; } .player-wrap.cover-art.list-view input.seek-bar[type=range]::-webkit-slider-runnable-track, .player-wrap.track-view input.seek-bar[type=range]::-webkit-slider-runnable-track { background-color: #434546; } .player-wrap.cover-art.list-view input.seek-bar[type=range]::-webkit-slider-thumb, .player-wrap.track-view input.seek-bar[type=range]::-webkit-slider-thumb { background-color: #434546; } .player-wrap.cover-art.list-view .seek-wrap.sel input.seek-bar[type=range]::-webkit-slider-thumb, .player-wrap.cover-art.list-view .seek-wrap:hover input.seek-bar[type=range]::-webkit-slider-thumb, .player-wrap.track-view .seek-wrap.sel input.seek-bar[type=range]::-webkit-slider-thumb, .player-wrap.track-view .seek-wrap:hover input.seek-bar[type=range]::-webkit-slider-thumb { background-color: #46aaff; } .player-wrap.cover-art.list-view input.seek-bar[type=range]:focus::-webkit-slider-runnable-track, .player-wrap.track-view input.seek-bar[type=range]:focus::-webkit-slider-runnable-track { background-color: #434546; } .player-wrap.cover-art.list-view input.seek-bar[type=range]::-moz-range-track, .player-wrap.track-view input.seek-bar[type=range]::-moz-range-track { background-color: #434546; } .player-wrap.cover-art.list-view input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.track-view input.seek-bar[type=range]::-moz-range-thumb { background-color: #434546; } .player-wrap.cover-art.list-view .seek-wrap.sel input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.cover-art.list-view .seek-wrap:hover input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.cover-art.list-view input.seek-bar[type=range]::-moz-range-thumb:hover, .player-wrap.track-view .seek-wrap.sel input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.track-view .seek-wrap:hover input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.track-view input.seek-bar[type=range]::-moz-range-thumb:hover { background-color: #46aaff; } .player-wrap.cover-art.list-view input.seek-bar[type=range]::-ms-track, .player-wrap.track-view input.seek-bar[type=range]::-ms-track { background-color: #434546; } .player-wrap.cover-art.list-view input.seek-bar[type=range]::-ms-fill-lower, .player-wrap.track-view input.seek-bar[type=range]::-ms-fill-lower { background-color: #434546; } .player-wrap.cover-art.list-view input.seek-bar[type=range]::-ms-fill-upper, .player-wrap.track-view input.seek-bar[type=range]::-ms-fill-upper { background-color: #434546; } .player-wrap.cover-art.list-view input.seek-bar[type=range]::-ms-thumb, .player-wrap.track-view input.seek-bar[type=range]::-ms-thumb { background-color: #434546; } .player-wrap.cover-art.list-view .seek-wrap.sel input.seek-bar[type=range]::-ms-thumb, .player-wrap.cover-art.list-view .seek-wrap:hover input.seek-bar[type=range]::-ms-thumb, .player-wrap.track-view .seek-wrap.sel input.seek-bar[type=range]::-ms-thumb, .player-wrap.track-view .seek-wrap:hover input.seek-bar[type=range]::-ms-thumb { background-color: #46aaff; } /* << input[type=range] class: seek-bar */ .player-wrap.dark { background-color: #333; color: #fefefe; } .player-wrap.dark .big-play-pause:hover .big-play-button:before, .player-wrap.dark .big-play-pause:hover .big-pause-button:before { background-color: #46aaff; } .player-wrap.dark .play-button:hover, .player-wrap.dark .pause-button:hover, .player-wrap.dark .prev-button:hover, .player-wrap.dark .next-button:hover, .player-wrap.dark .playlist-button:hover { color: #46aaff; } .player-wrap.dark .play-button:hover:before, .player-wrap.dark .pause-button:hover:before, .player-wrap.dark .prev-button:hover:before, .player-wrap.dark .next-button:hover:before, .player-wrap.dark .playlist-button:hover:before { background-color: rgba(70, 170, 255, 0.1); } .player-wrap.dark .playlist-button { color: #888; } .player-wrap.dark .playlist-wrap { color: #c9c9c9; } .player-wrap.dark .playlist-wrap h2, .player-wrap.dark .playlist-wrap ol { background-color: #292929; } .player-wrap.dark .playlist-wrap li { border-top: 1px solid #181818; } .player-wrap.dark .playlist-wrap a[href]:link, .player-wrap.dark .playlist-wrap a[href]:active, .player-wrap.dark .playlist-wrap a[href]:visited { color: #c9c9c9; } .player-wrap.dark .playlist-wrap a[href]:focus, .player-wrap.dark .playlist-wrap a[href]:hover { background-color: #292929; color: #fefefe; } .player-wrap.dark .playlist-wrap li.sel a[href] { background-color: #333; color: #46aaff; } .player-wrap.dark.cover-art.enabled .controls { background: #333 none; color: #fefefe; } .player-wrap.dark.cover-art.enabled .current-time, .player-wrap.dark.cover-art.enabled .duration-time { color: #888; } .player-wrap.dark.track-view.enabled { color: #fefefe; } .player-wrap.dark.track-view.enabled .play-pause:hover { color: #46aaff; } .player-wrap.dark.track-view.enabled .current-time, .player-wrap.dark.track-view.enabled .duration-time { color: #888; } .player-wrap.dark.button-only.enabled .big-play-pause { color: #fefefe; } .player-wrap.dark.button-only.enabled .big-play-pause :before { background-color: #333; } .player-wrap.dark.button-only.enabled .big-play-pause :hover { color: #fefefe; } .player-wrap.dark.button-only.enabled .big-play-pause :hover:before { background-color: #46aaff; } .player-wrap.dark input.seek-bar[type=range]::-webkit-slider-runnable-track { background-color: #fefefe; } .player-wrap.dark input.seek-bar[type=range]::-webkit-slider-thumb { background-color: #fefefe; } .player-wrap.dark .seek-wrap.sel input.seek-bar[type=range]::-webkit-slider-thumb, .player-wrap.dark .seek-wrap:hover input.seek-bar[type=range]::-webkit-slider-thumb { background-color: #46aaff; } .player-wrap.dark input.seek-bar[type=range]:focus::-webkit-slider-runnable-track { background-color: #fefefe; } .player-wrap.dark input.seek-bar[type=range]::-moz-range-track { border: 0 solid #fefefe; background-color: #fefefe; } .player-wrap.dark input.seek-bar[type=range]::-moz-range-thumb { border: 0 solid #fefefe; background-color: #fefefe; } .player-wrap.dark .seek-wrap.sel input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.dark .seek-wrap:hover input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.dark input.seek-bar[type=range]::-moz-range-thumb:hover { background-color: #46aaff; } .player-wrap.dark input.seek-bar[type=range]::-ms-fill-lower { background-color: #fefefe; } .player-wrap.dark input.seek-bar[type=range]::-ms-fill-upper { background-color: #fefefe; } .player-wrap.dark input.seek-bar[type=range]::-ms-thumb { background-color: #fefefe; } .player-wrap.dark .seek-wrap.sel input.seek-bar[type=range]::-ms-thumb, .player-wrap.dark .seek-wrap:hover input.seek-bar[type=range]::-ms-thumb { background-color: #46aaff; } .player-wrap.dark input.seek-bar[type=range]:focus::-ms-fill-lower { background-color: #fefefe; } .player-wrap.dark input.seek-bar[type=range]:focus::-ms-fill-upper { background-color: #fefefe; } .player-wrap.dark.cover-art.list-view input.seek-bar[type=range]::-webkit-slider-runnable-track, .player-wrap.dark.track-view input.seek-bar[type=range]::-webkit-slider-runnable-track { background-color: #fefefe; } .player-wrap.dark.cover-art.list-view input.seek-bar[type=range]::-webkit-slider-thumb, .player-wrap.dark.track-view input.seek-bar[type=range]::-webkit-slider-thumb { background-color: #fefefe; } .player-wrap.dark.cover-art.list-view .seek-wrap.sel input.seek-bar[type=range]::-webkit-slider-thumb, .player-wrap.dark.cover-art.list-view .seek-wrap:hover input.seek-bar[type=range]::-webkit-slider-thumb, .player-wrap.dark.track-view .seek-wrap.sel input.seek-bar[type=range]::-webkit-slider-thumb, .player-wrap.dark.track-view .seek-wrap:hover input.seek-bar[type=range]::-webkit-slider-thumb { background-color: #46aaff; } .player-wrap.dark.cover-art.list-view input.seek-bar[type=range]:focus::-webkit-slider-runnable-track, .player-wrap.dark.track-view input.seek-bar[type=range]:focus::-webkit-slider-runnable-track { background-color: #fefefe; } .player-wrap.dark.cover-art.list-view input.seek-bar[type=range]::-moz-range-track, .player-wrap.dark.track-view input.seek-bar[type=range]::-moz-range-track { background-color: #fefefe; } .player-wrap.dark.cover-art.list-view input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.dark.track-view input.seek-bar[type=range]::-moz-range-thumb { background-color: #fefefe; } .player-wrap.dark.cover-art.list-view .seek-wrap.sel input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.dark.cover-art.list-view .seek-wrap:hover input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.dark.cover-art.list-view input.seek-bar[type=range]::-moz-range-thumb:hover, .player-wrap.dark.track-view .seek-wrap.sel input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.dark.track-view .seek-wrap:hover input.seek-bar[type=range]::-moz-range-thumb, .player-wrap.dark.track-view input.seek-bar[type=range]::-moz-range-thumb:hover { background-color: #46aaff; } .player-wrap.dark.cover-art.list-view input.seek-bar[type=range]::-ms-track, .player-wrap.dark.track-view input.seek-bar[type=range]::-ms-track { background-color: #fefefe; } .player-wrap.dark.cover-art.list-view input.seek-bar[type=range]::-ms-fill-lower, .player-wrap.dark.track-view input.seek-bar[type=range]::-ms-fill-lower { background-color: #fefefe; } .player-wrap.dark.cover-art.list-view input.seek-bar[type=range]::-ms-fill-upper, .player-wrap.dark.track-view input.seek-bar[type=range]::-ms-fill-upper { background-color: #fefefe; } .player-wrap.dark.cover-art.list-view input.seek-bar[type=range]::-ms-thumb, .player-wrap.dark.track-view input.seek-bar[type=range]::-ms-thumb { background-color: #fefefe; } .player-wrap.dark.cover-art.list-view .seek-wrap.sel input.seek-bar[type=range]::-ms-thumb, .player-wrap.dark.cover-art.list-view .seek-wrap:hover input.seek-bar[type=range]::-ms-thumb, .player-wrap.dark.track-view .seek-wrap.sel input.seek-bar[type=range]::-ms-thumb, .player-wrap.dark.track-view .seek-wrap:hover input.seek-bar[type=range]::-ms-thumb { background-color: #46aaff; }