From 1fd3ef3fb49cf5482f2ab6f827a2b059a44f409c Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Thu, 20 Sep 2018 20:57:18 +0200
Subject: [PATCH] fix nav tab and tag color in dark theme
---
.../following-add/following-add.component.scss | 7 +++++++
.../shared/video-edit.component.scss | 8 +++++---
client/src/sass/application.scss | 5 +++++
client/src/sass/primeng-custom.scss | 17 +++++++++--------
4 files changed, 26 insertions(+), 11 deletions(-)
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.scss b/client/src/app/+admin/follows/following-add/following-add.component.scss
index 7594b502c2..1baddc95fe 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.scss
+++ b/client/src/app/+admin/follows/following-add/following-add.component.scss
@@ -5,6 +5,13 @@ textarea {
height: 250px;
}
+.form-control {
+ &, &:focus {
+ background-color: var(--inputColor);
+ color: var(--mainForegroundColor);
+ }
+}
+
input[type=submit] {
@include peertube-button;
@include orange-button;
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 4d18712310..b039d7ad41 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -164,15 +164,17 @@ p-calendar {
tag-input-form {
input {
height: 30px !important;
- background-color: #fff !important;
+
+ background-color: var(--mainBackgroundColor) !important;
+ color: var(--mainForegroundColor) !important;
}
}
tag {
- background-color: #E5E5E5 !important;
+ background-color: var(--inputColor) !important;
border-radius: 3px !important;
font-size: 15px !important;
- color: #000 !important;
+ color: var(--mainForegroundColor) !important;
height: 30px !important;
line-height: 30px !important;
margin: 0 5px 0 0 !important;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index f21b91d2ed..bc443b8d5d 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -283,6 +283,11 @@ ngb-tabset.bootstrap {
}
}
+.nav-tabs .nav-link.active {
+ background-color: var(--mainBackgroundColor) !important;
+ border-bottom: none;
+}
+
.orange-button {
@include peertube-button;
@include orange-button;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index d99c5b96a0..da67992508 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -7,7 +7,7 @@
@mixin glyphicon-light {
font-family: 'Glyphicons Halflings';
text-decoration: none !important;
- color: #000 !important;
+ color: var(--mainForegroundColor) !important;
}
// data table customizations
@@ -33,7 +33,7 @@ p-table {
.ui-table-tbody {
tr {
&:hover {
- background-color: #f0f0f0 !important;
+ background-color: var(--submenuColor) !important;
}
&:not(:hover) {
@@ -60,15 +60,15 @@ p-table {
th {
border: none !important;
- border-bottom: 1px solid #f0f0f0 !important;
+ border-bottom: 1px solid var(--submenuColor) !important;
text-align: left !important;
padding: 5px 0 5px 15px !important;
font-weight: $font-semibold !important;
- color: #000 !important;
+ color: var(--mainForegroundColor) !important;
&.ui-sortable-column:hover {
- background-color: #f0f0f0 !important;
- border: 1px solid #f0f0f0 !important;
+ background-color: var(--submenuColor) !important;
+ border: 1px solid var(--submenuColor) !important;
border-width: 0 1px !important;
&:first-child {
@@ -77,7 +77,7 @@ p-table {
}
&.ui-state-highlight {
- background-color: #fff !important;
+ background-color:var(--submenuColor) !important;
.pi {
@extend .glyphicon;
@@ -109,8 +109,9 @@ p-table {
p-paginator {
.ui-paginator-bottom {
+ background-color: var(--mainBackgroundColor) !important;
position: relative;
- border: 1px solid #f0f0f0 !important;
+ border: 1px solid var(--submenuColor) !important;
height: 40px;
display: flex;
justify-content: center;
--
GitLab