src/assets/components/status.scss

   1 .status {
   2     font-size: 0.8rem;
   3     color: var(--text-title);
   4
   5     &.offline:before, &.error:before {
   6       background-color: #d65c68;
   7       box-shadow: 0 0 5px 1px #d65c68;
   8       color: #d65c68;
   9     }
  10
  11     &.pending:before {
  12       background-color: #e8bb7d;
  13       box-shadow: 0 0 5px 1px #e8bb7d;
  14     }
  15
  16     &.online:before, &.ready:before {
  17       background-color: #94e185;
  18       box-shadow: 0 0 5px 1px #94e185;
  19     }
  20
  21     &.in-progress:before {
  22       background-color: #8fe87d;
  23       box-shadow: 0 0 5px 1px #8fe87d;
  24       animation: pulse 1s alternate infinite;
  25     }
  26
  27     @keyframes pulse {
  28       0% {
  29         background: rgba(255, 255, 255, 0.2);
  30         box-shadow: inset 0px 0px 10px 2px rgba(0, 255, 182, 0.3),
  31           0px 0px 5px 2px rgba(0, 255, 135, 0.2);
  32       }
  33       100% {
  34         background: rgba(255, 255, 255, 1);
  35         box-shadow: inset 0px 0px 10px 2px rgba(0, 255, 182, 0.5),
  36           0px 0px 15px 2px rgba(0, 255, 135, 1);
  37       }
  38     }
  39
  40     &:before {
  41       content: " ";
  42       display: inline-block;
  43       width: 8px;
  44       height: 8px;
  45       margin-right: 10px;
  46       border-radius: 8px;
  47     }
  48   }