/* ----------< .orange >---------------- */ .orange .sc-player { font: .7em Arial, sans-serif; background-color: #eee; background: linear-gradient( top, black, #ccc 0%, #fff 70%); background: -o-linear-gradient( top, black, #ccc 0%, #fff 70%); background: -moz-linear-gradient( top, black, #ccc 0%, #fff 70%); background: -webkit-gradient(linear, left top, left 70%, from(black), color-stop(0%, #ccc), to(#fff)); color: #333; line-height: 1.6em; box-shadow: 1px 1px 3px rgba(0,0,0,.2); } .orange .sc-player a { text-decoration: none; } /* Artworks */ .orange .sc-artwork-list { background-color: #eee; background: linear-gradient( left bottom, #eee 20px, #333 350px ); background: -o-linear-gradient( left bottom, #eee 20px, #333 350px ); background: -moz-linear-gradient( left bottom, #eee 20px, #333 350px ); background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee)); box-shadow: 1px 1px 3px rgba(0,0,0,.2); } /* Scrubber */ .orange .sc-scrubber { background-color: #e5e5e5; border-radius: 8px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); } .orange .sc-time-span { background-color: #ddd; } .orange .sc-buffer, .orange .sc-played { background-color: #adadad; position: absolute; } .orange .sc-played { background-color: #e74c14; background: linear-gradient( top, black, #e74c14 0, #f6a400 90% ); background: -o-linear-gradient( top, black, #e74c14 0, #f6a400 90% ); background: -moz-linear-gradient( top, black, #e74c14 0, #f6a400 90% ); background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #e74c14), to(#f6a400)); } .orange .sc-waveform-container { position: absolute; width: 100%; } /* Controls */ .orange .sc-controls { border-radius: 100%; border: 2px solid white; background-color: #f6a400; background: linear-gradient( 45deg, #e74c14, #f6a400 ); background: -o-linear-gradient( 45deg, #e74c14, #f6a400 ); background: -moz-linear-gradient( 45deg, #e74c14, #f6a400 ); background: -webkit-gradient(linear, left bottom, top right, from(#e74c14), to(#f6a400)); box-shadow: 1px 1px 3px rgba(0,0,0,.2); } .orange .sc-controls:hover { background: linear-gradient( 225deg, #e74c14, #f6a400 ); background: -o-linear-gradient( 225deg, #e74c14, #f6a400 ); background: -moz-linear-gradient( 225deg, #e74c14, #f6a400 ); background: -webkit-gradient(linear, top right, left bottom, from(#e74c14), to(#f6a400)); } .orange .sc-controls > * { color: transparent; } /* Track list */ .orange .sc-trackslist li.active { color: #fff; background: #e74c14; } .orange .sc-track-duration { text-align: right; padding: 0 5px; margin-left: 5px; } .orange .sc-trackslist li.active, .orange .sc-trackslist li:hover { border-radius: 4px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); } .orange .sc-trackslist li:hover { background-color: #f6a400; } .orange .sc-trackslist li.active a { color: #fff; } .orange .sc-trackslist li a { color: #333; } /* Track info */ .orange .sc-info.active { background: #fff; opacity: .9; } .orange .sc-info a { color: #e74c14; } .orange .sc-info p a { text-decoration: underline; } .orange .sc-info a:hover { color: #f6a400; } .orange .sc-info-toggle, .orange .sc-time-indicators { background: #f6a400; color: #ab3104; border-radius: 4px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); padding: 4px; } .orange .sc-info-close, .orange .sc-info-close:hover { padding: 2px 4px; font-weight: bold; border-radius: 4px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); } .orange .sc-info-close:hover { background: #f6a400; color: #ab3104; } .orange .sc-info-toggle:hover, .orange .sc-info-close { background: #fff; color: #e74c14; } /* Volume control */ .orange .sc-volume-slider { background-color: #e5e5e5; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); } .orange .sc-volume-slider .sc-volume-status { background-color: #666; border-right: 1px solid #f6a400; }