some player styling

5 files changed, 38 insertions, 28 deletions

diff --git a/apps/media/css/music.css b/apps/media/css/music.css
index eef300c63fa..f8e41064fd8 100644
--- a/apps/media/css/music.css
+++ b/apps/media/css/music.css
@@ -1,8 +1,8 @@
-#folderlist li { margin-bottom:10px; }
-#folderlist button.prettybutton { font-size:1em; width:10ex; }
+#folderlist li { margin-bottom:1em; }
+#folderlist button.prettybutton { font-size:1em; width:10em; }
 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; }
+#collection { padding-top:1em; position:relative; width:70em; float:left; }
+#collection li.album,#collection li.song { margin-left:3em; }
 #leftcontent img.remove { display:none; float:right; cursor:pointer; }
 #leftcontent li:hover img.remove { display:inline; }
 #collection li button { float:right; }
@@ -10,7 +10,7 @@ li button.right.prettybutton { font-size:1em; }
 .template { display:none; }
 
 #collection li { padding-right:10px; }
-#searchresults input.play, #searchresults input.add { float:right; height:16px; width:16px; }
+#searchresults input.play, #searchresults input.add { float:left; height:1em; width:1em; }
 #collection tr.collapsed td.album, #collection tr.collapsed td.title { color:#ddd; }
 a.expander { float:right; display:block; }
-tr.active { background-color:#ccc; }
+tr.active { background-color:#eee; }
diff --git a/apps/media/css/player.css b/apps/media/css/player.css
index 0074bf9b9a4..98a76e82f0d 100644
--- a/apps/media/css/player.css
+++ b/apps/media/css/player.css
@@ -1,11 +1,16 @@
-#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;}
-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;}
-div.jp-duration{text-align:right;}
+#controls ul.jp-controls { padding:0; }
+#controls ul.jp-controls li { display:inline; }
+#controls ul.jp-controls li a { position:absolute; padding:.8em 1em; }
+a.jp-play, a.jp-pause { left:2.5em; }
+a.jp-next { left:5em; }
+
+div.jp-progress { position:absolute; overflow:hidden; top:.5em; left:8em; width:15em; height:1.2em; padding:0; }
+div.jp-seek-bar { background:#eee; width:0; height:100%; cursor:pointer; }
+div.jp-play-bar { background:#ccc; width:0; height:100%; }
+div.jp-seeking-bg { background:url("../img/pbar-ani.gif"); }
+div.jp-current-time,div.jp-duration { position:absolute; font-size:.64em; font-style:oblique; top:1em; left:13.5em; width:22em; }
+div.jp-duration { text-align:right; }
+
+a.jp-mute,a.jp-unmute { left:24em; }
+div.jp-volume-bar { position:absolute; overflow:hidden; background:#eee; width:4em; height:0.4em; cursor:pointer; top:1.3em; left:27em; }
+div.jp-volume-bar-value { background:#ccc; width:0; height:0.4em; }
diff --git a/apps/media/js/player.js b/apps/media/js/player.js
index d37196a89f5..0b0502c7780 100644
--- a/apps/media/js/player.js
+++ b/apps/media/js/player.js
@@ -204,4 +204,7 @@ $(document).ready(function(){
 	$(window).bind('beforeunload', function (){
 		PlayList.save();
 	});
+
+	$('jp-previous').tipsy({gravity:'n', fade:true, live:true});
+	$('jp-next').tipsy({gravity:'n', fade:true, live:true});
 })
diff --git a/apps/media/templates/music.php b/apps/media/templates/music.php
index 9c31ddd288a..b469b025c7b 100644
--- a/apps/media/templates/music.php
+++ b/apps/media/templates/music.php
@@ -1,22 +1,23 @@
 <div id="controls">
 	<ul class="jp-controls">
-		<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>
+		<li><a href="#" class="jp-play action"><img class="svg" src="<?php echo image_path('core', 'actions/play-big'); ?>" /></a></li>
+		<li><a href="#" class="jp-pause action"><img class="svg" src="<?php echo image_path('core', 'actions/pause-big'); ?>" /></a></li>
+		<li><a href="#" class="jp-previous action"><img class="svg" src="<?php echo image_path('core', 'actions/play-previous'); ?>" /></a></li>
+		<li><a href="#" class="jp-next action"><img class="svg" src="<?php echo image_path('core', 'actions/play-next'); ?>" /></a></li>
+		<li><a href="#" class="jp-mute action"><img class="svg" src="<?php echo image_path('core', 'actions/sound'); ?>" /></a></li>
+		<li><a href="#" class="jp-unmute action"><img class="svg" src="<?php echo image_path('core', 'actions/sound-off'); ?>" /></a></li>
 	</ul>
 	<div class="jp-progress">
 		<div class="jp-seek-bar">
 			<div class="jp-play-bar"></div>
 		</div>
 	</div>
+	<div class="jp-current-time"></div>
+	<div class="jp-duration"></div>
 	<div class="jp-volume-bar">
 		<div class="jp-volume-bar-value"></div>
 	</div>
-	<div class="jp-current-time"></div>
-	<div class="jp-duration"></div>
+
 	<div class="player" id="jp-player"></div>
 </div>
 
diff --git a/core/css/styles.css b/core/css/styles.css
index 1be25999390..f9b94862f31 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -32,11 +32,11 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', end
 
 /* INPUTS */
 input[type="text"], input[type="password"] { cursor:text; }
-input, select, .button, #quota { font-size:1em; width:10em; margin:.3em; padding:.6em .5em .4em; background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
+input, select, .button, #quota, div.jp-progress { font-size:1em; width:10em; margin:.3em; padding:.6em .5em .4em; background:#fff; color:#333; border:1px solid #ddd; -moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
 input[type="text"], input[type="password"] { background:#f8f8f8; color:#555; cursor:text; }
 input[type="text"]:hover, input[type="text"]:focus, input[type="password"]:hover, input[type="password"]:focus { background:#fff; color:#333; }
 
-input[type="submit"], input[type="button"], .button, #quota { width:auto; padding:.4em; border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
+input[type="submit"], input[type="button"], .button, #quota, div.jp-progress { width:auto; padding:.4em; border:1px solid #ddd; font-weight:bold; cursor:pointer; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
 input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus, .button:hover { background:#fff; color:#333; }
 input[type="checkbox"] { width:auto; }
 
@@ -104,6 +104,7 @@ tbody tr:hover, tr:active { background-color:#f8f8f8; }
 #body-settings .personalblock { padding:.5em 1em; margin:1em; border:1px solid #eee; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em;}
 #body-settings div.personalblock:first-child { position:relative; margin-top:4.5em; padding:0; }
 
-#quota div { padding:.6em 1em; background:#e6e6e6; font-weight:normal; white-space:nowrap; }
+#quota div, div.jp-play-bar, div.jp-seek-bar { padding:.6em 1em; background:#e6e6e6; font-weight:normal; white-space:nowrap; }
+div.jp-play-bar, div.jp-seek-bar { padding:0; }
 
 li.error { width:640px; margin:4em auto; padding:1em 1em 1em 4em; background:#ffe .8em .8em no-repeat; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }