Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-29 20:19:22 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Better boot response by splitting and embedding boot css/html into index.html

Browse source
This commit is contained in:
djmaze 2020-09-05 12:22:46 +02:00
parent f2d194947d
commit 45aaa17219
12 changed files with 142 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

57
dev/Styles/@Boot.css Normal file
View file

@ -0,0 +1,57 @@
html, body {
background-color: #eee;
font-family: "DejaVu Sans", Verdana, Geneva, "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif;
margin: 0;
padding: 0;
}
body {
background-color: #aaa;
color: #333;
}
#rl-content, #rl-loading-error {
display: none;
}
#rl-loading, #rl-loading-error {
font-size: 30px;
line-height: 130%;
position: fixed;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.e-spinner {
margin: 5px auto 0;
width: 100px;
text-align: center;
}
.e-spinner .e-bounce {
animation: bouncedelay 1.4s infinite ease-in-out;
background-color: #333;
border-radius: 100%;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
display: inline-block;
height: 15px;
margin: 0 5px;
width: 15px;
/* Prevent first frame from flickering when animation starts */
animation-fill-mode: both;
}
.e-spinner .bounce1 {
animation-delay: -0.32s;
}
.e-spinner .bounce2 {
animation-delay: -0.16s;
}
@keyframes bouncedelay {
0%, 80%, 100% { transform: scale(0.0); }
40% { transform: scale(1.0); }
}

4
dev/Styles/Animations.less
View file

@ -40,10 +40,6 @@ html.rl-started-trigger.no-mobile .b-login-content .loginFormWrapper {
opacity: 0.7;
}*/
#rl-loading {
transition: opacity 0.5s linear;
}
html.rl-started-delay {
#rl-left {

23
dev/Styles/Layout.less
View file

@ -419,29 +419,6 @@ html.rl-ctrl-key-pressed {
}
}
#rl-loading, #rl-loading-error {
position: absolute;
font-size: 30px;
line-height: 130%;
top: 50%;
width: 100%;
height: 65px;
margin: 0;
margin-top: -60px;
background-color: transparent;
text-align: center;
color: #000;
}
#rl-loading-error {
background-image: none;
display: none;
}
#rl-app{
display: none;
}
.rl-content-show {
display: block !important;
}

41
dev/Styles/Ui.less
View file

@ -152,10 +152,6 @@
}
}
.e-spinner {
display: none;
}
.e-mobile-switcher {
margin-top: 8px;
color: #333;
@ -187,43 +183,6 @@
}
}
html {
.e-spinner {
display: block;
margin: 5px auto 0;
width: 100px;
text-align: center;
}
.e-spinner .e-bounce {
width: 15px;
height: 15px;
background-color: #ddd;
margin: 0 5px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
border-radius: 100%;
display: inline-block;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
animation-fill-mode: both;
}
.e-spinner .bounce1 {
animation-delay: -0.32s;
}
.e-spinner .bounce2 {
animation-delay: -0.16s;
}
}
@keyframes bouncedelay {
0%, 80%, 100% { transform: scale(0.0); }
40% { transform: scale(1.0); }
}
.command.command-disabled.hide-on-disabled-command {
display:none;
}

25
dev/Styles/_progressjs.css
View file

@ -1,11 +1,4 @@
.progressjs-inner {
width: 0;
}
.progressjs-progress {
z-index: 9999999;
}
.progressjs-theme-rainloop {
.progressjs {
left: 0;
position: fixed;
top: 0;
@ -13,17 +6,17 @@
z-index: 2000;
}
.progressjs-theme-rainloop .progressjs-inner {
.progressjs-inner {
background-color: #939595;
position: relative;
z-index: 2000;
height: 3px;
overflow: hidden;
position: relative;
transition: width .5s;
width: 0;
z-index: 2000;
}
.progressjs-theme-rainloop .progressjs-percent {
.progressjs-percent {
position: absolute;
top: 0;
left: 0;
@ -31,10 +24,10 @@
bottom: 0;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
background-size: 32px 32px;
animation: simple-pace-stripe-animation 500ms linear infinite;
animation: simple-pace-stripe-animation 500ms linear infinite;
}
@keyframes simple-pace-stripe-animation {
0% { transform: none; transform: none; }
100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
0% { transform: none; }
100% { transform: translate(-32px, 0); }
}