Domoticz

Posted: **Tuesday 04 December 2018 19:06**

Hi all,

i made a simple css (edited another css from the forum) with my colors.
Green = Everything without password
Orange = Protected with password
Yellow = Low Battery
Red = Not seen for x time
In the error log, green is status, red is error.
custom.css

Code: Select all

@import url("legacy.css");

@font-face {
	font-family: "OpenSans";
	font-style: normal;
	src: url('fonts/OpenSans.ttf');
	src: local('OpenSans'), url('fonts/OpenSans.ttf') format('truetype');
}
@font-face {
	font-family: "DroidSans";
	font-style: normal;
	src: url('fonts/DroidSans.ttf');
	src: local('DroidSans'), url('fonts/DroidSans.ttf') format('truetype');
}
body {
	background: #000000 no-repeat center center fixed;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

body table#itemtablesmall tr td:first-child + td + td + td + td{
	margin-top: 4px;
	margin-bottom: 1em;
	font-size: 80%;
	line-height:86%;
}
body table#itemtablesmall tr td:first-child + td + td + td{
	font-size: 90%;
	font-weight: bold;
	line-height:86%;
}
body table#itemtablesmall tr td:first-child + td{
	float: right;
	margin: -30px 5px 0px 0px;
	font-size: 100%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}
body table#itemtablesmalldoubleicon tr td:first-child + td{
	float: right;
	margin: -30px 5px 0px 0px;
	font-size: 120%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}
body table#itemtablenostatus tr td:first-child + td{
	float: right;
	margin: -30px 10px 0px 0px;
	font-size: 120%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}

body table#itemtable tr td:first-child + td{
	float: right;
	margin: -30px 10px 0px 0px;
	font-size: 120%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}
body table#itemtablenotype tr td:first-child + td{
	float: right;
	margin: -30px 10px 0px 0px;
	font-size: 120%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}
body table#itemtabledoubleicon tr td:first-child + td{
	float: right;
	margin: -30px 10px 0px 0px;
	font-size: 120%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}
body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td + td + td{
	font-size: 90%;
	margin-top: 0px;
	clear: both;
	padding: 0px 5% 2px 5%;
	line-height: 130%;
}

div.log {
	background-color: ;
	height: 300px;
	overflow: auto;
	border: 1px dotted #AAAAAA;
	padding: 4px;
	font-family: "Courier New", monospace;
	color: #fff;
	font-size: 11px;
	word-wrap: break-word;
	text-align: left;
}

.logerror {
	color: #ff0000;
	font-weight: 600;
}

body table#itemtable tbody tr {
    display: block;
    width: 98%;
    padding: 5px 5px 5px 5px;
    margin: 2px 100% 5px 0;
    border-style: none;
    border-radius: 5px;
    color: #fff;
    background-color: #F1F5FA;
    font-family: Arial, Helvetica, sans-serif;
}

div.log {
    background-color: #000;
    height: 300px;
    overflow: auto;
    border: 1px dotted #AAAAAA;
    padding: 4px;
    font-family: "Courier New", monospace;
    color: #666666;
    font-size: 11px;
    word-wrap: break-word;
    text-align: left;
}

.sub-tabs > li > a {
    color: #fff;
    cursor: default;
    background-color: #000;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.sub-tabs > .active > a {
    color: #000;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.logstatus {
    color: #38A601;
    font-size: 11px;
    font-weight: 600;
}

#holder > .container-fluid {
	padding-top: 40px;
}

.navbar .nav {margin: 7.5px !important;}

.navbar .divider-vertical {
	height: 1px;
}

.navbar .nav > li {
	float: left;
	height: 10px;
}

#comboroom, #combofloorplan {
	background: #eee;
	width: 240px;
	overflow: hidden;
	background: #eee;
	border: 1px solid #eee;
	font-size: smaller;
}


#timesun {
	text-align: middle
	height: 1.00em;
	top: 0px;
        font-family: Open Sans,sans-serif;
}

#room {
	font-family: Open Sans, sans-serif;
}

#copyright {
	display: none !important;
}

li {
	line-height: 4px;
}

.navbar .nav .dropdown-toggle .caret {
	margin-top: 0px;
}

.navbar .nav .current_page_item > a {
	font-weight: 400;
}

.navbar .nav li a {
	text-decoration: none;
	text-transform: none;
	border: 0px !important;
	font-family: Open Sans,sans-serif;
	padding: 10px;
	font-weight: 200;
 	text-align: center;
 	color: #000;
    	background-color: rgba(255,202020,202020,0.75);
    	background-image: none;
}

.brand,
.brand h1,
.brand h2,
.brand img { display: none; }

body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmall tbody tr,
body table#itemtable tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtabledoubleicon tbody tr,
body table#itemtablenostatus tbody tr{
	border-radius: 12px;
}

.navbar-inverse .navbar-inner {
	background-color: rgba(202020,202020,202020,0.0);
	background-image: none;
	background-repeat: no-repeat;
	filter: none;
}

.btnstyle {
	margin-top: 10px;
}


#room,
.room {
	background-color: #eee;
	color: #666 !important;
	float: left !important;
	padding: 5px !important;
	margin-left: -7px !important;
	margin-top: -29px !important;
	z-index: 1031;
	position: fixed;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	border-color: #eee;
	font-size: 9px;
	/* Voor nu even niet */
	display: none;
}

h2{
	font-family: Open Sans,sans-serif;
	text-decoration: none;
	text-transform: none;
	font-size: 1.1em;
	color: #fff;
	font-weight: bold;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}

body table#itemtablesmall tbody tr:hover{
	border-color: #2B2C74;
	background-color: #F2F1FA;
}

body table#itemtablesmall tr:hover td:first-child{
	border-color: #2B2C74;
	color: #0D0D1F;
	background-color: #D4D5EE;
}

body table#itemtable tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtabledoubleicon tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmall tbody tr,
body table#itemtablenostatus tbody tr{
	background-color: rgba(80,80,80,0.6);
}


