Hello Nognog,
fantastic config, would you mind sharing it? I love your work!
Thanks in advance!
how did you put the weather icon in the dashboard, I suppose it changes depending on the weather condition outside
Hi Daniel,
fantastic HabPanel.
Iāve been trying to use some of your work, specifically Mi Robot widget, but it looks like you have done some customisations to matrix-theme.css or similar, as Iām getting a different layout. Also, you used icon names in German, which is totally fine of course, but I just liked them and quite frutlessy tried to find them amonghts squidink stuff.
Anyhow, is there any chance that you can share some of that stuff?
Thanks!
Hi,
Impressive work. Is there any chance that you can share some of the files as a reference for my design? Thanks a lot.
did somebody managed how to get an additional function using jquery mousedown? im too dumb to understand how to do it by myself
Hi guys,
everytime when Iām switching to the matrix-them stylesheet in my habpanel configuration the screen width will be adjusted. It also has an impact on the widget width itself (see red marked area). Could you please help me to find the error.
Hi,
Yes I am not the .json programmer and I do my best to improve but since couple of days I struggle with three problems:
- I can not get icon āheaterā displayed on thermostat section.
- I can not get the scene buttons, temp. set buttons and valve value aligned with the rest of the content.
- Active scene is not highlighted
Can someone look at this and help me to find the solution?
All icons saved in the /static/matrix-theme/squidink.svg are displayed properly only āheaterā can not. I tried many tricks but gave up.
This is Part of the squidink.svg file referring to the heater icon:
<?xml version='1.0' encoding='utf8'?>
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 48 48" version="1.1" viewBox="0 0 48 48" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><!--Generated by SVG-Combiner--><g id="down-arrow-2">
<polyline fill="none" points=" 46,13 24,35 2,13 " stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" />
<g id="heater">
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M44,37
c0,1.6568527-1.3431473,3-3,3H7c-1.6568542,0-3-1.3431473-3-3V6c0-1.6568542,1.3431458-3,3-3h34c1.6568527,0,3,1.3431458,3,3V37z"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="18" y1="7" x2="30" y2="7"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="10" y1="15" x2="10" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="14" y1="15" x2="14" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="18" y1="15" x2="18" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="22" y1="15" x2="22" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="26" y1="15" x2="26" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="30" y1="15" x2="30" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="34" y1="15" x2="34" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="38" y1="15" x2="38" y2="18"/>
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M38,35H10
c-1.1045694,0-2-0.8954315-2-2v-8c0-1.1045704,0.8954306-2,2-2h28c1.1045685,0,2,0.8954296,2,2v8
C40,34.1045685,39.1045685,35,38,35z"/>
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M12,41v3
c0,0.5522842-0.4477148,1-1,1H9c-0.5522852,0-1-0.4477158-1-1v-3"/>
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M40,41v3
c0,0.5522842-0.4477158,1-1,1h-2c-0.5522842,0-1-0.4477158-1-1v-3"/>
</g>
</svg>
Ref2. Scene buttons and value circles shall be matching the sectionās width and highlighted being active
My widget:
<div class="section">
<div class="bigDash">
<div class="description">Temperature</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('BS_Office_Temperature') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
<div class="bottom">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
<div class="value">feels like {{itemValue('BS_Office_Temperature') | number:0}} °C</div>
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#sun"></use></svg></div>
<div class="value">{{itemValue('BS_Office_Luminance') | number:0}} %</div>
</div>
</div>
<div class="bigDash">
<div class="description">Thermostat</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#heater"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('BS_Office_Thermostat_Temp') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
<div class="bottom">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
<div class="value">Heat: {{itemValue('BS_Office_Thermostat_SetpointHeat') | number:0}} °C</div>
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#heater"></use></svg></div>
<div class="value">Valve: {{itemValue('BS_Office_Thermostat_Valve') | number:0}} %</div>
<div class="controlGroup">
<div class="control">OFF</div>
<div class="control">18</div>
<div class="control">21</div>
<div class="control">22</div>
<div class="control">24</div>
</div>
<div class="widget">
<div class="sceneGroup">
<div class="scene" ng-click="sendCmd('BS_Office_Thermostat_Mode', '0')">OFF</div>
<div class="scene" ng-click="sendCmd('BS_Office_Thermostat_Mode', '1')">HEAT</div>
<div class="scene" ng-click="sendCmd('BS_Office_Thermostat_Mode', '11')">Eco HEAT</div>
</div>
</div>
</div>
</div>
</div>
Hi.
I am trying to make my icons dynamic. in this example its working like expected
But now i want to make this with group(glights) that is filtered . is this possible? can the ng-if check the value of item in the group? and if yes how is the syntax?
<div class="widgetMenu2">
<div class="icon on" ng-if="itemValue('GenericMQTTThing_SonofLamp')=='ON'">
<svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg></div>
<div class="icon off" ng-if="itemValue('GenericMQTTThing_SonofLamp')=='OFF'">
<svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg></div>
<div class="name">{{(itemsInGroup('glights') | filter:{state:'On'}).length}} of {{(itemsInGroup('glights')).length}}</div>
</div>```I use itemState and its working , i dont know if this is the correct way.
<div class="icon on" ng-if="itemState('glights')=='ON'">
I understand this might be too much to solve at once. Let me start with icon display next to the temp.
Did someone had such problem and fixed that? Below the Icon I want to display
<g id="heater">
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M44,37
c0,1.6568527-1.3431473,3-3,3H7c-1.6568542,0-3-1.3431473-3-3V6c0-1.6568542,1.3431458-3,3-3h34c1.6568527,0,3,1.3431458,3,3V37z"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="18" y1="7" x2="30" y2="7"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="10" y1="15" x2="10" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="14" y1="15" x2="14" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="18" y1="15" x2="18" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="22" y1="15" x2="22" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="26" y1="15" x2="26" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="30" y1="15" x2="30" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="34" y1="15" x2="34" y2="18"/>
<line fill="none" stroke-linecap="round" stroke-miterlimit="10" x1="38" y1="15" x2="38" y2="18"/>
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M38,35H10
c-1.1045694,0-2-0.8954315-2-2v-8c0-1.1045704,0.8954306-2,2-2h28c1.1045685,0,2,0.8954296,2,2v8
C40,34.1045685,39.1045685,35,38,35z"/>
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M12,41v3
c0,0.5522842-0.4477148,1-1,1H9c-0.5522852,0-1-0.4477158-1-1v-3"/>
<path fill="none" stroke-linecap="round" stroke-miterlimit="10" d="M40,41v3
c0,0.5522842-0.4477158,1-1,1h-2c-0.5522842,0-1-0.4477158-1-1v-3"/>
</g>
and its reference:
<div class="description">Thermostat</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#heater"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('BS_Office_Thermostat_Temp') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
Hi Sjef86,
Same issue here. Have you found a solution for the dropdown list in the meantime?
As you mentioned, there is indeed a list of saved playlist in the paperUI.
Thank you for your feedback.
Br,
Simon
Hi Daniel,
I have the same request as Marc. Would you mind sharing the spotify widget?
I must say, your dashboard looks really amazing.
Best regards,
Simon
Based of what I understand of the CSS, youāre looping over all items of a group to display its status and to enable switching.
<div ng-repeat=\"item in itemsInGroup('gGroundFloorLights').concat(itemsInGroup('gGroundFloorHue')) | filter:query as filtered\">
What if you have multiple groups (e.g. gBasement, gFirstFloor, fSecondFloor)? I suppose I have to copy everything 3 times and modify each loop. Is this correct? In order to avoid this, Iāve created a string in the widget that I want to use as loop. But this isnāt working. Any help?
<div ng-repeat=\"item in itemsInGroup('{itemValue(config.group_name)}') | filter:query as filtered\">Sorry mate for the late reply.
I have this code in every page. I have a template on each page. and i place all sections. widgets and buttons into the one template.
I have this part of the code at the beginning of the template.
<style>
.section .widget{
padding:5px 0px 5px 0px;
margin:2px 0px 2px 0px;
}
@media screen and (max-width: 750px) {
#AlarmSection, #ZoneSection{
width:100%;
}
.collapsible-menu label {
visibility: visible;
font-size: 30px;
display: block;
cursor: pointer;
}
.menu-content {
max-height: 0;
overflow: hidden;
margin-right: 35px;
}
ul li2 {
display:block;
float: none;
}
ul li3 {
visibility: hidden;
display:none;
}
}
</style>
<div class="section">
<div class="collapsible-menu">
<input type="checkbox" id="menu"><label for="menu">{{ngModel.name}}</label></input>
<div class="menu-content"><li3>{{itemValue('Date') | date:'d MMM yyyy | HH:mm a'}}</li3>
<ul>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Alarm']" ng-click="sendCmd('HomePageItem', 'Home?kiosk=on')" >Alarm</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Lights']" ng-click="sendCmd('HomePageItem', 'Lights?kiosk=on')" >Lights</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='TV']" ng-click="sendCmd('HomePageItem', 'Tv?kiosk=on')" >TV</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Google Home']" ng-click="sendCmd('HomePageItem', 'Chromecast?kiosk=on')" >Google Home</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Blinds']" ng-click="sendCmd('HomePageItem', 'Blinds?kiosk=on')" >Blinds</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Irrigation']" ng-click="sendCmd('HomePageItem', 'Irrigation?kiosk=on')" >Irrigation</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Vacuum']" ng-click="sendCmd('HomePageItem', 'Vacuum?kiosk=on')" >Vacuum</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Logs']" ng-click="sendCmd('HomePageItem', 'Logs?kiosk=on')" >Logs</a2></li2>
</ul>
</div>
</div>
</div>
I then have an item called HomePageItem that is updated with the page view. And in habpanel, i have it set to look at HomePageItem and go to that page when it is updated.
The page names is what is shown at the end of the URL when you are on the page you want. So for instance, you would change this part Vacuum?kiosk=on to whatever your page is called. kiosk=on will remove the menu bar and page name up the top on each page. I do this because i have the Menu being highlighted depending on the page name that is active. You can remove the Kiosk=on or change it to Kiosk=off if you wanted to keep the menus.
So for instance. This is my entire code for my Alarm Page
<style>
.section .widget{
padding:5px 0px 5px 0px;
margin:2px 0px 2px 0px;
}
@media screen and (max-width: 750px) {
#AlarmSection, #ZoneSection{
width:100%;
}
.gbtn {
width: 65px;
height: 65px;
font-size: 2em;
line-height:65px;
margin: 5px 5px 5px 5px;
}
.gbtn:before {
width: 75px;
height: 75px;
top: -5px;
left: -5px;
font-size: 23px;
}
.section .lcd {
height: 150px;
}
.section .lcd .title{
font-size:2em;
}
.section .lcd .state{
font-size:1.5em;
}
.section .lcd .code{
font-size:2em;
}
.collapsible-menu label {
visibility: visible;
font-size: 30px;
display: block;
cursor: pointer;
}
.menu-content {
max-height: 0;
overflow: hidden;
margin-right: 35px;
}
ul li2 {
display:block;
float: none;
}
ul li3 {
visibility: hidden;
display:none;
}
}
</style>
<div class="section">
<div class="collapsible-menu">
<input type="checkbox" id="menu"><label for="menu">{{ngModel.name}}</label></input>
<div class="menu-content"><li3>{{itemValue('Date') | date:'d MMM yyyy | HH:mm a'}}</li3>
<ul>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Alarm']" ng-click="sendCmd('HomePageItem', 'Home?kiosk=on')" >Alarm</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Lights']" ng-click="sendCmd('HomePageItem', 'Lights?kiosk=on')" >Lights</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='TV']" ng-click="sendCmd('HomePageItem', 'Tv?kiosk=on')" >TV</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Google Home']" ng-click="sendCmd('HomePageItem', 'Chromecast?kiosk=on')" >Google Home</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Blinds']" ng-click="sendCmd('HomePageItem', 'Blinds?kiosk=on')" >Blinds</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Irrigation']" ng-click="sendCmd('HomePageItem', 'Irrigation?kiosk=on')" >Irrigation</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Vacuum']" ng-click="sendCmd('HomePageItem', 'Vacuum?kiosk=on')" >Vacuum</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Logs']" ng-click="sendCmd('HomePageItem', 'Logs?kiosk=on')" >Logs</a2></li2>
</ul>
</div>
</div>
</div>
<div class="section" id="AlarmSection">
<div class="lcd">
<div class="title"><p style="display: table-cell;vertical-align: middle;">State</p></div>
<div class="state"><p style="display: table-cell;vertical-align: middle;">{{itemValue('currentAlarm')}}</p></div>
<div class="code"><span style="display: table-cell;vertical-align: middle"><strong>{{itemValue('KeypadString')}}</strong></span></div>
</div>
<div class="centerGroup">
<div ng-click="sendCmd('AlarmMode', 'DISARM')" class="gbtn">Off</div>
<div ng-click="sendCmd('AlarmKeypad', '1')" class="gbtn">1</div>
<div ng-click="sendCmd('AlarmKeypad', '2')" class="gbtn">2</div>
<div ng-click="sendCmd('AlarmKeypad', '3')" class="gbtn">3</div>
</div>
<div class="centerGroup">
<div ng-click="sendCmd('AlarmMode', 'STAY')" class="gbtn">Stay</div>
<div ng-click="sendCmd('AlarmKeypad', '4')" class="gbtn">4</div>
<div ng-click="sendCmd('AlarmKeypad', '5')" class="gbtn">5</div>
<div ng-click="sendCmd('AlarmKeypad', '6')" class="gbtn">6</div>
</div>
<div class="centerGroup">
<div ng-click="sendCmd('AlarmMode', 'ARM')" class="gbtn">Arm</div>
<div ng-click="sendCmd('AlarmKeypad', '7')" class="gbtn">7</div>
<div ng-click="sendCmd('AlarmKeypad', '8')" class="gbtn">8</div>
<div ng-click="sendCmd('AlarmKeypad', '9')" class="gbtn">9</div>
</div>
<div class="centerGroup">
<div ng-click="sendCmd('AlarmKeypad', '11')" class="gbtn">Clr</div>
<div ng-click="sendCmd('AlarmKeypad', '*')" class="gbtn">*</div>
<div ng-click="sendCmd('AlarmKeypad', '0')" class="gbtn">0</div>
<div ng-click="sendCmd('AlarmKeypad', '#')" class="gbtn">#</div>
</div>
</div>
<div class="section" id="ZoneSection">
<div class="controls">
<div class="widget">
<div class="row row-no-gutters" style="margin-bottom: 10px;">
<div class="name">Doors</div>
<div class="summ">{{ ( filtered1 | filter: { state: 'ON' } ).length }} of {{filtered1.length}} open</div>
</div>
<div ng-repeat="item in itemsInGroup('gDoors') | filter:query as filtered1">
<div class="row row-no-gutters">
<div class="col-xs-8 text-left" >{{item.label}}</div>
<div class="col-xs-4 text-right" ng-style="{ color: itemValue(item.name)== 'Open'?'orange':'lightblue'}">{{itemValue(item.name)}}</div>
</div>
</div>
</div>
<div class="widget">
<div class="row row-no-gutters" style="margin-bottom: 10px;">
<div class="name">Windows</div>
<div class="summ">{{ ( filtered2 | filter: { state: 'ON' } ).length }} of {{filtered2.length}} open</div>
</div>
<div ng-repeat="item in itemsInGroup('gWindows') | filter:query as filtered2">
<div class="row row-no-gutters">
<div class="col-xs-8 text-left" >{{item.label}}</div>
<div class="col-xs-4 text-right" ng-style="{ color: itemValue(item.name)== 'Open'?'orange':'lightblue'}">{{itemValue(item.name)}}</div>
</div>
</div>
</div>
<div class="widget">
<div class="row row-no-gutters" style="margin-bottom: 10px;">
<div class="name">Sensors</div>
<div class="summ">{{ ( filtered3 | filter: { state: 'ON' } ).length }} of {{filtered3.length}} active</div>
</div>
<div ng-repeat="item in itemsInGroup('gSensors') | filter:query as filtered3">
<div class="row row-no-gutters">
<div class="col-xs-8 text-left" >{{item.label}}</div>
<div class="col-xs-4 text-right" ng-style="{ color: itemValue(item.name)== 'Active'?'orange':'lightblue'}">{{itemValue(item.name)}}</div>
</div>
</div>
</div>
</div>
<div class="controls">
<div class="widget" style="border:none;width:100%;background:none;box-shadow:none;">
<div ng-show="itemValue('currentAlarm')!='DISARM' && itemValue('currentAlarm')!='STAY' && itemValue('currentAlarm')!='AWAY'">
<div ng-show="itemValue('gDoors')!='OFF' || itemValue('gWindows')!='OFF' || itemValue('gSensors')!='OFF'">
<div class="alert alert-light">
<span style="color: {{variable | themeValue:'primary-color'}}; font-size: 15pt;">
Zones are opened/active and will not arm until next closed
</span>
</div>
</div>
</div>
</div>
</div>
<div class="title"><div class="name">Garage Door</div></div>
<div class="controls">
<div class="widget" style="border:none;width:100%;background:none;box-shadow:none;">
<div class="name" >{{item.label}}
<div class="value" style= "clear: right; font-size:30px;" ng-if="itemValue('GarageDoorState')=='Open'">Open</div>
<div class="value" style= "clear: right; font-size:30px;" ng-if="itemValue('GarageDoorState')=='Closed'">Closed</div>
<div class="value" style= "clear: right; font-size:30px;" ng-if="itemValue('GarageDoorState')=='Ajar'">Ajar</div>
</div>
<div class="centerGroup" style="float: right;">
<div class="gbtn" ng-click="sendCmd('GarageDoor', 'UP')"><i id="glyph" class="glyphicon glyphicon-chevron-up"></i></div>
<div class="gbtn" ng-click="sendCmd('GarageDoor', 'STOP')"><i id="glyphStop" class="glyphicon glyphicon-stop"></i></div>
<div class="gbtn" ng-click="sendCmd('GarageDoor', 'DOWN')"><i id="glyph" class="glyphicon glyphicon-chevron-down"></i></div>
</div>
</div>
</div>
</div>
and this is what the page looks like
1 Like
Hi,
Could you please share Lights section of your setup ?
Thank you.
This is my template for the lights page. The current one looks like this
<style>
@media screen and (max-width: 750px) {
.collapsible-menu label {
visibility: visible;
font-size: 30px;
display: block;
cursor: pointer;
}
.menu-content {
max-height: 0;
overflow: hidden;
margin-right: 35px;
}
ul li2 {
display:block;
float: none;
}
ul li3 {
visibility: hidden;
display:none;
}
}
</style>
<div class="section">
<div class="collapsible-menu">
<input type="checkbox" id="menu"><label for="menu">{{ngModel.name}}</label></input>
<div class="menu-content"><li3>{{itemValue('Date') | date:'d MMM yyyy | HH:mm a'}}</li3>
<ul>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Alarm']" ng-click="sendCmd('HomePageItem', 'Home?kiosk=on')" >Alarm</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Lights']" ng-click="sendCmd('HomePageItem', 'Lights?kiosk=on')" >Lights</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='TV']" ng-click="sendCmd('HomePageItem', 'Tv?kiosk=on')" >TV</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Google Home']" ng-click="sendCmd('HomePageItem', 'Chromecast?kiosk=on')" >Google Home</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Blinds']" ng-click="sendCmd('HomePageItem', 'Blinds?kiosk=on')" >Blinds</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Irrigation']" ng-click="sendCmd('HomePageItem', 'Irrigation?kiosk=on')" >Irrigation</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Vacuum']" ng-click="sendCmd('HomePageItem', 'Vacuum?kiosk=on')" >Vacuum</a2></li2>
<li2><a2 ng-class="{true: 'selected'}[ngModel.name=='Logs']" ng-click="sendCmd('HomePageItem', 'Logs?kiosk=on')" >Logs</a2></li2>
</ul>
</div>
</div>
</div>
<div class="section" ng-init="hueColors = [ { hsb: '0,0,100', hex: '#fff' }, { hsb: '74,78,100', hex: '#fecc2f' }, { hsb: '46,100,100', hex: '#f9a228' }, { hsb: '26,100,100', hex: '#f6621f' }, { hsb: '0,100,100', hex: '#db3838' }, { hsb: '273,100,100', hex: '#a363d9' }, { hsb: '201,100,100', hex: '#40a4d8' }, { hsb: '177,100,100', hex: '#33beb8' }, { hsb: '140,100,100', hex: '#b2c225' } ]">
<div class="sectionIconContainer">
<div class="sectionIcon glow" ng-if="itemValue('IndoorLighting')=='ON' || itemValue('LightsBrightness')=='ON'">
<svg viewBox="0 0 35 35"><use xlink:href="/static/matrix-theme/squidink.svg#light-bulb"></use></svg>
</div>
<div class="sectionIcon" ng-if="itemValue('IndoorLighting')!='ON' || itemValue('LightsBrightness')!='ON'">
<svg viewBox="0 0 35 35"><use xlink:href="/static/matrix-theme/squidink.svg#light-bulb"></use></svg>
</div>
</div>
<div class="title"><div class="name">Indoor Lights</div><div class="summary">ON: {{ ( filtered1 | filter: { state: 'ON' } ).length }} of {{filtered1.length}}</div></div>
<div ng-repeat="item in itemsInGroup('IndoorLighting').concat(itemsInGroup('LightsBrightness')) | filter:query as filtered1">
<div class="lightbtnContainer" ng-if="item.name.split('_')[1]!='Dimmable'" ng-click="sendCmd('hpUpdateScreen', 'ON')">
<div class="lightbtn" ng-if="itemValue(item.name)!='ON'" ng-click="sendCmd(item.name, 'ON')"><i class="glyphicon glyphicon-off"></i></div>
<div class="lightbtnon" ng-if="itemValue(item.name)=='ON'" ng-click="sendCmd(item.name, 'OFF')"><i class="glyphicon glyphicon-off"></i></div>
<div class="sub-title">{{item.label}}</div>
</div>
<div class="lightbtnContainer" ng-if="item.name.split('_')[1]=='Dimmable' && item.name.split('_')[3]!='rgb'">
<div class="lightbtn" ng-if="itemValue(item.name)!='ON'" ng-click="sendCmd(item.name, 'ON')"><i class="glyphicon glyphicon-off"></i></div>
<div class="lightbtnon" ng-if="itemValue(item.name)=='ON' && item.name.split('_')[2]!='colour'" ng-click="sendCmd(item.name, 'OFF')"><i class="glyphicon glyphicon-off"></i></div>
<div class="lightbtnon" ng-style="{'color': 'rgb(' + itemValue(item.name + '_rgb_String') + ')'}" ng-if="itemValue(item.name)=='ON' && item.name.split('_')[2]=='colour' && itemValue(item.name + '_rgb_String') != '0,0,0' " ng-click="sendCmd(item.name, 'OFF')"><i class="glyphicon glyphicon-off"></i></div>
<div class="lightbtnon" ng-if="itemValue(item.name)=='ON' && item.name.split('_')[2]=='colour' && itemValue(item.name + '_rgb_String') == '0,0,0' " ng-click="sendCmd(item.name, 'OFF')"><i class="glyphicon glyphicon-off"></i></div>
<div class="sub-title">{{item.label}}</div>
<div class="lightSettings" ng-show="!showHueSelect" ng-click="showHueSelect=true; sendCmd('hpUpdateScreen', 'ON')" ><i class="glyphicon glyphicon-adjust"></i></div>
<div class="lightSettings on" ng-show="showHueSelect" ng-click="showHueSelect=false; sendCmd('hpUpdateScreen', 'ON')"><i class="glyphicon glyphicon-adjust"></i></div>
<div class="row" ng-show="showHueSelect && item.name.split('_')[1]=='Dimmable'">
<div ng-init="slider_Volume = {
'item': item.name + '_Brightness',
'vertical': false,
'floor': 0,
'ceil': 100,
'step': 1,
'precision': 1,
'unit': '%',
'hidelabel': true,
'hidelimits': true,
'hidepointer': true,
'showticks': false,
'bigslider': false
}" >
</div>
<br>Brightness {{itemValue(item.name + '_Brightness')}} %</br>
<widget-slider ng-model="slider_Volume" id="dimmer-slider" ng-init="showHueSelect = false"/>
</div>
<div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect && item.name.split('_')[2]=='colour'">
<a href="" ng-click="sendCmd(item.name, 'OFF')"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#cross-line"></use></svg></a>
<a href="" ng-click="sendCmd(item.name + '_rgb', color.hsb);" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></a>
</div>
</div>
</div>
</div>
<div class="section">
<div class="sectionIconContainer">
<div class="sectionIcon glow" ng-if="itemValue('OutdoorLighting')=='ON'">
<svg viewBox="0 0 35 35"><use xlink:href="/static/matrix-theme/squidink.svg#light-bulb"></use></svg>
</div>
<div class="sectionIcon" ng-if="itemValue('OutdoorLighting')=='OFF'">
<svg viewBox="0 0 35 35"><use xlink:href="/static/matrix-theme/squidink.svg#light-bulb"></use></svg>
</div>
</div>
<div class="title"><div class="name">Outdoor Lights</div><div class="summary">ON: {{ ( filtered2 | filter: { state: 'ON' } ).length }} of {{filtered2.length}}</div></div>
<div ng-repeat="item in itemsInGroup('OutdoorLighting')| filter:query as filtered2">
<div class="lightbtnContainer" ng-if="item.name.split('_')[1]!='Dimmable'" ng-click="sendCmd('hpUpdateScreen', 'ON')">
<div class="lightbtn" ng-if="itemValue(item.name)!='ON'" ng-click="sendCmd(item.name, 'ON')"><i class="glyphicon glyphicon-off"></i></div>
<div class="lightbtnon" ng-if="itemValue(item.name)=='ON'" ng-click="sendCmd(item.name, 'OFF')"><i class="glyphicon glyphicon-off"></i></div>
<div class="sub-title">{{item.label}}</div>
</div>
</div>
</div>
and this is the CSS, you can take what you need out of this
@charset "UTF-8";
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url('/static/matrix-theme/Roboto-Thin.ttf') format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 200;
src: local('Roboto Light'), local('Roboto-Light'), url('/static/matrix-theme/Roboto-Light.ttf') format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Regular'), local('Roboto-Regular'), url('/static/matrix-theme/Roboto-Regular.ttf') format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
font-family: 'Orbitron';
font-style: normal;
font-weight: 400;
src: local('Orbitron Regular'), local('Orbitron-Regular'), url(https://fonts.gstatic.com/s/orbitron/v10/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'VT323';
font-style: normal;
font-weight: 400;
src: local('VT323 Regular'), local('VT323-Regular'), url(https://fonts.gstatic.com/s/vt323/v10/pxiKyp0ihIEF2isQFJXGdg.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'VT323';
font-style: normal;
font-weight: 400;
src: local('VT323 Regular'), local('VT323-Regular'), url(https://fonts.gstatic.com/s/vt323/v10/pxiKyp0ihIEF2isRFJXGdg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'VT323';
font-style: normal;
font-weight: 400;
src: local('VT323 Regular'), local('VT323-Regular'), url(https://fonts.gstatic.com/s/vt323/v10/pxiKyp0ihIEF2isfFJU.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
font-weight: 100;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
:root {
--body-bg:#212124;
--body-color: #a4a4a4;
--primary-color: #7EB26D; /* was var(--primary-color-rgb-opacity-low) */
--primary-color-rgb-opacity-low:rgba(205,231,0,0.1);
--primary-color-rgb-opacity-high:rgba(205,231,0,0.6);
--light-button-color: rgba(126,178,109,1); /* was var(--primary-color-rgb-opacity-low) */
--title-color: var(--widget-text-color,#def) ;
--box-bg:none;
--header-bg: var(--body-bg);
--widget-design-bg: #191716;
--widget-text-color: #F0F0F0;
--widget-border-radius: 10px;
--widget-box-shadow: none;
--icon-color-filter: invert(34%) sepia(100%) hue-rotate(22deg) saturate(5000%);
--icon-color-off-filter: invert(60%) sepia(80%) hue-rotate(180deg);
--icon-backdrop-filter: invert(60%) sepia(100%) hue-rotate(165deg) opacity(15%);
--chart-stroke: #456;
--chart-fill: #89a;
--chart-tooltip: #fff;
--colorpicker-border: #191716;
--colorpicker-stroke: #456;
--colorpicker-fill: #89a;
--image-border: #191716;
--switch-off-color: #89a;
--switch-on-color: var(--primary-color);
--slider-pointer-color: #234;
--slider-pointer-bg-color: #def;
--slider-ceil-color: #def;
--slider-bubble-bg-color: #09120f;
--slider-bubble-border-color: #fff;
--slider-bubble-color: #a4a4a4;
--control-text-color:var(--primary-color);
}
::-webkit-scrollbar{display:none}
body {
font-family: Open Sans, sans-serif;
background: var(--body-bg);
margin: 20px;
}
.box {
box-shadow: 0 0 0 0 rgba(0, 0, 0, .0);
}
/* Don't uppercase drawer menu entries */
.drawer ul.menu li {
text-transform: none !important;
}
.icon-tile.colorize {
filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);
-webkit-filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);
filter: var(--icon-color-filter, invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%));
-webkit-filter: var(--icon-color-filter, invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%));
}
.dashboard-title {
text-transform: uppercase;
color: white;
font-size: 30px;
font-weight: 100;
}
.header {
position: static;
margin: 0px;
width: 100%;
/* padding: 8px; */
z-index: 99;
background: #000;
background: var(--header-bg,#000);
}
.icon-tile.colorize {
filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);
-webkit-filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);
filter: var(--icon-color-filter, invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%));
-webkit-filter: var(--icon-color-filter, invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%));
}
.drawer{background-color:#212124;background:linear-gradient(to right,#394636 0,#212124 3%,#212124 97%,#394636 100%)}
.drawer ul.menu{background:linear-gradient(to right,#394636 0,#212124 3%,#212124 97%,#394636 100%)}
.drawer ul.menu li{width:100%;color:var(--widget-text-color,#def);font-size:24px;line-height:20px;padding:36px;background:0 0;border-bottom:1px solid #252a24!important}
.drawer ul.menu li.head{background:linear-gradient(to right,#394636 0,#212124 3%,#212124 97%,#394636 100%);opacity:0;height:100px}
.drawer ul.menu li.active,.drawer ul.menu li:hover{background:linear-gradient(to right,#7eb16d 0,#394636 3%,#394636 97%,#7eb16d 100%)}
.drawer ul.menu li:hover{color:#7eb26d}
.drawer ul.menu li.active:not(.head){background:linear-gradient(to right,#ddf2d6 0,#7eb16d 3%,#394636 97%,#7eb16d 100%);color:#fff;border-bottom:1px solid #252a24!important;position:relative;width:calc(100% - 0px)}
.drawer footer{position:fixed;left:0;bottom:0;font-size:11px;color:#475943;padding:10px;background:linear-gradient(to right,#394636 0,#212124 3%,#212124 97%,#394636 100%)}
.widget-clock .time{font-size:20px;color:#394636}
#glyph {
vertical-align: center;
}
#glyphStop {
vertical-align: center;
}
.widgetcontainer {
padding: 5px;
border-radius:var(--widget-border-radius);
box-shadow: 3px 3px 15px #000,inset 0px 0px 15px rgba(0,0,0,0.5),inset 0px 0px 25px rgba(0,0,0,0.3);
background-color:rgba(255,255,255,0.1);
text-align: left;
color: var(--widget-text-color);
background-image: linear-gradient(to right, var(--primary-color-rgb-opacity-low), var(--primary-color-rgb-opacity-high));
background-size: 0%;
}
.widgetcontainer:active, .widgetcontainer:active.on {
box-shadow:inset 3px 3px 15px #000;
padding-top: 8px;
padding-bottom: 2px;
padding-left: 8px;
padding-right: 2px;
}
.widgetcontainer .newsub-title {
font-size: 15px;
text-transform: uppercase;
padding-bottom: 10px;
padding-top: 10px;
}
.widgetcontainer .new-name {
display:inline-block;
font-size: 20px;
padding: 10px 10px 10px 10px;
text-shadow: 2px 2px 8px #1A1A1A;
}
@media only screen {
/* For mobile: */
.section {
}
#AlarmSection {
width:100%;
float:left;
}
#ZoneSection {
width:100%;
float:left;
}
.section .lightbtnContainer {
width:49%;
float:left;
}
.section .widget {
width: 100%;
float: left;
}
.section .widget .col1 {
width: 50%;
float: left;
}
.section .widget .col100 {
width: 100%;
float: left;
}
.section .widget .col80 {
width: 80%;
float: left;
}
.section .widget .col75 {
width: 75%;
float: left;
}
.section .widget .col50 {
width: 50%;
float: left;
}
.section .widget .col40 {
width: 40%;
float: left;
}
.section .widget .col33 {
width: 33%;
float: left;
}
.section .widget .col25 {
width: 25%;
float: left;
}
.section .widget .col20 {
width: 20%;
float: left;
}
.section .widgetwide {
width: 100%;
float: left;
}
.section .bigDash {
margin-left: auto;
width: 100%;
margin-right: auto;
}
.header a {
display: none;
}
}
@media only screen and (min-width: 650px) {
/* For tablet: */
/* For tablet: */
.section {
}
#AlarmSection {
width:33%;
float:left;
}
#ZoneSection {
width:60%;
float:left;
}
.section .lightbtnContainer {
width:16%;
float:left;
}
.section .widget {
width: 32.5%;
float: left;
}
.section .widget .col1 {
width: 50%;
float: left;
}
.section .widget .col100 {
width: 100%;
float: left;
}
.section .widget .col80 {
width: 80%;
float: left;
}
.section .widget .col75 {
width: 75%;
float: left;
}
.section .widget .col50 {
width: 50%;
float: left;
}
.section .widget .col40 {
width: 40%;
float: left;
}
.section .widget .col33 {
width: 33%;
float: left;
}
.section .widget .col25 {
width: 25%;
float: left;
}
.section .widget .col20 {
width: 20%;
float: left;
}
.section .widgetwide {
width: 100%;
float: left;
}
.section .bigDash {
margin-left: auto;
width: 33%;
margin-right: 5px;
clear: left;
}
.header a {
display: inline;
}
}
@media only screen and (min-width: 1000px) {
/* For desktop: */
.section {
}
#AlarmSection {
width:33%;
float:left;
}
#ZoneSection {
width:60%;
float:left;
}
.section .lightbtnContainer {
width:16%;
float:left;
}
.section .widget {
width: 33%;
float: left;
}
.section .widget .col1 {
width: 50%;
float: left;
}
.section .widget .col100 {
width: 100%;
float: left;
}
.section .widget .col80 {
width: 80%;
float: left;
}
.section .widget .col75 {
width: 75%;
float: left;
}
.section .widget .col50 {
width: 50%;
float: left;
}
.section .widget .col40 {
width: 40%;
float: left;
}
.section .widget .col33 {
width: 33%;
float: left;
}
.section .widget .col25 {
width: 25%;
float: left;
}
.section .widget .col20 {
width: 20%;
float: left;
}
.section .widgetwide {
width: 100%;
float: left;
}
.section .bigDash {
margin-left: auto;
width: 33%;
min-width: 280px;
margin-right: auto;
}
.header a {
display: inline;
}
}
.row{
padding-left: 15px;
padding-right: 15px;
}
.section {
width: 100%;
background: none;
overflow: hidden;
margin-bottom: 10px;
border-radius:var(--widget-border-radius);
float: left;
text-align: left;
color: white;
padding: 3px;
box-shadow: none;
}
#AlarmSection {
width:40%;
float:left
}
#ZoneSection {
width:59%;
float:right;
}
.section a {
color: #ff2c0a;
}
.section .title {
clear: left;
overflow: auto;
zoom: 1;
padding-bottom:10px;
padding-left:5px;
}
.title {
font-size: 23px;
text-transform: uppercase;
padding-bottom: 10px;
padding-top: 10px;
color: var(--title-color);
}
.sub-title {
font-size: 17px;
margin: 5px 5px 5px 15px;
color: var(--widget-text-color);
text-shadow: 3px 3px 5px #394636;
}
.section .title .name {
font-size: 23px;
font-weight: 100;
display: inline-block;
float: left;
text-shadow: 3px 3px 5px #394636;
}
.section .title .summary {
display: inline-block;
float: left;
border: 1px solid #565f58;
border-radius:var(--widget-border-radius);
padding: 4px 10px 2px 10px;
font-size: 16px;
color: #565f58;
margin-left: 20px;
font-weight: 300;
margin-top: 5px;
}
.section .sectionIconContainer {
position: relative;
width: 100%;
margin-bottom:15px;
}
.section .sectionIcon {
width: 50px;
height: 50px;
position: absolute ;
right: 0px;
}
.section .sectionIcon .glow {
width: 50px;
height: 50px;
position: absolute ;
right: 0px;
}
.section .sectionIcon svg {
stroke: #565f58;
fill: #565f58;
stroke-width: 0.3px;
}
.section .sectionIcon.glow svg {
stroke: var(--primary-color);
fill: var(--primary-color);
opacity: 100%;
stroke-width: 0.6px;
}
.section .bigDash {
float:right;
padding-bottom: 5px;
padding-top: 10px;
}
.section .bigDash .description {
text-transform: uppercase;
text-align: center;
width: 37%;
margin-left: auto;
margin-right: auto;
border: 1px solid #4e4b4b;
border-radius:var(--widget-border-radius);
padding: 4px 2px 2px 2px;
}
.section .bigDash .top {
clear: left;
margin-left: auto;
width: 100%;
margin-right: auto;
}
.section .bigDash .bottom {
clear: left;
margin-left: auto;
width: 250px;
margin-right: auto;
height: 35px;
}
.section .bigDash .bottom .value {
padding-top: 5px;
padding-left: 5px;
padding-right: 25px;
float:left;
color: white;
}
.section .bigDash .top .icon {
width: 80px;
height: 80px;
margin-top: 15px;
float: left;
}
.section .bigDash .bottom .icon {
width: 30px;
height: 30px;
padding-top: 0px;
float: left;
}
.section .bigDash .graph {
text-align: center;
clear: left;
}
.section .bigDash .trend {
width: 20px;
height: 20px;
position: relative;
display: inline-block;
top: 40px;
left: -26px;
}
.section .bigDash .trend svg {
stroke: #565f58;
stroke-width: 2px;
}
.section .bigDash .trend.up svg {
stroke: var(--primary-color);
animation: upy 0.2s ease-in-out infinite alternate;
}
.section .bigDash .trend.down svg {
stroke: #ff2c0a;
animation: downy 0.2s ease-in-out infinite alternate;
}
@keyframes upy {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, 5px);
}
}
@keyframes downy {
0% {
transform: translate(0px, 0px);
}
100% {
transform: translate(0px, -5px);
}
}
.graph img {
border-bottom: 1px solid #565f58;
}
.graph .legend {
font-size: 10px;
text-transform: uppercase;
padding-top: 7px;
color: #aaa;
font-weight: 300;
border-top: 1px solid #565f58;
}
.section .widget {
position: relative;
cursor: pointer;
border-style: solid;
border-width: 1px;
border-color: #565f58;
border-radius:var(--widget-border-radius);
box-shadow: 2px 2px 5px rgba(0,0,0,0);
padding: 0px;
margin: 2px;
background-color: none;
z-index:1;
}
.section .widget .bg{
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: none;
background-repeat: no-repeat;
background-position: center; /* Center the image */
background-size: cover; /* Resize the background image to cover the entire container */
opacity: .1;
width: 100%;
height: 100%;
}
.section .widget .container {
padding: 10px 3px 10px 3px;
background:none;
border-radius:15px;
}
@keyframes slide {
from {width:0%; }
}
.section .widget .icon {
width: 30px;
height: 30px;
float: left;
padding-left:5px;
}
.section .widget .SwitchIcon {
width: 60px;
height: 32px;
position:relative;
float: right;
padding-right:10px;
}
.section .icon svg, .section .control svg {
stroke-width: 0.3px;
}
.section .icon.off svg {
stroke: #565f58;
fill: #565f58;
}
.section .icon.on svg {
stroke: var(--primary-color);
fill: var(--primary-color);
}
.section .icon.spinoff svg {
stroke: #565f58;
fill: #565f58;
animation: spin 0.6s reverse;
}
.section .icon.spinon svg {
stroke: var(--primary-color);
fill: var(--primary-color);
animation: spin 0.6s;
}
.section .icon.warn svg {
stroke: #ff2c0a;
fill: #ff2c0a;
animation: blinker 1s linear infinite;
}
.section .icon.blink svg {
stroke: #00afb8;
fill: #00afb8;
animation: blinker 1s linear infinite;
}
@keyframes spin {
from {transform: rotate(0deg); stroke: #565f58; fill: #565f58;}
to { transform: rotate(360deg);stroke: var(--primary-color);fill: var(--primary-color);}
}
@keyframes blinker {
50% { opacity: 0.1;}
}
@keyframes neonGlow{
0% { :0 0 10px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.8),0 0 22px rgba(255,255,255,.8),0 0 40px rgb(126,177,109,.8),0 0 60px rgba(126,177,109,.8),0 0 80px rgba(126,177,109,.5),0 0 100px rgba(126,177,109,.5),0 0 140px rgba(126,177,109,.5),0 0 200px rgba(126,177,109,.5); }
100%{ text-shadow:0 0 2px rgba(255,255,255,.8),0 0 8px rgba(255,255,255,.8),0 0 10px rgba(255,255,255,.8),0 0 20px rgba(126,177,109,.8),0 0 30px rgba(126,177,109,.8),0 0 40px rgba(126,177,109,.8),0 0 50px rgba(126,177,109,.5),0 0 80px rgba(126,177,109,.5) }
}
.section .icon.wind svg {
stroke: #565f58;
fill: #565f58;
}
.section .icon.on.wind svg {
stroke: var(--primary-color);
fill: var(--primary-color);
}
.section .icon.wind {
animation: windy 0.5s ease-in-out infinite;
}
@keyframes windy {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(200deg);
}
100% {
transform: rotate(180deg);
}
}
.section .widget select {
background: rgba(0,0,0,0);
border: 0px;
outline: none;
text-align: right;
text-align-last: right;
}
.section .widget.disabled {
opacity: 0.2;
}
.section .widget .name {
height: 35px;
padding-top: 6px;
margin-bottom: 10px;
padding-right: 5px;
padding-left:10px;
float: left;
text-transform: capitalize;
font-weight: 100;
font-size:20px;
color:var(--widget-text-color);
clear: right;
text-shadow: 2px 2px 8px #1A1A1A;
}
.section .widget .name .value {
color: var(--primary-color);
font-weight: bold;
text-align: left;
}
.section .widget .graph {
text-align: center;
padding:20px;
margin-left: 10px;
}
.section .widget .appLogo {
width: 150px;
margin-right: 20px;
margin-left: auto;
fill: var(--primary-color);
padding-top: 6px;
height: 50px;
color: var(--primary-color);
text-align: right;
font-size: 25px;
font-weight: 300;
}
@keyframes neonSVG {
50% { opacity:0.1;}
}
.section .widget .sceneGroup {
float: right;
font-size: 14px;
text-transform: uppercase;
color: #565f58;
font-weight: 300;
padding-right: 20px;
clear:left;
}
.scene {
border: 1px solid #565f58;
border-radius: 5px;
padding: 6px 6px 6px 6px;
text-align: center;
margin-bottom: 8px;
width: 133px;
float: right;
margin-left: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.scene.on {
background-color: #393d3a;
border: 1px solid #393d3a;
color: var(--primary-color);
}
.section .widget .valueGroup {
padding-right: 20px;
min-height: 35px;
}
.section .widget .valueGroup .value {
text-align: right;
padding-top: 6px;
color: var(--primary-color);
font-weight: bold;
}
.section .widget .valueGroup .value.warning {
color: #ff2c0a;
font-weight: 600;
}
.section .widget .valueGroup .value.active {
color: #00afb8;
}
.section .widget .valueGroup .value:nth-child(n+2) {
color: #1d4d3b;
}
.section .controlGroup {
padding-left: 10px;
padding-right: 10px;
}
.section .widgetwide .controlGroup {
clear:left;
}
.controls{
margin-top:20px;
}
.control {
float:right;
position:relative;
cursor:pointer;
width:50px;
height:50px;
line-height:50px;
background: radial-gradient(circle at 1% 1%, #808080, #202020);
margin-left:20px;
margin-right:10px;
margin-top:10px;
margin-bottom:20px;
color:rgba(126,178,109,1);
text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 2px rgba(0,0,0,1);
font-size:2.4em;
box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset 3px 15px 45px rgba(255,255,255,.1),inset -1px -1px 2px rgba(0,0,0,.5),inset -3px -15px 45px rgba(0,0,0,.2),1px 5px 30px -4px rgba(0,0,0,1);
}
.control:before{
border-radius:50%;
content:"";
background:#1A1A1A;
width:70px;
height:70px;
position:absolute;
top:-10px;
left:-10px;
z-index:-1;
box-shadow:inset -1px -1px 2px rgba(255,255,255,.3),inset -5px -15px 40px rgba(255,255,255,.1),inset 1px 1px 2px rgba(0,0,0,.5),inset 5px 15px 40px rgba(0,0,0,.2),-2px -40px 50px -20px rgba(255,255,255,.1),2px 35px 50px -10px rgba(0,0,0,.4),0 0 25px 8px rgba(60,60,60,1)
}
.control:active{
color:rgba(0,0,0,.7);
text-shadow:1px 1px 0 rgba(255,255,255,.15);
box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset 3px 15px 45px rgba(0,0,0,.2),inset -1px -1px 2px rgba(0,0,0,.5),inset -3px -15px 45px rgba(255,255,255,.1),1px 5px 10px -4px rgba(0,0,0,1)
}
.centerGroup{
clear: both;
text-align: center;
margin-top:20px;
margin-bottom:20px;
}
.centerGroup .controlcentre {
position:relative;
background-color: #2a3439;
background: radial-gradient(circle at 1% 1%, #808080, #202020);
border-style: solid;
border-color: #313131;
border-width: 5px;
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto;
margin-left:20px;
margin-right:20px;
margin-top:15px;
margin-bottom:15px;
text-align: center;
color: var(--control-text-color);
text-shadow: 2px 2px 5px #000000;
box-shadow: 0px 0px 15px #000, inset 1px 1px 1px #808080;
line-height: 80px;
font-weight: bold;
font-size: 30px;
display: inline-block;
stroke: var(--primary-color);
fill: var(--primary-color);
-webkit-transition:.1s ease-out;
-moz-transition:.1s ease-out;-o-transition:.1s ease-out;
transition:.1s ease-out
}
.controlcentre:before{
content:"";
background:#1A1A1A;
width:90px;
height:90px;
position:absolute;
top:-9px;
left:-9px;
z-index:-1;box-shadow:inset -1px -1px 2px rgba(255,255,255,.3),
inset -5px -15px 40px rgba(255,255,255,.1),
inset 1px 1px 2px rgba(0,0,0,.5),
inset 5px 15px 40px rgba(0,0,0,.2),
-2px -40px 50px -20px rgba(255,255,255,.1),
2px 35px 50px -10px rgba(0,0,0,.4),
0 0 25px 8px rgba(60,60,60,1)
}
.centerGroup .controlcentre:active,
.section .controlLeft:active,{
box-shadow:0px 0px 15px #000,inset 3px 3px 15px #000;
transform: scalex(0.95) scaley(0.95);
}
.section .controlLeft {
float: left;
background-color: #2a3439;
background: radial-gradient(circle at 1% 1%, #808080, #202020);
border-style: solid;
border-color: #313131;
border-width: 2px;
width: 49px;
height: 49px;
border-radius: 50%;
text-align: center;
color: var(--control-text-color);
text-shadow: 2px 2px 5px #000000;
box-shadow: 0px 0px 8px #000, inset 1px 1px 1px #808080;
margin: 2px;
line-height: 44px;
font-weight: bold;
display: inline-block;
stroke: var(--primary-color);
fill: var(--primary-color);
}
.section .lightbtnContainer {
background-color: none;
text-align: center;
padding: 10px 0px 0px 0px;
border-radius:50%;
}
.lightbtn,.lightbtnon, .lightbtn:before, .lightbtnon:before, .lightbtnon:after, .lightbtn:after {
border-radius: 50%;
}
.lightbtn:after{
content:"";
background: transparent;
width:85px;
height:85px;
position:absolute;
top:-4.1px;
left:-4.5px;
z-index:-1;
box-shadow:inset -1px -1px 2px rgba(255,255,255,.3),inset -5px -15px 40px rgba(255,255,255,.1),inset 1px 1px 2px rgba(0,0,0,.5),inset 5px 15px 40px rgba(0,0,0,.2),2px 35px 50px -10px rgba(0,0,0,.4),0 0 10px 8px rgba(60,60,60,1);
}
.lightbtnon:after{
content:"";
background: transparent;
width:85px;
height:85px;
position:absolute;
top:-4.1px;
left:-4.5px;
z-index:2;
box-shadow:inset -1px -1px 2px rgba(255,255,255,.3),inset -5px -15px 40px rgba(255,255,255,.1),inset 1px 1px 2px rgba(0,0,0,.5),inset 5px 15px 40px rgba(0,0,0,.2),2px 35px 50px -10px rgba(0,0,0,.4),0 0 10px 8px rgba(60,60,60,1);
}
.lightbtnon:before{
content:"";
background: linear-gradient(to right, transparent 0% ,transparent 50%, var(--primary-color) 100%);
width:85px;
height:85px;
position:absolute;
top:-4.8px;
left:-4.5px;
z-index:-1;
animation: spinPulse 4s linear infinite;
}
.lightbtn:before{
content:"";
background:#1A1A1A;
width:85px;
height:85px;
position:absolute;
top:-4.8px;
left:-4.5px;
z-index:-1;
}
.lightSettings {
border-radius: var(--widget-border-radius);
padding: 6px 6px 6px 6px;
text-align: center;
margin-bottom: 8px;
margin-left:auto;
margin-right:auto;
background-color: #393d3a;
width:50%;
}
.lightSettings.on {
background-color: #393d3a;
color: var(--primary-color);
}
.lightbtn {
position:relative;
cursor:pointer;
text-align:center;
border-style: solid;
border-color: #313131;
border-width: 2px;
width:80px;
height:80px;
line-height:80px;
display:inline-block;
background: radial-gradient(circle at 1% 1%, #808080, #202020);
margin-top:10px;
margin-bottom:10px;
font-size:3.4em;
color:var(--body-bg);
}
.lightbtnon {
position:relative;
cursor:pointer;
text-align:center;
border-style: solid;
border-color: #313131;
border-width: 2px;
width:80px;
height:80px;
line-height:80px;
display:inline-block;
background: radial-gradient(circle at 1% 1%, #808080, #202020);
margin-top:10px;
margin-bottom:10px;
font-size:3.4em;
color:var(--light-button-color);
}
.lightbtn:active, .lightbtnon:active{
color:rgba(0,0,0,.7);
text-shadow:1px 1px 0 rgba(255,255,255,.15);
box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset 3px 15px 45px rgba(0,0,0,.2),inset -1px -1px 2px rgba(0,0,0,.5),inset -3px -15px 45px rgba(255,255,255,.1),1px 5px 10px -4px rgba(0,0,0,1)
}
@keyframes spinPulse {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
.btnbox,.control,.gbtn{display:inline-block}
.btnbox,.control,.drawer footer,.gbtn{text-align:center}
.gbtn,.control,.gbtn:before{border-radius:999px}
.gbtn{
position:relative;
cursor:pointer;
width:70px;
height:70px;
line-height:65px;
background: radial-gradient(circle at 1% 1%, #808080, #202020);
margin-left:20px;
margin-right:20px;
margin-top:10px;
margin-bottom:10px;
color:rgba(126,178,109,1);
text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px 1px 2px rgba(0,0,0,1);
font-size:2.4em;
box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset 3px 15px 45px rgba(255,255,255,.1),inset -1px -1px 2px rgba(0,0,0,.5),inset -3px -15px 45px rgba(0,0,0,.2),1px 5px 30px -4px rgba(0,0,0,1);
}
.gbtn:before{
content:"";
background:#1A1A1A;
width:90px;
height:90px;
position:absolute;
top:-10px;
left:-10px;
z-index:-1;
box-shadow:inset -1px -1px 2px rgba(255,255,255,.3),inset -5px -15px 40px rgba(255,255,255,.1),inset 1px 1px 2px rgba(0,0,0,.5),inset 5px 5px 20px rgba(0,0,0,.2),2px 15px 30px -10px rgba(0,0,0,.4),0 0 10px 8px rgba(60,60,60,1);
}
.gbtn:active{
color:rgba(0,0,0,.7);
text-shadow:1px 1px 0 rgba(255,255,255,.15);
box-shadow:inset 1px 1px 2px rgba(255,255,255,.3),inset 3px 15px 45px rgba(0,0,0,.2),inset -1px -1px 2px rgba(0,0,0,.5),inset -3px -15px 45px rgba(255,255,255,.1),1px 5px 10px -4px rgba(0,0,0,1)
}
.section .controlMenu {
margin-right: 5px;
margin-bottom: 5px;
background-color: #393d3a;
width: 60px;
height: 60px;
float: right;
border-radius: 20%;
text-align: center;
color: var(--primary-color);
line-height: 61px;
font-weight: 100;
}
.control #on {
width:100px;
height:100px;
}
.section .control svg {
stroke: var(--primary-color);
stroke-width: 0.1;
fill: var(--primary-color);
padding: 8px;
}
.section .bigDash .value {
font-weight: 100;
}
.section .bigDash .top .icon svg{
stroke-width: 0.3px;
}
.section .bigDash .main {
font-size: 95px;
letter-spacing: 0px;
line-height: 110px;
float:left;
color: white;
}
.section .bigDash .decimals {
font-size: 60px;
letter-spacing: 0px;
line-height: 0px;
float: left;
color: #575f59;
padding-top: 65px;
}
.section .bigDash .sub {
font-size: 45px;
color: #575f59;
display:inline;
text-align: left;
}
.batteryGroup {
padding-left: 20px;
}
.battery {
width: 100%;
height: 90px;
box-sizing: border-box;
padding: 10px 30px 10px 30px;
}
.battery .batteryShell {
height: 100%;
box-sizing: border-box;
background: #565f58;
border-radius: 10px 10px 10px 10px;
float: left;
width: 95%;
}
.battery .batteryTip {
width: 4%;
height: 100%;
float: left;
margin-left: 1px;
max-width: 8px;
}
.battery .batteryTip1 {
width: 100%;
height: 30%;
}
.battery .batteryTip2 {
background: #565f58;
border-radius: 0px 10px 10px 0px;
width: 100%;
height: 40%;
}
.battery .batteryShell .batteryLevel {
width: 75%;
height: 100%;
background: repeating-linear-gradient( 90deg, #11de7b, #11de7b 20px, #F642AE 20px, #F642AE 21px );
box-shadow: 0 0 20px 10px rgba(17, 222, 123, 0.25);
border-radius: 10px 0px 0px 10px;
}
.battery .batteryShell .batteryLevel.full {
width: 75%;
height: 100%;
background: #11de7b;
box-shadow: 0 0 20px 10px rgba(17, 222, 123, 0.25);
border-radius: 10px 10px 10px 10px;
}
.battery .batteryShell .batteryLevel.low {
background: repeating-linear-gradient( 90deg, #ff2c0a, #ff2c0a 20px, #B82009 20px, #B82009 21px );
}
.battery .batteryTip2.full {
background: #11de7b;
}
.fuelGroup {
padding-left: 20px;
}
.fuel {
width: 100%;
height: 40px;
box-sizing: border-box;
padding: 10px 30px 10px 30px;
}
.fuel .fuelShell {
height: 100%;
box-sizing: border-box;
background: #565f58;
border-radius: 10px 10px 10px 10px;
float: left;
width: 95%;
}
.fuel .fuelTip {
width: 8px;
height: 100%;
float: left;
margin-left: 1px;
}
.fuel .fuelTip1 {
width: 100%;
height: 30%;
}
.fuel .fuelTip2 {
background: #565f58;
border-radius: 0px 10px 10px 0px;
width: 100%;
height: 40%;
}
.fuel .fuelShell .fuelLevel {
width: 75%;
height: 100%;
background: repeating-linear-gradient( 90deg, #11de7b, #11de7b 20px, #F642AE 20px, #F642AE 21px );
/* box-shadow: 0 0 20px 10px rgba(17, 222, 123, 0.25); */
border-radius: 10px 0px 0px 10px;
}
.fuel .fuelShell .fuelLevel.low {
background: repeating-linear-gradient( 90deg, #ff2c0a, #ff2c0a 20px, #B82009 20px, #B82009 21px );
}
.section .music {
width: 100%;
float: right;
padding: 15px 5px 15px 5px;
}
.section .music .cover {
width: 120px;
height: 120px;
background-size: cover;
margin-left: 5px;
margin-bottom: 50px;
float: left;
}
.section .music .track {
width:100%;
text-align: left;
font-size: 20px;
font-weight: 100;
color: #F642AE;
}
.section .music .artist {
width:100%;
text-align: left;
font-size: 16px;
font-weight: 300;
color: #565f58;
padding-top:3px;
padding-bottom: 3px;
}
.section .music .playback {
width: 60%;
font-size: 14px;
font-weight: 100;
margin-left: auto;
margin-bottom: 15px;
float: right;
}
.section .music .playbackTime {
width: 100%;
display: inline-block;
text-align: left;
/* border: 1px solid red; */
height: 100%;
/* line-height: 33px; */
float: left;
}
.section .music .playbackBarDone {
background: #F642AE;
height: 100%;
}
.section .music .playbackBar {
width: 100%;
display: inline-block;
background: #565f58;
height: 6px;
/* border: 1px solid rebeccapurple; */
float: left;
margin-top: 7px;
}
.section .music .controlGroup {
margin-left: auto;
width: 100%;
padding: 0px 10px 50px 0px;
clear:both;
}
.hue {
width: 30px;
height: 30px;
display: inline-block;
border-radius: 50%;
}
.hueSelect {
width: 100%;
}
.hueSelect a {
width: 40px;
height: 40px;
display: inline-block;
margin: 10px 0px 0px 10px;
border-radius: 100%;
border: 1px solid rgba(255,255,255,0);
}
.hueSelect a:hover, .hueSelect a:active {
border: 1px solid white;
-webkit-transition: 0.2s;
}
.section .hueSelectOptions {
border-radius: 15px 15px 15px 15px;
border-top: 1px solid #5f7167;
}
.custom-slider.rzslider .rz-bar, #dimmer-slider .rz-bar{
background-image: linear-gradient(to right, #FFFFFF , var(--primary-color));
height: 2px;
border-radius: 7.5px;
}
.custom-slider.rzslider .rz-selection, #dimmer-slider .rz-selection {
background: var(--primary-color);
opacity: 0;
}
.custom-slider.rzslider .rz-pointer, #dimmer-slider .rz-pointer {
width: 5px;
height: 20px;
top: -9px; /* to remove the default positioning */
bottom: 0;
background-color: var(--primary-color);
}
.custom-slider.rzslider .rz-pointer:after, #dimmer-slider .rz-pointer:after {
display: none;
}
.custom-slider.rzslider .rz-bubble, #dimmer-slider .rz-bubble {
bottom: 14px;
}
.custom-slider.rzslider .rz-limit, #dimmer-slider .rz-limit {
font-weight: bold;
color: var(--primary-color);
}
.custom-slider.rzslider .rz-tick, #dimmer-slider .rz-tick {
width: 1px;
height: 10px;
margin-left: 4px;
border-radius: 0;
background: #ffe4d1;
top: -15px;
}
.custom-slider.rzslider .rz-tick.rz-selected, #dimmer-slider .rz-tick.rz-selected {
background: var(--primary-color);
}
.dimmerBarDone {
background: var(--primary-color);
height: 100%;
}
.dimmerBar {
width: 95%;
display: inline-block;
background: #565f58;
position: relative;
height: 3px;
/* border: 1px solid rebeccapurple; */
margin-left:2.5%;
margin-top: 7px;
}
.collapsible-menu {
padding: 0px 30px;
border-bottom: 3px solid #CDE700;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
text-align: center;
}
.collapsible-menu ul {
list-style-type: none;
font-size:18px;
text-align:right;
}
ul li2 {
display:inline-block;
float: none;
}
ul li3 {
display: block;
float: left;
margin-top: 10px;
color: lightgrey;
font-weight: 400;
font-size:18px;
}
a2 {
display: block;
color: white;
text-align: center;
font-size:25px;
text-decoration: none;
border-radius: 0px;
padding-right:15px;
}
.collapsible-menu label {
display: none;
visibility: hidden;
font-size: 0px;
display: block;
cursor: pointer;
}
.collapsible-date {
visibility: hidden;
font-size: 20px;
display: block;
cursor: pointer;
}
.collapsible-menu a2 {
display:block;
padding: 10px;
color: white;
}
input#menu {
display: none;
}
input:checked ~ .menu-content {
max-height: 100%;
}
a2.selected {
font-weight:1000;
color:#CDE700;
}
.menu-content {
max-height: 100;
overflow: hidden;
}
.section .widget .row{
padding-bottom:2px;
}
.section .widget .summ{
display: inline-block;
float: right;
border: 1px solid #CDE700;
border-radius: 5px;
padding:3px;
font-size: 15px;
color: #CDE700;
margin-right: 5px;
font-weight: 300;
margin-top: 5px;
}
.section .lcd {
height: 175px;
background-color:rgba(255,255,255,0.1);
border-radius: 15px;
font-family: Orbitron;
margin: 2px;
}
.section .lcd .title{
width: 50%;
height: 50%;
float: left;
text-align: center;
font-size:2em;
border-right: 1px solid rgba(0,0,0,0.4);
margin-top: 0 auto;
margin-bottom: 0 auto;
display: table;
}
.section .lcd .state{
margin: 0;
width: 50%;
height: 50%;
float: right;
text-align: center;
font-size:2em;
display: table;
}
.section .lcd .code{
width: 100%;
height: 40%;
overflow: hidden;
text-align: center;
filter: blur(0.6px);
font-size:3em;
border-top: 1px solid rgba(0,0,0,0.4);
display: table;
}
3 Likes
I wanted to have a look at the theme and downloaded all files from git, but when trying to have a look at one of the json-files in VS-Code itās totally unreadable with all CR/LF and Tab presented as \n and \t. Any ideas on how to remedy this?
After investigating a bit further I realized you arenāt supposed to manage the json-files in VS Code. Instead you load the widget into HabPanel and edit it there 
1 Like
Hi,
I need help related to slider. How can I make a slider without ng-repeat? So i need one pop-up slider for only one openhab item.
<div class="section">
<div class="title">Guest room</div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gAnalogThreshold')">
<!-- <div class="widget" ng-bind="TemperatureThreshold1" > -->
<div class="widget" ng-if="item.name=='TemperatureThreshold1'" >
<div class="name" ng-click="showHueSelect = !showHueSelect">
<div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect">
<div class="hueSelectItem"></div>
<div class="hueSelectOptions">
<div ng-init="slider = { value: itemValue(item.name), options: { floor: 10, ceil: 30, step: 0.5, precision: 1, showSelectionBar: true } };"></div>
<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
</div>
</div>
{{item.label}}
</div>
<div class="valueGroup"><div class="value">{{itemValue(item.name) | number:1}}</div></div>
</div>
</div>
<div class="widget">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#sim-card"></use></svg></div>
<div class="name">measured</div>
<div class="valueGroup"><div class="value">{{itemValue('Temperature1') | number:1}} </div></div>
</div>
<div class="widget">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#sim-card"></use></svg></div>
<div class="name">valve</div>
<div class="valueGroup"><div class="value">{{itemValue('HVGuest')}} </div></div>
</div>
</div>
</div>
Iām also VERY interested in your config. Looks almost exactly like the dashboard I recently dreamed up in my head. So if you could share the config, Iād be very happy to learn from it 