mealie/frontend/assets/css/main.css

.layout-enter-active,
.layout-leave-active {
  transition: opacity 0.2s;
}
.layout-enter,
.layout-leave-active {
  opacity: 0;
}

.narrow-container {
  max-width: 800px !important;
}

.md-container {
  max-width: 950px !important;
}

.theme--dark.v-application {
  background-color: var(--v-background-base, #121212) !important;
}

.theme--dark.v-navigation-drawer {
  background-color: var(--v-background-base, #121212) !important;
}

.theme--dark.v-card {
  background-color: #2b2b2b !important;
}

.left-border {
  border-left: 5px solid var(--v-primary-base) !important;
}

.left-warning-border {
  border-left: 5px solid var(--v-warning-base) !important;
}

.handle {
  cursor: grab;
}

.hidden {
  visibility: hidden !important;
}

.v-card__text,
.v-card__title {
  word-break: normal !important;
}

.grid-cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

@media screen and (max-width: 960px) {
  .grid-cols-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 600px) {
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
}