Fix margin-content and miniature thumbnail width on mobile, fix media queries for...

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / video-watch.component.scss

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 ae79c2ff6c19cf74d3f11a7177d7ab260b0fc4f6..977312a8363387d23f6a1e4e18fdec52e42d0799 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -53,7 +53,6 @@ $video-info-margin-left: 44px;
   background-color: #000;
   display: flex;
   justify-content: center;
-  margin: 0 -15px;
 
   #videojs-wrapper {
     display: flex;
@@ -443,6 +442,7 @@ my-video-comments {
 
 // If the view is not expanded, take into account the menu
 .privacy-concerns {
+  z-index: z(dropdown) + 1;
   width: calc(100% - #{$menu-width});
 }
 
@@ -469,7 +469,7 @@ my-video-comments {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   background-color: rgba(0, 0, 0, 0.9);
   color: #fff;
 
@@ -488,11 +488,11 @@ my-video-comments {
     }
   }
 
-  .privacy-concerns-okay {
-    background-color: var(--mainColor);
+  .privacy-concerns-button {
     padding: 5px 8px 5px 7px;
     margin-left: auto;
     border-radius: 3px;
+    white-space: nowrap;
     cursor: pointer;
     transition: background-color 0.3s;
     font-weight: $font-semibold;
@@ -501,6 +501,11 @@ my-video-comments {
       background-color: #000;
     }
   }
+
+  .privacy-concerns-okay {
+    background-color: var(--mainColor);
+    margin-left: 10px;
+  }
 }
 
 @media screen and (max-width: 1600px) {
@@ -546,7 +551,8 @@ my-video-comments {
 
 @media screen and (max-width: 600px) {
   .video-bottom {
-    margin: 20px 0 0 0 !important;
+    margin-top: 20px !important;
+    margin-bottom: 20px !important;
 
     .video-info {
       padding: 0;