netatmo.bubbles.less

@dark: #000;
@good: limegreen;
@average: orange;
@bad: red;

.netatmo{
  display: inline-block;

  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;

    .room{
      padding: 0.25em 0.5em;
      text-align: left;
    }
    .primary{
      text-align: right;
    }
    .name,
    .secondary,
    .data{
      text-align: left;
    }
    .secondary{
      text-align: center;
      width: 5em;

      .co2{
        .visual{
          border-radius: 1em;
          box-shadow: 0 0 .9em 1em;
          height: .1em;
          margin: 1.5em auto;
          width: .1em;
        }
        .good{
          background-color: @good;
          color: @good;
        }
        .average{
          background-color: @average;
          color: @average;
        }
        .bad{
          background-color: @bad;
          color: @bad;
        }
        .undefined{
          background-color: @dark;
          color: @dark;
        }
      }
      .wind-angle{
        .visual{
          display: inline-block;
        }
      }
    }
    .data{
      width: 8em;
      .flash {
        animation: flasher 3s linear infinite;
      }
      .red {
        color: @bad
      }
      @keyframes flasher {
        50% { opacity: 0; }
      }
      div * {
        margin: 0 2px;
      }
    }
  }
}
.netatmo.horizontal{
  ul>li{
    display: inline-block;
  }
}