16 files changed, 34 insertions, 32 deletions
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 7461688da..4ce2c6758 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
@@ -1,5 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
 label {
  font-weight: $font-regular;
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 b6dfa8c3e..4b1dec89a 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
@@ -1,5 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
 label,
 my-dynamic-form-field ::ng-deep label {
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 542e7be18..97299ef32 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
 .first-step-block {
  .torrent-or-magnet {
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 382821195..e601c3dff 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
@@ -1,5 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
 $width-size: 190px;
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
index f26e95ec5..35c626ec2 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
 .first-step-block {
  .form-group-channel {
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 3e7dc7608..dea6fde36 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
 $border-width: 3px;
 $border-type: solid;
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 6202ed05b..fb79991db 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
@@ -1,5 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
 $markdown-icon-height: 18px;
 $markdown-icon-width: 30px;
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 fd2a9f86f..87e313d41 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
@@ -1,5 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
 .root-comment {
  font-size: 15px;
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 af684bdc4..31aa73937 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
@@ -1,5 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
 #highlighted-comment {
  margin-bottom: 25px;
diff --git a/client/src/app/+videos/+video-watch/player-styles.component.scss b/client/src/app/+videos/+video-watch/player-styles.component.scss
index 313dca701..c0befc10a 100644
--- a/client/src/app/+videos/+video-watch/player-styles.component.scss
+++ b/client/src/app/+videos/+video-watch/player-styles.component.scss
@@ -1,4 +1,5 @@
 @use 'node_modules/video.js/dist/video-js';
 $assets-path: '../../assets/';
 @use '../../../sass/player/index';
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 ba8032497..84ed25ae8 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
@@ -1,5 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
 .title-page-container {
  display: flex;
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
index ada2780d3..1ff8fb96e 100644
--- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
@@ -1,4 +1,4 @@
-@use '_mixins';
+@use '_mixins' as *;
 @mixin main {
  @include actor-avatar-size(35px);
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 dfbe835dd..75ed9d901 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
@@ -1,7 +1,7 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
 @use '_bootstrap-variables';
-@use '_miniature';
+@use '_miniature' as *;
 .playlist {
  min-width: 200px;
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 13d801cc6..7b7934456 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -1,9 +1,10 @@
-@use '_variables';
+@use 'sass:math';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 @use '_bootstrap-variables';
-@use '_miniature';
+@use '_miniature' as *;
-$player-factor: 16/9;
+$player-factor: math.div(16, 9);
 $video-info-margin-left: 44px;
 @function getPlayerHeight ($width) {
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 3a895ae7b..2239d1913 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
@@ -1,6 +1,6 @@
-@use '_variables';
+@use '_variables' as *;
-@use '_mixins';
+@use '_mixins' as *;
-@use '_miniature';
+@use '_miniature' as *;
 .section-title {
  // make the element span a full grid row within .videos grid
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 df127e1cb..54b072314 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
@@ -1,4 +1,4 @@
-@import '_mixins';
+@use '_mixins' as *;
 .btn-group label {
  border: 1px solid transparent;

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 7461688da..4ce2c6758 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
@@ -1,5 +1,5 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3		3
4	label {	4	label {
5	font-weight: $font-regular;	5	font-weight: $font-regular;


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 b6dfa8c3e..4b1dec89a 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
@@ -1,5 +1,5 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3		3
4	label,	4	label,
5	my-dynamic-form-field ::ng-deep label {	5	my-dynamic-form-field ::ng-deep label {


diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss index 542e7be18..97299ef32 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss +++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -1,5 +1,5 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3		3
4	.first-step-block {	4	.first-step-block {
5	.torrent-or-magnet {	5	.torrent-or-magnet {


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 382821195..e601c3dff 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
@@ -1,5 +1,5 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3		3
4	$width-size: 190px;	4	$width-size: 190px;
5		5


diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss index f26e95ec5..35c626ec2 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss +++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
@@ -1,5 +1,5 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3		3
4	.first-step-block {	4	.first-step-block {
5	.form-group-channel {	5	.form-group-channel {


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 3e7dc7608..dea6fde36 100644 --- a/client/src/app/+videos/+video-edit/video-add.component.scss +++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -1,5 +1,5 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3		3
4	$border-width: 3px;	4	$border-width: 3px;
5	$border-type: solid;	5	$border-type: solid;


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 6202ed05b..fb79991db 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
@@ -1,5 +1,5 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3		3
4	$markdown-icon-height: 18px;	4	$markdown-icon-height: 18px;
5	$markdown-icon-width: 30px;	5	$markdown-icon-width: 30px;


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 fd2a9f86f..87e313d41 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
@@ -1,5 +1,5 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3		3
4	.root-comment {	4	.root-comment {
5	font-size: 15px;	5	font-size: 15px;


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 af684bdc4..31aa73937 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
@@ -1,5 +1,5 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3		3
4	#highlighted-comment {	4	#highlighted-comment {
5	margin-bottom: 25px;	5	margin-bottom: 25px;


diff --git a/client/src/app/+videos/+video-watch/player-styles.component.scss b/client/src/app/+videos/+video-watch/player-styles.component.scss index 313dca701..c0befc10a 100644 --- a/client/src/app/+videos/+video-watch/player-styles.component.scss +++ b/client/src/app/+videos/+video-watch/player-styles.component.scss
@@ -1,4 +1,5 @@
1	@use 'node_modules/video.js/dist/video-js';	1	@use 'node_modules/video.js/dist/video-js';
2		2
3	$assets-path: '../../assets/';	3	$assets-path: '../../assets/';
		4
4	@use '../../../sass/player/index';	5	@use '../../../sass/player/index';


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 ba8032497..84ed25ae8 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
@@ -1,5 +1,5 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3		3
4	.title-page-container {	4	.title-page-container {
5	display: flex;	5	display: flex;


diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss index ada2780d3..1ff8fb96e 100644 --- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss +++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
@@ -1,4 +1,4 @@
1	@use '_mixins';	1	@use '_mixins' as *;
2		2
3	@mixin main {	3	@mixin main {
4	@include actor-avatar-size(35px);	4	@include actor-avatar-size(35px);


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 dfbe835dd..75ed9d901 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
@@ -1,7 +1,7 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3	@use '_bootstrap-variables';	3	@use '_bootstrap-variables';
4	@use '_miniature';	4	@use '_miniature' as *;
5		5
6	.playlist {	6	.playlist {
7	min-width: 200px;	7	min-width: 200px;


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 13d801cc6..7b7934456 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -1,9 +1,10 @@
1	@use '_variables';	1	@use 'sass:math';
2	@use '_mixins';	2	@use '_variables' as *;
		3	@use '_mixins' as *;
3	@use '_bootstrap-variables';	4	@use '_bootstrap-variables';
4	@use '_miniature';	5	@use '_miniature' as *;
5		6
6	$player-factor: 16/9;	7	$player-factor: math.div(16, 9);
7	$video-info-margin-left: 44px;	8	$video-info-margin-left: 44px;
8		9
9	@function getPlayerHeight ($width) {	10	@function getPlayerHeight ($width) {


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 3a895ae7b..2239d1913 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
@@ -1,6 +1,6 @@
1	@use '_variables';	1	@use '_variables' as *;
2	@use '_mixins';	2	@use '_mixins' as *;
3	@use '_miniature';	3	@use '_miniature' as *;
4		4
5	.section-title {	5	.section-title {
6	// make the element span a full grid row within .videos grid	6	// make the element span a full grid row within .videos grid


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 df127e1cb..54b072314 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
@@ -1,4 +1,4 @@
1	@import '_mixins';	1	@use '_mixins' as *;
2		2
3	.btn-group label {	3	.btn-group label {
4	border: 1px solid transparent;	4	border: 1px solid transparent;