dragoid/bin/client/assets/css/global.css

Download and read novels offline

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

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

:root {
  --is-mobile: 0;
}

html,
html.dark {
  --app-background: var(--color-dark-100);
  --app-color: var(--color-light-100);
  --app-scrollbar-color: var(--color-dark-800);

  /* ChapterPage */
  --page-background: var(--color-dark-400);
  --page-content-color: var(--color-light-500);
  --page-navigation-background: var(--color-dark-700);
  --page-navigation-divider-background: var(--color-dark-900);
  --page-navigation-houver-background: var(--color-dark-900);
  --page-navigation-disable-background: var(--color-gray-100);
}

/* Ligth Theme */
html.light {
  --app-background: var(--color-light-200);
  --app-color: var(--color-dark-100);
  --app-scrollbar-color: var(--color-dark-800);

  /* Chapter Page */
  --page-background: var(--color-white);
  --page-content-color: var(--color-dark-400);
  --page-navigation-background: var(--color-light-200);
  --page-navigation-divider-background: var(--color-gray-700);
  --page-navigation-houver-background: var(--color-gray-800);
  --page-navigation-disable-background: var(--color-gray-200);
}


html {
  font-size: 62.5%;
}

body {
  background-color: var(--app-background);
  font-size: 1.6rem;
  color: var(--app-color);
  width: 100%;
  min-height: 100vh;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAAXNSR0IArs4c6QAAAWlJREFUeNqlloFtwzAMBFU0PxF34k5eoUtktBZVnBysixEEUWBD+idpUnrTGXNkhPvt18awXZjKyE5BE5ix8sw6IEQHfKA1kZoMF5ZNnndqy1k2vae+wTAjMBPIp+sY3QJP1JADaXtvFjv4LR1TFKA5GD4suFSQcGEhjPWRn2+zKpRLT0hBwSo3lRerdpScpbMQCgZS2cH4tHQwerJVPIQjUVBH9wFTPOMgxnRwObhWLLkKlpaJA8TnpDxBwEv1r8Uo+ImegDVX4DBXKKWt3mQnZRRMlxZ7vfxDra6j0vD8vKUtKvJ79Pt1X9W6XxZNTvphhYxcGEjneWncGVH3pM2kAs6Qlq4XDIus4x2qDKieYEsz0nTAYd96MelYZEEgElZxnJtEa4mefZpr7hHGsLLmS2uDVgPGEUadgBxwrn3zwRwGhkU2NVqy6fUEbRs1CruoCM5zlPaIIL6/biLs0edft/d7IfjhT9gfL6wnSxDYPyIAAAAASUVORK5CYII=);
  background-attachment: scroll;
}

input,
button,
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html,
body,
.page {
  scrollbar-width: auto;
  scrollbar-color: var(--app-scrollbar-color) transparent;
  scrollbar-gutter: stable;
}

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}

*::-webkit-scrollbar-button,
*::-webkit-resizer {
  display: none;
  width: 0px;
  height: 0px;
  background-color: transparent;
}

.page {
  --chapter-width: min(736px, calc(100vw - 32px));
  width: var(--chapter-width);
  min-height: 800px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAAXNSR0IArs4c6QAAAWlJREFUeNqlloFtwzAMBFU0PxF34k5eoUtktBZVnBysixEEUWBD+idpUnrTGXNkhPvt18awXZjKyE5BE5ix8sw6IEQHfKA1kZoMF5ZNnndqy1k2vae+wTAjMBPIp+sY3QJP1JADaXtvFjv4LR1TFKA5GD4suFSQcGEhjPWRn2+zKpRLT0hBwSo3lRerdpScpbMQCgZS2cH4tHQwerJVPIQjUVBH9wFTPOMgxnRwObhWLLkKlpaJA8TnpDxBwEv1r8Uo+ImegDVX4DBXKKWt3mQnZRRMlxZ7vfxDra6j0vD8vKUtKvJ79Pt1X9W6XxZNTvphhYxcGEjneWncGVH3pM2kAs6Qlq4XDIus4x2qDKieYEsz0nTAYd96MelYZEEgElZxnJtEa4mefZpr7hHGsLLmS2uDVgPGEUadgBxwrn3zwRwGhkU2NVqy6fUEbRs1CruoCM5zlPaIIL6/biLs0edft/d7IfjhT9gfL6wnSxDYPyIAAAAASUVORK5CYII=);
  background-attachment: scroll;
  background-color: var(--page-background);
  margin: 0 auto;
  padding-top: 32px;
  padding-bottom: 38px;
}

@media screen and (max-width: 580px) {
  .page {
    width: 100%;
  }
}


@media screen and (max-width: 980px) {
  :root {
    --is-mobile: 1;
  }
}



.loading {
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-light-100);
  border-top-color: transparent;
  border-radius: 50%;
  animation: 1s spin linear infinite;
  animation-delay: -100ms;
  margin: 0 auto;
  flex: 0;
  display: flex;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}