src/css/quasar-override.scss
body {
  background-color: var(--bg) !important;

  &.mobile.action-pane-opened {
    background-color: var(--bg-alt) !important;
  }
}

body.standalone.action-pane-opened {
  background-color: var(--bg-alt) !important;
}

.q-page-container {
  background-color: var(--bg);
}

.q-drawer {
  background-color: var(--bg-alt);
}

.q-card {
  background: var(--card-background-color);
}

.q-menu {
  box-shadow: var(--shadow-main);
  border: var(--border-main);
  z-index: 999999;
  background: var(--bg);
}

.q-item.q-router-link--active,
.q-item--active {
  color: var(--base8);
}

.q-page {
  height: calc(var(--viewport-height) - var(--footer-height));
  max-height: calc(var(--viewport-height) - var(--footer-height));
  overflow-y: auto;
  padding: var(--page-padding);
}

.gap-4 {
  gap: 4px;
}

.gap-8 {
  gap: 8px;
}

.gap-32 {
  gap: 32px;
}

.gap-16 {
  gap: 16px;
}

.text-red {
  color: var(--red) !important;
}

.text-primary {
  color: var(--blue) !important;
}

.q-field--standout.q-field--dark.q-field--highlighted .q-field__native,
.q-field--dark .q-field__native,
.q-field--dark .q-field__prefix,
.q-field--dark .q-field__suffix,
.q-field--dark .q-field__input {
  color: var(--fg);
}

.q-list {
  .q-item {
    padding: var(--menu-padding);
  }
}
.q-dialog__inner.no-pointer-events {
  pointer-events: all !important;
}

.q-icon {
  color: var(--fg);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:selected,
input:-internal-autofill-selected,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--fg);
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px transparent;
}

.q-field--standout.q-field--highlighted .q-field__native,
.q-field--standout.q-field--highlighted .q-field__prefix,
.q-field--standout.q-field--highlighted .q-field__suffix,
.q-field--standout.q-field--highlighted .q-field__prepend,
.q-field--standout.q-field--highlighted .q-field__append,
.q-field--standout.q-field--highlighted .q-field__input {
  color: var(--fg);
}

.q-field__control:before,
.q-field__control:after {
  background: transparent !important;
}
