[erp5_web_renderjs_ui] Improve main page UI

Reduce field padding.
Move home link.

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.css

@@ -265,7 +265,8 @@ label {
   display: block;
   color: #777777;
 }
-input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]) {
+input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]),
+textarea {
   width: 100%;
   margin: 0;
   padding: 0.4em;
@@ -283,10 +284,13 @@ input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio])
   outline-offset: 0;
 }
 input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):active,
-input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus {
+textarea:active,
+input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus,
+textarea:focus {
   outline-offset: 0;
 }
-input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus {
+input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus,
+textarea:focus {
   -webkit-box-shadow: 0 0 12px 	#3388cc;
   -moz-box-shadow: 0 0 12px 		#3388cc;
   box-shadow: 0 0 12px 			#3388cc;
@@ -333,11 +337,13 @@ textarea {
   height: 15em;
   width: 100%;
   margin: 0;
-  padding: 0.5em;
-  border: none;
-  background-color: #FFFFFF;
-  color: #1F1F1F;
-  border-radius: 0;
+  /*
+   padding: 0.5em;
+   border: none;
+   background-color: @colortextboxbackground;
+   color: @colortextboxforeground;
+   border-radius: 0;
+*/
   font-family: "Courier New", Courier, monospace;
 }
 ::-webkit-input-placeholder {
@@ -431,23 +437,27 @@ div[data-gadget-scope='panel'] {
   }
 }
 div[data-gadget-scope='panel'] div[data-role="header"] {
-  background-color: #252525;
-  color: #fff;
   display: flex;
-  justify-content: space-between;
-  border-color: rgba(255, 255, 255, 0.3);
-  border-width: 0 0 1px 0;
-  border-style: solid;
-}
-div[data-gadget-scope='panel'] div[data-role="header"] > div:first-of-type {
-  border-color: rgba(255, 255, 255, 0.3);
-  border-style: solid;
-  border-width: 0 1px 0 0;
+  justify-content: flex-start;
+  /*
+    > div {
+      &:first-of-type {
+        border-color: rgba(255,255,255, .3);
+        border-style: solid;
+        border-width: 0 1px 0 0;
+      }
+      &:last-of-type {
+        border-color: rgba(255,255,255, .3);
+        border-style: solid;
+        border-width: 0 0 0 1px;
+      }
+    }
+*/
 }
-div[data-gadget-scope='panel'] div[data-role="header"] > div:last-of-type {
-  border-color: rgba(255, 255, 255, 0.3);
-  border-style: solid;
-  border-width: 0 0 0 1px;
+div[data-gadget-scope='panel'] div[data-role="header"] .panel_img {
+  text-align: center;
+  flex: 1;
+  height: 2.6em;
 }
 div[data-gadget-scope='panel'] div[data-role="header"] button,
 div[data-gadget-scope='panel'] div[data-role="header"] a {
@@ -455,7 +465,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a {
   overflow: hidden;
   text-indent: -9999px;
   white-space: nowrap;
-  background-color: #252525;
+  background-color: #444444;
   display: block;
   line-height: 2.6em;
   color: #FFFFFF;
@@ -481,8 +491,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
 }
 div[data-gadget-scope='panel'] img {
   text-align: left;
-  line-height: 2.6em;
-  max-height: 2.6em;
+  height: 100%;
 }
 div[data-gadget-scope='panel'] ul {
   margin-top: 2.6em;
@@ -495,6 +504,7 @@ div[data-gadget-scope='panel'] ul li a {
         border-style: solid;
 */
   padding: .4em;
+  padding-left: 1em;
   display: block;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -595,6 +605,14 @@ div[data-gadget-scope='header'] .ui-header a:active {
   background: -o-linear-gradient(bottom, #85D8CE, #0E81C2);
   background: -ms-linear-gradient(bottom, #85D8CE, #0E81C2);
 }
+div[data-gadget-scope='header'] .ui-header > .ui-btn-left button,
+div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
+  border-right: 1px solid rgba(255, 255, 255, 0.55);
+}
+div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
+div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
+  border-left: 1px solid rgba(255, 255, 255, 0.55);
+}
 div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
 div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
   display: block;
@@ -635,8 +653,6 @@ div[data-gadget-scope='header'] .ui-header h1 {
   line-height: 2.6em;
   flex: 1;
   color: #FFFFFF;
-  border-left: 1px solid rgba(255, 255, 255, 0.55);
-  border-right: 1px solid rgba(255, 255, 255, 0.55);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -813,8 +829,7 @@ div[data-gadget-scope='header'] .ui-header ul {
   }
 }
 .gadget-content .ui-field-contain {
-  margin-bottom: 2em;
-  padding: 0.8em 0;
+  padding: 0.5em 0;
 }
 .gadget-content .ui-field-contain div {
   width: 100%;
@@ -824,8 +839,6 @@ div[data-gadget-scope='header'] .ui-header ul {
 }
 .gadget-content .ui-content-title {
   font-size: 150%;
-  margin-top: 1em;
-  margin-bottom: 1em;
 }
 .gadget-content ul.document-listview li {
   border-color: rgba(0, 0, 0, 0.3);
@@ -871,17 +884,24 @@ div[data-gadget-scope='header'] .ui-header ul {
   border-bottom-style: solid;
 }
 @media only screen and (min-width: 62em) {
-  .gadget-content .left,
-  .gadget-content .right,
-  .gadget-content .center,
-  .gadget-content .bottom {
-    padding: 0 2%;
+  .gadget-content {
+    /*
+    .left, .right, .center, .bottom {
+      padding: 0 2%;
+    }
+*/
   }
   .gadget-content .left,
   .gadget-content .right {
     vertical-align: top;
     display: inline-block;
-    width: 45%;
+    width: 50%;
+  }
+  .gadget-content .left {
+    padding-right: 2%;
+  }
+  .gadget-content .right {
+    padding-left: 2%;
   }
 }
 @media only screen and (min-width: 28em) and (max-width: 62em) {
@@ -905,12 +925,8 @@ div[data-gadget-scope='header'] .ui-header ul {
   }
 }
 @media only screen and (max-width: 28em) {
-  .gadget-content {
-    /* make sure there is a bottom border */
-  }
   .gadget-content .ui-field-contain {
     padding: 0.8em 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   }
 }
 .gadget-content form label span {
@@ -933,7 +949,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
   border-bottom: 2px solid rgba(0, 0, 0, 0.14902);
 }
 .document_table .ui-table-header h1 {
-  opacity: .3;
+  color: #777777;
   flex: 2;
   align-self: flex-end;
 }
@@ -976,7 +992,9 @@ div[data-gadget-scope='erp5_searchfield'] button {
   background-color: #eeeeee;
   background-color: rgba(0, 0, 0, 0.04);
   color: #777777;
-  text-align: center;
+}
+.document_table table thead tr th {
+  padding: 0.4em 0.25em;
 }
 @media only screen and (max-width: 28em) {
   .document_table table thead {
@@ -1024,9 +1042,15 @@ div[data-gadget-scope='erp5_searchfield'] button {
   background: #e4ebf1;
 }
 @media only screen and (min-width: 62em), only screen and (min-width: 28em) and (max-width: 62em) {
-  .document_table table tbody td:not(:last-child),
-  .document_table table tbody th:not(:last-child) {
-    border-right: 1px solid #DDD;
+  .document_table table tbody {
+    /*
+        // Column border
+        td, th {
+          &:not(:last-child) {
+            border-right: 1px solid #DDD;
+          }
+        }
+        */
   }
   .document_table table tbody a {
     display: block;

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.12740.62273.29252</string> </value>
+                <value> <string>952.14349.56496.11042</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1467271547.98</float>
+                        <float>1467291947.42</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_html.html

@@ -18,19 +18,22 @@
             <button data-i18n="Close" class="ui-btn ui-btn-icon-notext ui-icon-delete">Close</button>
           </div>
         </div>
+        <div class="panel_img">
         <img class="ui-title" alt="ERP5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJcAAAA/CAMAAADaDqrIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMEM5NUE4MzQ5NjQxMUUzOUZEQUU2NUY1RTI1RjdCQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMEM5NUE4NDQ5NjQxMUUzOUZEQUU2NUY1RTI1RjdCQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAwQzk1QTgxNDk2NDExRTM5RkRBRTY1RjVFMjVGN0JCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAwQzk1QTgyNDk2NDExRTM5RkRBRTY1RjVFMjVGN0JCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+J9MJsAAAAwBQTFRF///////M//+Z//9m//8z//8A/8z//8zM/8yZ/8xm/8wz/8wA/5n//5nM/5mZ/5lm/5kz/5kA/2b//2bM/2aZ/2Zm/2Yz/2YA/zP//zPM/zOZ/zNm/zMz/zMA/wD//wDM/wCZ/wBm/wAz/wAAzP//zP/MzP+ZzP9mzP8zzP8AzMz/zMzMzMyZzMxmzMwzzMwAzJn/zJnMzJmZzJlmzJkzzJkAzGb/zGbMzGaZzGZmzGYzzGYAzDP/zDPMzDOZzDNmzDMzzDMAzAD/zADMzACZzABmzAAzzAAAmf//mf/Mmf+Zmf9mmf8zmf8Amcz/mczMmcyZmcxmmcwzmcwAmZn/mZnMmZmZmZlmmZkzmZkAmWb/mWbMmWaZmWZmmWYzmWYAmTP/mTPMmTOZmTNmmTMzmTMAmQD/mQDMmQCZmQBmmQAzmQAAZv//Zv/MZv+ZZv9mZv8zZv8AZsz/ZszMZsyZZsxmZswzZswAZpn/ZpnMZpmZZplmZpkzZpkAZmb/ZmbMZmaZZmZmZmYzZmYAZjP/ZjPMZjOZZjNmZjMzZjMAZgD/ZgDMZgCZZgBmZgAzZgAAM///M//MM/+ZM/9mM/8zM/8AM8z/M8zMM8yZM8xmM8wzM8wAM5n/M5nMM5mZM5lmM5kzM5kAM2b/M2bMM2aZM2ZmM2YzM2YAMzP/MzPMMzOZMzNmMzMzMzMAMwD/MwDMMwCZMwBmMwAzMwAAAP//AP/MAP+ZAP9mAP8zAP8AAMz/AMzMAMyZAMxmAMwzAMwAAJn/AJnMAJmZAJlmAJkzAJkAAGb/AGbMAGaZAGZmAGYzAGYAADP/ADPMADOZADNmADMzADMAAAD/AADMAACZAABmAAAzAAAAHHa7K3/AOojESZHJWZvNaKTSd63Whrbblb/fpMjks9Howtrt4e320uTx8Pb6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdfKHSQAAAOh0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ALItoLoAAAJkSURBVHja7NlZsqsgEABQ979C5kGGddxo4os0Q8BAynoFn0nUU23TNGRB9xzLdE3XdE3XdP2fLnIzF2VSrsYvC72HizAh9eZ5DVuOl15S4/jWwC+kDC8HPzCSJVHcRY8QXV2PwQuujUYTsYrvYlBv1yKLrsXHsPghnvR3Lazoip/JKuwpF8sm6/bY01Ow9CBlTXi53PNoRcUktEZT1NV1PIPnXAjtMJIMlzerFIzU1dVWF7aPj3Tetae4gjdxktG2et/qQjJ4kZFrv6ED4bK4eR1qduHzvEi4+PbGwD0EGu9CQQLFrv1F4jBc6BcuW3YhkPiPX1hOfxQvnHfh0HVMRqc4HuqiQf5k3mO6dq1s8Hx0H/Le5kq9YaNcxAcrZLpOvAv+ClcgNcZFtnrucd5Fwx4mXj0drnbBYXMuJmFDAV3Uhm4qlbHh3ddOrmholHNxFTVC+xTl2mf6pI4uVe4LwSp0DPGOmh/hAnM94bKZjkHlWuiLeV+cTab4luMKk82wy/Px2fLJskvKUk03hRf9RZ0wiYiZ4uVwVwTb9E71y0XboTYXGuTaa33Y47W5zBjXM3P11y7TfR2ycFdxyaW7uwSc5m0un9ix91m3TWJfW+1ijfW+wcVAfjS5dOP62LyvZZdcLHnA1MkFAtbgwq+Vm47po8OA1buwyy/a1ec5urzveAes2sV8kfW963mFaHNhlT0b6+Yi5+StchH1CtaK0ThXELDPLiyOPZHldzm/J1z9O/B14g7/K+DtkP7U8ivSeD4xaPCTSQvy+YIfubZWzRgtRe1iMP+3mq7pmq7p6jv+BBgAPrgi/TzwWzkAAAAASUVORK5CYII="/>
-        <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
+        </div>
+        <!--div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
           <div class="ui-controlgroup-controls">
             <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-home" data-i18n="Home">Home</a>
           </div>
-        </div>
+        </div-->
       </div>
     </script>
 
     <script id="panel-template-body" type="text/x-handlebars-template">
       <div class="ui-content">
         <ul data-role="listview" class="ui-listview" data-enhanced="true">
-          <li class="ui-first-child"><a href="{{module_href}}" class="ui-btn ui-btn-icon-left ui-icon-puzzle-piece" data-i18n="Modules" accesskey="m">Modules</a></li>
+          <li class="ui-first-child"><a href="#" class="ui-btn ui-btn-icon-left ui-icon-home" data-i18n="Home">Home</a></li>
+          <li><a href="{{module_href}}" class="ui-btn ui-btn-icon-left ui-icon-puzzle-piece" data-i18n="Modules" accesskey="m">Modules</a></li>
           <li><a href="{{worklist_href}}" class="ui-btn ui-btn-icon-left ui-icon-clipboard" data-i18n="Worklists" accesskey="w">Worklists</a></li>
           <li><a href="{{history_href}}" class="ui-btn ui-btn-icon-left ui-icon-history" data-i18n="History" accesskey="h">History</a></li>
           <li><a href="{{search_href}}" class="ui-btn ui-btn-icon-left ui-icon-search" data-i18n="History" accesskey="s">Search</a></li>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_html.xml

@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.1567.4220.17373</string> </value>
+                <value> <string>952.14137.61057.25617</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1467031987.88</float>
+                        <float>1467279122.77</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

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

@@ -315,7 +315,7 @@ label {
   color: @grey;
 }
 
-input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]) {
+input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]), textarea {
   width: 100%;
   margin: 0;
 
@@ -402,11 +402,13 @@ textarea {
   height: 15em;
    width: 100%;
    margin: 0;
+/*
    padding: 0.5em;
    border: none;
    background-color: @colortextboxbackground;
    color: @colortextboxforeground;
    border-radius: 0;
+*/
   font-family: @monospace;
 }
 
@@ -514,16 +516,16 @@ div[data-gadget-scope='panel'] {
 
   div[data-role="header"] {
 
-    background-color: #252525;
-    color: #fff;
+    // background-color: #252525;
+    // color: #fff;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
 
 
-    border-color: rgba(255,255,255, .3);
-    border-width: 0 0 1px 0;
-    border-style: solid;
-
+    // border-color: rgba(255,255,255, .3);
+    // border-width: 0 0 1px 0;
+    // border-style: solid;
+/*
     > div {
       &:first-of-type {
         border-color: rgba(255,255,255, .3);
@@ -536,11 +538,18 @@ div[data-gadget-scope='panel'] {
         border-width: 0 0 0 1px;
       }
     }
-
+*/
+    .panel_img {
+      text-align: center;
+      flex: 1;
+      height: @headerheight;
+    }
     button, a {
 
       .hide_text();
-      background-color: #252525;
+      // XXX TODO: same color than panel background
+      background-color: #444444;
+
 
       &::before {
         float: left;
@@ -572,8 +581,9 @@ div[data-gadget-scope='panel'] {
 
   img {
     text-align: left;
-    line-height: @headerheight;
-    max-height: @headerheight;
+    // line-height: @headerheight;
+    // max-height: @headerheight;
+    height: 100%;
     // flex: 1;
   }
 
@@ -590,6 +600,7 @@ div[data-gadget-scope='panel'] {
         border-style: solid;
 */
         padding: .4em;
+        padding-left: 1em;
         display: block;
         // position: relative;
         // text-align: left;
@@ -727,7 +738,20 @@ div[data-gadget-scope='header'] .ui-header {
     }
   }
 
+  // XXX TODO: restore border to separate title from button/links
+  & > .ui-btn-left {
+    button, a {
+      border-right: 1px solid rgba(255, 255, 255, 0.55);
+    }
+  }
+  & > .ui-btn-right {
+    button, a {
+      border-left: 1px solid rgba(255, 255, 255, 0.55);
+    }
+  }
+
   .ui-controlgroup-controls {
+
     button, a {
       display: block;
 
@@ -768,8 +792,9 @@ div[data-gadget-scope='header'] .ui-header {
 
     color: @white;
 
-    border-left: 1px solid rgba(255, 255, 255, 0.55);
-    border-right: 1px solid rgba(255, 255, 255, 0.55);
+    // XXX Restore border
+    // border-left: 1px solid rgba(255, 255, 255, 0.55);
+    // border-right: 1px solid rgba(255, 255, 255, 0.55);
 
     // Do not put title on multi line in case of small screen
     white-space: nowrap;
@@ -900,6 +925,7 @@ div[data-gadget-scope='header'] .ui-header {
 .gadget-content {
 
   @media @desktop {
+    // Keep the panel always visible
     margin-left: @panelwidth;
   }
 
@@ -921,9 +947,7 @@ div[data-gadget-scope='header'] .ui-header {
   // Label
 
   .ui-field-contain {
-    margin-bottom: 2em;
-    padding: 0.8em 0;
-    // margin: 0 0 12px 0;
+    padding: 0.5em 0;
 
     div {
       width: 100%;
@@ -945,8 +969,8 @@ div[data-gadget-scope='header'] .ui-header {
 
   .ui-content-title {
     font-size: 150%;
-    margin-top: 1em;
-    margin-bottom: 1em;
+    // margin-top: 1em;
+    // margin-bottom: 1em;
 
   }
 
@@ -1002,13 +1026,22 @@ div[data-gadget-scope='header'] .ui-header {
   }
 
   @media @desktop {
+
+/*
     .left, .right, .center, .bottom {
       padding: 0 2%;
     }
+*/
     .left, .right {
       vertical-align: top;
       display: inline-block;
-      width: 45%;
+      width: 50%;
+    }
+    .left {
+      padding-right: 2%;
+    }
+    .right {
+      padding-left: 2%;
     }
   }
 
@@ -1035,10 +1068,11 @@ div[data-gadget-scope='header'] .ui-header {
   }
 
   @media @smartphone {
-    /* make sure there is a bottom border */
     .ui-field-contain {
       padding: 0.8em 0;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      // make sure there is a bottom border
+      // XXX TODO: border should be visible only if not input
+      // border-bottom: 1px solid rgba(0, 0, 0, 0.15);
     }
   }
 
@@ -1073,7 +1107,8 @@ div[data-gadget-scope='erp5_searchfield'] {
     border-bottom: 2px solid rgba(0, 0, 0, 0.14902);
 
     h1 {
-      opacity: .3;
+      // XXX TODO Same color than label
+      color: @grey;
       flex: 2;
       align-self: flex-end;
     }
@@ -1115,7 +1150,14 @@ div[data-gadget-scope='erp5_searchfield'] {
       background-color: #eeeeee;
       background-color: rgba(0, 0, 0, .04);
       color: #777777;
-      text-align: center;
+
+
+      // XXX Same than cells
+      tr { th {
+      padding: 0.4em 0.25em;
+      }}
+
+      // text-align: center;
 
       @media @smartphone {
         display: none;
@@ -1139,11 +1181,16 @@ div[data-gadget-scope='erp5_searchfield'] {
       }
 
       @media @desktop, @tablet {
+
+        /*
+        // Column border
         td, th {
           &:not(:last-child) {
             border-right: 1px solid #DDD;
           }
         }
+        */
+
         a {
           display: block;
           padding: 0.4em 0.25em;