Mirrors
/
nextcloud-server
mirror of https://github.com/nextcloud/server
3
0
Fork 0
Code Releases Activity
Browse Source

first replacement of media player controls with svg

remotes/origin/stable
Jan-Christoph Borchardt 14 years ago
parent
d5b4056514
commit
0c903c63d8
3 changed files with 20 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      apps/media/css/music.css
  2. 18
      apps/media/css/player.css
  3. 12
      apps/media/templates/music.php

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">

Write Preview
Loading…
Cancel
Save