netatmo.bubbles.less

@good: limegreen;
@average: orange;
@bad: red;

.xxlarge{
  font-size: 95px;
  letter-spacing: -3px;
  line-height: 95px;
}

.netatmo{
  .bubbles{
    .module{
      .name{
        text-align: left;
      }
      .primary, .secondary, .data{
        text-align: left;
      }
      .primary{}
      .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;
          }
        }
        .WindAngle{
          .visual{
            //margin: .4em;
            display: inline-block;
          }
        }
      }
      .data{
        width: 8em;

        .flash {
          animation: flasher 1s linear infinite;
        }

        @keyframes flasher {
          50% { opacity: 0; }
        }
      }
    }
  }
}