erp5_document_scanner: Prevent this CSS to impact the other page elements

Clean up and Change all gadget's CSS rules to be prefixed by  `div[data-gadget-url$="gadget_document_scanner.html"]`

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_css.css

-.device-selector {
+div[data-gadget-url$="gadget_document_scanner.html"] {
   text-align: center;
-  font-size: 19px;
 }
 
-div[data-gadget-scope="field_your_document_scanner_gadget"] {
-  text-align: center;
-}
-
-.video, .photo, .camera-output, .canvas {
+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,
+div[data-gadget-url$="gadget_document_scanner.html"] .canvas {
   max-width: 100%;
   width: auto;
   max-height: 500px;
@@ -15,45 +13,38 @@ div[data-gadget-scope="field_your_document_scanner_gadget"] {
   text-align: center;
 }
 
-.camera-input, .camera-output {
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
   min-height: 360px;
-  // display: none;
 }
 
-.canvas {
-  // display: none;
-  filter: brightness(1);
-}
-
-.page-number {
+div[data-gadget-url$="gadget_document_scanner.html"] .page-number {
   display: inline;
 }
 
-.camera-header {
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-header {
   font-size: 12pt;
   font-weight: 400;
 }
 
-.camera-input, .camera-output, .camera-header, .edit-picture {
+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;
 }
 
-.camera, .camera-input, .camera-output {
+div[data-gadget-url$="gadget_document_scanner.html"] .camera,
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
   display: inline-block;
 }
 
-.capture-button, .reset-button {
-  display: inline;
-  margin: 0 2em 0 2em;
-}
-
-.startbutton {
-  display: block;
-  margin: 0 auto;
-}
-
-.reset-btn, .confirm-btn, .edit-btn, .take-picture-btn,
-    .capture-btn, .change-camera-btn, .confirm-btn {
+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,
+div[data-gadget-url$="gadget_document_scanner.html"] .take-picture-btn,
+div[data-gadget-url$="gadget_document_scanner.html"] .capture-btn,
+div[data-gadget-url$="gadget_document_scanner.html"] .change-camera-btn,
+div[data-gadget-url$="gadget_document_scanner.html"] .confirm-btn {
   color: #212529;
   padding: 3pt;
   border: 1px solid rgba(0, 0, 0, 0.14);
@@ -62,30 +53,11 @@ div[data-gadget-scope="field_your_document_scanner_gadget"] {
   margin-right: 6pt;
 }
 
-.ui-btn-icon-left:before {
+div[data-gadget-url$="gadget_document_scanner.html"] .ui-btn-icon-left:before {
   margin-right: 6pt;
 }
 
-/*
-.take-picture-btn, .capture-btn, .confirm-btn,
-    .reset-btn, .confirm-btn, .change-camera-btn, .edit-btn {
-  display: none;
-}
-*/
-
-.contentarea {
-  font-size: 16px;
-  font-family: "Lucida Grande", "Arial", sans-serif;
-  width: 760px;
-}
-
-button:disabled,
-button[disabled]{
+div[data-gadget-url$="gadget_document_scanner.html"] button:disabled,
+div[data-gadget-url$="gadget_document_scanner.html"] button[disabled] {
   color: #999999;
 }
\ No newline at end of file
-
-@media only screen and (max-width: 600px) {
-  body {
-    max-height: 360px;
-  }
-}
\ No newline at end of file

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_html.xml

@@ -242,7 +242,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>981.18960.58948.16110</string> </value>
+                      <value> <string>981.22396.11562.3498</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1579527559.65</float>
+                              <float>1580300337.44</float>
                               <string>UTC</string>
                             </tuple>
                           </state>