Move to sass module

9 files changed, 29 insertions, 25 deletions

diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
index b8c3325d0..629a677b1 100644
--- a/client/src/sass/player/bezels.scss
+++ b/client/src/sass/player/bezels.scss
@@ -1,3 +1,5 @@
+@use '_mixins' as *;
+
 @keyframes bezels-fadeout {
   from {
     opacity: 1;
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index a207d8a28..5548e2712 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
 
 $context-menu-width: 350px;
 
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index dde2c3127..86c090200 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 /* Special mobile style */
 
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 1a84bd7f0..17fd14342 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -1,7 +1,7 @@
 @use 'sass:math';
-@use '_variables';
-@use '_mixins';
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
 
 body {
   --embedForegroundColor: #{$primary-foreground-color};
@@ -12,8 +12,8 @@ body {
 @mixin big-play-button-triangle-size($triangle-size) {
   width: $triangle-size;
   height: $triangle-size;
-  top: calc(50% - math.div($triangle-size / 2));
-  left: calc(53% - math.div($triangle-size / 2));
+  top: calc(50% - math.div($triangle-size, 2));
+  left: calc(53% - math.div($triangle-size, 2));
 }
 
 .video-js.vjs-peertube-skin {
@@ -57,7 +57,7 @@ body {
     $big-play-width: 1.2em;
     $big-play-height: 1.2em;
 
-    @include margin-left(-($big-play-width / 2));
+    @include margin-left(-(math.div($big-play-width, 2)));
 
     outline: 0;
     font-size: 6em;
@@ -70,7 +70,7 @@ body {
     width: $big-play-width;
     height: $big-play-height;
     line-height: $big-play-height;
-    margin-top: -(math.div($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/playlist.scss b/client/src/sass/player/playlist.scss
index 3279bd263..f7e67ba16 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -1,3 +1,7 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
+
 $playlist-menu-width: 350px;
 
 .vjs-playlist-menu {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 2d0b58a1d..d495785b3 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
 
 $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 bd7efd3b8..84ebbe8ee 100644
--- a/client/src/sass/player/spinner.scss
+++ b/client/src/sass/player/spinner.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 // 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 18b3f0413..0e337aa19 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -1,4 +1,6 @@
-@use './_player-variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
 
 $stats-width: 420px;
 $contextmenu-background-color: rgba(0, 0, 0, 0.6);
@@ -6,7 +8,7 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
 .video-js {
 
   .vjs-stats-content {
-    @include transition(opacity 0.1s);
+    transition: opacity 0.1s;
 
     position: absolute;
     background-color: $contextmenu-background-color;
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index 922a9674d..2618d79d4 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -4,14 +4,10 @@ $browser-context: 16;
   @return #{$pixels/$context}em;
 }
 
-@mixin transition($string: $transition--default) {
-  transition: $string;
-}
-
 .video-js {
 
   .vjs-upnext-content {
-    @include transition(opacity 0.1s);
+    transition: opacity 0.1s;
 
     font-size: 1.8em;
     pointer-events: auto;
@@ -93,7 +89,7 @@ $browser-context: 16;
   }
 
   .vjs-upnext-autoplay-icon {
-    @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
+    transition: stroke-dasharray 0.1s cubic-bezier(0.4, 0, 1, 1);
 
     position: absolute;
     top: 50%;