mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-11 18:32:20 +08:00
168 lines
No EOL
2.8 KiB
Text
168 lines
No EOL
2.8 KiB
Text
@import "ui-variables";
|
|
|
|
@checkSize: 136px;
|
|
|
|
@-webkit-keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@-webkit-keyframes bounce {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.3); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
@-webkit-keyframes fill {
|
|
0% { opacity: 0; border-width: @checkSize / 2; }
|
|
25% { opacity: 1; }
|
|
100% { opacity: 1; border-width: 0; }
|
|
}
|
|
|
|
.onboarding-container {
|
|
width:100%;
|
|
height:100%;
|
|
background-color: #f0f0f0;
|
|
-webkit-animation: fadein 0.8s;
|
|
-webkit-user-select:none;
|
|
text-align: center;
|
|
|
|
iframe, webview {
|
|
position: absolute;
|
|
width:100%;
|
|
height:100%;
|
|
left:0;
|
|
top:0;
|
|
border:0;
|
|
}
|
|
|
|
.logo {
|
|
padding-top:40px;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 27px;
|
|
margin-bottom: 90px;
|
|
}
|
|
|
|
.prompt {
|
|
color:#5D5D5D;
|
|
font-size:1.07em;
|
|
font-weight:300;
|
|
margin-top:20px;
|
|
margin-bottom:14px;
|
|
}
|
|
|
|
form {
|
|
padding-right:25px;
|
|
padding-left:25px;
|
|
}
|
|
|
|
input {
|
|
display:block;
|
|
padding:10px;
|
|
width:100%;
|
|
margin-bottom:20px;
|
|
background-color: #F5F5F5;
|
|
text-align: center;
|
|
}
|
|
|
|
.environment-selector {
|
|
position: absolute;
|
|
opacity:0.1;
|
|
top: 244px;
|
|
width:292px;
|
|
select {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
.page {
|
|
position:absolute;
|
|
top:0;
|
|
width:100%;
|
|
height:100%;
|
|
padding-top:15%;
|
|
}
|
|
|
|
.quit {
|
|
position: absolute;
|
|
top:5px;
|
|
left:5px;
|
|
}
|
|
|
|
.back,
|
|
.dismiss {
|
|
position: absolute;
|
|
top:25px;
|
|
left:25px;
|
|
}
|
|
|
|
.page-enter {
|
|
opacity: 0.01;
|
|
transition: all .3s ease-out;
|
|
}
|
|
|
|
.page-enter.page-enter-active {
|
|
opacity: 1;
|
|
}
|
|
.page-leave {
|
|
opacity: 1;
|
|
transition: all .3s ease-in;
|
|
}
|
|
|
|
.page-leave.page-leave-active {
|
|
opacity: 0.01;
|
|
}
|
|
|
|
.check {
|
|
width: @checkSize;
|
|
height: @checkSize;
|
|
background: #e5e5e5;
|
|
border-radius:50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
box-shadow: 0px -4px 4px 0px rgba(255, 255, 255, 0.75), inset 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
|
|
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius:50%;
|
|
top: 9%;
|
|
left: 9%;
|
|
right: 9%;
|
|
bottom: 9%;
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius:50%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
background-color: #60b247;
|
|
border-width: 0;
|
|
border-color: #e5e5e5;
|
|
border-style: solid;
|
|
-webkit-animation: fill 0.5s forwards;
|
|
-webkit-animation-delay: 0.8s;
|
|
}
|
|
|
|
.check-icon {
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 31%;
|
|
left: 28%;
|
|
width: 45%;
|
|
fill: white;
|
|
-webkit-animation: bounce 0.4s forwards;
|
|
-webkit-animation-delay: 1.9s;
|
|
}
|
|
}
|
|
} |