@charset "UTF-8";
/**
 * 主窗口样式
 * @authors yutent<yutent@doui.cc>
 * @date 2018/12/16 17:15:07
 */

html {
  width: 100%;
  height: 100vh;
}

body {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 100%;
  line-height: 1.25;
  font-size: 14px;
  color: var(--color-dark-1);
  background: rgba(255, 255, 255, 0.3);
}

.app {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;

  .category {
    width: 200px;
    height: 100%;
    background: #fff;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 54px;
      padding: 8px;
      border-bottom: 1px solid var(--color-plain-1);
      background: #fff;
      transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
      cursor: pointer;

      strong {
        max-width: 150px;
      }
      .num {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 16px;
        height: 16px;
        padding: 2px;
        line-height: 1;
        border-radius: 50%;
        font-size: 12px;
        background: var(--color-grey-1);
        color: #fff;
      }

      &:last-child {
        border-bottom: 0;
      }

      &:hover {
        color: var(--color-blue-1);
        background: var(--color-plain-1);
      }

      &.active {
        color: var(--color-plain-1);
        background: var(--color-blue-1);

        .num {
          background: #fff;
          color: var(--color-blue-1);
        }
      }
    }
  }

  .books-scroll {
    flex: 1;
    height: 100%;
    border-left: 1px solid var(--color-plain-2);
  }

  .books {
    display: flex;
    flex-wrap: wrap;

    .book {
      display: flex;
      flex-direction: column;
      width: 128px;
      margin: 24px;
      background: #fff;
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
      transition: box-shadow 0.1s ease-in;
      cursor: pointer;

      img {
        width: 100%;
        height: 160px;
        object-fit: fill;
      }

      &:hover {
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
      }
    }
  }

  .drag-mask {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      transparent,
      transparent 200px,
      rgba(252, 232, 207, 0.6) 200px
    );

    &::after {
      font-size: 46px;
      text-indent: 360px;
      content: 'Drop epub file here...';
      color: var(--color-grey-1);
    }
  }

  .book-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(2px);

    .loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      &::before {
        content: '🌑';
        font-size: 36px;
        animation: loading 1s infinite;
      }
    }
  }

  .context-menu {
    display: flex;
    flex-direction: column;
    width: 100px;
    padding: 5px 0;
    background: #fff;

    .item {
      height: 30px;
      line-height: 30px;
      padding: 0 15px;
      cursor: pointer;

      &:hover {
        background: #f2f5fc;
      }

      &.diabled {
        color: var(--color-plain-2);
        background: #fff;
        cursor: default;
      }
    }
  }
}

@keyframes loading {
  1%,
  100% {
    content: '🌑';
  }
  12.5% {
    content: '🌒';
  }
  25% {
    content: '🌓';
  }
  37.5% {
    content: '🌔';
  }
  50% {
    content: '🌕';
  }
  62.5% {
    content: '🌖';
  }
  75% {
    content: '🌗';
  }
  87.5% {
    content: '🌘';
  }
}