body table#itemtablesmall tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtable tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtablenostatus tbody tr,
body table#itemtabletrippleicon tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmalltrippleicon tbody tr,
body table#mobileitem tbody tr{
	padding-bottom: 10px !important;
}

body table#itemtablesmall tbody tr td:first-child,
body table#itemtablesmalldoubleicon tbody tr td:first-child ,
body table#itemtable tr td:first-child,
body table#itemtablenostatus tr td:first-child,
body table#itemtabledoubleicon tr td:first-child ,
body table#itemtablenotype tr td:first-child ,
body table#itemtabletrippleicon tr td:first-child ,
body table#itemtablesmalltrippleicon tr td:first-child ,
body table#mobileitem tr td:first-child{
	display: block;
	height: 20px !important;
    	padding: 5px 0.7em;
    	border-style: none;
    	border-radius: 0px !important;
    	color: #0D161F;
    	background-color: #F1F5FA;
	font-family: Droid Sans,sans-serif !important;
	margin-top: -5px;
	margin-left: -5px;
	margin-right: -5px;
}

.navbar .nav .dropdown-menu {
    	border: 0px !important;
    	font-family: Open Sans,sans-serif;
    	padding: 2px;
    	background-image: none;
}

.nav > li > a > img {
  	display: none;
}

.navbar .nav .current_page_item > a, .navbar .nav .current_page_item > a:hover {
	color: #000;
}

.navbar .nav .current_page_item > a,
.navbar .nav .current_page_item > a:hover,
.navbar .nav .current_page_item > a:focus,
.navbar .nav li a:focus,
.navbar .nav li a:hover {

	color: #000;
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
  	color: #000;
}

.btnsmall {
	background: #169FE6 !important;
	color: #eee;
	font-family: Droid Sans,sans-serif !important;
	margin-top: 5px;
}

.btnsmall:hover {
	color: #eee;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.3);
	-moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.3);
	box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.3);
}

.selectorlevels {
	font-size: 1.1em;
	margin-top: 8px !important;
	text-align: center;
}

.selectorlevels .ui-button-text-only .ui-button-text {
	padding: .2em 0.7em;
}

#dashcontent .selectorlevels {
	font-size: 0.8em;
	margin-top: -5px !important;
}

.selectorlevels .ui-selectmenu-button.ui-widget {
	font-size: 1em;
	height: 22px;
}

.ui-menu .ui-menu-item,
.ui-selectmenu-button span.ui-selectmenu-text {
    text-align: center;
}

.dimslider {
	z-index:1;
	border-width: 1px;
	border-style: solid;
	border-color: #333 #333 #777 #333;
	border-radius: 25px;
	margin-top: 0px;
	margin-bottom: .5em;
	height: 13px;
	width: calc(98% - 70px) !important;
	position: relative;
	background-color: #8e8d8d;
	background: url('images/bg-track.png') repeat top left;
	box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5),
    				  0 1px 0 0px rgba(250, 250, 250, .5);
}

#dashcontent .dimslider {
        width: calc(98% - 62px) !important;
}

#dashcontent table#itemtablesmalldoubleicon .dimslider {
	width: calc(98% - 105px) !important;
}

table#itemtablesmalldoubleicon .dimslider,
table#itemtabledoubleicon .dimslider {
	width: calc(98% - 118px) !important;
	margin-top: 12px !important;
}

body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td + td{
	font-size: 85%;
	white-space: nowrap;
}

/* Mobile and Minimum Sizes */

@media (min-width: 768px) and (max-width: 979px) {
  	.nav > li > a > img {
  		display: inline;
 	}
	.navbar .nav {margin: 2px !important;}
	#dashcontent .selectorlevels {
		font-size: 0.8em;
		margin-top: -25px !important;
	}
	.selectorlevels .ui-selectmenu-button.ui-widget {
		font-size: 1em;
		height: 22px;
	}
	.container,
	.navbar-static-top .container,
	.navbar-fixed-top .container,
	.navbar-fixed-bottom .container {
	  	width: 100% !important;
	}
	[class*="span"] {
		margin-left: 9px;
	}
	.span4 {
    		width: 300px !important;
	}
}

@media (max-width: 767px) {
  	.nav > li > a > img {
  		display: inline;
 	}
	.navbar .nav { margin: 2px !important; }

}
	#dashcontent .selectorlevels {
		font-size: 0.8em;
		margin-top: -25px !important;
	}
	.selectorlevels .ui-selectmenu-button.ui-widget {
		font-size: 1em;
		height: 22px;
	}
	.btnstyle,
	.btnstylerev {
		width: 50px;
	}
}

.mobileitem tr:hover {
	background: 0 !important;
}

table.mobileitem {
	background-color: rgba(220, 220, 220, .8);
}

.mobileitem td:first-child, .mobileitem th:first-child {
    white-space: nowrap;
}

.events-editor {
	bottom: 20px;
}

.events-editor__tree {
	padding-top: 20px;
}

.events-editor-tree__file:link {
	line-height: normal;
}

legacy.css (in same map as custom css)

Code: Select all


.brand h1 {
	float: left;
	margin-left: 32px;
	margin-top: -48px;
	text-decoration: none;
}

.brand h2 {
	float: left;
	margin-left: 142px;
	margin-top: -24px;
}

.brand img {
	width: 40px;
	height: 40px;
	margin-left: -10px;
	margin-top: -8px;
}

@media (min-width: 768px) and (max-width: 1200px) {
	.navbar .nav li a {
		padding: 10px 5px 10px 5px !important;
	}
}

.ui-btn:hover {
	background-color: rgba(255,255,255,.3) !important;
}

.sub-tabs-apply {
	color: #fff !important;
	border: 1px solid #ff0000 !important;
}

