This commit is contained in:
+1
@@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
@@ -0,0 +1,79 @@
|
||||
# SoundCloud Pure Player
|
||||
The project to rewrite [SoundCloud jQuery Player Plugin](https://github.com/soundcloud/soundcloud-custom-player) (© Matas Petrikas, MIT) on a pure js code.
|
||||
|
||||
Using example (add players automatically):
|
||||
```html
|
||||
<head>
|
||||
...
|
||||
<link rel="stylesheet" href="/css/sc-player-standard/structure-horizontal.css" type="text/css">
|
||||
<link rel="stylesheet" href="/css/sc-player-standard/colors-orange.css" type="text/css">
|
||||
<script type="text/javascript" src="/js/sc-player.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
...
|
||||
<!-- for each single link -->
|
||||
<a class="sc-player" href="https://soundcloud.com/mau5trap/deadmau5-feat-chris-james-the">The Veldt</a>
|
||||
<!-- or creating a Group -->
|
||||
<div class="sc-player">
|
||||
<a href="https://soundcloud.com/kike-digital/lost-in-las-vegas-two-steps">Lost In Las Vegas</a>
|
||||
<a href="https://soundcloud.com/will_rp/revelation">Revelation</a>
|
||||
<a href="https://soundcloud.com/overwerk/daybreak">Daybreak</a>
|
||||
</div>
|
||||
...
|
||||
</body>
|
||||
```
|
||||
|
||||
Manually adding:
|
||||
```javascript
|
||||
var links = document.querySelectorAll('a[href^="https://soundcloud.com/"]');
|
||||
|
||||
/* add players for each link */
|
||||
for ( var i = 0; i < links.length; i++ ) {
|
||||
links[i].parentNode.replaceChild(
|
||||
SCPurePlayer.create(links[i]), links[i]
|
||||
);
|
||||
}
|
||||
|
||||
/* or creating a Group */
|
||||
links[0].parentNode.insertBefore(
|
||||
SCPurePlayer.createGroup(links), links[0]
|
||||
);
|
||||
links.forEach(function(lnk) {
|
||||
lnk.remove();
|
||||
});
|
||||
```
|
||||
|
||||
Settings:
|
||||
```javascript
|
||||
var SC = {
|
||||
'API': new SoundCloudAPI,
|
||||
'Global': false, // {true: all players share common global params (volume), false: each player uses his own params (volume, timeline) }
|
||||
'Volume': 0.8, // default volume slider position (0.8 = 80%; 0.425 = 42.5%; 1 = 100%; 0.07 = 7%; etc.)
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
Event listeners:
|
||||
```javascript
|
||||
var link = document.querySelector('a[href^="https://soundcloud.com/"]'),
|
||||
player = SCPurePlayer.create(link); //-> return custom player element
|
||||
|
||||
// possible media event type: ['play', 'pause', 'ended', 'timeupdate', 'volumechange', 'seeking', 'seeked', 'error']
|
||||
player.addEventListener('play', function(event) {
|
||||
/*
|
||||
the event argument[0] is a CustomEvent object https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
|
||||
who includes 'detail' property with two custom keys:
|
||||
device: { just audio element backend },
|
||||
track: { current track info object }
|
||||
*/
|
||||
}, false);
|
||||
|
||||
link.parentNode.replaceChild(
|
||||
player, link
|
||||
);
|
||||
```
|
||||
|
||||
## Browser compatible
|
||||
Should work on IE9+ / Opera 12.18+
|
||||
|
||||
For the browsers with no support audio/mpeg or html5 audio, player uses small and fast [Flash MP3 Player with JS API](http://flash-mp3-player.net/players/js/) (© Neolao Production, MIT)
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<defs>
|
||||
<linearGradient x1="49.9998349%" y1="0%" x2="49.9998349%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#FFF" offset="0%"></stop>
|
||||
<stop stop-color="#D4D4D4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="Layer-1" sketch:type="MSLayerGroup" transform="translate(1.000000, -1.000000)" fill="url(#linearGradient-1)">
|
||||
<path d="M-0.798679868,0.0144404332 L498.839934,0.0144404332 L498.839934,500.909747 L-0.798679868,500.909747 L-0.798679868,0.0144404332 Z" id="Shape" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
<g id="#000000ff" sketch:type="MSLayerGroup" transform="translate(141.000000, 106.000000)" stroke="#000" stroke-width="0.09375" fill="#000" fill-opacity="0.77">
|
||||
<path d="M210.448251,0 C210.462623,65.1869686 210.442503,130.371033 210.459749,195.558001 C214.181927,194.210287 218.113928,193.49867 222.066048,193.399915 C221.714,193.334667 227.052686,193.557493 232.793693,195.070684 C237.786387,196.386639 243.022056,198.822937 245.856375,201.073755 C250.386224,204.684119 254.022174,209.52311 255.890449,215.065005 C258.221482,221.838431 257.793216,229.523889 254.732119,235.992337 C250.811616,244.386506 242.979232,250.544166 234.25295,253.164076 C226.811467,255.46739 218.671536,255.345399 211.278915,252.908475 C204.271447,250.573212 197.896317,246.036294 193.780364,239.800211 C190.977951,235.629267 189.356863,230.700234 188.971711,225.686969 C188.974585,169.463463 188.988957,113.237052 188.965963,57.0106411 C138.614512,68.7537643 88.2458168,80.4155599 37.8914925,92.1383512 C32.3930153,93.430879 26.8772925,94.6420792 21.3960609,96.0101255 C21.4133065,142.883863 21.3931866,189.754697 21.4075579,236.62553 C31.941755,232.867033 44.1660224,233.918483 53.7057223,239.893156 C58.2499421,242.722195 62.1560742,246.65206 64.7917791,251.354538 C67.1026917,255.458676 68.3673702,260.155345 68.4334784,264.87525 C68.4622211,269.862374 67.14868,274.846593 64.6681855,279.162764 C60.5637289,286.345733 53.5447633,291.60879 45.7612419,294.077664 C35.9082467,297.252344 24.7359618,296.218322 15.7337503,291.013356 C8.06519973,286.650712 2.03210841,279.023346 0.471380169,270.170257 C0.356409396,269.081048 0.0862280797,268.015075 0.00574853865,266.925867 C0.00574853865,194.236428 0.0143713466,121.546989 0,48.8575502 C65.6885512,33.6086269 131.371354,18.3306581 197.059905,3.07302111 C201.523645,2.05642622 205.97014,0.952694635 210.448251,0 Z" id="Shape" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
+10
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="50%" stop-color="rgba(255, 255, 255, 0.15)" />
|
||||
<stop offset="50%" stop-color="rgba(255, 255, 255, 0)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" style="fill:url(#grad);" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 391 B |
+10
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="info" sketch:type="MSLayerGroup">
|
||||
<path d="M8.5,17 C13.1944206,17 17,13.1944206 17,8.5 C17,3.80557939 13.1944206,0 8.5,0 C3.80557939,0 0,3.80557939 0,8.5 C0,13.1944206 3.80557939,17 8.5,17 L8.5,17 Z" id="Oval-1" fill-opacity="0.503733915" fill="#000" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M7.71814672,6.23739837 L9.6486486,6.23739837 L8.2007722,11.2276423 C8.18790212,11.275339 8.17503224,11.320054 8.16216216,11.3617886 C8.14929208,11.4035232 8.1364222,11.4482382 8.12355212,11.495935 C8.08494189,11.6032526 8.05276718,11.7135496 8.02702703,11.8268293 C8.00128687,11.940109 7.98841699,12.06233 7.98841699,12.1934959 L7.98841699,12.2650407 L7.98841699,12.3365854 C8.00128707,12.3962063 8.03024431,12.4558263 8.07528958,12.5154472 C8.12033485,12.575068 8.20077162,12.604878 8.31660232,12.604878 C8.45817317,12.604878 8.64800396,12.548239 8.88610039,12.4349593 C9.12419681,12.3216797 9.5521205,12.1159907 10.1698842,11.8178862 L10.1891892,12.7121951 C10.1891892,12.9387545 10.0315331,13.1444435 9.7162162,13.3292683 C9.4008993,13.5140931 9.05019498,13.6601621 8.66409266,13.7674797 C8.40669112,13.8390247 8.15894585,13.8956637 7.92084942,13.9373984 C7.68275299,13.979133 7.4929222,14 7.35135135,14 C6.93950888,14 6.61132683,13.895665 6.36679537,13.6869919 C6.1222639,13.4783187 6,13.1653137 6,12.7479675 L6,12.6764228 L6,12.604878 C6.01287008,12.4260154 6.03860985,12.2441744 6.07722008,12.0593496 C6.11583031,11.8745248 6.15443996,11.6986458 6.19305019,11.5317073 C6.21879035,11.4720864 6.24131264,11.4094854 6.26061776,11.3439024 C6.27992288,11.2783195 6.29601023,11.2157185 6.30888031,11.1560976 L7.71814672,6.23739837 L7.71814672,6.23739837 Z M8.99227799,5.34308943 C8.73487645,5.34308943 8.53539324,5.28943143 8.39382239,5.18211382 C8.25225154,5.07479621 8.15572741,4.95555621 8.1042471,4.82439024 L8.06563707,4.68130081 C8.05276699,4.6336041 8.04633205,4.5859081 8.04633205,4.53821138 C8.04633205,4.1327893 8.17824836,3.7750693 8.44208494,3.46504065 C8.70592153,3.155012 9.03732104,3 9.4362934,3 C9.7323052,3 9.9864854,3.092411 10.1988417,3.27723577 C10.411198,3.46206054 10.5173745,3.69755954 10.5173745,3.98373984 C10.5173745,4.05528491 10.5077221,4.13875291 10.488417,4.23414634 C10.4691119,4.32953977 10.4337197,4.42493177 10.3822394,4.5203252 C10.2921488,4.72303624 10.1377102,4.91083924 9.9189189,5.08373984 C9.7001276,5.25664043 9.39125039,5.34308943 8.99227799,5.34308943 L8.99227799,5.34308943 Z" id="i" fill="#FFF" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="22px" height="26px" viewBox="0 0 22 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<path d="M1,1 L1,25 L8,25 L8,1 L1,1 L1,1 Z M14,1 L14,25 L21,25 L21,1 L14,1 L14,1 Z" id="Stop" stroke="#DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="#DDD" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 589 B |
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<path d="M14.0745834,2.9480787 L25.141492,20.994029 L3.00767503,20.994029 L14.0745834,2.9480787 L14.0745834,2.9480787 Z" id="Play" stroke="#DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="#DDD" sketch:type="MSShapeGroup" transform="translate(14.007675, 11.948079) rotate(90.000000) translate(-14.007675, -11.948079) "></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 723 B |
+256
@@ -0,0 +1,256 @@
|
||||
.sc-player {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
font: .6em Arial,sans-serif;
|
||||
background-color: #eee;
|
||||
color: #ddd;
|
||||
line-height: 1.6em;
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.sc-player a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.sc-player ol, .sc-player li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/*********** Artwork ***********/
|
||||
/*******************************/
|
||||
.sc-artwork-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('img/artwork-qm.svg') no-repeat center;
|
||||
background-size: 100%;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-shadow: rgba(0, 0, 0, .35) 0 1px 5px;
|
||||
float: left;
|
||||
margin: 0 10px 30px 0;
|
||||
}
|
||||
.sc-artwork-list::after {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: -1px;
|
||||
content: " ";
|
||||
background: url('img/gradient-glass.svg');
|
||||
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .15) 50%, transparent 50%);
|
||||
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .15) 50%, transparent 50%);
|
||||
background: -o-linear-gradient(-45deg, rgba(255, 255, 255, .15) 50%, transparent 50%);
|
||||
box-shadow: rgba(255, 255, 255, .1) 0 1px 0 inset;
|
||||
}
|
||||
.sc-artwork-list li {
|
||||
list-style-type: none;
|
||||
display: none;
|
||||
}
|
||||
.sc-artwork-list li.active {
|
||||
list-style-type: none;
|
||||
display: block;
|
||||
}
|
||||
.sc-artwork-list img {
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/********** Controls ***********/
|
||||
/*******************************/
|
||||
.sc-controls {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: -25px;
|
||||
margin-top: -25px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 100%;
|
||||
background-color: #333;
|
||||
opacity: .8;
|
||||
}
|
||||
.sc-controls:hover{
|
||||
background-color: #333;
|
||||
opacity: .9;
|
||||
}
|
||||
.sc-controls > * {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sc-play {
|
||||
background: url('img/play-modern.svg') no-repeat center;
|
||||
}
|
||||
.sc-pause {
|
||||
background: url('img/pause-modern.svg') no-repeat center;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/*********** Scrubber **********/
|
||||
/*******************************/
|
||||
.sc-scrubber {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: 10px;
|
||||
width: 200px;
|
||||
border-radius: 8px;
|
||||
visibility: hidden;
|
||||
}
|
||||
.sc-time-span {
|
||||
position: relative;
|
||||
}
|
||||
.sc-buffer, .sc-played {
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.sc-played {
|
||||
background-color: rgba(0,0,0,.5);
|
||||
border: 1px groove #ddd;
|
||||
opacity: .7;
|
||||
}
|
||||
.sc-time-indicators {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
background-color: rgba(0,0,0,.4);
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
visibility: hidden;
|
||||
}
|
||||
.sc-waveform-container {
|
||||
height: 10px;
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
}
|
||||
.sc-player.played .sc-scrubber, .sc-player.paused .sc-scrubber, .sc-player.played .sc-time-indicators, .sc-player.paused .sc-time-indicators {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/********** Trackslist *********/
|
||||
/*******************************/
|
||||
.sc-trackslist {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-height: 30%;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
opacity: 0;
|
||||
}
|
||||
.sc-trackslist li {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin: 1px 5px;
|
||||
padding: 3px 30px 3px 5px;
|
||||
}
|
||||
.sc-track-duration {
|
||||
text-align: right;
|
||||
padding: 0 5px;
|
||||
margin-left: 5px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
}
|
||||
.sc-trackslist li:hover {
|
||||
background-color: rgba(99, 99, 99, .9);
|
||||
}
|
||||
.sc-trackslist li.active {
|
||||
background-color: rgba(77, 77, 77, .7);
|
||||
}
|
||||
.sc-trackslist li.active a, .sc-trackslist li a {
|
||||
color: #ddd;
|
||||
}
|
||||
.sc-trackslist:hover, .sc-trackslist:focus {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/************ Info *************/
|
||||
/*******************************/
|
||||
.sc-info {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 190px;
|
||||
height: 190px;
|
||||
z-index: 1;
|
||||
padding: 5px;
|
||||
background-color: rgba(0, 0, 0, .9);
|
||||
overflow: auto;
|
||||
}
|
||||
.sc-info-toggle {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 9px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sc-info-toggle:hover, .sc-player:focus .sc-info-toggle {
|
||||
background: url('img/info-modern.svg') no-repeat center;
|
||||
color: transparent;
|
||||
}
|
||||
.sc-info-close {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
padding: 1px 4px;
|
||||
color: gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sc-info-close:hover {
|
||||
color: white;
|
||||
}
|
||||
.sc-info a {
|
||||
color: #95bcce;
|
||||
}
|
||||
.sc-info a:hover {
|
||||
color: #5e7681;
|
||||
}
|
||||
.sc-info p a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sc-info, .sc-info-toggle.active {
|
||||
visibility: hidden;
|
||||
}
|
||||
.sc-info.active {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/************ Volume ***********/
|
||||
/*******************************/
|
||||
.sc-volume-slider {
|
||||
top: -25px;
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 12px;
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.sc-volume-status {
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 10px;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
background-color: #666;
|
||||
border-right: 1px solid #f6a400;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
.sc-volume-slider,
|
||||
.sc-player .hidden,
|
||||
.sc-waveform-container img,
|
||||
.sc-no-artwork {
|
||||
display: none;
|
||||
}
|
||||
+163
@@ -0,0 +1,163 @@
|
||||
/* ----------< Standart blue color >---------------- */
|
||||
|
||||
.sc-player {
|
||||
font: .7em Arial, sans-serif;
|
||||
background-color: #eee;
|
||||
background: linear-gradient( 165deg, black, #eee 0%, #fff );
|
||||
background: -o-linear-gradient( 165deg, black, #eee 0%, #fff );
|
||||
background: -moz-linear-gradient( 165deg, black, #eee 0%, #fff );
|
||||
background: -webkit-gradient(linear, left top, left 50%, from(black), color-stop(0%, #eee), to(#fff));
|
||||
color: #333;
|
||||
line-height: 1.6em;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.sc-player a {
|
||||
text-decoration: none;
|
||||
color: #2955ac;
|
||||
}
|
||||
|
||||
/* Artworks */
|
||||
|
||||
.sc-artwork-list {
|
||||
background: #eee;
|
||||
background: linear-gradient( left bottom, #eee, #333 );
|
||||
background: -o-linear-gradient( left bottom, #eee, #333 );
|
||||
background: -moz-linear-gradient( left bottom, #eee, #333 );
|
||||
background: -webkit-gradient(linear, left bottom, right top, from(#eee), to(#333));
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.sc-scrubber {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.sc-time-span {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.sc-buffer,
|
||||
.sc-played {
|
||||
background-color: #999;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sc-played {
|
||||
background-color: #039;
|
||||
background: linear-gradient( top, black, #039, #5d95d2 90% );
|
||||
background: -o-linear-gradient( top, black, #039, #5d95d2 90% );
|
||||
background: -moz-linear-gradient( top, black, #039, #5d95d2 90% );
|
||||
background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #039), to(#5d95d2));
|
||||
}
|
||||
|
||||
.sc-waveform-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.sc-controls {
|
||||
border-radius: 100%;
|
||||
border: 2px solid white;
|
||||
background-color: #039;
|
||||
background: linear-gradient( 135deg, #a1b8e4, #039 70% );
|
||||
background: -o-linear-gradient( 135deg, #a1b8e4, #039 70% );
|
||||
background: -moz-linear-gradient( 135deg, #a1b8e4, #039 70% );
|
||||
background: -webkit-gradient(linear, left top, 30% 90%, from(#a1b8e4), color-stop(70%, #039), to(#039));
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.sc-controls:hover {
|
||||
background: linear-gradient( 45deg, #a1b8e4, #039 70% );
|
||||
background: -o-linear-gradient( 45deg, #a1b8e4, #039 70% );
|
||||
background: -moz-linear-gradient( 45deg, #a1b8e4, #039 70% );
|
||||
background: -webkit-gradient(linear, left bottom, 90% 30%, from(#a1b8e4), color-stop(70%, #039), to(#039));
|
||||
}
|
||||
|
||||
.sc-controls > * {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.sc-play {
|
||||
background: url('img/play-standart.svg') no-repeat center center / 30%;
|
||||
}
|
||||
.sc-pause {
|
||||
background: url('img/pause-standart.svg') no-repeat center center / 30%;
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.sc-trackslist li.active,
|
||||
.sc-trackslist li:hover {
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.sc-trackslist li.active a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sc-trackslist li.active {
|
||||
background-color: #2955ac;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.sc-track-duration {
|
||||
text-align: right;
|
||||
padding: 0 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.sc-info.active {
|
||||
background: #fff;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.sc-info p a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sc-info a:hover {
|
||||
color: #039;
|
||||
}
|
||||
|
||||
.sc-info-toggle,
|
||||
.sc-time-indicators,
|
||||
.sc-info-close {
|
||||
background: #fff;
|
||||
color: #2955ac;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.sc-info-toggle:hover,
|
||||
.sc-info-close:hover {
|
||||
background: #2955ac;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.sc-info-close {
|
||||
padding: 2px 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Volume control */
|
||||
|
||||
.sc-volume-slider {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 2px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.sc-volume-slider .sc-volume-status {
|
||||
background-color: #666;
|
||||
border-right: 1px solid #039;
|
||||
}
|
||||
+166
@@ -0,0 +1,166 @@
|
||||
/* ----------< Standart color green >---------------- */
|
||||
|
||||
.sc-player {
|
||||
font: .7em Arial, sans-serif;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
line-height: 1.6em;
|
||||
box-shadow: 1px 1px 4px #333;
|
||||
}
|
||||
|
||||
.sc-player a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Artworks */
|
||||
|
||||
.sc-artwork-list {
|
||||
background: #eee;
|
||||
background: linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -o-linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -moz-linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -webkit-gradient(linear, left bottom, right top, from(#eee), color-stop(50%, #888), to(#333));
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.sc-scrubber {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sc-time-span {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.sc-waveform-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sc-buffer,
|
||||
.sc-played {
|
||||
background-color: #333;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sc-played {
|
||||
background: #22B573;
|
||||
background: linear-gradient( top, black, #22B573 0, #7decba 90% );
|
||||
background: -o-linear-gradient( top, black, #22B573 0, #7decba 90% );
|
||||
background: -moz-linear-gradient( top, black, #22B573 0, #7decba 90% );
|
||||
background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #22B573), to(#7decba));
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.sc-controls {
|
||||
border-radius: 100%;
|
||||
border: 2px solid white;
|
||||
background: #22B573;
|
||||
background: linear-gradient( 135deg, #fff, #22B573 50% );
|
||||
background: -o-linear-gradient( 135deg, #fff, #22B573 50% );
|
||||
background: -moz-linear-gradient( 135deg, #fff, #22B573 50% );
|
||||
background: -webkit-gradient(linear, left top, 30% 90%, from(#fff), color-stop(50%, #22B573), to(#22B573));
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.sc-controls > * {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.sc-controls:hover {
|
||||
background: linear-gradient( 45deg, #a8e2ca, #22B573 70% );
|
||||
background: -o-linear-gradient( 45deg, #a8e2ca, #22B573 70% );
|
||||
background: -moz-linear-gradient( 45deg, #a8e2ca, #22B573 70% );
|
||||
background: -webkit-gradient(linear, left bottom, 90% 30%, from(#a8e2ca), color-stop(70%, #22B573), to(#22B573));
|
||||
}
|
||||
|
||||
.sc-time-indicators {
|
||||
background: #22B573;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.sc-play {
|
||||
background: url('img/play-standart.svg') no-repeat center center / 30%;
|
||||
}
|
||||
.sc-pause {
|
||||
background: url('img/pause-standart.svg') no-repeat center center / 30%;
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.sc-trackslist li {
|
||||
background: #333;
|
||||
color: #b8e9d3;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s ease-in;
|
||||
}
|
||||
|
||||
.sc-trackslist li:hover {
|
||||
background: #22B573;
|
||||
}
|
||||
|
||||
.sc-trackslist li.active {
|
||||
background: #22B573;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sc-trackslist li.active a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.sc-info.active,
|
||||
.sc-info-close:hover,
|
||||
.sc-info-toggle:hover {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sc-info.active {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.sc-info a {
|
||||
color: #b1e8cc;
|
||||
}
|
||||
|
||||
.sc-info a:hover {
|
||||
color: #e1f7ee;
|
||||
}
|
||||
|
||||
.sc-info-toggle {
|
||||
background: #22B573;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.sc-info-close {
|
||||
background: #22B573;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Volume control */
|
||||
|
||||
.sc-volume-slider {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 2px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.sc-volume-slider .sc-volume-status {
|
||||
background-color: #666;
|
||||
border-right: 1px solid #22B573;
|
||||
}
|
||||
+180
@@ -0,0 +1,180 @@
|
||||
/* ----------< Standart color orange >---------------- */
|
||||
|
||||
.sc-player {
|
||||
font: .7em Arial, sans-serif;
|
||||
background-color: #eee;
|
||||
background: linear-gradient( top, black, #ccc 0%, #fff 70%);
|
||||
background: -o-linear-gradient( top, black, #ccc 0%, #fff 70%);
|
||||
background: -moz-linear-gradient( top, black, #ccc 0%, #fff 70%);
|
||||
background: -webkit-gradient(linear, left top, left 70%, from(black), color-stop(0%, #ccc), to(#fff));
|
||||
color: #333;
|
||||
line-height: 1.6em;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.sc-player a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Artworks */
|
||||
|
||||
.sc-artwork-list {
|
||||
background-color: #eee;
|
||||
background: linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -o-linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -moz-linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee));
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.sc-scrubber {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.sc-time-span {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.sc-buffer,
|
||||
.sc-played {
|
||||
background-color: #adadad;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sc-played {
|
||||
background-color: #e74c14;
|
||||
background: linear-gradient( top, black, #e74c14 0, #f6a400 90% );
|
||||
background: -o-linear-gradient( top, black, #e74c14 0, #f6a400 90% );
|
||||
background: -moz-linear-gradient( top, black, #e74c14 0, #f6a400 90% );
|
||||
background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #e74c14), to(#f6a400));
|
||||
}
|
||||
|
||||
.sc-waveform-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.sc-controls {
|
||||
border-radius: 100%;
|
||||
border: 2px solid white;
|
||||
background-color: #f6a400;
|
||||
background: linear-gradient( 45deg, #e74c14, #f6a400 );
|
||||
background: -o-linear-gradient( 45deg, #e74c14, #f6a400 );
|
||||
background: -moz-linear-gradient( 45deg, #e74c14, #f6a400 );
|
||||
background: -webkit-gradient(linear, left bottom, top right, from(#e74c14), to(#f6a400));
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.sc-controls:hover {
|
||||
background: linear-gradient( 225deg, #e74c14, #f6a400 );
|
||||
background: -o-linear-gradient( 225deg, #e74c14, #f6a400 );
|
||||
background: -moz-linear-gradient( 225deg, #e74c14, #f6a400 );
|
||||
background: -webkit-gradient(linear, top right, left bottom, from(#e74c14), to(#f6a400));
|
||||
}
|
||||
|
||||
.sc-controls > * {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.sc-play {
|
||||
background: url('img/play-standart.svg') no-repeat center center / 30%;
|
||||
}
|
||||
.sc-pause {
|
||||
background: url('img/pause-standart.svg') no-repeat center center / 30%;
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.sc-trackslist li.active {
|
||||
color: #fff;
|
||||
background: #e74c14;
|
||||
}
|
||||
|
||||
.sc-track-duration {
|
||||
text-align: right;
|
||||
padding: 0 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.sc-trackslist li.active,
|
||||
.sc-trackslist li:hover {
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.sc-trackslist li:hover {
|
||||
background-color: #f6a400;
|
||||
}
|
||||
|
||||
.sc-trackslist li.active a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sc-trackslist li a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.sc-info.active {
|
||||
background: #fff;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.sc-info a {
|
||||
color: #e74c14;
|
||||
}
|
||||
|
||||
.sc-info p a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sc-info a:hover {
|
||||
color: #f6a400;
|
||||
}
|
||||
|
||||
.sc-info-toggle,
|
||||
.sc-time-indicators {
|
||||
background: #f6a400;
|
||||
color: #ab3104;
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
padding: 4px;
|
||||
}
|
||||
.sc-info-close,
|
||||
.sc-info-close:hover {
|
||||
padding: 2px 4px;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.sc-info-close:hover {
|
||||
background: #f6a400;
|
||||
color: #ab3104;
|
||||
}
|
||||
|
||||
.sc-info-toggle:hover,
|
||||
.sc-info-close {
|
||||
background: #fff;
|
||||
color: #e74c14;
|
||||
}
|
||||
|
||||
/* Volume control */
|
||||
|
||||
.sc-volume-slider {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 2px;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.sc-volume-slider .sc-volume-status {
|
||||
background-color: #666;
|
||||
border-right: 1px solid #f6a400;
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="136px" height="173px" viewBox="0 0 136 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<defs>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="15" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feOffset dx="-15" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="Rectangle-1-+-Rectangle-2" sketch:type="MSLayerGroup" fill="#FFFFFF">
|
||||
<rect id="Rectangle-1" filter="url(#filter-1)" sketch:type="MSShapeGroup" x="0" y="0" width="40" height="173"></rect>
|
||||
<rect id="Rectangle-2" filter="url(#filter-2)" sketch:type="MSShapeGroup" x="96" y="0" width="40" height="173"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
+18
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="164px" height="222px" viewBox="0 0 164 222" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<defs>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feMorphology radius="5" in="SourceAlpha" operator="dilate" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="-2" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="0" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<path d="M54.9296875,109.011719 L8,4.62890625 L160.359375,109.011719 L8,216 L54.9296875,109.011719 Z" id="Triangle-1" fill="#FFFFFF" filter="url(#filter-1)" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
+193
@@ -0,0 +1,193 @@
|
||||
/* ----------< Standart structure horizontal >---------------- */
|
||||
|
||||
.sc-player {
|
||||
width: 540px;
|
||||
height: 270px;
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.sc-player ol,
|
||||
.sc-player li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/* Artworks */
|
||||
|
||||
.sc-artwork-list {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sc-artwork-list li {
|
||||
list-style-type: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sc-artwork-list li.active {
|
||||
list-style-type: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sc-artwork-list img {
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sc-no-artwork {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.sc-controls {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: -25px;
|
||||
margin-top: -25px;
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.sc-controls > * {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.sc-scrubber {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
height: 40px;
|
||||
width: 250px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sc-time-span {
|
||||
height: 30px;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sc-buffer,
|
||||
.sc-played {
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.sc-time-span img {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sc-time-indicators {
|
||||
position: absolute;
|
||||
right: 280px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.sc-player.played .sc-time-indicators,
|
||||
.sc-player.paused .sc-time-indicators {
|
||||
bottom: 55px;
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.sc-trackslist {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 260px;
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sc-trackslist li {
|
||||
cursor: pointer;
|
||||
margin: 1px 5px;
|
||||
padding: 3px 30px 3px 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sc-track-duration {
|
||||
text-align: right;
|
||||
padding: 0 5px;
|
||||
margin-left: 5px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.sc-info {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
padding: 5px;
|
||||
z-index: 1;
|
||||
overflow: auto;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.sc-info-toggle {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sc-info-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sc-info,
|
||||
.sc-info-toggle.active,
|
||||
.sc-player .sc-scrubber {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.sc-info.active,
|
||||
.sc-player.played .sc-scrubber,
|
||||
.sc-player.paused .sc-scrubber {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Volume control */
|
||||
|
||||
.sc-volume-slider {
|
||||
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-player .hidden {
|
||||
display: none;
|
||||
}
|
||||
+210
@@ -0,0 +1,210 @@
|
||||
/* ----------< Standart structure super >---------------- */
|
||||
|
||||
.sc-player {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.sc-player ol,
|
||||
.sc-player li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.sc-artwork-list {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sc-artwork-list li {
|
||||
list-style-type: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sc-artwork-list li.active {
|
||||
list-style-type: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sc-artwork-list img {
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sc-no-artwork {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.sc-controls {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 10px;
|
||||
left: 180px
|
||||
}
|
||||
|
||||
.sc-controls > * {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.sc-scrubber {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
height: 70px;
|
||||
width: 600px;
|
||||
left: 180px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sc-time-span {
|
||||
height: 60px;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sc-buffer, .sc-played {
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.sc-time-span img {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sc-time-indicators {
|
||||
position: absolute;
|
||||
left: 700px;
|
||||
}
|
||||
|
||||
.sc-time-indicators {
|
||||
top: 43px;
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.sc-trackslist {
|
||||
width: 780px;
|
||||
min-height: 50%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sc-trackslist li {
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
padding: 3px 30px 3px 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sc-track-duration {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.sc-info {
|
||||
position: absolute;
|
||||
padding: 0 5px;
|
||||
min-height: 100%;
|
||||
width: 774px;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.sc-info.active {
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sc-info p {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.sc-info-toggle {
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
left: 670px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sc-info-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sc-info h3 {
|
||||
position: absolute;
|
||||
width: 420px;
|
||||
left: 240px;
|
||||
text-align: left;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.sc-info h4 {
|
||||
position: absolute;
|
||||
width: 420px;
|
||||
left: 240px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.sc-download {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.sc-info p,
|
||||
.sc-info .sc-info-close,
|
||||
.sc-info .sc-download {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.sc-info.active p,
|
||||
.sc-info.active .sc-info-close,
|
||||
.sc-info.active .sc-download {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Volume control */
|
||||
|
||||
.sc-volume-slider {
|
||||
top: -60px;
|
||||
right: 0;
|
||||
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-player .hidden {
|
||||
display: none;
|
||||
}
|
||||
+190
@@ -0,0 +1,190 @@
|
||||
/* ----------< Standart structure vertical >---------------- */
|
||||
|
||||
.sc-player {
|
||||
width: 270px;
|
||||
height: 540px;
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.sc-player ol,
|
||||
.sc-player li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/* Artworks */
|
||||
|
||||
.sc-artwork-list {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sc-artwork-list li {
|
||||
list-style-type: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sc-artwork-list li.active {
|
||||
list-style-type: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sc-artwork-list img {
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sc-no-artwork {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.sc-controls {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: -25px;
|
||||
margin-top: -25px;
|
||||
top: 25%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.sc-controls > * {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.sc-scrubber {
|
||||
position: absolute;
|
||||
bottom: 280px;
|
||||
height: 40px;
|
||||
width: 250px;
|
||||
left: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sc-time-span {
|
||||
height: 30px;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sc-buffer,
|
||||
.sc-played {
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.sc-time-span img {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sc-time-indicators {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 235px;
|
||||
}
|
||||
|
||||
.sc-player.played .sc-time-indicators,
|
||||
.sc-player.paused .sc-time-indicators {
|
||||
top: 190px;
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.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-track-duration {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.sc-info {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
padding: 5px;
|
||||
z-index: 1;
|
||||
overflow: auto;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.sc-info-toggle {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sc-info-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sc-info,
|
||||
.sc-info-toggle.active,
|
||||
.sc-player .sc-scrubber {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.sc-info.active,
|
||||
.sc-player.played .sc-scrubber,
|
||||
.sc-player.paused .sc-scrubber {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
.sc-player .hidden {
|
||||
display: none;
|
||||
}
|
||||
Executable
+70
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>SC player example: Modern Skin</title>
|
||||
<link rel="stylesheet" href="styles/sc-player-modern.css" type="text/css">
|
||||
<script type="text/javascript" src="../js/sc-player.js"></script>
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: #1f1f1f url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAAAAAA7VNdtAAAB50lEQVR4AZXWt2HAAAwDQY6Bv/0Hde0slayYkA7bagmEpdFkNVIb6ba2AMrImAGxpQmcjBECZELKqFGEC0AW1gA2GQOATkMbxSwoshXUZqnqwBiTxT8XuVqoJpraqLEMNkPVHLJIQhvVskHSVGx2oBqWtW2VBNYo0mLHpJCGFraRBpZk4QDGWjOoJVKEwKwTywylig1qhqrU2nRvT5yDNZbAgkW2CIGMW0o2BWYbotXIsARXG4kJCmsTQk0S1rEZITKgDGqBJdjNsm0rW6FKBoyGjOrYRgYoEFmtbMSwuU1okWWrtBEVIGA7Y1hR0KzfSXFkpNFMBmYExdpQ3TZqTKgmJDLEJDQngAFqFaYKCCxcJZAEtQppbGFlazlIZGXQYqwsJTaZ3LP5Gdh0/wOEYFjTpSxmlKghUBmtxuTMBksiFiG0qlaJ6iqrDWkYGgJa0tLkgMkApSAroU2BuZ+vQouMqY0hdV/qLFZahjDFLBybTHg05dG2WQiaAUpimCV1ARoyozC0hmFlyxxg0QA2BG1qQmXtVqWlgvI3h87eCsaVBjYmTIOFFsIK7nFCYIILRnqogvcPoLRkFNjuRxaRqQIBzOZe66sbqhoUtJaZCBmwuCcRRMRgzrAaxLQlImtsNg1xiVep5APWKPeuYJTJhwAAAABJRU5ErkJggg==');
|
||||
margin: auto 5%;
|
||||
}
|
||||
h1 {
|
||||
color: #595959;
|
||||
text-shadow: -1px 0 1px black, 1px 1px 1px #BCBCBC;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
h2 {
|
||||
font: small-caps bold 1em sans-serif;
|
||||
}
|
||||
.footer {
|
||||
color: #565656;
|
||||
font: bold 18px sans-serif;
|
||||
text-shadow: -1px -1px 0 black;
|
||||
}
|
||||
.footer a {
|
||||
color: #95bcce;
|
||||
}
|
||||
.footer a:hover {
|
||||
color: #5e7681;
|
||||
}
|
||||
#standart_skin_example {
|
||||
padding: 1em;
|
||||
background: #838383;
|
||||
max-width: 150px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
border-radius: 0 0 10px 10px;
|
||||
font: small-caps bold 1em sans-serif;
|
||||
color: #c2c2c2;
|
||||
text-shadow: -1px 1px 1px #111;
|
||||
box-shadow: 1px 2px 4px rgba(0,0,0,.8);
|
||||
margin-left: 5%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a id="standart_skin_example" href="sc-player-standard.html">Standart Player</a>
|
||||
<h1>Modern Player</h1>
|
||||
<div>
|
||||
<span class="sc-player">
|
||||
<a href="https://soundcloud.com/overwerk/daybreak">Daybreak</a>
|
||||
<a href="https://soundcloud.com/kike-digital/lost-in-las-vegas-two-steps">Lost In Las Vegas</a>
|
||||
<a href="https://soundcloud.com/will_rp/revelation">Revelation</a>
|
||||
<a href="https://soundcloud.com/relax-listen/classic-durasic">Classic Durasic</a>
|
||||
<a href="https://soundcloud.com/mrmagnumplays/friday-feeling-lpmitkev-bob-bradley">Friday Feeling [LpmitKev] (Bob Bradley)</a>
|
||||
<a href="https://soundcloud.com/mau5trap/deadmau5-feat-chris-james-the">The Veldt</a>
|
||||
<a href="https://soundcloud.com/soundstabsmusic/sound-stabs-pyromaniac">Sound Stabs - Pyromaniac</a>
|
||||
<a href="https://soundcloud.com/danty-chee/fantastic-k-391">Fantastic - K-391</a>
|
||||
<a href="https://soundcloud.com/matas/on-the-bridge">On the bridge</a>
|
||||
</span>
|
||||
<a class="sc-player">Empty</a>
|
||||
<a href="https://soundcloud.com/ueffin-chatlan" class="sc-player">User Tracks</a>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<h2>minimalistic skin for the dynamic insertion</h2>
|
||||
<a href="https://github.com/OpenA/soundcloud-custom-player">GitHub</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/sc-player-standard.html
Executable
+69
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>SC player example: Standard Skin</title>
|
||||
<link rel="stylesheet" href="styles/sc-player-standard.css" type="text/css">
|
||||
<link rel="stylesheet" href="styles/sc-player-horizontal.css" type="text/css">
|
||||
<link rel="stylesheet" href="styles/sc-player-vertical.css" type="text/css">
|
||||
<link rel="stylesheet" href="styles/sc-player-super.css" type="text/css">
|
||||
<link rel="stylesheet" href="styles/sc-player-green.css" type="text/css">
|
||||
<link rel="stylesheet" href="styles/sc-player-blue.css" type="text/css">
|
||||
<link rel="stylesheet" href="styles/sc-player-orange.css" type="text/css">
|
||||
<script type="text/javascript" src="../js/sc-player.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onclick = function(e) {
|
||||
if (e.target.id && e.target.id.slice(0, 5) === 'style' && e.target.className.indexOf('selected') === -1) {
|
||||
var name = e.target.id.split('_'), sel = ' selected',
|
||||
classList = e.target.className.split(' '),
|
||||
prevSelect = e.target.parentNode.querySelector('.selected');
|
||||
e.target.parentNode.nextElementSibling.className = name[1] +' '+ name[2];
|
||||
|
||||
if (prevSelect) {
|
||||
prevSelect.className = prevSelect.className.substring(0, prevSelect.className.length - sel.length);
|
||||
}
|
||||
e.target.className += sel;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="sc-player-modern.html">Modern Player</a>
|
||||
<h1>Standart Skin</h1>
|
||||
<div class="post">
|
||||
<h2>horizontal <span id="style_horizontal_green" class="option-green selected">green</span> <span id="style_horizontal_blue" class="option-blue">blue</span> <span id="style_horizontal_orange" class="option-orange">orange</span></h2>
|
||||
<div class="horizontal green">
|
||||
<a href="https://soundcloud.com/tunguska-ems" class="sc-player">Tunguska Electronic Music Society</a>
|
||||
</div>
|
||||
<h2>vertical <span id="style_vertical_green" class="option-green">green</span> <span id="style_vertical_blue" class="option-blue selected">blue</span> <span id="style_vertical_orange" class="option-orange">orange</span></h2>
|
||||
<div class="vertical blue">
|
||||
<a href="https://soundcloud.com/hitboxx" class="sc-player">The Nth °</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<h2>super <span id="style_super_green" class="option-green">green</span> <span id="style_super_blue" class="option-blue">blue</span> <span id="style_super_orange" class="option-orange selected">orange</span></h2>
|
||||
<div class="super orange">
|
||||
<div class="sc-player">
|
||||
<a href="https://soundcloud.com/aethernaut/final-frontier">Final Frontier</a>
|
||||
<a href="https://soundcloud.com/chibinoize/technicolor">Technicolor</a>
|
||||
<a href="https://soundcloud.com/anzomusic/castlevania-bloody-tears-anzo">Castlevania - Bloody Tears (Anzo Cover)</a>
|
||||
<a href="https://soundcloud.com/fuskasker/fusk-asker-bully-original-mix">Fusk Asker - Bully (Original Mix)</a>
|
||||
<a href="https://soundcloud.com/ensnare-1/there-is-always-love">There Is Always Love</a>
|
||||
<a href="https://soundcloud.com/dubmood/dubmood-chiptune">Dubmood - Chiptune</a>
|
||||
<a href="https://soundcloud.com/protoflight/post">Post</a>
|
||||
<a href="https://soundcloud.com/fantomenk/fantomenk-a-tiny-spaceships">A Tiny Spaceship's Final Mission</a>
|
||||
<a href="https://soundcloud.com/aethernaut/shine-get">Shine Get</a>
|
||||
<a href="https://soundcloud.com/tastyselection/demon-groove-saturate-teaser">Demon Groove - Saturate</a>
|
||||
<a href="https://soundcloud.com/tastyselection/demon-groove-lenningrad-2034">Demon Groove - Lenningrad 2034</a>
|
||||
<a href="https://soundcloud.com/bossfightswe/dr-wilys-castle-stage-1">Dr. Wily's Castle: Stage 1</a>
|
||||
<a href="https://soundcloud.com/ensnare-1/yes-we-have-made-it-to-the">Yes, We Have Made it to the Dungeon Of Tropes</a>
|
||||
<a href="https://soundcloud.com/shawndaley/in-brightest-day">In Brightest Day</a>
|
||||
<a href="https://soundcloud.com/shawndaley/a-hero-stands-tall">A Hero Stands Tall</a>
|
||||
<a href="https://soundcloud.com/myuu/lavender-town-pokemon-cover">Lavender Town (Pokémon Cover)</a>
|
||||
<a href="https://soundcloud.com/sirrus-3/the-xx-intro-dream-city-remix">XX Intro Dream</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">2017</div>
|
||||
</body>
|
||||
</html>
|
||||
+156
@@ -0,0 +1,156 @@
|
||||
/* ----------< .blue >---------------- */
|
||||
|
||||
.blue .sc-player {
|
||||
font: .7em Arial, sans-serif;
|
||||
background-color: #eee;
|
||||
background: linear-gradient( 165deg, black, #eee 0%, #fff );
|
||||
background: -o-linear-gradient( 165deg, black, #eee 0%, #fff );
|
||||
background: -moz-linear-gradient( 165deg, black, #eee 0%, #fff );
|
||||
background: -webkit-gradient(linear, left top, left 50%, from(black), color-stop(0%, #eee), to(#fff));
|
||||
color: #333;
|
||||
line-height: 1.6em;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.blue .sc-player a {
|
||||
text-decoration: none;
|
||||
color: #2955ac;
|
||||
}
|
||||
|
||||
/* Artworks */
|
||||
|
||||
.blue .sc-artwork-list {
|
||||
background: #eee;
|
||||
background: linear-gradient( left bottom, #eee, #333 );
|
||||
background: -o-linear-gradient( left bottom, #eee, #333 );
|
||||
background: -moz-linear-gradient( left bottom, #eee, #333 );
|
||||
background: -webkit-gradient(linear, left bottom, right top, from(#eee), to(#333));
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.blue .sc-scrubber {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.blue .sc-time-span {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.blue .sc-buffer,
|
||||
.blue .sc-played {
|
||||
background-color: #999;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.blue .sc-played {
|
||||
background-color: #039;
|
||||
background: linear-gradient( top, black, #039, #5d95d2 90% );
|
||||
background: -o-linear-gradient( top, black, #039, #5d95d2 90% );
|
||||
background: -moz-linear-gradient( top, black, #039, #5d95d2 90% );
|
||||
background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #039), to(#5d95d2));
|
||||
}
|
||||
|
||||
.blue .sc-waveform-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.blue .sc-controls {
|
||||
border-radius: 100%;
|
||||
border: 2px solid white;
|
||||
background-color: #039;
|
||||
background: linear-gradient( 135deg, #a1b8e4, #039 70% );
|
||||
background: -o-linear-gradient( 135deg, #a1b8e4, #039 70% );
|
||||
background: -moz-linear-gradient( 135deg, #a1b8e4, #039 70% );
|
||||
background: -webkit-gradient(linear, left top, 30% 90%, from(#a1b8e4), color-stop(70%, #039), to(#039));
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.blue .sc-controls:hover {
|
||||
background: linear-gradient( 45deg, #a1b8e4, #039 70% );
|
||||
background: -o-linear-gradient( 45deg, #a1b8e4, #039 70% );
|
||||
background: -moz-linear-gradient( 45deg, #a1b8e4, #039 70% );
|
||||
background: -webkit-gradient(linear, left bottom, 90% 30%, from(#a1b8e4), color-stop(70%, #039), to(#039));
|
||||
}
|
||||
|
||||
.blue .sc-controls > * {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.blue .sc-trackslist li.active,
|
||||
.blue .sc-trackslist li:hover {
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.blue .sc-trackslist li.active a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.blue .sc-trackslist li.active {
|
||||
background-color: #2955ac;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.blue .sc-track-duration {
|
||||
text-align: right;
|
||||
padding: 0 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.blue .sc-info.active {
|
||||
background: #fff;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.blue .sc-info p a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.blue .sc-info a:hover {
|
||||
color: #039;
|
||||
}
|
||||
|
||||
.blue .sc-info-toggle,
|
||||
.blue .sc-time-indicators,
|
||||
.blue .sc-info-close {
|
||||
background: #fff;
|
||||
color: #2955ac;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.blue .sc-info-toggle:hover,
|
||||
.blue .sc-info-close:hover {
|
||||
background: #2955ac;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.blue .sc-info-close {
|
||||
padding: 2px 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Volume control */
|
||||
|
||||
.blue .sc-volume-slider {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 2px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.blue .sc-volume-slider .sc-volume-status {
|
||||
background-color: #666;
|
||||
border-right: 1px solid #039;
|
||||
}
|
||||
+159
@@ -0,0 +1,159 @@
|
||||
/* ----------< .green >---------------- */
|
||||
|
||||
.green .sc-player {
|
||||
font: .7em Arial, sans-serif;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
line-height: 1.6em;
|
||||
box-shadow: 1px 1px 4px #333;
|
||||
}
|
||||
|
||||
.green .sc-player a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Artworks */
|
||||
|
||||
.green .sc-artwork-list {
|
||||
background: #eee;
|
||||
background: linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -o-linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -moz-linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -webkit-gradient(linear, left bottom, right top, from(#eee), color-stop(50%, #888), to(#333));
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.green .sc-scrubber {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.green .sc-time-span {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.green .sc-waveform-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.green .sc-buffer,
|
||||
.green .sc-played {
|
||||
background-color: #333;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.green .sc-played {
|
||||
background: #22B573;
|
||||
background: linear-gradient( top, black, #22B573 0, #7decba 90% );
|
||||
background: -o-linear-gradient( top, black, #22B573 0, #7decba 90% );
|
||||
background: -moz-linear-gradient( top, black, #22B573 0, #7decba 90% );
|
||||
background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #22B573), to(#7decba));
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.green .sc-controls {
|
||||
border-radius: 100%;
|
||||
border: 2px solid white;
|
||||
background: #22B573;
|
||||
background: linear-gradient( 135deg, #fff, #22B573 50% );
|
||||
background: -o-linear-gradient( 135deg, #fff, #22B573 50% );
|
||||
background: -moz-linear-gradient( 135deg, #fff, #22B573 50% );
|
||||
background: -webkit-gradient(linear, left top, 30% 90%, from(#fff), color-stop(50%, #22B573), to(#22B573));
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.green .sc-controls > * {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.green .sc-controls:hover {
|
||||
background: linear-gradient( 45deg, #a8e2ca, #22B573 70% );
|
||||
background: -o-linear-gradient( 45deg, #a8e2ca, #22B573 70% );
|
||||
background: -moz-linear-gradient( 45deg, #a8e2ca, #22B573 70% );
|
||||
background: -webkit-gradient(linear, left bottom, 90% 30%, from(#a8e2ca), color-stop(70%, #22B573), to(#22B573));
|
||||
}
|
||||
|
||||
.green .sc-time-indicators {
|
||||
background: #22B573;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.green .sc-trackslist li {
|
||||
background: #333;
|
||||
color: #b8e9d3;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s ease-in;
|
||||
}
|
||||
|
||||
.green .sc-trackslist li:hover {
|
||||
background: #22B573;
|
||||
}
|
||||
|
||||
.green .sc-trackslist li.active {
|
||||
background: #22B573;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.green .sc-trackslist li.active a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.green .sc-info.active,
|
||||
.green .sc-info-close:hover,
|
||||
.green .sc-info-toggle:hover {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.green .sc-info.active {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.green .sc-info a {
|
||||
color: #b1e8cc;
|
||||
}
|
||||
|
||||
.green .sc-info a:hover {
|
||||
color: #e1f7ee;
|
||||
}
|
||||
|
||||
.green .sc-info-toggle {
|
||||
background: #22B573;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.green .sc-info-close {
|
||||
background: #22B573;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Volume control */
|
||||
|
||||
.green .sc-volume-slider {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 2px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.green .sc-volume-slider .sc-volume-status {
|
||||
background-color: #666;
|
||||
border-right: 1px solid #22B573;
|
||||
}
|
||||
+193
@@ -0,0 +1,193 @@
|
||||
/* ----------< .horizontal >---------------- */
|
||||
|
||||
.horizontal .sc-player {
|
||||
width: 540px;
|
||||
height: 270px;
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.horizontal .sc-player ol,
|
||||
.horizontal .sc-player li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/* Artworks */
|
||||
|
||||
.horizontal .sc-artwork-list {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.horizontal .sc-artwork-list li {
|
||||
list-style-type: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.horizontal .sc-artwork-list li.active {
|
||||
list-style-type: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.horizontal .sc-artwork-list img {
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.horizontal .sc-no-artwork {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.horizontal .sc-controls {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: -25px;
|
||||
margin-top: -25px;
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.horizontal .sc-controls > * {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.horizontal .sc-scrubber {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
height: 40px;
|
||||
width: 250px;
|
||||
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.horizontal .sc-time-span {
|
||||
height: 30px;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.horizontal .sc-buffer,
|
||||
.horizontal .sc-played {
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.horizontal .sc-time-span img {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.horizontal .sc-time-indicators {
|
||||
position: absolute;
|
||||
right: 280px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.horizontal .sc-player.played .sc-time-indicators,
|
||||
.horizontal .sc-player.paused .sc-time-indicators {
|
||||
bottom: 55px;
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.horizontal .sc-trackslist {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 260px;
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.horizontal .sc-trackslist li {
|
||||
cursor: pointer;
|
||||
margin: 1px 5px;
|
||||
padding: 3px 30px 3px 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.horizontal .sc-track-duration {
|
||||
text-align: right;
|
||||
padding: 0 5px;
|
||||
margin-left: 5px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.horizontal .sc-info {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
padding: 5px;
|
||||
z-index: 1;
|
||||
overflow: auto;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.horizontal .sc-info-toggle {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.horizontal .sc-info-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.horizontal .sc-info,
|
||||
.horizontal .sc-info-toggle.active,
|
||||
.horizontal .sc-player .sc-scrubber {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.horizontal .sc-info.active,
|
||||
.horizontal .sc-player.played .sc-scrubber,
|
||||
.horizontal .sc-player.paused .sc-scrubber {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Volume control */
|
||||
|
||||
.horizontal .sc-volume-slider {
|
||||
top: -25px;
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 12px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.horizontal .sc-volume-slider .sc-volume-status {
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 10px;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
.horizontal .sc-player .hidden {
|
||||
display: none;
|
||||
}
|
||||
+256
@@ -0,0 +1,256 @@
|
||||
.sc-player {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
font: .6em Arial,sans-serif;
|
||||
background-color: #eee;
|
||||
color: #ddd;
|
||||
line-height: 1.6em;
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.sc-player a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.sc-player ol, .sc-player li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/*********** Artwork ***********/
|
||||
/*******************************/
|
||||
.sc-artwork-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNTAwcHgiIGhlaWdodD0iNTAwcHgiIHZpZXdCb3g9IjAgMCA1MDAgNTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj48ZGVmcz48bGluZWFyR3JhZGllbnQgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSIgaWQ9ImxpbmVhckdyYWRpZW50LTEiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIG9mZnNldD0iMCUiPjwvc3RvcD4KPHN0b3Agc3RvcC1jb2xvcj0iI0Q0RDRENCIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+PGcgaWQ9IkxheWVyLTEiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsIC0xKSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSI+PHBhdGggZD0iTS0wLjc5ODY3OTg2OCwwLjAxNDQ0MDQzMzIgTDQ5OC44Mzk5MzQsMC4wMTQ0NDA0MzMyIEw0OTguODM5OTM0LDUwMC45MDk3NDcgTC0wLjc5ODY3OTg2OCw1MDAuOTA5NzQ3IEwtMC43OTg2Nzk4NjgsMC4wMTQ0NDA0MzMyIFoiIGlkPSJTaGFwZSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPjwvZz48ZyBpZD0iIzAwMDAwMGZmIiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDEsIDEwNikiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIwLjA5Mzc1IiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuNzciPjxwYXRoIGQ9Ik0yMTAuNDQ4MjUxLDAgQzIxMC40NjI2MjMsNjUuMTg2OTY4NiAyMTAuNDQyNTAzLDEzMC4zNzEwMzMgMjEwLjQ1OTc0OSwxOTUuNTU4MDAxIEMyMTQuMTgxOTI3LDE5NC4yMTAyODcgMjE4LjExMzkyOCwxOTMuNDk4NjcgMjIyLjA2NjA0OCwxOTMuMzk5OTE1IEMyMjEuNzE0LDE5My4zMzQ2NjcgMjI3LjA1MjY4NiwxOTMuNTU3NDkzIDIzMi43OTM2OTMsMTk1LjA3MDY4NCBDMjM3Ljc4NjM4NywxOTYuMzg2NjM5IDI0My4wMjIwNTYsMTk4LjgyMjkzNyAyNDUuODU2Mzc1LDIwMS4wNzM3NTUgQzI1MC4zODYyMjQsMjA0LjY4NDExOSAyNTQuMDIyMTc0LDIwOS41MjMxMSAyNTUuODkwNDQ5LDIxNS4wNjUwMDUgQzI1OC4yMjE0ODIsMjIxLjgzODQzMSAyNTcuNzkzMjE2LDIyOS41MjM4ODkgMjU0LjczMjExOSwyMzUuOTkyMzM3IEMyNTAuODExNjE2LDI0NC4zODY1MDYgMjQyLjk3OTIzMiwyNTAuNTQ0MTY2IDIzNC4yNTI5NSwyNTMuMTY0MDc2IEMyMjYuODExNDY3LDI1NS40NjczOSAyMTguNjcxNTM2LDI1NS4zNDUzOTkgMjExLjI3ODkxNSwyNTIuOTA4NDc1IEMyMDQuMjcxNDQ3LDI1MC41NzMyMTIgMTk3Ljg5NjMxNywyNDYuMDM2Mjk0IDE5My43ODAzNjQsMjM5LjgwMDIxMSBDMTkwLjk3Nzk1MSwyMzUuNjI5MjY3IDE4OS4zNTY4NjMsMjMwLjcwMDIzNCAxODguOTcxNzExLDIyNS42ODY5NjkgQzE4OC45NzQ1ODUsMTY5LjQ2MzQ2MyAxODguOTg4OTU3LDExMy4yMzcwNTIgMTg4Ljk2NTk2Myw1Ny4wMTA2NDExIEMxMzguNjE0NTEyLDY4Ljc1Mzc2NDMgODguMjQ1ODE2OCw4MC40MTU1NTk5IDM3Ljg5MTQ5MjUsOTIuMTM4MzUxMiBDMzIuMzkzMDE1Myw5My40MzA4NzkgMjYuODc3MjkyNSw5NC42NDIwNzkyIDIxLjM5NjA2MDksOTYuMDEwMTI1NSBDMjEuNDEzMzA2NSwxNDIuODgzODYzIDIxLjM5MzE4NjYsMTg5Ljc1NDY5NyAyMS40MDc1NTc5LDIzNi42MjU1MyBDMzEuOTQxNzU1LDIzMi44NjcwMzMgNDQuMTY2MDIyNCwyMzMuOTE4NDgzIDUzLjcwNTcyMjMsMjM5Ljg5MzE1NiBDNTguMjQ5OTQyMSwyNDIuNzIyMTk1IDYyLjE1NjA3NDIsMjQ2LjY1MjA2IDY0Ljc5MTc3OTEsMjUxLjM1NDUzOCBDNjcuMTAyNjkxNywyNTUuNDU4Njc2IDY4LjM2NzM3MDIsMjYwLjE1NTM0NSA2OC40MzM0Nzg0LDI2NC44NzUyNSBDNjguNDYyMjIxMSwyNjkuODYyMzc0IDY3LjE0ODY4LDI3NC44NDY1OTMgNjQuNjY4MTg1NSwyNzkuMTYyNzY0IEM2MC41NjM3Mjg5LDI4Ni4zNDU3MzMgNTMuNTQ0NzYzMywyOTEuNjA4NzkgNDUuNzYxMjQxOSwyOTQuMDc3NjY0IEMzNS45MDgyNDY3LDI5Ny4yNTIzNDQgMjQuNzM1OTYxOCwyOTYuMjE4MzIyIDE1LjczMzc1MDMsMjkxLjAxMzM1NiBDOC4wNjUxOTk3MywyODYuNjUwNzEyIDIuMDMyMTA4NDEsMjc5LjAyMzM0NiAwLjQ3MTM4MDE2OSwyNzAuMTcwMjU3IEMwLjM1NjQwOTM5NiwyNjkuMDgxMDQ4IDAuMDg2MjI4MDc5NywyNjguMDE1MDc1IDAuMDA1NzQ4NTM4NjUsMjY2LjkyNTg2NyBDMC4wMDU3NDg1Mzg2NSwxOTQuMjM2NDI4IDAuMDE0MzcxMzQ2NiwxMjEuNTQ2OTg5IDAsNDguODU3NTUwMiBDNjUuNjg4NTUxMiwzMy42MDg2MjY5IDEzMS4zNzEzNTQsMTguMzMwNjU4MSAxOTcuMDU5OTA1LDMuMDczMDIxMTEgQzIwMS41MjM2NDUsMi4wNTY0MjYyMiAyMDUuOTcwMTQsMC45NTI2OTQ2MzUgMjEwLjQ0ODI1MSwwIFoiIGlkPSJTaGFwZSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPjwvZz48L2c+PC9zdmc+') no-repeat center;
|
||||
background-size: 100%;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-shadow: rgba(0, 0, 0, .35) 0 1px 5px;
|
||||
float: left;
|
||||
margin: 0 10px 30px 0;
|
||||
}
|
||||
.sc-artwork-list::after {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: -1px;
|
||||
content: " ";
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9InJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xNSkiIC8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9InJnYmEoMjU1LCAyNTUsIDI1NSwgMCkiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6dXJsKCNncmFkKTsiIC8+PC9zdmc+');
|
||||
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .15) 50%, transparent 50%);
|
||||
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .15) 50%, transparent 50%);
|
||||
background: -o-linear-gradient(-45deg, rgba(255, 255, 255, .15) 50%, transparent 50%);
|
||||
box-shadow: rgba(255, 255, 255, .1) 0 1px 0 inset;
|
||||
}
|
||||
.sc-artwork-list li {
|
||||
list-style-type: none;
|
||||
display: none;
|
||||
}
|
||||
.sc-artwork-list li.active {
|
||||
list-style-type: none;
|
||||
display: block;
|
||||
}
|
||||
.sc-artwork-list img {
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/********** Controls ***********/
|
||||
/*******************************/
|
||||
.sc-controls {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: -25px;
|
||||
margin-top: -25px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 100%;
|
||||
background-color: #333;
|
||||
opacity: .8;
|
||||
}
|
||||
.sc-controls:hover{
|
||||
background-color: #333;
|
||||
opacity: .9;
|
||||
}
|
||||
.sc-controls > * {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sc-play {
|
||||
background: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPjxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPjxwYXRoIGQ9Ik0xNC4wNzQ1ODM0LDIuOTQ4MDc4NyBMMjUuMTQxNDkyLDIwLjk5NDAyOSBMMy4wMDc2NzUwMywyMC45OTQwMjkgTDE0LjA3NDU4MzQsMi45NDgwNzg3IEwxNC4wNzQ1ODM0LDIuOTQ4MDc4NyBaIiBpZD0iUGxheSIgc3Ryb2tlPSIjREREIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsbD0iI0RERCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQuMDA3Njc1LCAxMS45NDgwNzkpIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTQuMDA3Njc1LCAtMTEuOTQ4MDc5KSAiPjwvcGF0aD48L2c+PC9zdmc+') no-repeat center;
|
||||
}
|
||||
.sc-pause {
|
||||
background: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjJweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMjIgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPjxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPjxwYXRoIGQ9Ik0xLDEgTDEsMjUgTDgsMjUgTDgsMSBMMSwxIEwxLDEgWiBNMTQsMSBMMTQsMjUgTDIxLDI1IEwyMSwxIEwxNCwxIEwxNCwxIFoiIGlkPSJTdG9wIiBzdHJva2U9IiNEREQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBmaWxsPSIjREREIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PC9nPjwvc3ZnPg==') no-repeat center;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/*********** Scrubber **********/
|
||||
/*******************************/
|
||||
.sc-scrubber {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: 10px;
|
||||
width: 200px;
|
||||
border-radius: 8px;
|
||||
visibility: hidden;
|
||||
}
|
||||
.sc-time-span {
|
||||
position: relative;
|
||||
}
|
||||
.sc-buffer, .sc-played {
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.sc-played {
|
||||
background-color: rgba(0,0,0,.5);
|
||||
border: 1px groove #ddd;
|
||||
opacity: .7;
|
||||
}
|
||||
.sc-time-indicators {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
background-color: rgba(0,0,0,.4);
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
visibility: hidden;
|
||||
}
|
||||
.sc-waveform-container {
|
||||
height: 10px;
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
}
|
||||
.sc-player.played .sc-scrubber, .sc-player.paused .sc-scrubber, .sc-player.played .sc-time-indicators, .sc-player.paused .sc-time-indicators {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/********** Trackslist *********/
|
||||
/*******************************/
|
||||
.sc-trackslist {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-height: 30%;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
opacity: 0;
|
||||
}
|
||||
.sc-trackslist li {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin: 1px 5px;
|
||||
padding: 3px 30px 3px 5px;
|
||||
}
|
||||
.sc-track-duration {
|
||||
text-align: right;
|
||||
padding: 0 5px;
|
||||
margin-left: 5px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
}
|
||||
.sc-trackslist li:hover {
|
||||
background-color: rgba(99, 99, 99, .9);
|
||||
}
|
||||
.sc-trackslist li.active {
|
||||
background-color: rgba(77, 77, 77, .7);
|
||||
}
|
||||
.sc-trackslist li.active a, .sc-trackslist li a {
|
||||
color: #ddd;
|
||||
}
|
||||
.sc-trackslist:hover, .sc-trackslist:focus {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/************ Info *************/
|
||||
/*******************************/
|
||||
.sc-info {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 190px;
|
||||
height: 190px;
|
||||
z-index: 1;
|
||||
padding: 5px;
|
||||
background-color: rgba(0, 0, 0, .9);
|
||||
overflow: auto;
|
||||
}
|
||||
.sc-info-toggle {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 9px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sc-info-toggle:hover, .sc-player:focus .sc-info-toggle {
|
||||
background: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTdweCIgaGVpZ2h0PSIxN3B4IiB2aWV3Qm94PSIwIDAgMTcgMTciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPjxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPjxnIGlkPSJpbmZvIiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIj48cGF0aCBkPSJNOC41LDE3IEMxMy4xOTQ0MjA2LDE3IDE3LDEzLjE5NDQyMDYgMTcsOC41IEMxNywzLjgwNTU3OTM5IDEzLjE5NDQyMDYsMCA4LjUsMCBDMy44MDU1NzkzOSwwIDAsMy44MDU1NzkzOSAwLDguNSBDMCwxMy4xOTQ0MjA2IDMuODA1NTc5MzksMTcgOC41LDE3IEw4LjUsMTcgWiIgaWQ9Ik92YWwtMSIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiMwMDAiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD48cGF0aCBkPSJNNy43MTgxNDY3Miw2LjIzNzM5ODM3IEw5LjY0ODY0ODYsNi4yMzczOTgzNyBMOC4yMDA3NzIyLDExLjIyNzY0MjMgQzguMTg3OTAyMTIsMTEuMjc1MzM5IDguMTc1MDMyMjQsMTEuMzIwMDU0IDguMTYyMTYyMTYsMTEuMzYxNzg4NiBDOC4xNDkyOTIwOCwxMS40MDM1MjMyIDguMTM2NDIyMiwxMS40NDgyMzgyIDguMTIzNTUyMTIsMTEuNDk1OTM1IEM4LjA4NDk0MTg5LDExLjYwMzI1MjYgOC4wNTI3NjcxOCwxMS43MTM1NDk2IDguMDI3MDI3MDMsMTEuODI2ODI5MyBDOC4wMDEyODY4NywxMS45NDAxMDkgNy45ODg0MTY5OSwxMi4wNjIzMyA3Ljk4ODQxNjk5LDEyLjE5MzQ5NTkgTDcuOTg4NDE2OTksMTIuMjY1MDQwNyBMNy45ODg0MTY5OSwxMi4zMzY1ODU0IEM4LjAwMTI4NzA3LDEyLjM5NjIwNjMgOC4wMzAyNDQzMSwxMi40NTU4MjYzIDguMDc1Mjg5NTgsMTIuNTE1NDQ3MiBDOC4xMjAzMzQ4NSwxMi41NzUwNjggOC4yMDA3NzE2MiwxMi42MDQ4NzggOC4zMTY2MDIzMiwxMi42MDQ4NzggQzguNDU4MTczMTcsMTIuNjA0ODc4IDguNjQ4MDAzOTYsMTIuNTQ4MjM5IDguODg2MTAwMzksMTIuNDM0OTU5MyBDOS4xMjQxOTY4MSwxMi4zMjE2Nzk3IDkuNTUyMTIwNSwxMi4xMTU5OTA3IDEwLjE2OTg4NDIsMTEuODE3ODg2MiBMMTAuMTg5MTg5MiwxMi43MTIxOTUxIEMxMC4xODkxODkyLDEyLjkzODc1NDUgMTAuMDMxNTMzMSwxMy4xNDQ0NDM1IDkuNzE2MjE2MiwxMy4zMjkyNjgzIEM5LjQwMDg5OTMsMTMuNTE0MDkzMSA5LjA1MDE5NDk4LDEzLjY2MDE2MjEgOC42NjQwOTI2NiwxMy43Njc0Nzk3IEM4LjQwNjY5MTEyLDEzLjgzOTAyNDcgOC4xNTg5NDU4NSwxMy44OTU2NjM3IDcuOTIwODQ5NDIsMTMuOTM3Mzk4NCBDNy42ODI3NTI5OSwxMy45NzkxMzMgNy40OTI5MjIyLDE0IDcuMzUxMzUxMzUsMTQgQzYuOTM5NTA4ODgsMTQgNi42MTEzMjY4MywxMy44OTU2NjUgNi4zNjY3OTUzNywxMy42ODY5OTE5IEM2LjEyMjI2MzksMTMuNDc4MzE4NyA2LDEzLjE2NTMxMzcgNiwxMi43NDc5Njc1IEw2LDEyLjY3NjQyMjggTDYsMTIuNjA0ODc4IEM2LjAxMjg3MDA4LDEyLjQyNjAxNTQgNi4wMzg2MDk4NSwxMi4yNDQxNzQ0IDYuMDc3MjIwMDgsMTIuMDU5MzQ5NiBDNi4xMTU4MzAzMSwxMS44NzQ1MjQ4IDYuMTU0NDM5OTYsMTEuNjk4NjQ1OCA2LjE5MzA1MDE5LDExLjUzMTcwNzMgQzYuMjE4NzkwMzUsMTEuNDcyMDg2NCA2LjI0MTMxMjY0LDExLjQwOTQ4NTQgNi4yNjA2MTc3NiwxMS4zNDM5MDI0IEM2LjI3OTkyMjg4LDExLjI3ODMxOTUgNi4yOTYwMTAyMywxMS4yMTU3MTg1IDYuMzA4ODgwMzEsMTEuMTU2MDk3NiBMNy43MTgxNDY3Miw2LjIzNzM5ODM3IEw3LjcxODE0NjcyLDYuMjM3Mzk4MzcgWiBNOC45OTIyNzc5OSw1LjM0MzA4OTQzIEM4LjczNDg3NjQ1LDUuMzQzMDg5NDMgOC41MzUzOTMyNCw1LjI4OTQzMTQzIDguMzkzODIyMzksNS4xODIxMTM4MiBDOC4yNTIyNTE1NCw1LjA3NDc5NjIxIDguMTU1NzI3NDEsNC45NTU1NTYyMSA4LjEwNDI0NzEsNC44MjQzOTAyNCBMOC4wNjU2MzcwNyw0LjY4MTMwMDgxIEM4LjA1Mjc2Njk5LDQuNjMzNjA0MSA4LjA0NjMzMjA1LDQuNTg1OTA4MSA4LjA0NjMzMjA1LDQuNTM4MjExMzggQzguMDQ2MzMyMDUsNC4xMzI3ODkzIDguMTc4MjQ4MzYsMy43NzUwNjkzIDguNDQyMDg0OTQsMy40NjUwNDA2NSBDOC43MDU5MjE1MywzLjE1NTAxMiA5LjAzNzMyMTA0LDMgOS40MzYyOTM0LDMgQzkuNzMyMzA1MiwzIDkuOTg2NDg1NCwzLjA5MjQxMSAxMC4xOTg4NDE3LDMuMjc3MjM1NzcgQzEwLjQxMTE5OCwzLjQ2MjA2MDU0IDEwLjUxNzM3NDUsMy42OTc1NTk1NCAxMC41MTczNzQ1LDMuOTgzNzM5ODQgQzEwLjUxNzM3NDUsNC4wNTUyODQ5MSAxMC41MDc3MjIxLDQuMTM4NzUyOTEgMTAuNDg4NDE3LDQuMjM0MTQ2MzQgQzEwLjQ2OTExMTksNC4zMjk1Mzk3NyAxMC40MzM3MTk3LDQuNDI0OTMxNzcgMTAuMzgyMjM5NCw0LjUyMDMyNTIgQzEwLjI5MjE0ODgsNC43MjMwMzYyNCAxMC4xMzc3MTAyLDQuOTEwODM5MjQgOS45MTg5MTg5LDUuMDgzNzM5ODQgQzkuNzAwMTI3Niw1LjI1NjY0MDQzIDkuMzkxMjUwMzksNS4zNDMwODk0MyA4Ljk5MjI3Nzk5LDUuMzQzMDg5NDMgTDguOTkyMjc3OTksNS4zNDMwODk0MyBaIiBpZD0iaSIgZmlsbD0iI0ZGRiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPjwvZz48L2c+PC9zdmc+') no-repeat center;
|
||||
color: transparent;
|
||||
}
|
||||
.sc-info-close {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
padding: 1px 4px;
|
||||
color: gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sc-info-close:hover {
|
||||
color: white;
|
||||
}
|
||||
.sc-info a {
|
||||
color: #95bcce;
|
||||
}
|
||||
.sc-info a:hover {
|
||||
color: #5e7681;
|
||||
}
|
||||
.sc-info p a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sc-info, .sc-info-toggle.active {
|
||||
visibility: hidden;
|
||||
}
|
||||
.sc-info.active {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
/************ Volume ***********/
|
||||
/*******************************/
|
||||
.sc-volume-slider {
|
||||
top: -25px;
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 12px;
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.sc-volume-status {
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 10px;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
background-color: #666;
|
||||
border-right: 1px solid #f6a400;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
.sc-volume-slider,
|
||||
.sc-player .hidden,
|
||||
.sc-waveform-container img,
|
||||
.sc-no-artwork {
|
||||
display: none;
|
||||
}
|
||||
+173
@@ -0,0 +1,173 @@
|
||||
/* ----------< .orange >---------------- */
|
||||
|
||||
.orange .sc-player {
|
||||
font: .7em Arial, sans-serif;
|
||||
background-color: #eee;
|
||||
background: linear-gradient( top, black, #ccc 0%, #fff 70%);
|
||||
background: -o-linear-gradient( top, black, #ccc 0%, #fff 70%);
|
||||
background: -moz-linear-gradient( top, black, #ccc 0%, #fff 70%);
|
||||
background: -webkit-gradient(linear, left top, left 70%, from(black), color-stop(0%, #ccc), to(#fff));
|
||||
color: #333;
|
||||
line-height: 1.6em;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.orange .sc-player a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Artworks */
|
||||
|
||||
.orange .sc-artwork-list {
|
||||
background-color: #eee;
|
||||
background: linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -o-linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -moz-linear-gradient( left bottom, #eee 20px, #333 350px );
|
||||
background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee));
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.orange .sc-scrubber {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.orange .sc-time-span {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.orange .sc-buffer,
|
||||
.orange .sc-played {
|
||||
background-color: #adadad;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.orange .sc-played {
|
||||
background-color: #e74c14;
|
||||
background: linear-gradient( top, black, #e74c14 0, #f6a400 90% );
|
||||
background: -o-linear-gradient( top, black, #e74c14 0, #f6a400 90% );
|
||||
background: -moz-linear-gradient( top, black, #e74c14 0, #f6a400 90% );
|
||||
background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #e74c14), to(#f6a400));
|
||||
}
|
||||
|
||||
.orange .sc-waveform-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.orange .sc-controls {
|
||||
border-radius: 100%;
|
||||
border: 2px solid white;
|
||||
background-color: #f6a400;
|
||||
background: linear-gradient( 45deg, #e74c14, #f6a400 );
|
||||
background: -o-linear-gradient( 45deg, #e74c14, #f6a400 );
|
||||
background: -moz-linear-gradient( 45deg, #e74c14, #f6a400 );
|
||||
background: -webkit-gradient(linear, left bottom, top right, from(#e74c14), to(#f6a400));
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.orange .sc-controls:hover {
|
||||
background: linear-gradient( 225deg, #e74c14, #f6a400 );
|
||||
background: -o-linear-gradient( 225deg, #e74c14, #f6a400 );
|
||||
background: -moz-linear-gradient( 225deg, #e74c14, #f6a400 );
|
||||
background: -webkit-gradient(linear, top right, left bottom, from(#e74c14), to(#f6a400));
|
||||
}
|
||||
|
||||
.orange .sc-controls > * {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.orange .sc-trackslist li.active {
|
||||
color: #fff;
|
||||
background: #e74c14;
|
||||
}
|
||||
|
||||
.orange .sc-track-duration {
|
||||
text-align: right;
|
||||
padding: 0 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.orange .sc-trackslist li.active,
|
||||
.orange .sc-trackslist li:hover {
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.orange .sc-trackslist li:hover {
|
||||
background-color: #f6a400;
|
||||
}
|
||||
|
||||
.orange .sc-trackslist li.active a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.orange .sc-trackslist li a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.orange .sc-info.active {
|
||||
background: #fff;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.orange .sc-info a {
|
||||
color: #e74c14;
|
||||
}
|
||||
|
||||
.orange .sc-info p a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.orange .sc-info a:hover {
|
||||
color: #f6a400;
|
||||
}
|
||||
|
||||
.orange .sc-info-toggle,
|
||||
.orange .sc-time-indicators {
|
||||
background: #f6a400;
|
||||
color: #ab3104;
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
padding: 4px;
|
||||
}
|
||||
.orange .sc-info-close,
|
||||
.orange .sc-info-close:hover {
|
||||
padding: 2px 4px;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.orange .sc-info-close:hover {
|
||||
background: #f6a400;
|
||||
color: #ab3104;
|
||||
}
|
||||
|
||||
.orange .sc-info-toggle:hover,
|
||||
.orange .sc-info-close {
|
||||
background: #fff;
|
||||
color: #e74c14;
|
||||
}
|
||||
|
||||
/* Volume control */
|
||||
|
||||
.orange .sc-volume-slider {
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 2px;
|
||||
box-shadow: 1px 1px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.orange .sc-volume-slider .sc-volume-status {
|
||||
background-color: #666;
|
||||
border-right: 1px solid #f6a400;
|
||||
}
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
body {
|
||||
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 black;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post {
|
||||
width: 540px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
float: right;
|
||||
width: 200px;
|
||||
padding-left: 10px;
|
||||
padding-bottom: 100%;
|
||||
border-left: 1px dotted black;
|
||||
}
|
||||
|
||||
.footer {
|
||||
float: left;
|
||||
width: 800px;
|
||||
padding: 10px 0;
|
||||
border-top: 1px dotted black;
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.option-green.selected, .option-blue.selected, .option-orange.selected {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.option-green, .option-blue, .option-orange {
|
||||
cursor: pointer;
|
||||
}
|
||||
.option-green.selected, .option-green:hover {
|
||||
color: #22B573;
|
||||
}
|
||||
.option-blue.selected, .option-blue:hover {
|
||||
color: #039;
|
||||
}
|
||||
.option-orange.selected, .option-orange:hover {
|
||||
color: #f6a400;
|
||||
}
|
||||
|
||||
.sc-play {
|
||||
background: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTY0cHgiIGhlaWdodD0iMjIycHgiIHZpZXdCb3g9IjAgMCAxNjQgMjIyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj48ZGVmcz48ZmlsdGVyIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0xIj48ZmVNb3JwaG9sb2d5IHJhZGl1cz0iNSIgaW49IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0iZGlsYXRlIiByZXN1bHQ9InNoYWRvd1NwcmVhZE91dGVyMSI+PC9mZU1vcnBob2xvZ3k+PGZlT2Zmc2V0IGR4PSItMiIgZHk9IjEiIGluPSJzaGFkb3dTcHJlYWRPdXRlcjEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjAiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUdhdXNzaWFuQmx1cj48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMSAgIDAgMCAwIDAgMSAgIDAgMCAwIDAgMSAgMCAwIDAgMC4zNSAwIiBpbj0ic2hhZG93Qmx1ck91dGVyMSIgdHlwZT0ibWF0cml4IiByZXN1bHQ9InNoYWRvd01hdHJpeE91dGVyMSI+PC9mZUNvbG9yTWF0cml4PjxmZU1lcmdlPjxmZU1lcmdlTm9kZSBpbj0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlTWVyZ2VOb2RlPjxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyI+PC9mZU1lcmdlTm9kZT48L2ZlTWVyZ2U+PC9maWx0ZXI+PC9kZWZzPjxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPjxwYXRoIGQ9Ik01NC45Mjk2ODc1LDEwOS4wMTE3MTkgTDgsNC42Mjg5MDYyNSBMMTYwLjM1OTM3NSwxMDkuMDExNzE5IEw4LDIxNiBMNTQuOTI5Njg3NSwxMDkuMDExNzE5IFoiIGlkPSJUcmlhbmdsZS0xIiBmaWxsPSIjRkZGIiBmaWx0ZXI9InVybCgjZmlsdGVyLTEpIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PC9nPjwvc3ZnPg==') no-repeat center center / 30%;
|
||||
}
|
||||
.sc-pause {
|
||||
background: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTM2cHgiIGhlaWdodD0iMTczcHgiIHZpZXdCb3g9IjAgMCAxMzYgMTczIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj48ZGVmcz48ZmlsdGVyIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0xIj48ZmVPZmZzZXQgZHg9IjE1IiBkeT0iMCIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIwIiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVHYXVzc2lhbkJsdXI+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDEgICAwIDAgMCAwIDEgICAwIDAgMCAwIDEgIDAgMCAwIDAuMzUgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiIHR5cGU9Im1hdHJpeCIgcmVzdWx0PSJzaGFkb3dNYXRyaXhPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSI+PC9mZU1lcmdlTm9kZT48ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVNZXJnZU5vZGU+PC9mZU1lcmdlPjwvZmlsdGVyPjxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTIiPjxmZU9mZnNldCBkeD0iLTE1IiBkeT0iMCIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIwIiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVHYXVzc2lhbkJsdXI+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDEgICAwIDAgMCAwIDEgICAwIDAgMCAwIDEgIDAgMCAwIDAuMzUgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiIHR5cGU9Im1hdHJpeCIgcmVzdWx0PSJzaGFkb3dNYXRyaXhPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSI+PC9mZU1lcmdlTm9kZT48ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVNZXJnZU5vZGU+PC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj48ZyBpZD0iUmVjdGFuZ2xlLTEtKy1SZWN0YW5nbGUtMiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgZmlsbD0iI0ZGRiI+PHJlY3QgaWQ9IlJlY3RhbmdsZS0xIiBmaWx0ZXI9InVybCgjZmlsdGVyLTEpIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iMTczIj48L3JlY3Q+PHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWx0ZXI9InVybCgjZmlsdGVyLTIpIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiB4PSI5NiIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjE3MyI+PC9yZWN0PjwvZz48L2c+PC9zdmc+') no-repeat center center / 30%;
|
||||
}
|
||||
+210
@@ -0,0 +1,210 @@
|
||||
/* ----------< .super >---------------- */
|
||||
|
||||
.super .sc-player {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.super .sc-player ol,
|
||||
.super .sc-player li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.super .sc-artwork-list {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.super .sc-artwork-list li {
|
||||
list-style-type: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.super .sc-artwork-list li.active {
|
||||
list-style-type: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.super .sc-artwork-list img {
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.super .sc-no-artwork {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.super .sc-controls {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 10px;
|
||||
left: 180px
|
||||
}
|
||||
|
||||
.super .sc-controls > * {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.super .sc-scrubber {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
height: 70px;
|
||||
width: 600px;
|
||||
left: 180px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.super .sc-time-span {
|
||||
height: 60px;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.super .sc-buffer, .super .sc-played {
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.super .sc-time-span img {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.super .sc-time-indicators {
|
||||
position: absolute;
|
||||
left: 700px;
|
||||
}
|
||||
|
||||
.super .sc-time-indicators {
|
||||
top: 43px;
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.super .sc-trackslist {
|
||||
width: 780px;
|
||||
min-height: 50%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.super .sc-trackslist li {
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
padding: 3px 30px 3px 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.super .sc-track-duration {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.super .sc-info {
|
||||
position: absolute;
|
||||
padding: 0 5px;
|
||||
min-height: 100%;
|
||||
width: 774px;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.super .sc-info.active {
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.super .sc-info p {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.super .sc-info-toggle {
|
||||
position: absolute;
|
||||
top: 43px;
|
||||
left: 670px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.super .sc-info-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.super .sc-info h3 {
|
||||
position: absolute;
|
||||
width: 420px;
|
||||
left: 240px;
|
||||
text-align: left;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.super .sc-info h4 {
|
||||
position: absolute;
|
||||
width: 420px;
|
||||
left: 240px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.super .sc-download {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.super .sc-info p,
|
||||
.super .sc-info .sc-info-close,
|
||||
.super .sc-info .sc-download {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.super .sc-info.active p,
|
||||
.super .sc-info.active .sc-info-close,
|
||||
.super .sc-info.active .sc-download {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Volume control */
|
||||
|
||||
.super .sc-volume-slider {
|
||||
top: -60px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 12px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.super .sc-volume-slider .sc-volume-status {
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 10px;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
.horizontal .sc-player .hidden {
|
||||
display: none;
|
||||
}
|
||||
+190
@@ -0,0 +1,190 @@
|
||||
/* ----------< .vertical >---------------- */
|
||||
|
||||
.vertical .sc-player {
|
||||
width: 270px;
|
||||
height: 540px;
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.vertical .sc-player ol,
|
||||
.vertical .sc-player li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/* Artworks */
|
||||
|
||||
.vertical .sc-artwork-list {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vertical .sc-artwork-list li {
|
||||
list-style-type: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical .sc-artwork-list li.active {
|
||||
list-style-type: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vertical .sc-artwork-list img {
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vertical .sc-no-artwork {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
.vertical .sc-controls {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: -25px;
|
||||
margin-top: -25px;
|
||||
top: 25%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.vertical .sc-controls > * {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Scrubber */
|
||||
|
||||
.vertical .sc-scrubber {
|
||||
position: absolute;
|
||||
bottom: 280px;
|
||||
height: 40px;
|
||||
width: 250px;
|
||||
left: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vertical .sc-time-span {
|
||||
height: 30px;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vertical .sc-buffer,
|
||||
.vertical .sc-played {
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.vertical .sc-time-span img {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vertical .sc-time-indicators {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 235px;
|
||||
}
|
||||
|
||||
.vertical .sc-player.played .sc-time-indicators,
|
||||
.vertical .sc-player.paused .sc-time-indicators {
|
||||
top: 190px;
|
||||
}
|
||||
|
||||
/* Track list */
|
||||
|
||||
.vertical .sc-trackslist {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.vertical .sc-trackslist li {
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
padding: 3px 30px 3px 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vertical .sc-track-duration {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
/* Track info */
|
||||
|
||||
.vertical .sc-info {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
padding: 5px;
|
||||
z-index: 1;
|
||||
overflow: auto;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.vertical .sc-info-toggle {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vertical .sc-info-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vertical .sc-info,
|
||||
.vertical .sc-info-toggle.active,
|
||||
.vertical .sc-player .sc-scrubber {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.vertical .sc-info.active,
|
||||
.vertical .sc-player.played .sc-scrubber,
|
||||
.vertical .sc-player.paused .sc-scrubber {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Volume control */
|
||||
|
||||
.vertical .sc-volume-slider {
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
width: 110px;
|
||||
height: 12px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.vertical .sc-volume-slider .sc-volume-status {
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 10px;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
.vertical .sc-player .hidden {
|
||||
display: none;
|
||||
}
|
||||
BIN
Binary file not shown.
@@ -0,0 +1,751 @@
|
||||
/*
|
||||
* SoundCloud Pure Player
|
||||
*
|
||||
* The project to rewrite https://github.com/soundcloud/soundcloud-custom-player ((c) Matas Petrikas, MIT)
|
||||
* on a pure js code.
|
||||
* Original project source code:
|
||||
* https://github.com/OpenA/soundcloud-pure-player
|
||||
*
|
||||
* Usage:
|
||||
* <a href="https://soundcloud.com/ueffin-chatlan/reminiscences" class="sc-player">My new dub track</a>
|
||||
* The link will be automatically replaced by the HTML based player
|
||||
*/
|
||||
|
||||
function SoundCloudAPI() {
|
||||
|
||||
var _$ = this;
|
||||
|
||||
Object.defineProperties(this, {
|
||||
version: {
|
||||
enumerable: true,
|
||||
value: '1.0'
|
||||
},
|
||||
apiKey: {
|
||||
enumerable: true,
|
||||
writable: true,
|
||||
value: 'htuiRd1JP11Ww0X72T1C3g'
|
||||
},
|
||||
debug: {
|
||||
enumerable: true,
|
||||
writable: true,
|
||||
value: true
|
||||
},
|
||||
getTracks : { value: $getTracks },
|
||||
fetch : { value: $fetch }
|
||||
});
|
||||
|
||||
function $fetch(url, callback, errorback) {
|
||||
|
||||
if (!url) {
|
||||
return $panic('requested url is "'+ url +'"', errorback);
|
||||
}
|
||||
if (typeof callback !== 'function') {
|
||||
return (window.Promise ? new Promise(function(resolve, reject) {
|
||||
$fetch(url, resolve, reject)
|
||||
}) : null);
|
||||
}
|
||||
|
||||
var protocol = (location.protocol === 'https:' ? 'https:' : 'http:'),
|
||||
resolve = protocol +'//api.soundcloud.com/resolve?url=',
|
||||
params = 'format=json&consumer_key='+ _$.apiKey, apiUrl;
|
||||
|
||||
// force the secure url in unsecure environment
|
||||
url = url.replace(/^https?:/, protocol);
|
||||
|
||||
// check if it's already a resolved api url
|
||||
if ((/api\.soundcloud\.com/).test(url)) {
|
||||
apiUrl = url + '?' + params;
|
||||
} else {
|
||||
apiUrl = resolve + url + '&' + params;
|
||||
}
|
||||
|
||||
var xhr = new XMLHttpRequest;
|
||||
xhr.onreadystatechange = function() {
|
||||
if (this.readyState !== 4)
|
||||
return;
|
||||
if (this.status === 200) {
|
||||
try {
|
||||
var data = JSON.parse(this.responseText);
|
||||
} catch(log) {
|
||||
if (_$.debug && window.console) {
|
||||
console.error(log)
|
||||
}
|
||||
} finally {
|
||||
callback(data);
|
||||
}
|
||||
} else {
|
||||
return $panic('unable to GET '+ url +' ('+ this.status +
|
||||
(!this.statusText ? '' : ' '+ this.statusText) +')', errorback);
|
||||
}
|
||||
};
|
||||
xhr.open('GET', apiUrl, true);
|
||||
xhr.send(null);
|
||||
}
|
||||
|
||||
function $panic(msg, errorback) {
|
||||
if (_$.debug && window.console) {
|
||||
console.error('SoundCloudAPI: '+ msg);
|
||||
}
|
||||
if (typeof errorback !== 'function') {
|
||||
return (window.Promise ? new Promise(function(resolve, reject) {
|
||||
reject(new EvalError(msg));
|
||||
}) : null);
|
||||
} else
|
||||
errorback(new EvalError(msg));
|
||||
}
|
||||
|
||||
function $getTracks(url, callback, errorback) {
|
||||
|
||||
if (!url) {
|
||||
return $panic('requested url is "'+ url +'"', errorback);
|
||||
}
|
||||
if (typeof callback !== 'function') {
|
||||
return (window.Promise ? new Promise(function(resolve, reject) {
|
||||
$getTracks(url, resolve, reject)
|
||||
}) : null);
|
||||
}
|
||||
|
||||
var $bound = function(data) {
|
||||
if (data) {
|
||||
if (data.tracks) {
|
||||
// log('data.tracks', data.tracks);
|
||||
callback(data.tracks);
|
||||
} else if (Array.isArray(data)) {
|
||||
callback(data);
|
||||
} else if (data.duration){
|
||||
// a secret link fix, till the SC API returns permalink with secret on secret response
|
||||
data.permalink_url = url;
|
||||
// if track, add to player
|
||||
callback([data]);
|
||||
} else if (data.creator || data.username) {
|
||||
// get user or group tracks, or favorites
|
||||
$fetch(data.uri + (data.username && url.indexOf('favorites') != -1 ? '/favorites' : '/tracks'), $bound, errorback);
|
||||
}
|
||||
}
|
||||
}
|
||||
$fetch(url, $bound, errorback);
|
||||
}
|
||||
};
|
||||
|
||||
(function() {
|
||||
|
||||
var SC = {
|
||||
'API': new SoundCloudAPI,
|
||||
'Global': false,
|
||||
'Volume': 0.8,
|
||||
'Tracks': {},
|
||||
'Object': {},
|
||||
get 'Progress'() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
var _handler = 'ontouchstart' in window ? {
|
||||
start: 'touchstart',
|
||||
move: 'touchmove',
|
||||
end: 'touchend',
|
||||
getCoords: function(e) {
|
||||
return (e.touches.length === 1 ? { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY } : null);
|
||||
}
|
||||
} : {
|
||||
start: 'mousedown',
|
||||
move: 'mousemove',
|
||||
end: 'mouseup',
|
||||
getCoords: function(e) {
|
||||
return (e.button === 0 ? { x: e.clientX, y: e.clientY } : null);
|
||||
}
|
||||
};
|
||||
|
||||
var _Current_ = {
|
||||
|
||||
SavedState : null,
|
||||
TrackLoaded: null,
|
||||
SelectTrack: null,
|
||||
PlayerNode : null,
|
||||
AudioDevice: createAudioDevice(),
|
||||
/* Complex */
|
||||
set 'Player Volume' (vol) {
|
||||
this.AudioDevice.volume = this.SavedState.Volume = vol;
|
||||
this.PlayerNode['_volume_'].firstElementChild.style['width'] = (vol * 100) +'%';
|
||||
},
|
||||
get 'Player Volume' () {
|
||||
return this.PlayerNode['_volume_'].firstElementChild.style['width'];
|
||||
},
|
||||
|
||||
set 'Track Duration' (sec) {
|
||||
this.TrackLoaded.duration = sec;
|
||||
this.PlayerNode['_duration_'].textContent = (sec = timeCalc(sec));
|
||||
this.SelectTrack['_duration_'].textContent = sec;
|
||||
},
|
||||
get 'Track Duration' () {
|
||||
return this.SelectTrack['_duration_'].textContent;
|
||||
},
|
||||
|
||||
set 'Track Progress' (sec) {
|
||||
this.SavedState.Progress = sec;
|
||||
this.PlayerNode['_position_'].textContent = timeCalc(sec);
|
||||
this.PlayerNode['_progress_'].style['width'] = (sec / this.TrackLoaded.duration * 100) +'%';
|
||||
},
|
||||
get 'Track Progress' () {
|
||||
return this.PlayerNode['_progress_'].style['width'];
|
||||
},
|
||||
|
||||
set 'Track Buffered' (buf) {
|
||||
this.PlayerNode['_buffer_'].style['width'] = buf +'%';
|
||||
},
|
||||
get 'Track Buffered' () {
|
||||
return this.PlayerNode['_buffer_'].style['width'] === '100%';
|
||||
},
|
||||
|
||||
invokeEvent: function(name) {
|
||||
this.PlayerNode.dispatchEvent(
|
||||
new CustomEvent(name, {
|
||||
bubbles: true, cancelable: true,
|
||||
detail: {
|
||||
track: this.TrackLoaded, device: this.AudioDevice
|
||||
}
|
||||
}));
|
||||
},
|
||||
|
||||
connect: function(player_node, track_node, saved_state) {
|
||||
|
||||
if (saved_state) {
|
||||
this.SavedState = saved_state;
|
||||
}
|
||||
|
||||
if (player_node && player_node !== this.PlayerNode) {
|
||||
if (this.PlayerNode) {
|
||||
this.PlayerNode[ '_volume_' ]['on'+ _handler.start] = null;
|
||||
this.PlayerNode['_waveform_']['on'+ _handler.start] = null;
|
||||
}
|
||||
this.PlayerNode = ('_trackslist_' in player_node ? player_node : catchKeyElements('player', player_node));
|
||||
this.PlayerNode[ '_volume_' ]['on'+ _handler.start] = barChanger;
|
||||
this.PlayerNode['_waveform_']['on'+ _handler.start] = barChanger;
|
||||
this['Player Volume'] = this.SavedState.Volume;
|
||||
}
|
||||
|
||||
if (!track_node) {
|
||||
track_node = this.PlayerNode.querySelector('.sc-track.active') || this.PlayerNode['_trackslist_'].firstElementChild;
|
||||
}
|
||||
|
||||
if (track_node && track_node !== this.SelectTrack) {
|
||||
(this.PlayerNode.querySelector('.sc-track.active') || {}).className = 'sc-track';
|
||||
track_node.className = 'sc-track active';
|
||||
|
||||
this.SelectTrack = ('_duration_' in track_node ? track_node : catchKeyElements('track', track_node));
|
||||
this.TrackLoaded = SC['Tracks'][track_node.id.slice(track_node.id.lastIndexOf('_') + 1)];
|
||||
|
||||
this['Track Buffered'] = 0;
|
||||
|
||||
updateTrackInfo(this.PlayerNode, this.TrackLoaded);
|
||||
this['AudioDevice'].src = this.TrackLoaded.stream_url + (this.TrackLoaded.stream_url.indexOf('?') >= 0 ? '&' : '?') +'consumer_key='+ SC['API'].apiKey;
|
||||
this['AudioDevice'].currentTime = this.SavedState.Progress;
|
||||
this['AudioDevice'].play();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var _fileDownload = 'download' in HTMLAnchorElement.prototype ? function() {
|
||||
|
||||
var anchor = document.createElement('a');
|
||||
|
||||
(_fileDownload = function(button) {
|
||||
|
||||
var uri = button.href +'?consumer_key='+ SC['API'].apiKey,
|
||||
track = SC['Tracks'][uri.match(/\/(-?\d+)\//)[1]];
|
||||
|
||||
if (!track.downloadable) {
|
||||
|
||||
button.textContent = '0%';
|
||||
|
||||
for (var i = 0, sd = document.querySelectorAll('.sc-download'); i < sd.length; i++) {
|
||||
sd[i].className = 'sc-disabled';
|
||||
}
|
||||
|
||||
var wReq = new XMLHttpRequest;
|
||||
wReq.responseType = 'blob';
|
||||
wReq.onprogress = function(e) {
|
||||
var percent = Math.round(e.loaded / e.total * 100),
|
||||
progBar = percent +'% ';
|
||||
for (; percent > 10; percent -= 10)
|
||||
progBar += '»';
|
||||
button.textContent = progBar;
|
||||
};
|
||||
wReq.onload = function() {
|
||||
track.blob_uri = (anchor.href = window.URL.createObjectURL(wReq.response));
|
||||
track.blob_name = (anchor.download = track.title +'.'+ wReq.response.type.replace('audio/', '').replace('mpeg', 'mp3'));
|
||||
track.downloadable = !document.body.appendChild(anchor).click();
|
||||
button.textContent = '» Download «';
|
||||
while (i--) {
|
||||
sd[i].className = 'sc-download';
|
||||
}
|
||||
};
|
||||
wReq.open('GET', uri, true);
|
||||
wReq.send(null);
|
||||
} else {
|
||||
anchor.href = track.blob_uri || uri;
|
||||
anchor.download = track.blob_name || '';
|
||||
document.body.appendChild(anchor).click();
|
||||
}
|
||||
})(arguments[0]);
|
||||
|
||||
} : function(a) {
|
||||
window.open(a.href +'?consumer_key='+ SC['API'].apiKey, '_blank', 'width=400,height=200');
|
||||
};
|
||||
|
||||
if (SC['Global']) {
|
||||
window.addEventListener('click', onClickHandler, false);
|
||||
}
|
||||
|
||||
window.SCPurePlayer = {
|
||||
create: _scCreate,
|
||||
createGroup: _scCreateGroup
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function(e) {
|
||||
this.removeEventListener(e.type, arguments.callee, false);
|
||||
onDOMReady();
|
||||
}, false);
|
||||
} else
|
||||
onDOMReady();
|
||||
|
||||
function _scCreateGroup(links) {
|
||||
var $hash = genGroupId(),
|
||||
inact = true,
|
||||
ibx = links.length,
|
||||
$node = createPlayerDOM(ibx, $hash);
|
||||
|
||||
Array.prototype.slice.call(links, 0).forEach(function(link, it) {
|
||||
|
||||
SC['API'].getTracks(link.href, function(tracks)
|
||||
{ ibx--;
|
||||
|
||||
var tNode = createTrackDOM(tracks[0], $hash),
|
||||
tChild = $node['_trackslist_'].children['ft_'+ $hash +'_'+ it];
|
||||
|
||||
$node['_trackslist_'].replaceChild(tNode, tChild);
|
||||
|
||||
for (var j = 1; j < tracks.length; j++) {
|
||||
tChild = tNode.nextSibling;
|
||||
tNode = createTrackDOM(tracks[j], $hash);
|
||||
$node['_trackslist_'].insertBefore(tNode, tChild);
|
||||
}
|
||||
|
||||
if (it === 0) {
|
||||
inact = false;
|
||||
updateTrackInfo($node, tracks[0]);
|
||||
tNode.className += ' active';
|
||||
} else if (ibx === 0 && inact) {
|
||||
tNode = $node['_trackslist_'].firstElementChild;
|
||||
updateTrackInfo($node, SC['Tracks'][tNode.id.split('_')[2]]);
|
||||
tNode.className += ' active';
|
||||
}
|
||||
}, function(error)
|
||||
{ ibx--;
|
||||
|
||||
$node['_trackslist_'].children['ft_'+ $hash +'_'+ it].remove();
|
||||
if (ibx === 0) {
|
||||
var tNode = $node['_trackslist_'].firstElementChild;
|
||||
|
||||
if (!tNode) {
|
||||
$node.removeAttribute('id');
|
||||
} else if (inact) {
|
||||
updateTrackInfo($node, SC['Tracks'][tNode.id.split('_')[2]]);
|
||||
tNode.className += ' active';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return $node;
|
||||
}
|
||||
|
||||
function _scCreate(link) {
|
||||
var $hash = genGroupId(),
|
||||
$node = createPlayerDOM(-1, $hash);
|
||||
|
||||
SC['API'].getTracks(link.href, function(tracks){
|
||||
for (var j = 0; j < tracks.length; j++) {
|
||||
var tNode = createTrackDOM(tracks[j], $hash);
|
||||
|
||||
$node['_trackslist_'].insertBefore(
|
||||
tNode, $node['_trackslist_'].children[j]
|
||||
);
|
||||
if (j === 0) {
|
||||
updateTrackInfo($node, tracks[j]);
|
||||
tNode.className += ' active';
|
||||
}
|
||||
}
|
||||
}, function(error) {
|
||||
$node.removeAttribute('id');
|
||||
});
|
||||
|
||||
return $node;
|
||||
}
|
||||
|
||||
function onDOMReady(e) {
|
||||
Array.prototype.slice.call(document.getElementsByClassName('sc-player'), 0).forEach(function(scp) {
|
||||
var node = scp.href ? _scCreate(scp) : _scCreateGroup(scp.querySelectorAll('a[href*="soundcloud.com/"]'));
|
||||
scp.parentNode.replaceChild(node, scp);
|
||||
});
|
||||
if (_Current_['AudioDevice'].tagName === 'OBJECT') {
|
||||
var engineContainer = document.createElement('scont');
|
||||
engineContainer.className = 'sc-engine-container';
|
||||
engineContainer.setAttribute('style', 'position: absolute; left: -9000px');
|
||||
engineContainer.appendChild(_Current_['AudioDevice']);
|
||||
document.body.appendChild(engineContainer);
|
||||
}
|
||||
}
|
||||
function onEnd(e) {
|
||||
var play_next;
|
||||
_Current_.SavedState.Progress = 0;
|
||||
_Current_.invokeEvent('ended');
|
||||
if ((play_next = _Current_.SelectTrack.nextElementSibling)) {
|
||||
_Current_.connect(null, play_next);
|
||||
} else {
|
||||
_Current_.PlayerNode['_button_'].className = 'sc-play';
|
||||
_Current_.PlayerNode['_button_'].textContent = 'Play';
|
||||
_Current_.PlayerNode.className = 'sc-player';
|
||||
_Current_.SelectTrack.className = 'sc-track';
|
||||
_Current_.PlayerNode['_trackslist_'].children[0].className = 'sc-track active';
|
||||
if ((play_next = _Current_.PlayerNode.nextElementSibling) && play_next.id &&
|
||||
play_next.className.substring(0, 9) === 'sc-player') {
|
||||
_Current_.connect(play_next, null, SC['Object'][play_next.id.slice(play_next.id.indexOf('_') + 1)]);
|
||||
}
|
||||
}
|
||||
}
|
||||
function onTimeUpdate(e) {
|
||||
_Current_['Track Progress'] = e.target.currentTime;
|
||||
_Current_.invokeEvent('timeupdate');
|
||||
}
|
||||
function onBufferLoad(e) {
|
||||
if (!_Current_['Track Buffered']) {
|
||||
_Current_['Track Buffered'] = this.bytesPercent;
|
||||
}
|
||||
}
|
||||
function onClickHandler(e) {
|
||||
if (e.button != 0 || !e.target.className)
|
||||
return;
|
||||
if (e.target.className.slice(0, 3) === 'sc-') {
|
||||
var $target = e.target,
|
||||
$class = $target.classList || $target.className.split(' '),
|
||||
$sc = $class[0].split('-');
|
||||
e.preventDefault();
|
||||
switch ($sc[1]) {
|
||||
case 'download':
|
||||
_fileDownload($target);
|
||||
break;
|
||||
case 'info':
|
||||
if ($sc[2] === 'close') {
|
||||
$target.parentNode.className = 'sc-info';
|
||||
} else if ($sc[2] === 'toggle') {
|
||||
$target.parentNode.children[1].className = 'sc-info active';
|
||||
}
|
||||
break;
|
||||
case 'track':
|
||||
var $player = $target.parentNode.parentNode;
|
||||
if ($sc[2]) {
|
||||
$player = $player.parentNode;
|
||||
$target = $target.parentNode;
|
||||
}
|
||||
var $obj = SC['Object'][$player.id.slice($player.id.indexOf('_') + 1)];
|
||||
$obj.Progress = 0;
|
||||
_Current_.connect($player, $target, $obj);
|
||||
break;
|
||||
case 'play':
|
||||
var $player = $target.parentNode.parentNode;
|
||||
if (!$player.id)
|
||||
return;
|
||||
_Current_.connect($player, null, SC['Object'][$player.id.slice($player.id.indexOf('_') + 1)]);
|
||||
case 'pause':
|
||||
_Current_.AudioDevice[$sc[1]]();
|
||||
case 'disabled':
|
||||
}
|
||||
}
|
||||
}
|
||||
function onPlayerAction(e) {
|
||||
for (var i = 0, el = document.querySelectorAll(
|
||||
'.sc-pause, .sc-player.played, .sc-player.paused'
|
||||
); i < el.length; i++) {
|
||||
if (el[i].className === 'sc-pause') {
|
||||
el[i].className = 'sc-play';
|
||||
el[i].textContent = 'Play' ;
|
||||
} else {
|
||||
el[i].className = 'sc-player';
|
||||
}
|
||||
}
|
||||
var ype = (e.type === 'play' ? 'ause' : 'lay')
|
||||
_Current_.PlayerNode['_button_'].className = 'sc-p'+ ype;
|
||||
_Current_.PlayerNode['_button_'].textContent = 'P' + ype;
|
||||
_Current_.PlayerNode.className = 'sc-player '+ e.type + (e.type === 'play' ? 'ed' : 'd');
|
||||
_Current_.invokeEvent(e.type);
|
||||
}
|
||||
function barChanger(e) {
|
||||
var coords = _handler.getCoords(e);
|
||||
if (!coords) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
var barMove, barEnd;
|
||||
var rect = this.getBoundingClientRect(),
|
||||
x = (coords.x - rect.left) / ('width' in rect ? rect.width : (rect.width = rect.right - rect.left));
|
||||
|
||||
if (this === _Current_.PlayerNode['_waveform_']) {
|
||||
var maxs = _Current_.TrackLoaded.duration,
|
||||
curT = _Current_['AudioDevice'].currentTime,
|
||||
seek = x > 1 ? maxs : x < 0 ? 0 : Math.floor(maxs * x * 1000000) / 1000000;
|
||||
_Current_['AudioDevice'].ontimeupdate = null;
|
||||
_Current_['Track Progress'] = seek;
|
||||
if (seek > curT || curT < seek) {
|
||||
_Current_.invokeEvent('seeking');
|
||||
}
|
||||
barMove = function(eM) {
|
||||
maxs = _Current_.TrackLoaded.duration;
|
||||
x = (_handler.getCoords(eM).x - rect.left) / rect.width;
|
||||
seek = x > 1 ? maxs : x < 0 ? 0 : Math.floor(maxs * x * 1000000) / 1000000;
|
||||
_Current_['Track Progress'] = seek;
|
||||
_Current_.invokeEvent('seeking');
|
||||
}
|
||||
barEnd = function(eE) {
|
||||
_Current_['AudioDevice'].ontimeupdate = onTimeUpdate;
|
||||
_Current_['AudioDevice'].currentTime = seek;
|
||||
_Current_.invokeEvent('seeked');
|
||||
window.removeEventListener(_handler.move, barMove, false);
|
||||
window.removeEventListener(eE.type, barEnd, false);
|
||||
}
|
||||
} else if (this === _Current_.PlayerNode['_volume_']) {
|
||||
var vol = x > 1 ? 1 : x < 0 ? 0 : Math.round(x * 1000) / 1000,
|
||||
sav = _Current_.SavedState.Volume;
|
||||
if (sav > vol || sav < vol) {
|
||||
_Current_.invokeEvent('volumechange');
|
||||
}
|
||||
_Current_['Player Volume'] = (sav = vol);
|
||||
barMove = function(eM) {
|
||||
x = (_handler.getCoords(eM).x - rect.left) / rect.width;
|
||||
vol = x > 1 ? 1 : x < 0 ? 0 : Math.round(x * 1000) / 1000;
|
||||
if (sav > vol || sav < vol) {
|
||||
_Current_.invokeEvent('volumechange');
|
||||
}
|
||||
_Current_['Player Volume'] = vol;
|
||||
}
|
||||
barEnd = function(eE) {
|
||||
window.removeEventListener(_handler.move, barMove, false);
|
||||
window.removeEventListener(eE.type, barEnd, false);
|
||||
}
|
||||
}
|
||||
window.addEventListener(_handler.move, barMove, false);
|
||||
window.addEventListener(_handler.end, barEnd, false);
|
||||
}
|
||||
|
||||
function createAudioDevice(url) {
|
||||
var audio, html5, flash;
|
||||
if (typeof HTMLAudioElement !== 'undefined') {
|
||||
audio = new Audio;
|
||||
html5 = audio.canPlayType && (/maybe|probably/).test(audio.canPlayType('audio/mpeg'));
|
||||
}
|
||||
if (!html5) {
|
||||
audio = document.createElement('object');
|
||||
audio.id = 'scPlayerEngine';
|
||||
audio.height = 1;
|
||||
audio.width = 1;
|
||||
audio.type = 'application/x-shockwave-flash';
|
||||
audio.data = '/js/player_mp3_js.swf';
|
||||
audio.innerHTML = '<param name="movie" value="/js/player_mp3_js.swf" /><param name="AllowScriptAccess" value="always" /><param name="FlashVars" value="listener=flashBack2343191116fr_scEngine&interval=500" />';
|
||||
|
||||
flash = (window['flashBack2343191116fr_scEngine'] = new Object);
|
||||
flash.onInit = function() {
|
||||
Object.defineProperties(audio, {
|
||||
play : { value: function() {
|
||||
flash.status = 'process';
|
||||
this.SetVariable('method:play', '');
|
||||
this.SetVariable('enabled', 'true');
|
||||
onPlayerAction({type: 'play'}); }},
|
||||
pause : { value: function() {
|
||||
flash.status = 'waiting';
|
||||
this.SetVariable('method:pause', '');
|
||||
onPlayerAction({type: 'pause'}); }},
|
||||
//stop : { value: function() { this.SetVariable('method:stop', '') }},
|
||||
src : { get: function() { return this.url },
|
||||
set: function(url) { this.SetVariable('method:setUrl', url) }},
|
||||
ended : { get: function() { return flash.status === 'ended' }},
|
||||
playing : { get: function() { return JSON.parse(flash.isPlaying); }},
|
||||
duration : { get: function() { return Number(flash.duration) / 1000 || 0 }},
|
||||
currentTime : { get: function() { return Number(flash.position) / 1000 || 0 },
|
||||
set: function(rel) { this.SetVariable('method:setPosition', (rel * 1000)) }},
|
||||
volume : { get: function() { return Number(flash.volume) / 100 },
|
||||
set: function(vol) { this.SetVariable('method:setVolume', (vol * 100)) }},
|
||||
ontimeupdate: { set: function(fn) { flash.onTimeUpdate = fn || function(){} }}
|
||||
});
|
||||
audio['volume'] = SC.Volume;
|
||||
this.position = 0;
|
||||
};
|
||||
flash.onTimeUpdate = onTimeUpdate;
|
||||
flash.onBufferLoad = onBufferLoad;
|
||||
flash.onUpdate = function() {
|
||||
switch (this.status) {
|
||||
case 'process':
|
||||
this.onTimeUpdate({target: audio});
|
||||
if (this.position == '0' && this.isPlaying == 'false') {
|
||||
this.status = 'ended';
|
||||
onEnd();
|
||||
}
|
||||
case 'waiting':
|
||||
this.onBufferLoad();
|
||||
}
|
||||
};
|
||||
} else {
|
||||
var _BufferLoad = null;
|
||||
audio['volume'] = SC.Volume;
|
||||
audio['onplay'] = audio['onpause'] = onPlayerAction;
|
||||
audio['onended'] = onEnd;
|
||||
audio['ontimeupdate'] = onTimeUpdate;
|
||||
audio['onerror'] = function(e) {
|
||||
clearInterval(_BufferLoad);
|
||||
_Current_.invokeEvent('error');
|
||||
};
|
||||
audio['onloadedmetadata'] = function(e) {
|
||||
clearInterval(_BufferLoad);
|
||||
if (_Current_.TrackLoaded.duration !== this.duration) {
|
||||
_Current_['Track Duration'] = this.duration;
|
||||
}
|
||||
_BufferLoad = setInterval(function() {
|
||||
if (audio.buffered.length > 0) {
|
||||
var bytesPercent = audio.buffered.end(audio.buffered.length - 1) / audio.duration;
|
||||
if (bytesPercent === 1) {
|
||||
clearInterval(_BufferLoad);
|
||||
}
|
||||
_Current_['Track Buffered'] = bytesPercent * 100;
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
}
|
||||
return audio;
|
||||
}
|
||||
function createTrackDOM(track, hash) {
|
||||
SC['Tracks'][track.id] = track;
|
||||
var li = document.createElement('li');
|
||||
li.id = 'sc-t_'+ hash +'_'+ track.id;
|
||||
li.className = 'sc-track';
|
||||
li.appendChild((
|
||||
li['_title_'] = document.createElement('a')));
|
||||
li['_title_'].href = track.permalink_url;
|
||||
li['_title_'].className = 'sc-track-title';
|
||||
li['_title_'].textContent = track.title;
|
||||
li.appendChild((
|
||||
li['_duration_'] = document.createElement('span')));
|
||||
li['_duration_'].className = 'sc-track-duration';
|
||||
li['_duration_'].textContent = timeCalc((track.duration /= 1000));
|
||||
return li;
|
||||
}
|
||||
function _li(h, l) {
|
||||
var li ='', i;
|
||||
for (i = 0; i < l; i++)
|
||||
li += '<span id="ft_'+h+'_'+i+'"></span>';
|
||||
return li;
|
||||
}
|
||||
function createPlayerDOM(len, hash) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'sc-player loading';
|
||||
div.innerHTML = '<ol class="sc-artwork-list"></ol>\n'+
|
||||
'<div class="sc-info"><h3></h3><h4></h4><p></p><a class="sc-download">» Download «</a>\n'+
|
||||
' <div class="sc-info-close">X</div>\n'+
|
||||
'</div>\n'+
|
||||
'<div class="sc-controls">\n'+
|
||||
' <div class="sc-play">Play</div>\n'+
|
||||
'</div>\n'+
|
||||
'<ol class="sc-trackslist">'+ _li(hash, len) +'</ol>\n'+
|
||||
'<div class="sc-info-toggle">Info</div>\n'+
|
||||
'<div class="sc-time-indicators">\n'+
|
||||
' <span class="sc-position"></span> | <span class="sc-duration"></span>\n'+
|
||||
'</div>\n'+
|
||||
'<div class="sc-scrubber">\n'+
|
||||
' <div class="sc-volume-slider">\n'+
|
||||
' <span class="sc-volume-status" style="width: '+ (SC.Volume * 100) +'%;"></span>\n'+
|
||||
' </div>\n'+
|
||||
' <div class="sc-time-span">\n'+
|
||||
' <div class="sc-buffer"></div>\n'+
|
||||
' <div class="sc-played"></div>\n'+
|
||||
' <div class="sc-waveform-container"></div>\n'+
|
||||
' </div>\n'+
|
||||
'</div>';
|
||||
if (hash && len) {
|
||||
div.id = 'sc-obj_'+ hash;
|
||||
if (!SC['Global']) {
|
||||
SC['Object'][hash] = { Volume: SC.Volume, Progress: 0 }
|
||||
div.addEventListener('click', onClickHandler, false);
|
||||
} else {
|
||||
SC['Object'][hash] = SC;
|
||||
}
|
||||
}
|
||||
return catchKeyElements('player', div);
|
||||
}
|
||||
|
||||
function catchKeyElements(name, _CN_) {
|
||||
switch(name) {
|
||||
case 'player':
|
||||
_CN_['_artwork_'] = _CN_.querySelector('.sc-artwork-list');
|
||||
_CN_['_info_'] = _CN_.querySelector('.sc-info');
|
||||
_CN_['_button_'] = _CN_.querySelector('.sc-controls').firstElementChild;
|
||||
_CN_['_trackslist_'] = _CN_.querySelector('.sc-trackslist');
|
||||
_CN_['_volume_'] = _CN_.querySelector('.sc-volume-slider');
|
||||
_CN_['_waveform_'] = _CN_.querySelector('.sc-waveform-container');
|
||||
_CN_['_buffer_'] = _CN_.querySelector('.sc-buffer');
|
||||
_CN_['_progress_'] = _CN_.querySelector('.sc-played');
|
||||
_CN_['_duration_'] = _CN_.querySelector('.sc-duration');
|
||||
_CN_['_position_'] = _CN_.querySelector('.sc-position');
|
||||
break;
|
||||
case 'track':
|
||||
_CN_['_duration_'] = _CN_.querySelector('.sc-track-duration');
|
||||
_CN_['_title_'] = _CN_.querySelector('.sc-track-title');
|
||||
}
|
||||
|
||||
return _CN_;
|
||||
}
|
||||
|
||||
function updateTrackInfo(node, track) {
|
||||
var artwork = track.artwork_url || track.user.avatar_url;
|
||||
if (artwork && !/\/(?:default_avatar_|avatars-000044695144-c5ssgx-)/.test(artwork)) {
|
||||
if (node['_artwork_'].clientWidth > 100) {
|
||||
var s = findBestMatch([200, 250, 300, 500], node['_artwork_'].clientWidth);
|
||||
artwork = artwork.replace('-large', '-t'+ s +'x'+ s +'')
|
||||
};
|
||||
(node['_artwork_'].firstElementChild || node['_artwork_'].appendChild( document.createElement('img'))).src = artwork;
|
||||
}
|
||||
node['_info_'].children[0].innerHTML = '<a href="'+ track.permalink_url +'">'+ track.title +'</a>';
|
||||
node['_info_'].children[1].innerHTML = 'by <a href="'+ track.user.permalink_url +'">'+ track.user.username +'</a>';
|
||||
node['_info_'].children[2].innerHTML = (track.description || 'no Description');
|
||||
node['_info_'].children[3].href = (track.downloadable ? track.download_url : track.stream_url);
|
||||
// update the track duration in the progress bar
|
||||
node['_duration_'].textContent = timeCalc(track.duration);
|
||||
node['_position_'].textContent = '00.00';
|
||||
// put the waveform into the progress bar
|
||||
(node['_waveform_'].firstElementChild || node['_waveform_'].appendChild( document.createElement('img'))).src = track.waveform_url;
|
||||
}
|
||||
|
||||
function findBestMatch(list, toMatch) {
|
||||
var item, i = 0, len = list.length;
|
||||
while (i < len && (item = list[i]) < toMatch)
|
||||
i++;
|
||||
return item;
|
||||
}
|
||||
function timeCalc(secn) {
|
||||
var s, m, h;
|
||||
s = Math.floor(secn) % 60;
|
||||
m = Math.floor(secn / 60) % 60;
|
||||
h = Math.floor(secn / (60 * 60));
|
||||
|
||||
return (h > 0 ? h +'.' : '') + (m < 10 && m > -1 ? '0'+ m : m) +'.'+ (s < 10 && s > -1 ? '0'+ s : s);
|
||||
}
|
||||
function genGroupId() {
|
||||
var n = Math.round(Math.random() * 12345679);
|
||||
while (n in SC['Object']) n++;
|
||||
return (SC['Object'][n] = n);
|
||||
}
|
||||
if (!('preventDefault' in Event.prototype)) {
|
||||
Event.prototype.preventDefault = function() {
|
||||
this.returnValue = false;
|
||||
};
|
||||
}
|
||||
})();
|
||||
+5
-3
@@ -313,17 +313,19 @@
|
||||
},
|
||||
headers: {
|
||||
"accept" : "application/json; charset=utf-8",
|
||||
"Content-Type" : "application/x-www-form-urlencoded",
|
||||
"Authorization": "OAuth 965bd4363fdd909723749b003be67125"
|
||||
"Content-Type" : "application/x-www-form-urlencoded"
|
||||
}
|
||||
}).done(function (data) {
|
||||
console.log('Token', data);
|
||||
});
|
||||
|
||||
|
||||
// $.ajax({
|
||||
// "dataType": "json",
|
||||
// "url": apiUrl,
|
||||
// "data": {},
|
||||
// "headers": {
|
||||
// "Authorization": "OAuth " + apiKey
|
||||
// "Authorization": "OAuth bb68647335a47f104a86dcddf4e70fa8"
|
||||
// },
|
||||
// "success": function(data) {
|
||||
// // log('data loaded', link.url, data);
|
||||
|
||||
@@ -42,8 +42,8 @@ Drupal.behaviors.init_theme.attach = function (context) {
|
||||
Drupal.behaviors.init_timeline = {};
|
||||
Drupal.behaviors.init_timeline.attach = function (context) {
|
||||
|
||||
$.paScPlayer.defaults.onDomReady = null;
|
||||
$.paScPlayer.defaults.loadArtworks = 0;
|
||||
// $.paScPlayer.defaults.onDomReady = null;
|
||||
// $.paScPlayer.defaults.loadArtworks = 0;
|
||||
|
||||
if($('html').is('.oldie'))
|
||||
{
|
||||
@@ -1440,12 +1440,18 @@ Drupal.behaviors.init_timeline.attach = function (context) {
|
||||
var $container = $container || $('body');
|
||||
var ap = ap || false;
|
||||
// console.log('_initPaScPlayer');
|
||||
$.paScPlayer.stopAll();
|
||||
// $.paScPlayer.stopAll();
|
||||
var $links = $('a[rel="soundcloud"]', $container);
|
||||
// console.log('$links', $links);
|
||||
// // console.log('$links', $links);
|
||||
if($links.size()){
|
||||
$links.parents('.field-item').find('span.ext').remove();
|
||||
$links.paScPlayer({autoplay:ap});
|
||||
// $links.parents('.field-item').find('span.ext').remove();
|
||||
// $links.paScPlayer({autoplay:ap});
|
||||
/* add players for each link */
|
||||
for ( var i = 0; i < $links.length; i++ ) {
|
||||
$links[i].parentNode.replaceChild(
|
||||
SCPurePlayer.create($links[i]), $links[i]
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,9 @@ stylesheets[all][] = "css/normalize.css"
|
||||
stylesheets[all][] = "fonts/museo_webfont_kit/MyFontsWebfontsKit.css"
|
||||
stylesheets[all][] = "js/libs/timeline/timeline.css"
|
||||
stylesheets[all][] = "js/libs/jquery.jscrollpane.css"
|
||||
stylesheets[all][] = ""js/libs/soundcloudcustomplayer/css/pa-sc-player.css""
|
||||
; stylesheets[all][] = "js/libs/soundcloudcustomplayer/css/pa-sc-player.css"
|
||||
stylesheets[all][] = "js/libs/soundcloud-pure-player/css/sc-player-standard/structure-horizontal.css"
|
||||
stylesheets[all][] = "js/libs/soundcloud-pure-player/css/sc-player-standard/colors-blue.css"
|
||||
stylesheets[all][] = "css/listnav.css"
|
||||
stylesheets[all][] = "css/styles.css"
|
||||
; non-semantic helper classes
|
||||
@@ -28,8 +30,9 @@ scripts[] = "js/libs/jquery.mousewheel.js"
|
||||
scripts[] = "js/libs/mwheelIntent.js"
|
||||
;scripts[] = "js/libs/grid/jquery.grid.js"
|
||||
scripts[] = "js/libs/jquery.history.js"
|
||||
scripts[] = "js/libs/soundcloudcustomplayer/js/soundcloud.player.api.js"
|
||||
scripts[] = "js/libs/soundcloudcustomplayer/js/pa-sc-player.js"
|
||||
; scripts[] = "js/libs/soundcloudcustomplayer/js/soundcloud.player.api.js"
|
||||
; scripts[] = "js/libs/soundcloudcustomplayer/js/pa-sc-player.js"
|
||||
scripts[] = "js/libs/soundcloud-pure-player/js/sc-player.js"
|
||||
scripts[] = "js/libs/jquery.listnav-2.1.js"
|
||||
scripts[] = "js/libs/jquery-cookie-master/jquery.cookie.js"
|
||||
scripts[] = "js/script.js"
|
||||
|
||||
Reference in New Issue
Block a user