soundcloud-custom-player-rails 1.0.0

data/vendor/assets/stylesheets/sc-player-red/standards.css

@@ -0,0 +1,32 @@
+body {
+  font-family: 'arial', helvetica, sans serif;
+  width: 100%;
+  margin: 0;
+  background: red;
+  color: #fff;
+}
+
+h1 {
+  border-bottom: 1px dashed #fff;
+  padding: 20px 0;
+ -webkit-transform: rotate(9deg);
+ -moz-transform: rotate(9deg);
+ transform: rotate(9deg);
+}
+
+h2 {
+  background:#fff;
+  color: red;
+  padding: 5px;
+  font-size: 0.8em;
+}
+
+.footer {
+  background:#fff;
+  border-top: 1px dashed #fff;
+  padding: 10px 0;
+  text-align: right;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}

data/vendor/assets/stylesheets/sc-player-red/structure.css

@@ -0,0 +1,171 @@
+.wrapper{
+  width: 800px;
+  margin: 0 auto;
+}
+.sc-player{
+  width: 800px;
+  height: 250px;
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.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;
+  display: none;
+}
+
+.sc-player .sc-artwork-list li{
+  list-style-type: none;
+  display: none;
+}
+
+.sc-player .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: 380px;
+  height: 380px;
+  float: left;
+  margin: 5px 0;
+}
+
+/* controls */
+
+.sc-player .sc-controls{
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  top: 30px;
+  left: 0;
+  z-index: 5000;
+}
+
+.sc-player .sc-controls a{
+  display: block;
+  width: 22px;
+  height: 22px;
+}
+
+.sc-player .sc-controls a.sc-pause{
+  display: none;
+}
+
+.sc-player.playing .sc-controls a.sc-play{
+  display: none;
+}
+
+.sc-player.playing .sc-controls a.sc-pause{
+  display: block;
+}
+
+/* scrubber */
+
+.sc-scrubber {
+  position: absolute;
+  top: 0px;
+  height: 80px;
+  width: 800px;
+}
+
+.sc-scrubber .sc-time-span{
+  height: 80px;
+  position: relative;
+}
+
+.sc-scrubber .sc-buffer, .sc-scrubber .sc-played{
+  height: 80px;
+  position: absolute;
+  top: 0;
+}
+
+.sc-scrubber .sc-time-indicators{
+  position: absolute;
+  right: 0;
+  top: 30px;
+}
+
+/* tracks */
+
+/* Track listings*/
+
+.sc-player ol.sc-trackslist{
+  position: absolute;
+  float: left;
+  width: 100%;
+  height: 50%;
+  top: 90px;
+}
+
+.sc-player ol.sc-trackslist li{
+  float: left;
+  width: 390px;
+  cursor: pointer;
+  margin: 5px 0;
+  padding: 5px 0;
+  list-style: none;
+}
+
+/* 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-player .sc-info.active{
+  left: 50%;
+  top: 12%;
+}
+
+
+.sc-player .sc-info-toggle{
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  display: none;
+}
+
+.sc-player .sc-info-toggle.active{
+  left: -5000px;
+}
+
+.sc-player .sc-info-close{
+  position: absolute;
+  top: 10px;
+  right: 20px;
+}
+
+/* utilities */
+
+.sc-player .hidden {
+  display: none;
+}
+
+.sc-player-engine-container{
+  width: 1px;
+  height: 1px;
+  position: fixed;
+  top: 2px;
+  left: 2px;
+}

data/vendor/assets/stylesheets/sc-player-standard/colors-blue.css

@@ -0,0 +1,299 @@
+.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;
+}
+
+/* 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));
+}
+
+/* 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('sc-player-standard/play-blue.png');
+}
+
+.sc-player .sc-controls a:hover {
+  background: url('sc-player-standard/play-blue-hover.png');
+}
+
+.sc-player .sc-controls a.sc-pause {
+  background: url('sc-player-standard/play-blue.png');
+}
+
+.sc-player .sc-controls a.sc-pause:hover{
+  background: url('sc-player-standard/play-blue-hover.png');
+}
+
+.sc-player.playing .sc-controls a.sc-pause{
+  background: url('sc-player-standard/pause-blue.png');
+}
+
+.sc-player.playing .sc-controls a.sc-pause:hover{
+  background: url('sc-player-standard/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;
+}
+
+/* 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-player ol.sc-trackslist li.active a {
+  color: #003399;
+}
+
+.sc-track-duration {
+  text-align: right;
+  float: 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 sc-player-standard {
+  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('sc-player-standard/play-blue.png');
+}
+
+.sc-player .sc-controls a:hover {
+  background: url('sc-player-standard/play-blue-hover.png');
+}
+
+.sc-player .sc-controls a.sc-pause {
+  background: url('sc-player-standard/play-blue.png');
+}
+
+.sc-player .sc-controls a.sc-pause:hover{
+  background: url('sc-player-standard/play-blue-hover.png');
+}
+
+.sc-player.playing .sc-controls a.sc-pause{
+  background: url('sc-player-standard/pause-blue.png');
+}
+
+.sc-player.playing .sc-controls a.sc-pause:hover{
+  background: url('sc-player-standard/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;
+}
+
+/* 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-player ol.sc-trackslist li.active a {
+  color: #003399;
+}
+
+.sc-track-duration {
+  text-align: right;
+  float: 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-volume-slider {
+  background-color: #e5e5e5;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+}
+
+
+.sc-volume-slider .sc-volume-status{
+  background-color: #666;
+  border-right: 1px solid #003399;
+}
+