Fix for carousel management.

[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 8b4ee51..2589d9c 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_player.scss
+++ b/src/wolnelektury/static/2022/styles/components/_player.scss
@@ -50,6 +50,13 @@
     }
   }
 }
+.jp-state-playing {
+    .c-player__btn {
+        .icon.icon-play {
+            left: 1px;
+        }
+    }
+}
 
 .c-player__btns {
   display: flex;
@@ -77,6 +84,13 @@
       border-color: rgba(#007880, 0.5);
     }
 
+    &:disabled {
+        opacity: .33;
+        &:hover {
+            border-color: transparent;
+        }
+    }
+    
     &.c-player__btn--md {
       width: 50px; height: 50px;
       .icon-play {
@@ -95,6 +109,17 @@
     }
   }
 }
+.jp-state-playing {
+    .c-player__btns {
+        button {
+            &.c-player__btn--md {
+                .icon-play {
+                    left: 0;
+                }
+            }
+        }
+    }
+}
 
 .c-player__timeline {
   max-width: 590px;
@@ -131,6 +156,8 @@
 }
 
 
+
+
 .c-player__title {
   top: -27px;
   left: 0;
@@ -169,7 +196,7 @@
   z-index: 1;
 
   &.is-active {
-    span {
+    > span {
       &:after {
         transform: rotate(180deg);
       }
@@ -181,7 +208,7 @@
     }
   }
 
-  span {
+  > span {
     display: flex;
     align-items: center;
     cursor: pointer;
@@ -215,6 +242,14 @@
       list-style-type: decimal;
       margin: 5px 0;
       color: white;
+      cursor: pointer;
+
+      span {
+          display: none;
+      }
+      span.title {
+          display: inline;
+      }
     }
   }
 }
@@ -232,40 +267,21 @@
     cursor: pointer;
   }
 
-  input[type=range] {
+  .jp-volume-bar {
     width: 100px;
-    -webkit-appearance: none;
-    background: 0 0;
-    border: 0;
     border-radius: 5px;
     height: 10px;
-    color: #006066;
     display: block;
-    margin: 0;
-    padding: 0;
-    transition: box-shadow .3s ease;
-    outline: 0;
-
     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 {
   width: 100%;
@@ -284,5 +300,16 @@ input[type=range]::-webkit-slider-thumb {
 
     &:nth-child(1) { left: 0; }
     &:nth-child(2) { right: 0; }
+    &:nth-child(3) {
+        left: 0;
+        right: 0;
+        text-align: center;
+    }
   }
 }
+
+
+.project-icon {
+    max-width: 100px;
+    max-height: 50px;
+}