src/css/quasar.variables.scss

// Quasar Sass (& SCSS) Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.

// Check documentation for full list of Quasar variables

// Your own variables (that are declared here) and Quasar's own
// ones will be available out of the box in your .vue/.scss/.sass files

// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.

$primary: #539ced;
$secondary: #26a69a;
$accent: #9c27b0;

$dark: #252525;
$dark-header-bar-bg: #444540;
$grey: #67696d;

$positive: #21ba45;
$negative: #c10015;
$info: #31ccec;
$warning: #f2c037;

.q-drawer {
  background: transparent;
}

.bg-glass {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-bottom: 1px solid rgba(233, 232, 238, 1);
}
.q-layout {
  background-attachment: fixed;
  background-size: cover;
  animation: fadeInAnimation ease 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.linear-border-wrap {
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 3px;
  display: block;
}
.cluster-list {
  .q-expansion-item {
    margin-bottom: 10px;
    &.q-expansion-item--collapsed {
      .q-expansion-item__container {
        .q-item {
          transition: all 0.1s ease-out;
          min-height: auto;
          border: 2px solid transparent;
          border-radius: 14px;
          padding: 7px 14px;
          &__section {
            &--avatar {
              min-width: 40px;
            }
          }
          &__label {
            transition: all 0.1s ease-in-out;
            width: fit-content;
            font-weight: 700;
          }
        }
      }
    }
    .q-expansion-item__content {
      transition: all 0.1s ease-in !important;

      border: 2px solid white;
      border-radius: 14px;
      padding: 0px;
      margin-top: 0px;
      opacity: 0;
      overflow: hidden;
      min-height: auto;
    }
    &.q-expansion-item--expanded {
      .q-focus-helper {
        opacity: 0 !important;
      }
      .q-btn {
        &.q-hoverable:hover {
          .q-focus-helper {
            background: currentColor;
            opacity: 0.15 !important;
          }
        }
      }
      .q-expansion-item__container {
        .q-item {
          transition: all 0.4s ease-out;
          min-height: auto;
          padding-top: 7px;
          padding-right: 14px;
          padding-left: 14px;
          padding-bottom: 0;
          border: 2px solid white;
          border-radius: 14px;
          &__section {
            margin-bottom: -10px;
            &--avatar {
              min-width: 40px;
            }
          }
          &__label {
            transition: all 0.1s ease-in-out;
            margin-bottom: -1px;
            margin-left: 3px;
            background: var(--q-color-primary);
            color: white;
            padding: 2px 16px;
            width: fit-content;
            border-radius: 5px 5px 0 0;
            &__popup {
              margin-bottom: -10px;
              padding: 9px 16px;
            }
          }
        }
        .q-expansion-item__content {
          transition: all 1s ease-out !important;
          opacity: 1;
          border-color: transparent;
        }
      }
    }
  }
}
.body--light {
  .bg-glass {
    background-color: rgba(238, 238, 238, 0.61);
  }
  .q-layout {
    background: grey;
    background: url('/bg-layout.png');
  }
  .linear-border-wrap {
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(90deg, var(--q-primary), var(--q-secondary)) border-box !important;
  }
  .cluster-list {
    .q-expansion-item {
      &.q-expansion-item--collapsed {
        .q-expansion-item__container {
          .q-item {
            background:
              linear-gradient(#fff, #fff) padding-box,
              linear-gradient(90deg, var(--q-primary), var(--q-secondary))
                border-box !important;
          }
        }
      }
      .q-expansion-item__content {
        background:
          linear-gradient(#fff, #fff) padding-box,
          linear-gradient(90deg, var(--q-primary), var(--q-secondary))
            border-box !important;
      }
      &.q-expansion-item--expanded {
        .q-expansion-item__container {
          .q-item {
            border: 2px solid white;
          }
        }
      }
    }
  }
}

.body--dark {
  color: #cfcfcf !important;
  .bg-glass {
    background-color: rgba(25, 25, 25, 0.61);
    border-color: rgba(0, 0, 0, 0.28) !important;
  }
  .q-layout {
    background: #202020;
  }
  .linear-border-wrap {
    background:
      linear-gradient(#000, #000) padding-box,
      linear-gradient(90deg, var(--q-primary), var(--q-secondary)) border-box !important;
  }
  .cluster-list {
    .q-expansion-item {
      &.q-expansion-item--collapsed {
        .q-expansion-item__container {
          .q-item {
            background:
              linear-gradient(var(--q-dark), var(--q-dark)) padding-box,
              linear-gradient(90deg, var(--q-color-primary), var(--q-secondary))
                border-box !important;

            &__label {
              color: #cfcfcf;
            }
          }
        }
      }
      .q-expansion-item__content {
        background:
          linear-gradient(var(--q-dark), var(--q-dark)) padding-box,
          linear-gradient(90deg, var(--q-color-primary), var(--q-secondary))
            border-box !important;
      }
      &.q-expansion-item--expanded {
        .q-expansion-item__container {
          .q-item {
            border: none;
            background: transparent !important;
          }
        }
      }
    }
  }
}
.custom-notification {
  background-color: rgba(25, 25, 25, 0.8) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  color: white !important;
  ul {
    padding-left: 15px;
    margin-top: 0px;
    margin-bottom: 0px;
    list-style: circle;
  }
}
.notification-positive {
  border: 2px solid #0ef917 !important;
  .q-notification__icon--additional,
  .text-positive,
  strong {
    color: #0ef917 !important;
  }
}
.notification-warning {
  border: 2px solid #f9c80e !important;
  .q-notification__icon--additional,
  .text-warning,
  strong {
    color: #f9c80e !important;
  }
}
.notification-negative {
  border: 2px solid #f90e0e !important;
  .q-notification__icon--additional,
  .text-negative,
  strong {
    color: #f90e0e !important;
  }
}
h2 {
  padding: 0px;
  margin: 0px;
}
.text-h4 {
  font-size: 2rem;
}
.q-rounded-borders-xl {
  border-radius: 20px;
}
.q-btn--rounded {
  border-radius: 12px;
}

.logo {
  width: auto;
  height: auto;
  max-height: 40px;
  max-width: 150px;
}
:root {
  --q-transition-duration: 1s;
}

.w-fit-content {
  width: fit-content;
}
.zigbee {
  --q-color-primary: #c10015;
  --q-primary: #c10015;
  --q-color-secondary: #000000;
  --q-secondary: #000000;
}
.multiprotocol {
  --q-color-primary: #483c7a;
  --q-primary: #483c7a;
  --q-color-secondary: #bf197f;
  --q-secondary: #bf197f;
}
.matter {
  --q-color-primary: #539ced;
  --q-primary: #539ced;
  --q-color-secondary: #26a69a;
  --q-secondary: #26a69a;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}