Put box-shadow for input focus in variables, apply form-control to p-multiselect

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 0b292850e26c131a50f4de832552ee84506ca9ce..75e52fa1b645a277e5ecdfc12116689c9d006cef 100644 (file)
--- 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 @@
 
   &:first-child {
     font-size: 16px;
-
-    & > div {
-      font-weight: $font-semibold;
-    }
   }
 
   & > 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 5e95e2f9a0e37b9a4571d3b9a9b48f49f0c0acf5..a755c4d69012c2e0da9f43d0de1316cf36b46d33 100644 (file)
--- 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 @@
 <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
-  <div class="form-group">
+  <div class="form-group form-group-select">
     <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
     <my-help>
       <ng-template ptTemplate="customHtml">
@@ -18,7 +18,7 @@
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="form-group form-group-select">
     <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
     <my-help>
       <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 50da3ff377b53bce0d794da1a03d60e14e2ae481..430250b87590ec10a5383c6685647fecb782871d 100644 (file)
--- 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] {
   @include peertube-select-container(340px);
 
   margin-bottom: 30px;
-}
\ No newline at end of file
+}
+
+.form-group-select {
+  margin-bottom: 30px;
+}

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index f0357b579e17660f59f542be0d07e7c7fc0a582e..e8c4528f43601d87096d60b74516bb19e538b015 100644 (file)
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -240,10 +240,10 @@ ngb-tooltip-window {
 
   &:focus-within,
   &:focus {
-    box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+    box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
 
     &.input-error {
-      box-shadow: 0 0 0 .2rem #{scale-color($red, $alpha: -75%)};
+      box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
     }
   }
 }

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index c1d1b3c590afc82fd372ad53aa3d321174efff7f..5e591cf455ba25bd17bd905b6ae87d19df11dea3 100644 (file)
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -80,7 +80,8 @@ $play-overlay-width: 18px;
   }
 
   &.focus-visible {
-    box-shadow: 0 0 0 2px var(--mainColor);
+    box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+    outline: none;
   }
 
   img {

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index d414704e943e7a2f6d3872b3d5a248f68718717e..56ada6b9e1b8723603895a6e831cafb8059a1b58 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -83,7 +83,7 @@
 @mixin button-focus($color) {
   &:focus,
   &.focus-visible {
-    box-shadow: 0 0 0 .2rem $color;
+    box-shadow: #{$focus-box-shadow-form} $color;
   }
 }
 
@@ -372,7 +372,7 @@
   position: absolute;
 
   &:focus + span {
-    box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+    box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
   }
 
   & + span {
@@ -721,7 +721,7 @@
       height: max-content;
 
       &:focus-within {
-        box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+        box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
       }
     }
 

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d0f1a36301fe0a7f54199dfa1772c1a6adb527cc..f60d8ce942da6bdbed4c3891ca67ba1c74b66d68 100644 (file)
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -72,6 +72,8 @@ $sub-menu-margin-bottom: 30px;
 
 $activated-action-button-color: black;
 
+$focus-box-shadow-form: 0 0 0 .2rem;
+
 /*** map theme ***/
 
 // pass variables into a sass map,

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 06cd3f05728946854ca02cc410a6eb10d6f6d61b..186146b3bf308535e2a8b3be058c3962decf24d2 100644 (file)
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -241,6 +241,21 @@ p-table {
 
 // multiselect customizations
 p-multiselect {
+  .ui-multiselect {
+    border-color: #C6C6C6;
+
+    &:not(.ui-state-disabled) {
+      &:hover {
+        border-color: #C6C6C6;
+      }
+
+      &:focus,
+      &.ui-state-focus {
+        box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+      }
+    }
+  }
+
   .ui-multiselect-label {
     font-size: 15px !important;
     padding: 4px 30px 4px 12px !important;