diff --git a/css/sc-player-standard.css b/css/sc-player-standard.css index 315fbda..be7f043 100755 --- a/css/sc-player-standard.css +++ b/css/sc-player-standard.css @@ -1,3 +1,3 @@ @import url("sc-player-standard/standards.css"); -@import url("sc-player-standard/structure-horizontal.css"); /* switch here between 'horizontal' and 'vertical' structure */ +@import url("structure.css"); /* switch here between 'horizontal' and 'vertical' structure */ @import url("sc-player-standard/colors-green.css"); /* switch here between 'blue', 'orange' and 'green' color-shemes */ \ No newline at end of file diff --git a/css/sc-player-standard/structure-horizontal.css b/css/sc-player-standard/structure-horizontal.css index 1c09a22..ff386c8 100755 --- a/css/sc-player-standard/structure-horizontal.css +++ b/css/sc-player-standard/structure-horizontal.css @@ -17,7 +17,7 @@ .sc-player .sc-artwork-list{ width: 50%; height: 100%; - background-color: #transparent; + background-color: transparent; list-style-type: none; position: relative; } diff --git a/css/sc-player-standard/structure-vertical.css b/css/sc-player-standard/structure-vertical.css index 4aa70f7..5de34e4 100755 --- a/css/sc-player-standard/structure-vertical.css +++ b/css/sc-player-standard/structure-vertical.css @@ -16,7 +16,7 @@ .sc-player .sc-artwork-list{ width: 100%; height: 50%; - background-color: #transparent; + background-color: transparent; list-style-type: none; position: relative; } diff --git a/css/structure.css b/css/structure.css new file mode 100644 index 0000000..a9a7d57 --- /dev/null +++ b/css/structure.css @@ -0,0 +1 @@ +.sc-player{width:100%;height:20em;position:relative;margin:1em 0}.sc-player ol,.sc-player li{margin:0;padding:0;list-style-position:inside}.sc-player .sc-artwork-list{width:50%;height:100%;position:relative;float:left}.sc-player .sc-artwork-list li{list-style-type:none;display:none}.sc-player .sc-artwork-list li img,.sc-player .sc-artwork-list li div{list-style-type:none;width:100%;height:100%}.sc-player .sc-artwork-list li.active{list-style-type:none;display:block}.sc-player .sc-controls{position:absolute;width:50px;height:50px;top:25%;left:25%;margin-left:-2em;margin-top:2em}.sc-player .sc-controls a{display:block;width:50px;height:50px}.sc-player .sc-controls a.sc-play{text-indent:-3000px}.sc-player .sc-controls a.sc-pause{text-indent:-3000px;display:none}.sc-player ol.sc-trackslist{float:left;width:50%;height:20em;left:50%;overflow:auto}.sc-player ol.sc-trackslist li{float:left;width:95.5%;cursor:pointer;margin:.25em;padding:.25em;list-style:none}.sc-player .sc-info{position:absolute;top:.5em;left:-5000px;width:96%;padding:.25em;height:80%;z-index:500;margin:0 2em 0 0}.sc-player .sc-info.active{left:25%;top:5%}.sc-player .sc-info-toggle{position:absolute;top:.5em;left:.5em;display:none}.sc-player .sc-info-toggle.active{left:-5000px}.sc-player .sc-info-close{position:absolute;top:.5em;right:.5em}.sc-player .hidden{display:none}.sc-player.playing .sc-controls a.sc-play{display:none}.sc-player.playing .sc-controls a.sc-pause{display:block}.sc-scrubber{position:absolute;bottom:0;height:25%;width:50%}.sc-scrubber .sc-buffer,.sc-scrubber .sc-played{height:25%;position:absolute;top:0;width:0;-webkit-transition:"width 0.1s linear";-moz-transition:"width 0.1s linear";-ms-transition:"width 0.1s linear";-o-transition:"width 0.1s linear";transition:"width 0.1s linear"}.sc-scrubber .sc-time-span{height:2em;margin:.25em;position:relative}.sc-scrubber .sc-time-indicators{position:absolute;right:0;top:-1em}.sc-player:hover .sc-scrubber,.sc-player.playing .sc-scrubber{display:block;left:2em}.sc-player-engine-container{width:1px;height:1px;position:fixed;top:2px;left:2px} \ No newline at end of file diff --git a/examples/sc-player-standard.html b/examples/sc-player-standard.html index 3b0e375..4827d23 100755 --- a/examples/sc-player-standard.html +++ b/examples/sc-player-standard.html @@ -1,51 +1,53 @@ + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - - - - SC player example: Standard Skin - - - - - - -

The Directory

- -
- -

March 10

- - Matas tracks - -

February 10

- -
- My live track - Goldfrapp - On the bridge -
- -

January 10

- - Soulhack - -
- -
-

Contact

-

are you want to get listed?

-

mail@thedirectory.us

-
- -
- 2010 -
- - - - - - - \ No newline at end of file + + + + SC player example: Standard Skin + + + + + + +

The Directory

+ +
+ +

March 10

+ + Matas tracks + +

February 10

+ +
+ My live track + Goldfrapp + On the bridge +
+ +

January 10

+ + Soulhack + +
+ +
+

Contact

+ +

are you want to get listed?

+ +

mail@thedirectory.us

+
+ +
+ 2010 +
+ + + + + + + \ No newline at end of file diff --git a/less/base.less b/less/base.less new file mode 100644 index 0000000..814a323 --- /dev/null +++ b/less/base.less @@ -0,0 +1,159 @@ +/*------------------------------------------------------------------------------------------------------------------------ + Author: Sean Goresht + www: http://seangoresht.com/ + github: https://github.com/srsgores + twitter: http://twitter.com/S.Goresht + + Licensed under the GNU Public License + + ============================================================================= + Filename: base + ============================================================================= + Contains base styles for soundcloud player. Customizable via variables.less. +--------------------------------------------------------------------------------------------------------------------- */ +@import "variables"; +@import "mixins"; + +.sc-player { + width: @soundCloudPlayerWidth; + height: @soundCloudPlayerHeight; + position: relative; + margin: @soundCloudVerticalMargin 0; + ol, li { + margin: 0; + padding: 0; + list-style-position: inside; + } + .sc-artwork-list { + width: @soundCloudArtworkListWidth; + height: @soundCloudArtworkListHeight; + position: relative; + float: left; + li { + list-style-type: none; + display: none; + img, div { + list-style-type: none; + width: 100%; + height: 100%; + } + } + li.active { + list-style-type: none; + display: block; + } + } + .sc-controls { + position: absolute; + width: @soundCloudControlWidth; + height: @soundCloudControlHeight; + top: @soundCloudControlTopSpacing; + left: @soundCloudControlLeftSpacing; + margin-left: @soundCloudControlMarginLeft; + margin-top: @soundCloudControlMarginTop; + a { + display: block; + width: @soundCloudControlWidth; + height: @soundCloudControlHeight; + &.sc-play { + text-indent: -3000px; + } + &.sc-pause { + text-indent: -3000px; + display: none; + } + } + } + ol.sc-trackslist { + float: left; + width: @soundCloudTrackListWidth; + height: @soundCloudTrackListHeight; + left: @soundCloudTrackListLeftSpacing; + overflow: auto; + li { + float: left; + width: @soundCloudTrackListTrackWidth; + cursor: pointer; + margin: @soundCloudTrackListTrackMargin; + padding: @soundCloudTrackListTrackPadding; + list-style: none; + } + } + .sc-info { + position: absolute; + top: @soundCloudInfoPanelTopSpacing; + left: -5000px; + width: @soundCloudInfoPanelWidth; + padding: @soundCloudInfoPanelPadding; + height: @soundCloudInfoPanelHeight; + z-index: 500; + margin: @soundCloudInfoPanelMargin; + &.active { + left: 25%; + top: 5%; + } + } + .sc-info-toggle { + position: absolute; + top: @soundCloudInfoPanelToggleTopSpacing; + left: @soundCloudInfoPanelToggleLeftSpacing; + display: none; + } + .sc-info-toggle.active { + left: -5000px; + } + .sc-info-close { + position: absolute; + top: @soundCloudInfoPanelCloseTopSpacing; + right: @soundCloudInfoPanelCloseRightSpacing; + } + .hidden { + display: none; + } +} + +.sc-player.playing .sc-controls a.sc-play { + display: none; +} + +.sc-player.playing .sc-controls a.sc-pause { + display: block; +} + +.sc-scrubber { + position: absolute; + //left: -5000px; + bottom: @soundCloudScrubberBottomSpacing; + height: @soundCloudScrubberHeight; + width: @soundCloudScrubberWidth; + .sc-buffer, .sc-played { + height: @soundCloudScrubberPlayingHeight; + position: absolute; + top: 0; + width: 0; + .transition(@soundCloudScrubberPlayingTransition); + } + .sc-time-span { + height: @soundCloudScrubberTimeSpanHeight; + margin: @soundCloudScrubberTimeSpanMargin; + position: relative; + } + .sc-time-indicators { + position: absolute; + right: @soundCloudScrubberTimeIndicatorRightSpacing; + top: @soundCloudScrubberTimeIndicatorTopSpacing; + } +} + +.sc-player:hover .sc-scrubber, .sc-player.playing .sc-scrubber { + display: block; + left: @soundCloudPlayerHoverLeftSpacing; +} + +.sc-player-engine-container { + width: 1px; + height: 1px; + position: fixed; + top: 2px; + left: 2px; +} diff --git a/less/mixins.less b/less/mixins.less new file mode 100644 index 0000000..ccdcfa0 --- /dev/null +++ b/less/mixins.less @@ -0,0 +1,56 @@ +/*------------------------------------------------------------------------------------------------------------------------ + Author: Sean Goresht + www: http://seangoresht.com/ + github: https://github.com/srsgores + twitter: http://twitter.com/S.Goresht + + Licensed under the GNU Public License + + ============================================================================= + Filename: mixins + ============================================================================= + +--------------------------------------------------------------------------------------------------------------------- */ + +/* ============================================================================= +Sitewide mixins +========================================================================== */ + +// Transitions +.transition(@transition) { + -webkit-transition: @transition; + -moz-transition: @transition; + -ms-transition: @transition; + -o-transition: @transition; + transition: @transition; +} + +#gradient { + .horizontal(@startColor: #555, @endColor: #333) { + background-color: @endColor; + background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ + background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor), argb(@endColor))); // IE9 and down + } + .vertical(@startColor: #555, @endColor: #333) { + background-color: @endColor; + background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 + background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor), argb(@endColor))); // IE9 and down + } +} + +.box-shadow(@arguments) { + -webkit-box-shadow: @arguments; // iOS <4.3 & Android <4.1 + -moz-box-shadow: @arguments; + -khtml-box-shadow: @arguments; + box-shadow: @arguments; +} diff --git a/less/structure.less b/less/structure.less new file mode 100644 index 0000000..02ff959 --- /dev/null +++ b/less/structure.less @@ -0,0 +1,16 @@ +/*------------------------------------------------------------------------------------------------------------------------ + Author: Sean Goresht + www: http://seangoresht.com/ + github: https://github.com/srsgores + twitter: http://twitter.com/S.Goresht + + Licensed under the GNU Public License + + ============================================================================= + Filename: structure + ============================================================================= + Contains structure for custom soundcloud player. +--------------------------------------------------------------------------------------------------------------------- */ +@import "variables"; +@import "mixins"; +@import "base"; \ No newline at end of file diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 0000000..7adcc7d --- /dev/null +++ b/less/variables.less @@ -0,0 +1,106 @@ +/*------------------------------------------------------------------------------------------------------------------------ + Author: Sean Goresht + www: http://seangoresht.com/ + github: https://github.com/srsgores + twitter: http://twitter.com/S.Goresht + + Licensed under the GNU Public License + + ============================================================================= + Filename: variables + ============================================================================= + +--------------------------------------------------------------------------------------------------------------------- */ + +/* ============================================================================= +Toggles for appearance +========================================================================== */ +@isHorizontal: True; //set to false to enable vertical player + +/* ============================================================================= +Sitewide variables +========================================================================== */ +@baseFontSize: 16px; +@em: 1em; + +@baseMargin: @em; +@marginLarge: (@baseMargin * 2); +@marginSmall: (@baseMargin / 2); +@marginMini: (@baseMargin / 4); + +@padding: @em; +@paddingSmall: (@padding / 2); +@paddingMini: (@padding / 4); + +@soundCloudPlayerHeight: 20em; +@soundCloudPlayerWidth: 100%; + +@soundCloudVerticalMargin: @baseMargin; +@soundCloudHorizontalMargin: 0; + + +/* -------------------------------------------------------- */ +/* Colours */ +@soundCloudThemePrimaryColour: #F6A400; +@soundCloudThemeSecondaryColour: #333333; +/* -------------------------------------------------------- */ + +/* Controls */ +@soundCloudControlWidth: 50px; +@soundCloudControlHeight: 50px; +@soundCloudControlMarginTop: @marginLarge; +@soundCloudControlMarginLeft: -@marginLarge; +@soundCloudControlLeftSpacing: 25%; +@soundCloudControlTopSpacing: 25%; +/* Track List */ +@soundCloudTrackListWidth: 50%; //something around 92% is usually ok :) +@soundCloudTrackListHeight: @soundCloudPlayerHeight; +@soundCloudTrackListLeftSpacing: 50%; +@soundCloudTrackListTrackWidth: (@soundCloudPlayerWidth - 4.5); //approx. 95.5% +@soundCloudTrackListTrackPadding: @paddingMini; +@soundCloudTrackListTrackMargin: @marginMini; + +/* Artwork List */ +@soundCloudArtworkListWidth: 50%; +@soundCloudArtworkListHeight: 100%; + +/* Info Panel */ +@soundCloudInfoPanelTopSpacing: @marginSmall; +@soundCloudInfoPanelWidth: 96%; +@soundCloudInfoPanelHeight: 80%; +@soundCloudInfoPanelMargin: 0 @marginLarge 0 0; +@soundCloudInfoPanelPadding: @paddingMini; +@soundCloudInfoPanelToggleTopSpacing: @marginSmall; +@soundCloudInfoPanelToggleLeftSpacing: @marginSmall; +@soundCloudInfoPanelCloseTopSpacing: @soundCloudInfoPanelTopSpacing; +@soundCloudInfoPanelCloseRightSpacing: @soundCloudInfoPanelToggleLeftSpacing; + +/* Scrubber */ +@soundCloudScrubberBottomSpacing: 0; +@soundCloudScrubberWidth: 50%; +@soundCloudScrubberHeight: @soundCloudControlTopSpacing; + +@soundCloudScrubberPlayingHeight: @soundCloudScrubberHeight; +@soundCloudScrubberPlayingTransition: "width 0.1s linear"; +@soundCloudScrubberTimeSpanMargin: @marginMini; +@soundCloudScrubberTimeSpanHeight: @marginLarge; +@soundCloudScrubberTimeIndicatorRightSpacing: 0; +@soundCloudScrubberTimeIndicatorTopSpacing: -@baseMargin; + +@soundCloudPlayerHoverLeftSpacing: (@soundCloudVerticalMargin + @baseMargin); + + +//initialize vertical/horizontal player +.soundcloudCustomizedPlayer(@isHorizontal) when (@isHorizontal = False) { + //vertical variables here + @soundCloudPlayerWidth: 16.875em; + @soundCloudPlayerHeight: 33.75em; + @soundCloudArtworkListWidth: 100%; + @soundCloudArtworkListHeight: 50%; + @soundCloudControlTopSpacing: 25%; + @soundCloudControlLeftSpacing: 50%; + +} +.soundcloudCustomizedPlayer(@isHorizontal); + +