Semantic UI HTML5 Meter Tag Styles

progress.overrides.import.less

/*******************************
         Site Overrides
*******************************/

/* <meter> */
meter {
  /* Reset the default appearance */
  // -webkit-appearance: none; /* this breaks Chrome v52+ http://blog.chromium.org/2016/06/chrome-52-beta-css-containment-simpler.html */
  -moz-appearance: none;
  appearance: none;

  width: 100%;
  height: 1rem;

  /* For Firefox */
  background: @background;
  // box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
  border-radius: @borderRadius;
}

/* WebKit */
meter::-webkit-meter-bar {
  background: @background;
  // box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
  border-radius: @borderRadius;
}

meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
  border-radius: @borderRadius;
}

meter::-webkit-meter-optimum-value {
  background: @indicatingSixthColor;
}

meter::-webkit-meter-suboptimum-value {
  background: @indicatingFourthColor;
}

meter::-webkit-meter-even-less-good-value  {
  background: @indicatingFirstColor;
}


/* Firefox */
meter::-moz-meter-bar {
  border-radius: @borderRadius;
}

meter:-moz-meter-optimum::-moz-meter-bar {
  background: @indicatingSixthColor;
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: @indicatingFourthColor;
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: @indicatingFirstColor;
}

Put this file in ./site/modules/progress.overrides.import.less to utilise the variables (and theme colours) from the Progress module.