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