123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- /* ----------< Standart color 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);
- }
- .sc-player a {
- text-decoration: none;
- }
- /* Artworks */
- .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 */
- .sc-scrubber {
- background-color: #e5e5e5;
- border-radius: 8px;
- box-shadow: 1px 1px 3px rgba(0,0,0,.2);
- }
- .sc-time-span {
- background-color: #ddd;
- }
- .sc-buffer,
- .sc-played {
- background-color: #adadad;
- position: absolute;
- }
- .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));
- }
- .sc-waveform-container {
- position: absolute;
- width: 100%;
- }
- /* Controls */
- .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);
- }
- .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));
- }
- .sc-controls > * {
- color: transparent;
- }
- .sc-play {
- background: url('img/play-standart.svg') no-repeat center center / 30%;
- }
- .sc-pause {
- background: url('img/pause-standart.svg') no-repeat center center / 30%;
- }
- /* Track list */
- .sc-trackslist li.active {
- color: #fff;
- background: #e74c14;
- }
- .sc-track-duration {
- text-align: right;
- padding: 0 5px;
- margin-left: 5px;
- }
- .sc-trackslist li.active,
- .sc-trackslist li:hover {
- border-radius: 4px;
- box-shadow: 1px 1px 3px rgba(0,0,0,.2);
- }
- .sc-trackslist li:hover {
- background-color: #f6a400;
- }
- .sc-trackslist li.active a {
- color: #fff;
- }
- .sc-trackslist li a {
- color: #333;
- }
- /* Track info */
- .sc-info.active {
- background: #fff;
- opacity: .9;
- }
- .sc-info a {
- color: #e74c14;
- }
- .sc-info p a {
- text-decoration: underline;
- }
- .sc-info a:hover {
- color: #f6a400;
- }
- .sc-info-toggle,
- .sc-time-indicators {
- background: #f6a400;
- color: #ab3104;
- border-radius: 4px;
- box-shadow: 1px 1px 3px rgba(0,0,0,.2);
- padding: 4px;
- }
- .sc-info-close,
- .sc-info-close:hover {
- padding: 2px 4px;
- font-weight: bold;
- border-radius: 4px;
- box-shadow: 1px 1px 3px rgba(0,0,0,.2);
- }
- .sc-info-close:hover {
- background: #f6a400;
- color: #ab3104;
- }
- .sc-info-toggle:hover,
- .sc-info-close {
- background: #fff;
- color: #e74c14;
- }
- /* Volume control */
- .sc-volume-slider {
- background-color: #e5e5e5;
- border-radius: 2px;
- box-shadow: 1px 1px 3px rgba(0,0,0,.2);
- }
- .sc-volume-slider .sc-volume-status {
- background-color: #666;
- border-right: 1px solid #f6a400;
- }
|