body table#itemtable tr td:first-child {
	height: 1.2em;
	padding: 0 .5em 0 .5em;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 130%;
	white-space: nowrap;
	border-width: 1px 1px 1px 1px;
	border-color: #2B5074;
	border-style: solid;
	border-radius: 5px;
	color: #fff;
	background-color: #D4E1EE;
}

	body table#itemtable tr td:first-child + td {
		float: right;
		margin: -27px 3px 0px 0px;
		font-size: 140%;
		font-weight: bold;
		white-space: nowrap;
		color: #000000;
	}

		body table#itemtable tr td:first-child + td + td {
			border-color: #2B5074;
			border-style: none;
			border-width: 1px;
			float: left;
			margin: 0 10px 10px 0;
		}

			body table#itemtable tr td:first-child + td + td img {
				display: block;
			}
			
			body table#itemtable tr td:first-child + td + td + td {
				font-size: 90%;
				font-weight: bold;
			}

				body table#itemtable tr td:first-child + td + td + td + td {
					font-size: 80%;
				}

					body table#itemtable tr td:first-child + td + td + td + td:before {
						content: "";
						font-style: italic;
					}

					body table#itemtable tr td:first-child + td + td + td + td + td {
						font-size: 80%;
					}

						body table#itemtable tr td:first-child + td + td + td + td + td:before {
							content: "Type: ";
							font-style: italic;
						}

						body table#itemtable tr td:first-child + td + td + td + td + td + td {
							font-size: 90%;
							clear: both;
							padding: 0 5% 0 5%;
							line-height: 130%;
						}

table.mobileitem {
	*border-collapse: collapse; /* IE7 and lower */
	border-spacing: 0;
	border-style: none;
	background-color: #FFFFFF;
	width: 100%;
}

.mobileitem {
	border: solid #ccc 1px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 1px 1px #ccc;
	-moz-box-shadow: 0 1px 1px #ccc;
	box-shadow: 0 1px 1px #ccc;
	color: #000;
}

	.mobileitem tr:hover {
		background: #fbf8e9;
		-o-transition: all 0.1s ease-in-out;
		-webkit-transition: all 0.1s ease-in-out;
		-moz-transition: all 0.1s ease-in-out;
		-ms-transition: all 0.1s ease-in-out;
		transition: all 0.1s ease-in-out;
	}

	.mobileitem td, .mobileitem th {
		border-left: 0px solid #ccc;
		border-top: 0px solid #ccc;
		padding: 6px;
		text-align: left;
	}

	.mobileitem th {
		background-color: #dce9f9;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
		background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
		background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
		background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
		background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
		background-image: linear-gradient(top, #ebf3fc, #dce9f9);
		-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
		-moz-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
		border-top: none;
		text-shadow: 0 1px 0 rgba(255,255,255,.5);
		font-weight: bold;
	}

		.mobileitem td:first-child, .mobileitem th:first-child {
			border-left: none;
		}

	.mobileitem td:last-child {
		font-weight: bold;
		text-align: right;
	}

	.mobileitem .btn-mini {
		font-family: Arial,Helvetica,sans-serif;
		font-size: 10pt;
		font-weight: bold;
	}

	.mobileitem th:first-child {
		-moz-border-radius: 6px 0 0 0;
		-webkit-border-radius: 6px 0 0 0;
		border-radius: 6px 0 0 0;
	}

	.mobileitem th:last-child {
		-moz-border-radius: 0 6px 0 0;
		-webkit-border-radius: 0 6px 0 0;
		border-radius: 0 6px 0 0;
	}

	.mobileitem th:only-child {
		-moz-border-radius: 6px 6px 0 0;
		-webkit-border-radius: 6px 6px 0 0;
		border-radius: 6px 6px 0 0;
	}

	.mobileitem tr:last-child td:first-child {
		-moz-border-radius: 0 0 0 6px;
		-webkit-border-radius: 0 0 0 6px;
		border-radius: 0 0 0 6px;
	}

	.mobileitem tr:last-child td:last-child {
		-moz-border-radius: 0 0 6px 0;
		-webkit-border-radius: 0 0 6px 0;
		border-radius: 0 0 6px 0;
	}

	.mobileitem tr:last-child td[colspan="2"] {
		-moz-border-radius: 0 0 6px 6px;
		-webkit-border-radius: 0 0 6px 6px;
		border-radius: 0 0 6px 6px;
	}


body table#itemtable tbody tr:hover {
	border-color: #2B2C74;
	background-color: #F2F1FA;
}

body table#itemtable tr:hover td:first-child {
	border-color: #2B2C74;
	color: #0D0D1F;
	background-color: #D4D5EE;
}

body table#itemtablenotype,
body table#itemtablenotype tbody {
display: block;
width: 100%;
}

body table#itemtablenotype tbody tr {
	display: block;
	width: 98%;
	padding: 5px 5px 5px 5px;
	margin: 2px 100% 5px 0;
	border-style: none;
	border-radius: 5px;
	color: #fff;
	background-color: #F1F5FA;
	font-family: Arial, Helvetica, sans-serif;
}


body table#itemtablenotype thead {
	display: none;
}

body table#itemtablenotype tr > * {
	display: block;
	padding: 0;
	margin: 0;
}

body table#itemtablenotype tr td:first-child {
	height: 1.2em;
	padding: 0 .5em 0 .5em;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 130%;
	white-space: nowrap;
	border-width: 1px 1px 1px 1px;
	border-color: #2B5074;
	border-style: solid;
	border-radius: 5px;
	color: #fff;
	background-color: #D4E1EE;
}

	body table#itemtablenotype tr td:first-child + td {
		float: right;
		margin: -27px 3px 0px 0px;
		font-size: 140%;
		font-weight: bold;
		white-space: nowrap;
		color: #000000;
	}

		body table#itemtablenotype tr td:first-child + td + td {
			border-color: #2B5074;
			border-style: none;
			border-width: 1px;
			float: left;
			margin: 0 10px 10px 0;
		}

			body table#itemtablenotype tr td:first-child + td + td img {
				display: block;
			}

			body table#itemtablenotype tr td:first-child + td + td + td {
				font-size: 90%;
				font-weight: bold;
			}

				body table#itemtablenotype tr td:first-child + td + td + td + td {
					font-size: 80%;
				}

					body table#itemtablenotype tr td:first-child + td + td + td + td:before {
						content: "";
						font-style: italic;
					}

					body table#itemtablenotype tr td:first-child + td + td + td + td + td {
						font-size: 90%;
						clear: both;
						padding: 0 5% 0 5%;
						line-height: 130%;
					}
					
