erp5_document_scanner: add a less file to generate the css

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.css

 div[data-gadget-url$="gadget_document_scanner.html"] {
   text-align: center;
 }
-
 @media only screen and (max-width: 750px) {
   div[data-gadget-url$="gadget_document_scanner.html"] .camera {
     max-width: 90%;
@@ -10,7 +9,6 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
     max-width: 50%;
   }
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .photo,
 div[data-gadget-url$="gadget_document_scanner.html"] .video,
 div[data-gadget-url$="gadget_document_scanner.html"] .camera-output,
@@ -21,36 +19,29 @@ div[data-gadget-url$="gadget_document_scanner.html"] .canvas {
   filter: brightness(1);
   text-align: center;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
   min-height: 360px;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .page-number {
   display: inline;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .camera-header {
   font-size: 12pt;
   font-weight: 400;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .camera-input,
 div[data-gadget-url$="gadget_document_scanner.html"] .camera-output,
 div[data-gadget-url$="gadget_document_scanner.html"] .camera-header,
 div[data-gadget-url$="gadget_document_scanner.html"] .edit-picture {
   text-align: center;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .edit-picture {
   padding-top: 0.5em;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .camera,
 div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
   display: inline-block;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .reset-btn,
 div[data-gadget-url$="gadget_document_scanner.html"] .confirm-btn,
 div[data-gadget-url$="gadget_document_scanner.html"] .edit-btn,
@@ -67,37 +58,30 @@ div[data-gadget-url$="gadget_document_scanner.html"] .confirm-btn {
   display: inline-block;
   margin-right: 6pt;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] button:disabled,
 div[data-gadget-url$="gadget_document_scanner.html"] button[disabled] {
   color: #999999;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] > .camera > .thumbnail-list {
-  padding-top: .5em;
+  padding-top: 0.5em;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .show-img {
   width: 6em;
   height: 6em;
   object-fit: cover;
   float: left;
 }
-
-div[data-gadget-url$="gadget_document_scanner.html"] .show-img ,
-    div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
+div[data-gadget-url$="gadget_document_scanner.html"] .show-img,
+div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
   border-radius: 0.325em;
 }
-
-div[data-gadget-url$="gadget_document_scanner.html"] .btn-thumbnail ,
-    div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
+div[data-gadget-url$="gadget_document_scanner.html"] .btn-thumbnail,
+div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
   margin-top: 0.2em;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] button:before {
   padding-right: 0.2em;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .thumbnail-list > button {
   display: inline;
   float: left;
@@ -105,22 +89,18 @@ div[data-gadget-url$="gadget_document_scanner.html"] .thumbnail-list > button {
   border: 1px solid rgba(0, 0, 0, 0.14);
   border-radius: 0.325em;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .upload-error {
   border: 3px solid red;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
   display: inline-grid !important;
   width: calc(6em + 1px);
   height: calc(6em + 1px);
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .img-container {
   /* Never limit the container height here */
   max-width: 100%;
 }
-
 div[data-gadget-url$="gadget_document_scanner.html"] .btn-thumbnail:before {
   color: #000;
   position: absolute;

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>981.65281.59241.18807</string> </value>
+                      <value> <string>982.60019.31334.2372</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1582746062.94</float>
+                              <float>1585753245.18</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/documentscannercss.less.txt

+div[data-gadget-url$="gadget_document_scanner.html"] {
+  text-align: center;
+
+  @media only screen and (max-width: 750px) {
+    .camera {
+      max-width: 90%;
+    }
+    .thumbnail-list > button {
+      max-width: 50%;
+    }
+  }
+
+  .photo, .video, .camera-output, .canvas {
+    max-width: 100%;
+    width: auto;
+    max-height: 500px;
+    filter: brightness(1);
+    text-align: center;
+  }
+
+  .camera-input {
+    min-height: 360px;
+  }
+
+  .page-number {
+    display: inline;
+  }
+
+  .camera-header {
+    font-size: 12pt;
+    font-weight: 400;
+  }
+
+  .camera-input, .camera-output, .camera-header, .edit-picture {
+    text-align: center;
+  }
+
+  .edit-picture {
+    padding-top: 0.5em;
+  }
+
+  .camera, .camera-input {
+    display: inline-block;
+  }
+
+  .reset-btn, .confirm-btn, .edit-btn, .take-picture-btn, .capture-btn,
+  .delete-btn, .retry-btn, .change-camera-btn, .confirm-btn {
+    color: #212529;
+    padding: 3pt;
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    border-radius: 0.325em;
+    display: inline-block;
+    margin-right: 6pt;
+  }
+
+
+  button:disabled, button[disabled] {
+    color: #999999;
+  }
+
+  > .camera > .thumbnail-list {
+    padding-top: .5em;
+  }
+
+  .show-img {
+    width: 6em;
+    height: 6em;
+    object-fit: cover;
+    float: left;
+  }
+
+  .show-img, .new-btn {
+    border-radius: 0.325em;
+  }
+
+  .btn-thumbnail, .new-btn {
+    margin-top: 0.2em;
+  }
+
+  button:before {
+    padding-right: 0.2em;
+  }
+
+  .thumbnail-list > button {
+    display: inline;
+    float: left;
+    margin-left: 0.2em;
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    border-radius: 0.325em;
+  }
+
+  .upload-error {
+    border: 3px solid red;
+  }
+
+  .new-btn {
+    display: inline-grid !important;
+    width: calc(6em + 1px);
+    height: calc(6em + 1px);
+  }
+
+  .img-container {
+    /* Never limit the container height here */
+    max-width: 100%;
+  }
+
+  .btn-thumbnail:before {
+    color: #000;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    text-align: center;
+    font-size: 16pt;
+  }
+
+}

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/documentscannercss.less.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="File" module="OFS.Image"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>__name__</string> </key>
+            <value> <string>documentscannercss.less</string> </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/plain</string> </value>
+        </item>
+        <item>
+            <key> <string>precondition</string> </key>
+            <value> <string></string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <string></string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>