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