aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/package.json1
-rw-r--r--client/src/app/+admin/overview/users/user-list/user-list.component.scss7
-rw-r--r--client/src/app/+admin/system/jobs/jobs.component.scss4
-rw-r--r--client/src/app/+my-library/my-follows/my-followers.component.scss6
-rw-r--r--client/src/app/+my-library/my-ownership/my-ownership.component.scss7
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html4
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss8
-rw-r--r--client/src/app/header/search-typeahead.component.html2
-rw-r--r--client/src/app/header/search-typeahead.component.scss4
-rw-r--r--client/src/app/menu/menu.component.scss4
-rw-r--r--client/src/app/menu/notification.component.html13
-rw-r--r--client/src/app/menu/notification.component.scss4
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.html6
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.scss4
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-list-table.component.html8
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss11
-rw-r--r--client/src/app/shared/shared-forms/advanced-input-filter.component.html2
-rw-r--r--client/src/app/shared/shared-forms/input-text.component.html5
-rw-r--r--client/src/app/shared/shared-forms/input-text.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/input-text.component.ts7
-rw-r--r--client/src/app/shared/shared-icons/global-icon.component.ts5
-rw-r--r--client/src/app/shared/shared-instance/feature-boolean.component.html5
-rw-r--r--client/src/app/shared/shared-instance/feature-boolean.component.scss4
-rw-r--r--client/src/app/shared/shared-instance/instance-statistics.component.html18
-rw-r--r--client/src/app/shared/shared-instance/instance-statistics.component.scss29
-rw-r--r--client/src/app/shared/shared-instance/shared-instance.module.ts2
-rw-r--r--client/src/app/shared/shared-main/loaders/loader.component.ts2
-rw-r--r--client/src/app/shared/shared-main/misc/simple-search-input.component.html2
-rw-r--r--client/src/app/shared/shared-main/misc/simple-search-input.component.scss6
-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.scss4
-rw-r--r--client/src/app/shared/shared-tables/table-expander-icon.component.ts2
-rw-r--r--client/src/app/shared/shared-tables/video-cell.component.scss7
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.html4
-rw-r--r--client/src/app/shared/shared-video-miniature/video-download.component.scss4
-rw-r--r--client/src/assets/images/feather/skip-back.svg1
-rw-r--r--client/src/assets/images/feather/skip-forward.svg1
-rw-r--r--client/src/sass/application.scss26
-rw-r--r--client/src/sass/bootstrap.scss4
-rw-r--r--client/src/sass/include/_icons.scss58
-rw-r--r--client/src/sass/include/_mixins.scss39
-rw-r--r--client/src/sass/player/settings-menu.scss1
-rw-r--r--client/src/sass/primeng-custom.scss126
-rw-r--r--client/yarn.lock5
44 files changed, 230 insertions, 240 deletions
diff --git a/client/package.json b/client/package.json
index 4441e84a2..46a1ec00a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -47,7 +47,6 @@
47 "@angular/service-worker": "^13.0.0", 47 "@angular/service-worker": "^13.0.0",
48 "@babel/core": "^7.15.0", 48 "@babel/core": "^7.15.0",
49 "@babel/preset-env": "^7.15.0", 49 "@babel/preset-env": "^7.15.0",
50 "@neos21/bootstrap3-glyphicons": "^1.0.1",
51 "@ng-bootstrap/ng-bootstrap": "^12.1.2", 50 "@ng-bootstrap/ng-bootstrap": "^12.1.2",
52 "@ng-select/ng-select": "^8.1.1", 51 "@ng-select/ng-select": "^8.1.1",
53 "@ngx-loading-bar/core": "^6.0.0", 52 "@ngx-loading-bar/core": "^6.0.0",
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
index 6449f5064..3c775cac5 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
@@ -28,13 +28,6 @@ tr.banned > td {
28 @include margin-left(15px); 28 @include margin-left(15px);
29} 29}
30 30
31.user-table-primary-text .glyphicon {
32 @include margin-left(0.1rem);
33
34 font-size: 80%;
35 color: #808080;
36}
37
38p-tableCheckbox { 31p-tableCheckbox {
39 position: relative; 32 position: relative;
40 top: -2.5px; 33 top: -2.5px;
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index eadaf7904..4a76f1783 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -44,10 +44,6 @@
44 } 44 }
45} 45}
46 46
47td .glyphicon {
48 @include margin-right(10px);
49}
50
51pre { 47pre {
52 font-size: 11px; 48 font-size: 11px;
53} 49}
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 fae4cd972..d8c5f9cff 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
@@ -16,11 +16,5 @@ input[type=text] {
16 16
17 .actor-display-name { 17 .actor-display-name {
18 font-size: 16px; 18 font-size: 16px;
19
20 + .glyphicon {
21 @include margin-left(5px);
22
23 font-size: 12px;
24 }
25 } 19 }
26} 20}
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
index d32477270..a8450ff1b 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
@@ -55,13 +55,6 @@
55 color: pvar(--mainForegroundColor); 55 color: pvar(--mainForegroundColor);
56 line-height: 1rem; 56 line-height: 1rem;
57 57
58 div .glyphicon {
59 @include margin-left(0.1rem);
60
61 font-size: 80%;
62 color: #808080;
63 }
64
65 div + div { 58 div + div {
66 font-size: 80%; 59 font-size: 80%;
67 } 60 }
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 eca821370..a54df97cd 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
@@ -65,7 +65,7 @@
65 [redraftValue]="commentReplyRedraftValue" 65 [redraftValue]="commentReplyRedraftValue"
66 > 66 >
67 <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2"> 67 <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
68 <span class="glyphicon glyphicon-menu-down"></span> 68 <span class="chevron-down"></span>
69 69
70 <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container> 70 <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
71 71
@@ -80,7 +80,7 @@
80 80
81 <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template> 81 <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
82 82
83 <my-loader size="sm" class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-loader> 83 <my-loader size="sm" class="ms-1" [loading]="threadLoading[comment.id]"></my-loader>
84 </div> 84 </div>
85 </my-video-comment> 85 </my-video-comment>
86 86
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.scss
index 31aa73937..4b00683ab 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
@@ -11,14 +11,6 @@
11 cursor: pointer; 11 cursor: pointer;
12} 12}
13 13
14.glyphicon,
15.comment-thread-loading {
16 @include margin-right(5px);
17
18 display: inline-block;
19 font-size: 13px;
20}
21
22.title-block { 14.title-block {
23 .title-page { 15 .title-page {
24 @include margin-right(0); 16 @include margin-right(0);
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index d08e2f0fb..783b4b53b 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -26,7 +26,6 @@
26 <label class="small-title" i18n>GLOBAL SEARCH</label> 26 <label class="small-title" i18n>GLOBAL SEARCH</label>
27 <div class="advanced-search-status muted"> 27 <div class="advanced-search-status muted">
28 <span *ngIf="serverConfig" class="me-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span> 28 <span *ngIf="serverConfig" class="me-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
29 <i class="glyphicon glyphicon-globe"></i>
30 </div> 29 </div>
31 </div> 30 </div>
32 <div class="muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div> 31 <div class="muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
@@ -41,7 +40,6 @@
41 <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows."> 40 <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
42 <span *ngIf="canSearchAnyURI()" class="me-1" i18n>any instance</span> 41 <span *ngIf="canSearchAnyURI()" class="me-1" i18n>any instance</span>
43 <span *ngIf="!canSearchAnyURI()" class="me-1" i18n>only followed instances</span> 42 <span *ngIf="!canSearchAnyURI()" class="me-1" i18n>only followed instances</span>
44 <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
45 </span> 43 </span>
46 </div> 44 </div>
47 </div> 45 </div>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 5114ec3a7..e4c9c602c 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -129,10 +129,6 @@ li.suggestion {
129 } 129 }
130} 130}
131 131
132.glyphicon {
133 top: 3px;
134}
135
136.advanced-search-status { 132.advanced-search-status {
137 height: max-content; 133 height: max-content;
138 cursor: default; 134 cursor: default;
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index c52af6c80..352682bfc 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -352,10 +352,6 @@ my-actor-avatar {
352 display: flex; 352 display: flex;
353 align-items: center; 353 align-items: center;
354 354
355 i.glyphicon-menu-right {
356 opacity: .4;
357 }
358
359 &:hover { 355 &:hover {
360 .hover-display-toggle { 356 .hover-display-toggle {
361 display: none; 357 display: none;
diff --git a/client/src/app/menu/notification.component.html b/client/src/app/menu/notification.component.html
index 5aa834f36..890b086f1 100644
--- a/client/src/app/menu/notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -24,14 +24,19 @@
24 <div> 24 <div>
25 <button 25 <button
26 *ngIf="unreadNotifications" 26 *ngIf="unreadNotifications"
27 i18n-title title="Mark all as read" class="glyphicon glyphicon-ok me-2" 27 i18n-title title="Mark all as read" class="me-2"
28 (click)="markAllAsRead()" 28 (click)="markAllAsRead()"
29 ></button> 29 >
30 <my-global-icon iconName="tick"></my-global-icon>
31 </button>
32
30 <a 33 <a
31 i18n-title title="Update your notification preferences" class="glyphicon glyphicon-cog" 34 i18n-title title="Update your notification preferences"
32 routerLink="/my-account/settings" fragment="notifications" 35 routerLink="/my-account/settings" fragment="notifications"
33 #settingsNotifications (click)="onNavigate(settingsNotifications)" 36 #settingsNotifications (click)="onNavigate(settingsNotifications)"
34 ></a> 37 >
38 <my-global-icon iconName="cog"></my-global-icon>
39 </a>
35 </div> 40 </div>
36 </div> 41 </div>
37 42
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index 3515c3e19..7f72c98d1 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -119,6 +119,10 @@
119 color: rgba(20, 20, 20, 0.8); 119 color: rgba(20, 20, 20, 0.8);
120 } 120 }
121 } 121 }
122
123 my-global-icon {
124 width: 20px;
125 }
122 } 126 }
123 127
124 .all-notifications { 128 .all-notifications {
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index bb87279d7..b04d46e32 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -19,7 +19,8 @@
19 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }" 19 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
20 class="ms-auto muted abuse-details-links" i18n 20 class="ms-auto muted abuse-details-links" i18n
21 > 21 >
22 {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span> 22 {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}
23 <my-global-icon iconName="flag"></my-global-icon>
23 </a> 24 </a>
24 </span> 25 </span>
25 </div> 26 </div>
@@ -39,7 +40,8 @@
39 <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }" 40 <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
40 class="ms-auto muted abuse-details-links" i18n 41 class="ms-auto muted abuse-details-links" i18n
41 > 42 >
42 {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span> 43 {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}
44 <my-global-icon iconName="flag"></my-global-icon>
43 </a> 45 </a>
44 </span> 46 </span>
45 </div> 47 </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
index 37bf4cc56..bd43ed459 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
@@ -15,3 +15,7 @@
15.abuse-details-links { 15.abuse-details-links {
16 @include disable-default-a-behaviour; 16 @include disable-default-a-behaviour;
17} 17}
18
19my-global-icon[iconName=flag] {
20 width: 15px;
21}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 6d1de808d..f79054d03 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -70,7 +70,7 @@
70 </span> 70 </span>
71 71
72 <span name> 72 <span name>
73 <span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span> 73 <my-global-icon *ngIf="abuse.video.blacklisted" iconName="no" i18n-title title="The video was blocked"></my-global-icon>
74 </span> 74 </span>
75 </my-video-cell> 75 </my-video-cell>
76 </td> 76 </td>
@@ -80,7 +80,7 @@
80 <div class="table-video-text"> 80 <div class="table-video-text">
81 <div> 81 <div>
82 {{ abuse.video.name }} 82 {{ abuse.video.name }}
83 <span class="glyphicon glyphicon-trash"></span> 83 <my-global-icon iconName="delete"></my-global-icon>
84 </div> 84 </div>
85 <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div> 85 <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
86 </div> 86 </div>
@@ -116,8 +116,8 @@
116 <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short' }}</td> 116 <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short' }}</td>
117 117
118 <td class="c-hand abuse-states" [pRowToggler]="abuse"> 118 <td class="c-hand abuse-states" [pRowToggler]="abuse">
119 <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span> 119 <my-global-icon *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" iconName="tick"></my-global-icon>
120 <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span> 120 <my-global-icon *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" iconName="cross"></my-global-icon>
121 </td> 121 </td>
122 122
123 <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)"> 123 <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)">
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
index 2d8acae58..4852f2e8b 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -7,10 +7,6 @@
7 color: var(--greyForegroundColor); 7 color: var(--greyForegroundColor);
8} 8}
9 9
10.abuse-states .glyphicon-comment {
11 @include margin-left(0.5rem);
12}
13
14.abuse-messages { 10.abuse-messages {
15 my-global-icon { 11 my-global-icon {
16 @include margin-left(3px); 12 @include margin-left(3px);
@@ -20,3 +16,10 @@
20 top: -2px; 16 top: -2px;
21 } 17 }
22} 18}
19
20.table-video-text my-global-icon,
21my-video-cell my-global-icon {
22 width: 15px;
23 position: relative;
24 top: -2px;
25}
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
index 1d6b3df7e..e4f318385 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -25,5 +25,5 @@
25 (keyup)="onInputSearch($event)" 25 (keyup)="onInputSearch($event)"
26 > 26 >
27 27
28 <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></a> 28 <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></my-global-icon>
29</div> 29</div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
index f7f9ce403..669b5f32e 100644
--- a/client/src/app/shared/shared-forms/input-text.component.html
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -5,8 +5,9 @@
5 #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control" 5 #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
6 /> 6 />
7 7
8 <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle"> 8 <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
9 <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span> 9 <my-global-icon *ngIf="show" iconName="sensitive"></my-global-icon>
10 <my-global-icon *ngIf="!show" iconName="unsensitive"></my-global-icon>
10 </button> 11 </button>
11 12
12 <button 13 <button
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 cc1646a69..253793196 100644
--- a/client/src/app/shared/shared-forms/input-text.component.scss
+++ b/client/src/app/shared/shared-forms/input-text.component.scss
@@ -9,10 +9,8 @@ input {
9 9
10.btn { 10.btn {
11 font-size: 15px; 11 font-size: 15px;
12}
13 12
14my-global-icon { 13 @include button-with-icon(18px);
15 width: 18px;
16} 14}
17 15
18.copy-text { 16.copy-text {
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index ed4637c17..d9722e6c6 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -1,6 +1,7 @@
1import { Component, forwardRef, Input } from '@angular/core' 1import { Component, forwardRef, Input } from '@angular/core'
2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' 2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3import { Notifier } from '@app/core' 3import { Notifier } from '@app/core'
4import { GlobalIconName } from '../shared-icons'
4 5
5@Component({ 6@Component({
6 selector: 'my-input-text', 7 selector: 'my-input-text',
@@ -47,6 +48,12 @@ export class InputTextComponent implements ControlValueAccessor {
47 this.notifier.success($localize`Copied`) 48 this.notifier.success($localize`Copied`)
48 } 49 }
49 50
51 getEyeIcon (): GlobalIconName {
52 if (this.show) return 'sensitive'
53
54 return 'unsensitive'
55 }
56
50 propagateChange = (_: any) => { /* empty */ } 57 propagateChange = (_: any) => { /* empty */ }
51 58
52 writeValue (value: string) { 59 writeValue (value: string) {
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index 43c407743..8b864fd5f 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -91,6 +91,7 @@ export type GlobalIconName = keyof typeof icons
91}) 91})
92export class GlobalIconComponent implements OnInit { 92export class GlobalIconComponent implements OnInit {
93 @Input() iconName: GlobalIconName 93 @Input() iconName: GlobalIconName
94 @Input() width: string
94 95
95 constructor ( 96 constructor (
96 private el: ElementRef, 97 private el: ElementRef,
@@ -106,6 +107,10 @@ export class GlobalIconComponent implements OnInit {
106 'filter:internal.common.svg-icons.get-content.params', 107 'filter:internal.common.svg-icons.get-content.params',
107 'filter:internal.common.svg-icons.get-content.result' 108 'filter:internal.common.svg-icons.get-content.result'
108 ) 109 )
110
111 if (this.width) {
112 nativeElement.style.width = this.width
113 }
109 } 114 }
110 115
111 private getSVGContent (options: { name: string }) { 116 private getSVGContent (options: { name: string }) {
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.html b/client/src/app/shared/shared-instance/feature-boolean.component.html
index ccb8a30cc..6de5d2075 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.html
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.html
@@ -1,3 +1,2 @@
1<span *ngIf="value === true" class="glyphicon glyphicon-ok" i18n-aria-label aria-label="yes"></span> 1<my-global-icon *ngIf="value === true" iconName="tick" i18n-aria-label aria-label="yes"></my-global-icon>
2<span *ngIf="value === false" class="glyphicon glyphicon-remove" i18n-aria-label aria-label="no"></span> 2<my-global-icon *ngIf="value === false" iconName="cross" i18n-aria-label aria-label="no"></my-global-icon>
3
diff --git a/client/src/app/shared/shared-instance/feature-boolean.component.scss b/client/src/app/shared/shared-instance/feature-boolean.component.scss
index 8683ecc55..29b8c3e02 100644
--- a/client/src/app/shared/shared-instance/feature-boolean.component.scss
+++ b/client/src/app/shared/shared-instance/feature-boolean.component.scss
@@ -1,10 +1,10 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.glyphicon-ok { 4my-global-icon[iconName=tick] {
5 color: $green; 5 color: $green;
6} 6}
7 7
8.glyphicon-remove { 8my-global-icon[iconName=cross] {
9 color: $red; 9 color: $red;
10} 10}
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.html b/client/src/app/shared/shared-instance/instance-statistics.component.html
index 2ca61fd94..960520680 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.html
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.html
@@ -10,7 +10,7 @@
10 <p class="stat-value">{{ serverStats.totalUsers | number }}</p> 10 <p class="stat-value">{{ serverStats.totalUsers | number }}</p>
11 <p class="stat-label" i18n>users</p> 11 <p class="stat-label" i18n>users</p>
12 </div> 12 </div>
13 <i class="glyphicon glyphicon-user icon-bottom"></i> 13 <my-global-icon iconName="user"></my-global-icon>
14 </div> 14 </div>
15 </div> 15 </div>
16 16
@@ -20,7 +20,7 @@
20 <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p> 20 <p class="stat-value">{{ serverStats.totalLocalVideos | number }}</p>
21 <p class="stat-label" i18n>videos</p> 21 <p class="stat-label" i18n>videos</p>
22 </div> 22 </div>
23 <i class="glyphicon glyphicon-facetime-video"></i> 23 <my-global-icon iconName="film"></my-global-icon>
24 </div> 24 </div>
25 </div> 25 </div>
26 26
@@ -30,7 +30,7 @@
30 <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p> 30 <p class="stat-value">{{ serverStats.totalLocalVideoViews | number }}</p>
31 <p class="stat-label" i18n>views</p> 31 <p class="stat-label" i18n>views</p>
32 </div> 32 </div>
33 <i class="glyphicon glyphicon-eye-open"></i> 33 <my-global-icon iconName="sensitive"></my-global-icon>
34 </div> 34 </div>
35 </div> 35 </div>
36 36
@@ -40,7 +40,7 @@
40 <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p> 40 <p class="stat-value">{{ serverStats.totalLocalVideoComments | number }}</p>
41 <p class="stat-label" i18n>comments</p> 41 <p class="stat-label" i18n>comments</p>
42 </div> 42 </div>
43 <i class="glyphicon glyphicon-comment"></i> 43 <my-global-icon iconName="message-circle"></my-global-icon>
44 </div> 44 </div>
45 </div> 45 </div>
46 46
@@ -50,7 +50,7 @@
50 <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p> 50 <p class="stat-value">{{ serverStats.totalLocalVideoFilesSize | bytes:1 }}</p>
51 <p class="stat-label" i18n>hosted video</p> 51 <p class="stat-label" i18n>hosted video</p>
52 </div> 52 </div>
53 <i class="glyphicon glyphicon-hdd"></i> 53 <my-global-icon iconName="home"></my-global-icon>
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
@@ -64,7 +64,7 @@
64 <p class="stat-value">{{ serverStats.totalVideos | number }}</p> 64 <p class="stat-value">{{ serverStats.totalVideos | number }}</p>
65 <p class="stat-label" i18n>videos</p> 65 <p class="stat-label" i18n>videos</p>
66 </div> 66 </div>
67 <i class="glyphicon glyphicon-facetime-video"></i> 67 <my-global-icon iconName="film"></my-global-icon>
68 </div> 68 </div>
69 </div> 69 </div>
70 70
@@ -74,7 +74,7 @@
74 <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p> 74 <p class="stat-value">{{ serverStats.totalVideoComments | number }}</p>
75 <p class="stat-label" i18n>comments</p> 75 <p class="stat-label" i18n>comments</p>
76 </div> 76 </div>
77 <i class="glyphicon glyphicon-comment"></i> 77 <my-global-icon iconName="message-circle"></my-global-icon>
78 </div> 78 </div>
79 </div> 79 </div>
80 80
@@ -84,7 +84,7 @@
84 <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p> 84 <p class="stat-value">{{ serverStats.totalInstanceFollowers | number }}</p>
85 <p class="stat-label" i18n>followers</p> 85 <p class="stat-label" i18n>followers</p>
86 </div> 86 </div>
87 <i class="glyphicon glyphicon-retweet"></i> 87 <my-global-icon iconName="share"></my-global-icon>
88 </div> 88 </div>
89 </div> 89 </div>
90 90
@@ -94,7 +94,7 @@
94 <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p> 94 <p class="stat-value">{{ serverStats.totalInstanceFollowing | number }}</p>
95 <p class="stat-label" i18n>following</p> 95 <p class="stat-label" i18n>following</p>
96 </div> 96 </div>
97 <i class="glyphicon glyphicon-retweet"></i> 97 <my-global-icon iconName="globe"></my-global-icon>
98 </div> 98 </div>
99 </div> 99 </div>
100 </div> 100 </div>
diff --git a/client/src/app/shared/shared-instance/instance-statistics.component.scss b/client/src/app/shared/shared-instance/instance-statistics.component.scss
index 5286ab03a..e1d489d28 100644
--- a/client/src/app/shared/shared-instance/instance-statistics.component.scss
+++ b/client/src/app/shared/shared-instance/instance-statistics.component.scss
@@ -1,3 +1,5 @@
1@use '_variables' as *;
2@use '_mixins' as *;
1 3
2h3 { 4h3 {
3 font-size: 1.25rem; 5 font-size: 1.25rem;
@@ -19,22 +21,19 @@ h3 {
19 margin: 0; 21 margin: 0;
20 } 22 }
21 23
22 .glyphicon {
23 opacity: 0.12;
24 position: absolute;
25 left: 16px;
26 top: -24px;
27
28 &.icon-bottom {
29 top: 4px;
30 }
31
32 &::before {
33 font-size: 8em;
34 }
35 }
36
37 .card-body { 24 .card-body {
38 z-index: 2; 25 z-index: 2;
39 } 26 }
40} 27}
28
29my-global-icon {
30 opacity: 0.12;
31 position: absolute;
32 left: 16px;
33 top: -24px;
34 width: 110px;
35
36 &.icon-bottom {
37 top: 4px;
38 }
39}
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts
index 13c681ab8..dfce88e11 100644
--- a/client/src/app/shared/shared-instance/shared-instance.module.ts
+++ b/client/src/app/shared/shared-instance/shared-instance.module.ts
@@ -1,6 +1,7 @@
1 1
2import { NgModule } from '@angular/core' 2import { NgModule } from '@angular/core'
3import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap' 3import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
4import { SharedGlobalIconModule } from '../shared-icons'
4import { SharedMainModule } from '../shared-main/shared-main.module' 5import { SharedMainModule } from '../shared-main/shared-main.module'
5import { FeatureBooleanComponent } from './feature-boolean.component' 6import { FeatureBooleanComponent } from './feature-boolean.component'
6import { InstanceAboutAccordionComponent } from './instance-about-accordion.component' 7import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
@@ -12,6 +13,7 @@ import { InstanceService } from './instance.service'
12@NgModule({ 13@NgModule({
13 imports: [ 14 imports: [
14 SharedMainModule, 15 SharedMainModule,
16 SharedGlobalIconModule,
15 NgbAccordionModule 17 NgbAccordionModule
16 ], 18 ],
17 19
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index ce8685a09..bd038f8b5 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -12,7 +12,7 @@ export class LoaderComponent {
12 sm: { 12 sm: {
13 width: '1rem', 13 width: '1rem',
14 height: '1rem', 14 height: '1rem',
15 'border-width': '.2em' 15 'border-width': '0.15rem'
16 }, 16 },
17 xl: { 17 xl: {
18 width: '3rem', 18 width: '3rem',
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 11f5a1ab0..ae57ca5b7 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
@@ -10,7 +10,7 @@
10 [placeholder]="placeholder" 10 [placeholder]="placeholder"
11 > 11 >
12 12
13 <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></a> 13 <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
14 </div> 14 </div>
15 15
16 <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon> 16 <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index d5fcff760..ee0f7a8d2 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -5,7 +5,7 @@
5 display: flex; 5 display: flex;
6} 6}
7 7
8my-global-icon { 8.root > my-global-icon {
9 @include margin-left(10px); 9 @include margin-left(10px);
10 10
11 height: 28px; 11 height: 28px;
@@ -25,3 +25,7 @@ input {
25 box-shadow: 0 0 5px 0 #a5a5a5; 25 box-shadow: 0 0 5px 0 #a5a5a5;
26 } 26 }
27} 27}
28
29.input-group > my-global-icon {
30 width: 20px;
31}
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 0658ae962..1b99a6c1e 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
@@ -266,7 +266,7 @@
266 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"> 266 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
267 267
268 <ng-container *ngIf="isAdvancedCustomizationCollapsed"> 268 <ng-container *ngIf="isAdvancedCustomizationCollapsed">
269 <span class="glyphicon glyphicon-menu-down"></span> 269 <span class="chevron-down"></span>
270 270
271 <ng-container i18n> 271 <ng-container i18n>
272 More customization 272 More customization
@@ -274,7 +274,7 @@
274 </ng-container> 274 </ng-container>
275 275
276 <ng-container *ngIf="!isAdvancedCustomizationCollapsed"> 276 <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
277 <span class="glyphicon glyphicon-menu-up"></span> 277 <span class="chevron-up"></span>
278 278
279 <ng-container i18n> 279 <ng-container i18n>
280 Less customization 280 Less customization
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 6123bc517..611291981 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
@@ -49,10 +49,6 @@ my-input-text {
49 font-size: 16px; 49 font-size: 16px;
50 font-weight: $font-semibold; 50 font-weight: $font-semibold;
51 cursor: pointer; 51 cursor: pointer;
52
53 .glyphicon {
54 @include margin-right(5px);
55 }
56 } 52 }
57 53
58 .video-caption-block { 54 .video-caption-block {
diff --git a/client/src/app/shared/shared-tables/table-expander-icon.component.ts b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
index 3756b475a..66bbfe6fb 100644
--- a/client/src/app/shared/shared-tables/table-expander-icon.component.ts
+++ b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core'
4 selector: 'my-table-expander-icon', 4 selector: 'my-table-expander-icon',
5 template: ` 5 template: `
6<span class="expander"> 6<span class="expander">
7 <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i> 7 <i [ngClass]="expanded ? 'chevron-down' : 'chevron-right'"></i>
8</span>` 8</span>`
9}) 9})
10export class TableExpanderIconComponent { 10export class TableExpanderIconComponent {
diff --git a/client/src/app/shared/shared-tables/video-cell.component.scss b/client/src/app/shared/shared-tables/video-cell.component.scss
index 7efb61502..5d26b02ef 100644
--- a/client/src/app/shared/shared-tables/video-cell.component.scss
+++ b/client/src/app/shared/shared-tables/video-cell.component.scss
@@ -59,13 +59,6 @@
59 color: pvar(--mainForegroundColor); 59 color: pvar(--mainForegroundColor);
60 line-height: 1rem; 60 line-height: 1rem;
61 61
62 div .glyphicon {
63 @include margin-left(0.1rem);
64
65 font-size: 80%;
66 color: #808080;
67 }
68
69 div + div { 62 div + div {
70 color: var(--greyForegroundColor); 63 color: var(--greyForegroundColor);
71 font-size: 11px; 64 font-size: 11px;
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index e8990747a..1c7458b4b 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -120,7 +120,7 @@
120 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic" 120 [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
121 > 121 >
122 <ng-container *ngIf="isAdvancedCustomizationCollapsed"> 122 <ng-container *ngIf="isAdvancedCustomizationCollapsed">
123 <span class="glyphicon glyphicon-menu-down"></span> 123 <span class="chevron-down"></span>
124 124
125 <ng-container i18n> 125 <ng-container i18n>
126 Advanced 126 Advanced
@@ -128,7 +128,7 @@
128 </ng-container> 128 </ng-container>
129 129
130 <ng-container *ngIf="!isAdvancedCustomizationCollapsed"> 130 <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
131 <span class="glyphicon glyphicon-menu-up"></span> 131 <span class="chevron-up"></span>
132 132
133 <ng-container i18n> 133 <ng-container i18n>
134 Simple 134 Simple
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index bd42f4813..eb9c57b2f 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
@@ -17,10 +17,6 @@
17 .nav-tabs { 17 .nav-tabs {
18 margin-top: 10x; 18 margin-top: 10x;
19 } 19 }
20
21 .glyphicon {
22 @include margin-right(5px);
23 }
24} 20}
25 21
26.peertube-select-container.title-select { 22.peertube-select-container.title-select {
diff --git a/client/src/assets/images/feather/skip-back.svg b/client/src/assets/images/feather/skip-back.svg
new file mode 100644
index 000000000..672e94d5f
--- /dev/null
+++ b/client/src/assets/images/feather/skip-back.svg
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-back"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></svg> \ No newline at end of file
diff --git a/client/src/assets/images/feather/skip-forward.svg b/client/src/assets/images/feather/skip-forward.svg
new file mode 100644
index 000000000..f3fdac3ae
--- /dev/null
+++ b/client/src/assets/images/feather/skip-forward.svg
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-forward"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg> \ No newline at end of file
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 2ad1af23a..2aa743cf1 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,19 +1,15 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2
3@use 'sass:math'; 1@use 'sass:math';
4 2
5@use '_variables' as *; 3@use '_variables' as *;
6@use '_mixins' as *; 4@use '_mixins' as *;
5@use '_icons' as *;
7 6
8@use '_fonts'; 7@use '_fonts';
9 8
10@use './classes'; 9@use './classes';
11
12@use './custom-markup'; 10@use './custom-markup';
13
14@use './ng-select'; 11@use './ng-select';
15 12
16// Needs an import because we extends glyphicon icons in primeng
17@import './bootstrap'; 13@import './bootstrap';
18@import './primeng-custom'; 14@import './primeng-custom';
19 15
@@ -316,15 +312,27 @@ my-global-icon[iconName=external-link] {
316} 312}
317 313
318.chevron-down { 314.chevron-down {
319 @include chevron-down(0.55rem, 0.20em); 315 @include chevron-down(0.55rem, 0.15rem);
320 316
321 margin: 0 5px; 317 margin: 0 8px;
322} 318}
323 319
324.chevron-up { 320.chevron-up {
325 @include chevron-up(0.55rem, 0.20em); 321 @include chevron-up(0.55rem, 0.15rem);
322
323 margin: 0 8px;
324}
325
326.chevron-right {
327 @include chevron-right(0.55rem, 0.15rem);
328
329 margin: 0 8px;
330}
331
332.chevron-left {
333 @include chevron-left(0.55rem, 0.15rem);
326 334
327 margin: 0 5px; 335 margin: 0 8px;
328} 336}
329 337
330/* offsetTop for scrollToAnchor */ 338/* offsetTop for scrollToAnchor */
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 03b2e8b15..4d2fcf5b3 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -1,5 +1,3 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2
3@use '_variables' as *; 1@use '_variables' as *;
4@use '_mixins' as *; 2@use '_mixins' as *;
5 3
@@ -31,8 +29,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
31@import '~bootstrap/scss/helpers'; 29@import '~bootstrap/scss/helpers';
32@import '~bootstrap/scss/utilities/api'; 30@import '~bootstrap/scss/utilities/api';
33 31
34@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
35
36.flex-auto { 32.flex-auto {
37 flex: auto; 33 flex: auto;
38} 34}
diff --git a/client/src/sass/include/_icons.scss b/client/src/sass/include/_icons.scss
new file mode 100644
index 000000000..5d8a312db
--- /dev/null
+++ b/client/src/sass/include/_icons.scss
@@ -0,0 +1,58 @@
1@use '_variables' as *;
2
3@mixin chevron ($size, $border-width) {
4 border-style: solid;
5 border-width: $border-width $border-width 0 0;
6 content: '';
7 display: inline-block;
8 transform: rotate(-45deg);
9 height: $size;
10 width: $size;
11 position: relative;
12}
13
14@mixin chevron-right ($size, $border-width) {
15 @include chevron($size, $border-width);
16
17 left: 0;
18 transform: rotate(45deg);
19}
20
21@mixin chevron-down ($size, $border-width) {
22 @include chevron($size, $border-width);
23
24 bottom: 0.15em;
25 transform: rotate(135deg);
26}
27
28@mixin chevron-up ($size, $border-width) {
29 @include chevron($size, $border-width);
30
31 top: 0.15em;
32 transform: rotate(-45deg);
33}
34
35@mixin chevron-left ($size, $border-width) {
36 @include chevron($size, $border-width);
37
38 left: 0.25em;
39 transform: rotate(-135deg);
40}
41
42// ---------------------------------------------------------------------------
43
44@mixin arrow-up ($size) {
45 width: 0;
46 height: 0;
47 border-left: $size solid transparent;
48 border-right: $size solid transparent;
49 border-bottom: $size solid pvar(--mainForegroundColor);
50}
51
52@mixin arrow-down ($size) {
53 width: 0;
54 height: 0;
55 border-left: $size solid transparent;
56 border-right: $size solid transparent;
57 border-top: $size solid pvar(--mainForegroundColor);
58}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index da216b00f..22c3b2a2f 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -562,45 +562,6 @@
562 } 562 }
563} 563}
564 564
565@mixin chevron ($size, $border-width) {
566 border-style: solid;
567 border-width: $border-width $border-width 0 0;
568 content: '';
569 display: inline-block;
570 transform: rotate(-45deg);
571 height: $size;
572 width: $size;
573 position: relative;
574}
575
576@mixin chevron-right ($size, $border-width) {
577 @include chevron($size, $border-width);
578
579 left: 0;
580 transform: rotate(45deg);
581}
582
583@mixin chevron-down ($size, $border-width) {
584 @include chevron($size, $border-width);
585
586 bottom: 0.15em;
587 transform: rotate(135deg);
588}
589
590@mixin chevron-up ($size, $border-width) {
591 @include chevron($size, $border-width);
592
593 top: 0.15em;
594 transform: rotate(-45deg);
595}
596
597@mixin chevron-left ($size, $border-width) {
598 @include chevron($size, $border-width);
599
600 left: 0.25em;
601 transform: rotate(-135deg);
602}
603
604@mixin in-content-small-title { 565@mixin in-content-small-title {
605 text-transform: uppercase; 566 text-transform: uppercase;
606 color: pvar(--mainColor); 567 color: pvar(--mainColor);
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 8aa2c2ac3..d2346c126 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,5 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3@use '_icons' as *;
3@use './_player-variables' as *; 4@use './_player-variables' as *;
4 5
5$setting-transition-duration: 0.15s; 6$setting-transition-duration: 0.15s;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index ef117ae34..f5d7c7b00 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -1,5 +1,6 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3@use '_icons' as *;
3 4
4/* stylelint-disable */ 5/* stylelint-disable */
5@import '~primeng/resources/primeng.css'; 6@import '~primeng/resources/primeng.css';
@@ -495,14 +496,9 @@ body p-selectbutton.ng-dirty.ng-invalid .p-button {
495 border: 1px solid #a80000; 496 border: 1px solid #a80000;
496} 497}
497 498
498// data table customizations 499// ---------------------------------------------------------------------------
499 500// PeerTube customizations
500@mixin glyphicon-light { 501// ---------------------------------------------------------------------------
501 font-family: 'Glyphicons Halflings';
502 text-decoration: none !important;
503 color: pvar(--mainForegroundColor) !important;
504 font-display: swap;
505}
506 502
507p-table { 503p-table {
508 .p-datatable-header { 504 .p-datatable-header {
@@ -618,24 +614,20 @@ p-table {
618 &.p-highlight { 614 &.p-highlight {
619 background-color: pvar(--submenuBackgroundColor) !important; 615 background-color: pvar(--submenuBackgroundColor) !important;
620 616
621 .pi { 617 .pi-sort-amount-up-alt,
622 @extend .glyphicon !optional; 618 .pi-sort-amount-down {
623 619 display: inline-block;
624 color: #000 !important; 620 position: relative;
625 font-size: 11px !important; 621 top: -1px;
626 top: 0 !important; 622 color: pvar(--mainForegroundColor) !important;
627 623 }
628 &.pi-sort-amount-up-alt {
629 @extend .glyphicon-triangle-top !optional;
630
631 color: pvar(--mainForegroundColor) !important;
632 }
633 624
634 &.pi-sort-amount-down { 625 .pi-sort-amount-up-alt {
635 @extend .glyphicon-triangle-bottom !optional; 626 @include arrow-up(5px);
627 }
636 628
637 color: pvar(--mainForegroundColor) !important; 629 .pi-sort-amount-down {
638 } 630 @include arrow-down(5px);
639 } 631 }
640 } 632 }
641 } 633 }
@@ -693,12 +685,10 @@ p-table {
693 .p-paginator-prev, 685 .p-paginator-prev,
694 .p-paginator-next, 686 .p-paginator-next,
695 .p-paginator-last { 687 .p-paginator-last {
696 @include glyphicon-light;
697 padding: 5px 2px; 688 padding: 5px 2px;
698 height: auto; 689 height: 100%;
699 outline: none; 690 outline: none;
700 font-size: 13px; 691 color: pvar(--mainForegroundColor);
701 top: -1px;
702 692
703 &.focus-within, 693 &.focus-within,
704 &:focus { 694 &:focus {
@@ -710,23 +700,37 @@ p-table {
710 } 700 }
711 701
712 &.p-paginator-first { 702 &.p-paginator-first {
713 @extend .glyphicon-step-backward !optional; 703 .p-paginator-icon {
704 width: 18px;
705 height: 18px;
706 background: url('../assets/images/feather/skip-back.svg') no-repeat;
707 background-size: contain;
708 }
714 } 709 }
715 710
716 &.p-paginator-prev { 711 &.p-paginator-prev {
717 @extend .glyphicon-chevron-left !optional; 712 .p-paginator-icon {
713 @extend .chevron-left !optional;
714 }
718 715
719 @include margin-right(10px); 716 @include margin-right(10px);
720 } 717 }
721 718
722 &.p-paginator-next { 719 &.p-paginator-next {
723 @extend .glyphicon-chevron-right !optional; 720 .p-paginator-icon {
721 @extend .chevron-right !optional;
722 }
724 723
725 @include margin-left(10px); 724 @include margin-left(10px);
726 } 725 }
727 726
728 &.p-paginator-last { 727 &.p-paginator-last {
729 @extend .glyphicon-step-forward !optional; 728 .p-paginator-icon {
729 width: 18px;
730 height: 18px;
731 background: url('../assets/images/feather/skip-forward.svg') no-repeat;
732 background-size: contain;
733 }
730 } 734 }
731 } 735 }
732 736
@@ -810,8 +814,7 @@ p-calendar .p-datepicker {
810 } 814 }
811 815
812 .p-datepicker-next { 816 .p-datepicker-next {
813 @extend .glyphicon-chevron-right !optional; 817 @extend .chevron-right !optional;
814 @include glyphicon-light;
815 818
816 color: #000 !important; 819 color: #000 !important;
817 text-align: end; 820 text-align: end;
@@ -822,8 +825,7 @@ p-calendar .p-datepicker {
822 } 825 }
823 826
824 .p-datepicker-prev { 827 .p-datepicker-prev {
825 @extend .glyphicon-chevron-left !optional; 828 @extend .chevron-left !optional;
826 @include glyphicon-light;
827 829
828 color: #000 !important; 830 color: #000 !important;
829 text-align: start; 831 text-align: start;
@@ -837,15 +839,13 @@ p-calendar .p-datepicker {
837 .p-timepicker { 839 .p-timepicker {
838 840
839 .pi.pi-chevron-up { 841 .pi.pi-chevron-up {
840 @extend .glyphicon-chevron-up !optional; 842 @extend .chevron-up !optional;
841 @include glyphicon-light;
842 843
843 color: #000 !important; 844 color: #000 !important;
844 } 845 }
845 846
846 .pi.pi-chevron-down { 847 .pi.pi-chevron-down {
847 @extend .glyphicon-chevron-down !optional; 848 @extend .chevron-down !optional;
848 @include glyphicon-light;
849 849
850 color: #000 !important; 850 color: #000 !important;
851 } 851 }
@@ -901,15 +901,14 @@ p-toast {
901 min-width: 200px; 901 min-width: 200px;
902 902
903 .p-toast-icon-close { 903 .p-toast-icon-close {
904 font-family: "Glyphicons Halflings";
905 opacity: 0; 904 opacity: 0;
906 position: absolute; 905 position: absolute;
907 right: 5px; 906 right: 5px;
908 top: 5px; 907 top: 5px;
909 908 width: 18px;
910 &:after { 909 height: 18px;
911 content: "\e014"; 910 background: url('../assets/images/feather/x.svg') no-repeat;
912 } 911 background-size: contain;
913 } 912 }
914 913
915 &:hover .p-toast-icon-close { 914 &:hover .p-toast-icon-close {
@@ -927,22 +926,6 @@ p-toast {
927 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1); 926 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
928 overflow: hidden; 927 overflow: hidden;
929 928
930 &.p-toast-message-success my-global-icon {
931 color: #8BC34A !important;
932 }
933
934 &.p-toast-message-error my-global-icon {
935 color: #F44336 !important;
936 }
937
938 &.p-toast-message-warn my-global-icon {
939 color: #F1680D !important;
940 }
941
942 &.p-toast-message-info my-global-icon {
943 color: #03A9F4 !important;
944 }
945
946 .notification-block { 929 .notification-block {
947 display: flex; 930 display: flex;
948 align-items: center; 931 align-items: center;
@@ -962,13 +945,24 @@ p-toast {
962 margin-bottom: 0; 945 margin-bottom: 0;
963 } 946 }
964 } 947 }
965
966 .glyphicon {
967 font-size: 32px;
968 @include margin-right(5px);
969 }
970 } 948 }
971 } 949 }
950
951 .p-toast-message-success my-global-icon {
952 color: #8BC34A !important;
953 }
954
955 .p-toast-message-error my-global-icon {
956 color: #F44336 !important;
957 }
958
959 .p-toast-message-warn my-global-icon {
960 color: #F1680D !important;
961 }
962
963 .p-toast-message-info my-global-icon {
964 color: #03A9F4 !important;
965 }
972} 966}
973 967
974.p-selectbutton { 968.p-selectbutton {
diff --git a/client/yarn.lock b/client/yarn.lock
index dcec7b636..61d7c3cf2 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1456,11 +1456,6 @@
1456 "@jridgewell/resolve-uri" "^3.0.3" 1456 "@jridgewell/resolve-uri" "^3.0.3"
1457 "@jridgewell/sourcemap-codec" "^1.4.10" 1457 "@jridgewell/sourcemap-codec" "^1.4.10"
1458 1458
1459"@neos21/bootstrap3-glyphicons@^1.0.1":
1460 version "1.0.7"
1461 resolved "https://registry.yarnpkg.com/@neos21/bootstrap3-glyphicons/-/bootstrap3-glyphicons-1.0.7.tgz#b3f62f0dc54b383afcc26d44fcb3bb0ca1bd4de2"
1462 integrity sha512-JfvPdx8W2+kVhW+8fj2kIJNS0tesU21hrWF7TBHtYDHpVfcFGU/yn3Eh02sJiNfZABkutP3oU0Ftw8LGF43Jng==
1463
1464"@ng-bootstrap/ng-bootstrap@^12.1.2": 1459"@ng-bootstrap/ng-bootstrap@^12.1.2":
1465 version "12.1.2" 1460 version "12.1.2"
1466 resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-12.1.2.tgz#19f21313234fe21090ba50a7721046ed5d9928e1" 1461 resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-12.1.2.tgz#19f21313234fe21090ba50a7721046ed5d9928e1"