Refactoring margin and padding mixins

[github/Chocobozzz/PeerTube.git] / client / src / sass / player / settings-menu.scss

diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 6c213c5d13d2141113032334d4369fd09b3a2737..d2346c126929eea3e247dbef0a1b477ba65d838b 100644 (file)
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,6 +1,7 @@
-@import '_variables';
-@import '_mixins';
-@import './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_icons' as *;
+@use './_player-variables' as *;
 
 $setting-transition-duration: 0.15s;
 $setting-transition-easing: ease-out;
@@ -9,26 +10,6 @@ $setting-transition-easing: ease-out;
 
 .video-js {
 
-  .vjs-settings {
-    @include disable-outline;
-
-    cursor: pointer;
-    width: 37px;
-
-    .vjs-icon-placeholder {
-      display: inline-block;
-      width: 17px;
-      height: 17px;
-      vertical-align: middle;
-      background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
-      background-size: contain;
-
-      &::before {
-        content: '';
-      }
-    }
-  }
-
   .vjs-settings-sub-menu-title {
     width: 4em;
     text-transform: initial;
@@ -38,10 +19,11 @@ $setting-transition-easing: ease-out;
     position: absolute;
     right: .5em;
     bottom: 3.5em;
-    color: $primary-foreground-color;
+    color: pvar(--embedForegroundColor);
     opacity: $primary-foreground-opacity;
     margin: 0 auto;
     font-size: $font-size !important;
+    z-index: 100;
 
     width: auto;
     overflow: hidden;
@@ -52,16 +34,17 @@ $setting-transition-easing: ease-out;
     .vjs-settings-sub-menu-title {
       display: table-cell;
       padding: 0 5px;
+      text-transform: capitalize;
     }
 
     .vjs-settings-sub-menu-title {
-      text-align: left;
+      text-align: start;
       font-weight: $font-semibold;
     }
 
     .vjs-settings-sub-menu-value {
       width: 100%;
-      text-align: right;
+      text-align: end;
 
       small {
         font-size: 0.85em;
@@ -99,8 +82,11 @@ $setting-transition-easing: ease-out;
         transition: all $setting-transition-duration $setting-transition-easing;
 
         .vjs-menu-item {
+          font-size: 1em;
+          text-transform: initial;
 
           &:hover {
+            cursor: pointer;
             background-color: rgba(255, 255, 255, 0.2);
           }
 
@@ -111,14 +97,11 @@ $setting-transition-easing: ease-out;
           &:last-child {
             margin-bottom: 5px;
           }
-        }
-
-        li {
-          font-size: 1em;
-          text-transform: initial;
 
-          &:hover {
-            cursor: pointer;
+          &.disabled {
+            opacity: 0.5;
+            cursor: default !important;
+            background-color: inherit !important;
           }
         }
       }
@@ -131,30 +114,29 @@ $setting-transition-easing: ease-out;
         .vjs-settings-sub-menu-value::after {
           @include chevron-right(9px, 2px);
 
-          margin-left: 5px;
+          @include margin-left(5px);
         }
       }
 
       > .vjs-settings-sub-menu {
-        width: 80px;
+        min-width: 80px;
 
         .vjs-menu-item {
           outline: 0;
           font-weight: $font-semibold;
-
+          text-align: end;
           padding: 5px 8px;
-          text-align: right;
 
           &.vjs-back-button {
-            background-color: inherit;
-            padding: 8px 8px 13px 8px;
+            padding: 8px 8px 13px 12px;
             margin-bottom: 5px;
-            border-bottom: 1px solid grey;
+            border-bottom: 1px solid #808080;
+            text-align: start;
 
             &::before {
               @include chevron-left(9px, 2px);
 
-              margin-right: 5px;
+              @include margin-right(5px);
             }
           }
 
@@ -163,6 +145,10 @@ $setting-transition-easing: ease-out;
             color: inherit;
             position: relative;
 
+            &:focus {
+              background-color: rgba(115, 133, 159, 0.5);
+            }
+
             &::before {
               @include icon(15px);
 
@@ -170,11 +156,30 @@ $setting-transition-easing: ease-out;
               left: 8px;
               content: ' ';
               margin-top: 1px;
-              background-image: url('#{$assets-path}/player/images/tick.svg');
+              background-image: url('#{$assets-path}/player/images/tick-white.svg');
+            }
+          }
+        }
+
+        // Special captions case
+        // Bigger caption button
+        &.vjs-captions-button {
+          width: 200px;
+
+          .vjs-menu-item {
+            text-align: start;
+
+            .vjs-menu-item-text {
+              @include margin-left(25px);
+              text-transform: capitalize;
             }
           }
         }
+
+        .vjs-menu {
+          width: inherit;
+        }
       }
     }
   }
-}
\ No newline at end of file
+}