From efc84bdc494a3b102e4aa8bc2d24a3766bd0d751 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 22 May 2020 11:07:23 +0200 Subject: [PATCH 1/3] Fix notification with dark theme --- client/src/sass/primeng-custom.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index 33483533e..056b88fc1 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -521,6 +521,7 @@ p-toast { .ui-toast-message { font-family: $main-fonts; background-color: var(--mainBackgroundColor) !important; + color: var(--mainForegroundColor) !important; border-radius: 5px; box-sizing: border-box; border: 1px solid #EBEEF5 !important; From 5f57df54627c61817226768bb360a8a93ea2c0b9 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 22 May 2020 11:15:31 +0200 Subject: [PATCH 2/3] Fix action button icons theme --- .../app/videos/+video-watch/video-watch.component.scss | 10 +++++----- client/src/sass/application.scss | 2 ++ client/src/sass/include/_variables.scss | 2 ++ 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 977312a83..e59e6613b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -255,21 +255,21 @@ $video-info-margin-left: 44px; &.action-button-like.activated { .count { - color: $activated-action-button-color; + color: var(--activatedActionButtonColor); } my-global-icon { - @include apply-svg-color($activated-action-button-color); + @include apply-svg-color(var(--activatedActionButtonColor)); } } &.action-button-dislike.activated { .count { - color: $activated-action-button-color; + color: var(--activatedActionButtonColor); } my-global-icon { - @include apply-svg-color($activated-action-button-color); + @include apply-svg-color(var(--activatedActionButtonColor)); } } @@ -325,7 +325,7 @@ $video-info-margin-left: 44px; background-color: #909090; &.liked { - background-color: $activated-action-button-color; + background-color: var(--activatedActionButtonColor); } } } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 17ed5c8f8..22e1151c8 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -48,6 +48,8 @@ body { --supportButtonColor: #{var(--actionButtonColor)}; --supportButtonHeartColor: #{$support-button-heart}; + --activatedActionButtonColor: #{$activated-action-button-color}; + font-family: $main-fonts; font-weight: $font-regular; color: var(--mainForegroundColor); diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index cdac8ae6f..58955802c 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -104,6 +104,8 @@ $variables: ( --markdownTextareaBackgroundColor: var(--markdownTextareaBackgroundColor), --actionButtonColor: var(--actionButtonColor), + --activatedActionButtonColor: var(--activatedActionButtonColor), + --supportButtonColor: var(--supportButtonColor), --supportButtonBackgroundColor: var(--supportButtonBackgroundColor), --supportButtonHeartColor: var(--supportButtonHeartColor), From c123027fd962a14433a325f85d2734b94a4df3ae Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 22 May 2020 11:21:55 +0200 Subject: [PATCH 3/3] Fix grey color theme --- .../+admin/plugins/shared/plugin-list.component.scss | 8 ++++---- .../app/shared/users/user-notifications.component.scss | 2 +- .../video-add-to-playlist.component.scss | 2 +- .../video-playlist-element-miniature.component.scss | 8 ++++---- .../video-playlist-miniature.component.scss | 4 ++-- .../shared/video/modals/video-download.component.scss | 2 +- .../app/shared/video/video-miniature.component.scss | 2 +- .../+video-edit/shared/video-edit.component.scss | 2 +- .../+video-watch/comment/video-comment.component.scss | 6 +++--- .../+video-watch/video-watch-playlist.component.scss | 2 +- .../app/videos/+video-watch/video-watch.component.scss | 4 ++-- client/src/sass/application.scss | 2 ++ client/src/sass/include/_miniature.scss | 4 ++-- client/src/sass/include/_mixins.scss | 10 +++++----- client/src/sass/include/_variables.scss | 2 ++ 15 files changed, 32 insertions(+), 28 deletions(-) diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss index 3f4fad7b9..1daa7b741 100644 --- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss +++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss @@ -23,12 +23,12 @@ .plugin-icon { margin-left: 10px; - + my-global-icon { - @include apply-svg-color($grey-foreground-color); - + @include apply-svg-color(var(--greyForegroundColor)); + &[iconName="npm"] { - @include fill-svg-color($grey-foreground-color); + @include fill-svg-color(var(--greyForegroundColor)); } } } diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss index 59e1bcc26..ddd7abe8a 100644 --- a/client/src/app/shared/users/user-notifications.component.scss +++ b/client/src/app/shared/users/user-notifications.component.scss @@ -44,7 +44,7 @@ .from-date { font-size: 0.85em; - color: $grey-foreground-color; + color: var(--greyForegroundColor); padding-left: 5px; min-width: 70px; text-align: right; diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss index 1724449e8..f572dd902 100644 --- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss +++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss @@ -68,7 +68,7 @@ .timestamp-info { font-size: 0.9em; - color: $grey-foreground-color; + color: var(--greyForegroundColor); margin-left: 5px; } } diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss index 4680732be..649272c52 100644 --- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss @@ -58,11 +58,11 @@ my-video-thumbnail, .position { font-weight: $font-semibold; margin-right: 10px; - color: $grey-foreground-color; + color: var(--greyForegroundColor); min-width: 25px; my-global-icon { - @include apply-svg-color($grey-foreground-color); + @include apply-svg-color(var(--greyForegroundColor)); width: 17px; position: relative; @@ -81,7 +81,7 @@ my-video-thumbnail, } .video-info-account, .video-info-timestamp { - color: $grey-foreground-color; + color: var(--greyForegroundColor); } } } @@ -109,7 +109,7 @@ my-video-thumbnail, } .icon-more { - @include apply-svg-color($grey-foreground-color); + @include apply-svg-color(var(--greyForegroundColor)); display: flex; diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss index 8947e72d1..527993496 100644 --- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss @@ -53,7 +53,7 @@ @include disable-default-a-behaviour; display: block; - color: $grey-foreground-color; + color: var(--greyForegroundColor); } .privacy-date { @@ -72,7 +72,7 @@ .video-info-description { margin-top: 10px; - color: $grey-foreground-color; + color: var(--greyForegroundColor); } } } diff --git a/client/src/app/shared/video/modals/video-download.component.scss b/client/src/app/shared/video/modals/video-download.component.scss index f28bc34ed..7e2dd7d2f 100644 --- a/client/src/app/shared/video/modals/video-download.component.scss +++ b/client/src/app/shared/video/modals/video-download.component.scss @@ -41,7 +41,7 @@ min-width: 142px; padding-right: 5px; display: inline-block; - color: $grey-foreground-color; + color: var(--greyForegroundColor); font-weight: $font-bold; } diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index f27800a24..23d918d00 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -36,7 +36,7 @@ $more-margin-right: 15px; display: block; font-size: 13px; - color: $grey-foreground-color; + color: var(--greyForegroundColor); &:hover { color: $grey-foreground-hover-color; 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 2f9067132..0702ebf22 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 @@ -122,7 +122,7 @@ my-peertube-checkbox { display: inline-block; margin-right: 25px; - color: $grey-foreground-color; + color: var(--greyForegroundColor); font-size: 15px; } diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss index 7c4656931..33204de3b 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss +++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss @@ -80,7 +80,7 @@ .comment-date { font-size: 90%; - color: $grey-foreground-color; + color: var(--greyForegroundColor); margin-left: 5px; text-decoration: none; } @@ -108,7 +108,7 @@ } &.comment-html-deleted { - color: $grey-foreground-color; + color: var(--greyForegroundColor); margin-bottom: 1rem; } } @@ -120,7 +120,7 @@ ::ng-deep .dropdown-toggle, .comment-action-reply, .comment-action-delete { - color: $grey-foreground-color; + color: var(--greyForegroundColor); cursor: pointer; margin-right: 10px; diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss index 0dd318cb0..db36dcd8b 100644 --- a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss +++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss @@ -22,7 +22,7 @@ } .playlist-by-index { - color: $grey-foreground-color; + color: var(--greyForegroundColor); display: flex; .playlist-by { diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index e59e6613b..431a21039 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -356,7 +356,7 @@ $video-info-margin-left: 44px; .video-info-description-more { cursor: pointer; font-weight: $font-semibold; - color: $grey-foreground-color; + color: var(--greyForegroundColor); font-size: 14px; .glyphicon { @@ -379,7 +379,7 @@ $video-info-margin-left: 44px; min-width: 142px; padding-right: 5px; display: inline-block; - color: $grey-foreground-color; + color: var(--greyForegroundColor); font-weight: $font-bold; } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 22e1151c8..16e7ea5ca 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -31,6 +31,8 @@ body { --mainForegroundColor: #{$fg-color}; --secondaryColor: #{$secondary-color}; + --greyForegroundColor: #{$grey-foreground-color}; + --menuBackgroundColor: #{$menu-background}; --menuForegroundColor: #{$menu-color}; --submenuColor: #{$sub-menu-color}; diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index c937a0f72..d0ee1e2f0 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -187,7 +187,7 @@ $play-overlay-width: 18px; } .followers { - color: $grey-foreground-color; + color: var(--greyForegroundColor); font-weight: normal; font-size: 14px; margin-left: 10px; @@ -203,7 +203,7 @@ $play-overlay-width: 18px; display: inline-block; font-size: 16px; text-transform: uppercase; - color: $grey-foreground-color; + color: var(--greyForegroundColor); margin-bottom: 10px; font-weight: $font-semibold; text-decoration: none; diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 99ca25f9c..80a090159 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -156,7 +156,7 @@ @mixin tertiary-button { @include button-focus($grey-button-outline-color); - color: $grey-foreground-color; + color: var(--greyForegroundColor); background-color: transparent; &[disabled], &.disabled { @@ -173,11 +173,11 @@ &, &:active, &:focus { background-color: $grey-background-color; - color: $grey-foreground-color; + color: var(--greyForegroundColor); } &:hover, &:active, &:focus, &[disabled], &.disabled { - color: $grey-foreground-color; + color: var(--greyForegroundColor); background-color: $grey-background-hover-color; } @@ -186,7 +186,7 @@ } my-global-icon { - @include apply-svg-color($grey-foreground-color) + @include apply-svg-color(var(--greyForegroundColor)) } } @@ -769,7 +769,7 @@ vertical-align: middle !important; path { - fill: $grey-foreground-color !important; + fill: var(--greyForegroundColor) !important; } } diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 58955802c..11561e268 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -91,6 +91,8 @@ $variables: ( --mainForegroundColor: var(--mainForegroundColor), --secondaryColor: var(--secondaryColor), + --greyForegroundColor: var(--greyForegroundColor), + --menuBackgroundColor: var(--menuBackgroundColor), --menuForegroundColor: var(--menuForegroundColor), --submenuColor: var(--submenuColor),