templates: style playlist

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index 117673d156d637437fe456938950d2e3ade75fe9..decc6ba234833303efc07b0cd79aca7cbc08479b 100644 (file)
--- 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 df3b74d9b8c17e6f1b8fd18d768b8b225d7a732f..ad4ac8c880ccc88a0996b9e6c8967af24d9956ad 100644 (file)
--- 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>