body table#itemtablenotype tbody tr:hover {
	border-color: #2B2C74;
	background-color: #F2F1FA;
}

body table#itemtablenotype tr:hover td:first-child {
	border-color: #2B2C74;
	color: #0D0D1F;
	background-color: #D4D5EE;
}

body table#itemtablenostatus,
body table#itemtablenostatus tbody {
display: block;
width: 100%;
}

body table#itemtablenostatus tbody tr {
	display: block;
	width: 98%;
	padding: 5px 5px 5px 5px;
	margin: 2px 100% 5px 0;
	border-style: none;
	border-radius: 5px;
	color: #fff;
	background-color: #F1F5FA;
	font-family: Arial, Helvetica, sans-serif;
}


body table#itemtablenostatus thead {
	display: none;
}

body table#itemtablenostatus tr > * {
	display: block;
	padding: 0;
	margin: 0;
}

body table#itemtablenostatus tr td:first-child {
	height: 1.2em;
	padding: 0 .5em 0 .5em;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 130%;
	white-space: nowrap;
	border-width: 1px 1px 1px 1px;
	border-color: #2B5074;
	border-style: solid;
	border-radius: 5px;
	color: #fff;
	background-color: #D4E1EE;
}

	body table#itemtablenostatus tr td:first-child + td {
		float: right;
		margin: -27px 3px 0px 0px;
		font-size: 140%;
		font-weight: bold;
		white-space: nowrap;
		color: #000000;
	}

		body table#itemtablenostatus tr td:first-child + td + td {
			border-color: #2B5074;
			border-style: none;
			border-width: 1px;
			float: left;
			margin: 0 10px 10px 0;
		}

			body table#itemtablenostatus tr td:first-child + td + td img {
				display: block;
			}

			body table#itemtablenostatus tr td:first-child + td + td + td {
				font-size: 90%;
				font-weight: bold;
			}

				body table#itemtablenostatus tr td:first-child + td + td + td:before {
					font-style: italic;
					font-size: 90%;
				}

				body table#itemtablenostatus tr td:first-child + td + td + td + td {
					font-size: 80%;
				}

					body table#itemtablenostatus tr td:first-child + td + td + td + td:before {
						content: "";
						font-style: italic;
					}

					body table#itemtablenostatus tr td:first-child + td + td + td + td + td {
						font-size: 80%;
					}

						body table#itemtablenostatus tr td:first-child + td + td + td + td + td:before {
							content: "Type: ";
							font-style: italic;
						}


						body table#itemtablenostatus tr td:first-child + td + td + td + td + td + td {
							font-size: 90%;
							clear: both;
							padding: 0 5% 0 5%;
							line-height: 130%;
						}

body table#itemtablenostatus tbody tr:hover {
	border-color: #2B2C74;
	background-color: #F2F1FA;
}

body table#itemtablenostatus tr:hover td:first-child {
	border-color: #2B2C74;
	color: #0D0D1F;
	background-color: #D4D5EE;
}

body table#itemtablesmall,
body table#itemtablesmall tbody {
display: block;
width: 100%;
}

body table#itemtablesmall tbody tr {
	display: block;
	width: 98%;
	min-height: 66px;
	padding: 5px 5px 5px 5px;
	margin: 2px 100% 5px 0;
	border-style: none;
	border-radius: 5px;
	color: #fff;
	background-color: #F1F5FA;
	font-family: Arial, Helvetica, sans-serif;
}

body table#itemtablesmall thead {
	display: none;
}

body table#itemtablesmall tr > * {
	display: block;
	padding: 0;
	margin: 0;
}

body table#itemtablesmall tr td:first-child {
	height: 1.2em;
	padding: 0 .5em 0 .5em;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 130%;
	white-space: nowrap;
	border-width: 1px 1px 1px 1px;
	border-color: #2B5074;
	border-style: solid;
	border-radius: 5px;
	color: #fff;
	background-color: #D4E1EE;
}

	body table#itemtablesmall tr td:first-child + td {
		float: right;
		margin: -27px 3px 0px 0px;
		font-size: 140%;
		font-weight: bold;
		white-space: nowrap;
		color: #000000;
	}

		body table#itemtablesmall tr td:first-child + td + td {
			border-color: #2B5074;
			border-style: none;
			border-width: 1px;
			float: left;
			margin: 0 10px 10px 0;
		}

			body table#itemtablesmall tr td:first-child + td + td img {
				display: block;
			}

			body table#itemtablesmall tr td:first-child + td + td + td {
				font-size: 90%;
				font-weight: bold;
				line-height: 86%;
			}

				body table#itemtablesmall tr td:first-child + td + td + td:before {
					content: "";
					font-style: italic;
					font-size: 90%;
				}

				body table#itemtablesmall tr td:first-child + td + td + td + td {
					margin-top: 2px;
					font-size: 80%;
					line-height: 86%;
				}

					body table#itemtablesmall tr td:first-child + td + td + td + td:before {
						content: "";
						font-style: italic;
					}

body table#itemtablesmall tbody tr:hover {
	border-color: #2B2C74;
	background-color: #F2F1FA;
}

body table#itemtablesmall tr:hover td:first-child {
	border-color: #2B2C74;
	color: #0D0D1F;
	background-color: #D4D5EE;
}

body table#itemtabledoubleicon,
body table#itemtabledoubleicon tbody {
display: block;
width: 100%;
}

