[erp5_web_renderjs_ui] Clean up a bit the CSS

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.css

@@ -274,7 +274,7 @@ textarea {
   border: none;
   background-color: #FFFFFF;
   color: #1F1F1F;
-  border-radius: .325em;
+  border-radius: 0.325em;
   border-width: 1px;
   border-style: solid;
   border-color: rgba(0, 0, 0, 0.3);
@@ -304,7 +304,7 @@ select {
   border: none;
   background-color: #FFFFFF;
   color: #1F1F1F;
-  border-radius: .325em;
+  border-radius: 0.325em;
   border-width: 1px;
   border-style: solid;
   border-color: rgba(0, 0, 0, 0.3);
@@ -312,15 +312,6 @@ select {
   -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
   outline-offset: 0;
-  /*
-	appearance: none;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-        &:after {
-          content: "â–¶";
-          text-align: right;
-  float:right
-        }*/
 }
 select:hover,
 select:active,
@@ -337,13 +328,6 @@ textarea {
   height: 15em;
   width: 100%;
   margin: 0;
-  /*
-   padding: 0.5em;
-   border: none;
-   background-color: @colortextboxbackground;
-   color: @colortextboxforeground;
-   border-radius: 0;
-*/
   font-family: "Courier New", Courier, monospace;
 }
 ::-webkit-input-placeholder {
@@ -362,11 +346,6 @@ textarea {
 }
 input[type=submit],
 button {
-  /*
-  margin: 0;
-  margin-bottom: 1em;
-  padding: 0.5em 2em;
-  */
   margin: 0;
   padding: 0;
   border: none;
@@ -411,7 +390,7 @@ img {
 div[data-gadget-scope='panel'] {
   background-color: #444444;
   border-color: #888888;
-  color: #fff;
+  color: #FFFFFF;
   width: 17em;
   min-height: 100%;
   max-height: none;
@@ -439,20 +418,6 @@ div[data-gadget-scope='panel'] {
 div[data-gadget-scope='panel'] div[data-role="header"] {
   display: flex;
   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"] .panel_img {
   text-align: center;
@@ -469,13 +434,6 @@ div[data-gadget-scope='panel'] div[data-role="header"] a {
   display: block;
   line-height: 2.6em;
   color: #FFFFFF;
-  /*
-      &[name="panel"] {
-        @media @desktop {
-          display: none;
-        }
-      }
-*/
 }
 div[data-gadget-scope='panel'] div[data-role="header"] button::before,
 div[data-gadget-scope='panel'] div[data-role="header"] a::before {
@@ -497,12 +455,7 @@ div[data-gadget-scope='panel'] ul {
   margin-top: 2.6em;
 }
 div[data-gadget-scope='panel'] ul li a {
-  color: #ffffff;
-  /*
-        border-color: rgba(255,255,255, .3);
-        border-width: 1px 0 0 0;
-        border-style: solid;
-*/
+  color: #FFFFFF;
   padding: .4em;
   padding-left: 1em;
   display: block;
@@ -520,7 +473,7 @@ div[data-gadget-scope='editor_panel'] {
   background-color: #444444;
   border-color: #888888;
   box-shadow: 5px 0 0 5px rgba(0, 0, 0, 0.15);
-  color: #fff;
+  color: #FFFFFF;
   width: 17em;
   min-height: 100%;
   max-height: none;
@@ -538,7 +491,7 @@ div[data-gadget-scope='editor_panel'].visible {
 }
 div[data-gadget-scope='editor_panel'] div[data-role="header"] {
   background-color: #252525;
-  color: #fff;
+  color: #FFFFFF;
   display: flex;
   justify-content: space-between;
   border-color: rgba(255, 255, 255, 0.3);
@@ -767,11 +720,6 @@ div[data-gadget-scope='header'] .ui-header ul {
 .gadget-content {
   padding: 2em;
   padding-top: 9em;
-  /*
-  .ui-has-subheader {
-    padding-top: 7em;
-  }
-  */
   /* middle screen */
   /* form validation (assuming label>span is used) */
 }
@@ -842,13 +790,6 @@ div[data-gadget-scope='header'] .ui-header ul {
   border-bottom-style: solid;
 }
 @media only screen and (min-width: 62em) {
-  .gadget-content {
-    /*
-    .left, .right, .center, .bottom {
-      padding: 0 2%;
-    }
-*/
-  }
   .gadget-content .left,
   .gadget-content .right {
     vertical-align: top;
@@ -918,7 +859,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
 .document_table .ui-table-header button {
   padding: 0.5em;
   border: 1px solid rgba(0, 0, 0, 0.14);
-  border-radius: 0.315em;
+  border-radius: 0.325em;
   margin-right: 0.5em;
 }
 .document_table .ui-table-header button:last-of-type {
@@ -951,11 +892,6 @@ div[data-gadget-scope='erp5_searchfield'] button {
   vertical-align: middle;
 }
 .document_table table thead {
-  /*
-      background-color: #eeeeee;
-      background-color: rgba(0, 0, 0, .04);
-      color: #777777;
-      */
   background-color: #0E81C2;
   color: #FFFFFF;
 }
@@ -970,36 +906,6 @@ div[data-gadget-scope='erp5_searchfield'] button {
 .document_table table a {
   color: #1F1F1F;
 }
-.document_table table tbody {
-  /*
-      @media @smartphone {
-        tr {
-          line-height: 3em;
-        }
-        th {
-          display: none;
-          &:first-of-type {
-            display: block;
-            a {
-              display: block;
-              text-align: left;
-              padding-left: 0.5em;
-
-              &:after {
-                // XXX copy/pasted
-                font-family: FontAwesome;
-                content: "\f0da";
-                text-align: right;
-                float:right;
-                padding-right: 0.5em;
-                padding-left: 0.5em;
-              }
-            }
-          }
-        }
-      }
-*/
-}
 .document_table table tbody tr:nth-child(even) {
   background-color: #eeeeee;
   background-color: rgba(0, 0, 0, 0.04);
@@ -1008,16 +914,6 @@ 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 {
-    /*
-        // Column border
-        td, th {
-          &:not(:last-child) {
-            border-right: 1px solid #DDD;
-          }
-        }
-        */
-  }
   .document_table table tbody a {
     display: block;
     padding: 0.4em 0.25em;
@@ -1097,7 +993,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
 .document_table table tfoot .ui-controlgroup-controls a {
   padding: 0.5em;
   border: 1px solid rgba(0, 0, 0, 0.14);
-  border-radius: 0.315em;
+  border-radius: 0.325em;
   margin-right: 0.5em;
 }
 .document_table table tfoot .ui-controlgroup-controls a:last-of-type {

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.21277.40593.7202</string> </value>
+                <value> <string>952.24208.10266.65160</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1467621439.3</float>
+                        <float>1467798268.0</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

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

@@ -14,18 +14,6 @@
 @colorbackground: @white;
 // Default foreground and border color
 @colorforeground: @black;
-// Background for contrasting elements
-@colorcontrastbackground: @black;
-// Foreground for contrasting elements
-@colorcontrastforeground: @white;
-
-// @colorinactive: @;
-// Disabled foreground color
-// @colordisabled: @;
-
-// Subtle foreground and border
-// @colorsubtle: @;
-// @colorborder: @;
 @colortextselection: @txtgreen;
 // Foreground color to single-out items of interest
 @coloraccent: @txtorange;
@@ -39,6 +27,10 @@
 @colorsubheaderbackground: #0E81C2;
 @colorsubheaderlink: #f8fff3;
 
+@panelbackgroundcolor: #444444;
+
+@radius: .325em;
+
 @headerheight: 2.6em;
 @headertitleleftlargemargin: 4em;
 @headertitleleftsmallmargin: 2em;
@@ -326,7 +318,7 @@ input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio])
   background-color: @colortextboxbackground;
   color: @colortextboxforeground;
 
-  border-radius: .325em;
+  border-radius: @radius;
   border-width: 1px;
   border-style: solid;
 
@@ -360,29 +352,16 @@ select {
    border: none;
    background-color: @colortextboxbackground;
    color: @colortextboxforeground;
-   // border-radius: 0;
-   border-radius: .325em;
+   border-radius: @radius;
    border-width: 1px;
    border-style: solid;
-   // border-color: #ddd;
    border-color: rgba(0, 0, 0, 0.3);
-   // box-shadow: inset 0 1px 3px;
 	-webkit-box-shadow: inset 0 1px 3px	rgba(0,0,0,.2);
 	-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
 	box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
 
-   // font-family: @monospace;
-   // outline: 2px @border-type @colortextboxbackground;
    outline-offset: 0;
-  /*
-	appearance: none;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-        &:after {
-          content: "â–¶";
-          text-align: right;
-  float:right
-        }*/
+
         &:hover, &:active, &:focus {
   background-color: #e0e0e0;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#f5f5f5));
@@ -391,24 +370,13 @@ select {
   background:           -moz-linear-gradient(bottom, #eeeeee, #f5f5f5);
   background:             -o-linear-gradient(bottom, #eeeeee, #f5f5f5);
   background:            -ms-linear-gradient(bottom, #eeeeee, #f5f5f5);
-  // color: #222222;
-  // text-shadow: none;
-  // border-color: rgb(0, 0, 0);
-  // border-color: rgba(0, 0, 0, 0.5);
         }
 }
 
 textarea {
   height: 15em;
-   width: 100%;
-   margin: 0;
-/*
-   padding: 0.5em;
-   border: none;
-   background-color: @colortextboxbackground;
-   color: @colortextboxforeground;
-   border-radius: 0;
-*/
+  width: 100%;
+  margin: 0;
   font-family: @monospace;
 }
 
@@ -434,15 +402,9 @@ input[type=submit], button {
     padding: 0px;
   }
 
-  /*
-  margin: 0;
-  margin-bottom: 1em;
-  padding: 0.5em 2em;
-  */
   margin: 0;
   padding: 0;
   border: none;
-  // background-image: none;
   background-color: @colorbackground;
   color: @colorforeground;
 
@@ -484,16 +446,14 @@ img {
 **********************************************/
 div[data-gadget-scope='panel'] {
 
-  // background-color: #252525;
-  background-color: #444444;
+  background-color: @panelbackgroundcolor;
 
-  // border-color: #454545;
   border-color: #888888;
 
   @media @smartphone, @tablet {
     box-shadow: 5px 0 5px rgba(0,0,0,.15);
   }
-  color: #fff;
+  color: @white;
 
   width: @panelwidth;
   min-height: 100%;
@@ -515,30 +475,9 @@ div[data-gadget-scope='panel'] {
 
 
   div[data-role="header"] {
-
-    // background-color: #252525;
-    // color: #fff;
     display: flex;
     justify-content: flex-start;
 
-
-    // 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);
-        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;
-      }
-    }
-*/
     .panel_img {
       text-align: center;
       flex: 1;
@@ -547,8 +486,7 @@ div[data-gadget-scope='panel'] {
     button, a {
 
       .hide_text();
-      // XXX TODO: same color than panel background
-      background-color: #444444;
+      background-color: @panelbackgroundcolor;
 
 
       &::before {
@@ -567,24 +505,12 @@ div[data-gadget-scope='panel'] {
 
       line-height: @headerheight;
       color: @white;
-      // background-color: @colorheaderbackground;
-
-/*
-      &[name="panel"] {
-        @media @desktop {
-          display: none;
-        }
-      }
-*/
     }
   }
 
   img {
     text-align: left;
-    // line-height: @headerheight;
-    // max-height: @headerheight;
     height: 100%;
-    // flex: 1;
   }
 
 
@@ -593,23 +519,15 @@ div[data-gadget-scope='panel'] {
     margin-top: @headerheight;
     li {
       a {
-        color: #ffffff;
-/*
-        border-color: rgba(255,255,255, .3);
-        border-width: 1px 0 0 0;
-        border-style: solid;
-*/
+        color: @white;
         padding: .4em;
         padding-left: 1em;
         display: block;
-        // position: relative;
-        // text-align: left;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap; 
 
         &::before {
-          // margin-right: 1em;
           width: 2em;
         }
       }
@@ -624,14 +542,12 @@ div[data-gadget-scope='panel'] {
 
 div[data-gadget-scope='editor_panel'] {
 
-  // background-color: #252525;
-  background-color: #444444;
+  background-color: @panelbackgroundcolor;
 
-  // border-color: #454545;
   border-color: #888888;
   box-shadow: 5px 0 0 5px rgba(0,0,0,.15);
 
-  color: #fff;
+  color: @white;
 
   width: @panelwidth;
   min-height: 100%;
@@ -654,7 +570,7 @@ div[data-gadget-scope='editor_panel'] {
   div[data-role="header"] {
 
     background-color: #252525;
-    color: #fff;
+    color: @white;
     display: flex;
     justify-content: space-between;
 
@@ -667,7 +583,6 @@ div[data-gadget-scope='editor_panel'] {
       text-align: left;
       line-height: @headerheight;
       max-height: @headerheight;
-      // flex: 1;
     }
 
     > div {
@@ -698,7 +613,6 @@ div[data-gadget-scope='editor_panel'] {
 
       line-height: @headerheight;
       color: @white;
-      // background-color: @colorheaderbackground;
     }
   }
 
@@ -712,7 +626,6 @@ div[data-gadget-scope='editor_panel'] {
 **********************************************/
 div[data-gadget-scope='header'] .ui-header {
 
-  // width: 100%;
   position: fixed;
   z-index: 1000;
   text-align: center;
@@ -726,7 +639,7 @@ div[data-gadget-scope='header'] .ui-header {
 
   button, a {
     &:hover, &:active {
-      background-color: #085078;
+      background-color: @colorheaderbackground;
       background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#85D8CE), to(#0E81C2));
       background: -webkit-linear-gradient(bottom, #85D8CE, #0E81C2);
       background: linear-gradient(bottom, #85D8CE, #0E81C2);
@@ -849,7 +762,6 @@ div[data-gadget-scope='header'] .ui-header {
 
 
   .ui-subheader {
-    // display: block;
     @media @desktop {
       text-align: left;
     }
@@ -888,7 +800,6 @@ div[data-gadget-scope='header'] .ui-header {
 
         &::before {
           display: none;
-          // padding-right: 0.3em;
         }
 
       }
@@ -948,13 +859,6 @@ div[data-gadget-scope='header'] .ui-header {
     padding-top: 8em;
   }
 
-
-
-  /*
-  .ui-has-subheader {
-    padding-top: 7em;
-  }
-  */
   // Label
 
   .ui-field-contain {
@@ -966,23 +870,11 @@ div[data-gadget-scope='header'] .ui-header {
 
     label {
       margin: 0 0 0.4em;
-   // padding: 0.4em;
-   // line-height: 1.4em;
-      // text-align: left;
-      // margin: 0 8px 0 0;
-      // padding: 2px 0;
-
-
-
-
     }
   }
 
   .ui-content-title {
     font-size: 150%;
-    // margin-top: 1em;
-    // margin-bottom: 1em;
-
   }
 
   ul.document-listview {
@@ -1011,10 +903,6 @@ div[data-gadget-scope='header'] .ui-header {
   background:           -moz-linear-gradient(bottom, #eeeeee, #f5f5f5);
   background:             -o-linear-gradient(bottom, #eeeeee, #f5f5f5);
   background:            -ms-linear-gradient(bottom, #eeeeee, #f5f5f5);
-  // color: #222222;
-  // text-shadow: none;
-  // border-color: rgb(0, 0, 0);
-  // border-color: rgba(0, 0, 0, 0.5);
         }
         &:focus {
           	-webkit-box-shadow: 0 0 12px 	#3388cc;
@@ -1023,26 +911,18 @@ div[data-gadget-scope='header'] .ui-header {
         }
       }
       &:first-child {
-        border-top-left-radius: 0.325em;
-        border-top-right-radius: 0.325em;
+        border-top-left-radius: @radius;
+        border-top-right-radius: @radius;
       }
       &:last-child {
-        border-bottom-left-radius: 0.325em;
-        border-bottom-right-radius: 0.325em;
+        border-bottom-left-radius: @radius;
+        border-bottom-right-radius: @radius;
         border-bottom-style: solid;
-            // box-shadow: 0 1px 3px;
-
       }
     }
   }
 
   @media @desktop {
-
-/*
-    .left, .right, .center, .bottom {
-      padding: 0 2%;
-    }
-*/
     .left, .right {
       vertical-align: top;
       display: inline-block;
@@ -1128,7 +1008,7 @@ div[data-gadget-scope='erp5_searchfield'] {
     button {
       padding: 0.5em;
       border: 1px solid rgba(0, 0, 0, 0.14);
-      border-radius: 0.315em;
+      border-radius: @radius;
 
       margin-right: 0.5em;
       &:last-of-type {
@@ -1160,13 +1040,7 @@ div[data-gadget-scope='erp5_searchfield'] {
     }
 
     thead {
-      /*
-      background-color: #eeeeee;
-      background-color: rgba(0, 0, 0, .04);
-      color: #777777;
-      */
       background-color: @colorsubheaderbackground;
-      // background-color: @colorheaderbackground;
       color: @white;
 
 
@@ -1199,16 +1073,6 @@ 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;
@@ -1279,36 +1143,6 @@ div[data-gadget-scope='erp5_searchfield'] {
           }
         }
       }
-
-/*
-      @media @smartphone {
-        tr {
-          line-height: 3em;
-        }
-        th {
-          display: none;
-          &:first-of-type {
-            display: block;
-            a {
-              display: block;
-              text-align: left;
-              padding-left: 0.5em;
-
-              &:after {
-                // XXX copy/pasted
-                font-family: FontAwesome;
-                content: "\f0da";
-                text-align: right;
-                float:right;
-                padding-right: 0.5em;
-                padding-left: 0.5em;
-              }
-            }
-          }
-        }
-      }
-*/
-
     }
 
 
@@ -1325,7 +1159,7 @@ div[data-gadget-scope='erp5_searchfield'] {
       a {
         padding: 0.5em;
         border: 1px solid rgba(0, 0, 0, 0.14);
-        border-radius: 0.315em;
+        border-radius: @radius;
 
         margin-right: 0.5em;
         &:last-of-type {