dragoid/bin/client/assets/css/chapter.css

Download and read novels offline

@import url("/assets/css/fonts.css");

/* Theme */
html {
  --page-header-background: var(--color-dark-400);
  --page-header-link-houver-color: var(--color-white);


  /* Floating Menu */
  --float-navigation-background: var(--color-dark-700);
  --float-options-color: var(--color-gray-600);
  --float-divider: var(--color-dark-1000);
  --float-option-hover-color: var(--color-primary);
  --float-option-houver-background: var(--color-dark-900);
  --float-option-disable-color: var(--color-gray-100);
}

html.light {

  --page-header-background: var(--color-white);
  --page-header-link-houver-color: var(--color-dark-400);


  /* Floating Menu */
  --float-navigation-background: var(--color-light-400);
  --float-options-color: var(--color-dark-900);
  --float-divider: var(--color-light-200);
  --float-option-hover-color: var(--color-primary);
  --float-option-houver-background: var(--color-white);
  --float-option-disable-color: var(--color-gray-800);
}

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

.page section {
  padding: 32px 0px;
  width: calc(100% - 64px);
  margin: 0 auto;

  & h1 {
    font-size: 2.4rem;
    margin-bottom: 3.2rem;
  }
}

body>.header {
  width: 100%;
  margin: 24px auto;
  padding: 32px 24px;
  width: min(736px, calc(100% - 32px));
  border-radius: 32px;

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAAXNSR0IArs4c6QAAAWlJREFUeNqlloFtwzAMBFU0PxF34k5eoUtktBZVnBysixEEUWBD+idpUnrTGXNkhPvt18awXZjKyE5BE5ix8sw6IEQHfKA1kZoMF5ZNnndqy1k2vae+wTAjMBPIp+sY3QJP1JADaXtvFjv4LR1TFKA5GD4suFSQcGEhjPWRn2+zKpRLT0hBwSo3lRerdpScpbMQCgZS2cH4tHQwerJVPIQjUVBH9wFTPOMgxnRwObhWLLkKlpaJA8TnpDxBwEv1r8Uo+ImegDVX4DBXKKWt3mQnZRRMlxZ7vfxDra6j0vD8vKUtKvJ79Pt1X9W6XxZNTvphhYxcGEjneWncGVH3pM2kAs6Qlq4XDIus4x2qDKieYEsz0nTAYd96MelYZEEgElZxnJtEa4mefZpr7hHGsLLmS2uDVgPGEUadgBxwrn3zwRwGhkU2NVqy6fUEbRs1CruoCM5zlPaIIL6/biLs0edft/d7IfjhT9gfL6wnSxDYPyIAAAAASUVORK5CYII=);
  background-attachment: scroll;
  background-color: var(--page-header-background);
  color: var(--page-content-color);



  & a {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: var(--page-header-link-houver-color);
      text-decoration: underline;
    }
  }

  & .bradcrumb {
    display: flex;
    align-items: center;
    gap: 8px;

    & *:first-child {
      flex-shrink: 0;
    }

    & span {
      width: fit-content;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

#chapter>.title {
  font-family: var(--chapter-font-current);
}

#chapter>.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
===================
*/

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

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

  & .option {
    width: auto;
    height: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-color);
    text-decoration: none;
    cursor: pointer;
    transition: 300ms linear;
    background: transparent;
    border: none;
    text-align: center;

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

    &:is(button) {
      flex-shrink: 0;
      min-width: 42px;
    }

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

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




.floating-navigation {
  position: fixed;
  bottom: 0px;
  left: 0px;
  background: var(--float-navigation-background);
  width: 100vw;
  flex-shrink: 0;
  flex-grow: 0;
  overflow: hidden;
  height: 54px;
  display: flex;
  align-items: center;
  display: none;

  &.show {
    display: flex;
  }

  & .option {
    text-decoration: none;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--float-options-color);
    height: 54px;
    padding: 0px;
    background: transparent;
    border: none;
    cursor: pointer;

    &.a svg {
      display: none;
    }

    &:hover {
      background: var(--float-option-houver-background);
      color: var(--float-option-hover-color);
    }

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

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


@media (min-width: 981px) {
  .floating-navigation { 
    --floating-position: calc(-50% + (var(--chapter-width) / 2) + (72px / 2));
    position: fixed;
    top: calc(100vh / 4);
    left: 50%;
    transform: translateX(calc(var(--floating-position) + 12px));
    background: var(--float-navigation-background);
    height: fit-content;
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;

    & .option {
      text-decoration: none;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: var(--float-options-color);
      height: 54px;
      padding: 0px 32px;
      background: transparent;
      border: none;
      cursor: pointer;

      &:nth-child(even) {
        border-top: 1px solid var(--float-divider);

        &:not(:last-child) {
          border-bottom: 1px solid var(--float-divider);
        }
      }

      & span {
        display: none;
      }

      &:hover {
        background: var(--float-option-houver-background);
        color: var(--float-option-hover-color);
      }

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

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