Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 bachir
|
91dd1e5cee | ||
|
bachir
|
b9e038615c | ||
|
bachir
|
378985b8db |
+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;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})();
|
||||||
+109
-35
@@ -52,9 +52,11 @@
|
|||||||
secureDocument = (document.location.protocol === 'https:'),
|
secureDocument = (document.location.protocol === 'https:'),
|
||||||
// convert a SoundCloud resource URL to an API URL
|
// convert a SoundCloud resource URL to an API URL
|
||||||
scApiUrl = function(url, apiKey) {
|
scApiUrl = function(url, apiKey) {
|
||||||
|
// var resolver = ( secureDocument || (/^https/i).test(url) ? 'https' : 'http') + '://api.' + domain + '/resolve?url=',
|
||||||
|
// params = 'format=json&consumer_key=' + apiKey +'&callback=?';
|
||||||
var resolver = ( secureDocument || (/^https/i).test(url) ? 'https' : 'http') + '://api.' + domain + '/resolve?url=',
|
var resolver = ( secureDocument || (/^https/i).test(url) ? 'https' : 'http') + '://api.' + domain + '/resolve?url=',
|
||||||
params = 'format=json&consumer_key=' + apiKey +'&callback=?';
|
params = 'format=json&callback=?';
|
||||||
|
// debugger;
|
||||||
// force the secure url in the secure environment
|
// force the secure url in the secure environment
|
||||||
if( secureDocument ) {
|
if( secureDocument ) {
|
||||||
url = url.replace(/^http:/, 'https:');
|
url = url.replace(/^http:/, 'https:');
|
||||||
@@ -258,40 +260,112 @@
|
|||||||
playerObj = {node: $player, tracks: []},
|
playerObj = {node: $player, tracks: []},
|
||||||
loadUrl = function(link) {
|
loadUrl = function(link) {
|
||||||
var apiUrl = scApiUrl(link.url, apiKey);
|
var apiUrl = scApiUrl(link.url, apiKey);
|
||||||
$.getJSON(apiUrl, function(data) {
|
// $.getJSON(apiUrl, function(data) {
|
||||||
// log('data loaded', link.url, data);
|
// // log('data loaded', link.url, data);
|
||||||
index += 1;
|
// index += 1;
|
||||||
// added by Bach for MJ
|
// // added by Bach for MJ
|
||||||
data.href = link.href;
|
// data.href = link.href;
|
||||||
if(data.tracks){
|
// if(data.tracks){
|
||||||
// log('data.tracks', data.tracks);
|
// // log('data.tracks', data.tracks);
|
||||||
playerObj.tracks = playerObj.tracks.concat(data.tracks);
|
// playerObj.tracks = playerObj.tracks.concat(data.tracks);
|
||||||
}else if(data.duration){
|
// }else if(data.duration){
|
||||||
// a secret link fix, till the SC API returns permalink with secret on secret response
|
// // a secret link fix, till the SC API returns permalink with secret on secret response
|
||||||
data.permalink_url = link.url;
|
// data.permalink_url = link.url;
|
||||||
// if track, add to player
|
// // if track, add to player
|
||||||
playerObj.tracks.push(data);
|
// playerObj.tracks.push(data);
|
||||||
}else if(data.creator){
|
// }else if(data.creator){
|
||||||
// it's a group!
|
// // it's a group!
|
||||||
links.push({url:data.uri + '/tracks'});
|
// links.push({url:data.uri + '/tracks'});
|
||||||
}else if(data.username){
|
// }else if(data.username){
|
||||||
// if user, get his tracks or favorites
|
// // if user, get his tracks or favorites
|
||||||
if(/favorites/.test(link.url)){
|
// if(/favorites/.test(link.url)){
|
||||||
links.push({url:data.uri + '/favorites'});
|
// links.push({url:data.uri + '/favorites'});
|
||||||
}else{
|
// }else{
|
||||||
links.push({url:data.uri + '/tracks'});
|
// links.push({url:data.uri + '/tracks'});
|
||||||
}
|
// }
|
||||||
}else if($.isArray(data)){
|
// }else if($.isArray(data)){
|
||||||
playerObj.tracks = playerObj.tracks.concat(data);
|
// playerObj.tracks = playerObj.tracks.concat(data);
|
||||||
|
// }
|
||||||
|
// if(links[index]){
|
||||||
|
// // if there are more track to load, get them from the api
|
||||||
|
// loadUrl(links[index]);
|
||||||
|
// }else{
|
||||||
|
// // if loading finishes, anounce it to the GUI
|
||||||
|
// playerObj.node.trigger({type:'onTrackDataLoaded', playerObj: playerObj, url: apiUrl});
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// https://developers.soundcloud.com/docs/api/guide#authentication
|
||||||
|
// # obtain the access token
|
||||||
|
// $ curl -X POST "https://api.soundcloud.com/oauth2/token" \
|
||||||
|
// -H "accept: application/json; charset=utf-8" \
|
||||||
|
// -H "Content-Type: application/x-www-form-urlencoded" \
|
||||||
|
// --data-urlencode "grant_type=client_credentials" \
|
||||||
|
// --data-urlencode "client_id=YOUR_CLIENT_ID" \
|
||||||
|
// --data-urlencode "client_secret=YOUR_CLIENT_SECRET"
|
||||||
|
$.ajax({
|
||||||
|
method: 'POST',
|
||||||
|
url: 'https://api.soundcloud.com/oauth2/token',
|
||||||
|
data: {
|
||||||
|
'grant_type' : "client_credentials",
|
||||||
|
'client_id' : "965bd4363fdd909723749b003be67125",
|
||||||
|
'client_secret': "bb68647335a47f104a86dcddf4e70fa8"
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
"accept" : "application/json; charset=utf-8",
|
||||||
|
"Content-Type" : "application/x-www-form-urlencoded"
|
||||||
}
|
}
|
||||||
if(links[index]){
|
}).done(function (data) {
|
||||||
// if there are more track to load, get them from the api
|
console.log('Token', data);
|
||||||
loadUrl(links[index]);
|
});
|
||||||
}else{
|
|
||||||
// if loading finishes, anounce it to the GUI
|
|
||||||
playerObj.node.trigger({type:'onTrackDataLoaded', playerObj: playerObj, url: apiUrl});
|
// $.ajax({
|
||||||
}
|
// "dataType": "json",
|
||||||
});
|
// "url": apiUrl,
|
||||||
|
// "data": {},
|
||||||
|
// "headers": {
|
||||||
|
// "Authorization": "OAuth bb68647335a47f104a86dcddf4e70fa8"
|
||||||
|
// },
|
||||||
|
// "success": function(data) {
|
||||||
|
// // log('data loaded', link.url, data);
|
||||||
|
// index += 1;
|
||||||
|
// // added by Bach for MJ
|
||||||
|
// data.href = link.href;
|
||||||
|
// if(data.tracks){
|
||||||
|
// // log('data.tracks', data.tracks);
|
||||||
|
// playerObj.tracks = playerObj.tracks.concat(data.tracks);
|
||||||
|
// }else if(data.duration){
|
||||||
|
// // a secret link fix, till the SC API returns permalink with secret on secret response
|
||||||
|
// data.permalink_url = link.url;
|
||||||
|
// // if track, add to player
|
||||||
|
// playerObj.tracks.push(data);
|
||||||
|
// }else if(data.creator){
|
||||||
|
// // it's a group!
|
||||||
|
// links.push({url:data.uri + '/tracks'});
|
||||||
|
// }else if(data.username){
|
||||||
|
// // if user, get his tracks or favorites
|
||||||
|
// if(/favorites/.test(link.url)){
|
||||||
|
// links.push({url:data.uri + '/favorites'});
|
||||||
|
// }else{
|
||||||
|
// links.push({url:data.uri + '/tracks'});
|
||||||
|
// }
|
||||||
|
// }else if($.isArray(data)){
|
||||||
|
// playerObj.tracks = playerObj.tracks.concat(data);
|
||||||
|
// }
|
||||||
|
// if(links[index]){
|
||||||
|
// // if there are more track to load, get them from the api
|
||||||
|
// loadUrl(links[index]);
|
||||||
|
// }else{
|
||||||
|
// // if loading finishes, anounce it to the GUI
|
||||||
|
// playerObj.node.trigger({type:'onTrackDataLoaded', playerObj: playerObj, url: apiUrl});
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// "error": function(errorThrown) {
|
||||||
|
// console.error(JSON.stringify(errorThrown.error()));
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
};
|
};
|
||||||
// update current API key
|
// update current API key
|
||||||
apiKey = key;
|
apiKey = key;
|
||||||
|
|||||||
@@ -42,8 +42,8 @@ Drupal.behaviors.init_theme.attach = function (context) {
|
|||||||
Drupal.behaviors.init_timeline = {};
|
Drupal.behaviors.init_timeline = {};
|
||||||
Drupal.behaviors.init_timeline.attach = function (context) {
|
Drupal.behaviors.init_timeline.attach = function (context) {
|
||||||
|
|
||||||
$.paScPlayer.defaults.onDomReady = null;
|
// $.paScPlayer.defaults.onDomReady = null;
|
||||||
$.paScPlayer.defaults.loadArtworks = 0;
|
// $.paScPlayer.defaults.loadArtworks = 0;
|
||||||
|
|
||||||
if($('html').is('.oldie'))
|
if($('html').is('.oldie'))
|
||||||
{
|
{
|
||||||
@@ -1440,13 +1440,19 @@ Drupal.behaviors.init_timeline.attach = function (context) {
|
|||||||
var $container = $container || $('body');
|
var $container = $container || $('body');
|
||||||
var ap = ap || false;
|
var ap = ap || false;
|
||||||
// console.log('_initPaScPlayer');
|
// console.log('_initPaScPlayer');
|
||||||
$.paScPlayer.stopAll();
|
// $.paScPlayer.stopAll();
|
||||||
var $links = $('a[rel="soundcloud"]', $container);
|
// var $links = $('a[rel="soundcloud"]', $container);
|
||||||
// console.log('$links', $links);
|
// // // console.log('$links', $links);
|
||||||
if($links.size()){
|
// if($links.size()){
|
||||||
$links.parents('.field-item').find('span.ext').remove();
|
// // $links.parents('.field-item').find('span.ext').remove();
|
||||||
$links.paScPlayer({autoplay:ap});
|
// // $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]
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
_initPaScPlayer();
|
_initPaScPlayer();
|
||||||
|
|||||||
@@ -13,7 +13,9 @@ stylesheets[all][] = "css/normalize.css"
|
|||||||
stylesheets[all][] = "fonts/museo_webfont_kit/MyFontsWebfontsKit.css"
|
stylesheets[all][] = "fonts/museo_webfont_kit/MyFontsWebfontsKit.css"
|
||||||
stylesheets[all][] = "js/libs/timeline/timeline.css"
|
stylesheets[all][] = "js/libs/timeline/timeline.css"
|
||||||
stylesheets[all][] = "js/libs/jquery.jscrollpane.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/listnav.css"
|
||||||
stylesheets[all][] = "css/styles.css"
|
stylesheets[all][] = "css/styles.css"
|
||||||
; non-semantic helper classes
|
; non-semantic helper classes
|
||||||
@@ -28,8 +30,9 @@ scripts[] = "js/libs/jquery.mousewheel.js"
|
|||||||
scripts[] = "js/libs/mwheelIntent.js"
|
scripts[] = "js/libs/mwheelIntent.js"
|
||||||
;scripts[] = "js/libs/grid/jquery.grid.js"
|
;scripts[] = "js/libs/grid/jquery.grid.js"
|
||||||
scripts[] = "js/libs/jquery.history.js"
|
scripts[] = "js/libs/jquery.history.js"
|
||||||
scripts[] = "js/libs/soundcloudcustomplayer/js/soundcloud.player.api.js"
|
; scripts[] = "js/libs/soundcloudcustomplayer/js/soundcloud.player.api.js"
|
||||||
scripts[] = "js/libs/soundcloudcustomplayer/js/pa-sc-player.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.listnav-2.1.js"
|
||||||
scripts[] = "js/libs/jquery-cookie-master/jquery.cookie.js"
|
scripts[] = "js/libs/jquery-cookie-master/jquery.cookie.js"
|
||||||
scripts[] = "js/script.js"
|
scripts[] = "js/script.js"
|
||||||
|
|||||||
@@ -0,0 +1,60 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @file field.tpl.php
|
||||||
|
* Default template implementation to display the value of a field.
|
||||||
|
*
|
||||||
|
* This file is not used and is here as a starting point for customization only.
|
||||||
|
* @see theme_field()
|
||||||
|
*
|
||||||
|
* Available variables:
|
||||||
|
* - $items: An array of field values. Use render() to output them.
|
||||||
|
* - $label: The item label.
|
||||||
|
* - $label_hidden: Whether the label display is set to 'hidden'.
|
||||||
|
* - $classes: String of classes that can be used to style contextually through
|
||||||
|
* CSS. It can be manipulated through the variable $classes_array from
|
||||||
|
* preprocess functions. The default values can be one or more of the
|
||||||
|
* following:
|
||||||
|
* - field: The current template type, i.e., "theming hook".
|
||||||
|
* - field-name-[field_name]: The current field name. For example, if the
|
||||||
|
* field name is "field_description" it would result in
|
||||||
|
* "field-name-field-description".
|
||||||
|
* - field-type-[field_type]: The current field type. For example, if the
|
||||||
|
* field type is "text" it would result in "field-type-text".
|
||||||
|
* - field-label-[label_display]: The current label position. For example, if
|
||||||
|
* the label position is "above" it would result in "field-label-above".
|
||||||
|
*
|
||||||
|
* Other variables:
|
||||||
|
* - $element['#object']: The entity to which the field is attached.
|
||||||
|
* - $element['#view_mode']: View mode, e.g. 'full', 'teaser'...
|
||||||
|
* - $element['#field_name']: The field name.
|
||||||
|
* - $element['#field_type']: The field type.
|
||||||
|
* - $element['#field_language']: The field language.
|
||||||
|
* - $element['#field_translatable']: Whether the field is translatable or not.
|
||||||
|
* - $element['#label_display']: Position of label display, inline, above, or
|
||||||
|
* hidden.
|
||||||
|
* - $field_name_css: The css-compatible field name.
|
||||||
|
* - $field_type_css: The css-compatible field type.
|
||||||
|
* - $classes_array: Array of html class attribute values. It is flattened
|
||||||
|
* into a string within the variable $classes.
|
||||||
|
*
|
||||||
|
* @see template_preprocess_field()
|
||||||
|
* @see theme_field()
|
||||||
|
*/
|
||||||
|
?>
|
||||||
|
<?php //dsm($items, '$items '.$label); ?>
|
||||||
|
<?php if(count($items)): ?>
|
||||||
|
<section class="<?php print $classes; ?>"<?php print $attributes; ?>>
|
||||||
|
<?php if (!$label_hidden): ?>
|
||||||
|
<div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>: </div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<div class="field-items"<?php print $content_attributes; ?>>
|
||||||
|
<?php foreach ($items as $delta => $item): ?>
|
||||||
|
<div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>>
|
||||||
|
<audio src="<?php print render($item); ?>" controls></audio>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<?php endif; ?>
|
||||||
Reference in New Issue
Block a user