aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-08 16:14:24 +0200
committerChocobozzz <me@florianbigard.com>2022-06-10 09:21:00 +0200
commit4c8749cb9e1e4a8d61697434e372f342def7bc70 (patch)
tree0e1b64d119b5077113163e147b711d8db5c6dd7e /client/src
parentb89b0bfce9bb79d81f9761b07b04d0c4e5aa25c1 (diff)
downloadPeerTube-4c8749cb9e1e4a8d61697434e372f342def7bc70.tar.gz
PeerTube-4c8749cb9e1e4a8d61697434e372f342def7bc70.tar.zst
PeerTube-4c8749cb9e1e4a8d61697434e372f342def7bc70.zip
Migrate to bootstrap 5
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+about/about-follows/about-follows.component.html3
-rw-r--r--client/src/app/+about/about-follows/about-follows.component.scss1
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.html6
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.scss11
-rw-r--r--client/src/app/+about/about.component.html2
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.html2
-rw-r--r--client/src/app/+accounts/accounts.component.html2
-rw-r--r--client/src/app/+accounts/accounts.component.scss4
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html15
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html58
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html4
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss5
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html6
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html28
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html18
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html32
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.html6
-rw-r--r--client/src/app/+admin/follows/following-list/following-list.component.html6
-rw-r--r--client/src/app/+admin/moderation/video-block-list/video-block-list.component.html6
-rw-r--r--client/src/app/+admin/overview/comments/video-comment-list.component.html2
-rw-r--r--client/src/app/+admin/overview/users/user-edit/user-edit.component.html234
-rw-r--r--client/src/app/+admin/overview/users/user-edit/user-edit.ts4
-rw-r--r--client/src/app/+admin/overview/users/user-edit/user-password.component.html26
-rw-r--r--client/src/app/+admin/overview/users/user-edit/user-password.component.scss12
-rw-r--r--client/src/app/+admin/overview/users/user-list/user-list.component.html12
-rw-r--r--client/src/app/+admin/overview/users/user-list/user-list.component.scss5
-rw-r--r--client/src/app/+admin/overview/videos/video-list.component.html26
-rw-r--r--client/src/app/+admin/overview/videos/video-list.component.scss6
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.html4
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss3
-rw-r--r--client/src/app/+admin/system/jobs/jobs.component.html8
-rw-r--r--client/src/app/+admin/system/jobs/jobs.component.scss4
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.component.html37
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss32
-rw-r--r--client/src/app/+my-account/my-account-applications/my-account-applications.component.html9
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html6
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.html51
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.scss3
-rw-r--r--client/src/app/+my-account/my-account.component.html2
-rw-r--r--client/src/app/+my-account/my-account.component.scss2
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.html2
-rw-r--r--client/src/app/+my-library/my-follows/my-followers.component.html2
-rw-r--r--client/src/app/+my-library/my-follows/my-subscriptions.component.html2
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.html3
-rw-r--r--client/src/app/+my-library/my-library.component.html2
-rw-r--r--client/src/app/+my-library/my-library.component.scss2
-rw-r--r--client/src/app/+my-library/my-ownership/my-ownership.component.html2
-rw-r--r--client/src/app/+my-library/my-video-imports/my-video-imports.component.html2
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html8
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html3
-rw-r--r--client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html2
-rw-r--r--client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss4
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.html2
-rw-r--r--client/src/app/+page-not-found/page-not-found.component.html6
-rw-r--r--client/src/app/+search/search-filters.component.html4
-rw-r--r--client/src/app/+search/search-filters.component.scss4
-rw-r--r--client/src/app/+search/search.component.html10
-rw-r--r--client/src/app/+signup/+register/custom-stepper.component.html2
-rw-r--r--client/src/app/+signup/+register/register-step-channel.component.html4
-rw-r--r--client/src/app/+signup/+register/register-step-terms.component.html4
-rw-r--r--client/src/app/+signup/+register/register-step-user.component.html4
-rw-r--r--client/src/app/+signup/+register/register.component.scss16
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-edit.component.scss8
-rw-r--r--client/src/app/+videos/+video-edit/video-update.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss3
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html4
-rw-r--r--client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html6
-rw-r--r--client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss58
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.html2
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.html2
-rw-r--r--client/src/app/header/search-typeahead.component.html6
-rw-r--r--client/src/app/header/suggestion.component.html8
-rw-r--r--client/src/app/menu/menu.component.html10
-rw-r--r--client/src/app/menu/notification.component.html4
-rw-r--r--client/src/app/modal/confirm.component.html2
-rw-r--r--client/src/app/modal/confirm.component.scss4
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.html10
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-list-table.component.html2
-rw-r--r--client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html4
-rw-r--r--client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss52
-rw-r--r--client/src/app/shared/shared-forms/advanced-input-filter.component.html13
-rw-r--r--client/src/app/shared/shared-forms/advanced-input-filter.component.scss1
-rw-r--r--client/src/app/shared/shared-forms/input-switch.component.html2
-rw-r--r--client/src/app/shared/shared-forms/input-toggle-hidden.component.html24
-rw-r--r--client/src/app/shared/shared-forms/input-toggle-hidden.component.scss11
-rw-r--r--client/src/app/shared/shared-forms/peertube-checkbox.component.html4
-rw-r--r--client/src/app/shared/shared-forms/peertube-checkbox.component.scss2
-rw-r--r--client/src/app/shared/shared-forms/select/select-channel.component.html2
-rw-r--r--client/src/app/shared/shared-forms/select/select-checkbox.component.html4
-rw-r--r--client/src/app/shared/shared-forms/select/select-checkbox.component.scss2
-rw-r--r--client/src/app/shared/shared-instance/instance-about-accordion.component.scss23
-rw-r--r--client/src/app/shared/shared-instance/instance-features-table.component.html2
-rw-r--r--client/src/app/shared/shared-instance/instance-features-table.component.scss5
-rw-r--r--client/src/app/shared/shared-main/misc/simple-search-input.component.html5
-rw-r--r--client/src/app/shared/shared-moderation/account-block-badges.component.html8
-rw-r--r--client/src/app/shared/shared-moderation/account-block-badges.component.scss3
-rw-r--r--client/src/app/shared/shared-moderation/account-blocklist.component.html2
-rw-r--r--client/src/app/shared/shared-moderation/report-modals/report.component.html5
-rw-r--r--client/src/app/shared/shared-moderation/report-modals/video-report.component.html44
-rw-r--r--client/src/app/shared/shared-moderation/server-blocklist.component.html2
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.html3
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.scss7
-rw-r--r--client/src/app/shared/shared-user-settings/user-video-settings.component.html4
-rw-r--r--client/src/app/shared/shared-user-settings/user-video-settings.component.scss6
-rw-r--r--client/src/app/shared/shared-user-subscription/remote-subscribe.component.html2
-rw-r--r--client/src/app/shared/shared-video-live/live-stream-information.component.html8
-rw-r--r--client/src/app/shared/shared-video-live/live-stream-information.component.scss7
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.html33
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.scss7
-rw-r--r--client/src/app/shared/shared-video-miniature/videos-list.component.html6
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html2
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss5
-rw-r--r--client/src/sass/application.scss40
-rw-r--r--client/src/sass/bootstrap.scss112
-rw-r--r--client/src/sass/classes.scss5
-rw-r--r--client/src/sass/include/_badges.scss61
-rw-r--r--client/src/sass/include/_bootstrap-variables.scss10
-rw-r--r--client/src/sass/include/_mixins.scss62
-rw-r--r--client/src/sass/include/_variables.scss1
-rw-r--r--client/src/sass/player/_player-variables.scss2
-rw-r--r--client/src/sass/primeng-custom.scss5
-rw-r--r--client/src/sass/z-index.scss1
126 files changed, 706 insertions, 837 deletions
diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index 6bc1d0448..f16f8bd71 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -1,5 +1,6 @@
1<div class="row"> 1<div class="row">
2 <h1 class="sr-only" i18n>Follows</h1> 2 <h1 class="visually-hidden" i18n>Follows</h1>
3
3 <div class="col-xl-6 col-md-12"> 4 <div class="col-xl-6 col-md-12">
4 <h2 i18n class="subtitle">Follower instances ({{ followersPagination.totalItems }})</h2> 5 <h2 i18n class="subtitle">Follower instances ({{ followersPagination.totalItems }})</h2>
5 6
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 80eb997e4..057d04ced 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -15,6 +15,7 @@ a {
15 15
16.no-results { 16.no-results {
17 justify-content: flex-start; 17 justify-content: flex-start;
18 align-items: flex-start;
18} 19}
19 20
20.show-more { 21.show-more {
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 7f2a6aa77..b113df82f 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -8,9 +8,9 @@
8 </div> 8 </div>
9 9
10 <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0"> 10 <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0">
11 <span *ngFor="let category of categories" class="badge badge-primary category">{{ category }}</span> 11 <span *ngFor="let category of categories" class="pt-badge badge-primary">{{ category }}</span>
12 12
13 <span *ngFor="let language of languages" class="badge badge-secondary language">{{ language }}</span> 13 <span *ngFor="let language of languages" class="pt-badge badge-secondary">{{ language }}</span>
14 </div> 14 </div>
15 15
16 <div class="short-description"> 16 <div class="short-description">
@@ -204,7 +204,7 @@
204 </div> 204 </div>
205 205
206 <div class="col-md-12 col-xl-6" myPluginSelector pluginSelectorId="about-instance-features"> 206 <div class="col-md-12 col-xl-6" myPluginSelector pluginSelectorId="about-instance-features">
207 <h2 class="sr-only" i18n>FEATURES</h2> 207 <h2 class="visually-hidden" i18n>FEATURES</h2>
208 <my-instance-features-table></my-instance-features-table> 208 <my-instance-features-table></my-instance-features-table>
209 </div> 209 </div>
210 210
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 965c04b6c..a48783639 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -19,18 +19,11 @@
19} 19}
20 20
21.instance-badges { 21.instance-badges {
22 font-size: 16px;
23 margin-bottom: 20px; 22 margin-bottom: 20px;
23 font-size: 16px;
24 24
25 .badge { 25 .pt-badge {
26 @include margin-right(5px); 26 @include margin-right(5px);
27
28 font-size: 12px;
29 font-weight: $font-semibold;
30
31 &.category {
32 background-color: pvar(--mainColor);
33 }
34 } 27 }
35} 28}
36 29
diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html
index 63d429ebf..3b7343a04 100644
--- a/client/src/app/+about/about.component.html
+++ b/client/src/app/+about/about.component.html
@@ -1,4 +1,4 @@
1<div class="row"> 1<div>
2 <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed }"> 2 <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed }">
3 3
4 <div class="links"> 4 <div class="links">
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 34dc52029..0dfa87074 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -1,4 +1,4 @@
1<h1 class="sr-only" i18n>Video channels</h1> 1<h1 class="visually-hidden" i18n>Video channels</h1>
2 2
3<div class="margin-content"> 3<div class="margin-content">
4 4
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index e235d9689..d92760ff8 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -18,7 +18,7 @@
18 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()" 18 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
19 ></my-user-moderation-dropdown> 19 ></my-user-moderation-dropdown>
20 20
21 <span *ngIf="accountUser?.blocked" [ngbTooltip]="accountUser.blockedReason" class="badge badge-danger" i18n>Banned</span> 21 <span *ngIf="accountUser?.blocked" [ngbTooltip]="accountUser.blockedReason" class="pt-badge badge-danger" i18n>Banned</span>
22 22
23 <my-account-block-badges [account]="account"></my-account-block-badges> 23 <my-account-block-badges [account]="account"></my-account-block-badges>
24 </div> 24 </div>
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 5043b98c4..a316bd599 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -93,6 +93,10 @@ my-user-moderation-dropdown {
93 } 93 }
94} 94}
95 95
96.pt-badge {
97 @include margin-right(5px);
98}
99
96@media screen and (max-width: $small-view) { 100@media screen and (max-width: $small-view) {
97 .root { 101 .root {
98 --myGlobalTopPadding: 45px; 102 --myGlobalTopPadding: 45px;
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
index 0ab80e5a9..a17b13fdf 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
@@ -1,15 +1,15 @@
1<ng-container [formGroup]="form"> 1<ng-container [formGroup]="form">
2 2
3 <div class="form-row mt-5"> <!-- cache grid --> 3 <div class="row mt-5"> <!-- cache grid -->
4 <div class="form-group col-12 col-lg-4 col-xl-3"> 4
5 <div class="col-12 col-lg-4 col-xl-3">
5 <div i18n class="inner-form-title">CACHE</div> 6 <div i18n class="inner-form-title">CACHE</div>
6 <div i18n class="inner-form-description"> 7 <div i18n class="inner-form-description">
7 Some files are not federated, and fetched when necessary. Define their caching policies. 8 Some files are not federated, and fetched when necessary. Define their caching policies.
8 </div> 9 </div>
9 </div> 10 </div>
10 11
11 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 12 <div class="col-12 col-lg-8 col-xl-9">
12
13 <ng-container formGroupName="cache"> 13 <ng-container formGroupName="cache">
14 <div class="form-group" formGroupName="previews"> 14 <div class="form-group" formGroupName="previews">
15 <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label> 15 <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
@@ -57,8 +57,8 @@
57 </div> 57 </div>
58 </div> 58 </div>
59 59
60 <div class="form-row mt-4"> <!-- cache grid --> 60 <div class="row mt-4"> <!-- cache grid -->
61 <div class="form-group col-12 col-lg-4 col-xl-3"> 61 <div class="col-12 col-lg-4 col-xl-3">
62 <div class="anchor" id="customizations"></div> <!-- customizations anchor --> 62 <div class="anchor" id="customizations"></div> <!-- customizations anchor -->
63 <div i18n class="inner-form-title">CUSTOMIZATIONS</div> 63 <div i18n class="inner-form-title">CUSTOMIZATIONS</div>
64 <div i18n class="inner-form-description"> 64 <div i18n class="inner-form-description">
@@ -66,8 +66,7 @@
66 </div> 66 </div>
67 </div> 67 </div>
68 68
69 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 69 <div class="col-12 col-lg-8 col-xl-9">
70
71 <ng-container formGroupName="instance"> 70 <ng-container formGroupName="instance">
72 <ng-container formGroupName="customizations"> 71 <ng-container formGroupName="customizations">
73 <div class="form-group"> 72 <div class="form-group">
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index bae9d9775..f225c388d 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -1,13 +1,13 @@
1<ng-container [formGroup]="form"> 1<ng-container [formGroup]="form">
2 <div class="form-row mt-5"> <!-- appearance grid --> 2 <div class="row mt-5"> <!-- appearance grid -->
3 <div class="form-group col-12 col-lg-4 col-xl-3"> 3 <div class="col-12 col-lg-4 col-xl-3">
4 <div i18n class="inner-form-title">APPEARANCE</div> 4 <div i18n class="inner-form-title">APPEARANCE</div>
5 <div i18n class="inner-form-description"> 5 <div i18n class="inner-form-description">
6 Use <a routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or <a routerLink="/admin/config/edit-custom" fragment="advanced-configuration">add slight customizations</a>. 6 Use <a routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or <a routerLink="/admin/config/edit-custom" fragment="advanced-configuration">add slight customizations</a>.
7 </div> 7 </div>
8 </div> 8 </div>
9 9
10 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 10 <div class="col-12 col-lg-8 col-xl-9">
11 11
12 <ng-container formGroupName="theme"> 12 <ng-container formGroupName="theme">
13 <div class="form-group"> 13 <div class="form-group">
@@ -88,15 +88,15 @@
88 </div> 88 </div>
89 </div> 89 </div>
90 90
91 <div class="form-row mt-4"> <!-- broadcast grid --> 91 <div class="row mt-4"> <!-- broadcast grid -->
92 <div class="form-group col-12 col-lg-4 col-xl-3"> 92 <div class="col-12 col-lg-4 col-xl-3">
93 <div i18n class="inner-form-title">BROADCAST MESSAGE</div> 93 <div i18n class="inner-form-title">BROADCAST MESSAGE</div>
94 <div i18n class="inner-for-description"> 94 <div i18n class="inner-for-description">
95 Display a message on your instance 95 Display a message on your instance
96 </div> 96 </div>
97 </div> 97 </div>
98 98
99 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 99 <div class="col-12 col-lg-8 col-xl-9">
100 100
101 <ng-container formGroupName="broadcastMessage"> 101 <ng-container formGroupName="broadcastMessage">
102 102
@@ -144,15 +144,15 @@
144 </div> 144 </div>
145 </div> 145 </div>
146 146
147 <div class="form-row mt-4"> <!-- new users grid --> 147 <div class="row mt-4"> <!-- new users grid -->
148 <div class="form-group col-12 col-lg-4 col-xl-3"> 148 <div class="col-12 col-lg-4 col-xl-3">
149 <div i18n class="inner-form-title">NEW USERS</div> 149 <div i18n class="inner-form-title">NEW USERS</div>
150 <div i18n class="inner-for-description"> 150 <div i18n class="inner-for-description">
151 Manage <a routerLink="/admin/users">users</a> to set their quota individually. 151 Manage <a routerLink="/admin/users">users</a> to set their quota individually.
152 </div> 152 </div>
153 </div> 153 </div>
154 154
155 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 155 <div class="col-12 col-lg-8 col-xl-9">
156 156
157 <ng-container formGroupName="signup"> 157 <ng-container formGroupName="signup">
158 <div class="form-group"> 158 <div class="form-group">
@@ -239,20 +239,20 @@
239 </div> 239 </div>
240 </div> 240 </div>
241 241
242 <div class="form-row mt-4"> <!-- videos grid --> 242 <div class="row mt-4"> <!-- videos grid -->
243 <div class="form-group col-12 col-lg-4 col-xl-3"> 243 <div class="col-12 col-lg-4 col-xl-3">
244 <div i18n class="inner-form-title">VIDEOS</div> 244 <div i18n class="inner-form-title">VIDEOS</div>
245 </div> 245 </div>
246 246
247 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 247 <div class="col-12 col-lg-8 col-xl-9">
248 248
249 <ng-container formGroupName="import"> 249 <ng-container formGroupName="import">
250 250
251 <ng-container formGroupName="videos"> 251 <ng-container formGroupName="videos">
252 252
253 <div class="form-group mt-4"> 253 <div class="form-group">
254 <label i18n for="importConcurrency">Import jobs concurrency</label> 254 <label i18n for="importConcurrency">Import jobs concurrency</label>
255 <span i18n class="muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span> 255 <span i18n class="muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
256 256
257 <div class="number-with-unit"> 257 <div class="number-with-unit">
258 <input type="number" name="importConcurrency" formControlName="concurrency" /> 258 <input type="number" name="importConcurrency" formControlName="concurrency" />
@@ -309,12 +309,12 @@
309 </div> 309 </div>
310 </div> 310 </div>
311 311
312 <div class="form-row mt-4"> <!-- video channels grid --> 312 <div class="row mt-4"> <!-- video channels grid -->
313 <div class="form-group col-12 col-lg-4 col-xl-3"> 313 <div class="col-12 col-lg-4 col-xl-3">
314 <div i18n class="inner-form-title">VIDEO CHANNELS</div> 314 <div i18n class="inner-form-title">VIDEO CHANNELS</div>
315 </div> 315 </div>
316 316
317 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 317 <div class="col-12 col-lg-8 col-xl-9">
318 <div class="form-group" formGroupName="videoChannels"> 318 <div class="form-group" formGroupName="videoChannels">
319 <label i18n for="videoChannelsMaxPerUser">Max video channels per user</label> 319 <label i18n for="videoChannelsMaxPerUser">Max video channels per user</label>
320 320
@@ -331,12 +331,12 @@
331 </div> 331 </div>
332 </div> 332 </div>
333 333
334 <div class="form-row mt-4"> <!-- search grid --> 334 <div class="row mt-4"> <!-- search grid -->
335 <div class="form-group col-12 col-lg-4 col-xl-3"> 335 <div class="col-12 col-lg-4 col-xl-3">
336 <div i18n class="inner-form-title">SEARCH</div> 336 <div i18n class="inner-form-title">SEARCH</div>
337 </div> 337 </div>
338 338
339 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 339 <div class="col-12 col-lg-8 col-xl-9">
340 340
341 <ng-container formGroupName="search"> 341 <ng-container formGroupName="search">
342 <ng-container formGroupName="remoteUri"> 342 <ng-container formGroupName="remoteUri">
@@ -420,15 +420,15 @@
420 </div> 420 </div>
421 </div> 421 </div>
422 422
423 <div class="form-row mt-4"> <!-- federation grid --> 423 <div class="row mt-4"> <!-- federation grid -->
424 <div class="form-group col-12 col-lg-4 col-xl-3"> 424 <div class="col-12 col-lg-4 col-xl-3">
425 <div i18n class="inner-form-title">FEDERATION</div> 425 <div i18n class="inner-form-title">FEDERATION</div>
426 <div i18n class="inner-form-description"> 426 <div i18n class="inner-form-description">
427 Manage <a routerLink="/admin/follows">relations</a> with other instances. 427 Manage <a routerLink="/admin/follows">relations</a> with other instances.
428 </div> 428 </div>
429 </div> 429 </div>
430 430
431 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 431 <div class="col-12 col-lg-8 col-xl-9">
432 432
433 <ng-container formGroupName="followers"> 433 <ng-container formGroupName="followers">
434 <ng-container formGroupName="instance"> 434 <ng-container formGroupName="instance">
@@ -499,12 +499,12 @@
499 </div> 499 </div>
500 </div> 500 </div>
501 501
502 <div class="form-row mt-4"> <!-- administrators grid --> 502 <div class="row mt-4"> <!-- administrators grid -->
503 <div class="form-group col-12 col-lg-4 col-xl-3"> 503 <div class="col-12 col-lg-4 col-xl-3">
504 <div i18n class="inner-form-title">ADMINISTRATORS</div> 504 <div i18n class="inner-form-title">ADMINISTRATORS</div>
505 </div> 505 </div>
506 506
507 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 507 <div class="col-12 col-lg-8 col-xl-9">
508 508
509 <div class="form-group" formGroupName="admin"> 509 <div class="form-group" formGroupName="admin">
510 <label i18n for="adminEmail">Admin email</label> 510 <label i18n for="adminEmail">Admin email</label>
@@ -527,8 +527,8 @@
527 </div> 527 </div>
528 </div> 528 </div>
529 529
530 <div class="form-row mt-4"> <!-- Twitter grid --> 530 <div class="row mt-4"> <!-- Twitter grid -->
531 <div class="form-group col-12 col-lg-4 col-xl-3"> 531 <div class="col-12 col-lg-4 col-xl-3">
532 <div i18n class="inner-form-title">TWITTER</div> 532 <div i18n class="inner-form-title">TWITTER</div>
533 <div i18n class="inner-form-description"> 533 <div i18n class="inner-form-description">
534 Provide the Twitter account representing your instance to improve link previews. 534 Provide the Twitter account representing your instance to improve link previews.
@@ -536,7 +536,7 @@
536 </div> 536 </div>
537 </div> 537 </div>
538 538
539 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 539 <div class="col-12 col-lg-8 col-xl-9">
540 540
541 <ng-container formGroupName="services"> 541 <ng-container formGroupName="services">
542 <ng-container formGroupName="twitter"> 542 <ng-container formGroupName="twitter">
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 8fef39b79..cc8e699f3 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -1,4 +1,4 @@
1<h1 class="sr-only" i18n>Configuration</h1> 1<h1 class="visually-hidden" i18n>Configuration</h1>
2 2
3<div class="alert alert-warning" *ngIf="!isUpdateAllowed()" i18n> 3<div class="alert alert-warning" *ngIf="!isUpdateAllowed()" i18n>
4 Updating instance configuration from the web interface is disabled by the system administrator. 4 Updating instance configuration from the web interface is disabled by the system administrator.
@@ -64,7 +64,7 @@
64 64
65 <div [ngbNavOutlet]="nav"></div> 65 <div [ngbNavOutlet]="nav"></div>
66 66
67 <div class="form-row mt-4"> <!-- submit placement block --> 67 <div class="row mt-4"> <!-- submit placement block -->
68 <div class="col-md-7 col-xl-5"></div> 68 <div class="col-md-7 col-xl-5"></div>
69 <div class="col-md-5 col-xl-5"> 69 <div class="col-md-5 col-xl-5">
70 70
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 0458d257f..31dd9f54f 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
@@ -102,11 +102,6 @@ input[disabled] {
102 opacity: 0.5; 102 opacity: 0.5;
103} 103}
104 104
105
106.form-group-right {
107 padding-top: 2px;
108}
109
110ngb-tabset:not(.previews) ::ng-deep { 105ngb-tabset:not(.previews) ::ng-deep {
111 .nav-link { 106 .nav-link {
112 font-size: 105%; 107 font-size: 105%;
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
index 2286a5a1a..701c3c0c1 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
@@ -2,12 +2,12 @@
2 2
3 <ng-container formGroupName="instanceCustomHomepage"> 3 <ng-container formGroupName="instanceCustomHomepage">
4 4
5 <div class="form-row mt-5"> <!-- homepage grid --> 5 <div class="row mt-5"> <!-- homepage grid -->
6 <div class="form-group col-12 col-lg-4 col-xl-3"> 6 <div class="col-12 col-lg-4 col-xl-3">
7 <div i18n class="inner-form-title">INSTANCE HOMEPAGE</div> 7 <div i18n class="inner-form-title">INSTANCE HOMEPAGE</div>
8 </div> 8 </div>
9 9
10 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 10 <div class="col-12 col-lg-8 col-xl-9">
11 11
12 <div class="form-group"> 12 <div class="form-group">
13 <label i18n for="instanceCustomHomepageContent">Homepage</label> 13 <label i18n for="instanceCustomHomepageContent">Homepage</label>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index d806616bd..1c567d962 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -2,13 +2,12 @@
2 2
3 <ng-container formGroupName="instance"> 3 <ng-container formGroupName="instance">
4 4
5 <div class="form-row mt-5"> <!-- instance grid --> 5 <div class="row mt-5"> <!-- instance grid -->
6 <div class="form-group col-12 col-lg-4 col-xl-3"> 6 <div class="col-12 col-lg-4 col-xl-3">
7 <div i18n class="inner-form-title">INSTANCE</div> 7 <div i18n class="inner-form-title">INSTANCE</div>
8 </div> 8 </div>
9 9
10 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 10 <div class="col-12 col-lg-8 col-xl-9">
11
12 <div class="form-group"> 11 <div class="form-group">
13 <label i18n for="instanceName">Name</label> 12 <label i18n for="instanceName">Name</label>
14 13
@@ -77,16 +76,15 @@
77 </div> 76 </div>
78 </div> 77 </div>
79 78
80 <div class="form-row mt-4"> <!-- moderation & nsfw grid --> 79 <div class="row mt-4"> <!-- moderation & nsfw grid -->
81 <div class="form-group col-12 col-lg-4 col-xl-3"> 80 <div class="col-12 col-lg-4 col-xl-3">
82 <div i18n class="inner-form-title">MODERATION & NSFW</div> 81 <div i18n class="inner-form-title">MODERATION & NSFW</div>
83 <div i18n class="inner-for-description"> 82 <div i18row="inner-for-description">
84 Manage <a routerLink="/admin/users">users</a> to build a moderation team. 83 Manage <a routerLink="/admin/users">users</a> to build a moderation team.
85 </div> 84 </div>
86 </div> 85 </div>
87 86
88 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 87 <div class="col-12 col-lg-8 col-xl-9">
89
90 <div class="form-group"> 88 <div class="form-group">
91 <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW"> 89 <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
92 <ng-template ptTemplate="label"> 90 <ng-template ptTemplate="label">
@@ -162,12 +160,12 @@
162 </div> 160 </div>
163 </div> 161 </div>
164 162
165 <div class="form-row mt-4"> <!-- you and your instance grid --> 163 <div class="row mt-4"> <!-- you and your instance grid -->
166 <div class="form-group col-12 col-lg-4 col-xl-3"> 164 <div class="col-12 col-lg-4 col-xl-3">
167 <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div> 165 <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div>
168 </div> 166 </div>
169 167
170 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 168 <div class="col-12 col-lg-8 col-xl-9">
171 169
172 <div class="form-group"> 170 <div class="form-group">
173 <label i18n for="instanceAdministrator">Who is behind the instance?</label><my-help helpType="markdownText"></my-help> 171 <label i18n for="instanceAdministrator">Who is behind the instance?</label><my-help helpType="markdownText"></my-help>
@@ -220,12 +218,12 @@
220 </div> 218 </div>
221 </div> 219 </div>
222 220
223 <div class="form-row mt-4"> <!-- other information grid --> 221 <div class="row mt-4"> <!-- other information grid -->
224 <div class="form-group col-12 col-lg-4 col-xl-3"> 222 <div class="col-12 col-lg-4 col-xl-3">
225 <div i18n class="inner-form-title">OTHER INFORMATION</div> 223 <div i18n class="inner-form-title">OTHER INFORMATION</div>
226 </div> 224 </div>
227 225
228 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 226 <div class="col-12 col-lg-8 col-xl-9">
229 227
230 <div class="form-group"> 228 <div class="form-group">
231 <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label> 229 <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
index 71d5d91f0..a970f3df3 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
@@ -1,14 +1,14 @@
1<ng-container [formGroup]="form"> 1<ng-container [formGroup]="form">
2 2
3 <div class="form-row mt-5"> 3 <div class="row mt-5">
4 <div class="form-group col-12 col-lg-4 col-xl-3"> 4 <div class="col-12 col-lg-4 col-xl-3">
5 <div i18n class="inner-form-title">LIVE</div> 5 <div i18n class="inner-form-title">LIVE</div>
6 <div i18n class="inner-form-description"> 6 <div i18n class="inner-form-description">
7 Enable users of your instance to stream live. 7 Enable users of your instance to stream live.
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 11 <div class="col-12 col-lg-8 col-xl-9">
12 12
13 <ng-container formGroupName="live"> 13 <ng-container formGroupName="live">
14 14
@@ -89,15 +89,15 @@
89 </div> 89 </div>
90 </div> 90 </div>
91 91
92 <div class="form-row"> <!-- transcoding live streams grid --> 92 <div class="row"> <!-- transcoding live streams grid -->
93 <div class="form-group col-12 col-lg-4 col-xl-3"> 93 <div class="col-12 col-lg-4 col-xl-3">
94 <div i18n class="inner-form-title">TRANSCODING</div> 94 <div i18n class="inner-form-title">TRANSCODING</div>
95 <div i18n class="inner-form-description"> 95 <div i18n class="inner-form-description">
96 Same as VOD transcoding, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some. 96 Same as VOD transcoding, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some.
97 </div> 97 </div>
98 </div> 98 </div>
99 99
100 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 100 <div class="col-12 col-lg-8 col-xl-9">
101 101
102 <ng-container formGroupName="live"> 102 <ng-container formGroupName="live">
103 <ng-container formGroupName="transcoding"> 103 <ng-container formGroupName="transcoding">
@@ -115,7 +115,7 @@
115 <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()"> 115 <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
116 <label i18n for="liveTranscodingThreads">Live resolutions to generate</label> 116 <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
117 117
118 <div class="ml-2 mt-2 d-flex flex-column"> 118 <div class="ms-2 mt-2 d-flex flex-column">
119 <ng-container formGroupName="resolutions"> 119 <ng-container formGroupName="resolutions">
120 120
121 <div class="form-group" *ngFor="let resolution of liveResolutions"> 121 <div class="form-group" *ngFor="let resolution of liveResolutions">
@@ -136,7 +136,7 @@
136 <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()"> 136 <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
137 <label i18n for="liveTranscodingThreads">Live transcoding threads</label> 137 <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
138 138
139 <span class="muted ml-1"> 139 <span class="muted ms-1">
140 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n> 140 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
141 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding 141 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
142 </ng-container> 142 </ng-container>
@@ -157,7 +157,7 @@
157 157
158 <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()"> 158 <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()">
159 <label i18n for="liveTranscodingProfile">Live transcoding profile</label> 159 <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
160 <span class="muted ml-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span> 160 <span class="muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
161 161
162 <my-select-options 162 <my-select-options
163 id="liveTranscodingProfile" 163 id="liveTranscodingProfile"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index 5c0bea4a5..3d8ab094f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -1,8 +1,8 @@
1<ng-container [formGroup]="form"> 1<ng-container [formGroup]="form">
2 2
3 <div class="form-row mt-4"> <!-- transcoding grid --> 3 <div class="row mt-4"> <!-- transcoding grid -->
4 <div class="form-group col-12 col-lg-4 col-xl-3"></div> 4 <div class="col-12 col-lg-4 col-xl-3"></div>
5 <div class="form-group form-group-right col-12 col-lg-8"> 5 <div class="col-12 col-lg-8">
6 6
7 <div class="callout callout-info"> 7 <div class="callout callout-info">
8 <span i18n> 8 <span i18n>
@@ -21,8 +21,8 @@
21 </div> 21 </div>
22 </div> 22 </div>
23 23
24 <div class="form-row mt-2"> <!-- transcoding grid --> 24 <div class="row mt-4"> <!-- transcoding grid -->
25 <div class="form-group col-12 col-lg-4 col-xl-3"> 25 <div class="col-12 col-lg-4 col-xl-3">
26 <div i18n class="inner-form-title">TRANSCODING</div> 26 <div i18n class="inner-form-title">TRANSCODING</div>
27 <div i18n class="inner-form-description"> 27 <div i18n class="inner-form-description">
28 Process uploaded videos so that they are in a streamable form that any device can play. Though costly in 28 Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
@@ -30,11 +30,11 @@
30 </div> 30 </div>
31 </div> 31 </div>
32 32
33 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 33 <div class="col-12 col-lg-8 col-xl-9">
34 34
35 <ng-container formGroupName="transcoding"> 35 <ng-container formGroupName="transcoding">
36 36
37 <div class="form-group mb-0 col-12 col-xl-11"> 37 <div class="col-12 col-xl-11">
38 <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled" [recommended]="true"> 38 <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled" [recommended]="true">
39 <ng-template ptTemplate="label"> 39 <ng-template ptTemplate="label">
40 <ng-container i18n>Transcoding enabled</ng-container> 40 <ng-container i18n>Transcoding enabled</ng-container>
@@ -115,7 +115,7 @@
115 <div class="form-group" [ngClass]="getTranscodingDisabledClass()"> 115 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
116 <label i18n>Resolutions to generate per enabled format</label> 116 <label i18n>Resolutions to generate per enabled format</label>
117 117
118 <div class="ml-2 mt-2 d-flex flex-column"> 118 <div class="ms-2 mt-2 d-flex flex-column">
119 <ng-container formGroupName="resolutions"> 119 <ng-container formGroupName="resolutions">
120 <div class="form-group" *ngFor="let resolution of resolutions"> 120 <div class="form-group" *ngFor="let resolution of resolutions">
121 <my-peertube-checkbox 121 <my-peertube-checkbox
@@ -142,7 +142,7 @@
142 142
143 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()"> 143 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
144 <label i18n for="transcodingThreads">Transcoding threads</label> 144 <label i18n for="transcodingThreads">Transcoding threads</label>
145 <span class="muted ml-1"> 145 <span class="muted ms-1">
146 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n> 146 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
147 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding 147 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
148 </ng-container> 148 </ng-container>
@@ -162,9 +162,9 @@
162 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div> 162 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
163 </div> 163 </div>
164 164
165 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()"> 165 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
166 <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label> 166 <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
167 <span class="muted ml-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span> 167 <span class="muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
168 168
169 <div class="number-with-unit"> 169 <div class="number-with-unit">
170 <input type="number" name="transcodingConcurrency" formControlName="concurrency" /> 170 <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
@@ -174,9 +174,9 @@
174 <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div> 174 <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
175 </div> 175 </div>
176 176
177 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()"> 177 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
178 <label i18n for="transcodingProfile">Transcoding profile</label> 178 <label i18n for="transcodingProfile">Transcoding profile</label>
179 <span class="muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span> 179 <span class="muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
180 180
181 <my-select-options 181 <my-select-options
182 id="transcodingProfile" 182 id="transcodingProfile"
@@ -193,15 +193,15 @@
193 </div> 193 </div>
194 </div> 194 </div>
195 195
196 <div class="form-row mt-2"> <!-- video studio grid --> 196 <div class="row mt-2"> <!-- video studio grid -->
197 <div class="form-group col-12 col-lg-4 col-xl-3"> 197 <div class="col-12 col-lg-4 col-xl-3">
198 <div i18n class="inner-form-title">VIDEO STUDIO</div> 198 <div i18n class="inner-form-title">VIDEO STUDIO</div>
199 <div i18n class="inner-form-description"> 199 <div i18n class="inner-form-description">
200 Allows your users to edit their video (cut, add intro/outro, add a watermark etc) 200 Allows your users to edit their video (cut, add intro/outro, add a watermark etc)
201 </div> 201 </div>
202 </div> 202 </div>
203 203
204 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9"> 204 <div class="col-12 col-lg-8 col-xl-9">
205 205
206 <ng-container formGroupName="videoStudio"> 206 <ng-container formGroupName="videoStudio">
207 <div class="form-group" [ngClass]="getTranscodingDisabledClass()"> 207 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 1df7bb164..38def2fbb 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -12,7 +12,7 @@
12> 12>
13 <ng-template pTemplate="caption"> 13 <ng-template pTemplate="caption">
14 <div class="caption"> 14 <div class="caption">
15 <div class="ml-auto"> 15 <div class="ms-auto">
16 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter> 16 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
17 </div> 17 </div>
18 </div> 18 </div>
@@ -46,10 +46,10 @@
46 </td> 46 </td>
47 47
48 <td *ngIf="follow.state === 'accepted'"> 48 <td *ngIf="follow.state === 'accepted'">
49 <span class="badge badge-green" i18n>Accepted</span> 49 <span class="pt-badge badge-green" i18n>Accepted</span>
50 </td> 50 </td>
51 <td *ngIf="follow.state === 'pending'"> 51 <td *ngIf="follow.state === 'pending'">
52 <span class="badge badge-yellow" i18n>Pending</span> 52 <span class="pt-badge badge-yellow" i18n>Pending</span>
53 </td> 53 </td>
54 54
55 <td>{{ follow.score }}</td> 55 <td>{{ follow.score }}</td>
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 767e92d18..207ca81a4 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -19,7 +19,7 @@
19 </a> 19 </a>
20 </div> 20 </div>
21 21
22 <div class="ml-auto"> 22 <div class="ms-auto">
23 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter> 23 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
24 </div> 24 </div>
25 </div> 25 </div>
@@ -48,10 +48,10 @@
48 </td> 48 </td>
49 49
50 <td *ngIf="follow.state === 'accepted'"> 50 <td *ngIf="follow.state === 'accepted'">
51 <span class="badge badge-green" i18n>Accepted</span> 51 <span class="pt-badge badge-green" i18n>Accepted</span>
52 </td> 52 </td>
53 <td *ngIf="follow.state === 'pending'"> 53 <td *ngIf="follow.state === 'pending'">
54 <span class="badge badge-yellow" i18n>Pending</span> 54 <span class="pt-badge badge-yellow" i18n>Pending</span>
55 </td> 55 </td>
56 56
57 <td>{{ follow.createdAt | date: 'short' }}</td> 57 <td>{{ follow.createdAt | date: 'short' }}</td>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index 3634951c9..b302014b6 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -13,7 +13,7 @@
13> 13>
14 <ng-template pTemplate="caption"> 14 <ng-template pTemplate="caption">
15 <div class="caption"> 15 <div class="caption">
16 <div class="ml-auto"> 16 <div class="ms-auto">
17 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> 17 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
18 </div> 18 </div>
19 </div> 19 </div>
@@ -53,11 +53,11 @@
53 </td> 53 </td>
54 54
55 <td> 55 <td>
56 <span *ngIf="videoBlock.video.nsfw" class="badge badge-red" i18n>NSFW</span> 56 <span *ngIf="videoBlock.video.nsfw" class="pt-badge badge-red" i18n>NSFW</span>
57 </td> 57 </td>
58 58
59 <td> 59 <td>
60 <span *ngIf="videoBlock.unfederated" class="badge badge-blue" i18n>Unfederated</span> 60 <span *ngIf="videoBlock.unfederated" class="pt-badge badge-blue" i18n>Unfederated</span>
61 </td> 61 </td>
62 62
63 <td> 63 <td>
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.html b/client/src/app/+admin/overview/comments/video-comment-list.component.html
index 27a5d82ff..6fdefbfe2 100644
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.html
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.html
@@ -25,7 +25,7 @@
25 </my-action-dropdown> 25 </my-action-dropdown>
26 </div> 26 </div>
27 27
28 <div class="ml-auto right-form"> 28 <div class="ms-auto right-form">
29 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> 29 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
30 30
31 <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button> 31 <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
index 772ebf272..7e0eaf280 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
@@ -57,7 +57,7 @@
57 </div> 57 </div>
58</ng-template> 58</ng-template>
59 59
60<div class="form-row" *ngIf="!isInBigView()"> <!-- hidden on large screens, as it is then displayed on the right side of the form --> 60<div class="row d-xxl-none"> <!-- hidden on large screens, as it is then displayed on the right side of the form -->
61 <div class="col-12 col-xl-3"></div> 61 <div class="col-12 col-xl-3"></div>
62 62
63 <div class="col-12 col-xl-9"> 63 <div class="col-12 col-xl-9">
@@ -67,8 +67,8 @@
67 67
68<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 68<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
69 69
70<div class="form-row mt-4"> <!-- user grid --> 70<div class="row mt-4"> <!-- user grid -->
71 <div class="form-group col-12 col-lg-4 col-xl-3"> 71 <div class="col-12 col-lg-4 col-xl-3">
72 <div class="anchor" id="user"></div> <!-- user anchor --> 72 <div class="anchor" id="user"></div> <!-- user anchor -->
73 <div *ngIf="isCreation()" class="account-title" i18n>NEW USER</div> 73 <div *ngIf="isCreation()" class="account-title" i18n>NEW USER</div>
74 <div *ngIf="!isCreation() && user" class="account-title"> 74 <div *ngIf="!isCreation() && user" class="account-title">
@@ -76,150 +76,150 @@
76 </div> 76 </div>
77 </div> 77 </div>
78 78
79 <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }"> 79 <div class="col-12 col-lg-8 col-xl-9">
80 80 <div class="row">
81 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form" [ngClass]="{ 'col-5': isInBigView() }"> 81 <form class="col" role="form" (ngSubmit)="formValidated()" [formGroup]="form">
82 <div class="form-group" *ngIf="isCreation()"> 82 <div class="form-group" *ngIf="isCreation()">
83 <label i18n for="username">Username</label> 83 <label i18n for="username">Username</label>
84 <input 84 <input
85 type="text" id="username" i18n-placeholder placeholder="john" class="form-control" 85 type="text" id="username" i18n-placeholder placeholder="john" class="form-control"
86 formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" 86 formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
87 > 87 >
88 <div *ngIf="formErrors.username" class="form-error"> 88 <div *ngIf="formErrors.username" class="form-error">
89 {{ formErrors.username }} 89 {{ formErrors.username }}
90 </div>
90 </div> 91 </div>
91 </div>
92 92
93 <div class="form-group" *ngIf="isCreation()"> 93 <div class="form-group" *ngIf="isCreation()">
94 <label i18n for="channelName">Channel name</label> 94 <label i18n for="channelName">Channel name</label>
95 <input 95 <input
96 type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control" 96 type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control"
97 formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }" 97 formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }"
98 > 98 >
99 <div *ngIf="formErrors.channelName" class="form-error"> 99 <div *ngIf="formErrors.channelName" class="form-error">
100 {{ formErrors.channelName }} 100 {{ formErrors.channelName }}
101 </div>
101 </div> 102 </div>
102 </div>
103 103
104 <div class="form-group"> 104 <div class="form-group">
105 <label i18n for="email">Email</label> 105 <label i18n for="email">Email</label>
106 <input 106 <input
107 type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control" 107 type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
108 formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" 108 formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
109 autocomplete="off" [readonly]="user && user.pluginAuth !== null" 109 autocomplete="off" [readonly]="user && user.pluginAuth !== null"
110 > 110 >
111 <div *ngIf="formErrors.email" class="form-error"> 111 <div *ngIf="formErrors.email" class="form-error">
112 {{ formErrors.email }} 112 {{ formErrors.email }}
113 </div>
113 </div> 114 </div>
114 </div>
115 115
116 <div class="form-group" *ngIf="isCreation()"> 116 <div class="form-group" *ngIf="isCreation()">
117 <label i18n for="password">Password</label> 117 <label i18n for="password">Password</label>
118 <my-help *ngIf="isPasswordOptional()"> 118 <my-help *ngIf="isPasswordOptional()">
119 <ng-template ptTemplate="customHtml"> 119 <ng-template ptTemplate="customHtml">
120 <ng-container i18n> 120 <ng-container i18n>
121 If you leave the password empty, an email will be sent to the user. 121 If you leave the password empty, an email will be sent to the user.
122 </ng-container> 122 </ng-container>
123 </ng-template> 123 </ng-template>
124 </my-help> 124 </my-help>
125 125
126 <my-input-toggle-hidden 126 <my-input-toggle-hidden
127 formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password" 127 formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
128 ></my-input-toggle-hidden> 128 ></my-input-toggle-hidden>
129 129
130 <div *ngIf="formErrors.password" class="form-error"> 130 <div *ngIf="formErrors.password" class="form-error">
131 {{ formErrors.password }} 131 {{ formErrors.password }}
132 </div>
132 </div> 133 </div>
133 </div>
134 134
135 <div class="form-group"> 135 <div class="form-group">
136 <label i18n for="role">Role</label> 136 <label i18n for="role">Role</label>
137 <div class="peertube-select-container"> 137 <div class="peertube-select-container">
138 <select id="role" formControlName="role" class="form-control"> 138 <select id="role" formControlName="role" class="form-control">
139 <option *ngFor="let role of roles" [value]="role.value"> 139 <option *ngFor="let role of roles" [value]="role.value">
140 {{ role.label }} 140 {{ role.label }}
141 </option> 141 </option>
142 </select> 142 </select>
143 </div>
144
145 <div *ngIf="formErrors.role" class="form-error">
146 {{ formErrors.role }}
147 </div>
143 </div> 148 </div>
144 149
145 <div *ngIf="formErrors.role" class="form-error"> 150 <div class="form-group">
146 {{ formErrors.role }} 151 <label i18n for="videoQuota">Video quota</label>
152
153 <my-select-custom-value
154 id="videoQuota"
155 [items]="videoQuotaOptions"
156 formControlName="videoQuota"
157 i18n-inputSuffix inputSuffix="bytes" inputType="number"
158 [clearable]="false"
159 ></my-select-custom-value>
160
161 <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
162 Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
163 At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
164 </div>
165
166 <div *ngIf="formErrors.videoQuota" class="form-error">
167 {{ formErrors.videoQuota }}
168 </div>
147 </div> 169 </div>
148 </div>
149 170
150 <div class="form-group"> 171 <div class="form-group">
151 <label i18n for="videoQuota">Video quota</label> 172 <label i18n for="videoQuotaDaily">Daily video quota</label>
152
153 <my-select-custom-value
154 id="videoQuota"
155 [items]="videoQuotaOptions"
156 formControlName="videoQuota"
157 i18n-inputSuffix inputSuffix="bytes" inputType="number"
158 [clearable]="false"
159 ></my-select-custom-value>
160
161 <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
162 Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
163 At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
164 </div>
165 173
166 <div *ngIf="formErrors.videoQuota" class="form-error"> 174 <my-select-custom-value
167 {{ formErrors.videoQuota }} 175 id="videoQuotaDaily"
168 </div> 176 [items]="videoQuotaDailyOptions"
169 </div> 177 formControlName="videoQuotaDaily"
178 i18n-inputSuffix inputSuffix="bytes" inputType="number"
179 [clearable]="false"
180 ></my-select-custom-value>
170 181
171 <div class="form-group"> 182 <div *ngIf="formErrors.videoQuotaDaily" class="form-error">
172 <label i18n for="videoQuotaDaily">Daily video quota</label> 183 {{ formErrors.videoQuotaDaily }}
173 184 </div>
174 <my-select-custom-value
175 id="videoQuotaDaily"
176 [items]="videoQuotaDailyOptions"
177 formControlName="videoQuotaDaily"
178 i18n-inputSuffix inputSuffix="bytes" inputType="number"
179 [clearable]="false"
180 ></my-select-custom-value>
181
182 <div *ngIf="formErrors.videoQuotaDaily" class="form-error">
183 {{ formErrors.videoQuotaDaily }}
184 </div> 185 </div>
185 </div>
186 186
187 <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0"> 187 <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0">
188 <label i18n for="pluginAuth">Auth plugin</label> 188 <label i18n for="pluginAuth">Auth plugin</label>
189 189
190 <div class="peertube-select-container"> 190 <div class="peertube-select-container">
191 <select id="pluginAuth" formControlName="pluginAuth" class="form-control"> 191 <select id="pluginAuth" formControlName="pluginAuth" class="form-control">
192 <option [value]="null" i18n>None (local authentication)</option> 192 <option [value]="null" i18n>None (local authentication)</option>
193 <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option> 193 <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option>
194 </select> 194 </select>
195 </div>
195 </div> 196 </div>
196 </div>
197 197
198 <div class="form-group"> 198 <div class="form-group">
199 <my-peertube-checkbox 199 <my-peertube-checkbox
200 inputName="byPassAutoBlock" formControlName="byPassAutoBlock" 200 inputName="byPassAutoBlock" formControlName="byPassAutoBlock"
201 i18n-labelText labelText="Doesn't need review before a video goes public" 201 i18n-labelText labelText="Doesn't need review before a video goes public"
202 ></my-peertube-checkbox> 202 ></my-peertube-checkbox>
203 </div> 203 </div>
204 204
205 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> 205 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
206 </form> 206 </form>
207 207
208 <div *ngIf="isInBigView()" class="col-7"> 208 <div class="d-none d-xxl-block col-7">
209 <ng-template *ngTemplateOutlet="dashboard"></ng-template> 209 <ng-template *ngTemplateOutlet="dashboard"></ng-template>
210 </div>
210 </div> 211 </div>
211
212 </div> 212 </div>
213</div> 213</div>
214 214
215 215
216<div *ngIf="!isCreation() && user && user.pluginAuth === null" class="form-row mt-4"> <!-- danger zone grid --> 216<div *ngIf="!isCreation() && user && user.pluginAuth === null" class="row mt-4"> <!-- danger zone grid -->
217 <div class="form-group col-12 col-lg-4 col-xl-3"> 217 <div class="col-12 col-lg-4 col-xl-3">
218 <div class="anchor" id="danger"></div> <!-- danger zone anchor --> 218 <div class="anchor" id="danger"></div> <!-- danger zone anchor -->
219 <div i18n class="account-title account-title-danger">DANGER ZONE</div> 219 <div i18n class="account-title account-title-danger">DANGER ZONE</div>
220 </div> 220 </div>
221 221
222 <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }"> 222 <div class="col-12 col-lg-8 col-xl-9">
223 223
224 <div class="danger-zone"> 224 <div class="danger-zone">
225 <div class="form-group reset-password-email"> 225 <div class="form-group reset-password-email">
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.ts b/client/src/app/+admin/overview/users/user-edit/user-edit.ts
index 069b62a53..395d07423 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.ts
@@ -46,10 +46,6 @@ export abstract class UserEdit extends FormReactive implements OnInit {
46 .concat(this.serverConfig.plugin.registeredExternalAuths.map(p => p.npmName)) 46 .concat(this.serverConfig.plugin.registeredExternalAuths.map(p => p.npmName))
47 } 47 }
48 48
49 isInBigView () {
50 return this.screenService.getWindowInnerWidth() > 1600
51 }
52
53 buildRoles () { 49 buildRoles () {
54 const authUser = this.auth.getUser() 50 const authUser = this.auth.getUser()
55 51
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.html b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
index 1238d1839..35f36e465 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-password.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
@@ -1,20 +1,16 @@
1<form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> 1<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
2 <div class="form-group"> 2 <div class="input-group">
3 <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
4 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
5 >
6 <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
7 <ng-container *ngIf="!showPassword" i18n>Show</ng-container>
8 <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container>
9 </button>
10 </div>
3 11
4 <div class="input-group"> 12 <div *ngIf="formErrors.password" class="form-error">
5 <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control" 13 {{ formErrors.password }}
6 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
7 >
8 <div class="input-group-append">
9 <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
10 <ng-container *ngIf="!showPassword" i18n>Show</ng-container>
11 <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container>
12 </button>
13 </div>
14 </div>
15 <div *ngIf="formErrors.password" class="form-error">
16 {{ formErrors.password }}
17 </div>
18 </div> 14 </div>
19 15
20 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> 16 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss
index acb680682..54f782086 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss
+++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss
@@ -1,13 +1,9 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4input:not([type=submit]):not([type=checkbox]) { 4input[type=text],
5input[type=password] {
5 @include peertube-input-text(340px); 6 @include peertube-input-text(340px);
6
7 display: block;
8 border-top-right-radius: 0;
9 border-bottom-right-radius: 0;
10 border-right: 0;
11} 7}
12 8
13input[type=submit] { 9input[type=submit] {
@@ -17,7 +13,3 @@ input[type=submit] {
17 13
18 margin-top: 10px; 14 margin-top: 10px;
19} 15}
20
21.input-group-append {
22 height: 30px;
23}
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index 62eeef8fe..f6915ae9a 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@@ -26,7 +26,7 @@
26 </a> 26 </a>
27 </div> 27 </div>
28 28
29 <div class="ml-auto"> 29 <div class="ms-auto">
30 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> 30 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
31 </div> 31 </div>
32 32
@@ -90,7 +90,7 @@
90 </my-user-moderation-dropdown> 90 </my-user-moderation-dropdown>
91 </td> 91 </td>
92 92
93 <td *ngIf="isSelected('username')"> 93 <td *ngIf="isSelected('username')" class="cell-username">
94 <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/a/' + user.username ]"> 94 <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/a/' + user.username ]">
95 <div class="chip two-lines"> 95 <div class="chip two-lines">
96 <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar> 96 <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar>
@@ -101,13 +101,13 @@
101 </div> 101 </div>
102 </a> 102 </a>
103 103
104 <div *ngIf="user.accountMutedStatus.mutedByInstance" class="badges-username badge badge-red" i18n>Muted</div> 104 <div *ngIf="user.accountMutedStatus.mutedByInstance" class="pt-badge badge-red" i18n>Muted</div>
105 <div *ngIf="user.blocked" class="badges-username badge badge-red" i18n>Banned</div> 105 <div *ngIf="user.blocked" class="pt-badge badge-red" i18n>Banned</div>
106 </td> 106 </td>
107 107
108 <td *ngIf="isSelected('role')"> 108 <td *ngIf="isSelected('role')">
109 <span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span> 109 <span *ngIf="user.blocked" class="pt-badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span>
110 <span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span> 110 <span *ngIf="!user.blocked" class="pt-badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span>
111 </td> 111 </td>
112 112
113 <td *ngIf="isSelected('email')" [title]="user.email"> 113 <td *ngIf="isSelected('email')" [title]="user.email">
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
index 8160703f0..6449f5064 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
@@ -1,5 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3@use '~bootstrap/scss/functions' as *;
3 4
4.add-button { 5.add-button {
5 @include create-button; 6 @include create-button;
@@ -23,8 +24,8 @@ tr.banned > td {
23 font-weight: $font-semibold; 24 font-weight: $font-semibold;
24} 25}
25 26
26.badges-username { 27.cell-username .pt-badge {
27 margin-left: 15px; 28 @include margin-left(15px);
28} 29}
29 30
30.user-table-primary-text .glyphicon { 31.user-table-primary-text .glyphicon {
diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index 75d9be5f1..2f36c27b7 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -21,7 +21,7 @@
21 </my-action-dropdown> 21 </my-action-dropdown>
22 </div> 22 </div>
23 23
24 <div class="ml-auto right-form"> 24 <div class="ms-auto right-form">
25 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> 25 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
26 26
27 <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button> 27 <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
@@ -67,25 +67,25 @@
67 </td> 67 </td>
68 68
69 <td> 69 <td>
70 <span class="badge badge-blue" *ngIf="video.isLocal">Local</span> 70 <span class="pt-badge badge-blue" *ngIf="video.isLocal">Local</span>
71 <span class="badge badge-purple" *ngIf="!video.isLocal">Remote</span> 71 <span class="pt-badge badge-purple" *ngIf="!video.isLocal">Remote</span>
72 72
73 <span [ngClass]="getPrivacyBadgeClass(video)" class="badge">{{ video.privacy.label }}</span> 73 <span [ngClass]="getPrivacyBadgeClass(video)" class="pt-badge">{{ video.privacy.label }}</span>
74 74
75 <span *ngIf="video.nsfw" class="badge badge-red" i18n>NSFW</span> 75 <span *ngIf="video.nsfw" class="pt-badge badge-red" i18n>NSFW</span>
76 76
77 <span *ngIf="isUnpublished(video)" class="badge badge-yellow" i18n>{{ video.state.label }}</span> 77 <span *ngIf="isUnpublished(video)" class="pt-badge badge-yellow" i18n>{{ video.state.label }}</span>
78 78
79 <span *ngIf="isAccountBlocked(video)" class="badge badge-red" i18n>Account muted</span> 79 <span *ngIf="isAccountBlocked(video)" class="pt-badge badge-red" i18n>Account muted</span>
80 <span *ngIf="isServerBlocked(video)" class="badge badge-red" i18n>Server muted</span> 80 <span *ngIf="isServerBlocked(video)" class="pt-badge badge-red" i18n>Server muted</span>
81 81
82 <span *ngIf="isVideoBlocked(video)" class="badge badge-red" i18n>Blocked</span> 82 <span *ngIf="isVideoBlocked(video)" class="pt-badge badge-red" i18n>Blocked</span>
83 </td> 83 </td>
84 84
85 <td> 85 <td>
86 <span *ngIf="isHLS(video)" class="badge badge-blue">HLS</span> 86 <span *ngIf="isHLS(video)" class="pt-badge badge-blue">HLS</span>
87 <span *ngIf="isWebTorrent(video)" class="badge badge-blue">WebTorrent ({{ video.files.length }})</span> 87 <span *ngIf="isWebTorrent(video)" class="pt-badge badge-blue">WebTorrent ({{ video.files.length }})</span>
88 <span *ngIf="video.isLive" class="badge badge-blue">Live</span> 88 <span *ngIf="video.isLive" class="pt-badge badge-blue">Live</span>
89 89
90 <span *ngIf="!isImport(video) && !video.isLive && video.isLocal">{{ getFilesSize(video) | bytes: 1 }}</span> 90 <span *ngIf="!isImport(video) && !video.isLive && video.isLocal">{{ getFilesSize(video) | bytes: 1 }}</span>
91 </td> 91 </td>
@@ -121,7 +121,7 @@
121 </ul> 121 </ul>
122 </div> 122 </div>
123 123
124 <my-embed class="ml-auto" [video]="video"></my-embed> 124 <my-embed class="ms-auto" [video]="video"></my-embed>
125 </div> 125 </div>
126 </td> 126 </td>
127 </tr> 127 </tr>
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
index cb47b6548..dcd41a1b4 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.scss
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -7,10 +7,8 @@ my-embed {
7 width: 50%; 7 width: 50%;
8} 8}
9 9
10.badge { 10.pt-badge {
11 @include peertube-badge; 11 @include margin-right(5px);
12
13 margin-right: 5px;
14} 12}
15 13
16.video-info > div { 14.video-info > div {
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 33575ef52..23dde86b4 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -32,9 +32,9 @@
32 <ng-container *ngFor="let plugin of plugins" > 32 <ng-container *ngFor="let plugin of plugins" >
33 <my-plugin-card [plugin]="plugin" [version]="plugin.latestVersion" [pluginType]="pluginType"> 33 <my-plugin-card [plugin]="plugin" [version]="plugin.latestVersion" [pluginType]="pluginType">
34 <div ngProjectAs="badges"> 34 <div ngProjectAs="badges">
35 <span i18n *ngIf="plugin.installed" class="badge badge-success">Installed</span> 35 <span i18n *ngIf="plugin.installed" class="pt-badge badge-success">Installed</span>
36 36
37 <span *ngIf="plugin.official" class="badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft"> 37 <span *ngIf="plugin.official" class="pt-badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft">
38 Official 38 Official
39 </span> 39 </span>
40 </div> 40 </div>
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 10401e9df..55baa038f 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
@@ -22,11 +22,10 @@
22 } 22 }
23} 23}
24 24
25.badge { 25.pt-badge {
26 @include margin-left(15px); 26 @include margin-left(15px);
27 27
28 font-size: 13px; 28 font-size: 13px;
29 font-weight: $font-semibold;
30} 29}
31 30
32.alert { 31.alert {
diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html
index 301591786..8068fe626 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
@@ -21,7 +21,7 @@
21 <span i18n="Selector for the list displaying jobs, filtering by their state">any</span> 21 <span i18n="Selector for the list displaying jobs, filtering by their state">any</span>
22 </ng-option> 22 </ng-option>
23 <ng-option *ngFor="let state of jobStates" [value]="state"> 23 <ng-option *ngFor="let state of jobStates" [value]="state">
24 <span class="badge" [ngClass]="getJobStateClass(state)">{{ state }}</span> 24 <span class="pt-badge" [ngClass]="getJobStateClass(state)">{{ state }}</span>
25 </ng-option> 25 </ng-option>
26 </ng-select> 26 </ng-select>
27 </div> 27 </div>
@@ -62,7 +62,7 @@
62 <td class="job-priority c-hand" [pRowToggler]="job">{{ job.priority }}</td> 62 <td class="job-priority c-hand" [pRowToggler]="job">{{ job.priority }}</td>
63 63
64 <td class="job-state c-hand" [pRowToggler]="job" *ngIf="jobState === 'all'"> 64 <td class="job-state c-hand" [pRowToggler]="job" *ngIf="jobState === 'all'">
65 <span class="badge" [ngClass]="getJobStateClass(job.state)">{{ job.state }}</span> 65 <span class="pt-badge" [ngClass]="getJobStateClass(job.state)">{{ job.state }}</span>
66 </td> 66 </td>
67 67
68 <td *ngIf="hasGlobalProgress()" class="job-progress c-hand" [pRowToggler]="job"> 68 <td *ngIf="hasGlobalProgress()" class="job-progress c-hand" [pRowToggler]="job">
@@ -107,8 +107,8 @@
107 </ng-container> 107 </ng-container>
108 108
109 <ng-container *ngIf="jobState !== 'all'"> 109 <ng-container *ngIf="jobState !== 'all'">
110 <ng-container *ngIf="jobType === 'all'" i18n>No <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container> 110 <ng-container *ngIf="jobType === 'all'" i18n>No <span class="pt-badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container>
111 <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container> 111 <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="pt-badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container>
112 </ng-container> 112 </ng-container>
113 </div> 113 </div>
114 </div> 114 </div>
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index a9e5e8d4b..eadaf7904 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -55,7 +55,3 @@ pre {
55.job-error { 55.job-error {
56 color: #ff0000; 56 color: #ff0000;
57} 57}
58
59.select-filter-block .badge {
60 @include peertube-badge;
61}
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
index 3751747a9..61b89082c 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -3,42 +3,41 @@
3<div class="margin-content"> 3<div class="margin-content">
4 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> 4 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
5 5
6 <div class="form-row"> <!-- channel grid --> 6 <div class="row"> <!-- channel grid -->
7 <div class="form-group col-12 col-lg-4 col-xl-3"> 7 <div class="col-12 col-lg-4 col-xl-3">
8 <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div> 8 <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div>
9 <div *ngIf="!isCreation() && videoChannel" class="video-channel-title" i18n>CHANNEL</div> 9 <div *ngIf="!isCreation() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
10 </div> 10 </div>
11 11
12 <div class="form-group col-12 col-lg-8 col-xl-9"> 12 <div class="col-12 col-lg-8 col-xl-9">
13 <h6 i18n>Banner image of the channel</h6> 13 <h6 i18n>Banner image of the channel</h6>
14 14
15 <my-actor-banner-edit 15 <my-actor-banner-edit
16 *ngIf="videoChannel" [previewImage]="isCreation()" 16 *ngIf="videoChannel" [previewImage]="isCreation()"
17 [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()" 17 [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
18 ></my-actor-banner-edit> 18 ></my-actor-banner-edit>
19 19
20 <my-actor-avatar-edit 20 <my-actor-avatar-edit
21 *ngIf="videoChannel" [previewImage]="isCreation()" 21 *ngIf="videoChannel" [previewImage]="isCreation()"
22 [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()" 22 [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
23 [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()" 23 [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
24 ></my-actor-avatar-edit> 24 ></my-actor-avatar-edit>
25 25
26 <div class="form-group" *ngIf="isCreation()"> 26 <div class="form-group" *ngIf="isCreation()">
27 <label i18n for="name">Name</label> 27 <label i18n for="name">Name</label>
28
28 <div class="input-group"> 29 <div class="input-group">
29 <input 30 <input
30 type="text" id="name" i18n-placeholder placeholder="Example: my_channel" 31 type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
31 formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control" 32 formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
32 > 33 >
33 <div class="input-group-append"> 34 <div class="input-group-text">@{{ instanceHost }}</div>
34 <span class="input-group-text">@{{ instanceHost }}</span>
35 </div>
36 </div> 35 </div>
37 <div *ngIf="formErrors['name']" class="form-error"> 36 <div *ngIf="formErrors['name']" class="form-error">
38 {{ formErrors['name'] }} 37 {{ formErrors['name'] }}
39 </div> 38 </div>
40 </div> 39 </div>
41 40
42 <div class="form-group"> 41 <div class="form-group">
43 <label i18n for="display-name">Display name</label> 42 <label i18n for="display-name">Display name</label>
44 <input 43 <input
@@ -49,7 +48,7 @@
49 {{ formErrors['display-name'] }} 48 {{ formErrors['display-name'] }}
50 </div> 49 </div>
51 </div> 50 </div>
52 51
53 <div class="form-group"> 52 <div class="form-group">
54 <label i18n for="description">Description</label> 53 <label i18n for="description">Description</label>
55 <textarea 54 <textarea
@@ -60,7 +59,7 @@
60 {{ formErrors.description }} 59 {{ formErrors.description }}
61 </div> 60 </div>
62 </div> 61 </div>
63 62
64 <div class="form-group"> 63 <div class="form-group">
65 <label for="support">Support</label> 64 <label for="support">Support</label>
66 <my-help 65 <my-help
@@ -75,22 +74,22 @@
75 {{ formErrors.support }} 74 {{ formErrors.support }}
76 </div> 75 </div>
77 </div> 76 </div>
78 77
79 <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()"> 78 <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
80 <my-peertube-checkbox 79 <my-peertube-checkbox
81 inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate" 80 inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
82 i18n-labelText labelText="Overwrite support field of all videos of this channel" 81 i18n-labelText labelText="Overwrite support field of all videos of this channel"
83 ></my-peertube-checkbox> 82 ></my-peertube-checkbox>
84 </div> 83 </div>
85 84
86 </div> 85 </div>
87 </div> 86 </div>
88 87
89 <div class="form-row"> <!-- submit placement block --> 88 <div class="row"> <!-- submit placement block -->
90 <div class="col-md-7 col-xl-5"></div> 89 <div class="col-md-7 col-xl-5"></div>
91 <div class="col-md-5 col-xl-5 d-inline-flex"> 90 <div class="col-md-5 col-xl-5 d-inline-flex">
92 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> 91 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
93 </div> 92 </div>
94 </div> 93 </div>
95 </form> 94 </form>
96</div> \ No newline at end of file 95</div>
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
index d010d6277..2c720314a 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
@@ -24,31 +24,21 @@ my-actor-banner-edit {
24 max-width: 500px; 24 max-width: 500px;
25} 25}
26 26
27.input-group { 27input[type=text] {
28 @include peertube-input-group(fit-content); 28 @include peertube-input-text(340px);
29}
30
31.input-group-append {
32 height: 30px;
33}
34
35input {
36 &[type=text] {
37 @include peertube-input-text(340px);
38 29
39 display: block; 30 display: block;
40 31
41 &#name { 32 &#name {
42 width: auto; 33 width: auto;
43 flex-grow: 1; 34 flex-grow: 1;
44 }
45 } 35 }
36}
46 37
47 &[type=submit] { 38input[type=submit] {
48 @include peertube-button; 39 @include peertube-button;
49 @include orange-button; 40 @include orange-button;
50 @include margin-left(auto); 41 @include margin-left(auto);
51 }
52} 42}
53 43
54textarea { 44textarea {
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
index 68d094a4f..8f3a55be5 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
@@ -3,8 +3,9 @@
3 <ng-container i18n>Applications</ng-container> 3 <ng-container i18n>Applications</ng-container>
4</h1> 4</h1>
5 5
6<div class="form-row"> <!-- built-in token grid --> 6<div class="row"> <!-- built-in token grid -->
7 <div class="form-group col-12 col-lg-4 col-xl-3"> 7
8 <div class="group col-12 col-lg-4 col-xl-3">
8 <h2 i18n class="applications-title">SUBSCRIPTION FEED</h2> 9 <h2 i18n class="applications-title">SUBSCRIPTION FEED</h2>
9 <div i18n class="applications-description"> 10 <div i18n class="applications-description">
10 Use third-party feed aggregators to retrieve the list of videos from 11 Use third-party feed aggregators to retrieve the list of videos from
@@ -12,7 +13,7 @@
12 </div> 13 </div>
13 </div> 14 </div>
14 15
15 <div class="form-group col-12 col-lg-8 col-xl-9"> 16 <div class="col-12 col-lg-8 col-xl-9">
16 17
17 <div class="form-group"> 18 <div class="form-group">
18 <label i18n for="feed-url">Feed URL</label> 19 <label i18n for="feed-url">Feed URL</label>
@@ -29,7 +30,7 @@
29 </div> 30 </div>
30</div> 31</div>
31 32
32<div class="form-row mt-4"> <!-- submit placement block --> 33<div class="row mt-4"> <!-- submit placement block -->
33 <div class="col-md-7 col-xl-5"></div> 34 <div class="col-md-7 col-xl-5"></div>
34 <div class="col-md-5 col-xl-5"> 35 <div class="col-md-5 col-xl-5">
35 <input (click)="renewToken()" type="submit" i18n-value value="Renew token"> 36 <input (click)="renewToken()" type="submit" i18n-value value="Renew token">
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index f0e9f4010..b98cd1156 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -1,11 +1,11 @@
1<h1 class="sr-only" i18n>Notifications</h1> 1<h1 class="visually-hidden" i18n>Notifications</h1>
2<div class="header"> 2<div class="header">
3 <a routerLink="/my-account/settings" fragment="notifications" i18n> 3 <a routerLink="/my-account/settings" fragment="notifications" i18n>
4 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> 4 <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
5 Notification preferences 5 Notification preferences
6 </a> 6 </a>
7 7
8 <div class="peertube-select-container peertube-select-button ml-2 mr-2"> 8 <div class="peertube-select-container peertube-select-button ms-2 me-2">
9 <select [(ngModel)]="notificationSortType" (ngModelChange)="onChangeSortColumn()" class="form-control"> 9 <select [(ngModel)]="notificationSortType" (ngModelChange)="onChangeSortColumn()" class="form-control">
10 <option value="undefined" disabled>Sort by</option> 10 <option value="undefined" disabled>Sort by</option>
11 <option value="createdAt" i18n>Newest first</option> 11 <option value="createdAt" i18n>Newest first</option>
@@ -13,7 +13,7 @@
13 </select> 13 </select>
14 </div> 14 </div>
15 15
16 <button class="btn ml-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()"> 16 <button class="btn ms-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
17 <ng-container *ngIf="hasUnreadNotifications()"> 17 <ng-container *ngIf="hasUnreadNotifications()">
18 <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon> 18 <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon>
19 19
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 cbac81d01..78f7ef1d5 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
@@ -6,10 +6,6 @@ label {
6 font-size: 100%; 6 font-size: 100%;
7} 7}
8 8
9.form-group:first-child {
10 margin-bottom: 15px;
11}
12
13input#username + .muted { 9input#username + .muted {
14 margin-top: 5px; 10 margin-top: 5px;
15} 11}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 8ca197fd4..abcfe54a6 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -1,18 +1,19 @@
1<h1 class="sr-only" i18n>Settings</h1> 1<h1 class="visually-hidden" i18n>Settings</h1>
2<div class="form-row"> <!-- preview -->
3 <div class="form-group col-12 col-lg-4 col-xl-3"></div>
4 2
5 <div class="form-group col-12 col-lg-8 col-xl-9"> 3<div class="row"> <!-- preview -->
4 <div class="col-12 col-lg-4 col-xl-3"></div>
5
6 <div class="col-12 col-lg-8 col-xl-9">
6 <my-actor-avatar-edit [actor]="user.account" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"></my-actor-avatar-edit> 7 <my-actor-avatar-edit [actor]="user.account" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"></my-actor-avatar-edit>
7 </div> 8 </div>
8</div> 9</div>
9 10
10<div class="form-row"> <!-- profile settings grid --> 11<div class="row mt-3"> <!-- profile settings grid -->
11 <div class="form-group col-12 col-lg-4 col-xl-3"> 12 <div class="col-12 col-lg-4 col-xl-3">
12 <h2 i18n class="account-title">PROFILE SETTINGS</h2> 13 <h2 i18n class="account-title">PROFILE SETTINGS</h2>
13 </div> 14 </div>
14 15
15 <div class="form-group col-12 col-lg-8 col-xl-9"> 16 <div class="col-12 col-lg-8 col-xl-9">
16 17
17 <my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota> 18 <my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
18 19
@@ -20,64 +21,64 @@
20 </div> 21 </div>
21</div> 22</div>
22 23
23<div class="form-row mt-5"> <!-- interface grid --> 24<div class="row mt-5"> <!-- interface grid -->
24 <div class="form-group col-12 col-lg-4 col-xl-3"> 25 <div class="col-12 col-lg-4 col-xl-3">
25 <h2 i18n class="account-title">INTERFACE</h2> 26 <h2 i18n class="account-title">INTERFACE</h2>
26 </div> 27 </div>
27 28
28 <div class="form-group col-12 col-lg-8 col-xl-9"> 29 <div class="col-12 col-lg-8 col-xl-9">
29 <my-user-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-interface-settings> 30 <my-user-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-interface-settings>
30 </div> 31 </div>
31</div> 32</div>
32 33
33<div class="form-row mt-5"> <!-- video settings grid --> 34<div class="row mt-5"> <!-- video settings grid -->
34 <div class="form-group col-12 col-lg-4 col-xl-3"> 35 <div class="col-12 col-lg-4 col-xl-3">
35 <div class="anchor" id="video-settings"></div> <!-- video settings anchor --> 36 <div class="anchor" id="video-settings"></div> <!-- video settings anchor -->
36 <h2 i18n class="account-title">VIDEO SETTINGS</h2> 37 <h2 i18n class="account-title">VIDEO SETTINGS</h2>
37 </div> 38 </div>
38 39
39 <div class="form-group col-12 col-lg-8 col-xl-9"> 40 <div class="col-12 col-lg-8 col-xl-9">
40 <my-user-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-video-settings> 41 <my-user-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-video-settings>
41 </div> 42 </div>
42</div> 43</div>
43 44
44<div class="form-row mt-5"> <!-- notifications grid --> 45<div class="row mt-5"> <!-- notifications grid -->
45 <div class="form-group col-12 col-lg-4 col-xl-3"> 46 <div class="col-12 col-lg-4 col-xl-3">
46 <div class="anchor" id="notifications"></div> <!-- notifications anchor --> 47 <div class="anchor" id="notifications"></div> <!-- notifications anchor -->
47 <h2 i18n class="account-title">NOTIFICATIONS</h2> 48 <h2 i18n class="account-title">NOTIFICATIONS</h2>
48 </div> 49 </div>
49 50
50 <div class="form-group col-12 col-lg-8 col-xl-9"> 51 <div class="col-12 col-lg-8 col-xl-9">
51 <my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences> 52 <my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
52 </div> 53 </div>
53</div> 54</div>
54 55
55<div class="form-row mt-5" *ngIf="user.pluginAuth === null"> <!-- password grid --> 56<div class="row mt-5" *ngIf="user.pluginAuth === null"> <!-- password grid -->
56 <div class="form-group col-12 col-lg-4 col-xl-3"> 57 <div class="col-12 col-lg-4 col-xl-3">
57 <h2 i18n class="account-title">PASSWORD</h2> 58 <h2 i18n class="account-title">PASSWORD</h2>
58 </div> 59 </div>
59 60
60 <div class="form-group col-12 col-lg-8 col-xl-9"> 61 <div class="col-12 col-lg-8 col-xl-9">
61 <my-account-change-password></my-account-change-password> 62 <my-account-change-password></my-account-change-password>
62 </div> 63 </div>
63</div> 64</div>
64 65
65<div class="form-row mt-5"> <!-- email grid --> 66<div class="row mt-5"> <!-- email grid -->
66 <div class="form-group col-12 col-lg-4 col-xl-3"> 67 <div class="col-12 col-lg-4 col-xl-3">
67 <h2 i18n class="account-title">EMAIL</h2> 68 <h2 i18n class="account-title">EMAIL</h2>
68 </div> 69 </div>
69 70
70 <div class="form-group col-12 col-lg-8 col-xl-9"> 71 <div class="col-12 col-lg-8 col-xl-9">
71 <my-account-change-email></my-account-change-email> 72 <my-account-change-email></my-account-change-email>
72 </div> 73 </div>
73</div> 74</div>
74 75
75<div class="form-row mt-5"> <!-- danger zone grid --> 76<div class="row mt-5"> <!-- danger zone grid -->
76 <div class="form-group col-12 col-lg-4 col-xl-3"> 77 <div class="col-12 col-lg-4 col-xl-3">
77 <h2 i18n class="account-title account-title-danger">DANGER ZONE</h2> 78 <h2 i18n class="account-title account-title-danger">DANGER ZONE</h2>
78 </div> 79 </div>
79 80
80 <div class="form-group col-12 col-lg-8 col-xl-9"> 81 <div class="col-12 col-lg-8 col-xl-9">
81 <my-account-danger-zone [user]="user"></my-account-danger-zone> 82 <my-account-danger-zone [user]="user"></my-account-danger-zone>
82 </div> 83 </div>
83</div> 84</div>
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 1c216d79d..8206f4dd8 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,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3@use '~bootstrap/scss/functions' as *;
3 4
4.account-title { 5.account-title {
5 @include settings-big-title; 6 @include settings-big-title;
@@ -9,6 +10,6 @@
9 } 10 }
10} 11}
11 12
12.form-group { 13.row > div {
13 max-width: 500px; 14 max-width: 500px;
14} 15}
diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index b465d0156..1c44c8472 100644
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -1,4 +1,4 @@
1<div class="row"> 1<div class="root">
2 <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown> 2 <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
3 3
4 <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }"> 4 <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index 1ec25315a..6275b7ac2 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,7 +1,7 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.row { 4.root {
5 @include sub-menu-h1; 5 @include sub-menu-h1;
6 6
7 flex-direction: column; 7 flex-direction: column;
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index f17f62bba..aa51764be 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -1,7 +1,7 @@
1<h1> 1<h1>
2 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon> 2 <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
3 <ng-container i18n>My channels</ng-container> 3 <ng-container i18n>My channels</ng-container>
4 <span class="badge badge-secondary">{{ totalItems }}</span> 4 <span *ngIf="totalItems" class="pt-badge badge-secondary">{{ totalItems }}</span>
5</h1> 5</h1>
6 6
7<my-channels-setup-message [hideLink]="true"></my-channels-setup-message> 7<my-channels-setup-message [hideLink]="true"></my-channels-setup-message>
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
index a8a3da863..2827f8c41 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.html
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -2,7 +2,7 @@
2 <span> 2 <span>
3 <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon> 3 <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
4 <ng-container i18n>My followers</ng-container> 4 <ng-container i18n>My followers</ng-container>
5 <span class="badge badge-secondary"> {{ pagination.totalItems }}</span> 5 <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
6 </span> 6 </span>
7</h1> 7</h1>
8 8
diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.html b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
index 391c4d3be..11d460b19 100644
--- a/client/src/app/+my-library/my-follows/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
@@ -2,7 +2,7 @@
2 <span> 2 <span>
3 <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon> 3 <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
4 <ng-container i18n>My subscriptions</ng-container> 4 <ng-container i18n>My subscriptions</ng-container>
5 <span class="badge badge-secondary"> {{ pagination.totalItems }}</span> 5 <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
6 </span> 6 </span>
7</h1> 7</h1>
8 8
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index 14bf01804..76367c029 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -1,6 +1,7 @@
1<h1> 1<h1>
2 <my-global-icon iconName="history" aria-hidden="true"></my-global-icon> 2 <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
3 <ng-container i18n>My watch history</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span> 3 <ng-container i18n>My watch history</ng-container>
4 <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
4</h1> 5</h1>
5 6
6<div class="top-buttons"> 7<div class="top-buttons">
diff --git a/client/src/app/+my-library/my-library.component.html b/client/src/app/+my-library/my-library.component.html
index b465d0156..1c44c8472 100644
--- a/client/src/app/+my-library/my-library.component.html
+++ b/client/src/app/+my-library/my-library.component.html
@@ -1,4 +1,4 @@
1<div class="row"> 1<div class="root">
2 <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown> 2 <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
3 3
4 <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }"> 4 <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
diff --git a/client/src/app/+my-library/my-library.component.scss b/client/src/app/+my-library/my-library.component.scss
index 1ec25315a..6275b7ac2 100644
--- a/client/src/app/+my-library/my-library.component.scss
+++ b/client/src/app/+my-library/my-library.component.scss
@@ -1,7 +1,7 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.row { 4.root {
5 @include sub-menu-h1; 5 @include sub-menu-h1;
6 6
7 flex-direction: column; 7 flex-direction: column;
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index c29c71c0a..01470e46f 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -65,7 +65,7 @@
65 <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td> 65 <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td>
66 66
67 <td> 67 <td>
68 <span class="badge" 68 <span class="pt-badge"
69 [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span> 69 [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span>
70 </td> 70 </td>
71 </tr> 71 </tr>
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
index e0d4e8f14..c5f0db17f 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
@@ -50,7 +50,7 @@
50 </td> 50 </td>
51 51
52 <td> 52 <td>
53 <span class="badge" [ngClass]="getVideoImportStateClass(videoImport.state.id)"> 53 <span class="pt-badge" [ngClass]="getVideoImportStateClass(videoImport.state.id)">
54 {{ videoImport.state.label }} 54 {{ videoImport.state.label }}
55 </span> 55 </span>
56 </td> 56 </td>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
index c39e90a1e..35682cf81 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
@@ -20,13 +20,13 @@
20 20
21<form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> 21<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
22 22
23 <div class="form-row"> <!-- playlist grid --> 23 <div class="row"> <!-- playlist grid -->
24 <div class="form-group col-12 col-lg-4 col-xl-3"> 24 <div class="col-12 col-lg-4 col-xl-3">
25 <div *ngIf="isCreation()" class="video-playlist-title" i18n>NEW PLAYLIST</div> 25 <div *ngIf="isCreation()" class="video-playlist-title" i18n>NEW PLAYLIST</div>
26 <div *ngIf="!isCreation() && videoPlaylistToUpdate" class="video-playlist-title" i18n>PLAYLIST</div> 26 <div *ngIf="!isCreation() && videoPlaylistToUpdate" class="video-playlist-title" i18n>PLAYLIST</div>
27 </div> 27 </div>
28 28
29 <div class="form-group col-12 col-lg-8 col-xl-9"> 29 <div class="col-12 col-lg-8 col-xl-9">
30 30
31 <div class="col-md-12 col-xl-6"> 31 <div class="col-md-12 col-xl-6">
32 <div class="form-group"> 32 <div class="form-group">
@@ -88,7 +88,7 @@
88 </div> 88 </div>
89 </div> 89 </div>
90 90
91 <div class="form-row"> <!-- submit placement block --> 91 <div class="row"> <!-- submit placement block -->
92 <div class="col-md-7 col-xl-5"></div> 92 <div class="col-md-7 col-xl-5"></div>
93 <div class="col-md-5 col-xl-5 d-inline-flex"> 93 <div class="col-md-5 col-xl-5 d-inline-flex">
94 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> 94 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index 25b742bff..0091f70be 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -1,6 +1,7 @@
1<h1> 1<h1>
2 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> 2 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
3 <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span> 3 <ng-container i18n>My playlists</ng-container>
4 <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
4</h1> 5</h1>
5 6
6<my-channels-setup-message></my-channels-setup-message> 7<my-channels-setup-message></my-channels-setup-message>
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
index 955fd4884..56ff0e788 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
@@ -17,7 +17,7 @@
17 </div> 17 </div>
18 18
19 <div class="modal-footer"> 19 <div class="modal-footer">
20 <div class="form-group inputs"> 20 <div class="inputs">
21 <input 21 <input
22 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button" 22 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
23 (click)="dismiss()" (key.enter)="dismiss()" 23 (click)="dismiss()" (key.enter)="dismiss()"
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 0eb694162..48c073192 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
@@ -4,7 +4,3 @@
4p-autocomplete { 4p-autocomplete {
5 display: block; 5 display: block;
6} 6}
7
8.form-group {
9 margin: 20px 0;
10}
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index 7f12e2c71..146dcf41e 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -2,7 +2,7 @@
2 <span> 2 <span>
3 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon> 3 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
4 <ng-container i18n>My videos</ng-container> 4 <ng-container i18n>My videos</ng-container>
5 <span class="badge badge-secondary"> {{ pagination.totalItems }}</span> 5 <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
6 </span> 6 </span>
7 7
8 <div> 8 <div>
diff --git a/client/src/app/+page-not-found/page-not-found.component.html b/client/src/app/+page-not-found/page-not-found.component.html
index 0333f9550..70ede26e8 100644
--- a/client/src/app/+page-not-found/page-not-found.component.html
+++ b/client/src/app/+page-not-found/page-not-found.component.html
@@ -1,7 +1,7 @@
1<div class="root"> 1<div class="root">
2 <div *ngIf="status !== 403 && status !== 418" class="box"> 2 <div *ngIf="status !== 403 && status !== 418" class="box">
3 <strong>{{ status }}.</strong> 3 <strong>{{ status }}.</strong>
4 <span class="ml-1 muted" i18n>That's an error.</span> 4 <span class="ms-1 muted" i18n>That's an error.</span>
5 5
6 <div class="text mt-4"> 6 <div class="text mt-4">
7 <ng-container *ngIf="type === 'video'" i18n>We couldn't find any video tied to the URL {{ pathname }} you were looking for.</ng-container> 7 <ng-container *ngIf="type === 'video'" i18n>We couldn't find any video tied to the URL {{ pathname }} you were looking for.</ng-container>
@@ -24,7 +24,7 @@
24 24
25 <div *ngIf="status === 403" class="box"> 25 <div *ngIf="status === 403" class="box">
26 <strong>{{ status }}.</strong> 26 <strong>{{ status }}.</strong>
27 <span class="ml-1 muted" i18n>You are not authorized here.</span> 27 <span class="ms-1 muted" i18n>You are not authorized here.</span>
28 28
29 <div class="text mt-4"> 29 <div class="text mt-4">
30 <ng-container *ngIf="type === 'video'" i18n>You might need to check your account is allowed by the video or instance owner.</ng-container> 30 <ng-container *ngIf="type === 'video'" i18n>You might need to check your account is allowed by the video or instance owner.</ng-container>
@@ -34,7 +34,7 @@
34 34
35 <div *ngIf="status === 418" class="box"> 35 <div *ngIf="status === 418" class="box">
36 <strong>{{ status }}.</strong> 36 <strong>{{ status }}.</strong>
37 <span class="ml-1 muted">I'm a teapot.</span> 37 <span class="ms-1 muted">I'm a teapot.</span>
38 38
39 <div class="text mt-4" i18n="Description of a tea flavour, keeping the 'requested entity body' as a technical expression referring to a web request"> 39 <div class="text mt-4" i18n="Description of a tea flavour, keeping the 'requested entity body' as a technical expression referring to a web request">
40 The requested entity body blends sweet bits with a mellow earthiness. 40 The requested entity body blends sweet bits with a mellow earthiness.
diff --git a/client/src/app/+search/search-filters.component.html b/client/src/app/+search/search-filters.component.html
index c4861e8c4..5bce009d5 100644
--- a/client/src/app/+search/search-filters.component.html
+++ b/client/src/app/+search/search-filters.component.html
@@ -77,7 +77,7 @@
77 </div> 77 </div>
78 78
79 <div class="row"> 79 <div class="row">
80 <div class="pl-0 col-sm-6"> 80 <div class="ps-0 col-sm-6">
81 <input 81 <input
82 (change)="onDurationOrPublishedUpdated()" 82 (change)="onDurationOrPublishedUpdated()"
83 (keydown.enter)="$event.preventDefault()" 83 (keydown.enter)="$event.preventDefault()"
@@ -87,7 +87,7 @@
87 class="form-control" 87 class="form-control"
88 > 88 >
89 </div> 89 </div>
90 <div class="pr-0 col-sm-6"> 90 <div class="pe-0 col-sm-6">
91 <input 91 <input
92 (change)="onDurationOrPublishedUpdated()" 92 (change)="onDurationOrPublishedUpdated()"
93 (keydown.enter)="$event.preventDefault()" 93 (keydown.enter)="$event.preventDefault()"
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index ece4ba5b5..5fd1764d3 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -22,10 +22,6 @@ form {
22 margin-bottom: 1rem; 22 margin-bottom: 1rem;
23} 23}
24 24
25.form-group {
26 margin-bottom: 25px;
27}
28
29input[type=text] { 25input[type=text] {
30 @include peertube-input-text(100%); 26 @include peertube-input-text(100%);
31 display: block; 27 display: block;
diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
index 2c84dd930..247dfb56a 100644
--- a/client/src/app/+search/search.component.html
+++ b/client/src/app/+search/search.component.html
@@ -2,22 +2,22 @@
2 <div class="results-header"> 2 <div class="results-header">
3 <div class="first-line"> 3 <div class="first-line">
4 <div class="results-counter" *ngIf="pagination.totalItems"> 4 <div class="results-counter" *ngIf="pagination.totalItems">
5 <span class="mr-1" i18n>{{ pagination.totalItems | myNumberFormatter }} {pagination.totalItems, plural, =1 {result} other {results}}</span> 5 <span class="me-1" i18n>{{ pagination.totalItems | myNumberFormatter }} {pagination.totalItems, plural, =1 {result} other {results}}</span>
6 6
7 <span class="mr-1" i18n *ngIf="advancedSearch.searchTarget === 'local'">on this instance</span> 7 <span class="me-1" i18n *ngIf="advancedSearch.searchTarget === 'local'">on this instance</span>
8 <span class="mr-1" i18n *ngIf="advancedSearch.searchTarget === 'search-index'">on the vidiverse</span> 8 <span class="me-1" i18n *ngIf="advancedSearch.searchTarget === 'search-index'">on the vidiverse</span>
9 9
10 <span *ngIf="currentSearch" i18n>for <span class="search-value">{{ currentSearch }}</span></span> 10 <span *ngIf="currentSearch" i18n>for <span class="search-value">{{ currentSearch }}</span></span>
11 </div> 11 </div>
12 12
13 <div 13 <div
14 class="results-filter-button ml-auto" (click)="isSearchFilterCollapsed = !isSearchFilterCollapsed" role="button" 14 class="results-filter-button ms-auto" (click)="isSearchFilterCollapsed = !isSearchFilterCollapsed" role="button"
15 [attr.aria-expanded]="!isSearchFilterCollapsed" aria-controls="collapseBasic" 15 [attr.aria-expanded]="!isSearchFilterCollapsed" aria-controls="collapseBasic"
16 > 16 >
17 <span class="icon icon-filter"></span> 17 <span class="icon icon-filter"></span>
18 <ng-container i18n> 18 <ng-container i18n>
19 Filters 19 Filters
20 <span *ngIf="numberOfFilters() > 0" class="badge badge-secondary">{{ numberOfFilters() }}</span> 20 <span *ngIf="numberOfFilters() > 0" class="pt-badge badge-secondary">{{ numberOfFilters() }}</span>
21 </ng-container> 21 </ng-container>
22 </div> 22 </div>
23 </div> 23 </div>
diff --git a/client/src/app/+signup/+register/custom-stepper.component.html b/client/src/app/+signup/+register/custom-stepper.component.html
index aad2f31d3..a07e2fca3 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.html
+++ b/client/src/app/+signup/+register/custom-stepper.component.html
@@ -6,7 +6,7 @@
6 (click)="onClick(i)" 6 (click)="onClick(i)"
7 > 7 >
8 <div class="step-index"> 8 <div class="step-index">
9 <ng-container *ngIf="!isCompleted(step)"><span class="sr-only" i18n>Step</span> {{ i + 1 }}</ng-container> 9 <ng-container *ngIf="!isCompleted(step)"><span class="visually-hidden" i18n>Step</span> {{ i + 1 }}</ng-container>
10 <my-global-icon *ngIf="isCompleted(step)" iconName="tick"></my-global-icon> 10 <my-global-icon *ngIf="isCompleted(step)" iconName="tick"></my-global-icon>
11 </div> 11 </div>
12 12
diff --git a/client/src/app/+signup/+register/register-step-channel.component.html b/client/src/app/+signup/+register/register-step-channel.component.html
index 67f332409..888e3245d 100644
--- a/client/src/app/+signup/+register/register-step-channel.component.html
+++ b/client/src/app/+signup/+register/register-step-channel.component.html
@@ -34,9 +34,7 @@
34 type="text" id="name" i18n-placeholder placeholder="Example: my_super_channel" 34 type="text" id="name" i18n-placeholder placeholder="Example: my_super_channel"
35 formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" 35 formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
36 > 36 >
37 <div class="input-group-append"> 37 <div class="input-group-text">@{{ instanceHost }}</div>
38 <span class="input-group-text">@{{ instanceHost }}</span>
39 </div>
40 </div> 38 </div>
41 39
42 <div class="name-information" i18n> 40 <div class="name-information" i18n>
diff --git a/client/src/app/+signup/+register/register-step-terms.component.html b/client/src/app/+signup/+register/register-step-terms.component.html
index 28a6e0021..717a289e6 100644
--- a/client/src/app/+signup/+register/register-step-terms.component.html
+++ b/client/src/app/+signup/+register/register-step-terms.component.html
@@ -1,8 +1,8 @@
1<form role="form" [formGroup]="form"> 1<form role="form" [formGroup]="form">
2 <div class="form-group form-group-terms"> 2 <div class="form-group">
3 <my-peertube-checkbox inputName="terms" formControlName="terms"> 3 <my-peertube-checkbox inputName="terms" formControlName="terms">
4 <ng-template ptTemplate="label"> 4 <ng-template ptTemplate="label">
5 <ng-container i18n> 5 <ng-container i18n>
6 I am at least {{ minimumAge }} years old and agree 6 I am at least {{ minimumAge }} years old and agree
7 to the <a class="terms-anchor" (click)="onTermsClick($event)" href='#'>Terms</a> 7 to the <a class="terms-anchor" (click)="onTermsClick($event)" href='#'>Terms</a>
8 <ng-container *ngIf="hasCodeOfConduct"> and to the <a (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container> 8 <ng-container *ngIf="hasCodeOfConduct"> and to the <a (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index cab21c655..745b37c10 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -27,9 +27,7 @@
27 type="text" id="username" i18n-placeholder="Username choice placeholder in the registration form" placeholder="e.g. jane_doe" 27 type="text" id="username" i18n-placeholder="Username choice placeholder in the registration form" placeholder="e.g. jane_doe"
28 formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" 28 formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
29 > 29 >
30 <div class="input-group-append"> 30 <span class="input-group-text">@{{ instanceHost }}</span>
31 <span class="input-group-text">@{{ instanceHost }}</span>
32 </div>
33 </div> 31 </div>
34 32
35 <div class="name-information" i18n> 33 <div class="name-information" i18n>
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 4be67a858..53093a81a 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -29,22 +29,6 @@
29 } 29 }
30} 30}
31 31
32.form-group-terms {
33 margin: 30px 0;
34}
35
36.input-group {
37 @include peertube-input-group(100%);
38}
39
40.input-group-append {
41 height: 30px;
42}
43
44.form-group-terms {
45 width: 100% !important;
46}
47
48input:not([type=submit]) { 32input:not([type=submit]) {
49 @include peertube-input-text(100%); 33 @include peertube-input-text(100%);
50 display: block; 34 display: block;
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 5344e5431..7add71886 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
@@ -33,10 +33,6 @@ my-peertube-checkbox {
33 height: 100%; 33 height: 100%;
34 min-height: 300px; 34 min-height: 300px;
35 35
36 .form-group {
37 margin-bottom: 25px;
38 }
39
40 input { 36 input {
41 @include peertube-input-text(100%); 37 @include peertube-input-text(100%);
42 display: block; 38 display: block;
@@ -45,10 +41,6 @@ my-peertube-checkbox {
45 .label-tags + span { 41 .label-tags + span {
46 font-size: 15px; 42 font-size: 15px;
47 } 43 }
48
49 .advanced-settings .form-group {
50 margin-bottom: 20px;
51 }
52} 44}
53 45
54.captions-header { 46.captions-header {
diff --git a/client/src/app/+videos/+video-edit/video-update.component.html b/client/src/app/+videos/+video-edit/video-update.component.html
index 4376f6fe4..446406d1a 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -1,6 +1,6 @@
1<div class="margin-content"> 1<div class="margin-content">
2 <div class="title-page title-page-single"> 2 <div class="title-page title-page-single">
3 <span class="mr-1" i18n>Update</span> 3 <span class="me-1" i18n>Update</span>
4 <a [routerLink]="getVideoUrl()">{{ video?.name }}</a> 4 <a [routerLink]="getVideoUrl()">{{ video?.name }}</a>
5 </div> 5 </div>
6 6
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
index 3ee818c8b..95d117eec 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
@@ -2,7 +2,7 @@
2 <div class="avatar-and-textarea"> 2 <div class="avatar-and-textarea">
3 <my-actor-avatar [account]="user?.account" size="25"></my-actor-avatar> 3 <my-actor-avatar [account]="user?.account" size="25"></my-actor-avatar>
4 4
5 <div class="form-group"> 5 <div class="textarea-wrapper">
6 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize 6 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
7 [readonly]="(user === null) ? true : false" 7 [readonly]="(user === null) ? true : false"
8 (click)="openVisitorModal($event)" 8 (click)="openVisitorModal($event)"
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
index fb79991db..23e705507 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
@@ -17,9 +17,8 @@ form {
17 @include margin-right(10px); 17 @include margin-right(10px);
18 } 18 }
19 19
20 .form-group { 20 .textarea-wrapper {
21 flex-grow: 1; 21 flex-grow: 1;
22 margin: 0;
23 position: relative; 22 position: relative;
24 } 23 }
25 24
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
index 5014b9692..160865519 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -16,7 +16,7 @@
16 {{ comment.account.displayName }} 16 {{ comment.account.displayName }}
17 </span> 17 </span>
18 18
19 <span class="comment-account-fid ml-1">{{ comment.by }}</span> 19 <span class="comment-account-fid ms-1">{{ comment.by }}</span>
20 </a> 20 </a>
21 </div> 21 </div>
22 22
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
index 0e00c9c0e..a76379924 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -6,7 +6,7 @@
6 6
7 <my-feed [syndicationItems]="syndicationItems"></my-feed> 7 <my-feed [syndicationItems]="syndicationItems"></my-feed>
8 8
9 <div ngbDropdown class="d-inline-block ml-4 dropdown-root"> 9 <div ngbDropdown class="d-inline-block ms-4 dropdown-root">
10 <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n> 10 <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
11 SORT BY 11 SORT BY
12 </button> 12 </button>
@@ -80,7 +80,7 @@
80 80
81 <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template> 81 <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
82 82
83 <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader> 83 <my-small-loader class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-small-loader>
84 </div> 84 </div>
85 </my-video-comment> 85 </my-video-comment>
86 86
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
index d579aaddb..b64d45564 100644
--- a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
@@ -1,6 +1,6 @@
1<div class="privacy-concerns" *ngIf="display"> 1<div class="privacy-concerns" *ngIf="display">
2 <div class="privacy-concerns-text"> 2 <div class="privacy-concerns-text">
3 <span class="mr-2"> 3 <span class="me-2">
4 <strong i18n>Friendly Reminder: </strong> 4 <strong i18n>Friendly Reminder: </strong>
5 <ng-container i18n> 5 <ng-container i18n>
6 the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers. 6 the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
index f5dd352a3..b04bd3548 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
@@ -6,9 +6,9 @@
6 <div class="playlist-display-name"> 6 <div class="playlist-display-name">
7 {{ playlist.displayName }} 7 {{ playlist.displayName }}
8 8
9 <span *ngIf="isUnlistedPlaylist()" class="badge badge-warning" i18n>Unlisted</span> 9 <span *ngIf="isUnlistedPlaylist()" class="pt-badge badge-warning" i18n>Unlisted</span>
10 <span *ngIf="isPrivatePlaylist()" class="badge badge-danger" i18n>Private</span> 10 <span *ngIf="isPrivatePlaylist()" class="pt-badge badge-danger" i18n>Private</span>
11 <span *ngIf="isPublicPlaylist()" class="badge badge-info" i18n>Public</span> 11 <span *ngIf="isPublicPlaylist()" class="pt-badge badge-info" i18n>Public</span>
12 </div> 12 </div>
13 13
14 <div class="playlist-by-index"> 14 <div class="playlist-by-index">
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
index 5c3453e4b..0f0ac1979 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
@@ -15,43 +15,47 @@
15 .playlist-info { 15 .playlist-info {
16 padding: 5px 30px; 16 padding: 5px 30px;
17 background-color: pvar(--greyBackgroundColor); 17 background-color: pvar(--greyBackgroundColor);
18 }
19
20 .playlist-display-name {
21 font-size: 18px;
22 font-weight: $font-semibold;
23 margin-bottom: 5px;
18 24
19 .playlist-display-name { 25 .pt-badge {
20 font-size: 18px; 26 @include margin-left(5px);
21 font-weight: $font-semibold;
22 margin-bottom: 5px;
23 } 27 }
28 }
24 29
25 .playlist-by-index { 30 .playlist-by-index {
26 color: pvar(--greyForegroundColor); 31 color: pvar(--greyForegroundColor);
27 display: flex; 32 display: flex;
28 33
29 .playlist-by { 34 .playlist-by {
30 @include margin-right(5px); 35 @include margin-right(5px);
31 } 36 }
32 37
33 .playlist-index span:first-child::after { 38 .playlist-index span:first-child::after {
34 content: '/'; 39 content: '/';
35 margin: 0 3px; 40 margin: 0 3px;
36 }
37 } 41 }
42 }
38 43
39 .playlist-controls { 44 .playlist-controls {
40 display: flex; 45 display: flex;
41 margin: 10px 0; 46 margin: 10px 0;
42 47
43 my-global-icon:not(:last-child) { 48 my-global-icon:not(:last-child) {
44 @include margin-right(.5rem); 49 @include margin-right(.5rem);
45 } 50 }
46 51
47 my-global-icon { 52 my-global-icon {
48 &:not(.active) { 53 &:not(.active) {
49 opacity: .5; 54 opacity: .5;
50 } 55 }
51 56
52 ::ng-deep { 57 ::ng-deep {
53 cursor: pointer; 58 cursor: pointer;
54 }
55 } 59 }
56 } 60 }
57 } 61 }
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 1ea0cf6b8..461891779 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -61,7 +61,7 @@
61 <div class="video-info-channel-left d-flex"> 61 <div class="video-info-channel-left d-flex">
62 <my-video-avatar-channel [video]="video" [showChannel]="!isChannelDisplayNameGeneric()"></my-video-avatar-channel> 62 <my-video-avatar-channel [video]="video" [showChannel]="!isChannelDisplayNameGeneric()"></my-video-avatar-channel>
63 63
64 <div class="video-info-channel-left-links ml-1"> 64 <div class="video-info-channel-left-links ms-1">
65 <ng-container *ngIf="!isChannelDisplayNameGeneric()"> 65 <ng-container *ngIf="!isChannelDisplayNameGeneric()">
66 <a [routerLink]="[ '/c', video.byVideoChannel ]" i18n-title title="Channel page"> 66 <a [routerLink]="[ '/c', video.byVideoChannel ]" i18n-title title="Channel page">
67 {{ video.channel.displayName }} 67 {{ video.channel.displayName }}
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index f250c2407..1d5131092 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -1,4 +1,4 @@
1<h1 class="sr-only" i18n>Discover</h1> 1<h1 class="visually-hidden" i18n>Discover</h1>
2<div class="margin-content"> 2<div class="margin-content">
3 3
4 <div class="no-results" i18n *ngIf="notResults">No results.</div> 4 <div class="no-results" i18n *ngIf="notResults">No results.</div>
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index 7a9b6c51f..d08e2f0fb 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -25,7 +25,7 @@
25 <div class="d-flex justify-content-between"> 25 <div class="d-flex justify-content-between">
26 <label class="small-title" i18n>GLOBAL SEARCH</label> 26 <label class="small-title" i18n>GLOBAL SEARCH</label>
27 <div class="advanced-search-status muted"> 27 <div class="advanced-search-status muted">
28 <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span> 28 <span *ngIf="serverConfig" class="me-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
29 <i class="glyphicon glyphicon-globe"></i> 29 <i class="glyphicon glyphicon-globe"></i>
30 </div> 30 </div>
31 </div> 31 </div>
@@ -39,8 +39,8 @@
39 <label class="small-title" i18n>ADVANCED SEARCH</label> 39 <label class="small-title" i18n>ADVANCED SEARCH</label>
40 <div class="advanced-search-status c-help"> 40 <div class="advanced-search-status c-help">
41 <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows."> 41 <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
42 <span *ngIf="canSearchAnyURI()" class="mr-1" i18n>any instance</span> 42 <span *ngIf="canSearchAnyURI()" class="me-1" i18n>any instance</span>
43 <span *ngIf="!canSearchAnyURI()" class="mr-1" i18n>only followed instances</span> 43 <span *ngIf="!canSearchAnyURI()" class="me-1" i18n>only followed instances</span>
44 <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i> 44 <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
45 </span> 45 </span>
46 </div> 46 </div>
diff --git a/client/src/app/header/suggestion.component.html b/client/src/app/header/suggestion.component.html
index 4ac9809e1..3f85ed6ae 100644
--- a/client/src/app/header/suggestion.component.html
+++ b/client/src/app/header/suggestion.component.html
@@ -1,16 +1,16 @@
1<a tabindex="-1" class="d-flex flex-auto flex-items-center p-2" [class.focus-visible]="active"> 1<a tabindex="-1" class="d-flex flex-auto flex-items-center p-2" [class.focus-visible]="active">
2 <div class="flex-shrink-0 mr-2 text-center"> 2 <div class="flex-shrink-0 me-2 text-center">
3 <my-global-icon iconName="search"></my-global-icon> 3 <my-global-icon iconName="search"></my-global-icon>
4 </div> 4 </div>
5 5
6 <img class="avatar mr-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28"> 6 <img class="avatar me-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28">
7 7
8 <div 8 <div
9 class="flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target" 9 class="flex-auto overflow-hidden text-start no-wrap css-truncate css-truncate-target"
10 [attr.aria-label]="result.text" [innerHTML]="result.text | highlight : highlight" 10 [attr.aria-label]="result.text" [innerHTML]="result.text | highlight : highlight"
11 ></div> 11 ></div>
12 12
13 <div class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6"> 13 <div class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ms-1 f6">
14 <span *ngIf="result.type === 'search-instance'" i18n>In this instance's network</span> 14 <span *ngIf="result.type === 'search-instance'" i18n>In this instance's network</span>
15 <span *ngIf="result.type === 'search-index'" i18n>In the vidiverse</span> 15 <span *ngIf="result.type === 'search-index'" i18n>In the vidiverse</span>
16 </div> 16 </div>
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index b8f8d68ab..2961daaa3 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -36,14 +36,14 @@
36 > 36 >
37 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon> 37 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
38 <span i18n>Interface:</span> 38 <span i18n>Interface:</span>
39 <span class="ml-auto muted">{{ currentInterfaceLanguage }}</span> 39 <span class="ms-auto muted">{{ currentInterfaceLanguage }}</span>
40 </a> 40 </a>
41 41
42 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles" 42 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
43 #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)"> 43 #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
44 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon> 44 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
45 <span i18n>Videos:</span> 45 <span i18n>Videos:</span>
46 <span class="ml-auto muted">{{ videoLanguages.join(', ') }}</span> 46 <span class="ms-auto muted">{{ videoLanguages.join(', ') }}</span>
47 </a> 47 </a>
48 48
49 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings" 49 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
@@ -53,14 +53,14 @@
53 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon> 53 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon>
54 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon> 54 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon>
55 <span i18n>Sensitive:</span> 55 <span i18n>Sensitive:</span>
56 <span class="ml-auto muted">{{ nsfwPolicy }}</span> 56 <span class="ms-auto muted">{{ nsfwPolicy }}</span>
57 </a> 57 </a>
58 58
59 <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()"> 59 <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
60 <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon> 60 <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
61 <ng-container i18n>Help share videos</ng-container> 61 <ng-container i18n>Help share videos</ng-container>
62 62
63 <my-input-switch class="ml-auto" [checked]="user.p2pEnabled"></my-input-switch> 63 <my-input-switch class="ms-auto" [checked]="user.p2pEnabled"></my-input-switch>
64 </a> 64 </a>
65 65
66 <div class="dropdown-divider"></div> 66 <div class="dropdown-divider"></div>
@@ -149,7 +149,7 @@
149 149
150 <div class="footer-copyleft"> 150 <div class="footer-copyleft">
151 <small class="d-inline" i18n-title title="powered by PeerTube - CopyLeft 2015-2022"> 151 <small class="d-inline" i18n-title title="powered by PeerTube - CopyLeft 2015-2022">
152 <a href="https://joinpeertube.org" class="mr-1" target="_blank" rel="noopener noreferrer" i18n>powered by PeerTube</a> 152 <a href="https://joinpeertube.org" class="me-1" target="_blank" rel="noopener noreferrer" i18n>powered by PeerTube</a>
153 153
154 <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" target="_blank" rel="noopener noreferrer"> 154 <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" target="_blank" rel="noopener noreferrer">
155 <span aria-label="copyleft" class="d-inline-block" style="transform: rotateY(180deg)">&copy;</span> 2015-2022 155 <span aria-label="copyleft" class="d-inline-block" style="transform: rotateY(180deg)">&copy;</span> 2015-2022
diff --git a/client/src/app/menu/notification.component.html b/client/src/app/menu/notification.component.html
index beda1c43c..2bd11c6f7 100644
--- a/client/src/app/menu/notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -24,7 +24,7 @@
24 <div> 24 <div>
25 <button 25 <button
26 *ngIf="unreadNotifications" 26 *ngIf="unreadNotifications"
27 i18n-title title="Mark all as read" class="glyphicon glyphicon-ok mr-2" 27 i18n-title title="Mark all as read" class="glyphicon glyphicon-ok me-2"
28 (click)="markAllAsRead()" 28 (click)="markAllAsRead()"
29 ></button> 29 ></button>
30 <a 30 <a
@@ -45,7 +45,7 @@
45 ></my-user-notifications> 45 ></my-user-notifications>
46 46
47 <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)"> 47 <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)">
48 <my-global-icon class="mr-1" iconName="bell" aria-hidden="true"></my-global-icon> 48 <my-global-icon class="me-1" iconName="bell" aria-hidden="true"></my-global-icon>
49 <span i18n>See all your notifications</span> 49 <span i18n>See all your notifications</span>
50 </a> 50 </a>
51 </div> 51 </div>
diff --git a/client/src/app/modal/confirm.component.html b/client/src/app/modal/confirm.component.html
index f07501726..c59c25770 100644
--- a/client/src/app/modal/confirm.component.html
+++ b/client/src/app/modal/confirm.component.html
@@ -9,7 +9,7 @@
9 <div class="modal-body" > 9 <div class="modal-body" >
10 <div [innerHtml]="message"></div> 10 <div [innerHtml]="message"></div>
11 11
12 <div *ngIf="inputLabel && expectedInputValue" class="form-group"> 12 <div *ngIf="inputLabel && expectedInputValue" class="form-group mt-3">
13 <label for="confirmInput">{{ inputLabel }}</label> 13 <label for="confirmInput">{{ inputLabel }}</label>
14 <input type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" /> 14 <input type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" />
15 </div> 15 </div>
diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss
index 77ea4d307..21aa81eeb 100644
--- a/client/src/app/modal/confirm.component.scss
+++ b/client/src/app/modal/confirm.component.scss
@@ -13,7 +13,3 @@ input[type=text] {
13 @include peertube-input-text(100%); 13 @include peertube-input-text(100%);
14 display: block; 14 display: block;
15} 15}
16
17.form-group {
18 margin: 20px 0;
19}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index 986de15ed..bb87279d7 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -17,9 +17,9 @@
17 </a> 17 </a>
18 18
19 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }" 19 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
20 class="ml-auto muted abuse-details-links" i18n 20 class="ms-auto muted abuse-details-links" i18n
21 > 21 >
22 {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span> 22 {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span>
23 </a> 23 </a>
24 </span> 24 </span>
25 </div> 25 </div>
@@ -37,9 +37,9 @@
37 </a> 37 </a>
38 38
39 <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }" 39 <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
40 class="ml-auto muted abuse-details-links" i18n 40 class="ms-auto muted abuse-details-links" i18n
41 > 41 >
42 {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span> 42 {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span>
43 </a> 43 </a>
44 </span> 44 </span>
45 </div> 45 </div>
@@ -53,7 +53,7 @@
53 <div class="mt-3 d-flex"> 53 <div class="mt-3 d-flex">
54 <span class="moderation-expanded-label"> 54 <span class="moderation-expanded-label">
55 <ng-container i18n>Report</ng-container> 55 <ng-container i18n>Report</ng-container>
56 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id }" class="ml-1 muted">#{{ abuse.id }}</a> 56 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id }" class="ms-1 muted">#{{ abuse.id }}</a>
57 </span> 57 </span>
58 <span class="moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span> 58 <span class="moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
59 </div> 59 </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index f0a27c6e2..6d1de808d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -8,7 +8,7 @@
8> 8>
9 <ng-template pTemplate="caption"> 9 <ng-template pTemplate="caption">
10 <div class="caption"> 10 <div class="caption">
11 <div class="ml-auto"> 11 <div class="ms-auto">
12 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter> 12 <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
13 </div> 13 </div>
14 </div> 14 </div>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
index e9c5fadcf..b63bf1f92 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
@@ -6,7 +6,7 @@
6 6
7 <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body"> 7 <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
8 <my-global-icon iconName="upload"></my-global-icon> 8 <my-global-icon iconName="upload"></my-global-icon>
9 <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label> 9 <label class="visually-hidden" for="avatarfile" i18n>Upload a new avatar</label>
10 <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/> 10 <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
11 </div> 11 </div>
12 12
@@ -15,7 +15,7 @@
15 #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-image-info" autoClose="outside" placement="right" 15 #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-image-info" autoClose="outside" placement="right"
16 > 16 >
17 <my-global-icon iconName="edit"></my-global-icon> 17 <my-global-icon iconName="edit"></my-global-icon>
18 <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label> 18 <label class="visually-hidden" for="avatarMenu" i18n>Change your avatar</label>
19 </div> 19 </div>
20 20
21 </div> 21 </div>
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 cc5e36a32..a50a2bb0e 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
@@ -3,37 +3,37 @@
3 3
4.actor { 4.actor {
5 display: flex; 5 display: flex;
6}
6 7
7 my-actor-avatar { 8my-actor-avatar {
8 @include margin-right(15px); 9 @include margin-right(15px);
9 } 10}
11
12.actor-info {
13 display: inline-flex;
14 flex-direction: column;
15}
16
17.actor-info-display-name {
18 font-size: 20px;
19 font-weight: $font-bold;
10 20
11 .actor-info { 21 @media screen and (max-width: $small-view) {
12 display: inline-flex; 22 font-size: 16px;
13 flex-direction: column;
14
15 .actor-info-display-name {
16 font-size: 20px;
17 font-weight: $font-bold;
18
19 @media screen and (max-width: $small-view) {
20 font-size: 16px;
21 }
22 }
23
24 .actor-info-username {
25 position: relative;
26 font-size: 14px;
27 color: pvar(--greyForegroundColor);
28 }
29
30 .actor-info-followers {
31 font-size: 15px;
32 padding-bottom: .5rem;
33 }
34 } 23 }
35} 24}
36 25
26.actor-info-username {
27 position: relative;
28 font-size: 14px;
29 color: pvar(--greyForegroundColor);
30}
31
32.actor-info-followers {
33 font-size: 15px;
34 padding-bottom: .5rem;
35}
36
37.actor-img-edit-container { 37.actor-img-edit-container {
38 position: relative; 38 position: relative;
39 width: 0; 39 width: 0;
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
index 7031cb53b..1d6b3df7e 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -1,6 +1,7 @@
1<div class="input-group has-feedback has-clear"> 1<div class="input-group has-clear" ngbDropdown placement="bottom-left auto" container="body">
2 <div *ngIf="hasFilters()" class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body"> 2
3 <div class="input-group-text" ngbDropdownToggle> 3 <ng-container *ngIf="hasFilters()">
4 <div class="input-group-text c-hand" ngbDropdownToggle>
4 <span class="caret" aria-haspopup="menu" role="button"></span> 5 <span class="caret" aria-haspopup="menu" role="button"></span>
5 </div> 6 </div>
6 7
@@ -15,14 +16,14 @@
15 </button> 16 </button>
16 </ng-container> 17 </ng-container>
17 </div> 18 </div>
18 </div> 19 </ng-container>
19 20
20 <input 21 <input
21 type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..." 22 type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
23 class="last-in-group"
22 [(ngModel)]="searchValue" 24 [(ngModel)]="searchValue"
23 (keyup)="onInputSearch($event)" 25 (keyup)="onInputSearch($event)"
24 > 26 >
25 27
26 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetTableFilter()"></a> 28 <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></a>
27 <span class="sr-only" i18n>Clear filters</span>
28</div> 29</div>
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 ee1b3b508..ed85385fd 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
@@ -23,7 +23,6 @@ my-global-icon {
23 width: 18px; 23 width: 18px;
24 height: 18px; 24 height: 18px;
25 25
26
27 &.no-visible { 26 &.no-visible {
28 @include margin-right($size + $margin); 27 @include margin-right($size + $margin);
29 28
diff --git a/client/src/app/shared/shared-forms/input-switch.component.html b/client/src/app/shared/shared-forms/input-switch.component.html
index ce1dee470..9a466055a 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.html
+++ b/client/src/app/shared/shared-forms/input-switch.component.html
@@ -1,4 +1,4 @@
1<div (click)="update()"> 1<div (click)="update()">
2 <input type="checkbox" [checked]="checked"/> 2 <input type="checkbox" [checked]="checked"/>
3 <label class="ml-auto">Toggle</label> 3 <label class="ms-auto">Toggle</label>
4</div> 4</div>
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
index dfe646d2f..e5edb6c97 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
@@ -1,21 +1,19 @@
1<div class="input-group input-group-sm"> 1<div class="input-group">
2 <input 2 <input
3 [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex" 3 [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
4 [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly" 4 [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
5 #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control" 5 #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
6 /> 6 />
7 7
8 <div *ngIf="withToggle || withCopy" class="input-group-append"> 8 <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle">
9 <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle"> 9 <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
10 <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span> 10 </button>
11 </button>
12 11
13 <button 12 <button
14 *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button" 13 *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
15 class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy" 14 class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
16 > 15 >
17 <span class="glyphicon glyphicon-duplicate"></span> 16 <span class="glyphicon glyphicon-duplicate"></span>
18 Copy 17 <span class="copy-text">Copy</span>
19 </button> 18 </button>
20 </div>
21</div> 19</div>
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 b5a71eddd..02a8d7d0e 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
@@ -5,11 +5,14 @@ input {
5 @include peertube-input-text(auto); 5 @include peertube-input-text(auto);
6 @include padding-left(15px !important); 6 @include padding-left(15px !important);
7 @include padding-right(15px !important); 7 @include padding-right(15px !important);
8}
8 9
9 // set again properties of peertube-input-text that are overridden by .input-group 10.btn {
10 font-size: 15px !important; 11 font-size: 15px;
11} 12}
12 13
13.eye-button { 14.copy-text {
14 line-height: 1 !important; 15 font-size: 14px;
16 margin-left: 5px;
17 vertical-align: top;
15} 18}
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index c679e1403..38a48a2a5 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -1,6 +1,6 @@
1<div class="root flex-column"> 1<div class="root flex-column">
2 <div class="d-flex"> 2 <div class="d-flex">
3 <label class="form-group-checkbox"> 3 <label>
4 <input 4 <input
5 type="checkbox" 5 type="checkbox"
6 [(ngModel)]="checked" 6 [(ngModel)]="checked"
@@ -33,7 +33,7 @@
33 <div *ngIf="recommended" class="recommended" i18n>Recommended</div> 33 <div *ngIf="recommended" class="recommended" i18n>Recommended</div>
34 </div> 34 </div>
35 35
36 <div class="ml-4 d-flex flex-column"> 36 <div class="ms-4 d-flex flex-column">
37 <small class="wrapper mt-2 muted"> 37 <small class="wrapper mt-2 muted">
38 <ng-content select="description"></ng-content> 38 <ng-content select="description"></ng-content>
39 </small> 39 </small>
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 4e384e7e0..5fe20c3a5 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -4,7 +4,7 @@
4.root { 4.root {
5 display: flex; 5 display: flex;
6 6
7 .form-group-checkbox { 7 label {
8 display: flex; 8 display: flex;
9 align-items: center; 9 align-items: center;
10 10
diff --git a/client/src/app/shared/shared-forms/select/select-channel.component.html b/client/src/app/shared/shared-forms/select/select-channel.component.html
index f83f17a16..b49fd36fa 100644
--- a/client/src/app/shared/shared-forms/select/select-channel.component.html
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.html
@@ -7,7 +7,7 @@
7 [searchable]="searchable" 7 [searchable]="searchable"
8> 8>
9 <ng-option *ngFor="let channel of channels" [value]="channel.id"> 9 <ng-option *ngFor="let channel of channels" [value]="channel.id">
10 <img alt="" class="avatar mr-1" [src]="channel.avatarPath" /> 10 <img alt="" class="avatar me-1" [src]="channel.avatarPath" />
11 {{ channel.label }} 11 {{ channel.label }}
12 </ng-option> 12 </ng-option>
13</ng-select> 13</ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.html b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
index 03db2875b..2799ccdcc 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
@@ -22,7 +22,7 @@
22> 22>
23 23
24 <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index"> 24 <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
25 <div class="form-group-checkbox"> 25 <div class="checkbox-wrapper">
26 <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/> 26 <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
27 <span role="checkbox" [attr.aria-checked]="item$.selected"></span> 27 <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
28 <span>{{ item.group }}</span> 28 <span>{{ item.group }}</span>
@@ -30,7 +30,7 @@
30 </ng-template> 30 </ng-template>
31 31
32 <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index"> 32 <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
33 <div class="form-group-checkbox"> 33 <div class="checkbox-wrapper">
34 <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/> 34 <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
35 <span role="checkbox" [attr.aria-checked]="item$.selected"></span> 35 <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
36 <span>{{ item.label }}</span> 36 <span>{{ item.label }}</span>
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 d47c4f9da..892f22dff 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
@@ -7,7 +7,7 @@ ng-select ::ng-deep {
7 align-items: center; 7 align-items: center;
8 } 8 }
9 9
10 .form-group-checkbox { 10 .checkbox-wrapper {
11 display: flex; 11 display: flex;
12 align-items: center; 12 align-items: center;
13 13
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 be6099a97..8e5dfb064 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
@@ -16,26 +16,3 @@
16 font-size: 15px; 16 font-size: 15px;
17 margin-bottom: 15px; 17 margin-bottom: 15px;
18} 18}
19
20ngb-accordion ::ng-deep {
21 .card {
22 border-color: var(--mainBackgroundColor);
23
24 .card-header {
25 background-color: unset;
26 padding: 0;
27
28 + .collapse.show {
29 background-color: var(--submenuBackgroundColor);
30 }
31 }
32 }
33
34 .btn {
35 @include peertube-button;
36 @include grey-button;
37
38 border-radius: unset;
39 width: 100%;
40 }
41}
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.html b/client/src/app/shared/shared-instance/instance-features-table.component.html
index 1fdef95ff..761243bfe 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.html
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.html
@@ -1,6 +1,6 @@
1<div *ngIf="serverConfig" class="feature-table"> 1<div *ngIf="serverConfig" class="feature-table">
2 2
3 <table class="table" *ngIf="serverConfig"> 3 <table *ngIf="serverConfig">
4 <caption i18n>Features found on this instance</caption> 4 <caption i18n>Features found on this instance</caption>
5 <tr> 5 <tr>
6 <th i18n class="label" scope="row">PeerTube version</th> 6 <th i18n class="label" scope="row">PeerTube version</th>
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 56ca105f4..105a7681f 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
@@ -4,6 +4,7 @@
4table { 4table {
5 font-size: 14px; 5 font-size: 14px;
6 color: pvar(--mainForegroundColor); 6 color: pvar(--mainForegroundColor);
7 width: 100%;
7 8
8 .label, 9 .label,
9 .sub-label { 10 .sub-label {
@@ -24,8 +25,10 @@ table {
24 } 25 }
25 } 26 }
26 27
28 th,
27 td { 29 td {
28 vertical-align: middle; 30 padding: 0.75rem;
31 border-top: 1px solid #dee2e6;
29 } 32 }
30 33
31 caption { 34 caption {
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index 1e2f6c6a9..11f5a1ab0 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -1,5 +1,5 @@
1<div class="root"> 1<div class="root">
2 <div class="input-group has-feedback has-clear"> 2 <div class="input-group has-clear">
3 <input 3 <input
4 #ref 4 #ref
5 type="text" 5 type="text"
@@ -10,8 +10,7 @@
10 [placeholder]="placeholder" 10 [placeholder]="placeholder"
11 > 11 >
12 12
13 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetFilter()"></a> 13 <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></a>
14 <span class="sr-only" i18n>Clear filters</span>
15 </div> 14 </div>
16 15
17 <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon> 16 <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
diff --git a/client/src/app/shared/shared-moderation/account-block-badges.component.html b/client/src/app/shared/shared-moderation/account-block-badges.component.html
index feac707c2..fd3709676 100644
--- a/client/src/app/shared/shared-moderation/account-block-badges.component.html
+++ b/client/src/app/shared/shared-moderation/account-block-badges.component.html
@@ -1,4 +1,4 @@
1<span *ngIf="account.mutedByUser" class="badge badge-danger" i18n>Muted</span> 1<span *ngIf="account.mutedByUser" class="pt-badge badge-danger" i18n>Muted</span>
2<span *ngIf="account.mutedServerByUser" class="badge badge-danger" i18n>Instance muted</span> 2<span *ngIf="account.mutedServerByUser" class="pt-badge badge-danger" i18n>Instance muted</span>
3<span *ngIf="account.mutedByInstance" class="badge badge-danger" i18n>Muted by your instance</span> 3<span *ngIf="account.mutedByInstance" class="pt-badge badge-danger" i18n>Muted by your instance</span>
4<span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span> 4<span *ngIf="account.mutedServerByInstance" class="pt-badge badge-danger" i18n>Instance muted by your instance</span>
diff --git a/client/src/app/shared/shared-moderation/account-block-badges.component.scss b/client/src/app/shared/shared-moderation/account-block-badges.component.scss
index ccc3666aa..301d8305e 100644
--- a/client/src/app/shared/shared-moderation/account-block-badges.component.scss
+++ b/client/src/app/shared/shared-moderation/account-block-badges.component.scss
@@ -1,9 +1,8 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.badge { 4.pt-badge {
5 @include margin-right(10px); 5 @include margin-right(10px);
6 6
7 height: fit-content;
8 font-size: 12px; 7 font-size: 12px;
9} 8}
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index a4f81d824..15632f654 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -11,7 +11,7 @@
11> 11>
12 <ng-template pTemplate="caption"> 12 <ng-template pTemplate="caption">
13 <div class="caption"> 13 <div class="caption">
14 <div class="ml-auto"> 14 <div class="ms-auto">
15 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter> 15 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
16 </div> 16 </div>
17 </div> 17 </div>
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
index 6c99180ef..8e0b0993c 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -8,11 +8,11 @@
8 <form novalidate [formGroup]="form" (ngSubmit)="report()"> 8 <form novalidate [formGroup]="form" (ngSubmit)="report()">
9 9
10 <div class="row"> 10 <div class="row">
11 <div class="col-5 form-group"> 11 <div class="col-5">
12 12
13 <label i18n for="reportPredefinedReasons">What is the issue?</label> 13 <label i18n for="reportPredefinedReasons">What is the issue?</label>
14 14
15 <div class="ml-2 mt-2 d-flex flex-column"> 15 <div class="ms-2 mt-2 d-flex flex-column">
16 <ng-container formGroupName="predefinedReasons"> 16 <ng-container formGroupName="predefinedReasons">
17 17
18 <div class="form-group" *ngFor="let reason of predefinedReasons"> 18 <div class="form-group" *ngFor="let reason of predefinedReasons">
@@ -29,7 +29,6 @@
29 29
30 </ng-container> 30 </ng-container>
31 </div> 31 </div>
32
33 </div> 32 </div>
34 33
35 <div class="col-7"> 34 <div class="col-7">
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index afac108fc..51ca0b9d6 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -8,38 +8,32 @@
8 <form novalidate [formGroup]="form" (ngSubmit)="report()"> 8 <form novalidate [formGroup]="form" (ngSubmit)="report()">
9 9
10 <div class="row"> 10 <div class="row">
11 <div class="col-5 form-group"> 11 <div class="col-12 col-md-5">
12 <label i18n for="reportPredefinedReasons">What is the issue?</label>
12 13
13 <label i18n for="reportPredefinedReasons">What is the issue?</label> 14 <div class="ms-2 mt-2 d-flex flex-column">
15 <ng-container formGroupName="predefinedReasons">
14 16
15 <div class="ml-2 mt-2 d-flex flex-column"> 17 <div class="form-group" *ngFor="let reason of predefinedReasons">
16 <ng-container formGroupName="predefinedReasons"> 18 <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
19 <ng-template *ngIf="reason.help" ptTemplate="help">
20 <div [innerHTML]="reason.help"></div>
21 </ng-template>
17 22
18 <div class="form-group" *ngFor="let reason of predefinedReasons"> 23 <ng-container *ngIf="reason.description" ngProjectAs="description">
19 <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label"> 24 <div [innerHTML]="reason.description"></div>
20 <ng-template *ngIf="reason.help" ptTemplate="help"> 25 </ng-container>
21 <div [innerHTML]="reason.help"></div> 26 </my-peertube-checkbox>
22 </ng-template> 27 </div>
23
24 <ng-container *ngIf="reason.description" ngProjectAs="description">
25 <div [innerHTML]="reason.description"></div>
26 </ng-container>
27 </my-peertube-checkbox>
28 </div>
29
30 </ng-container>
31 </div>
32 28
29 </ng-container>
30 </div>
33 </div> 31 </div>
34 32
35 <div class="col-7"> 33 <div class="col-12 col-md-7">
36 <div class="row justify-content-center"> 34 <my-embed [video]="video"></my-embed>
37 <div class="col-12 col-lg-9 mb-2">
38 <my-embed [video]="video"></my-embed>
39 </div>
40 </div>
41 35
42 <div class="mb-1 start-at" formGroupName="timestamp"> 36 <div class="mb-1 mt-3 start-at" formGroupName="timestamp">
43 <my-peertube-checkbox 37 <my-peertube-checkbox
44 formControlName="hasStart" 38 formControlName="hasStart"
45 i18n-labelText labelText="Start at" 39 i18n-labelText labelText="Start at"
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index 1a320e9a4..ba4336e2e 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -19,7 +19,7 @@
19 </a> 19 </a>
20 </div> 20 </div>
21 21
22 <div class="ml-auto"> 22 <div class="ms-auto">
23 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter> 23 <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
24 </div> 24 </div>
25 </div> 25 </div>
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 67ca56516..a6b8576a1 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -171,9 +171,8 @@
171 </div> 171 </div>
172 </div> 172 </div>
173 173
174 <div class="form-group"> 174 <div class="form-group" *ngIf="isInVideoEmbedTab()">
175 <my-peertube-checkbox 175 <my-peertube-checkbox
176 *ngIf="isInVideoEmbedTab()"
177 inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl" 176 inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
178 i18n-labelText labelText="Only display embed URL" 177 i18n-labelText labelText="Only display embed URL"
179 ></my-peertube-checkbox> 178 ></my-peertube-checkbox>
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 44ebb13f4..abb78b09b 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
@@ -55,13 +55,6 @@ my-input-toggle-hidden {
55 } 55 }
56 } 56 }
57 57
58 .form-group {
59 margin-bottom: 0;
60 height: 34px;
61 display: flex;
62 align-items: center;
63 }
64
65 .video-caption-block { 58 .video-caption-block {
66 display: flex; 59 display: flex;
67 align-items: center; 60 align-items: center;
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index 836972a33..ccd7f8f4b 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
@@ -1,5 +1,5 @@
1<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form"> 1<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
2 <div class="form-group form-group-select"> 2 <div class="form-group">
3 <div class="anchor" id="video-sensitive-content-policy"></div> <!-- video-sensitive-content-policy anchor --> 3 <div class="anchor" id="video-sensitive-content-policy"></div> <!-- video-sensitive-content-policy anchor -->
4 <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label> 4 <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
5 <my-help> 5 <my-help>
@@ -20,7 +20,7 @@
20 </div> 20 </div>
21 </div> 21 </div>
22 22
23 <div class="form-group form-group-select"> 23 <div class="form-group">
24 <div class="anchor" id="video-languages-subtitles"></div> <!-- video-languages-subtitles anchor --> 24 <div class="anchor" id="video-languages-subtitles"></div> <!-- video-languages-subtitles anchor -->
25 <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label> 25 <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
26 <my-help> 26 <my-help>
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 c4f6020d4..a39e7cf1f 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
@@ -15,8 +15,6 @@ input[type=submit] {
15 15
16.peertube-select-container { 16.peertube-select-container {
17 @include peertube-select-container(340px); 17 @include peertube-select-container(340px);
18
19 margin-bottom: 30px;
20} 18}
21 19
22my-select-languages { 20my-select-languages {
@@ -24,7 +22,3 @@ my-select-languages {
24 22
25 display: block; 23 display: block;
26} 24}
27
28.form-group-select {
29 margin-bottom: 30px;
30}
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
index a00c3d1c7..656d1beb3 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
@@ -1,5 +1,5 @@
1<form novalidate [formGroup]="form" (ngSubmit)="formValidated()"> 1<form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
2 <div class="form-group mb-2"> 2 <div class="form-group">
3 <input type="email" 3 <input type="email"
4 formControlName="text" 4 formControlName="text"
5 class="form-control" 5 class="form-control"
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index 01e305938..28396915a 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -7,8 +7,8 @@
7 7
8 <div class="modal-body" *ngIf="live"> 8 <div class="modal-body" *ngIf="live">
9 <div> 9 <div>
10 <div class="badge badge-info" *ngIf="live.permanentLive" i18n>Permanent/Recurring live</div> 10 <div class="pt-badge badge-blue" *ngIf="live.permanentLive" i18n>Permanent/Recurring live</div>
11 <div class="badge badge-info" *ngIf="live.saveReplay" i18n>Replay will be saved</div> 11 <div class="pt-badge badge-blue" *ngIf="live.saveReplay" i18n>Replay will be saved</div>
12 </div> 12 </div>
13 13
14 <div class="alert alert-info"> 14 <div class="alert alert-info">
@@ -36,8 +36,8 @@
36 <label i18n>Latest live sessions</label> 36 <label i18n>Latest live sessions</label>
37 37
38 <div class="journal-session" *ngFor="let session of latestLiveSessions"> 38 <div class="journal-session" *ngFor="let session of latestLiveSessions">
39 <span i18n class="badge badge-success" *ngIf="!getErrorLabel(session)">Success</span> 39 <span i18n class="pt-badge badge-success" *ngIf="!getErrorLabel(session)">Success</span>
40 <span class="badge badge-danger" *ngIf="getErrorLabel(session)">{{ getErrorLabel(session) }}</span> 40 <span class="pt-badge badge-danger" *ngIf="getErrorLabel(session)">{{ getErrorLabel(session) }}</span>
41 41
42 <span i18n>Started on {{ session.startDate | date:'medium' }}</span> 42 <span i18n>Started on {{ session.startDate | date:'medium' }}</span>
43 <span i18n *ngIf="session.endDate">Ended on {{ session.endDate | date:'medium' }}</span> 43 <span i18n *ngIf="session.endDate">Ended on {{ session.endDate | date:'medium' }}</span>
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 9c8ad12bd..fc0b1cea2 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
@@ -13,15 +13,16 @@ p-autocomplete {
13 margin: 1rem 0; 13 margin: 1rem 0;
14} 14}
15 15
16.badge { 16.pt-badge {
17 @include margin-right(5px);
18
17 font-size: 13px; 19 font-size: 13px;
18 margin-right: 5px;
19} 20}
20 21
21.journal-session { 22.journal-session {
22 margin-bottom: 5px; 23 margin-bottom: 5px;
23 24
24 span:not(.badge, :last-child)::after { 25 span:not(.pt-badge, :last-child)::after {
25 margin: 3px; 26 margin: 3px;
26 content: '•'; 27 content: '•';
27 } 28 }
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index b50544057..9123d2a5a 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -28,14 +28,15 @@
28 28
29 <ng-template ngbNavContent> 29 <ng-template ngbNavContent>
30 <div class="nav-content"> 30 <div class="nav-content">
31 <div class="input-group input-group-sm"> 31 <div class="input-group">
32 <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" /> 32 <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getLink()" />
33 33
34 <div class="input-group-append" *ngIf="!isConfidentialVideo()"> 34 <button
35 <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> 35 *ngIf="!isConfidentialVideo()" type="button" class="btn btn-outline-secondary"
36 <span class="glyphicon glyphicon-duplicate"></span> 36 [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()"
37 </button> 37 >
38 </div> 38 <span class="glyphicon glyphicon-duplicate"></span>
39 </button>
39 </div> 40 </div>
40 </div> 41 </div>
41 </ng-template> 42 </ng-template>
@@ -53,13 +54,15 @@
53 54
54 <ng-template ngbNavContent> 55 <ng-template ngbNavContent>
55 <div class="nav-content"> 56 <div class="nav-content">
56 <div class="input-group input-group-sm"> 57 <div class="input-group">
57 <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" /> 58 <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getLink()" />
58 <div class="input-group-append" *ngIf="!isConfidentialVideo()"> 59
59 <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary"> 60 <button
60 <span class="glyphicon glyphicon-duplicate"></span> 61 *ngIf="!isConfidentialVideo()" type="button" class="btn btn-outline-secondary"
61 </button> 62 [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()"
62 </div> 63 >
64 <span class="glyphicon glyphicon-duplicate"></span>
65 </button>
63 </div> 66 </div>
64 </div> 67 </div>
65 </ng-template> 68 </ng-template>
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 bd42f4813..04d5eb560 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
@@ -5,6 +5,13 @@
5 margin-top: 30px; 5 margin-top: 30px;
6} 6}
7 7
8.input-group > input {
9 @include peertube-input-text(auto);
10
11 font-size: 14px;
12 padding: 0 5px;
13}
14
8.advanced-filters-button { 15.advanced-filters-button {
9 display: flex; 16 display: flex;
10 justify-content: center; 17 justify-content: center;
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.html b/client/src/app/shared/shared-video-miniature/videos-list.component.html
index 2b554517f..c220f61f1 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.html
@@ -12,15 +12,15 @@
12 12
13 <div class="action-block"> 13 <div class="action-block">
14 <ng-container *ngFor="let action of headerActions"> 14 <ng-container *ngFor="let action of headerActions">
15 <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active"> 15 <a *ngIf="action.routerLink" class="ms-2" [routerLink]="action.routerLink" routerLinkActive="active">
16 <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container> 16 <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
17 </a> 17 </a>
18 18
19 <a *ngIf="!action.routerLink && !action.href && action.click" class="ml-2" (click)="action.click($event)" (key.enter)="action.click($event)"> 19 <a *ngIf="!action.routerLink && !action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)">
20 <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container> 20 <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
21 </a> 21 </a>
22 22
23 <a *ngIf="!action.routerLink && action.href && action.click" class="ml-2" (click)="action.click($event)" (key.enter)="action.click($event)" [href]="action.href"> 23 <a *ngIf="!action.routerLink && action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)" [href]="action.href">
24 <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container> 24 <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
25 </a> 25 </a>
26 26
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index 2400a4c25..f58d5f7f6 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -21,7 +21,7 @@
21 [attr.title]="playlistElement.video.name" 21 [attr.title]="playlistElement.video.name"
22 >{{ playlistElement.video.name }}</a> 22 >{{ playlistElement.video.name }}</a>
23 23
24 <span *ngIf="isVideoPrivate()" class="badge badge-yellow">Private</span> 24 <span *ngIf="isVideoPrivate()" class="pt-badge badge-yellow">Private</span>
25 </div> 25 </div>
26 26
27 <span class="video-miniature-created-at-views"> 27 <span class="video-miniature-created-at-views">
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 fbf67e892..c0cf2d1da 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
@@ -91,9 +91,8 @@ my-video-thumbnail,
91 padding-right: 5px; 91 padding-right: 5px;
92 } 92 }
93 93
94 .badge { 94 .pt-badge {
95 @include peertube-badge; 95 @include margin-right(5px);
96 margin-right: 5px;
97 } 96 }
98 } 97 }
99 98
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 99566acb6..b5b05a3c4 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -96,6 +96,10 @@ noscript,
96 margin: 1rem auto; 96 margin: 1rem auto;
97} 97}
98 98
99a {
100 text-decoration: none;
101}
102
99strong { 103strong {
100 font-weight: $font-semibold; 104 font-weight: $font-semibold;
101} 105}
@@ -120,6 +124,7 @@ button {
120label { 124label {
121 font-weight: $font-bold; 125 font-weight: $font-bold;
122 font-size: 15px; 126 font-size: 15px;
127 margin-bottom: 0.5rem;
123} 128}
124 129
125code { 130code {
@@ -133,6 +138,10 @@ code {
133 vertical-align: middle; 138 vertical-align: middle;
134} 139}
135 140
141.form-group {
142 margin-bottom: 1rem;
143}
144
136.form-error, 145.form-error,
137.form-warning { 146.form-warning {
138 display: block; 147 display: block;
@@ -154,14 +163,6 @@ my-input-toggle-hidden ::ng-deep input {
154 max-width: initial; 163 max-width: initial;
155} 164}
156 165
157.glyphicon-black {
158 color: #000;
159}
160
161.row {
162 margin: 0 !important;
163}
164
165.main-col { 166.main-col {
166 @include margin-left($menu-width); 167 @include margin-left($menu-width);
167 168
@@ -326,6 +327,29 @@ table {
326 margin-top: 10px; 327 margin-top: 10px;
327} 328}
328 329
330.callout {
331 padding: 1.25rem;
332 border: 1px solid #eee;
333 border-radius: .25rem;
334 position: relative;
335
336 > label {
337 position: relative;
338 top: -5px;
339 left: -10px;
340 color: #6c757d !important;
341 }
342
343 &:not(.callout-light) {
344 border-left-width: .25rem;
345 }
346
347 &.callout-info {
348 border-color: pvar(--mainColorLightest);
349 border-left-color: pvar(--mainColor);
350 }
351}
352
329@media screen and (max-width: #{breakpoint(xxl)}) { 353@media screen and (max-width: #{breakpoint(xxl)}) {
330 .main-col { 354 .main-col {
331 --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)}; 355 --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index bc37134dd..2df2d0680 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -7,27 +7,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
7 7
8@import '~bootstrap/scss/functions'; 8@import '~bootstrap/scss/functions';
9@import '~bootstrap/scss/variables'; 9@import '~bootstrap/scss/variables';
10
11@import '~bootstrap/scss/mixins'; 10@import '~bootstrap/scss/mixins';
11@import '~bootstrap/scss/utilities';
12
12@import '~bootstrap/scss/root'; 13@import '~bootstrap/scss/root';
13@import '~bootstrap/scss/reboot'; 14@import '~bootstrap/scss/reboot';
14@import '~bootstrap/scss/type'; 15@import '~bootstrap/scss/type';
15@import '~bootstrap/scss/grid'; 16@import '~bootstrap/scss/grid';
16@import '~bootstrap/scss/tables';
17@import '~bootstrap/scss/forms'; 17@import '~bootstrap/scss/forms';
18@import '~bootstrap/scss/buttons'; 18@import '~bootstrap/scss/buttons';
19@import '~bootstrap/scss/dropdown'; 19@import '~bootstrap/scss/dropdown';
20@import '~bootstrap/scss/button-group'; 20@import '~bootstrap/scss/button-group';
21@import '~bootstrap/scss/input-group';
22@import '~bootstrap/scss/nav'; 21@import '~bootstrap/scss/nav';
23@import '~bootstrap/scss/card'; 22@import '~bootstrap/scss/card';
24@import '~bootstrap/scss/badge'; 23@import '~bootstrap/scss/accordion';
25@import '~bootstrap/scss/alert'; 24@import '~bootstrap/scss/alert';
26@import '~bootstrap/scss/close'; 25@import '~bootstrap/scss/close';
27@import '~bootstrap/scss/modal'; 26@import '~bootstrap/scss/modal';
28@import '~bootstrap/scss/tooltip'; 27@import '~bootstrap/scss/tooltip';
29@import '~bootstrap/scss/popover'; 28@import '~bootstrap/scss/popover';
30@import '~bootstrap/scss/utilities'; 29
30@import '~bootstrap/scss/helpers';
31@import '~bootstrap/scss/utilities/api';
31 32
32@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; 33@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
33 34
@@ -36,16 +37,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
36 animation: spin 0.7s infinite linear; 37 animation: spin 0.7s infinite linear;
37} 38}
38 39
39.glyphicon-duplicate {
40 font-size: 70%;
41}
42
43.flex-auto { 40.flex-auto {
44 flex: auto; 41 flex: auto;
45} 42}
46 43
47.c-hand { 44.c-hand {
48 cursor: pointer; 45 cursor: pointer !important;
49} 46}
50 47
51@keyframes spin { 48@keyframes spin {
@@ -58,16 +55,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
58 } 55 }
59} 56}
60 57
61.btn-group > .btn:not(:first-child) {
62 border-top-left-radius: 0 !important;
63 border-bottom-left-radius: 0 !important;
64}
65
66.dropdown-menu { 58.dropdown-menu {
67 border-radius: 3px;
68 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
69 font-size: 15px; 59 font-size: 15px;
70
71 color: pvar(--mainForegroundColor); 60 color: pvar(--mainForegroundColor);
72 background-color: pvar(--mainBackgroundColor); 61 background-color: pvar(--mainBackgroundColor);
73 62
@@ -78,39 +67,22 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
78 .dropdown-item { 67 .dropdown-item {
79 padding: 3px 15px; 68 padding: 3px 15px;
80 69
81 color: pvar(--mainForegroundColor);
82 background-color: pvar(--mainBackgroundColor);
83
84 &.active { 70 &.active {
85 color: pvar(--mainBackgroundColor) !important; 71 color: pvar(--mainBackgroundColor) !important;
86 background-color: pvar(--mainHoverColor); 72 background-color: pvar(--mainHoverColor);
87 opacity: 0.9; 73 opacity: 0.9;
88 } 74 }
89 75
90 a:active,
91 &:hover {
92 color: pvar(--mainForegroundColor) !important;
93 background-color: pvar(--mainBackgroundHoverColor);
94 }
95
96 &::after { 76 &::after {
97 display: none; 77 display: none;
98 } 78 }
99 } 79 }
100 80
101 button {
102 @include disable-default-a-behaviour;
103 }
104
105 a { 81 a {
106 @include disable-default-a-behaviour; 82 @include disable-default-a-behaviour;
107 } 83 }
108} 84}
109 85
110.badge {
111 line-height: 1.1;
112}
113
114@media screen and (min-width: #{breakpoint(md)}) { 86@media screen and (min-width: #{breakpoint(md)}) {
115 .modal::before { 87 .modal::before {
116 vertical-align: middle; 88 vertical-align: middle;
@@ -350,22 +322,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
350} 322}
351 323
352.input-group { 324.input-group {
353 > .form-control { 325 > .btn,
354 flex: initial; 326 > .input-group-text {
327 height: $button-height;
355 } 328 }
356 329
357 input.form-control { 330 > .input-group-text {
358 width: unset !important; 331 font-size: 15px;
359 flex-grow: 1; 332 line-height: normal;
333 opacity: 0.9;
360 } 334 }
361 335
362 .input-group-prepend + input { 336 .input-group-text > .dropdown-toggle {
363 border-top-left-radius: 0 !important; 337 display: flex;
364 border-bottom-left-radius: 0 !important; 338 }
339
340 .last-in-group {
341 border-top-right-radius: 3px !important;
342 border-bottom-right-radius: 3px !important;
365 } 343 }
366} 344}
367 345
368.has-feedback.has-clear { 346.has-clear {
369 position: relative; 347 position: relative;
370 348
371 input { 349 input {
@@ -374,11 +352,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
374 352
375 .form-control-clear { 353 .form-control-clear {
376 color: rgba(0, 0, 0, 0.4); 354 color: rgba(0, 0, 0, 0.4);
377 /*
378 * Enable pointer events as they have been disabled since Bootstrap 3.3
379 * See https://github.com/twbs/bootstrap/pull/14104
380 */
381 pointer-events: all;
382 display: flex; 355 display: flex;
383 justify-content: center; 356 justify-content: center;
384 align-items: center; 357 align-items: center;
@@ -397,44 +370,3 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
397 display: none; 370 display: none;
398 } 371 }
399} 372}
400
401.callout {
402 padding: 1.25rem;
403 border: 1px solid #eee;
404 border-radius: .25rem;
405
406 > label {
407 position: relative;
408 top: -5px;
409 left: -10px;
410 color: #6c757d !important;
411 }
412
413 &:not(.callout-light) {
414 border-left-width: .25rem;
415 }
416
417 &.callout-info {
418 border-color: pvar(--mainColorLightest);
419 border-left-color: pvar(--mainColor);
420 }
421}
422
423// Override these properties for Bidi support
424@each $size, $length in $spacers {
425 .ml-#{$size} {
426 @include margin-left($length);
427 }
428
429 .mr-#{$size} {
430 @include margin-right($length);
431 }
432
433 .pl-#{$size} {
434 @include padding-left($length);
435 }
436
437 .pr-#{$size} {
438 @include padding-right($length);
439 }
440}
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
index 90cdcf3ed..35bcfba4b 100644
--- a/client/src/sass/classes.scss
+++ b/client/src/sass/classes.scss
@@ -1,5 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3@use '_badges' as *;
3 4
4.peertube-button { 5.peertube-button {
5 @include peertube-button; 6 @include peertube-button;
@@ -32,3 +33,7 @@
32.muted { 33.muted {
33 color: pvar(--greyForegroundColor) !important; 34 color: pvar(--greyForegroundColor) !important;
34} 35}
36
37.pt-badge {
38 @include peertube-badge;
39}
diff --git a/client/src/sass/include/_badges.scss b/client/src/sass/include/_badges.scss
new file mode 100644
index 000000000..4bc70d4a9
--- /dev/null
+++ b/client/src/sass/include/_badges.scss
@@ -0,0 +1,61 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4@mixin peertube-badge {
5 display: inline-block;
6 border-radius: .25rem;
7 padding: .25em .4em;
8 font-size: 75%;
9 font-weight: $font-semibold;
10 line-height: 1.1;
11
12 &.badge-primary {
13 color: pvar(--mainBackgroundColor);
14 background-color: pvar(--mainColor);
15 }
16
17 &.badge-secondary {
18 color: pvar(--mainBackgroundColor);
19 background-color: pvar(--greyForegroundColor);
20 opacity: 0.7;
21 }
22
23 &.badge-banned,
24 &.badge-danger,
25 &.badge-red {
26 background-color: #ffcdd2;
27 color: #c63737;
28 }
29
30 &.badge-banned {
31 text-decoration: line-through;
32 }
33
34 &.badge-yellow,
35 &.badge-warning {
36 background-color: #feedaf;
37 color: #8a5340;
38 }
39
40 &.badge-brown {
41 background-color: #ffd8b2;
42 color: #805b36;
43 }
44
45 &.badge-green,
46 &.badge-success {
47 background-color: #c8e6c9;
48 color: #256029;
49 }
50
51 &.badge-blue,
52 &.badge-info {
53 background-color: #b3e5fc;
54 color: #23547b;
55 }
56
57 &.badge-purple {
58 background-color: #eccfff;
59 color: #694382;
60 }
61}
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 41a1448c4..c103e485a 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -1,4 +1,4 @@
1$dropdown-link-active-bg: inherit; 1@use '_variables' as *;
2 2
3$modal-footer-border-width: 0; 3$modal-footer-border-width: 0;
4$modal-md: 600px; 4$modal-md: 600px;
@@ -40,3 +40,11 @@ $input-focus-border-color: #ced4da;
40 40
41$nav-pills-link-active-bg: #F0F0F0; 41$nav-pills-link-active-bg: #F0F0F0;
42$nav-pills-link-active-color: #000; 42$nav-pills-link-active-color: #000;
43
44$dropdown-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
45$dropdown-border-radius: 3px;
46$dropdown-link-active-color: pvar(--mainForegroundColor);
47$dropdown-link-active-bg: pvar(--mainBackgroundHoverColor);
48
49$accordion-button-active-bg: pvar(--mainColorLightest);
50$accordion-button-active-color: pvar(--mainForegroundColor);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 8de23e64d..8545824e3 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -89,6 +89,7 @@
89 display: inline-block; 89 display: inline-block;
90 height: $button-height; 90 height: $button-height;
91 width: $width; 91 width: $width;
92 max-width: $width;
92 color: pvar(--inputForegroundColor); 93 color: pvar(--inputForegroundColor);
93 background-color: pvar(--inputBackgroundColor); 94 background-color: pvar(--inputBackgroundColor);
94 border: 1px solid #C6C6C6; 95 border: 1px solid #C6C6C6;
@@ -108,19 +109,6 @@
108 } 109 }
109} 110}
110 111
111@mixin peertube-input-group($width) {
112 width: $width;
113 min-height: $button-height;
114 padding-top: 0;
115 padding-bottom: 0;
116 flex-wrap: nowrap;
117
118 .input-group-text {
119 font-size: 14px;
120 color: #808080;
121 }
122}
123
124@mixin peertube-textarea ($width, $height) { 112@mixin peertube-textarea ($width, $height) {
125 @include peertube-input-text($width); 113 @include peertube-input-text($width);
126 114
@@ -371,6 +359,7 @@
371 cursor: default; 359 cursor: default;
372 } 360 }
373 } 361 }
362
374 select[disabled] { 363 select[disabled] {
375 background-color: #f9f9f9; 364 background-color: #f9f9f9;
376 } 365 }
@@ -550,50 +539,6 @@
550 } 539 }
551} 540}
552 541
553@mixin peertube-badge {
554 border-radius: 2px;
555 padding: 1/4em 1/2em;
556 text-transform: uppercase;
557 font-weight: $font-bold;
558 font-size: 12px;
559 letter-spacing: 1/3px;
560
561 &.badge-banned,
562 &.badge-red {
563 background-color: #ffcdd2;
564 color: #c63737;
565 }
566
567 &.badge-banned {
568 text-decoration: line-through;
569 }
570
571 &.badge-yellow {
572 background-color: #feedaf;
573 color: #8a5340;
574 }
575
576 &.badge-brown {
577 background-color: #ffd8b2;
578 color: #805b36;
579 }
580
581 &.badge-green {
582 background-color: #c8e6c9;
583 color: #256029;
584 }
585
586 &.badge-blue {
587 background-color: #b3e5fc;
588 color: #23547b;
589 }
590
591 &.badge-purple {
592 background-color: #eccfff;
593 color: #694382;
594 }
595}
596
597@mixin actor-avatar-size ($size) { 542@mixin actor-avatar-size ($size) {
598 display: inline-block; 543 display: inline-block;
599 width: $size; 544 width: $size;
@@ -937,8 +882,9 @@
937 vertical-align: top; 882 vertical-align: top;
938 } 883 }
939 884
940 .badge { 885 .pt-badge {
941 @include margin-left(7px); 886 @include margin-left(7px);
887
942 vertical-align: top; 888 vertical-align: top;
943 } 889 }
944 } 890 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index fd1b137dc..41ae60290 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,4 +1,5 @@
1@use 'sass:math'; 1@use 'sass:math';
2@use '~bootstrap/scss/functions' as *;
2 3
3$small-view: 800px; 4$small-view: 800px;
4$mobile-view: 500px; 5$mobile-view: 500px;
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 79c878852..47b8adda4 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -1,3 +1,5 @@
1@use '~bootstrap/scss/functions' as *;
2
1$primary-foreground-color: #fff; 3$primary-foreground-color: #fff;
2$primary-foreground-opacity: 0.9; 4$primary-foreground-opacity: 0.9;
3$primary-foreground-opacity-hover: 1; 5$primary-foreground-opacity-hover: 1;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 9fc010d4f..a66e4485b 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -759,8 +759,9 @@ p-table {
759 } 759 }
760 } 760 }
761 761
762 .badge { 762 .pt-badge {
763 @include peertube-badge; 763 font-size: 12px;
764 text-transform: uppercase;
764 } 765 }
765} 766}
766 767
diff --git a/client/src/sass/z-index.scss b/client/src/sass/z-index.scss
index e46813dc3..c2c44b851 100644
--- a/client/src/sass/z-index.scss
+++ b/client/src/sass/z-index.scss
@@ -27,7 +27,6 @@ ngx-loading-bar {
27.btn-group, 27.btn-group,
28.dropdown-root, 28.dropdown-root,
29.action-dropdown, 29.action-dropdown,
30.input-group-prepend,
31.column-toggle { 30.column-toggle {
32 z-index: inherit !important; 31 z-index: inherit !important;
33} 32}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-24 03:12:21 +0000