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;
 }
 
@@ -73,22 +73,24 @@ 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-top: 10px;
     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,8 +103,9 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .spacer_box {
-    padding: 10px;
-    margin-bottom: 3px;
+    padding: 0px;
+    padding-left: 5px;
+    margin-bottom: 0px;
 }
 
 .spacer_box_title {
@@ -133,36 +136,42 @@ input[type="number"]::-webkit-inner-spin-button {
     border-top-right-radius: 3px;
 }
 
-.header-dialog .parameter label {
-    background-color: #828885;
+/* Parameter box titles */
+.header-dialog .parameter th {
+    background-color: #b0b0b0;
     padding: 4px;
     border-left: 0 solid #ccc;
     border-bottom: 1px solid #ccc;
-    font-weight: normal;
-    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    color: #505050;
     text-align: left;
-    width:100%;
 }
 
-.header-dialog .parameter th {
-    background-color: #828885;
-    padding: 4px;
+/* Parameter box other text and boxes */
+.header-dialog .parameter label {
+    background-color: #d8d8d8;
+    padding: 0px;
     border-left: 0 solid #ccc;
     border-bottom: 1px solid #ccc;
-    font-weight: bold;
-    color: white;
-    text-align: left;
+    font-weight: normal;
+    font-size: 13px;
+    color: #505050;
+    text-align: center;
+    width:100%;
+}
+
+/* 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;
@@ -190,11 +199,13 @@ input[type="number"]::-webkit-inner-spin-button {
     border: 1px solid silver;
     border-radius: 3px;
 }
-
+/* display  text for drop down elements*/
 .header-dialog .cf select {
     margin: 4px;
     width: calc(100% - 10px);
     border: 1px solid silver;
+    background-color: #FFFFFF;
+    color: black;
 }
 
 .header-dialog .parameter th:nth-child(2) {
@@ -226,7 +237,6 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .header-dialog .parameter td+input {
     padding: 1px;
-    background-color:red;
     border-bottom: 0 solid #ccc;
 }
 
@@ -256,8 +266,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;
 }
 
@@ -273,18 +284,20 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .header-dialog table tr td {
-    text-align: left;
+    text-align: center;
     padding-left: 0;
 }
 
+/* numeric inputs in tables */
 .header-dialog table input {
     display: block;
     width: calc(100% - 4px);
-    height: 20px;
-    line-height: 20px;
+    height: 18px;
+    line-height: 18px;
     text-align: right;
     border: 0 solid #ccc;
     border-radius: 0;
+    background-color: #F5F5F5;
 }
 
 .header-dialog .missing {
@@ -311,8 +324,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 +338,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 +350,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 {
@@ -368,19 +381,20 @@ input[type="number"]::-webkit-inner-spin-button {
 .header-dialog .cbox-description {
     width: 80%;
 }
-
+/* color = 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 {
@@ -404,6 +418,15 @@ html:not(.isBF28) .bf-only {
     width: calc(100% - 5px);
 }
 
+.pid_labels th{
+    text-align: center;
+}
+
+.pid_labels th label{
+    font-weight: normal;
+    font-size: 12px;
+}
+
 .pid_mode {
     width: 100%;
     height: 25px;
@@ -414,7 +437,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 +452,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 {
@@ -484,8 +508,8 @@ html:not(.isBF28) .bf-only {
 .header-dialog .number input {
     width: 50px;
     padding-left: 3px;
-    height: 20px;
-    line-height: 20px;
+    height: 18px;
+    line-height: 18px;
     text-align: left;
     border: 1px solid silver;
     border-radius: 3px;
@@ -509,8 +533,8 @@ html:not(.isBF28) .bf-only {
 .header-dialog .static-features label{
     /* width: 70px; */
     /* padding-left: 3px; */
-    height: 20px;
-    line-height: 20px;
+    height: 18px;
+    line-height: 18px;
     text-align: left;
     border: 0 solid silver;
     border-radius: 3px;
@@ -523,8 +547,8 @@ 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;
@@ -537,7 +561,7 @@ html:not(.isBF28) .bf-only {
     font-style: normal;
     font-family: 'open_sansregular', Arial, sans-serif;
     line-height: 19px;
-    color: #7d7d7d;
+    color: #404040;
     font-size: 11px;
 }