body table#itemtabledoubleicon tbody tr {
	display: block;
	width: 98%;
	padding: 5px 5px 5px 5px;
	margin: 2px 100% 5px 0;
	border-style: none;
	border-radius: 5px;
	color: #fff;
	background-color: #F1F5FA;
	font-family: Arial, Helvetica, sans-serif;
}


body table#itemtabledoubleicon thead {
	display: none;
}

body table#itemtabledoubleicon tr > * {
	display: block;
	padding: 0;
	margin: 0;
}

body table#itemtabledoubleicon tr td:first-child {
	height: 1.2em;
	padding: 0 .5em 0 .5em;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 130%;
	white-space: nowrap;
	border-width: 1px 1px 1px 1px;
	border-color: #2B5074;
	border-style: solid;
	border-radius: 5px;
	color: #fff;
	background-color: #D4E1EE;
}

	body table#itemtabledoubleicon tr td:first-child + td {
		float: right;
		margin: -27px 3px 0px 0px;
		font-size: 140%;
		font-weight: bold;
		white-space: nowrap;
		color: #000000;
	}

		body table#itemtabledoubleicon tr td:first-child + td + td {
			border-style: none;
			float: left;
			margin: 0 5px 10px 0;
		}

			body table#itemtabledoubleicon tr td:first-child + td + td img {
				display: block;
			}

			body table#itemtabledoubleicon tr td:first-child + td + td + td {
				border-style: none;
				float: left;
				margin: 0 10px 10px 0;
			}

				body table#itemtabledoubleicon tr td:first-child + td + td + td img {
					display: block;
				}

				body table#itemtabledoubleicon tr td:first-child + td + td + td + td {
					font-size: 90%;
					font-weight: bold;
				}

					body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td {
						font-size: 80%;
					}

						body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td:before {
							content: "";
							font-style: italic;
						}

						body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td + td {
							font-size: 80%;
						}

							body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td + td:before {
								content: "Type: ";
								font-style: italic;
							}

							body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td + td + td {
								font-size: 90%;
								margin-top: 16px;
								clear: both;
								padding: 0 5% 0 5%;
								line-height: 130%;
							}

body table#itemtabledoubleicon tbody tr:hover {
	border-color: #2B2C74;
	background-color: #F2F1FA;
}

body table#itemtabledoubleicon tr:hover td:first-child {
	border-color: #2B2C74;
	color: #0D0D1F;
	background-color: #D4D5EE;
}

body table#itemtabletrippleicon,
body table#itemtabletrippleicon tbody {
display: block;
width: 100%;
}

body table#itemtabletrippleicon tbody tr {
	display: block;
	width: 98%;
	padding: 5px 5px 5px 5px;
	margin: 2px 100% 5px 0;
	border-style: none;
	border-radius: 5px;
	color: #fff;
	background-color: #F1F5FA;
	font-family: Arial, Helvetica, sans-serif;
}


body table#itemtabletrippleicon thead {
	display: none;
}

body table#itemtabletrippleicon tr > * {
	display: block;
	padding: 0;
	margin: 0;
}

body table#itemtabletrippleicon tr td:first-child {
	height: 1.2em;
	padding: 0 .5em 0 .5em;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 130%;
	white-space: nowrap;
	border-width: 1px 1px 1px 1px;
	border-color: #2B5074;
	border-style: solid;
	border-radius: 5px;
	color: #fff;
	background-color: #D4E1EE;
}

	body table#itemtabletrippleicon tr td:first-child + td {
		float: right;
		margin: -27px 3px 0px 0px;
		font-size: 140%;
		font-weight: bold;
		white-space: nowrap;
		color: #000000;
	}

		body table#itemtabletrippleicon tr td:first-child + td + td {
			border-style: none;
			float: left;
			margin: 0 4px 10px 0;
		}

			body table#itemtabletrippleicon tr td:first-child + td + td img {
				display: block;
			}

			body table#itemtabletrippleicon tr td:first-child + td + td + td {
				border-style: none;
				float: left;
				margin: 0 4px 10px 0;
			}

				body table#itemtabletrippleicon tr td:first-child + td + td + td img {
					display: block;
				}

				body table#itemtabletrippleicon tr td:first-child + td + td + td + td {
					border-style: none;
					float: left;
					margin: 0 5px 10px 0;
				}

					body table#itemtabletrippleicon tr td:first-child + td + td + td + td img {
						display: block;
					}

					body table#itemtabletrippleicon tr td:first-child + td + td + td + td + td {
						font-size: 90%;
						font-weight: bold;
					}

						body table#itemtabletrippleicon tr td:first-child + td + td + td + td + td + td {
							font-size: 80%;
						}

							body table#itemtabletrippleicon tr td:first-child + td + td + td + td + td + td:before {
								content: "";
								font-style: italic;
							}

							body table#itemtabletrippleicon tr td:first-child + td + td + td + td + td + td + td {
								font-size: 80%;
							}

								body table#itemtabletrippleicon tr td:first-child + td + td + td + td + td + td + td:before {
									content: "Type: ";
									font-style: italic;
								}

								body table#itemtabletrippleicon tr td:first-child + td + td + td + td + td + td + td + td {
									font-size: 90%;
									clear: both;
									padding: 0 5% 0 5%;
									line-height: 130%;
								}

body table#itemtabletrippleicon tbody tr:hover {
	border-color: #2B2C74;
	background-color: #F2F1FA;
}

body table#itemtabletrippleicon tr:hover td:first-child {
	border-color: #2B2C74;
	color: #0D0D1F;
	background-color: #D4D5EE;
}

body table#itemtablesmalldoubleicon,
body table#itemtablesmalldoubleicon tbody {
display: block;
width: 100%;
}

body table#itemtablesmalldoubleicon tbody tr {
	display: block;
	width: 98%;
	height: 66px;
	padding: 5px 5px 5px 5px;
	margin: 2px 100% 5px 0;
	border-style: none;
	border-radius: 5px;
	color: #fff;
	background-color: #F1F5FA;
	font-family: Arial, Helvetica, sans-serif;
}

