web client: updated css

- make the tabs look like tabs
- make status bar color change only on left
- made a colored dot in modules menu as status indicator

1 files changed, 78 insertions, 12 deletions

diff --git a/web/client.css b/web/client.css
index f24d6d2..4e104e4 100644
--- a/web/client.css
+++ b/web/client.css
@@ -4,7 +4,19 @@
  */
 
 
-#status { height: 40px; }
+body {
+    margin: 0;
+    padding: 0;
+    font-family: sans;
+}
+
+#status {
+    background-color: #cde;
+    height: 2em;
+    padding: 10px;
+    margin: 0;
+    font-size: 75%;
+}
 
 #status p {
     position: absolute;
@@ -14,39 +26,93 @@
 
 #status div {
     position: absolute;
-    top: 15px;
+    top: 0.5em;
     right: 15px;
 }
 
+#status input {
+    font-size: 100%;
+}
+
+#status.changed {
+    border-style: none none none solid;
+    border-width: 3px;
+    border-color: #7f7;
+}
+
+#status.invalid {
+    border-style: none none none solid;
+    border-width: 3px;
+    border-color: #f77;
+}
 .hidden { display: none; }
 
 
 .invalid {
-    background-color: red;
-    color: white;
+    background-color: #f77;
 }
 
 .changed {
-    background-color: lime;
-    color: black;
+    background-color: #7f7;
 }
 
 .current {
-    background-color: grey;
-    color: white;
+    background-color: #ccc;
 }
 
+#modules li.invalid {
+    list-style-type: disc;
+    color: #f77;
+    background-color: inherit;
+}
 
-#modules { position: absolute; }
+#modules li.changed {
+    list-style-type: disc;
+    color: #7f7;
+    background-color: inherit;
+}
 
-#modules li { list-style-type: none; }
+#modules {
+    position: absolute;
+    border-right: solid;
+    border-color: #ccc;
+    width: 148px;
+    margin: 1.8em 0 0 0;
+    padding: 10px 0px 10px 10px;
+}
 
+#modules li {
+    list-style-type: none;
+    padding: 3px 0px 3px 3px;
+    margin: 0 0 0 6px;
+}
 
-#tabs, #content { margin-left: 170px; }
+#modules a, #tabs a {
+    text-decoration: none;
+    color: black;
+}
 
-#tabs { padding: 0; }
+#modules a:hover, #tabs a:hover {
+    text-decoration: underline;
+    color: blue;
+}
+
+#tabs, #content {
+    margin: 0 0 0 158px;
+    padding: 0 0 0 15px;
+}
+
+#tabs {
+    border-bottom-style: solid;
+    border-color: #ccc;
+    height: 1.8em;
+}
 
 #tabs li {
     display: inline-block;
     padding: 5px;
 }
+
+#content {
+    padding: 10px;
+}