aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-15 14:59:25 +0200
committerChocobozzz <me@florianbigard.com>2022-06-16 11:37:08 +0200
commit5b0ec7cddb1ae6dbd2057f067382866f846b882c (patch)
tree5751d96ec4ab0d49b793c4ff1c8edbc8daeab6ac /client/src/app/shared
parentb13a0a48bacb53e65e665774e621326452045294 (diff)
downloadPeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.tar.gz
PeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.tar.zst
PeerTube-5b0ec7cddb1ae6dbd2057f067382866f846b882c.zip
Increase global font size
Diffstat (limited to 'client/src/app/shared')
-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
39 files changed, 134 insertions, 193 deletions
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;