6 files changed, 81 insertions, 63 deletions

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(
-          var(--miniatureMinWidth),
-          1fr
-        )
+        minmax(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,
-    & > div {
+    > a,
+    > 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';
   }
 }