From 4555697f216e894e5651d8f6d3d971e7d0c17d17 Mon Sep 17 00:00:00 2001 From: Chocobozzz 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(-) (limited to 'client/src/sass') 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