From bffee1d538aa7b51b78d646a0d372b352c073cd8 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 10 Jun 2022 10:18:44 +0200 Subject: [PATCH] Fix classic select and ng select css inconsistency --- .../my-video-playlist-edit.component.scss | 5 +++++ .../video-add-components/video-send.scss | 2 +- .../comment/video-comment-add.component.scss | 6 +++--- .../shared-forms/markdown-textarea.component.scss | 1 - client/src/sass/include/_mixins.scss | 15 +++++++-------- client/src/sass/include/_variables.scss | 1 + client/src/sass/ng-select.scss | 10 +++++++++- 7 files changed, 26 insertions(+), 14 deletions(-) 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 47c323d6d..840e449ea 100644 --- 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 7284ad00f..594999d66 100644 --- 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 fb79991db..ae889dd38 100644 --- 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 0b4872d46..5939bb999 100644 --- 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 a0bdfb3dc..3c5aa6cdf 100644 --- 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 fd1b137dc..e46b96d8a 100644 --- 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 97e61e068..b1b82b573 100644 --- 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);