fe/styles/globals.scss

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

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

  //   --color-bg-default: #f3f4f6;
  //   --color-bg-default-alpha: rgba(243, 244, 246, 0.5);
  //   --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: #0a1929; // #18181b;
  //   --color-paper: rgb(39, 39, 42);
  //   --color-paper-alpha: rgba(39, 39, 42, 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: #ffffff;
  //   --color-gray-dark: #e0e0e0;
  // }

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

  .dark {
    color-scheme: dark;
  }

  html {
    height: 100%;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  abbr[title] {
    text-decoration: none;
  }

  body {
    // @apply bg-default text-gray-dark font-sans relative;
    @apply font-sans min-h-full antialiased text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-900;
  }

  a {
    // @apply text-gray-dark;
  }
  svg {
    @apply fill-current;
  }
}
@layer components {
  .container {
    @apply px-4 mx-auto overflow-hidden;
  }
  .btn {
    @apply inline-flex px-4 py-3 font-medium rounded items-center justify-center text-sm whitespace-nowrap; // space-x-3;
    &.btn-primary {
      @apply bg-blue-500 border border-blue-500;
      &.btn-outline,
      &.btn-light-outline {
        @apply bg-blue-500/30;
      }
      &.btn-dark-outline {
        @apply dark:bg-blue-500/30;
      }
      &.btn-light-outline {
        @apply dark:bg-blue-500;
      }
    }
    svg {
      @apply w-4 h-4;
    }
  }
  .btn-group {
    @apply inline-flex rounded;
    .btn {
      @apply flex-1;
      &:not(:last-of-type) {
        @apply rounded-r-none;
      }
      &:not(:first-of-type) {
        @apply rounded-l-none;
      }
    }
  }
}
#__next {
  @apply w-full min-h-screen relative;
}
.header {
  // @apply sticky border-b py-2 shadow bg-paper-alpha backdrop-blur z-40 top-0;
  @apply py-3 sticky top-0 z-40 w-full backdrop-blur flex-none  border-b border-slate-900/10 dark:border-slate-50/[0.06] bg-white/60  dark:bg-slate-900/75;

  .container {
    @apply flex justify-between items-center overflow-visible;
  }
  .logo {
    @apply flex items-center flex-shrink-0 select-none;
    img {
      @apply w-8 h-8 mr-2;
    }
    span {
      @apply hidden text-xl font-bold md:block text-black dark:text-white;
    }
  }
  .menu {
    @apply hidden absolute left-0 top-full w-full py-5 bg-white dark:bg-slate-800; // bg-paper;
    @apply md:flex md:relative md:items-center md:p-0 md:bg-transparent md:dark:bg-transparent;
    nav {
      @apply flex-1;
      ul {
        @apply md:flex;
        li {
          @apply relative;
        }
      }
    }
    .menu-item {
      @apply flex py-2 px-5 items-center text-sm leading-6 font-semibold text-slate-700 dark:text-slate-200 hover:text-sky-500 dark:hover:text-sky-400; // text-gray-dark md:text-gray-light md:hover:text-primary;
      svg {
        @apply mr-1 fill-current;
      }
    }
    .sub-menu {
      @apply hidden;
      @apply absolute shadow-lg rounded-xl top-full bg-slate-100; // bg-default;
      @apply text-slate-900 dark:bg-slate-800 dark:text-slate-400 dark:shadow dark:shadow-white/10 dark:highlight-white/10;
      &::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;
        @apply w-0 h-0 absolute bottom-full left-[25px] border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-b-[7px] border-b-slate-100 dark:border-b-slate-700;
      }
      ul {
        @apply py-2 block rounded-l-lg whitespace-nowrap;
        &.sub-menu-sized {
          @apply h-[312px] w-[640px];
        }
        &.sub-menu-items {
          @apply w-[640px] flex flex-wrap;
          li {
            @apply w-1/5;
          }
        }
      }
      .sub-menu-list {
        @apply absolute left-[132px] hidden top-0 h-[312px] w-[508px] rounded-r-lg py-2 px-4 bg-white dark:bg-slate-900 dark:highlight-white/10;
        p {
          @apply flex flex-wrap;
          strong {
            @apply block w-full py-1 px-4 text-slate-800 dark:text-slate-200;
          }
          a {
            @apply w-1/3 block py-1 px-4 rounded hover:bg-slate-100 dark:hover:bg-slate-800;
          }
        }
      }
      li {
        @apply static;
        > a {
          @apply block py-3 px-4;
        }
        &:hover {
          @apply bg-white dark:hover:bg-slate-900;
          .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 fill-sky-500;
    }
    input {
      @apply block w-full border border-sky-500 rounded-lg pl-10 pr-4 py-1 focus:outline-none bg-transparent; // border-primary text-primary;
    }
  }
  .buttons {
    @apply flex;
  }
  .btn {
    @apply inline-flex items-center justify-center relative bg-transparent cursor-pointer text-center p-2 w-8 h-8 rounded-lg border border-sky-500 text-sky-500; // border-primary text-primary;
    svg {
      @apply w-5 h-5 fill-current;
      &.icon-sun {
        @apply dark:hidden;
      }
      &.icon-moon {
        @apply hidden dark:block;
      }
    }
    + .btn {
      @apply ml-2;
    }
  }
  .menu-btn {
    @apply md:hidden;
    svg {
      &.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 md:flex;
    }

    .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);
            }
          }
        }
      }
    }
  }
  .breadcrumbs {
    @apply hidden lg:flex;
  }
}
.novel-title {
  @apply mt-5 mb-2 flex justify-between text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200;
}
.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 text-slate-700 dark:text-white;
}
.novel-item-desc {
  @apply text-xs 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 border-b border-slate-200 space-x-6 flex whitespace-nowrap dark:border-slate-200/5;
  .tab {
    @apply flex text-sm leading-6 font-semibold pt-3 pb-2.5 border-b-2 -mb-px text-slate-900 border-transparent hover:border-slate-300 dark:text-slate-200 dark:hover:border-slate-700;
    &.active {
      @apply text-sky-500 border-current;
    }
  }
}
.tags {
  @apply flex flex-wrap justify-start gap-2;
}
.tag {
  @apply inline-flex items-center cursor-pointer text-sm text-gray-900 bg-gray-100 rounded px-2.5 py-2  hover:ring-1 hover:ring-blue-400  dark:text-white hover:text-blue-600 dark:hover:text-blue-500 dark:bg-white/10 ring-inset ring-1 ring-transparent  dark:hover:ring-blue-500;
}
.sub-title {
  @apply text-lg font-bold mt-4 mb-2;
}
.breadcrumbs {
  @apply max-w-full;
  ul {
    @apply flex items-center whitespace-nowrap w-full overflow-hidden text-ellipsis;
    li {
      @apply flex items-center;
      a {
        @apply flex cursor-pointer items-center hover:underline;

        &:focus {
          @apply outline-none;
        }
        &:focus-visible {
          outline: 2px solid currentColor;
          outline-offset: 2px;
        }
      }
      + *:before {
        content: "";
        @apply ml-2 mr-3 block h-1.5 w-1.5 rotate-45 transform opacity-40;
        border-top: 1px solid;
        border-right: 1px solid;
        background-color: transparent;
      }
    }
  }
}

.footer {
  @apply mx-auto mt-10 w-full px-4 sm:px-6 lg:px-8 text-center;
  .container {
    @apply border-t border-slate-900/5 py-10;
  }

  .logo {
    @apply inline-flex items-center justify-center flex-shrink-0 select-none;
    img {
      @apply w-8 h-8 mr-2;
    }
    span {
      @apply hidden text-2xl font-bold md:block text-black dark:text-white;
    }
  }
  .copyright {
    @apply mt-5 text-center text-sm leading-6 text-slate-500;
  }
  .links {
    @apply mt-16 flex items-center justify-center space-x-4 text-sm font-semibold leading-6 text-slate-700;
  }
  .divider {
    @apply h-4 w-px bg-slate-500/20;
  }
}