PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Update action bar colors for dark theme

Browse source 
In addition, this also adjusts the event hover colors to match the palette.

Fixes https://github.com/vector-im/riot-web/issues/9591
This commit is contained in:
J. Ryan Stinnett 2019-04-30 17:41:11 +01:00
parent 57322f82be
commit 33bb9e2af6
3 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/views/messages/_MessageActionBar.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
display: flex; display: flex;
height: 24px; height: 24px;
border-radius: 4px; border-radius: 4px;
background: $primary-bg-color; background: $message-action-bar-bg-color;
top: -13px; top: -13px;
right: 8px; right: 8px;
user-select: none; user-select: none;
@ -59,7 +59,7 @@ limitations under the License.
width: 100%; width: 100%;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $primary-fg-color; background-color: $message-action-bar-fg-color;
} }
} }
} }

8
res/themes/dark/css/_dark.scss
View file

@ -40,7 +40,7 @@ $tagpanel-bg-color: $base-color;
$selected-color: $room-highlight-color; $selected-color: $room-highlight-color;
// selected for hoverover & selected event tiles // selected for hoverover & selected event tiles
$event-selected-color: #111316; $event-selected-color: $header-panel-bg-color;
// used for the hairline dividers in RoomView // used for the hairline dividers in RoomView
$primary-hairline-color: $header-panel-border-color; $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; $dark-panel-bg-color: $header-panel-bg-color;
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
$message-action-bar-border-color: $input-darker-bg-color; $message-action-bar-bg-color: $header-panel-bg-color;
$message-action-bar-hover-border-color: $text-secondary-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! ***** // ***** Mixins! *****

10
res/themes/light/css/_light.scss
View file

@ -11,7 +11,7 @@ $font-family: 'Nunito', Arial, Helvetica, Sans-Serif;
$accent-color: #03b381; $accent-color: #03b381;
$notice-primary-color: #ff4b55; $notice-primary-color: #ff4b55;
$notice-secondary-color: #61708b; $notice-secondary-color: #61708b;
$header-panel-bg-color: #f2f5f8; $header-panel-bg-color: #f3f8fd;
// typical text (dark-on-white in light skin) // typical text (dark-on-white in light skin)
$primary-fg-color: #2e2f32; $primary-fg-color: #2e2f32;
@ -66,7 +66,7 @@ $droptarget-bg-color: rgba(255,255,255,0.5);
$selected-color: $secondary-accent-color; $selected-color: $secondary-accent-color;
// selected for hoverover & selected event tiles // selected for hoverover & selected event tiles
$event-selected-color: #f7f7f7; $event-selected-color: $header-panel-bg-color;
// used for the hairline dividers in RoomView // used for the hairline dividers in RoomView
$primary-hairline-color: #e5e5e5; $primary-hairline-color: #e5e5e5;
@ -254,8 +254,10 @@ $authpage-secondary-color: #61708b;
$dark-panel-bg-color: $secondary-accent-color; $dark-panel-bg-color: $secondary-accent-color;
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
$message-action-bar-border-color: $input-darker-bg-color; $message-action-bar-bg-color: $primary-bg-color;
$message-action-bar-hover-border-color: $roomtopic-color; $message-action-bar-fg-color: $primary-fg-color;
$message-action-bar-border-color: #e9edf1;
$message-action-bar-hover-border-color: #b8c1d2;
// ***** Mixins! ***** // ***** Mixins! *****