forks/peertube
1
0
Fork 0
Code Releases Activity

Fix classic select and ng select css inconsistency

Browse source
This commit is contained in:
Chocobozzz 2022-06-10 10:18:44 +02:00
parent a3d7aadb6d
commit bffee1d538
No known key found for this signature in database
GPG key ID: 583A612D890159BE
7 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
View file

@ -20,6 +20,11 @@ input[type=text] {
@include peertube-select-container(340px); @include peertube-select-container(340px);
} }
my-select-channel {
display: block;
max-width: 340px;
}
input[type=submit] { input[type=submit] {
@include peertube-button; @include peertube-button;
@include orange-button; @include orange-button;

2
client/src/app/+videos/+video-edit/video-add-components/video-send.scss
View file

@ -17,7 +17,7 @@ $width-size: 250px;
align-items: center; align-items: center;
.upload-icon { .upload-icon {
@include apply-svg-color(#C6C6C6); @include apply-svg-color($input-border-color);
width: 90px; width: 90px;
margin-bottom: 25px; margin-bottom: 25px;

6
client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
View file

@ -57,8 +57,8 @@ form {
width: $markdown-icon-width; width: $markdown-icon-width;
svg { svg {
color: #C6C6C6; color: $input-border-color;
fill: #C6C6C6; fill: $input-border-color;
border-radius: 3px; border-radius: 3px;
} }
} }
@ -67,7 +67,7 @@ form {
&:active, &:active,
&:hover { &:hover {
my-global-icon svg { my-global-icon svg {
background-color: #C6C6C6; background-color: $input-border-color;
color: pvar(--mainBackgroundColor); color: pvar(--mainBackgroundColor);
fill: pvar(--mainBackgroundColor); fill: pvar(--mainBackgroundColor);
} }

1
client/src/app/shared/shared-forms/markdown-textarea.component.scss
View file

@ -4,7 +4,6 @@
$nav-preview-tab-height: 30px; $nav-preview-tab-height: 30px;
$base-padding: 15px; $base-padding: 15px;
$input-border-color: #C6C6C6;
$input-border-radius: 3px; $input-border-radius: 3px;
@mixin in-small-view { @mixin in-small-view {

15
client/src/sass/include/_mixins.scss
View file

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

1
client/src/sass/include/_variables.scss
View file

@ -84,6 +84,7 @@ $theater-bottom-space: 115px;
$input-foreground-color: $fg-color; $input-foreground-color: $fg-color;
$input-background-color: $bg-color; $input-background-color: $bg-color;
$input-placeholder-color: #898989; $input-placeholder-color: #898989;
$input-border-color: #C6C6C6;
$textarea-foreground-color: $fg-color; $textarea-foreground-color: $fg-color;
$textarea-background-color: $bg-color; $textarea-background-color: $bg-color;

10
client/src/sass/ng-select.scss
View file

@ -4,7 +4,7 @@
$ng-select-highlight: #f2690d; $ng-select-highlight: #f2690d;
// $ng-select-primary-text: #333 !default; // $ng-select-primary-text: #333 !default;
// $ng-select-disabled-text: #f9f9f9 !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-border-radius: 4px !default;
// $ng-select-bg: #ffffff !default; // $ng-select-bg: #ffffff !default;
// $ng-select-selected: lighten($ng-select-highlight, 46) !default; // $ng-select-selected: lighten($ng-select-highlight, 46) !default;
@ -46,6 +46,14 @@ $ng-select-value-font-size: 15px;
@include padding-right(12px); @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 { &.ng-select-single .ng-value-container .ng-value {
color: pvar(--inputForegroundColor); color: pvar(--inputForegroundColor);