aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-04-03 12:30:52 +0200
committerRigel Kent <sendmemail@rigelk.eu>2020-04-03 12:30:56 +0200
commit6a4c30de0e2ff82b8df1fc8ab4172ef63bd25566 (patch)
treee704bc3ae81de879a8b4b9b0036ca95c3591efe6
parent23f1b9da1577c64e2caa1dff8f3aa92eb8d184cf (diff)
downloadPeerTube-6a4c30de0e2ff82b8df1fc8ab4172ef63bd25566.tar.gz
PeerTube-6a4c30de0e2ff82b8df1fc8ab4172ef63bd25566.tar.zst
PeerTube-6a4c30de0e2ff82b8df1fc8ab4172ef63bd25566.zip
Put box-shadow for input focus in variables, apply form-control to p-multiselect
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss6
-rw-r--r--client/src/sass/bootstrap.scss4
-rw-r--r--client/src/sass/include/_miniature.scss3
-rw-r--r--client/src/sass/include/_mixins.scss6
-rw-r--r--client/src/sass/include/_variables.scss2
-rw-r--r--client/src/sass/primeng-custom.scss15
8 files changed, 31 insertions, 13 deletions
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index 0b292850e..75e52fa1b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -8,10 +8,6 @@
8 8
9 &:first-child { 9 &:first-child {
10 font-size: 16px; 10 font-size: 16px;
11
12 & > div {
13 font-weight: $font-semibold;
14 }
15 } 11 }
16 12
17 & > div { 13 & > div {
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 5e95e2f9a..a755c4d69 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
@@ -1,5 +1,5 @@
1<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form"> 1<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
2 <div class="form-group"> 2 <div class="form-group form-group-select">
3 <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label> 3 <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
4 <my-help> 4 <my-help>
5 <ng-template ptTemplate="customHtml"> 5 <ng-template ptTemplate="customHtml">
@@ -18,7 +18,7 @@
18 </div> 18 </div>
19 </div> 19 </div>
20 20
21 <div class="form-group"> 21 <div class="form-group form-group-select">
22 <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label> 22 <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
23 <my-help> 23 <my-help>
24 <ng-template ptTemplate="customHtml"> 24 <ng-template ptTemplate="customHtml">
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
index 50da3ff37..430250b87 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
@@ -17,4 +17,8 @@ input[type=submit] {
17 @include peertube-select-container(340px); 17 @include peertube-select-container(340px);
18 18
19 margin-bottom: 30px; 19 margin-bottom: 30px;
20} \ No newline at end of file 20}
21
22.form-group-select {
23 margin-bottom: 30px;
24}
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index f0357b579..e8c4528f4 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -240,10 +240,10 @@ ngb-tooltip-window {
240 240
241 &:focus-within, 241 &:focus-within,
242 &:focus { 242 &:focus {
243 box-shadow: 0 0 0 .2rem var(--mainColorLightest); 243 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
244 244
245 &.input-error { 245 &.input-error {
246 box-shadow: 0 0 0 .2rem #{scale-color($red, $alpha: -75%)}; 246 box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
247 } 247 }
248 } 248 }
249} 249}
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index c1d1b3c59..5e591cf45 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -80,7 +80,8 @@ $play-overlay-width: 18px;
80 } 80 }
81 81
82 &.focus-visible { 82 &.focus-visible {
83 box-shadow: 0 0 0 2px var(--mainColor); 83 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
84 outline: none;
84 } 85 }
85 86
86 img { 87 img {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index d414704e9..56ada6b9e 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -83,7 +83,7 @@
83@mixin button-focus($color) { 83@mixin button-focus($color) {
84 &:focus, 84 &:focus,
85 &.focus-visible { 85 &.focus-visible {
86 box-shadow: 0 0 0 .2rem $color; 86 box-shadow: #{$focus-box-shadow-form} $color;
87 } 87 }
88} 88}
89 89
@@ -372,7 +372,7 @@
372 position: absolute; 372 position: absolute;
373 373
374 &:focus + span { 374 &:focus + span {
375 box-shadow: 0 0 0 .2rem var(--mainColorLightest); 375 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
376 } 376 }
377 377
378 & + span { 378 & + span {
@@ -721,7 +721,7 @@
721 height: max-content; 721 height: max-content;
722 722
723 &:focus-within { 723 &:focus-within {
724 box-shadow: 0 0 0 .2rem var(--mainColorLightest); 724 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
725 } 725 }
726 } 726 }
727 727
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d0f1a3630..f60d8ce94 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -72,6 +72,8 @@ $sub-menu-margin-bottom: 30px;
72 72
73$activated-action-button-color: black; 73$activated-action-button-color: black;
74 74
75$focus-box-shadow-form: 0 0 0 .2rem;
76
75/*** map theme ***/ 77/*** map theme ***/
76 78
77// pass variables into a sass map, 79// pass variables into a sass map,
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 06cd3f057..186146b3b 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -241,6 +241,21 @@ p-table {
241 241
242// multiselect customizations 242// multiselect customizations
243p-multiselect { 243p-multiselect {
244 .ui-multiselect {
245 border-color: #C6C6C6;
246
247 &:not(.ui-state-disabled) {
248 &:hover {
249 border-color: #C6C6C6;
250 }
251
252 &:focus,
253 &.ui-state-focus {
254 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
255 }
256 }
257 }
258
244 .ui-multiselect-label { 259 .ui-multiselect-label {
245 font-size: 15px !important; 260 font-size: 15px !important;
246 padding: 4px 30px 4px 12px !important; 261 padding: 4px 30px 4px 12px !important;