Mailspring/internal_packages/onboarding/stylesheets/onboarding.less

@import "onboarding-reset";

@-webkit-keyframes fadein {
  from { opacity: 0; }
    to { opacity: 1; }
}

.alpha-fade-enter {
  opacity: 0.01;
  transition: all .15s ease-out;
}

.alpha-fade-enter.alpha-fade-enter-active {
  opacity: 1;
}
.alpha-fade-leave {
  opacity: 1;
  transition: all .15s ease-in;
}

.alpha-fade-leave.alpha-fade-leave-active {
  opacity: 0.01;
}

.page-frame {
  text-align: center;
  flex: 1;

  .page-container {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .page {
    background-color: #F3F3F3;
    flex: 1;
  }

  h1 {
    font-weight: 100;
    font-size: 40pt;
    margin:0;
  }

  h2 {
    line-height: 1.3em;
    font-size: 30pt;
    font-weight: 200;
  }

  h4 {
    font-weight: 400;
    font-size: 20pt;
  }

  .logo-container {
    width: 117px;
    height: 117px;
    display: inline-block;
    padding-top: 40px;
    box-sizing: content-box;
  }

  .btn-add-account {
    width: 170px;
    margin-left: 10px;
    transition: width 150ms ease-in-out;
  }
  .btn-add-account.spinning {
    img { vertical-align: middle; margin-right: 5px; margin-bottom: 2px; }
  }

  .prompt {
    color:#5D5D5D;
    font-size:1.07em;
    font-weight:300;
    margin-top:20px;
    margin-bottom:14px;
  }

  .close {
    position: fixed;
    z-index: 100;
    top: 1px;
    left: 6px;
  }

  .back {
    position: fixed;
    top: 15px;
    left: 15px;
    padding: 10px;
  }

  .message {
    margin-bottom:15px;
    max-width: 600px;
    margin: auto;

    &.error {
      color: #A33;
      -webkit-user-select: text;
      a {
        color: #A33;
      }
    }
    &.empty {
      color: gray;
    }
  }

  form.settings {
    padding: 0 20px;
    padding-bottom: 20px;
  }
  input {
    display: inline-block;
    width: 100%;
    padding: 7px;
    margin-bottom: 10px;
    background: #FFF;
    color: #333;
    text-align: left;
    border: 1px solid #AAA;

    &::-webkit-input-placeholder {
      color: #C6C6C6;
    }

    &[type=checkbox] {
      width: initial;
      margin-right: 5px;
    }

    &:disabled {
      background: fadeout(@input-bg, 40%);
    }
    &.error {
      border: 1px solid #A33;
    }
  }

  label {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    color: #888;
    text-align: left;
    padding:3px 0;
  }

  label[for=subscribe-check] {
    color: black;
    white-space: inherit;
  }

  label.checkbox {
    width: inherit;
  }

  .toggle-advanced {
    display: inline-block;
    width: 100%;
    font-size: 0.94em;
    text-align: right;
    padding: 0;
  }

  .btn {
    margin-top:8px;
  }
}

.page.authenticate {
  flex: 1;
  display: flex;

  webview {
    display: flex;
    flex: 1;
  }

  .webview-loading-spinner {
    position: absolute;
    right: 17px;
    top: 17px;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    transition-delay: 200ms;
    &.loading-true {
      opacity: 1;
    }
  }

  .webview-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F3F3F3;
    opacity: 1;
    transition: opacity 200ms ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    .message {
      color: #444;
      opacity: 0;
      margin-top: 20px;
      transition: opacity 200ms ease-out;
    }
    .try-again {
      opacity: 0;
      transition: opacity 200ms ease-out;
    }
  }
  .webview-cover.slow,
  .webview-cover.error {
    .message {
      opacity: 1;
      max-width: 400px;
    }
  }
  .webview-cover.error {
    .spinner { visibility: hidden;}
    .try-again {
      opacity: 1;
    }
  }
  .webview-cover.ready {
    pointer-events: none;
    opacity: 0;
  }
}

.page.account-choose {
  h2 {
    margin-top: 104px;
    margin-bottom: 20px;
  }

  .provider-list {
    margin:auto;
    width: 280px;
  }
  .cloud-sync-note {
    margin-bottom: 20px;
    cursor: default;
    color: @text-color-very-subtle;
  }
  .provider-name {
    font-size: 18px;
    font-weight: 300;
    color: rgba(0,0,0,0.7);
  }

  .provider {
    text-align: left;
    cursor: default;
    line-height: 63px;

    .icon-container {
      width: 50px;
      height: 50px;
      display: inline-block;
      box-sizing: content-box;
      padding: 0 15px 0 20px;
      vertical-align: top;
      zoom: 0.9;
    }
  }
  .provider:hover{
    background: rgba(255,255,255,0.4);
  }
}

.page.account-setup {
  form {
    width: 400px;
    padding-top: 20px;
    margin: auto;
  }
  .twocol {
    display: flex;
    flex-direction: row;
    width: 700px;
    margin: auto;
    transition: width 400ms ease-in-out;
  }
  .twocol.hide-second-column {
    width: 400px;
    .col:nth-child(2) {
      opacity: 0;
      flex: 0;
      padding: 0;
      flex-shrink: 1;
    }
    .col:first-child {
    }
  }
  .col {
    flex: 1;
    padding: 0 20px;
    opacity: 1;
    border-left: 1px solid #ddd;
    overflow: hidden;
    transition: all 400ms ease-in-out;
  }
  .col:first-child {
    border-left: none;
  }
  .col-heading {
    text-align: left;
    padding-bottom: 15px;
  }
}

