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 7594b502c..1baddc95f 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 4d1871231..b039d7ad4 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 f21b91d2e..bc443b8d5 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 d99c5b96a..da6799250 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;