diff options
Diffstat (limited to 'client/src/app/+videos/+video-watch/video-watch.component.scss')
-rw-r--r-- | client/src/app/+videos/+video-watch/video-watch.component.scss | 23 |
1 files changed, 12 insertions, 11 deletions
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss index e8ad10a11..301762695 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss | |||
@@ -6,12 +6,12 @@ | |||
6 | $player-factor: 16/9; | 6 | $player-factor: 16/9; |
7 | $video-info-margin-left: 44px; | 7 | $video-info-margin-left: 44px; |
8 | 8 | ||
9 | @function getPlayerHeight($width){ | 9 | @function getPlayerHeight ($width) { |
10 | @return calc(#{$width} / #{$player-factor}) | 10 | @return calc(#{$width} / #{$player-factor}); |
11 | } | 11 | } |
12 | 12 | ||
13 | @function getPlayerWidth($height){ | 13 | @function getPlayerWidth ($height) { |
14 | @return calc(#{$height} * #{$player-factor}) | 14 | @return calc(#{$height} * #{$player-factor}); |
15 | } | 15 | } |
16 | 16 | ||
17 | @mixin playlist-below-player { | 17 | @mixin playlist-below-player { |
@@ -24,11 +24,11 @@ $video-info-margin-left: 44px; | |||
24 | 24 | ||
25 | .root { | 25 | .root { |
26 | &.theater-enabled #video-wrapper { | 26 | &.theater-enabled #video-wrapper { |
27 | $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); | ||
28 | |||
27 | flex-direction: column; | 29 | flex-direction: column; |
28 | justify-content: center; | 30 | justify-content: center; |
29 | 31 | ||
30 | $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); | ||
31 | |||
32 | #videojs-wrapper { | 32 | #videojs-wrapper { |
33 | width: 100%; | 33 | width: 100%; |
34 | height: $height; | 34 | height: $height; |
@@ -141,7 +141,7 @@ $video-info-margin-left: 44px; | |||
141 | .video-info-first-row { | 141 | .video-info-first-row { |
142 | display: flex; | 142 | display: flex; |
143 | 143 | ||
144 | & > div:first-child { | 144 | > div:first-child { |
145 | flex-grow: 1; | 145 | flex-grow: 1; |
146 | } | 146 | } |
147 | 147 | ||
@@ -207,7 +207,7 @@ $video-info-margin-left: 44px; | |||
207 | } | 207 | } |
208 | 208 | ||
209 | .video-actions-rates { | 209 | .video-actions-rates { |
210 | margin: 0 0 10px 0; | 210 | margin: 0 0 10px; |
211 | align-items: start; | 211 | align-items: start; |
212 | width: max-content; | 212 | width: max-content; |
213 | margin-left: auto; | 213 | margin-left: auto; |
@@ -231,7 +231,7 @@ $video-info-margin-left: 44px; | |||
231 | font-size: 100%; | 231 | font-size: 100%; |
232 | font-weight: $font-semibold; | 232 | font-weight: $font-semibold; |
233 | display: inline-block; | 233 | display: inline-block; |
234 | padding: 0 10px 0 10px; | 234 | padding: 0 10px; |
235 | white-space: nowrap; | 235 | white-space: nowrap; |
236 | background-color: transparent !important; | 236 | background-color: transparent !important; |
237 | color: pvar(--actionButtonColor); | 237 | color: pvar(--actionButtonColor); |
@@ -346,7 +346,8 @@ $video-info-margin-left: 44px; | |||
346 | } | 346 | } |
347 | } | 347 | } |
348 | 348 | ||
349 | .glyphicon, .description-loading { | 349 | .glyphicon, |
350 | .description-loading { | ||
350 | margin-left: 3px; | 351 | margin-left: 3px; |
351 | } | 352 | } |
352 | 353 | ||
@@ -396,7 +397,7 @@ $video-info-margin-left: 44px; | |||
396 | &.video-attribute-tags { | 397 | &.video-attribute-tags { |
397 | .video-attribute-value:not(:nth-child(2)) { | 398 | .video-attribute-value:not(:nth-child(2)) { |
398 | &::before { | 399 | &::before { |
399 | content: ', ' | 400 | content: ', '; |
400 | } | 401 | } |
401 | } | 402 | } |
402 | } | 403 | } |