phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[MM-37090] Update loading screen branding (#1706)

Browse Source 
* update loading screen branding

- background
- logo light mode colour

* linting

* build mac installer on pr

* use the actual branch name
This commit is contained in:
Dean Whillier
2021-08-20 13:50:16 -04:00
committed by GitHub
parent ea14159dcc
commit ac61c66ce4
11 changed files with 142 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/css/components/LoadingAnimation.css
View File

@@ -1,6 +1,6 @@
.LoadingAnimation {
--fade-duration: 150ms;
--colour: #166de0;
--colour: #1E325C;
--animation-initial-delay: 500ms;
--animation-start-duration: 750ms;
--animation-end-duration: 600ms;

100
src/renderer/css/components/LoadingScreen.css
View File

@@ -3,57 +3,65 @@ body {
}
.LoadingScreen {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
vertical-align: middle;
background: white url(../../../assets/window-background.svg) no-repeat center;
background-size: cover;
opacity: 1;
visibility: visible;
z-index: 10;
overflow:hidden;
transition: opacity 150ms 0ms ease-out, visibility 150ms 0ms step-start;
}
.LoadingScreen::before, .LoadingScreen::after {
content: "";
display: block;
position: absolute;
width: 460px;
height: 460px;
opacity: 0.1;
background-image: url(../../../assets/window-background-dots.svg);
background-repeat: no-repeat;
background-position: center;
}
.LoadingScreen::before {
left: -210px;
bottom: 10px;
}
.LoadingScreen::after {
right: -80px;
top: 50%;
margin-top: -230px;
--background-color: #F4F4F6;
--background-color-highlight: #FFFFFF;
--stipple-color: #1E325C;
--stipple-opacity: 0.08;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0px;
bottom: 0px;
width: 100vw;
height: 100vh;
vertical-align: middle;
opacity: 1;
visibility: visible;
z-index: 10;
overflow:hidden;
transition: opacity 150ms 0ms ease-out, visibility 150ms 0ms step-start;
}
.LoadingScreen--darkMode {
background-color: #323639;
background-image: url(../../../assets/window-background_dark.svg);
--background-color-highlight: #28427B;
--background-color: #1E325C;
--stipple-color: #14213E;
--stipple-opacity: 0.8;
}
.LoadingScreen--darkMode::before, .LoadingScreen--darkMode::after {
background-image: url(../../../assets/window-background-dots_dark.svg);
.LoadingScreen__backgound,
.LoadingScreen__backgound > svg
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.LoadingScreen__backgound {
background: var(--background-color);
}
.LoadingScreen .Pill__stipple {
fill: var(--stipple-color);
fill-opacity: var(--stipple-opacity);
}
.LoadingScreen .Pill__gradient {
stop-color: var(--background-color);
}
.LoadingScreen .Pill__gradientHighlight {
stop-color: var(--background-color-highlight);
}
.LoadingScreen--loaded {
opacity: 0;
visibility: hidden;
transition: opacity 150ms 0ms ease-in, visibility 150ms 0ms step-end;
opacity: 0;
visibility: hidden;
transition: opacity 150ms 0ms ease-in, visibility 150ms 0ms step-end;
}