3 files changed, 22 insertions, 14 deletions

diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index cb1168196..5f0798e3c 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -44,7 +44,7 @@ $timestamp-margin-right: 10px;
   }
 
   > .optional-rows {
-    padding-left: 24px;
+    @include padding-left(24px);
   }
 
   &.has-optional-row:hover {
@@ -57,7 +57,7 @@ $timestamp-margin-right: 10px;
   display: flex;
 
   my-peertube-checkbox {
-    margin-right: 10px;
+    @include margin-right(10px);
     align-self: center;
   }
 
@@ -78,15 +78,15 @@ $timestamp-margin-right: 10px;
 
     my-global-icon {
       @include apply-svg-color(#333);
+      @include margin-right(0);
 
       width: 19px;
       height: 19px;
-      margin-right: 0;
     }
   }
 
   my-timestamp-input {
-    margin-right: $timestamp-margin-right;
+    @include margin-right($timestamp-margin-right);
 
     ::ng-deep .ui-inputtext {
       padding: 0;
@@ -101,20 +101,23 @@ $timestamp-margin-right: 10px;
   }
 
   my-peertube-checkbox {
+    @include margin-right(0 !important);
+
     display: block;
     width: $optional-rows-checkbox-width;
-    margin-right: 0 !important;
   }
 
   .labels {
-    margin-left: $optional-rows-checkbox-width;
+    @include margin-left($optional-rows-checkbox-width);
+
     font-size: 13px;
     color: pvar(--greyForegroundColor);
     padding-top: 5px;
     padding-bottom: 0;
 
     div {
-      margin-right: $timestamp-margin-right;
+      @include margin-right($timestamp-margin-right);
+
       width: $timestamp-width;
     }
   }
@@ -131,11 +134,11 @@ $timestamp-margin-right: 10px;
 
   my-global-icon {
     @include apply-svg-color(#333);
+    @include margin-right(4px);
 
     position: relative;
     left: -1px;
     top: -1px;
-    margin-right: 4px;
     width: 21px;
     height: 21px;
   }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index 9ccd03912..1fe28a682 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -17,8 +17,9 @@ my-video-thumbnail {
 
 my-video-thumbnail,
 .fake-thumbnail {
+  @include margin-right(10px);
+
   display: flex; // Avoids an issue with line-height that adds space below the element
-  margin-right: 10px;
 }
 
 .video {
@@ -60,8 +61,9 @@ my-video-thumbnail,
     cursor: pointer;
 
     .position {
+      @include margin-right(10px);
+
       font-weight: $font-semibold;
-      margin-right: 10px;
       color: pvar(--greyForegroundColor);
       min-width: 25px;
 
@@ -101,8 +103,9 @@ my-video-thumbnail,
 
   .more,
   my-edit-button {
+    @include margin-left(auto);
+
     justify-self: flex-end;
-    margin-left: auto;
     cursor: pointer;
     min-width: 24px;
   }
@@ -135,8 +138,9 @@ my-video-thumbnail,
   }
 
   .timestamp-options {
+    @include padding-left(35px);
+
     padding-top: 0;
-    padding-left: 35px;
     margin-bottom: 15px;
 
     > div {
@@ -146,7 +150,7 @@ my-video-thumbnail,
     }
 
     my-peertube-checkbox {
-      margin-right: 5px;
+      @include margin-right(5px);
     }
 
     input {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index a46a6e475..95bf469ac 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -88,9 +88,10 @@
   display: flex;
 
   .miniature-thumbnail {
+    @include margin-right(10px);
+
     width: var(--rowThumbnailWidth);
     height: var(--rowThumbnailHeight);
-    margin-right: 10px;
   }
 }