From 4555697f216e894e5651d8f6d3d971e7d0c17d17 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 13 Jun 2018 16:29:23 +0200
Subject: Adapt theather icon depending on the player state

---
 client/src/sass/player/peertube-skin.scss | 20 ++++++++++++++++++++
 client/src/sass/player/settings-menu.scss |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index e60a854d4..75c6a0e5c 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -10,6 +10,7 @@
 }
 
 .video-js.vjs-peertube-skin {
+
   font-size: $font-size;
   color: $primary-foreground-color;
 
@@ -402,6 +403,7 @@
       margin-right: 1px;
 
       .vjs-icon-placeholder {
+        transition: transform 0.2s ease;
         display: inline-block;
         width: 22px;
         height: 22px;
@@ -536,6 +538,24 @@
       width: 33px;
     }
   }
+
+  // Theater mode is enabled
+  &.vjs-theater-enabled {
+    .vjs-theater-control {
+      width: 30px;
+
+      .vjs-icon-placeholder {
+        transform: scale(0.8);
+      }
+    }
+  }
+
+  // On fullscreen, hide theater control
+  &.vjs-fullscreen {
+    .vjs-theater-control {
+      display: none;
+    }
+  }
 }
 
 // Play/pause animations
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 6c213c5d1..f95123f52 100644
--- 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;
-- 
cgit v1.2.3