mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-12-28 11:24:11 +08:00
538 lines
11 KiB
SCSS
538 lines
11 KiB
SCSS
$blue: #419bf9;
|
|
|
|
@include keyframes(fadeIn) {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyframes(fadeOut) {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.hero {
|
|
z-index: 2;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 1200px; // Reset by js on boot
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
// @include transition(height 1s ease-in-out);
|
|
img {
|
|
-webkit-user-select: none;
|
|
}
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
}
|
|
|
|
#watercolor-left {
|
|
z-index: 1;
|
|
left: 0;
|
|
text-align: left;
|
|
// min-width: 196+708;
|
|
}
|
|
#watercolor-right {
|
|
z-index: 2;
|
|
right: 0;
|
|
text-align: right;
|
|
// min-width: 433+295;
|
|
}
|
|
.hero-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
|
|
@include animation(burnIn 1.5s 0.5s $ease-in-out-cubic both);
|
|
@include keyframes(burnIn) {
|
|
0% {
|
|
opacity: 0;
|
|
@include filter(brightness(2));
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
@include filter(brightness(1));
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
#bg-fade {
|
|
z-index: 3;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 200px;
|
|
@include linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
|
|
}
|
|
|
|
.hero-text {
|
|
position: absolute;
|
|
z-index: 5;
|
|
max-width: 500px;
|
|
text-align: center;
|
|
@include transform(translate(-50%, -50%));
|
|
top: 50%;
|
|
left: 50%;
|
|
|
|
@include animation(fadeIn 2s $ease-in-out-cubic both);
|
|
}
|
|
|
|
#play-intro {
|
|
display: inline-block;
|
|
position: relative;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
margin: 0 30px 30px 40px;
|
|
// margin-right: -20px;
|
|
position: relative;
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: $blue;
|
|
.triangle {
|
|
@include triangle(20px, $blue, right);
|
|
}
|
|
}
|
|
.triangle {
|
|
top: 2px;
|
|
position: absolute;
|
|
left: -20px;
|
|
@include triangle(20px, gray, right);
|
|
}
|
|
}
|
|
|
|
$nav-height: 53px;
|
|
$extra-hero-height: 200px;
|
|
|
|
.initial {
|
|
.animation-container {
|
|
display: none;
|
|
}
|
|
}
|
|
.animation-container {
|
|
z-index: 10;
|
|
position: absolute;
|
|
|
|
h4 {
|
|
font-size:34px;
|
|
text-shadow: 0px 0px 4px white;
|
|
text-align: center;
|
|
width: 100%;
|
|
z-index: 20;
|
|
display:block;
|
|
font-weight:400;
|
|
}
|
|
|
|
#step1, #step2 {
|
|
h4 {
|
|
margin-top: 0;
|
|
position:absolute;
|
|
top: -80px;
|
|
}
|
|
position: relative;
|
|
top: 140px;
|
|
}
|
|
}
|
|
|
|
|
|
.start-animation.finished {
|
|
#hero-text {
|
|
@include animation(fadeIn 1s $ease-in-out-cubic both);
|
|
}
|
|
.animation-container {
|
|
@include animation(fadeOut 1s $ease-in-out-cubic both);
|
|
}
|
|
}
|
|
|
|
.start-animation {
|
|
#hero-text {
|
|
@include animation(fadeOut 1s $ease-in-out-cubic both);
|
|
}
|
|
|
|
.animation-container {
|
|
display: block;
|
|
top: $nav-height;
|
|
left: 50%;
|
|
@include animation(fadeIn 1s 1s $ease-in-out-cubic both);
|
|
@include transform-origin(center top);
|
|
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
|
|
img {
|
|
display: none;
|
|
position: absolute;
|
|
}
|
|
|
|
#editable {
|
|
z-index: 10;
|
|
width: 442px;
|
|
border: 0;
|
|
position: absolute;
|
|
outline: 0;
|
|
}
|
|
#editable:focus {
|
|
outline: 0;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#provider-wrap {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding-top: 17%;
|
|
text-align: center;
|
|
@include keyframes(providerPopIn) {
|
|
0% {
|
|
opacity: 0;
|
|
@include transform(translateY(10px) scale(0.5));
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
@include transform(translateY(0) scale(0.5));
|
|
}
|
|
}
|
|
@include keyframes(providerPopOut) {
|
|
0% {
|
|
opacity: 1;
|
|
@include transform(translateY(0) scale(0.5));
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
@include transform(translateY(-10px) scale(0.5));
|
|
}
|
|
}
|
|
.provider-img {
|
|
display: block;
|
|
float: left;
|
|
margin: 0 0 -90px -90px;
|
|
left: 90px;
|
|
position: relative;
|
|
border-radius: 45px;
|
|
}
|
|
#outlook { @include linear-gradient(to top, #1174c3, #1174c3); }
|
|
#exchange { @include linear-gradient(to top, #1ea2a3, #1ea2a3); }
|
|
#gmail { @include linear-gradient(to top, #e99999, #e99999); }
|
|
#icloud { @include linear-gradient(to top, #61bfe9, #61bfe9); }
|
|
#yahoo { @include linear-gradient(to top, #a76ead, #a76ead); }
|
|
.os-image {
|
|
position: relative;
|
|
display: inline;
|
|
width: 400px;
|
|
margin-top: 100px;
|
|
@include animation(fadeIn 350ms 800ms $ease-in-out-cubic both);
|
|
}
|
|
h4 { @include animation(fadeIn 300ms $ease-in-out-cubic both); }
|
|
.p-0 { @include animation(providerPopIn 350ms 100ms $ease-in-out-cubic both); }
|
|
.p-1 { @include animation(providerPopIn 350ms 200ms $ease-in-out-cubic both); }
|
|
.p-2 { @include animation(providerPopIn 350ms 300ms $ease-in-out-cubic both); }
|
|
.p-3 { @include animation(providerPopIn 350ms 400ms $ease-in-out-cubic both); }
|
|
.p-4 { @include animation(providerPopIn 350ms 500ms $ease-in-out-cubic both); }
|
|
|
|
&.provider-out {
|
|
h4 { @include animation(fadeOut 350ms 350ms $ease-in-out-cubic both); }
|
|
.os-image { @include animation(fadeOut 350ms 350mms $ease-in-out-cubic both); }
|
|
.p-0 { @include animation(providerPopOut 350ms 100ms $ease-in-out-cubic both); }
|
|
.p-1 { @include animation(providerPopOut 350ms 200ms $ease-in-out-cubic both); }
|
|
.p-2 { @include animation(providerPopOut 350ms 300ms $ease-in-out-cubic both); }
|
|
.p-3 { @include animation(providerPopOut 350ms 400ms $ease-in-out-cubic both); }
|
|
.p-4 { @include animation(providerPopOut 350ms 500ms $ease-in-out-cubic both); }
|
|
}
|
|
}
|
|
|
|
.slide-out {
|
|
@include animation(slideOut 1s $ease-in-out-cubic both);
|
|
@include keyframes(slideOut) {
|
|
0% {
|
|
opacity: 1;
|
|
@include transform(translateX(0));
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
@include transform(translateX(-120%));
|
|
}
|
|
}
|
|
}
|
|
.slide-in {
|
|
@include animation(slideIn 1s $ease-in-out-cubic both);
|
|
@include keyframes(slideIn) {
|
|
0% {
|
|
opacity: 0;
|
|
@include transform(translateX(120%));
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
@include transform(translateX(0));
|
|
}
|
|
}
|
|
}
|
|
|
|
.slide-in-from-top {
|
|
@include animation(slideInFromTop 300ms $ease-in-out-cubic both);
|
|
@include keyframes(slideInFromTop) {
|
|
0% {
|
|
opacity: 0;
|
|
@include transform(translateY(-100%));
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
@include transform(translateY(0));
|
|
}
|
|
}
|
|
}
|
|
.slide-out-to-top {
|
|
@include animation(slideOutToTop 300ms $ease-in-out-cubic both);
|
|
@include keyframes(slideOutToTop) {
|
|
0% {
|
|
opacity: 1;
|
|
@include transform(translateY(0));
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
@include transform(translateY(-100%));
|
|
}
|
|
}
|
|
}
|
|
|
|
.pop-in {
|
|
@include animation(popIn 150ms $ease-in-out-cubic both);
|
|
@include keyframes(popIn) {
|
|
0% {
|
|
opacity: 0;
|
|
@include transform(translateY(5px));
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
@include transform(translateY(0));
|
|
}
|
|
}
|
|
}
|
|
.pop-out {
|
|
@include animation(popOut 150ms 100ms $ease-in-out-cubic both);
|
|
@include keyframes(popOut) {
|
|
0% {
|
|
opacity: 1;
|
|
@include transform(translateY(0));
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
@include transform(translateY(5px));
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
#plugins-title {
|
|
@include transition(opacity 1s ease-out);
|
|
@include animation(fade-in-screenshot 1.5s);
|
|
text-align: center;
|
|
display:block;
|
|
margin-top: 75px;
|
|
opacity: 1;
|
|
}
|
|
.color-white > div > div {
|
|
background-color: #f6f7f8 !important;
|
|
}
|
|
.color-transparent > div > div {
|
|
/*background-color: rgba(255,255,255,0) !important;*/
|
|
}
|
|
.color-a > div > div {
|
|
background-color: rgba(172, 235, 254, 1);
|
|
}
|
|
.color-b > div > div {
|
|
background-color: rgba(182, 245, 254, 1);
|
|
}
|
|
.color-c > div > div {
|
|
background-color: rgba(152, 225, 234, 1);;
|
|
}
|
|
.color-d > div > div {
|
|
background-color: rgba(162, 225, 234, 1);;
|
|
}
|
|
.color-e > div > div {
|
|
background-color: #d3aec8;
|
|
}
|
|
|
|
@keyframes fade-in-screenshot {
|
|
from {transform: scale(1, 1); opacity: 0;}
|
|
to {transform: scale(1, 1); opacity: 1;}
|
|
}
|
|
|
|
@keyframes contact-bottom {
|
|
from {transform: translate3d(700px,700px,0); opacity: 0; }
|
|
to {transform: translate3d(0,0,0); opacity: 1; }
|
|
}
|
|
.contact-bottom { animation: contact-bottom 2s; animation-fill-mode:both; }
|
|
|
|
|
|
@keyframes contact {
|
|
from {transform: scale(1.2,1.2); opacity: 0; }
|
|
to {transform: scale(1,1); opacity: 1; }
|
|
}
|
|
.contact { animation: contact 2s; animation-delay: 3s; animation-fill-mode:both; }
|
|
|
|
|
|
@keyframes thread {
|
|
from {transform: translate3d(0,700px,0); opacity: 0;}
|
|
to {transform: translate3d(0,0,0); opacity: 1;}
|
|
}
|
|
.thread { animation: thread 2s; animation-fill-mode:both; }
|
|
|
|
|
|
@keyframes threads {
|
|
from {transform: translate3d(-100px,700px,0); opacity: 0;}
|
|
to {transform: translate3d(0,0,0); opacity: 1;}
|
|
}
|
|
.threads { animation: threads 2s; animation-delay: 0.4s; animation-fill-mode:both; }
|
|
|
|
|
|
@keyframes left-bottom {
|
|
from {transform: translate3d(-400px,700px,0); opacity: 0;}
|
|
to {transform: translate3d(0,0,0); opacity: 1;}
|
|
}
|
|
.left-bottom { animation: left-bottom 2s; animation-fill-mode:both; }
|
|
|
|
|
|
@keyframes left {
|
|
from {transform: translate3d(-700px,0,0); opacity: 0;}
|
|
to {transform: translate3d(0,0,0); opacity: 1;}
|
|
}
|
|
.left { animation: left 2s; animation-delay: 0.3s; animation-fill-mode:both; }
|
|
|
|
|
|
@keyframes top {
|
|
from {transform: translate3d(0,-400px,0); opacity: 0;}
|
|
to {transform: translate3d(0,0,0); opacity: 1;}
|
|
}
|
|
.top { animation: top 2s; animation-delay: 0.4s; animation-fill-mode:both; }
|
|
|
|
// part 3 - plugins
|
|
|
|
.animation-container #window-container {
|
|
@include animation(fade-in-screenshot 0.2s);
|
|
@include transition(top 1s ease-in-out);
|
|
|
|
.static-screenshot {
|
|
@include box-shadow(0 2px 8px rgba(0,0,0,0.25));
|
|
@include animation(fade-in-screenshot 1.5s);
|
|
@include animation-fill-mode(both);
|
|
@include animation-delay(5.1s);
|
|
}
|
|
}
|
|
|
|
#window-container {
|
|
display: block;
|
|
width: 921px;
|
|
height: 640px;
|
|
top: 40px;
|
|
position: relative;
|
|
margin: auto;
|
|
background-color: rgba(248, 248, 248, 0.7);
|
|
box-shadow: 0 1px 2px rgba(0,0,0, 0.2);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
@include transition(box-shadow 2s ease-in-out);
|
|
|
|
&.add-shadow {
|
|
box-shadow: 0px 8px 25px rgba(0,0,0,0.25);
|
|
}
|
|
|
|
&.fade-out {
|
|
@include animation(fadeOut 500ms $ease-in-out-cubic both);
|
|
}
|
|
|
|
.static-composer {
|
|
@include animation(fadeIn 500ms 500ms $ease-in-out-cubic both);
|
|
z-index: 200;
|
|
}
|
|
.static-screenshot {
|
|
background:url('../images/1-initial-outlook-base-noshadow.png') top left no-repeat;
|
|
background-size: contain;
|
|
box-shadow: 0 0 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
z-index: 100;
|
|
}
|
|
}
|
|
|
|
#window-container.free-falling {
|
|
position: absolute;
|
|
top: 98px;
|
|
margin: auto;
|
|
display: block;
|
|
transform: translate(-50%,0);
|
|
left: 50%;
|
|
z-index: 2;
|
|
overflow: visible;
|
|
height: auto;
|
|
background: transparent;
|
|
|
|
.static-screenshot {
|
|
opacity: 1;
|
|
position: relative;
|
|
}
|
|
.composer {
|
|
width: 615px;
|
|
position: absolute;
|
|
z-index: 100;
|
|
left: 600px;
|
|
top: 335px;
|
|
opacity: 0;
|
|
@include box-shadow(0 1px 3px rgba(0,0,0,0.2));
|
|
@include transition(opacity 500ms ease-in-out);
|
|
}
|
|
}
|
|
#window-container.free-falling.finished {
|
|
@include transition(all 2s $ease-in-out-cubic);
|
|
|
|
top: 800px;
|
|
transform: translate(-55%,0);
|
|
// width: 1024px;
|
|
// height: 712px;
|
|
|
|
.composer {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#window-container-after-spacer {
|
|
margin-top:50px;
|
|
margin-bottom:40px;
|
|
@include transition(opacity 400ms $ease-in-out-cubic);
|
|
}
|
|
#window-container-after-spacer.free-falling {
|
|
margin-top:538px;
|
|
}
|
|
|
|
|
|
|
|
.part {
|
|
display:inline-block;
|
|
position: absolute;
|
|
@include transform(translate3d(0,0,0));
|
|
@include transition(all 1.0s cubic-bezier(0.22, 0.61, 0.36, 1));
|
|
}
|
|
.part > div > div {
|
|
position: absolute;
|
|
top: 6px;
|
|
bottom: 6px;
|
|
right: 6px;
|
|
left: 6px;
|
|
@include transition(all 0.75s linear);
|
|
}
|
|
|