body table#itemtablesmalldoubleicon thead {
	display: none;
}

body table#itemtablesmalldoubleicon tr > * {
	display: block;
	padding: 0;
	margin: 0;
}

body table#itemtablesmalldoubleicon tr td:first-child {
	height: 1.2em;
	padding: 0 .5em 0 .5em;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 130%;
	white-space: nowrap;
	border-width: 1px 1px 1px 1px;
	border-color: #2B5074;
	border-style: solid;
	border-radius: 5px;
	color: #fff;
	background-color: #D4E1EE;
}

	body table#itemtablesmalldoubleicon tr td:first-child + td {
		float: right;
		margin: -27px 3px 0px 0px;
		font-size: 140%;
		font-weight: bold;
		white-space: nowrap;
		color: #000000;
	}

		body table#itemtablesmalldoubleicon tr td:first-child + td + td {
			border-style: none;
			float: left;
			margin: 0 5px 10px 0;
		}

			body table#itemtablesmalldoubleicon tr td:first-child + td + td img {
				display: block;
			}

			body table#itemtablesmalldoubleicon tr td:first-child + td + td + td {
				border-style: none;
				float: left;
				margin: 0 10px 10px 0;
			}

				body table#itemtablesmalldoubleicon tr td:first-child + td + td + td img {
					display: block;
				}

				body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td {
					font-size: 90%;
					font-weight: bold;
					line-height: 86%;
				}

					body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td:before {
						content: "";
						font-style: italic;
						font-size: 90%;
					}

					body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td + td {
						margin-top: 2px;
						font-size: 80%;
						line-height: 86%;
					}

						body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td + td:before {
							content: "";
							font-style: italic;
						}

body table#itemtablesmalldoubleicon tbody tr:hover {
	border-color: #2B2C74;
	background-color: #F2F1FA;
}

body table#itemtablesmalldoubleicon tr:hover td:first-child {
	border-color: #2B2C74;
	color: #0D0D1F;
	background-color: #D4D5EE;
}

body table#itemtablesmalltrippleicon,
body table#itemtablesmalltrippleicon tbody {
display: block;
width: 100%;
}

body table#itemtablesmalltrippleicon tbody tr {
	display: block;
	width: 98%;
	height: 66px;
	padding: 5px 5px 5px 5px;
	margin: 2px 100% 5px 0;
	border-style: none;
	border-radius: 5px;
	color: #fff;
	background-color: #F1F5FA;
	font-family: Arial, Helvetica, sans-serif;
}

body table#itemtablesmalltrippleicon thead {
	display: none;
}

body table#itemtablesmalltrippleicon tr > * {
	display: block;
	padding: 0;
	margin: 0;
}

body table#itemtablesmalltrippleicon tr td:first-child {
	height: 1.2em;
	padding: 0 .5em 0 .5em;
	margin-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 130%;
	white-space: nowrap;
	border-width: 1px 1px 1px 1px;
	border-color: #2B5074;
	border-style: solid;
	border-radius: 5px;
	color: #fff;
	background-color: #D4E1EE;
}

	body table#itemtablesmalltrippleicon tr td:first-child + td {
		float: right;
		margin: -27px 3px 0px 0px;
		font-size: 140%;
		font-weight: bold;
		white-space: nowrap;
		color: #000000;
	}

		body table#itemtablesmalltrippleicon tr td:first-child + td + td {
			border-style: none;
			float: left;
			margin: 0 5px 10px 0;
		}

			body table#itemtablesmalltrippleicon tr td:first-child + td + td img {
				display: block;
			}

			body table#itemtablesmalltrippleicon tr td:first-child + td + td + td {
				border-style: none;
				float: left;
				margin: 0 5px 5px 0;
			}

				body table#itemtablesmalltrippleicon tr td:first-child + td + td + td img {
					display: block;
				}

				body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td {
					border-style: none;
					float: left;
					margin: 0 10px 10px 0;
				}

					body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td img {
						display: block;
					}

					body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td + td {
						font-size: 90%;
						font-weight: bold;
						line-height: 86%;
					}

						body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td + td:before {
							content: "";
							font-style: italic;
							font-size: 90%;
						}

						body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td + td + td {
							margin-top: 2px;
							font-size: 80%;
							line-height: 86%;
						}

							body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td + td + td:before {
								content: "";
								font-style: italic;
							}

body table#itemtablesmalltrippleicon tbody tr:hover {
	border-color: #2B2C74;
	background-color: #F2F1FA;
}

body table#itemtablesmalltrippleicon tr:hover td:first-child {
	border-color: #2B2C74;
	color: #0D0D1F;
	background-color: #D4D5EE;
}

div.item.statusNormal td#name{
    background-color: #30c200;
}
div.item.statusProtected td#name{
    background-color: #f56600;
}
div.item.statusTimeout td#name{
    background-color:#DF2D3A;
}
div.item.statusLowBattery td#name{
    background-color:#DDDF2D;
}

.selectorlevels {
	font-size: 1em;
}

#dashcontent .selectorlevels {
	font-size: 0.9em;
}

.selectorlevels .ui-button-text-only .ui-button-text {
	padding: .3em 0.7em;
}

.selectorlevels .ui-selectmenu-button.ui-widget {
	font-size: 1.1em;
}

Posted: **Tuesday 04 December 2018 21:33**

Very Nice!!!!

Verzonden vanaf mijn iPhone met Tapatalk Pro

Posted: **Tuesday 04 December 2018 21:53**

poudenes wrote: ↑Tuesday 04 December 2018 21:33 Very Nice!!!!
Verzonden vanaf mijn iPhone met Tapatalk Pro

Thanks

See the red, not recieving sensors:

: Schermopname (20).png (126.33 KiB) Viewed 1873 times

