Simplify player CSS (to solve some font size problems

panikweb_templates/static/css/specifics.css

@@ -317,11 +317,17 @@ body{
 /*#Home #player{   float: left; } */
 #player-container{
 	color:#fff;
+	/*
 	-moz-box-shadow: 0px 5px 5px #000;
 	-webkit-box-shadow:  0px 5px 5px #000;
 	box-shadow: 0px 5px 10px #000;
+	*/
+	-moz-box-shadow: 0px -5px 5px #000;
+	-webkit-box-shadow:  0px -5px 5px #000;
+	box-shadow: 0px -5px 10px #000;
 	font-size:1em;
-background-color:#ff6633; border-color:#fff;}
+	background-color:#ff6633; border-color:#fff;
+	}
 #player-container button,#player-container a,#player-container .label{
 	border-color:#fff;
 	color:#fff;
@@ -342,24 +348,23 @@ background-color:#ff6633; border-color:#fff;}
 	display:inline !important;
 }
 #streamSymbol{
+	font-size:6em;
 	float:left;
-	font-size:120px;
 	margin-right:5px;
 }
 #CurrentlyPlaying{
 	padding:0 0 0 0;
 }
 #DirectStreamPanikControler .label{
-	font-size:1.5em !important;
-	padding-top:10px;
 }
 #player-container.fixed{
 	z-index:500;
 	position:fixed;
 	width:100%;
 	/*top:2em;*/
+	font-size:80%;
 	bottom:0em;
-	font-size:0.9em;
+	border-bottom:none;
 }
 #player-container.fixed .padded{
 
@@ -393,7 +398,6 @@ background-color:#ff6633; border-color:#fff;}
 }
 
 #Playlist button{
-	font-size:1em;
 }
 #Playlist #playlistLabel{
 	float:right;
@@ -406,8 +410,8 @@ background-color:#ff6633; border-color:#fff;}
 	display:inline-block;
 }
 #Playlist .playListControls .playPause{
-	font-size:50px;
-	width:50px;
+	font-size:6em;
+	margin-right:5px;
 	float:left;
 }
 
@@ -467,7 +471,7 @@ background-color:#ff6633; border-color:#fff;}
 	padding-top:0.2em;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 500px) {
 
 	#Player.withPlaylist #player-container #audioPlayer,
 	  #Player.withPlaylist #player-container #audioPlayer,
@@ -483,7 +487,7 @@ background-color:#ff6633; border-color:#fff;}
 		padding-top:0.5em;
 	}
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 500px) {
 	#Player #player-container #audioPlayer{
 		max-width:50%;
 		margin:auto;

panikweb_templates/static/js/specifics.js

@@ -199,7 +199,7 @@ $(function() {
 	}
 
 	var $localList = $('#localList').playlist({
-		controlContainer: $('<div>',{class:"playListControls label"}).sortable(),
+		controlContainer: $('<div>',{class:"playListControls"}).sortable(),
 		playlistContainer: $('<ol>',{id:"myPlaylist",class:"custom"}).sortable(),
 		onLoad:function(self){
 			$('#toggleList').on('click',function(){ 
@@ -214,6 +214,7 @@ $(function() {
 				self.playlistContainer.scrollTo(self.isActive, 800 );
 				self.isActive.find('audio').attr('preload',"preload")
 			}
+			self.controlButtons['playpause'].addClass('resymbol');
 		},
 		onPlay:function(self){
 			$('#DirectStreamPanik')[0].pause();

panikweb_templates/templates/includes/player.html

@@ -9,7 +9,7 @@
 					<!--<li><button class="icon-eye-open " title="Show/Hidden HTML5 audio player" onclick="$('#DirectStreamPanik').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;"></button></li>-->
 					<li><button title="{% trans 'Need some help?' %}" onclick="$('#PlayerHelp').toggle();" class="icon-question-sign"></button></li>
 				</ul>
-				<span class="button block" id="DirectStreamPanikControler">
+				<span class="" id="DirectStreamPanikControler">
 					<div id="streamSymbol" class="icon-volume-up resymbol"></div>
 					<div class="label">{% trans 'live' %}</div>
 				</span>
@@ -33,13 +33,11 @@
 				</div> 
 			</div> 
 		</div>
-		<div id="Playlist" class="sub cf">
+		<div id="Playlist" class="cf">
 			<div id="localList" class="padded">
-				<div id="playlistLabel" class="label"
-				>
-				<button title="Empty playlist" id="emptyList" class="icon-trash button" style="float:right;"></button>
-				<button title="Show/Hide playlist" id="toggleList" class="button" ><span class="icon-list"></span>&nbsp;Playlist</button>
-			
+				<div id="playlistLabel" class="label">
+					<button title="Empty playlist" id="emptyList" class="icon-trash button" style="float:right;"></button>
+					<button title="Show/Hide playlist" id="toggleList" class="button" ><span class="icon-list"></span>&nbsp;Playlist</button>			
 				</div>
 			</div>
 		</div>