Move to stylelint

author: Chocobozzz <me@florianbigard.com> 2021-04-28 16:41:07 +0200
committer: Chocobozzz <me@florianbigard.com> 2021-04-28 17:53:57 +0200
commit: 931d3430184143ebd88e5243def6eb1d7acfdbf4 (patch)
tree: 909919bafd6fa8563d26d616c6257ebd0211c83c /client/src
parent: 7d026caf683e42fd57a243a3b52a5e4f476fbb4e (diff)
download: PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.gz
PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.zst
PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.zip
113 files changed, 523 insertions, 456 deletions
diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index e9139b503..f81465f88 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -21,7 +21,7 @@
      {{ following }}
    </a>
-    <button i18n class="showMore" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
+    <button i18n class="show-more" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
  </div>
 </div>
diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss
index a393c9d92..83241e727 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -17,9 +17,9 @@ a {
  justify-content: flex-start;
 }
-.showMore {
+.show-more {
  @include peertube-button-link;
  @include grey-button;
-  
  margin-top: 1%;
 }
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index 7158a3a79..9886bdfef 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -63,7 +63,8 @@
  position: relative;
-  &:hover, &:active {
+  &:hover,
+  &:active {
    &::after {
      content: '#';
      display: inline-block;
@@ -71,7 +72,8 @@
    }
  }
-  .middle-title, .section-title {
+  .middle-title,
+  .section-title {
    display: inline-block;
  }
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
index e67252410..e5d2bc5b8 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -45,7 +45,8 @@
 .p2p-privacy,
 my-about-peertube-contributors {
  ::ng-deep {
-    p, li {
+    p,
+    li {
      font-size: 15px;
    }
  }
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 0c490ad53..f9d097644 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -65,13 +65,13 @@
  }
  .description-html {
+    @include fade-text(30px, pvar(--channelBackgroundColor));
    grid-column: 2 / 4;
    grid-row: 2;
    max-height: 80px;
    font-size: 16px;
-    @include fade-text(30px, pvar(--channelBackgroundColor));
  }
 }
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 56927dea6..2e99fe8a5 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -40,7 +40,7 @@ my-user-moderation-dropdown,
 }
 .copy-button {
-  border: none;
+  border: 0;
 }
 .account-info {
@@ -104,9 +104,9 @@ my-user-moderation-dropdown,
  }
  .description:not(.expanded) {
-    max-height: 70px;
    @include fade-text(30px, pvar(--submenuBackgroundColor));
+    max-height: 70px;
  }
  .show-more {
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index c12465d45..cc2a98a17 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -57,7 +57,7 @@ input[type=submit] {
  display: flex;
  margin-left: auto;
-  & + .form-error {
+  + .form-error {
    display: inline;
    margin-left: 5px;
  }
@@ -84,7 +84,8 @@ textarea {
 }
 .disabled-checkbox-extra {
-  &, ::ng-deep label {
+  &,
+  ::ng-deep label {
    opacity: .5;
    pointer-events: none;
  }
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
index f2d752eb5..12c0cd033 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -13,7 +13,8 @@ a {
  @include disable-default-a-behaviour;
  display: inline-block;
-  &, &:hover {
+  &,
+  &:hover {
    color: pvar(--mainForegroundColor);
  }
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss
index b108218b8..797882d9a 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.scss
+++ b/client/src/app/+admin/follows/following-list/following-list.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/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss
index 33ff17539..1ed0d925f 100644
--- a/client/src/app/+admin/follows/follows.component.scss
+++ b/client/src/app/+admin/follows/follows.component.scss
@@ -1,4 +1,4 @@
-@import "mixins";
+@import 'mixins';
 .form-sub-title {
  flex-grow: 0;
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
index adcf2037e..30b9f2147 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.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/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss
index 6028b75ea..1d98e44d9 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss
@@ -4,4 +4,4 @@
 .unblock-button {
  @include peertube-button;
  @include grey-button;
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
index c9262da09..5d97d9bdb 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
@@ -49,7 +49,8 @@ my-global-icon {
      max-height: 22px;
    }
-    div, p {
+    div,
+    p {
      @include ellipsis;
    }
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
index 9376e38b0..22d4a59ab 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
@@ -1,6 +1,6 @@
 @import '_variables';
 @import '_mixins';
-.update-button[disabled="true"] ::ng-deep .action-button {
+.update-button[disabled=true] ::ng-deep .action-button {
  cursor: default !important;
 }
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
index 5ab6e5f1b..6b7b84e29 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
@@ -5,7 +5,8 @@ h2 {
  margin-bottom: 20px;
 }
-input[type=submit], button {
+input[type=submit],
+button {
  @include peertube-button;
  @include orange-button;
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
index f59a01b74..e4ddc9060 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -27,7 +27,7 @@
    my-global-icon {
      @include apply-svg-color(pvar(--greyForegroundColor));
-      &[iconName="npm"] {
+      &[iconName=npm] {
        @include fill-svg-color(pvar(--greyForegroundColor));
      }
    }
@@ -49,7 +49,7 @@
  justify-content: space-between;
  .description {
-    opacity: 0.8
+    opacity: 0.8;
  }
 }
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index 7c6159420..65ee6ec5f 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -51,7 +51,7 @@ pre {
 }
 .job-error {
-  color: red;
+  color: #ff0000;
 }
 .badge {
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index 587a9795c..1a7c3be75 100644
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -66,7 +66,7 @@
    ng-select,
    my-button {
      width: 100% !important;
-      margin-left: 0px !important;
+      margin-left: 0 !important;
      margin-bottom: 10px !important;
    }
@@ -85,7 +85,7 @@
      ng-select,
      my-button {
        width: 100% !important;
-        margin-left: 0px !important;
+        margin-left: 0 !important;
        margin-bottom: 10px !important;
      }
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss
index 8b0ac8783..145177fb9 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss
@@ -37,7 +37,8 @@ my-select-custom-value {
  display: block;
 }
-input[type=submit], button {
+input[type=submit],
+button {
  @include peertube-button;
  @include orange-button;
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.scss b/client/src/app/+admin/users/user-edit/user-password.component.scss
index 1f0d49227..66d15ee9c 100644
--- a/client/src/app/+admin/users/user-edit/user-password.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-password.component.scss
@@ -7,7 +7,7 @@ input:not([type=submit]):not([type=checkbox]) {
  display: block;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
-  border-right: none;
+  border-right: 0;
 }
 input[type=submit] {
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 50080bad6..f18747ec3 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -24,7 +24,7 @@ tr.banned > td {
 .user-table-primary-text .glyphicon {
  font-size: 80%;
-  color: gray;
+  color: #808080;
  margin-left: 0.1rem;
 }
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index eddaff542..62ae722c3 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -33,7 +33,8 @@ input[type=email] {
  }
 }
-.create-an-account, .forgot-password-button {
+.create-an-account,
+.forgot-password-button {
  color: pvar(--mainForegroundColor);
  cursor: pointer;
  transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
@@ -49,7 +50,7 @@ input[type=email] {
  justify-content: space-around;
  flex-wrap: wrap;
-  & > div {
+  > div {
    flex: 1 1;
  }
@@ -65,7 +66,8 @@ input[type=email] {
    form {
      margin: 0;
-      &, input {
+      &,
+      input {
        width: 100%;
      }
@@ -82,7 +84,8 @@ input[type=email] {
          color: var(--mainColor);
-          &:hover, &:active {
+          &:hover,
+          &:active {
            color: var(--mainHoverColor);
          }
        }
@@ -111,7 +114,7 @@ input[type=email] {
        min-width: 100px;
        &:hover {
-          background-color: rgba(209, 215, 224, 0.5)
+          background-color: rgba(209, 215, 224, 0.5);
        }
      }
    }
@@ -138,7 +141,7 @@ input[type=email] {
  }
 }
-@mixin columnReverseDisplay {
+@mixin column-reverse-display {
  flex-direction: column-reverse;
  .login-form-and-externals,
@@ -168,14 +171,14 @@ input[type=email] {
 @media screen and (max-width: breakpoint(md)) {
  .wrapper {
-    @include columnReverseDisplay();
+    @include column-reverse-display();
  }
 }
 @media screen and (max-width: breakpoint(md) + $menu-width) {
  :host-context(.main-col:not(.expanded)) {
    .wrapper {
-      @include columnReverseDisplay();
+      @include column-reverse-display();
    }
  }
 }
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
index 704132c03..c1e1f2432 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
@@ -21,7 +21,7 @@ input[type=submit] {
  display: flex;
  margin-left: auto;
-  & + .form-error {
+  + .form-error {
    display: inline;
    margin-left: 5px;
  }
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index 035fa2b27..abf52504a 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -32,7 +32,8 @@ my-user-notifications {
  .header {
    flex-direction: column;
-    & >:first-child, .peertube-select-container {
+    > :first-child,
+    .peertube-select-container {
      margin-bottom: 15px;
    }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
index d79ff690b..64f960964 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
@@ -7,4 +7,4 @@
    @include danger-button;
    @include disable-outline;
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index b06d8b16d..42319400d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -10,7 +10,7 @@
    font-size: 16px;
  }
-  & > div {
+  > div {
    padding: 10px;
    &:first-child {
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index a5bb499b4..b32bc84e7 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -2,12 +2,12 @@
 @import '_mixins';
 .row {
+  @include sub-menu-h1;
  flex-direction: column;
  width: 100%;
-  & > my-top-menu-dropdown:nth-child(1) {
+  > my-top-menu-dropdown:nth-child(1) {
    flex-grow: 1;
  }
-  @include sub-menu-h1;
 }
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
index 22de103d1..667726c22 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
@@ -66,7 +66,8 @@ textarea {
    width: auto !important;
  }
-  label[for=name] + div, textarea {
+  label[for=name] + div,
+  textarea {
    width: 100%;
  }
 }
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index dafba925e..bb5394094 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -83,7 +83,7 @@ input[type=text] {
        margin: auto;
        .video-channel-name {
-          margin-left: 0px !important;
+          margin-left: 0 !important;
        }
      }
    }
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index af4a34b4b..28b809f71 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -39,12 +39,12 @@
  }
  .delete-history {
-    grid-column: 4;
    @include peertube-button;
    @include grey-button;
    @include button-with-icon;
+    grid-column: 4;
    font-size: 15px;
  }
 }
diff --git a/client/src/app/+my-library/my-library.component.scss b/client/src/app/+my-library/my-library.component.scss
index a5bb499b4..b32bc84e7 100644
--- a/client/src/app/+my-library/my-library.component.scss
+++ b/client/src/app/+my-library/my-library.component.scss
@@ -2,12 +2,12 @@
 @import '_mixins';
 .row {
+  @include sub-menu-h1;
  flex-direction: column;
  width: 100%;
-  & > my-top-menu-dropdown:nth-child(1) {
+  > my-top-menu-dropdown:nth-child(1) {
    flex-grow: 1;
  }
-  @include sub-menu-h1;
 }
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
index 7cac9c9f3..dfc8fc99e 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
@@ -13,15 +13,15 @@
  display: inline-flex;
  .video-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;
@@ -60,7 +60,7 @@
    div .glyphicon {
      font-size: 80%;
-      color: gray;
+      color: #808080;
      margin-left: 0.1rem;
    }
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
index a93c28028..c4b847c3d 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
@@ -6,7 +6,7 @@ pre {
 }
 .video-import-error {
-  color: red;
+  color: #ff0000;
 }
 .badge {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
index 0c68dedf6..67587a58a 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -25,8 +25,8 @@
 }
 .playlist-buttons {
-  display:flex;
+  display: flex;
-  margin: 30px 0 10px 0;
+  margin: 30px 0 10px;
  .share-button {
    @include peertube-button;
@@ -42,9 +42,10 @@
 .cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+  box-shadow:
-  0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-  0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 .cdk-drag-placeholder {
@@ -56,7 +57,7 @@
 }
 .video:last-child {
-  border: none;
+  border: 0;
 }
 .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
index a79fec179..16187bc4a 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
@@ -7,4 +7,4 @@ p-autocomplete {
 .form-group {
  margin: 20px 0;
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index aaf21126b..57623c36f 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -26,12 +26,12 @@ h1 {
 }
 .action-button-delete-selection {
-  display: inline-block;
  @include peertube-button;
  @include orange-button;
  @include button-with-icon(21px);
+  display: inline-block;
  my-global-icon {
    @include apply-svg-color(#fff);
  }
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index 68ac6d021..cfb7a1d98 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -46,7 +46,7 @@ input[type=submit] {
  font-weight: $font-semibold;
  display: inline-block;
-  padding: 0 10px 0 10px;
+  padding: 0 10px;
  white-space: nowrap;
  background: transparent;
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 16ba9e2c0..f6a846ffa 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -84,7 +84,7 @@ button {
      border-color: pvar(--mainColor) transparent transparent transparent;
    }
-    & + div {
+    + div {
      font-size: 15px;
    }
  }
diff --git a/client/src/app/+signup/shared/signup-success.component.scss b/client/src/app/+signup/shared/signup-success.component.scss
index fbc27c8bc..b302366e2 100644
--- a/client/src/app/+signup/shared/signup-success.component.scss
+++ b/client/src/app/+signup/shared/signup-success.component.scss
@@ -9,19 +9,16 @@ svg {
  stroke-dashoffset: 0;
  &.circle {
-    -webkit-animation: dash .9s ease-in-out;
    animation: dash .9s ease-in-out;
  }
  &.line {
    stroke-dashoffset: 1000;
-    -webkit-animation: dash .9s .35s ease-in-out forwards;
    animation: dash .9s .35s ease-in-out forwards;
  }
  &.check {
    stroke-dashoffset: -100;
-    -webkit-animation: dash-check .9s .35s ease-in-out forwards;
    animation: dash-check .9s .35s ease-in-out forwards;
  }
 }
@@ -38,16 +35,6 @@ svg {
  text-align: center;
 }
-@-webkit-keyframes dash {
-  0% {
-    stroke-dashoffset: 1000;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
 @keyframes dash {
  0% {
    stroke-dashoffset: 1000;
@@ -57,15 +44,6 @@ svg {
  }
 }
-@-webkit-keyframes dash-check {
-  0% {
-    stroke-dashoffset: -100;
-  }
-  100% {
-    stroke-dashoffset: 900;
-  }
-}
 @keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 360a99342..470f64878 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -131,10 +131,10 @@
  }
  .owner-description {
+    @include fade-text(120px, pvar(--mainBackgroundColor));
    max-height: 140px;
    word-break: break-word;
-    @include fade-text(120px, pvar(--mainBackgroundColor));
  }
 }
@@ -150,7 +150,7 @@
 }
 .copy-button {
-  border: none;
+  border: 0;
 }
 @media screen and (max-width: 1400px) {
@@ -178,9 +178,9 @@
  }
  .channel-description:not(.expanded) {
-    max-height: 70px;
    @include fade-text(30px, pvar(--channelBackgroundColor));
+    max-height: 70px;
  }
  .show-more {
@@ -220,10 +220,10 @@
    }
    .owner-description {
+      @include fade-text(30px, pvar(--mainBackgroundColor));
      grid-column: 2;
      max-height: 70px;
-      @include fade-text(30px, pvar(--mainBackgroundColor));
    }
    .view-account {
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
index 0958b5f80..a85cf444c 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
@@ -16,6 +16,6 @@ label {
 }
 .warning-replace-caption {
-  color: red;
+  color: #ff0000;
  margin-top: 10px;
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 0b70b0270..bc32d7964 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -150,7 +150,7 @@ p-calendar {
  @include media-breakpoint-up(md) {
    @include make-col(7);
-    & + .col-video-edit {
+    + .col-video-edit {
      @include make-col(5);
    }
  }
@@ -158,7 +158,7 @@ p-calendar {
  @include media-breakpoint-up(xl) {
    @include make-col(8);
-    & + .col-video-edit {
+    + .col-video-edit {
      @include make-col(4);
    }
  }
@@ -169,7 +169,7 @@ p-calendar {
    @include media-breakpoint-up(md) {
      @include make-col(8);
-      & + .col-video-edit {
+      + .col-video-edit {
        @include make-col(4);
      }
    }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index 17c5f63e9..dc9153b2b 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -6,7 +6,7 @@ $width-size: 190px;
 .alert.alert-danger {
  text-align: center;
-  & > div {
+  > div {
    font-weight: $font-semibold;
  }
 }
@@ -17,10 +17,10 @@ $width-size: 190px;
  align-items: center;
  .upload-icon {
+    @include apply-svg-color(#C6C6C6);
    width: 90px;
    margin-bottom: 25px;
-    @include apply-svg-color(#C6C6C6);
  }
  .peertube-select-container {
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index 1ebee946b..35bca24d0 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -44,7 +44,7 @@ $nav-link-height: 40px;
 ::ng-deep .video-add-nav {
  border-bottom: $border-width $border-type $border-color;
-  margin: 20px 0 0 0 !important;
+  margin: 20px 0 0 !important;
  &.hide-nav {
    display: none !important;
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index 54e61eac4..7743bd41d 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -31,7 +31,7 @@ form {
    padding-right: $markdown-icon-width + 15px !important;
    @media screen and (max-width: 600px) {
-      padding-right: $markdown-icon-width + 19px  !important;
+      padding-right: $markdown-icon-width + 19px !important;
    }
    &:focus::placeholder {
@@ -57,7 +57,9 @@ form {
      }
    }
-    &:focus, &:active, &:hover {
+    &:focus,
+    &:active,
+    &:hover {
      my-global-icon svg {
        background-color: #C6C6C6;
        color: pvar(--mainBackgroundColor);
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
index f0dcc08b8..a4d2e237c 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
@@ -62,7 +62,7 @@ my-actor-avatar {
  display: inline-flex;
  padding-right: 6px;
  padding-left: 6px;
-  color: white !important;
+  color: #fff !important;
 }
 .comment-account {
@@ -133,7 +133,10 @@ my-actor-avatar {
    cursor: pointer;
    margin-right: 10px;
-    &:hover, &:active, &:focus, &:focus-visible {
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-visible {
      color: pvar(--mainForegroundColor);
    }
  }
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
index e6778e1a9..a7e858069 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
@@ -11,7 +11,8 @@
  cursor: pointer;
 }
-.glyphicon, .comment-thread-loading {
+.glyphicon,
+.comment-thread-loading {
  margin-right: 5px;
  display: inline-block;
  font-size: 13px;
@@ -40,7 +41,7 @@
 #dropdown-sort-comments {
  font-weight: 600;
  text-transform: uppercase;
-  border: none;
+  border: 0;
  transform: translateY(-7%);
 }
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
index c9fae6f27..5e0373afc 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
@@ -8,7 +8,8 @@
  margin-bottom: 25px;
  flex-wrap: wrap-reverse;
-  .title-page.active, .title-page.title-page-single {
+  .title-page.active,
+  .title-page.title-page-single {
    margin-bottom: unset;
    margin-right: .5rem !important;
  }
diff --git a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
index 0b0a2a899..b3f93b83c 100644
--- a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
@@ -45,7 +45,7 @@
      my-global-icon {
        &:not(.active) {
-          opacity: .5
+          opacity: .5;
        }
        ::ng-deep {
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index eadb2148a..4779602d2 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -79,7 +79,7 @@
                  <span [innerHTML]="getRatePopoverText()"></span>
                </ng-template>
-                <div class="video-actions fullWidth justify-content-end">
+                <div class="video-actions full-width justify-content-end">
                  <button
                    [ngbPopover]="getRatePopoverText() && ratePopoverText" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" (keyup.enter)="setLike()"
                    class="action-button action-button-like" [attr.aria-pressed]="userRating === 'like'" [attr.aria-label]="tooltipLike"
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 e8ad10a11..301762695 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -6,12 +6,12 @@
 $player-factor: 16/9;
 $video-info-margin-left: 44px;
-@function getPlayerHeight($width){
+@function getPlayerHeight ($width) {
-  @return calc(#{$width} / #{$player-factor})
+  @return calc(#{$width} / #{$player-factor});
 }
-@function getPlayerWidth($height){
+@function getPlayerWidth ($height) {
-  @return calc(#{$height} * #{$player-factor})
+  @return calc(#{$height} * #{$player-factor});
 }
 @mixin playlist-below-player {
@@ -24,11 +24,11 @@ $video-info-margin-left: 44px;
 .root {
  &.theater-enabled #video-wrapper {
+    $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
    flex-direction: column;
    justify-content: center;
-    $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
    #videojs-wrapper {
      width: 100%;
      height: $height;
@@ -141,7 +141,7 @@ $video-info-margin-left: 44px;
    .video-info-first-row {
      display: flex;
-      & > div:first-child {
+      > div:first-child {
        flex-grow: 1;
      }
@@ -207,7 +207,7 @@ $video-info-margin-left: 44px;
      }
      .video-actions-rates {
-        margin: 0 0 10px 0;
+        margin: 0 0 10px;
        align-items: start;
        width: max-content;
        margin-left: auto;
@@ -231,7 +231,7 @@ $video-info-margin-left: 44px;
            font-size: 100%;
            font-weight: $font-semibold;
            display: inline-block;
-            padding: 0 10px 0 10px;
+            padding: 0 10px;
            white-space: nowrap;
            background-color: transparent !important;
            color: pvar(--actionButtonColor);
@@ -346,7 +346,8 @@ $video-info-margin-left: 44px;
        }
      }
-      .glyphicon, .description-loading {
+      .glyphicon,
+      .description-loading {
        margin-left: 3px;
      }
@@ -396,7 +397,7 @@ $video-info-margin-left: 44px;
      &.video-attribute-tags {
        .video-attribute-value:not(:nth-child(2)) {
          &::before {
-            content: ', '
+            content: ', ';
          }
        }
      }
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index 251eae456..8fbac1b46 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -16,7 +16,7 @@
    padding-top: 30px;
    .section-title {
-      border-top: none !important;
+      border-top: 0 !important;
    }
  }
@@ -33,12 +33,14 @@
    }
    a {
-      &:hover, &:focus:not(.focus-visible), &:active {
+      color: pvar(--mainForegroundColor);
+      &:hover,
+      &:focus:not(.focus-visible),
+      &:active {
        text-decoration: none;
        outline: none;
      }
-      color: pvar(--mainForegroundColor);
    }
  }
diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
index 923a1d67a..6daacc78e 100644
--- a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
+++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
@@ -14,4 +14,4 @@
    height: 1rem;
    margin-right: .1rem;
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e7d05369b..e21ada0f1 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -79,7 +79,7 @@
    display: inline-block;
    width: 23px;
    height: 24px;
-    margin-right: .5rem;
+    margin-right: 0.5rem;
  }
  @media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index a970260c9..b39ffa98d 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -12,16 +12,13 @@
  left: 0;
  color: #333;
  font-size: 1em;
-  background-color: rgba(255,255,255,0.9);
+  background-color: rgba(255, 255, 255, 0.9);
 }
 .cfp-hotkeys-container.fade {
  z-index: -1024;
  visibility: hidden;
  opacity: 0;
-  -webkit-transition: opacity 0.15s linear;
-  -moz-transition: opacity 0.15s linear;
-  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
 }
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index c754a99d1..3e0350ba0 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -44,7 +44,8 @@ li.suggestion {
  // soft border-radius for the last suggestion and the link inside
  &:last-of-type {
-    &, & ::ng-deep a {
+    &,
+    ::ng-deep a {
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px;
    }
@@ -74,7 +75,7 @@ li.suggestion {
 #typeahead-container {
  input {
    border: 1px solid pvar(--mainBackgroundColor) !important;
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0;
    flex-grow: 1;
    transition: box-shadow .3s ease, width .2s ease;
  }
@@ -95,7 +96,7 @@ li.suggestion {
    right: 10px;
  }
-  & > div:last-child {
+  > div:last-child {
    // we have to switch the display and not the opacity,
    // to avoid clashing with the rest of the interface.
    display: none;
@@ -103,7 +104,7 @@ li.suggestion {
  &:focus,
  ::ng-deep &:focus-within {
-    & > div:last-child {
+    > div:last-child {
      @media screen and (min-width: $mobile-view) {
        display: initial !important;
      }
@@ -111,12 +112,12 @@ li.suggestion {
      #typeahead-help,
      #typeahead-instructions,
      li.suggestion {
-        box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
+        box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px;
      }
    }
    ::ng-deep input {
-      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
+      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;
diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
index 692a81daa..9163de0b1 100644
--- a/client/src/app/header/suggestion.component.scss
+++ b/client/src/app/header/suggestion.component.scss
@@ -2,9 +2,11 @@
 a {
  @include disable-default-a-behaviour;
  width: 100%;
-  &, &:hover {
+  &,
+  &:hover {
    color: pvar(--mainForegroundColor);
    &.focus-visible {
@@ -23,10 +25,10 @@ a {
 }
 my-global-icon {
+  @include apply-svg-color(pvar(--mainForegroundColor));
  width: 17px;
  position: relative;
  top: -2px;
  margin: 5px;
-  @include apply-svg-color(pvar(--mainForegroundColor));
 }
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 6226a85cb..800b1ebef 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -5,12 +5,12 @@
  @include peertube-button-link;
  @include orange-button;
+  border-radius: 0;
  &.focus-visible,
  &:focus {
    box-shadow: none;
  }
-  border-radius: 0;
 }
 .modal-body {
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index c84a08b1d..d0edd820e 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -24,8 +24,9 @@ $footer-links-base-opacity: .8;
    background-color: rgba(255, 255, 255, 0.15);
  }
-  &:hover, &.focus-visible {
+  &:hover,
-    background-color: rgba(255, 255, 255, 0.10);
+  &.focus-visible {
+    background-color: rgba(255, 255, 255, 0.1);
  }
  my-global-icon {
@@ -60,7 +61,8 @@ menu {
  margin: 0;
  padding: 0;
-  &:focus, &:hover {
+  &:focus,
+  &:hover {
    overflow-y: auto;
  }
@@ -125,7 +127,7 @@ my-notification {
  line-height: 1;
  &.show {
-    background-color: rgba(255, 255, 255, 0.20);
+    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
  }
@@ -158,14 +160,14 @@ my-notification {
      position: absolute;
      right: -35px;
      top: -8px;
-      color: grey;
+      color: #808080;
      width: $main-radius;
    }
  }
  .dropdown-toggle {
    &::after {
-      border: none;
+      border: 0;
    }
  }
@@ -193,11 +195,11 @@ my-actor-avatar {
 }
 .logged-in-display-name {
+  @include disable-default-a-behaviour;
  font-size: 16px;
  font-weight: $font-semibold;
  color: pvar(--menuForegroundColor);
-  @include disable-default-a-behaviour;
 }
 .logged-in-username {
@@ -251,7 +253,7 @@ my-actor-avatar {
 }
 .login-buttons-block {
-  margin: 30px 25px 35px 25px;
+  margin: 30px 25px 35px;
  > a {
    display: block;
@@ -305,7 +307,8 @@ my-actor-avatar {
 }
 .footer-links {
-  &, > div {
+  &,
+  > div {
    display: flex;
    flex-wrap: wrap;
  }
@@ -388,29 +391,29 @@ my-actor-avatar {
  .dropdown-item:hover,
  .dropdown-item:active {
    &.settings-sensitive my-global-icon ::ng-deep svg {
-      margin-top: 0px !important;
+      margin-top: 0 !important;
    }
  }
 }
 my-global-icon {
-  &[iconName="playlists"] {
+  &[iconName=playlists] {
    height: 24px;
    width: 24px;
    margin-right: 16px;
  }
-  &[iconName="videos"] {
+  &[iconName=videos] {
    position: relative;
    right: -1px;
  }
-  &[iconName="channel"] {
+  &[iconName=channel] {
    margin-top: -2px;
  }
-  &[iconName="sign-out"] {
+  &[iconName='sign-out'] {
    position: relative;
    right: -2px;
    height: 20px;
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index c65787779..554c20ca9 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -16,19 +16,20 @@
 .notification-inbox-popover,
 .notification-inbox-link a {
  @include apply-svg-color(#808080);
-  ::ng-deep {
-    svg {
-      transition: color .1s ease-in-out;
-    }
-  }
  transition: all .1s ease-in-out;
  border-radius: 25px;
  cursor: pointer;
-  &:hover, &:active {
+  ::ng-deep svg {
-    background-color: rgba(255, 255, 255, 0.15);
+    transition: color .1s ease-in-out;
+  }
+  &:hover,
+  &:active {
    @include apply-svg-color(#fff);
+    background-color: rgba(255, 255, 255, 0.15);
  }
 }
@@ -59,7 +60,7 @@
      font-size: 14px;
      font-family: $main-fonts;
      width: 400px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      .loader {
        display: flex;
@@ -80,7 +81,7 @@
          max-height: 500px;
        }
-        & > my-user-notifications:nth-child(2) {
+        > my-user-notifications:nth-child(2) {
          overflow-y: auto;
          flex-grow: 1;
        }
@@ -110,7 +111,8 @@
          background: transparent;
        }
-        a, button {
+        a,
+        button {
          color: rgba(20, 20, 20, 0.5);
          &:hover:not(:disabled) {
@@ -133,7 +135,8 @@
  }
 }
-.notification-inbox-popover, .notification-inbox-link {
+.notification-inbox-popover,
+.notification-inbox-link {
  cursor: pointer;
  position: relative;
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index 28d5dc49c..5e9e3dc51 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -42,7 +42,7 @@ li {
  text-align: center;
  font-weight: 600;
  font-size: 18px;
-  margin: 20px 0 40px 0;
+  margin: 20px 0 40px;
 }
 .columns {
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;
+  --avatarSize: 120px;
- --initialFontSize: 46px;
+  --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-left: 0;
-    padding-right: 0px;
+    padding-right: 0;
    position: absolute;
    background-color: pvar(--mainBackgroundColor);
    width: 100% !important;
-    border-top: none;
+    border-top: 0;
-    border-left: none;
+    border-left: 0;
-    border-right: none;
+    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);
+    background-color: rgba(217, 225, 232, .1);
-    border: 1px solid rgba(217,225,232,.5);
+    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: 0;
-    border: none;
    &: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;
+  @include disable-outline;
-  border: none;
+  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; }
+  &.warning { background-color: #ffa500; }
-  &.danger { background-color: red; }
+  &.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,
+  > .btn,
-  & > .dropdown > .dropdown-toggle {
+  > .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;
    }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index fa9c0d992..89b6f0c4c 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -8,9 +8,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 @import './bootstrap';
 @import './primeng-custom';
-@import './ng-select.scss';
+@import './ng-select';
-@import './classes.scss';
+@import './classes';
 [hidden] {
  display: none !important;
@@ -89,14 +89,16 @@ input.readonly {
  background-color: pvar(--inputBackgroundColor) !important;
 }
-input, textarea {
+input,
+textarea {
  outline: none;
  color: pvar(--inputForegroundColor);
 }
 button {
-  background: unset;
  @include disable-outline;
+  background: unset;
 }
 label {
@@ -121,12 +123,12 @@ code {
  margin-top: 5px;
 }
-.input-error
+.input-error,
 my-input-toggle-hidden ::ng-deep input {
  border-color: $red !important;
 }
-.fullWidth {
+.full-width {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
@@ -134,7 +136,7 @@ my-input-toggle-hidden ::ng-deep input {
 }
 .glyphicon-black {
-  color: black;
+  color: #000;
 }
 .row {
@@ -184,26 +186,26 @@ my-input-toggle-hidden ::ng-deep input {
    width: 100%;
  }
-  &.lock-scroll .main-row > router-outlet + * {
+  &.lock-scroll .main-row > router-outlet + * {  /* stylelint-disable-line selector-max-compound-selectors */
    // Lock and hide body scrollbars
    position: fixed;
    // Lock and hide sub-menu scrollbars
-    .sub-menu {
+    .sub-menu { /* stylelint-disable-line */
      overflow-x: hidden;
    }
  }
 }
 .title-page {
+  @include disable-default-a-behaviour;
  opacity: 0.6;
  color: pvar(--mainForegroundColor);
  font-size: 16px;
  display: inline-block;
  margin-right: 55px;
  font-weight: $font-semibold;
-  @include disable-default-a-behaviour;
  border-bottom: 2px solid transparent;
  &.title-page-single {
@@ -219,13 +221,19 @@ my-input-toggle-hidden ::ng-deep input {
    font-size: 125%;
  }
-  &:hover, &:active, &:focus {
+  &:hover,
+  &:active,
+  &:focus {
    color: pvar(--mainForegroundColor);
  }
-  &.active, &:hover,  &:active, &:focus, &.title-page-single {
+  &.active,
+  &:hover,
+  &:active,
+  &:focus,
+  &.title-page-single {
    opacity: 1;
-    outline: 0px hidden !important;
+    outline: 0 hidden !important;
  }
  @media screen and (max-width: $mobile-view) {
@@ -262,7 +270,10 @@ my-input-toggle-hidden ::ng-deep input {
      background-color: pvar(--submenuBackgroundColor);
    }
-    &.active, &:hover, &:active, &:focus {
+    &.active,
+    &:hover,
+    &:active,
+    &:focus {
      opacity: 1;
    }
  }
@@ -275,8 +286,13 @@ my-input-toggle-hidden ::ng-deep input {
 // In tables, don't have a hover different background
 table {
-  .action-button-edit, .action-button-delete {
+  .action-button-edit,
-    &:hover, &:active, &:focus, &[disabled], &.disabled {
+  .action-button-delete {
+    &:hover,
+    &:active,
+    &:focus,
+    &[disabled],
+    &.disabled {
      background-color: $grey-background-color !important;
    }
  }
@@ -329,15 +345,12 @@ ngx-loading-bar {
 @media screen and (max-width: #{breakpoint(xxl)}) {
  .main-col {
-    & {
+    --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
-      --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
+    --videosHorizontalMarginContent: 30px;
-    }
    &.expanded {
      --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
    }
-    --videosHorizontalMarginContent: 30px;
  }
 }
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 0ab6230c8..548e55e1e 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -6,7 +6,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 .glyphicon-refresh-animate {
-  animation: spin .7s infinite linear;
+  animation: spin 0.7s infinite linear;
 }
 .glyphicon-duplicate {
@@ -25,6 +25,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1) rotate(360deg);
  }
@@ -70,7 +71,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
    &.active {
      color: pvar(--mainBackgroundColor) !important;
      background-color: pvar(--mainHoverColor);
-      opacity: .9;
+      opacity: 0.9;
    }
    &:active {
@@ -97,9 +98,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 @media screen and (min-width: #{breakpoint(md)}) {
-  .modal:before {
+  .modal::before {
    vertical-align: middle;
-    content: " ";
+    content: ' ';
    height: 100%;
  }
@@ -123,7 +124,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  }
  .modal-header {
-    border-bottom: none;
+    border-bottom: 0;
    margin-bottom: 5px;
    .modal-title {
@@ -140,10 +141,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
      margin: 0;
      padding: 0;
-      opacity: .5;
+      opacity: 0.5;
-      &[iconName="cross"] {
+      &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
        @include icon(16px);
        top: -3px;
      }
    }
@@ -154,7 +156,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
    text-align: right;
    > .peertube-button:not(:first-child) {
-      margin-left: 10px
+      margin-left: 10px;
    }
  }
 }
@@ -168,7 +170,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
 @media (hover: none) and (pointer: coarse) {
-  .modal-open, .menu-open {
+  .modal-open,
+  .menu-open {
    overflow: hidden !important;
  }
@@ -176,7 +179,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  .menu-open {
    .main-col {
      &::before {
-        background-color: black;
+        background-color: #000;
        width: 100vw;
        height: 100vh;
        opacity: 0.75;
@@ -204,7 +207,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  .nav-link {
    opacity: 0.6 !important;
-    &.active, &:hover, &:active, &:focus {
+    &.active,
+    &:hover,
+    &:active,
+    &:focus {
      opacity: 1 !important;
    }
  }
@@ -221,7 +227,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
  color: pvar(--mainForegroundColor);
  font-weight: $font-semibold;
-  border: none;
+  border: 0;
  border-bottom: 2px solid transparent;
  opacity: 0.6;
@@ -231,7 +237,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
    border-bottom-color: pvar(--mainColor);
  }
-  &.active, &:hover, &:active, &:focus {
+  &.active,
+  &:hover,
+  &:active,
+  &:focus {
    opacity: 1;
  }
 }
@@ -314,9 +323,10 @@ ngb-tooltip-window {
 }
 .input-group {
-  & > .form-control {
+  > .form-control {
    flex: initial;
  }
  input.form-control {
    width: unset !important;
    flex-grow: 1;
@@ -366,7 +376,7 @@ ngb-tooltip-window {
  border: 1px solid #eee;
  border-radius: .25rem;
-  & > label {
+  > label {
    position: relative;
    top: -5px;
    left: -10px;
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index ccfd73ecd..38bd90ae6 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -17,7 +17,7 @@
 @mixin show-more-description {
  color: pvar(--mainColor);
  cursor: pointer;
-  margin: 10px auto 45px auto;
+  margin: 10px auto 45px;
 }
 @mixin avatar-row-responsive ($img-margin, $grey-font-size) {
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index b1a23be6b..d9e5efc02 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -1,4 +1,4 @@
-@import "./_bootstrap-variables";
+@import './_bootstrap-variables';
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
diff --git a/client/src/sass/include/_fonts.scss b/client/src/sass/include/_fonts.scss
index 6313736e0..514261d01 100644
--- a/client/src/sass/include/_fonts.scss
+++ b/client/src/sass/include/_fonts.scss
@@ -1,4 +1,4 @@
-@font-face{
+@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 200 900;
  font-style: normal;
@@ -7,7 +7,7 @@
  src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2');
 }
-@font-face{
+@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 200 900;
  font-style: italic;
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 3b86f29b4..fb504906c 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -21,12 +21,12 @@
 }
 @mixin miniature-thumbnail {
-  @include disable-outline;
  $play-overlay-transition: 0.2s ease;
  $play-overlay-height: 26px;
  $play-overlay-width: 18px;
+  @include disable-outline;
  display: flex;
  flex-direction: column;
  position: relative;
@@ -47,7 +47,8 @@
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.3);
-    &, .icon {
+    &,
+    .icon {
      transition: all $play-overlay-transition;
    }
@@ -79,7 +80,7 @@
    &.blur-filter {
      filter: blur(20px);
-      transform : scale(1.03);
+      transform: scale(1.03);
    }
  }
 }
@@ -129,10 +130,7 @@
      column-gap: 30px;
      grid-template-columns: repeat(
        auto-fill,
-        minmax(
+        minmax(var(--miniatureMinWidth), 1fr)
-          var(--miniatureMinWidth),
-          1fr
-        )
      );
      .video-wrapper,
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index dc6ab8076..718e36f2c 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,7 +1,9 @@
 @import '_variables';
 @mixin disable-default-a-behaviour {
-  &:hover, &:focus, &:active {
+  &:hover,
+  &:focus,
+  &:active {
    text-decoration: none !important;
    outline: none !important;
  }
@@ -22,7 +24,7 @@
 @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
  display: block;
  /* Fallback for non-webkit */
-  display: -webkit-box;
+  display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
  -webkit-line-clamp: $number-of-lines;
  /* Fallback for non-webkit */
  font-size: $font-size;
@@ -36,7 +38,7 @@
  position: relative;
  overflow: hidden;
-  &:after {
+  &::after {
    content: '';
    pointer-events: none;
    width: 100%;
@@ -109,9 +111,9 @@
  padding-bottom: 0;
  flex-wrap: nowrap;
-  .input-group-text{
+  .input-group-text {
    font-size: 14px;
-    color: gray;
+    color: #808080;
  }
 }
@@ -128,7 +130,9 @@
 @mixin orange-button {
  @include button-focus(pvar(--mainColorLightest));
-  &, &:active, &:focus {
+  &,
+  &:active,
+  &:focus {
    color: #fff;
    background-color: pvar(--mainColor);
  }
@@ -138,14 +142,15 @@
    background-color: pvar(--mainHoverColor);
  }
-  &[disabled], &.disabled {
+  &[disabled],
+  &.disabled {
    cursor: default;
    color: #fff;
    background-color: #C6C6C6;
  }
  my-global-icon {
-    @include apply-svg-color(#fff)
+    @include apply-svg-color(#fff);
  }
 }
@@ -155,7 +160,9 @@
  border: 2px solid pvar(--mainColor);
  font-weight: $font-semibold;
-  &, &:active, &:focus {
+  &,
+  &:active,
+  &:focus {
    color: pvar(--mainColor);
    background-color: pvar(--mainBackgroundColor);
  }
@@ -165,14 +172,15 @@
    background-color: pvar(--mainColorLightest);
  }
-  &[disabled], &.disabled {
+  &[disabled],
+  &.disabled {
    cursor: default;
    color: pvar(--mainColor);
    background-color: #C6C6C6;
  }
  my-global-icon {
-    @include apply-svg-color(pvar(--mainColor))
+    @include apply-svg-color(pvar(--mainColor));
  }
 }
@@ -182,12 +190,13 @@
  color: pvar(--greyForegroundColor);
  background-color: transparent;
-  &[disabled], &.disabled {
+  &[disabled],
+  .disabled {
    cursor: default;
  }
  my-global-icon {
-    @include apply-svg-color(transparent)
+    @include apply-svg-color(transparent);
  }
 }
@@ -197,17 +206,22 @@
  background-color: $grey-background-color;
  color: pvar(--greyForegroundColor);
-  &:hover, &:active, &:focus, &[disabled], &.disabled {
+  &:hover,
+  &:active,
+  &:focus,
+  &[disabled],
+  &.disabled {
    color: pvar(--greyForegroundColor);
    background-color: $grey-background-hover-color;
  }
-  &[disabled], &.disabled {
+  &[disabled],
+  &.disabled {
    cursor: default;
  }
  my-global-icon {
-    @include apply-svg-color(pvar(--greyForegroundColor))
+    @include apply-svg-color(pvar(--greyForegroundColor));
  }
 }
@@ -216,24 +230,30 @@
  $text: #fff6f5;
  @include button-focus(scale-color($color, $alpha: -95%));
  background-color: $color;
  color: $text;
-  &:hover, &:active, &:focus, &[disabled], &.disabled {
+  &:hover,
+  &:active,
+  &:focus,
+  &[disabled],
+  &.disabled {
    background-color: lighten($color: $color, $amount: 10);
  }
-  &[disabled], &.disabled {
+  &[disabled],
+  &.disabled {
    cursor: default;
  }
  my-global-icon {
-    @include apply-svg-color($text)
+    @include apply-svg-color($text);
  }
 }
 @mixin peertube-button {
-  border: none;
+  border: 0;
  font-weight: $font-semibold;
  font-size: 15px;
  height: $button-height;
@@ -246,18 +266,17 @@
 }
 @mixin peertube-button-link {
-  display: inline-block;
  @include disable-default-a-behaviour;
  @include peertube-button;
-}
-@mixin peertube-button-outline {
  display: inline-block;
+}
+@mixin peertube-button-outline {
  @include disable-default-a-behaviour;
  @include peertube-button;
+  display: inline-block;
  border: 1px solid;
 }
@@ -291,17 +310,17 @@
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
-    background: white;
+    background: #fff;
    cursor: inherit;
    display: block;
  }
 }
 @mixin peertube-button-file ($width) {
-  width: $width;
  @include peertube-file;
  @include peertube-button;
+  width: $width;
 }
 @mixin icon ($size) {
@@ -317,7 +336,7 @@
 @mixin select-arrow-down {
  top: 50%;
  right: calc(0% + 15px);
-  content: " ";
+  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
@@ -358,7 +377,7 @@
    width: 100%;
  }
-  &:after {
+  &::after {
    @include select-arrow-down;
  }
@@ -394,21 +413,21 @@
    option {
      font-weight: $font-semibold;
      color: pvar(--greyForegroundColor);
-      border: none;
+      border: 0;
    }
  }
 }
 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
 @mixin peertube-radio-container {
-  input[type="radio"] {
+  input[type=radio] {
    display: none;
-    & + label {
+    + label {
      font-weight: $font-regular;
      cursor: pointer;
-      &:before {
+      &::before {
        position: relative;
        top: -2px;
        content: '';
@@ -425,12 +444,12 @@
      }
    }
-    &:checked + label:before {
+    &:checked + label::before {
      background-color: #000;
      box-shadow: inset 0 0 0 4px #fff;
    }
-    &:focus + label:before {
+    &:focus + label::before {
      outline: none;
      border-color: #000;
    }
@@ -445,7 +464,7 @@
    box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
  }
-  & + span {
+  + span {
    position: relative;
    width: 18px;
    min-width: 18px;
@@ -455,7 +474,7 @@
    vertical-align: middle;
    cursor: pointer;
-    &:after {
+    &::after {
      content: '';
      position: absolute;
      top: calc(2px - #{$border-width});
@@ -474,13 +493,13 @@
    background: pvar(--mainColor);
    animation: jelly 0.6s ease;
-    &:after {
+    &::after {
      opacity: 1;
      transform: rotate(45deg) scale(1);
    }
  }
-  & + span + span {
+  + span + span {
    font-size: 15px;
    font-weight: $font-regular;
    margin-left: 5px;
@@ -489,7 +508,7 @@
  }
  &[disabled] + span,
-  &[disabled] + span + span{
+  &[disabled] + span + span {
    opacity: 0.5;
    cursor: default;
  }
@@ -685,13 +704,13 @@
      color: pvar(--mainColor);
    }
-    & + .breadcrumb-item {
+    + .breadcrumb-item {
      padding-left: 0.5rem;
      &::before {
        display: inline-block;
        padding-right: 0.5rem;
        color: #6c757d;
-        content: "/";
+        content: '/';
      }
    }
@@ -706,13 +725,13 @@
  flex-wrap: wrap;
  margin: 0 -5px;
-  & > div {
+  > div {
    box-sizing: border-box;
    flex: 0 0 percentage(1/3);
    padding: 0 5px;
    margin-bottom: 10px;
-    & > a {
+    > a {
      @include disable-default-a-behaviour;
      text-decoration: none;
@@ -727,8 +746,8 @@
      }
    }
-    & > a,
+    > a,
-    & > div {
+    > div {
      padding: 20px;
      background: pvar(--submenuBackgroundColor);
      border-radius: 4px;
@@ -737,7 +756,8 @@
    }
  }
-  .dashboard-num, .dashboard-text {
+  .dashboard-num,
+  .dashboard-text {
    text-align: center;
    font-size: 130%;
    color: pvar(--mainForegroundColor);
@@ -831,7 +851,7 @@
  flex-direction: column;
  .form-sub-title {
-    margin-right: 0px !important;
+    margin-right: 0 !important;
    margin-bottom: 10px;
    text-align: center;
  }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d2a5d2bd9..d54563df6 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -60,7 +60,7 @@ $max-channels-width: 1200px;
 $footer-height: 30px;
 $footer-margin: 30px;
-$separator-border-color: rgba(0, 0, 0, 0.10);
+$separator-border-color: rgba(0, 0, 0, 0.1);
 $video-miniature-margin-bottom: 15px;
@@ -90,7 +90,7 @@ $markdown-textarea-background-color: $grey-background-hover-color;
 $sub-menu-margin-bottom: 30px;
 $sub-menu-margin-bottom-small-view: 10px;
-$activated-action-button-color: black;
+$activated-action-button-color: #000;
 $focus-box-shadow-form: 0 0 0 .2rem;
@@ -147,7 +147,7 @@ $variables: (
  @if map-has-key($variables, $variable) {
    @return map-get($variables, $variable);
  } @else {
-    @error "ERROR: Variable #{$variable} does not exist";
+    @error 'ERROR: Variable #{$variable} does not exist';
  }
 }
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 61da6d266..13b2012b2 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -14,7 +14,7 @@ $ng-select-height: 30px;
 $ng-select-value-padding-left: 15px;
 $ng-select-value-font-size: 15px;
-@import "~@ng-select/ng-select/scss/default.theme.scss";
+@import '~@ng-select/ng-select/scss/default.theme';
 .ng-select {
  font-size: $ng-select-value-font-size;
@@ -31,13 +31,13 @@ $ng-select-value-font-size: 15px;
  }
  .ng-arrow-wrapper {
-    padding-right: 12px
+    padding-right: 12px;
  }
  &.ng-select-single .ng-value-container .ng-value {
    color: pvar(--inputForegroundColor);
-    .ng-value-label {
+    .ng-value-label { /* stylelint-disable-line */
      display: flex;
      align-items: center;
    }
@@ -45,7 +45,8 @@ $ng-select-value-font-size: 15px;
  &.ng-select-multiple .ng-select-container .ng-value-container {
    padding-left: 12px;
-    .ng-value {
+    .ng-value { /* stylelint-disable-line */
      margin-left: 3px;
    }
  }
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 6bc66af0c..45cee3e77 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -31,26 +31,26 @@ $context-menu-width: 350px;
      background-color: rgba(255, 255, 255, 0.2);
    }
-    [class^="vjs-icon-"] {
+    [class^='vjs-icon-'] {
+      $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
      display: inline-flex;
      position: relative;
      top: 2px;
      cursor: pointer;
      width: 14px;
      height: 14px;
-      background-color: white;
+      background-color: #fff;
      mask-size: cover;
      margin-right: 0.8rem !important;
-      $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
      @each $icon in $icons {
        &[class$="-#{$icon}"] {
          mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
        }
      }
-      &[class$="-tick-white"] {
+      &[class$='-tick-white'] {
        float: right;
        margin: 0 !important;
      }
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 502ee33ff..e674fa2f6 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -4,6 +4,6 @@
 @import './settings-menu';
 @import './spinner';
 @import './upnext';
-@import './bezels.scss';
+@import './bezels';
-@import './playlist.scss';
+@import './playlist';
-@import './stats.scss';
+@import './stats';
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index c2fa855ab..26066d218 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -13,4 +13,4 @@
      }
    }
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 81aacf1d7..8fe2e054d 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -52,12 +52,12 @@ body {
  }
  .vjs-big-play-button {
-    outline: 0;
-    font-size: 6em;
    $big-play-width: 1.2em;
    $big-play-height: 1.2em;
+    outline: 0;
+    font-size: 6em;
    border: 2px solid #fff;
    border-radius: 100%;
@@ -72,7 +72,7 @@ body {
    &::-moz-focus-inner {
      border: 0;
-      padding: 0
+      padding: 0;
    }
    .vjs-icon-placeholder::before {
@@ -82,8 +82,9 @@ body {
      background-image: url('#{$assets-path}/player/images/big-play-button.svg');
    }
-    &.focus-visible, &:hover {
+    &.focus-visible,
-      background-color: var(--mainColor, dimgray);
+    &:hover {
+      background-color: var(--mainColor, #696969);
    }
  }
@@ -91,16 +92,19 @@ body {
  // Small effect when we click on the play button
  &.vjs-has-big-play-button-clicked {
-    .vjs-big-play-button, .vjs-poster {
+    .vjs-big-play-button,
+    .vjs-poster {
      display: block;
      visibility: hidden;
-      &.vjs-big-play-button, &.vjs-big-play-button::before {
+      &.vjs-big-play-button,
+      &.vjs-big-play-button::before {
        opacity: 0;
        transition: visibility 0.2s, opacity 0.2s;
      }
-      &.vjs-poster, &.vjs-poster::before {
+      &.vjs-poster,
+      &.vjs-poster::before {
        opacity: 0;
        transition: visibility 0.3s, opacity 0.3s;
        transition-delay: 0.05s;
@@ -165,8 +169,7 @@ body {
    .vjs-fullscreen-control,
    .vjs-peertube-link,
    .vjs-theater-control,
-    .vjs-settings
+    .vjs-settings {
-    {
      color: pvar(--embedForegroundColor) !important;
      opacity: $primary-foreground-opacity;
@@ -217,7 +220,8 @@ body {
        }
        .vjs-load-progress {
-          &, & div {
+          &,
+          div {
            background: rgba(255, 255, 255, .2);
          }
        }
@@ -266,7 +270,7 @@ body {
          line-height: calc(#{$control-bar-height} - 1px);
          &::after {
-            content: "/";
+            content: '/';
            margin: 0 1px 0 2px;
          }
        }
@@ -308,11 +312,17 @@ body {
        display: none;
      }
-      .download-speed-number, .upload-speed-number, .peers-number, .http-fallback {
+      .download-speed-number,
+      .upload-speed-number,
+      .peers-number,
+      .http-fallback {
        font-weight: $font-semibold;
      }
-      .download-speed-text, .upload-speed-text, .peers-text, .http-fallback {
+      .download-speed-text,
+      .upload-speed-text,
+      .peers-text,
+      .http-fallback {
        margin-right: 15px;
      }
@@ -336,10 +346,8 @@ body {
        &.icon-next,
        &.icon-previous {
          mask-image: url('#{$assets-path}/player/images/next.svg');
-          -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
+          background-color: #fff;
-          background-color: white;
          mask-size: cover;
-          -webkit-mask-size: cover;
          width: 11px;
          height: 11px;
          margin-top: -2px;
@@ -410,7 +418,7 @@ body {
    }
    .vjs-volume-bar {
-      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat;
+      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
      background-size: 22px 14px;
      height: 100%;
      width: 100%;
@@ -421,7 +429,7 @@ body {
      top: 3px;
      .vjs-volume-level {
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat;
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
        background-size: 22px 14px;
        max-width: 22px;
        max-height: 14px;
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index ebbed02d9..8558fc837 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -44,10 +44,8 @@ $playlist-menu-width: 350px;
      width: 20px;
      height: 20px;
      mask-image: url('#{$assets-path}/images/feather/x.svg');
-      -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
+      background-color: #fff;
-      background-color: white;
      mask-size: cover;
-      -webkit-mask-size: cover;
    }
  }
 }
@@ -90,10 +88,8 @@ $playlist-menu-width: 350px;
  width: 22px;
  height: 22px;
  mask-image: url('#{$assets-path}/images/feather/list.svg');
-  -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
+  background-color: #fff;
-  background-color: white;
  mask-size: cover;
-  -webkit-mask-size: cover;
  margin-bottom: 3px;
 }
@@ -133,9 +129,9 @@ $playlist-menu-width: 350px;
  }
  .item-player {
-    display: none;
    @include play-icon(20px, 16px);
+    display: none;
  }
  &.vjs-selected {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 09c872ef7..74eee7d64 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -149,7 +149,7 @@ $setting-transition-easing: ease-out;
            background-color: inherit;
            padding: 8px 8px 13px 12px;
            margin-bottom: 5px;
-            border-bottom: 1px solid grey;
+            border-bottom: 1px solid #808080;
            text-align: left;
            &::before {
diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
index a6af8da33..94f4d1008 100644
--- a/client/src/sass/player/spinner.scss
+++ b/client/src/sass/player/spinner.scss
@@ -51,4 +51,4 @@
      opacity: 1;
    }
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
index 953f6032a..6fcbcd969 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -6,6 +6,8 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
 .video-js {
  .vjs-stats-content {
+    @include transition(opacity 0.1s);
    position: absolute;
    background-color: $contextmenu-background-color;
    padding: 5px 0;
@@ -18,8 +20,6 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
    z-index: 64;
    font-size: 12px;
    line-height: 1.2;
-    @include transition(opacity 0.1s);
  }
  .vjs-stats-close {
@@ -38,5 +38,4 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
    width: 11.5em;
    white-space: nowrap;
  }
 }
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index 7614bb3b6..8c9a6f784 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -11,15 +11,15 @@ $browser-context: 16;
 .video-js {
  .vjs-upnext-content {
+    @include transition(opacity 0.1s);
    font-size: 1.8em;
    pointer-events: auto;
    position: absolute;
    top: 0;
    bottom: 0;
-    background: rgba(0,0,0,0.6);
+    background: rgba(0, 0, 0, 0.6);
    width: 100%;
-    @include transition(opacity 0.1s);
  }
  .vjs-upnext-top {
@@ -77,7 +77,7 @@ $browser-context: 16;
    float: none;
    padding: 10px !important;
    font-size: 16px !important;
-    border: none;
+    border: 0;
  }
  .vjs-upnext-cancel-button,
@@ -86,7 +86,7 @@ $browser-context: 16;
  }
  .vjs-upnext-cancel-button:hover {
-    background-color: rgba(255,255,255,0.25);
+    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
  }
@@ -95,6 +95,8 @@ $browser-context: 16;
  }
  .vjs-upnext-autoplay-icon {
+    @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
    position: absolute;
    top: 50%;
    left: 50%;
@@ -102,8 +104,6 @@ $browser-context: 16;
    height: 98px;
    margin: -49px 0 0 -49px;
    cursor: pointer;
-    @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
  }
 }
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 544d0039a..1abcd30e4 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,10 +1,11 @@
 @import '_variables';
 @import '_mixins';
+/* stylelint-disable */
 @import '~primeng/resources/primeng.css';
 // Override primeng style we don't want
-input[type="button"] {
+input[type=button] {
  border-radius: inherit;
 }
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index cbe6bdd01..e32cce54e 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -21,7 +21,8 @@ video {
 }
 /* fill the entire space */
-html, body {
+html,
+body {
  height: 100%;
  margin: 0;
  background-color: #000;
@@ -70,18 +71,18 @@ html, body {
  text-align: center;
  width: 100%;
  height: 100%;
-  color: white;
+  color: #fff;
  box-sizing: border-box;
  font-family: sans-serif;
+}
-  #error-title {
+#error-title {
-    font-size: 45px;
+  font-size: 45px;
-    margin-bottom: 5px;
+  margin-bottom: 5px;
-  }
+}
-  #error-content {
+#error-content {
-    font-size: 24px;
+  font-size: 24px;
-  }
 }
 #placeholder-preview {
@@ -97,10 +98,10 @@ html, body {
 @media screen and (max-width: 300px) {
  #error-block {
    font-size: 36px;
+  }
-    #error-content {
+  #error-content {
-      font-size: 14px;
+    font-size: 14px;
-    }
  }
 }
diff --git a/client/src/standalone/videos/test-embed.scss b/client/src/standalone/videos/test-embed.scss
index 85ce4e0f7..b9ac3e74e 100644
--- a/client/src/standalone/videos/test-embed.scss
+++ b/client/src/standalone/videos/test-embed.scss
@@ -15,7 +15,7 @@ body {
 }
 iframe {
-  border: none;
+  border: 0;
  border-radius: 8px;
  min-width: 200px;
  width: 100%;
@@ -41,7 +41,7 @@ aside {
  .icon {
    height: 100%;
    padding: 0 18px 0 32px;
-    background: white;
+    background: #fff;
    display: flex;
    align-items: center;
    margin-right: 0.5em;
@@ -62,13 +62,13 @@ header {
  width: 100%;
  height: 3.2em;
  background-color: #F1680D;
-  color: white;
+  color: #fff;
  //background-image: url(../../assets/images/backdrop/network-o.png);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1em;
-  box-shadow: 1px 0px 10px rgba(0,0,0,0.6);
+  box-shadow: 1px 0 10px rgba(0, 0, 0, 0.6);
  background-size: 50%;
  background-position: top left;
  padding-right: 1em;
@@ -87,13 +87,13 @@ header {
  display: flex;
  flex-wrap: wrap;
-  & > * {
+  > * {
    flex-grow: 0;
  }
 }
 fieldset {
-  border: none;
+  border: 0;
  min-width: 8em;
  legend {
    border-bottom: 1px solid #ccc;
@@ -103,12 +103,12 @@ fieldset {
 button {
  background: #F1680D;
-  color: white;
+  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  margin: 0;
  padding: 1em 1.25em;
-  border: none;
+  border: 0;
 }
 a {
@@ -118,7 +118,11 @@ a {
    text-decoration: underline;
  }
-  &, &:hover, &:focus, &:visited, &:active {
+  &,
+  &:hover,
+  &:focus,
+  &:visited,
+  &:active {
    color: #F44336;
  }
 }
author	Chocobozzz <me@florianbigard.com>	2021-04-28 16:41:07 +0200
committer	Chocobozzz <me@florianbigard.com>	2021-04-28 17:53:57 +0200
commit	931d3430184143ebd88e5243def6eb1d7acfdbf4 (patch)
tree	909919bafd6fa8563d26d616c6257ebd0211c83c /client/src
parent	7d026caf683e42fd57a243a3b52a5e4f476fbb4e (diff)
download	PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.gz PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.tar.zst PeerTube-931d3430184143ebd88e5243def6eb1d7acfdbf4.zip