4 files changed, 19 insertions, 12 deletions

diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index d9cf7a14f..dd9ab18a8 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -21,7 +21,8 @@ $icon-size: 16px;
   }
 
   .moderation-block {
-    margin-left: .4rem;
+    @include margin-left(.4rem);
+
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -54,8 +55,8 @@ $icon-size: 16px;
 }
 
 .display-as-row.videos {
-  margin-left: pvar(--horizontalMarginContent);
-  margin-right: pvar(--horizontalMarginContent);
+  @include margin-left(pvar(--horizontalMarginContent));
+  @include margin-right(pvar(--horizontalMarginContent));
 
   .video-wrapper {
     margin-bottom: 15px;
@@ -70,8 +71,9 @@ $icon-size: 16px;
     margin-bottom: 10px;
 
     .title-page {
+      @include margin-right(0);
+
       margin-bottom: 10px;
-      margin-right: 0;
     }
   }
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index b689b1046..b0d80e530 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -19,7 +19,7 @@
   }
 
   .glyphicon {
-    margin-right: 5px;
+    @include margin-right(5px);
   }
 }
 
@@ -46,9 +46,9 @@
 
   .peertube-radio-container {
     @include peertube-radio-container;
+    @include margin-right(30px);
 
     display: inline-block;
-    margin-right: 30px;
   }
 }
 
@@ -66,8 +66,9 @@
   margin-bottom: 12px;
 
   .metadata-attribute-label {
+    @include padding-right(5px);
+
     min-width: 142px;
-    padding-right: 5px;
     display: inline-block;
     color: pvar(--greyForegroundColor);
     font-weight: $font-bold;
@@ -75,6 +76,7 @@
 
   a.metadata-attribute-value {
     @include disable-default-a-behaviour;
+
     color: pvar(--mainForegroundColor);
 
     &:hover {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 0bbdff1e6..8f632edb4 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -13,7 +13,7 @@ $more-button-width: 40px;
 }
 
 my-actor-avatar {
-  margin: 10px 10px 0 0;
+  @include margin(10px, 10px, 0, 0);
 }
 
 .video-miniature-created-at-views {
@@ -155,10 +155,11 @@ my-actor-avatar {
   }
 
   my-video-thumbnail {
+    @include margin-right(10px);
+
     min-width: var(--rowThumbnailWidth);
     max-width: var(--rowThumbnailWidth);
     height: var(--rowThumbnailHeight);
-    margin-right: 10px;
   }
 
   .video-miniature-name {
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
index a2939d521..fa751eeca 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
@@ -11,8 +11,9 @@
   position: fixed;
 
   .action-button {
+    @include margin-left(55px);
+
     display: block;
-    margin-left: 55px;
   }
 }
 
@@ -29,10 +30,11 @@
   }
 
   .checkbox-container {
+    @include margin-right(20px);
+    @include margin-left(12px);
+
     display: flex;
     align-items: center;
-    margin-right: 20px;
-    margin-left: 12px;
   }
 
   my-video-miniature {