Audio playlists style implementation

diff --git a/app/static/src/sass/modules/medias/_audio-playlist.scss b/app/static/src/sass/modules/medias/_audio-playlist.scss
index edc878b0b0510922bd16175f55335e3e0145d6ea..8ecc9cca0ae28e50391d3d49437e77feef9ee4b6 100644 (file)
--- a/app/static/src/sass/modules/medias/_audio-playlist.scss
+++ b/app/static/src/sass/modules/medias/_audio-playlist.scss
@@ -2,15 +2,34 @@ $module: ".audio-playlist";
 
 #{$module} {
 
+    margin-top: 0;
+    padding: 0;
+    background: $color-black-light;
+    list-style-type: none;
+
     &__item {
 
+        @include padding(0.25 1);
+        @include font-size(xs);
+        @include typeface(sans-serif);
+        @include transition(all 0.25s ease-in-out);
+        color: white;
+
         &.playing {
-            color: red;
+
+            background: $color-main;
+            color: $color-black-light;
+
+            >a {
+                color: $color-black-light;
+            }
+
         }
 
         >a  {
 
-
+            @include transition(all 0.25s ease-in-out);
+            color: white;
 
         }
 

diff --git a/app/static/src/sass/vendors/_audiojs.scss b/app/static/src/sass/vendors/_audiojs.scss
index ac0e4138912f2e7823708243dc21eae220199e0d..32a381dae6b3fb8929330329b8e3c68f29c4b0ff 100644 (file)
--- a/app/static/src/sass/vendors/_audiojs.scss
+++ b/app/static/src/sass/vendors/_audiojs.scss
@@ -1,3 +1,37 @@
-.audiojs .play-pause {
-    width: 37px;
+.audiojs {
+    background: $color-black;
+    box-shadow: none;
+    width: 100%;
+
+    .play-pause {
+        width: 37px;
+    }
+
+    .scrubber {
+        width: calc(80% - 37px);
+    }
+
+    .time {
+        width: calc(20% - 37px);
+        @include font-size(xs);
+        @include typeface(sans-serif);
+    }
+
+    .progress {
+        background: $color-main;
+    }
+
+    .loaded {
+        background: $color-gray;
+    }
+
+    @include mq($until: xs) {
+        width: 100%;
+        .scrubber {
+            width: calc(60% - 37px);
+        }
+        .time {
+            width: calc(40% - 37px);
+        }
+    }
 }

diff --git a/app/templates/core/inc/audio.html b/app/templates/core/inc/audio.html
index 4b6b80367bd337b31acec2aa82e285b8d6d3db70..816f832063cc69f8456d34e8c6eb8303f50c7380 100644 (file)
--- a/app/templates/core/inc/audio.html
+++ b/app/templates/core/inc/audio.html
@@ -8,7 +8,10 @@
         <li class="audio-playlist__item">
             <a href="#" data-src="{{ audio.open_source_url }}">{{ audio.title }}</a>
         </li>
-        
+        <li class="audio-playlist__item">
+            <a href="#" data-src="{{ audio.open_source_url }}">{{ audio.title }}</a>
+        </li>
+
         {% comment %}
 
             {# audio.title #}<br>