[erp5_web_renderjs_ui] Integrate all main page CSS into .gadget-content

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.css

@@ -798,6 +798,8 @@ div[data-gadget-scope='header'] .ui-header ul {
     padding-top: 7em;
   }
   */
+  /* middle screen */
+  /* form validation (assuming label>span is used) */
 }
 @media only screen and (min-width: 62em) {
   .gadget-content {
@@ -868,48 +870,50 @@ div[data-gadget-scope='header'] .ui-header ul {
   border-bottom-right-radius: 0.325em;
   border-bottom-style: solid;
 }
-@media (min-width: 62em) {
-  .left,
-  .right,
-  .center,
-  .bottom {
+@media only screen and (min-width: 62em) {
+  .gadget-content .left,
+  .gadget-content .right,
+  .gadget-content .center,
+  .gadget-content .bottom {
     padding: 0 2%;
   }
-  .left,
-  .right {
+  .gadget-content .left,
+  .gadget-content .right {
     vertical-align: top;
     display: inline-block;
     width: 45%;
   }
 }
-/* middle screen */
-@media (max-width: 62em) {
+@media only screen and (min-width: 28em) and (max-width: 62em) {
+  .gadget-content {
     /* reset min/max width and shrink labels ... */
-  label,
-  legend {
+  }
+  .gadget-content label,
+  .gadget-content legend {
     font-size: 80%;
   }
 }
-@media (min-width: 28em) {
-  .ui-field-contain {
+@media only screen and (min-width: 28em) and (max-width: 62em), only screen and (min-width: 62em) {
+  .gadget-content .ui-field-contain {
     display: flex;
   }
-  .ui-field-contain label {
+  .gadget-content .ui-field-contain label {
     flex: 1;
   }
-  .ui-field-contain label + div {
+  .gadget-content .ui-field-contain label + div {
     flex: 3;
   }
 }
-@media (max-width: 28em) {
+@media only screen and (max-width: 28em) {
+  .gadget-content {
     /* make sure there is a bottom border */
-  .ui-field-contain {
+  }
+  .gadget-content .ui-field-contain {
     padding: 0.8em 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   }
 }
-/* form validation (assuming label>span is used) */
-form label span {
+.gadget-content form label span {
   color: red;
 }
 /**********************************************

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.12715.63499.47547</string> </value>
+                <value> <string>952.12740.62273.29252</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1467193792.99</float>
+                        <float>1467271547.98</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

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

@@ -1001,41 +1001,28 @@ div[data-gadget-scope='header'] .ui-header {
     }
   }
 
-}
-
-
-
-@media (min-width: 62em) {
-
-.left,
-.right,
-.center,
-.bottom {
+  @media @desktop {
+    .left, .right, .center, .bottom {
       padding: 0 2%;
-}
-.left,
-.right {
+    }
+    .left, .right {
       vertical-align: top;
       display: inline-block;
       width: 45%;
-}
-
-}
-
+    }
+  }
 
-/* middle screen */
-@media (max-width: 62em) {
 
+  /* middle screen */
+  @media @tablet {
     /* reset min/max width and shrink labels ... */
     label, legend {
       font-size: 80%;
     }
+  }
 
-}
-
-@media (min-width: 28em) {
+  @media @tablet, @desktop {
     // Label
-
     .ui-field-contain {
       display: flex;
       label {
@@ -1045,21 +1032,21 @@ div[data-gadget-scope='header'] .ui-header {
         flex: 3;
       }
     }
-}
-
-@media (max-width: 28em) {
+  }
 
+  @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);
     }
+  }
 
-}
-
-/* form validation (assuming label>span is used) */
-form label span {
+  /* form validation (assuming label>span is used) */
+  form label span {
     color: red;
+  }
+
 }
 
 /**********************************************