SmartTiles.css

.version-5-7-0 {display: none}

.tile {background-color: grey}
.weather {background-color: #a20025;}
.clock {background-color: #607d8b;}/*blue gray*/
.presence {background-color: #3f51b5;}/*indigo*/
.lock {background-color: #f44336;/*red*/}
.hello-home {background-color: #9c27b0;}/*purple*/
.switch, .dimmer, .momentary, .light, .dimmerLight, .themeLight {background-color: #4caf50;} /*green*/
.contact {background-color: #e91e63;}/*pink*/
.refresh {background-color: #607d8b;} /*blue gray*/
.history {background-color: #395c78;} /*blue gray*/
.temperature {background-color: #ff6f00;} /*amber 900*/
.mode {background-color: #673ab7;}/*deep purple*/
.motion {background-color: #2196f3;}/*blue*/
.acceleration {background-color: #a3a328;}/*olive*/
.humidity {background-color: #795548;}/*brown*/
.luminosity {background-color: #906b8d;}/*violet-blue*/*/
.link {background-color: #263B44;} /*slate*/
.thermostat {background-color: #009688} /*teal*/
.energy {background-color: #558b2f} /*l green 800*/
.power {background-color: #33691e} /*l green 900*/
.water {background-color: #006064} /*cyan a900*/
.music {background-color: #aa00ff} /*purple a700*/
.battery {background-color: #954469} /*eggplant*/
.camera{background-color: #cddc39} /*lime*/
.video {background-color:#8E8E8E} /*dropcam grey*/
.blank.tile{background:none!important}
.dashboard {background-color: #FE0002;} /* red */
.thermostatHeat{background-color: #FF9900} /*amber*/
.thermostatCool{background-color: #6600CC} /*violet-blue*/
.alarm {background-color: #560319} 
.tileSeparator {visibility:hidden}
.ui-sortable .tileSeparator {visibility:visible}

.tile {border-radius:2px;color:white}
.tiles {overflow:hidden}
.tiles {margin:2px;}

.switch, .dimmer, .dimmerLight, .momentary, .clock, .lock, .refresh, .link, .dashboard, .menu,
.thermostat .icon.up, .thermostat .icon.down,
.music i, .themeLight, .camera, .light, .history, .alarm {cursor: pointer;}

/* reset ***********************/
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body, .ui-page{background-color:black}
* {text-shadow:none;font-family:"Mallanna",Verdana,Arial,Helvetica,sans-serif}
.ui-overlay-a {text-shadow:none}
.ui-li-static.ui-body-inherit {text-align:center; cursor:pointer;}


.ui-shadow-inset{box-shadow:none!important}
.ui-controlgroup, fieldset.ui-controlgroup{margin:0;}
.ui-controlgroup-controls {margin-bottom:10px;}

/*html body .ui-group-theme-a .ui-btn, .ui-page-theme-a .ui-btn{border:0;background-color:initial}*/
html body .spinHeat .ui-group-theme-a .ui-btn, .ui-page-theme-a .ui-btn{border:0;background-color:orange}
html body .spinCold .ui-group-theme-a .ui-btn, .ui-page-theme-a .ui-btn{border:0;background-color:lightBlue}

.popup {/*background-color:lightGrey!important; font-size:22px;*/padding:15px; text-align:center;}
.spinbox {height:36px!important;}
.wtfcloud {background: none}
.wtfcloud .icon.cloud {margin-left: -100px;font-size: 200px;color:white;}
.wtfcloud .icon.message {margin-left:-50px;margin-top: -65px;color:grey;}

.weather .icon i {font-size: 0.9em;}
/* tiles *************************/
.title {font-size:0.9em;line-height:1em;height:2em;overflow:ellipsis;position:absolute;top:2px;left:4px; z-index: 1000;}
.title2 {font-size: 12px}

/** icons **/
.tile.active .icon i.inactive {display:none}
.tile:not(.active) .icon i.active {display:none}
.tile.inactive .icon i.inactive {opacity: 0.3;}

.icon {font-size:3em;line-height:3em;width:100%;margin-top: -1.5em;position: absolute;text-align: center;top: 50%;white-space:nowrap;}
.icon.text {font-size:1.8em;line-height:2em;width:100%;margin-top: -1em;}

.icon span.text {font-size: 0.75em; margin-right: 15px;}

.footer {bottom: 5px;font-size: 11px;left: 5px;position: absolute;line-height:10px;}
.footer.right {right:5px;text-align:right;}
.footer i {font-size:16px}
.spinner {bottom: 2px;right:2px; font-size: 10px;line-height:10px;position: absolute; display:none}
.opaque {opacity: 0.3;}

.mode:not(.Home) .icon.Home {display:none}
.mode.Home .icon.text{display:none}
.mode:not(.Away) .icon.Away {display:none}
.mode.Away .icon.text{display:none}
.mode:not(.Night) .icon.Night {display:none}
.mode.Night .icon.text{display:none}
.icon, .icon * {text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);}

.thermostat .icon.up {margin-top: -3em; font-size:2em; line-height:2em;}
.thermostat .icon.down {margin-top: 1em; font-size:2em; line-height:2em;}

.icon.null-setpoint {display: none}
.thermostat.null-setpoint  .icon.null-setpoint {display: block}
.thermostat.null-setpoint .icon.setpoint {display: none}

.thermostat.null-setpoint .icon.up, .thermostat.null-setpoint .icon.down {opacity:0.3}
.thermostat.null-setpoint .icon{cursor:default}

.thermostat .degree {
  font-size: 50%;
  left: -2px;
  position: relative;
  top: -0.5em;
}

.thermostat[fraction="0"] .fraction {display: none;}

.thermostat .fraction {font-size: 50%; display: none;}

/*video*/

.video-container {
	width:100%;
	margin-top: -30%;
	position: absolute;
	text-align: right;
	top: 50%;
	white-space:nowrap;
}

.dropcam .video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 300px;
	height: auto;
	margin-top: 0%;
    top: 0%; 
}

.dropcam .title {
	z-index:unset;
}

.dropcam object, .dropcam embed  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.video-container img {width: inherit}

.video.mjpeg .video-container, .video.smv .video-container {
	height: 100%;
    margin-top: 0%;
    top: 0%; 
}

.video-container img {height: 100%}

/*******/
.r45 {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg)
}

/* SLIDER **********/
.ui-page-theme-a .ui-bar-inherit {background-color:grey;}

.ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:white;}
.ui-slider-handle.ui-btn.ui-shadow {background-color:white;}

.ui-slider-handle.ui-btn.ui-shadow {box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
}

.ui-page-theme-a .ui-bar-inherit {border:none;}
.ui-slider-track.ui-corner-all {border-radius: 1em;}
.ui-slider-track.ui-mini {height:3px;}
.ui-slider-popup { /*do not change*/height:12px;width:18px;padding-top:0px;padding-bottom:2px;font-size:12px;}
div.ui-slider{height:21px;}
.ui-slider-track{margin:0!important}
.full-width-slider {position:absolute;bottom:-2px;width:100%;}
.full-width-slider input {display: none;}
.ui-slider-track.ui-mini .ui-slider-handle {height:20px;width:20px;margin:-11px 0 0 -11px;}
.ui-slider.ui-mini{padding:0 10px 0 12px;}

/*********/

.batt svg {
	width: 16px;
	height: 16px;
	transform: rotate(270deg);
}

.batt path {fill: white;}

/** music ****/

.music .ui-slider.ui-mini{padding:0 10px 0 40px;}
.music .footer {bottom: 6px; z-index:100}
.music .full-width-slider {z-inndex:99}

.music.muted .unmuted {display:none}
.music:not(.muted) .muted {display:none}

.music.active .play {display:none}
.music:not(.active) .pause {display:none}

.music i {cursor: pointer;}

/* list */

ul{list-style-type: none;padding-left:0;}
.item {cursor:grab; padding:5px; margin:8px;border-radius:2px; font-size:16pt;}
.list {width: 300px; margin: 0 auto;}
.list i {margin-right:5px;}

/* history */

.event-icon {
    float: left;
    font-size: 2em;
	margin: 0 5px;
}
.history-list .st-weather {font-size: 70%;}
.history-list .item{cursor:default; font-size:12pt;}

.historyNav {
	text-align: center; 
	position: fixed; 
	opacity:0.9;
	background-color: black;
	width:100%;
	height:50px;
}

.historyNav i {
	font-size: 30pt;
	margin: 5px 25px;
	cursor: pointer;
}

.history-list {
    margin-top: 50px;
}

/*  THEMES */
.theme-default, a i {color: white}

/* slate */
.theme-slate .tile {background-color:#333333}
.theme-slate  .ui-slider-handle.ui-btn.ui-shadow {background-color:white}
.theme-slate .tile.active .icon i.active {color: blue}
.theme-slate, .theme-slate a i {color: white}

/* quartz */
.theme-quartz .ui-page.ui-page-theme-a.ui-page-active, .theme-quartz, .theme-quartz .historyNav {background-color:lightGrey}
.theme-quartz .tile {background-color:white}
.theme-quartz .tile, .theme-quartz a i {color: #555}
.theme-quartz .batt path {fill: #555;}

.theme-quartz .ui-page-theme-a .ui-bar-inherit {background-color:lightGrey;}
.theme-quartz .ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:#555;}
.theme-quartz .ui-slider-handle.ui-btn.ui-shadow {background-color:#555;}

.theme-quartz .tile.active .icon i.active {color: orange}

/* onyx */
.theme-onyx .ui-page.ui-page-theme-a.ui-page-active, .theme-onyx, .theme-onyx .historyNav {background-color:#444;}
.theme-onyx .tile {background-color:black}
.theme-onyx .tile, .theme-onyx .tile a i  {color: wheat}
.theme-onyx .batt path {fill: wheat;}

.theme-onyx .ui-page-theme-a .ui-bar-inherit {background-color:#444;}
.theme-onyx .ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:wheat}
.theme-onyx .ui-slider-handle.ui-btn.ui-shadow {background-color:wheat;}

.theme-onyx .tile.active .icon i.active {color: firebrick}

/* cobalt */
.theme-cobalt .ui-page.ui-page-theme-a.ui-page-active, .theme-cobalt, .theme-cobalt .historyNav {background-color:black}
.theme-cobalt .tile {background-color:#324B6E}
.theme-cobalt .tile, .theme-cobalt a i  {color: white}

.theme-cobalt .ui-page-theme-a .ui-bar-inherit {background-color:black;}
.theme-cobalt .ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:white;}
.theme-cobalt .ui-slider-handle.ui-btn.ui-shadow {background-color:white;}

.theme-cobalt .tile.active .icon i.active {color: #1175ff}

/* sballoz */
.theme-sballoz .ui-page.ui-page-theme-a.ui-page-active, .theme-onyx, .theme-onyx .historyNav {background-color:black;}
.theme-sballoz .tile {background-color: #3b384a}
.theme-sballoz .tile.active {background-color: #ffa500}
       
.theme-sballoz .tile, .theme-onyx .tile a i  {color: #ffa500}
.theme-sballoz .batt path {fill: #ffa500;}
       
.theme-sballoz .ui-page-theme-a .ui-bar-inherit {background-color: #777;}
.theme-sballoz .ui-page-theme-a .ui-slider-track .ui-btn-active {background-color: #ffa500}
.theme-sballoz .ui-page-theme-a .tile.active .ui-slider-track .ui-btn-active { background-color: #3b384a;}
       
.theme-sballoz .ui-slider-handle.ui-btn.ui-shadow {background-color: #ffa500;}
.theme-sballoz .tile.active .ui-slider-handle.ui-btn.ui-shadow {background-color: #3b384a;}
       
.theme-sballoz .tile.active .icon i.active, .theme-sballoz .tile.active {color: #3b384a}
.theme-sballoz .tile.active.momentary, .theme-sballoz .tile.active.camera, .theme-sballoz .st-dashboard {background-color: #3b384a; color: #ffa500}
       
.theme-sballoz .tile.active.momentary .title, .theme-sballoz .tile.active.camera .title {color: #ffa500}