From 8cbc40b2fe9d36ef0505b9441276ca561342e9e9 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 27 May 2021 18:25:00 +0200
Subject: [PATCH] Move to sass module

---
 .../about-follows.component.scss              |  4 +-
 .../about-instance.component.scss             |  4 +-
 .../contact-admin-modal.component.scss        |  4 +-
 ...about-peertube-contributors.component.scss |  4 +-
 .../about-peertube.component.scss             |  4 +-
 .../account-video-channels.component.scss     |  9 +++--
 .../src/app/+accounts/accounts.component.scss |  8 ++--
 client/src/app/+admin/admin.component.scss    |  4 +-
 .../edit-custom-config.component.scss         |  4 +-
 .../followers-list.component.scss             |  4 +-
 .../following-list.component.scss             |  4 +-
 .../app/+admin/follows/follows.component.scss |  2 +-
 .../shared/redundancy-checkbox.component.scss |  4 +-
 .../video-redundancies-list.component.scss    |  4 +-
 ...ideo-redundancy-information.component.scss |  4 +-
 .../instance-account-blocklist.component.scss |  4 +-
 .../video-block-list.component.scss           |  2 +-
 .../video-comment-list.component.scss         |  2 +-
 .../plugin-list-installed.component.scss      |  4 +-
 .../plugin-search.component.scss              |  4 +-
 .../plugin-show-installed.component.scss      |  4 +-
 .../plugins/shared/plugin-list.component.scss |  4 +-
 .../plugins/shared/toggle-plugin-type.scss    |  4 +-
 .../+admin/system/debug/debug.component.scss  |  4 +-
 .../+admin/system/jobs/jobs.component.scss    |  4 +-
 .../+admin/system/logs/logs.component.scss    |  4 +-
 .../app/+admin/system/system.component.scss   |  4 +-
 .../users/user-edit/user-edit.component.scss  |  5 ++-
 .../user-edit/user-password.component.scss    |  4 +-
 .../users/user-list/user-list.component.scss  |  4 +-
 client/src/app/+login/login.component.scss    | 10 ++---
 .../my-account-applications.component.scss    |  4 +-
 .../my-account-notifications.component.scss   |  4 +-
 .../my-account-change-email.component.scss    |  4 +-
 .../my-account-change-password.component.scss |  4 +-
 .../my-account-danger-zone.component.scss     |  4 +-
 ...nt-notification-preferences.component.scss |  4 +-
 .../my-account-profile.component.scss         |  4 +-
 .../my-account-settings.component.scss        |  4 +-
 .../app/+my-account/my-account.component.scss |  4 +-
 .../my-video-channel-edit.component.scss      |  4 +-
 .../my-video-channels.component.scss          |  4 +-
 .../my-history/my-history.component.scss      |  4 +-
 .../app/+my-library/my-library.component.scss |  4 +-
 .../my-accept-ownership.component.scss        |  4 +-
 .../my-ownership/my-ownership.component.scss  |  7 ++--
 .../my-subscriptions.component.scss           |  4 +-
 .../my-video-imports.component.scss           |  4 +-
 .../my-video-playlist-edit.component.scss     |  4 +-
 .../my-video-playlist-elements.component.scss |  6 +--
 .../my-video-playlists.component.scss         |  4 +-
 .../video-change-ownership.component.scss     |  4 +-
 .../my-videos/my-videos.component.scss        |  4 +-
 .../page-not-found.component.scss             |  4 +-
 .../remote-interaction.component.scss         |  4 +-
 .../reset-password.component.scss             |  4 +-
 .../app/+search/search-filters.component.scss |  4 +-
 client/src/app/+search/search.component.scss  |  7 ++--
 .../+register/custom-stepper.component.scss   |  7 ++--
 .../+signup/+register/register.component.scss |  4 +-
 ...rify-account-ask-send-email.component.scss |  4 +-
 .../video-channel-playlists.component.scss    |  6 +--
 .../video-channels.component.scss             |  8 ++--
 .../video-caption-add-modal.component.scss    |  4 +-
 .../shared/video-edit.component.scss          |  4 +-
 .../video-import-torrent.component.scss       |  4 +-
 .../video-add-components/video-send.scss      |  4 +-
 .../video-upload.component.scss               |  4 +-
 .../+video-edit/video-add.component.scss      |  4 +-
 .../comment/video-comment-add.component.scss  |  4 +-
 .../comment/video-comment.component.scss      |  4 +-
 .../comment/video-comments.component.scss     |  4 +-
 .../+video-watch/player-styles.component.scss |  1 +
 .../recommended-videos.component.scss         |  4 +-
 .../video-avatar-channel.component.scss       |  2 +-
 .../video-watch-playlist.component.scss       |  6 +--
 .../+video-watch/video-watch.component.scss   |  9 +++--
 .../overview/video-overview.component.scss    |  6 +--
 .../video-trending-header.component.scss      |  2 +-
 client/src/app/app.component.scss             |  4 +-
 .../app/core/hotkeys/hotkeys.component.scss   |  4 +-
 client/src/app/header/header.component.scss   |  4 +-
 .../header/search-typeahead.component.scss    |  6 +--
 .../src/app/header/suggestion.component.scss  |  3 +-
 .../app/menu/language-chooser.component.scss  |  4 +-
 client/src/app/menu/menu.component.scss       |  7 ++--
 .../src/app/menu/notification.component.scss  |  4 +-
 client/src/app/modal/confirm.component.scss   |  4 +-
 .../src/app/modal/custom-modal.component.scss |  4 +-
 ...stance-config-warning-modal.component.scss |  4 +-
 .../app/modal/welcome-modal.component.scss    |  4 +-
 .../abuse-details.component.scss              |  6 +--
 .../abuse-list-table.component.scss           |  4 +-
 .../abuse-message-modal.component.scss        |  4 +-
 .../moderation-comment-modal.component.scss   |  4 +-
 .../actor-avatar-edit.component.scss          |  4 +-
 .../actor-banner-edit.component.scss          |  4 +-
 .../actor-image-edit.scss                     |  4 +-
 .../actor-avatar.component.scss               |  4 +-
 .../button-markup.component.scss              |  4 +-
 .../channel-miniature-markup.component.scss   |  4 +-
 .../playlist-miniature-markup.component.scss  |  4 +-
 .../video-miniature-markup.component.scss     |  4 +-
 .../videos-list-markup.component.scss         |  6 +--
 .../advanced-input-filter.component.scss      |  4 +-
 .../dynamic-form-field.component.scss         |  4 +-
 .../shared-forms/input-switch.component.scss  |  4 +-
 .../input-toggle-hidden.component.scss        |  4 +-
 .../markdown-textarea.component.scss          |  9 +++--
 .../peertube-checkbox.component.scss          |  4 +-
 .../preview-upload.component.scss             |  4 +-
 .../shared-forms/reactive-file.component.scss |  4 +-
 .../select/select-checkbox.component.scss     |  4 +-
 .../select/select-shared.component.scss       |  4 +-
 .../timestamp-input.component.scss            |  2 +-
 .../feature-boolean.component.scss            |  4 +-
 .../instance-about-accordion.component.scss   |  9 +----
 .../instance-features-table.component.scss    |  4 +-
 .../buttons/action-dropdown.component.scss    |  4 +-
 .../shared-main/buttons/button.component.scss |  4 +-
 .../shared-main/feeds/feed.component.scss     |  4 +-
 .../shared-main/loaders/loader.component.scss |  4 +-
 .../shared-main/misc/help.component.scss      |  4 +-
 .../misc/list-overflow.component.scss         |  4 +-
 .../misc/simple-search-input.component.scss   |  4 +-
 .../misc/top-menu-dropdown.component.scss     |  4 +-
 .../users/user-notifications.component.scss   |  4 +-
 .../users/user-quota.component.scss           |  4 +-
 .../account-blocklist.component.scss          |  4 +-
 .../shared/shared-moderation/moderation.scss  |  9 +++--
 .../report-modals/report.component.scss       |  4 +-
 .../server-blocklist.component.scss           |  4 +-
 .../user-ban-modal.component.scss             |  4 +-
 .../video-block.component.scss                |  4 +-
 .../video-share.component.scss                |  4 +-
 .../video-thumbnail.component.scss            |  6 +--
 .../user-interface-settings.component.scss    |  4 +-
 .../user-video-settings.component.scss        |  4 +-
 .../remote-subscribe.component.scss           |  2 +-
 .../subscribe-button.component.scss           |  4 +-
 .../live-stream-information.component.scss    |  4 +-
 .../abstract-video-list.scss                  |  6 +--
 .../video-download.component.scss             |  4 +-
 .../video-miniature.component.scss            |  6 +--
 .../videos-selection.component.scss           |  4 +-
 .../video-add-to-playlist.component.scss      |  4 +-
 ...-playlist-element-miniature.component.scss |  6 +--
 .../video-playlist-miniature.component.scss   |  6 +--
 client/src/sass/application.scss              |  5 +--
 client/src/sass/bootstrap.scss                | 33 +++++++++++++--
 client/src/sass/classes.scss                  |  4 +-
 client/src/sass/include/_actor.scss           |  3 +-
 client/src/sass/include/_bootstrap.scss       | 40 -------------------
 client/src/sass/include/_miniature.scss       |  4 +-
 client/src/sass/include/_mixins.scss          | 11 ++---
 client/src/sass/include/_variables.scss       |  4 +-
 client/src/sass/ng-select.scss                |  3 +-
 client/src/sass/player/bezels.scss            |  2 +
 client/src/sass/player/context-menu.scss      |  6 +--
 client/src/sass/player/mobile.scss            |  4 +-
 client/src/sass/player/peertube-skin.scss     | 14 +++----
 client/src/sass/player/playlist.scss          |  4 ++
 client/src/sass/player/settings-menu.scss     |  6 +--
 client/src/sass/player/spinner.scss           |  4 +-
 client/src/sass/player/stats.scss             |  6 ++-
 client/src/sass/player/upnext.scss            |  8 +---
 client/src/sass/primeng-custom.scss           | 28 ++++++-------
 client/src/standalone/videos/embed.scss       |  8 ++--
 client/src/standalone/videos/test-embed.scss  |  4 +-
 scripts/dev/client.sh                         |  2 +-
 170 files changed, 426 insertions(+), 427 deletions(-)
 delete mode 100644 client/src/sass/include/_bootstrap.scss

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 3001f45eb..80eb997e4 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .subtitle {
   font-size: 18px;
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 816dc22da..965c04b6c 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .about-instance-title {
   display: flex;
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
index a726975c7..c0b451b4e 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .modal-body {
   text-align: left;
diff --git a/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
index 1cd10ba82..41e5ff0c2 100644
--- a/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .peertube-contributors {
   .framasoft {
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 57b3d492d..2a5ec08f5 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .root {
   max-width: 1200px;
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 d718d13bb..be9e94f69 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
@@ -1,6 +1,7 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .margin-content {
   @include grid-videos-miniature-margins;
@@ -100,7 +101,7 @@ my-subscribe-button {
   position: absolute;
   right: 0;
   background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
-  padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
+  padding: (math.div($video-thumbnail-medium-height, 2) - 10px) 15px 0 60px;
   z-index: z(miniature) + 1;
 
   a {
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 04fa8fb73..4c1f94024 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -1,7 +1,7 @@
-@use '_variables';
-@use '_mixins';
-@use '_actor';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_actor' as *;
+@use '_miniature' as *;
 
 .root {
   --myGlobalTopPadding: 60px;
diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss
index 753b0042b..bdc0f8ce1 100644
--- a/client/src/app/+admin/admin.component.scss
+++ b/client/src/app/+admin/admin.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 my-top-menu-dropdown {
   flex-grow: 1;
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 66c529055..5951d0aaa 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $form-base-input-width: 340px;
 
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 e01c9571d..c29b20493 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 a {
   @include disable-default-a-behaviour;
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 69e047700..ef24b38cc 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 a {
   @include disable-default-a-behaviour;
diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss
index ef2c08957..944135c5e 100644
--- a/client/src/app/+admin/follows/follows.component.scss
+++ b/client/src/app/+admin/follows/follows.component.scss
@@ -1,4 +1,4 @@
-@use '_mixins';
+@use '_mixins' as *;
 
 .form-sub-title {
   @include margin-right(30px);
diff --git a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss
index 21a554f2c..40083bed3 100644
--- a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss
+++ b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss
@@ -1,2 +1,2 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
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 bea8bf0d7..667b4875b 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 a {
   @include disable-default-a-behaviour;
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss
index f81a8d2f7..c96199bdb 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .label {
   display: inline-block;
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 e804045da..00aaf3b9c 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .unblock-button {
   @include peertube-button;
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
index 8b967da3a..f52ca44ab 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
@@ -1,4 +1,4 @@
-@use '_mixins';
+@use '_mixins' as *;
 
 my-global-icon {
   width: 24px;
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 a4aec81b8..921732124 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
@@ -1,4 +1,4 @@
-@use '_mixins';
+@use '_mixins' as *;
 
 my-feed {
   @include margin-left(5px);
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 52297cd00..5fa117d51 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,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .update-button[disabled=true] ::ng-deep .action-button {
   cursor: default !important;
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
index f4b93c72f..16b838682 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .search-bar {
   display: flex;
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 942a9c093..41a7be021 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 h2 {
   margin-bottom: 20px;
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 265c0571f..01c6ee64d 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .plugin {
   margin: 15px 0;
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
index 3dc1ab33a..67213ea72 100644
--- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
+++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .toggle-plugin-type {
   display: flex;
diff --git a/client/src/app/+admin/system/debug/debug.component.scss b/client/src/app/+admin/system/debug/debug.component.scss
index b46e46612..7f5e861e2 100644
--- a/client/src/app/+admin/system/debug/debug.component.scss
+++ b/client/src/app/+admin/system/debug/debug.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .root {
   font-size: 15px;
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index 3261b0391..5e0075a27 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .select-job-state {
   min-width: 120px;
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index 2f7d1e111..b78f4c47f 100644
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .logs {
   font-family: monospace;
diff --git a/client/src/app/+admin/system/system.component.scss b/client/src/app/+admin/system/system.component.scss
index 3ffcb67c0..18858ac1c 100644
--- a/client/src/app/+admin/system/system.component.scss
+++ b/client/src/app/+admin/system/system.component.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .form-sub-title {
   @include margin-right(30px);
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 6d1ac3566..d7932154b 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
@@ -1,5 +1,6 @@
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $form-base-input-width: 340px;
 
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 1e2f3f5e8..acb680682 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input:not([type=submit]):not([type=checkbox]) {
   @include peertube-input-text(340px);
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 a39a889dc..4f6c60f8f 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .add-button {
   @include create-button;
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index 3b2e462df..49c873cd4 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -1,8 +1,8 @@
-@use '_variables';
-@use '_mixins';
-@use './_bootstrap-variables';
-@use '~bootstrap/scss/functions';
-@use '~bootstrap/scss/variables';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
 
 label {
   display: block;
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 fcadb91ab..2a3b85c22 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;
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 71eac701b..b0ac45e30 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .header {
   display: flex;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
index 5da4c671a..788db02ad 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
index 10d92b80b..c46aae266 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;
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 30f4f2ade..f955fc607 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .delete-me {
   button {
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 f35d15f93..b4a7a0a6d 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .custom-row {
   display: flex;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index dfe3503ec..a5823fbc4 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 09d192beb..1c216d79d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .account-title {
   @include settings-big-title;
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index 4439ecf45..1ec25315a 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .row {
   @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 d84bfdb03..d8bfe71b6 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;
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 e707b1c14..9ef5513b6 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 h1 my-global-icon {
   position: relative;
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 8d61cb68b..cb8507569 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .no-history {
   display: flex;
diff --git a/client/src/app/+my-library/my-library.component.scss b/client/src/app/+my-library/my-library.component.scss
index 4439ecf45..1ec25315a 100644
--- a/client/src/app/+my-library/my-library.component.scss
+++ b/client/src/app/+my-library/my-library.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .row {
   @include sub-menu-h1;
diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
index 9468c9c4b..27d5998d3 100644
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .peertube-select-container {
   @include peertube-select-container(350px);
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 c834bc768..296659ea0 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
@@ -1,5 +1,6 @@
-@use '_miniature';
-@use '_mixins';
+@use 'sass:math';
+@use '_miniature' as *;
+@use '_mixins' as *;
 
 .chip {
   @include chip;
@@ -19,7 +20,7 @@
     @include margin-right(0.5rem);
 
     height: $image-height;
-    width: #{(16/9) * $image-height};
+    width: #{math.div(16, 9) * $image-height};
     border-radius: 2px;
     border: 0;
     background: transparent;
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index b652d6774..edca06a66 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input[type=text] {
   @include peertube-input-text(300px);
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 999677f29..2fc94e23a 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 pre {
   font-size: 11px;
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
index b5e1491d6..420391322 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;
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 00bf51f32..6aaf16834 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
@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .root {
   display: grid;
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
index a61289d6f..07e50e53f 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 h1 {
   display: flex;
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 2e9a2703d..0eb694162 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 p-autocomplete {
   display: block;
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 da364b443..6c2ef6f76 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input[type=text] {
   @include peertube-input-text(300px);
diff --git a/client/src/app/+page-not-found/page-not-found.component.scss b/client/src/app/+page-not-found/page-not-found.component.scss
index ffcf00877..efb81ff00 100644
--- a/client/src/app/+page-not-found/page-not-found.component.scss
+++ b/client/src/app/+page-not-found/page-not-found.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .root {
   @include margin-left(auto);
diff --git a/client/src/app/+remote-interaction/remote-interaction.component.scss b/client/src/app/+remote-interaction/remote-interaction.component.scss
index 21a554f2c..40083bed3 100644
--- a/client/src/app/+remote-interaction/remote-interaction.component.scss
+++ b/client/src/app/+remote-interaction/remote-interaction.component.scss
@@ -1,2 +1,2 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
diff --git a/client/src/app/+reset-password/reset-password.component.scss b/client/src/app/+reset-password/reset-password.component.scss
index aeb1c8bec..5494e29c6 100644
--- a/client/src/app/+reset-password/reset-password.component.scss
+++ b/client/src/app/+reset-password/reset-password.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input:not([type=submit]) {
   @include peertube-input-text(340px);
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index 5e2aaaeb5..235558b3d 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 form {
   margin-top: 40px;
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index 3603c3981..fca704d27 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -1,9 +1,10 @@
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 @mixin build-channel-img-size ($video-img-width) {
   $image-size: min(130px, $video-img-width);
-  $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
+  $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature
 
   @include actor-avatar-size($image-size);
 
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
index cb2f6a0a1..6a8815c77 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.scss
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@@ -1,5 +1,6 @@
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $grey-color: #9CA3AB;
 $index-block-height: 32px;
@@ -69,7 +70,7 @@ header {
 
   .connector {
     flex: auto;
-    margin: $index-block-height/2 10px 0 10px;
+    margin: math.div($index-block-height, 2) 10px 0 10px;
     height: 2px;
     background-color: $grey-color;
   }
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 1e9f00629..fc7ddb0e9 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .alert {
   font-size: 15px;
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
index aeb1c8bec..5494e29c6 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input:not([type=submit]) {
   @include peertube-input-text(340px);
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
index 5f78c13fc..588efd062 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .playlists {
   display: flex;
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 7a1ddafc8..d174dcd62 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -1,7 +1,7 @@
-@use '_variables';
-@use '_mixins';
-@use '_actor';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_actor' as *;
+@use '_miniature' as *;
 
 .root {
   --myGlobalTopPadding: 60px;
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 '_mixins';
+@use '_variables' as *;
+@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 '_mixins';
+@use '_variables' as *;
+@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 '_mixins';
+@use '_variables' as *;
+@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 '_mixins';
+@use '_variables' as *;
+@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 '_mixins';
+@use '_variables' as *;
+@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 '_mixins';
+@use '_variables' as *;
+@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 '_mixins';
+@use '_variables' as *;
+@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 '_mixins';
+@use '_variables' as *;
+@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 '_mixins';
+@use '_variables' as *;
+@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 '_mixins';
+@use '_variables' as *;
+@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 '_mixins';
+@use '_variables' as *;
+@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 '_mixins';
+@use 'sass:math';
+@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 '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@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/app.component.scss b/client/src/app/app.component.scss
index 7b685655d..4a32ad2d7 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .peertube-container {
   padding-bottom: 20px;
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index f7658a37d..a848d98cd 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .cfp-hotkeys-container {
   display: flex !important;
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index e335f136a..de483086b 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 my-search-typeahead {
   @include margin-right(15px);
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index d6ce6eca4..5114ec3a7 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -1,5 +1,5 @@
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
 
 #search-video {
   @include peertube-input-text($search-input-width);
@@ -122,7 +122,7 @@ li.suggestion {
       border-end-start-radius: 0;
       border-end-end-radius: 0;
 
-      @include media-breakpoint-up(lg) {
+      @media screen and (min-width: 1000px) {
         width: 500px;
       }
     }
diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
index 626b87c3c..41ca34d5a 100644
--- a/client/src/app/header/suggestion.component.scss
+++ b/client/src/app/header/suggestion.component.scss
@@ -1,4 +1,5 @@
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 a {
   @include disable-default-a-behaviour;
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index c9345fc23..04b18af33 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .help-to-translate {
   @include peertube-button-link;
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index ee986a66b..aad7fd5da 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -1,5 +1,6 @@
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $menu-link-icon-size: 22px;
 $menu-link-icon-margin-right: 18px;
@@ -220,7 +221,7 @@ my-actor-avatar {
 
   a {
     $icon-size: 13px;
-    $additional-margin: ($menu-link-icon-size - $icon-size) / 2;
+    $additional-margin: math.div($menu-link-icon-size - $icon-size, 2);
 
     font-size: 14px;
     width: 100%;
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index 314c2a93b..3515c3e19 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .content {
   scrollbar-color: auto;
diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss
index bcd50b52e..77ea4d307 100644
--- a/client/src/app/modal/confirm.component.scss
+++ b/client/src/app/modal/confirm.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .modal-body {
   font-size: 15px;
diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss
index 3d6622463..15cbadfc0 100644
--- a/client/src/app/modal/custom-modal.component.scss
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -1,5 +1,5 @@
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
 
 .modal-body {
   font-size: 15px;
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
index 10c21c3ce..3e6c6d716 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.scss
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -1,5 +1,5 @@
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
 
 .modal-body {
   font-size: 15px;
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index f3b1610c1..242a498d0 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -1,5 +1,5 @@
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
 
 .modal-body {
   font-size: 15px;
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
index 047dc8ea9..37bf4cc56 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .comment-html {
   background-color: #ececec;
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
index cb42fe46b..2d8acae58 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -1,5 +1,5 @@
-@import '_mixins';
-@import '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
 
 .comment-flagged-account,
 .account-flagged-handle {
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
index 419eb7fe7..d77e44a9d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 form {
   margin: 20px 20px 0 0;
diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss
index fc0454fa3..1765282c6 100644
--- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 textarea {
   @include peertube-textarea(100%, 100px);
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
index a5a9b79d4..cc5e36a32 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .actor {
   display: flex;
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
index d0ea9d364..ec2de2528 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .banner-placeholder {
   @include block-ratio('> div, > img', $banner-inverted-ratio);
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
index f25251d78..c4fe5a59e 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .actor ::ng-deep .popover-image-info .popover-body {
   padding: 0;
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 5601aca40..a2424b593 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .avatar {
   --avatarSize: 100%;
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss
index f43d6b400..3e03bed89 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss
@@ -1,3 +1,3 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
index 80c36a58b..fd84780fe 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .channel {
   padding: 20px;
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss
index d79be9ce8..720b676b4 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 my-video-playlist-miniature {
   display: inline-block;
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss
index b33784b84..1d324f948 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 my-video-miniature {
   display: inline-block;
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
index 5a9a926fe..6cd2179c4 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
@@ -1,6 +1,6 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .root {
   @include grid-videos-miniature-layout;
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
index caa671bc9..07a43761c 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input {
   @include peertube-input-text(250px);
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
index ce5fa7cf5..31bf59edb 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input:not([type=submit]) {
   @include peertube-input-text(340px);
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 a5065b669..8ee8a371d 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.scss
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input {
   position: absolute;
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
index 99cd8ec0c..ef4236ebc 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input {
   @include peertube-input-text(auto);
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 d15fd6cde..0b4872d46 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -1,5 +1,6 @@
-@use '_variables';
-@use '_mixins';
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $nav-preview-tab-height: 30px;
 $base-padding: 15px;
@@ -124,8 +125,8 @@ $input-border-radius: 3px;
     @include padding-right(0);
     @include padding-left(0);
 
-    padding-top: #{$nav-preview-vertical-padding / 2};
-    padding-bottom: #{$nav-preview-vertical-padding / 2};
+    padding-top: math.div($nav-preview-vertical-padding, 2);
+    padding-bottom: math.div($nav-preview-vertical-padding, 2);
     position: absolute;
     background-color: pvar(--mainBackgroundColor);
     width: 100% !important;
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 d39b4f3eb..4e384e7e0 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .root {
   display: flex;
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 96141d1fe..b6cc2f007 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.scss
+++ b/client/src/app/shared/shared-forms/preview-upload.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .root {
   height: auto;
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.scss b/client/src/app/shared/shared-forms/reactive-file.component.scss
index e766fd780..f8db1aa25 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.scss
+++ b/client/src/app/shared/shared-forms/reactive-file.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .root {
   height: auto;
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
index 7f512affb..d47c4f9da 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 ng-select ::ng-deep {
   .ng-option {
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 37706d3f5..1e9b60fec 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $form-base-input-width: auto;
 
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 b50657f0b..d2358c027 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -1,4 +1,4 @@
-@use '_variables';
+@use '_variables' as *;
 
 p-inputmask {
   ::ng-deep input {
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.scss b/client/src/app/shared/shared-instance/feature-boolean.component.scss
index a08cbb988..8683ecc55 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.scss
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .glyphicon-ok {
   color: $green;
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 1dd976e6a..be6099a97 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,9 +1,5 @@
-@use '_variables';
-@use '_mixins';
-@use './_bootstrap-variables';
-
-@use '~bootstrap/scss/functions';
-@use '~bootstrap/scss/variables';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .instance-name {
   line-height: 1.7rem;
@@ -19,7 +15,6 @@
 .block {
   font-size: 15px;
   margin-bottom: 15px;
-  padding: 0 $btn-padding-x;
 }
 
 ngb-accordion ::ng-deep {
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 4e0ec6beb..d8efd8cdf 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 table {
   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 b15e558d1..b456eeb95 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .dropdown-divider:last-child {
   display: none;
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 9fea10976..e74ba0221 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 @mixin responsive-label {
   .action-button {
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 13710c99b..a1838c485 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.scss
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .feed {
   width: 100%;
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 ef7dc872d..b88b0db6a 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.scss
+++ b/client/src/app/shared/shared-main/loaders/loader.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 // Thanks to https://loading.io/css/ (CC0 License)
 
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 3ed79d578..1427faca4 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .help-tooltip-button {
   @include disable-outline;
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 084fe6bfd..19c055fd3 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 :host {
   width: 100%;
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index 337b0a117..173204291 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .root {
   display: flex;
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
index cb024ea5e..0521165d2 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .parent-entry {
   span[role=button] {
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 7ebf140f3..12352b3b7 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .no-notification {
   display: flex;
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 468e04d77..70571bde6 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;
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 dd68c085f..8b1239d34 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .chip {
   @include chip;
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index 0077eaf7f..ef822d092 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -1,6 +1,7 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use 'sass:math';
+@use '_mixins' as *;
+@use '_variables' as *;
+@use '_miniature' as *;
 
 .moderation-expanded {
   font-size: 90%;
@@ -82,7 +83,7 @@ my-action-dropdown.show {
     @include margin-right(0.5rem);
 
     height: $image-height;
-    width: #{(16/9) * $image-height};
+    width: #{math.div(16, 9) * $image-height};
     border-radius: 2px;
     border: 0;
     background: transparent;
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
index 237c5de15..06e50ac2d 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.scss
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .information {
   margin-bottom: 20px;
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 8dce6dc73..e29668a23 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 a {
   @include disable-default-a-behaviour;
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
index 81be1780e..08e072d8f 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 textarea {
   @include peertube-textarea(100%, 60px);
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 c5610c034..3061bbf15 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.scss
+++ b/client/src/app/shared/shared-moderation/video-block.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 textarea {
   @include peertube-textarea(100%, 100px);
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 76f23595f..98aab8fe8 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -1,5 +1,5 @@
-@use '_mixins';
-@use '_variables';
+@use '_mixins' as *;
+@use '_variables' as *;
 
 my-input-toggle-hidden {
   width: 100%;
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 4ccb75c1e..459539924 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .video-thumbnail {
   @include miniature-thumbnail;
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
index 55a478301..2fc245ace 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
index 9c3dd2bdd..4b007b691 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 label {
   font-weight: $font-regular;
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 ee876da00..e87f43b63 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
@@ -1,4 +1,4 @@
-@use '_mixins';
+@use '_mixins' as *;
 
 .btn-remote-follow {
   @include peertube-button;
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 61cf023be..da8eaf646 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .btn-group-subscribe {
   @include peertube-button;
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.scss b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
index 931bc7269..b9008ba59 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.scss
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 p-autocomplete {
   display: block;
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 f5b96c2a6..79e3c1bdf 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
@@ -1,7 +1,7 @@
 @use '_bootstrap-variables';
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 $icon-size: 16px;
 
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 b17bdf79e..c986228d9 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .nav-content {
   margin-top: 30px;
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 850a1be2a..80b418c87 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
@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 $more-button-width: 40px;
 
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
index 727fa2ade..3bb375980 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .action-selection-mode {
   display: flex;
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 fc0d290a1..7db469d7c 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
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $optional-rows-checkbox-width: 34px;
 $timestamp-width: 50px;
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 1f0a03831..c476b3ac1 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
@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 $thumbnail-width: 130px;
 $thumbnail-height: 72px;
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 eee89a373..27955cc3b 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
@@ -1,6 +1,6 @@
-@use '_variables';
-@use '_mixins';
-@use '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 .miniature {
   display: inline-block;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 51c21107b..6b32d4cd6 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,8 +1,7 @@
 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
-@use '_bootstrap-variables';
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 @use '_fonts';
 
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 9c734c4fe..058033166 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -1,8 +1,35 @@
 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
-@use '_bootstrap';
 
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@import './_bootstrap-variables';
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/root';
+@import '~bootstrap/scss/reboot';
+@import '~bootstrap/scss/type';
+@import '~bootstrap/scss/grid';
+@import '~bootstrap/scss/tables';
+@import '~bootstrap/scss/forms';
+@import '~bootstrap/scss/buttons';
+@import '~bootstrap/scss/dropdown';
+@import '~bootstrap/scss/button-group';
+@import '~bootstrap/scss/input-group';
+@import '~bootstrap/scss/nav';
+@import '~bootstrap/scss/card';
+@import '~bootstrap/scss/badge';
+@import '~bootstrap/scss/alert';
+@import '~bootstrap/scss/close';
+@import '~bootstrap/scss/modal';
+@import '~bootstrap/scss/tooltip';
+@import '~bootstrap/scss/popover';
+@import '~bootstrap/scss/utilities';
+
+@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
 
 // 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 44c584d1c..2d8117ee5 100644
--- a/client/src/sass/classes.scss
+++ b/client/src/sass/classes.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .peertube-button {
   @include peertube-button;
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index 31c145319..b135bbb6d 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -1,4 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 @mixin section-label-responsive {
   color: pvar(--mainColor);
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
deleted file mode 100644
index 4f4f48e58..000000000
--- a/client/src/sass/include/_bootstrap.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@use './_bootstrap-variables';
-
-@use '~bootstrap/scss/functions';
-@use '~bootstrap/scss/variables';
-
-@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';
-
-@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 fb12da49e..a1b963400 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -1,5 +1,5 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 @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 bf7504d91..4d4c52b34 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,4 +1,5 @@
-@use '_variables';
+@use 'sass:math';
+@use '_variables' as *;
 
 @mixin disable-default-a-behaviour {
   &:hover,
@@ -745,7 +746,7 @@
 
   > div {
     box-sizing: border-box;
-    flex: 0 0 percentage(1/3);
+    flex: 0 0 percentage(math.div(1, 3));
     padding: 0 5px;
     margin-bottom: 10px;
 
@@ -867,7 +868,7 @@
 // applies ratio (default to 16:9) to a child element (using $selector) only using
 // an immediate's parent size. This allows to set a ratio without explicit
 // dimensions, as width/height cannot be computed from each other.
-@mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) {
+@mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
   $padding-percent: percentage($inverted-ratio);
 
   position: relative;
@@ -916,8 +917,8 @@
   top: 50%;
   transform: translate(-50%, -50%) scale(0.5);
 
-  border-top: ($height / 2) solid transparent;
-  border-bottom: ($height / 2) solid transparent;
+  border-top: #{math.div($height, 2)} solid transparent;
+  border-bottom: #{math.div($height, 2)} solid transparent;
 
   border-left: $width solid rgba(255, 255, 255, 0.95);
 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index b9c82ea77..8f3d3c3b4 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,5 +1,4 @@
 @use 'sass:math';
-@use '_bootstrap-variables';
 
 $small-view: 800px;
 $mobile-view: 500px;
@@ -54,7 +53,8 @@ $sub-menu-height: 81px;
 
 $channel-background-color: #f6ede8;
 
-$banner-inverted-ratio: #{math.div(1, 6)};
+// FIXME: cannot use math.div here because of compilation error
+$banner-inverted-ratio: 0.1666666666;
 
 $max-channels-width: 1200px;
 
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 6c9d3a407..c40b355be 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -1,4 +1,5 @@
-@use '_variables';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 $ng-select-highlight: #f2690d;
 // $ng-select-primary-text: #333 !default;
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%;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index e6d4b6060..1f50eea54 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,8 +1,8 @@
-@use '_variables';
-@use '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 /* stylelint-disable */
-@use '~primeng/resources/primeng.css';
+@use 'primeng/resources/primeng';
 
 // Override primeng style we don't want
 input[type=button] {
@@ -620,20 +620,20 @@ p-table {
       background-color: pvar(--submenuBackgroundColor) !important;
 
       .pi {
-        @extend .glyphicon;
+        @extend .glyphicon !optional;
 
         color: #000 !important;
         font-size: 11px !important;
         top: 0 !important;
 
         &.pi-sort-amount-up-alt {
-          @extend .glyphicon-triangle-top;
+          @extend .glyphicon-triangle-top !optional;
 
           color: pvar(--mainForegroundColor) !important;
         }
 
         &.pi-sort-amount-down {
-          @extend .glyphicon-triangle-bottom;
+          @extend .glyphicon-triangle-bottom !optional;
 
           color: pvar(--mainForegroundColor) !important;
         }
@@ -711,23 +711,23 @@ p-table {
         }
 
         &.p-paginator-first {
-          @extend .glyphicon-step-backward;
+          @extend .glyphicon-step-backward !optional;
         }
 
         &.p-paginator-prev {
-          @extend .glyphicon-chevron-left;
+          @extend .glyphicon-chevron-left !optional;
 
           @include margin-right(10px);
         }
 
         &.p-paginator-next {
-          @extend .glyphicon-chevron-right;
+          @extend .glyphicon-chevron-right !optional;
 
           @include margin-left(10px);
         }
 
         &.p-paginator-last {
-          @extend .glyphicon-step-forward;
+          @extend .glyphicon-step-forward !optional;
         }
       }
 
@@ -806,7 +806,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-next {
-      @extend .glyphicon-chevron-right;
+      @extend .glyphicon-chevron-right !optional;
       @include glyphicon-light;
 
       color: #000 !important;
@@ -818,7 +818,7 @@ p-calendar .p-datepicker {
     }
 
     .p-datepicker-prev {
-      @extend .glyphicon-chevron-left;
+      @extend .glyphicon-chevron-left !optional;
       @include glyphicon-light;
 
       color: #000 !important;
@@ -833,14 +833,14 @@ p-calendar .p-datepicker {
   .p-timepicker {
 
     .pi.pi-chevron-up {
-      @extend .glyphicon-chevron-up;
+      @extend .glyphicon-chevron-up !optional;
       @include glyphicon-light;
 
       color: #000 !important;
     }
 
     .pi.pi-chevron-down {
-      @extend .glyphicon-chevron-down;
+      @extend .glyphicon-chevron-down !optional;
       @include glyphicon-light;
 
       color: #000 !important;
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index 26da928f8..c2ee16ae2 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -1,7 +1,7 @@
-@use '_variables';
-@use '_mixins';
-@use '~video.js/dist/video-js.css';
-@use '~videojs-dock/dist/videojs-dock.css';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use 'video.js/dist/video-js';
+@use 'videojs-dock/dist/videojs-dock';
 
 $assets-path: '../../assets/';
 @use '../../sass/player/index';
diff --git a/client/src/standalone/videos/test-embed.scss b/client/src/standalone/videos/test-embed.scss
index ea01bf800..be1f9414a 100644
--- a/client/src/standalone/videos/test-embed.scss
+++ b/client/src/standalone/videos/test-embed.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 * {
   font-family: sans-serif;
diff --git a/scripts/dev/client.sh b/scripts/dev/client.sh
index e5b53bae5..1846f9a7d 100755
--- a/scripts/dev/client.sh
+++ b/scripts/dev/client.sh
@@ -8,7 +8,7 @@ if [ ! -z ${2+x} ] && [ "$2" = "--ar-locale" ]; then
   clientConfiguration="ar-locale"
 fi
 
-clientCommand="cd client && node node_modules/.bin/ng serve --proxy-config proxy.config.json --hmr --configuration $clientConfiguration --host 0.0.0.0 --disable-host-check --port 3000"
+clientCommand="cd client && node --max_old_space_size=4096 node_modules/.bin/ng serve --proxy-config proxy.config.json --hmr --configuration $clientConfiguration --host 0.0.0.0 --disable-host-check --port 3000"
 serverCommand="npm run build:server && NODE_ENV=test node dist/server"
 
 if [ ! -z ${1+x} ] && [ "$1" = "--skip-server" ]; then