aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-16 16:10:12 +0200
committerChocobozzz <me@florianbigard.com>2022-06-16 16:16:51 +0200
commitc4a051712bc7385967a21895d025962e317c7870 (patch)
tree59017cae7a6bff45216694dc44a65f72e9ad48c2 /client
parentef2b5520f963deec43abd0a11881473c45965788 (diff)
downloadPeerTube-c4a051712bc7385967a21895d025962e317c7870.tar.gz
PeerTube-c4a051712bc7385967a21895d025962e317c7870.tar.zst
PeerTube-c4a051712bc7385967a21895d025962e317c7870.zip
Cleanup title-page CSS
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+about/about-instance/contact-admin-modal.component.html2
-rw-r--r--client/src/app/+about/about.component.html9
-rw-r--r--client/src/app/+accounts/accounts.component.html2
-rw-r--r--client/src/app/+login/login.component.html23
-rw-r--r--client/src/app/+login/login.component.scss4
-rw-r--r--client/src/app/+remote-interaction/remote-interaction.component.html4
-rw-r--r--client/src/app/+reset-password/reset-password.component.html37
-rw-r--r--client/src/app/+reset-password/reset-password.component.scss9
-rw-r--r--client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html14
-rw-r--r--client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss8
-rw-r--r--client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html12
-rw-r--r--client/src/app/+stats/video/video-stats.component.html2
-rw-r--r--client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html4
-rw-r--r--client/src/app/+video-channels/video-channels.component.html2
-rw-r--r--client/src/app/+video-studio/edit/video-studio-edit.component.html2
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-edit.component.scss9
-rw-r--r--client/src/app/+videos/+video-edit/video-add.component.html2
-rw-r--r--client/src/app/+videos/+video-edit/video-update.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html5
-rw-r--r--client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss8
-rw-r--r--client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html12
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.html4
-rw-r--r--client/src/app/shared/shared-share-modal/video-share.component.scss8
-rw-r--r--client/src/app/shared/shared-video-miniature/videos-list.component.scss6
-rw-r--r--client/src/sass/class-helpers.scss45
-rw-r--r--client/src/sass/primeng-custom.scss6
27 files changed, 114 insertions, 129 deletions
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index ed027af44..a14ba3a4f 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -53,7 +53,7 @@
53 </div> 53 </div>
54 </form> 54 </form>
55 55
56 <div *ngIf="!isContactFormEnabled()" class="alert alert-error" i18n>The contact form is not enabled on this instance.</div> 56 <div *ngIf="!isContactFormEnabled()" class="alert alert-danger" i18n>The contact form is not enabled on this instance.</div>
57 57
58 </div> 58 </div>
59</ng-template> 59</ng-template>
diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html
index 3b7343a04..cf302e061 100644
--- a/client/src/app/+about/about.component.html
+++ b/client/src/app/+about/about.component.html
@@ -1,13 +1,10 @@
1<div> 1<div>
2 <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed }"> 2 <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed }">
3 <a myPluginSelector pluginSelectorId="about-menu-instance" i18n routerLink="instance" routerLinkActive="active" class="sub-menu-entry">Instance</a>
3 4
4 <div class="links"> 5 <a myPluginSelector pluginSelectorId="about-menu-peertube" i18n routerLink="peertube" routerLinkActive="active" class="sub-menu-entry">PeerTube</a>
5 <a myPluginSelector pluginSelectorId="about-menu-instance" i18n routerLink="instance" routerLinkActive="active" class="title-page title-page-about">Instance</a>
6 6
7 <a myPluginSelector pluginSelectorId="about-menu-peertube" i18n routerLink="peertube" routerLinkActive="active" class="title-page title-page-about">PeerTube</a> 7 <a myPluginSelector pluginSelectorId="about-menu-network" i18n routerLink="follows" routerLinkActive="active" class="sub-menu-entry">Network</a>
8
9 <a myPluginSelector pluginSelectorId="about-menu-network" i18n routerLink="follows" routerLinkActive="active" class="title-page title-page-about">Network</a>
10 </div>
11 </div> 8 </div>
12 9
13 <div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }"> 10 <div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index db045b046..0be2271c7 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -66,7 +66,7 @@
66 66
67 <div class="links" [ngClass]="{ 'on-channel-page': isOnChannelPage() }"> 67 <div class="links" [ngClass]="{ 'on-channel-page': isOnChannelPage() }">
68 <ng-template #linkTemplate let-item="item"> 68 <ng-template #linkTemplate let-item="item">
69 <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a> 69 <a [routerLink]="item.routerLink" routerLinkActive="active" class="sub-menu-entry">{{ item.label }}</a>
70 </ng-template> 70 </ng-template>
71 71
72 <my-list-overflow [hidden]="hideMenu" [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow> 72 <my-list-overflow [hidden]="hideMenu" [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow>
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 10e25a936..834ea6e51 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -5,18 +5,7 @@
5</h1> 5</h1>
6 6
7<div class="margin-content"> 7<div class="margin-content">
8 <div class="alert alert-danger" i18n *ngIf="externalAuthError">
9 Sorry but there was an issue with the external login process. Please <a routerLink="/about">contact an administrator</a>.
10 </div>
11
12 <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth"> 8 <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
13 <div *ngIf="error" class="alert alert-danger">
14 {{ error }}
15
16 <span *ngIf="error === 'User email is not verified.'">
17 <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a>
18 </span>
19 </div>
20 9
21 <div class="alert pt-alert-primary" role="alert"> 10 <div class="alert pt-alert-primary" role="alert">
22 <h5 class="alert-heading" i18n> 11 <h5 class="alert-heading" i18n>
@@ -34,6 +23,18 @@
34 </p> 23 </p>
35 </div> 24 </div>
36 25
26 <div class="alert alert-danger" i18n *ngIf="externalAuthError">
27 Sorry but there was an issue with the external login process. Please <a class="link-orange" routerLink="/about">contact an administrator</a>.
28 </div>
29
30 <div *ngIf="error" class="alert alert-danger">
31 {{ error }}
32
33 <a *ngIf="error === 'User email is not verified.'" class="ms-1 link-orange" i18n routerLink="/verify-account/ask-send-email">
34 Request new verification email
35 </a>
36 </div>
37
37 <div class="wrapper"> 38 <div class="wrapper">
38 <div class="login-form-and-externals"> 39 <div class="login-form-and-externals">
39 40
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index 79a2081fe..d31d428f7 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -51,11 +51,11 @@ input[type=email] {
51} 51}
52 52
53.wrapper, 53.wrapper,
54.pt-alert-primary { 54.alert {
55 max-width: 1200px; 55 max-width: 1200px;
56} 56}
57 57
58.pt-alert-primary { 58.alert {
59 margin: 0 auto 30px; 59 margin: 0 auto 30px;
60} 60}
61 61
diff --git a/client/src/app/+remote-interaction/remote-interaction.component.html b/client/src/app/+remote-interaction/remote-interaction.component.html
index e59783b9a..135ddc00b 100644
--- a/client/src/app/+remote-interaction/remote-interaction.component.html
+++ b/client/src/app/+remote-interaction/remote-interaction.component.html
@@ -1,7 +1,5 @@
1<div class="root"> 1<div class="root">
2 2
3 <div class="alert alert-error" *ngIf="error"> 3 <div class="alert alert-danger" *ngIf="error">{{ error }}</div>
4 {{ error }}
5 </div>
6 4
7</div> 5</div>
diff --git a/client/src/app/+reset-password/reset-password.component.html b/client/src/app/+reset-password/reset-password.component.html
index 1910ebd15..130873593 100644
--- a/client/src/app/+reset-password/reset-password.component.html
+++ b/client/src/app/+reset-password/reset-password.component.html
@@ -1,31 +1,32 @@
1<div class="margin-content"> 1<div class="margin-content">
2 <div i18n class="title-page title-page-single"> 2 <h1 i18n class="title-page">Reset my password</h1>
3 Reset my password
4 </div>
5 3
6 <form role="form" (ngSubmit)="resetPassword()" [formGroup]="form"> 4 <form role="form" (ngSubmit)="resetPassword()" [formGroup]="form">
7 <div class="form-group"> 5 <div class="form-group">
8 <label i18n for="password">Password</label> 6 <label i18n for="password">Password</label>
9 <my-input-text formControlName="password" inputId="password" 7
10 i18n-placeholder placeholder="Password" 8 <my-input-text
11 [ngClass]="{ 'input-error': formErrors['password'] }" 9 formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
12 autocomplete="new-password"></my-input-text> 10 [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
13 <div *ngIf="formErrors.password" class="form-error"> 11 ></my-input-text>
14 {{ formErrors.password }} 12
15 </div> 13 <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
16 </div> 14 </div>
17 15
18 <div class="form-group"> 16 <div class="form-group">
19 <label i18n for="password-confirm">Confirm password</label> 17 <label i18n for="password-confirm">Confirm password</label>
20 <my-input-text formControlName="password-confirm" inputId="password-confirm" 18
21 i18n-placeholder placeholder="Confirmed password" 19 <my-input-text
22 [ngClass]="{ 'input-error': formErrors['password-confirm'] }" 20 formControlName="password-confirm" inputId="password-confirm" i18n-placeholder placeholder="Confirmed password"
23 autocomplete="new-password"></my-input-text> 21 [ngClass]="{ 'input-error': formErrors['password-confirm'] }" autocomplete="new-password"
24 <div *ngIf="formErrors['password-confirm']" class="form-error"> 22 ></my-input-text>
25 {{ formErrors['password-confirm'] }} 23
26 </div> 24 <div *ngIf="formErrors['password-confirm']" class="form-error">{{ formErrors['password-confirm'] }}</div>
27 </div> 25 </div>
28 26
29 <input type="submit" i18n-value value="Reset my password" [disabled]="!form.valid || !isConfirmedPasswordValid()"> 27 <input
28 class="peertube-button orange-button" type="submit" i18n-value value="Reset my password"
29 [disabled]="!form.valid || !isConfirmedPasswordValid()"
30 >
30 </form> 31 </form>
31</div> 32</div>
diff --git a/client/src/app/+reset-password/reset-password.component.scss b/client/src/app/+reset-password/reset-password.component.scss
index 5494e29c6..dd981ca39 100644
--- a/client/src/app/+reset-password/reset-password.component.scss
+++ b/client/src/app/+reset-password/reset-password.component.scss
@@ -1,12 +1,7 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4input:not([type=submit]) { 4my-input-text {
5 @include peertube-input-text(340px); 5 max-width: 340px;
6 display: block; 6 display: block;
7} 7}
8
9input[type=submit] {
10 @include peertube-button;
11 @include orange-button;
12}
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
index ece9d1022..023082f61 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
@@ -1,21 +1,21 @@
1<div class="margin-content"> 1<div class="margin-content">
2 <div i18n class="title-page title-page-single"> 2 <h1 i18n class="title-page">Request email for account verification</h1>
3 Request email for account verification
4 </div>
5 3
6 <form *ngIf="requiresEmailVerification; else emailVerificationNotRequired" role="form" (ngSubmit)="askSendVerifyEmail()" [formGroup]="form"> 4 <form *ngIf="requiresEmailVerification; else emailVerificationNotRequired" role="form" (ngSubmit)="askSendVerifyEmail()" [formGroup]="form">
7 <div class="form-group"> 5 <div class="form-group">
8 <label i18n for="verify-email-email">Email</label> 6 <label i18n for="verify-email-email">Email</label>
7
9 <input 8 <input
10 type="email" id="verify-email-email" i18n-placeholder placeholder="Email address" required 9 type="email" id="verify-email-email" i18n-placeholder placeholder="Email address" required
11 formControlName="verify-email-email" class="form-control" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }" 10 formControlName="verify-email-email" class="form-control" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
12 > 11 >
13 <div *ngIf="formErrors['verify-email-email']" class="form-error"> 12
14 {{ formErrors['verify-email-email'] }} 13 <div *ngIf="formErrors['verify-email-email']" class="form-error">{{ formErrors['verify-email-email'] }}</div>
15 </div>
16 </div> 14 </div>
17 <input type="submit" i18n-value value="Send verification email" [disabled]="!form.valid"> 15
16 <input class="peertube-button orange-button" type="submit" i18n-value value="Send verification email" [disabled]="!form.valid">
18 </form> 17 </form>
18
19 <ng-template #emailVerificationNotRequired> 19 <ng-template #emailVerificationNotRequired>
20 <div i18n>This instance does not require email verification.</div> 20 <div i18n>This instance does not require email verification.</div>
21 </ng-template> 21 </ng-template>
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
index 5494e29c6..c542f3d8a 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss
@@ -1,12 +1,8 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4input:not([type=submit]) { 4input[type=email] {
5 @include peertube-input-text(340px); 5 @include peertube-input-text(340px);
6 display: block;
7}
8 6
9input[type=submit] { 7 display: block;
10 @include peertube-button;
11 @include orange-button;
12} 8}
diff --git a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
index 327e23f3f..122f3c28c 100644
--- a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
@@ -1,18 +1,14 @@
1<div class="margin-content"> 1<div class="margin-content">
2 <div i18n class="title-page title-page-single"> 2 <h1 i18n class="title-page">Verify account email confirmation</h1>
3 Verify account email confirmation
4 </div>
5 3
6 <my-signup-success i18n *ngIf="!isPendingEmail && success" [requiresEmailVerification]="false"> 4 <my-signup-success i18n *ngIf="!isPendingEmail && success" [requiresEmailVerification]="false">
7 </my-signup-success> 5 </my-signup-success>
8 6
9 <div i18n class="alert alert-success" *ngIf="isPendingEmail && success"> 7 <div i18n class="alert alert-success" *ngIf="isPendingEmail && success">Email updated.</div>
10 Email updated.
11 </div>
12 8
13 <div *ngIf="failed"> 9 <div class="alert alert-danger" *ngIf="failed">
14 <span i18n>An error occurred.</span> 10 <span i18n>An error occurred.</span>
15 11
16 <a i18n routerLink="/verify-account/ask-send-email" [queryParams]="{ isPendingEmail: isPendingEmail }">Request new verification email.</a> 12 <a i18n class="ms-1 link-orange" routerLink="/verify-account/ask-send-email" [queryParams]="{ isPendingEmail: isPendingEmail }">Request new verification email</a>
17 </div> 13 </div>
18</div> 14</div>
diff --git a/client/src/app/+stats/video/video-stats.component.html b/client/src/app/+stats/video/video-stats.component.html
index adfe095a3..242a5a7a2 100644
--- a/client/src/app/+stats/video/video-stats.component.html
+++ b/client/src/app/+stats/video/video-stats.component.html
@@ -1,5 +1,5 @@
1<div class="margin-content"> 1<div class="margin-content">
2 <h1 class="title-page title-page-single" i18n>{{ video.name }}</h1> 2 <h1 class="title-page" i18n>{{ video.name }}</h1>
3 3
4 <div class="stats-embed"> 4 <div class="stats-embed">
5 <div class="global-stats"> 5 <div class="global-stats">
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
index fa58963ce..dd0b10d66 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
@@ -1,7 +1,7 @@
1<div class="margin-content"> 1<div class="margin-content">
2 <div i18n class="title-page title-page-single" *ngIf="pagination.totalItems"> 2 <h1 i18n class="title-page" *ngIf="pagination.totalItems">
3 Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}} 3 Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
4 </div> 4 </h1>
5 5
6 <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div> 6 <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
7 7
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 1b9dbe7b9..0fe6e808a 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -113,7 +113,7 @@
113 113
114 <div class="links"> 114 <div class="links">
115 <ng-template #linkTemplate let-item="item"> 115 <ng-template #linkTemplate let-item="item">
116 <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a> 116 <a [routerLink]="item.routerLink" routerLinkActive="active" class="sub-menu-entry">{{ item.label }}</a>
117 </ng-template> 117 </ng-template>
118 118
119 <my-list-overflow [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow> 119 <my-list-overflow [items]="links" [itemTemplate]="linkTemplate"></my-list-overflow>
diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.html b/client/src/app/+video-studio/edit/video-studio-edit.component.html
index acfc1a452..fe74062d2 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.html
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.html
@@ -1,5 +1,5 @@
1<div class="margin-content"> 1<div class="margin-content">
2 <h1 class="title-page title-page-single" i18n>Studio for {{ video.name }}</h1> 2 <h1 class="title-page" i18n>Studio for {{ video.name }}</h1>
3 3
4 <div class="columns"> 4 <div class="columns">
5 <form role="form" [formGroup]="form"> 5 <form role="form" [formGroup]="form">
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 770a0f585..e8a6c6e42 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
@@ -5,15 +5,6 @@
5 @include peertube-select-container(auto); 5 @include peertube-select-container(auto);
6} 6}
7 7
8.title-page a {
9 color: pvar(--mainForegroundColor);
10
11 &:hover {
12 text-decoration: none;
13 opacity: .8;
14 }
15}
16
17my-peertube-checkbox { 8my-peertube-checkbox {
18 display: block; 9 display: block;
19 margin-bottom: 1rem; 10 margin-bottom: 1rem;
diff --git a/client/src/app/+videos/+video-edit/video-add.component.html b/client/src/app/+videos/+video-edit/video-add.component.html
index 29cf08e75..27ad14d63 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.html
+++ b/client/src/app/+videos/+video-edit/video-add.component.html
@@ -40,7 +40,7 @@
40<div *ngIf="!user.isUploadDisabled()" class="margin-content"> 40<div *ngIf="!user.isUploadDisabled()" class="margin-content">
41 <my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'" [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota> 41 <my-user-quota *ngIf="!isInSecondStep() || secondStepType === 'go-live'" [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
42 42
43 <div class="title-page title-page-single" *ngIf="isInSecondStep()"> 43 <div class="title-page" *ngIf="isInSecondStep()">
44 <ng-container *ngIf="secondStepType === 'import-url' || secondStepType === 'import-torrent'" i18n>Import {{ videoName }}</ng-container> 44 <ng-container *ngIf="secondStepType === 'import-url' || secondStepType === 'import-torrent'" i18n>Import {{ videoName }}</ng-container>
45 <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container> 45 <ng-container *ngIf="secondStepType === 'upload'" i18n>Upload {{ videoName }}</ng-container>
46 </div> 46 </div>
diff --git a/client/src/app/+videos/+video-edit/video-update.component.html b/client/src/app/+videos/+video-edit/video-update.component.html
index 446406d1a..6a32f1477 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -1,5 +1,5 @@
1<div class="margin-content"> 1<div class="margin-content">
2 <div class="title-page title-page-single"> 2 <div class="title-page">
3 <span class="me-1" i18n>Update</span> 3 <span class="me-1" i18n>Update</span>
4 <a [routerLink]="getVideoUrl()">{{ video?.name }}</a> 4 <a [routerLink]="getVideoUrl()">{{ video?.name }}</a>
5 </div> 5 </div>
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
index a54df97cd..e27942e66 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -1,6 +1,6 @@
1<div> 1<div>
2 <div class="title-block"> 2 <div class="title-block">
3 <h2 class="title-page title-page-single"> 3 <h2 class="title-page">
4 {totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}} 4 {totalNotDeletedComments, plural, =0 {Comments} =1 {1 Comment} other {{{totalNotDeletedComments}} Comments}}
5 </h2> 5 </h2>
6 6
diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
index e493ad8d7..5ac801622 100644
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
@@ -1,9 +1,8 @@
1<div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }"> 1<div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
2 <ng-container *ngIf="hasVideos$ | async"> 2 <ng-container *ngIf="hasVideos$ | async">
3 <div class="title-page-container"> 3 <div class="title-page-container">
4 <h2 i18n class="title-page title-page-single"> 4 <h2 i18n class="title-page">Other videos</h2>
5 Other videos 5
6 </h2>
7 <div *ngIf="!playlist" class="title-page-autoplay" 6 <div *ngIf="!playlist" class="title-page-autoplay"
8 [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto" 7 [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
9 > 8 >
diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
index 784d0e961..5b1bf9cab 100644
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
@@ -8,18 +8,14 @@
8 margin-bottom: 25px; 8 margin-bottom: 25px;
9 flex-wrap: wrap-reverse; 9 flex-wrap: wrap-reverse;
10 10
11 .title-page.active, 11 .title-page {
12 .title-page.title-page-single {
13 @include margin-right(.5rem !important); 12 @include margin-right(.5rem !important);
14 13
15 margin-bottom: unset; 14 margin-bottom: unset;
15 margin-top: 0;
16 } 16 }
17} 17}
18 18
19.title-page {
20 margin-top: 0;
21}
22
23.title-page-autoplay { 19.title-page-autoplay {
24 @include margin-left(auto); 20 @include margin-left(auto);
25 21
diff --git a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
index d884e75b2..d96fdbdc6 100644
--- a/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
+++ b/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html
@@ -1,7 +1,13 @@
1<div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }"> 1<div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
2 <ng-container *ngFor="let menuEntry of menuEntries; index as id"> 2 <ng-container *ngFor="let menuEntry of menuEntries; index as id">
3 3
4 <a *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings" #routerLink (click)="onActiveLinkScrollToTop(routerLink)">{{ menuEntry.label }}</a> 4 <a
5 *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" class="sub-menu-entry"
6 [routerLink]="menuEntry.routerLink" routerLinkActive="active" #routerLink
7 (click)="onActiveLinkScrollToTop(routerLink)"
8 >
9 {{ menuEntry.label }}
10 </a>
5 11
6 <div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry" 12 <div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry"
7 #dropdown="ngbDropdown" autoClose="true" container="body"> 13 #dropdown="ngbDropdown" autoClose="true" container="body">
@@ -10,7 +16,7 @@
10 tabindex=0 16 tabindex=0
11 [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" 17 [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
12 (click)="openModal(id)" (keydown.enter)="openModal(id)" 18 (click)="openModal(id)" (keydown.enter)="openModal(id)"
13 role="button" class="title-page title-page-settings"> 19 role="button" class="sub-menu-entry">
14 <ng-container i18n>{{ menuEntry.label }}</ng-container> 20 <ng-container i18n>{{ menuEntry.label }}</ng-container>
15 </span> 21 </span>
16 22
@@ -19,7 +25,7 @@
19 tabindex=0 25 tabindex=0
20 [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor 26 [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
21 (click)="dropdownAnchorClicked(dropdown)" (keydown.enter)="dropdownAnchorClicked(dropdown)" 27 (click)="dropdownAnchorClicked(dropdown)" (keydown.enter)="dropdownAnchorClicked(dropdown)"
22 role="button" class="title-page title-page-settings" 28 role="button" class="sub-menu-entry"
23 > 29 >
24 <ng-container i18n>{{ menuEntry.label }}</ng-container> 30 <ng-container i18n>{{ menuEntry.label }}</ng-container>
25 </span> 31 </span>
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 1b99a6c1e..b163d3581 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -8,7 +8,7 @@
8 <div class="modal-body"> 8 <div class="modal-body">
9 9
10 <div class="playlist" *ngIf="playlist"> 10 <div class="playlist" *ngIf="playlist">
11 <div class="title-page title-page-single" i18n *ngIf="video">Share the playlist</div> 11 <h5 i18n *ngIf="video">Share the playlist</h5>
12 12
13 <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning"> 13 <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
14 <div i18n>This playlist is private so you won't be able to share it with external users</div> 14 <div i18n>This playlist is private so you won't be able to share it with external users</div>
@@ -85,7 +85,7 @@
85 85
86 86
87 <div class="video" *ngIf="video"> 87 <div class="video" *ngIf="video">
88 <div class="title-page title-page-single" *ngIf="playlist" i18n>Share the video</div> 88 <h5 *ngIf="playlist" i18n>Share the video</h5>
89 89
90 <div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning"> 90 <div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning">
91 <div i18n>This video is private so you won't be able to share it with external users</div> 91 <div i18n>This video is private so you won't be able to share it with external users</div>
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 456309d2d..6e80f8c76 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
@@ -5,10 +5,6 @@ my-input-text {
5 width: 100%; 5 width: 100%;
6} 6}
7 7
8.title-page.title-page-single {
9 margin-top: 0;
10}
11
12.playlist { 8.playlist {
13 margin-bottom: 50px; 9 margin-bottom: 50px;
14} 10}
@@ -80,3 +76,7 @@ my-input-text {
80 align-items: center; 76 align-items: center;
81 justify-content: space-between; 77 justify-content: space-between;
82} 78}
79
80h5 {
81 font-size: 1.15rem;
82}
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 5e3df5a98..fb9dcafb8 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
@@ -99,11 +99,5 @@ $margin-top: 30px;
99 align-items: center; 99 align-items: center;
100 height: auto; 100 height: auto;
101 margin-bottom: 10px; 101 margin-bottom: 10px;
102
103 .title-page {
104 @include margin-right(0);
105
106 margin-bottom: 10px;
107 }
108 } 102 }
109} 103}
diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss
index d4277e4cd..4a04cabba 100644
--- a/client/src/sass/class-helpers.scss
+++ b/client/src/sass/class-helpers.scss
@@ -98,7 +98,7 @@ label + .form-group-description {
98// --------------------------------------------------------------------------- 98// ---------------------------------------------------------------------------
99 99
100 100
101.title-page { 101.sub-menu-entry {
102 @include disable-default-a-behaviour; 102 @include disable-default-a-behaviour;
103 @include margin-right(55px); 103 @include margin-right(55px);
104 104
@@ -107,20 +107,13 @@ label + .form-group-description {
107 display: inline-block; 107 display: inline-block;
108 font-weight: $font-semibold; 108 font-weight: $font-semibold;
109 border-bottom: 2px solid transparent; 109 border-bottom: 2px solid transparent;
110 110 white-space: nowrap;
111 &.title-page-single { 111 font-size: 1rem;
112 margin-top: 30px;
113 margin-bottom: 25px;
114 }
115 112
116 &.active { 113 &.active {
117 border-bottom-color: pvar(--mainColor); 114 border-bottom-color: pvar(--mainColor);
118 } 115 }
119 116
120 &.title-page-single {
121 font-size: 125%;
122 }
123
124 &:hover, 117 &:hover,
125 &:active, 118 &:active,
126 &:focus { 119 &:focus {
@@ -130,8 +123,7 @@ label + .form-group-description {
130 &.active, 123 &.active,
131 &:hover, 124 &:hover,
132 &:active, 125 &:active,
133 &:focus, 126 &:focus {
134 &.title-page-single {
135 opacity: 1; 127 opacity: 1;
136 outline: 0 hidden !important; 128 outline: 0 hidden !important;
137 } 129 }
@@ -147,10 +139,31 @@ label + .form-group-description {
147 padding: 35px 25px; 139 padding: 35px 25px;
148} 140}
149 141
150.title-page-about, 142.title-page {
151.title-page-settings { 143 @include margin-right(55px);
152 white-space: nowrap; 144
153 font-size: 1rem; 145 margin-top: 30px;
146 margin-bottom: 25px;
147
148 color: pvar(--mainForegroundColor);
149 display: inline-block;
150 font-weight: $font-semibold;
151 font-size: 1.25rem;
152
153 a {
154 @include disable-default-a-behaviour;
155
156 color: inherit;
157
158 &:hover {
159 color: inherit;
160 opacity: 0.8;
161 }
162 }
163
164 @media screen and (max-width: $mobile-view) {
165 @include margin-left(15px);
166 }
154} 167}
155 168
156.admin-sub-header { 169.admin-sub-header {
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 061d626d8..37e7a4275 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -882,15 +882,17 @@ p-toast {
882 padding: 10px 20px; 882 padding: 10px 20px;
883 883
884 .message { 884 .message {
885 flex-grow: 1;
886 @include margin-right(20px); 885 @include margin-right(20px);
887 886
887 flex-grow: 1;
888
888 h3 { 889 h3 {
889 font-size: 21px; 890 font-size: 21px;
890 } 891 }
891 892
892 p { 893 p {
893 font-size: 16px; 894 @include peertube-word-wrap;
895
894 margin-bottom: 0; 896 margin-bottom: 0;
895 } 897 }
896 } 898 }