From 33bb9e2af65e805180aa17dd6000a3f4fe238c85 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 30 Apr 2019 17:41:11 +0100 Subject: [PATCH] Update action bar colors for dark theme In addition, this also adjusts the event hover colors to match the palette. Fixes https://github.com/vector-im/riot-web/issues/9591 --- res/css/views/messages/_MessageActionBar.scss | 4 ++-- res/themes/dark/css/_dark.scss | 8 +++++--- res/themes/light/css/_light.scss | 10 ++++++---- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss index fc73d16d8f..f01ef4f04f 100644 --- a/res/css/views/messages/_MessageActionBar.scss +++ b/res/css/views/messages/_MessageActionBar.scss @@ -21,7 +21,7 @@ limitations under the License. display: flex; height: 24px; border-radius: 4px; - background: $primary-bg-color; + background: $message-action-bar-bg-color; top: -13px; right: 8px; user-select: none; @@ -59,7 +59,7 @@ limitations under the License. width: 100%; mask-repeat: no-repeat; mask-position: center; - background-color: $primary-fg-color; + background-color: $message-action-bar-fg-color; } } } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 0d3b40b64f..7c0f8ef9ab 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -40,7 +40,7 @@ $tagpanel-bg-color: $base-color; $selected-color: $room-highlight-color; // selected for hoverover & selected event tiles -$event-selected-color: #111316; +$event-selected-color: $header-panel-bg-color; // used for the hairline dividers in RoomView $primary-hairline-color: $header-panel-border-color; @@ -146,8 +146,10 @@ $room-warning-bg-color: $header-panel-bg-color; $dark-panel-bg-color: $header-panel-bg-color; $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); -$message-action-bar-border-color: $input-darker-bg-color; -$message-action-bar-hover-border-color: $text-secondary-color; +$message-action-bar-bg-color: $header-panel-bg-color; +$message-action-bar-fg-color: $header-panel-text-primary-color; +$message-action-bar-border-color: #616b7f; +$message-action-bar-hover-border-color: $header-panel-text-primary-color; // ***** Mixins! ***** diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index bdd5f10cc9..7451a23991 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -11,7 +11,7 @@ $font-family: 'Nunito', Arial, Helvetica, Sans-Serif; $accent-color: #03b381; $notice-primary-color: #ff4b55; $notice-secondary-color: #61708b; -$header-panel-bg-color: #f2f5f8; +$header-panel-bg-color: #f3f8fd; // typical text (dark-on-white in light skin) $primary-fg-color: #2e2f32; @@ -66,7 +66,7 @@ $droptarget-bg-color: rgba(255,255,255,0.5); $selected-color: $secondary-accent-color; // selected for hoverover & selected event tiles -$event-selected-color: #f7f7f7; +$event-selected-color: $header-panel-bg-color; // used for the hairline dividers in RoomView $primary-hairline-color: #e5e5e5; @@ -254,8 +254,10 @@ $authpage-secondary-color: #61708b; $dark-panel-bg-color: $secondary-accent-color; $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); -$message-action-bar-border-color: $input-darker-bg-color; -$message-action-bar-hover-border-color: $roomtopic-color; +$message-action-bar-bg-color: $primary-bg-color; +$message-action-bar-fg-color: $primary-fg-color; +$message-action-bar-border-color: #e9edf1; +$message-action-bar-hover-border-color: #b8c1d2; // ***** Mixins! *****