aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html4
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html8
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html8
-rw-r--r--client/src/app/+admin/overview/users/user-list/user-list.component.html2
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html2
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss2
-rw-r--r--client/src/app/+my-library/my-follows/my-followers.component.html2
-rw-r--r--client/src/app/+my-library/my-ownership/my-ownership.component.html4
-rw-r--r--client/src/app/+page-not-found/page-not-found.component.html10
-rw-r--r--client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss2
-rw-r--r--client/src/app/header/search-typeahead.component.html14
-rw-r--r--client/src/app/menu/menu.component.html6
-rw-r--r--client/src/app/shared/shared-abuse-list/abuse-details.component.html10
-rw-r--r--client/src/app/shared/shared-forms/peertube-checkbox.component.html2
-rw-r--r--client/src/app/shared/shared-forms/select/select-options.component.html2
-rw-r--r--client/src/app/shared/shared-forms/select/select-shared.component.scss2
-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.scss1
-rw-r--r--client/src/app/shared/shared-moderation/account-blocklist.component.html2
-rw-r--r--client/src/app/shared/shared-tables/video-cell.component.html2
-rw-r--r--client/src/app/shared/shared-video-miniature/video-filters-header.component.html2
-rw-r--r--client/src/sass/application.scss8
-rw-r--r--client/src/sass/bootstrap.scss11
-rw-r--r--client/src/sass/classes.scss4
-rw-r--r--client/src/sass/include/_mixins.scss8
-rw-r--r--client/src/sass/include/_variables.scss4
-rw-r--r--client/src/sass/ng-select.scss5
27 files changed, 77 insertions, 52 deletions
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index 37989cb59..3673a805b 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -186,7 +186,7 @@
186 186
187 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div> 187 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
188 188
189 <small i18n *ngIf="hasUnlimitedSignup()" class="text-muted">Signup won't be limited to a fixed number of users.</small> 189 <small i18n *ngIf="hasUnlimitedSignup()" class="muted">Signup won't be limited to a fixed number of users.</small>
190 </div> 190 </div>
191 191
192 <div [ngClass]="getDisabledSignupClass()" class="mt-3"> 192 <div [ngClass]="getDisabledSignupClass()" class="mt-3">
@@ -253,7 +253,7 @@
253 253
254 <div class="form-group mt-4"> 254 <div class="form-group mt-4">
255 <label i18n for="importConcurrency">Import jobs concurrency</label> 255 <label i18n for="importConcurrency">Import jobs concurrency</label>
256 <span i18n class="text-muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span> 256 <span i18n class="muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
257 257
258 <div class="number-with-unit"> 258 <div class="number-with-unit">
259 <input type="number" name="importConcurrency" formControlName="concurrency" /> 259 <input type="number" name="importConcurrency" formControlName="concurrency" />
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
index 8d6a4ce19..b29651437 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
@@ -50,7 +50,7 @@
50 50
51 <div class="form-group" [ngClass]="getDisabledLiveClass()"> 51 <div class="form-group" [ngClass]="getDisabledLiveClass()">
52 <label i18n for="liveMaxInstanceLives"> 52 <label i18n for="liveMaxInstanceLives">
53 Max simultaneous lives created on your instance <span class="text-muted">(-1 for "unlimited")</span> 53 Max simultaneous lives created on your instance <span class="muted">(-1 for "unlimited")</span>
54 </label> 54 </label>
55 55
56 <div class="number-with-unit"> 56 <div class="number-with-unit">
@@ -63,7 +63,7 @@
63 63
64 <div class="form-group" [ngClass]="getDisabledLiveClass()"> 64 <div class="form-group" [ngClass]="getDisabledLiveClass()">
65 <label i18n for="liveMaxUserLives"> 65 <label i18n for="liveMaxUserLives">
66 Max simultaneous lives created per user <span class="text-muted">(-1 for "unlimited")</span> 66 Max simultaneous lives created per user <span class="muted">(-1 for "unlimited")</span>
67 </label> 67 </label>
68 68
69 <div class="number-with-unit"> 69 <div class="number-with-unit">
@@ -139,7 +139,7 @@
139 <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()"> 139 <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
140 <label i18n for="liveTranscodingThreads">Live transcoding threads</label> 140 <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
141 141
142 <span class="text-muted ml-1"> 142 <span class="muted ml-1">
143 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n> 143 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
144 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding 144 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
145 </ng-container> 145 </ng-container>
@@ -160,7 +160,7 @@
160 160
161 <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()"> 161 <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()">
162 <label i18n for="liveTranscodingProfile">Live transcoding profile</label> 162 <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
163 <span class="text-muted ml-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span> 163 <span class="muted ml-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
164 164
165 <my-select-options 165 <my-select-options
166 id="liveTranscodingProfile" 166 id="liveTranscodingProfile"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index 2be855756..52d6c79f6 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -128,7 +128,7 @@
128 </my-peertube-checkbox> 128 </my-peertube-checkbox>
129 </div> 129 </div>
130 130
131 <span class="mb-2 text-muted" i18n> 131 <span class="mb-2 muted" i18n>
132 The original file resolution will be the default target if no option is selected. 132 The original file resolution will be the default target if no option is selected.
133 </span> 133 </span>
134 </ng-container> 134 </ng-container>
@@ -142,7 +142,7 @@
142 142
143 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()"> 143 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
144 <label i18n for="transcodingThreads">Transcoding threads</label> 144 <label i18n for="transcodingThreads">Transcoding threads</label>
145 <span class="text-muted ml-1"> 145 <span class="muted ml-1">
146 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n> 146 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
147 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding 147 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
148 </ng-container> 148 </ng-container>
@@ -164,7 +164,7 @@
164 164
165 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()"> 165 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
166 <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label> 166 <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
167 <span class="text-muted ml-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span> 167 <span class="muted ml-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
168 168
169 <div class="number-with-unit"> 169 <div class="number-with-unit">
170 <input type="number" name="transcodingConcurrency" formControlName="concurrency" /> 170 <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
@@ -176,7 +176,7 @@
176 176
177 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()"> 177 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
178 <label i18n for="transcodingProfile">Transcoding profile</label> 178 <label i18n for="transcodingProfile">Transcoding profile</label>
179 <span class="text-muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span> 179 <span class="muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
180 180
181 <my-select-options 181 <my-select-options
182 id="transcodingProfile" 182 id="transcodingProfile"
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index 0662e3ac3..30d10e3cf 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@@ -96,7 +96,7 @@
96 <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar> 96 <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar>
97 <div> 97 <div>
98 <span class="user-table-primary-text">{{ user.account.displayName }}</span> 98 <span class="user-table-primary-text">{{ user.account.displayName }}</span>
99 <span class="text-muted">{{ user.username }}</span> 99 <span class="muted">{{ user.username }}</span>
100 </div> 100 </div>
101 </div> 101 </div>
102 </a> 102 </a>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index eb2a48e15..ae5f25cff 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -8,7 +8,7 @@
8 type="text" id="username" class="form-control" 8 type="text" id="username" class="form-control"
9 formControlName="username" readonly 9 formControlName="username" readonly
10 > 10 >
11 <div class="text-muted" i18n> 11 <div class="muted" i18n>
12 People can find you using @{{ user.username }}@{{ instanceHost }} 12 People can find you using @{{ user.username }}@{{ instanceHost }}
13 </div> 13 </div>
14 </div> 14 </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index a5823fbc4..cbac81d01 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -10,7 +10,7 @@ label {
10 margin-bottom: 15px; 10 margin-bottom: 15px;
11} 11}
12 12
13input#username + .text-muted { 13input#username + .muted {
14 margin-top: 5px; 14 margin-top: 5px;
15} 15}
16 16
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
index 4303695a3..a8a3da863 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.html
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -22,7 +22,7 @@
22 <span class="glyphicon glyphicon-new-window"></span> 22 <span class="glyphicon glyphicon-new-window"></span>
23 </a> 23 </a>
24 24
25 <div class="text-muted"> 25 <div class="muted">
26 <ng-container *ngIf="isFollowingAccount(follow)" i18n>Is following all your channels</ng-container> 26 <ng-container *ngIf="isFollowingAccount(follow)" i18n>Is following all your channels</ng-container>
27 <ng-container *ngIf="!isFollowingAccount(follow)" i18n>Is following your channel {{ follow.following.name }}</ng-container> 27 <ng-container *ngIf="!isFollowingAccount(follow)" i18n>Is following your channel {{ follow.following.name }}</ng-container>
28 </div> 28 </div>
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index cb032505e..c29c71c0a 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -40,7 +40,7 @@
40 <my-actor-avatar [account]="videoChangeOwnership.initiatorAccount" size="32"></my-actor-avatar> 40 <my-actor-avatar [account]="videoChangeOwnership.initiatorAccount" size="32"></my-actor-avatar>
41 <div> 41 <div>
42 {{ videoChangeOwnership.initiatorAccount.displayName }} 42 {{ videoChangeOwnership.initiatorAccount.displayName }}
43 <span class="text-muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span> 43 <span class="muted">{{ videoChangeOwnership.initiatorAccount.nameWithHost }}</span>
44 </div> 44 </div>
45 </div> 45 </div>
46 </a> 46 </a>
@@ -56,7 +56,7 @@
56 <div> 56 <div>
57 {{ videoChangeOwnership.video.name }} 57 {{ videoChangeOwnership.video.name }}
58 </div> 58 </div>
59 <div class="text-muted">by {{ videoChangeOwnership.video.channel?.displayName }} </div> 59 <div class="muted">by {{ videoChangeOwnership.video.channel?.displayName }} </div>
60 </div> 60 </div>
61 </div> 61 </div>
62 </a> 62 </a>
diff --git a/client/src/app/+page-not-found/page-not-found.component.html b/client/src/app/+page-not-found/page-not-found.component.html
index 1e25e4495..0333f9550 100644
--- a/client/src/app/+page-not-found/page-not-found.component.html
+++ b/client/src/app/+page-not-found/page-not-found.component.html
@@ -1,14 +1,14 @@
1<div class="root"> 1<div class="root">
2 <div *ngIf="status !== 403 && status !== 418" class="box"> 2 <div *ngIf="status !== 403 && status !== 418" class="box">
3 <strong>{{ status }}.</strong> 3 <strong>{{ status }}.</strong>
4 <span class="ml-1 text-muted" i18n>That's an error.</span> 4 <span class="ml-1 muted" i18n>That's an error.</span>
5 5
6 <div class="text mt-4"> 6 <div class="text mt-4">
7 <ng-container *ngIf="type === 'video'" i18n>We couldn't find any video tied to the URL {{ pathname }} you were looking for.</ng-container> 7 <ng-container *ngIf="type === 'video'" i18n>We couldn't find any video tied to the URL {{ pathname }} you were looking for.</ng-container>
8 <ng-container *ngIf="type !== 'video'" i18n>We couldn't find any resource tied to the URL {{ pathname }} you were looking for.</ng-container> 8 <ng-container *ngIf="type !== 'video'" i18n>We couldn't find any resource tied to the URL {{ pathname }} you were looking for.</ng-container>
9 </div> 9 </div>
10 10
11 <div class="text-muted mt-4"> 11 <div class="muted mt-4">
12 <span i18n="Possible reasons preceding a list of reasons a `Not Found` error page may occur">Possible reasons:</span> 12 <span i18n="Possible reasons preceding a list of reasons a `Not Found` error page may occur">Possible reasons:</span>
13 13
14 <ul> 14 <ul>
@@ -24,7 +24,7 @@
24 24
25 <div *ngIf="status === 403" class="box"> 25 <div *ngIf="status === 403" class="box">
26 <strong>{{ status }}.</strong> 26 <strong>{{ status }}.</strong>
27 <span class="ml-1 text-muted" i18n>You are not authorized here.</span> 27 <span class="ml-1 muted" i18n>You are not authorized here.</span>
28 28
29 <div class="text mt-4"> 29 <div class="text mt-4">
30 <ng-container *ngIf="type === 'video'" i18n>You might need to check your account is allowed by the video or instance owner.</ng-container> 30 <ng-container *ngIf="type === 'video'" i18n>You might need to check your account is allowed by the video or instance owner.</ng-container>
@@ -34,12 +34,12 @@
34 34
35 <div *ngIf="status === 418" class="box"> 35 <div *ngIf="status === 418" class="box">
36 <strong>{{ status }}.</strong> 36 <strong>{{ status }}.</strong>
37 <span class="ml-1 text-muted">I'm a teapot.</span> 37 <span class="ml-1 muted">I'm a teapot.</span>
38 38
39 <div class="text mt-4" i18n="Description of a tea flavour, keeping the 'requested entity body' as a technical expression referring to a web request"> 39 <div class="text mt-4" i18n="Description of a tea flavour, keeping the 'requested entity body' as a technical expression referring to a web request">
40 The requested entity body blends sweet bits with a mellow earthiness. 40 The requested entity body blends sweet bits with a mellow earthiness.
41 </div> 41 </div>
42 <div class="text-muted" i18n="This is about Sepia's tea">Sepia seems to like it.</div> 42 <div class="muted" i18n="This is about Sepia's tea">Sepia seems to like it.</div>
43 </div> 43 </div>
44 44
45 <img src='/client/assets/images/mascot/{{ getMascotName() }}.svg' alt='{{ status }} mascot'> 45 <img src='/client/assets/images/mascot/{{ getMascotName() }}.svg' alt='{{ status }} mascot'>
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
index fc67ac65a..5c3453e4b 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
@@ -14,7 +14,7 @@
14 14
15 .playlist-info { 15 .playlist-info {
16 padding: 5px 30px; 16 padding: 5px 30px;
17 background-color: #e4e4e4; 17 background-color: pvar(--greyBackgroundColor);
18 18
19 .playlist-display-name { 19 .playlist-display-name {
20 font-size: 18px; 20 font-size: 18px;
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index 9b21d3f86..7a9b6c51f 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -24,21 +24,21 @@
24 <div *ngIf="showSearchGlobalHelp()" id="typeahead-help" class="overflow-hidden"> 24 <div *ngIf="showSearchGlobalHelp()" id="typeahead-help" class="overflow-hidden">
25 <div class="d-flex justify-content-between"> 25 <div class="d-flex justify-content-between">
26 <label class="small-title" i18n>GLOBAL SEARCH</label> 26 <label class="small-title" i18n>GLOBAL SEARCH</label>
27 <div class="advanced-search-status text-muted"> 27 <div class="advanced-search-status muted">
28 <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span> 28 <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
29 <i class="glyphicon glyphicon-globe"></i> 29 <i class="glyphicon glyphicon-globe"></i>
30 </div> 30 </div>
31 </div> 31 </div>
32 <div class="text-muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</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>
33 </div> 33 </div>
34 34
35 <!-- search instructions, when search input is empty --> 35 <!-- search instructions, when search input is empty -->
36 <div *ngIf="areInstructionsDisplayed()" id="typeahead-instructions" class="overflow-hidden"> 36 <div *ngIf="areInstructionsDisplayed()" id="typeahead-instructions" class="overflow-hidden">
37 <span class="text-muted" i18n>Your query will be matched against video names or descriptions, channel names.</span> 37 <span class="muted" i18n>Your query will be matched against video names or descriptions, channel names.</span>
38 <div class="d-flex justify-content-between mt-3"> 38 <div class="d-flex justify-content-between mt-3">
39 <label class="small-title" i18n>ADVANCED SEARCH</label> 39 <label class="small-title" i18n>ADVANCED SEARCH</label>
40 <div class="advanced-search-status c-help"> 40 <div class="advanced-search-status c-help">
41 <span [ngClass]="canSearchAnyURI ? 'text-success' : 'text-muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows."> 41 <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
42 <span *ngIf="canSearchAnyURI()" class="mr-1" i18n>any instance</span> 42 <span *ngIf="canSearchAnyURI()" class="mr-1" i18n>any instance</span>
43 <span *ngIf="!canSearchAnyURI()" class="mr-1" i18n>only followed instances</span> 43 <span *ngIf="!canSearchAnyURI()" class="mr-1" i18n>only followed instances</span>
44 <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i> 44 <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
@@ -47,13 +47,13 @@
47 </div> 47 </div>
48 <ul> 48 <ul>
49 <li> 49 <li>
50 <em>@channel_id@domain</em> <span class="flex-auto text-muted" i18n>will list the matching channel</span> 50 <em>@channel_id@domain</em> <span class="flex-auto muted" i18n>will list the matching channel</span>
51 </li> 51 </li>
52 <li> 52 <li>
53 <em>URL</em> <span class="text-muted" i18n>will list the matching channel</span> 53 <em>URL</em> <span class="muted" i18n>will list the matching channel</span>
54 </li> 54 </li>
55 <li> 55 <li>
56 <em>UUID</em> <span class="text-muted" i18n>will list the matching video</span> 56 <em>UUID</em> <span class="muted" i18n>will list the matching video</span>
57 </li> 57 </li>
58 </ul> 58 </ul>
59 </div> 59 </div>
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 5b9e821a7..0a364dcc8 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -36,14 +36,14 @@
36 > 36 >
37 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon> 37 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
38 <span i18n>Interface:</span> 38 <span i18n>Interface:</span>
39 <span class="ml-auto text-muted">{{ currentInterfaceLanguage }}</span> 39 <span class="ml-auto muted">{{ currentInterfaceLanguage }}</span>
40 </a> 40 </a>
41 41
42 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles" 42 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
43 #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)"> 43 #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
44 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon> 44 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
45 <span i18n>Videos:</span> 45 <span i18n>Videos:</span>
46 <span class="ml-auto text-muted">{{ videoLanguages.join(', ') }}</span> 46 <span class="ml-auto muted">{{ videoLanguages.join(', ') }}</span>
47 </a> 47 </a>
48 48
49 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings" 49 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
@@ -53,7 +53,7 @@
53 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon> 53 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon>
54 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon> 54 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon>
55 <span i18n>Sensitive:</span> 55 <span i18n>Sensitive:</span>
56 <span class="ml-auto text-muted">{{ nsfwPolicy }}</span> 56 <span class="ml-auto muted">{{ nsfwPolicy }}</span>
57 </a> 57 </a>
58 58
59 <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()"> 59 <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
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 a1a4586f0..986de15ed 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
@@ -12,12 +12,12 @@
12 > 12 >
13 <my-actor-avatar size="18" [account]="abuse.reporterAccount"></my-actor-avatar> 13 <my-actor-avatar size="18" [account]="abuse.reporterAccount"></my-actor-avatar>
14 <div> 14 <div>
15 <span class="text-muted">{{ abuse.reporterAccount.nameWithHost }}</span> 15 <span class="muted">{{ abuse.reporterAccount.nameWithHost }}</span>
16 </div> 16 </div>
17 </a> 17 </a>
18 18
19 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }" 19 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
20 class="ml-auto text-muted abuse-details-links" i18n 20 class="ml-auto muted abuse-details-links" i18n
21 > 21 >
22 {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span> 22 {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
23 </a> 23 </a>
@@ -32,12 +32,12 @@
32 > 32 >
33 <my-actor-avatar size="18" [account]="abuse.flaggedAccount"></my-actor-avatar> 33 <my-actor-avatar size="18" [account]="abuse.flaggedAccount"></my-actor-avatar>
34 <div> 34 <div>
35 <span class="text-muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span> 35 <span class="muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
36 </div> 36 </div>
37 </a> 37 </a>
38 38
39 <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }" 39 <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
40 class="ml-auto text-muted abuse-details-links" i18n 40 class="ml-auto muted abuse-details-links" i18n
41 > 41 >
42 {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span> 42 {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
43 </a> 43 </a>
@@ -53,7 +53,7 @@
53 <div class="mt-3 d-flex"> 53 <div class="mt-3 d-flex">
54 <span class="moderation-expanded-label"> 54 <span class="moderation-expanded-label">
55 <ng-container i18n>Report</ng-container> 55 <ng-container i18n>Report</ng-container>
56 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id }" class="ml-1 text-muted">#{{ abuse.id }}</a> 56 <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id }" class="ml-1 muted">#{{ abuse.id }}</a>
57 </span> 57 </span>
58 <span class="moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span> 58 <span class="moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
59 </div> 59 </div>
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index 9d0402224..c679e1403 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -34,7 +34,7 @@
34 </div> 34 </div>
35 35
36 <div class="ml-4 d-flex flex-column"> 36 <div class="ml-4 d-flex flex-column">
37 <small class="wrapper mt-2 text-muted"> 37 <small class="wrapper mt-2 muted">
38 <ng-content select="description"></ng-content> 38 <ng-content select="description"></ng-content>
39 </small> 39 </small>
40 40
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.html b/client/src/app/shared/shared-forms/select/select-options.component.html
index 83c7de9f5..0ccc23717 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.html
+++ b/client/src/app/shared/shared-forms/select/select-options.component.html
@@ -16,7 +16,7 @@
16 {{ item.label }} 16 {{ item.label }}
17 <ng-container *ngIf="item.description"> 17 <ng-container *ngIf="item.description">
18 <br> 18 <br>
19 <span [title]="item.description" class="text-muted">{{ item.description }}</span> 19 <span [title]="item.description" class="muted">{{ item.description }}</span>
20 </ng-container> 20 </ng-container>
21 </ng-template> 21 </ng-template>
22</ng-select> 22</ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-shared.component.scss b/client/src/app/shared/shared-forms/select/select-shared.component.scss
index f7b001fe8..4de43077c 100644
--- a/client/src/app/shared/shared-forms/select/select-shared.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss
@@ -3,7 +3,7 @@
3 3
4$form-base-input-width: auto; 4$form-base-input-width: auto;
5 5
6.text-muted { 6.muted {
7 font-size: 90%; 7 font-size: 90%;
8} 8}
9 9
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 c465b6903..10dae68f0 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
@@ -20,7 +20,7 @@
20 20
21 <div class="d-flex flex-column"> 21 <div class="d-flex flex-column">
22 <span i18n>{{ action.label }}</span> 22 <span i18n>{{ action.label }}</span>
23 <small class="text-muted" *ngIf="action.description">{{ action.description }}</small> 23 <small class="muted" *ngIf="action.description">{{ action.description }}</small>
24 </div> 24 </div>
25 </ng-template> 25 </ng-template>
26 26
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
index b456eeb95..fe65d6e7e 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.scss
@@ -60,7 +60,6 @@
60 .dropdown-item { 60 .dropdown-item {
61 display: flex; 61 display: flex;
62 cursor: pointer; 62 cursor: pointer;
63 color: #000 !important;
64 63
65 &.with-icon { 64 &.with-icon {
66 @include dropdown-with-icon-item; 65 @include dropdown-with-icon-item;
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 0143194e9..a4f81d824 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -36,7 +36,7 @@
36 <my-actor-avatar [account]="accountBlock.blockedAccount" size="32"></my-actor-avatar> 36 <my-actor-avatar [account]="accountBlock.blockedAccount" size="32"></my-actor-avatar>
37 <div> 37 <div>
38 {{ accountBlock.blockedAccount.displayName }} 38 {{ accountBlock.blockedAccount.displayName }}
39 <span class="text-muted">{{ accountBlock.blockedAccount.nameWithHost }}</span> 39 <span class="muted">{{ accountBlock.blockedAccount.nameWithHost }}</span>
40 </div> 40 </div>
41 </div> 41 </div>
42 </a> 42 </a>
diff --git a/client/src/app/shared/shared-tables/video-cell.component.html b/client/src/app/shared/shared-tables/video-cell.component.html
index fb7d852ab..ea432b70e 100644
--- a/client/src/app/shared/shared-tables/video-cell.component.html
+++ b/client/src/app/shared/shared-tables/video-cell.component.html
@@ -13,7 +13,7 @@
13 {{ video.name }} 13 {{ video.name }}
14 </div> 14 </div>
15 15
16 <div class="text-muted">by {{ video.channel?.displayName }} on {{ video.channel?.host }} </div> 16 <div class="muted">by {{ video.channel?.displayName }} on {{ video.channel?.host }} </div>
17 </div> 17 </div>
18 </div> 18 </div>
19</a> 19</a>
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
index 9d6ef0360..7f5692dd4 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@@ -1,5 +1,5 @@
1<ng-template #updateSettings let-fragment> 1<ng-template #updateSettings let-fragment>
2 <div class="label-description text-muted" i18n> 2 <div class="label-description muted" i18n>
3 Update 3 Update
4 <a routerLink="/my-account/settings" [fragment]="fragment"> 4 <a routerLink="/my-account/settings" [fragment]="fragment">
5 <span (click)="onAccountSettingsClick($event)">your settings</span> 5 <span (click)="onAccountSettingsClick($event)">your settings</span>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 9f64f7426..81bbfa43a 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -28,13 +28,18 @@ body {
28 --mainColor: #{$main-color}; 28 --mainColor: #{$main-color};
29 --mainColorLighter: #{$main-color-lighter}; 29 --mainColorLighter: #{$main-color-lighter};
30 --mainColorLightest: #{$main-color-lightest}; 30 --mainColorLightest: #{$main-color-lightest};
31
31 --mainHoverColor: #{$main-hover-color}; 32 --mainHoverColor: #{$main-hover-color};
33 --mainBackgroundHoverColor: #{$main-background-hover-color};
34
32 --mainBackgroundColor: #{$bg-color}; 35 --mainBackgroundColor: #{$bg-color};
33 --mainForegroundColor: #{$fg-color}; 36 --mainForegroundColor: #{$fg-color};
37
34 --secondaryColor: #{$secondary-color}; 38 --secondaryColor: #{$secondary-color};
35 39
36 --greyForegroundColor: #{$grey-foreground-color}; 40 --greyForegroundColor: #{$grey-foreground-color};
37 --greyBackgroundColor: #{$grey-background-color}; 41 --greyBackgroundColor: #{$grey-background-color};
42 --greySecondaryBackgroundColor: #{$grey-background-hover-color};
38 43
39 --menuBackgroundColor: #{$menu-background}; 44 --menuBackgroundColor: #{$menu-background};
40 --menuForegroundColor: #{$menu-color}; 45 --menuForegroundColor: #{$menu-color};
@@ -51,6 +56,7 @@ body {
51 --markdownTextareaBackgroundColor: #{$markdown-textarea-background-color}; 56 --markdownTextareaBackgroundColor: #{$markdown-textarea-background-color};
52 57
53 --actionButtonColor: #{$grey-foreground-color}; 58 --actionButtonColor: #{$grey-foreground-color};
59
54 --supportButtonBackgroundColor: #{transparent}; 60 --supportButtonBackgroundColor: #{transparent};
55 --supportButtonColor: #{pvar(--actionButtonColor)}; 61 --supportButtonColor: #{pvar(--actionButtonColor)};
56 --supportButtonHeartColor: #{$support-button-heart}; 62 --supportButtonHeartColor: #{$support-button-heart};
@@ -312,7 +318,7 @@ table {
312} 318}
313 319
314.form-group-description { 320.form-group-description {
315 @extend .text-muted; 321 @extend .muted !optional;
316 322
317 font-size: 90%; 323 font-size: 90%;
318 margin-top: 10px; 324 margin-top: 10px;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 432e23e92..d6af7f485 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -89,6 +89,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
89 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); 89 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
90 font-size: 15px; 90 font-size: 15px;
91 91
92 color: pvar(--mainForegroundColor);
93 background-color: pvar(--mainBackgroundColor);
94
92 .dropdown-header { 95 .dropdown-header {
93 @include padding-left(1rem); 96 @include padding-left(1rem);
94 } 97 }
@@ -96,14 +99,19 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
96 .dropdown-item { 99 .dropdown-item {
97 padding: 3px 15px; 100 padding: 3px 15px;
98 101
102 color: pvar(--mainForegroundColor);
103 background-color: pvar(--mainBackgroundColor);
104
99 &.active { 105 &.active {
100 color: pvar(--mainBackgroundColor) !important; 106 color: pvar(--mainBackgroundColor) !important;
101 background-color: pvar(--mainHoverColor); 107 background-color: pvar(--mainHoverColor);
102 opacity: 0.9; 108 opacity: 0.9;
103 } 109 }
104 110
105 &:active { 111 a:active,
112 &:hover {
106 color: pvar(--mainForegroundColor) !important; 113 color: pvar(--mainForegroundColor) !important;
114 background-color: pvar(--mainBackgroundHoverColor);
107 } 115 }
108 116
109 &::after { 117 &::after {
@@ -117,7 +125,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
117 125
118 a { 126 a {
119 @include disable-default-a-behaviour; 127 @include disable-default-a-behaviour;
120 color: #000 !important;
121 } 128 }
122} 129}
123 130
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
index 1cd7a6058..90cdcf3ed 100644
--- a/client/src/sass/classes.scss
+++ b/client/src/sass/classes.scss
@@ -28,3 +28,7 @@
28.peertube-radio-container { 28.peertube-radio-container {
29 @include peertube-radio-container; 29 @include peertube-radio-container;
30} 30}
31
32.muted {
33 color: pvar(--greyForegroundColor) !important;
34}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 291bff6db..8de23e64d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -124,8 +124,8 @@
124@mixin peertube-textarea ($width, $height) { 124@mixin peertube-textarea ($width, $height) {
125 @include peertube-input-text($width); 125 @include peertube-input-text($width);
126 126
127 color: pvar(--textareaForegroundColor); 127 color: pvar(--textareaForegroundColor) !important;
128 background-color: pvar(--textareaBackgroundColor); 128 background-color: pvar(--textareaBackgroundColor) !important;
129 height: $height; 129 height: $height;
130 padding: 5px 15px; 130 padding: 5px 15px;
131 font-size: 15px; 131 font-size: 15px;
@@ -207,7 +207,7 @@
207@mixin grey-button { 207@mixin grey-button {
208 @include button-focus($grey-button-outline-color); 208 @include button-focus($grey-button-outline-color);
209 209
210 background-color: $grey-background-color; 210 background-color: pvar(--greyBackgroundColor);
211 color: pvar(--greyForegroundColor); 211 color: pvar(--greyForegroundColor);
212 212
213 &:hover, 213 &:hover,
@@ -216,7 +216,7 @@
216 &[disabled], 216 &[disabled],
217 &.disabled { 217 &.disabled {
218 color: pvar(--greyForegroundColor); 218 color: pvar(--greyForegroundColor);
219 background-color: $grey-background-hover-color; 219 background-color: pvar(--greySecondaryBackgroundColor);
220 } 220 }
221 221
222 &[disabled], 222 &[disabled],
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index f68f4e18d..fd1b137dc 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -18,7 +18,9 @@ $grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
18$main-color: hsl(24, 90%, 50%); 18$main-color: hsl(24, 90%, 50%);
19$main-color-lighter: lighten($main-color, 10%); 19$main-color-lighter: lighten($main-color, 10%);
20$main-color-lightest: lighten($main-color, 40%); 20$main-color-lightest: lighten($main-color, 40%);
21
21$main-hover-color: lighten($main-color, 5%); 22$main-hover-color: lighten($main-color, 5%);
23$main-background-hover-color: #e9ecef;
22 24
23$secondary-color: hsl(187, 77%, 34%); 25$secondary-color: hsl(187, 77%, 34%);
24 26
@@ -109,6 +111,7 @@ $variables: (
109 --mainColorLightest: var(--mainColorLightest), 111 --mainColorLightest: var(--mainColorLightest),
110 112
111 --mainHoverColor: var(--mainHoverColor), 113 --mainHoverColor: var(--mainHoverColor),
114 --mainBackgroundHoverColor: var(--mainBackgroundHoverColor),
112 115
113 --mainBackgroundColor: var(--mainBackgroundColor), 116 --mainBackgroundColor: var(--mainBackgroundColor),
114 --mainForegroundColor: var(--mainForegroundColor), 117 --mainForegroundColor: var(--mainForegroundColor),
@@ -117,6 +120,7 @@ $variables: (
117 120
118 --greyForegroundColor: var(--greyForegroundColor), 121 --greyForegroundColor: var(--greyForegroundColor),
119 --greyBackgroundColor: var(--greyBackgroundColor), 122 --greyBackgroundColor: var(--greyBackgroundColor),
123 --greySecondaryBackgroundColor: var(--greySecondaryBackgroundColor),
120 124
121 --menuBackgroundColor: var(--menuBackgroundColor), 125 --menuBackgroundColor: var(--menuBackgroundColor),
122 --menuForegroundColor: var(--menuForegroundColor), 126 --menuForegroundColor: var(--menuForegroundColor),
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index df0e0aaf4..f4c908da3 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -27,6 +27,11 @@ $ng-select-value-font-size: 15px;
27 } 27 }
28 } 28 }
29 29
30 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
31 color: pvar(--mainForegroundColor);
32 background-color: pvar(--mainBackgroundColor);
33 }
34
30 .ng-select-container { 35 .ng-select-container {
31 background-color: pvar(--inputBackgroundColor); 36 background-color: pvar(--inputBackgroundColor);
32 } 37 }