.page.account-setup.AccountExchangeSettingsForm {
  .logo-container {
    padding-top: 36px;
  }
  .twocol {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.page.account-setup.AccountIMAPSettingsForm {
  h2 {
    padding-top: 36px;
  }
  .logo-container {
    display: none;
  }
  .twocol {
    padding-top: 20px;
    padding-bottom: 10px;
  }
}
.page.account-setup.google {
  .logo-container {
    padding-top: 160px;
  }
}

.page.tutorial {
  display: flex;
  flex-direction: column;

  &.appeared-false {
    .tutorial-container .left {
      transform: translate3d(-30px, 0, 0);
      opacity: 0;
    }
    .tutorial-container .right {
      transform: translate3d(30px, 0, 0);
      opacity: 0;
    }
  }

  .tutorial-container {
    background-color: #F9F9F9;
    display: flex;
    flex-direction: row;
    flex: 1;

    .left {
      align-self: center;
      flex: 2;
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: all ease-in-out 400ms;

      .screenshot {
        width: 523px;
        height: 385px;
        background:url(nylas://onboarding/assets/app-screenshot@2x.png) top left no-repeat;
        background-size: contain;
        margin:auto;
        position: relative;

        .overlay {
          position: absolute;
          width:40px;
          height:40px;
          border: 2px solid rgba(0,0,0,0.7);
          border-radius: 20px;
          transform:translate3d(-50%, -50%, 0);
          transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 260ms;

          .overlay-content {
            transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 260ms;
            transform: translate3d(-67px,-67px,0) scale(0.21);
            background:url(nylas://onboarding/assets/app-screenshot@2x.png) top left no-repeat;
            background-position: 10% 20%;
            border-radius: 73px;
            width: 146px;
            height: 146px;
            opacity: 0;
            display: block;
            position: absolute;
          }
        }
        .overlay.seen {
          border: 2px solid rgba(0,0,0,0.3);
        }
        .overlay.expanded {
          width:150px;
          height:150px;
          border: 2px solid rgba(0,0,0,0.7);
          border-radius: 75px;
          box-shadow: 0 0 15px fade(#2673D1, 50%);
          z-index: 2;

          .overlay-content {
            transform:scale(1);
            opacity: 1;
          }
        }
      }
    }

    .right {
      flex: 1;
      padding: 30px;
      padding-left: 0;
      opacity: 1;
      transform:translate3d(0, 0, 0);
      transition: all ease-in-out 400ms;

      h2 {
        font-size: 28px;
        font-weight: 300;
        text-align: center;
      }
      p {
        font-size: 16px;
        line-height: 1.85em;
        text-align: left;
        padding: 10px 0;
        color: #333;
      }
    }
  }
}

.page.welcome {
  display: flex;
  flex-direction: column;

  .footer {
    background-image: linear-gradient(to right, rgba(167,214,134,1) 0%,rgba(122,201,201,1) 100%);
  }

  @-webkit-keyframes slideIn {
    from {
      transform: translate3d(20,0,0);
      opacity: 0;
    }
    to {
      transform: translate3d(0,0,0);
      opacity: 1;
    }
  }

  a {
    color: white;
    border-bottom: 1px solid white;
    text-decoration: none;
    font-weight: 300;
    &:hover {
      background-color: rgba(255,255,255,0.1);
    }
  }

  .steps-container {
    position: relative;
    flex: 1;
    background-image: linear-gradient(to right, rgba(149,205,107,1) 0%,rgba(60,176,176,1) 100%);
    color: white;
    overflow: hidden;
  }

  .hero-text {
    font-size: 34px;
    line-height: 41px;
    font-weight: 200;
    cursor: default;
    -webkit-font-smoothing: subpixel-antialiased;
  }

  .sub-text {
    font-size: 17px;
    font-weight: 300;
  }

  img.icons {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }
}

.page.welcome,
.page.tutorial {
  .footer {
    text-align: center;
    background-color: #ececec;
    border-top: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 1px 1px solid rgba(255,255,255,0.25);

    .btn-next,
    .btn-prev {
      width: 160px;
      margin: 20px 10px;
    }
    .btn-continue {
      font-weight: 300;
      margin: 20px 0;
      width: 296px;
      line-height: 2.5em;
      height: 2.5em;
    }
  }
}

body.platform-win32 {
  .page-frame {
    .alpha-fade-enter {
      transition: all .01s ease-out;
    }
    .alpha-fade-leave {
      transition: opacity .01s ease-in;
    }
  }
}


// Individual Components

.appearance-mode {
  background-color:#f7f9f9;
  border-radius: 10px;
  border: 1px solid #c6c7c7;
  text-align: center;
  flex: 1;
  padding:9px;
  padding-top:10px;
  margin:10px;
  margin-top:0;
  img {
    background-color: #c6c7c7;
  }
  div {
    margin-top: 10px;
    text-transform: capitalize;
    cursor: default;
  }
}
.appearance-mode.active {
  border:1px solid @component-active-color;
  color: @component-active-color;
  img { background-color: @component-active-color; }
}


.alternative-auth {
  p {
    color: @text-color-heading;
  }
  .url-copy-target {
    width: 50%;
    border: 1px solid #c6c7c7;
    margin: 10px;
  }
  .copy-to-clipboard {
    display: inline-block;
    cursor: pointer;
    img {
      background-color: @btn-icon-color;
    }
    img:active {
      background-color: @black;
    }
  }

  .hidden {
    opacity: 0;
  }

  .visible {
    opacity: 1;
    margin-bottom: 0;
  }

  .fadein {
    opacity: 1;
    transition: opacity 2s linear;
  }

  .fadeout {
    opacity: 0;
    transition: opacity 1s linear;
  }

  input {
    margin-top: 0;
  }

}