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