@robotical/sensors-dashboard/dist/components/modals/HowToUseModal/styles.module.css

A dashboard tool for depicting Marty data by Robotical

.howToUseModalContainer {
  width: min(76rem, 88vw);
  display: grid;
  gap: 1.4rem;
}

.modalIntro {
  color: var(--colour-BLACK_075);
  font-size: 1.5rem;
  line-height: 1.5;
}

.tabs {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem;
  background: var(--colour-BLUE_LIGHT_1);
  border: 0.1rem solid var(--colour-BLUE_LIGHT_3);
  border-radius: 1.4rem;
}

.button {
  min-height: 4.4rem;
  flex: 1;
  padding: 0.9rem 1.4rem;
  background: transparent;
  border: 0.2rem solid transparent;
  border-radius: 1rem;
  color: var(--colour-BLACK_075);
  cursor: pointer;
  font-weight: 800;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.button:hover {
  background: rgba(255, 255, 255, 0.74);
  color: var(--colour-BLACK);
}

.button:focus-visible,
.closeButton:focus-visible {
  outline: 0.3rem solid var(--focus-ring);
  outline-offset: 0.2rem;
}

.activeTab {
  background: var(--colour-TRUE_WHITE);
  color: var(--colour-primary-deep);
  box-shadow: 0 0.4rem 1.2rem rgba(38, 38, 38, 0.08);
}

.tabContent {
  min-height: 30rem;
  max-height: min(54vh, 52rem);
  padding: 0.4rem 0.8rem 0.8rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--colour-BLUE_LIGHT_2) transparent;
  scrollbar-width: thin;
}

.closeButton {
  min-height: 4.4rem;
  justify-self: end;
  padding: 0.9rem 1.8rem;
  background-color: var(--colour-primary-strong);
  color: var(--colour-TRUE_WHITE);
  border: 0.2rem solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  transition: background-color 0.18s ease;
}

.closeButton:hover {
  background-color: var(--colour-primary-deep);
}

@media (max-width: 640px) {
  .howToUseModalContainer {
    width: min(84vw, 76rem);
  }

  .tabs {
    align-items: stretch;
    flex-direction: column;
  }

  .tabContent {
    max-height: 50vh;
    padding-inline: 0;
  }

  .closeButton {
    width: 100%;
  }
}