pimatic-hue-zll/app/hue-zll-light.css

Pimatic integration with (Zigbee Light Link based) Philips Hue

li.sortable.huezlllight-device.no-header{
  min-height: 30px;
}

li.sortable.huezlllight-device label {
  float: left;
}

/* dimmer slider */
ul.items .ui-slider-input{
  display: none;
}

ul.items .huezlllight-device div.item-inner .ui-slider-track {
  margin-left: 22px;
  margin-right: 8px;
}

ul.items .huezlllight-device .ui-slider {
  float: right;
  margin: 1px 4px -1px 5px;
  width: 15em;
}

ul.items .huezlllight-device .ui-dimlevel {
  float: right;
  min-height: 30px;
}

/* Dimlevel slider uses an alpha gradient */
ul.items .huezlllight-device .ui-dimlevel .ui-slider-track {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
ul.items .huezlllight-device .ui-dimlevel .ui-slider-track .ui-slider-bg {
  background: none;
}

/* Spectrum color picker */
ul.items .huezlllight-device .ui-colorpicker div.sp-replacer {
  height: 1.75em;
  margin-left: auto;
  margin-right: auto;
  border: 0px;
  background: none;
  padding: 0px;
  min-height: 30px;
}

ul.items .huezlllight-device .ui-colorpicker div.sp-preview {
  width: 94px;
  height: 100%;
  border-radius: 3em;
  border-width: 0px;
}

ul.items .huezlllight-device .ui-colorpicker div.ui-state-disabled {
  box-shadow: 0px 0px 0px 2px silver;
}

ul.items .huezlllight-device .ui-colorpicker div.sp-preview-inner {
  border-radius: inherit;
}

ul.items .huezlllight-device .ui-colorpicker div.sp-dd {
  display: none;
}

/* Override Spectrum's value gradient to be invisible, as we ignore it anyway */
div.sp-container div.sp-sat div.sp-val {
  background-image: none;
}

div.sp-container {
  border: 0px;
  background-color: white;
}

ul.items .huezlllight-device div.ui-colorpicker-spacer {
  width: 94px;
  height: 30px;
  margin-left: 10px;
  float: right;
}

/* Color Temp slider uses a gradient */
ul.items .huezlllight-device .ui-color .ui-slider-track {
  background: linear-gradient(to right, hsl(195, 100%, 85%), White, hsl(51, 100%, 85%));
}
ul.items .huezlllight-device .ui-color .ui-slider-bg {
  background: none;
}

ul.items .huezlllight-device .ui-color {
  float: right;
  clear: right;
  min-height: 30px;
  margin-top: 8px;
}

/* Mobile adjustments */
@media only screen and (max-width:380px){ 
    ul.items .huezlllight-device .ui-slider {
      float: right;
      margin: 1px 4px -1px -15px;
      width: 13em;
    }   
}

@media only screen and (max-width:320px){    
    ul.items .huezlllight-device .ui-slider {
        width: 12em;
    }    
}