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
pull/21833/head
J. Ryan Stinnett 2019-04-30 17:41:11 +01:00
parent 57322f82be
commit 33bb9e2af6
3 changed files with 13 additions and 9 deletions

View File

@ -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;
}
}
}

View File

@ -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! *****

View File

@ -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! *****