Move to stylelint

31 files changed, 114 insertions, 108 deletions

diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
index f014dec48..bf50de4e9 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
@@ -30,29 +30,29 @@
 }
 
 .avatar-32 {
- --avatarSize: 32px;
+  --avatarSize: 32px;
 }
 
 .avatar-34 {
- --avatarSize: 34px;
+  --avatarSize: 34px;
 }
 
 .avatar-36 {
- --avatarSize: 36px;
+  --avatarSize: 36px;
 }
 
 .avatar-40 {
- --avatarSize: 40px;
+  --avatarSize: 40px;
 }
 
 .avatar-100 {
   --avatarSize: 100px;
   --initialFontSize: 40px;
- }
+}
 
 .avatar-120 {
- --avatarSize: 120px;
- --initialFontSize: 46px;
+  --avatarSize: 120px;
+  --initialFontSize: 46px;
 }
 
 a:hover {
diff --git a/client/src/app/shared/shared-forms/input-switch.component.scss b/client/src/app/shared/shared-forms/input-switch.component.scss
index c14950bd7..290a70db8 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.scss
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@@ -5,7 +5,7 @@ input {
   position: absolute;
   visibility: hidden;
 
-  & + label {
+  + label {
     cursor: pointer;
     text-indent: -9999px;
     width: 35px;
@@ -16,7 +16,7 @@ input {
     position: relative;
     margin: 0;
 
-    &:after {
+    &::after {
       content: '';
       position: absolute;
       top: 3px;
@@ -28,7 +28,7 @@ input {
       transition: 0.3s ease-out;
     }
 
-    &:active:after {
+    &:active::after {
       width: 40px;
     }
   }
@@ -36,7 +36,7 @@ input {
   &:checked + label {
     background: pvar(--mainColor);
 
-    &:after {
+    &::after {
       left: calc(100% - 3px);
       transform: translateX(-100%);
     }
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 8203c7d1c..1f72dbc32 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -18,7 +18,7 @@ $input-border-radius: 3px;
 
       font-family: monospace;
       font-size: 13px;
-      border-bottom: none;
+      border-bottom: 0;
       border-bottom-left-radius: unset;
       border-bottom-right-radius: unset;
     }
@@ -51,7 +51,8 @@ $input-border-radius: 3px;
             opacity: 0.6;
           }
 
-          &:hover, &:active {
+          &:hover,
+          &:active {
             svg {
               opacity: 1;
             }
@@ -105,6 +106,8 @@ $input-border-radius: 3px;
 }
 
 @mixin maximized-base {
+  $nav-preview-vertical-padding: 40px;
+
   flex-direction: row;
   z-index: #{z(header) - 1};
   position: fixed;
@@ -115,20 +118,18 @@ $input-border-radius: 3px;
   width: calc(100% - #{$menu-width});
   height: calc(100vh - #{$header-height}) !important;
 
-  $nav-preview-vertical-padding: 40px;
-
   .nav-preview {
     @include nav-preview-medium();
     padding-top: #{$nav-preview-vertical-padding / 2};
     padding-bottom: #{$nav-preview-vertical-padding / 2};
-    padding-left: 0px;
-    padding-right: 0px;
+    padding-left: 0;
+    padding-right: 0;
     position: absolute;
     background-color: pvar(--mainBackgroundColor);
     width: 100% !important;
-    border-top: none;
-    border-left: none;
-    border-right: none;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
 
     :last-child {
       margin-right: pvar(--horizontalMarginContent);
@@ -148,7 +149,7 @@ $input-border-radius: 3px;
     margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
     height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
     width: 50% !important;
-    border: none !important;
+    border: 0 !important;
     border-radius: unset !important;
   }
 
@@ -249,11 +250,11 @@ $input-border-radius: 3px;
 }
 
 @media only screen and (min-width: $small-view) {
+  @include maximized-in-medium-view();
+
   :host-context(.expanded) {
     @include in-medium-view();
   }
-
-  @include maximized-in-medium-view();
 }
 
 @media only screen and (min-width: #{$small-view + $menu-width}) {
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 cf8540dc3..203b82d0b 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -46,7 +46,7 @@
     line-height: 12px;
     font-weight: 500;
     color: pvar(--inputPlaceholderColor);
-    background-color: rgba(217,225,232,.1);
-    border: 1px solid rgba(217,225,232,.5);
+    background-color: rgba(217, 225, 232, .1);
+    border: 1px solid rgba(217, 225, 232, .5);
   }
-}
\ No newline at end of file
+}
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.scss b/client/src/app/shared/shared-forms/preview-upload.component.scss
index 88eccd5f7..c2ee0d6a9 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.scss
+++ b/client/src/app/shared/shared-forms/preview-upload.component.scss
@@ -21,7 +21,7 @@
       max-width: 100%;
 
       &.no-image {
-        border: 2px solid grey;
+        border: 2px solid #808080;
         background-color: pvar(--mainBackgroundColor);
       }
     }
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 80196b8df..7006adab1 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
@@ -32,7 +32,7 @@ ng-select ::ng-deep {
 }
 
 .root {
-  display:flex;
+  display: flex;
   align-items: center;
 
   > my-select-options {
@@ -41,9 +41,9 @@ ng-select ::ng-deep {
 }
 
 my-select-options + input {
-  margin-left: 5px;
-
   @include peertube-input-text($form-base-input-width);
+
+  margin-left: 5px;
   display: block;
 }
 
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index 66e9aa032..36f5711a6 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -4,8 +4,7 @@ p-inputmask {
   ::ng-deep input {
     width: 80px;
     font-size: 15px;
-
-    border: none;
+    border: 0;
 
     &:focus-within,
     &:focus {
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
index 2f6b420e3..615e08bcc 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@@ -1,6 +1,6 @@
 @import '_variables';
 @import '_mixins';
-@import "./_bootstrap-variables";
+@import './_bootstrap-variables';
 
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
@@ -30,7 +30,7 @@ ngb-accordion ::ng-deep {
       background-color: unset;
       padding: 0;
 
-      & + .collapse.show {
+      + .collapse.show {
         background-color: var(--submenuBackgroundColor);
       }
     }
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 d17e91fc2..11cf11616 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
@@ -19,7 +19,7 @@ table {
     .more-info {
       font-style: italic;
       font-weight: initial;
-      font-size: 14px
+      font-size: 14px;
     }
   }
 
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
index 724a04efc..b9a4d46dc 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
@@ -8,6 +8,9 @@
 .action-button {
   @include peertube-button;
 
+  display: inline-block;
+  padding: 0 10px;
+
   &.button-styled {
 
     &.grey {
@@ -18,14 +21,13 @@
       @include orange-button;
     }
 
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
       background-color: $grey-background-color;
     }
   }
 
-  display: inline-block;
-  padding: 0 10px;
-
   &::after {
     display: none;
   }
@@ -64,7 +66,8 @@
       @include dropdown-with-icon-item;
     }
 
-    a, span {
+    a,
+    span {
       display: block;
       width: 100%;
     }
diff --git a/client/src/app/shared/shared-main/date/date-toggle.component.scss b/client/src/app/shared/shared-main/date/date-toggle.component.scss
index 86700d1d4..b87f7c475 100644
--- a/client/src/app/shared/shared-main/date/date-toggle.component.scss
+++ b/client/src/app/shared/shared-main/date/date-toggle.component.scss
@@ -1,5 +1,5 @@
 .date-toggle {
   &:hover {
-    cursor: default
+    cursor: default;
   }
 }
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss
index b655ee708..d39f31d70 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.scss
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -5,14 +5,14 @@
   width: 100%;
 
   a {
-    color: black;
+    color: #000;
     display: block;
   }
 }
 
 my-global-icon {
+  @include apply-svg-color(pvar(--mainForegroundColor));
+
   cursor: pointer;
   width: 100%;
-
-  @include apply-svg-color(pvar(--mainForegroundColor))
 }
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.scss b/client/src/app/shared/shared-main/loaders/loader.component.scss
index ffac9c707..64138afe4 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.scss
+++ b/client/src/app/shared/shared-main/loaders/loader.component.scss
@@ -20,7 +20,7 @@
   border: 4px solid;
   border-radius: 50%;
   animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #999999 transparent transparent transparent;
+  border-color: #999999 transparent transparent;
 }
 
 .loader div:nth-child(1) {
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 ccc91ffab..68d7ad48f 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -2,20 +2,19 @@
 @import '_mixins';
 
 .help-tooltip-button {
-  cursor: pointer;
-  border: none;
+  @include disable-outline;
 
+  cursor: pointer;
+  border: 0;
   margin: 5px;
 
   my-global-icon {
+    @include apply-svg-color(pvar(--greyForegroundColor));
+
     width: 17px;
     position: relative;
     top: -1px;
-
-    @include apply-svg-color(pvar(--greyForegroundColor))
   }
-
-  @include disable-outline;
 }
 
 ::ng-deep {
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.html b/client/src/app/shared/shared-main/misc/list-overflow.component.html
index 986572801..b2e0982f1 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.html
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.html
@@ -2,19 +2,19 @@
   <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
     <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
   </span>
-  
+
   <ng-container *ngIf="isMenuDisplayed()">
     <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
       <span class="glyphicon glyphicon-chevron-down"></span>
     </button>
-  
+
     <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
-      <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ routeActive: active }"
+      <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
         ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
       >
         <span class="glyphicon glyphicon-chevron-down"></span>
       </button>
-  
+
       <div ngbDropdownMenu>
         <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
           [routerLink]="item.routerLink" routerLinkActive="active" class="dropdown-item">
diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.scss b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
index 1ec044489..7e31d3850 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.scss
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
@@ -15,13 +15,13 @@
 
 button {
   width: 30px;
-  border: none;
+  border: 0;
 
   &::after {
     display: none;
   }
 
-  &.routeActive {
+  &.route-active {
     &::after {
       display: inherit;
       border: 2px solid pvar(--mainColor);
@@ -36,7 +36,7 @@ button {
   margin-top: 0 !important;
   position: static;
   right: auto;
-  bottom: auto
+  bottom: auto;
 }
 
 .modal-body {
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 fa9c55ec9..b69d4b5d6 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
@@ -21,11 +21,11 @@
   }
 
   my-global-icon {
+    @include apply-svg-color(#333);
+
     width: 24px;
     margin-right: 11px;
     margin-left: 3px;
-
-    @include apply-svg-color(#333);
   }
 
   .avatar {
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 c670559d3..c06cafe29 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
@@ -11,7 +11,8 @@ label {
     margin-right: 5px;
   }
 
-  &, .progress {
+  &,
+  .progress {
     width: 100% !important;
   }
 
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.scss b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
index 3eede44eb..63a9df823 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
@@ -6,6 +6,7 @@
 
   input {
     @include peertube-input-text(250px);
+
     flex-grow: 1;
   }
 }
@@ -17,4 +18,4 @@
 .unblock-button {
   @include peertube-button;
   @include grey-button;
-}
\ No newline at end of file
+}
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index cdcc12fe0..ab43d8457 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -17,12 +17,18 @@
     word-wrap: break-word;
 
     ::ng-deep p:last-child {
-      margin-bottom: 0px !important;
+      margin-bottom: 0 !important;
     }
   }
 }
 
 .screenratio {
+  @include block-ratio($selector: 'div, ::ng-deep iframe') {
+    width: 100% !important;
+    height: 100% !important;
+    left: 0;
+  };
+
   div {
     @include miniature-thumbnail;
 
@@ -31,12 +37,6 @@
     align-items: center;
     color: pvar(--inputPlaceholderColor);
   }
-
-  @include block-ratio($selector: 'div, ::ng-deep iframe') {
-    width: 100% !important;
-    height: 100% !important;
-    left: 0;
-  };
 }
 
 .input-group {
@@ -93,15 +93,15 @@ my-action-dropdown.show {
   display: inline-flex;
 
   .table-video-image {
-    @include miniature-thumbnail;
-
     $image-height: 45px;
 
+    @include miniature-thumbnail;
+
     height: $image-height;
     width: #{(16/9) * $image-height};
     margin-right: 0.5rem;
     border-radius: 2px;
-    border: none;
+    border: 0;
     background: transparent;
     display: inline-flex;
     justify-content: center;
@@ -139,7 +139,7 @@ my-action-dropdown.show {
 
     div .glyphicon {
       font-size: 80%;
-      color: gray;
+      color: #808080;
       margin-left: 0.1rem;
     }
 
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.scss b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
index 31db4d92b..af21c0c20 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
@@ -5,7 +5,8 @@ a {
   @include disable-default-a-behaviour;
   display: inline-block;
 
-  &, &:hover {
+  &,
+  &:hover {
     color: pvar(--mainForegroundColor);
   }
 
diff --git a/client/src/app/shared/shared-moderation/video-block.component.scss b/client/src/app/shared/shared-moderation/video-block.component.scss
index afa0d96f7..a6e33070b 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.scss
+++ b/client/src/app/shared/shared-moderation/video-block.component.scss
@@ -7,5 +7,5 @@ textarea {
 
 .live-info {
   font-size: 15px;
-  margin: 40px 0 20px 0;
+  margin: 40px 0 20px;
 }
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
index ea59ab346..e678d6edf 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -11,7 +11,7 @@
   width: 100%;
   position: absolute;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.20);
+  background-color: rgba(0, 0, 0, 0.2);
 
   div {
     height: 100%;
@@ -39,8 +39,8 @@
   top: 5px;
   font-weight: $font-bold;
 
-  &.warning { background-color: orange; }
-  &.danger { background-color: red; }
+  &.warning { background-color: #ffa500; }
+  &.danger { background-color: #ff0000; }
 }
 
 .video-thumbnail-duration-overlay,
@@ -77,9 +77,9 @@
   padding: 3px;
 
   my-global-icon {
+    @include apply-svg-color(#fff);
+
     width: 22px;
     height: 22px;
-
-    @include apply-svg-color(#fff);
   }
 }
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
index 698c5866a..73db0d090 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
@@ -3,4 +3,4 @@
 .btn-remote-follow {
   @include peertube-button;
   @include orange-button;
-}
\ No newline at end of file
+}
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 f6cdc11c0..897ee7799 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
@@ -8,8 +8,8 @@
   float: right;
   padding: 0;
 
-  & > .btn,
-  & > .dropdown > .dropdown-toggle {
+  > .btn,
+  > .dropdown > .dropdown-toggle {
     font-size: 15px;
   }
 
@@ -20,7 +20,7 @@
   &.big {
     height: 35px;
 
-    & > button:first-child {
+    > button:first-child {
       width: max-content;
       min-width: 175px;
     }
@@ -29,7 +29,7 @@
       span:first-child {
         line-height: 80%;
       }
-    
+
       span:not(:first-child) {
         font-size: 75%;
       }
@@ -37,15 +37,15 @@
   }
 
   // Unlogged
-  & > .dropdown > .dropdown-toggle span {
+  > .dropdown > .dropdown-toggle span {
     padding-right: 3px;
   }
 
   // Logged
-  & > .btn {
+  > .btn {
     padding-right: 4px;
 
-    & + .dropdown > button {
+    + .dropdown > button {
       padding-left: 2px;
 
       &::after {
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 467ca1d2c..d9cf7a14f 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
@@ -3,7 +3,7 @@
 @import '_mixins';
 @import '_miniature';
 
-$iconSize: 16px;
+$icon-size: 16px;
 
 ::ng-deep my-video-list-header {
   display: flex;
@@ -17,20 +17,19 @@ $iconSize: 16px;
 
   my-feed {
     display: inline-block;
-    width: calc(#{$iconSize} - 2px);
+    width: calc(#{$icon-size} - 2px);
   }
 
   .moderation-block {
-
-    my-global-icon {
-      position: relative;
-      width: $iconSize;
-    }
-
     margin-left: .4rem;
     display: flex;
     justify-content: flex-end;
     align-items: center;
+
+    my-global-icon {
+      position: relative;
+      width: $icon-size;
+    }
   }
 }
 
@@ -72,7 +71,7 @@ $iconSize: 16px;
 
     .title-page {
       margin-bottom: 10px;
-      margin-right: 0px;
+      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 7f6e03c87..b689b1046 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
@@ -28,7 +28,7 @@
 
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  border-right: none;
+  border-right: 0;
 
   select {
     height: inherit;
@@ -85,7 +85,7 @@
   &.metadata-attribute-tags {
     .metadata-attribute-value:not(:nth-child(2)) {
       &::before {
-        content: ', '
+        content: ', ';
       }
     }
   }
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 c142e2e93..5df89d019 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
@@ -41,7 +41,7 @@ my-actor-avatar {
 }
 
 .video-info-blocked {
-  color: red;
+  color: #ff0000;
 
   .blocked-reason::before {
     content: ' - ';
@@ -49,7 +49,7 @@ my-actor-avatar {
 }
 
 .video-info-nsfw {
-  color: red;
+  color: #ff0000;
 }
 
 .video-actions {
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 b84cacece..cb1168196 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
@@ -126,7 +126,7 @@ $timestamp-margin-right: 10px;
   border-top: 1px solid $separator-border-color;
 }
 
-.new-playlist-button  {
+.new-playlist-button {
   cursor: pointer;
 
   my-global-icon {
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 572f7d7a8..9ccd03912 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
@@ -84,21 +84,23 @@ my-video-thumbnail,
         width: auto;
       }
 
-      .video-info-account, .video-info-timestamp {
+      .video-info-account,
+      .video-info-timestamp {
         color: pvar(--greyForegroundColor);
       }
     }
   }
 
   .video-info-name {
+    @include ellipsis;
+
     font-size: 18px;
     font-weight: $font-semibold;
     display: inline-block;
-
-    @include ellipsis;
   }
 
-  .more, my-edit-button {
+  .more,
+  my-edit-button {
     justify-self: flex-end;
     margin-left: auto;
     cursor: pointer;
@@ -118,7 +120,7 @@ my-video-thumbnail,
       display: flex;
 
       &::after {
-        border: none;
+        border: 0;
       }
     }
   }
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 99089166c..a46a6e475 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
@@ -6,7 +6,7 @@
   display: inline-block;
   width: 100%;
 
-  &.no-videos:not(.to-manage){
+  &.no-videos:not(.to-manage) {
     a {
       cursor: default !important;
     }