aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-10 10:18:44 +0200
committerChocobozzz <me@florianbigard.com>2022-06-10 10:18:44 +0200
commitbffee1d538aa7b51b78d646a0d372b352c073cd8 (patch)
tree333f368fa9dc7682eb25d3a72a1cfab43b558724 /client
parenta3d7aadb6dee3c23828672ddcc1227f412674e22 (diff)
downloadPeerTube-bffee1d538aa7b51b78d646a0d372b352c073cd8.tar.gz
PeerTube-bffee1d538aa7b51b78d646a0d372b352c073cd8.tar.zst
PeerTube-bffee1d538aa7b51b78d646a0d372b352c073cd8.zip
Fix classic select and ng select css inconsistency
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss5
-rw-r--r--client/src/app/+videos/+video-edit/video-add-components/video-send.scss2
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss6
-rw-r--r--client/src/app/shared/shared-forms/markdown-textarea.component.scss1
-rw-r--r--client/src/sass/include/_mixins.scss15
-rw-r--r--client/src/sass/include/_variables.scss1
-rw-r--r--client/src/sass/ng-select.scss10
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] {
20 @include peertube-select-container(340px); 20 @include peertube-select-container(340px);
21} 21}
22 22
23my-select-channel {
24 display: block;
25 max-width: 340px;
26}
27
23input[type=submit] { 28input[type=submit] {
24 @include peertube-button; 29 @include peertube-button;
25 @include orange-button; 30 @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;
17 align-items: center; 17 align-items: center;
18 18
19 .upload-icon { 19 .upload-icon {
20 @include apply-svg-color(#C6C6C6); 20 @include apply-svg-color($input-border-color);
21 21
22 width: 90px; 22 width: 90px;
23 margin-bottom: 25px; 23 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 {
57 width: $markdown-icon-width; 57 width: $markdown-icon-width;
58 58
59 svg { 59 svg {
60 color: #C6C6C6; 60 color: $input-border-color;
61 fill: #C6C6C6; 61 fill: $input-border-color;
62 border-radius: 3px; 62 border-radius: 3px;
63 } 63 }
64 } 64 }
@@ -67,7 +67,7 @@ form {
67 &:active, 67 &:active,
68 &:hover { 68 &:hover {
69 my-global-icon svg { 69 my-global-icon svg {
70 background-color: #C6C6C6; 70 background-color: $input-border-color;
71 color: pvar(--mainBackgroundColor); 71 color: pvar(--mainBackgroundColor);
72 fill: pvar(--mainBackgroundColor); 72 fill: pvar(--mainBackgroundColor);
73 } 73 }
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 @@
4 4
5$nav-preview-tab-height: 30px; 5$nav-preview-tab-height: 30px;
6$base-padding: 15px; 6$base-padding: 15px;
7$input-border-color: #C6C6C6;
8$input-border-radius: 3px; 7$input-border-radius: 3px;
9 8
10@mixin in-small-view { 9@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 @@
91 width: $width; 91 width: $width;
92 color: pvar(--inputForegroundColor); 92 color: pvar(--inputForegroundColor);
93 background-color: pvar(--inputBackgroundColor); 93 background-color: pvar(--inputBackgroundColor);
94 border: 1px solid #C6C6C6; 94 border: 1px solid $input-border-color;
95 border-radius: 3px; 95 border-radius: 3px;
96 font-size: 15px; 96 font-size: 15px;
97 97
@@ -150,7 +150,7 @@
150 &.disabled { 150 &.disabled {
151 cursor: default; 151 cursor: default;
152 color: #fff; 152 color: #fff;
153 background-color: #C6C6C6; 153 background-color: $input-border-color;
154 } 154 }
155 155
156 my-global-icon { 156 my-global-icon {
@@ -180,7 +180,7 @@
180 &.disabled { 180 &.disabled {
181 cursor: default; 181 cursor: default;
182 color: pvar(--mainColor); 182 color: pvar(--mainColor);
183 background-color: #C6C6C6; 183 background-color: $input-border-color;
184 } 184 }
185 185
186 my-global-icon { 186 my-global-icon {
@@ -396,10 +396,9 @@
396 select { 396 select {
397 padding: 0 35px 0 12px; 397 padding: 0 35px 0 12px;
398 position: relative; 398 position: relative;
399 border: 1px solid #C6C6C6; 399 border: 1px solid $input-border-color;
400 background: transparent none; 400 background: transparent none;
401 appearance: none; 401 appearance: none;
402 cursor: pointer;
403 height: $button-height; 402 height: $button-height;
404 text-overflow: ellipsis; 403 text-overflow: ellipsis;
405 color: pvar(--mainForegroundColor); 404 color: pvar(--mainForegroundColor);
@@ -460,7 +459,7 @@
460 top: 0; 459 top: 0;
461 width: 18px; 460 width: 18px;
462 height: 18px; 461 height: 18px;
463 border: 1px solid #C6C6C6; 462 border: 1px solid $input-border-color;
464 border-radius: 100%; 463 border-radius: 100%;
465 background: #fff; 464 background: #fff;
466 } 465 }
@@ -507,7 +506,7 @@
507 width: 18px; 506 width: 18px;
508 min-width: 18px; 507 min-width: 18px;
509 height: 18px; 508 height: 18px;
510 border: $border-width solid #C6C6C6; 509 border: $border-width solid $input-border-color;
511 border-radius: 3px; 510 border-radius: 3px;
512 vertical-align: middle; 511 vertical-align: middle;
513 cursor: pointer; 512 cursor: pointer;
@@ -670,7 +669,7 @@
670 margin-bottom: 20px; 669 margin-bottom: 20px;
671 670
672 @if $separator { 671 @if $separator {
673 border-bottom: 1px solid #C6C6C6; 672 border-bottom: 1px solid $input-border-color;
674 } 673 }
675 674
676 @media screen and (max-width: $small-view) { 675 @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;
84$input-foreground-color: $fg-color; 84$input-foreground-color: $fg-color;
85$input-background-color: $bg-color; 85$input-background-color: $bg-color;
86$input-placeholder-color: #898989; 86$input-placeholder-color: #898989;
87$input-border-color: #C6C6C6;
87 88
88$textarea-foreground-color: $fg-color; 89$textarea-foreground-color: $fg-color;
89$textarea-background-color: $bg-color; 90$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 @@
4$ng-select-highlight: #f2690d; 4$ng-select-highlight: #f2690d;
5// $ng-select-primary-text: #333 !default; 5// $ng-select-primary-text: #333 !default;
6// $ng-select-disabled-text: #f9f9f9 !default; 6// $ng-select-disabled-text: #f9f9f9 !default;
7// $ng-select-border: #ccc !default; 7$ng-select-border: $input-border-color;
8// $ng-select-border-radius: 4px !default; 8// $ng-select-border-radius: 4px !default;
9// $ng-select-bg: #ffffff !default; 9// $ng-select-bg: #ffffff !default;
10// $ng-select-selected: lighten($ng-select-highlight, 46) !default; 10// $ng-select-selected: lighten($ng-select-highlight, 46) !default;
@@ -46,6 +46,14 @@ $ng-select-value-font-size: 15px;
46 @include padding-right(12px); 46 @include padding-right(12px);
47 } 47 }
48 48
49 .ng-arrow {
50 border-color: #000 transparent transparent !important;
51 }
52
53 &.ng-select-opened .ng-arrow {
54 border-color: transparent transparent #000 !important;
55 }
56
49 &.ng-select-single .ng-value-container .ng-value { 57 &.ng-select-single .ng-value-container .ng-value {
50 color: pvar(--inputForegroundColor); 58 color: pvar(--inputForegroundColor);
51 59