aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app')
-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.scss9
-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/system/system.component.scss4
-rw-r--r--client/src/app/+admin/users/user-edit/user-edit.component.scss5
-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.scss7
-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.scss7
-rw-r--r--client/src/app/+signup/+register/custom-stepper.component.scss7
-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.scss1
-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.scss6
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.scss9
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.scss6
-rw-r--r--client/src/app/+videos/video-list/trending/video-trending-header.component.scss2
-rw-r--r--client/src/app/app.component.scss4
-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.scss3
-rw-r--r--client/src/app/menu/language-chooser.component.scss4
-rw-r--r--client/src/app/menu/menu.component.scss7
-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-list-table.component.scss4
-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/button-markup.component.scss4
-rw-r--r--client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.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-custom-markup/peertube-custom-tags/videos-list-markup.component.scss6
-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.scss9
-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.scss9
-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.scss4
-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.scss9
-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.scss6
-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
148 files changed, 328 insertions, 322 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 3001f45eb..80eb997e4 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 816dc22da..965c04b6c 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 a726975c7..c0b451b4e 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 1cd10ba82..41e5ff0c2 100644
--- a/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 57b3d492d..2a5ec08f5 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 d718d13bb..be9e94f69 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -1,6 +1,7 @@
1@use '_variables'; 1@use 'sass:math';
2@use '_mixins'; 2@use '_variables' as *;
3@use '_miniature'; 3@use '_mixins' as *;
4@use '_miniature' as *;
4 5
5.margin-content { 6.margin-content {
6 @include grid-videos-miniature-margins; 7 @include grid-videos-miniature-margins;
@@ -100,7 +101,7 @@ my-subscribe-button {
100 position: absolute; 101 position: absolute;
101 right: 0; 102 right: 0;
102 background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px); 103 background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
103 padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px; 104 padding: (math.div($video-thumbnail-medium-height, 2) - 10px) 15px 0 60px;
104 z-index: z(miniature) + 1; 105 z-index: z(miniature) + 1;
105 106
106 a { 107 a {
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 04fa8fb73..4c1f94024 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -1,7 +1,7 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_actor'; 3@use '_actor' as *;
4@use '_miniature'; 4@use '_miniature' as *;
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 753b0042b..bdc0f8ce1 100644
--- a/client/src/app/+admin/admin.component.scss
+++ b/client/src/app/+admin/admin.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 66c529055..5951d0aaa 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 e01c9571d..c29b20493 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 69e047700..ef24b38cc 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.scss
+++ b/client/src/app/+admin/follows/following-list/following-list.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 ef2c08957..944135c5e 100644
--- a/client/src/app/+admin/follows/follows.component.scss
+++ b/client/src/app/+admin/follows/follows.component.scss
@@ -1,4 +1,4 @@
1@use '_mixins'; 1@use '_mixins' as *;
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 21a554f2c..40083bed3 100644
--- a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss
+++ b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss
@@ -1,2 +1,2 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
index bea8bf0d7..667b4875b 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 f81a8d2f7..c96199bdb 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 e804045da..00aaf3b9c 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 8b967da3a..f52ca44ab 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss
@@ -1,4 +1,4 @@
1@use '_mixins'; 1@use '_mixins' as *;
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 a4aec81b8..921732124 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
@@ -1,4 +1,4 @@
1@use '_mixins'; 1@use '_mixins' as *;
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 52297cd00..5fa117d51 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 f4b93c72f..16b838682 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 942a9c093..41a7be021 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 265c0571f..01c6ee64d 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 3dc1ab33a..67213ea72 100644
--- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
+++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 b46e46612..7f5e861e2 100644
--- a/client/src/app/+admin/system/debug/debug.component.scss
+++ b/client/src/app/+admin/system/debug/debug.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 3261b0391..5e0075a27 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 2f7d1e111..b78f4c47f 100644
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4.logs { 4.logs {
5 font-family: monospace; 5 font-family: monospace;
diff --git a/client/src/app/+admin/system/system.component.scss b/client/src/app/+admin/system/system.component.scss
index 3ffcb67c0..18858ac1c 100644
--- a/client/src/app/+admin/system/system.component.scss
+++ b/client/src/app/+admin/system/system.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables' as *;
2@import '_mixins'; 2@use '_mixins' as *;
3 3
4.form-sub-title { 4.form-sub-title {
5 @include margin-right(30px); 5 @include margin-right(30px);
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss
index 6d1ac3566..d7932154b 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss
@@ -1,5 +1,6 @@
1@use '_variables'; 1@use 'sass:math';
2@use '_mixins'; 2@use '_variables' as *;
3@use '_mixins' as *;
3 4
4$form-base-input-width: 340px; 5$form-base-input-width: 340px;
5 6
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.scss b/client/src/app/+admin/users/user-edit/user-password.component.scss
index 1e2f3f5e8..acb680682 100644
--- a/client/src/app/+admin/users/user-edit/user-password.component.scss
+++ b/client/src/app/+admin/users/user-edit/user-password.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 a39a889dc..4f6c60f8f 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 3b2e462df..49c873cd4 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -1,8 +1,8 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use './_bootstrap-variables'; 3
4@use '~bootstrap/scss/functions'; 4@import '~bootstrap/scss/functions';
5@use '~bootstrap/scss/variables'; 5@import '~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 fcadb91ab..2a3b85c22 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 71eac701b..b0ac45e30 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 5da4c671a..788db02ad 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 10d92b80b..c46aae266 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 30f4f2ade..f955fc607 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 f35d15f93..b4a7a0a6d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 dfe3503ec..a5823fbc4 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 09d192beb..1c216d79d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 4439ecf45..1ec25315a 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 d84bfdb03..d8bfe71b6 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 e707b1c14..9ef5513b6 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 8d61cb68b..cb8507569 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 4439ecf45..1ec25315a 100644
--- a/client/src/app/+my-library/my-library.component.scss
+++ b/client/src/app/+my-library/my-library.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 9468c9c4b..27d5998d3 100644
--- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 c834bc768..296659ea0 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
@@ -1,5 +1,6 @@
1@use '_miniature'; 1@use 'sass:math';
2@use '_mixins'; 2@use '_miniature' as *;
3@use '_mixins' as *;
3 4
4.chip { 5.chip {
5 @include chip; 6 @include chip;
@@ -19,7 +20,7 @@
19 @include margin-right(0.5rem); 20 @include margin-right(0.5rem);
20 21
21 height: $image-height; 22 height: $image-height;
22 width: #{(16/9) * $image-height}; 23 width: #{math.div(16, 9) * $image-height};
23 border-radius: 2px; 24 border-radius: 2px;
24 border: 0; 25 border: 0;
25 background: transparent; 26 background: transparent;
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index b652d6774..edca06a66 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 999677f29..2fc94e23a 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 b5e1491d6..420391322 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 00bf51f32..6aaf16834 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -1,6 +1,6 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_miniature'; 3@use '_miniature' as *;
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 a61289d6f..07e50e53f 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 2e9a2703d..0eb694162 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 da364b443..6c2ef6f76 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 ffcf00877..efb81ff00 100644
--- a/client/src/app/+page-not-found/page-not-found.component.scss
+++ b/client/src/app/+page-not-found/page-not-found.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 21a554f2c..40083bed3 100644
--- a/client/src/app/+remote-interaction/remote-interaction.component.scss
+++ b/client/src/app/+remote-interaction/remote-interaction.component.scss
@@ -1,2 +1,2 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
diff --git a/client/src/app/+reset-password/reset-password.component.scss b/client/src/app/+reset-password/reset-password.component.scss
index aeb1c8bec..5494e29c6 100644
--- a/client/src/app/+reset-password/reset-password.component.scss
+++ b/client/src/app/+reset-password/reset-password.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 5e2aaaeb5..235558b3d 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 3603c3981..fca704d27 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -1,9 +1,10 @@
1@use '_variables'; 1@use 'sass:math';
2@use '_mixins'; 2@use '_variables' as *;
3@use '_mixins' as *;
3 4
4@mixin build-channel-img-size ($video-img-width) { 5@mixin build-channel-img-size ($video-img-width) {
5 $image-size: min(130px, $video-img-width); 6 $image-size: min(130px, $video-img-width);
6 $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature 7 $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature
7 8
8 @include actor-avatar-size($image-size); 9 @include actor-avatar-size($image-size);
9 10
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
index cb2f6a0a1..6a8815c77 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.scss
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@@ -1,5 +1,6 @@
1@use '_variables'; 1@use 'sass:math';
2@use '_mixins'; 2@use '_variables' as *;
3@use '_mixins' as *;
3 4
4$grey-color: #9CA3AB; 5$grey-color: #9CA3AB;
5$index-block-height: 32px; 6$index-block-height: 32px;
@@ -69,7 +70,7 @@ header {
69 70
70 .connector { 71 .connector {
71 flex: auto; 72 flex: auto;
72 margin: $index-block-height/2 10px 0 10px; 73 margin: math.div($index-block-height, 2) 10px 0 10px;
73 height: 2px; 74 height: 2px;
74 background-color: $grey-color; 75 background-color: $grey-color;
75 } 76 }
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 1e9f00629..fc7ddb0e9 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 aeb1c8bec..5494e29c6 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 5f78c13fc..588efd062 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -1,6 +1,6 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_miniature'; 3@use '_miniature' as *;
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 7a1ddafc8..d174dcd62 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -1,7 +1,7 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_actor'; 3@use '_actor' as *;
4@use '_miniature'; 4@use '_miniature' as *;
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 7461688da..4ce2c6758 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
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 b6dfa8c3e..4b1dec89a 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
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 542e7be18..97299ef32 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4.first-step-block { 4.first-step-block {
5 .torrent-or-magnet { 5 .torrent-or-magnet {
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index 382821195..e601c3dff 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4$width-size: 190px; 4$width-size: 190px;
5 5
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
index f26e95ec5..35c626ec2 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4.first-step-block { 4.first-step-block {
5 .form-group-channel { 5 .form-group-channel {
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index 3e7dc7608..dea6fde36 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4$border-width: 3px; 4$border-width: 3px;
5$border-type: solid; 5$border-type: solid;
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index 6202ed05b..fb79991db 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4$markdown-icon-height: 18px; 4$markdown-icon-height: 18px;
5$markdown-icon-width: 30px; 5$markdown-icon-width: 30px;
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
index fd2a9f86f..87e313d41 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4.root-comment { 4.root-comment {
5 font-size: 15px; 5 font-size: 15px;
diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
index af684bdc4..31aa73937 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4#highlighted-comment { 4#highlighted-comment {
5 margin-bottom: 25px; 5 margin-bottom: 25px;
diff --git a/client/src/app/+videos/+video-watch/player-styles.component.scss b/client/src/app/+videos/+video-watch/player-styles.component.scss
index 313dca701..c0befc10a 100644
--- a/client/src/app/+videos/+video-watch/player-styles.component.scss
+++ b/client/src/app/+videos/+video-watch/player-styles.component.scss
@@ -1,4 +1,5 @@
1@use 'node_modules/video.js/dist/video-js'; 1@use 'node_modules/video.js/dist/video-js';
2 2
3$assets-path: '../../assets/'; 3$assets-path: '../../assets/';
4
4@use '../../../sass/player/index'; 5@use '../../../sass/player/index';
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
index ba8032497..84ed25ae8 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4.title-page-container { 4.title-page-container {
5 display: flex; 5 display: flex;
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
index ada2780d3..1ff8fb96e 100644
--- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
@@ -1,4 +1,4 @@
1@use '_mixins'; 1@use '_mixins' as *;
2 2
3@mixin main { 3@mixin main {
4 @include actor-avatar-size(35px); 4 @include actor-avatar-size(35px);
diff --git a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
index dfbe835dd..75ed9d901 100644
--- a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
@@ -1,7 +1,7 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_bootstrap-variables'; 3@use '_bootstrap-variables';
4@use '_miniature'; 4@use '_miniature' as *;
5 5
6.playlist { 6.playlist {
7 min-width: 200px; 7 min-width: 200px;
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 13d801cc6..7b7934456 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -1,9 +1,10 @@
1@use '_variables'; 1@use 'sass:math';
2@use '_mixins'; 2@use '_variables' as *;
3@use '_mixins' as *;
3@use '_bootstrap-variables'; 4@use '_bootstrap-variables';
4@use '_miniature'; 5@use '_miniature' as *;
5 6
6$player-factor: 16/9; 7$player-factor: math.div(16, 9);
7$video-info-margin-left: 44px; 8$video-info-margin-left: 44px;
8 9
9@function getPlayerHeight ($width) { 10@function getPlayerHeight ($width) {
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index 3a895ae7b..2239d1913 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -1,6 +1,6 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_miniature'; 3@use '_miniature' as *;
4 4
5.section-title { 5.section-title {
6 // make the element span a full grid row within .videos grid 6 // make the element span a full grid row within .videos grid
diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
index df127e1cb..54b072314 100644
--- a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
+++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss
@@ -1,4 +1,4 @@
1@import '_mixins'; 1@use '_mixins' as *;
2 2
3.btn-group label { 3.btn-group label {
4 border: 1px solid transparent; 4 border: 1px solid transparent;
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 7b685655d..4a32ad2d7 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4.peertube-container { 4.peertube-container {
5 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 f7658a37d..a848d98cd 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 e335f136a..de483086b 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 d6ce6eca4..5114ec3a7 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -1,5 +1,5 @@
1@use '_mixins'; 1@use '_mixins' as *;
2@use '_variables'; 2@use '_variables' as *;
3 3
4#search-video { 4#search-video {
5 @include peertube-input-text($search-input-width); 5 @include peertube-input-text($search-input-width);
@@ -122,7 +122,7 @@ li.suggestion {
122 border-end-start-radius: 0; 122 border-end-start-radius: 0;
123 border-end-end-radius: 0; 123 border-end-end-radius: 0;
124 124
125 @include media-breakpoint-up(lg) { 125 @media screen and (min-width: 1000px) {
126 width: 500px; 126 width: 500px;
127 } 127 }
128 } 128 }
diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
index 626b87c3c..41ca34d5a 100644
--- a/client/src/app/header/suggestion.component.scss
+++ b/client/src/app/header/suggestion.component.scss
@@ -1,4 +1,5 @@
1@use '_mixins'; 1@use '_variables' as *;
2@use '_mixins' as *;
2 3
3a { 4a {
4 @include disable-default-a-behaviour; 5 @include disable-default-a-behaviour;
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index c9345fc23..04b18af33 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 ee986a66b..aad7fd5da 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -1,5 +1,6 @@
1@use '_variables'; 1@use 'sass:math';
2@use '_mixins'; 2@use '_variables' as *;
3@use '_mixins' as *;
3 4
4$menu-link-icon-size: 22px; 5$menu-link-icon-size: 22px;
5$menu-link-icon-margin-right: 18px; 6$menu-link-icon-margin-right: 18px;
@@ -220,7 +221,7 @@ my-actor-avatar {
220 221
221 a { 222 a {
222 $icon-size: 13px; 223 $icon-size: 13px;
223 $additional-margin: ($menu-link-icon-size - $icon-size) / 2; 224 $additional-margin: math.div($menu-link-icon-size - $icon-size, 2);
224 225
225 font-size: 14px; 226 font-size: 14px;
226 width: 100%; 227 width: 100%;
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index 314c2a93b..3515c3e19 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 bcd50b52e..77ea4d307 100644
--- a/client/src/app/modal/confirm.component.scss
+++ b/client/src/app/modal/confirm.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 3d6622463..15cbadfc0 100644
--- a/client/src/app/modal/custom-modal.component.scss
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -1,5 +1,5 @@
1@use '_mixins'; 1@use '_mixins' as *;
2@use '_variables'; 2@use '_variables' as *;
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 10c21c3ce..3e6c6d716 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.scss
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -1,5 +1,5 @@
1@use '_mixins'; 1@use '_mixins' as *;
2@use '_variables'; 2@use '_variables' as *;
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 f3b1610c1..242a498d0 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -1,5 +1,5 @@
1@use '_mixins'; 1@use '_mixins' as *;
2@use '_variables'; 2@use '_variables' as *;
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 047dc8ea9..37bf4cc56 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
@@ -1,6 +1,6 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_miniature'; 3@use '_miniature' as *;
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-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
index cb42fe46b..2d8acae58 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -1,5 +1,5 @@
1@import '_mixins'; 1@use '_mixins' as *;
2@import '_variables'; 2@use '_variables' as *;
3 3
4.comment-flagged-account, 4.comment-flagged-account,
5.account-flagged-handle { 5.account-flagged-handle {
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
index 419eb7fe7..d77e44a9d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 fc0454fa3..1765282c6 100644
--- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 a5a9b79d4..cc5e36a32 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 d0ea9d364..ec2de2528 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 f25251d78..c4fe5a59e 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 5601aca40..a2424b593 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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/button-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss
index f43d6b400..3e03bed89 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss
@@ -1,3 +1,3 @@
1@import '_variables'; 1@use '_variables' as *;
2@import '_mixins'; 2@use '_mixins' as *;
3 3
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
index 80c36a58b..fd84780fe 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss
@@ -1,5 +1,5 @@
1@import '_variables'; 1@use '_variables' as *;
2@import '_mixins'; 2@use '_mixins' as *;
3 3
4.channel { 4.channel {
5 padding: 20px; 5 padding: 20px;
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss
index d79be9ce8..720b676b4 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 b33784b84..1d324f948 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4my-video-miniature { 4my-video-miniature {
5 display: inline-block; 5 display: inline-block;
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
index 5a9a926fe..6cd2179c4 100644
--- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
+++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
@@ -1,6 +1,6 @@
1@import '_variables'; 1@use '_variables' as *;
2@import '_mixins'; 2@use '_mixins' as *;
3@import '_miniature'; 3@use '_miniature' as *;
4 4
5.root { 5.root {
6 @include grid-videos-miniature-layout; 6 @include grid-videos-miniature-layout;
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
index caa671bc9..07a43761c 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 ce5fa7cf5..31bf59edb 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 a5065b669..8ee8a371d 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.scss
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 99cd8ec0c..ef4236ebc 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 d15fd6cde..0b4872d46 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -1,5 +1,6 @@
1@use '_variables'; 1@use 'sass:math';
2@use '_mixins'; 2@use '_variables' as *;
3@use '_mixins' as *;
3 4
4$nav-preview-tab-height: 30px; 5$nav-preview-tab-height: 30px;
5$base-padding: 15px; 6$base-padding: 15px;
@@ -124,8 +125,8 @@ $input-border-radius: 3px;
124 @include padding-right(0); 125 @include padding-right(0);
125 @include padding-left(0); 126 @include padding-left(0);
126 127
127 padding-top: #{$nav-preview-vertical-padding / 2}; 128 padding-top: math.div($nav-preview-vertical-padding, 2);
128 padding-bottom: #{$nav-preview-vertical-padding / 2}; 129 padding-bottom: math.div($nav-preview-vertical-padding, 2);
129 position: absolute; 130 position: absolute;
130 background-color: pvar(--mainBackgroundColor); 131 background-color: pvar(--mainBackgroundColor);
131 width: 100% !important; 132 width: 100% !important;
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index d39b4f3eb..4e384e7e0 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 96141d1fe..b6cc2f007 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.scss
+++ b/client/src/app/shared/shared-forms/preview-upload.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 e766fd780..f8db1aa25 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.scss
+++ b/client/src/app/shared/shared-forms/reactive-file.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 7f512affb..d47c4f9da 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 37706d3f5..1e9b60fec 100644
--- a/client/src/app/shared/shared-forms/select/select-shared.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 b50657f0b..d2358c027 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -1,4 +1,4 @@
1@use '_variables'; 1@use '_variables' as *;
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 a08cbb988..8683ecc55 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.scss
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 1dd976e6a..be6099a97 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@@ -1,9 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use './_bootstrap-variables';
4
5@use '~bootstrap/scss/functions';
6@use '~bootstrap/scss/variables';
7 3
8.instance-name { 4.instance-name {
9 line-height: 1.7rem; 5 line-height: 1.7rem;
@@ -19,7 +15,6 @@
19.block { 15.block {
20 font-size: 15px; 16 font-size: 15px;
21 margin-bottom: 15px; 17 margin-bottom: 15px;
22 padding: 0 $btn-padding-x;
23} 18}
24 19
25ngb-accordion ::ng-deep { 20ngb-accordion ::ng-deep {
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss
index 4e0ec6beb..d8efd8cdf 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.scss
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 b15e558d1..b456eeb95 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 9fea10976..e74ba0221 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 13710c99b..a1838c485 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.scss
+++ b/client/src/app/shared/shared-main/feeds/feed.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 ef7dc872d..b88b0db6a 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.scss
+++ b/client/src/app/shared/shared-main/loaders/loader.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 3ed79d578..1427faca4 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 084fe6bfd..19c055fd3 100644
--- a/client/src/app/shared/shared-main/misc/list-overflow.component.scss
+++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3 3
4:host { 4:host {
5 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 337b0a117..173204291 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 cb024ea5e..0521165d2 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 7ebf140f3..12352b3b7 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.scss
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 468e04d77..70571bde6 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 dd68c085f..8b1239d34 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 0077eaf7f..ef822d092 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -1,6 +1,7 @@
1@use '_variables'; 1@use 'sass:math';
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_miniature'; 3@use '_variables' as *;
4@use '_miniature' as *;
4 5
5.moderation-expanded { 6.moderation-expanded {
6 font-size: 90%; 7 font-size: 90%;
@@ -82,7 +83,7 @@ my-action-dropdown.show {
82 @include margin-right(0.5rem); 83 @include margin-right(0.5rem);
83 84
84 height: $image-height; 85 height: $image-height;
85 width: #{(16/9) * $image-height}; 86 width: #{math.div(16, 9) * $image-height};
86 border-radius: 2px; 87 border-radius: 2px;
87 border: 0; 88 border: 0;
88 background: transparent; 89 background: transparent;
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
index 237c5de15..06e50ac2d 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.scss
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 8dce6dc73..e29668a23 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 81be1780e..08e072d8f 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 c5610c034..3061bbf15 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.scss
+++ b/client/src/app/shared/shared-moderation/video-block.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 76f23595f..98aab8fe8 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -1,5 +1,5 @@
1@use '_mixins'; 1@use '_mixins' as *;
2@use '_variables'; 2@use '_variables' as *;
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 4ccb75c1e..459539924 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -1,6 +1,6 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_miniature'; 3@use '_miniature' as *;
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 55a478301..2fc245ace 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 9c3dd2bdd..4b007b691 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 ee876da00..e87f43b63 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss
@@ -1,4 +1,4 @@
1@use '_mixins'; 1@use '_mixins' as *;
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 61cf023be..da8eaf646 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 931bc7269..b9008ba59 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.scss
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 f5b96c2a6..79e3c1bdf 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -1,7 +1,7 @@
1@use '_bootstrap-variables'; 1@use '_bootstrap-variables';
2@use '_variables'; 2@use '_variables' as *;
3@use '_mixins'; 3@use '_mixins' as *;
4@use '_miniature'; 4@use '_miniature' as *;
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 b17bdf79e..c986228d9 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 850a1be2a..80b418c87 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -1,6 +1,6 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_miniature'; 3@use '_miniature' as *;
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 727fa2ade..3bb375980 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 fc0d290a1..7db469d7c 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -1,5 +1,5 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
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 1f0a03831..c476b3ac1 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -1,6 +1,6 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_miniature'; 3@use '_miniature' as *;
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 eee89a373..27955cc3b 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -1,6 +1,6 @@
1@use '_variables'; 1@use '_variables' as *;
2@use '_mixins'; 2@use '_mixins' as *;
3@use '_miniature'; 3@use '_miniature' as *;
4 4
5.miniature { 5.miniature {
6 display: inline-block; 6 display: inline-block;
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-18 16:12:58 +0000