[erp5_web_renderjs_ui] Reduce font size on big screen

This will increase the information's density for desktop users

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -177,6 +177,24 @@ select {
   font-weight: 400;
   line-height: 1.5;
 }
+@media only screen and (min-width: 45em) and (max-width: 85em) {
+  body,
+  button,
+  input,
+  textarea,
+  select {
+    font-size: 11pt;
+  }
+}
+@media not screen and (max-width: 85em) {
+  body,
+  button,
+  input,
+  textarea,
+  select {
+    font-size: 10pt;
+  }
+}
 /**********************************************
 * Inline elements
 **********************************************/

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.13250.38999.16264</string> </value>
+                <value> <string>965.13467.35844.48162</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1517480024.55</float>
+                        <float>1517492960.24</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

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

@@ -42,7 +42,7 @@
 @radius: .325em;
 
 // XXX BUG Generate wrong align on firefox smartphone
-@headerheight: @font-size * 2 + @margin-size;
+@headerheight: @smartphone-font-size * 2 + @margin-size;
 @headerheight-smartphone: 2 * @headerheight + @margin-size + 1;
 @headerheight-tablet: 2 * @headerheight + 2 * @margin-size + 1;
 
@@ -81,7 +81,11 @@
 **********************************************/
 @font-family: @sans-serif;
 // Increase font size to prevent IOS auto zooming when focusing input field
-@font-size: 12pt;
+@smartphone-font-size: 12pt;
+// Reduce font size on tablet/desktop,
+// as users want to increase information's density on big screen
+@tablet-font-size: 11pt;
+@desktop-font-size: 10pt;
 @font-weight: 400;
 
 @line-height: 1.5;
@@ -245,7 +249,13 @@ body {
 
 body, button, input, textarea, select {
   font-family: @font-family;
-  font-size: @font-size;
+  font-size: @smartphone-font-size;
+  @media @tablet {
+    font-size: @tablet-font-size;
+  }
+  @media @desktop {
+    font-size: @desktop-font-size;
+  }
   padding: 0;
   margin: 0;