style embedded player

[panikweb-esperanzah.git] / panikweb_esperanzah / static / css / style.scss

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 {