[erp5_web_renderjs_ui] Improve the text contrast

Make the label, listbox, panel more readable.

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -452,7 +452,7 @@ img {
 * Gadget: panel
 **********************************************/
 div[data-gadget-scope='panel'] {
-  background-color: #444444;
+  background-color: #393939;
   color: #FFFFFF;
   width: 180pt;
   min-height: 100%;
@@ -494,7 +494,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a {
   overflow: hidden;
   text-indent: -9999px;
   white-space: nowrap;
-  background-color: #444444;
+  background-color: #393939;
   display: block;
   line-height: 30pt;
   color: #FFFFFF;
@@ -519,7 +519,7 @@ div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] button
 }
 div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] input[type="search"] {
   color: #FFFFFF !important;
-  background-color: #777777 !important;
+  background-color: #767676 !important;
 }
 div[data-gadget-scope='panel'] img {
   text-align: left;
@@ -557,13 +557,13 @@ div[data-gadget-scope='panel'] ul li a.active {
 div[data-gadget-scope='panel'] ul li a:hover,
 div[data-gadget-scope='panel'] ul li a:active {
   color: #FFFFFF;
-  background-color: #2b2b2b;
+  background-color: #1F1F1F;
 }
 div[data-gadget-scope='panel'] ul li a::before {
   width: 24pt;
 }
 div[data-gadget-scope='panel'] dl {
-  background-color: #777777;
+  background-color: #767676;
   color: #1F1F1F;
   transform-origin: 50% 0;
   transform: scaleY(0);
@@ -578,6 +578,7 @@ div[data-gadget-scope='panel'] dl dt {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  text-transform: uppercase;
 }
 div[data-gadget-scope='panel'] dl dt::before {
   width: 24pt;
@@ -1011,7 +1012,7 @@ div[data-gadget-scope='header'] .ui-header ul {
   padding: 6pt;
   margin-top: 30pt;
   margin-right: 12pt;
-  background-color: #777777;
+  background-color: #767676;
   color: #FFFFFF;
   border-radius: 0.325em;
   border-width: 1px;
@@ -1020,10 +1021,10 @@ div[data-gadget-scope='header'] .ui-header ul {
 }
 .gadget-content button[name='action_update']:hover,
 .gadget-content button[name='action_update']:focus {
-  background-color: #919191;
+  background-color: #909090;
 }
 .gadget-content button[name='action_update']:active {
-  background-color: #aaaaaa;
+  background-color: #a9a9a9;
 }
 @media not screen and (max-width: 85em) {
   div[data-role='page']:not(.desktop-panel-hidden) .gadget-content {
@@ -1144,7 +1145,7 @@ div[data-gadget-scope='header'] .ui-header ul {
   }
 }
 .gadget-content .ui-field-contain > label {
-  color: #777777;
+  color: #767676;
 }
 .gadget-content .required > .ui-field-contain > label {
   font-weight: bold;
@@ -1251,7 +1252,7 @@ div[data-gadget-scope='header'] .ui-header ul {
 }
 .relation-input ul li {
   cursor: pointer;
-  background-color: #444444;
+  background-color: #393939;
   color: #FFFFFF;
   padding: 3pt;
   padding-left: 6pt;
@@ -1265,7 +1266,7 @@ div[data-gadget-scope='header'] .ui-header ul {
 }
 .relation-input ul li:hover,
 .relation-input ul li:active {
-  background-color: #2b2b2b;
+  background-color: #1F1F1F;
 }
 /**********************************************
 * Gadget: datetime field
@@ -1326,11 +1327,11 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
 }
 @media not screen and (min-width: 45em) {
   .document_table .ui-table-header {
-    border-bottom: 2px solid #0E81C2;
+    border-bottom: 2px solid #085078;
   }
 }
 .document_table .ui-table-header h1 {
-  color: #777777;
+  color: #767676;
   flex: 2;
   align-self: flex-end;
 }
@@ -1371,7 +1372,7 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
 }
 .document_table table thead,
 .document_table table tfoot {
-  background-color: #0E81C2;
+  background-color: #085078;
   color: #FFFFFF;
 }
 .document_table table thead a,
@@ -1467,7 +1468,7 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
   .document_table table tbody tr td:first-child ~ td a,
   .document_table table tbody tr th:first-child ~ td a {
     pointer-events: none;
-    color: #777777;
+    color: #767676;
   }
   .document_table table tbody tr td:first-child ~ th:not(:last-child) a:not(:empty):after,
   .document_table table tbody tr th:first-child ~ th:not(:last-child) a:not(:empty):after,

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml

@@ -242,7 +242,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>965.14626.55645.31283</string> </value>
+                <value> <string>965.19250.34599.40550</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1517562628.45</float>
+                        <float>1517843643.77</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -7,7 +7,7 @@
 @white: #FFFFFF;
 @txtgreen: #22CC22;
 @txtsubgrey: #575757;
-@grey: #777777;
+@grey: #767676;
 @backgroundgreen: #37A419;
 
 
@@ -31,8 +31,8 @@
 @colorfocus: #3388cc;
 @colorblocklinkbackground: #e0e0e0;
 
-@panelbackgroundcolor: #444444;
-@paneldarkerbackgroundcolor: darken(@panelbackgroundcolor, 10%);
+@paneldarkerbackgroundcolor: @black;
+@panelbackgroundcolor: lighten(@paneldarkerbackgroundcolor, 10%);
 
 @panelcontextuallinkcolor: @colorforeground;
 @panelcontextuallinkcolorbackground: @colorbackground;
@@ -718,6 +718,7 @@ div[data-gadget-scope='panel'] {
 
     dt {
       .alignwithicon();
+      text-transform: uppercase;
     }
 
     dd {
@@ -1545,7 +1546,7 @@ div[data-gadget-scope='erp5_searchfield'] {
     padding-top: @half-margin-size;
     padding-bottom: @half-margin-size;
     @media @smartphone {
-      border-bottom: 2px solid @colorsubheaderbackground;
+      border-bottom: 2px solid @colorheaderbackground;
     }
 
     h1 {
@@ -1590,7 +1591,7 @@ div[data-gadget-scope='erp5_searchfield'] {
     }
 
     thead, tfoot {
-      background-color: @colorsubheaderbackground;
+      background-color: @colorheaderbackground;
       color: @white;
 
       a {