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

Moderator: leecollings

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

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

Post by BarryT »

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 1889 times
Schermopname (15).png
Schermopname (15).png (35.75 KiB) Viewed 1889 times
Schermopname (14).png
Schermopname (14).png (128.44 KiB) Viewed 1889 times
Last edited by BarryT on Tuesday 04 December 2018 21:50, edited 1 time in total.
Raspberry / ESP Boards / Relais / Milight / Hue / OTGW / P1 / Xiaomi / RFXCom / RFLink / ZWave / Conbee II / Z2M / MQTT / A lot of scripts and many more..
Software: Linux, Android and Windows
Top
poudenes
Posts: 667
Joined: Wednesday 08 March 2017 9:42
Target OS: Linux
Domoticz version: 3.8993
Location: Amsterdam
Contact:
Contact poudenes

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

Post by poudenes »

Very Nice!!!!


Verzonden vanaf mijn iPhone met Tapatalk Pro
RPi3 B+, Debain Stretch, Domoticz, Homebridge, Dashticz, RFLink, Milight, Z-Wave, Fibaro, Nanoleaf, Nest, Harmony Hub, Now try to understand pass2php
Top
BarryT
Posts: 358
Joined: Tuesday 31 March 2015 22:06
Target OS: Linux
Domoticz version: 2024.3
Location: east netherlands
Contact:
Contact BarryT

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

Post by BarryT »

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
Schermopname (20).png (126.33 KiB) Viewed 1870 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 1869 times
Next step is the mobile page, it doesnt fit on all mobiles atm...
Raspberry / ESP Boards / Relais / Milight / Hue / OTGW / P1 / Xiaomi / RFXCom / RFLink / ZWave / Conbee II / Z2M / MQTT / A lot of scripts and many more..
Software: Linux, Android and Windows
Top
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:
Contact EdwinK

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

Post by EdwinK »

How/where do I put those?
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
Top
BarryT
Posts: 358
Joined: Tuesday 31 March 2015 22:06
Target OS: Linux
Domoticz version: 2024.3
Location: east netherlands
Contact:
Contact BarryT

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

Post by BarryT »

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.
Raspberry / ESP Boards / Relais / Milight / Hue / OTGW / P1 / Xiaomi / RFXCom / RFLink / ZWave / Conbee II / Z2M / MQTT / A lot of scripts and many more..
Software: Linux, Android and Windows
Top
BarryT
Posts: 358
Joined: Tuesday 31 March 2015 22:06
Target OS: Linux
Domoticz version: 2024.3
Location: east netherlands
Contact:
Contact BarryT

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

Post by BarryT »

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;
}
Raspberry / ESP Boards / Relais / Milight / Hue / OTGW / P1 / Xiaomi / RFXCom / RFLink / ZWave / Conbee II / Z2M / MQTT / A lot of scripts and many more..
Software: Linux, Android and Windows
Top
Post Reply

Return to “Design, usability and languages”

Who is online

Users browsing this forum: No registered users and 0 guests