From 8cbc40b2fe9d36ef0505b9441276ca561342e9e9 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 27 May 2021 18:25:00 +0200 Subject: Move to sass module --- .../about-follows/about-follows.component.scss | 4 +-- .../about-instance/about-instance.component.scss | 4 +-- .../contact-admin-modal.component.scss | 4 +-- .../about-peertube-contributors.component.scss | 4 +-- .../about-peertube/about-peertube.component.scss | 4 +-- .../account-video-channels.component.scss | 9 ++--- client/src/app/+accounts/accounts.component.scss | 8 ++--- client/src/app/+admin/admin.component.scss | 4 +-- .../edit-custom-config.component.scss | 4 +-- .../followers-list/followers-list.component.scss | 4 +-- .../following-list/following-list.component.scss | 4 +-- .../src/app/+admin/follows/follows.component.scss | 2 +- .../shared/redundancy-checkbox.component.scss | 4 +-- .../video-redundancies-list.component.scss | 4 +-- .../video-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/plugin-search.component.scss | 4 +-- .../plugin-show-installed.component.scss | 4 +-- .../plugins/shared/plugin-list.component.scss | 4 +-- .../+admin/plugins/shared/toggle-plugin-type.scss | 4 +-- .../app/+admin/system/debug/debug.component.scss | 4 +-- .../src/app/+admin/system/jobs/jobs.component.scss | 4 +-- .../src/app/+admin/system/logs/logs.component.scss | 4 +-- client/src/app/+admin/system/system.component.scss | 4 +-- .../users/user-edit/user-edit.component.scss | 5 +-- .../users/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 +-- ...account-notification-preferences.component.scss | 4 +-- .../my-account-profile.component.scss | 4 +-- .../my-account-settings.component.scss | 4 +-- .../src/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 +-- .../src/app/+my-library/my-library.component.scss | 4 +-- .../my-accept-ownership.component.scss | 4 +-- .../my-ownership/my-ownership.component.scss | 7 ++-- .../my-subscriptions.component.scss | 4 +-- .../my-video-imports.component.scss | 4 +-- .../my-video-playlist-edit.component.scss | 4 +-- .../my-video-playlist-elements.component.scss | 6 ++-- .../my-video-playlists.component.scss | 4 +-- .../modals/video-change-ownership.component.scss | 4 +-- .../+my-library/my-videos/my-videos.component.scss | 4 +-- .../+page-not-found/page-not-found.component.scss | 4 +-- .../remote-interaction.component.scss | 4 +-- .../+reset-password/reset-password.component.scss | 4 +-- .../src/app/+search/search-filters.component.scss | 4 +-- client/src/app/+search/search.component.scss | 7 ++-- .../+register/custom-stepper.component.scss | 7 ++-- .../app/+signup/+register/register.component.scss | 4 +-- .../verify-account-ask-send-email.component.scss | 4 +-- .../video-channel-playlists.component.scss | 6 ++-- .../+video-channels/video-channels.component.scss | 8 ++--- .../shared/video-caption-add-modal.component.scss | 4 +-- .../+video-edit/shared/video-edit.component.scss | 4 +-- .../video-import-torrent.component.scss | 4 +-- .../video-add-components/video-send.scss | 4 +-- .../video-upload.component.scss | 4 +-- .../+videos/+video-edit/video-add.component.scss | 4 +-- .../comment/video-comment-add.component.scss | 4 +-- .../comment/video-comment.component.scss | 4 +-- .../comment/video-comments.component.scss | 4 +-- .../+video-watch/player-styles.component.scss | 1 + .../recommended-videos.component.scss | 4 +-- .../video-avatar-channel.component.scss | 2 +- .../video-watch-playlist.component.scss | 6 ++-- .../+video-watch/video-watch.component.scss | 9 ++--- .../overview/video-overview.component.scss | 6 ++-- .../trending/video-trending-header.component.scss | 2 +- client/src/app/app.component.scss | 4 +-- client/src/app/core/hotkeys/hotkeys.component.scss | 4 +-- client/src/app/header/header.component.scss | 4 +-- .../src/app/header/search-typeahead.component.scss | 6 ++-- client/src/app/header/suggestion.component.scss | 3 +- .../src/app/menu/language-chooser.component.scss | 4 +-- client/src/app/menu/menu.component.scss | 7 ++-- client/src/app/menu/notification.component.scss | 4 +-- client/src/app/modal/confirm.component.scss | 4 +-- client/src/app/modal/custom-modal.component.scss | 4 +-- .../instance-config-warning-modal.component.scss | 4 +-- client/src/app/modal/welcome-modal.component.scss | 4 +-- .../shared-abuse-list/abuse-details.component.scss | 6 ++-- .../abuse-list-table.component.scss | 4 +-- .../abuse-message-modal.component.scss | 4 +-- .../moderation-comment-modal.component.scss | 4 +-- .../actor-avatar-edit.component.scss | 4 +-- .../actor-banner-edit.component.scss | 4 +-- .../shared-actor-image-edit/actor-image-edit.scss | 4 +-- .../shared-actor-image/actor-avatar.component.scss | 4 +-- .../button-markup.component.scss | 4 +-- .../channel-miniature-markup.component.scss | 4 +-- .../playlist-miniature-markup.component.scss | 4 +-- .../video-miniature-markup.component.scss | 4 +-- .../videos-list-markup.component.scss | 6 ++-- .../advanced-input-filter.component.scss | 4 +-- .../shared-forms/dynamic-form-field.component.scss | 4 +-- .../shared-forms/input-switch.component.scss | 4 +-- .../input-toggle-hidden.component.scss | 4 +-- .../shared-forms/markdown-textarea.component.scss | 9 ++--- .../shared-forms/peertube-checkbox.component.scss | 4 +-- .../shared-forms/preview-upload.component.scss | 4 +-- .../shared-forms/reactive-file.component.scss | 4 +-- .../select/select-checkbox.component.scss | 4 +-- .../select/select-shared.component.scss | 4 +-- .../shared-forms/timestamp-input.component.scss | 2 +- .../shared-instance/feature-boolean.component.scss | 4 +-- .../instance-about-accordion.component.scss | 9 ++--- .../instance-features-table.component.scss | 4 +-- .../buttons/action-dropdown.component.scss | 4 +-- .../shared-main/buttons/button.component.scss | 4 +-- .../shared/shared-main/feeds/feed.component.scss | 4 +-- .../shared-main/loaders/loader.component.scss | 4 +-- .../shared/shared-main/misc/help.component.scss | 4 +-- .../shared-main/misc/list-overflow.component.scss | 4 +-- .../misc/simple-search-input.component.scss | 4 +-- .../misc/top-menu-dropdown.component.scss | 4 +-- .../users/user-notifications.component.scss | 4 +-- .../shared-main/users/user-quota.component.scss | 4 +-- .../account-blocklist.component.scss | 4 +-- .../app/shared/shared-moderation/moderation.scss | 9 ++--- .../report-modals/report.component.scss | 4 +-- .../server-blocklist.component.scss | 4 +-- .../user-ban-modal.component.scss | 4 +-- .../shared-moderation/video-block.component.scss | 4 +-- .../shared-share-modal/video-share.component.scss | 4 +-- .../video-thumbnail.component.scss | 6 ++-- .../user-interface-settings.component.scss | 4 +-- .../user-video-settings.component.scss | 4 +-- .../remote-subscribe.component.scss | 2 +- .../subscribe-button.component.scss | 4 +-- .../live-stream-information.component.scss | 4 +-- .../abstract-video-list.scss | 6 ++-- .../video-download.component.scss | 4 +-- .../video-miniature.component.scss | 6 ++-- .../videos-selection.component.scss | 4 +-- .../video-add-to-playlist.component.scss | 4 +-- ...video-playlist-element-miniature.component.scss | 6 ++-- .../video-playlist-miniature.component.scss | 6 ++-- client/src/sass/application.scss | 5 ++- client/src/sass/bootstrap.scss | 33 ++++++++++++++++-- client/src/sass/classes.scss | 4 +-- client/src/sass/include/_actor.scss | 3 +- client/src/sass/include/_bootstrap.scss | 40 ---------------------- client/src/sass/include/_miniature.scss | 4 +-- client/src/sass/include/_mixins.scss | 11 +++--- client/src/sass/include/_variables.scss | 4 +-- client/src/sass/ng-select.scss | 3 +- client/src/sass/player/bezels.scss | 2 ++ client/src/sass/player/context-menu.scss | 6 ++-- client/src/sass/player/mobile.scss | 4 +-- client/src/sass/player/peertube-skin.scss | 14 ++++---- client/src/sass/player/playlist.scss | 4 +++ client/src/sass/player/settings-menu.scss | 6 ++-- client/src/sass/player/spinner.scss | 4 +-- client/src/sass/player/stats.scss | 6 ++-- client/src/sass/player/upnext.scss | 8 ++--- client/src/sass/primeng-custom.scss | 28 +++++++-------- client/src/standalone/videos/embed.scss | 8 ++--- client/src/standalone/videos/test-embed.scss | 4 +-- 169 files changed, 425 insertions(+), 426 deletions(-) delete mode 100644 client/src/sass/include/_bootstrap.scss (limited to 'client') diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss index 3001f45eb..80eb997e4 100644 --- a/client/src/app/+about/about-follows/about-follows.component.scss +++ b/client/src/app/+about/about-follows/about-follows.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .subtitle { font-size: 18px; diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss index 816dc22da..965c04b6c 100644 --- a/client/src/app/+about/about-instance/about-instance.component.scss +++ b/client/src/app/+about/about-instance/about-instance.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .about-instance-title { display: flex; diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss index a726975c7..c0b451b4e 100644 --- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .modal-body { text-align: left; diff --git a/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss index 1cd10ba82..41e5ff0c2 100644 --- a/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss +++ b/client/src/app/+about/about-peertube/about-peertube-contributors.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .peertube-contributors { .framasoft { diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss index 57b3d492d..2a5ec08f5 100644 --- a/client/src/app/+about/about-peertube/about-peertube.component.scss +++ b/client/src/app/+about/about-peertube/about-peertube.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .root { max-width: 1200px; diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss index d718d13bb..be9e94f69 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss @@ -1,6 +1,7 @@ -@use '_variables'; -@use '_mixins'; -@use '_miniature'; +@use 'sass:math'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; .margin-content { @include grid-videos-miniature-margins; @@ -100,7 +101,7 @@ my-subscribe-button { position: absolute; right: 0; background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px); - padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px; + padding: (math.div($video-thumbnail-medium-height, 2) - 10px) 15px 0 60px; z-index: z(miniature) + 1; a { diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index 04fa8fb73..4c1f94024 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss @@ -1,7 +1,7 @@ -@use '_variables'; -@use '_mixins'; -@use '_actor'; -@use '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_actor' as *; +@use '_miniature' as *; .root { --myGlobalTopPadding: 60px; diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss index 753b0042b..bdc0f8ce1 100644 --- a/client/src/app/+admin/admin.component.scss +++ b/client/src/app/+admin/admin.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; my-top-menu-dropdown { flex-grow: 1; diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss index 66c529055..5951d0aaa 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; $form-base-input-width: 340px; diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss index e01c9571d..c29b20493 100644 --- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; a { @include disable-default-a-behaviour; diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss index 69e047700..ef24b38cc 100644 --- a/client/src/app/+admin/follows/following-list/following-list.component.scss +++ b/client/src/app/+admin/follows/following-list/following-list.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; a { @include disable-default-a-behaviour; diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss index ef2c08957..944135c5e 100644 --- a/client/src/app/+admin/follows/follows.component.scss +++ b/client/src/app/+admin/follows/follows.component.scss @@ -1,4 +1,4 @@ -@use '_mixins'; +@use '_mixins' as *; .form-sub-title { @include margin-right(30px); diff --git a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss index 21a554f2c..40083bed3 100644 --- a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss +++ b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss @@ -1,2 +1,2 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss index bea8bf0d7..667b4875b 100644 --- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss +++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; a { @include disable-default-a-behaviour; diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss index f81a8d2f7..c96199bdb 100644 --- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss +++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .label { display: inline-block; diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss index e804045da..00aaf3b9c 100644 --- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss +++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .unblock-button { @include peertube-button; diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss index 8b967da3a..f52ca44ab 100644 --- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss +++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss @@ -1,4 +1,4 @@ -@use '_mixins'; +@use '_mixins' as *; my-global-icon { width: 24px; diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss index a4aec81b8..921732124 100644 --- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss +++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss @@ -1,4 +1,4 @@ -@use '_mixins'; +@use '_mixins' as *; my-feed { @include margin-left(5px); diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss index 52297cd00..5fa117d51 100644 --- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss +++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .update-button[disabled=true] ::ng-deep .action-button { cursor: default !important; diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss index f4b93c72f..16b838682 100644 --- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss +++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .search-bar { display: flex; diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss index 942a9c093..41a7be021 100644 --- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss +++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; h2 { margin-bottom: 20px; diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss index 265c0571f..01c6ee64d 100644 --- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss +++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .plugin { margin: 15px 0; diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss index 3dc1ab33a..67213ea72 100644 --- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss +++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .toggle-plugin-type { display: flex; diff --git a/client/src/app/+admin/system/debug/debug.component.scss b/client/src/app/+admin/system/debug/debug.component.scss index b46e46612..7f5e861e2 100644 --- a/client/src/app/+admin/system/debug/debug.component.scss +++ b/client/src/app/+admin/system/debug/debug.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .root { font-size: 15px; diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss index 3261b0391..5e0075a27 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.scss +++ b/client/src/app/+admin/system/jobs/jobs.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .select-job-state { min-width: 120px; diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss index 2f7d1e111..b78f4c47f 100644 --- a/client/src/app/+admin/system/logs/logs.component.scss +++ b/client/src/app/+admin/system/logs/logs.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .logs { font-family: monospace; diff --git a/client/src/app/+admin/system/system.component.scss b/client/src/app/+admin/system/system.component.scss index 3ffcb67c0..18858ac1c 100644 --- a/client/src/app/+admin/system/system.component.scss +++ b/client/src/app/+admin/system/system.component.scss @@ -1,5 +1,5 @@ -@import '_variables'; -@import '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .form-sub-title { @include margin-right(30px); diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss index 6d1ac3566..d7932154b 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.scss +++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss @@ -1,5 +1,6 @@ -@use '_variables'; -@use '_mixins'; +@use 'sass:math'; +@use '_variables' as *; +@use '_mixins' as *; $form-base-input-width: 340px; diff --git a/client/src/app/+admin/users/user-edit/user-password.component.scss b/client/src/app/+admin/users/user-edit/user-password.component.scss index 1e2f3f5e8..acb680682 100644 --- a/client/src/app/+admin/users/user-edit/user-password.component.scss +++ b/client/src/app/+admin/users/user-edit/user-password.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; input:not([type=submit]):not([type=checkbox]) { @include peertube-input-text(340px); diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss index a39a889dc..4f6c60f8f 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/users/user-list/user-list.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .add-button { @include create-button; diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss index 3b2e462df..49c873cd4 100644 --- a/client/src/app/+login/login.component.scss +++ b/client/src/app/+login/login.component.scss @@ -1,8 +1,8 @@ -@use '_variables'; -@use '_mixins'; -@use './_bootstrap-variables'; -@use '~bootstrap/scss/functions'; -@use '~bootstrap/scss/variables'; +@use '_variables' as *; +@use '_mixins' as *; + +@import '~bootstrap/scss/functions'; +@import '~bootstrap/scss/variables'; label { display: block; diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss index fcadb91ab..2a3b85c22 100644 --- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss +++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; label { font-weight: $font-regular; diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss index 71eac701b..b0ac45e30 100644 --- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss +++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .header { display: flex; diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss index 5da4c671a..788db02ad 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; label { font-weight: $font-regular; diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss index 10d92b80b..c46aae266 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; label { font-weight: $font-regular; diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss index 30f4f2ade..f955fc607 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .delete-me { button { diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss index f35d15f93..b4a7a0a6d 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .custom-row { display: flex; diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss index dfe3503ec..a5823fbc4 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; label { font-weight: $font-regular; diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss index 09d192beb..1c216d79d 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .account-title { @include settings-big-title; diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss index 4439ecf45..1ec25315a 100644 --- a/client/src/app/+my-account/my-account.component.scss +++ b/client/src/app/+my-account/my-account.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .row { @include sub-menu-h1; diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss index d84bfdb03..d8bfe71b6 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss +++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; label { font-weight: $font-regular; diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss index e707b1c14..9ef5513b6 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; h1 my-global-icon { position: relative; diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss index 8d61cb68b..cb8507569 100644 --- a/client/src/app/+my-library/my-history/my-history.component.scss +++ b/client/src/app/+my-library/my-history/my-history.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .no-history { display: flex; diff --git a/client/src/app/+my-library/my-library.component.scss b/client/src/app/+my-library/my-library.component.scss index 4439ecf45..1ec25315a 100644 --- a/client/src/app/+my-library/my-library.component.scss +++ b/client/src/app/+my-library/my-library.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .row { @include sub-menu-h1; diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss index 9468c9c4b..27d5998d3 100644 --- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss +++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .peertube-select-container { @include peertube-select-container(350px); diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss index c834bc768..296659ea0 100644 --- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss +++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss @@ -1,5 +1,6 @@ -@use '_miniature'; -@use '_mixins'; +@use 'sass:math'; +@use '_miniature' as *; +@use '_mixins' as *; .chip { @include chip; @@ -19,7 +20,7 @@ @include margin-right(0.5rem); height: $image-height; - width: #{(16/9) * $image-height}; + width: #{math.div(16, 9) * $image-height}; border-radius: 2px; border: 0; background: transparent; diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss index b652d6774..edca06a66 100644 --- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss +++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; input[type=text] { @include peertube-input-text(300px); diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss index 999677f29..2fc94e23a 100644 --- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss +++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; pre { font-size: 11px; diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss index b5e1491d6..420391322 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; label { font-weight: $font-regular; diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss index 00bf51f32..6aaf16834 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss @@ -1,6 +1,6 @@ -@use '_variables'; -@use '_mixins'; -@use '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; .root { display: grid; diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss index a61289d6f..07e50e53f 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; h1 { display: flex; diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss index 2e9a2703d..0eb694162 100644 --- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss +++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; p-autocomplete { display: block; diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss index da364b443..6c2ef6f76 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.scss +++ b/client/src/app/+my-library/my-videos/my-videos.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; input[type=text] { @include peertube-input-text(300px); diff --git a/client/src/app/+page-not-found/page-not-found.component.scss b/client/src/app/+page-not-found/page-not-found.component.scss index ffcf00877..efb81ff00 100644 --- a/client/src/app/+page-not-found/page-not-found.component.scss +++ b/client/src/app/+page-not-found/page-not-found.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .root { @include margin-left(auto); diff --git a/client/src/app/+remote-interaction/remote-interaction.component.scss b/client/src/app/+remote-interaction/remote-interaction.component.scss index 21a554f2c..40083bed3 100644 --- a/client/src/app/+remote-interaction/remote-interaction.component.scss +++ b/client/src/app/+remote-interaction/remote-interaction.component.scss @@ -1,2 +1,2 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; diff --git a/client/src/app/+reset-password/reset-password.component.scss b/client/src/app/+reset-password/reset-password.component.scss index aeb1c8bec..5494e29c6 100644 --- a/client/src/app/+reset-password/reset-password.component.scss +++ b/client/src/app/+reset-password/reset-password.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; input:not([type=submit]) { @include peertube-input-text(340px); diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss index 5e2aaaeb5..235558b3d 100644 --- a/client/src/app/+search/search-filters.component.scss +++ b/client/src/app/+search/search-filters.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; form { margin-top: 40px; diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss index 3603c3981..fca704d27 100644 --- a/client/src/app/+search/search.component.scss +++ b/client/src/app/+search/search.component.scss @@ -1,9 +1,10 @@ -@use '_variables'; -@use '_mixins'; +@use 'sass:math'; +@use '_variables' as *; +@use '_mixins' as *; @mixin build-channel-img-size ($video-img-width) { $image-size: min(130px, $video-img-width); - $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature + $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width than the video miniature @include actor-avatar-size($image-size); diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss index cb2f6a0a1..6a8815c77 100644 --- a/client/src/app/+signup/+register/custom-stepper.component.scss +++ b/client/src/app/+signup/+register/custom-stepper.component.scss @@ -1,5 +1,6 @@ -@use '_variables'; -@use '_mixins'; +@use 'sass:math'; +@use '_variables' as *; +@use '_mixins' as *; $grey-color: #9CA3AB; $index-block-height: 32px; @@ -69,7 +70,7 @@ header { .connector { flex: auto; - margin: $index-block-height/2 10px 0 10px; + margin: math.div($index-block-height, 2) 10px 0 10px; height: 2px; background-color: $grey-color; } diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss index 1e9f00629..fc7ddb0e9 100644 --- a/client/src/app/+signup/+register/register.component.scss +++ b/client/src/app/+signup/+register/register.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .alert { font-size: 15px; diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss index aeb1c8bec..5494e29c6 100644 --- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss +++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; input:not([type=submit]) { @include peertube-input-text(340px); diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss index 5f78c13fc..588efd062 100644 --- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss +++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss @@ -1,6 +1,6 @@ -@use '_variables'; -@use '_mixins'; -@use '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; .playlists { display: flex; diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index 7a1ddafc8..d174dcd62 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -1,7 +1,7 @@ -@use '_variables'; -@use '_mixins'; -@use '_actor'; -@use '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_actor' as *; +@use '_miniature' as *; .root { --myGlobalTopPadding: 60px; diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss index 7461688da..4ce2c6758 100644 --- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss +++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; label { font-weight: $font-regular; diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss index b6dfa8c3e..4b1dec89a 100644 --- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; label, my-dynamic-form-field ::ng-deep label { diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss index 542e7be18..97299ef32 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss +++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .first-step-block { .torrent-or-magnet { diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss index 382821195..e601c3dff 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss +++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; $width-size: 190px; diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss index f26e95ec5..35c626ec2 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss +++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .first-step-block { .form-group-channel { diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss index 3e7dc7608..dea6fde36 100644 --- a/client/src/app/+videos/+video-edit/video-add.component.scss +++ b/client/src/app/+videos/+video-edit/video-add.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; $border-width: 3px; $border-type: solid; diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss index 6202ed05b..fb79991db 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; $markdown-icon-height: 18px; $markdown-icon-width: 30px; diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss index fd2a9f86f..87e313d41 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .root-comment { font-size: 15px; diff --git a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss index af684bdc4..31aa73937 100644 --- a/client/src/app/+videos/+video-watch/comment/video-comments.component.scss +++ b/client/src/app/+videos/+video-watch/comment/video-comments.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; #highlighted-comment { margin-bottom: 25px; diff --git a/client/src/app/+videos/+video-watch/player-styles.component.scss b/client/src/app/+videos/+video-watch/player-styles.component.scss index 313dca701..c0befc10a 100644 --- a/client/src/app/+videos/+video-watch/player-styles.component.scss +++ b/client/src/app/+videos/+video-watch/player-styles.component.scss @@ -1,4 +1,5 @@ @use 'node_modules/video.js/dist/video-js'; $assets-path: '../../assets/'; + @use '../../../sass/player/index'; diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss index ba8032497..84ed25ae8 100644 --- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss +++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .title-page-container { display: flex; diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss index ada2780d3..1ff8fb96e 100644 --- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss +++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.scss @@ -1,4 +1,4 @@ -@use '_mixins'; +@use '_mixins' as *; @mixin main { @include actor-avatar-size(35px); diff --git a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss index dfbe835dd..75ed9d901 100644 --- a/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch-playlist.component.scss @@ -1,7 +1,7 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; @use '_bootstrap-variables'; -@use '_miniature'; +@use '_miniature' as *; .playlist { min-width: 200px; diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss index 13d801cc6..7b7934456 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss @@ -1,9 +1,10 @@ -@use '_variables'; -@use '_mixins'; +@use 'sass:math'; +@use '_variables' as *; +@use '_mixins' as *; @use '_bootstrap-variables'; -@use '_miniature'; +@use '_miniature' as *; -$player-factor: 16/9; +$player-factor: math.div(16, 9); $video-info-margin-left: 44px; @function getPlayerHeight ($width) { diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss index 3a895ae7b..2239d1913 100644 --- a/client/src/app/+videos/video-list/overview/video-overview.component.scss +++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss @@ -1,6 +1,6 @@ -@use '_variables'; -@use '_mixins'; -@use '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; .section-title { // make the element span a full grid row within .videos grid diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss index df127e1cb..54b072314 100644 --- a/client/src/app/+videos/video-list/trending/video-trending-header.component.scss +++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.scss @@ -1,4 +1,4 @@ -@import '_mixins'; +@use '_mixins' as *; .btn-group label { border: 1px solid transparent; diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 7b685655d..4a32ad2d7 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .peertube-container { padding-bottom: 20px; diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss index f7658a37d..a848d98cd 100644 --- a/client/src/app/core/hotkeys/hotkeys.component.scss +++ b/client/src/app/core/hotkeys/hotkeys.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .cfp-hotkeys-container { display: flex !important; diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index e335f136a..de483086b 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; my-search-typeahead { @include margin-right(15px); diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index d6ce6eca4..5114ec3a7 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss @@ -1,5 +1,5 @@ -@use '_mixins'; -@use '_variables'; +@use '_mixins' as *; +@use '_variables' as *; #search-video { @include peertube-input-text($search-input-width); @@ -122,7 +122,7 @@ li.suggestion { border-end-start-radius: 0; border-end-end-radius: 0; - @include media-breakpoint-up(lg) { + @media screen and (min-width: 1000px) { width: 500px; } } diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss index 626b87c3c..41ca34d5a 100644 --- a/client/src/app/header/suggestion.component.scss +++ b/client/src/app/header/suggestion.component.scss @@ -1,4 +1,5 @@ -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; a { @include disable-default-a-behaviour; diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss index c9345fc23..04b18af33 100644 --- a/client/src/app/menu/language-chooser.component.scss +++ b/client/src/app/menu/language-chooser.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .help-to-translate { @include peertube-button-link; diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index ee986a66b..aad7fd5da 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -1,5 +1,6 @@ -@use '_variables'; -@use '_mixins'; +@use 'sass:math'; +@use '_variables' as *; +@use '_mixins' as *; $menu-link-icon-size: 22px; $menu-link-icon-margin-right: 18px; @@ -220,7 +221,7 @@ my-actor-avatar { a { $icon-size: 13px; - $additional-margin: ($menu-link-icon-size - $icon-size) / 2; + $additional-margin: math.div($menu-link-icon-size - $icon-size, 2); font-size: 14px; width: 100%; diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss index 314c2a93b..3515c3e19 100644 --- a/client/src/app/menu/notification.component.scss +++ b/client/src/app/menu/notification.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .content { scrollbar-color: auto; diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss index bcd50b52e..77ea4d307 100644 --- a/client/src/app/modal/confirm.component.scss +++ b/client/src/app/modal/confirm.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .modal-body { font-size: 15px; diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss index 3d6622463..15cbadfc0 100644 --- a/client/src/app/modal/custom-modal.component.scss +++ b/client/src/app/modal/custom-modal.component.scss @@ -1,5 +1,5 @@ -@use '_mixins'; -@use '_variables'; +@use '_mixins' as *; +@use '_variables' as *; .modal-body { font-size: 15px; diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss index 10c21c3ce..3e6c6d716 100644 --- a/client/src/app/modal/instance-config-warning-modal.component.scss +++ b/client/src/app/modal/instance-config-warning-modal.component.scss @@ -1,5 +1,5 @@ -@use '_mixins'; -@use '_variables'; +@use '_mixins' as *; +@use '_variables' as *; .modal-body { font-size: 15px; diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss index f3b1610c1..242a498d0 100644 --- a/client/src/app/modal/welcome-modal.component.scss +++ b/client/src/app/modal/welcome-modal.component.scss @@ -1,5 +1,5 @@ -@use '_mixins'; -@use '_variables'; +@use '_mixins' as *; +@use '_variables' as *; .modal-body { font-size: 15px; diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss index 047dc8ea9..37bf4cc56 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss +++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss @@ -1,6 +1,6 @@ -@use '_variables'; -@use '_mixins'; -@use '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; .comment-html { background-color: #ececec; diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss index cb42fe46b..2d8acae58 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss +++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss @@ -1,5 +1,5 @@ -@import '_mixins'; -@import '_variables'; +@use '_mixins' as *; +@use '_variables' as *; .comment-flagged-account, .account-flagged-handle { diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss index 419eb7fe7..d77e44a9d 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; form { margin: 20px 20px 0 0; diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss index fc0454fa3..1765282c6 100644 --- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss +++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; textarea { @include peertube-textarea(100%, 100px); diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss index a5a9b79d4..cc5e36a32 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .actor { display: flex; diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss index d0ea9d364..ec2de2528 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss +++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .banner-placeholder { @include block-ratio('> div, > img', $banner-inverted-ratio); diff --git a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss index f25251d78..c4fe5a59e 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss +++ b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .actor ::ng-deep .popover-image-info .popover-body { padding: 0; diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss index 5601aca40..a2424b593 100644 --- a/client/src/app/shared/shared-actor-image/actor-avatar.component.scss +++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .avatar { --avatarSize: 100%; diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss index f43d6b400..3e03bed89 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.scss @@ -1,3 +1,3 @@ -@import '_variables'; -@import '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss index 80c36a58b..fd84780fe 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.scss @@ -1,5 +1,5 @@ -@import '_variables'; -@import '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .channel { padding: 20px; diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss index d79be9ce8..720b676b4 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; my-video-playlist-miniature { display: inline-block; diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss index b33784b84..1d324f948 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; my-video-miniature { display: inline-block; diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss index 5a9a926fe..6cd2179c4 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss @@ -1,6 +1,6 @@ -@import '_variables'; -@import '_mixins'; -@import '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; .root { @include grid-videos-miniature-layout; diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss index caa671bc9..07a43761c 100644 --- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss +++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; input { @include peertube-input-text(250px); diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss index ce5fa7cf5..31bf59edb 100644 --- a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss +++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; input:not([type=submit]) { @include peertube-input-text(340px); diff --git a/client/src/app/shared/shared-forms/input-switch.component.scss b/client/src/app/shared/shared-forms/input-switch.component.scss index a5065b669..8ee8a371d 100644 --- a/client/src/app/shared/shared-forms/input-switch.component.scss +++ b/client/src/app/shared/shared-forms/input-switch.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; input { position: absolute; diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss index 99cd8ec0c..ef4236ebc 100644 --- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss +++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; input { @include peertube-input-text(auto); diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss index d15fd6cde..0b4872d46 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss @@ -1,5 +1,6 @@ -@use '_variables'; -@use '_mixins'; +@use 'sass:math'; +@use '_variables' as *; +@use '_mixins' as *; $nav-preview-tab-height: 30px; $base-padding: 15px; @@ -124,8 +125,8 @@ $input-border-radius: 3px; @include padding-right(0); @include padding-left(0); - padding-top: #{$nav-preview-vertical-padding / 2}; - padding-bottom: #{$nav-preview-vertical-padding / 2}; + padding-top: math.div($nav-preview-vertical-padding, 2); + padding-bottom: math.div($nav-preview-vertical-padding, 2); position: absolute; background-color: pvar(--mainBackgroundColor); width: 100% !important; diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss index d39b4f3eb..4e384e7e0 100644 --- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss +++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .root { display: flex; diff --git a/client/src/app/shared/shared-forms/preview-upload.component.scss b/client/src/app/shared/shared-forms/preview-upload.component.scss index 96141d1fe..b6cc2f007 100644 --- a/client/src/app/shared/shared-forms/preview-upload.component.scss +++ b/client/src/app/shared/shared-forms/preview-upload.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .root { height: auto; diff --git a/client/src/app/shared/shared-forms/reactive-file.component.scss b/client/src/app/shared/shared-forms/reactive-file.component.scss index e766fd780..f8db1aa25 100644 --- a/client/src/app/shared/shared-forms/reactive-file.component.scss +++ b/client/src/app/shared/shared-forms/reactive-file.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .root { height: auto; diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss index 7f512affb..d47c4f9da 100644 --- a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss +++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; ng-select ::ng-deep { .ng-option { diff --git a/client/src/app/shared/shared-forms/select/select-shared.component.scss b/client/src/app/shared/shared-forms/select/select-shared.component.scss index 37706d3f5..1e9b60fec 100644 --- a/client/src/app/shared/shared-forms/select/select-shared.component.scss +++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; $form-base-input-width: auto; diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss index b50657f0b..d2358c027 100644 --- a/client/src/app/shared/shared-forms/timestamp-input.component.scss +++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss @@ -1,4 +1,4 @@ -@use '_variables'; +@use '_variables' as *; p-inputmask { ::ng-deep input { diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.scss b/client/src/app/shared/shared-instance/feature-boolean.component.scss index a08cbb988..8683ecc55 100644 --- a/client/src/app/shared/shared-instance/feature-boolean.component.scss +++ b/client/src/app/shared/shared-instance/feature-boolean.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .glyphicon-ok { color: $green; diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss index 1dd976e6a..be6099a97 100644 --- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss @@ -1,9 +1,5 @@ -@use '_variables'; -@use '_mixins'; -@use './_bootstrap-variables'; - -@use '~bootstrap/scss/functions'; -@use '~bootstrap/scss/variables'; +@use '_variables' as *; +@use '_mixins' as *; .instance-name { line-height: 1.7rem; @@ -19,7 +15,6 @@ .block { font-size: 15px; margin-bottom: 15px; - padding: 0 $btn-padding-x; } ngb-accordion ::ng-deep { diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss index 4e0ec6beb..d8efd8cdf 100644 --- a/client/src/app/shared/shared-instance/instance-features-table.component.scss +++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; table { font-size: 14px; diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss index b15e558d1..b456eeb95 100644 --- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss +++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .dropdown-divider:last-child { display: none; diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss index 9fea10976..e74ba0221 100644 --- a/client/src/app/shared/shared-main/buttons/button.component.scss +++ b/client/src/app/shared/shared-main/buttons/button.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; @mixin responsive-label { .action-button { diff --git a/client/src/app/shared/shared-main/feeds/feed.component.scss b/client/src/app/shared/shared-main/feeds/feed.component.scss index 13710c99b..a1838c485 100644 --- a/client/src/app/shared/shared-main/feeds/feed.component.scss +++ b/client/src/app/shared/shared-main/feeds/feed.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .feed { width: 100%; diff --git a/client/src/app/shared/shared-main/loaders/loader.component.scss b/client/src/app/shared/shared-main/loaders/loader.component.scss index ef7dc872d..b88b0db6a 100644 --- a/client/src/app/shared/shared-main/loaders/loader.component.scss +++ b/client/src/app/shared/shared-main/loaders/loader.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; // Thanks to https://loading.io/css/ (CC0 License) diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss index 3ed79d578..1427faca4 100644 --- a/client/src/app/shared/shared-main/misc/help.component.scss +++ b/client/src/app/shared/shared-main/misc/help.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .help-tooltip-button { @include disable-outline; diff --git a/client/src/app/shared/shared-main/misc/list-overflow.component.scss b/client/src/app/shared/shared-main/misc/list-overflow.component.scss index 084fe6bfd..19c055fd3 100644 --- a/client/src/app/shared/shared-main/misc/list-overflow.component.scss +++ b/client/src/app/shared/shared-main/misc/list-overflow.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; :host { width: 100%; diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss index 337b0a117..173204291 100644 --- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .root { display: flex; diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss index cb024ea5e..0521165d2 100644 --- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss +++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .parent-entry { span[role=button] { diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.scss b/client/src/app/shared/shared-main/users/user-notifications.component.scss index 7ebf140f3..12352b3b7 100644 --- a/client/src/app/shared/shared-main/users/user-notifications.component.scss +++ b/client/src/app/shared/shared-main/users/user-notifications.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .no-notification { display: flex; diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss index 468e04d77..70571bde6 100644 --- a/client/src/app/shared/shared-main/users/user-quota.component.scss +++ b/client/src/app/shared/shared-main/users/user-quota.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; label { font-weight: $font-regular; diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.scss b/client/src/app/shared/shared-moderation/account-blocklist.component.scss index dd68c085f..8b1239d34 100644 --- a/client/src/app/shared/shared-moderation/account-blocklist.component.scss +++ b/client/src/app/shared/shared-moderation/account-blocklist.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .chip { @include chip; diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss index 0077eaf7f..ef822d092 100644 --- a/client/src/app/shared/shared-moderation/moderation.scss +++ b/client/src/app/shared/shared-moderation/moderation.scss @@ -1,6 +1,7 @@ -@use '_variables'; -@use '_mixins'; -@use '_miniature'; +@use 'sass:math'; +@use '_mixins' as *; +@use '_variables' as *; +@use '_miniature' as *; .moderation-expanded { font-size: 90%; @@ -82,7 +83,7 @@ my-action-dropdown.show { @include margin-right(0.5rem); height: $image-height; - width: #{(16/9) * $image-height}; + width: #{math.div(16, 9) * $image-height}; border-radius: 2px; border: 0; background: transparent; diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss index 237c5de15..06e50ac2d 100644 --- a/client/src/app/shared/shared-moderation/report-modals/report.component.scss +++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .information { margin-bottom: 20px; diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.scss b/client/src/app/shared/shared-moderation/server-blocklist.component.scss index 8dce6dc73..e29668a23 100644 --- a/client/src/app/shared/shared-moderation/server-blocklist.component.scss +++ b/client/src/app/shared/shared-moderation/server-blocklist.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; a { @include disable-default-a-behaviour; diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss index 81be1780e..08e072d8f 100644 --- a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss +++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; textarea { @include peertube-textarea(100%, 60px); diff --git a/client/src/app/shared/shared-moderation/video-block.component.scss b/client/src/app/shared/shared-moderation/video-block.component.scss index c5610c034..3061bbf15 100644 --- a/client/src/app/shared/shared-moderation/video-block.component.scss +++ b/client/src/app/shared/shared-moderation/video-block.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; textarea { @include peertube-textarea(100%, 100px); diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss index 76f23595f..98aab8fe8 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.scss +++ b/client/src/app/shared/shared-share-modal/video-share.component.scss @@ -1,5 +1,5 @@ -@use '_mixins'; -@use '_variables'; +@use '_mixins' as *; +@use '_variables' as *; my-input-toggle-hidden { width: 100%; diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss index 4ccb75c1e..459539924 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss @@ -1,6 +1,6 @@ -@use '_variables'; -@use '_mixins'; -@use '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; .video-thumbnail { @include miniature-thumbnail; diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss index 55a478301..2fc245ace 100644 --- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss +++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; label { font-weight: $font-regular; diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss index 9c3dd2bdd..4b007b691 100644 --- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss +++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; label { font-weight: $font-regular; diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss index ee876da00..e87f43b63 100644 --- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss +++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss @@ -1,4 +1,4 @@ -@use '_mixins'; +@use '_mixins' as *; .btn-remote-follow { @include peertube-button; diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss index 61cf023be..da8eaf646 100644 --- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss +++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .btn-group-subscribe { @include peertube-button; diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.scss b/client/src/app/shared/shared-video-live/live-stream-information.component.scss index 931bc7269..b9008ba59 100644 --- a/client/src/app/shared/shared-video-live/live-stream-information.component.scss +++ b/client/src/app/shared/shared-video-live/live-stream-information.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; p-autocomplete { display: block; diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss index f5b96c2a6..79e3c1bdf 100644 --- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss +++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss @@ -1,7 +1,7 @@ @use '_bootstrap-variables'; -@use '_variables'; -@use '_mixins'; -@use '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; $icon-size: 16px; diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss index b17bdf79e..c986228d9 100644 --- a/client/src/app/shared/shared-video-miniature/video-download.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .nav-content { margin-top: 30px; diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss index 850a1be2a..80b418c87 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss @@ -1,6 +1,6 @@ -@use '_variables'; -@use '_mixins'; -@use '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; $more-button-width: 40px; diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss index 727fa2ade..3bb375980 100644 --- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss +++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .action-selection-mode { display: flex; diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss index fc0d290a1..7db469d7c 100644 --- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; $optional-rows-checkbox-width: 34px; $timestamp-width: 50px; diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss index 1f0a03831..c476b3ac1 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss @@ -1,6 +1,6 @@ -@use '_variables'; -@use '_mixins'; -@use '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; $thumbnail-width: 130px; $thumbnail-height: 72px; diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss index eee89a373..27955cc3b 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss @@ -1,6 +1,6 @@ -@use '_variables'; -@use '_mixins'; -@use '_miniature'; +@use '_variables' as *; +@use '_mixins' as *; +@use '_miniature' as *; .miniature { display: inline-block; diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 51c21107b..6b32d4cd6 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -1,8 +1,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; -@use '_bootstrap-variables'; -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; @use '_fonts'; diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 9c734c4fe..058033166 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -1,8 +1,35 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; -@use '_bootstrap'; -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; + +@import './_bootstrap-variables'; + +@import '~bootstrap/scss/functions'; +@import '~bootstrap/scss/variables'; + +@import '~bootstrap/scss/mixins'; +@import '~bootstrap/scss/root'; +@import '~bootstrap/scss/reboot'; +@import '~bootstrap/scss/type'; +@import '~bootstrap/scss/grid'; +@import '~bootstrap/scss/tables'; +@import '~bootstrap/scss/forms'; +@import '~bootstrap/scss/buttons'; +@import '~bootstrap/scss/dropdown'; +@import '~bootstrap/scss/button-group'; +@import '~bootstrap/scss/input-group'; +@import '~bootstrap/scss/nav'; +@import '~bootstrap/scss/card'; +@import '~bootstrap/scss/badge'; +@import '~bootstrap/scss/alert'; +@import '~bootstrap/scss/close'; +@import '~bootstrap/scss/modal'; +@import '~bootstrap/scss/tooltip'; +@import '~bootstrap/scss/popover'; +@import '~bootstrap/scss/utilities'; + +@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d .glyphicon-refresh-animate { diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss index 44c584d1c..2d8117ee5 100644 --- a/client/src/sass/classes.scss +++ b/client/src/sass/classes.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; .peertube-button { @include peertube-button; diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss index 31c145319..b135bbb6d 100644 --- a/client/src/sass/include/_actor.scss +++ b/client/src/sass/include/_actor.scss @@ -1,4 +1,5 @@ -@use '_variables'; +@use '_variables' as *; +@use '_mixins' as *; @mixin section-label-responsive { color: pvar(--mainColor); diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss deleted file mode 100644 index 4f4f48e58..000000000 --- a/client/src/sass/include/_bootstrap.scss +++ /dev/null @@ -1,40 +0,0 @@ -@use './_bootstrap-variables'; - -@use '~bootstrap/scss/functions'; -@use '~bootstrap/scss/variables'; - -@use '~bootstrap/scss/mixins'; -@use '~bootstrap/scss/root'; -@use '~bootstrap/scss/reboot'; -@use '~bootstrap/scss/type'; -//@use '~bootstrap/scss/images'; -//@use '~bootstrap/scss/code'; -@use '~bootstrap/scss/grid'; -@use '~bootstrap/scss/tables'; -@use '~bootstrap/scss/forms'; -@use '~bootstrap/scss/buttons'; -//@use '~bootstrap/scss/transitions'; -@use '~bootstrap/scss/dropdown'; -@use '~bootstrap/scss/button-group'; -@use '~bootstrap/scss/input-group'; -//@use '~bootstrap/scss/custom-forms'; -@use '~bootstrap/scss/nav'; -//@use '~bootstrap/scss/navbar'; -@use '~bootstrap/scss/card'; -//@use '~bootstrap/scss/breadcrumb'; -//@use '~bootstrap/scss/pagination'; -@use '~bootstrap/scss/badge'; -//@use '~bootstrap/scss/jumbotron'; -@use '~bootstrap/scss/alert'; -//@use '~bootstrap/scss/progress'; -//@use '~bootstrap/scss/media'; -//@use '~bootstrap/scss/list-group'; -@use '~bootstrap/scss/close'; -@use '~bootstrap/scss/modal'; -@use '~bootstrap/scss/tooltip'; -@use '~bootstrap/scss/popover'; -//@use '~bootstrap/scss/carousel'; -@use '~bootstrap/scss/utilities'; -//@use '~bootstrap/scss/print'; - -@use '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index fb12da49e..a1b963400 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; @mixin miniature-name { @include ellipsis-multiline(1.1em, 2); diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index bf7504d91..4d4c52b34 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -1,4 +1,5 @@ -@use '_variables'; +@use 'sass:math'; +@use '_variables' as *; @mixin disable-default-a-behaviour { &:hover, @@ -745,7 +746,7 @@ > div { box-sizing: border-box; - flex: 0 0 percentage(1/3); + flex: 0 0 percentage(math.div(1, 3)); padding: 0 5px; margin-bottom: 10px; @@ -867,7 +868,7 @@ // applies ratio (default to 16:9) to a child element (using $selector) only using // an immediate's parent size. This allows to set a ratio without explicit // dimensions, as width/height cannot be computed from each other. -@mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) { +@mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) { $padding-percent: percentage($inverted-ratio); position: relative; @@ -916,8 +917,8 @@ top: 50%; transform: translate(-50%, -50%) scale(0.5); - border-top: ($height / 2) solid transparent; - border-bottom: ($height / 2) solid transparent; + border-top: #{math.div($height, 2)} solid transparent; + border-bottom: #{math.div($height, 2)} solid transparent; border-left: $width solid rgba(255, 255, 255, 0.95); } diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index b9c82ea77..8f3d3c3b4 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -1,5 +1,4 @@ @use 'sass:math'; -@use '_bootstrap-variables'; $small-view: 800px; $mobile-view: 500px; @@ -54,7 +53,8 @@ $sub-menu-height: 81px; $channel-background-color: #f6ede8; -$banner-inverted-ratio: #{math.div(1, 6)}; +// FIXME: cannot use math.div here because of compilation error +$banner-inverted-ratio: 0.1666666666; $max-channels-width: 1200px; diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss index 6c9d3a407..c40b355be 100644 --- a/client/src/sass/ng-select.scss +++ b/client/src/sass/ng-select.scss @@ -1,4 +1,5 @@ -@use '_variables'; +@use '_variables' as *; +@use '_mixins' as *; $ng-select-highlight: #f2690d; // $ng-select-primary-text: #333 !default; diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss index b8c3325d0..629a677b1 100644 --- a/client/src/sass/player/bezels.scss +++ b/client/src/sass/player/bezels.scss @@ -1,3 +1,5 @@ +@use '_mixins' as *; + @keyframes bezels-fadeout { from { opacity: 1; diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss index a207d8a28..5548e2712 100644 --- a/client/src/sass/player/context-menu.scss +++ b/client/src/sass/player/context-menu.scss @@ -1,6 +1,6 @@ -@use '_variables'; -@use '_mixins'; -@use './_player-variables'; +@use '_variables' as *; +@use '_mixins' as *; +@use './_player-variables' as *; $context-menu-width: 350px; diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss index dde2c3127..86c090200 100644 --- a/client/src/sass/player/mobile.scss +++ b/client/src/sass/player/mobile.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; /* Special mobile style */ diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss index 1a84bd7f0..17fd14342 100644 --- a/client/src/sass/player/peertube-skin.scss +++ b/client/src/sass/player/peertube-skin.scss @@ -1,7 +1,7 @@ @use 'sass:math'; -@use '_variables'; -@use '_mixins'; -@use './_player-variables'; +@use '_variables' as *; +@use '_mixins' as *; +@use './_player-variables' as *; body { --embedForegroundColor: #{$primary-foreground-color}; @@ -12,8 +12,8 @@ body { @mixin big-play-button-triangle-size($triangle-size) { width: $triangle-size; height: $triangle-size; - top: calc(50% - math.div($triangle-size / 2)); - left: calc(53% - math.div($triangle-size / 2)); + top: calc(50% - math.div($triangle-size, 2)); + left: calc(53% - math.div($triangle-size, 2)); } .video-js.vjs-peertube-skin { @@ -57,7 +57,7 @@ body { $big-play-width: 1.2em; $big-play-height: 1.2em; - @include margin-left(-($big-play-width / 2)); + @include margin-left(-(math.div($big-play-width, 2))); outline: 0; font-size: 6em; @@ -70,7 +70,7 @@ body { width: $big-play-width; height: $big-play-height; line-height: $big-play-height; - margin-top: -(math.div($big-play-height / 2)); + margin-top: -(math.div($big-play-height, 2)); transition: 0.4s opacity; &::-moz-focus-inner { diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss index 3279bd263..f7e67ba16 100644 --- a/client/src/sass/player/playlist.scss +++ b/client/src/sass/player/playlist.scss @@ -1,3 +1,7 @@ +@use '_variables' as *; +@use '_mixins' as *; +@use './_player-variables' as *; + $playlist-menu-width: 350px; .vjs-playlist-menu { diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss index 2d0b58a1d..d495785b3 100644 --- a/client/src/sass/player/settings-menu.scss +++ b/client/src/sass/player/settings-menu.scss @@ -1,6 +1,6 @@ -@use '_variables'; -@use '_mixins'; -@use './_player-variables'; +@use '_variables' as *; +@use '_mixins' as *; +@use './_player-variables' as *; $setting-transition-duration: 0.15s; $setting-transition-easing: ease-out; diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss index bd7efd3b8..84ebbe8ee 100644 --- a/client/src/sass/player/spinner.scss +++ b/client/src/sass/player/spinner.scss @@ -1,5 +1,5 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; // Thanks: https://projects.lukehaas.me/css-loaders/ .vjs-loading-spinner { diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss index 18b3f0413..0e337aa19 100644 --- a/client/src/sass/player/stats.scss +++ b/client/src/sass/player/stats.scss @@ -1,4 +1,6 @@ -@use './_player-variables'; +@use '_variables' as *; +@use '_mixins' as *; +@use './_player-variables' as *; $stats-width: 420px; $contextmenu-background-color: rgba(0, 0, 0, 0.6); @@ -6,7 +8,7 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6); .video-js { .vjs-stats-content { - @include transition(opacity 0.1s); + transition: opacity 0.1s; position: absolute; background-color: $contextmenu-background-color; diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss index 922a9674d..2618d79d4 100644 --- a/client/src/sass/player/upnext.scss +++ b/client/src/sass/player/upnext.scss @@ -4,14 +4,10 @@ $browser-context: 16; @return #{$pixels/$context}em; } -@mixin transition($string: $transition--default) { - transition: $string; -} - .video-js { .vjs-upnext-content { - @include transition(opacity 0.1s); + transition: opacity 0.1s; font-size: 1.8em; pointer-events: auto; @@ -93,7 +89,7 @@ $browser-context: 16; } .vjs-upnext-autoplay-icon { - @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1)); + transition: stroke-dasharray 0.1s cubic-bezier(0.4, 0, 1, 1); position: absolute; top: 50%; diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index e6d4b6060..1f50eea54 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -1,8 +1,8 @@ -@use '_variables'; -@use '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; /* stylelint-disable */ -@use '~primeng/resources/primeng.css'; +@use 'primeng/resources/primeng'; // Override primeng style we don't want input[type=button] { @@ -620,20 +620,20 @@ p-table { background-color: pvar(--submenuBackgroundColor) !important; .pi { - @extend .glyphicon; + @extend .glyphicon !optional; color: #000 !important; font-size: 11px !important; top: 0 !important; &.pi-sort-amount-up-alt { - @extend .glyphicon-triangle-top; + @extend .glyphicon-triangle-top !optional; color: pvar(--mainForegroundColor) !important; } &.pi-sort-amount-down { - @extend .glyphicon-triangle-bottom; + @extend .glyphicon-triangle-bottom !optional; color: pvar(--mainForegroundColor) !important; } @@ -711,23 +711,23 @@ p-table { } &.p-paginator-first { - @extend .glyphicon-step-backward; + @extend .glyphicon-step-backward !optional; } &.p-paginator-prev { - @extend .glyphicon-chevron-left; + @extend .glyphicon-chevron-left !optional; @include margin-right(10px); } &.p-paginator-next { - @extend .glyphicon-chevron-right; + @extend .glyphicon-chevron-right !optional; @include margin-left(10px); } &.p-paginator-last { - @extend .glyphicon-step-forward; + @extend .glyphicon-step-forward !optional; } } @@ -806,7 +806,7 @@ p-calendar .p-datepicker { } .p-datepicker-next { - @extend .glyphicon-chevron-right; + @extend .glyphicon-chevron-right !optional; @include glyphicon-light; color: #000 !important; @@ -818,7 +818,7 @@ p-calendar .p-datepicker { } .p-datepicker-prev { - @extend .glyphicon-chevron-left; + @extend .glyphicon-chevron-left !optional; @include glyphicon-light; color: #000 !important; @@ -833,14 +833,14 @@ p-calendar .p-datepicker { .p-timepicker { .pi.pi-chevron-up { - @extend .glyphicon-chevron-up; + @extend .glyphicon-chevron-up !optional; @include glyphicon-light; color: #000 !important; } .pi.pi-chevron-down { - @extend .glyphicon-chevron-down; + @extend .glyphicon-chevron-down !optional; @include glyphicon-light; color: #000 !important; diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index 26da928f8..c2ee16ae2 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss @@ -1,7 +1,7 @@ -@use '_variables'; -@use '_mixins'; -@use '~video.js/dist/video-js.css'; -@use '~videojs-dock/dist/videojs-dock.css'; +@use '_variables' as *; +@use '_mixins' as *; +@use 'video.js/dist/video-js'; +@use 'videojs-dock/dist/videojs-dock'; $assets-path: '../../assets/'; @use '../../sass/player/index'; diff --git a/client/src/standalone/videos/test-embed.scss b/client/src/standalone/videos/test-embed.scss index ea01bf800..be1f9414a 100644 --- a/client/src/standalone/videos/test-embed.scss +++ b/client/src/standalone/videos/test-embed.scss @@ -1,5 +1,5 @@ -@import '_variables'; -@import '_mixins'; +@use '_variables' as *; +@use '_mixins' as *; * { font-family: sans-serif; -- cgit v1.2.3