aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-04-02 11:39:14 +0200
committerRigel Kent <sendmemail@rigelk.eu>2020-04-02 11:39:14 +0200
commita6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634 (patch)
treed8b27f30741ae3c9a2a72c68210644c16cd8d9b3
parent21973012ab06a93dd901821dbbe078eb793bac4d (diff)
downloadPeerTube-a6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634.tar.gz
PeerTube-a6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634.tar.zst
PeerTube-a6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634.zip
Use form-control to display box-shadow on form inputs/selects upon focus
-rw-r--r--client/src/app/+about/about-instance/contact-admin-modal.component.html15
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html38
-rw-r--r--client/src/app/+admin/follows/following-add/following-add.component.scss7
-rw-r--r--client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html5
-rw-r--r--client/src/app/+admin/users/user-edit/user-edit.component.html6
-rw-r--r--client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html7
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html6
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html2
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html2
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html6
-rw-r--r--client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html7
-rw-r--r--client/src/app/+signup/+register/register-step-user.component.html6
-rw-r--r--client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html2
-rw-r--r--client/src/app/login/login.component.html9
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.html5
-rw-r--r--client/src/app/modal/welcome-modal.component.html12
-rw-r--r--client/src/app/search/search-filters.component.html8
-rw-r--r--client/src/app/search/search-filters.component.scss63
-rw-r--r--client/src/app/shared/confirm/confirm.component.html8
-rw-r--r--client/src/app/shared/confirm/confirm.component.ts1
-rw-r--r--client/src/app/shared/forms/markdown-textarea.component.html3
-rw-r--r--client/src/app/shared/moderation/user-ban-modal.component.html11
-rw-r--r--client/src/app/shared/video/modals/video-blacklist.component.html13
-rw-r--r--client/src/app/shared/video/modals/video-download.component.html7
-rw-r--r--client/src/app/shared/video/modals/video-report.component.html13
-rw-r--r--client/src/app/shared/video/video-miniature.component.html2
-rw-r--r--client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html7
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html12
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss68
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-upload.component.html8
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.html7
-rw-r--r--client/src/app/videos/+video-watch/modal/video-support.component.html5
-rw-r--r--client/src/sass/application.scss2
-rw-r--r--client/src/sass/bootstrap.scss17
-rw-r--r--client/src/sass/include/_mixins.scss87
-rw-r--r--client/src/sass/include/_variables.scss3
38 files changed, 248 insertions, 240 deletions
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index c3c71bdee..7d93796ec 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -10,7 +10,7 @@
10 <div class="form-group"> 10 <div class="form-group">
11 <label i18n for="fromName">Your name</label> 11 <label i18n for="fromName">Your name</label>
12 <input 12 <input
13 type="text" id="fromName" 13 type="text" id="fromName" class="form-control"
14 formControlName="fromName" [ngClass]="{ 'input-error': formErrors.fromName }" 14 formControlName="fromName" [ngClass]="{ 'input-error': formErrors.fromName }"
15 > 15 >
16 <div *ngIf="formErrors.fromName" class="form-error">{{ formErrors.fromName }}</div> 16 <div *ngIf="formErrors.fromName" class="form-error">{{ formErrors.fromName }}</div>
@@ -19,7 +19,7 @@
19 <div class="form-group"> 19 <div class="form-group">
20 <label i18n for="fromEmail">Your email</label> 20 <label i18n for="fromEmail">Your email</label>
21 <input 21 <input
22 type="text" id="fromEmail" 22 type="text" id="fromEmail" class="form-control"
23 formControlName="fromEmail" [ngClass]="{ 'input-error': formErrors['fromEmail'] }" 23 formControlName="fromEmail" [ngClass]="{ 'input-error': formErrors['fromEmail'] }"
24 > 24 >
25 <div *ngIf="formErrors.fromEmail" class="form-error">{{ formErrors.fromEmail }}</div> 25 <div *ngIf="formErrors.fromEmail" class="form-error">{{ formErrors.fromEmail }}</div>
@@ -28,7 +28,7 @@
28 <div class="form-group"> 28 <div class="form-group">
29 <label i18n for="subject">Subject</label> 29 <label i18n for="subject">Subject</label>
30 <input 30 <input
31 type="text" id="subject" 31 type="text" id="subject" class="form-control"
32 formControlName="subject" [ngClass]="{ 'input-error': formErrors['subject'] }" 32 formControlName="subject" [ngClass]="{ 'input-error': formErrors['subject'] }"
33 > 33 >
34 <div *ngIf="formErrors.subject" class="form-error">{{ formErrors.subject }}</div> 34 <div *ngIf="formErrors.subject" class="form-error">{{ formErrors.subject }}</div>
@@ -36,7 +36,7 @@
36 36
37 <div class="form-group"> 37 <div class="form-group">
38 <label i18n for="body">Your message</label> 38 <label i18n for="body">Your message</label>
39 <textarea id="body" formControlName="body" [ngClass]="{ 'input-error': formErrors['body'] }"> 39 <textarea id="body" formControlName="body" class="form-control" [ngClass]="{ 'input-error': formErrors['body'] }">
40 </textarea> 40 </textarea>
41 <div *ngIf="formErrors.body" class="form-error">{{ formErrors.body }}</div> 41 <div *ngIf="formErrors.body" class="form-error">{{ formErrors.body }}</div>
42 </div> 42 </div>
@@ -44,9 +44,10 @@
44 <div *ngIf="error" class="alert alert-danger">{{ error }}</div> 44 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
45 45
46 <div class="form-group inputs"> 46 <div class="form-group inputs">
47 <span i18n class="action-button action-button-cancel" (click)="hide()"> 47 <input
48 Cancel 48 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
49 </span> 49 (click)="hide()" (key.enter)="hide()"
50 >
50 51
51 <input 52 <input
52 type="submit" i18n-value value="Submit" class="action-button-submit" 53 type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index bde27b206..4ce4c18fc 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -19,7 +19,7 @@
19 <div class="form-group"> 19 <div class="form-group">
20 <label i18n for="instanceName">Name</label> 20 <label i18n for="instanceName">Name</label>
21 <input 21 <input
22 type="text" id="instanceName" 22 type="text" id="instanceName" class="form-control"
23 formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }" 23 formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
24 > 24 >
25 <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div> 25 <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
@@ -28,7 +28,7 @@
28 <div class="form-group"> 28 <div class="form-group">
29 <label i18n for="instanceShortDescription">Short description</label> 29 <label i18n for="instanceShortDescription">Short description</label>
30 <textarea 30 <textarea
31 id="instanceShortDescription" formControlName="shortDescription" class="small" 31 id="instanceShortDescription" formControlName="shortDescription" class="form-control small"
32 [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }" 32 [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
33 ></textarea> 33 ></textarea>
34 <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div> 34 <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
@@ -107,7 +107,7 @@
107 </my-help> 107 </my-help>
108 108
109 <div class="peertube-select-container"> 109 <div class="peertube-select-container">
110 <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy"> 110 <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
111 <option i18n value="do_not_list">Do not list</option> 111 <option i18n value="do_not_list">Do not list</option>
112 <option i18n value="blur">Blur thumbnails</option> 112 <option i18n value="blur">Blur thumbnails</option>
113 <option i18n value="display">Display</option> 113 <option i18n value="display">Display</option>
@@ -172,7 +172,7 @@
172 <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div> 172 <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
173 173
174 <textarea 174 <textarea
175 id="instanceCreationReason" formControlName="creationReason" class="small" 175 id="instanceCreationReason" formControlName="creationReason" class="small" class="form-control"
176 [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }" 176 [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
177 ></textarea> 177 ></textarea>
178 <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div> 178 <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
@@ -183,7 +183,7 @@
183 <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div> 183 <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
184 184
185 <textarea 185 <textarea
186 id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="small" 186 id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="form-control small"
187 [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }" 187 [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
188 ></textarea> 188 ></textarea>
189 <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div> 189 <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
@@ -194,7 +194,7 @@
194 <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div> 194 <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
195 195
196 <textarea 196 <textarea
197 id="instanceBusinessModel" formControlName="businessModel" class="small" 197 id="instanceBusinessModel" formControlName="businessModel" class="form-control small"
198 [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }" 198 [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
199 ></textarea> 199 ></textarea>
200 <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div> 200 <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
@@ -249,7 +249,7 @@
249 <label i18n for="themeDefault">Theme</label> 249 <label i18n for="themeDefault">Theme</label>
250 250
251 <div class="peertube-select-container"> 251 <div class="peertube-select-container">
252 <select formControlName="default" id="themeDefault"> 252 <select formControlName="default" id="themeDefault" class="form-control">
253 <option i18n value="default">default</option> 253 <option i18n value="default">default</option>
254 254
255 <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option> 255 <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
@@ -261,7 +261,7 @@
261 <div class="form-group" formGroupName="instance"> 261 <div class="form-group" formGroupName="instance">
262 <label i18n for="instanceDefaultClientRoute">Landing page</label> 262 <label i18n for="instanceDefaultClientRoute">Landing page</label>
263 <div class="peertube-select-container"> 263 <div class="peertube-select-container">
264 <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute"> 264 <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute" class="form-control">
265 <option i18n value="/videos/overview">Discover videos</option> 265 <option i18n value="/videos/overview">Discover videos</option>
266 <option i18n value="/videos/trending">Trending videos</option> 266 <option i18n value="/videos/trending">Trending videos</option>
267 <option i18n value="/videos/most-liked">Most liked videos</option> 267 <option i18n value="/videos/most-liked">Most liked videos</option>
@@ -303,7 +303,7 @@
303 <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3"> 303 <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
304 <label i18n for="signupLimit">Signup limit</label> 304 <label i18n for="signupLimit">Signup limit</label>
305 <input 305 <input
306 type="number" min="-1" id="signupLimit" 306 type="number" min="-1" id="signupLimit" class="form-control"
307 formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }" 307 formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
308 > 308 >
309 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div> 309 <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
@@ -318,7 +318,7 @@
318 <div class="form-group"> 318 <div class="form-group">
319 <label i18n for="userVideoQuota">Default video quota per user</label> 319 <label i18n for="userVideoQuota">Default video quota per user</label>
320 <div class="peertube-select-container"> 320 <div class="peertube-select-container">
321 <select id="userVideoQuota" formControlName="videoQuota"> 321 <select id="userVideoQuota" formControlName="videoQuota" class="form-control">
322 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value"> 322 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
323 {{ videoQuotaOption.label }} 323 {{ videoQuotaOption.label }}
324 </option> 324 </option>
@@ -330,7 +330,7 @@
330 <div class="form-group"> 330 <div class="form-group">
331 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label> 331 <label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
332 <div class="peertube-select-container"> 332 <div class="peertube-select-container">
333 <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily"> 333 <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
334 <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value"> 334 <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
335 {{ videoQuotaDailyOption.label }} 335 {{ videoQuotaDailyOption.label }}
336 </option> 336 </option>
@@ -451,7 +451,7 @@
451 <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }"> 451 <div [ngClass]="{ 'disabled-checkbox-extra': !isAutoFollowIndexEnabled() }">
452 <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label> 452 <label i18n for="followingsInstanceAutoFollowIndexUrl">Index URL</label>
453 <input 453 <input
454 type="text" id="followingsInstanceAutoFollowIndexUrl" 454 type="text" id="followingsInstanceAutoFollowIndexUrl" class="form-control"
455 formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }" 455 formControlName="indexUrl" [ngClass]="{ 'input-error': formErrors['followings.instance.autoFollowIndex.indexUrl'] }"
456 > 456 >
457 <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div> 457 <div *ngIf="formErrors.followings.instance.autoFollowIndex.indexUrl" class="form-error">{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}</div>
@@ -477,7 +477,7 @@
477 <div class="form-group" formGroupName="admin"> 477 <div class="form-group" formGroupName="admin">
478 <label i18n for="adminEmail">Admin email</label> 478 <label i18n for="adminEmail">Admin email</label>
479 <input 479 <input
480 type="text" id="adminEmail" 480 type="text" id="adminEmail" class="form-control"
481 formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }" 481 formControlName="email" [ngClass]="{ 'input-error': formErrors['admin.email'] }"
482 > 482 >
483 <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div> 483 <div *ngIf="formErrors.admin.email" class="form-error">{{ formErrors.admin.email }}</div>
@@ -518,7 +518,7 @@
518 <label i18n for="signupLimit">Your Twitter username</label> 518 <label i18n for="signupLimit">Your Twitter username</label>
519 519
520 <input 520 <input
521 type="text" id="servicesTwitterUsername" 521 type="text" id="servicesTwitterUsername" class="form-control"
522 formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }" 522 formControlName="username" [ngClass]="{ 'input-error': formErrors['services.twitter.username'] }"
523 > 523 >
524 <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div> 524 <div *ngIf="formErrors.services.twitter.username" class="form-error">{{ formErrors.services.twitter.username }}</div>
@@ -656,7 +656,7 @@
656 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }"> 656 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
657 <label i18n for="transcodingThreads">Transcoding threads</label> 657 <label i18n for="transcodingThreads">Transcoding threads</label>
658 <div class="peertube-select-container"> 658 <div class="peertube-select-container">
659 <select id="transcodingThreads" formControlName="threads"> 659 <select id="transcodingThreads" formControlName="threads" class="form-control">
660 <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value"> 660 <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
661 {{ transcodingThreadOption.label }} 661 {{ transcodingThreadOption.label }}
662 </option> 662 </option>
@@ -707,7 +707,7 @@
707 <div class="form-group" formGroupName="previews"> 707 <div class="form-group" formGroupName="previews">
708 <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label> 708 <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
709 <input 709 <input
710 type="number" min="0" id="cachePreviewsSize" 710 type="number" min="0" id="cachePreviewsSize" class="form-control"
711 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }" 711 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
712 > 712 >
713 <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div> 713 <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
@@ -716,7 +716,7 @@
716 <div class="form-group" formGroupName="captions"> 716 <div class="form-group" formGroupName="captions">
717 <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label> 717 <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
718 <input 718 <input
719 type="number" min="0" id="cacheCaptionsSize" 719 type="number" min="0" id="cacheCaptionsSize" class="form-control"
720 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }" 720 formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
721 > 721 >
722 <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div> 722 <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
@@ -750,7 +750,7 @@
750 </my-help> 750 </my-help>
751 751
752 <textarea 752 <textarea
753 id="customizationJavascript" formControlName="javascript" 753 id="customizationJavascript" formControlName="javascript" class="form-control"
754 [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }" 754 [ngClass]="{ 'input-error': formErrors['instance.customizations.javascript'] }"
755 ></textarea> 755 ></textarea>
756 756
@@ -780,7 +780,7 @@
780 </my-help> 780 </my-help>
781 781
782 <textarea 782 <textarea
783 id="customizationCSS" formControlName="css" 783 id="customizationCSS" formControlName="css" class="form-control"
784 [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }" 784 [ngClass]="{ 'input-error': formErrors['instance.customizations.css'] }"
785 ></textarea> 785 ></textarea>
786 <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div> 786 <div *ngIf="formErrors.instance.customizations.css" class="form-error">{{ formErrors.instance.customizations.css }}</div>
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.scss b/client/src/app/+admin/follows/following-add/following-add.component.scss
index df104c14e..7594b502c 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.scss
+++ b/client/src/app/+admin/follows/following-add/following-add.component.scss
@@ -5,13 +5,6 @@ textarea {
5 height: 250px; 5 height: 250px;
6} 6}
7 7
8.form-control {
9 &, &:focus {
10 background-color: var(--inputBackgroundColor);
11 color: var(--mainForegroundColor);
12 }
13}
14
15input[type=submit] { 8input[type=submit] {
16 @include peertube-button; 9 @include peertube-button;
17 @include orange-button; 10 @include orange-button;
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
index 303a788d2..8fbd33871 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.html
@@ -20,7 +20,10 @@
20 </div> 20 </div>
21 21
22 <div class="form-group inputs"> 22 <div class="form-group inputs">
23 <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span> 23 <input
24 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
25 (click)="hide()" (key.enter)="hide()"
26 >
24 27
25 <input 28 <input
26 type="submit" i18n-value value="Update this comment" class="action-button-submit" 29 type="submit" i18n-value value="Update this comment" class="action-button-submit"
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index 6c42fde57..070695e57 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -82,7 +82,7 @@
82 <div class="form-group" *ngIf="isCreation()"> 82 <div class="form-group" *ngIf="isCreation()">
83 <label i18n for="username">Username</label> 83 <label i18n for="username">Username</label>
84 <input 84 <input
85 type="text" id="username" i18n-placeholder placeholder="john" 85 type="text" id="username" i18n-placeholder placeholder="john" class="form-control"
86 formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" 86 formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
87 > 87 >
88 <div *ngIf="formErrors.username" class="form-error"> 88 <div *ngIf="formErrors.username" class="form-error">
@@ -93,7 +93,7 @@
93 <div class="form-group"> 93 <div class="form-group">
94 <label i18n for="email">Email</label> 94 <label i18n for="email">Email</label>
95 <input 95 <input
96 type="text" id="email" i18n-placeholder placeholder="mail@example.com" 96 type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
97 formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" 97 formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
98 autocomplete="off" 98 autocomplete="off"
99 > 99 >
@@ -112,7 +112,7 @@
112 </ng-template> 112 </ng-template>
113 </my-help> 113 </my-help>
114 <input 114 <input
115 type="password" id="password" autocomplete="new-password" 115 type="password" id="password" autocomplete="new-password" class="form-control"
116 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" 116 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
117 > 117 >
118 <div *ngIf="formErrors.password" class="form-error"> 118 <div *ngIf="formErrors.password" class="form-error">
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
index 674a4e8a2..a155d90e0 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.html
@@ -21,9 +21,10 @@
21 21
22 <div class="modal-footer inputs"> 22 <div class="modal-footer inputs">
23 <div class="form-group inputs"> 23 <div class="form-group inputs">
24 <span i18n class="action-button action-button-cancel" (click)="dismiss()"> 24 <input
25 Cancel 25 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
26 </span> 26 (click)="dismiss()" (key.enter)="dismiss()"
27 >
27 28
28 <input 29 <input
29 type="submit" i18n-value value="Submit" class="action-button-submit" 30 type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index 76886c73e..f39f66696 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -14,7 +14,7 @@
14 <div class="form-group"> 14 <div class="form-group">
15 <label i18n for="new-email">New email</label> 15 <label i18n for="new-email">New email</label>
16 <input 16 <input
17 type="email" id="new-email" i18n-placeholder placeholder="Your new email" 17 type="email" id="new-email" i18n-placeholder placeholder="Your new email" class="form-control"
18 formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }" 18 formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
19 > 19 >
20 <div *ngIf="formErrors['new-email']" class="form-error"> 20 <div *ngIf="formErrors['new-email']" class="form-error">
@@ -25,7 +25,7 @@
25 <div class="form-group"> 25 <div class="form-group">
26 <input 26 <input
27 type="password" id="password" i18n-placeholder placeholder="Your password" autocomplete="off" 27 type="password" id="password" i18n-placeholder placeholder="Your password" autocomplete="off"
28 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" 28 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" class="form-control"
29 > 29 >
30 <div *ngIf="formErrors['password']" class="form-error"> 30 <div *ngIf="formErrors['password']" class="form-error">
31 {{ formErrors['password'] }} 31 {{ formErrors['password'] }}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index cec70c6b5..4756cfecd 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -5,7 +5,7 @@
5 <label i18n for="current-password">Change password</label> 5 <label i18n for="current-password">Change password</label>
6 <input 6 <input
7 type="password" id="current-password" i18n-placeholder placeholder="Current password" autocomplete="current-password" 7 type="password" id="current-password" i18n-placeholder placeholder="Current password" autocomplete="current-password"
8 formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }" 8 formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }" class="form-control"
9 > 9 >
10 <div *ngIf="formErrors['current-password']" class="form-error"> 10 <div *ngIf="formErrors['current-password']" class="form-error">
11 {{ formErrors['current-password'] }} 11 {{ formErrors['current-password'] }}
@@ -13,7 +13,7 @@
13 13
14 <input 14 <input
15 type="password" id="new-password" i18n-placeholder placeholder="New password" autocomplete="new-password" 15 type="password" id="new-password" i18n-placeholder placeholder="New password" autocomplete="new-password"
16 formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }" 16 formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }" class="form-control"
17 > 17 >
18 <div *ngIf="formErrors['new-password']" class="form-error"> 18 <div *ngIf="formErrors['new-password']" class="form-error">
19 {{ formErrors['new-password'] }} 19 {{ formErrors['new-password'] }}
@@ -21,7 +21,7 @@
21 21
22 <input 22 <input
23 type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password" autocomplete="new-password" 23 type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password" autocomplete="new-password"
24 formControlName="new-confirmed-password" 24 formControlName="new-confirmed-password" class="form-control"
25 > 25 >
26 <div *ngIf="formErrors['new-confirmed-password']" class="form-error"> 26 <div *ngIf="formErrors['new-confirmed-password']" class="form-error">
27 {{ formErrors['new-confirmed-password'] }} 27 {{ formErrors['new-confirmed-password'] }}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
index 6f48d8f7d..b12184ddc 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
@@ -3,7 +3,7 @@
3 <label i18n for="theme">Theme</label> 3 <label i18n for="theme">Theme</label>
4 4
5 <div class="peertube-select-container"> 5 <div class="peertube-select-container">
6 <select formControlName="theme" id="theme"> 6 <select formControlName="theme" id="theme" class="form-control">
7 <option i18n value="instance-default">instance default</option> 7 <option i18n value="instance-default">instance default</option>
8 <option i18n value="default">peertube default</option> 8 <option i18n value="default">peertube default</option>
9 9
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 14e51f57c..818e34ee0 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
@@ -5,7 +5,7 @@
5 <div class="form-group"> 5 <div class="form-group">
6 <label i18n for="display-name">Display name</label> 6 <label i18n for="display-name">Display name</label>
7 <input 7 <input
8 type="text" id="display-name" 8 type="text" id="display-name" class="form-control"
9 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }" 9 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
10 > 10 >
11 <div *ngIf="formErrors['display-name']" class="form-error"> 11 <div *ngIf="formErrors['display-name']" class="form-error">
@@ -16,7 +16,7 @@
16 <div class="form-group"> 16 <div class="form-group">
17 <label i18n for="description">Description</label> 17 <label i18n for="description">Description</label>
18 <textarea 18 <textarea
19 id="description" formControlName="description" 19 id="description" formControlName="description" class="form-control"
20 [ngClass]="{ 'input-error': formErrors['description'] }" 20 [ngClass]="{ 'input-error': formErrors['description'] }"
21 ></textarea> 21 ></textarea>
22 <div *ngIf="formErrors.description" class="form-error"> 22 <div *ngIf="formErrors.description" class="form-error">
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
index 7f4437b19..5e95e2f9a 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
@@ -10,7 +10,7 @@
10 </my-help> 10 </my-help>
11 11
12 <div class="peertube-select-container"> 12 <div class="peertube-select-container">
13 <select id="nsfwPolicy" formControlName="nsfwPolicy"> 13 <select id="nsfwPolicy" formControlName="nsfwPolicy" class="form-control">
14 <option i18n value="do_not_list">Do not list</option> 14 <option i18n value="do_not_list">Do not list</option>
15 <option i18n value="blur">Blur thumbnails</option> 15 <option i18n value="blur">Blur thumbnails</option>
16 <option i18n value="display">Display</option> 16 <option i18n value="display">Display</option>
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
index 29d2b935d..59ac5097b 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
@@ -33,7 +33,7 @@
33 <div class="input-group"> 33 <div class="input-group">
34 <input 34 <input
35 type="text" id="name" i18n-placeholder placeholder="Example: my_channel" 35 type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
36 formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" 36 formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
37 > 37 >
38 <div class="input-group-append"> 38 <div class="input-group-append">
39 <span class="input-group-text">@{{ instanceHost }}</span> 39 <span class="input-group-text">@{{ instanceHost }}</span>
@@ -52,7 +52,7 @@
52 <div class="form-group"> 52 <div class="form-group">
53 <label i18n for="display-name">Display name</label> 53 <label i18n for="display-name">Display name</label>
54 <input 54 <input
55 type="text" id="display-name" 55 type="text" id="display-name" class="form-control"
56 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }" 56 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
57 > 57 >
58 <div *ngIf="formErrors['display-name']" class="form-error"> 58 <div *ngIf="formErrors['display-name']" class="form-error">
@@ -63,7 +63,7 @@
63 <div class="form-group"> 63 <div class="form-group">
64 <label i18n for="description">Description</label> 64 <label i18n for="description">Description</label>
65 <textarea 65 <textarea
66 id="description" formControlName="description" 66 id="description" formControlName="description" class="form-control"
67 [ngClass]="{ 'input-error': formErrors['description'] }" 67 [ngClass]="{ 'input-error': formErrors['description'] }"
68 ></textarea> 68 ></textarea>
69 <div *ngIf="formErrors.description" class="form-error"> 69 <div *ngIf="formErrors.description" class="form-error">
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
index 22f127904..9d809d2bf 100644
--- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.html
@@ -18,9 +18,10 @@
18 18
19 <div class="modal-footer inputs"> 19 <div class="modal-footer inputs">
20 <div class="form-group inputs"> 20 <div class="form-group inputs">
21 <span i18n class="action-button action-button-cancel" (click)="dismiss()"> 21 <input
22 Cancel 22 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
23 </span> 23 (click)="dismiss()" (key.enter)="dismiss()"
24 >
24 25
25 <input 26 <input
26 type="submit" i18n-value value="Submit" class="action-button-submit" 27 type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index 6bac4e4a4..1bd378b13 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -21,7 +21,7 @@
21 <div class="input-group"> 21 <div class="input-group">
22 <input 22 <input
23 type="text" id="username" i18n-placeholder placeholder="Example: jane_doe" 23 type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
24 formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" 24 formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
25 > 25 >
26 <div class="input-group-append"> 26 <div class="input-group-append">
27 <span class="input-group-text">@{{ instanceHost }}</span> 27 <span class="input-group-text">@{{ instanceHost }}</span>
@@ -41,7 +41,7 @@
41 <label for="email" i18n>Email</label> 41 <label for="email" i18n>Email</label>
42 <input 42 <input
43 type="text" id="email" i18n-placeholder placeholder="Email" 43 type="text" id="email" i18n-placeholder placeholder="Email"
44 formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" 44 formControlName="email" class="form-control" [ngClass]="{ 'input-error': formErrors['email'] }"
45 > 45 >
46 <div *ngIf="formErrors.email" class="form-error"> 46 <div *ngIf="formErrors.email" class="form-error">
47 {{ formErrors.email }} 47 {{ formErrors.email }}
@@ -52,7 +52,7 @@
52 <label for="password" i18n>Password</label> 52 <label for="password" i18n>Password</label>
53 <input 53 <input
54 type="password" id="password" i18n-placeholder placeholder="Password" autocomplete="new-password" 54 type="password" id="password" i18n-placeholder placeholder="Password" autocomplete="new-password"
55 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" 55 formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
56 > 56 >
57 <div *ngIf="formErrors.password" class="form-error"> 57 <div *ngIf="formErrors.password" class="form-error">
58 {{ formErrors.password }} 58 {{ formErrors.password }}
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
index 2e4180632..ece9d1022 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html
@@ -8,7 +8,7 @@
8 <label i18n for="verify-email-email">Email</label> 8 <label i18n for="verify-email-email">Email</label>
9 <input 9 <input
10 type="email" id="verify-email-email" i18n-placeholder placeholder="Email address" required 10 type="email" id="verify-email-email" i18n-placeholder placeholder="Email address" required
11 formControlName="verify-email-email" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }" 11 formControlName="verify-email-email" class="form-control" [ngClass]="{ 'input-error': formErrors['verify-email-email'] }"
12 > 12 >
13 <div *ngIf="formErrors['verify-email-email']" class="form-error"> 13 <div *ngIf="formErrors['verify-email-email']" class="form-error">
14 {{ formErrors['verify-email-email'] }} 14 {{ formErrors['verify-email-email'] }}
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 38b59a1eb..3a2d4b876 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -28,7 +28,7 @@
28 <label i18n for="username">User</label> 28 <label i18n for="username">User</label>
29 <input 29 <input
30 type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1" 30 type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
31 formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" #emailInput 31 formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" #emailInput
32 > 32 >
33 <a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account"> 33 <a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
34 or create an account 34 or create an account
@@ -45,7 +45,7 @@
45 <div> 45 <div>
46 <input 46 <input
47 type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2" autocomplete="current-password" 47 type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2" autocomplete="current-password"
48 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" 48 formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
49 > 49 >
50 <a i18n-title class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a> 50 <a i18n-title class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a>
51 </div> 51 </div>
@@ -81,7 +81,10 @@
81 </div> 81 </div>
82 82
83 <div class="modal-footer inputs"> 83 <div class="modal-footer inputs">
84 <span i18n class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">Cancel</span> 84 <input
85 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
86 (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
87 >
85 88
86 <input 89 <input
87 type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit" 90 type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"
diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index e303104c5..44c994bc8 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -40,7 +40,10 @@
40 40
41 </my-peertube-checkbox> 41 </my-peertube-checkbox>
42 42
43 <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span> 43 <input
44 type="button" role="button" i18n-value value="Close" class="action-button action-button-cancel"
45 (click)="hide()" (key.enter)="hide()"
46 >
44 </div> 47 </div>
45 48
46</ng-template> 49</ng-template>
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index 9b210eb4d..8bfcc4bf6 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -76,10 +76,14 @@
76 </div> 76 </div>
77 77
78 <div class="modal-footer inputs"> 78 <div class="modal-footer inputs">
79 <span i18n class="action-button action-button-understood" (click)="hide()">Remind me later</span> 79 <input
80 80 type="button" role="button" i18n-value value="Remind me later" class="action-button action-button-understood"
81 <a i18n (click)="doNotOpenAgain(); hide()" class="configure-instance-button" href="/admin/config/edit-custom" target="_blank" 81 (click)="hide()" (key.enter)="hide()"
82 rel="noopener noreferrer"> 82 >
83
84 <a i18n (click)="doNotOpenAgain(); hide()" (key.enter)="doNotOpenAgain(); hide()"
85 class="configure-instance-button" href="/admin/config/edit-custom" target="_blank"
86 rel="noopener noreferrer" ngbAutofocus>
83 Configure my instance 87 Configure my instance
84 </a> 88 </a>
85 </div> 89 </div>
diff --git a/client/src/app/search/search-filters.component.html b/client/src/app/search/search-filters.component.html
index 60680c7bd..54fc7338f 100644
--- a/client/src/app/search/search-filters.component.html
+++ b/client/src/app/search/search-filters.component.html
@@ -46,6 +46,7 @@
46 type="text" id="original-publication-after" name="original-publication-after" 46 type="text" id="original-publication-after" name="original-publication-after"
47 i18n-placeholder placeholder="After..." 47 i18n-placeholder placeholder="After..."
48 [(ngModel)]="originallyPublishedStartYear" 48 [(ngModel)]="originallyPublishedStartYear"
49 class="form-control"
49 > 50 >
50 </div> 51 </div>
51 <div class="col-sm-6"> 52 <div class="col-sm-6">
@@ -55,6 +56,7 @@
55 type="text" id="original-publication-before" name="original-publication-before" 56 type="text" id="original-publication-before" name="original-publication-before"
56 i18n-placeholder placeholder="Before..." 57 i18n-placeholder placeholder="Before..."
57 [(ngModel)]="originallyPublishedEndYear" 58 [(ngModel)]="originallyPublishedEndYear"
59 class="form-control"
58 > 60 >
59 </div> 61 </div>
60 </div> 62 </div>
@@ -102,7 +104,7 @@
102 Reset 104 Reset
103 </button> 105 </button>
104 <div class="peertube-select-container"> 106 <div class="peertube-select-container">
105 <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf"> 107 <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf" class="form-control">
106 <option [value]="undefined" i18n>Display all categories</option> 108 <option [value]="undefined" i18n>Display all categories</option>
107 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option> 109 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
108 </select> 110 </select>
@@ -115,7 +117,7 @@
115 Reset 117 Reset
116 </button> 118 </button>
117 <div class="peertube-select-container"> 119 <div class="peertube-select-container">
118 <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf"> 120 <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf" class="form-control">
119 <option [value]="undefined" i18n>Display all licenses</option> 121 <option [value]="undefined" i18n>Display all licenses</option>
120 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> 122 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
121 </select> 123 </select>
@@ -128,7 +130,7 @@
128 Reset 130 Reset
129 </button> 131 </button>
130 <div class="peertube-select-container"> 132 <div class="peertube-select-container">
131 <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf"> 133 <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf" class="form-control">
132 <option [value]="undefined" i18n>Display all languages</option> 134 <option [value]="undefined" i18n>Display all languages</option>
133 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> 135 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
134 </select> 136 </select>
diff --git a/client/src/app/search/search-filters.component.scss b/client/src/app/search/search-filters.component.scss
index 99af2e4c5..edd85bc70 100644
--- a/client/src/app/search/search-filters.component.scss
+++ b/client/src/app/search/search-filters.component.scss
@@ -66,65 +66,4 @@ input[type=submit] {
66 white-space: nowrap; 66 white-space: nowrap;
67} 67}
68 68
69::ng-deep { 69@include ng2-tags
70 .ng2-tag-input {
71 border: none !important;
72 }
73
74 .ng2-tags-container {
75 display: flex;
76 align-items: center;
77 border: 1px solid #C6C6C6;
78 border-radius: 3px;
79 padding: 5px !important;
80 height: max-content;
81 }
82
83 tag-input-form {
84 input {
85 height: 30px !important;
86 font-size: 12px !important;
87
88 background-color: var(--mainBackgroundColor) !important;
89 color: var(--mainForegroundColor) !important;
90 }
91 }
92
93 tag {
94 background-color: $grey-background-color !important;
95 color: #000 !important;
96 border-radius: 3px !important;
97 font-size: 12px !important;
98 height: 30px !important;
99 line-height: 30px !important;
100 margin: 0 5px 0 0 !important;
101 cursor: default !important;
102 padding: 0 8px 0 10px !important;
103
104 div {
105 height: 100% !important;
106 }
107 }
108
109 delete-icon {
110 cursor: pointer !important;
111 height: auto !important;
112 vertical-align: middle !important;
113 padding-left: 6px !important;
114
115 svg {
116 position: relative;
117 top: -1px;
118 height: auto !important;
119 vertical-align: middle !important;
120
121 path {
122 fill: $grey-foreground-color !important;
123 }
124 }
125
126 &:hover {
127 transform: none !important;
128 }
129 }
130}
diff --git a/client/src/app/shared/confirm/confirm.component.html b/client/src/app/shared/confirm/confirm.component.html
index 65df1cd4d..dbc8c23e3 100644
--- a/client/src/app/shared/confirm/confirm.component.html
+++ b/client/src/app/shared/confirm/confirm.component.html
@@ -16,11 +16,15 @@
16 </div> 16 </div>
17 17
18 <div class="modal-footer inputs"> 18 <div class="modal-footer inputs">
19 <span i18n class="action-button action-button-cancel" (click)="dismiss()" role="button">Cancel</span> 19 <input
20 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
21 (click)="dismiss()" (key.enter)="dismiss()"
22 >
20 23
21 <input 24 <input
25 ngbAutofocus
22 type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()" 26 type="submit" [value]="confirmButtonText" class="action-button-submit" [disabled]="isConfirmationDisabled()"
23 (click)="close()" 27 (click)="close()" (key.enter)="confirm()"
24 > 28 >
25 </div> 29 </div>
26</ng-template> 30</ng-template>
diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts
index d67d4f3c8..c6e40fe72 100644
--- a/client/src/app/shared/confirm/confirm.component.ts
+++ b/client/src/app/shared/confirm/confirm.component.ts
@@ -45,7 +45,6 @@ export class ConfirmComponent implements OnInit {
45 ) 45 )
46 } 46 }
47 47
48 @HostListener('document:keydown.enter')
49 confirm () { 48 confirm () {
50 if (this.openedModal) this.openedModal.close() 49 if (this.openedModal) this.openedModal.close()
51 } 50 }
diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
index fb6e1343d..3cadb3619 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.html
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -1,7 +1,8 @@
1<div class="root" [ngStyle]="{ 'flex-direction': flexDirection }"> 1<div class="root" [ngStyle]="{ 'flex-direction': flexDirection }">
2 <textarea 2 <textarea
3 [(ngModel)]="content" (ngModelChange)="onModelChange()" 3 [(ngModel)]="content" (ngModelChange)="onModelChange()"
4 [ngClass]="classes" [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }" 4 class="form-control" [ngClass]="classes"
5 [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
5 [id]="name" [name]="name"> 6 [id]="name" [name]="name">
6 </textarea> 7 </textarea>
7 8
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html
index f38ea543d..365eb1938 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/moderation/user-ban-modal.component.html
@@ -8,8 +8,10 @@
8 <div class="modal-body"> 8 <div class="modal-body">
9 <form novalidate [formGroup]="form" (ngSubmit)="banUser()"> 9 <form novalidate [formGroup]="form" (ngSubmit)="banUser()">
10 <div class="form-group"> 10 <div class="form-group">
11 <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"> 11 <textarea
12 </textarea> 12 i18n-placeholder placeholder="Reason..." formControlName="reason"
13 class="form-control" [ngClass]="{ 'input-error': formErrors['reason'] }"
14 ></textarea>
13 <div *ngIf="formErrors.reason" class="form-error"> 15 <div *ngIf="formErrors.reason" class="form-error">
14 {{ formErrors.reason }} 16 {{ formErrors.reason }}
15 </div> 17 </div>
@@ -20,7 +22,10 @@
20 </div> 22 </div>
21 23
22 <div class="form-group inputs"> 24 <div class="form-group inputs">
23 <span i18n class="action-button action-button-cancel" (click)="hide()">Cancel</span> 25 <input
26 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
27 (click)="hide()" (key.enter)="hide()"
28 >
24 29
25 <input 30 <input
26 type="submit" i18n-value value="Ban this user" class="action-button-submit" 31 type="submit" i18n-value value="Ban this user" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.html b/client/src/app/shared/video/modals/video-blacklist.component.html
index 857a4dcec..8f06a6b02 100644
--- a/client/src/app/shared/video/modals/video-blacklist.component.html
+++ b/client/src/app/shared/video/modals/video-blacklist.component.html
@@ -8,8 +8,10 @@
8 8
9 <form novalidate [formGroup]="form" (ngSubmit)="blacklist()"> 9 <form novalidate [formGroup]="form" (ngSubmit)="blacklist()">
10 <div class="form-group"> 10 <div class="form-group">
11 <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"> 11 <textarea
12 </textarea> 12 i18n-placeholder placeholder="Reason..." formControlName="reason"
13 [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
14 ></textarea>
13 <div *ngIf="formErrors.reason" class="form-error"> 15 <div *ngIf="formErrors.reason" class="form-error">
14 {{ formErrors.reason }} 16 {{ formErrors.reason }}
15 </div> 17 </div>
@@ -27,9 +29,10 @@
27 </div> 29 </div>
28 30
29 <div class="form-group inputs"> 31 <div class="form-group inputs">
30 <span i18n class="action-button action-button-cancel" (click)="hide()"> 32 <input
31 Cancel 33 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
32 </span> 34 (click)="hide()" (key.enter)="hide()"
35 >
33 36
34 <input 37 <input
35 type="submit" i18n-value value="Submit" class="action-button-submit" 38 type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index ab6f4449d..c65e371ee 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -95,9 +95,10 @@
95 </div> 95 </div>
96 96
97 <div class="modal-footer inputs"> 97 <div class="modal-footer inputs">
98 <span i18n class="action-button action-button-cancel" (click)="hide()"> 98 <input
99 Cancel 99 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
100 </span> 100 (click)="hide()" (key.enter)="hide()"
101 >
101 102
102 <input 103 <input
103 type="submit" i18n-value value="Download" class="action-button-submit" 104 type="submit" i18n-value value="Download" class="action-button-submit"
diff --git a/client/src/app/shared/video/modals/video-report.component.html b/client/src/app/shared/video/modals/video-report.component.html
index cc1d361b3..e336b6660 100644
--- a/client/src/app/shared/video/modals/video-report.component.html
+++ b/client/src/app/shared/video/modals/video-report.component.html
@@ -12,17 +12,20 @@
12 12
13 <form novalidate [formGroup]="form" (ngSubmit)="report()"> 13 <form novalidate [formGroup]="form" (ngSubmit)="report()">
14 <div class="form-group"> 14 <div class="form-group">
15 <textarea i18n-placeholder placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"> 15 <textarea
16 </textarea> 16 i18n-placeholder placeholder="Reason..." formControlName="reason"
17 [ngClass]="{ 'input-error': formErrors['reason'] }" class="form-control"
18 ></textarea>
17 <div *ngIf="formErrors.reason" class="form-error"> 19 <div *ngIf="formErrors.reason" class="form-error">
18 {{ formErrors.reason }} 20 {{ formErrors.reason }}
19 </div> 21 </div>
20 </div> 22 </div>
21 23
22 <div class="form-group inputs"> 24 <div class="form-group inputs">
23 <span i18n class="action-button action-button-cancel" (click)="hide()"> 25 <input
24 Cancel 26 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
25 </span> 27 (click)="hide()" (key.enter)="hide()"
28 >
26 29
27 <input 30 <input
28 type="submit" i18n-value value="Submit" class="action-button-submit" 31 type="submit" i18n-value value="Submit" class="action-button-submit"
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 819be6d48..6a8558de3 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -52,7 +52,7 @@
52 <div class="video-actions"> 52 <div class="video-actions">
53 <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown: https://github.com/ng-bootstrap/ng-bootstrap/issues/3495 --> 53 <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown: https://github.com/ng-bootstrap/ng-bootstrap/issues/3495 -->
54 <my-video-actions-dropdown 54 <my-video-actions-dropdown
55 *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left" 55 *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left auto"
56 (videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()" 56 (videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()"
57 ></my-video-actions-dropdown> 57 ></my-video-actions-dropdown>
58 </div> 58 </div>
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
index 19043eee6..4262ff0fc 100644
--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html
@@ -32,9 +32,10 @@
32 </div> 32 </div>
33 33
34 <div class="modal-footer inputs"> 34 <div class="modal-footer inputs">
35 <span i18n class="action-button action-button-cancel" (click)="hide()"> 35 <input
36 Cancel 36 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
37 </span> 37 (click)="hide()" (key.enter)="hide()"
38 >
38 39
39 <input 40 <input
40 type="submit" i18n-value value="Add this caption" class="action-button-submit" 41 type="submit" i18n-value value="Add this caption" class="action-button-submit"
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 967f3b188..152b069d2 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -9,7 +9,7 @@
9 <div class="col-md-8"> 9 <div class="col-md-8">
10 <div class="form-group"> 10 <div class="form-group">
11 <label i18n for="name">Title</label> 11 <label i18n for="name">Title</label>
12 <input type="text" id="name" formControlName="name" /> 12 <input type="text" id="name" class="form-control" formControlName="name" />
13 <div *ngIf="formErrors.name" class="form-error"> 13 <div *ngIf="formErrors.name" class="form-error">
14 {{ formErrors.name }} 14 {{ formErrors.name }}
15 </div> 15 </div>
@@ -58,7 +58,7 @@
58 <div class="form-group"> 58 <div class="form-group">
59 <label i18n>Channel</label> 59 <label i18n>Channel</label>
60 <div class="peertube-select-container"> 60 <div class="peertube-select-container">
61 <select formControlName="channelId"> 61 <select formControlName="channelId" class="form-control">
62 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> 62 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
63 </select> 63 </select>
64 </div> 64 </div>
@@ -67,7 +67,7 @@
67 <div class="form-group"> 67 <div class="form-group">
68 <label i18n for="category">Category</label> 68 <label i18n for="category">Category</label>
69 <div class="peertube-select-container"> 69 <div class="peertube-select-container">
70 <select id="category" formControlName="category"> 70 <select id="category" formControlName="category" class="form-control">
71 <option></option> 71 <option></option>
72 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option> 72 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
73 </select> 73 </select>
@@ -81,7 +81,7 @@
81 <div class="form-group"> 81 <div class="form-group">
82 <label i18n for="licence">Licence</label> 82 <label i18n for="licence">Licence</label>
83 <div class="peertube-select-container"> 83 <div class="peertube-select-container">
84 <select id="licence" formControlName="licence"> 84 <select id="licence" formControlName="licence" class="form-control">
85 <option></option> 85 <option></option>
86 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> 86 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
87 </select> 87 </select>
@@ -95,7 +95,7 @@
95 <div class="form-group"> 95 <div class="form-group">
96 <label i18n for="language">Language</label> 96 <label i18n for="language">Language</label>
97 <div class="peertube-select-container"> 97 <div class="peertube-select-container">
98 <select id="language" formControlName="language"> 98 <select id="language" formControlName="language" class="form-control">
99 <option></option> 99 <option></option>
100 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> 100 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
101 </select> 101 </select>
@@ -109,7 +109,7 @@
109 <div class="form-group"> 109 <div class="form-group">
110 <label i18n for="privacy">Privacy</label> 110 <label i18n for="privacy">Privacy</label>
111 <div class="peertube-select-container"> 111 <div class="peertube-select-container">
112 <select id="privacy" formControlName="privacy"> 112 <select id="privacy" formControlName="privacy" class="form-control">
113 <option></option> 113 <option></option>
114 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> 114 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
115 <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option> 115 <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 90d26e13d..1b7bc56b4 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -1,6 +1,11 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
4.peertube-select-container { 9.peertube-select-container {
5 @include peertube-select-container(auto); 10 @include peertube-select-container(auto);
6} 11}
@@ -148,65 +153,4 @@ p-calendar {
148 } 153 }
149} 154}
150 155
151::ng-deep { 156@include ng2-tags
152 .ng2-tag-input {
153 border: none !important;
154 }
155
156 .ng2-tags-container {
157 display: flex;
158 align-items: center;
159 border: 1px solid #C6C6C6;
160 border-radius: 3px;
161 padding: 5px !important;
162 height: max-content;
163 }
164
165 tag-input-form {
166 input {
167 height: 30px !important;
168 font-size: 12px !important;
169
170 background-color: var(--mainBackgroundColor) !important;
171 color: var(--mainForegroundColor) !important;
172 }
173 }
174
175 tag {
176 background-color: $grey-background-color !important;
177 color: #000 !important;
178 border-radius: 3px !important;
179 font-size: 12px !important;
180 height: 30px !important;
181 line-height: 30px !important;
182 margin: 0 5px 0 0 !important;
183 cursor: default !important;
184 padding: 0 8px 0 10px !important;
185
186 div {
187 height: 100% !important;
188 }
189 }
190
191 delete-icon {
192 cursor: pointer !important;
193 height: auto !important;
194 vertical-align: middle !important;
195 padding-left: 6px !important;
196
197 svg {
198 position: relative;
199 top: -1px;
200 height: auto !important;
201 vertical-align: middle !important;
202
203 path {
204 fill: $grey-foreground-color !important;
205 }
206 }
207
208 &:hover {
209 transform: none !important;
210 }
211 }
212}
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
index 3cb57e375..be3a9662b 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
@@ -2,16 +2,16 @@
2 <div class="first-step-block"> 2 <div class="first-step-block">
3 <my-global-icon class="upload-icon" iconName="upload"></my-global-icon> 3 <my-global-icon class="upload-icon" iconName="upload"></my-global-icon>
4 4
5 <div class="button-file"> 5 <div class="button-file form-control">
6 <span i18n>Select the file to upload</span> 6 <span i18n>Select the file to upload</span>
7 <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" /> 7 <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus />
8 </div> 8 </div>
9 <span class="button-file-extension">({{ videoExtensions }})</span> 9 <span class="button-file-extension">({{ videoExtensions }})</span>
10 10
11 <div class="form-group form-group-channel"> 11 <div class="form-group form-group-channel">
12 <label i18n for="first-step-channel">Channel</label> 12 <label i18n for="first-step-channel">Channel</label>
13 <div class="peertube-select-container"> 13 <div class="peertube-select-container">
14 <select id="first-step-channel" [(ngModel)]="firstStepChannelId"> 14 <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control">
15 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> 15 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
16 </select> 16 </select>
17 </div> 17 </div>
@@ -20,7 +20,7 @@
20 <div class="form-group"> 20 <div class="form-group">
21 <label i18n for="first-step-privacy">Privacy</label> 21 <label i18n for="first-step-privacy">Privacy</label>
22 <div class="peertube-select-container"> 22 <div class="peertube-select-container">
23 <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId"> 23 <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
24 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> 24 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
25 <option i18n [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option> 25 <option i18n [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
26 </select> 26 </select>
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
index 3e820041d..9b43d91da 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
@@ -43,9 +43,10 @@
43 <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe> 43 <my-remote-subscribe [interact]="true" [uri]="getUri()"></my-remote-subscribe>
44 </div> 44 </div>
45 <div class="modal-footer inputs"> 45 <div class="modal-footer inputs">
46 <span i18n class="action-button action-button-cancel" role="button" (click)="hideVisitorModal()"> 46 <input
47 Cancel 47 type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
48 </span> 48 (click)="hideVisitorModal()" (key.enter)="hideVisitorModal()"
49 >
49 50
50 <input 51 <input
51 type="submit" i18n-value value="Login to comment" class="action-button-submit" 52 type="submit" i18n-value value="Login to comment" class="action-button-submit"
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.html b/client/src/app/videos/+video-watch/modal/video-support.component.html
index 608a4632b..935656d23 100644
--- a/client/src/app/videos/+video-watch/modal/video-support.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.html
@@ -7,6 +7,9 @@
7 <div class="modal-body" [innerHTML]="videoHTMLSupport"></div> 7 <div class="modal-body" [innerHTML]="videoHTMLSupport"></div>
8 8
9 <div class="modal-footer inputs"> 9 <div class="modal-footer inputs">
10 <span i18n class="action-button action-button-cancel" (click)="hide()">Maybe later</span> 10 <input
11 type="button" role="button" i18n-value value="Maybe later" class="action-button action-button-cancel"
12 (click)="hide()" (key.enter)="hide()"
13 >
11 </div> 14 </div>
12</ng-template> 15</ng-template>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 089a58009..c8966d22b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -25,6 +25,7 @@ body {
25 // for css custom properties #{$var} 25 // for css custom properties #{$var}
26 --mainColor: #{$main-color}; 26 --mainColor: #{$main-color};
27 --mainColorLighter: #{$main-color-lighter}; 27 --mainColorLighter: #{$main-color-lighter};
28 --mainColorLightest: #{$main-color-lightest};
28 --mainHoverColor: #{$main-hover-color}; 29 --mainHoverColor: #{$main-hover-color};
29 --mainBackgroundColor: #{$bg-color}; 30 --mainBackgroundColor: #{$bg-color};
30 --mainForegroundColor: #{$fg-color}; 31 --mainForegroundColor: #{$fg-color};
@@ -113,6 +114,7 @@ label {
113.main-col { 114.main-col {
114 margin-left: $menu-width; 115 margin-left: $menu-width;
115 width: calc(100% - #{$menu-width}); 116 width: calc(100% - #{$menu-width});
117 outline: none;
116 118
117 .margin-content { 119 .margin-content {
118 margin-left: $not-expanded-horizontal-margins; 120 margin-left: $not-expanded-horizontal-margins;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 297f1f18a..f0357b579 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -230,3 +230,20 @@ ngb-tooltip-window {
230 background-color: var(--secondaryColor); 230 background-color: var(--secondaryColor);
231 } 231 }
232} 232}
233
234// input box-shadow on focus
235.form-control {
236 font-size: 15px;
237 color: var(--mainForegroundColor);
238 background-color: var(--inputBackgroundColor);
239 outline: none;
240
241 &:focus-within,
242 &:focus {
243 box-shadow: 0 0 0 .2rem var(--mainColorLightest);
244
245 &.input-error {
246 box-shadow: 0 0 0 .2rem #{scale-color($red, $alpha: -75%)};
247 }
248 }
249}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index f96a43b34..76e3f3f97 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -80,9 +80,10 @@
80 } 80 }
81} 81}
82 82
83@mixin button-focus-visible-shadow($color) { 83@mixin button-focus($color) {
84 &:focus,
84 &.focus-visible { 85 &.focus-visible {
85 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color; 86 box-shadow: 0 0 0 .2rem $color;
86 } 87 }
87} 88}
88 89
@@ -127,7 +128,7 @@
127} 128}
128 129
129@mixin orange-button { 130@mixin orange-button {
130 @include button-focus-visible-shadow(var(--mainHoverColor)); 131 @include button-focus(var(--mainColorLightest));
131 132
132 &, &:active, &:focus { 133 &, &:active, &:focus {
133 color: #fff; 134 color: #fff;
@@ -151,6 +152,8 @@
151} 152}
152 153
153@mixin tertiary-button { 154@mixin tertiary-button {
155 @include button-focus($grey-button-outline-color);
156
154 color: $grey-foreground-color; 157 color: $grey-foreground-color;
155 background-color: transparent; 158 background-color: transparent;
156 159
@@ -164,6 +167,8 @@
164} 167}
165 168
166@mixin grey-button { 169@mixin grey-button {
170 @include button-focus($grey-button-outline-color);
171
167 &, &:active, &:focus { 172 &, &:active, &:focus {
168 background-color: $grey-background-color; 173 background-color: $grey-background-color;
169 color: $grey-foreground-color; 174 color: $grey-foreground-color;
@@ -274,10 +279,8 @@
274@mixin peertube-select-container ($width) { 279@mixin peertube-select-container ($width) {
275 padding: 0; 280 padding: 0;
276 margin: 0; 281 margin: 0;
277 border: 1px solid #C6C6C6;
278 width: $width; 282 width: $width;
279 border-radius: 3px; 283 border-radius: 3px;
280 overflow: hidden;
281 background: var(--inputBackgroundColor); 284 background: var(--inputBackgroundColor);
282 position: relative; 285 position: relative;
283 font-size: 15px; 286 font-size: 15px;
@@ -303,8 +306,7 @@
303 width: calc(100% + 2px); 306 width: calc(100% + 2px);
304 position: relative; 307 position: relative;
305 left: 1px; 308 left: 1px;
306 border: none; 309 border: 1px solid #C6C6C6;
307 box-shadow: none;
308 background: transparent none; 310 background: transparent none;
309 appearance: none; 311 appearance: none;
310 cursor: pointer; 312 cursor: pointer;
@@ -370,7 +372,7 @@
370 position: absolute; 372 position: absolute;
371 373
372 &:focus + span { 374 &:focus + span {
373 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); 375 box-shadow: 0 0 0 .2rem var(--mainColorLightest);
374 } 376 }
375 377
376 & + span { 378 & + span {
@@ -703,3 +705,72 @@
703 text-align: center; 705 text-align: center;
704 } 706 }
705} 707}
708
709@mixin ng2-tags {
710 ::ng-deep {
711 .ng2-tag-input {
712 border: none !important;
713 }
714
715 .ng2-tags-container {
716 display: flex;
717 align-items: center;
718 border: 1px solid #C6C6C6;
719 border-radius: 3px;
720 padding: 5px !important;
721 height: max-content;
722
723 &:focus-within {
724 box-shadow: 0 0 0 .2rem var(--mainColorLightest);
725 }
726 }
727
728 tag-input-form {
729 input {
730 height: 30px !important;
731 font-size: 12px !important;
732
733 background-color: var(--mainBackgroundColor) !important;
734 color: var(--mainForegroundColor) !important;
735 }
736 }
737
738 tag {
739 background-color: $grey-background-color !important;
740 color: #000 !important;
741 border-radius: 3px !important;
742 font-size: 12px !important;
743 height: 30px !important;
744 line-height: 30px !important;
745 margin: 0 5px 0 0 !important;
746 cursor: default !important;
747 padding: 0 8px 0 10px !important;
748
749 div {
750 height: 100% !important;
751 }
752 }
753
754 delete-icon {
755 cursor: pointer !important;
756 height: auto !important;
757 vertical-align: middle !important;
758 padding-left: 6px !important;
759
760 svg {
761 position: relative;
762 top: -1px;
763 height: auto !important;
764 vertical-align: middle !important;
765
766 path {
767 fill: $grey-foreground-color !important;
768 }
769 }
770
771 &:hover {
772 transform: none !important;
773 }
774 }
775 }
776}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 3c9fa5939..d0f1a3630 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -12,11 +12,13 @@ $grey-background-color: #E5E5E5;
12$grey-background-hover-color: #EFEFEF; 12$grey-background-hover-color: #EFEFEF;
13$grey-foreground-color: #585858; 13$grey-foreground-color: #585858;
14$grey-foreground-hover-color: #303030; 14$grey-foreground-hover-color: #303030;
15$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
15 16
16// Palette 17// Palette
17$main-color: hsl(24, 90%, 50%); 18$main-color: hsl(24, 90%, 50%);
18$main-hover-color: lighten($main-color, 5%); 19$main-hover-color: lighten($main-color, 5%);
19$main-color-lighter: lighten($main-color, 10%); 20$main-color-lighter: lighten($main-color, 10%);
21$main-color-lightest: lighten($main-color, 40%);
20$secondary-color: hsl(187, 77, 34); 22$secondary-color: hsl(187, 77, 34);
21// 23//
22 24
@@ -77,6 +79,7 @@ $activated-action-button-color: black;
77$variables: ( 79$variables: (
78 --mainColor: var(--mainColor), 80 --mainColor: var(--mainColor),
79 --mainColorLighter: var(--mainColorLighter), 81 --mainColorLighter: var(--mainColorLighter),
82 --mainColorLightest: var(--mainColorLightest),
80 --mainHoverColor: var(--mainHoverColor), 83 --mainHoverColor: var(--mainHoverColor),
81 --mainBackgroundColor: var(--mainBackgroundColor), 84 --mainBackgroundColor: var(--mainBackgroundColor),
82 --mainForegroundColor: var(--mainForegroundColor), 85 --mainForegroundColor: var(--mainForegroundColor),