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;
}
