128 lines
2.2 KiB
CSS
128 lines
2.2 KiB
CSS
#hue-container {
|
|
background-color: #f8f8f8;
|
|
padding: 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 10px;
|
|
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-weight: 400;
|
|
line-height: 38px;
|
|
letter-spacing: .1rem;
|
|
}
|
|
|
|
#hue-container > .columns {
|
|
margin-left: 0;
|
|
}
|
|
|
|
#hue-container > .three.columns {
|
|
width: 24%;
|
|
}
|
|
|
|
#hue-container > .six.columns {
|
|
width: 52%;
|
|
}
|
|
|
|
#rooms-list {
|
|
border-right: 1px solid #e4e4e4;
|
|
}
|
|
|
|
#lights-list {
|
|
margin-left: 0;
|
|
border: 1px solid #e4e4e4;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.hue-section-title {
|
|
padding: 7.5px;
|
|
background: #ececec;
|
|
border: 1px solid #e4e4e4;
|
|
}
|
|
|
|
.room-item {
|
|
color: #333;
|
|
padding: 10px 5px;
|
|
border-bottom: 1px solid #ddd;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.scene-item {
|
|
color: #333;
|
|
padding: 5px 10px;
|
|
border-bottom: 1px solid #e4e4e4;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.room-item:hover, .light-item:hover, .scene-item:hover {
|
|
background-color: #daf8e2 !important;
|
|
}
|
|
|
|
.room-item.selected, .light-item.selected, .scene-item.selected {
|
|
background-color: #c8ffd0 !important;
|
|
}
|
|
|
|
.room-lights-item, .room-scenes-item {
|
|
display: none;
|
|
}
|
|
|
|
.light-item {
|
|
color: #333;
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.light-item:not(:last-child) {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.light-item-name {
|
|
display: inline-block;
|
|
}
|
|
|
|
.all-lights-item, .animation-item {
|
|
background-color: #ececec;
|
|
}
|
|
|
|
.all-lights-item * > .light-item-name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.animation-item * > .light-item-name {
|
|
font-style: italic;
|
|
}
|
|
|
|
.slider-container {
|
|
padding: 1rem .5rem;
|
|
}
|
|
|
|
.slider-container > .columns {
|
|
line-height: initial;
|
|
}
|
|
|
|
.animation-type-container * > label {
|
|
line-height: initial;
|
|
font-weight: 100;
|
|
}
|
|
|
|
.light-ctrl-switch-container {
|
|
float: right;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.light-color-selector,
|
|
.animation-selector {
|
|
display: none;
|
|
background-color: white;
|
|
padding: 10px;
|
|
margin: 10px -10px -10px -10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.animation-container {
|
|
display: none;
|
|
}
|
|
|
|
.light-slider {
|
|
margin-top: 10px;
|
|
}
|
|
|