Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Create flash view

  • Loading branch information...
commit eee2be83116ffa95878a0b4b3e46cd5ed16c523e 1 parent 803d63c
@Breefield authored
View
1  .gitignore
@@ -0,0 +1 @@
+.DS*
View
3  css/sc-player-flash.css
@@ -0,0 +1,3 @@
+@import url("sc-player-flash/standards.css");
+@import url("sc-player-flash/structure-horizontal.css"); /* switch here between 'horizontal' and 'vertical' structure */
+@import url("sc-player-flash/colors-green.css"); /* switch here between 'blue', 'orange' and 'green' color-shemes */
View
299 css/sc-player-flash/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('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;
+}
+
+/* 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 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;
+}
+
+/* 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;
+}
+
View
167 css/sc-player-flash/colors-green.css
@@ -0,0 +1,167 @@
+.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;
+}
+
+.sc-player a {
+ 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));
+}
+
+/* scrubber */
+
+.sc-scrubber {
+ background-color: #e5e5e5;
+ -moz-border-radius: 2px;
+ -webkit-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-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-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-scrubber .sc-buffer, .sc-scrubber .sc-played {
+ background-color: #333;
+ z-index: 1;
+ position: absolute;
+}
+
+.sc-scrubber .sc-played {
+ background-color: #22B573;
+ z-index: 799;
+}
+
+/* controls */
+
+.sc-player .sc-controls a {
+ color: transparent;
+ background: url('../../css/sc-player-flash/img/play-green.png');
+}
+
+.sc-player .sc-controls a:hover {
+ background: url('../../css/sc-player-flash/img/play-green-hover.png');
+}
+
+.sc-player .sc-controls a.sc-pause {
+ background: url('../../css/sc-player-flash/img/play-green.png');
+}
+
+.sc-player .sc-controls a.sc-pause:hover{
+ background: url('../../css/sc-player-flash/img/play-green-hover.png');
+}
+
+.sc-player.playing .sc-controls a.sc-pause{
+ background: url('../../css/sc-player-flash/img/pause-green.png');
+}
+
+.sc-player.playing .sc-controls a.sc-pause:hover{
+ background: url('../../css/sc-player-flash/img/pause-green-hover.png');
+}
+
+.sc-scrubber .sc-time-indicators{
+ background: #22B573;
+ color: #fff;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ padding: 4px;
+}
+
+/* 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-player ol.sc-trackslist li:hover {
+ background: #22B573;
+}
+
+.sc-player ol.sc-trackslist li.active{
+ background: #22B573;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+}
+
+.sc-player ol.sc-trackslist li.active a {
+ color: #fff;
+}
+
+
+
+/* Track info*/
+
+.sc-player .sc-info{
+ background: #333;
+ opacity: 0.9;
+ color: #fff;
+}
+
+.sc-player .sc-info a {
+ color: #fff;
+}
+
+.sc-player .sc-info-toggle{
+ background: #22B573;
+ color: #fff;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ padding: 4px;
+}
+
+.sc-player .sc-info-toggle:hover{
+ background: #333;
+ color: #fff;
+}
+
+.sc-player .sc-info-close{
+ background: #22B573;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ padding: 2px 4px;
+ font-weight: bold;
+}
View
165 css/sc-player-flash/colors-orange.css
@@ -0,0 +1,165 @@
+.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;
+}
+
+.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, #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-scrubber .sc-played {
+ background-color: #333;
+ opacity: 0.4;
+}
+
+/* controls */
+
+.sc-player .sc-controls a {
+ color: transparent;
+ background: url('../../css/sc-player-flash/img/play-orange.png');
+}
+
+.sc-player .sc-controls a:hover {
+ background: url('../../css/sc-player-flash/img/play-orange-hover.png');
+}
+
+.sc-player .sc-controls a.sc-pause {
+ background: url('../../css/sc-player-flash/img/play-orange.png');
+}
+
+.sc-player .sc-controls a.sc-pause:hover{
+ background: url('../../css/sc-player-flash/img/play-orange-hover.png');
+}
+
+.sc-player.playing .sc-controls a.sc-pause{
+ background: url('../../css/sc-player-flash/img/pause-orange.png');
+}
+
+.sc-player.playing .sc-controls a.sc-pause:hover{
+ background: url('../../css/sc-player-flash/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;
+}
+
+/* Track listings*/
+
+.sc-player ol.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-player ol.sc-trackslist li:hover {
+ background-color: #f6a400;
+}
+
+.sc-player ol.sc-trackslist li.active a {
+ color: #fff;
+}
+
+.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: #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-player .sc-info-toggle:hover{
+ background: #fff;
+ color: #e74c14;
+}
+
+.sc-player .sc-info-close{
+ background: #f6a400;
+ 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 #f6a400;
+}
+
View
BIN  css/sc-player-flash/img/pause-blue-hover.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/sc-player-flash/img/pause-blue.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/sc-player-flash/img/pause-green-hover.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/sc-player-flash/img/pause-green.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/sc-player-flash/img/pause-orange-hover.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/sc-player-flash/img/pause-orange.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/sc-player-flash/img/play-blue-hover.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/sc-player-flash/img/play-blue.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/sc-player-flash/img/play-green-hover.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/sc-player-flash/img/play-green.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/sc-player-flash/img/play-orange-hover.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/sc-player-flash/img/play-orange.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
33 css/sc-player-flash/standards.css
@@ -0,0 +1,33 @@
+body {
+ font-family: 'Courier', Courier New, monospace;
+ width: 800px;
+ margin-left: 50px;
+ color: #333;
+}
+
+h1 {
+ border-bottom: 1px dotted #000;
+ padding: 20px 0;
+}
+
+.post {
+width: 540px;
+float: left;
+}
+
+.sidebar {
+float: right;
+width: 200px;
+padding-left: 10px;
+padding-bottom: 20px;
+margin-right: 10px;
+border-left: 1px dotted #000;
+}
+
+.footer {
+ float: left;
+ width: 800px;
+ border-top: 1px dotted #000;
+ padding: 10px 0;
+ text-align: right;
+}
View
212 css/sc-player-flash/structure-horizontal.css
@@ -0,0 +1,212 @@
+
+.sc-player {
+ width: 540px;
+ height: 270px;
+ 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: 50%;
+ height: 100%;
+ background-color: #transparent;
+ list-style-type: none;
+ position: relative;
+}
+
+.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: 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: 50%;
+ left: 25%;
+}
+
+.sc-player .sc-controls a{
+ display: block;
+ width: 50px;
+ height: 50px;
+}
+
+.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;
+ 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: none;
+}
+
+.sc-player:hover .sc-scrubber {
+ display: block;
+ left: 10px;
+}
+
+.sc-scrubber .sc-time-span{
+ height: 30px;
+ margin: 5px;
+ position: relative;
+}
+
+.sc-scrubber .sc-buffer, .sc-scrubber .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;
+}
+
+/* tracks */
+
+/* Track listings*/
+
+.sc-player ol.sc-trackslist {
+ position: absolute;
+ float: left;
+ 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-player ol.sc-trackslist li span {
+ 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-player .sc-info.active{
+ left: 50%;
+ top: 12%;
+}
+
+
+.sc-player .sc-info-toggle{
+ position: absolute;
+ top: 10px;
+ left: 10px;
+}
+
+.sc-player .sc-info-toggle.active{
+ left: -5000px;
+}
+
+.sc-player .sc-info-close{
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+
+/* 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;
+}
+
+/* utilities */
+
+.sc-player .hidden {
+ display: none;
+}
+
+.sc-player-engine-container{
+ width: 1px;
+ height: 1px;
+ position: fixed;
+ top: 2px;
+ left: 2px;
+}
+
+
View
190 css/sc-player-flash/structure-vertical.css
@@ -0,0 +1,190 @@
+.sc-player{
+ width: 270px;
+ height: 540px;
+ 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;
+}
+
+.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: 100%;
+ height: 100%;
+}
+
+/* controls */
+
+.sc-player .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-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;
+ left: -5000px;
+ bottom: 280px;
+ height: 40px;
+ width: 250px;
+}
+
+.sc-player:hover .sc-scrubber {
+ display: block;
+ left: 10px;
+}
+
+.sc-scrubber .sc-time-span{
+ height: 30px;
+ margin: 5px;
+ position: relative;
+}
+
+.sc-scrubber .sc-buffer, .sc-scrubber .sc-played{
+ height: 30px;
+ position: absolute;
+ top: 0;
+}
+
+.sc-scrubber .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;
+}
+
+
+/* tracks */
+
+/* Track listings*/
+
+.sc-player ol.sc-trackslist{
+ position: absolute;
+ float: left;
+ width: 100%;
+ height: 50%;
+ top: 50%;
+ left: 0;
+ overflow: auto;
+}
+
+.sc-player ol.sc-trackslist li{
+ float: left;
+ width: 92%;
+ cursor: pointer;
+ margin: 5px;
+ padding: 5px;
+}
+
+/* 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;
+}
+
+.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;
+}
View
51 examples/sc-player-flash.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+
+ <head>
+
+ <title>SC player example: Standard Skin</title>
+ <link rel="stylesheet" href="../css/sc-player-flash.css" type="text/css">
+
+ </head>
+
+ <body>
+
+ <h1>The Directory</h1>
+
+ <div class="post">
+
+ <h2>March 10</h2>
+
+ <a href="http://soundcloud.com/matas" class="sc-player">Matas tracks</a>
+
+ <h2>February 10</h2>
+
+ <div class="sc-player">
+ <a href="http://soundcloud.com/matas/matas-petrikas-live-at-gravity-club-30-05-2008">My live track</a>
+ <a href="http://soundcloud.com/matas/goldfrapp-little-bird-matas-ornitologic-remix">Goldfrapp</a>
+ <a href="http://soundcloud.com/matas/on-the-bridge">On the bridge</a>
+ </div>
+
+ <h2>January 10</h2>
+
+ <a href="http://soundcloud.com/forss/sets/soulhack" class="sc-player">Soulhack</a>
+
+ </div>
+
+ <div class="sidebar">
+ <h2>Contact</h2>
+ <p>are you want to get listed?</p>
+ <p>mail@thedirectory.us</p>
+ </div>
+
+ <div class="footer">
+ 2010
+ </div>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+ <script type="text/javascript" src="../js/soundcloud.player.api.js"></script>
+ <script type="text/javascript" src="../js/sc-player.js"></script>
+ </body>
+
+ </html>
View
1  index.html
@@ -11,6 +11,7 @@
<h1>SoundCloud Custom Player Skins</h1>
<ul>
<li><a href="examples/sc-player-standard.html" title="sc-player-standard">Standard</a></li>
+ <li><a href="examples/sc-player-standard.html" title="sc-player-flash">Flash</a></li>
<li><a href="examples/sc-player-artwork.html" title="sc-player-artwork">Artwork</a></li>
<li><a href="examples/sc-player-minimal.html" title="sc-player-minimal">Minimal</a></li>
<li><a href="examples/sc-player-red.html" title="sc-player-red">Red</a></li>
Please sign in to comment.
Something went wrong with that request. Please try again.