fe/styles/globals.scss

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

@layer base {
  .dark {
    color-scheme: dark;
  }

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

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

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

  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 text-white;
      &.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-gray-900/10 dark:border-gray-50/[0.06] bg-white/60  dark:bg-gray-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-gray-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-gray-700 dark:text-gray-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-gray-100; // bg-default;
      @apply text-gray-900 dark:bg-gray-800 dark:text-gray-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-gray-100 dark:border-b-gray-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-gray-900 dark:highlight-white/10;
        p {
          @apply flex flex-wrap;
          strong {
            @apply block w-full py-1 px-4 text-gray-800 dark:text-gray-200;
          }
          a {
            @apply w-1/3 block py-1 px-4 rounded hover:bg-gray-100 dark:hover:bg-gray-800;
          }
        }
      }
      li {
        @apply static;
        > a {
          @apply block py-3 px-4;
        }
        &:hover {
          @apply bg-white dark:hover:bg-gray-900;
          .sub-menu-list {
            @apply block;
          }
        }
        &:first-child {
          .sub-menu-list {
            @apply block;
          }
        }
      }
    }
    li:hover {
      .sub-menu {
        @apply md:block;
      }
    }
  }
  .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;
  // }
  .search-input {
    @apply mx-5 my-2 md:my-0;
  }
}
.search-input {
  @apply relative;
  .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;
  }
}
.novel-title {
  @apply mt-5 mb-2 flex justify-between text-2xl sm:text-3xl font-extrabold text-gray-900 tracking-tight dark:text-gray-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-gray-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 select-none;
  &::after {
    @apply absolute left-0 top-0 h-full w-full;
    content: "";
    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-gray-200 space-x-6 flex whitespace-nowrap dark:border-gray-200/5;
  @apply overflow-x-auto snap-x scrollbar:h-px scrollbar:w-px scrollbar-track:bg-gray-100 scrollbar-thumb:bg-gray-300;
  @apply dark:scrollbar-track:bg-gray-800  dark:scrollbar-thumb:bg-gray-700;
  .tab {
    @apply flex text-sm leading-6 font-semibold pt-3 pb-2.5 border-b-2 text-gray-900 border-transparent hover:border-gray-300 dark:text-gray-200 dark:hover:border-gray-700  snap-start;
    &.active,
    &.Mui-selected {
      @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 whitespace-nowrap w-full overflow-hidden text-ellipsis; // flex items-center
    li {
      @apply inline items-center;
      a {
        @apply cursor-pointer hover:underline; // flex items-center

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

.footer {
  @apply mt-10 border-t border-gray-900/5 dark:border-gray-100/5; // mx-auto w-full px-4 sm:px-6 lg:px-8 text-center;
  .container {
    @apply py-10 flex items-center whitespace-nowrap gap-5 flex-wrap justify-center;
  }

  .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 text-center text-sm leading-6 text-gray-500;
  }

  .links {
    @apply flex items-center justify-center space-x-4 text-sm font-semibold leading-6 text-gray-700 dark:text-gray-400;
  }

  .divider {
    @apply h-4 w-px bg-gray-500/20;
  }
}
#nprogress {
  pointer-events: none;
  .bar {
    // background: ${color};
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    // height: ${height}px;
  }
  .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    // box-shadow: 0 0 10px ${color}, 0 0 5px ${color};
    opacity: 1;
    -webkit-transform: rotate(3deg) translate(0px, -4px);
    -ms-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px);
  }
  .spinner {
    display: "block";
    position: fixed;
    z-index: 1031;
    top: 15px;
    right: 15px;
  }
  .spinner-icon {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: solid 2px transparent;
    // border-top-color: ${color};
    // border-left-color: ${color};
    border-radius: 50%;
    -webkit-animation: nprogresss-spinner 400ms linear infinite;
    animation: nprogress-spinner 400ms linear infinite;
  }
}
.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
  #nprogress .spinner,
  #nprogress .bar {
    position: absolute;
  }
}

@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}