Last active
March 10, 2017 20:01
-
-
Save 625alex/b584020715db3a528c01 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment