Merge remote-tracking branch 'weblate/develop' into develop

[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 9c3f53b3db19fbf6281b7d65a832d984fabc176c..314f9849d2e633e95376247c141e3b1e71241173 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -36,6 +36,7 @@ $player-factor: 1.7; // 16/9
 
       height: $height;
       width: 100%;
+      max-width: initial;
     }
 
     my-video-watch-playlist ::ng-deep .playlist {
@@ -107,6 +108,10 @@ $player-factor: 1.7; // 16/9
   border-radius: 0;
 }
 
+.flex-direction-column {
+  flex-direction: column;
+}
+
 #video-not-found {
   height: 300px;
   line-height: 300px;
@@ -141,6 +146,13 @@ $player-factor: 1.7; // 16/9
         flex-grow: 1;
       }
 
+      .video-info-first-row-bottom {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+        width: 100%;
+      }
+
       .video-info-date-views {
         flex-grow: 1;
         margin-bottom: 10px;
@@ -164,7 +176,7 @@ $player-factor: 1.7; // 16/9
           img {
             @include avatar(18px);
 
-            margin: -2px 2px 0 5px;
+            margin: -2px 5px 0 0;
           }
         }
 
@@ -187,11 +199,14 @@ $player-factor: 1.7; // 16/9
             opacity: 0.8;
           }
 
+          span {
+            margin-left: 2px;
+          }
+
           img {
             @include avatar(18px);
 
-            margin-top: -2px;
-            margin-left: 7px;
+            margin: -2px 5px 0 0;
           }
         }
 
@@ -208,8 +223,9 @@ $player-factor: 1.7; // 16/9
       }
 
       .video-actions-rates {
-        margin: 20px 0 10px 0;
+        margin: 0 0 10px 0;
         align-items: start;
+        width: max-content;
 
         .video-actions {
           height: 40px; // Align with the title
@@ -238,9 +254,20 @@ $player-factor: 1.7; // 16/9
               display: none;
             }
 
+            .action-button-like,
+            .action-button-dislike {
+              .count {
+                margin-right: 5px;
+              }
+            }
+
             &.action-button-like.activated {
               background-color: $green;
 
+              .count {
+                color: #fff;
+              }
+
               my-global-icon {
                 @include apply-svg-color(#fff);
               }
@@ -249,11 +276,28 @@ $player-factor: 1.7; // 16/9
             &.action-button-dislike.activated {
               background-color: $red;
 
+              .count {
+                color: #fff;
+              }
+
               my-global-icon {
                 @include apply-svg-color(#fff);
               }
             }
 
+            &.action-button-support {
+              color: var(--supportButtonColor);
+              background-color: var(--supportButtonBackgroundColor);
+
+              &:hover {
+                opacity: 0.9;
+              }
+
+              my-global-icon {
+                @include apply-svg-color(var(--supportButtonColor));
+              }
+            }
+
             &.action-button-save {
               my-global-icon {
                 top: 0 !important;
@@ -356,7 +400,7 @@ $player-factor: 1.7; // 16/9
 
     .video-miniature {
       display: flex;
-      width: $other-videos-width;
+      width: max-content;
       height: 100%;
       margin-bottom: 20px;
       flex-wrap: wrap;