dragoid/bin/client/assets/css/homepage.css

Download and read novels offline

:root {
  --font-size: 1.6rem;
  --line-height: 3rem;
  --paragraph-gap: 2.4rem;
}

html .cover {
  --cover-border-color: var(--color-dark-700);
  --source-link-color: var(--color-gray-400);
  --author-color: var(--color-gray-600);
  --thumbnail-background: linear-gradient(to right bottom, var(--color-dark-700), var(--color-dark-600));
  --divider-row-background: linear-gradient(to right, transparent, var(--color-dark-900), transparent);
  --divider-col-left-top-background: linear-gradient(to bottom, transparent, var(--color-dark-900));
  --divider-col-left-bottom-background: linear-gradient(to top, transparent, var(--color-dark-900));
  --divider-col-right-top-background: linear-gradient(to bottom, transparent, var(--color-dark-900));
  --divider-col-right-bottom-background: linear-gradient(to top, transparent, var(--color-dark-900));
}

html.light .cover {
  --cover-border-color: var(--color-light-100);
  --source-link-color: var(--color-gray-100);
  --author-color: var(--color-gray-100);
  --thumbnail-background: var(--color-light-100);
  --divider-row-background: linear-gradient(to right, transparent, var(--color-gray-400), transparent);
  --divider-col-left-top-background: linear-gradient(to bottom, transparent, var(--color-gray-400));
  --divider-col-left-bottom-background: linear-gradient(to top, transparent, var(--color-gray-400));
  --divider-col-right-top-background: linear-gradient(to bottom, transparent, var(--color-gray-400));
  --divider-col-right-bottom-background: linear-gradient(to top, transparent, var(--color-gray-400));
}

.cover {
  width: calc(100% - 54px);
  height: calc(800px - 64px);
  border-radius: 28px;
  border: 1px solid var(--cover-border-color);
  margin: 0 auto;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  position: relative;
  overflow: hidden;

  & .source-link {
    color: var(--source-link-color);
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
    transition: 300ms linear;
    display: flex;
    align-items: center;
    gap: 6px;

    & svg {
      stroke-width: 1px;
    }

    &:hover {
      color: var(--app-color);
    }
  }
}



.cover .heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  & .thumbnail {
    height: 190px;
    width: 150px;
    border-radius: 6px;
    background: var(--thumbnail-background);
    display: block;
    margin-bottom: 32px;
    overflow: hidden;
    color: transparent;


    & img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }

  & .title {
    font-size: 3.2rem
  }

  & .author {
    color: var(--author-color);
    margin-top: 8px;
  }
}


.cover .info {
  --divider-height: 20px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;


  & .row {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;

    &:first-child::before {
      content: "";
      width: 100%;
      height: 1px;
      background: var(--divider-row-background);
      display: block;
      position: absolute;
      bottom: 0px;
      left: 0px;
    }
  }

  & .col {
    width: calc(100% / 3);
    text-align: center;
    padding: 8px 0px;
    position: relative;
    text-transform: capitalize;
  }

  & .row:first-child .col:first-child::before,
  & .row:last-child .col:first-child::before,
  & .row:first-child .col:last-child::before,
  & .row:last-child .col:last-child::before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: var(--divider-height);
  }

  & .row:first-child .col:first-child::before {
    background: var(--divider-col-left-top-background);
    bottom: 0px;
    right: 0px;
  }

  & .row:last-child .col:first-child::before {
    background: var(--divider-col-left-bottom-background);
    top: 0px;
    right: 0px;
  }

  & .row:first-child .col:last-child::before {
    background: var(--divider-col-right-top-background);
    bottom: 0px;
    left: 0px;
  }

  & .row:last-child .col:last-child::before {
    background: var(--divider-col-right-bottom-background);
    top: 0px;
    left: 0px;
  }
}

.cover .sinopse {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 3rem;
  width: 100%;
}


@media screen and (max-width: 580px) {
  .cover {
    width: calc(100% - 24px);
    height: 700px;
    padding: 32px 16px
  }

  .cover .heading {
    & .title {
      font-size: 2.4rem;
    }
  }

  .cover .info .col {
    max-width: 100px;
    font-size: 1.4rem;
  }
}





.first-chapter {
  padding: 32px 0px;
  min-height: 800px;
  width: calc(100% - 64px);
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0 auto;
  margin-top: 42px;

  & .title {
    font-size: 2rem;
    font-family: var(--chapter-font-current);
  }

  & .content {
    display: flex;
    flex-direction: column;
    gap: var(--paragraph-gap);
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--page-content-color);
    font-family: var(--chapter-font-current);
  }

  & .navigation-chapters {
    margin-top: 64px;
    display: flex;
    width: 100%;
    height: 54px;
    border-radius: 28px;
    background: var(--page-navigation-background);
    overflow: hidden;
    align-items: center;

    & .divider {
      height: calc(50%);
      width: 2px;
      user-select: none;
      cursor: default;
      pointer-events: none;
      background: var(--page-navigation-divider-background);
    }

    & a {
      width: calc((100% / 2) - 2px);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--app-color);
      text-decoration: none;
      cursor: pointer;
      transition: 300ms linear;

      &:hover {
        background: var(--page-navigation-houver-background);
      }

      &[data-disabled="true"] {
        cursor: default;
        user-select: none;
        pointer-events: none;
        color: var(--page-navigation-disable-background);

        &:hover {
          background: inherit;
          color: inherit;
        }
      }
    }
  }
}