Merge branch 'develop' into cli-wrapper

[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..d065e72fb1178f0225e770cda6b517bbbec98b88 100644 (file)
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -13,7 +13,7 @@ $setting-transition-easing: ease-out;
     @include disable-outline;
 
     cursor: pointer;
-    width: 37px;
+    width: 33px;
 
     .vjs-icon-placeholder {
       display: inline-block;
@@ -52,6 +52,7 @@ $setting-transition-easing: ease-out;
     .vjs-settings-sub-menu-title {
       display: table-cell;
       padding: 0 5px;
+      text-transform: capitalize;
     }
 
     .vjs-settings-sub-menu-title {
@@ -99,8 +100,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 +115,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;
           }
         }
       }
@@ -141,15 +142,15 @@ $setting-transition-easing: ease-out;
         .vjs-menu-item {
           outline: 0;
           font-weight: $font-semibold;
-
-          padding: 5px 8px;
           text-align: right;
+          padding: 5px 8px;
 
           &.vjs-back-button {
             background-color: inherit;
-            padding: 8px 8px 13px 8px;
+            padding: 8px 8px 13px 12px;
             margin-bottom: 5px;
             border-bottom: 1px solid grey;
+            text-align: left;
 
             &::before {
               @include chevron-left(9px, 2px);
@@ -174,6 +175,25 @@ $setting-transition-easing: ease-out;
             }
           }
         }
+
+        // Special captions case
+        // Bigger caption button
+        &.vjs-captions-button {
+          width: 200px;
+
+          .vjs-menu-item {
+            text-align: left;
+
+            .vjs-menu-item-text {
+              margin-left: 25px;
+              text-transform: capitalize;
+            }
+          }
+        }
+
+        .vjs-menu {
+          width: inherit;
+        }
       }
     }
   }