hawkband-wled-client/app/globals.scss

$prefix: "ty" !default;

$hawkband-color: #001529;

$primary-color: #002e5d !default;

$white-color: #fff !default;
$gray-100: #f6f9fc !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #8898aa !default;
$gray-700: #525f7f !default;
$gray-800: #32325d !default;
$gray-900: #212529 !default;
$black-color: #000 !default;

$red-color: #dc3545 !default;
$orange-color: #fd7e14 !default;
$yellow-color: #fadb14 !default;
$green-color: #52c41a !default;
$teal-color: #20c997 !default;
$cyan-color: #17a2b8 !default;
$blue-color: #0d6efd !default;
$indigo-color: #6610f2 !default;
$purple-color: #6f42c1 !default;
$magenta-color: #eb2f96 !default;

// @import "~tiny-ui/dist/styles/index.min.css";
@import "~tiny-ui/components/style/index.scss";

.gradient-animation {
  background: linear-gradient(270deg, #0d6efd, #6f42c1);
  background-size: 400% 400%;
  -webkit-animation: gradient 30s ease infinite;
  -moz-animation: gradient 30s ease infinite;
  animation: gradient 30s ease infinite;
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

body {
  background: $hawkband-color;
  color: $white-color;

  .ty-layout-header {
    height: auto;
    &:after {
      content: " ";
      display: block;
      height: 3px;
      width: 100%;
      background: linear-gradient(270deg, #0d6efd, #6f42c1);
      background-size: 400% 400%;
      -webkit-animation: gradient 18s ease infinite;
      -moz-animation: gradient 18s ease infinite;
      animation: gradient 18s ease infinite;
    }
  }

  .ty-layout-content {
    background-color: $hawkband-color !important;
    .ty-row {
      background-color: transparent !important;
      color: $white-color;
    }
  }

  .ty-layout-footer {
    background: linear-gradient(270deg, #0d6efd, #6f42c1);
    background-size: 400% 400%;
    -webkit-animation: gradient 30s ease infinite;
    -moz-animation: gradient 30s ease infinite;
    animation: gradient 30s ease infinite;
  }

  .ty-menu_dark {
    .ty-menu-item {
      color: $white-color;
      a {
        color: $white-color;
      }
    }
  }

  .ty-steps-item.ty-steps-item_label-vertical {
    .ty-steps-item__content {
      width: 100%;
    }
  }
  .ty-steps {
    .ty-steps-item__title,
    .ty-steps-item__desc {
      color: $white-color;
    }
    .ty-steps-item_wait {
      .ty-steps-item__icon {
        color: rgba(0, 0, 0, 0.75);
      }
      .ty-steps-item__title,
      .ty-steps-item__desc {
        color: rgba(255, 255, 255, 0.45);
      }
    }
    .ty-steps-item_process {
      .ty-steps-item__icon {
        background-color: $blue-color !important;
        color: $white-color !important;
      }
    }
  }

  .ty-collapse_borderless {
    background-color: $hawkband-color;
    color: $white-color;
    .ty-collapse-item {
      border-bottom: 1px solid $blue-color;
      color: inherit;
      .ty-collapse-item__header {
        &:hover {
          background-color: $blue-color;
        }
        color: inherit;
      }
      .ty-collapse-item__content {
        border-top: 1px solid $blue-color;
        background-color: inherit;
        color: inherit;
      }
    }
  }

  .ty-btn_default {
    color: $white-color;
    background-color: $blue-color;
    border-color: rgba(255, 255, 255, 0.9);
    &:hover {
      color: $white-color;
      border-color: rgba(255, 255, 255, 0.75);
      background-color: rgba(13, 110, 253, 0.75);
    }
    &:active {
      color: $white-color;
      border-color: rgba(255, 255, 255, 0.5);
      background-color: rgba(13, 110, 253, 0.5);
    }
    &:focus {
      color: $white-color;
      border-color: rgba(255, 255, 255, 0.75);
      background-color: $purple-color;
    }
  }

  .ty-overlay {
    .ty-modal {
      .ty-modal__body {
        color: #000;
        .ty-transfer {
          .ty-transfer-panel {
            width: 210px;
          }
        }
      }
    }
  }

  .commandbar {
    display: block;
    position: sticky;
    top: calc(3.5rem + 2px);
    padding: 0.5rem 0 0.5rem 0;
    margin-bottom: 1rem;
    background-image: linear-gradient(
      to bottom,
      rgba(0, 21, 41, 1),
      rgba(0, 21, 41, 0)
    );
    text-align: center;
  }

  .notification {
    margin: 0 0 1rem 0;
  }

  @media only screen and (max-width: 551px) {
    .ty-notification-container {
      font-size: 0.7rem;
      width: 250px;
      .ty-notification {
        font-size: inherit;
        .ty-notification__title {
          font-size: 1rem;
        }
        .ty-tag {
          font-size: inherit;
        }
      }
    }
    .notification {
      display: none;
    }
  }
}