MoviePilot-Frontend/src/styles/styles.scss

// Write your overrides
@tailwind base;
@tailwind components;
@tailwind utilities;


#nprogress .bar {
  background: #7D34FD !important;
  top: env(safe-area-inset-top) !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px #7D34FD, 0 0 5px #7D34FD !important;
  -webkit-transform: rotate(0deg) translate(0px, -1px);
  -ms-transform: rotate(0deg) translate(0px, -1px);
      transform: rotate(0deg) translate(0px, -1px);
}

.v-toast--bottom {
  margin-bottom: env(safe-area-inset-top);
}


.centered {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}


.top-centered {
  position: absolute;
  inset-block-start: 20%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.v-dialog > .v-overlay__content {
  margin-top: calc(env(safe-area-inset-top) + 1rem);
  max-height: calc(100% - env(safe-area-inset-top) - 1rem);
}

.v-dialog > .v-overlay__content{
  width: calc(100% - 1rem);
}

.v-dialog--fullscreen > .v-overlay__content{
  margin-top: env(safe-area-inset-top);
  max-height: calc(100% - env(safe-area-inset-top));
  width: 100%;
}



/* router view transition fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* router view transition fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.6s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-45px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(45px);
}