fix

[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / components / _player.scss

diff --git a/src/wolnelektury/static/2022/styles/components/_player.scss b/src/wolnelektury/static/2022/styles/components/_player.scss
index 7ef0760..52729f9 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_player.scss
+++ b/src/wolnelektury/static/2022/styles/components/_player.scss
@@ -1,10 +1,15 @@
 .c-player {
 .c-player {

-  display: flex;

   width: 100%;
   align-items: center;
   position: relative;
   background-color: #D5ECED;
   width: 100%;
   align-items: center;
   position: relative;
   background-color: #D5ECED;

-  padding: 25px 34px 25px 14px;
+  padding: 105px 70px 25px 70px;
+
+  @include rwd($break-flow) {
+      display: flex;
+      flex-direction: row;
+      padding: 25px 34px 25px 14px;
+  }

 }
 
 .c-player__head {
 }
 
 .c-player__head {


@@ -50,11 +55,43 @@
     }
   }
 }
     }
   }
 }

+.jp-state-playing {
+    .c-player__btn {
+        .icon.icon-play {
+            left: 1px;
+        }
+    }
+}

 
 .c-player__btns {
   display: flex;
   align-items: center;
 
 
 .c-player__btns {
   display: flex;
   align-items: center;
 

+  .play-prev {
+      position: absolute;
+      left: calc(30% - 20px);
+      top: 15px;
+      @include rwd($break-flow) {
+          position: static;
+      }
+  }
+  .jp-play {
+      position: absolute;
+      left: calc(50% - 25px);
+      top: 10px;
+      @include rwd($break-flow) {
+          position: static;
+      }
+  }
+  .play-next {
+      position: absolute;
+      left: calc(70% - 20px);
+      top: 15px;
+      @include rwd($break-flow) {
+          position: static;
+      }
+  }
+  

   button {
     padding: 0;
     display: flex;
   button {
     padding: 0;
     display: flex;


@@ -77,6 +114,13 @@
       border-color: rgba(#007880, 0.5);
     }
 
       border-color: rgba(#007880, 0.5);
     }
 

+    &:disabled {
+        opacity: .33;
+        &:hover {
+            border-color: transparent;
+        }
+    }
+    

     &.c-player__btn--md {
       width: 50px; height: 50px;
       .icon-play {
     &.c-player__btn--md {
       width: 50px; height: 50px;
       .icon-play {


@@ -95,25 +139,45 @@
     }
   }
 }
     }
   }
 }

+.jp-state-playing {
+    .c-player__btns {
+        button {
+            &.c-player__btn--md {
+                .icon-play {
+                    left: 0;
+                }
+            }
+        }
+    }
+}

 
 .c-player__timeline {
 
 .c-player__timeline {

-  max-width: 590px;
-  width: calc(100% - 60px);
-  margin-left: auto;
-  margin-right: 0;
-  position: relative;
+  @include rwd($break-flow) {
+      position: relative;
+      width: calc(100% - 60px);
+      margin-left: auto;
+      max-width: 590px;
+      margin-right: 0;
+  }

 
   & > span {
     height: 10px;
     width: 100%;
     display: block;
 
   & > span {
     height: 10px;
     width: 100%;
     display: block;

-    background: #FFFFFF;
+    background: #F2F2F2;

     border-radius: 5px;
     position: relative;
     overflow: hidden;
 
     border-radius: 5px;
     position: relative;
     overflow: hidden;
 

-    span {
-      width: 40%;
+    span.jp-seek-bar {
+      height: 100%;
+      position: absolute;
+      border-radius: 5px;
+      background-color: #FFFFFF;
+      top: 0; left: 0;
+    }
+    
+    span.jp-play-bar {

       height: 100%;
       position: absolute;
       border-radius: 5px;
       height: 100%;
       position: absolute;
       border-radius: 5px;


@@ -123,7 +187,10 @@
   }
 }
 
   }
 }
 

-.c-player__info {
+
+
+
+.c-player__title {

   top: -27px;
   left: 0;
   position: absolute;
   top: -27px;
   left: 0;
   position: absolute;


@@ -135,9 +202,29 @@
   color: #083F4D;
 }
 
   color: #083F4D;
 }
 

+
+.c-player__info {
+  position: absolute;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 140%;
+  letter-spacing: 0.05em;
+  color: #083F4D;
+
+  top: 70px;
+  left: 16px;
+  
+  @include rwd($break-flow) {
+      top: -27px;
+      left: 0;
+  }
+}
+

 .c-player__chapters {
 .c-player__chapters {

-  top: -27px;
-  right: 0;
+  top: 35px - 8.4px;
+  right: calc(10% - 50px);
+  width: 100px;

   position: absolute;
   font-style: normal;
   font-weight: normal;
   position: absolute;
   font-style: normal;
   font-weight: normal;


@@ -147,8 +234,13 @@
   color: #083F4D;
   z-index: 1;
 
   color: #083F4D;
   z-index: 1;
 

+  @include rwd($break-flow) {
+      top: -27px;
+      right: 0;
+  }
+  

   &.is-active {
   &.is-active {

-    span {
+    > span {

       &:after {
         transform: rotate(180deg);
       }
       &:after {
         transform: rotate(180deg);
       }


@@ -160,10 +252,11 @@
     }
   }
 
     }
   }
 

-  span {
+  > span {

     display: flex;
     align-items: center;
     cursor: pointer;
     display: flex;
     align-items: center;
     cursor: pointer;

+    justify-content: center;

 
     &:after {
       margin-left: 5px;
 
     &:after {
       margin-left: 5px;


@@ -194,16 +287,28 @@
       list-style-type: decimal;
       margin: 5px 0;
       color: white;
       list-style-type: decimal;
       margin: 5px 0;
       color: white;

+      cursor: pointer;
+
+      span {
+          display: none;
+      }
+      span.title {
+          display: inline;
+      }

     }
   }
 }
 
 .c-player__volume {
     }
   }
 }
 
 .c-player__volume {

-  display: flex;
+  display: none;

   align-items: center;
   justify-content: center;
   margin-left: 40px;
 
   align-items: center;
   justify-content: center;
   margin-left: 40px;
 

+  @include rwd($break-flow) {
+      display: flex;
+  }
+  

   .icon {
     font-size: 21px;
     color: #007880;
   .icon {
     font-size: 21px;
     color: #007880;


@@ -211,49 +316,32 @@
     cursor: pointer;
   }
 
     cursor: pointer;
   }
 

-  input[type=range] {
+  .jp-volume-bar {

     width: 100px;
     width: 100px;

-    -webkit-appearance: none;
-    background: 0 0;
-    border: 0;

     border-radius: 5px;
     height: 10px;
     border-radius: 5px;
     height: 10px;

-    color: #006066;

     display: block;
     display: block;

-    margin: 0;
-    padding: 0;
-    transition: box-shadow .3s ease;
-    outline: 0;
-

     background: white;
     background: white;

-    background-image: linear-gradient(#006066, #006066);
-    background-size: 60% 100%;
-    background-repeat: no-repeat;
+  }
+  .jp-volume-bar-value {
+      display: block;
+      height: 10px;
+      border-radius: 5px;
+      background: #006066;

   }
 }
 
   }
 }
 

-input[type=range]::-webkit-slider-thumb {
-  height: 10px;
-  width: 10px;
-  background: #006066;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-input[type=range],
-input[type=range]::-webkit-slider-runnable-track,
-input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-}

 
 .c-player__length {
 
 .c-player__length {

-  width: 100%;
-  display: block;
-  position: relative;

 
 

-  span {
+  @include rwd($break-flow) {
+      position: relative;
+      display: block;
+      width: 100%;
+  }
+
+  > span {

     position: absolute;
     position: absolute;

-    padding-top: 10px;

     font-style: normal;
     font-weight: normal;
     font-size: 12px;
     font-style: normal;
     font-weight: normal;
     font-size: 12px;


@@ -261,7 +349,40 @@ input[type=range]::-webkit-slider-thumb {
     letter-spacing: 0.05em;
     color: #083F4D;
 
     letter-spacing: 0.05em;
     color: #083F4D;
 

-    &:nth-child(1) { left: 0; }
-    &:nth-child(2) { right: 0; }
+    bottom: 22px;
+    
+    @include rwd($break-flow) {
+        padding-top: 10px;
+        bottom: auto;
+    }
+
+    &.jp-current-time {
+        left: 16px;
+        
+        @include rwd($break-flow) {
+            left: 0;
+        }
+    }
+    &.time-left {
+        right: 16px;
+        @include rwd($break-flow) {
+            right: 0;
+        }
+    }
+    &.total-time-left {
+        left: 0;
+        right: 0;
+        bottom: 5px;
+        text-align: center;
+        @include rwd($break-flow) {
+            bottom: auto;
+        }
+    }

   }
 }
   }
 }

+
+
+.project-icon {
+    max-width: 100px;
+    max-height: 50px;
+}