Fix classic select and ng select css inconsistency

diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
index 47c323d6d2b55d538c62ac05f92a01ca3b2dd0b7..840e449ea7a832038bc988efb9138f1e35e3b038 100644 (file)
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
@@ -20,6 +20,11 @@ input[type=text] {
   @include peertube-select-container(340px);
 }
 
+my-select-channel {
+  display: block;
+  max-width: 340px;
+}
+
 input[type=submit] {
   @include peertube-button;
   @include orange-button;

diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index 7284ad00f6a3ca6f1663a9381776109fcbd1266b..594999d6634690c9f6c33b730cdbb6c45869c609 100644 (file)
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -17,7 +17,7 @@ $width-size: 250px;
   align-items: center;
 
   .upload-icon {
-    @include apply-svg-color(#C6C6C6);
+    @include apply-svg-color($input-border-color);
 
     width: 90px;
     margin-bottom: 25px;

diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
index fb79991db55e852353f3518f9fc5cd96b6bc8f81..ae889dd384950608c670f446625333715d75b0a4 100644 (file)
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
@@ -57,8 +57,8 @@ form {
       width: $markdown-icon-width;
 
       svg {
-        color: #C6C6C6;
-        fill: #C6C6C6;
+        color: $input-border-color;
+        fill: $input-border-color;
         border-radius: 3px;
       }
     }
@@ -67,7 +67,7 @@ form {
     &:active,
     &:hover {
       my-global-icon svg {
-        background-color: #C6C6C6;
+        background-color: $input-border-color;
         color: pvar(--mainBackgroundColor);
         fill: pvar(--mainBackgroundColor);
       }

diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 0b4872d46661fcc51bf2a494f040b428ad571c18..5939bb99937c798d9be11e4e41653acfebe4f997 100644 (file)
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -4,7 +4,6 @@
 
 $nav-preview-tab-height: 30px;
 $base-padding: 15px;
-$input-border-color: #C6C6C6;
 $input-border-radius: 3px;
 
 @mixin in-small-view {

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index a0bdfb3dcc1df8e478380d726e2e44b83ff0fac8..3c5aa6cdf4f26802c39feff1f8f4890349bb2437 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -91,7 +91,7 @@
   width: $width;
   color: pvar(--inputForegroundColor);
   background-color: pvar(--inputBackgroundColor);
-  border: 1px solid #C6C6C6;
+  border: 1px solid $input-border-color;
   border-radius: 3px;
   font-size: 15px;
 
@@ -150,7 +150,7 @@
   &.disabled {
     cursor: default;
     color: #fff;
-    background-color: #C6C6C6;
+    background-color: $input-border-color;
   }
 
   my-global-icon {
@@ -180,7 +180,7 @@
   &.disabled {
     cursor: default;
     color: pvar(--mainColor);
-    background-color: #C6C6C6;
+    background-color: $input-border-color;
   }
 
   my-global-icon {
@@ -396,10 +396,9 @@
   select {
     padding: 0 35px 0 12px;
     position: relative;
-    border: 1px solid #C6C6C6;
+    border: 1px solid $input-border-color;
     background: transparent none;
     appearance: none;
-    cursor: pointer;
     height: $button-height;
     text-overflow: ellipsis;
     color: pvar(--mainForegroundColor);
@@ -460,7 +459,7 @@
     top: 0;
     width: 18px;
     height: 18px;
-    border: 1px solid #C6C6C6;
+    border: 1px solid $input-border-color;
     border-radius: 100%;
     background: #fff;
   }
@@ -507,7 +506,7 @@
     width: 18px;
     min-width: 18px;
     height: 18px;
-    border: $border-width solid #C6C6C6;
+    border: $border-width solid $input-border-color;
     border-radius: 3px;
     vertical-align: middle;
     cursor: pointer;
@@ -670,7 +669,7 @@
   margin-bottom: 20px;
 
   @if $separator {
-    border-bottom: 1px solid #C6C6C6;
+    border-bottom: 1px solid $input-border-color;
   }
 
   @media screen and (max-width: $small-view) {

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index fd1b137dce714101ec0bec1bbad60c7d3e2b3a86..e46b96d8a9291154473d4d1365b5ef5723f3348c 100644 (file)
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -84,6 +84,7 @@ $theater-bottom-space: 115px;
 $input-foreground-color: $fg-color;
 $input-background-color: $bg-color;
 $input-placeholder-color: #898989;
+$input-border-color: #C6C6C6;
 
 $textarea-foreground-color: $fg-color;
 $textarea-background-color: $bg-color;

diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 97e61e0689bbeafbf8ad8144750298fdd7af67bf..b1b82b5730a2c0771bf7d9d275aa5b51be876814 100644 (file)
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -4,7 +4,7 @@
 $ng-select-highlight: #f2690d;
 // $ng-select-primary-text: #333 !default;
 // $ng-select-disabled-text: #f9f9f9 !default;
-// $ng-select-border: #ccc !default;
+$ng-select-border: $input-border-color;
 // $ng-select-border-radius: 4px !default;
 // $ng-select-bg: #ffffff !default;
 // $ng-select-selected: lighten($ng-select-highlight, 46) !default;
@@ -46,6 +46,14 @@ $ng-select-value-font-size: 15px;
     @include padding-right(12px);
   }
 
+  .ng-arrow {
+    border-color: #000 transparent transparent !important;
+  }
+
+  &.ng-select-opened .ng-arrow {
+    border-color: transparent transparent #000 !important;
+  }
+
   &.ng-select-single .ng-value-container .ng-value {
     color: pvar(--inputForegroundColor);