Mercurial > mbsePi-apps / file diff

--- a/www-thermferm/css/style.css	Tue Jul 29 21:33:38 2014 +0200
+++ b/www-thermferm/css/style.css	Wed Jul 30 15:26:29 2014 +0200
@@ -143,82 +143,145 @@
     float: left;
 }
 
-#fermentor_panel {
-    width: 240px;
-    height: 377px;
+/*
+ *  +-------------panel_top--------------+
+ *  |+----------------------++----------+|
+ *  ||                      ||          ||
+ *  ||       selector       || powerled ||
+ *  ||                      ||          ||
+ *  |+----------------------++----------+|
+ *  +------------------------------------+
+ *  +-----------panel_display------------+
+ *  |+----------++----------++----------+|
+ *  || display1 || display2 || display3 ||
+ *  |+----------++----------++----------+|
+ *  +------------------------------------+
+ *  +-----------panel_control------------+
+ *  |+----------++----------++----------+|
+ *  ||   led1   ||   led2   ||   led3   ||
+ *  |+----------++----------++----------+|
+ *  |+----------++----------++----------+|
+ *  || switch1  || switch2  || switch3  ||
+ *  |+----------++----------++----------+|
+ *  +------------------------------------+
+ */
+
+#fermentor_panel_top {
+    width: 236px;
+    height: 143px;
     float: right;
-    background-color: #f0f0f0;
+    background-color: #bbb;
+    border: 2px solid;
+    border-color: #888;
+    border-radius: 5px 5px 5px 5px;
+    margin-bottom: 5px;
 }
 
 #fermentor_selector {
-    width: 160px;
-    height: 160px;
+    width: 158px;
+    height: 156px;
     float: left;
 }
 
 #fermentor_powerled {
-    width: 80px;
-    height: 160px;
+    width: 78px;
+    height: 56px;
     float: left;
+    text-align: center;
+    margin-top: 10px;
+}
+
+
+#fermentor_panel_display {
+    width: 236px;
+    height: 50px;
+    float: right;
+    background-color: #bbb;
+    border: 2px solid;
+    border-color: #888;
+    border-radius: 5px 5px 5px 5px;
+    margin-bottom: 5px;
 }
 
 #fermentor_display1 {
-    width: 80px;
-    height: 40px;
+    width: 79px;
+    height: 46px;
     float: left;
+    text-align: center;
+    margin-top: 7px;
 }
 
 #fermentor_display2 {
-    width: 80px;
-    height: 40px;
+    width: 78px;
+    height: 46px;
     float: left;
+    text-align: center;
+    margin-top: 7px;
 }
 
 #fermentor_display3 {
-    width: 80px;
-    height: 40px;
+    width: 79px;
+    height: 46px;
     float: left;
+    text-align: center;
+    margin-top: 7px;
+}
+
+#fermentor_panel_control {
+    width: 236px;
+    height: 136px;
+    float: right;
+    background-color: #bbb;
+    border: 2px solid;
+    border-color: #888;
+    border-radius: 5px 5px 5px 5px;
 }
 
 #fermentor_led1 {
-    width: 80px;
-    height: 40px;
+    width: 79px;
+    height: 30px;
     float: left;
+    text-align: center;
+    margin-top: 10px;
 }
 
 #fermentor_led2 {
-    width: 80px;
-    height: 40px;
+    width: 78px;
+    height: 30px;
     float: left;
+    text-align: center;
+    margin-top: 10px;
 }
 
 #fermentor_led3 {
-    width: 80px;
-    height: 40px;
+    width: 79px;
+    height: 30px;
     float: left;
+    text-align: center;
+    margin-top: 10px;
 }
 
 #fermentor_toggle1 {
-    width: 80px;
+    width: 79px;
     height: 90px;
     float: left;
+    text-align: center;
+    margin-top: 10px;
 }
 
 #fermentor_toggle2 {
-    width: 80px;
+    width: 78px;
     height: 90px;
     float: left;
+    text-align: center;
+    margin-top: 10px;
 }
 
 #fermentor_toggle3 {
-    width: 80px;
+    width: 79px;
     height: 90px;
     float: left;
+    text-align: center;
+    margin-top: 10px;
 }
 
-#fermentor_control {
-    width: 240px;
-    height: 40px;
-    float: left;
-}
-