Also made an edit as well, forgot to add the (white) text upper the buttons >

: Schermopname (22).png (125.28 KiB) Viewed 1872 times

Next step is the mobile page, it doesnt fit on all mobiles atm...

Posted: **Thursday 06 December 2018 9:54**

How/where do I put those?

Posted: **Thursday 06 December 2018 15:59**

EdwinK wrote: ↑Thursday 06 December 2018 9:54 How/where do I put those?

Make map in directory home/pi/domoticz/www/styles/yourname and put these css in that directory

After that go to settings and select your theme..
There is one little problem in the scripts page, wich i will going to fix tonight.

Posted: **Thursday 06 December 2018 17:12**

This is the latest update of custom.css with the correction:

Code: Select all

@import url("legacy.css"); 

@font-face {
	font-family: "OpenSans";
	font-style: normal;
	src: url('fonts/OpenSans.ttf');
	src: local('OpenSans'), url('fonts/OpenSans.ttf') format('truetype');
}
@font-face {
	font-family: "DroidSans";
	font-style: normal;
	src: url('fonts/DroidSans.ttf');
	src: local('DroidSans'), url('fonts/DroidSans.ttf') format('truetype');
}
body {
	background: #000000 no-repeat center center fixed;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

body table#itemtablesmall tr td:first-child + td + td + td + td{
	margin-top: 4px;
	margin-bottom: 1em;
	font-size: 80%;
	line-height:86%;
}
body table#itemtablesmall tr td:first-child + td + td + td{
	font-size: 90%;
	font-weight: bold;
	line-height:86%;
}
body table#itemtablesmall tr td:first-child + td{
	float: right;
	margin: -30px 5px 0px 0px;
	font-size: 100%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}
body table#itemtablesmalldoubleicon tr td:first-child + td{
	float: right;
	margin: -30px 5px 0px 0px;
	font-size: 120%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}
body table#itemtablenostatus tr td:first-child + td{
	float: right;
	margin: -30px 10px 0px 0px;
	font-size: 120%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}

body table#itemtable tr td:first-child + td{
	float: right;
	margin: -30px 10px 0px 0px;
	font-size: 120%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}
body table#itemtablenotype tr td:first-child + td{
	float: right;
	margin: -30px 10px 0px 0px;
	font-size: 120%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}
body table#itemtabledoubleicon tr td:first-child + td{
	float: right;
	margin: -30px 10px 0px 0px;
	font-size: 120%;
	font-weight: normal;
	white-space: nowrap;
	color: #000000;
}
body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td + td + td{
	font-size: 90%;
	margin-top: 0px;
	clear: both;
	padding: 0px 5% 2px 5%;
	line-height: 130%;
}

div.log {
	background-color: ;
	height: 300px;
	overflow: auto;
	border: 1px dotted #AAAAAA;
	padding: 4px;
	font-family: "Courier New", monospace;
	color: #fff;
	font-size: 11px;
	word-wrap: break-word;
	text-align: left;
}

.logerror {
	color: #ff0000;
	font-weight: 600;
}

body table#itemtable tbody tr {
    display: block;
    width: 98%;
    padding: 5px 5px 5px 5px;
    margin: 2px 100% 5px 0;
    border-style: none;
    border-radius: 5px;
    color: #fff;
    background-color: #F1F5FA;
    font-family: Arial, Helvetica, sans-serif;
}

div.log {
    background-color: #000;
    height: 300px;
    overflow: auto;
    border: 1px dotted #AAAAAA;
    padding: 4px;
    font-family: "Courier New", monospace;
    color: #666666;
    font-size: 11px;
    word-wrap: break-word;
    text-align: left;
}

.lognorm {
    color: #fff;
}

.sub-tabs > li > a {
    color: #fff;
    cursor: default;
    background-color: #000;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.sub-tabs > .active > a {
    color: #000;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.logstatus {
    color: #38A601;
    font-size: 11px;
    font-weight: 600;
}

#holder > .container-fluid {
	padding-top: 40px;
}

.navbar .nav {margin: 7.5px !important;}

.navbar .divider-vertical {
	height: 1px;
}

.navbar .nav > li {
	float: left;
	height: 10px;
}

#comboroom, #combofloorplan {
	background: #eee;
	width: 240px;
	overflow: hidden;
	background: #eee;
	border: 1px solid #eee;
	font-size: smaller;
}


#timesun {
	text-align: middle
	height: 1.00em;
	top: 0px;
        font-family: Open Sans,sans-serif;
}

#room {
	font-family: Open Sans, sans-serif;
}

#copyright {
	display: none !important;
}

li {
	line-height: 30px;
}

.navbar .nav .dropdown-toggle .caret {
	margin-top: 0px;
}

.navbar .nav .current_page_item > a {
	font-weight: 400;
}

.navbar .nav li a {
	text-decoration: none;
	text-transform: none;
	border: 0px !important;
	font-family: Open Sans,sans-serif;
	padding: 10px;
	font-weight: 200;
 	text-align: center;
 	color: #000;
    	background-color: rgba(255,202020,202020,0.75);
    	background-image: none;
}

.brand,
.brand h1,
.brand h2,
.brand img { display: none; }

body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmall tbody tr,
body table#itemtable tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtabledoubleicon tbody tr,
body table#itemtablenostatus tbody tr{
	border-radius: 12px;
}

.navbar-inverse .navbar-inner {
	background-color: rgba(202020,202020,202020,0.0);
	background-image: none;
	background-repeat: no-repeat;
	filter: none;
}

.btnstyle {
	margin-top: 10px;
}


#room,
.room {
	background-color: #eee;
	color: #666 !important;
	float: left !important;
	padding: 5px !important;
	margin-left: -7px !important;
	margin-top: -29px !important;
	z-index: 1031;
	position: fixed;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	border-color: #eee;
	font-size: 9px;
	/* Voor nu even niet */
	display: none;
}

