iobroker.netatmo-energy/admin/style.css

Get and set data using Netatmo Energy API

/* You can delete those if you want. I just found them very helpful */
* {
	box-sizing: border-box
}
.m {
	/* Don't cut off dropdowns! */
	overflow: initial;
}
.m.adapter-container,
.m.adapter-container > div.App {
	/* Fix layout/scrolling issues with tabs */
	height: 100%;
	width: 100%;
	position: relative;
}
.m .select-wrapper + label {
	/* The positioning for dropdown labels is messed up */
	transform: none !important;
}

label > i[title] {
	/* Display the help cursor for the tooltip icons and fix their positioning */
	cursor: help;
	margin-left: 0.25em;
}

.dropdown-content {
	/* Don't wrap text in dropdowns */
	white-space: nowrap;
}

.adapter-body {
	height: 100%;
}
body > div:nth-child(2) {
	display: none !important;
}

/*  */
.m .valve {
	float: left;
	height: 280px;
	padding: 5px;
	width: 400px;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
}
.m .valve .card {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0px;
	min-height: 200px;
	position: relative;
	width: 100%;
	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	-o-transition: -o-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
.m .valve .card div {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* */
.m .valve .card.dcard .card-content {
	/* height: 100%; */
	flex-grow: 1;
	padding: 10px;
}
.m .valve .card.dcard .card-header {
	display: flex;
	margin-bottom: 5px !important;
}
.m .valve .card.dcard .card-header .info {
	display: flex;
	line-height: 34px;
	margin-left: auto;
}
.m .valve .card.dcard .card-header .info .el:last-child {
	padding-right: 0;
}
.m .valve .card.dcard .card-header .info .el {
	padding: 0 5px 0 0;
}
.m .valve .card.dcard .card-header .el i {
	line-height: 24px;
	/* font-size: 22px; */
}
.m .valve .card.dcard .card-header .el div {
	font-size: 9.8px;
	line-height: 10px;
}
.m .valve .card.dcard .card-title {
	font-size: 16px;
	font-weight: 300;
	line-height: 32px;
	margin-bottom: 0px;
}

/* */
.m .valve .card.dcard .card-action {
	display: flex;
	padding: 5px 10px;
}

/* card-reveal */
.m .valve .card.dcard .card-reveal {
	padding: 10px;
}

.m .valve .card.dcard .card-reveal > div {
	display: flex !important;
	flex-direction: column;
	height: 100%;
}
.m .valve .card.dcard .card-reveal > div > div:nth-child(2) {
	display: flex;
	flex-grow: 1;
}
.m .valve .card.dcard .card-reveal .card-footer {
	border-top: 1px solid rgba(160,160,160,.2);
	display: flex;
	line-height: 32px;
	padding: 5px 10px;
	margin: 0 -10px -10px -10px;
}
.m .valve .card.dcard .card-reveal .dropdown-content {
	min-width: 320px;
}
.m .valve .card.dcard .card-reveal .dropdown-content li {
	min-height: 0;
}
.m .valve .card.dcard .card-reveal .dropdown-content li > a {
	font-weight: 500;
	padding: 10px 12px;
}
.m .valve .card.dcard .card-reveal .dropdown-content li > a > i {
	margin-right: 10px;
}

/* */
.m .valve .card.dcard ul > li > div.state,
.m .valve .card.dcard ul > li > div.detail {
	display: flex;
}
.m .valve .card.dcard ul > li > div.state > div,
.m .valve .card.dcard ul > li > div.detail > div  {
	font-size: 12px;
	height: 14px;
	line-height: 14px;
}
.m .valve .card.dcard ul > li > div.state > div:first-child,
.m .valve .card.dcard ul > li > div.detail > div:first-child {
	flex-grow: 1;
	font-weight: bold;
}
.m .valve .card.dcard ul > li > div.state > div:last-child,
.m .valve .card.dcard ul > li > div.detail > div:last-child {
	display: flex;
	justify-content: flex-end;            
}
.m .valve .card.dcard ul > li > div.state > div:last-child {
	width: 95px;
}
.m .valve .card.dcard ul > li > div.detail > div:last-child {
	width: 155px;
}
.m .valve .card.dcard ul > li > div.state > div.switch {
	padding-top: 2px;
}
.m.react-dark .card-reveal  {
	background-color: #272727 !important;
}
.m.react-dark .card-reveal {
	background-color: #272727 !important;
}
/* */
/* .m .valve .card.dcard div.control,
.m .valve .card.dcard div.value {
	display: flex;
	justify-content: flex-end;
} */

/* */
.m .valve .card.dcard div.control.switch span {
	height: 12px;
	margin: 0 5px;
	width: 24px;
}
.m .valve .card.dcard div.control.switch span::before,
.m .valve .card.dcard div.control.switch span::after {
	height: 12px;
	top: 0px;
	width: 12px;
}
.m .switch label input[type=checkbox]:checked+.lever:before, 
.m .switch label input[type=checkbox]:checked+.lever:after {
	left: 12px !important;
}

/* */
.m .valve .card.dcard div.control.check {
	padding-right: 2px;
}
.m .valve .card.dcard div.control.check span {
	cursor: default;
	height: 14px;
	line-height: 14px;
	padding-left: 12px;
}
.m .valve .card.dcard div.control.check span::before {
	height: 11px;
	top: -2px;
	width: 8px;
	left: -1px;
}
.m .valve .card.dcard div.control.check span::after {
	height: 14px;
	width: 14px;
}
.m .valve .card.dcard div.control.select {
	font-size: 10px;
}
.m .valve .card.dcard div.control.range input[type="range"] {
	margin: 5px 0 5px;
}

/* MODAL EDIT */
.m .modal .modal-content {
	width: 100% !important;
	height: 100% !important;
	padding-bottom: 0;
}
.m .modal .modal-content .row {
	margin-bottom: 0;
}
.m .modal .modal-content .row > .col {
	margin-bottom: 0 !important;
	padding: 0 !important;
}
.m .modal .modal-footer {
	padding: 4px 20px;
	width: 100% !important;
}
.m #modal_rename.modal {
	width: 450px;
}
.m #modal_yaml.modal {
	width: 450px;
}
.m #modal_yaml.modal .modal-content .row > .col {
	margin-top: 0 !important;
}
.m #modal_yaml.modal textarea {
	border: 1px solid #9e9e9e;
	font-size: 14px;
	height: 300px !important;
	overflow-y: scroll;
	padding: 5px 4px !important;
}
.m #modal_yaml.modal textarea:focus {
	border: 1px solid #2196f3;
	box-shadow: 0 1px 0 0 #2196f3;
}

i.icon-red {
	color: red;
}
.m.react-dark i.icon-red {
	color: red !important;
}
i.icon-orange {
	color: orange;
}
.m.react-dark i.icon-orange {
	color: orange !important;
}
i.icon-green {
	color: green;
}
.m.react-dark i.icon-green {
	color: green !important;
}
i.icon-grey {
	color: grey;
}
.m.react-dark i.icon-grey {
	color: grey !important;
}
.m.react-dark .switch label input[type="checkbox"]:checked+.lever {
	background-color: #436a93;
}

.m.react-dark .switch label .lever {
	background-color: #4dabf5;
}

.m.react-dark .switch label .lever:after {
	background-color: #436a93;
}

.myslider {
	-webkit-appearance: none;
	appearance: auto;
    width: 100%;
    height: 25px;    
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
  }  

.myslider:hover {
	opacity: 1;
}

.myslider::-webkit-slider-runnable-track {
	width: 100%;
	height: 25px;
	background: #fce8b2;
	border: none;
  }

.myslider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background: #e86b37;
	cursor: pointer;
}

.myslider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	background: #e86b37;
	cursor: pointer;
}