aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-05-27 17:45:36 +0200
committerChocobozzz <me@florianbigard.com>2021-06-28 09:36:35 +0200
commitfa12eacc014aae8094d108634371640f2695bf9f (patch)
tree15b1153a9c830f5caa7e93f0939ba4153ab7624c /client
parente2e0b645cdac3c705b1988fbb0eff723ad5e885d (diff)
downloadPeerTube-fa12eacc014aae8094d108634371640f2695bf9f.tar.gz
PeerTube-fa12eacc014aae8094d108634371640f2695bf9f.tar.zst
PeerTube-fa12eacc014aae8094d108634371640f2695bf9f.zip
Move to sass @use
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+about/about-follows/about-follows.component.scss4
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.scss4
-rw-r--r--client/src/app/+about/about-instance/contact-admin-modal.component.scss4
-rw-r--r--client/src/app/+about/about-peertube/about-peertube-contributors.component.scss4
-rw-r--r--client/src/app/+about/about-peertube/about-peertube.component.scss4
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss6
-rw-r--r--client/src/app/+accounts/accounts.component.scss8
-rw-r--r--client/src/app/+admin/admin.component.scss4
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss4
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.scss4
-rw-r--r--client/src/app/+admin/follows/following-list/following-list.component.scss4
-rw-r--r--client/src/app/+admin/follows/follows.component.scss2
-rw-r--r--client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss4
-rw-r--r--client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss4
-rw-r--r--client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss4
-rw-r--r--client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss4
-rw-r--r--client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss2
-rw-r--r--client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss2
-rw-r--r--client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss4
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss4
-rw-r--r--client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss4
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-list.component.scss4
-rw-r--r--client/src/app/+admin/plugins/shared/toggle-plugin-type.scss4
-rw-r--r--client/src/app/+admin/system/debug/debug.component.scss4
-rw-r--r--client/src/app/+admin/system/jobs/jobs.component.scss4
-rw-r--r--client/src/app/+admin/system/logs/logs.component.scss4
-rw-r--r--client/src/app/+admin/users/user-edit/user-edit.component.scss4
-rw-r--r--client/src/app/+admin/users/user-edit/user-password.component.scss4
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.scss4
-rw-r--r--client/src/app/+login/login.component.scss10
-rw-r--r--client/src/app/+my-account/my-account-applications/my-account-applications.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.scss4
-rw-r--r--client/src/app/+my-account/my-account.component.scss4
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss4
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss4
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.scss4
-rw-r--r--client/src/app/+my-library/my-library.component.scss4
-rw-r--r--client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss4
-rw-r--r--client/src/app/+my-library/my-ownership/my-ownership.component.scss4
-rw-r--r--client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss4
-rw-r--r--client/src/app/+my-library/my-video-imports/my-video-imports.component.scss4
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss4
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss6
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss4
-rw-r--r--client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss4
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.scss4
-rw-r--r--client/src/app/+page-not-found/page-not-found.component.scss4
-rw-r--r--client/src/app/+remote-interaction/remote-interaction.component.scss4
-rw-r--r--client/src/app/+reset-password/reset-password.component.scss4
-rw-r--r--client/src/app/+search/search-filters.component.scss4
-rw-r--r--client/src/app/+search/search.component.scss4
-rw-r--r--client/src/app/+signup/+register/custom-stepper.component.scss4
-rw-r--r--client/src/app/+signup/+register/register.component.scss4
-rw-r--r--client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss4
-rw-r--r--client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss6
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss8
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss4
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-edit.component.scss4
-rw-r--r--client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss4
-rw-r--r--client/src/app/+videos/+video-edit/video-add-components/video-send.scss4
-rw-r--r--client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss4
-rw-r--r--client/src/app/+videos/+video-edit/video-add.component.scss4
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss4
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.scss4
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comments.component.scss4
-rw-r--r--client/src/app/+videos/+video-watch/player-styles.component.scss4
-rw-r--r--client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss4
-rw-r--r--client/src/app/+videos/+video-watch/video-avatar-channel.component.scss2
-rw-r--r--client/src/app/+videos/+video-watch/video-watch-playlist.component.scss8
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.scss8
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.scss6
-rw-r--r--client/src/app/app.component.scss6
-rw-r--r--client/src/app/core/hotkeys/hotkeys.component.scss4
-rw-r--r--client/src/app/header/header.component.scss4
-rw-r--r--client/src/app/header/search-typeahead.component.scss6
-rw-r--r--client/src/app/header/suggestion.component.scss2
-rw-r--r--client/src/app/menu/language-chooser.component.scss4
-rw-r--r--client/src/app/menu/menu.component.scss4
-rw-r--r--client/src/app/menu/notification.component.scss4
-rw-r--r--client/src/app/modal/confirm.component.scss4
-rw-r--r--client/src/app/modal/custom-modal.component.scss4
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.scss4
-rw-r--r--client/src/app/modal/welcome-modal.component.scss4
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.scss6
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss4
-rw-r--r--client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss4
-rw-r--r--client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss4
-rw-r--r--client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss4
-rw-r--r--client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss4
-rw-r--r--client/src/app/shared/shared-actor-image/actor-avatar.component.scss4
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss4
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/advanced-input-filter.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/dynamic-form-field.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/input-switch.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/input-toggle-hidden.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/markdown-textarea.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/peertube-checkbox.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/preview-upload.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/reactive-file.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/select/select-checkbox.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/select/select-shared.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/timestamp-input.component.scss2
-rw-r--r--client/src/app/shared/shared-instance/feature-boolean.component.scss4
-rw-r--r--client/src/app/shared/shared-instance/instance-about-accordion.component.scss10
-rw-r--r--client/src/app/shared/shared-instance/instance-features-table.component.scss4
-rw-r--r--client/src/app/shared/shared-main/buttons/action-dropdown.component.scss4
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.scss4
-rw-r--r--client/src/app/shared/shared-main/feeds/feed.component.scss4
-rw-r--r--client/src/app/shared/shared-main/loaders/loader.component.scss4
-rw-r--r--client/src/app/shared/shared-main/misc/help.component.scss4
-rw-r--r--client/src/app/shared/shared-main/misc/list-overflow.component.scss3
-rw-r--r--client/src/app/shared/shared-main/misc/simple-search-input.component.scss4
-rw-r--r--client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss4
-rw-r--r--client/src/app/shared/shared-main/users/user-notifications.component.scss4
-rw-r--r--client/src/app/shared/shared-main/users/user-quota.component.scss4
-rw-r--r--client/src/app/shared/shared-moderation/account-blocklist.component.scss4
-rw-r--r--client/src/app/shared/shared-moderation/moderation.scss6
-rw-r--r--client/src/app/shared/shared-moderation/report-modals/report.component.scss4
-rw-r--r--client/src/app/shared/shared-moderation/server-blocklist.component.scss4
-rw-r--r--client/src/app/shared/shared-moderation/user-ban-modal.component.scss4
-rw-r--r--client/src/app/shared/shared-moderation/video-block.component.scss4
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.scss4
-rw-r--r--client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss6
-rw-r--r--client/src/app/shared/shared-user-settings/user-interface-settings.component.scss4
-rw-r--r--client/src/app/shared/shared-user-settings/user-video-settings.component.scss4
-rw-r--r--client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss2
-rw-r--r--client/src/app/shared/shared-user-subscription/subscribe-button.component.scss4
-rw-r--r--client/src/app/shared/shared-video-live/live-stream-information.component.scss4
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.scss8
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.scss4
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.scss6
-rw-r--r--client/src/app/shared/shared-video-miniature/videos-selection.component.scss4
-rw-r--r--client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss4
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss6
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss6
-rw-r--r--client/src/sass/application.scss16
-rw-r--r--client/src/sass/bootstrap.scss6
-rw-r--r--client/src/sass/classes.scss4
-rw-r--r--client/src/sass/include/_actor.scss2
-rw-r--r--client/src/sass/include/_bootstrap.scss74
-rw-r--r--client/src/sass/include/_miniature.scss4
-rw-r--r--client/src/sass/include/_mixins.scss2
-rw-r--r--client/src/sass/include/_variables.scss5
-rw-r--r--client/src/sass/ng-select.scss4
-rw-r--r--client/src/sass/player/context-menu.scss6
-rw-r--r--client/src/sass/player/index.scss18
-rw-r--r--client/src/sass/player/mobile.scss4
-rw-r--r--client/src/sass/player/peertube-skin.scss13
-rw-r--r--client/src/sass/player/settings-menu.scss6
-rw-r--r--client/src/sass/player/spinner.scss4
-rw-r--r--client/src/sass/player/stats.scss2
-rw-r--r--client/src/sass/primeng-custom.scss6
-rw-r--r--client/src/standalone/videos/embed.scss10
160 files changed, 397 insertions, 398 deletions
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 83241e727..3001f45eb 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.subtitle { 4.subtitle {
5 font-size: 18px; 5 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 6bbb66a58..816dc22da 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.about-instance-title { 4.about-instance-title {
5 display: flex; 5 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 cc75e8279..a726975c7 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 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3 3
4.modal-body { 4.modal-body {
5 text-align: left; 5 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 daff00df5..1cd10ba82 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.peertube-contributors { 4.peertube-contributors {
5 .framasoft { 5 .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 e5d2bc5b8..57b3d492d 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.root { 4.root {
5 max-width: 1200px; 5 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 60914ec12..d718d13bb 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,6 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_miniature'; 3@use '_miniature';
4 4
5.margin-content { 5.margin-content {
6 @include grid-videos-miniature-margins; 6 @include grid-videos-miniature-margins;
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 1a1ad1b53..04fa8fb73 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -1,7 +1,7 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_actor'; 3@use '_actor';
4@import '_miniature'; 4@use '_miniature';
5 5
6.root { 6.root {
7 --myGlobalTopPadding: 60px; 7 --myGlobalTopPadding: 60px;
diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss
index c98cc9be5..753b0042b 100644
--- a/client/src/app/+admin/admin.component.scss
+++ b/client/src/app/+admin/admin.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4my-top-menu-dropdown { 4my-top-menu-dropdown {
5 flex-grow: 1; 5 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 b99a779a1..66c529055 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4$form-base-input-width: 340px; 4$form-base-input-width: 340px;
5 5
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 8a120bd61..e01c9571d 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4a { 4a {
5 @include disable-default-a-behaviour; 5 @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 9474b0a23..69e047700 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4a { 4a {
5 @include disable-default-a-behaviour; 5 @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 55256c273..ef2c08957 100644
--- a/client/src/app/+admin/follows/follows.component.scss
+++ b/client/src/app/+admin/follows/follows.component.scss
@@ -1,4 +1,4 @@
1@import 'mixins'; 1@use '_mixins';
2 2
3.form-sub-title { 3.form-sub-title {
4 @include margin-right(30px); 4 @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 5e6774739..21a554f2c 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
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 ff9a83fea..bea8bf0d7 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4a { 4a {
5 @include disable-default-a-behaviour; 5 @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 6b09fbb01..f81a8d2f7 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.label { 4.label {
5 display: inline-block; 5 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 1d98e44d9..e804045da 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.unblock-button { 4.unblock-button {
5 @include peertube-button; 5 @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 068aa2aee..8b967da3a 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 @@
1@import 'mixins'; 1@use '_mixins';
2 2
3my-global-icon { 3my-global-icon {
4 width: 24px; 4 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 39e54c315..a4aec81b8 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 @@
1@import 'mixins'; 1@use '_mixins';
2 2
3my-feed { 3my-feed {
4 @include margin-left(5px); 4 @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 22d4a59ab..52297cd00 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.update-button[disabled=true] ::ng-deep .action-button { 4.update-button[disabled=true] ::ng-deep .action-button {
5 cursor: default !important; 5 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 7e532f931..f4b93c72f 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.search-bar { 4.search-bar {
5 display: flex; 5 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 6b7b84e29..942a9c093 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4h2 { 4h2 {
5 margin-bottom: 20px; 5 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 0ca49aef4..265c0571f 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.plugin { 4.plugin {
5 margin: 15px 0; 5 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 9e98fcd34..3dc1ab33a 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.toggle-plugin-type { 4.toggle-plugin-type {
5 display: flex; 5 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 7bc8fa946..b46e46612 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.root { 4.root {
5 font-size: 15px; 5 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 6698646cd..3261b0391 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.select-job-state { 4.select-job-state {
5 min-width: 120px; 5 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 e2e5a5932..2f7d1e111 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.logs { 4.logs {
5 font-family: monospace; 5 font-family: monospace;
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 145177fb9..6d1ac3566 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,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4$form-base-input-width: 340px; 4$form-base-input-width: 340px;
5 5
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 66d15ee9c..1e2f3f5e8 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4input:not([type=submit]):not([type=checkbox]) { 4input:not([type=submit]):not([type=checkbox]) {
5 @include peertube-input-text(340px); 5 @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 f004775c0..a39a889dc 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.add-button { 4.add-button {
5 @include create-button; 5 @include create-button;
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index 6154980c6..3b2e462df 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -1,8 +1,8 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import './_bootstrap-variables'; 3@use './_bootstrap-variables';
4@import '~bootstrap/scss/functions'; 4@use '~bootstrap/scss/functions';
5@import '~bootstrap/scss/variables'; 5@use '~bootstrap/scss/variables';
6 6
7label { 7label {
8 display: block; 8 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 7a5e7cbeb..fcadb91ab 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4label { 4label {
5 font-weight: $font-regular; 5 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 346d20e20..71eac701b 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.header { 4.header {
5 display: flex; 5 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 a8b9be0d1..5da4c671a 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4label { 4label {
5 font-weight: $font-regular; 5 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 4e3fda587..10d92b80b 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4label { 4label {
5 font-weight: $font-regular; 5 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 64f960964..30f4f2ade 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.delete-me { 4.delete-me {
5 button { 5 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 42319400d..f35d15f93 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.custom-row { 4.custom-row {
5 display: flex; 5 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 2d24417a1..dfe3503ec 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4label { 4label {
5 font-weight: $font-regular; 5 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 d17cd931e..09d192beb 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.account-title { 4.account-title {
5 @include settings-big-title; 5 @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 b32bc84e7..4439ecf45 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.row { 4.row {
5 @include sub-menu-h1; 5 @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 0b366716d..d84bfdb03 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4label { 4label {
5 font-weight: $font-regular; 5 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 c236f322f..e707b1c14 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4h1 my-global-icon { 4h1 my-global-icon {
5 position: relative; 5 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 1451cf415..8d61cb68b 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.no-history { 4.no-history {
5 display: flex; 5 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 b32bc84e7..4439ecf45 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.row { 4.row {
5 @include sub-menu-h1; 5 @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 bf3770e56..9468c9c4b 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.peertube-select-container { 4.peertube-select-container {
5 @include peertube-select-container(350px); 5 @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 62763045d..c834bc768 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,5 @@
1@import 'miniature'; 1@use '_miniature';
2@import 'mixins'; 2@use '_mixins';
3 3
4.chip { 4.chip {
5 @include chip; 5 @include chip;
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 d02f9ed27..b652d6774 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4input[type=text] { 4input[type=text] {
5 @include peertube-input-text(300px); 5 @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 c4b847c3d..999677f29 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4pre { 4pre {
5 font-size: 11px; 5 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 08fab1101..b5e1491d6 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4label { 4label {
5 font-weight: $font-regular; 5 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 f09500682..00bf51f32 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_miniature'; 3@use '_miniature';
4 4
5.root { 5.root {
6 display: grid; 6 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 f84b733a6..a61289d6f 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4h1 { 4h1 {
5 display: flex; 5 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 16187bc4a..2e9a2703d 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4p-autocomplete { 4p-autocomplete {
5 display: block; 5 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 57d27aa8e..da364b443 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4input[type=text] { 4input[type=text] {
5 @include peertube-input-text(300px); 5 @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 a997dd9d7..ffcf00877 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.root { 4.root {
5 @include margin-left(auto); 5 @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 5e6774739..21a554f2c 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
diff --git a/client/src/app/+reset-password/reset-password.component.scss b/client/src/app/+reset-password/reset-password.component.scss
index efec6b706..aeb1c8bec 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4input:not([type=submit]) { 4input:not([type=submit]) {
5 @include peertube-input-text(340px); 5 @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 b0c09e6aa..5e2aaaeb5 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4form { 4form {
5 margin-top: 40px; 5 margin-top: 40px;
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index 2a19e369a..3603c3981 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4@mixin build-channel-img-size ($video-img-width) { 4@mixin build-channel-img-size ($video-img-width) {
5 $image-size: min(130px, $video-img-width); 5 $image-size: min(130px, $video-img-width);
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
index 5ae1037ed..cb2f6a0a1 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.scss
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4$grey-color: #9CA3AB; 4$grey-color: #9CA3AB;
5$index-block-height: 32px; 5$index-block-height: 32px;
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index f6a846ffa..1e9f00629 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.alert { 4.alert {
5 font-size: 15px; 5 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 efec6b706..aeb1c8bec 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4input:not([type=submit]) { 4input:not([type=submit]) {
5 @include peertube-input-text(340px); 5 @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 b3131de7e..5f78c13fc 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_miniature'; 3@use '_miniature';
4 4
5.playlists { 5.playlists {
6 display: flex; 6 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 3e66ac147..7a1ddafc8 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_actor'; 3@use '_actor';
4@import '_miniature'; 4@use '_miniature';
5 5
6.root { 6.root {
7 --myGlobalTopPadding: 60px; 7 --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 a85cf444c..7461688da 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4label { 4label {
5 font-weight: $font-regular; 5 font-weight: $font-regular;
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index b7b4400c1..b6dfa8c3e 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -1,5 +1,5 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3 3
4label, 4label,
5my-dynamic-form-field ::ng-deep label { 5my-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 dd87641fc..542e7be18 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -1,5 +1,5 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3 3
4.first-step-block { 4.first-step-block {
5 .torrent-or-magnet { 5 .torrent-or-magnet {
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index dc9153b2b..382821195 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -1,5 +1,5 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3 3
4$width-size: 190px; 4$width-size: 190px;
5 5
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
index 435dd36fa..f26e95ec5 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
@@ -1,5 +1,5 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3 3
4.first-step-block { 4.first-step-block {
5 .form-group-channel { 5 .form-group-channel {
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index 35bca24d0..3e7dc7608 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4$border-width: 3px; 4$border-width: 3px;
5$border-type: solid; 5$border-type: solid;
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index 5c97fb13c..6202ed05b 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4$markdown-icon-height: 18px; 4$markdown-icon-height: 18px;
5$markdown-icon-width: 30px; 5$markdown-icon-width: 30px;
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
index 7868991ba..fd2a9f86f 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.root-comment { 4.root-comment {
5 font-size: 15px; 5 font-size: 15px;
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
index 29a00ee3f..af684bdc4 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4#highlighted-comment { 4#highlighted-comment {
5 margin-bottom: 25px; 5 margin-bottom: 25px;
diff --git a/client/src/app/+videos/+video-watch/player-styles.component.scss b/client/src/app/+videos/+video-watch/player-styles.component.scss
index 7f1442a59..313dca701 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,4 @@
1@import 'node_modules/video.js/dist/video-js'; 1@use 'node_modules/video.js/dist/video-js';
2 2
3$assets-path: '../../assets/'; 3$assets-path: '../../assets/';
4@import '../../../sass/player/index'; 4@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 89d44c067..ba8032497 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.title-page-container { 4.title-page-container {
5 display: flex; 5 display: flex;
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
index f269398cb..ada2780d3 100644
--- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
@@ -1,4 +1,4 @@
1@import '_mixins'; 1@use '_mixins';
2 2
3@mixin main { 3@mixin main {
4 @include actor-avatar-size(35px); 4 @include actor-avatar-size(35px);
diff --git a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
index d1a0f97f7..dfbe835dd 100644
--- a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
@@ -1,7 +1,7 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_bootstrap-variables'; 3@use '_bootstrap-variables';
4@import '_miniature'; 4@use '_miniature';
5 5
6.playlist { 6.playlist {
7 min-width: 200px; 7 min-width: 200px;
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 4a2e05c62..13d801cc6 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -1,7 +1,7 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_bootstrap-variables'; 3@use '_bootstrap-variables';
4@import '_miniature'; 4@use '_miniature';
5 5
6$player-factor: 16/9; 6$player-factor: 16/9;
7$video-info-margin-left: 44px; 7$video-info-margin-left: 44px;
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 cb9308dda..3a895ae7b 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -1,6 +1,6 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_miniature'; 3@use '_miniature';
4 4
5.section-title { 5.section-title {
6 // make the element span a full grid row within .videos grid 6 // make the element span a full grid row within .videos grid
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 472245411..7b685655d 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -1,7 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '~bootstrap/scss/functions';
4@import '~bootstrap/scss/variables';
5 3
6.peertube-container { 4.peertube-container {
7 padding-bottom: 20px; 5 padding-bottom: 20px;
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index e0bc34727..f7658a37d 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.cfp-hotkeys-container { 4.cfp-hotkeys-container {
5 display: flex !important; 5 display: flex !important;
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 45cef7b9a..e335f136a 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4my-search-typeahead { 4my-search-typeahead {
5 @include margin-right(15px); 5 @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 ed7f3bd65..d6ce6eca4 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -1,7 +1,5 @@
1@import '_mixins'; 1@use '_mixins';
2@import '_variables'; 2@use '_variables';
3@import '_bootstrap-variables';
4@import '~bootstrap/scss/mixins/_breakpoints';
5 3
6#search-video { 4#search-video {
7 @include peertube-input-text($search-input-width); 5 @include peertube-input-text($search-input-width);
diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
index 9163de0b1..626b87c3c 100644
--- a/client/src/app/header/suggestion.component.scss
+++ b/client/src/app/header/suggestion.component.scss
@@ -1,4 +1,4 @@
1@import '_mixins'; 1@use '_mixins';
2 2
3a { 3a {
4 @include disable-default-a-behaviour; 4 @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 800b1ebef..c9345fc23 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.help-to-translate { 4.help-to-translate {
5 @include peertube-button-link; 5 @include peertube-button-link;
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 8e9c02b23..ee986a66b 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4$menu-link-icon-size: 22px; 4$menu-link-icon-size: 22px;
5$menu-link-icon-margin-right: 18px; 5$menu-link-icon-margin-right: 18px;
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index 23d7181d0..314c2a93b 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.content { 4.content {
5 scrollbar-color: auto; 5 scrollbar-color: auto;
diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss
index 69978f212..bcd50b52e 100644
--- a/client/src/app/modal/confirm.component.scss
+++ b/client/src/app/modal/confirm.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.modal-body { 4.modal-body {
5 font-size: 15px; 5 font-size: 15px;
diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss
index d6ef772b2..3d6622463 100644
--- a/client/src/app/modal/custom-modal.component.scss
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -1,5 +1,5 @@
1@import '_mixins'; 1@use '_mixins';
2@import '_variables'; 2@use '_variables';
3 3
4.modal-body { 4.modal-body {
5 font-size: 15px; 5 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 8d734c628..10c21c3ce 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 @@
1@import '_mixins'; 1@use '_mixins';
2@import '_variables'; 2@use '_variables';
3 3
4.modal-body { 4.modal-body {
5 font-size: 15px; 5 font-size: 15px;
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index f469164db..f3b1610c1 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -1,5 +1,5 @@
1@import '_mixins'; 1@use '_mixins';
2@import '_variables'; 2@use '_variables';
3 3
4.modal-body { 4.modal-body {
5 font-size: 15px; 5 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 8f8f3ac2e..047dc8ea9 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 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3@import 'miniature'; 3@use '_miniature';
4 4
5.comment-html { 5.comment-html {
6 background-color: #ececec; 6 background-color: #ececec;
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 4163722dd..419eb7fe7 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 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3 3
4form { 4form {
5 margin: 20px 20px 0 0; 5 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 afcdb9a16..fc0454fa3 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 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3 3
4textarea { 4textarea {
5 @include peertube-textarea(100%, 100px); 5 @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 a296cd173..a5a9b79d4 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.actor { 4.actor {
5 display: flex; 5 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 23606f871..d0ea9d364 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.banner-placeholder { 4.banner-placeholder {
5 @include block-ratio('> div, > img', $banner-inverted-ratio); 5 @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 918955a89..f25251d78 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.actor ::ng-deep .popover-image-info .popover-body { 4.actor ::ng-deep .popover-image-info .popover-body {
5 padding: 0; 5 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 bf50de4e9..5601aca40 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.avatar { 4.avatar {
5 --avatarSize: 100%; 5 --avatarSize: 100%;
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 281cef726..d79be9ce8 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4my-video-playlist-miniature { 4my-video-playlist-miniature {
5 display: inline-block; 5 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 81e265f29..b33784b84 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4my-video-miniature { 4my-video-miniature {
5 display: inline-block; 5 display: inline-block;
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 7c2198927..caa671bc9 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4input { 4input {
5 @include peertube-input-text(250px); 5 @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 45ba28951..ce5fa7cf5 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4input:not([type=submit]) { 4input:not([type=submit]) {
5 @include peertube-input-text(340px); 5 @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 290a70db8..a5065b669 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4input { 4input {
5 position: absolute; 5 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 e03e9b19f..99cd8ec0c 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4input { 4input {
5 @include peertube-input-text(auto); 5 @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 a34d9ebea..d15fd6cde 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,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4$nav-preview-tab-height: 30px; 4$nav-preview-tab-height: 30px;
5$base-padding: 15px; 5$base-padding: 15px;
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 54479fed7..d39b4f3eb 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.root { 4.root {
5 display: flex; 5 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 c2ee0d6a9..96141d1fe 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.root { 4.root {
5 height: auto; 5 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 a23b28147..e766fd780 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.root { 4.root {
5 height: auto; 5 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 145f6b26c..7f512affb 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4ng-select ::ng-deep { 4ng-select ::ng-deep {
5 .ng-option { 5 .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 9a796f545..37706d3f5 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4$form-base-input-width: auto; 4$form-base-input-width: auto;
5 5
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 36f5711a6..b50657f0b 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 @@
1@import 'variables'; 1@use '_variables';
2 2
3p-inputmask { 3p-inputmask {
4 ::ng-deep input { 4 ::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 56d08af06..a08cbb988 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.glyphicon-ok { 4.glyphicon-ok {
5 color: $green; 5 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 615e08bcc..1dd976e6a 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,9 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import './_bootstrap-variables'; 3@use './_bootstrap-variables';
4 4
5@import '~bootstrap/scss/functions'; 5@use '~bootstrap/scss/functions';
6@import '~bootstrap/scss/variables'; 6@use '~bootstrap/scss/variables';
7 7
8.instance-name { 8.instance-name {
9 line-height: 1.7rem; 9 line-height: 1.7rem;
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 c8609a4c0..4e0ec6beb 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4table { 4table {
5 font-size: 14px; 5 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 b9a4d46dc..b15e558d1 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.dropdown-divider:last-child { 4.dropdown-divider:last-child {
5 display: none; 5 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 25a979ac9..9fea10976 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4@mixin responsive-label { 4@mixin responsive-label {
5 .action-button { 5 .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 d39f31d70..13710c99b 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.feed { 4.feed {
5 width: 100%; 5 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 64138afe4..ef7dc872d 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4// Thanks to https://loading.io/css/ (CC0 License) 4// Thanks to https://loading.io/css/ (CC0 License)
5 5
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 51a105498..3ed79d578 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.help-tooltip-button { 4.help-tooltip-button {
5 @include disable-outline; 5 @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 7e31d3850..084fe6bfd 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,4 +1,5 @@
1@import '_mixins'; 1@use '_variables';
2@use '_mixins';
2 3
3:host { 4:host {
4 width: 100%; 5 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 be712979b..337b0a117 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.root { 4.root {
5 display: flex; 5 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 ffabb3646..cb024ea5e 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.parent-entry { 4.parent-entry {
5 span[role=button] { 5 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 58dc88c38..7ebf140f3 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.no-notification { 4.no-notification {
5 display: flex; 5 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 3ca611b9f..468e04d77 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4label { 4label {
5 font-weight: $font-regular; 5 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 bc441811e..dd68c085f 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.chip { 4.chip {
5 @include chip; 5 @include chip;
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index 7c6dc9b72..0077eaf7f 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -1,6 +1,6 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3@import 'miniature'; 3@use '_miniature';
4 4
5.moderation-expanded { 5.moderation-expanded {
6 font-size: 90%; 6 font-size: 90%;
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 5decd36c2..237c5de15 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 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3 3
4.information { 4.information {
5 margin-bottom: 20px; 5 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 a22972c5f..8dce6dc73 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4a { 4a {
5 @include disable-default-a-behaviour; 5 @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 84562f15c..81be1780e 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 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3 3
4textarea { 4textarea {
5 @include peertube-textarea(100%, 60px); 5 @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 a6e33070b..c5610c034 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 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3 3
4textarea { 4textarea {
5 @include peertube-textarea(100%, 100px); 5 @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 7e4dafc91..76f23595f 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 @@
1@import '_mixins'; 1@use '_mixins';
2@import '_variables'; 2@use '_variables';
3 3
4my-input-toggle-hidden { 4my-input-toggle-hidden {
5 width: 100%; 5 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 e678d6edf..4ccb75c1e 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_miniature'; 3@use '_miniature';
4 4
5.video-thumbnail { 5.video-thumbnail {
6 @include miniature-thumbnail; 6 @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 7818dfc02..55a478301 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4label { 4label {
5 font-weight: $font-regular; 5 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 2cbd92d41..9c3dd2bdd 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4label { 4label {
5 font-weight: $font-regular; 5 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 73db0d090..ee876da00 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 @@
1@import '_mixins'; 1@use '_mixins';
2 2
3.btn-remote-follow { 3.btn-remote-follow {
4 @include peertube-button; 4 @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 1b0cc8c64..61cf023be 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.btn-group-subscribe { 4.btn-group-subscribe {
5 @include peertube-button; 5 @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 ad66ab500..931bc7269 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4p-autocomplete { 4p-autocomplete {
5 display: block; 5 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 c8dda2900..f5b96c2a6 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 @@
1@import '_bootstrap-variables'; 1@use '_bootstrap-variables';
2@import '_variables'; 2@use '_variables';
3@import '_mixins'; 3@use '_mixins';
4@import '_miniature'; 4@use '_miniature';
5 5
6$icon-size: 16px; 6$icon-size: 16px;
7 7
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 f03034571..b17bdf79e 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 @@
1@import 'variables'; 1@use '_variables';
2@import 'mixins'; 2@use '_mixins';
3 3
4.nav-content { 4.nav-content {
5 margin-top: 30px; 5 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 8f632edb4..850a1be2a 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_miniature'; 3@use '_miniature';
4 4
5$more-button-width: 40px; 5$more-button-width: 40px;
6 6
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 fa751eeca..727fa2ade 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.action-selection-mode { 4.action-selection-mode {
5 display: flex; 5 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 5f0798e3c..fc0d290a1 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4$optional-rows-checkbox-width: 34px; 4$optional-rows-checkbox-width: 34px;
5$timestamp-width: 50px; 5$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 1fe28a682..1f0a03831 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_miniature'; 3@use '_miniature';
4 4
5$thumbnail-width: 130px; 5$thumbnail-width: 130px;
6$thumbnail-height: 72px; 6$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 cf7513984..eee89a373 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 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '_miniature'; 3@use '_miniature';
4 4
5.miniature { 5.miniature {
6 display: inline-block; 6 display: inline-block;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 799b8c881..51c21107b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,16 +1,16 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; 1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2 2
3@import '_bootstrap-variables'; 3@use '_bootstrap-variables';
4@import '_variables'; 4@use '_variables';
5@import '_mixins'; 5@use '_mixins';
6 6
7@import '_fonts'; 7@use '_fonts';
8 8
9@import './bootstrap'; 9@use './bootstrap';
10@import './primeng-custom'; 10@use './primeng-custom';
11@import './ng-select'; 11@use './ng-select';
12 12
13@import './classes'; 13@use './classes';
14 14
15[hidden] { 15[hidden] {
16 display: none !important; 16 display: none !important;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 501587eb2..9c734c4fe 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -1,8 +1,8 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; 1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2@import '_bootstrap'; 2@use '_bootstrap';
3 3
4@import '_variables'; 4@use '_variables';
5@import '_mixins'; 5@use '_mixins';
6 6
7// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d 7// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
8.glyphicon-refresh-animate { 8.glyphicon-refresh-animate {
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
index 85bfce7f4..44c584d1c 100644
--- a/client/src/sass/classes.scss
+++ b/client/src/sass/classes.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4.peertube-button { 4.peertube-button {
5 @include peertube-button; 5 @include peertube-button;
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index ab2038dde..31c145319 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -1,4 +1,4 @@
1@import '_variables'; 1@use '_variables';
2 2
3@mixin section-label-responsive { 3@mixin section-label-responsive {
4 color: pvar(--mainColor); 4 color: pvar(--mainColor);
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index d9e5efc02..4f4f48e58 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -1,40 +1,40 @@
1@import './_bootstrap-variables'; 1@use './_bootstrap-variables';
2 2
3@import '~bootstrap/scss/functions'; 3@use '~bootstrap/scss/functions';
4@import '~bootstrap/scss/variables'; 4@use '~bootstrap/scss/variables';
5 5
6@import '~bootstrap/scss/mixins'; 6@use '~bootstrap/scss/mixins';
7@import '~bootstrap/scss/root'; 7@use '~bootstrap/scss/root';
8@import '~bootstrap/scss/reboot'; 8@use '~bootstrap/scss/reboot';
9@import '~bootstrap/scss/type'; 9@use '~bootstrap/scss/type';
10//@import '~bootstrap/scss/images'; 10//@use '~bootstrap/scss/images';
11//@import '~bootstrap/scss/code'; 11//@use '~bootstrap/scss/code';
12@import '~bootstrap/scss/grid'; 12@use '~bootstrap/scss/grid';
13@import '~bootstrap/scss/tables'; 13@use '~bootstrap/scss/tables';
14@import '~bootstrap/scss/forms'; 14@use '~bootstrap/scss/forms';
15@import '~bootstrap/scss/buttons'; 15@use '~bootstrap/scss/buttons';
16//@import '~bootstrap/scss/transitions'; 16//@use '~bootstrap/scss/transitions';
17@import '~bootstrap/scss/dropdown'; 17@use '~bootstrap/scss/dropdown';
18@import '~bootstrap/scss/button-group'; 18@use '~bootstrap/scss/button-group';
19@import '~bootstrap/scss/input-group'; 19@use '~bootstrap/scss/input-group';
20//@import '~bootstrap/scss/custom-forms'; 20//@use '~bootstrap/scss/custom-forms';
21@import '~bootstrap/scss/nav'; 21@use '~bootstrap/scss/nav';
22//@import '~bootstrap/scss/navbar'; 22//@use '~bootstrap/scss/navbar';
23@import '~bootstrap/scss/card'; 23@use '~bootstrap/scss/card';
24//@import '~bootstrap/scss/breadcrumb'; 24//@use '~bootstrap/scss/breadcrumb';
25//@import '~bootstrap/scss/pagination'; 25//@use '~bootstrap/scss/pagination';
26@import '~bootstrap/scss/badge'; 26@use '~bootstrap/scss/badge';
27//@import '~bootstrap/scss/jumbotron'; 27//@use '~bootstrap/scss/jumbotron';
28@import '~bootstrap/scss/alert'; 28@use '~bootstrap/scss/alert';
29//@import '~bootstrap/scss/progress'; 29//@use '~bootstrap/scss/progress';
30//@import '~bootstrap/scss/media'; 30//@use '~bootstrap/scss/media';
31//@import '~bootstrap/scss/list-group'; 31//@use '~bootstrap/scss/list-group';
32@import '~bootstrap/scss/close'; 32@use '~bootstrap/scss/close';
33@import '~bootstrap/scss/modal'; 33@use '~bootstrap/scss/modal';
34@import '~bootstrap/scss/tooltip'; 34@use '~bootstrap/scss/tooltip';
35@import '~bootstrap/scss/popover'; 35@use '~bootstrap/scss/popover';
36//@import '~bootstrap/scss/carousel'; 36//@use '~bootstrap/scss/carousel';
37@import '~bootstrap/scss/utilities'; 37@use '~bootstrap/scss/utilities';
38//@import '~bootstrap/scss/print'; 38//@use '~bootstrap/scss/print';
39 39
40@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; 40@use '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 0d3f2b6e0..fb12da49e 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4@mixin miniature-name { 4@mixin miniature-name {
5 @include ellipsis-multiline(1.1em, 2); 5 @include ellipsis-multiline(1.1em, 2);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 62e1ca163..bf7504d91 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,4 +1,4 @@
1@import '_variables'; 1@use '_variables';
2 2
3@mixin disable-default-a-behaviour { 3@mixin disable-default-a-behaviour {
4 &:hover, 4 &:hover,
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d54563df6..b9c82ea77 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,4 +1,5 @@
1@import '_bootstrap-variables'; 1@use 'sass:math';
2@use '_bootstrap-variables';
2 3
3$small-view: 800px; 4$small-view: 800px;
4$mobile-view: 500px; 5$mobile-view: 500px;
@@ -53,7 +54,7 @@ $sub-menu-height: 81px;
53 54
54$channel-background-color: #f6ede8; 55$channel-background-color: #f6ede8;
55 56
56$banner-inverted-ratio: 1/6; 57$banner-inverted-ratio: #{math.div(1, 6)};
57 58
58$max-channels-width: 1200px; 59$max-channels-width: 1200px;
59 60
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index ecd33babe..6c9d3a407 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -1,4 +1,4 @@
1@import '_variables'; 1@use '_variables';
2 2
3$ng-select-highlight: #f2690d; 3$ng-select-highlight: #f2690d;
4// $ng-select-primary-text: #333 !default; 4// $ng-select-primary-text: #333 !default;
@@ -14,7 +14,7 @@ $ng-select-height: 30px;
14$ng-select-value-padding-left: 15px; 14$ng-select-value-padding-left: 15px;
15$ng-select-value-font-size: 15px; 15$ng-select-value-font-size: 15px;
16 16
17@import '~@ng-select/ng-select/scss/default.theme'; 17@use '~@ng-select/ng-select/scss/default.theme';
18 18
19.ng-select { 19.ng-select {
20 font-size: $ng-select-value-font-size; 20 font-size: $ng-select-value-font-size;
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 501c68ffd..a207d8a28 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -1,6 +1,6 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import './_player-variables'; 3@use './_player-variables';
4 4
5$context-menu-width: 350px; 5$context-menu-width: 350px;
6 6
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index e674fa2f6..385365b6d 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -1,9 +1,9 @@
1@import './peertube-skin'; 1@use './peertube-skin';
2@import './mobile'; 2@use './mobile';
3@import './context-menu'; 3@use './context-menu';
4@import './settings-menu'; 4@use './settings-menu';
5@import './spinner'; 5@use './spinner';
6@import './upnext'; 6@use './upnext';
7@import './bezels'; 7@use './bezels';
8@import './playlist'; 8@use './playlist';
9@import './stats'; 9@use './stats';
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index 26066d218..dde2c3127 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4/* Special mobile style */ 4/* Special mobile style */
5 5
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 148992089..1a84bd7f0 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -1,6 +1,7 @@
1@import '_variables'; 1@use 'sass:math';
2@import '_mixins'; 2@use '_variables';
3@import './_player-variables'; 3@use '_mixins';
4@use './_player-variables';
4 5
5body { 6body {
6 --embedForegroundColor: #{$primary-foreground-color}; 7 --embedForegroundColor: #{$primary-foreground-color};
@@ -11,8 +12,8 @@ body {
11@mixin big-play-button-triangle-size($triangle-size) { 12@mixin big-play-button-triangle-size($triangle-size) {
12 width: $triangle-size; 13 width: $triangle-size;
13 height: $triangle-size; 14 height: $triangle-size;
14 top: calc(50% - #{$triangle-size / 2}); 15 top: calc(50% - math.div($triangle-size / 2));
15 left: calc(53% - #{($triangle-size / 2)}); 16 left: calc(53% - math.div($triangle-size / 2));
16} 17}
17 18
18.video-js.vjs-peertube-skin { 19.video-js.vjs-peertube-skin {
@@ -69,7 +70,7 @@ body {
69 width: $big-play-width; 70 width: $big-play-width;
70 height: $big-play-height; 71 height: $big-play-height;
71 line-height: $big-play-height; 72 line-height: $big-play-height;
72 margin-top: -($big-play-height / 2); 73 margin-top: -(math.div($big-play-height / 2));
73 transition: 0.4s opacity; 74 transition: 0.4s opacity;
74 75
75 &::-moz-focus-inner { 76 &::-moz-focus-inner {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 2183a7dbc..2d0b58a1d 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,6 +1,6 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import './_player-variables'; 3@use './_player-variables';
4 4
5$setting-transition-duration: 0.15s; 5$setting-transition-duration: 0.15s;
6$setting-transition-easing: ease-out; 6$setting-transition-easing: ease-out;
diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
index 94f4d1008..bd7efd3b8 100644
--- a/client/src/sass/player/spinner.scss
+++ b/client/src/sass/player/spinner.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4// Thanks: https://projects.lukehaas.me/css-loaders/ 4// Thanks: https://projects.lukehaas.me/css-loaders/
5.vjs-loading-spinner { 5.vjs-loading-spinner {
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
index c6388ed13..18b3f0413 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -1,4 +1,4 @@
1@import './_player-variables'; 1@use './_player-variables';
2 2
3$stats-width: 420px; 3$stats-width: 420px;
4$contextmenu-background-color: rgba(0, 0, 0, 0.6); 4$contextmenu-background-color: rgba(0, 0, 0, 0.6);
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 4cd27bea8..e6d4b6060 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,8 +1,8 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3 3
4/* stylelint-disable */ 4/* stylelint-disable */
5@import '~primeng/resources/primeng.css'; 5@use '~primeng/resources/primeng.css';
6 6
7// Override primeng style we don't want 7// Override primeng style we don't want
8input[type=button] { 8input[type=button] {
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index e32cce54e..26da928f8 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -1,10 +1,10 @@
1@import '_variables'; 1@use '_variables';
2@import '_mixins'; 2@use '_mixins';
3@import '~video.js/dist/video-js.css'; 3@use '~video.js/dist/video-js.css';
4@import '~videojs-dock/dist/videojs-dock.css'; 4@use '~videojs-dock/dist/videojs-dock.css';
5 5
6$assets-path: '../../assets/'; 6$assets-path: '../../assets/';
7@import '../../sass/player/index'; 7@use '../../sass/player/index';
8 8
9[hidden] { 9[hidden] {
10 display: none !important; 10 display: none !important;