Merge pull request #2 from SEPIA-Framework/dev

New smart home section and layout updates.

Author: fquirin

admin-web-tools/css/shared.css

@@ -5,8 +5,8 @@
 	-webkit-box-sizing: border-box; 
 }
 body {
-	background-color: #FFF;
-	color: #16ABC3;
+	background-color: #000;
+	color: #FFF;
 }
 label {
 	display: inline-block;
@@ -17,6 +17,15 @@ input,
 select {
 	display: inline-block;
     min-width: 192px;
+    border: 0;
+    padding: 4px 6px;
+    margin: 1px;
+}
+select {
+	padding-left: 2px;
+}
+input {
+	padding: 5px 6px;
 }
 input[type="checkbox"] {
 	min-width: 42px;
@@ -30,11 +39,14 @@ td {
 	min-width: 128px;
 	text-align: left;
 }
+h2 {
+	margin: 40px 0;
+}
 h3 {
 	margin: 16px 0 0 0;
 }
 #main_win {
-	border: 1px solid #9ad0df;
+	border: 1px solid #fff;
 	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
 	border-radius: 5px;
@@ -53,6 +65,17 @@ h3 {
 	width: 100%;
 	height: 100%;
 }
+#pages_menu {
+	display: flex;
+    flex-wrap: wrap;
+	padding: 8px;
+}
+#pages_menu hr {
+	width: 100%;
+    height: 0;
+    margin: 0;
+    border: 0;
+}
 .page {
 	display: none;
 	width: 100%;
@@ -64,10 +87,16 @@ h3 {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-	padding-bottom: 24px;
+	padding: 24px 0;
+}
+.page_content hr {
+	width: 100%;
+    height: 21px;
+    margin: 0;
+    border: 0;
 }
 #show_result {
-	border: 1px solid #9ad0df;
+	border: 1px solid #fff;
 	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
 	border-radius: 5px;
@@ -77,36 +106,52 @@ h3 {
 }
 
 .menu_button {
-	background: #16ABC3;
-	color: #fff;
-    border: 0;
-    border-radius: 0px;
-    padding: 4px 12px;
+	background: #000;
+    color: #fff;
+    border: 1px solid;
+	border-radius: 0px;
+    padding: 6px 16px;
     margin: 2px;
     cursor: pointer;
+    flex-grow: 1;
 }
 .menu_button:hover {
-	background: #888;
+	background: #16ABC3;
 	color: #fff;
 }
 .menu_button.active {
-	box-shadow: 0 0 0 2px rgba(22, 171, 195, 0.5);
+	/*box-shadow: 0 0 0 2px rgba(22, 171, 195, 0.85);*/
+	background: #16ABC3;
+	color: #fff;
 }
 .interface_button {
 	background: #ceff1a;
     color: #000;
-    border: 0;
-    border-radius: 3px;
-    padding: 4px 12px;
+    border: 1px solid #ceff1a;
+    border-radius: 0px;
+    padding: 5px 15px;
     margin: 2px;
     cursor: pointer;
 }
 .interface_button:hover {
 	background: #000;
 	color: #ceff1a;
+	border: 1px solid white;
+}
+.interface_button_box {
+	display: flex; 
+	flex-wrap: wrap; 
+	padding: 8px;
+	justify-content: center;
+}
+.interface_button_box hr {
+	width: 100%;
+	height: 0px;
+	border: 0;
+	margin: 2px;
 }
 
-#pwd-security-indicator {
+.input-inline-indicator {
     position: absolute;
     top: 4px;
 	right: 4px;
@@ -115,9 +160,9 @@ h3 {
     border-radius: 6px;
     background: #f00;
 }
-#pwd-security-indicator.secure {
+.input-inline-indicator.secure {
 	background: #0f0;
 }
-#pwd-security-indicator.inactive {
+.input-inline-indicator.inactive {
 	background: #fff;
 }

admin-web-tools/css/smart-home.css

@@ -0,0 +1,23 @@
+#smarthome-devices-list {
+    width: 100%;
+	padding: 0 16px;
+	display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.smarthome-item {
+	border-radius: 0px;
+	background: #eee;
+    color: #000;
+	width: 100%;
+    margin: 2px 0px;
+}
+.smarthome-item-title {
+	background: #16ABC3;
+    color: #fff;
+	padding: 8px;
+}
+.smarthome-item-body {
+	padding: 8px;
+}