aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.scss4
-rw-r--r--client/src/app/+about/about-instance/contact-admin-modal.component.scss1
-rw-r--r--client/src/app/+about/about-peertube/about-peertube.component.html21
-rw-r--r--client/src/app/+about/about-peertube/about-peertube.component.scss16
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss6
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html30
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss12
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html4
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html15
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html26
-rw-r--r--client/src/app/+admin/follows/followers-list/followers-list.component.html2
-rw-r--r--client/src/app/+admin/overview/users/user-edit/user-edit.component.scss5
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss2
-rw-r--r--client/src/app/+admin/plugins/shared/plugin-card.component.scss1
-rw-r--r--client/src/app/+admin/system/debug/debug.component.scss10
-rw-r--r--client/src/app/+login/login.component.scss1
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.component.html2
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss5
-rw-r--r--client/src/app/+my-account/my-account-applications/my-account-applications.component.scss5
-rw-r--r--client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss6
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html14
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss18
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss7
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss3
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html2
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss5
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.html1
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.html8
-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-followers.component.scss4
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.html2
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.scss5
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.ts8
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss5
-rw-r--r--client/src/app/+search/search-filters.component.scss1
-rw-r--r--client/src/app/+search/search.component.scss1
-rw-r--r--client/src/app/+signup/+register/register.component.scss9
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss5
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-edit.component.scss13
-rw-r--r--client/src/app/+videos/+video-edit/video-add.component.scss1
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss1
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss4
-rw-r--r--client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss1
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.scss4
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.html6
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.scss61
-rw-r--r--client/src/app/app.component.scss10
-rw-r--r--client/src/app/menu/language-chooser.component.scss1
-rw-r--r--client/src/app/menu/menu.component.scss4
-rw-r--r--client/src/app/modal/account-setup-warning-modal.component.scss2
-rw-r--r--client/src/app/modal/admin-welcome-modal.component.scss6
-rw-r--r--client/src/app/modal/confirm.component.scss4
-rw-r--r--client/src/app/modal/custom-modal.component.scss4
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.scss4
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss5
-rw-r--r--client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss1
-rw-r--r--client/src/app/shared/shared-actor-image/actor-avatar.component.html4
-rw-r--r--client/src/app/shared/shared-actor-image/actor-avatar.component.ts24
-rw-r--r--client/src/app/shared/shared-forms/input-text.component.scss2
-rw-r--r--client/src/app/shared/shared-forms/markdown-textarea.component.scss1
-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.scss14
-rw-r--r--client/src/app/shared/shared-forms/timestamp-input.component.scss1
-rw-r--r--client/src/app/shared/shared-icons/global-icon.component.scss5
-rw-r--r--client/src/app/shared/shared-instance/instance-about-accordion.component.scss1
-rw-r--r--client/src/app/shared/shared-instance/instance-features-table.component.scss1
-rw-r--r--client/src/app/shared/shared-main/buttons/action-dropdown.component.html2
-rw-r--r--client/src/app/shared/shared-main/buttons/action-dropdown.component.ts2
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.html6
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.scss1
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.ts10
-rw-r--r--client/src/app/shared/shared-main/buttons/edit-button.component.ts4
-rw-r--r--client/src/app/shared/shared-main/misc/channels-setup-message.component.scss34
-rw-r--r--client/src/app/shared/shared-main/misc/simple-search-input.component.html10
-rw-r--r--client/src/app/shared/shared-main/users/user-quota.component.scss5
-rw-r--r--client/src/app/shared/shared-moderation/account-blocklist.component.html2
-rw-r--r--client/src/app/shared/shared-moderation/server-blocklist.component.html2
-rw-r--r--client/src/app/shared/shared-moderation/user-ban-modal.component.scss1
-rw-r--r--client/src/app/shared/shared-moderation/video-block.component.scss1
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.scss5
-rw-r--r--client/src/app/shared/shared-user-settings/user-interface-settings.component.scss5
-rw-r--r--client/src/app/shared/shared-user-settings/user-video-settings.component.html2
-rw-r--r--client/src/app/shared/shared-user-settings/user-video-settings.component.scss5
-rw-r--r--client/src/app/shared/shared-user-subscription/subscribe-button.component.html14
-rw-r--r--client/src/app/shared/shared-user-subscription/subscribe-button.component.scss14
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.scss1
-rw-r--r--client/src/app/shared/shared-video-miniature/video-filters-header.component.scss2
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.scss4
-rw-r--r--client/src/app/shared/shared-video-miniature/videos-list.component.scss2
-rw-r--r--client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html10
-rw-r--r--client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss45
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss73
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss2
94 files changed, 245 insertions, 486 deletions
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 a48783639..c01e690d1 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -20,7 +20,6 @@
20 20
21.instance-badges { 21.instance-badges {
22 margin-bottom: 20px; 22 margin-bottom: 20px;
23 font-size: 16px;
24 23
25 .pt-badge { 24 .pt-badge {
26 @include margin-right(5px); 25 @include margin-right(5px);
@@ -29,10 +28,10 @@
29 28
30.section-title { 29.section-title {
31 font-weight: $font-semibold; 30 font-weight: $font-semibold;
32 font-size: 16px;
33 margin-bottom: 5px; 31 margin-bottom: 5px;
34 display: flex; 32 display: flex;
35 align-items: center; 33 align-items: center;
34 font-size: 1rem;
36} 35}
37 36
38.middle-title { 37.middle-title {
@@ -44,7 +43,6 @@
44 43
45.block { 44.block {
46 margin-bottom: 75px; 45 margin-bottom: 75px;
47 font-size: 15px;
48} 46}
49 47
50.short-description { 48.short-description {
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
index e143a9dc6..6db6f13b3 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -2,7 +2,6 @@
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.modal-subtitle { 4.modal-subtitle {
5 font-size: 16px;
6 line-height: 1rem; 5 line-height: 1rem;
7 margin-bottom: 0; 6 margin-bottom: 0;
8} 7}
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html
index 62689e3ae..f8700d9b6 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.html
+++ b/client/src/app/+about/about-peertube/about-peertube.component.html
@@ -11,12 +11,12 @@
11 </p> 11 </p>
12 12
13 <p i18n> 13 <p i18n>
14 It is free and open-source software, under <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE">AGPLv3 14 It is free and open-source software, under <a class="link-orange" href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE">AGPLv3
15 licence</a>. 15 licence</a>.
16 </p> 16 </p>
17 17
18 <p i18n> 18 <p i18n>
19 For more information, please visit <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">joinpeertube.org</a>. 19 For more information, please visit <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">joinpeertube.org</a>.
20 </p> 20 </p>
21 </div> 21 </div>
22 22
@@ -25,9 +25,8 @@
25 <div class="card"> 25 <div class="card">
26 <div class="card-body"> 26 <div class="card-body">
27 <div class="card-title"> 27 <div class="card-title">
28 <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-setup-account">Use PeerTube 28 <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-setup-account">Use PeerTube documentation</a>
29 documentation</a> 29 </div>
30 </div>
31 30
32 <div i18n class="card-text"> 31 <div i18n class="card-text">
33 Discover how to setup your account, what is a channel, how to create a playlist and more! 32 Discover how to setup your account, what is a channel, how to create a playlist and more!
@@ -38,9 +37,8 @@
38 <div class="card"> 37 <div class="card">
39 <div class="card-body"> 38 <div class="card-body">
40 <div class="card-title"> 39 <div class="card-title">
41 <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-third-party-application">PeerTube 40 <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/use-third-party-application">PeerTube Applications</a>
42 Applications</a> 41 </div>
43 </div>
44 42
45 <div i18n class="card-text"> 43 <div i18n class="card-text">
46 Discover unofficial Android applications or browser addons! 44 Discover unofficial Android applications or browser addons!
@@ -51,9 +49,8 @@
51 <div class="card"> 49 <div class="card">
52 <div class="card-body"> 50 <div class="card-body">
53 <div class="card-title"> 51 <div class="card-title">
54 <a i18n target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/contribute-getting-started">Contribute on 52 <a i18n class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/contribute-getting-started">Contribute on PeerTube</a>
55 PeerTube</a> 53 </div>
56 </div>
57 54
58 <div i18n class="card-text"> 55 <div i18n class="card-text">
59 Want to help to improve PeerTube? You can translate the web interface, give your feedback or directly contribute to the code! 56 Want to help to improve PeerTube? You can translate the web interface, give your feedback or directly contribute to the code!
@@ -116,7 +113,7 @@
116 Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker. 113 Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker.
117 When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers 114 When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers
118 to forward the information to. 115 to forward the information to.
119 See <a href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information 116 See <a class="link-orange" href="https://github.com/yciabaud/webtorrent/blob/beps/bep_webrtc.rst">this document</a> for more information
120 </li> 117 </li>
121 </ul> 118 </ul>
122 119
diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
index 2a5ec08f5..a0d227a28 100644
--- a/client/src/app/+about/about-peertube/about-peertube.component.scss
+++ b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -37,18 +37,6 @@
37 .card { 37 .card {
38 margin: 30px; 38 margin: 30px;
39 flex-basis: 300px; 39 flex-basis: 300px;
40 font-size: 15px;
41 }
42}
43
44.description,
45.p2p-privacy,
46my-about-peertube-contributors {
47 ::ng-deep {
48 p,
49 li {
50 font-size: 15px;
51 }
52 } 40 }
53} 41}
54 42
@@ -70,7 +58,9 @@ my-about-peertube-contributors {
70} 58}
71 59
72.card-title { 60.card-title {
73 font-size: 1.25rem; 61 font-size: 1.1rem;
62 text-align: center;
63 margin-bottom: 1rem;
74} 64}
75 65
76.p2p-privacy-title { 66.p2p-privacy-title {
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 30b8098be..832ddf973 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -65,7 +65,6 @@
65 grid-row: 2; 65 grid-row: 2;
66 66
67 max-height: 80px; 67 max-height: 80px;
68 font-size: 16px;
69 } 68 }
70} 69}
71 70
@@ -105,7 +104,6 @@ my-subscribe-button {
105 104
106 a { 105 a {
107 color: pvar(--mainColor); 106 color: pvar(--mainColor);
108 font-size: 16px;
109 font-weight: $font-semibold; 107 font-weight: $font-semibold;
110 } 108 }
111} 109}
@@ -126,10 +124,6 @@ my-subscribe-button {
126 grid-row: 1 / 4; 124 grid-row: 1 / 4;
127 } 125 }
128 126
129 h2 {
130 font-size: 16px;
131 }
132
133 .actor-counters { 127 .actor-counters {
134 margin: 0; 128 margin: 0;
135 font-size: 13px; 129 font-size: 13px;
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 d0d66d631..c62ea7700 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
@@ -3,7 +3,7 @@
3 <div class="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 class="link-orange" routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or add slight <a class="link-orange" routerLink="/admin/config/edit-custom" fragment="advanced-configuration">customizations</a>.
7 </div> 7 </div>
8 </div> 8 </div>
9 9
@@ -91,7 +91,7 @@
91 <div class="row mt-4"> <!-- broadcast grid --> 91 <div class="row mt-4"> <!-- broadcast grid -->
92 <div class="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-form-description">
95 Display a message on your instance 95 Display a message on your instance
96 </div> 96 </div>
97 </div> 97 </div>
@@ -147,8 +147,8 @@
147 <div class="row mt-4"> <!-- new users grid --> 147 <div class="row mt-4"> <!-- new users grid -->
148 <div class="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-form-description">
151 Manage <a routerLink="/admin/users">users</a> to set their quota individually. 151 Manage <a class="link-orange" routerLink="/admin/users">users</a> to set their quota individually.
152 </div> 152 </div>
153 </div> 153 </div>
154 154
@@ -185,7 +185,7 @@
185 185
186 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div> 186 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
187 187
188 <small i18n *ngIf="hasUnlimitedSignup()" class="muted">Signup won't be limited to a fixed number of users.</small> 188 <small i18n *ngIf="hasUnlimitedSignup()" class="muted small">Signup won't be limited to a fixed number of users.</small>
189 </div> 189 </div>
190 190
191 <div [ngClass]="getDisabledSignupClass()" class="mt-3"> 191 <div [ngClass]="getDisabledSignupClass()" class="mt-3">
@@ -252,7 +252,7 @@
252 252
253 <div class="form-group"> 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 ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span> 255 <span i18n class="small 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" />
@@ -268,7 +268,7 @@
268 i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)" 268 i18n-labelText labelText="Allow import with HTTP URL (e.g. YouTube)"
269 > 269 >
270 <ng-container ngProjectAs="description"> 270 <ng-container ngProjectAs="description">
271 <span i18n>⚠️ If enabled, we recommend to use <a href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span> 271 <span i18n>⚠️ If enabled, we recommend to use <a class="link-orange" href="https://docs.joinpeertube.org/maintain-configuration?id=security">a HTTP proxy</a> to prevent private URL access from your PeerTube server</span>
272 </ng-container> 272 </ng-container>
273 </my-peertube-checkbox> 273 </my-peertube-checkbox>
274 </div> 274 </div>
@@ -372,11 +372,11 @@
372 i18n-labelText labelText="Enable global search" 372 i18n-labelText labelText="Enable global search"
373 > 373 >
374 <ng-container ngProjectAs="description"> 374 <ng-container ngProjectAs="description">
375 <p i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</p> 375 <div i18n>⚠️ This functionality depends heavily on the moderation of instances followed by the search index you select.</div>
376 376
377 <span i18n> 377 <div i18n>
378 You should only use moderated search indexes in production, or <a href="https://framagit.org/framasoft/peertube/search-index">host your own</a>. 378 You should only use moderated search indexes in production, or <a class="link-orange" href="https://framagit.org/framasoft/peertube/search-index">host your own</a>.
379 </span> 379 </div>
380 </ng-container> 380 </ng-container>
381 381
382 <ng-container ngProjectAs="extra"> 382 <ng-container ngProjectAs="extra">
@@ -424,7 +424,7 @@
424 <div class="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 class="link-orange" routerLink="/admin/follows">relations</a> with other instances.
428 </div> 428 </div>
429 </div> 429 </div>
430 430
@@ -472,10 +472,10 @@
472 i18n-labelText labelText="Automatically follow instances of a public index" 472 i18n-labelText labelText="Automatically follow instances of a public index"
473 > 473 >
474 <ng-container ngProjectAs="description"> 474 <ng-container ngProjectAs="description">
475 <p i18n>⚠️ This functionality requires a lot of attention and extra moderation.</p> 475 <div i18n>⚠️ This functionality requires a lot of attention and extra moderation.</div>
476 476
477 <span i18n> 477 <span i18n>
478 See <a href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL 478 See <a class="link-orange" href="https://docs.joinpeertube.org/admin-following-instances?id=automatically-follow-other-instances" rel="noopener noreferrer" target="_blank">the documentation</a> for more information about the expected URL
479 </span> 479 </span>
480 </ng-container> 480 </ng-container>
481 481
@@ -563,7 +563,7 @@
563 If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br /> 563 If your instance is explicitly allowed by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
564 If the instance is not, we use an image link card that will redirect to your PeerTube instance.<br /><br /> 564 If the instance is not, we use an image link card that will redirect to your PeerTube instance.<br /><br />
565 Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/w/blabla) on 565 Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/w/blabla) on
566 <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a> 566 <a class="link-orange" target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a>
567 to see if you instance is allowed. 567 to see if you instance is allowed.
568 </ng-container> 568 </ng-container>
569 </ng-template> 569 </ng-template>
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 31dd9f54f..f3bce8ee0 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
@@ -3,11 +3,6 @@
3 3
4$form-base-input-width: 340px; 4$form-base-input-width: 340px;
5 5
6label {
7 font-weight: $font-regular;
8 font-size: 100%;
9}
10
11form { 6form {
12 padding-bottom: 1.5rem; 7 padding-bottom: 1.5rem;
13} 8}
@@ -30,7 +25,7 @@ input[type=number] {
30 25
31 input[type=number] + span { 26 input[type=number] + span {
32 position: absolute; 27 position: absolute;
33 top: 5px; 28 top: 0.2em;
34 right: 2.5rem; 29 right: 2.5rem;
35 } 30 }
36 31
@@ -74,6 +69,10 @@ input[type=submit] {
74 @include settings-big-title; 69 @include settings-big-title;
75} 70}
76 71
72.inner-form-description {
73 font-size: 15px;
74}
75
77textarea { 76textarea {
78 @include peertube-textarea(500px, 150px); 77 @include peertube-textarea(500px, 150px);
79 78
@@ -88,6 +87,7 @@ textarea {
88.label-small-info { 87.label-small-info {
89 font-style: italic; 88 font-style: italic;
90 margin-bottom: 10px; 89 margin-bottom: 10px;
90 font-size: 14px;
91} 91}
92 92
93.disabled-checkbox-extra { 93.disabled-checkbox-extra {
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 1c567d962..5931cb459 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
@@ -79,8 +79,8 @@
79 <div class="row mt-4"> <!-- moderation & nsfw grid --> 79 <div class="row mt-4"> <!-- moderation & nsfw grid -->
80 <div class="col-12 col-lg-4 col-xl-3"> 80 <div class="col-12 col-lg-4 col-xl-3">
81 <div i18n class="inner-form-title">MODERATION & NSFW</div> 81 <div i18n class="inner-form-title">MODERATION & NSFW</div>
82 <div i18row="inner-for-description"> 82 <div i18row="inner-form-description">
83 Manage <a routerLink="/admin/users">users</a> to build a moderation team. 83 Manage <a class="link-orange" routerLink="/admin/users">users</a> to build a moderation team.
84 </div> 84 </div>
85 </div> 85 </div>
86 86
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 a970f3df3..ae79e54fc 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
@@ -46,9 +46,9 @@
46 </div> 46 </div>
47 47
48 <div class="form-group" [ngClass]="getDisabledLiveClass()"> 48 <div class="form-group" [ngClass]="getDisabledLiveClass()">
49 <label i18n for="liveMaxInstanceLives"> 49 <label i18n for="liveMaxInstanceLives">Max simultaneous lives created on your instance</label>
50 Max simultaneous lives created on your instance <span class="muted">(-1 for "unlimited")</span> 50
51 </label> 51 <span class="ms-2 small muted">(-1 for "unlimited")</span>
52 52
53 <div class="number-with-unit"> 53 <div class="number-with-unit">
54 <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" /> 54 <input type="number" name="liveMaxInstanceLives" formControlName="maxInstanceLives" />
@@ -59,9 +59,8 @@
59 </div> 59 </div>
60 60
61 <div class="form-group" [ngClass]="getDisabledLiveClass()"> 61 <div class="form-group" [ngClass]="getDisabledLiveClass()">
62 <label i18n for="liveMaxUserLives"> 62 <label i18n for="liveMaxUserLives">Max simultaneous lives created per user</label>
63 Max simultaneous lives created per user <span class="muted">(-1 for "unlimited")</span> 63 <span class="ms-2 small muted">(-1 for "unlimited")</span>
64 </label>
65 64
66 <div class="number-with-unit"> 65 <div class="number-with-unit">
67 <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" /> 66 <input type="number" name="liveMaxUserLives" formControlName="maxUserLives" />
@@ -136,7 +135,7 @@
136 <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()"> 135 <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
137 <label i18n for="liveTranscodingThreads">Live transcoding threads</label> 136 <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
138 137
139 <span class="muted ms-1"> 138 <span class="small muted ms-1">
140 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n> 139 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
141 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding 140 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
142 </ng-container> 141 </ng-container>
@@ -157,7 +156,7 @@
157 156
158 <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()"> 157 <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()">
159 <label i18n for="liveTranscodingProfile">Live transcoding profile</label> 158 <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
160 <span class="muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span> 159 <span class="small muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
161 160
162 <my-select-options 161 <my-select-options
163 id="liveTranscodingProfile" 162 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 2a965ac97..66e421b16 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
@@ -8,15 +8,10 @@
8 <span i18n> 8 <span i18n>
9 Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically. 9 Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically.
10 </span> 10 </span>
11
11 <span i18n> 12 <span i18n>
12 However, you may want to read our guidelines before tweaking the following values. 13 However, you may want to read <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin-configuration?id=transcoding">our guidelines</a> before tweaking the following values.
13 </span> 14 </span>
14
15 <div class="callout-container">
16 <a class="callout-link" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin-configuration?id=transcoding" i18n>
17 Read guidelines
18 </a>
19 </div>
20 </div> 15 </div>
21 </div> 16 </div>
22 </div> 17 </div>
@@ -115,7 +110,11 @@
115 <div class="form-group" [ngClass]="getTranscodingDisabledClass()"> 110 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
116 <label i18n>Resolutions to generate per enabled format</label> 111 <label i18n>Resolutions to generate per enabled format</label>
117 112
118 <div class="ms-2 mt-2 d-flex flex-column"> 113 <div class="ms-2 d-flex flex-column">
114 <span class="mb-3 small muted" i18n>
115 The original file resolution will be the default target if no option is selected.
116 </span>
117
119 <ng-container formGroupName="resolutions"> 118 <ng-container formGroupName="resolutions">
120 <div class="form-group" *ngFor="let resolution of resolutions"> 119 <div class="form-group" *ngFor="let resolution of resolutions">
121 <my-peertube-checkbox 120 <my-peertube-checkbox
@@ -127,10 +126,6 @@
127 </ng-template> 126 </ng-template>
128 </my-peertube-checkbox> 127 </my-peertube-checkbox>
129 </div> 128 </div>
130
131 <span class="mb-2 muted" i18n>
132 The original file resolution will be the default target if no option is selected.
133 </span>
134 </ng-container> 129 </ng-container>
135 </div> 130 </div>
136 </div> 131 </div>
@@ -142,7 +137,8 @@
142 137
143 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()"> 138 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
144 <label i18n for="transcodingThreads">Transcoding threads</label> 139 <label i18n for="transcodingThreads">Transcoding threads</label>
145 <span class="muted ms-1"> 140
141 <span class="small muted ms-1">
146 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n> 142 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
147 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding 143 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
148 </ng-container> 144 </ng-container>
@@ -164,7 +160,7 @@
164 160
165 <div class="form-group" [ngClass]="getTranscodingDisabledClass()"> 161 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
166 <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label> 162 <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
167 <span class="muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span> 163 <span class="small muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
168 164
169 <div class="number-with-unit"> 165 <div class="number-with-unit">
170 <input type="number" name="transcodingConcurrency" formControlName="concurrency" /> 166 <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
@@ -176,7 +172,7 @@
176 172
177 <div class="form-group" [ngClass]="getTranscodingDisabledClass()"> 173 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
178 <label i18n for="transcodingProfile">Transcoding profile</label> 174 <label i18n for="transcodingProfile">Transcoding profile</label>
179 <span class="muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span> 175 <span class="small muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
180 176
181 <my-select-options 177 <my-select-options
182 id="transcodingProfile" 178 id="transcodingProfile"
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 a7d95e4a4..5367bf517 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
@@ -59,7 +59,7 @@
59 59
60 <ng-template pTemplate="emptymessage"> 60 <ng-template pTemplate="emptymessage">
61 <tr> 61 <tr>
62 <td colspan="6"> 62 <td colspan="5">
63 <div class="no-results"> 63 <div class="no-results">
64 <ng-container *ngIf="search" i18n>No follower found matching current filters.</ng-container> 64 <ng-container *ngIf="search" i18n>No follower found matching current filters.</ng-container>
65 <ng-container *ngIf="!search" i18n>Your instance doesn't have any follower.</ng-container> 65 <ng-container *ngIf="!search" i18n>Your instance doesn't have any follower.</ng-container>
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
index f9f4474a2..254286ae3 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
@@ -4,11 +4,6 @@
4 4
5$form-base-input-width: 340px; 5$form-base-input-width: 340px;
6 6
7label {
8 font-weight: $font-regular;
9 font-size: 100%;
10}
11
12.account-title { 7.account-title {
13 @include settings-big-title; 8 @include settings-big-title;
14 9
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 55baa038f..d7b41f4d8 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
@@ -17,8 +17,6 @@
17 17
18 input { 18 input {
19 @include peertube-input-text(500px); 19 @include peertube-input-text(500px);
20
21 height: 35px;
22 } 20 }
23} 21}
24 22
diff --git a/client/src/app/+admin/plugins/shared/plugin-card.component.scss b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
index 608064722..9f05f9db6 100644
--- a/client/src/app/+admin/plugins/shared/plugin-card.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-card.component.scss
@@ -14,7 +14,6 @@
14 .plugin-name { 14 .plugin-name {
15 @include margin-right(10px); 15 @include margin-right(10px);
16 16
17 font-size: 16px;
18 font-weight: $font-semibold; 17 font-weight: $font-semibold;
19 } 18 }
20 19
diff --git a/client/src/app/+admin/system/debug/debug.component.scss b/client/src/app/+admin/system/debug/debug.component.scss
index 7f5e861e2..bcbc3fc7c 100644
--- a/client/src/app/+admin/system/debug/debug.component.scss
+++ b/client/src/app/+admin/system/debug/debug.component.scss
@@ -1,11 +1,7 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.root { 4code {
5 font-size: 15px; 5 font-size: 14px;
6 6 font-weight: $font-semibold;
7 code {
8 font-size: 14px;
9 font-weight: $font-semibold;
10 }
11} 7}
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index f46cbf2bc..79a2081fe 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -66,7 +66,6 @@ input[type=email] {
66 display: flex; 66 display: flex;
67 flex-wrap: wrap; 67 flex-wrap: wrap;
68 justify-content: center; 68 justify-content: center;
69 font-size: 15px;
70 max-width: 450px; 69 max-width: 450px;
71 margin-bottom: 40px; 70 margin-bottom: 40px;
72 71
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 61b89082c..f71f73fec 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
@@ -10,7 +10,7 @@
10 </div> 10 </div>
11 11
12 <div class="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 <label i18n>Banner image of the channel</label>
14 14
15 <my-actor-banner-edit 15 <my-actor-banner-edit
16 *ngIf="videoChannel" [previewImage]="isCreation()" 16 *ngIf="videoChannel" [previewImage]="isCreation()"
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 2c720314a..008397a7a 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
@@ -5,11 +5,6 @@
5 padding-top: 20px; 5 padding-top: 20px;
6} 6}
7 7
8label {
9 font-weight: $font-regular;
10 font-size: 100%;
11}
12
13.video-channel-title { 8.video-channel-title {
14 @include settings-big-title; 9 @include settings-big-title;
15} 10}
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
index 2a3b85c22..b3fedd2f6 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
@@ -1,11 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
9.applications-title { 4.applications-title {
10 @include settings-big-title; 5 @include settings-big-title;
11} 6}
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index b0ac45e30..d412e568f 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -3,7 +3,6 @@
3 3
4.header { 4.header {
5 display: flex; 5 display: flex;
6 font-size: 15px;
7 margin-bottom: 20px; 6 margin-bottom: 20px;
8 7
9 a { 8 a {
@@ -23,11 +22,6 @@
23 } 22 }
24} 23}
25 24
26
27my-user-notifications {
28 font-size: 15px;
29}
30
31@media screen and (max-width: $mobile-view) { 25@media screen and (max-width: $mobile-view) {
32 .header { 26 .header {
33 flex-direction: column; 27 flex-direction: column;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index b0a9dbb38..c9f9d8f55 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -1,18 +1,20 @@
1<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 1<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
2<div *ngIf="success" class="alert alert-success">{{ success }}</div> 2<div *ngIf="success" class="alert alert-success">{{ success }}</div>
3 3
4<div i18n class="current-email">
5 Your current email is <span class="email">{{ user.email }}</span>.
6 It is never shown to the public.
7</div>
8
9<div i18n class="pending-email" *ngIf="user.pendingEmail"> 4<div i18n class="pending-email" *ngIf="user.pendingEmail">
10 <span class="email">{{ user.pendingEmail }}</span> is awaiting email verification 5 <strong>{{ user.pendingEmail }}</strong> is awaiting email verification
11</div> 6</div>
12 7
13<form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form" *ngIf="user.pluginAuth === null"> 8<form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form" *ngIf="user.pluginAuth === null">
14 9
15 <div class="form-group"> 10 <div class="form-group">
11 <label i18n for="new-email">Change your email</label>
12
13 <div i18n class="form-group-description">
14 Your current email is <strong>{{ user.email }}</strong>.
15 It is never shown to the public.
16 </div>
17
16 <input 18 <input
17 type="email" id="new-email" i18n-placeholder placeholder="New email" class="form-control" 19 type="email" id="new-email" i18n-placeholder placeholder="New email" class="form-control"
18 formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }" 20 formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
index 9be9056b8..8d1804a93 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -1,18 +1,17 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4label { 4form {
5 font-weight: $font-regular; 5 max-width: 340px;
6 font-size: 100%;
7} 6}
8 7
9my-input-text { 8my-input-text {
10 width: 340px;
11 display: block; 9 display: block;
10 width: 100%;
12} 11}
13 12
14input[type=email] { 13input[type=email] {
15 @include peertube-input-text(340px); 14 @include peertube-input-text(100%);
16 15
17 display: block; 16 display: block;
18} 17}
@@ -22,15 +21,6 @@ input[type=submit] {
22 @include orange-button; 21 @include orange-button;
23} 22}
24 23
25.current-email,
26.pending-email { 24.pending-email {
27 margin-bottom: 15px; 25 margin-bottom: 15px;
28
29 .email {
30 font-weight: $font-semibold;
31 }
32}
33
34.form-group {
35 width: max-content;
36} 26}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
index ab6a43b57..a29f04c36 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -1,14 +1,13 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4label { 4form {
5 font-weight: $font-regular; 5 max-width: 340px;
6 font-size: 100%;
7} 6}
8 7
9my-input-text { 8my-input-text {
10 width: 340px;
11 display: block; 9 display: block;
10 width: 100%;
12} 11}
13 12
14my-input-text + my-input-text { 13my-input-text + my-input-text {
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
index c3cfe0314..46f5e5d6b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
@@ -1,13 +1,13 @@
1<div *ngIf="webNotifications"> 1<div *ngIf="webNotifications">
2 <ng-container *ngFor="let group of notificationSettingGroups"> 2 <ng-container *ngFor="let group of notificationSettingGroups">
3 <div class="header custom-row"> 3 <div class="header notification-row">
4 <div i18n>{{ group.label }}</div> 4 <div i18n>{{ group.label }}</div>
5 <div i18n>Web</div> 5 <div i18n>Web</div>
6 <div i18n *ngIf="emailEnabled">Email</div> 6 <div i18n *ngIf="emailEnabled">Email</div>
7 </div> 7 </div>
8 8
9 <ng-container *ngFor="let notificationType of group.keys"> 9 <ng-container *ngFor="let notificationType of group.keys">
10 <div class="custom-row" *ngIf="hasUserRight(notificationType)"> 10 <div class="small notification-row" *ngIf="hasUserRight(notificationType)">
11 <div>{{ labelNotifications[notificationType] }}</div> 11 <div>{{ labelNotifications[notificationType] }}</div>
12 12
13 <div> 13 <div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index 2fe1f9536..8181c3175 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -1,13 +1,12 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.custom-row { 4.notification-row {
5 display: flex; 5 display: flex;
6 align-items: center; 6 align-items: center;
7 border-bottom: 1px solid $separator-border-color; 7 border-bottom: 1px solid $separator-border-color;
8 8
9 &.header { 9 &.header {
10 font-size: 16px;
11 font-weight: $font-semibold; 10 font-weight: $font-semibold;
12 margin-top: 10px; 11 margin-top: 10px;
13 } 12 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index ae5f25cff..2b192ab6d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -8,7 +8,7 @@
8 type="text" id="username" class="form-control" 8 type="text" id="username" class="form-control"
9 formControlName="username" readonly 9 formControlName="username" readonly
10 > 10 >
11 <div class="muted" i18n> 11 <div class="form-group-description" i18n>
12 People can find you using @{{ user.username }}@{{ instanceHost }} 12 People can find you using @{{ user.username }}@{{ instanceHost }}
13 </div> 13 </div>
14 </div> 14 </div>
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 78f7ef1d5..23e701332 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -1,11 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
9input#username + .muted { 4input#username + .muted {
10 margin-top: 5px; 5 margin-top: 5px;
11} 6}
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 abcfe54a6..d9e833019 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
@@ -14,7 +14,6 @@
14 </div> 14 </div>
15 15
16 <div class="col-12 col-lg-8 col-xl-9"> 16 <div class="col-12 col-lg-8 col-xl-9">
17
18 <my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota> 17 <my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
19 18
20 <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile> 19 <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
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 aa51764be..f39f90803 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
@@ -34,9 +34,11 @@
34 {videoChannel.followersCount, plural, =0 {No subscribers} =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}} 34 {videoChannel.followersCount, plural, =0 {No subscribers} =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
35 </a> 35 </a>
36 36
37 <div i18n class="video-channel-videos">{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</div> 37 <div class="d-flex">
38 38 <span i18n>{videoChannel.videosCount, plural, =0 {No videos} =1 {1 video} other {{{ videoChannel.videosCount }} videos}}</span>
39 <div i18n class="video-channel-views">{videoChannel.totalViews, plural, =0 {No views} =1 {1 view} other {{{ videoChannel.totalViews }} views}}</div> 39 <span class="mx-1">·</span>
40 <span i18n>{videoChannel.totalViews, plural, =0 {No views} =1 {1 view} other {{{ videoChannel.totalViews | myNumberFormatter }} views}}</span>
41 </div>
40 42
41 <div class="video-channel-buttons"> 43 <div class="video-channel-buttons">
42 <my-edit-button label [routerLink]="[ '/manage/update', videoChannel.nameWithHost ]"></my-edit-button> 44 <my-edit-button label [routerLink]="[ '/manage/update', videoChannel.nameWithHost ]"></my-edit-button>
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 6f4d1a9b7..ef2ab7aca 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
@@ -22,7 +22,7 @@
22 <my-global-icon iconName="external-link"></my-global-icon> 22 <my-global-icon iconName="external-link"></my-global-icon>
23 </a> 23 </a>
24 24
25 <div class="muted"> 25 <div class="small muted">
26 <ng-container *ngIf="isFollowingAccount(follow)" i18n>Is following all your channels</ng-container> 26 <ng-container *ngIf="isFollowingAccount(follow)" i18n>Is following all your channels</ng-container>
27 <ng-container *ngIf="!isFollowingAccount(follow)" i18n>Is following your channel {{ follow.following.name }}</ng-container> 27 <ng-container *ngIf="!isFollowingAccount(follow)" i18n>Is following your channel {{ follow.following.name }}</ng-container>
28 </div> 28 </div>
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.scss b/client/src/app/+my-library/my-follows/my-followers.component.scss
index d8c5f9cff..2caa4cc48 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.scss
+++ b/client/src/app/+my-library/my-follows/my-followers.component.scss
@@ -13,8 +13,4 @@ input[type=text] {
13 13
14.actor { 14.actor {
15 @include actor-row($min-height: auto, $separator: true); 15 @include actor-row($min-height: auto, $separator: true);
16
17 .actor-display-name {
18 font-size: 16px;
19 }
20} 16}
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 76367c029..6791dab52 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
@@ -27,7 +27,7 @@
27 [titlePage]="titlePage" 27 [titlePage]="titlePage"
28 [getVideosObservableFunction]="getVideosObservableFunction" 28 [getVideosObservableFunction]="getVideosObservableFunction"
29 [user]="user" 29 [user]="user"
30 i18n-noResultMessage noResultMessage="You don't have any video in your watch history yet." 30 [noResultMessage]="getNoResultMessage()"
31 [enableSelection]="false" 31 [enableSelection]="false"
32 [disabled]="disabled" 32 [disabled]="disabled"
33 #videosSelection 33 #videosSelection
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 3257b2215..21011a089 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -6,7 +6,6 @@
6 justify-content: center; 6 justify-content: center;
7 margin-top: 50px; 7 margin-top: 50px;
8 font-weight: $font-semibold; 8 font-weight: $font-semibold;
9 font-size: 16px;
10} 9}
11 10
12.top-buttons { 11.top-buttons {
@@ -29,11 +28,11 @@
29 28
30 grid-column: 3; 29 grid-column: 3;
31 display: flex; 30 display: flex;
31 align-items: center;
32 32
33 label { 33 label {
34 margin: 0 0 0 5px; 34 margin: 0 0 0 5px;
35 color: var(--greyForegroundColor); 35 color: var(--greyForegroundColor);
36 font-size: 15px;
37 font-weight: $font-semibold; 36 font-weight: $font-semibold;
38 } 37 }
39 } 38 }
@@ -44,8 +43,6 @@
44 @include button-with-icon; 43 @include button-with-icon;
45 44
46 grid-column: 4; 45 grid-column: 4;
47
48 font-size: 15px;
49 } 46 }
50} 47}
51 48
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index 766869637..c4878c957 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -134,4 +134,12 @@ export class MyHistoryComponent implements OnInit, DisableForReuseHook {
134 error: err => this.notifier.error(err.message) 134 error: err => this.notifier.error(err.message)
135 }) 135 })
136 } 136 }
137
138 getNoResultMessage () {
139 if (this.search) {
140 return $localize`No videos found for "${this.search}".`
141 }
142
143 return $localize`You don't have any video in your watch history yet.`
144 }
137} 145}
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
index 840e449ea..93bc18fe2 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
@@ -1,11 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
9.video-playlist-title { 4.video-playlist-title {
10 @include settings-big-title; 5 @include settings-big-title;
11} 6}
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index 5fd1764d3..c55e59310 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -6,7 +6,6 @@ form {
6} 6}
7 7
8.radio-label { 8.radio-label {
9 font-size: 15px;
10 font-weight: $font-bold; 9 font-weight: $font-bold;
11} 10}
12 11
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index cab1d0e88..11d95df6a 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -20,7 +20,6 @@
20} 20}
21 21
22.results-header { 22.results-header {
23 font-size: 16px;
24 padding-bottom: 20px; 23 padding-bottom: 20px;
25 margin-bottom: 30px; 24 margin-bottom: 30px;
26 border-bottom: 1px solid #DADADA; 25 border-bottom: 1px solid #DADADA;
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 8388bed7d..c706d6955 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -1,11 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.alert {
5 font-size: 16px;
6 text-align: center;
7}
8
9.signup-disabled { 4.signup-disabled {
10 padding-top: 30vh; 5 padding-top: 30vh;
11} 6}
@@ -15,10 +10,6 @@
15 margin: 0; 10 margin: 0;
16} 11}
17 12
18.register-content {
19 font-size: 16px;
20}
21
22my-instance-about-accordion { 13my-instance-about-accordion {
23 display: block; 14 display: block;
24 margin-bottom: 25px; 15 margin-bottom: 25px;
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
index 4ce2c6758..c0b670c65 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss
@@ -1,11 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
9.caption-file { 4.caption-file {
10 margin-top: 20px; 5 margin-top: 20px;
11 width: max-content; 6 width: max-content;
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 7add71886..770a0f585 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -1,12 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4label,
5my-dynamic-form-field ::ng-deep label {
6 font-weight: $font-regular;
7 font-size: 100%;
8}
9
10.peertube-select-container { 4.peertube-select-container {
11 @include peertube-select-container(auto); 5 @include peertube-select-container(auto);
12} 6}
@@ -37,10 +31,6 @@ my-peertube-checkbox {
37 @include peertube-input-text(100%); 31 @include peertube-input-text(100%);
38 display: block; 32 display: block;
39 } 33 }
40
41 .label-tags + span {
42 font-size: 15px;
43 }
44} 34}
45 35
46.captions-header { 36.captions-header {
@@ -71,7 +61,6 @@ my-peertube-checkbox {
71 .caption-entry-label { 61 .caption-entry-label {
72 @include margin-right(20px); 62 @include margin-right(20px);
73 63
74 font-size: 15px;
75 font-weight: bold; 64 font-weight: bold;
76 width: 150px; 65 width: 150px;
77 } 66 }
@@ -100,7 +89,6 @@ my-peertube-checkbox {
100 89
101.no-caption { 90.no-caption {
102 text-align: center; 91 text-align: center;
103 font-size: 15px;
104} 92}
105 93
106.submit-container { 94.submit-container {
@@ -111,7 +99,6 @@ my-peertube-checkbox {
111 99
112 display: inline-block; 100 display: inline-block;
113 color: pvar(--greyForegroundColor); 101 color: pvar(--greyForegroundColor);
114 font-size: 15px;
115 } 102 }
116} 103}
117 104
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index dda868789..461a38204 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -10,7 +10,6 @@ $nav-link-height: 40px;
10.upload-message { 10.upload-message {
11 width: 100%; 11 width: 100%;
12 text-align: center; 12 text-align: center;
13 font-size: 15px;
14 margin-bottom: 0; 13 margin-bottom: 0;
15 border-radius: 0; 14 border-radius: 0;
16 15
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
index 54f828014..8b5034083 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.scss
@@ -2,7 +2,6 @@
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.root-comment { 4.root-comment {
5 font-size: 15px;
6 display: flex; 5 display: flex;
7 6
8 .left { 7 .left {
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
index 4b00683ab..638147dfe 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
@@ -7,7 +7,6 @@
7 7
8.view-replies { 8.view-replies {
9 font-weight: $font-semibold; 9 font-weight: $font-semibold;
10 font-size: 15px;
11 cursor: pointer; 10 cursor: pointer;
12} 11}
13 12
@@ -33,10 +32,9 @@
33} 32}
34 33
35#dropdown-sort-comments { 34#dropdown-sort-comments {
36 font-weight: 600; 35 font-weight: $font-semibold;
37 text-transform: uppercase; 36 text-transform: uppercase;
38 border: 0; 37 border: 0;
39 transform: translateY(-7%);
40} 38}
41 39
42@media screen and (max-width: 600px) { 40@media screen and (max-width: 600px) {
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
index 147bc4d7f..b503a94cb 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.scss
@@ -7,7 +7,6 @@
7 7
8 margin-top: 20px; 8 margin-top: 20px;
9 margin-bottom: 20px; 9 margin-bottom: 20px;
10 font-size: 15px;
11 10
12 .video-info-description-html { 11 .video-info-description-html {
13 @include peertube-word-wrap; 12 @include peertube-word-wrap;
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 6818a4257..d438facd3 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -112,7 +112,6 @@ $video-height: 66vh;
112 margin-top: 50px; 112 margin-top: 50px;
113 text-align: center; 113 text-align: center;
114 font-weight: $font-semibold; 114 font-weight: $font-semibold;
115 font-size: 15px;
116} 115}
117 116
118.video-bottom { 117.video-bottom {
@@ -158,12 +157,11 @@ $video-height: 66vh;
158 157
159 margin-bottom: 10px; 158 margin-bottom: 10px;
160 align-self: start; 159 align-self: start;
161 font-size: 1em; 160 font-size: 14px;
162} 161}
163 162
164.video-info-channel { 163.video-info-channel {
165 font-weight: $font-semibold; 164 font-weight: $font-semibold;
166 font-size: 15px;
167 165
168 a { 166 a {
169 @include disable-default-a-behaviour; 167 @include disable-default-a-behaviour;
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 1d5131092..20cbb239b 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
@@ -10,7 +10,7 @@
10 10
11 <div class="section videos" *ngFor="let object of overview.categories"> 11 <div class="section videos" *ngFor="let object of overview.categories">
12 <h1 class="section-title"> 12 <h1 class="section-title">
13 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> 13 <a class="link-orange" routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
14 </h1> 14 </h1>
15 15
16 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> 16 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
@@ -21,7 +21,7 @@
21 21
22 <div class="section videos" *ngFor="let object of overview.tags"> 22 <div class="section videos" *ngFor="let object of overview.tags">
23 <h2 class="section-title"> 23 <h2 class="section-title">
24 <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> 24 <a class="link-orange" routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
25 </h2> 25 </h2>
26 26
27 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> 27 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
@@ -32,7 +32,7 @@
32 32
33 <div class="section channel videos" *ngFor="let object of overview.channels"> 33 <div class="section channel videos" *ngFor="let object of overview.channels">
34 <div class="section-title"> 34 <div class="section-title">
35 <a [routerLink]="[ '/c', buildVideoChannelBy(object) ]"> 35 <a class="link-orange" [routerLink]="[ '/c', buildVideoChannelBy(object) ]">
36 <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar> 36 <my-actor-avatar [channel]="buildVideoChannel(object)" size="28"></my-actor-avatar>
37 37
38 <h2 class="section-title">{{ object.channel.displayName }}</h2> 38 <h2 class="section-title">{{ object.channel.displayName }}</h2>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index 8b2aa88f2..5a789b66d 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -13,7 +13,7 @@
13 13
14.section { 14.section {
15 &:first-child { 15 &:first-child {
16 padding-top: 30px; 16 padding-top: 15px;
17 17
18 .section-title { 18 .section-title {
19 border-top: 0 !important; 19 border-top: 0 !important;
@@ -22,66 +22,27 @@
22 22
23 .section-title { 23 .section-title {
24 font-size: 24px; 24 font-size: 24px;
25 font-weight: $font-semibold; 25 padding-top: 20px;
26 padding-top: 15px; 26 margin-bottom: 30px;
27 margin-bottom: 15px;
28 display: flex;
29 justify-content: space-between;
30 27
31 &:not(h2) { 28 &:not(h2) {
32 border-top: 1px solid $separator-border-color; 29 border-top: 1px solid $separator-border-color;
33 } 30 }
34 31
35 a { 32 a > h2 {
36 color: pvar(--mainForegroundColor); 33 margin-bottom: 0;
37 34 display: inline-block;
38 &:hover, 35 font-weight: $font-bold;
39 &:focus:not(.focus-visible),
40 &:active {
41 text-decoration: none;
42 outline: none;
43 }
44 } 36 }
45 }
46
47 &.channel {
48 .section-title {
49 a {
50 display: flex;
51 width: fit-content;
52 align-items: center;
53
54 my-actor-avatar {
55 @include margin-right(8px);
56
57 font-size: initial;
58 }
59 }
60 37
61 .followers { 38 my-actor-avatar {
62 @include margin-left(10px); 39 @include margin-right(8px);
63 40
64 color: pvar(--greyForegroundColor); 41 position: relative;
65 font-weight: normal; 42 top: -2px;
66 font-size: 14px;
67 position: relative;
68 top: 2px;
69 }
70 } 43 }
71 } 44 }
72 45
73 .show-more {
74 position: relative;
75 top: -5px;
76 display: inline-block;
77 font-size: 16px;
78 text-transform: uppercase;
79 color: pvar(--greyForegroundColor);
80 margin-bottom: 10px;
81 font-weight: $font-semibold;
82 text-decoration: none;
83 }
84
85 @media screen and (max-width: $mobile-view) { 46 @media screen and (max-width: $mobile-view) {
86 max-height: initial; 47 max-height: initial;
87 overflow: initial; 48 overflow: initial;
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 5f3e15d80..31e9987c6 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -103,14 +103,4 @@
103 cursor: pointer; 103 cursor: pointer;
104 width: 20px; 104 width: 20px;
105 } 105 }
106
107 ::ng-deep {
108 p {
109 font-size: 16px;
110 }
111
112 p:last-child {
113 margin-bottom: 0;
114 }
115 }
116} 106}
diff --git a/client/src/app/menu/language-chooser.component.scss b/client/src/app/menu/language-chooser.component.scss
index 04b18af33..28d58a678 100644
--- a/client/src/app/menu/language-chooser.component.scss
+++ b/client/src/app/menu/language-chooser.component.scss
@@ -18,7 +18,6 @@
18 18
19 a { 19 a {
20 display: block; 20 display: block;
21 font-size: 16px;
22 margin: 15px; 21 margin: 15px;
23 } 22 }
24} 23}
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 352682bfc..a548c08cf 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -16,7 +16,6 @@ $footer-links-base-opacity: .8;
16 16
17 color: pvar(--menuForegroundColor); 17 color: pvar(--menuForegroundColor);
18 cursor: pointer; 18 cursor: pointer;
19 font-size: 16px;
20 white-space: normal; 19 white-space: normal;
21 word-break: break-word; 20 word-break: break-word;
22 transition: background-color .1s ease-in-out; 21 transition: background-color .1s ease-in-out;
@@ -195,7 +194,6 @@ my-actor-avatar {
195.logged-in-display-name { 194.logged-in-display-name {
196 @include disable-default-a-behaviour; 195 @include disable-default-a-behaviour;
197 196
198 font-size: 16px;
199 font-weight: $font-semibold; 197 font-weight: $font-semibold;
200 color: pvar(--menuForegroundColor); 198 color: pvar(--menuForegroundColor);
201} 199}
@@ -319,7 +317,7 @@ my-actor-avatar {
319 color: pvar(--menuForegroundColor); 317 color: pvar(--menuForegroundColor);
320 opacity: $footer-links-base-opacity; 318 opacity: $footer-links-base-opacity;
321 white-space: nowrap; 319 white-space: nowrap;
322 font-size: 90%; 320 font-size: 0.75rem;
323 font-weight: 500; 321 font-weight: 500;
324 line-height: 1.4rem; 322 line-height: 1.4rem;
325 } 323 }
diff --git a/client/src/app/modal/account-setup-warning-modal.component.scss b/client/src/app/modal/account-setup-warning-modal.component.scss
index d99edaf7a..25e67b08f 100644
--- a/client/src/app/modal/account-setup-warning-modal.component.scss
+++ b/client/src/app/modal/account-setup-warning-modal.component.scss
@@ -2,7 +2,6 @@
2@use '_variables' as *; 2@use '_variables' as *;
3 3
4.modal-body { 4.modal-body {
5 font-size: 15px;
6 display: flex; 5 display: flex;
7 flex-direction: column; 6 flex-direction: column;
8 align-items: center; 7 align-items: center;
@@ -24,7 +23,6 @@
24.subtitle { 23.subtitle {
25 font-weight: $font-semibold; 24 font-weight: $font-semibold;
26 margin-bottom: 10px; 25 margin-bottom: 10px;
27 font-size: 16px;
28} 26}
29 27
30li { 28li {
diff --git a/client/src/app/modal/admin-welcome-modal.component.scss b/client/src/app/modal/admin-welcome-modal.component.scss
index 242a498d0..716f1fff0 100644
--- a/client/src/app/modal/admin-welcome-modal.component.scss
+++ b/client/src/app/modal/admin-welcome-modal.component.scss
@@ -1,10 +1,6 @@
1@use '_mixins' as *; 1@use '_mixins' as *;
2@use '_variables' as *; 2@use '_variables' as *;
3 3
4.modal-body {
5 font-size: 15px;
6}
7
8.two-columns { 4.two-columns {
9 display: flex; 5 display: flex;
10 align-items: center; 6 align-items: center;
@@ -26,7 +22,6 @@
26.subtitle { 22.subtitle {
27 font-weight: $font-semibold; 23 font-weight: $font-semibold;
28 margin-bottom: 10px; 24 margin-bottom: 10px;
29 font-size: 16px;
30} 25}
31 26
32.block-documentation { 27.block-documentation {
@@ -63,7 +58,6 @@ li {
63 } 58 }
64 59
65 .link-title { 60 .link-title {
66 font-size: 16px;
67 font-weight: $font-semibold; 61 font-weight: $font-semibold;
68 display: flex; 62 display: flex;
69 justify-content: center; 63 justify-content: center;
diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss
index 21aa81eeb..3372baf1a 100644
--- a/client/src/app/modal/confirm.component.scss
+++ b/client/src/app/modal/confirm.component.scss
@@ -1,10 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.modal-body {
5 font-size: 15px;
6}
7
8.button { 4.button {
9 padding: 0 13px; 5 padding: 0 13px;
10} 6}
diff --git a/client/src/app/modal/custom-modal.component.scss b/client/src/app/modal/custom-modal.component.scss
index 15cbadfc0..c5b77994e 100644
--- a/client/src/app/modal/custom-modal.component.scss
+++ b/client/src/app/modal/custom-modal.component.scss
@@ -1,10 +1,6 @@
1@use '_mixins' as *; 1@use '_mixins' as *;
2@use '_variables' as *; 2@use '_variables' as *;
3 3
4.modal-body {
5 font-size: 15px;
6}
7
8li { 4li {
9 margin-bottom: 10px; 5 margin-bottom: 10px;
10} 6}
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
index 3e6c6d716..b650f4e69 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.scss
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -1,10 +1,6 @@
1@use '_mixins' as *; 1@use '_mixins' as *;
2@use '_variables' as *; 2@use '_variables' as *;
3 3
4.modal-body {
5 font-size: 15px;
6}
7
8li { 4li {
9 margin-bottom: 10px; 5 margin-bottom: 10px;
10} 6}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
index d77e44a9d..3b43a4a4d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
@@ -25,7 +25,6 @@ textarea {
25 25
26.no-messages { 26.no-messages {
27 display: flex; 27 display: flex;
28 font-size: 15px;
29 justify-content: center; 28 justify-content: center;
30} 29}
31 30
@@ -45,10 +44,6 @@ textarea {
45 color: var(--mainForegroundColor); 44 color: var(--mainForegroundColor);
46 background-color: var(--greyBackgroundColor); 45 background-color: var(--greyBackgroundColor);
47 46
48 .content {
49 font-size: 15px;
50 }
51
52 .date { 47 .date {
53 font-size: 13px; 48 font-size: 13px;
54 color: var(--greyForegroundColor); 49 color: var(--greyForegroundColor);
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 7fd9f057e..b8e6136fb 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
@@ -30,7 +30,6 @@ my-actor-avatar {
30} 30}
31 31
32.actor-info-followers { 32.actor-info-followers {
33 font-size: 15px;
34 padding-bottom: .5rem; 33 padding-bottom: .5rem;
35} 34}
36 35
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.html b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
index c285b6cc3..ba025da4d 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.html
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.html
@@ -1,7 +1,7 @@
1<ng-template #img> 1<ng-template #img>
2 <img *ngIf="previewImage || avatarUrl || !initial" [class]="getClass('avatar')" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" /> 2 <img *ngIf="previewImage || avatarUrl || !initial" [class]="classes" [src]="previewImage || avatarUrl || defaultAvatarUrl" [alt]="alt" />
3 3
4 <div *ngIf="!avatarUrl && initial" [ngClass]="getClass('initial')"> 4 <div *ngIf="!avatarUrl && initial" [ngClass]="classes">
5 <span>{{ initial }}</span> 5 <span>{{ initial }}</span>
6 </div> 6 </div>
7</ng-template> 7</ng-template>
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index 600984aa2..fa4f1e51f 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -1,4 +1,4 @@
1import { Component, Input } from '@angular/core' 1import { Component, Input, OnChanges } from '@angular/core'
2import { VideoChannel } from '../shared-main' 2import { VideoChannel } from '../shared-main'
3import { Account } from '../shared-main/account/account.model' 3import { Account } from '../shared-main/account/account.model'
4 4
@@ -15,7 +15,7 @@ export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | '
15 styleUrls: [ './actor-avatar.component.scss' ], 15 styleUrls: [ './actor-avatar.component.scss' ],
16 templateUrl: './actor-avatar.component.html' 16 templateUrl: './actor-avatar.component.html'
17}) 17})
18export class ActorAvatarComponent { 18export class ActorAvatarComponent implements OnChanges {
19 private _title: string 19 private _title: string
20 20
21 @Input() account: ActorInput 21 @Input() account: ActorInput
@@ -42,6 +42,8 @@ export class ActorAvatarComponent {
42 return '' 42 return ''
43 } 43 }
44 44
45 classes: string[] = []
46
45 get alt () { 47 get alt () {
46 if (this.account) return $localize`Account avatar` 48 if (this.account) return $localize`Account avatar`
47 if (this.channel) return $localize`Channel avatar` 49 if (this.channel) return $localize`Channel avatar`
@@ -68,20 +70,18 @@ export class ActorAvatarComponent {
68 return name.slice(0, 1) 70 return name.slice(0, 1)
69 } 71 }
70 72
71 getClass (type: 'avatar' | 'initial') { 73 ngOnChanges () {
72 const base = [ 'avatar' ] 74 this.classes = [ 'avatar' ]
73 75
74 if (this.size) base.push(`avatar-${this.size}`) 76 if (this.size) this.classes.push(`avatar-${this.size}`)
75 77
76 if (this.channel) base.push('channel') 78 if (this.channel) this.classes.push('channel')
77 else base.push('account') 79 else this.classes.push('account')
78 80
79 if (type === 'initial' && this.initial) { 81 if (!this.avatarUrl && this.initial) {
80 base.push('initial') 82 this.classes.push('initial')
81 base.push(this.getColorTheme()) 83 this.classes.push(this.getColorTheme())
82 } 84 }
83
84 return base
85 } 85 }
86 86
87 hasActor () { 87 hasActor () {
diff --git a/client/src/app/shared/shared-forms/input-text.component.scss b/client/src/app/shared/shared-forms/input-text.component.scss
index 8baeec21d..ae8bf5fec 100644
--- a/client/src/app/shared/shared-forms/input-text.component.scss
+++ b/client/src/app/shared/shared-forms/input-text.component.scss
@@ -9,8 +9,6 @@ input {
9 9
10.btn { 10.btn {
11 @include button-with-icon(18px); 11 @include button-with-icon(18px);
12
13 font-size: 15px;
14} 12}
15 13
16.copy-text { 14.copy-text {
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 5939bb999..421c8cbcc 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -102,7 +102,6 @@ $input-border-radius: 3px;
102 min-height: 75px; 102 min-height: 75px;
103 padding: $base-padding; 103 padding: $base-padding;
104 overflow-y: auto; 104 overflow-y: auto;
105 font-size: 15px;
106 word-wrap: break-word; 105 word-wrap: break-word;
107} 106}
108 107
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 38a48a2a5..cd06e75ba 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -34,9 +34,9 @@
34 </div> 34 </div>
35 35
36 <div class="ms-4 d-flex flex-column"> 36 <div class="ms-4 d-flex flex-column">
37 <small class="wrapper mt-2 muted"> 37 <div class="wrapper form-group-description">
38 <ng-content select="description"></ng-content> 38 <ng-content select="description"></ng-content>
39 </small> 39 </div>
40 40
41 <span class="wrapper mt-3"> 41 <span class="wrapper mt-3">
42 <ng-content select="extra"></ng-content> 42 <ng-content select="extra"></ng-content>
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 5fe20c3a5..ac9127677 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -6,12 +6,7 @@
6 6
7 label { 7 label {
8 display: flex; 8 display: flex;
9 align-items: center; 9 font-size: $form-input-font-size;
10
11 .label-text {
12 font-weight: $font-regular;
13 margin: 0;
14 }
15 10
16 input { 11 input {
17 @include peertube-checkbox(1px); 12 @include peertube-checkbox(1px);
@@ -23,12 +18,11 @@
23 } 18 }
24 19
25 my-help { 20 my-help {
26 position: relative; 21 line-height: 17px;
27 top: 2px;
28 } 22 }
29 23
30 small { 24 .form-group-description {
31 font-size: 90%; 25 margin-top: 2px;
32 } 26 }
33 27
34 .wrapper:empty { 28 .wrapper:empty {
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index 27d6fa173..e69a06947 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -4,7 +4,6 @@
4p-inputmask { 4p-inputmask {
5 ::ng-deep input { 5 ::ng-deep input {
6 width: 80px; 6 width: 80px;
7 font-size: 15px;
8 7
9 &:focus-within, 8 &:focus-within,
10 &:focus { 9 &:focus {
diff --git a/client/src/app/shared/shared-icons/global-icon.component.scss b/client/src/app/shared/shared-icons/global-icon.component.scss
index 6795d6628..10180829f 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.scss
+++ b/client/src/app/shared/shared-icons/global-icon.component.scss
@@ -3,4 +3,9 @@
3 width: inherit; 3 width: inherit;
4 height: inherit; 4 height: inherit;
5 } 5 }
6
7 .feather-flag {
8 margin-left: -1px;
9 }
6} 10}
11
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 0da7aede9..c8e288462 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
@@ -12,6 +12,5 @@
12} 12}
13 13
14.block { 14.block {
15 font-size: 15px;
16 margin-bottom: 15px; 15 margin-bottom: 15px;
17} 16}
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 105a7681f..bfae0c112 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
@@ -33,7 +33,6 @@ table {
33 33
34 caption { 34 caption {
35 caption-side: top; 35 caption-side: top;
36 font-size: 15px;
37 font-weight: $font-semibold; 36 font-weight: $font-semibold;
38 color: pvar(--mainForegroundColor); 37 color: pvar(--mainForegroundColor);
39 } 38 }
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index 10dae68f0..017355bd0 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -39,7 +39,7 @@
39 </span> 39 </span>
40 40
41 <h6 41 <h6
42 *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }" 42 *ngIf="!action.linkBuilder && action.isHeader && areActionsDisplayed(actions, entry)" [ngClass]="{ 'with-icon': !!action.iconName }"
43 class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)" 43 class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
44 > 44 >
45 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container> 45 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
index 67ac6e1aa..749773f8a 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts
@@ -48,7 +48,7 @@ export class ActionDropdownComponent<T> {
48 return actions.some(a => { 48 return actions.some(a => {
49 if (Array.isArray(a)) return this.areActionsDisplayed(a, entry) 49 if (Array.isArray(a)) return this.areActionsDisplayed(a, entry)
50 50
51 return a.isDisplayed === undefined || a.isDisplayed(entry) 51 return a.isHeader !== true && (a.isDisplayed === undefined || a.isDisplayed(entry))
52 }) 52 })
53 } 53 }
54} 54}
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index 3e558bbb8..3e3728623 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,8 +1,8 @@
1<span *ngIf="!routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0"> 1<div *ngIf="!routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" tabindex="0">
2 <ng-container *ngTemplateOutlet="content"></ng-container> 2 <ng-container *ngTemplateOutlet="content"></ng-container>
3</span> 3</div>
4 4
5<a *ngIf="routerLink" class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" [routerLink]="routerLink"> 5<a *ngIf="routerLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title" [routerLink]="routerLink">
6 <ng-container *ngTemplateOutlet="content"></ng-container> 6 <ng-container *ngTemplateOutlet="content"></ng-container>
7</a> 7</a>
8 8
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index cdd75d525..7f0cdf1ed 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -16,7 +16,6 @@
16} 16}
17 17
18:host { 18:host {
19 outline: none;
20 display: inline-block; 19 display: inline-block;
21} 20}
22 21
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index 476057823..10d67831f 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -1,4 +1,4 @@
1import { Component, Input } from '@angular/core' 1import { Component, Input, OnChanges } from '@angular/core'
2import { GlobalIconName } from '@app/shared/shared-icons' 2import { GlobalIconName } from '@app/shared/shared-icons'
3 3
4@Component({ 4@Component({
@@ -7,7 +7,7 @@ import { GlobalIconName } from '@app/shared/shared-icons'
7 templateUrl: './button.component.html' 7 templateUrl: './button.component.html'
8}) 8})
9 9
10export class ButtonComponent { 10export class ButtonComponent implements OnChanges {
11 @Input() label = '' 11 @Input() label = ''
12 @Input() className = 'grey-button' 12 @Input() className = 'grey-button'
13 @Input() icon: GlobalIconName = undefined 13 @Input() icon: GlobalIconName = undefined
@@ -17,8 +17,10 @@ export class ButtonComponent {
17 @Input() disabled = false 17 @Input() disabled = false
18 @Input() responsiveLabel = false 18 @Input() responsiveLabel = false
19 19
20 getClasses () { 20 classes: { [id: string]: boolean } = {}
21 return { 21
22 ngOnChanges () {
23 this.classes = {
22 [this.className]: true, 24 [this.className]: true,
23 disabled: this.disabled, 25 disabled: this.disabled,
24 'icon-only': !this.label, 26 'icon-only': !this.label,
diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
index 0049dfa64..28aacbbff 100644
--- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts
@@ -25,10 +25,6 @@ export class EditButtonComponent implements OnInit {
25 // <my-edit-button label /> Use default label 25 // <my-edit-button label /> Use default label
26 if (this.label === '') { 26 if (this.label === '') {
27 this.label = $localize`Update` 27 this.label = $localize`Update`
28
29 if (!this.title) {
30 this.title = this.label
31 }
32 } 28 }
33 } 29 }
34} 30}
diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
index 7dcba2ca5..2aa176e1b 100644
--- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
+++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss
@@ -5,28 +5,24 @@
5 display: flex; 5 display: flex;
6 align-items: center; 6 align-items: center;
7 justify-content: center; 7 justify-content: center;
8}
8 9
9 my-global-icon { 10my-global-icon {
10 width: 32px; 11 @include apply-svg-color(pvar(--mainColor));
11 align-self: flex-start;
12 12
13 ::ng-deep { 13 width: 32px;
14 svg { 14 align-self: flex-start;
15 fill: #0c5460;
16 }
17 }
18 15
19 + div { 16 + div {
20 margin-left: 10px; 17 margin-left: 10px;
21 text-align: center; 18 text-align: center;
19 }
20}
22 21
23 a.channels-settings-link { 22.channels-settings-link {
24 @include peertube-button-link; 23 @include peertube-button-link;
25 @include grey-button; 24 @include grey-button;
26 25
27 height: fit-content; 26 height: fit-content;
28 margin-top: 10px; 27 margin-top: 10px;
29 }
30 }
31 }
32} 28}
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 ae57ca5b7..386d26116 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,13 +1,7 @@
1<div class="root"> 1<div class="root">
2 <div class="input-group has-clear"> 2 <div class="input-group has-clear">
3 <input 3 <input #ref type="text" class="last-in-group"
4 #ref 4 [(ngModel)]="value" (keyup.enter)="sendSearch()" [hidden]="!inputShown" [name]="name" [placeholder]="placeholder"
5 type="text"
6 [(ngModel)]="value"
7 (keyup.enter)="sendSearch()"
8 [hidden]="!inputShown"
9 [name]="name"
10 [placeholder]="placeholder"
11 > 5 >
12 6
13 <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon> 7 <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index 70571bde6..f3e86ce78 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -1,11 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
9.user-quota { 4.user-quota {
10 label { 5 label {
11 @include margin-right(5px); 6 @include margin-right(5px);
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 15632f654..131110318 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -48,7 +48,7 @@
48 48
49 <ng-template pTemplate="emptymessage"> 49 <ng-template pTemplate="emptymessage">
50 <tr> 50 <tr>
51 <td colspan="6"> 51 <td colspan="3">
52 <div class="no-results"> 52 <div class="no-results">
53 <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container> 53 <ng-container *ngIf="search" i18n>No account found matching current filters.</ng-container>
54 <ng-container *ngIf="!search" i18n>No account found.</ng-container> 54 <ng-container *ngIf="!search" i18n>No account found.</ng-container>
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 cabf0e9dd..bc47bf26f 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -50,7 +50,7 @@
50 50
51 <ng-template pTemplate="emptymessage"> 51 <ng-template pTemplate="emptymessage">
52 <tr> 52 <tr>
53 <td colspan="6"> 53 <td colspan="3">
54 <div class="no-results"> 54 <div class="no-results">
55 <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container> 55 <ng-container *ngIf="search" i18n>No server found matching current filters.</ng-container>
56 <ng-container *ngIf="!search" i18n>No server found.</ng-container> 56 <ng-container *ngIf="!search" i18n>No server found.</ng-container>
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
index 2c46c3d03..376fb1693 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss
@@ -2,7 +2,6 @@
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.description { 4.description {
5 font-size: 15px;
6 margin-bottom: 15px; 5 margin-bottom: 15px;
7} 6}
8 7
diff --git a/client/src/app/shared/shared-moderation/video-block.component.scss b/client/src/app/shared/shared-moderation/video-block.component.scss
index 3061bbf15..7726eca11 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.scss
+++ b/client/src/app/shared/shared-moderation/video-block.component.scss
@@ -6,6 +6,5 @@ textarea {
6} 6}
7 7
8.live-info { 8.live-info {
9 font-size: 15px;
10 margin: 40px 0 20px; 9 margin: 40px 0 20px;
11} 10}
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 611291981..456309d2d 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
@@ -34,6 +34,10 @@ my-input-text {
34 margin-top: 20px; 34 margin-top: 20px;
35} 35}
36 36
37.alert-private {
38 margin-top: 0;
39}
40
37.filters { 41.filters {
38 margin-top: 30px; 42 margin-top: 30px;
39 43
@@ -46,7 +50,6 @@ my-input-text {
46 justify-content: center; 50 justify-content: center;
47 align-items: center; 51 align-items: center;
48 margin-top: 20px; 52 margin-top: 20px;
49 font-size: 16px;
50 font-weight: $font-semibold; 53 font-weight: $font-semibold;
51 cursor: pointer; 54 cursor: pointer;
52 } 55 }
diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
index 2fc245ace..da8202594 100644
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss
@@ -1,11 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
9input[type=submit] { 4input[type=submit] {
10 @include peertube-button; 5 @include peertube-button;
11 @include orange-button; 6 @include orange-button;
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 ccd7f8f4b..85b27a4ff 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
@@ -42,7 +42,7 @@
42 i18n-labelText labelText="Help share videos being played" 42 i18n-labelText labelText="Help share videos being played"
43 > 43 >
44 <ng-container ngProjectAs="description"> 44 <ng-container ngProjectAs="description">
45 <span i18n>The <a routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span> 45 <span i18n>The <a class="link-orange" routerLink="/about/peertube" fragment="privacy" target="_blank">sharing system</a> implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.</span>
46 </ng-container> 46 </ng-container>
47 </my-peertube-checkbox> 47 </my-peertube-checkbox>
48 </div> 48 </div>
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 a39e7cf1f..163c899d3 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
@@ -1,11 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
9input[type=submit] { 4input[type=submit] {
10 @include peertube-button; 5 @include peertube-button;
11 @include orange-button; 6 @include orange-button;
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
index a6d851315..0e09c2697 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -1,5 +1,5 @@
1<div 1<div
2 class="btn-group-subscribe btn-group" 2 class="btn-group-subscribe btn-group" role="group"
3 [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }" 3 [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }"
4> 4>
5 5
@@ -20,17 +20,11 @@
20 </ng-template> 20 </ng-template>
21 21
22 <ng-template #userLoggedIn> 22 <ng-template #userLoggedIn>
23 <button 23 <button *ngIf="!isAllChannelsSubscribed" type="button" class="btn" (click)="subscribe()">
24 *ngIf="!isAllChannelsSubscribed" type="button"
25 class="btn btn-sm" (click)="subscribe()"
26 >
27 <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template> 24 <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
28 </button> 25 </button>
29 26
30 <button 27 <button *ngIf="isAllChannelsSubscribed" type="button" class="btn" role="button" (click)="unsubscribe()">
31 *ngIf="isAllChannelsSubscribed" type="button"
32 class="btn btn-sm" role="button"
33 (click)="unsubscribe()">
34 <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container> 28 <ng-container i18n>{account + "", select, undefined {Unsubscribe} other {Unsubscribe from all channels}}</ng-container>
35 </button> 29 </button>
36 </ng-template> 30 </ng-template>
@@ -43,7 +37,7 @@
43 class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right bottom-left bottom auto" 37 class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right bottom-left bottom auto"
44 role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label 38 role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
45 > 39 >
46 <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label> 40 <button class="btn dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
47 <ng-container 41 <ng-container
48 *ngIf="!isUserLoggedIn(); then userLoggedOut"> 42 *ngIf="!isUserLoggedIn(); then userLoggedOut">
49 </ng-container> 43 </ng-container>
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
index da8eaf646..889596b62 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -3,14 +3,10 @@
3 3
4.btn-group-subscribe { 4.btn-group-subscribe {
5 @include peertube-button; 5 @include peertube-button;
6 @include disable-default-a-behaviour;
7 6
8 float: right; 7 button.dropdown-toggle {
9 padding: 0; 8 font-size: $button-font-size;
10 9 line-height: 1.2;
11 > .btn,
12 > .dropdown > .dropdown-toggle {
13 font-size: 15px;
14 } 10 }
15 11
16 &:not(.big) { 12 &:not(.big) {
@@ -38,7 +34,7 @@
38 34
39 // Unlogged 35 // Unlogged
40 > .dropdown > .dropdown-toggle span { 36 > .dropdown > .dropdown-toggle span {
41 @include padding-right(3px); 37 @include padding-right(5px);
42 } 38 }
43 39
44 // Logged 40 // Logged
@@ -65,9 +61,11 @@
65 @include padding-left(5px); 61 @include padding-left(5px);
66 } 62 }
67 } 63 }
64
68 &.unsubscribe-button { 65 &.unsubscribe-button {
69 .btn { 66 .btn {
70 @include grey-button; 67 @include grey-button;
68
71 font-weight: 600; 69 font-weight: 600;
72 } 70 }
73 } 71 }
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 eb9c57b2f..407bdadf2 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
@@ -10,7 +10,6 @@
10 justify-content: center; 10 justify-content: center;
11 align-items: center; 11 align-items: center;
12 margin-top: 20px; 12 margin-top: 20px;
13 font-size: 16px;
14 font-weight: 600; 13 font-weight: 600;
15 cursor: pointer; 14 cursor: pointer;
16 15
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
index 6a968ed5c..a4e51982c 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
@@ -3,7 +3,6 @@
3 3
4.root { 4.root {
5 margin-bottom: 45px; 5 margin-bottom: 45px;
6 font-size: 15px;
7} 6}
8 7
9.first-row { 8.first-row {
@@ -49,7 +48,6 @@
49 48
50 border-radius: 24px; 49 border-radius: 24px;
51 padding: 4px 15px; 50 padding: 4px 15px;
52 font-size: 16px;
53 margin-bottom: 15px; 51 margin-bottom: 15px;
54 cursor: pointer; 52 cursor: pointer;
55} 53}
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 80b418c87..a397efdca 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -4,6 +4,10 @@
4 4
5$more-button-width: 40px; 5$more-button-width: 40px;
6 6
7.video-miniature {
8 font-size: 14px;
9}
10
7.video-miniature-name { 11.video-miniature-name {
8 @include miniature-name; 12 @include miniature-name;
9} 13}
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.scss b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
index 209201a5c..5e3df5a98 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.scss
@@ -54,9 +54,9 @@ $margin-top: 30px;
54} 54}
55 55
56.date-title { 56.date-title {
57 font-size: 16px;
58 font-weight: $font-semibold; 57 font-weight: $font-semibold;
59 margin-bottom: 20px; 58 margin-bottom: 20px;
59 font-size: 1rem;
60 60
61 // Make the element span a full grid row within .videos grid 61 // Make the element span a full grid row within .videos grid
62 grid-column: 1 / -1; 62 grid-column: 1 / -1;
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
index bd5d37196..6d787796a 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
@@ -30,12 +30,10 @@
30 </div> 30 </div>
31 31
32 <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed"> 32 <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed">
33 <div class="labels"> 33 <div class="header-label" i18n>Start at</div>
34 <div i18n>Start at</div> 34 <div class="header-label" i18n>Stop at</div>
35 <div i18n>Stop at</div>
36 </div>
37 35
38 <div *ngFor="let element of buildOptionalRowElements(playlist)"> 36 <ng-container *ngFor="let element of buildOptionalRowElements(playlist)">
39 <my-peertube-checkbox 37 <my-peertube-checkbox
40 [inputName]="getOptionalInputName(playlist, element)" 38 [inputName]="getOptionalInputName(playlist, element)"
41 [ngModel]="element.enabled" [onPushWorkaround]="true" 39 [ngModel]="element.enabled" [onPushWorkaround]="true"
@@ -55,7 +53,7 @@
55 (inputBlur)="onElementTimestampUpdate(playlist, element)" 53 (inputBlur)="onElementTimestampUpdate(playlist, element)"
56 #stopAt 54 #stopAt
57 ></my-timestamp-input> 55 ></my-timestamp-input>
58 </div> 56 </ng-container>
59 </div> 57 </div>
60 </div> 58 </div>
61 </div> 59 </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index 7db469d7c..de2f1032b 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -1,10 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4$optional-rows-checkbox-width: 34px;
5$timestamp-width: 50px;
6$timestamp-margin-right: 10px;
7
8.header, 4.header,
9.dropdown-item, 5.dropdown-item,
10.input-container { 6.input-container {
@@ -52,12 +48,12 @@ $timestamp-margin-right: 10px;
52 } 48 }
53} 49}
54 50
55.primary-row, 51.primary-row {
56.optional-rows > div {
57 display: flex; 52 display: flex;
58 53
59 my-peertube-checkbox { 54 my-peertube-checkbox {
60 @include margin-right(10px); 55 @include margin-right(10px);
56
61 align-self: center; 57 align-self: center;
62 } 58 }
63 59
@@ -84,41 +80,30 @@ $timestamp-margin-right: 10px;
84 height: 19px; 80 height: 19px;
85 } 81 }
86 } 82 }
87
88 my-timestamp-input {
89 @include margin-right($timestamp-margin-right);
90
91 ::ng-deep .ui-inputtext {
92 padding: 0;
93 width: $timestamp-width;
94 }
95 }
96} 83}
97 84
98.optional-rows { 85.optional-rows {
99 > div { 86 display: grid;
100 padding: 8px 5px 5px 10px; 87 grid-template-columns: 35px 80px 80px;
101 } 88 row-gap: 3px;
89 column-gap: 10px;
90 align-items: center;
102 91
103 my-peertube-checkbox { 92 my-peertube-checkbox {
104 @include margin-right(0 !important); 93 @include margin-left(auto);
105
106 display: block;
107 width: $optional-rows-checkbox-width;
108 } 94 }
109 95
110 .labels { 96 .header-label {
111 @include margin-left($optional-rows-checkbox-width);
112
113 font-size: 13px; 97 font-size: 13px;
114 color: pvar(--greyForegroundColor); 98 color: pvar(--greyForegroundColor);
115 padding-top: 5px; 99 padding-left: 2px;
116 padding-bottom: 0;
117 100
118 div { 101 &:nth-child(1) {
119 @include margin-right($timestamp-margin-right); 102 grid-column: 2;
103 }
120 104
121 width: $timestamp-width; 105 &:nth-child(2) {
106 grid-column: 3;
122 } 107 }
123 } 108 }
124} 109}
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 c0cf2d1da..e6b01d33d 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
@@ -75,40 +75,6 @@ my-video-thumbnail,
75 left: -2px; 75 left: -2px;
76 } 76 }
77 } 77 }
78
79 .video-info {
80 display: flex;
81 flex-direction: column;
82 align-self: flex-start;
83 min-width: 0;
84
85 .video-info-header {
86 display: flex;
87 align-items: baseline;
88
89 a {
90 width: auto;
91 padding-right: 5px;
92 }
93
94 .pt-badge {
95 @include margin-right(5px);
96 }
97 }
98
99 .video-info-account,
100 .video-info-timestamp {
101 color: pvar(--greyForegroundColor);
102 }
103 }
104 }
105
106 .video-info-name {
107 @include ellipsis;
108
109 font-size: 18px;
110 font-weight: $font-semibold;
111 display: inline-block;
112 } 78 }
113 79
114 .more, 80 .more,
@@ -139,6 +105,45 @@ my-video-thumbnail,
139 } 105 }
140} 106}
141 107
108.video-info-name {
109 @include ellipsis;
110
111 font-size: 18px;
112 font-weight: $font-semibold;
113 display: inline-block;
114}
115
116.video-info {
117 display: flex;
118 flex-direction: column;
119 align-self: flex-start;
120 min-width: 0;
121
122 .video-info-header {
123 display: flex;
124 align-items: baseline;
125
126 a {
127 width: auto;
128 padding-right: 5px;
129 }
130
131 .pt-badge {
132 @include margin-right(5px);
133 }
134 }
135
136 .video-info-account,
137 .video-info-timestamp {
138 color: pvar(--greyForegroundColor);
139 }
140}
141
142.video-info-account,
143.video-miniature-created-at-views {
144 font-size: 14px;
145}
146
142.dropdown-menu { 147.dropdown-menu {
143 148
144 .dropdown-item { 149 .dropdown-item {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 3956d9282..d43afad28 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -53,7 +53,7 @@
53 53
54 .privacy-date { 54 .privacy-date {
55 margin-top: 5px; 55 margin-top: 5px;
56 font-size: 13px; 56 font-size: 14px;
57 57
58 .privacy { 58 .privacy {
59 font-weight: $font-semibold; 59 font-weight: $font-semibold;