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 {
color: #087dba;
}
.use-new-toolbox {
.chatmessage {
color: white;
}
.localuser {
color: #4C9AFF;
}
.remoteuser {
color: #B8C7E0;
}
#usermsg {
color: white;
}
}
.errorMessage {
color: red;

2
css/_side_toolbar_container.scss
View File

@ -2,7 +2,7 @@
* Toolbar side panel main container element.
*/
.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

16
css/_toolbars.scss
View File

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

5
css/_variables.scss
View File

@ -36,8 +36,11 @@ $alwaysOnTopToolbarFontSize: 1em;
$alwaysOnTopToolbarSize: 30px;
$defaultToolbarSize: 50px;
$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;
$newToolbarSize: 50px;
$secToolbarFontSize: 1.9em;
$secToolbarLineHeight: 45px;
$toolbarAvatarPadding: 10px;