ehmorris/keepsakes

.loading-text {
  @include align-items(center);
  @include display(flex);
  opacity: 0;
  @include position(absolute, 0px 0px 0px 0px);
  @include transition(1s);
  @include user-select(none);
  z-index: -1;

  span {
    color: #fff;
    display: block;
    font: bold 9vw/1 $serif;
    text-align: center;
    text-shadow: 0 10px 90px rgba(0, 0, 0, .1);
    width: 100%;
  }

  &.pulse {
    @include animation(pulse .75s ease infinite);
  }

  &.show {
    opacity: 1;
    z-index: 10;
  }
}

.yesterday-link, .tomorrow-link, .detail-previous, .detail-next {
  display: block;
  font: bold 2.5vw/9vw $sans;
  margin: -4.5vw 0 0;
  max-width: 40%;
  overflow: hidden;
  @include position(absolute, 50% 0 0 0);
  text-decoration: none;
  text-overflow: ellipsis;
  @include transition(all .3s, padding 0s);
  @include user-select(none);
  white-space: nowrap;
  z-index: 3;

  &:link, &:visited {
    color: #fff;
  }

  &.hide {
    opacity: 0;
  }

  &.show {
    opacity: 1;
  }
}
.yesterday-link, .detail-previous {
  left: 0;
  @include left-cursor;
  padding-left: 2rem;
  @include transform(translateX(0));

  &:hover {
    padding-right: 1rem;
    @include transform(translateX(-1rem));
  }
}
.tomorrow-link, .detail-next {
  padding-right: 2rem;
  right: 0;
  @include right-cursor;

  &:hover {
    padding-left: 1rem;
    @include transform(translateX(1rem));
  }
}
.detail-previous, .detail-next {
  font-weight: 300;
}

.activate-upper-nav, .activate-meta-nav {
  background: transparent;
  height: 10%;
  @include up-cursor;
  @include position(absolute, 0px 0px 0 0px);
  @include transition(.3s);
  z-index: 3;
}
.activate-meta-nav {
  top: auto;
  bottom: 0px;
  @include down-cursor;
}

.deactivate-upper-nav, .deactivate-meta-nav {
  @include close-cursor;
  @include position(fixed, 30vh 0px 0px 0px);
  z-index: 4;
}
.deactivate-meta-nav {
  bottom: 30vh;
  top: 0px;
}

nav.meta, .upper-nav {
  color: #fff;
  height: 30vh;
  opacity: 0;
  @include transition;
  @include user-select(none);
  z-index: 1;

  &.processed {
    opacity: 1;
    z-index: 4;

    .tilt-hint {
      opacity: 0;
    }
  }

  &.tilt-expose {
    opacity: 1;
    z-index: 1;
  }

  .tilt-hint {
    @include position(absolute, 0 200px 0px 200px);
    text-align: center;
    @include transition;

    span {
      color: #fff;
      line-height: 2.4rem;

      &:after {
        content: ', '
      }

      &:last-child:after {
        content: ', ...'
      }

      &:first-child:after {
        content: '';
      }
    }
  }
}

nav.meta {
  @include align-items(center);
  @include display(flex);
  @include position(absolute, 0 0 0px 0);
  width: 100%;

  a {
    border: .25vw solid #fff;
    @include display(flex);
    @include flex(1);
    @include flex-wrap(wrap);
    font-size: 2.25vw;
    height: 15vh;
    margin: 0 1vw;
    padding: .5rem;
    text-decoration: none;

    &:first-of-type {
      margin-left: 2vw;
    }

    &:last-of-type {
      margin-right: 2vw;
    }

    &.weather {
      border-color: transparent;
    }

    span {
      display: block;
      width: 100%;
    }

    .low, .high {
      display: inline-block;
      width: auto;
    }

    .low {
      color: rgb(170, 170, 245);
    }

    .high {
      color: rgb(250, 220, 60);
    }
  }
}

.upper-nav {
  position: relative;

  .tilt-hint {
    top: 0px;
    bottom: auto;
  }

  nav.settings {
    @include position(absolute, 0px 0px 0 0);

    ol {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 100%;
    }

    li {
      display: inline-block;
    }

    a {
      display: block;
      line-height: 2.4rem;
      margin-right: 1rem;
      opacity: .75;
      text-decoration: none;
      @include transition;

      &:hover {
        opacity: 1;
      }
    }
  }

  nav.calendar {
    @include align-items(center);
    @include display(flex);
    height: 30vh;
    overflow-x: scroll;
    @include position(absolute, 0px 2vw 0 2vw);
    z-index: -1;

    ol {
      list-style-type: none;
      margin: 0;
      padding: 0;
      white-space: nowrap;
    }

    li {
      display: inline-block;
      font-size: 2.25vw;
      margin: 0 .5vw 0 0;
      position: relative;
      width: 6vw;

      &.real-time-today {
        margin-left: 4vw;
      }

      &.search {
        border: .25vw solid #fff;
        font-family: $serif;
        margin-right: 4vw;
        padding: 0 0 .825vw;
        vertical-align: top;
        width: auto;

        &.invalid {
          border-color: red;
        }

        i {
          color: #fff;
          @include position(absolute, .7rem 0 0 .5rem);
          z-index: -1;
        }
      }

      input {
        background: none;
        border: 0;
        color: #fff;
        padding: .5rem .5rem .75rem;
        text-indent: 5vw;
        @include transition;
        width: 6vw;

        &:focus {
          outline: none;
          width: 24vw;
        }
      }

      .month {
        color: #999;
        font-size: .8rem;
        margin-left: .25vw;
        padding: .5rem;
        @include position(absolute, -2rem 0 0 0);
        text-transform: uppercase;
      }

      .calendar-day {
        border: .25vw solid #fff;
        color: #fff;
        display: block;
        padding: .5rem .5rem .75rem;
        text-decoration: none;
        @include transition;

        &:hover {
          @include transform(scale(1.1));
        }

        &.disabled {
          opacity: .5;
        }

        &.today {
          border-color: transparent;
          @include o-cursor;
        }

        &.backwards {
          @include left-cursor;
        }

        &.forwards {
          @include right-cursor;
        }
      }

      .number {
        font-family: $serif;
      }

      .day {
        display: block;
        font-size: .8vw;
        line-height: 1;
        text-transform: uppercase;
      }
    }
  }
}