fix(video): Position of play icon (#2608)

* fix(video): Position of play icon

#2601

* fix(overlay-button): Positioning

* fix(expand): Bottom align expand icon

* feat(video): Fit landscape videos into preview area

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 11d50673d40d55507892eb89c5729e5f3b6d2b56..68b2be9ece91fcfd1173b40c15f114e210472293 100644 (file)
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -3097,7 +3097,7 @@ button.icon-button.active i.fa-retweet {
   object-fit: cover;
   position: relative;
   top: 50%;
-  transform: translateY(-50%);
+  transform: translateY(-35%);
   width: 100%;
   z-index: 1;
 }
@@ -3109,19 +3109,24 @@ button.icon-button.active i.fa-retweet {
   position: absolute;
   right: 4px;
   text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
-  top: 4px;
 }
 
 .status__video-player-spoiler {
   color: #fff;
+  left: 4px;
+  position: absolute;
   text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
+  top: 4px;
+  z-index: 100;
 }
 
 .status__video-player-expand {
+  bottom: 4px;
   z-index: 100;
 }
 
 .status__video-player-mute {
+  top: 4px;
   z-index: 5;
 }
 
@@ -3136,6 +3141,7 @@ button.icon-button.active i.fa-retweet {
   border-radius: 100px;
   color: rgba(255, 255, 255, 0.8);
   font-size: 36px;
+  left: 50%;
   padding: 5px;
   position: absolute;
   top: 50%;