extensive rearrangement

Author: ctzsnooze

css/header_dialog.css

@@ -1,6 +1,6 @@
 /* Colums  START> */
 .cf_column {
-    min-height: 20px;
+    min-height: 18px;
     margin-bottom: 0;
 }
 
@@ -55,6 +55,7 @@
 input[type="number"]::-webkit-inner-spin-button {
     opacity: 1; /* required for chromium 33+ beta */
     margin-left: 5px;
+    margin-right: 5px;
 }
 
 .clear-both {
@@ -73,22 +74,23 @@ input[type="number"]::-webkit-inner-spin-button {
 .gui_box {
     border: 1px solid #ccc;
     border-radius: 4px;
-    background-color: #FFFFFF;
+    background-color: #ccc;
     float: left;
     width: calc(100% - 2px);
     margin-bottom: 10px;
     font-family: 'open_sansregular', Arial, serif;
 }
 
 .gui_box_titlebar {
-    background-color: #e4e4e4;
+    background-color: #808080;
     border-radius: 3px 3px 0 0;
-    font-size: 13px;
+    font-size: 14px;
     width: 100%;
     height: 27px;
     padding-bottom: 0;
     float: left;
-    margin-bottom: 7px;
+    color: white;
+    margin-bottom: 0px;
     font-family: 'open_sanssemibold', Arial, serif;
 }
 
@@ -101,10 +103,12 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .spacer_box {
-    padding: 10px;
-    margin-bottom: 3px;
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
 }
 
+/* main title for each div*/
 .spacer_box_title {
     padding-left: 10px;
     padding-right: 10px;
@@ -113,6 +117,7 @@ input[type="number"]::-webkit-inner-spin-button {
     float: left;
 }
 
+/* space around each div*/
 .spacer_left {
     padding-left: 15px;
     float: left;
@@ -133,39 +138,44 @@ input[type="number"]::-webkit-inner-spin-button {
     border-top-right-radius: 3px;
 }
 
+/* Parameter box titles */
+.header-dialog .parameter th {
+    background-color: #b0b0b0;
+    padding: 2px;
+    padding-left: 10px;
+    border-left: 0 solid #ccc;
+    font-weight: bold;
+    font-size: 14px;
+    color: #505050;
+    text-align: left;
+}
+
+/* Parameter box other lines */
 .header-dialog .parameter label {
-    background-color: #828885;
-    padding: 4px;
+    background-color: #d8d8d8;
+    padding: 0px;
+    margin: 0px;
     border-left: 0 solid #ccc;
-    border-bottom: 1px solid #ccc;
     font-weight: normal;
-    color: white;
-    text-align: left;
+    font-size: 13px;
+    color: #505050;
+    text-align: center;
     width:100%;
 }
 
-.header-dialog .parameter th {
-    background-color: #828885;
-    padding: 4px;
-    border-left: 0 solid #ccc;
-    border-bottom: 1px solid #ccc;
-    font-weight: bold;
-    color: white;
-    text-align: left;
+/* Parameter box other rows */
+.header-dialog .cf tr {
+    background-color: #d8d8d8;
+    text-align: center;
 }
 
 .header-dialog .modal-dialog {
     width:75%;
     min-width:954px;
 }
 
-.header-dialog .cf tr {
-    background-color: #DEDEDE;
-}
-
 .header-dialog .cf th {
     border-right: solid 1px silver;
-    height: 19px;
     font-weight: normal;
 }
 
@@ -184,17 +194,22 @@ input[type="number"]::-webkit-inner-spin-button {
     border-top-right-radius: 3px;
 }
 
+/* Box holding text inputs */
 .header-dialog .cf input {
-    margin: 4px;
     width: calc(100% - 10px);
     border: 1px solid silver;
     border-radius: 3px;
+    margin-left:5px;
 }
 
+/* Box holding drop down elements*/
 .header-dialog .cf select {
-    margin: 4px;
     width: calc(100% - 10px);
     border: 1px solid silver;
+    background-color: #FFFFFF;
+    color: black;
+    padding-top: 2px;
+    padding-bottom: 1px;
 }
 
 .header-dialog .parameter th:nth-child(2) {
@@ -214,7 +229,7 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .header-dialog table {
-    float: left;
+    float: center;
     margin: 0;
     border-collapse: collapse;
     width: calc(100% - 1px);
@@ -226,13 +241,11 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .header-dialog .parameter td+input {
     padding: 1px;
-    background-color:red;
     border-bottom: 0 solid #ccc;
 }
 
 .header-dialog table, .header-dialog table td {
     padding: 1px;
-    border-bottom: 0 solid #ccc;
 }
 
 .header-dialog table th {
@@ -245,7 +258,6 @@ input[type="number"]::-webkit-inner-spin-button {
     padding: 5px;
     text-align: left;
     border-right: 1px solid #ccc;
-    width: calc(100% - 1px);
 }
 
 .header-dialog .pid_titlebar th:first-child {
@@ -256,8 +268,9 @@ input[type="number"]::-webkit-inner-spin-button {
     border-right: none;
 }
 
+/* for labels in PID rows */
 .header-dialog table:not(.parameter) tr td:first-child {
-    text-align: left;
+    text-align: center;
     padding-left: 5px;
 }
 
@@ -270,25 +283,26 @@ input[type="number"]::-webkit-inner-spin-button {
     padding: 1px;
     width: 20%;
     border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
 }
 
 .header-dialog table tr td {
-    text-align: left;
-    padding-left: 0;
+    text-align: center;
+    padding-left: ;
 }
 
+/* numeric inputs in tables */
 .header-dialog table input {
     display: block;
     width: calc(100% - 4px);
-    height: 20px;
-    line-height: 20px;
     text-align: right;
     border: 0 solid #ccc;
     border-radius: 0;
+    background-color: #F5F5F5;
 }
 
 .header-dialog .missing {
-	background:rgba(255,0,0,0.2);
+    background:rgba(255,0,0,0.2);
 }
 
 .header-dialog .static-features span {
@@ -311,8 +325,8 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .header-dialog .controller select {
     width: calc(100% - 10px);
-    height: 20px;
-    line-height: 20px;
+    height: 18px;
+    line-height: 18px;
 }
 
 .header-dialog .profile {
@@ -325,7 +339,7 @@ input[type="number"]::-webkit-inner-spin-button {
 .header-dialog .profile .head {
     display: block;
     text-align: left;
-    line-height: 20px;
+    line-height: 18px;
     border-bottom: 1px solid #ccc;
     background-color: #828885;
     color: white;
@@ -337,8 +351,8 @@ input[type="number"]::-webkit-inner-spin-button {
 .header-dialog .profile select {
     width: 100%;
     padding-left: calc(100% - 35px);
-    height: 20px;
-    line-height: 20px;
+    height: 18px;
+    line-height: 18px;
 }
 
 .header-dialog .pid_tuning .name {
@@ -369,18 +383,18 @@ input[type="number"]::-webkit-inner-spin-button {
     width: 80%;
 }
 
+/* text in parameter boxes*/
 .header-dialog .parameter {
     float: right;
-    width: calc(100% - 2px);
-    margin-top: 10px;
     /* padding-left: 0; */
 }
 
+/*drop-down names display text*/
 html:not(.isCF) .cf-only,
 html:not(.isBF) .bf-only {
     /*display:none;*/
     /*visibility:hidden;*/
-    opacity:0.25;
+    /*opacity:0.25;*/
 }
 /*
 html:not(.isBF28) .bf-only {
@@ -399,9 +413,16 @@ html:not(.isBF28) .bf-only {
 }
 
 .header-dialog .spacer_box {
-    padding-bottom: 10px;
     float: left;
-    width: calc(100% - 5px);
+}
+
+.pid_labels th{
+    text-align: center;
+}
+
+.pid_labels th label{
+    font-weight: normal;
+    font-size: 12px;
 }
 
 .pid_mode {
@@ -414,7 +435,7 @@ html:not(.isBF28) .bf-only {
     padding: 8px 0 0 5px;
     font-size: 12px;
     border-bottom: 1px solid #ccc;
-    color: #828282;
+    color: #202020;
     font-family: 'open_sans', Arial, serif;
     background: #D6D6D6 linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%,
     rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%,
@@ -429,7 +450,8 @@ html:not(.isBF28) .bf-only {
     background-color: #828885;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
-    height: 20px;
+    height: 18px;
+    padding: 30px;
 }
 
 .pid_titlebar td:first-child {
@@ -474,6 +496,7 @@ html:not(.isBF28) .bf-only {
     border-bottom: 1px solid #ddd;
     width: 100%;
     float: left;
+
 }
 
 .header-dialog .number:last-child {
@@ -484,13 +507,12 @@ html:not(.isBF28) .bf-only {
 .header-dialog .number input {
     width: 50px;
     padding-left: 3px;
-    height: 20px;
-    line-height: 20px;
     text-align: left;
     border: 1px solid silver;
     border-radius: 3px;
     margin-right: 11px;
     font-weight: normal;
+
 }
 
 .header-dialog .other  table td,
@@ -509,8 +531,6 @@ html:not(.isBF28) .bf-only {
 .header-dialog .static-features label{
     /* width: 70px; */
     /* padding-left: 3px; */
-    height: 20px;
-    line-height: 20px;
     text-align: left;
     border: 0 solid silver;
     border-radius: 3px;
@@ -523,21 +543,21 @@ html:not(.isBF28) .bf-only {
 .header-dialog .features span,
 .header-dialog .static-features span {
     padding-right: 3px;
-    height: 20px;
-    line-height: 20px;
+    height: 18px;
+    line-height: 18px;
     text-align: left;
     border: 0 solid silver;
     border-radius: 3px;
     margin-right: 11px;
     font-weight: normal;
     font-size: 11px;
-}
+    }
 
 .header-dialog .gui_box span {
     font-style: normal;
     font-family: 'open_sansregular', Arial, sans-serif;
     line-height: 19px;
-    color: #7d7d7d;
+    color: #404040;
     font-size: 11px;
 }