fe/styles/globals.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  *,
  ::before,
  ::after {
    color-scheme: light;

    --color-bg-default: #f3f4f6;
    --color-paper: #fff;
    --color-paper-alpha: rgba(255, 255, 255, 0.5);

    // primary
    --color-primary: #1976d2;
    // secondary
    --color-secondary: #9c27b0;
    // error
    --color-error: #d32f2f;
    // warning
    --color-warning: #ed6c02;
    // info
    --color-info: #0288d1;
    // success
    --color-success: #2e7d32;
    --color-gray-light: #808080;
    --color-gray-dark: #29292e;
  }
  .dark *,
  .dark ::before,
  .dark ::after {
    color-scheme: dark;

    --color-bg-default: #18181b;
    --color-paper: #121212;
    --color-paper-alpha: rgba(18, 18, 18, 0.5);

    // primary
    --color-primary: #90caf9;
    // secondary
    --color-secondary: #ce93d8;
    // error
    --color-error: #f44336;
    // warning
    --color-warning: #ffa726;
    // info
    --color-info: #29b6f6;
    // success
    --color-success: #66bb6a;

    --color-gray-light: #808080;
    --color-gray-dark: #29292e;
  }

  * {
    /* @apply selection:bg-hb; */
    /* @apply transition selection:bg-hb;
      transition-timing-function: line; */
  }

  body {
    @apply bg-default text-gray-dark font-sans;
  }

  a {
    @apply text-gray-dark;
  }
}
@layer components {
  .container {
    @apply px-4 mx-auto;
  }
}
#__next {
  @apply w-full overflow-hidden min-h-screen;
}
.header {
  @apply sticky border-b py-2 shadow bg-paper z-40;
  .container {
    @apply flex justify-between items-center;
  }
  .logo {
    @apply flex items-center flex-shrink-0 mr-5 select-none md:mr-10;
    img {
      @apply w-10 h-10 mr-2;
    }
    span {
      @apply hidden text-2xl font-bold md:block;
    }
  }
  .menu {
    @apply hidden absolute left-0 top-full w-full py-5 bg-paper-alpha backdrop-blur;
    @apply md:flex md:relative md:items-center md:p-0;
    nav {
      @apply flex-1;
      ul {
        @apply md:flex;
        li {
          @apply relative;
        }
      }
    }
    .menu-item {
      @apply flex py-2 px-5 items-center text-gray-dark md:text-gray-light md:hover:text-primary;
      svg {
        @apply mr-1 fill-current;
      }
    }
    .sub-menu {
      @apply hidden;
      @apply absolute bg-default shadow-lg rounded-xl top-full;
      &::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 25px;
        border-bottom: 7px solid var(--color-bg-default);
        border-left: 6px dashed transparent;
        border-right: 6px dashed transparent;
        height: 0;
        width: 0;
      }
      ul {
        @apply py-2 block rounded-l-lg whitespace-nowrap;
        &.sub-menu-sized {
          @apply h-[312px] w-[640px];
        }
      }
      .sub-menu-list {
        @apply absolute left-[132px] hidden top-0 h-[312px] w-[508px] bg-paper rounded-r-lg py-2 px-4;
        p {
          @apply flex flex-wrap;
          strong {
            @apply block w-full py-1 px-4;
          }
          a {
            @apply w-1/3 block hover:bg-default py-1 px-4 rounded;
          }
        }
      }
      li {
        @apply static;
        > a {
          @apply block py-3 px-4;
        }
        &:hover {
          @apply bg-paper;
          .sub-menu-list {
            @apply block;
          }
        }
        &:first-child {
          .sub-menu-list {
            @apply block;
          }
        }
      }
    }
    li:hover {
      .sub-menu {
        @apply md:block;
      }
    }
  }
  .search-input {
    @apply relative mx-5 my-2 md:my-0;
    .icon-search {
      @apply absolute left-2 h-full w-5;
    }
    input {
      @apply block w-full border rounded-full pl-10 pr-4 py-1;
    }
  }
  .menu-btn {
    @apply bg-primary rounded-full p-2 md:hidden;
    svg {
      @apply w-5 h-5 fill-white;
      &.icon-menu {
        rect {
          transform: translate(0, 0) rotateZ(0) scaleX(1);
          transform-origin: center center;
          transition: all 0.2s ease 0s;
        }
      }
    }
  }
  &.open {
    .menu {
      @apply block;
    }

    .menu-btn {
      svg {
        &.icon-menu {
          rect {
            &.r-1 {
              transform: translate(1.5px, 2.6px) rotateZ(-45deg);
            }

            &.r-2 {
              transform: translate(0, 0) rotateZ(0) scaleX(0);
            }

            &.r-3 {
              transform: translate(1.5px, -2.2px) rotateZ(45deg);
            }
          }
        }
      }
    }
  }
}
.novel-title {
  @apply text-xl font-bold mt-5 mb-2 flex justify-between;
}
.novel-list {
  @apply flex flex-wrap -mx-1.5 md:-mx-2 lg:-mx-4;

  .novel-item {
    @apply w-1/4 px-1.5 my-2;
    @apply md:px-2 lg:w-1/5 lg:px-4 xl:w-[12.5%];
  }
}
.novel-item {
  a {
    color: inherit;
  }
}
.novel-item-title {
  @apply line-clamp-2 text-xs font-bold leading-none my-1 lg:text-sm;
}
.novel-item-desc {
  @apply text-xs text-gray-light leading-none whitespace-nowrap text-ellipsis block overflow-hidden w-full;
}
.novel-cover {
  @apply block before:block before:pt-[135%] relative;
  &::after {
    @apply absolute left-0 top-0 h-full w-full;
    content: "";
    // // background-image: repeating-linear-gradient(
    // //   90deg,
    // //   rgba(255, 255, 255, 0) 0%,
    // //   rgba(255, 255, 255, 0.1) 10%,
    // //   rgba(0, 0, 0, 0.5) 20%,
    // //   rgba(0, 0, 0, 0.5) 50%,
    // //   rgba(0, 0, 0, 0.1) 100%,
    // // );
    // background-image: linear-gradient(
    //   90deg,
    //   rgba(0, 0, 0, 0.2) 0%,
    //   rgba(255, 255, 255, 0.3) 40%,
    //   rgba(0, 0, 0, 0.5) 85%,
    //   rgba(0, 0, 0, 0) 100%
    // );
    // background-size: 100% 100%;

    // background-image: linear-gradient(
    //     to right,
    //     rgb(60, 13, 20) 0.7712082262210797%,
    //     rgba(255, 255, 255, 0.5) 1.2853470437017995%,
    //     rgba(255, 255, 255, 0.25) 1.7994858611825193%,
    //     rgba(255, 255, 255, 0.25) 2.570694087403599%,
    //     transparent 3.0848329048843186%,
    //     transparent 4.113110539845758%,
    //     rgba(255, 255, 255, 0.25) 4.370179948586118%,
    //     transparent 5.655526992287918%
    //   );
    background-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.4) 4px,
        rgba(0, 0, 0, 0) 7px,
        rgba(255, 255, 255, 0.35) 8px,
        rgba(0, 0, 0, 0.3) 9px,
        rgba(0, 0, 0, 0.3) 12px,
        rgba(255, 255, 255, 0.25) 13px,
        transparent 24px
      ),
      linear-gradient(
        310deg,
        transparent 0%,
        transparent 70%,
        rgba(255, 255, 255, 0.4) 100%
      ),
      linear-gradient(
        30deg,
        rgba(0, 0, 0, 0.6) 0%,
        transparent 30%,
        transparent 100%
      ),
      linear-gradient(
        320deg,
        rgba(0, 0, 0, 0.4) 0%,
        transparent 30%,
        transparent 100%
      );
    box-shadow: inset -1px 1px 2px rgba(255, 255, 255, 0.5);
    margin: auto;
    border-radius: 5px 0 0 5px;
  }
  img {
    @apply absolute left-0 top-0 w-full h-full object-cover;
    border-radius: 5px 0 0 5px;
  }
}
.tabs {
  @apply flex justify-start mb-5;
  .tab {
    @apply h-11 border-b-4 border-b-transparent font-bold mr-5;
    &.active {
      @apply border-b-primary text-primary;
    }
  }
}
.tags {
  @apply flex flex-wrap justify-start gap-2;
}
.tag {
  @apply inline-flex items-center cursor-pointer duration-300 text-gray-900  bg-gray-100 rounded px-2.5 py-2 hover:text-primary hover:ring-1 hover:ring-primary;
}
.sub-title {
  @apply text-lg font-bold mt-4 mb-2;
}