dragoid/bin/client/assets/css/components/modal.css

Download and read novels offline

html .modal{
  /* Base Modal */
  --modal-background: rgba(0, 0, 0, 0.8);
  --modal-wrapper-background: var(--color-dark-200);
  --modal-wrapper-border-color: var(--color-dark-900);
  --modal-heading-border-color: var(--color-dark-700);
  --modal-button-close-color: var(--color-dark-900);
  --modal-button-close-hover-color: var(--color-gray-500);
}

html.light .modal{
  /* Base Modal */
  --modal-background: rgba(0, 0, 0, 0.8);
  --modal-wrapper-background: var(--color-white);
  --modal-wrapper-border-color: var(--color-light-200);
  --modal-heading-border-color: var(--color-light-200);
  --modal-button-close-color: var(--color-light-100);
  --modal-button-close-hover-color: var(--color-gray-500);
}

.modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: var(--modal-background);
  top: 0px;
  left: 0px;
  z-index: 1000;

  &[data-hidden=true] {
    display: none;
  }
}


.modal > .wrapper {
  padding: 24px;
  border-radius: 8px;
  background: var(--modal-wrapper-background);
  border: 1px solid var(--modal-wrapper-border-color);
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(550px, calc(100% - 32px));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  animation: showin 150ms linear forwards;
}

@media screen and (max-width: 540px) {
  .modal > .wrapper {
    padding: 24px 8px;
    width: min(550px, calc(100% - 16px));
  }
}

.modal > .wrapper > .heading {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--modal-heading-border-color);

  & .title {
    font-weight: 400;
    font-size: 1.8rem;
  }

  & button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--modal-button-close-color);
    cursor: pointer;

    &:hover {
      color: var(--modal-button-close-hover-color);
    }
  }
}