fe/styles/novel-info.module.scss

.novel-wrap {
  @apply bg-cover bg-center overflow-hidden relative;
  @apply before:absolute before:inset-0 before:bg-gradient-to-b before:from-white/80 before:to-white/50;
  &::before {
    backdrop-filter: blur(8px);
    :global(.dark) & {
      @apply bg-gradient-to-b from-black/50 to-black/80;
    }
  }
}
.novel-container {
  @apply container relative px-4 mx-auto;
}
.novel-info {
  @apply flex pb-5;
  .novel-info-cover {
    @apply w-24 flex-shrink-0 mr-4 self-start md:w-32 lg:w-56 lg:mr-10;
  }
  .nove-info-body {
    @apply w-0 flex-1 flex flex-col justify-between;
    h1 {
      @apply w-full text-xl font-bold md:text-3xl lg:text-4xl text-black;
      :global(.dark) & {
        @apply text-white;
      }
      small {
        @apply text-xs inline-block align-middle px-2 py-0.5 text-white rounded ml-2  bg-blue-600;
      }
    }
    h2 {
      @apply text-sm flex items-center whitespace-nowrap flex-wrap py-2 lg:text-xl;
      a,
      strong {
        @apply flex items-center mr-2 font-bold lg:mr-4;
      }
      svg {
        @apply w-4 h-4 mr-1 md:w-5 md:h-5 lg:w-8 lg:h-8;
      }
    }
    .btns {
      @apply flex;
    }
    .button {
      @apply block text-white text-center px-4 py-3 rounded-md  lg:text-lg select-none bg-gradient-to-r from-blue-600 to-blue-800 transition-all;
      strong {
        @apply block uppercase;
      }
      span {
        @apply block text-xs leading-3 opacity-70;
      }
      :global(.dark) & {
        @apply from-blue-600 to-blue-900;
      }
    }
  }
}
.novel-text {
  @apply text-sm;
  p {
    @apply my-2;
  }
}
.chapter-list {
  @apply grid gap-y-4 lg:grid-cols-2 lg:gap-x-10 xl:grid-cols-3;
  // counter-reset: chapter attr(start);
  li {
    @apply border-b text-sm lg:text-base border-b-gray-100;
    // counter-increment: chapter;
    :global(.dark) & {
      @apply border-b-gray-700;
    }
    a {
      @apply flex w-full h-full py-2 hover:bg-gray-50;
      :global(.dark) & {
        @apply hover:bg-gray-800;
      }
      &:hover {
        strong {
          text-decoration: underline;
        }
      }
    }

    i {
      @apply w-10 mr-1 flex-shrink-0 not-italic text-gray-400;
    }

    strong {
      @apply block font-normal flex-1;
    }
    time {
      @apply text-gray-400 ml-2;
    }
  }
}