From 0c903c63d866766fe15360049ca4c84aed1d5f1a Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Sat, 13 Aug 2011 05:58:11 +0200 Subject: [PATCH] first replacement of media player controls with svg --- apps/media/css/music.css | 24 ++++++++++++------------ apps/media/css/player.css | 18 ++---------------- apps/media/templates/music.php | 12 ++++++------ 3 files changed, 20 insertions(+), 34 deletions(-) diff --git a/apps/media/css/music.css b/apps/media/css/music.css index f9c3b955d6..eef300c63f 100644 --- a/apps/media/css/music.css +++ b/apps/media/css/music.css @@ -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; } diff --git a/apps/media/css/player.css b/apps/media/css/player.css index 42ef219994..0074bf9b9a 100644 --- a/apps/media/css/player.css +++ b/apps/media/css/player.css @@ -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;} diff --git a/apps/media/templates/music.php b/apps/media/templates/music.php index a89c5421b4..d3917ac813 100644 --- a/apps/media/templates/music.php +++ b/apps/media/templates/music.php @@ -1,11 +1,11 @@