haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(toolbar): make darker for better text contrast (#2667) 

* fix(toolbar): make darker for better text contrast

* squash: borrow some atlaskit colors
This commit is contained in:
virtuacoplenny 2018-03-27 15:30:04 -07:00 committed by bbaldino
parent 45078fe6b2
commit 8bf69d30b7
4 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/_chat.scss
View File

@ -62,6 +62,23 @@
.localuser { .localuser {
color: #087dba; color: #087dba;
} }
.use-new-toolbox {
.chatmessage {
color: white;
}
.localuser {
color: #4C9AFF;
}
.remoteuser {
color: #B8C7E0;
}
#usermsg {
color: white;
}
}
.errorMessage { .errorMessage {
color: red; color: red;

2
css/_side_toolbar_container.scss
View File

@ -2,7 +2,7 @@
* Toolbar side panel main container element. * Toolbar side panel main container element.
*/ */
.use-new-toolbox #sideToolbarContainer { .use-new-toolbox #sideToolbarContainer {
background-color: rgba(40, 52, 71, 0.5); background-color: $newToolbarBackgroundColor;
/** /**
* Make the sidebar flush with the top of the toolbar. Take the size of * Make the sidebar flush with the top of the toolbar. Take the size of

16
css/_toolbars.scss
View File

@ -265,7 +265,7 @@
* TODO: when the old filmstrip has been removed, remove the "new-" prefix. * TODO: when the old filmstrip has been removed, remove the "new-" prefix.
*/ */
.new-toolbox { .new-toolbox {
background-color: rgba(40, 52, 71, 0.5); background-color: $newToolbarBackgroundColor;
bottom: calc((#{$newToolbarSize} * 2) * -1); bottom: calc((#{$newToolbarSize} * 2) * -1);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -316,15 +316,15 @@
} }
i:hover { i:hover {
background-color: rgba(40, 52, 71, 0.7); background-color: $newToolbarButtonHoverColor;
} }
i.toggled { i.toggled {
background: rgba(40, 52, 71, 1); background: $newToolbarButtonToggleColor;
} }
i.toggled:hover { i.toggled:hover {
background-color: rgba(40, 52, 71, 1); background-color: $newToolbarButtonHoverColor;
} }
i.disabled { i.disabled {
@ -422,7 +422,7 @@
} }
.filmstrip-toolbox { .filmstrip-toolbox {
background-color: rgba(40, 52, 71, 0.5); background-color: $newToolbarBackgroundColor;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -438,15 +438,15 @@
} }
i:hover { i:hover {
background-color: rgba(40, 52, 71, 0.7); background-color: $newToolbarButtonHoverColor;
} }
i.toggled { i.toggled {
background: rgba(40, 52, 71, 1); background: $newToolbarButtonToggleColor;
} }
i.toggled:hover { i.toggled:hover {
background-color: rgba(40, 52, 71, 1); background-color: $newToolbarButtonHoverColor;
} }
.icon-hangup { .icon-hangup {

5
css/_variables.scss
View File

@ -36,8 +36,11 @@ $alwaysOnTopToolbarFontSize: 1em;
$alwaysOnTopToolbarSize: 30px; $alwaysOnTopToolbarSize: 30px;
$defaultToolbarSize: 50px; $defaultToolbarSize: 50px;
$defaultFilmStripOnlyToolbarSize: 37px; $defaultFilmStripOnlyToolbarSize: 37px;
$newToolbarSize: 50px; $newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
$newToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
$newToolbarButtonToggleColor: rgba(14, 20, 35, 1);
$newToolbarFontSize: 1.9em; $newToolbarFontSize: 1.9em;
$newToolbarSize: 50px;
$secToolbarFontSize: 1.9em; $secToolbarFontSize: 1.9em;
$secToolbarLineHeight: 45px; $secToolbarLineHeight: 45px;
$toolbarAvatarPadding: 10px; $toolbarAvatarPadding: 10px;