@gdquest/gd-exercise-style/dist/scss/main_splash.css

Common style files for projects that implement GDExercise.

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
:root.test {
  --gd-exercise-bg-color: #c6e188;
  --gd-exercise-bg-color-inactive: #8fa346;
  --gd-exercise-bg-color-active: #547833;
}

:root.test.dark {
  --gd-exercise-bg-color: #391e77;
  --gd-exercise-bg-color-inactive: #705cb9;
  --gd-exercise-bg-color-active: #ab87cc;
}

:root {
  --gd-exercise-font-family: Montserrat, sans-serif;
  --gd-exercise-font-size: 1rem;
  --gd-exercise-app-border-radius: 8px;
  --gd-exercise-app-padding-dimensions: 8px;
  --gd-exercise-app-button-font-size: 12px;
  --gd-exercise-scrollbar-dimension: 8px;
  --gd-exercise-scrollbar-thumb-border-radius: 16px;
  --gd-exercise-container-margin: 0;
  --gd-exercise-container-padding: 8px;
  --gd-exercise-tabs-height: 33px;
  --gd-exercise-tab-margin: 0;
  --gd-exercise-tab-padding: 8px 12px;
  --gd-exercise-tab-font-style: normal;
  --gd-exercise-tab-font-weight: bold;
  --gd-exercise-tab-text-transform: uppercase;
  --gd-exercise-tab-border-radius: 0 0 0 0;
  --gd-exercise-tab-gap: 1px;
  --gd-exercise-button-font-size: 12px;
  --gd-exercise-button-cta-box-shadow-dimensions: 0px 2px 0px 0px;
  --gd-exercise-button-cta-pseudo-height: 2px;
  --gd-exercise-button-cta-font-weight: 800;
  --gd-exercise-button-cta-text-transform: uppercase;
  --gd-exercise-menu-font-size: 12px;
  --gd-exercise-menu-font-weight: normal;
  --gd-exercise-menu-height: 33px;
  --gd-exercise-menu-gap: 12px;
  --gd-exercise-menu-button-gap: 12px;
  --gd-exercise-text-color: black;
  --gd-exercise-scrollbar-thumb-bg-color: #8b8ba8;
  --gd-exercise-scrollbar-track-bg-color: #e3e5eb;
  --gd-exercise-bg-color: #b5b5cf;
  --gd-exercise-bg-color-inactive: #cfcfea;
  --gd-exercise-bg-color-active: #ced3df;
  --gd-exercise-tabs-bg-color: white;
  --gd-exercise-tab-color-active: black;
  --gd-exercise-tab-color-inactive: #404065;
  --gd-exercise-tab-text-shadow: 0px 2px 0px rgba(255, 255, 255, 0.25);
  --gd-exercise-tab-accent-color: #b5b5cf;
  --gd-exercise-button-cta-bg-color: #ffd500;
  --gd-exercise-button-cta-text-color: #403500;
  --gd-exercise-button-cta-box-shadow-color: #806b00;
  --gd-exercise-button-cta-box-shadow: 0px 2px 0px 0px #806b00;
  --gd-exercise-button-cta-bg-color-disabled: #ccbb66;
  --gd-exercise-button-cta-box-shadow-color-disabled: #86772d;
  --gd-exercise-button-cta-box-shadow-disabled: 0px 2px 0px 0px #86772d;
}

:root.dark {
  --gd-exercise-text-color: #ffffff;
  --gd-exercise-scrollbar-thumb-bg-color: #575774;
  --gd-exercise-scrollbar-track-bg-color: #14161c;
  --gd-exercise-bg-color: #30304a;
  --gd-exercise-bg-color-inactive: #151530;
  --gd-exercise-bg-color-active: #202531;
  --gd-exercise-tabs-bg-color: #000000;
  --gd-exercise-tab-color-active: #ffffff;
  --gd-exercise-tab-color-inactive: #9a9abf;
  --gd-exercise-tab-text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
  --gd-exercise-tab-accent-color: #30304a;
  --gd-exercise-button-cta-bg-color: #ffd500;
  --gd-exercise-button-cta-text-color: #403500;
  --gd-exercise-button-cta-box-shadow-color: #806b00;
  --gd-exercise-button-cta-box-shadow: 0px 2px 0px 0px #806b00;
  --gd-exercise-button-cta-bg-color-disabled: #ccbb66;
  --gd-exercise-button-cta-box-shadow-color-disabled: #86772d;
  --gd-exercise-button-cta-box-shadow-disabled: 0px 2px 0px 0px #86772d;
}

:root,
body,
#app,
.gd-splash-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--gd-exercise-app-border-radius);
}

.gd-splash {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: var(--gd-exercise-app-border-radius);
}
.gd-splash .gd-splash-error {
  position: absolute;
  width: 50vw;
  height: 30vh;
  top: 10vh;
  left: 25vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: red;
  font-size: xx-large;
  font-weight: bold;
  text-align: center;
}
.gd-splash .gd-splash-image {
  background-image: url("@/assets/svg/gdquest/gdquest-logo-light.svg");
  background-position: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  width: 30%;
  height: 30%;
  animation: alternate;
  animation: gd-splash-pulse 1s ease-in-out 0s infinite alternate both;
}
.gd-splash--dark {
  background-color: #30304a;
}
.gd-splash--dark .gd-splash-image {
  background-image: url("@/assets/svg/gdquest/gdquest-logo-dark.svg");
}

@keyframes gd-splash-pulse {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1.1);
  }
}

/*# sourceMappingURL=main_splash.css.map */