custom.css

@import url("css/navbar.css"); /* Adds visual extras. */
@import url("css/media/min 992.css"); /* Adds visual extras. */
@import url("css/media/max 480.css"); /* Adds visual extras. */
@import url("css/clean.css"); /*Clean old css style on domoticz*/
@import url("css/page_login.css");
@import url("css/datatables_wrapper.css");
@import url("css/body_onmobile.css");
@import url("css/setting_page.css");
	
:root {
  --main-color:#021a37;
  --secondary-color:#f1f5fa;
  --main-blue-color:#2f91c4;
  --secondary-blue-color:#0bcdc7;
  --main-item-color:white;
  --main-text-color: #1a1a1a;
  --secondary-text-color: gray;
  --main-border-color: #dedede;
}


/* 

Selector {
  Block size

  Block design

  Block engine

}





/*New design*/
body{

  background: var(--secondary-color) !important;
  color:black;
  height: 100%;
  min-height: 100%;
  position: relative;
  padding: 0;
}


body > #copyright{
  display: none !important;
  position: relative;
}


/* */
#holder,
#holder > .container-fluid,
#holder > .container-fluid > .bannercontent,
#main-view > .container{
  margin: 0;
  padding: 0;
  width: 100%;
  
}


#holder{
  padding: 0 5%;
  margin-bottom: 10px;
  width: auto;
  display: block;
}


#main-view .row.divider {
  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: minmax(170px, auto);
	
	gap: 2em;
	
  margin: 0;
  padding: 0;
}

#main-view #dashcontent .row.divider {

  grid-auto-rows: minmax(9vh, auto) !important;

}


#dashcontent .span4,
#lightcontent .span4,
#scenecontent .span4,
#tempwidget .span4,
#weatherwidget .span4,
#utilitycontent .span4{
  
}

.span4,
.item,
section,
table[id^="itemtable"],
table[id^="itemtable"] tbody,
table[id^="itemtable"] tbody tr{
  
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}












/* Item */
table[id^="itemtable"] tbody tr {
  margin:0 !important;
  padding: 0 !important;
  
  
  display: grid !important;
  grid-template-areas:
    ' .  .  .  .  .  .  . '
    ' . name name name name bigtext . '
    ' . type type type type type . '
    ' . status status status status status . '
    ' . img1 img2 action action action . '
    ' . img1 img2 img3 lastupdate lastupdate . '
    ' . option option option option option . '
    ' .  .  .  .  .  .  . ';

	grid-template-columns: 5% 48px 32px 32px 1fr auto 5%;
	grid-template-rows: 5% auto auto-fill auto auto 16px 5%;
  
  
  justify-content: space-around !important; 
  align-content: space-around !important;	
  
  justify-items: end;
  align-items: end;
  
  
  
  background-color:var(--main-item-color) !important;
  border-radius:6px !important;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  
}

/* item status */
div.item.statusNormal tbody tr {
}
div.item.statusTimeout tbody tr {
background-color: red !important;
}
div.item.statusLowBattery tbody tr {
background-color: yellow !important;
}
div.item.statusProtected tbody tr {
background-color: gray !important;
}




/* Name design */
[id^="itemtable"] tbody tr td#name{
  grid-area: name;
  justify-self: start;
  overflow-x: hidden;
  overflow-wrap: break-word;
  font-size: 1.1em;
}

/* Big text design */
[id^="itemtable"] tbody tr td#bigtext{
  grid-area: bigtext;
  
  text-transform:capitalize;
  color: var(--main-blue-color);
  font-weight: 520;
  
  font-size: 1.5em;
}

/* Status design */
[id^="itemtable"] tbody tr td#status{
  grid-area: status;
}

/* Type text design */
[id^="itemtable"] tbody tr td#type{
  grid-area: type;
}

/* Type action design */
  /* Slider */
  /* Selector */
  /* BTN Selector */

[id^="itemtable"] tbody tr td.input{
  position: relative;
  grid-area: action;
  justify-self: center;
  align-self: center;
  width: 100% !important;
  height: auto !important;
}


[id^="itemtable"] tbody tr td > div#slider,
[id^="itemtable"] tbody tr td > div span[id^="selector"],
[id^="itemtable"] tbody tr td > div[id^="selector"]{
  position: relative;
  width: auto !important;
  margin:0!important;
  display: block !important;
}


[id^="itemtable"] tbody tr td > div[id^="selector"]{
  overflow-x: auto;
}














[id^="itemtable"] tbody tr td img{
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: auto;
  
}

/* Icon design */
[id^="itemtable"] tbody tr td#img img,[id^="itemtable"] tbody tr td#img,
[id^="itemtable"] tbody tr td#img img,[id^="itemtable"] tbody tr td#img1{
  grid-area: img1;
  justify-self: stretch;
}
[id^="itemtable"] tbody tr td#img2 img,[id^="itemtable"] tbody tr td#img2{
  grid-area: img2;
  justify-self: stretch;
}
[id^="itemtable"] tbody tr td#img3 img,[id^="itemtable"] tbody tr td#img3{
  grid-area: img3;
  justify-self: stretch;
}

/* lastupade design */
[id^="itemtable"] tbody tr td#lastupdate{
  grid-area: lastupdate;
}

/* Option design */
table[id^="itemtable"] tbody tr td.options{
  grid-area: option;
  justify-self: stretch;
}
















/* Option bar */
table[id^="itemtable"] tbody tr td.options{
  display:flex !important;
  vertical-align:middle;
  text-align: center;
  justify-content: space-around;
}

table[id^="itemtable"] tbody tr td.options a[class^="btnsmall"]{
  background:none;
  color:var(--main-color);
  border-radius: 2px !important;
}
table[id^="itemtable"] tbody tr td.options a[class^="btnsmall"]:hover{
	background: var(--main-blue-color);
  color:white;
	
}
table[id^="itemtable"] tbody tr td.options a[class^="btnsmall-sel"],
table[id^="itemtable"] tbody tr td.options a[ng-class*="btnsmall-sel"]{
	background: var(--secondary-blue-color);	
  color:white;
}


#main-view a.btnstyle,
#main-view a.btnstylerev{
  background: transparent;
  color:black;
  border-bottom: 1px solid black;
  border-radius:0;
  padding: 0 1em;
}
#main-view a.btnstyle:before,
#main-view a.btnstyle:after{
 
}