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

Post Reply
BarryT
Posts: 300
Joined: Tuesday 31 March 2015 22:06
Target OS: Linux
Domoticz version: beta
Location: east netherlands
Contact:

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

Post by BarryT » Tuesday 04 December 2018 20: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;
}
Attachments
Schermopname (18).png
Schermopname (18).png (118.25 KiB) Viewed 179 times
Schermopname (15).png
Schermopname (15).png (35.75 KiB) Viewed 179 times
Schermopname (14).png
Schermopname (14).png (128.44 KiB) Viewed 179 times
Last edited by BarryT on Tuesday 04 December 2018 22:50, edited 1 time in total.
6x Raspberry 3
2x VPS Server
2x Active VPN
A lot of scripts, switches and sensors :)

poudenes
Posts: 624
Joined: Wednesday 08 March 2017 10:42
Target OS: Linux
Domoticz version: 3.8993
Location: Amsterdam
Contact:

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

Post by poudenes » Tuesday 04 December 2018 22:33

Very Nice!!!!


Verzonden vanaf mijn iPhone met Tapatalk Pro
RPi3 with OSMC - RPi3 with Domoticz - Dashticz - MiLight - Nanolead Aurora - KaKu - Logitech Hamony - Nest - RFLink

BarryT
Posts: 300
Joined: Tuesday 31 March 2015 22:06
Target OS: Linux
Domoticz version: beta
Location: east netherlands
Contact:

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

Post by BarryT » Tuesday 04 December 2018 22:53

poudenes wrote:
Tuesday 04 December 2018 22:33
Very Nice!!!!
Verzonden vanaf mijn iPhone met Tapatalk Pro
Thanks :)
See the red, not recieving sensors:
Schermopname (20).png
Schermopname (20).png (126.33 KiB) Viewed 160 times
Also made an edit as well, forgot to add the (white) text upper the buttons >
Schermopname (22).png
Schermopname (22).png (125.28 KiB) Viewed 159 times
Next step is the mobile page, it doesnt fit on all mobiles atm...
6x Raspberry 3
2x VPS Server
2x Active VPN
A lot of scripts, switches and sensors :)

User avatar
EdwinK
Posts: 1406
Joined: Sunday 22 January 2017 22:46
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Rhoon
Contact:

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

Post by EdwinK » Thursday 06 December 2018 10:54

How/where do I put those?
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | RFxcom | Dashticz V2

BarryT
Posts: 300
Joined: Tuesday 31 March 2015 22:06
Target OS: Linux
Domoticz version: beta
Location: east netherlands
Contact:

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

Post by BarryT » Thursday 06 December 2018 16:59

EdwinK wrote:
Thursday 06 December 2018 10: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.
6x Raspberry 3
2x VPS Server
2x Active VPN
A lot of scripts, switches and sensors :)

BarryT
Posts: 300
Joined: Tuesday 31 March 2015 22:06
Target OS: Linux
Domoticz version: beta
Location: east netherlands
Contact:

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

Post by BarryT » Thursday 06 December 2018 18: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;
}
6x Raspberry 3
2x VPS Server
2x Active VPN
A lot of scripts, switches and sensors :)

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest