From: Frédéric Péters <fpeters@0d.be>
Date: Sat, 28 Dec 2019 17:19:38 +0000 (+0100)
Subject: templates: style playlist
X-Git-Url: https://git.0d.be/?p=panikweb.git;a=commitdiff_plain;h=cdf01e7be31aa5a00d71253ac0441e5f993bc69c

templates: style playlist
---

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index 117673d..decc6ba 100644
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -558,9 +558,6 @@ h1.top#frequence {
 /****************************************************/
 /*#Home #player{   float: left; } */
 
-#player-container,
-   #player-container *{border-color:$primary !important;color:$primary !important;}
-
 #player-container .metas, #player-container img{border-color:#fff;}
 #player-container .padded{padding:0.3em;}
 
@@ -585,12 +582,22 @@ h1.top#frequence {
 	padding:0 0 0 0;
 }
 
-#Player.withPlaylist #player-container #Playlist{
-	border-top:2px solid black;
-}
-#Player.withPlaylist #player-container #Playlist{
-	margin-top: 1em;
-	padding-top: 1em;
+#localList {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	background: $primary;
+	width: 500px;
+	box-shadow: 0 0 4px 2px transparentize(darken($primary, 30%), 0.5);
+	padding: 1rem;
+	@media screen and (max-width: $mobile-limit) {
+		width: auto;
+		left: 0;
+		bottom: 66px;
+		box-shadow: none;
+		border: 1px solid darken($primary, 30%);
+		border-width: 1px 0 0 0;
+	}
 }
 
 #player-container #myPlaylist {
@@ -1494,16 +1501,19 @@ div.userContent a.tag { text-decoration: none; }
 		width: 94%;
 	}
 
-	#Player.withoutPlaylist #player-container #audioPlayer{
-	    margin:auto;
-	    width:100%;
+	#Player #player-container #audioPlayer{
+		margin:auto;
+		width:100%;
 	}
-	#Player.withoutPlaylist #player-container #audioPlayer #Live{
-	    font-size:150%;
+	#Player #player-container #audioPlayer #Live{
+		font-size:150%;
 	}
 
 
-	#player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
+	#player-container {
+		width:100%;
+		left:0;
+	}
 	#player-container{
 		background: $primary;
 	}
@@ -1520,7 +1530,6 @@ div.userContent a.tag { text-decoration: none; }
 	#Player.withPlaylist #player-container #audioPlayer{
 		float:left;
 		width:50%;
-		border-right:2px solid black;
 	}
 	#Player.withPlaylist #player-container #Playlist{
 		float:right;
diff --git a/panikweb_templates/templates/includes/player.html b/panikweb_templates/templates/includes/player.html
index df3b74d..ad4ac8c 100644
--- a/panikweb_templates/templates/includes/player.html
+++ b/panikweb_templates/templates/includes/player.html
@@ -26,7 +26,7 @@
 			</div>
 		</div>
 		<div id="Playlist" class="cf">
-			<div id="localList" class="padded" style="display: none;">
+			<div id="localList" style="display: none;">
 				<div id="playlistLabel">
                                         <button title="{% trans "Empty playlist" %}" id="emptyList" class="icon-trash button" style="float:right;"><span class="sr-only">{% trans "Empty playlist" %}</span></button>
 				</div>