mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

first replacement of media player controls with svg

This commit is contained in:
Jan-Christoph Borchardt 2011-08-13 05:58:11 +02:00
parent d5b4056514
commit 0c903c63d8
3 changed files with 20 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/media/css/music.css
View File

@ -1,16 +1,16 @@
#folderlist li{list-style-type:none;margin-bottom:10px;}
#folderlist button.prettybutton{font-size:1em;width:10ex;}
li button.right.prettybutton{font-size:1em;}
#collection{padding-top:1em;position:relative;width:70ex;float:left;}
#collection li.album,#collection li.song{margin-left:3ex;}
#folderlist li { margin-bottom:10px; }
#folderlist button.prettybutton { font-size:1em; width:10ex; }
li button.right.prettybutton { font-size:1em; }
#collection { padding-top:1em; position:relative; width:70ex; float:left; }
#collection li.album,#collection li.song { margin-left:3ex; }
#leftcontent img.remove { display:none; float:right; cursor:pointer; }
#leftcontent li:hover img.remove { display:inline; }
#collection li button{float:right;}
#collection li,#playlist li{list-style-type:none;}
.template{display:none}
#collection li button { float:right; }
#collection li,#playlist li { list-style-type:none; }
.template { display:none; }
#collection li{padding-right:10px;}
#searchresults input.play, #searchresults input.add{float:right; height:16px; width:16px;}
#collection tr.collapsed td.album, #collection tr.collapsed td.title{color:#ddd}
a.expander{ float:right; display:block; }
#collection li { padding-right:10px; }
#searchresults input.play, #searchresults input.add { float:right; height:16px; width:16px; }
#collection tr.collapsed td.album, #collection tr.collapsed td.title { color:#ddd; }
a.expander { float:right; display:block; }
tr.active { background-color:#ccc; }

18
apps/media/css/player.css
View File

@ -1,24 +1,10 @@
#controls ul.jp-controls{list-style-type:none;padding:0;}
#controls ul.jp-controls li{display:inline;}
#controls ul.jp-controls a{position:absolute;overflow:hidden;text-indent:-9999px;}
a.jp-play,a.jp-pause{width:3.1em;height:3.1em;z-index:1;top:0;left:3.8em;}
a.jp-play{background:url("../img/jplayer.blue.monday.png") 0 0 no-repeat;}
a.jp-play:hover{background:url("../img/jplayer.blue.monday.png") -41px 0 no-repeat;}
a.jp-pause{background:url("../img/jplayer.blue.monday.png") 0 -42px no-repeat;display:none;}
a.jp-pause:hover{background:url("../img/jplayer.blue.monday.png") -41px -42px no-repeat;}
a.jp-previous{left:20px;top:.5em;background:url("../img/jplayer.blue.monday.png") 0 -112px no-repeat;width:2.3em;height:2.3em;}
a.jp-previous:hover{background:url("../img/jplayer.blue.monday.png") -29px -112px no-repeat;}
a.jp-next{left:88px;top:.5em;background:url("../img/jplayer.blue.monday.png") 0 -141px no-repeat;width:2.3em;height:2.3em;}
a.jp-next:hover{background:url("../img/jplayer.blue.monday.png") -29px -141px no-repeat;}
#controls ul.jp-controls{ padding:0; }
#controls ul.jp-controls li{ display:inline; }
div.jp-progress{position:absolute;overflow:hidden;background-color:#293b51;top:1em;left:10em;width:15em;height:1.2em;}
div.jp-seek-bar{background:url("../img/jplayer.blue.monday.png") 0 -202px repeat-x;width:0;height:100%;cursor:pointer;}
div.jp-play-bar{background:url("../img/jplayer.blue.monday.png") 0 -218px repeat-x;width:0;height:100%;}
div.jp-seeking-bg{background:url("../img/pbar-ani.gif");}
a.jp-mute,a.jp-unmute{height:1.2em;width:1.5em;top:1em;left:26em;}
a.jp-mute{background:url("../img/jplayer.blue.monday.png") 0 -186px no-repeat;}
a.jp-mute:hover{background:url("../img/jplayer.blue.monday.png") -19px -170px no-repeat;}
a.jp-unmute{background:url("../img/jplayer.blue.monday.png") 0 -170px no-repeat;display:none;}
a.jp-unmute:hover{background:url("../img/jplayer.blue.monday.png") -19px -186px no-repeat;}
div.jp-volume-bar{position:absolute;overflow:hidden;background:url("../img/jplayer.blue.monday.png") 0 -250px repeat-x;width:4em;height:0.4em;cursor:pointer;top:1.3em;left:28em;}
div.jp-volume-bar-value{background:url("../img/jplayer.blue.monday.png") 0 -256px repeat-x;width:0;height:0.4em;}
div.jp-current-time,div.jp-duration{position:absolute;font-size:.64em;font-style:oblique;top:1em;left:16.8em;width:22em;}

12
apps/media/templates/music.php
View File

@ -1,11 +1,11 @@
<div id="controls">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
<li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="#" class="jp-next" tabindex="1">next</a></li>
<li><a href="#" class="jp-play"><img class="svg action" src="<?php echo image_path('core', 'actions/play-big'); ?>" /></a></li>
<li><a href="#" class="jp-pause"><img class="svg action" src="<?php echo image_path('core', 'actions/pause-big'); ?>" /></a></li>
<li><a href="#" class="jp-mute"><img class="svg action" src="<?php echo image_path('core', 'actions/sound'); ?>" /></a></li>
<li><a href="#" class="jp-unmute"><img class="svg action" src="<?php echo image_path('core', 'actions/sound-off'); ?>" /></a></li>
<li><a href="#" class="jp-previous"><img class="svg action" src="<?php echo image_path('core', 'actions/play-previous'); ?>" /></a></li>
<li><a href="#" class="jp-next"><img class="svg action" src="<?php echo image_path('core', 'actions/play-next'); ?>" /></a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">