some player styling
This commit is contained in:
Jan-Christoph Borchardt
parent
6b2862fcfe
commit
595329a8a0
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue