17 files changed, 89 insertions, 87 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 799b8c881..51c21107b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,16 +1,16 @@
 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
-@import '_bootstrap-variables';
-@import '_variables';
-@import '_mixins';
+@use '_bootstrap-variables';
+@use '_variables';
+@use '_mixins';
 
-@import '_fonts';
+@use '_fonts';
 
-@import './bootstrap';
-@import './primeng-custom';
-@import './ng-select';
+@use './bootstrap';
+@use './primeng-custom';
+@use './ng-select';
 
-@import './classes';
+@use './classes';
 
 [hidden] {
   display: none !important;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 501587eb2..9c734c4fe 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -1,8 +1,8 @@
 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
-@import '_bootstrap';
+@use '_bootstrap';
 
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 .glyphicon-refresh-animate {
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
index 85bfce7f4..44c584d1c 100644
--- a/client/src/sass/classes.scss
+++ b/client/src/sass/classes.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .peertube-button {
   @include peertube-button;
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index ab2038dde..31c145319 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -1,4 +1,4 @@
-@import '_variables';
+@use '_variables';
 
 @mixin section-label-responsive {
   color: pvar(--mainColor);
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index d9e5efc02..4f4f48e58 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -1,40 +1,40 @@
-@import './_bootstrap-variables';
+@use './_bootstrap-variables';
 
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@use '~bootstrap/scss/functions';
+@use '~bootstrap/scss/variables';
 
-@import '~bootstrap/scss/mixins';
-@import '~bootstrap/scss/root';
-@import '~bootstrap/scss/reboot';
-@import '~bootstrap/scss/type';
-//@import '~bootstrap/scss/images';
-//@import '~bootstrap/scss/code';
-@import '~bootstrap/scss/grid';
-@import '~bootstrap/scss/tables';
-@import '~bootstrap/scss/forms';
-@import '~bootstrap/scss/buttons';
-//@import '~bootstrap/scss/transitions';
-@import '~bootstrap/scss/dropdown';
-@import '~bootstrap/scss/button-group';
-@import '~bootstrap/scss/input-group';
-//@import '~bootstrap/scss/custom-forms';
-@import '~bootstrap/scss/nav';
-//@import '~bootstrap/scss/navbar';
-@import '~bootstrap/scss/card';
-//@import '~bootstrap/scss/breadcrumb';
-//@import '~bootstrap/scss/pagination';
-@import '~bootstrap/scss/badge';
-//@import '~bootstrap/scss/jumbotron';
-@import '~bootstrap/scss/alert';
-//@import '~bootstrap/scss/progress';
-//@import '~bootstrap/scss/media';
-//@import '~bootstrap/scss/list-group';
-@import '~bootstrap/scss/close';
-@import '~bootstrap/scss/modal';
-@import '~bootstrap/scss/tooltip';
-@import '~bootstrap/scss/popover';
-//@import '~bootstrap/scss/carousel';
-@import '~bootstrap/scss/utilities';
-//@import '~bootstrap/scss/print';
+@use '~bootstrap/scss/mixins';
+@use '~bootstrap/scss/root';
+@use '~bootstrap/scss/reboot';
+@use '~bootstrap/scss/type';
+//@use '~bootstrap/scss/images';
+//@use '~bootstrap/scss/code';
+@use '~bootstrap/scss/grid';
+@use '~bootstrap/scss/tables';
+@use '~bootstrap/scss/forms';
+@use '~bootstrap/scss/buttons';
+//@use '~bootstrap/scss/transitions';
+@use '~bootstrap/scss/dropdown';
+@use '~bootstrap/scss/button-group';
+@use '~bootstrap/scss/input-group';
+//@use '~bootstrap/scss/custom-forms';
+@use '~bootstrap/scss/nav';
+//@use '~bootstrap/scss/navbar';
+@use '~bootstrap/scss/card';
+//@use '~bootstrap/scss/breadcrumb';
+//@use '~bootstrap/scss/pagination';
+@use '~bootstrap/scss/badge';
+//@use '~bootstrap/scss/jumbotron';
+@use '~bootstrap/scss/alert';
+//@use '~bootstrap/scss/progress';
+//@use '~bootstrap/scss/media';
+//@use '~bootstrap/scss/list-group';
+@use '~bootstrap/scss/close';
+@use '~bootstrap/scss/modal';
+@use '~bootstrap/scss/tooltip';
+@use '~bootstrap/scss/popover';
+//@use '~bootstrap/scss/carousel';
+@use '~bootstrap/scss/utilities';
+//@use '~bootstrap/scss/print';
 
-@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
+@use '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 0d3f2b6e0..fb12da49e 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 @mixin miniature-name {
   @include ellipsis-multiline(1.1em, 2);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 62e1ca163..bf7504d91 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,4 +1,4 @@
-@import '_variables';
+@use '_variables';
 
 @mixin disable-default-a-behaviour {
   &:hover,
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d54563df6..b9c82ea77 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,4 +1,5 @@
-@import '_bootstrap-variables';
+@use 'sass:math';
+@use '_bootstrap-variables';
 
 $small-view: 800px;
 $mobile-view: 500px;
@@ -53,7 +54,7 @@ $sub-menu-height: 81px;
 
 $channel-background-color: #f6ede8;
 
-$banner-inverted-ratio: 1/6;
+$banner-inverted-ratio: #{math.div(1, 6)};
 
 $max-channels-width: 1200px;
 
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index ecd33babe..6c9d3a407 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -1,4 +1,4 @@
-@import '_variables';
+@use '_variables';
 
 $ng-select-highlight: #f2690d;
 // $ng-select-primary-text: #333 !default;
@@ -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';
+@use '~@ng-select/ng-select/scss/default.theme';
 
 .ng-select {
   font-size: $ng-select-value-font-size;
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 501c68ffd..a207d8a28 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -1,6 +1,6 @@
-@import '_variables';
-@import '_mixins';
-@import './_player-variables';
+@use '_variables';
+@use '_mixins';
+@use './_player-variables';
 
 $context-menu-width: 350px;
 
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index e674fa2f6..385365b6d 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -1,9 +1,9 @@
-@import './peertube-skin';
-@import './mobile';
-@import './context-menu';
-@import './settings-menu';
-@import './spinner';
-@import './upnext';
-@import './bezels';
-@import './playlist';
-@import './stats';
+@use './peertube-skin';
+@use './mobile';
+@use './context-menu';
+@use './settings-menu';
+@use './spinner';
+@use './upnext';
+@use './bezels';
+@use './playlist';
+@use './stats';
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index 26066d218..dde2c3127 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 /* Special mobile style */
 
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 148992089..1a84bd7f0 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -1,6 +1,7 @@
-@import '_variables';
-@import '_mixins';
-@import './_player-variables';
+@use 'sass:math';
+@use '_variables';
+@use '_mixins';
+@use './_player-variables';
 
 body {
   --embedForegroundColor: #{$primary-foreground-color};
@@ -11,8 +12,8 @@ body {
 @mixin big-play-button-triangle-size($triangle-size) {
   width: $triangle-size;
   height: $triangle-size;
-  top: calc(50% - #{$triangle-size / 2});
-  left: calc(53% - #{($triangle-size / 2)});
+  top: calc(50% - math.div($triangle-size / 2));
+  left: calc(53% - math.div($triangle-size / 2));
 }
 
 .video-js.vjs-peertube-skin {
@@ -69,7 +70,7 @@ body {
     width: $big-play-width;
     height: $big-play-height;
     line-height: $big-play-height;
-    margin-top: -($big-play-height / 2);
+    margin-top: -(math.div($big-play-height / 2));
     transition: 0.4s opacity;
 
     &::-moz-focus-inner {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 2183a7dbc..2d0b58a1d 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,6 +1,6 @@
-@import '_variables';
-@import '_mixins';
-@import './_player-variables';
+@use '_variables';
+@use '_mixins';
+@use './_player-variables';
 
 $setting-transition-duration: 0.15s;
 $setting-transition-easing: ease-out;
diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
index 94f4d1008..bd7efd3b8 100644
--- a/client/src/sass/player/spinner.scss
+++ b/client/src/sass/player/spinner.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 // Thanks: https://projects.lukehaas.me/css-loaders/
 .vjs-loading-spinner {
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
index c6388ed13..18b3f0413 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -1,4 +1,4 @@
-@import './_player-variables';
+@use './_player-variables';
 
 $stats-width: 420px;
 $contextmenu-background-color: rgba(0, 0, 0, 0.6);
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 4cd27bea8..e6d4b6060 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,8 +1,8 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 /* stylelint-disable */
-@import '~primeng/resources/primeng.css';
+@use '~primeng/resources/primeng.css';
 
 // Override primeng style we don't want
 input[type=button] {