.player-control { min-width: 640px; position: relative; margin: auto; width: 65%; background: #2a2a2a; box-sizing: border-box; border-radius: 5px; height: 80px; -moz-box-sizing: border-box; font-family: Arial, sans-serif; padding: 0; z-index: 2; opacity: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; -moz-user-select: none; -webkit-user-select: none; user-select: none; cursor: default; } .player-control .progress { width: 80%; height: 8px; border-radius: 5px; background: #676767; box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.1); float: left; cursor: pointer; top: 50%; margin-top: -4px; padding: 0; position: relative; } .player-control .progress-bar { background: #fff; box-shadow: inset -30px 0px 69px -20px #89f6f5; border-radius: 5px; height: 100%; position: relative; z-index: 999; width: 0; } .player-control .button-holder { position: relative; left: 10px; } .player-control .progress-button { top: -3px; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); border-radius: 30px; width: 6px; height: 15px; position: absolute; left: -1px; text-decoration: overline; } .player-control [class^="buffered"] { background: rgba(255, 255, 255, 0.1); position: absolute; top: 0; left: 30px; height: 100%; border-radius: 5px; z-index: 1; } .player-control .play-pause { display: inline-block; font-size: 2.3em; float: left; text-shadow: 0 0 0 #fff; color: rgba(255, 255, 255, 0.8); width: 10%; padding: 29px 0 0 3%; cursor: pointer; font-variant: small-caps; } .player-control .play, .player-control .pause-button { transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; } .player-control .play .pause-button, .player-control .pause .play-button { display: none; } .player-control .pause-button { padding: 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 34px; } .player-control .pause-button span { background: #fff; width: 8px; height: 24px; float: left; display: block; } .player-control .pause-button span:first-of-type { margin: 0 4px 0 0; } .player-control .time { color: #fff; font-weight: bold; font-size: 1.2em; position: absolute; right: 0; top: 16px; } .player-control .stime, .ttime { color: #444; } .player-control .play:hover { text-shadow: 0 0 5px #fff; } .player-control .play:active, .pause-button:active span { text-shadow: 0 0 7px #fff; } .player-control .pause-button:hover span { box-shadow: 0 0 5px #fff; } .player-control .pause-button:active span { box-shadow: 0 0 7px #fff; } .player-control .volume { position: relative; float: right; width: 48px; margin-right: 16px; height: 100%; } .player-control .volume-holder { height: 100px; width: 100%; background: black; position: absolute; display: none; background: #4f4f4f; left: 0; border-radius: 5px 5px 0 0; top: -100px; } .player-control .volume-bar-holder { background: #333; width: 8px; box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3); margin: 15px auto; height: 80px; border-radius: 5px; position: relative; cursor: pointer; } .player-control .volume-button { background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); border-radius: 30px; width: 15px; height: 8px; margin-left: -3px; margin-top: -4px; /* height / 2 center the mouse */ } .player-control .volume-button-holder { position: relative; top: 0; } .player-control .volume-bar { background: #fff; box-shadow: inset -30px 0px 69px -20px #89f6f5; border-radius: 5px; width: 100%; height: 100%; position: absolute; bottom: 0; } .player-control .v-mute:before, .player-control .v-mute:after { width: 10px; box-shadow: inset 0 0 0 32px; position: absolute; -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .player-control .v-mute:before { left: 17px; height: 2px; width: 10px; } .player-control .v-mute:after { height: 10px; width: 2px; left: 21px; } .player-control .v-low:before, .player-control .v-medium:before, .player-control .v-high:before, .player-control .v-high:after, .player-control .v-very-high:before, .player-control .v-very-high:after { width: 15px; height: 15px; position: absolute; border-radius: 50%; border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; left: 2px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .player-control .v-high:before, .player-control .v-medium:before { border-style: double; border-width: 6px; left: -2px; } .player-control .v-very-high:before { border-style: inset; border-width: 6px; left: -2px; } .player-control .v-high:after, .player-control .v-very-high:after { width: 32px; height: 32px; left: -7px; } .v-low:before, .v-high:before, .v-high:after, .v-very-high:before, .v-very-high:after { border: 2px solid; } .player-control .title { position: absolute; line-height: 36px; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; padding: 0 80px; text-overflow: ellipsis; } .player-control .volume:hover { background-color: #4f4f4f; } .player-control .volume:hover .volume-holder { display: block !important; } [class*=-icon], [class*=-icon] * { box-sizing: border-box; } [class*=-icon] { display: inline-block; vertical-align: middle; position: relative; font-style: normal; color: #fff; text-align: left; text-indent: -9999px; direction: ltr; } [class*=-icon]:after, [class*=-icon]:before { content: ''; pointer-events: none; } .volume-icon { 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: -20px 10px 4px 11px; top: 50% } .open-url { min-width: 320px; width: 40%; margin: 20px auto 20px auto; } .open-url > div { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .open-url input { color: #fff; display: inline-block; border-radius: 3px 0 0 3px; font-size: 16px; padding-left: 16px; width: 90%; vertical-align: middle; border: none; } .open-url input, .open-url .submit-button { background-color: #2a2a2a; height: 38px; } .open-url input:focus { outline:0; } .open-url .submit-button { display: inline-block; vertical-align: middle; border-radius: 0 3px 3px 0; cursor: pointer; margin-left: -4px; width: 10%; font-size: 32px; line-height: 32px; color: rgba(255, 132, 0, 1); text-align: center; border: none; outline: none; font-weight: lighter; -moz-user-select: none; -webkit-user-select: none; user-select: none; font-family: Arial, Helvetica, sans-serif; } .open-url .submit-button:hover { color: rgba(255, 132, 0, 0.5); } .display-message { opacity: 0; position: fixed; background: #2a2a2a; padding: 16px; bottom: 70px; left: 24px; text-align: center; border-radius: 3px; box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); transition: opacity 200ms,-webkit-transform 300ms cubic-bezier(0.165,0.840,0.440,1.000); white-space: nowrap; -webkit-transform: translateY(40px); transform: translateY(40px); color: #fff; } .display-message.show { opacity: 1; }