Open OpenA opened 10 years ago
diff --git a/css/sc-player-standard/colors-blue.css b/css/sc-player-standard/colors-blue.css index 2135a1c..56b847b 100755 --- a/css/sc-player-standard/colors-blue.css +++ b/css/sc-player-standard/colors-blue.css @@ -1,299 +1,149 @@ .sc-player { - font: 12px Arial, sans-serif; - background-color: #eee; - background: -moz-linear-gradient(top, black, #eee 0px, #fff 50%); - background: -webkit-gradient(linear, left top, left 50%, from(black), color-stop(0%, #eee), to(#fff)); - color: #333; - font-size: 0.6em; - line-height: 1.6em; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; + font: 12px Arial, sans-serif; + background-color: #eee; + background: -moz-linear-gradient(top, black, #eee 0px, #fff 50%); + background: -webkit-gradient(linear, left top, left 50%, from(black), color-stop(0%, #eee), to(#fff)); + color: #333; + font-size: 0.6em; + line-height: 1.6em; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } .sc-player a { - text-decoration: none; - color: #333; + text-decoration: none; } /* Artworks */ -.sc-player .sc-artwork-list{ - background: #eee; - background: -moz-linear-gradient(left bottom, #EEEEEE 20px, #333333 350px) repeat scroll 0 0 transparent; - background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee)); +.sc-artwork-list { + background: #eee; + background: -moz-linear-gradient(left bottom, #EEEEEE 20px, #333333 350px) repeat scroll 0 0 transparent; + background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee)); + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } /* scrubber */ .sc-scrubber { - background-color: #e5e5e5; - -moz-border-radius: 8px; - -webkit-border-radius: 8px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; + background-color: #e5e5e5; + border-radius: 8px; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } -.sc-scrubber .sc-time-span { - background-color: #fff; +.sc-time-span { + background-color: #fff; } -.sc-scrubber .sc-time-span img { - height: 30px; - width: 100%; - background-color: #003399; - background: -moz-linear-gradient(top, black, #003399 0px, #5d95d2 90%); - background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #003399), to(#5d95d2)); +.sc-time-span img { + height: 30px; + width: 100%; + background-color: #003399; + background: -moz-linear-gradient(top, black, #003399 0px, #5d95d2 90%); + background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #003399), to(#5d95d2)); } -.sc-scrubber .sc-buffer, .sc-scrubber .sc-played { - background-color: #fff; - opacity: 0.4; +.sc-buffer, .sc-played { + background-color: #fff; + opacity: 0.4; } -.sc-scrubber .sc-played { - background-color: #333; - opacity: 0.4; +.sc-played { + background-color: #333; + opacity: 0.4; } /* controls */ -.sc-player .sc-controls a { - color: transparent; - background: url('img/play-blue.png'); +.sc-controls { + border-radius: 100%; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } -.sc-player .sc-controls a:hover { - background: url('img/play-blue-hover.png'); +.sc-controls a, .sc-controls a:hover { + color: transparent; } -.sc-player .sc-controls a.sc-pause { - background: url('img/play-blue.png'); +.sc-play { + background: url('img/play-blue.png'); } -.sc-player .sc-controls a.sc-pause:hover{ - background: url('img/play-blue-hover.png'); +.sc-play:hover { + background: url('img/play-blue-hover.png'); } -.sc-player.playing .sc-controls a.sc-pause{ - background: url('img/pause-blue.png'); +.playing .sc-pause { + background: url('img/pause-blue.png'); } -.sc-player.playing .sc-controls a.sc-pause:hover{ - background: url('img/pause-blue-hover.png'); -} +.playing .sc-pause:hover { + background: url('img/pause-blue-hover.png'); +} -.sc-scrubber .sc-time-indicators{ - background: #fff; - color: #003399; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; - padding: 4px; +.sc-time-indicators { + background: #fff; + color: #003399; + border-radius: 4px; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); + padding: 4px; } /* Track listings*/ -.sc-player ol.sc-trackslist li.active, .sc-player ol.sc-trackslist li:hover { - background-color: #fff; - padding: 4px; - color: #003399; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; +.sc-trackslist li.active, .sc-trackslist li:hover { + background-color: #fff; + color: #003399; + border-radius: 4px; + box-shadow: 1px 1px 4px #ccc; } -.sc-player ol.sc-trackslist li.active a { - color: #003399; +.sc-trackslist li.active a { + color: #003399; } .sc-track-duration { - text-align: right; - float: right; - padding: 0 5px; - margin-left: 5px; + text-align: right; + padding: 0 5px; + margin-left: 5px; } /* Track info*/ -.sc-player .sc-info{ - background: #fff; - opacity: 0.9; -} - -.sc-player .sc-info-toggle{ - background: #fff; - color: #003399; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; - padding: 4px; -} - -.sc-player .sc-info-toggle:hover{ - background: #003399; - color: #eee; -} - -.sc-player .sc-info-close{ - background: #003399; - color: #fff; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - padding: 2px 4px; - font-weight: bold; -} -.sc-player { - font: 12px Arial, sans-serif; - background-color: #eee; - background: -moz-linear-gradient(top, black, #eee 0px, #fff 50%); - background: -webkit-gradient(linear, left top, left 50%, from(black), color-stop(0%, #eee), to(#fff)); - color: #333; - font-size: 0.6em; - line-height: 1.6em; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; -} - -.sc-player a { - text-decoration: none; - color: #333; -} - -/* scrubber */ - -.sc-scrubber { - background-color: #e5e5e5; - -moz-border-radius: 8px; - -webkit-border-radius: 8px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; -} - -.sc-scrubber .sc-time-span { - background-color: #fff; -} - -.sc-scrubber .sc-time-span img { - height: 30px; - width: 100%; - background-color: #003399; - background: -moz-linear-gradient(top, black, #003399 0px, #5d95d2 90%); - background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #003399), to(#5d95d2)); -} - -.sc-scrubber .sc-buffer, .sc-scrubber .sc-played { - background-color: #fff; - opacity: 0.4; -} - -.sc-scrubber .sc-played { - background-color: #333; - opacity: 0.4; -} - -/* controls */ - -.sc-player .sc-controls a { - color: transparent; - background: url('img/play-blue.png'); -} - -.sc-player .sc-controls a:hover { - background: url('img/play-blue-hover.png'); -} - -.sc-player .sc-controls a.sc-pause { - background: url('img/play-blue.png'); -} - -.sc-player .sc-controls a.sc-pause:hover{ - background: url('img/play-blue-hover.png'); -} - -.sc-player.playing .sc-controls a.sc-pause{ - background: url('img/pause-blue.png'); -} - -.sc-player.playing .sc-controls a.sc-pause:hover{ - background: url('img/pause-blue-hover.png'); -} - -.sc-scrubber .sc-time-indicators{ - background: #fff; - color: #003399; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; - padding: 4px; +.sc-info { + background: #fff; } -/* Track listings*/ - -.sc-player ol.sc-trackslist li.active, .sc-player ol.sc-trackslist li:hover { - background-color: #fff; - padding: 4px; - color: #003399; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; +.sc-info-toggle, .sc-info-close { + background: #fff; + color: #003399; + border-radius: 4px; + padding: 4px; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } -.sc-player ol.sc-trackslist li.active a { - color: #003399; +.sc-info-toggle:hover, .sc-info-close:hover { + background: #003399; + color: #eee; } -.sc-track-duration { - text-align: right; - float: right; - padding: 0 5px; - margin-left: 5px; +h3 a:hover, h4 a:hover { + color: #003399; } -/* Track info*/ - -.sc-player .sc-info{ - background: #fff; - opacity: 0.9; +.sc-info-close { + padding: 2px 4px; + font-weight: bold; + box-shadow: 1px 1px 4px #ccc; } -.sc-player .sc-info-toggle{ - background: #fff; - color: #003399; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; - padding: 4px; -} - -.sc-player .sc-info-toggle:hover{ - background: #003399; - color: #eee; -} - -.sc-player .sc-info-close{ - background: #003399; - color: #fff; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - padding: 2px 4px; - font-weight: bold; -} +/* volume control */ .sc-volume-slider { - background-color: #e5e5e5; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; + background-color: #e5e5e5; + border-radius: 2px; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } - -.sc-volume-slider .sc-volume-status{ - background-color: #666; - border-right: 1px solid #003399; +.sc-volume-slider .sc-volume-status { + background-color: #666; + border-right: 1px solid #003399; } - diff --git a/css/sc-player-standard/colors-green.css b/css/sc-player-standard/colors-green.css index 2bc4f71..0e812a1 100755 --- a/css/sc-player-standard/colors-green.css +++ b/css/sc-player-standard/colors-green.css @@ -1,167 +1,157 @@ .sc-player { - font: 12px Arial, sans-serif; - background-color: #333; - color: #fff; - font-size: 0.7em; - line-height: 1.4em; - -moz-box-shadow: 1px 1px 4px #333; - -webkit-box-shadow: 1px 1px 4px #333; + font: 12px Arial, sans-serif; + background-color: #333; + color: #fff; + font-size: 0.7em; + line-height: 1.4em; + box-shadow: 1px 1px 4px #333; } .sc-player a { - text-decoration: none; - color: #fff; + text-decoration: none; + color: #fff; } /* Artworks */ -.sc-player .sc-artwork-list{ - background: #eee; - background: -moz-linear-gradient(left bottom, #EEEEEE 20px, #333333 350px) repeat scroll 0 0 transparent; - background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee)); +.sc-artwork-list { + background: #eee; + background: -moz-linear-gradient(left bottom, #EEEEEE 20px, #333333 350px) repeat scroll 0 0 transparent; + background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee)); + box-shadow: 1px 1px 4px rgba(0,0,0,0.2); } /* scrubber */ .sc-scrubber { - background-color: #e5e5e5; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; + background-color: #e5e5e5; + border-radius: 2px; } - -.sc-scrubber .sc-time-span { - background-color: #666; -} - -.sc-volume-slider { - background-color: #e5e5e5; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; +.sc-time-span { + background-color: #666; } - -.sc-volume-slider .sc-volume-status{ - background-color: #666; - border-right: 1px solid #22B573; -} - - -.sc-scrubber .sc-waveform-container { - z-index: 800; - width: 100%; - position: absolute; +.sc-waveform-container { + z-index: 800; + width: 100%; + position: absolute; } -.sc-scrubber .sc-time-span img { - height: 30px; - width: 100%; - /*background: -moz-linear-gradient(top, black, #22B573 0px, #7decba 90%); - background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #22B573), to(#7decba));*/ - +.sc-time-span img { + height: 30px; + width: 100%; + /*background: -moz-linear-gradient(top, black, #22B573 0px, #7decba 90%); + background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #22B573), to(#7decba));*/ } -.sc-scrubber .sc-buffer, .sc-scrubber .sc-played { - background-color: #333; - z-index: 1; - position: absolute; +.sc-buffer, .sc-played { + background-color: #333; + z-index: 1; + position: absolute; } -.sc-scrubber .sc-played { - background-color: #22B573; - z-index: 799; +.sc-played { + background-color: #22B573; + z-index: 799; } /* controls */ -.sc-player .sc-controls a { - color: transparent; - background: url('../../css/sc-player-standard/img/play-green.png'); +.sc-controls { + border-radius: 100%; + box-shadow: 1px 1px 4px rgba(0,0,0,0.2); } -.sc-player .sc-controls a:hover { - background: url('../../css/sc-player-standard/img/play-green-hover.png'); +.sc-controls a, .sc-controls a:hover { + color: transparent; } -.sc-player .sc-controls a.sc-pause { - background: url('../../css/sc-player-standard/img/play-green.png'); +.sc-play { + background: url('img/play-green.png'); } -.sc-player .sc-controls a.sc-pause:hover{ - background: url('../../css/sc-player-standard/img/play-green-hover.png'); +.sc-play:hover { + background: url('img/play-green-hover.png'); } -.sc-player.playing .sc-controls a.sc-pause{ - background: url('../../css/sc-player-standard/img/pause-green.png'); +.playing .sc-pause { + background: url('img/pause-green.png'); } -.sc-player.playing .sc-controls a.sc-pause:hover{ - background: url('../../css/sc-player-standard/img/pause-green-hover.png'); -} +.playing .sc-pause:hover { + background: url('img/pause-green-hover.png'); +} -.sc-scrubber .sc-time-indicators{ - background: #22B573; - color: #fff; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - padding: 4px; +.sc-time-indicators { + background: #22B573; + color: #fff; + border-radius: 4px; + padding: 4px; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); } /* Track listings*/ -.sc-player ol.sc-trackslist li { - background: #333; - color: #b8e9d3; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -webkit-transition: background 0.3s ease-in; +.sc-trackslist li { + background: #333; + color: #b8e9d3; + border-radius: 4px; + transition: background 0.3s ease-in; } -.sc-player ol.sc-trackslist li:hover { - background: #22B573; +.sc-trackslist li:hover { + background: #22B573; } -.sc-player ol.sc-trackslist li.active{ - background: #22B573; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; +.sc-trackslist li.active { + background: #22B573; + border-radius: 4px; } -.sc-player ol.sc-trackslist li.active a { - color: #fff; +.sc-trackslist li.active a { + color: #fff; } +/* Track info*/ +.sc-info, +.sc-info-close:hover, +.sc-info-toggle:hover { + background: #333; + color: #fff; +} -/* Track info*/ +h3 a, h4 a { + color: #b1e8cc!important; +} -.sc-player .sc-info{ - background: #333; - opacity: 0.9; - color: #fff; +h3 a:hover, h4 a:hover { + color: #e1f7ee!important; } -.sc-player .sc-info a { - color: #fff; +.sc-info-toggle, .sc-info-close { + background: #22B573; + color: #fff; + border-radius: 4px; + padding: 4px; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); } -.sc-player .sc-info-toggle{ - background: #22B573; - color: #fff; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - padding: 4px; +.sc-info-close { + padding: 2px 4px; + font-weight: bold; } -.sc-player .sc-info-toggle:hover{ - background: #333; - color: #fff; +/* volume control */ + +.sc-volume-slider { + background-color: #e5e5e5; + border-radius: 2px; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); } -.sc-player .sc-info-close{ - background: #22B573; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - padding: 2px 4px; - font-weight: bold; +.sc-volume-slider .sc-volume-status { + background-color: #666; + border-right: 1px solid #22B573; } diff --git a/css/sc-player-standard/colors-orange.css b/css/sc-player-standard/colors-orange.css index dc2be87..1d07a7e 100755 --- a/css/sc-player-standard/colors-orange.css +++ b/css/sc-player-standard/colors-orange.css @@ -1,165 +1,164 @@ .sc-player { - font: 12px Arial, sans-serif; - background-color: #eee; - background: -moz-linear-gradient(top, black, #ccc 0px, #fff 70%); - background: -webkit-gradient(linear, left top, left 70%, from(black), color-stop(0%, #ccc), to(#fff)); - color: #333; - font-size: 0.6em; - line-height: 1.6em; + font: 12px Arial, sans-serif; + background-color: #eee; + background: -moz-linear-gradient(top, black, #ccc 0px, #fff 70%); + background: -webkit-gradient(linear, left top, left 70%, from(black), color-stop(0%, #ccc), to(#fff)); + color: #333; + font-size: 0.6em; + line-height: 1.6em; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } .sc-player a { - text-decoration: none; - color: #333; + text-decoration: none; } /* Artworks */ -.sc-player .sc-artwork-list{ - background: #eee; - background: -moz-linear-gradient(left bottom, #EEEEEE 20px, #333333 350px) repeat scroll 0 0 transparent; - background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee)); +.sc-artwork-list { + background-color: #eee; + background: -moz-linear-gradient(left bottom, #EEEEEE 20px, #333333 350px) repeat scroll 0 0 transparent; + background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee)); + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } /* scrubber */ .sc-scrubber { - background-color: #E5E5E5; - -moz-border-radius: 8px; - -webkit-border-radius: 8px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; + background-color: #E5E5E5; + border-radius: 8px; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } -.sc-scrubber .sc-time-span { - background-color: #fff; +.sc-time-span { + background-color: #fff; } -.sc-scrubber .sc-time-span img { - height: 30px; - width: 100%; - background-color: #003399; - background: -moz-linear-gradient(top, black, #e74c14 0px, #f6a400 90%); - background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #e74c14), to(#f6a400)); +.sc-time-span img { + height: 30px; + width: 100%; + background-color: #003399; + background: -moz-linear-gradient(top, black, #e74c14 0px, #f6a400 90%); + background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #e74c14), to(#f6a400)); } -.sc-scrubber .sc-buffer, .sc-scrubber .sc-played { - background-color: #fff; - opacity: 0.4; +.sc-buffer { + background-color: #fff; + opacity: 0.4; } -.sc-scrubber .sc-played { - background-color: #333; - opacity: 0.4; +.sc-played { + background-color: #333; + opacity: 0.4; } /* controls */ -.sc-player .sc-controls a { - color: transparent; - background: url('../../css/sc-player-standard/img/play-orange.png'); +.sc-controls { + border-radius: 100%; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } -.sc-player .sc-controls a:hover { - background: url('../../css/sc-player-standard/img/play-orange-hover.png'); +.sc-controls a, .sc-controls a:hover { + color: transparent; } -.sc-player .sc-controls a.sc-pause { - background: url('../../css/sc-player-standard/img/play-orange.png'); +.sc-play { + background: url('img/play-orange.png'); } -.sc-player .sc-controls a.sc-pause:hover{ - background: url('../../css/sc-player-standard/img/play-orange-hover.png'); +.sc-play:hover { + background: url('img/play-orange-hover.png'); } -.sc-player.playing .sc-controls a.sc-pause{ - background: url('../../css/sc-player-standard/img/pause-orange.png'); +.playing .sc-pause { + background: url('img/pause-orange.png'); } -.sc-player.playing .sc-controls a.sc-pause:hover{ - background: url('../../css/sc-player-standard/img/pause-orange-hover.png'); -} +.playing .sc-pause:hover { + background: url('img/pause-orange-hover.png'); +} -.sc-scrubber .sc-time-indicators{ - background: #f6a400; - color: #fff; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; - padding: 4px; +.sc-time-indicators { + background: #f6a400; + color: #fff; + border-radius: 4px; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); + padding: 4px; } /* Track listings*/ -.sc-player ol.sc-trackslist li.active { - color: #fff; - background: #e74c14; +.sc-trackslist li.active { + color: #fff; + background: #e74c14; } -.sc-player ol.sc-trackslist li.active, .sc-player ol.sc-trackslist li:hover { - padding: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; +.sc-track-duration { + text-align: right; + padding: 0 5px; + margin-left: 5px; } -.sc-player ol.sc-trackslist li:hover { - background-color: #f6a400; +.sc-trackslist li.active, .sc-trackslist li:hover { + border-radius: 4px; + box-shadow: 1px 1px 4px #ccc; } -.sc-player ol.sc-trackslist li.active a { - color: #fff; +.sc-trackslist li:hover { + background-color: #f6a400; } -.sc-track-duration { - text-align: right; - float: right; - padding: 0 5px; - margin-left: 5px; +.sc-trackslist li.active a { + color: #fff; +} + +.sc-trackslist li a { + color: #333; } /* Track info*/ -.sc-player .sc-info{ - background: #fff; - opacity: 0.9; +.sc-info { + background: #fff; } -.sc-player .sc-info-toggle{ - background: #f6a400; - color: #fff; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -moz-box-shadow: 1px 1px 4px #ccc; - -webkit-box-shadow: 1px 1px 4px #ccc; - padding: 4px; +h3 a, h4 a { + color: #e74c14; } -.sc-player .sc-info-toggle:hover{ - background: #fff; - color: #e74c14; +h3 a:hover, h4 a:hover { + color: #f6a400; } -.sc-player .sc-info-close{ - background: #f6a400; - color: #fff; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - padding: 2px 4px; - font-weight: bold; +.sc-info-toggle, .sc-info-close { + background: #f6a400; + color: #fff; + border-radius: 4px; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); + padding: 4px; } -.sc-volume-slider { - background-color: #e5e5e5; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; +.sc-info-close { + padding: 2px 4px; + font-weight: bold; + box-shadow: 1px 1px 4px #ccc; +} + +.sc-info-toggle:hover, .sc-info-close:hover { + background: #fff; + color: #e74c14; } +/* volume control */ -.sc-volume-slider .sc-volume-status{ - background-color: #666; - border-right: 1px solid #f6a400; +.sc-volume-slider { + background-color: #e5e5e5; + border-radius: 2px; + box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } +.sc-volume-slider .sc-volume-status { + background-color: #666; + border-right: 1px solid #f6a400; +} diff --git a/css/sc-player-standard/standards.css b/css/sc-player-standard/standards.css index 4603cd7..82dab4d 100755 --- a/css/sc-player-standard/standards.css +++ b/css/sc-player-standard/standards.css @@ -1,33 +1,41 @@ body { - font-family: 'Courier', Courier New, monospace; - width: 800px; - margin-left: 50px; - color: #333; + font-family: 'Courier', Courier New, monospace; + width: 800px; + margin-left: 50px; + color: #333; + text-shadow: none; + clear: both; + display: inline-block; } h1 { - border-bottom: 1px dotted #000; - padding: 20px 0; + border-bottom: 1px dotted black; + padding: 20px 0; +} + +h3 { + width: 90%; + text-align: center; } .post { -width: 540px; -float: left; + width: 540px; + float: left; } .sidebar { -float: right; -width: 200px; -padding-left: 10px; -padding-bottom: 20px; -margin-right: 10px; -border-left: 1px dotted #000; + float: right; + width: 200px; + padding-left: 10px; + padding-bottom: 20px; + margin-right: 10px; + border-left: 1px dotted black; } .footer { - float: left; - width: 800px; - border-top: 1px dotted #000; - padding: 10px 0; - text-align: right; + float: left; + width: 800px; + border-top: 1px dotted black; + padding: 10px 0; + text-align: right; } diff --git a/css/sc-player-standard/structure-horizontal.css b/css/sc-player-standard/structure-horizontal.css index 1c09a22..68aa604 100755 --- a/css/sc-player-standard/structure-horizontal.css +++ b/css/sc-player-standard/structure-horizontal.css @@ -1,209 +1,198 @@ - .sc-player { - width: 540px; - height: 270px; - position: relative; - margin-bottom: 20px; + width: 540px; + height: 270px; + position: relative; + margin: 5px; } -.sc-player ol, .sc-player li{ - margin: 0; - padding: 0; - list-style-position: inside; +.sc-player ol, .sc-player li { + margin: 0; + padding: 0; + list-style-position: inside; } /* Artworks */ -.sc-player .sc-artwork-list{ - width: 50%; - height: 100%; - background-color: #transparent; - list-style-type: none; - position: relative; +.sc-artwork-list { + width: 50%; + height: 100%; + list-style-type: none; + position: relative; } -.sc-player .sc-artwork-list li{ - list-style-type: none; - display: none; +.sc-artwork-list li { + list-style-type: none; + display: none; } -.sc-player .sc-artwork-list li.active{ - list-style-type: none; - display: block; +.sc-artwork-list li.active { + list-style-type: none; + display: block; } -.sc-player .sc-artwork-list li img, .sc-player .sc-artwork-list li div{ - list-style-type: none; - width: 100%; - height: 100%; +.sc-artwork-list img { + list-style-type: none; + width: 100%; + height: 100%; } .sc-no-artwork { - display: none; + display: none; } /* controls */ -.sc-player .sc-controls{ - position: absolute; - z-index: 800; - width: 50px; - height: 50px; - margin-left: -25px; - margin-top: -25px; - top: 50%; - left: 25%; +.sc-controls { + position: absolute; + z-index: 800; + width: 50px; + height: 50px; + margin-left: -25px; + margin-top: -25px; + top: 50%; + left: 25%; } -.sc-player .sc-controls a{ - display: block; - width: 50px; - height: 50px; +.sc-controls a { + display: block; + width: 50px; + height: 50px; + border-radius: 100%; } -.sc-player .sc-controls a.sc-pause{ - display: none; +.sc-pause { + display: none; } -.sc-player.playing .sc-controls a.sc-play{ - display: none; +.playing .sc-play { + display: none; } -.sc-player.playing .sc-controls a.sc-pause{ - display: block; +.playing .sc-controls .sc-pause { + display: block; } - - /* scrubber */ .sc-scrubber { - position: absolute; - left: 10px; - bottom: 10px; - height: 40px; - width: 250px; - -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.30); - -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.30); - display: block; - z-index: 600; + position: absolute; + left: 10px; + bottom: 10px; + height: 40px; + width: 250px; + box-shadow: 1px 1px 4px rgba(0,0,0,0.30); + display: block; + z-index: 600; } -.sc-scrubber .sc-time-span{ - height: 30px; - margin: 5px; - position: relative; +.sc-time-span { + height: 30px; + margin: 5px; + position: relative; } -.sc-scrubber .sc-buffer, .sc-scrubber .sc-played{ - height: 30px; - position: absolute; - top: 0; +.sc-buffer, .sc-played { + height: 30px; + position: absolute; + top: 0; } -.sc-track-duration { - text-align: right; - float: right; - padding: 0 5px; - margin-left: 5px; -} -.sc-scrubber .sc-time-indicators{ - position: absolute; - right: 0; - top: -30px; +.sc-time-indicators { + position: absolute; + right: 0; + top: -30px; } /* tracks */ /* Track listings*/ -.sc-player ol.sc-trackslist { - position: absolute; - float: left; - width: 50%; - height: 260px; - top: 5px; - left: 50%; - overflow: auto; +.sc-trackslist { + position: absolute; + width: 50%; + height: 260px; + top: 5px; + left: 50%; + overflow: auto; } -.sc-player ol.sc-trackslist li{ - cursor: pointer; - margin: 1px 5px; - padding: 3px 30px 3px 5px; - position: relative; +.sc-trackslist li { + cursor: pointer; + margin: 1px 5px; + padding: 3px 30px 3px 5px; + position: relative; } -.sc-player ol.sc-trackslist li span { - position: absolute; - right: 0; - top: 3px; +.sc-track-duration { + text-align: right; + padding: 0 5px; + margin-left: 5px; + position: absolute; + right: 0; + top: 3px; } /* Track info*/ -.sc-player .sc-info{ - position: absolute; - top: 10px; - left: -5000px; - width : 400px; - padding: 5px; - height: 200px; - z-index: 500; - margin-left: -200px; +.sc-info { + position: absolute; + top: 0px; + width: 260px; + height: 260px; + padding: 5px; + z-index: 999; + overflow: auto; + opacity: 0.9; } -.sc-player .sc-info.active{ - left: 50%; - top: 12%; +.sc-info-toggle { + position: absolute; + top: 10px; + left: 10px; } - -.sc-player .sc-info-toggle{ - position: absolute; - top: 10px; - left: 10px; +.sc-info-close { + position: absolute; + top: 10px; + right: 10px; } -.sc-player .sc-info-toggle.active{ - left: -5000px; +.sc-info, .sc-info-toggle.active { + visibility: hidden; } -.sc-player .sc-info-close{ - position: absolute; - top: 10px; - right: 20px; +.sc-info.active { + visibility: visible; } /* volume control */ + .sc-volume-slider { - top: -25px; - left: 0px; - position: absolute; - width: 110px; - height: 12px; - background-color: white; + top: -25px; + position: absolute; + width: 110px; + height: 12px; + background-color: white; } -.sc-volume-slider .sc-volume-status{ - position: absolute; - width: 0%; - height: 10px; - top: 1px; - left: 1px; + +.sc-volume-slider .sc-volume-status { + position: absolute; + width: 0%; + height: 10px; + top: 1px; + left: 1px; } /* utilities */ .sc-player .hidden { - display: none; + display: none; } -.sc-player-engine-container{ - width: 1px; - height: 1px; - position: fixed; - top: 2px; - left: 2px; +.sc-player-engine-container { + width: 1px; + height: 1px; + position: fixed; + top: 2px; + left: 2px; } - - diff --git a/css/sc-player-standard/structure-vertical.css b/css/sc-player-standard/structure-vertical.css index 4aa70f7..d5a2b42 100755 --- a/css/sc-player-standard/structure-vertical.css +++ b/css/sc-player-standard/structure-vertical.css @@ -1,190 +1,198 @@ -.sc-player{ - width: 270px; - height: 540px; - position: relative; - margin-bottom: 20px; +.sc-player { + width: 270px; + height: 540px; + position: relative; + margin-bottom: 20px; + margin: 5px; } -.sc-player ol, .sc-player li{ - margin: 0; - padding: 0; - list-style-position: inside; +.sc-player ol, .sc-player li { + margin: 0; + padding: 0; + list-style-position: inside; } /* Artworks */ -.sc-player .sc-artwork-list{ - width: 100%; - height: 50%; - background-color: #transparent; - list-style-type: none; - position: relative; +.sc-artwork-list { + width: 100%; + height: 50%; + list-style-type: none; + position: relative; } -.sc-player .sc-artwork-list li{ - list-style-type: none; - display: none; +.sc-artwork-list li { + list-style-type: none; + display: none; } -.sc-player .sc-artwork-list li.active{ - list-style-type: none; - display: block; +.sc-artwork-list li.active { + list-style-type: none; + display: block; } -.sc-player .sc-artwork-list li img, .sc-player .sc-artwork-list li div{ - list-style-type: none; - width: 100%; - height: 100%; +.sc-artwork-list li img { + list-style-type: none; + width: 100%; + height: 100%; +} + +.sc-no-artwork { + display: none; } /* controls */ -.sc-player .sc-controls{ - position: absolute; - width: 50px; - height: 50px; - margin-left: -25px; - margin-top: -25px; - top: 25%; - left: 50%; +.sc-controls { + position: absolute; + width: 50px; + height: 50px; + margin-left: -25px; + margin-top: -25px; + top: 25%; + left: 50%; } -.sc-player .sc-controls a{ - display: block; - width: 50px; - height: 50px; +.sc-controls a { + display: block; + width: 50px; + height: 50px; } -.sc-player .sc-controls a.sc-pause{ - display: none; +.sc-pause { + display: none; } -.sc-player.playing .sc-controls a.sc-play{ - display: none; +.playing .sc-play { + display: none; } -.sc-player.playing .sc-controls a.sc-pause{ - display: block; +.playing .sc-controls .sc-pause { + display: block; } /* scrubber */ .sc-scrubber { - position: absolute; - left: -5000px; - bottom: 280px; - height: 40px; - width: 250px; + position: absolute; + visibility: hidden; + bottom: 280px; + height: 40px; + width: 250px; } .sc-player:hover .sc-scrubber { - display: block; - left: 10px; + display: block; + left: 10px; + visibility: visible; } -.sc-scrubber .sc-time-span{ - height: 30px; - margin: 5px; - position: relative; +.sc-time-span { + height: 30px; + margin: 5px; + position: relative; } -.sc-scrubber .sc-buffer, .sc-scrubber .sc-played{ - height: 30px; - position: absolute; - top: 0; +.sc-buffer, .sc-played { + height: 30px; + position: absolute; + top: 0; } -.sc-scrubber .sc-time-indicators{ - position: absolute; - right: 0; - top: -30px; +.sc-time-indicators { + position: absolute; + right: 0; + top: -30px; } /* volume control */ + .sc-volume-slider { - top: -25px; - left: 0px; - position: absolute; - width: 110px; - height: 12px; - background-color: white; -} -.sc-volume-slider .sc-volume-status{ - position: absolute; - width: 0%; - height: 10px; - top: 1px; - left: 1px; + top: -25px; + left: 0px; + position: absolute; + width: 110px; + height: 12px; + background-color: white; } +.sc-volume-slider .sc-volume-status { + position: absolute; + width: 0%; + height: 10px; + top: 1px; + left: 1px; +} /* tracks */ /* Track listings*/ -.sc-player ol.sc-trackslist{ - position: absolute; - float: left; - width: 100%; - height: 50%; - top: 50%; - left: 0; - overflow: auto; +.sc-trackslist { + position: absolute; + width: 100%; + height: 50%; + top: 50%; + left: 0; + overflow: auto; +} + +.sc-trackslist li { + cursor: pointer; + margin: 5px; + padding: 3px 30px 3px 5px; + position: relative; } -.sc-player ol.sc-trackslist li{ - float: left; - width: 92%; - cursor: pointer; - margin: 5px; - padding: 5px; +.sc-track-duration { + position: absolute; + right: 0; + top: 3px; } /* Track info*/ -.sc-player .sc-info{ - position: absolute; - top: 10px; - left: -5000px; - width : 400px; - padding: 5px; - height: 200px; - z-index: 500; - margin-left: -200px; +.sc-info { + position: absolute; + top: 0px; + width: 260px; + height: 260px; + padding: 5px; + z-index: 999; + overflow: auto; + opacity: 0.9; } -.sc-player .sc-info.active{ - left: 50%; - top: 12%; +.sc-info-toggle { + position: absolute; + top: 10px; + left: 10px; } - -.sc-player .sc-info-toggle{ - position: absolute; - top: 10px; - left: 10px; +.sc-info-close { + position: absolute; + top: 10px; + right: 20px; } -.sc-player .sc-info-toggle.active{ - left: -5000px; +.sc-info, .sc-info-toggle.active { + visibility: hidden; } -.sc-player .sc-info-close{ - position: absolute; - top: 10px; - right: 20px; +.sc-info.active { + visibility: visible; } /* utilities */ .sc-player .hidden { - display: none; + display: none; } -.sc-player-engine-container{ - width: 1px; - height: 1px; - position: fixed; - top: 2px; - left: 2px; +.sc-player-engine-container { + width: 1px; + height: 1px; + position: fixed; + top: 2px; + left: 2px; }
OpenA
commented
10 years ago OpenA
commented
10 years ago