bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

the audio player is playing and displaying well

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-07 15:01:53 +01:00
parent 468ca7a2f0
commit 2f806e39ab
17 changed files with 726 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+74 -20
View File
@@ -173,7 +173,7 @@ main[role="main"]{
width:$s; height:$s;
top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
background-color: white;
background-image: url(../../img/edlp-loader-anim.svg);
background-image: url(../img/edlp-loader-anim.svg);
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
@@ -192,28 +192,82 @@ main[role="main"]{
position: absolute;
top:0; left:0;
background-color: white;
height:100%; min-width: 300px; max-width:500px;
height:100%; width:300px;
z-index: 20;
outline: 1px dotted green;
.time-line{
position: relative;
width:50px; height:1px;
background-color: #000;
overflow: visible;
// border-top: 1px solid #000;
transform: rotateZ(-45deg);
.loader{
width:0; height:100%;
background-color: red;
top:0;left:0;
opacity: 0;
pointer-events: none;
transition: opacity 0.7s ease-in-out;
&.visible{
opacity: 1;
pointer-events:all;
}
.btns, .time-line-container, .time{
display: inline-block;
vertical-align: middle;
padding:0 1em 0 0;
}
.btns{
// outline: 1px dotted orange;
&>*{
display: inline-block;
vertical-align: middle;
width:20px;height:30px;
background-position: center;
background-size: contain;
}
.cursor{
height:10px;width:0;
border-left: 2px solid red;
position:absolute;
left:0; top:-5px;
.previous{
background-image: url(../img/audio-player-previous.svg);
opacity: 0.3;}
.play-pause{
background-image: url(../img/audio-player-play.svg);
padding:0 0.3em;}
cursor: pointer;
.next{
background-image: url(../img/audio-player-next.svg);
opacity: 0.3;}
}
.time-line-container{
// outline: 1px dotted purple;
.time-line{
position: relative;
width:70px; height:1px;
background-color: #000;
overflow: visible;
// border-top: 1px solid #000;
transform: rotateZ(-45deg);
.loader{
width:0; height:100%;
background-color: red;
top:0;left:0;
}
.cursor{
height:10px;width:0;
border-left: 2px solid red;
position:absolute;
left:0; top:-5px;
}
}
}
.time{
// outline: 1px dotted brown;
&>*{
width:70px;
text-align: right;
// outline: 1px dotted red;
}
.current-time{
font-size: 1.4em;
font-weight: 600;
}
.duration{
font-size: 0.75em;
font-weight: 400;
}
}
&.is-playing{
.btns .play-pause{background-image: url(../img/audio-player-pause.svg);}
}
}
// _ _ _ _ _
@@ -616,7 +670,7 @@ footer{
h2{
position: relative;
width:$wh; height:$wh;
background-image: url(../../img/user.svg);
background-image: url(../img/user.svg);
// background-color: red;
background-size: contain;
text-indent: $wh*2;