penpot/frontend/resources/styles/main/partials/lightbox.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>

.lightbox {
  align-items: center;
  background-color: $color-dark-bg;
  display: flex;
  justify-content: center;
  position: fixed;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;

  &.transparent {
    background-color: rgba(0,0,0,0);
  }

  .lightbox-body {
    align-items: center;
    background-color: $secondary-ui-bg;
    border-radius: $br-medium;
    display: flex;
    flex-direction: column;
    padding: $medium $x-big;
    position: relative;
    width: 500px;
    @include animation(.1s,.5s,fadeInDown);

    .lightbox-label {
      display: flex;
      font-weight: bold;
      margin: $medium 0;
      width: 100%;
    }

    form {
      width: 100%;
    }

    .input-text {
      margin: 1rem 0;
      width: 100%;
    }

    .project-size {
      align-items: center;
      display: flex;
      justify-content: space-between;
      width: 100%;

      .input-text {
        margin-right: $small;
        margin-top: 0;
       }

      .toggle-layout {

        svg {
          fill: $color-gray;
          height: 20px;
          width: 20px;

          &:hover {
            fill: $color-gray-darker;
          }

        }

      }

    }

    .close {
      position: absolute;
      right: -30px;
      transform: rotate(45deg);
      top: -30px;

      svg {
        fill: $color-white;
        height: 20px;
        width: 20px;

        &:hover {
          fill: $color-danger;
        }

      }

    }

    .btn-primary {
      margin: $big auto 0 auto;
      min-width: 120px;
    }

    // Export dialog
    &.export-dialog {
      width: auto;
    }

    &.big-lightbox {
      width: 800px;
    }

    .input-element {
      flex-direction: column;

      &::after {
        top: 50%;
      }

      span {
        color: $intense-ui-text;
        font-size: $fs12;
        margin-left: $small;
      }

    }
  }
}

.lightbox-big-btn {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin: 1rem;

  .big-svg {
    background-color: $color-gray-lighter;
    border-radius: $br-medium;
    padding: 3rem;

    svg {
      fill: $color-gray;
      height: 40px;
      width: 40px;
    }

    &.upload {

      svg {
        transform: rotate(-90deg);
      }

    }

  }

  .text {
    color: $color-gray-light;
    margin-top: .5rem;
  }

  &:hover {

    .big-svg {
      background-color: $main-ui-color;

      svg {
        fill: $color-white;
      }

    }

  }

}

// Clipboard
.clipboard {
  max-width: 350px;

  .clipboard-list {
    display: flex;
    flex-direction: column;
    width: 100%;

    .clipboard-item {
      align-items: center;
      border-bottom: 1px solid $soft-ui-border;
      cursor: pointer;
      display: flex;
      padding: $small;
      width: 100%;


      span {

        svg {
          height: 20px;
          fill: $medium-ui-border;
          margin-right: $medium;
          width: 20px;
        }

      }

      &:hover {

        span {
          color: $main-ui-color;

          svg {
            fill: $main-ui-color
          }

        }

      }

    }

  }

}

// Confirm dialog
.confirm-dialog {
  .btn-gray,
  .btn-success,
  .btn-delete {
    margin: 2rem 1rem 0 1rem;
  }
}

// Export dialog
.content-col {
  align-items: center;
  border-right: 1px solid $soft-ui-border;
  display: flex;
  flex-direction: column;
  flex: 300px;
  height: 450px;
  padding: 2rem;

  &:first-child{
    padding-left: 1rem;
  }

  &:last-child {
    border: none;
    padding-right: 1rem;
  }

  .icon {
    align-items: center;
    background-color: $soft-ui-icons;
    border-radius: $br-medium;
    display: flex;
    flex-shrink: 0;
    height: 120px;
    justify-content: center;
    width: 120px;

    svg {
      fill: $medium-ui-icons;
      height: 50px;
      width: 50px;
    }
  }

  .title {
    font-size: $fs20;
    font-weight: 500;
    margin: 1rem 0;
  }

  .info {
    font-size: $fs16;
    text-align: center;
  }

  .btn-primary {
    margin-top: auto !important;
  }
}


// Import image library
.import-img-library {
  display: flex;
  flex-direction: column;
  padding: $medium;
  width: 100%;

  .library-actions {
    display: flex;
  }

  .toggle-library {
    display: flex;
    margin-right: $medium;

    :first-child {
      border-top-left-radius: $br-medium;
      border-bottom-left-radius: $br-medium;
    }

    :last-child {
      border-right: 1px solid $soft-ui-border;
      border-top-right-radius: $br-medium;
      border-bottom-right-radius: $br-medium;
    }

    li {
      align-items: center;
      border: 1px solid $soft-ui-border;
      border-right: none;
      cursor: pointer;
      display: flex;
      font-size: $fs13;
      font-weight: bold;
      padding: $medium;
      white-space: nowrap;

      &:hover {
        color: $intense-ui-text;
      }

      &.current {
        color: $color-primary;
      }
    }
  }

  .library-content {
    display: flex;
    flex-wrap: wrap;
    max-height: 500px;
    overflow-y: scroll;
  }

  .library-item {
    border-radius: $br-medium;
    border: 1px solid $soft-ui-border;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    margin: $x-small;
    width: 23.5%;

    .library-item-th {
      background-position: center;
      background-size: cover;
      border-top-left-radius: $br-medium;
      border-top-right-radius: $br-medium;
      height: 100px;
      width: 100%
    }

    span {
      @include text-ellipsis;
      padding: $small;
    }

    &:hover {
      border-color: $color-primary;

      .library-item-th {
        opacity: .6;
      }

      span {
        color: $color-primary;
      }
    }
  }
}