25 files changed, 97 insertions, 69 deletions

diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
index 5da624963..cb42fe46b 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -1,3 +1,6 @@
+@import '_mixins';
+@import '_variables';
+
 .comment-flagged-account,
 .account-flagged-handle {
   font-size: 11px;
@@ -5,13 +8,14 @@
 }
 
 .abuse-states .glyphicon-comment {
-  margin-left: 0.5rem;
+  @include margin-left(0.5rem);
 }
 
 .abuse-messages {
   my-global-icon {
+    @include margin-left(3px);
+
     width: 22px;
-    margin-left: 3px;
     position: relative;
     top: -2px;
   }
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
index 08e80c3b4..a296cd173 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -5,7 +5,7 @@
   display: flex;
 
   my-actor-avatar {
-    margin-right: 15px;
+    @include margin-right(15px);
   }
 
   .actor-info {
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
index dcd931090..d8796e12e 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
@@ -2,7 +2,7 @@
 @import '_mixins';
 
 my-video-miniature {
-  margin-right: 15px;
+  @include margin-right(15px);
   display: inline-block;
   min-width: $video-thumbnail-width;
   max-width: $video-thumbnail-width;
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
index d2f68e2a4..e03e9b19f 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
@@ -3,11 +3,11 @@
 
 input {
   @include peertube-input-text(auto);
+  @include padding-left(15px !important);
+  @include padding-right(15px !important);
 
   // set again properties of peertube-input-text that are overriden by .input-group
   font-size: 15px !important;
-  padding-left: 15px !important;
-  padding-right: 15px !important;
 }
 
 .eye-button {
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 1f72dbc32..a34d9ebea 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -24,12 +24,13 @@ $input-border-radius: 3px;
     }
 
     .nav-preview {
+      @include padding-left(10px);
+      @include padding-right(10px);
+
       display: block;
-      text-align: right;
+      text-align: end;
       padding-top: 10px;
       padding-bottom: 10px;
-      padding-left: 10px;
-      padding-right: 10px;
       border-top: 1px dashed $input-border-color;
       border-left: 1px solid $input-border-color;
       border-right: 1px solid $input-border-color;
@@ -77,7 +78,7 @@ $input-border-radius: 3px;
   border-bottom: 2px solid pvar(--mainColor);
 
   :first-child {
-    margin-left: auto;
+    @include margin-left(auto);
   }
 
   ::ng-deep {
@@ -91,7 +92,7 @@ $input-border-radius: 3px;
     }
 
     .maximize-button {
-      margin-left: 5px;
+      @include margin-left(5px);
     }
   }
 }
@@ -120,10 +121,11 @@ $input-border-radius: 3px;
 
   .nav-preview {
     @include nav-preview-medium();
+    @include padding-right(0);
+    @include padding-left(0);
+
     padding-top: #{$nav-preview-vertical-padding / 2};
     padding-bottom: #{$nav-preview-vertical-padding / 2};
-    padding-left: 0;
-    padding-right: 0;
     position: absolute;
     background-color: pvar(--mainBackgroundColor);
     width: 100% !important;
@@ -132,7 +134,7 @@ $input-border-radius: 3px;
     border-right: 0;
 
     :last-child {
-      margin-right: pvar(--horizontalMarginContent);
+      @include margin-right(pvar(--horizontalMarginContent));
     }
   }
 
@@ -181,11 +183,11 @@ $input-border-radius: 3px;
     .nav-preview {
       ::ng-deep .nav-link {
         @include ellipsis();
+        @include margin-right(10px !important);
 
         display: block !important;
         max-width: 45% !important;
         padding: 5px 0 !important;
-        margin-right: 10px !important;
         text-align: center;
 
         &:not(.active) {
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index 203b82d0b..54479fed7 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -36,7 +36,8 @@
   }
 
   .recommended {
-    margin-left: .5rem;
+    @include margin-left(.5rem);
+
     align-self: baseline;
     display: inline-block;
     padding: 4px 6px;
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.scss b/client/src/app/shared/shared-forms/reactive-file.component.scss
index 84c23c1d6..a23b28147 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.scss
+++ b/client/src/app/shared/shared-forms/reactive-file.component.scss
@@ -16,7 +16,8 @@
   }
 
   .filename {
+    @include margin-left(5px);
+
     font-weight: $font-semibold;
-    margin-left: 5px;
   }
 }
diff --git a/client/src/app/shared/shared-forms/select/select-shared.component.scss b/client/src/app/shared/shared-forms/select/select-shared.component.scss
index 7006adab1..9a796f545 100644
--- a/client/src/app/shared/shared-forms/select/select-shared.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss
@@ -43,10 +43,10 @@ ng-select ::ng-deep {
 my-select-options + input {
   @include peertube-input-text($form-base-input-width);
 
-  margin-left: 5px;
+  @include margin-left(5px);
   display: block;
 }
 
 .input-suffix {
-  margin-left: 5px;
+  @include margin-left(5px);
 }
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss
index 11cf11616..c8609a4c0 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.scss
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss
@@ -12,8 +12,9 @@ table {
     }
 
     &.sub-label {
+      @include padding-left(30px);
+
       font-weight: $font-regular;
-      padding-left: 30px;
     }
 
     .more-info {
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 22b24c853..25a979ac9 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -24,7 +24,7 @@ my-small-loader ::ng-deep .root {
 a[class$=-button],
 span[class$=-button] {
   > span {
-    margin-left: 5px;
+    @include margin-left(5px);
   }
 }
 
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index 68d7ad48f..51a105498 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -24,7 +24,7 @@
 
     .popover-body {
       font-family: $main-fonts;
-      text-align: left;
+      text-align: start;
       padding: 10px;
       font-size: 13px;
       background-color: pvar(--mainBackgroundColor);
@@ -36,7 +36,7 @@
       }
 
       ul {
-        padding-left: 20px;
+        @include padding-left(20px);
         margin-bottom: 0;
       }
     }
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index 5ae48f81b..be712979b 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -6,9 +6,10 @@
 }
 
 my-global-icon {
+  @include margin-left(10px);
+
   height: 28px;
   width: 28px;
-  margin-left: 10px;
   cursor: pointer;
 
   &:hover {
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.scss b/client/src/app/shared/shared-main/users/user-notifications.component.scss
index b69d4b5d6..58dc88c38 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.scss
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.scss
@@ -22,19 +22,20 @@
 
   my-global-icon {
     @include apply-svg-color(#333);
+    @include margin-right(11px);
+    @include margin-left(3px);
 
     width: 24px;
-    margin-right: 11px;
-    margin-left: 3px;
   }
 
   .avatar {
+    @include margin-right(10px);
+
     width: 30px;
     height: 30px;
     min-width: 30px;
     min-height: 30px;
     border-radius: 5px;
-    margin-right: 10px;
   }
 
   .message {
@@ -46,11 +47,12 @@
   }
 
   .from-date {
+    @include padding-left(5px);
+    @include margin-left(auto);
+
     font-size: 0.85em;
     color: pvar(--greyForegroundColor);
-    padding-left: 5px;
     min-width: 70px;
-    text-align: right;
-    margin-left: auto;
+    text-align: end;
   }
 }
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index c06cafe29..3ca611b9f 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -8,7 +8,7 @@ label {
 
 .user-quota {
   label {
-    margin-right: 5px;
+    @include margin-right(5px);
   }
 
   &,
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index b13d06f03..7c6dc9b72 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -9,7 +9,7 @@
     font-weight: $font-semibold;
     display: inline-block;
     vertical-align: top;
-    text-align: right;
+    text-align: end;
   }
 
   .moderation-expanded-text {
@@ -79,10 +79,10 @@ my-action-dropdown.show {
     $image-height: 45px;
 
     @include miniature-thumbnail;
+    @include margin-right(0.5rem);
 
     height: $image-height;
     width: #{(16/9) * $image-height};
-    margin-right: 0.5rem;
     border-radius: 2px;
     border: 0;
     background: transparent;
@@ -121,9 +121,10 @@ my-action-dropdown.show {
     line-height: 1rem;
 
     div .glyphicon {
+      @include margin-left(0.1rem);
+
       font-size: 80%;
       color: #808080;
-      margin-left: 0.1rem;
     }
 
     div + div {
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
index 0567330f5..5decd36c2 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.scss
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
@@ -16,7 +16,7 @@ textarea {
   align-items: center;
 
   my-timestamp-input {
-    margin-left: 10px;
+    @include margin-left(10px);
   }
 }
 
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index a18e3f5fc..7e4dafc91 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -50,7 +50,7 @@ my-input-toggle-hidden {
     cursor: pointer;
 
     .glyphicon {
-      margin-right: 5px;
+      @include margin-right(5px);
     }
   }
 
@@ -66,7 +66,7 @@ my-input-toggle-hidden {
     align-items: center;
 
     .peertube-select-container {
-      margin-left: 10px;
+      @include margin-left(10px);
     }
   }
 
@@ -77,7 +77,7 @@ my-input-toggle-hidden {
     align-items: center;
 
     my-timestamp-input {
-      margin-left: 10px;
+      @include margin-left(10px);
     }
   }
 }
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
index 897ee7799..1b0cc8c64 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -38,15 +38,15 @@
 
   // Unlogged
   > .dropdown > .dropdown-toggle span {
-    padding-right: 3px;
+    @include padding-right(3px);
   }
 
   // Logged
   > .btn {
-    padding-right: 4px;
+    @include padding-right(4px);
 
     + .dropdown > button {
-      padding-left: 2px;
+      @include padding-left(2px);
 
       &::after {
         position: relative;
@@ -62,7 +62,7 @@
     }
 
     span.followers-count {
-      padding-left: 5px;
+      @include padding-left(5px);
     }
   }
   &.unsubscribe-button {
@@ -108,6 +108,6 @@
 
   span:not(:first-child) {
     font-size: 60%;
-    text-align: left;
+    text-align: start;
   }
 }
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 {
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;
   }
 }