style embedded player

diff --git a/panikweb_esperanzah/static/css/style.scss b/panikweb_esperanzah/static/css/style.scss
index 47ac565ae29d8fbbadaa0d8761d40351ac9c01de..c90962232f3e2a3fdbc9585abc095dfb7860245b 100644 (file)
--- a/panikweb_esperanzah/static/css/style.scss
+++ b/panikweb_esperanzah/static/css/style.scss
@@ -1466,52 +1466,77 @@ div#dialog-embed #close-button {
 body#embed {
        min-height: auto !important;
        margin: 0;
-       background: white;
-       div.soundfile-info {
-               height: 36px;
+       background: $darkmauve;
+       #Main {
+               background: transparent;
+               margin: 0;
+               width: 100%;
+       }
+       #Commons,
+       #metaNav,
+       #Footer,
+       #Nav,
+       #userLog,
+       #panikdb,
+       #Player {
+               display: none;
        }
-}
-
-body#embed #Main {
-       background: transparent;
-}
-
-body#embed #Commons,
-body#embed #metaNav,
-body#embed #Footer,
-body#embed #userLog,
-body#embed #panikdb,
-body#embed #Player {
-       display: none;
-}
 
-body#embed #Changing {
-       float: none;
-       width: auto;
-}
+       #Changing {
+               float: none;
+               width: auto;
+       }
 
-body#embed #Main > .wrapper {
-       padding: 0;
-}
+       #Main > .wrapper {
+               padding: 0;
+       }
 
-body#embed .logo {
-       padding: 0;
-       img {
-               border: 0;
+       .logo {
+               padding: 0;
+               img {
+                       border: 0;
+               }
        }
-}
 
-body#embed ul.custom {
-       display: inline-block;
-       width: calc(100% - 110px);
-}
+       div.soundcell {
+               display: flex;
+               ul.custom {
+                       list-style: none;
+                       display: inline-block;
+                       width: calc(100% - 110px);
+                       margin: 0;
+                       padding: 10px 10px 0 10px;
+                       li div.audio {
+                               display: block;
+                               position: static;
+                               font-size: 16px;
+                       }
+               }
+               button, a {
+                       color: white;
+               }
+               button.icon-play-sign {
+                       display: none;
+               }
+               button.icon-pause {
+                       position: absolute;
+                       bottom: 8px;
+                       background: transparent;
+                       left: 2px;
+                       z-index: 100;
+               }
+               &.playing button.icon-pause {
+                       display: block;
+               }
+       }
 
-body#embed ul.custom .soundfile-info {
-       padding: 0;
-}
+       ul.custom .soundfile-info {
+               padding: 0;
+       }
 
-body#embed span.fragment-title {
-       font-weight: normal;
+       span.fragment-title {
+               font-weight: normal;
+       }
 }
 
 #bg-title {

diff --git a/panikweb_esperanzah/templates/includes/audio.html b/panikweb_esperanzah/templates/includes/audio.html
index 6ae7dd515fb90430b1a0fcead020fd4195bb806d..4d36d011157d5fa0adbc13a234b490d47ee0e125 100644 (file)
--- a/panikweb_esperanzah/templates/includes/audio.html
+++ b/panikweb_esperanzah/templates/includes/audio.html
@@ -1,18 +1,6 @@
 {% load soundfiles paniktags i18n %}
 {% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
        <div class="audio" data-sound-id="{{ sound.id }}">
-               {% if embed %}
-               <a class="resymbol icon-download big"
-                       title="Download file"
-                       target="_new" rel="noopener" download
-                       {% if sound|is_format_available:'mp3' %}
-                       href="{{ sound|format_url:'mp3' }}"
-                       {% else %}
-                       href="{{ sound|format_url:'ogg' }}"
-                       {% endif %}
-                       ></a>
-               {% endif %}
-               {% if not embed %}
                <button class="action-play"
                        data-player-audio="Audio-{{ sound.file.url|slugify }}" 
                        data-player-action="playAudio" 
@@ -22,9 +10,8 @@
                {% elif sound|is_format_available:'mp3' %}
                / <a href="{{ sound|format_url:'mp3' }}" download>Télécharger</a>
                {% endif %}
-               {% endif %}
 
-               <button class="icons icon-pause"
+               <button class="icons icon-play-sign"
                        title="{% trans "Pause" %}"
                        data-player-audio="Audio-{{ sound.file.url|slugify }}" 
                        data-player-action="pauseSounds"