elninotech/uppload

@import "./services/cropper.scss";

.service-icon {
  margin-bottom: 2rem;
  svg {
    width: 4rem;
    height: 4rem;
  }
}

.uppload-service--uploading .uppload-loader {
  display: flex;
}

.uppload-service--default {
  text-align: center;
  p {
    padding: 0;
    margin: 1rem 0 2rem 0;
    font-size: 150%;
  }
  .uppload-services {
    display: flex;
    flex-wrap: wrap;
    .uppload-service-name {
      box-sizing: border-box;
      width: 22.5%;
      margin: 0 1.25% 2.5% 1.25%;
      button {
        border: none;
        font: inherit;
        display: block;
        width: 100%;
        padding: 1.15rem 0;
        border-radius: 0.2rem;
        text-align: center;
        transition: 0.2s;
      }
      svg {
        display: block;
        margin: 0 auto 0.75rem auto;
        height: 2.5rem;
      }
    }
  }
}

.uppload-service--unsplash,
.uppload-service--pixabay,
.uppload-service--giphy,
.uppload-service--pexels {
  .unsplash-images,
  .pixabay-images,
  .giphy-images,
  .pexels-images,
  .search-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .result {
      width: 32%;
      margin-bottom: 2%;
      button {
        display: block;
        width: 100%;
        cursor: pointer;
        border: none;
        height: 7rem;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
      }
    }
    .author {
      font-size: 85%;
      overflow-x: hidden;
      white-space: nowrap;
      display: block;
      line-height: 1;
      text-overflow: ellipsis;
      margin-top: 0.25rem;
      margin-bottom: 0.5rem;
      img {
        vertical-align: middle;
        margin-right: 0.25rem;
        height: 1.25rem;
        width: 1.25rem;
        border-radius: 100%;
      }
    }
  }
  .unsplash-footer,
  .pixabay-footer,
  .giphy-footer,
  .pexels-footer,
  .search-footer {
    text-align: center;
    padding-bottom: 1.5rem;
    font-size: 90%;
    opacity: 0.75;
  }
}

.filter-previews {
  overflow-x: auto;
  padding-bottom: 1rem;
  img {
    max-width: 100%;
  }
  .filter-previews-scroll {
    white-space: nowrap;
    > div {
      display: inline-block;
      margin-right: 0.5rem;
      :last-child {
        margin-right: 0;
      }
    }
    img {
      height: 220px;
    }
  }
}

.filter-previews {
  .filter-pic {
    line-height: 1;
  }
  // https://github.com/picturepan2/instagram.css/blob/master/dist/instagram.css
  [class*="filter"] {
    position: relative;
  }
  [class*="filter"]::before {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
  .filter-1977 {
    filter: sepia(0.5) hue-rotate(-30deg) saturate(1.4);
  }
  .filter-aden {
    filter: sepia(0.2) brightness(1.15) saturate(1.4);
  }
  .filter-brooklyn {
    filter: sepia(0.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);
  }
  .filter-brooklyn::before {
    background: rgba(127, 187, 227, 0.2);
    content: "";
    mix-blend-mode: overlay;
  }
  .filter-inkwell {
    filter: brightness(1.25) contrast(0.85) grayscale(1);
  }
  .filter-poprocket {
    filter: sepia(0.15) brightness(1.2);
  }
  .filter-poprocket::before {
    background: radial-gradient(
      circle closest-corner,
      rgba(206, 39, 70, 0.75) 40%,
      black 80%
    );
    background: -o-radial-gradient(
      circle closest-corner,
      rgba(206, 39, 70, 0.75) 40%,
      black 80%
    );
    background: -moz-radial-gradient(
      circle closest-corner,
      rgba(206, 39, 70, 0.75) 40%,
      black 80%
    );
    content: "";
    mix-blend-mode: screen;
  }
  .filter-xpro-ii {
    filter: sepia(0.45) contrast(1.25) brightness(1.75) saturate(1.3)
      hue-rotate(-5deg);
  }
  .filter-xpro-ii::before {
    background: radial-gradient(
      circle closest-corner,
      rgba(0, 91, 154, 0.35) 0,
      rgba(0, 0, 0, 0.65) 100%
    );
    background: -o-radial-gradient(
      circle closest-corner,
      rgba(0, 91, 154, 0.35) 0,
      rgba(0, 0, 0, 0.65) 100%
    );
    background: -moz-radial-gradient(
      circle closest-corner,
      rgba(0, 91, 154, 0.35) 0,
      rgba(0, 0, 0, 0.65) 100%
    );
    content: "";
    mix-blend-mode: multiply;
  }
}

.uppload-loader {
  height: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  > div {
    width: 7.5rem;
    height: 7.5rem;
    margin-top: -2rem;
    margin-bottom: 2rem;
    border-radius: 100%;
    animation: sk-scaleout 1.5s infinite ease-in-out;
  }
}

@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.microlink-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  form {
    width: 100%;
  }
}

.uppload-service--local {
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .drop-area {
    flex: 1 0 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    border: 1px dashed;
    padding: 3rem;
    margin: 2rem;
    border-radius: 0.2rem;
    transition: 0.2s;
    &.drop-area-active {
      transform: scale(1.05);
    }
    > div {
      font-size: 150%;
    }
  }
  .alternate-input {
    text-align: center;
    padding: 2rem 0;
    zoom: 1.5;
    opacity: 0.1;
    position: fixed;
    left: -100%;
  }
}

.uppload-cropping-element {
  text-align: center;
}

.uppload-modal .service-footer {
  button.uppload-button {
    margin: 0 0.5rem;
    display: inline-block;
  }
}

.uppload-service--camera {
  display: flex;
  flex-direction: column;
  video {
    // This is set by JavaScript
    width: 100px;
  }
  .service-main {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
  }
  .camera-waiting,
  .camera-error,
  .camera-success,
  .service-footer {
    opacity: 0;
    transition: opacity 0.2s;
  }
  .camera-waiting,
  .camera-error,
  .camera-success {
    flex: 1 0 0;
    justify-content: center;
    display: flex;
    opacity: 0;
    transition: 0.2s;
  }
  .camera-waiting,
  .camera-error {
    max-width: 75%;
    margin: auto;
    text-align: center;
    flex-direction: column;
  }
}

.need-help-link {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  font: inherit;
  border-radius: 2rem;
  line-height: 1;
  padding: 0.75rem 1rem;
  border: none;
  opacity: 0.75;
  span:first-child {
    display: none;
  }
  span:last-child {
    transform: scale(1.35);
    display: inline-block;
  }
  &:hover,
  &:focus {
    opacity: 1;
    span:first-child {
      display: inline-block;
    }
    span:last-child {
      display: none;
    }
  }
}