h2{
	font-family: Open Sans,sans-serif;
	text-decoration: none;
	text-transform: none;
	font-size: 1.1em;
	color: #fff;
	font-weight: bold;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}

body table#itemtablesmall tbody tr:hover{
	border-color: #2B2C74;
	background-color: #F2F1FA;
}

body table#itemtablesmall tr:hover td:first-child{
	border-color: #2B2C74;
	color: #0D0D1F;
	background-color: #D4D5EE;
}

body table#itemtable tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtabledoubleicon tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmall tbody tr,
body table#itemtablenostatus tbody tr{
	background-color: rgba(80,80,80,0.6);
}


body table#itemtablesmall tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtable tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtablenostatus tbody tr,
body table#itemtabletrippleicon tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmalltrippleicon tbody tr,
body table#mobileitem tbody tr{
	padding-bottom: 10px !important;
}

body table#itemtablesmall tbody tr td:first-child,
body table#itemtablesmalldoubleicon tbody tr td:first-child ,
body table#itemtable tr td:first-child,
body table#itemtablenostatus tr td:first-child,
body table#itemtabledoubleicon tr td:first-child ,
body table#itemtablenotype tr td:first-child ,
body table#itemtabletrippleicon tr td:first-child ,
body table#itemtablesmalltrippleicon tr td:first-child ,
body table#mobileitem tr td:first-child{
	display: block;
	height: 20px !important;
    	padding: 5px 0.7em;
    	border-style: none;
    	border-radius: 0px !important;
    	color: #0D161F;
    	background-color: #F1F5FA;
	font-family: Droid Sans,sans-serif !important;
	margin-top: -5px;
	margin-left: -5px;
	margin-right: -5px;
}

.navbar .nav .dropdown-menu {
    	border: 0px !important;
    	font-family: Open Sans,sans-serif;
    	padding: 2px;
    	background-image: none;
}

.nav > li > a > img {
  	display: none;
}

.navbar .nav .current_page_item > a, .navbar .nav .current_page_item > a:hover {
	color: #000;
}

.navbar .nav .current_page_item > a,
.navbar .nav .current_page_item > a:hover,
.navbar .nav .current_page_item > a:focus,
.navbar .nav li a:focus,
.navbar .nav li a:hover {

	color: #000;
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
  	color: #000;
}

.btnsmall {
	background: #169FE6 !important;
	color: #eee;
	font-family: Droid Sans,sans-serif !important;
	margin-top: 5px;
}

.btnsmall:hover {
	color: #eee;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.3);
	-moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.3);
	box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.3);
}

.selectorlevels {
	font-size: 1.1em;
	margin-top: 8px !important;
	text-align: center;
}

.selectorlevels .ui-button-text-only .ui-button-text {
	padding: .2em 0.7em;
}

#dashcontent .selectorlevels {
	font-size: 0.8em;
	margin-top: -5px !important;
}

.selectorlevels .ui-selectmenu-button.ui-widget {
	font-size: 1em;
	height: 22px;
}

.ui-menu .ui-menu-item,
.ui-selectmenu-button span.ui-selectmenu-text {
    text-align: center;
}

.dimslider {
	z-index:1;
	border-width: 1px;
	border-style: solid;
	border-color: #333 #333 #777 #333;
	border-radius: 25px;
	margin-top: 0px;
	margin-bottom: .5em;
	height: 13px;
	width: calc(98% - 70px) !important;
	position: relative;
	background-color: #8e8d8d;
	background: url('images/bg-track.png') repeat top left;
	box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5),
    				  0 1px 0 0px rgba(250, 250, 250, .5);
}

#dashcontent .dimslider {
        width: calc(98% - 62px) !important;
}

#dashcontent table#itemtablesmalldoubleicon .dimslider {
	width: calc(98% - 105px) !important;
}

table#itemtablesmalldoubleicon .dimslider,
table#itemtabledoubleicon .dimslider {
	width: calc(98% - 118px) !important;
	margin-top: 12px !important;
}

body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td + td{
	font-size: 85%;
	white-space: nowrap;
}

/* Mobile and Minimum Sizes */

@media (min-width: 768px) and (max-width: 979px) {
  	.nav > li > a > img {
  		display: inline;
 	}
	.navbar .nav {margin: 2px !important;}
	#dashcontent .selectorlevels {
		font-size: 0.8em;
		margin-top: -25px !important;
	}
	.selectorlevels .ui-selectmenu-button.ui-widget {
		font-size: 1em;
		height: 22px;
	}
	.container,
	.navbar-static-top .container,
	.navbar-fixed-top .container,
	.navbar-fixed-bottom .container {
	  	width: 100% !important;
	}
	[class*="span"] {
		margin-left: 9px;
	}
	.span4 {
    		width: 300px !important;
	}
}

@media (max-width: 767px) {
  	.nav > li > a > img {
  		display: inline;
 	}
	.navbar .nav { margin: 2px !important; }

}
	#dashcontent .selectorlevels {
		font-size: 0.8em;
		margin-top: -25px !important;
	}
	.selectorlevels .ui-selectmenu-button.ui-widget {
		font-size: 1em;
		height: 22px;
	}
	.btnstyle,
	.btnstylerev {
		width: 50px;
	}
}

.mobileitem tr:hover {
	background: 0 !important;
}

table.mobileitem {
	background-color: rgba(220, 220, 220, .8);
}

.mobileitem td:first-child, .mobileitem th:first-child {
    white-space: nowrap;
}

.events-editor {
	bottom: 20px;
}

.events-editor__tree {
	padding-top: 20px;
}

.events-editor-tree__file:link {
	line-height: normal;
}

Domoticz

Custom.css / Green, yellow and red...

Custom.css / Green, yellow and red...

Re: Custom.css / Green, yellow and red...

Re: Custom.css / Green, yellow and red...

Re: Custom.css / Green, yellow and red...

Re: Custom.css / Green, yellow and red...

Re: Custom.css / Green, yellow and red...