Widget: MP3: Difference between revisions
From Audiopedia
Marcelheyne (talk | contribs) No edit summary |
Marcelheyne (talk | contribs) No edit summary Tag: Manual revert |
||
| (16 intermediate revisions by the same user not shown) | |||
| Line 8: | Line 8: | ||
.bar { | .bar { | ||
position: fixed; | |||
right: 0; | |||
left: 0; | |||
z-index: 1999; | |||
height: 60px; | |||
padding-right: 10px; | |||
padding-left: 10px; | |||
background-color: #E8E8E8; | |||
-webkit-backface-visibility: hidden; | |||
backface-visibility:hidden; | |||
| Line 23: | Line 23: | ||
.bar-nav { | .bar-nav { | ||
top:0; | |||
} | } | ||
| Line 29: | Line 29: | ||
.title { | .title { | ||
position: absolute; | |||
display: block; | |||
width: 100%; | |||
padding: 0; | |||
margin: 0 -10px; | |||
font-size: 17px; | |||
font-weight: 500; | |||
line-height: 44px; | |||
color: #000; | |||
text-align: center; | |||
white-space:nowrap | |||
} | } | ||
.title a { | .title a { | ||
color:inherit | |||
} | } | ||
.bar-tab { | .bar-tab { | ||
bottom: 0; | |||
display: table; | |||
z-index: 999; | |||
width: 100%; | |||
height: 60px; | |||
padding: 0; | |||
table-layout: fixed; | |||
border-bottom:0; | |||
background: #E8E8E8; | |||
position: fixed; | |||
-webkit-backface-visibility: hidden; | |||
backface-visibility:hidden; | |||
} | } | ||
.bar-tab .tab-item { | .bar-tab .tab-item { | ||
display: table-cell; | |||
width: 1%; | |||
height: 70px; | |||
color: #929292; | |||
text-align: center; | |||
vertical-align:middle | |||
} | } | ||
.bar-tab .tab-item.active, .bar-tab .tab-item:active { | .bar-tab .tab-item.active, .bar-tab .tab-item:active { | ||
color:#5B437A | |||
} | } | ||
.bar { | .bar { | ||
max-width: 700px; | |||
margin: 0 auto; | |||
-webkit-box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.2); | |||
-moz-box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.2); | -moz-box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.2); | ||
box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.2); | box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.2); | ||
| Line 84: | Line 84: | ||
.bar-mp3 { | .bar-mp3 { | ||
width: 70%; | |||
border-radius: 10px!important; | border-radius: 10px!important; | ||
| Line 91: | Line 91: | ||
.navigate-right:after, .push-right:after { | .navigate-right:after, .push-right:after { | ||
right: 15px; | |||
font-family: 'Zapf Dingbats'; | |||
content: '\276F' | |||
} | } | ||
| Line 134: | Line 131: | ||
appearance: none; | appearance: none; | ||
width: 90%; | width: 90%; | ||
margin: auto; | |||
height: 2px; | height: 2px; | ||
padding-top: 6px; | padding-top: 6px; | ||
| Line 144: | Line 141: | ||
progress.amplitude-song-played-progress:not([value]) { | progress.amplitude-song-played-progress:not([value]) { | ||
background-color: #F8F8F8; } | |||
progress[value]::-webkit-progress-bar { | progress[value]::-webkit-progress-bar { | ||
| Line 151: | Line 148: | ||
progress[value]::-moz-progress-bar { | progress[value]::-moz-progress-bar { | ||
background-color: #A9A9A9; | background-color: #A9A9A9; | ||
height: 2px;} | |||
progress[value]::-webkit-progress-value { | progress[value]::-webkit-progress-value { | ||
background-color: #A9A9A9; | background-color: #A9A9A9; | ||
height: 2px; } | |||
.time-container { | .time-container { | ||
| Line 163: | Line 160: | ||
background-color: #F8F8F8; | background-color: #F8F8F8; | ||
height: 22px; | height: 22px; | ||
border-radius: 10px 10px 0px 0px; | |||
} | } | ||
.time-container span.current-time { | .time-container span.current-time { | ||
float: left; | |||
margin-left: 10px; } | |||
.time-container span.duration { | .time-container span.duration { | ||
float: right; | |||
margin-right: 10px; } | |||
| Line 449: | Line 446: | ||
<nav class="bar bar-tab bar-mp3"> | <nav class="bar bar-tab bar-mp3"> | ||
<div class="time-container" dir="ltr"> | <div class="time-container" dir="ltr"> | ||
<progress class="amplitude-song-played-progress" id="song-played-progress" amplitude-main-song-played-progress="true"></progress> | <progress class="amplitude-song-played-progress" id="song-played-progress" amplitude-main-song-played-progress="true"></progress> | ||
<span class="current-time"> | |||
<span class="amplitude-current-time" amplitude-main-current-time="true"></span> | |||
</span> | |||
<span class="duration"> | |||
<span class="amplitude-duration-time" amplitude-main-duration-time="true"></span> | |||
</span> | |||
</div> | |||
| Line 472: | Line 469: | ||
<div id="repeat-container"> | <div id="repeat-container"> | ||
<div id="prevtop" onclick="download(' | <div id="prevtop" onclick="download('<!--{$id}-->')"></div> | ||
</div> | </div> | ||
<div id="central-control-container"> | <div id="central-control-container"> | ||
<div id="central-controls"> | |||
<div class="amplitude-play-pause" amplitude-main-play-pause="true" id="play-pause"></div> | <div class="amplitude-play-pause" amplitude-main-play-pause="true" id="play-pause" onclick="_paq.push(['trackEvent', 'Audioplay', 'Click Play', 'MP3 Playback']);"></div> | ||
</div></div> | </div></div> | ||
| Line 493: | Line 490: | ||
{ | { | ||
"url": "<!--{$id}-->"}] }); | |||
| Line 509: | Line 506: | ||
}); | }); | ||
</script> | |||
<script> | <script> | ||
function download(file) | function download(file) | ||
| Line 522: | Line 519: | ||
if (navigator.share) { | if (navigator.share) { | ||
navigator.share({ | navigator.share({ | ||
title: '<!--{$pagename}-->', | |||
url: '<!--{$url}-->', | |||
}) | }) | ||
.then(() => console.log('Successful share')) | |||
.catch((error) => console.log('Error sharing', error)); | |||
} | } | ||
}; | }; | ||