mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-12-27 02:23:28 +08:00
aced3a318a
Fixed horizontal scrolling bug caused by overflowing composer screenshot Fixed Safari watercolor bug caused by overflowing watercolor containers Fixed double vertical scrollbar bug caused by overflowing hero
542 lines
12 KiB
SCSS
542 lines
12 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: 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%;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
@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);
|
|
}
|
|
|