@jaak.ai/stamps 1.0.0-dev.9 → 2.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +470 -390
  3. package/dist/cjs/index-DGM9-FNg.js +1402 -0
  4. package/dist/cjs/index-DGM9-FNg.js.map +1 -0
  5. package/dist/cjs/index.cjs.js +3 -0
  6. package/dist/cjs/index.cjs.js.map +1 -0
  7. package/dist/cjs/jaak-stamps-webcomponent.cjs.js +27 -0
  8. package/dist/cjs/jaak-stamps-webcomponent.cjs.js.map +1 -0
  9. package/dist/cjs/jaak-stamps.cjs.entry.js +925 -0
  10. package/dist/cjs/jaak-stamps.cjs.entry.js.map +1 -0
  11. package/dist/cjs/jaak-stamps.entry.cjs.js.map +1 -0
  12. package/dist/cjs/loader.cjs.js +8 -15
  13. package/dist/cjs/loader.cjs.js.map +1 -0
  14. package/dist/collection/collection-manifest.json +3 -22
  15. package/dist/collection/components/my-component/my-component.css +530 -0
  16. package/dist/collection/components/my-component/my-component.js +1162 -0
  17. package/dist/collection/components/my-component/my-component.js.map +1 -0
  18. package/dist/collection/index.js +2 -1
  19. package/dist/collection/index.js.map +1 -0
  20. package/dist/collection/utils/utils.js +4 -0
  21. package/dist/collection/utils/utils.js.map +1 -0
  22. package/dist/components/index.d.ts +33 -0
  23. package/dist/components/index.js +1195 -0
  24. package/dist/components/index.js.map +1 -0
  25. package/dist/components/jaak-stamps.d.ts +11 -0
  26. package/dist/components/jaak-stamps.js +971 -0
  27. package/dist/components/jaak-stamps.js.map +1 -0
  28. package/dist/esm/index-DqoVMnc7.js +1393 -0
  29. package/dist/esm/index-DqoVMnc7.js.map +1 -0
  30. package/dist/esm/index.js +3 -0
  31. package/dist/esm/index.js.map +1 -0
  32. package/dist/esm/jaak-stamps-webcomponent.js +23 -0
  33. package/dist/esm/jaak-stamps-webcomponent.js.map +1 -0
  34. package/dist/esm/jaak-stamps.entry.js +923 -0
  35. package/dist/esm/jaak-stamps.entry.js.map +1 -0
  36. package/dist/esm/loader.js +9 -14
  37. package/dist/esm/loader.js.map +1 -0
  38. package/dist/jaak-stamps-webcomponent/index.esm.js +2 -0
  39. package/dist/jaak-stamps-webcomponent/index.esm.js.map +1 -0
  40. package/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js +2 -0
  41. package/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js.map +1 -0
  42. package/dist/jaak-stamps-webcomponent/jaak-stamps.entry.esm.js.map +1 -0
  43. package/dist/jaak-stamps-webcomponent/loader.esm.js.map +1 -0
  44. package/dist/jaak-stamps-webcomponent/p-DqoVMnc7.js +3 -0
  45. package/dist/jaak-stamps-webcomponent/p-DqoVMnc7.js.map +1 -0
  46. package/dist/jaak-stamps-webcomponent/p-dd6cc14e.entry.js +2 -0
  47. package/dist/jaak-stamps-webcomponent/p-dd6cc14e.entry.js.map +1 -0
  48. package/dist/types/components/my-component/my-component.d.ts +119 -0
  49. package/dist/types/components.d.ts +50 -1353
  50. package/dist/types/index.d.ts +10 -1
  51. package/dist/types/stencil-public-runtime.d.ts +93 -28
  52. package/dist/types/utils/utils.d.ts +1 -0
  53. package/loader/cdn.js +1 -3
  54. package/loader/index.cjs.js +1 -3
  55. package/loader/index.d.ts +5 -2
  56. package/loader/index.es2017.js +1 -3
  57. package/loader/index.js +1 -3
  58. package/package.json +22 -26
  59. package/dist/cjs/document-detector_19.cjs.entry.js +0 -8540
  60. package/dist/cjs/index-5e4e5e7d.js +0 -1685
  61. package/dist/cjs/mb-tooltip.cjs.entry.js +0 -26
  62. package/dist/cjs/stamps.cjs.js +0 -23
  63. package/dist/collection/components/document-detector/document-detector.css +0 -156
  64. package/dist/collection/components/document-detector/document-detector.js +0 -416
  65. package/dist/collection/components/shared/mb-api-process-status/mb-api-process-status.css +0 -360
  66. package/dist/collection/components/shared/mb-api-process-status/mb-api-process-status.js +0 -124
  67. package/dist/collection/components/shared/mb-button/mb-button.css +0 -95
  68. package/dist/collection/components/shared/mb-button/mb-button.js +0 -201
  69. package/dist/collection/components/shared/mb-button-classic/mb-button-classic.css +0 -100
  70. package/dist/collection/components/shared/mb-button-classic/mb-button-classic.js +0 -130
  71. package/dist/collection/components/shared/mb-camera-experience/mb-camera-experience.css +0 -740
  72. package/dist/collection/components/shared/mb-camera-experience/mb-camera-experience.js +0 -827
  73. package/dist/collection/components/shared/mb-camera-experience/mb-camera-experience.utils.js +0 -55
  74. package/dist/collection/components/shared/mb-camera-selection/mb-camera-selection.css +0 -124
  75. package/dist/collection/components/shared/mb-camera-selection/mb-camera-selection.js +0 -194
  76. package/dist/collection/components/shared/mb-camera-toolbar/mb-camera-toolbar.css +0 -80
  77. package/dist/collection/components/shared/mb-camera-toolbar/mb-camera-toolbar.js +0 -275
  78. package/dist/collection/components/shared/mb-completed/mb-completed.css +0 -17
  79. package/dist/collection/components/shared/mb-completed/mb-completed.js +0 -48
  80. package/dist/collection/components/shared/mb-component/mb-component.css +0 -321
  81. package/dist/collection/components/shared/mb-component/mb-component.js +0 -2269
  82. package/dist/collection/components/shared/mb-component/mb-component.utils.js +0 -14
  83. package/dist/collection/components/shared/mb-container/mb-container.css +0 -7
  84. package/dist/collection/components/shared/mb-container/mb-container.js +0 -23
  85. package/dist/collection/components/shared/mb-feedback/mb-feedback.css +0 -36
  86. package/dist/collection/components/shared/mb-feedback/mb-feedback.js +0 -91
  87. package/dist/collection/components/shared/mb-feedback/mb-feedback.utils.js +0 -11
  88. package/dist/collection/components/shared/mb-help/mb-help.css +0 -191
  89. package/dist/collection/components/shared/mb-help/mb-help.js +0 -409
  90. package/dist/collection/components/shared/mb-help/mb-help.model.js +0 -5
  91. package/dist/collection/components/shared/mb-image-box/mb-image-box.css +0 -78
  92. package/dist/collection/components/shared/mb-image-box/mb-image-box.js +0 -150
  93. package/dist/collection/components/shared/mb-modal/mb-modal.css +0 -106
  94. package/dist/collection/components/shared/mb-modal/mb-modal.js +0 -239
  95. package/dist/collection/components/shared/mb-overlay/mb-overlay.css +0 -46
  96. package/dist/collection/components/shared/mb-overlay/mb-overlay.js +0 -76
  97. package/dist/collection/components/shared/mb-progress-tracker/mb-progress-tracker.css +0 -24
  98. package/dist/collection/components/shared/mb-progress-tracker/mb-progress-tracker.js +0 -80
  99. package/dist/collection/components/shared/mb-screen/mb-screen.css +0 -19
  100. package/dist/collection/components/shared/mb-screen/mb-screen.js +0 -48
  101. package/dist/collection/components/shared/mb-spinner/mb-spinner.css +0 -30
  102. package/dist/collection/components/shared/mb-spinner/mb-spinner.js +0 -67
  103. package/dist/collection/components/shared/mb-tooltip/mb-tooltip.css +0 -62
  104. package/dist/collection/components/shared/mb-tooltip/mb-tooltip.js +0 -150
  105. package/dist/collection/components/shared/mb-tooltip-advanced/mb-tooltip-advanced.css +0 -91
  106. package/dist/collection/components/shared/mb-tooltip-advanced/mb-tooltip-advanced.js +0 -96
  107. package/dist/collection/utils/data-structures.js +0 -189
  108. package/dist/collection/utils/device.helpers.js +0 -37
  109. package/dist/collection/utils/error-structures.js +0 -47
  110. package/dist/collection/utils/generic.helpers.js +0 -82
  111. package/dist/collection/utils/sdk.service.js +0 -943
  112. package/dist/collection/utils/state-lifter.js +0 -3
  113. package/dist/collection/utils/status.document-detector.js +0 -15
  114. package/dist/collection/utils/translation.service.js +0 -97
  115. package/dist/esm/document-detector_19.entry.js +0 -8518
  116. package/dist/esm/index-dc740acb.js +0 -1656
  117. package/dist/esm/mb-tooltip.entry.js +0 -22
  118. package/dist/esm/polyfills/core-js.js +0 -11
  119. package/dist/esm/polyfills/css-shim.js +0 -1
  120. package/dist/esm/polyfills/dom.js +0 -79
  121. package/dist/esm/polyfills/es5-html-element.js +0 -1
  122. package/dist/esm/polyfills/index.js +0 -34
  123. package/dist/esm/polyfills/system.js +0 -6
  124. package/dist/esm/stamps.js +0 -18
  125. package/dist/stamps/index.esm.js +0 -0
  126. package/dist/stamps/p-7f07a434.js +0 -2
  127. package/dist/stamps/p-ec3f5972.entry.js +0 -1
  128. package/dist/stamps/p-f4015454.entry.js +0 -9
  129. package/dist/stamps/stamps.esm.js +0 -1
  130. package/dist/types/components/document-detector/document-detector.d.ts +0 -86
  131. package/dist/types/components/shared/mb-api-process-status/mb-api-process-status.d.ts +0 -30
  132. package/dist/types/components/shared/mb-button/mb-button.d.ts +0 -41
  133. package/dist/types/components/shared/mb-button-classic/mb-button-classic.d.ts +0 -27
  134. package/dist/types/components/shared/mb-camera-experience/mb-camera-experience.d.ts +0 -141
  135. package/dist/types/components/shared/mb-camera-experience/mb-camera-experience.utils.d.ts +0 -3
  136. package/dist/types/components/shared/mb-camera-selection/mb-camera-selection.d.ts +0 -33
  137. package/dist/types/components/shared/mb-camera-toolbar/mb-camera-toolbar.d.ts +0 -54
  138. package/dist/types/components/shared/mb-completed/mb-completed.d.ts +0 -12
  139. package/dist/types/components/shared/mb-component/mb-component.d.ts +0 -308
  140. package/dist/types/components/shared/mb-component/mb-component.utils.d.ts +0 -3
  141. package/dist/types/components/shared/mb-container/mb-container.d.ts +0 -8
  142. package/dist/types/components/shared/mb-feedback/mb-feedback.d.ts +0 -19
  143. package/dist/types/components/shared/mb-feedback/mb-feedback.utils.d.ts +0 -2
  144. package/dist/types/components/shared/mb-help/mb-help.d.ts +0 -66
  145. package/dist/types/components/shared/mb-help/mb-help.model.d.ts +0 -9
  146. package/dist/types/components/shared/mb-image-box/mb-image-box.d.ts +0 -35
  147. package/dist/types/components/shared/mb-modal/mb-modal.d.ts +0 -53
  148. package/dist/types/components/shared/mb-overlay/mb-overlay.d.ts +0 -17
  149. package/dist/types/components/shared/mb-progress-tracker/mb-progress-tracker.d.ts +0 -19
  150. package/dist/types/components/shared/mb-screen/mb-screen.d.ts +0 -12
  151. package/dist/types/components/shared/mb-spinner/mb-spinner.d.ts +0 -16
  152. package/dist/types/components/shared/mb-tooltip/mb-tooltip.d.ts +0 -10
  153. package/dist/types/components/shared/mb-tooltip-advanced/mb-tooltip-advanced.d.ts +0 -7
  154. package/dist/types/utils/data-structures.d.ts +0 -264
  155. package/dist/types/utils/device.helpers.d.ts +0 -7
  156. package/dist/types/utils/error-structures.d.ts +0 -44
  157. package/dist/types/utils/generic.helpers.d.ts +0 -21
  158. package/dist/types/utils/sdk.service.d.ts +0 -52
  159. package/dist/types/utils/state-lifter.d.ts +0 -3
  160. package/dist/types/utils/status.document-detector.d.ts +0 -14
  161. package/dist/types/utils/translation.service.d.ts +0 -77
  162. package/loader/package.json +0 -11
@@ -1,740 +0,0 @@
1
- @charset "UTF-8";
2
- /**
3
- * Copyright (c) Microblink Ltd. All rights reserved.
4
- *
5
- * SASS variables, not customizable via CSS variables
6
- */
7
- /**
8
- * Camera experiences
9
- */
10
- /* --- Reticle --- */
11
- @keyframes reticle-rotation {
12
- 100% {
13
- transform: rotate(360deg);
14
- }
15
- }
16
- @keyframes reticle-horizontal-shrink {
17
- 0% {
18
- height: 50%;
19
- top: 25%;
20
- }
21
- 50% {
22
- height: 30%;
23
- top: 35%;
24
- }
25
- 80% {
26
- height: 30%;
27
- top: 35%;
28
- }
29
- 100% {
30
- height: 50%;
31
- top: 25%;
32
- }
33
- }
34
- @keyframes reticle-cursor-horizontal-flip {
35
- 0% {
36
- opacity: 0;
37
- }
38
- 100% {
39
- opacity: 0;
40
- }
41
- }
42
- @keyframes reticle-horizontal-flip {
43
- 0% {
44
- border-radius: 0;
45
- background-color: transparent;
46
- -webkit-backdrop-filter: none;
47
- backdrop-filter: none;
48
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA5NiA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02IDBDMi42ODYyOSAwIDAgMi42ODYyOSAwIDZWNTRDMCA1Ny4zMTM3IDIuNjg2MjkgNjAgNiA2MEg5MEM5My4zMTM3IDYwIDk2IDU3LjMxMzcgOTYgNTRWNkM5NiAyLjY4NjI5IDkzLjMxMzcgMCA5MCAwSDZaTTQ4LjY3MTMgMTAuOEM0Ny4zMDY0IDEwLjggNDYuMiAxMS44NzQ1IDQ2LjIgMTMuMkM0Ni4yIDE0LjUyNTUgNDcuMzA2NCAxNS42IDQ4LjY3MTMgMTUuNkg4Mi4xMjg3QzgzLjQ5MzYgMTUuNiA4NC42IDE0LjUyNTUgODQuNiAxMy4yQzg0LjYgMTEuODc0NSA4My40OTM2IDEwLjggODIuMTI4NyAxMC44SDQ4LjY3MTNaTTcyIDQ5LjJDNzIgNDcuODc0NSA3My4wNTgyIDQ2LjggNzQuMzYzNiA0Ni44SDgxLjYzNjRDODIuOTQxOCA0Ni44IDg0IDQ3Ljg3NDUgODQgNDkuMkM4NCA1MC41MjU1IDgyLjk0MTggNTEuNiA4MS42MzY0IDUxLjZINzQuMzYzNkM3My4wNTgyIDUxLjYgNzIgNTAuNTI1NSA3MiA0OS4yWk00OC43MDE5IDMzLjZDNDcuMzIwMSAzMy42IDQ2LjIgMzQuNjc0NSA0Ni4yIDM2QzQ2LjIgMzcuMzI1NSA0Ny4zMjAxIDM4LjQgNDguNzAxOSAzOC40SDY0LjA5ODFDNjUuNDc5OSAzOC40IDY2LjYgMzcuMzI1NSA2Ni42IDM2QzY2LjYgMzQuNjc0NSA2NS40Nzk5IDMzLjYgNjQuMDk4MSAzMy42SDQ4LjcwMTlaTTQ2LjIgMjQuNkM0Ni4yIDIzLjI3NDUgNDcuMzA2NCAyMi4yIDQ4LjY3MTMgMjIuMkg4Mi4xMjg3QzgzLjQ5MzYgMjIuMiA4NC42IDIzLjI3NDUgODQuNiAyNC42Qzg0LjYgMjUuOTI1NSA4My40OTM2IDI3IDgyLjEyODcgMjdINDguNjcxM0M0Ny4zMDY0IDI3IDQ2LjIgMjUuOTI1NSA0Ni4yIDI0LjZaTTEzLjI2NDggMTAuOEMxMS41NzIxIDEwLjggMTAuMiAxMi4yMDc0IDEwLjIgMTMuOTQzNlYzNy45NjgzQzEwLjIgMzkuMDg1NCAxMC43NjkgNDAuMDY1NSAxMS42MjA2IDQwLjYyMTVDMTEuODg1OSA0MC43OTQ3IDEyLjIxMDMgNDAuODQ0NyAxMi41MTM1IDQwLjc1OUMxMi44MTY4IDQwLjY3MzQgMTMuMDcwNSA0MC40NjAyIDEzLjIxMiA0MC4xNzIxQzE0LjU5NyAzNy4zNTI1IDE2Ljg4OTkgMzUuMTUwOSAxOS42NDk1IDM0LjAxMDFDMjAuMDIzNSAzMy44NTU1IDIwLjI4NjcgMzMuNTA1NiAyMC4zMzc1IDMzLjA5NTRDMjAuMzg4NCAzMi42ODUyIDIwLjIxOSAzMi4yNzg4IDE5Ljg5NDggMzIuMDMzMUMxOC4xNzIzIDMwLjcyODEgMTcuMDU1OCAyOC42MjY0IDE3LjA1NTggMjYuMjUzOUMxNy4wNTU4IDIyLjI5MTUgMjAuMTcwMSAxOS4wODkyIDI0IDE5LjA4OTJDMjcuODI5OSAxOS4wODkyIDMwLjk0NDIgMjIuMjkxNSAzMC45NDQyIDI2LjI1MzlDMzAuOTQ0MiAyOC42MjY0IDI5LjgyNzcgMzAuNzI4MSAyOC4xMDUyIDMyLjAzMzFDMjcuNzgxIDMyLjI3ODggMjcuNjExNiAzMi42ODUyIDI3LjY2MjUgMzMuMDk1NEMyNy43MTMzIDMzLjUwNTYgMjcuOTc2NSAzMy44NTU1IDI4LjM1MDUgMzQuMDEwMUMzMS4xMTAxIDM1LjE1MDkgMzMuNDAzIDM3LjM1MjUgMzQuNzg4IDQwLjE3MjFDMzQuOTI5NSA0MC40NjAyIDM1LjE4MzIgNDAuNjczNCAzNS40ODY0IDQwLjc1OUMzNS43ODk3IDQwLjg0NDcgMzYuMTE0MSA0MC43OTQ3IDM2LjM3OTQgNDAuNjIxNUMzNy4yMzEgNDAuMDY1NSAzNy44IDM5LjA4NTQgMzcuOCAzNy45NjgzVjEzLjk0MzZDMzcuOCAxMi4yMDc0IDM2LjQyNzkgMTAuOCAzNC43MzUyIDEwLjhIMTMuMjY0OFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgoK);
49
- opacity: 0;
50
- }
51
- 5% {
52
- opacity: 1;
53
- }
54
- 15% {
55
- transform: rotateY(0deg);
56
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA5NiA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02IDBDMi42ODYyOSAwIDAgMi42ODYyOSAwIDZWNTRDMCA1Ny4zMTM3IDIuNjg2MjkgNjAgNiA2MEg5MEM5My4zMTM3IDYwIDk2IDU3LjMxMzcgOTYgNTRWNkM5NiAyLjY4NjI5IDkzLjMxMzcgMCA5MCAwSDZaTTQ4LjY3MTMgMTAuOEM0Ny4zMDY0IDEwLjggNDYuMiAxMS44NzQ1IDQ2LjIgMTMuMkM0Ni4yIDE0LjUyNTUgNDcuMzA2NCAxNS42IDQ4LjY3MTMgMTUuNkg4Mi4xMjg3QzgzLjQ5MzYgMTUuNiA4NC42IDE0LjUyNTUgODQuNiAxMy4yQzg0LjYgMTEuODc0NSA4My40OTM2IDEwLjggODIuMTI4NyAxMC44SDQ4LjY3MTNaTTcyIDQ5LjJDNzIgNDcuODc0NSA3My4wNTgyIDQ2LjggNzQuMzYzNiA0Ni44SDgxLjYzNjRDODIuOTQxOCA0Ni44IDg0IDQ3Ljg3NDUgODQgNDkuMkM4NCA1MC41MjU1IDgyLjk0MTggNTEuNiA4MS42MzY0IDUxLjZINzQuMzYzNkM3My4wNTgyIDUxLjYgNzIgNTAuNTI1NSA3MiA0OS4yWk00OC43MDE5IDMzLjZDNDcuMzIwMSAzMy42IDQ2LjIgMzQuNjc0NSA0Ni4yIDM2QzQ2LjIgMzcuMzI1NSA0Ny4zMjAxIDM4LjQgNDguNzAxOSAzOC40SDY0LjA5ODFDNjUuNDc5OSAzOC40IDY2LjYgMzcuMzI1NSA2Ni42IDM2QzY2LjYgMzQuNjc0NSA2NS40Nzk5IDMzLjYgNjQuMDk4MSAzMy42SDQ4LjcwMTlaTTQ2LjIgMjQuNkM0Ni4yIDIzLjI3NDUgNDcuMzA2NCAyMi4yIDQ4LjY3MTMgMjIuMkg4Mi4xMjg3QzgzLjQ5MzYgMjIuMiA4NC42IDIzLjI3NDUgODQuNiAyNC42Qzg0LjYgMjUuOTI1NSA4My40OTM2IDI3IDgyLjEyODcgMjdINDguNjcxM0M0Ny4zMDY0IDI3IDQ2LjIgMjUuOTI1NSA0Ni4yIDI0LjZaTTEzLjI2NDggMTAuOEMxMS41NzIxIDEwLjggMTAuMiAxMi4yMDc0IDEwLjIgMTMuOTQzNlYzNy45NjgzQzEwLjIgMzkuMDg1NCAxMC43NjkgNDAuMDY1NSAxMS42MjA2IDQwLjYyMTVDMTEuODg1OSA0MC43OTQ3IDEyLjIxMDMgNDAuODQ0NyAxMi41MTM1IDQwLjc1OUMxMi44MTY4IDQwLjY3MzQgMTMuMDcwNSA0MC40NjAyIDEzLjIxMiA0MC4xNzIxQzE0LjU5NyAzNy4zNTI1IDE2Ljg4OTkgMzUuMTUwOSAxOS42NDk1IDM0LjAxMDFDMjAuMDIzNSAzMy44NTU1IDIwLjI4NjcgMzMuNTA1NiAyMC4zMzc1IDMzLjA5NTRDMjAuMzg4NCAzMi42ODUyIDIwLjIxOSAzMi4yNzg4IDE5Ljg5NDggMzIuMDMzMUMxOC4xNzIzIDMwLjcyODEgMTcuMDU1OCAyOC42MjY0IDE3LjA1NTggMjYuMjUzOUMxNy4wNTU4IDIyLjI5MTUgMjAuMTcwMSAxOS4wODkyIDI0IDE5LjA4OTJDMjcuODI5OSAxOS4wODkyIDMwLjk0NDIgMjIuMjkxNSAzMC45NDQyIDI2LjI1MzlDMzAuOTQ0MiAyOC42MjY0IDI5LjgyNzcgMzAuNzI4MSAyOC4xMDUyIDMyLjAzMzFDMjcuNzgxIDMyLjI3ODggMjcuNjExNiAzMi42ODUyIDI3LjY2MjUgMzMuMDk1NEMyNy43MTMzIDMzLjUwNTYgMjcuOTc2NSAzMy44NTU1IDI4LjM1MDUgMzQuMDEwMUMzMS4xMTAxIDM1LjE1MDkgMzMuNDAzIDM3LjM1MjUgMzQuNzg4IDQwLjE3MjFDMzQuOTI5NSA0MC40NjAyIDM1LjE4MzIgNDAuNjczNCAzNS40ODY0IDQwLjc1OUMzNS43ODk3IDQwLjg0NDcgMzYuMTE0MSA0MC43OTQ3IDM2LjM3OTQgNDAuNjIxNUMzNy4yMzEgNDAuMDY1NSAzNy44IDM5LjA4NTQgMzcuOCAzNy45NjgzVjEzLjk0MzZDMzcuOCAxMi4yMDc0IDM2LjQyNzkgMTAuOCAzNC43MzUyIDEwLjhIMTMuMjY0OFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgoK);
57
- }
58
- 20% {
59
- transform: rotateY(90deg);
60
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA5NiA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDZDMCAyLjY4NjI5IDIuNjg2MjkgMCA2IDBIOTBDOTMuMzEzNyAwIDk2IDIuNjg2MjkgOTYgNlY1NEM5NiA1Ny4zMTM3IDkzLjMxMzcgNjAgOTAgNjBINkMyLjY4NjI5IDYwIDAgNTcuMzEzNyAwIDU0VjZaTTEwLjIgMTMuOEMxMC4yIDEyLjQ3NDUgMTEuMzEwMyAxMS40IDEyLjY4IDExLjRIODIuMTJDODMuNDg5NyAxMS40IDg0LjYgMTIuNDc0NSA4NC42IDEzLjhDODQuNiAxNS4xMjU1IDgzLjQ4OTcgMTYuMiA4Mi4xMiAxNi4ySDEyLjY4QzExLjMxMDMgMTYuMiAxMC4yIDE1LjEyNTUgMTAuMiAxMy44Wk04MC43IDQ5LjJDODIuODUzOSA0OS4yIDg0LjYgNDcuNDUzOSA4NC42IDQ1LjNDODQuNiA0My4xNDYxIDgyLjg1MzkgNDEuNCA4MC43IDQxLjRDNzguNTQ2MSA0MS40IDc2LjggNDMuMTQ2MSA3Ni44IDQ1LjNDNzYuOCA0Ny40NTM5IDc4LjU0NjEgNDkuMiA4MC43IDQ5LjJaTTEwLjIgNDYuMkMxMC4yIDQ0Ljg3NDUgMTEuMjk3NSA0My44IDEyLjY1MTQgNDMuOEgzNC4xNDg2QzM1LjUwMjUgNDMuOCAzNi42IDQ0Ljg3NDUgMzYuNiA0Ni4yQzM2LjYgNDcuNTI1NSAzNS41MDI1IDQ4LjYgMzQuMTQ4NiA0OC42SDEyLjY1MTRDMTEuMjk3NSA0OC42IDEwLjIgNDcuNTI1NSAxMC4yIDQ2LjJaTTEyLjY3NDIgMzIuNEMxMS4zMDc3IDMyLjQgMTAuMiAzMy40NzQ1IDEwLjIgMzQuOEMxMC4yIDM2LjEyNTUgMTEuMzA3NyAzNy4yIDEyLjY3NDIgMzcuMkg0My4xMjU4QzQ0LjQ5MjMgMzcuMiA0NS42IDM2LjEyNTUgNDUuNiAzNC44QzQ1LjYgMzMuNDc0NSA0NC40OTIzIDMyLjQgNDMuMTI1OCAzMi40SDEyLjY3NDJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
61
- }
62
- 25% {
63
- transform: rotateY(-15deg);
64
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA5NiA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDZDMCAyLjY4NjI5IDIuNjg2MjkgMCA2IDBIOTBDOTMuMzEzNyAwIDk2IDIuNjg2MjkgOTYgNlY1NEM5NiA1Ny4zMTM3IDkzLjMxMzcgNjAgOTAgNjBINkMyLjY4NjI5IDYwIDAgNTcuMzEzNyAwIDU0VjZaTTEwLjIgMTMuOEMxMC4yIDEyLjQ3NDUgMTEuMzEwMyAxMS40IDEyLjY4IDExLjRIODIuMTJDODMuNDg5NyAxMS40IDg0LjYgMTIuNDc0NSA4NC42IDEzLjhDODQuNiAxNS4xMjU1IDgzLjQ4OTcgMTYuMiA4Mi4xMiAxNi4ySDEyLjY4QzExLjMxMDMgMTYuMiAxMC4yIDE1LjEyNTUgMTAuMiAxMy44Wk04MC43IDQ5LjJDODIuODUzOSA0OS4yIDg0LjYgNDcuNDUzOSA4NC42IDQ1LjNDODQuNiA0My4xNDYxIDgyLjg1MzkgNDEuNCA4MC43IDQxLjRDNzguNTQ2MSA0MS40IDc2LjggNDMuMTQ2MSA3Ni44IDQ1LjNDNzYuOCA0Ny40NTM5IDc4LjU0NjEgNDkuMiA4MC43IDQ5LjJaTTEwLjIgNDYuMkMxMC4yIDQ0Ljg3NDUgMTEuMjk3NSA0My44IDEyLjY1MTQgNDMuOEgzNC4xNDg2QzM1LjUwMjUgNDMuOCAzNi42IDQ0Ljg3NDUgMzYuNiA0Ni4yQzM2LjYgNDcuNTI1NSAzNS41MDI1IDQ4LjYgMzQuMTQ4NiA0OC42SDEyLjY1MTRDMTEuMjk3NSA0OC42IDEwLjIgNDcuNTI1NSAxMC4yIDQ2LjJaTTEyLjY3NDIgMzIuNEMxMS4zMDc3IDMyLjQgMTAuMiAzMy40NzQ1IDEwLjIgMzQuOEMxMC4yIDM2LjEyNTUgMTEuMzA3NyAzNy4yIDEyLjY3NDIgMzcuMkg0My4xMjU4QzQ0LjQ5MjMgMzcuMiA0NS42IDM2LjEyNTUgNDUuNiAzNC44QzQ1LjYgMzMuNDc0NSA0NC40OTIzIDMyLjQgNDMuMTI1OCAzMi40SDEyLjY3NDJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
65
- }
66
- 30% {
67
- transform: rotateY(0deg);
68
- }
69
- 95% {
70
- opacity: 1;
71
- }
72
- 100% {
73
- background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA5NiA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDZDMCAyLjY4NjI5IDIuNjg2MjkgMCA2IDBIOTBDOTMuMzEzNyAwIDk2IDIuNjg2MjkgOTYgNlY1NEM5NiA1Ny4zMTM3IDkzLjMxMzcgNjAgOTAgNjBINkMyLjY4NjI5IDYwIDAgNTcuMzEzNyAwIDU0VjZaTTEwLjIgMTMuOEMxMC4yIDEyLjQ3NDUgMTEuMzEwMyAxMS40IDEyLjY4IDExLjRIODIuMTJDODMuNDg5NyAxMS40IDg0LjYgMTIuNDc0NSA4NC42IDEzLjhDODQuNiAxNS4xMjU1IDgzLjQ4OTcgMTYuMiA4Mi4xMiAxNi4ySDEyLjY4QzExLjMxMDMgMTYuMiAxMC4yIDE1LjEyNTUgMTAuMiAxMy44Wk04MC43IDQ5LjJDODIuODUzOSA0OS4yIDg0LjYgNDcuNDUzOSA4NC42IDQ1LjNDODQuNiA0My4xNDYxIDgyLjg1MzkgNDEuNCA4MC43IDQxLjRDNzguNTQ2MSA0MS40IDc2LjggNDMuMTQ2MSA3Ni44IDQ1LjNDNzYuOCA0Ny40NTM5IDc4LjU0NjEgNDkuMiA4MC43IDQ5LjJaTTEwLjIgNDYuMkMxMC4yIDQ0Ljg3NDUgMTEuMjk3NSA0My44IDEyLjY1MTQgNDMuOEgzNC4xNDg2QzM1LjUwMjUgNDMuOCAzNi42IDQ0Ljg3NDUgMzYuNiA0Ni4yQzM2LjYgNDcuNTI1NSAzNS41MDI1IDQ4LjYgMzQuMTQ4NiA0OC42SDEyLjY1MTRDMTEuMjk3NSA0OC42IDEwLjIgNDcuNTI1NSAxMC4yIDQ2LjJaTTEyLjY3NDIgMzIuNEMxMS4zMDc3IDMyLjQgMTAuMiAzMy40NzQ1IDEwLjIgMzQuOEMxMC4yIDM2LjEyNTUgMTEuMzA3NyAzNy4yIDEyLjY3NDIgMzcuMkg0My4xMjU4QzQ0LjQ5MjMgMzcuMiA0NS42IDM2LjEyNTUgNDUuNiAzNC44QzQ1LjYgMzMuNDc0NSA0NC40OTIzIDMyLjQgNDMuMTI1OCAzMi40SDEyLjY3NDJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
74
- border-radius: 0;
75
- -webkit-backdrop-filter: none;
76
- backdrop-filter: none;
77
- background-color: transparent;
78
- opacity: 0;
79
- }
80
- }
81
- :host .reticle {
82
- box-sizing: border-box;
83
- position: relative;
84
- width: 100%;
85
- height: 100%;
86
- border-radius: 50%;
87
- background-color: rgba(107, 114, 128, 0.3);
88
- background-position: center;
89
- background-size: contain;
90
- background-repeat: no-repeat;
91
- -webkit-backdrop-filter: blur(var(--mb-blur-filter));
92
- backdrop-filter: blur(var(--mb-blur-filter));
93
- transition: all 0.4s ease;
94
- }
95
- :host .reticle__cursor {
96
- box-sizing: border-box;
97
- display: block;
98
- position: absolute;
99
- width: 50%;
100
- height: 50%;
101
- left: 25%;
102
- top: 25%;
103
- border-radius: 50%;
104
- border-color: transparent;
105
- border-style: solid;
106
- border-width: 4px;
107
- transition: all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74);
108
- background-position: center;
109
- background-size: contain;
110
- background-repeat: no-repeat;
111
- }
112
- :host .reticle__cursor::before {
113
- content: "";
114
- position: absolute;
115
- width: 4px;
116
- height: 4px;
117
- top: 50%;
118
- left: 50%;
119
- transition: all 0.2s ease;
120
- transform-origin: center;
121
- transform: translate(-50%, -50%);
122
- background-color: #ffffff;
123
- border-radius: 50%;
124
- }
125
- :host .reticle__cursor::after {
126
- content: "";
127
- position: absolute;
128
- top: -4px;
129
- left: -4px;
130
- width: calc(50% + 4px);
131
- height: calc(50% + 4px);
132
- display: block;
133
- border-left-width: 4px;
134
- border-left-style: solid;
135
- border-left-color: #ffffff;
136
- border-top-width: 4px;
137
- border-top-style: solid;
138
- border-top-color: #ffffff;
139
- border-top-left-radius: 100%;
140
- transition: all 0.2s ease;
141
- opacity: 0;
142
- filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
143
- }
144
- :host .reticle__el {
145
- box-sizing: border-box;
146
- }
147
- :host .reticle__done {
148
- display: block;
149
- position: absolute;
150
- width: 50%;
151
- height: 50%;
152
- left: 25%;
153
- top: 25%;
154
- transition: all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74);
155
- transform-origin: center;
156
- transform: rotate(15deg) translateY(-5%);
157
- opacity: 0;
158
- }
159
- :host .reticle.is-default ~ .label[data-message=is-default], :host .reticle.is-detection ~ .label[data-message=is-detection], :host .reticle.is-classification ~ .label[data-message=is-classification], :host .reticle.is-done ~ .label[data-message=is-done], :host .reticle.is-done-all ~ .label[data-message=is-done-all], :host .reticle.is-flip ~ .label[data-message=is-flip], :host .reticle.is-error-move-farther ~ .label[data-message=is-error-move-farther], :host .reticle.is-error-move-closer ~ .label[data-message=is-error-move-closer], :host .reticle.is-error-adjust-angle ~ .label[data-message=is-error-adjust-angle] {
160
- opacity: 1;
161
- visibility: visible;
162
- margin: 8px 0 0 0;
163
- }
164
- :host .reticle.is-default .reticle__cursor {
165
- animation: reticle-rotation 1000ms ease-in-out infinite;
166
- border-style: none;
167
- }
168
- :host .reticle.is-default .reticle__el {
169
- position: absolute;
170
- display: block;
171
- width: 50%;
172
- height: 50%;
173
- overflow: hidden;
174
- }
175
- :host .reticle.is-default .reticle__el::after, :host .reticle.is-default .reticle__el::before {
176
- content: "";
177
- position: absolute;
178
- display: block;
179
- width: 100%;
180
- height: 100%;
181
- }
182
- :host .reticle.is-default .reticle__el:nth-child(1) {
183
- top: 0;
184
- left: 0;
185
- }
186
- :host .reticle.is-default .reticle__el:nth-child(1)::after, :host .reticle.is-default .reticle__el:nth-child(1)::before {
187
- top: 0;
188
- left: 0;
189
- border-top: 4px solid rgba(255, 255, 255, 0.5);
190
- border-left: 4px solid rgba(255, 255, 255, 0.5);
191
- border-top-left-radius: 100%;
192
- transform-origin: bottom right;
193
- }
194
- :host .reticle.is-default .reticle__el:nth-child(1)::after {
195
- transform: rotate(67.5deg);
196
- }
197
- :host .reticle.is-default .reticle__el:nth-child(1)::before {
198
- transform: rotate(-67.5deg);
199
- }
200
- :host .reticle.is-default .reticle__el:nth-child(2) {
201
- top: 0;
202
- right: 0;
203
- }
204
- :host .reticle.is-default .reticle__el:nth-child(2)::after, :host .reticle.is-default .reticle__el:nth-child(2)::before {
205
- top: 0;
206
- right: 0;
207
- border-top: 4px solid rgba(255, 255, 255, 0.5);
208
- border-right: 4px solid rgba(255, 255, 255, 0.5);
209
- border-top-right-radius: 100%;
210
- transform-origin: bottom left;
211
- }
212
- :host .reticle.is-default .reticle__el:nth-child(2)::after {
213
- transform: rotate(67.5deg);
214
- }
215
- :host .reticle.is-default .reticle__el:nth-child(2)::before {
216
- transform: rotate(-67.5deg);
217
- }
218
- :host .reticle.is-default .reticle__el:nth-child(3) {
219
- bottom: 0;
220
- right: 0;
221
- }
222
- :host .reticle.is-default .reticle__el:nth-child(3)::after, :host .reticle.is-default .reticle__el:nth-child(3)::before {
223
- bottom: 0;
224
- right: 0;
225
- transform-origin: top left;
226
- border-bottom: 4px solid rgba(255, 255, 255, 0.5);
227
- border-right: 4px solid rgba(255, 255, 255, 0.5);
228
- border-bottom-right-radius: 100%;
229
- }
230
- :host .reticle.is-default .reticle__el:nth-child(3)::after {
231
- transform: rotate(67.5deg);
232
- }
233
- :host .reticle.is-default .reticle__el:nth-child(3)::before {
234
- transform: rotate(-67.5deg);
235
- }
236
- :host .reticle.is-default .reticle__el:nth-child(4) {
237
- bottom: 0;
238
- left: 0;
239
- }
240
- :host .reticle.is-default .reticle__el:nth-child(4)::after, :host .reticle.is-default .reticle__el:nth-child(4)::before {
241
- bottom: 0;
242
- left: 0;
243
- border-bottom: 4px solid rgba(255, 255, 255, 0.5);
244
- border-left: 4px solid rgba(255, 255, 255, 0.5);
245
- border-bottom-left-radius: 100%;
246
- transform-origin: top right;
247
- }
248
- :host .reticle.is-default .reticle__el:nth-child(4)::after {
249
- transform: rotate(67.5deg);
250
- }
251
- :host .reticle.is-default .reticle__el:nth-child(4)::before {
252
- transform: rotate(-67.5deg);
253
- }
254
- :host .reticle.is-detection .reticle__cursor {
255
- border-color: rgba(255, 255, 255, 0.75);
256
- }
257
- :host .reticle.is-classification .reticle__cursor {
258
- animation: reticle-rotation 250ms cubic-bezier(0.4, 0.02, 1, 1) infinite;
259
- border-style: solid;
260
- border-color: rgba(255, 255, 255, 0.25);
261
- }
262
- :host .reticle.is-classification .reticle__cursor::after {
263
- opacity: 1;
264
- }
265
- :host .reticle.is-flip {
266
- animation: reticle-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both;
267
- }
268
- :host .reticle.is-flip .reticle__cursor {
269
- transform-style: preserve-3d;
270
- animation: reticle-cursor-horizontal-flip 3.5s cubic-bezier(0.4, 0.02, 1, 1) both;
271
- }
272
- :host .reticle.is-done, :host .reticle.is-done-all {
273
- background-color: #ffffff;
274
- box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.05);
275
- transition: all 125ms cubic-bezier(0.4, 0.02, 1, 1);
276
- }
277
- :host .reticle.is-done .reticle__done, :host .reticle.is-done-all .reticle__done {
278
- transform: rotate(0) translateY(0);
279
- opacity: 1;
280
- }
281
- :host .reticle.is-done-all .reticle__cursor::before {
282
- width: 150vw;
283
- height: 150vh;
284
- opacity: 0;
285
- transition: all 200ms ease;
286
- }
287
- :host .reticle.is-error-move-farther {
288
- background-color: rgba(255, 45, 85, 0.75);
289
- }
290
- :host .reticle.is-error-move-farther .reticle__cursor {
291
- border-color: rgba(255, 255, 255, 0.75);
292
- width: 40%;
293
- height: 40%;
294
- left: 30%;
295
- top: 30%;
296
- transition: all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74);
297
- }
298
- :host .reticle.is-error-move-closer {
299
- background-color: rgba(255, 45, 85, 0.75);
300
- }
301
- :host .reticle.is-error-move-closer .reticle__cursor {
302
- border-color: rgba(255, 255, 255, 0.75);
303
- width: 60%;
304
- height: 60%;
305
- left: 20%;
306
- top: 20%;
307
- transition: all 125ms cubic-bezier(0.42, 0.01, 0.35, 1.74);
308
- }
309
- :host .reticle.is-error-adjust-angle {
310
- background-color: rgba(255, 45, 85, 0.75);
311
- }
312
- :host .reticle.is-error-adjust-angle .reticle__cursor {
313
- border-color: rgba(255, 255, 255, 0.75);
314
- animation: reticle-horizontal-shrink 600ms cubic-bezier(0.42, 0.01, 0.35, 1.74);
315
- }
316
-
317
- /* --- Rectangle --- */
318
- /**
319
- * Copyright (c) Microblink Ltd. All rights reserved.
320
- *
321
- * SASS variables, not customizable via CSS variables
322
- */
323
- /**
324
- * Camera experiences
325
- */
326
- @keyframes rectangle-shrink-animation {
327
- 0% {
328
- transform: scale(1);
329
- }
330
- 50% {
331
- transform: scale(0.95);
332
- }
333
- 100% {
334
- transform: scale(1);
335
- }
336
- }
337
- @keyframes scanning-line-animation {
338
- 0% {
339
- top: -60%;
340
- }
341
- 45% {
342
- transform: matrix(1, 0, 0, 1, 0, 0);
343
- }
344
- 50% {
345
- top: 120%;
346
- transform: matrix(1, 0, 0, -1, 0, 0);
347
- }
348
- 95% {
349
- transform: matrix(1, 0, 0, -1, 0, 0);
350
- }
351
- 100% {
352
- top: -60%;
353
- transform: matrix(1, 0, 0, 1, 0, 0);
354
- }
355
- }
356
- :host #barcode .rectangle {
357
- width: 100%;
358
- height: 100%;
359
- box-sizing: border-box;
360
- position: relative;
361
- background-color: transparent;
362
- background-position: center;
363
- background-repeat: no-repeat;
364
- transition: all 0.3s ease-in;
365
- }
366
- :host #barcode .rectangle__cursor {
367
- width: 100%;
368
- height: 100%;
369
- border-radius: 8px;
370
- position: relative;
371
- }
372
- :host #barcode .rectangle__el {
373
- box-sizing: border-box;
374
- position: absolute;
375
- display: block;
376
- width: 50%;
377
- height: 50%;
378
- overflow: hidden;
379
- }
380
- :host #barcode .rectangle__el::after, :host #barcode .rectangle__el::before {
381
- content: "";
382
- position: absolute;
383
- display: block;
384
- width: 32px;
385
- height: 32px;
386
- }
387
- :host #barcode .rectangle__el:nth-child(1) {
388
- top: 0;
389
- left: 0;
390
- }
391
- :host #barcode .rectangle__el:nth-child(1)::after, :host #barcode .rectangle__el:nth-child(1)::before {
392
- top: 0;
393
- left: 0;
394
- border-top: 4px solid white;
395
- border-left: 4px solid white;
396
- border-top-left-radius: 8px;
397
- box-shadow: inset 3px 3px 8px -6px rgba(0, 0, 0, 0.2), -3px -3px 8px -6px rgba(0, 0, 0, 0.2);
398
- transition: border-color 0.15s linear;
399
- }
400
- :host #barcode .rectangle__el:nth-child(2) {
401
- top: 0;
402
- right: 0;
403
- }
404
- :host #barcode .rectangle__el:nth-child(2)::after, :host #barcode .rectangle__el:nth-child(2)::before {
405
- top: 0;
406
- right: 0;
407
- border-top: 4px solid white;
408
- border-right: 4px solid white;
409
- border-top-right-radius: 8px;
410
- box-shadow: inset -3px 3px 8px -6px rgba(0, 0, 0, 0.2), 3px -3px 8px -6px rgba(0, 0, 0, 0.2);
411
- transition: border-color 0.15s linear;
412
- }
413
- :host #barcode .rectangle__el:nth-child(3) {
414
- bottom: 0;
415
- right: 0;
416
- }
417
- :host #barcode .rectangle__el:nth-child(3)::after, :host #barcode .rectangle__el:nth-child(3)::before {
418
- bottom: 0;
419
- right: 0;
420
- border-bottom: 4px solid white;
421
- border-right: 4px solid white;
422
- border-bottom-right-radius: 8px;
423
- box-shadow: inset -3px -3px 8px -6px rgba(0, 0, 0, 0.2), 3px 3px 8px -6px rgba(0, 0, 0, 0.2);
424
- transition: border-color 0.15s linear;
425
- }
426
- :host #barcode .rectangle__el:nth-child(4) {
427
- bottom: 0;
428
- left: 0;
429
- }
430
- :host #barcode .rectangle__el:nth-child(4)::after, :host #barcode .rectangle__el:nth-child(4)::before {
431
- bottom: 0;
432
- left: 0;
433
- border-bottom: 4px solid white;
434
- border-left: 4px solid white;
435
- border-bottom-left-radius: 8px;
436
- box-shadow: inset 3px -3px 8px -6px rgba(0, 0, 0, 0.2), -3px 3px 8px -6px rgba(0, 0, 0, 0.2);
437
- transition: border-color 0.15s linear;
438
- }
439
- :host #barcode .rectangle.is-default ~ .label[data-message=is-default], :host #barcode .rectangle.is-detection ~ .label[data-message=is-detection], :host #barcode .rectangle.is-classification ~ .label[data-message=is-classification], :host #barcode .rectangle.is-done ~ .label[data-message=is-done], :host #barcode .rectangle.is-done-all ~ .label[data-message=is-done-all], :host #barcode .rectangle.is-flip ~ .label[data-message=is-flip], :host #barcode .rectangle.is-error-move-farther ~ .label[data-message=is-error-move-farther], :host #barcode .rectangle.is-error-move-closer ~ .label[data-message=is-error-move-closer], :host #barcode .rectangle.is-error-adjust-angle ~ .label[data-message=is-error-adjust-angle] {
440
- opacity: 1;
441
- visibility: visible;
442
- margin: 8px 0 0 0;
443
- }
444
- :host #barcode .rectangle.is-done, :host #barcode .rectangle.is-done-all {
445
- -webkit-animation-delay: 0;
446
- -webkit-animation-duration: 250ms;
447
- -webkit-animation-name: rectangle-shrink-animation;
448
- -moz-animation-delay: 0;
449
- -moz-animation-duration: 250ms;
450
- -moz-animation-name: rectangle-shrink-animation;
451
- animation-delay: 0;
452
- animation-duration: 250ms;
453
- animation-name: rectangle-shrink-animation;
454
- }
455
-
456
- :host .scanning-line {
457
- opacity: 0;
458
- visibility: hidden;
459
- position: absolute;
460
- width: 100%;
461
- height: 115px;
462
- left: 0px;
463
- top: -125px;
464
- background: radial-gradient(100% 100% at 49.85% 100%, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
465
- filter: blur(var(--mb-blur-scanning-line));
466
- }
467
- :host .scanning-line.is-active {
468
- opacity: 1;
469
- visibility: visible;
470
- animation: scanning-line-animation 2400ms cubic-bezier(0.13, 0.71, 1, 0.82) infinite;
471
- }
472
-
473
- *::after,
474
- *::before {
475
- box-sizing: border-box;
476
- }
477
-
478
- :host {
479
- display: block;
480
- }
481
- :host .gradient-overlay {
482
- position: absolute;
483
- width: 100%;
484
- height: 112px;
485
- background: linear-gradient(180deg, rgba(0, 0, 0, 0.35625) 0%, rgba(0, 0, 0, 0.25) 20.83%, rgba(0, 0, 0, 0) 100%);
486
- }
487
- :host .gradient-overlay.bottom {
488
- bottom: 0;
489
- transform: matrix(1, 0, 0, -1, 0, 0);
490
- }
491
-
492
- :host(.is-error) mb-camera-toolbar {
493
- display: none;
494
- }
495
-
496
- :host::after {
497
- width: 124px;
498
- height: 58px;
499
- position: absolute;
500
- bottom: 10px;
501
- left: calc(50% - 62px);
502
- background: no-repeat center url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCA4NSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjA4NzcgNi41NzIwNEMyMS40MDE3IDYuNTcyMDQgMjIuMjY1NyA1LjY4MTA0IDIyLjI2NTcgNC40MTIwNEMyMi4yNjU3IDMuMTI1MDQgMjEuNDEwNyAyLjI2MTA0IDIwLjA4NzcgMi4yNjEwNEgxNy40ODY3VjguODQwMDRIMTguNjM4N1Y2LjU3MjA0SDIwLjA4NzdaTTE5Ljg2MjcgMy4yODcwNEMyMC42Mjc3IDMuMjg3MDQgMjEuMDU5NyAzLjY4MzA0IDIxLjA1OTcgNC40MDMwNEMyMS4wNTk3IDUuMTIzMDQgMjAuNjM2NyA1LjU0NjA0IDE5Ljg0NDcgNS41NDYwNEgxOC42Mzg3VjMuMjg3MDRIMTkuODYyN1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yMi43NzIgNi42MDgwNEMyMi43NzIgNy45OTQwNCAyMy43NzEgOC45NDgwNCAyNS4xNDggOC45NDgwNEMyNi41MjUgOC45NDgwNCAyNy41MjQgNy45OTQwNCAyNy41MjQgNi42MDgwNEMyNy41MjQgNS4yMjIwNCAyNi41MjUgNC4yNjgwNCAyNS4xNDggNC4yNjgwNEMyMy43NzEgNC4yNjgwNCAyMi43NzIgNS4yMjIwNCAyMi43NzIgNi42MDgwNFpNMjMuODcgNi42MDgwNEMyMy44NyA1Ljc5ODA0IDI0LjM5MiA1LjI0OTA0IDI1LjE0OCA1LjI0OTA0QzI1LjkwNCA1LjI0OTA0IDI2LjQyNiA1Ljc5ODA0IDI2LjQyNiA2LjYwODA0QzI2LjQyNiA3LjQxODA0IDI1LjkwNCA3Ljk2NzA0IDI1LjE0OCA3Ljk2NzA0QzI0LjM5MiA3Ljk2NzA0IDIzLjg3IDcuNDE4MDQgMjMuODcgNi42MDgwNFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yOS4zMzU2IDguODQwMDRIMzAuNDA2NkwzMS4wMTg2IDYuOTMyMDRDMzEuMjQzNiA2LjIwMzA0IDMxLjMyNDYgNS44ODgwNCAzMS4zNjk2IDUuNjgxMDRDMzEuNDA1NiA1LjkwNjA0IDMxLjUwNDYgNi4zMjkwNCAzMS42ODQ2IDYuOTE0MDRMMzIuMjk2NiA4Ljg0MDA0SDMzLjMyMjZMMzQuODYxNiA0LjM5NDA0SDMzLjcwMDZMMzMuMTA2NiA2LjMwMjA0QzMzLjAyNTYgNi41ODEwNCAzMi44ODE2IDcuMTEyMDQgMzIuODA5NiA3LjQ0NTA0QzMyLjc1NTYgNy4xNDgwNCAzMi41NzU2IDYuNDgyMDQgMzIuNTIxNiA2LjMwMjA0TDMxLjkyNzYgNC4zOTQwNEgzMC44MTE2TDMwLjE5OTYgNi4zMDIwNEMzMC4wNTU2IDYuNzQzMDQgMjkuOTc0NiA3LjAyMjA0IDI5Ljg5MzYgNy40NTQwNEMyOS44MTI2IDcuMDQwMDQgMjkuNzIyNiA2LjY1MzA0IDI5LjYyMzYgNi4zMDIwNEwyOS4wMzg2IDQuMzk0MDRIMjcuODk1NkwyOS4zMzU2IDguODQwMDRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMzcuNDc1OCA4Ljk1NzA0QzM4LjYzNjggOC45NTcwNCAzOS40NDY4IDguMzcyMDQgMzkuNjM1OCA3LjQwMDA0SDM4LjYxODhDMzguNDkyOCA3LjgyMzA0IDM4LjA5NjggOC4wNTcwNCAzNy40OTM4IDguMDU3MDRDMzYuNzY0OCA4LjA1NzA0IDM2LjM1MDggNy42NjEwNCAzNi4yNjk4IDYuODc4MDRMMzkuNjE3OCA2Ljg2OTA0VjYuNTM2MDRDMzkuNjE3OCA1LjE1MDA0IDM4Ljc3MTggNC4yNTkwNCAzNy40Mzk4IDQuMjU5MDRDMzYuMTM0OCA0LjI1OTA0IDM1LjIyNTggNS4yMjIwNCAzNS4yMjU4IDYuNjE3MDRDMzUuMjI1OCA3Ljk5NDA0IDM2LjE1MjggOC45NTcwNCAzNy40NzU4IDguOTU3MDRaTTM3LjQ0ODggNS4xNTkwNEMzOC4xMDU4IDUuMTU5MDQgMzguNTI4OCA1LjU2NDA0IDM4LjUyODggNi4xNzYwNEgzNi4yOTY4QzM2LjQwNDggNS41MTAwNCAzNi44MDA4IDUuMTU5MDQgMzcuNDQ4OCA1LjE1OTA0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQzLjQ2NjUgNC4zNzYwNEM0My4yODY1IDQuMzMxMDQgNDMuMTMzNSA0LjMxMzA0IDQyLjk4MDUgNC4zMTMwNEM0Mi4zODY1IDQuMzEzMDQgNDEuOTYzNSA0LjYxMDA0IDQxLjc3NDUgNS4wNTEwNEw0MS43MTE1IDQuNDAzMDRINDAuNjc2NVY4Ljg0MDA0SDQxLjc3NDVWNi42ODAwNEM0MS43NzQ1IDUuODE2MDQgNDIuMjY5NSA1LjM5MzA0IDQzLjA2MTUgNS4zOTMwNEg0My40NjY1VjQuMzc2MDRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNDYuMjI5MyA4Ljk1NzA0QzQ3LjM5MDMgOC45NTcwNCA0OC4yMDAzIDguMzcyMDQgNDguMzg5MyA3LjQwMDA0SDQ3LjM3MjNDNDcuMjQ2MyA3LjgyMzA0IDQ2Ljg1MDMgOC4wNTcwNCA0Ni4yNDczIDguMDU3MDRDNDUuNTE4MyA4LjA1NzA0IDQ1LjEwNDMgNy42NjEwNCA0NS4wMjMzIDYuODc4MDRMNDguMzcxMyA2Ljg2OTA0VjYuNTM2MDRDNDguMzcxMyA1LjE1MDA0IDQ3LjUyNTMgNC4yNTkwNCA0Ni4xOTMzIDQuMjU5MDRDNDQuODg4MyA0LjI1OTA0IDQzLjk3OTMgNS4yMjIwNCA0My45NzkzIDYuNjE3MDRDNDMuOTc5MyA3Ljk5NDA0IDQ0LjkwNjMgOC45NTcwNCA0Ni4yMjkzIDguOTU3MDRaTTQ2LjIwMjMgNS4xNTkwNEM0Ni44NTkzIDUuMTU5MDQgNDcuMjgyMyA1LjU2NDA0IDQ3LjI4MjMgNi4xNzYwNEg0NS4wNTAzQzQ1LjE1ODMgNS41MTAwNCA0NS41NTQzIDUuMTU5MDQgNDYuMjAyMyA1LjE1OTA0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjI1NzEgOC45NTcwNEM1MS45MzIxIDguOTU3MDQgNTIuNTA4MSA4LjY2MDA0IDUyLjc3ODEgOC4xNDcwNEw1Mi44NTAxIDguODQwMDRINTMuODU4MVYyLjE0NDA0SDUyLjc2OTFWNC45NjEwNEM1Mi40OTAxIDQuNTIwMDQgNTEuOTQxMSA0LjI1OTA0IDUxLjMyMDEgNC4yNTkwNEM0OS45NzkxIDQuMjU5MDQgNDkuMTY5MSA1LjI0OTA0IDQ5LjE2OTEgNi42MzUwNEM0OS4xNjkxIDguMDEyMDQgNDkuOTcwMSA4Ljk1NzA0IDUxLjI1NzEgOC45NTcwNFpNNTEuNTAwMSA3Ljk0OTA0QzUwLjczNTEgNy45NDkwNCA1MC4yNjcxIDcuMzkxMDQgNTAuMjY3MSA2LjU5OTA0QzUwLjI2NzEgNS44MDcwNCA1MC43MzUxIDUuMjQwMDQgNTEuNTAwMSA1LjI0MDA0QzUyLjI2NTEgNS4yNDAwNCA1Mi43NjAxIDUuNzk4MDQgNTIuNzYwMSA2LjU5OTA0QzUyLjc2MDEgNy40MDAwNCA1Mi4yNjUxIDcuOTQ5MDQgNTEuNTAwMSA3Ljk0OTA0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTU4LjgwNTEgOC44NDAwNEw1OC44NzcxIDguMTQ3MDRDNTkuMTM4MSA4LjY2MDA0IDU5LjcwNTEgOC45NTcwNCA2MC4zNzExIDguOTU3MDRDNjEuNjQ5MSA4Ljk1NzA0IDYyLjQ4NjEgOC4wMTIwNCA2Mi40ODYxIDYuNjQ0MDRDNjIuNDg2MSA1LjI0MDA0IDYxLjcxMjEgNC4yNTAwNCA2MC40NDMxIDQuMjUwMDRDNTkuNzY4MSA0LjI1MDA0IDU5LjE3NDEgNC41NDcwNCA1OC44ODYxIDUuMDQyMDRWMi4xNDQwNEg1Ny43ODgxVjguODQwMDRINTguODA1MVpNNTguODk1MSA2LjU5OTA0QzU4Ljg5NTEgNS43OTgwNCA1OS4zOTAxIDUuMjQwMDQgNjAuMTQ2MSA1LjI0MDA0QzYwLjkyMDEgNS4yNDAwNCA2MS4zNzkxIDUuODA3MDQgNjEuMzc5MSA2LjU5OTA0QzYxLjM3OTEgNy4zOTEwNCA2MC45MjAxIDcuOTQ5MDQgNjAuMTQ2MSA3Ljk0OTA0QzU5LjM5MDEgNy45NDkwNCA1OC44OTUxIDcuNDAwMDQgNTguODk1MSA2LjU5OTA0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTYyLjk4NjQgMTAuOTAxQzYzLjIyOTQgMTAuOTY0IDYzLjQ5OTQgMTEgNjMuODA1NCAxMUM2NC41MzQ0IDExIDY1LjAwMjQgMTAuNjU4IDY1LjMzNTQgOS44MzAwNEw2Ny41MTM0IDQuMzk0MDRINjYuMzc5NEw2NS4xNzM0IDcuNjM0MDRMNjQuMDMwNCA0LjM5NDA0SDYyLjg2OTRMNjQuNjYwNCA5LjAyOTA0TDY0LjUzNDQgOS4zNjIwNEM2NC4zNDU0IDkuODg0MDQgNjQuMDc1NCA5Ljk4MzA0IDYzLjY0MzQgOS45ODMwNEg2Mi45ODY0VjEwLjkwMVoiIGZpbGw9IndoaXRlIi8+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF81NjZfMTU1NDMpIj4KPHBhdGggZD0iTTQuODE2MzMgMjIuNTk1OUwxLjkyNTE5IDE1LjE2MzZIMFYyNC44MzY2SDEuMzEzNzdWMTcuMjI4OUw0LjMwOTkzIDI0Ljg3NzRINS4yNjg0N0w4LjI5MTQxIDE3LjE2MDhWMjQuODM2Nkg5LjY0NTcxVjE1LjE2MzZINy43MDc0N0w0LjgxNjMzIDIyLjU5NTlaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTMuNjUyOSAxNS4xNjM2SDEyLjIzMTNWMjQuODM2NkgxMy42NTI5VjE1LjE2MzZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMzIuNjYyOCAxOS45OTEzQzMzLjA1MDIgMTkuNDQ3OSAzMy4yNTY5IDE4Ljc5MjcgMzMuMjUyNyAxOC4xMjE0QzMzLjI1MjcgMTcuMzI5NyAzMi45MTI2IDE2LjU5MTQgMzIuMjk0OCAxNi4wNDE3QzMxLjY1NzcgMTUuNDc1NiAzMC43NzIxIDE1LjE2NSAyOS43OTggMTUuMTY1SDI1Ljg3MzdWMjQuODM4SDI3LjI5NTNWMjEuMzc4NkgyOS41OTc5TDMxLjYwNjYgMjQuODM2NkgzMy4yOTM5TDMxLjE0NDIgMjEuMTQwOUMzMS43NTA3IDIwLjkxODMgMzIuMjc4OSAyMC41MTgzIDMyLjY2MjggMTkuOTkxM1pNMzEuODAzOSAxOC4xMzVDMzEuODA3MSAxOC4zODg5IDMxLjc2MDIgMTguNjQwOSAzMS42NjYgMTguODc1OUMzMS41NzE3IDE5LjExMSAzMS40MzIgMTkuMzI0NSAzMS4yNTUyIDE5LjUwMzdDMzAuODkzMyAxOS44NjU4IDMwLjM4NTUgMjAuMDY1MiAyOS44MjUyIDIwLjA2NTJIMjcuMjkzNVYxNi40OTE3SDI5LjgyNTJDMzAuOTUzMiAxNi40OTE3IDMxLjgwMzkgMTcuMTk3NyAzMS44MDM5IDE4LjEzNVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zOS4yODAzIDE1QzM3Ljk0NjEgMTUgMzYuNzQzIDE1LjUyNDYgMzUuODg4IDE2LjQ3NjZDMzUuMDY1NSAxNy4zOTQ1IDM0LjYxMjMgMTguNjQ1OSAzNC42MTIzIDE5Ljk5OThDMzQuNjEyMyAyMS4zNTM4IDM1LjA2NTUgMjIuNjEyIDM1Ljg4OCAyMy41Mjg1QzM2Ljc0MDEgMjQuNDc3MiAzNy45NDQ3IDI0Ljk5ODYgMzkuMjgwMyAyNC45OTg2QzQwLjYyMTUgMjQuOTk4NiA0MS44MzA2IDI0LjQ3NTggNDIuNjg0MiAyMy41Mjg1QzQzLjUwODEgMjIuNjEzIDQzLjk2MTYgMjEuMzU5OSA0My45NjE2IDE5Ljk5OThDNDMuOTYxNiAxOC42Mzk4IDQzLjUwODEgMTcuMzkzOCA0Mi42ODQ1IDE2LjQ3NjZDNDEuODI5MiAxNS41MjM1IDQwLjYyMDEgMTUgMzkuMjgwMyAxNVpNMzkuMjgwMyAyMy42NDQ2QzM4Ljg0MjQgMjMuNjQ2MyAzOC40MDkzIDIzLjU1MTcgMzguMDEwNyAyMy4zNjc0QzM3LjYxMjEgMjMuMTgzIDM3LjI1NzMgMjIuOTEzMiAzNi45NzA2IDIyLjU3NjVDMzYuMzg0MiAyMS44OTkxIDM2LjA2MSAyMC45ODM3IDM2LjA2MSAxOS45OTk4QzM2LjA2MSAxOS4wMTU5IDM2LjM4NDIgMTguMTA3NyAzNi45NzA2IDE3LjQyODJDMzcuNTY3OSAxNi43MzYyIDM4LjM4OCAxNi4zNTUgMzkuMjgwMyAxNi4zNTVDNDAuMTcyNiAxNi4zNTUgNDAuOTk2MSAxNi43MzYyIDQxLjU5NyAxNy40Mjg2QzQyLjE4NzYgMTguMTA5OCA0Mi41MTMyIDE5LjAyMiA0Mi41MTMyIDE5Ljk5OThDNDIuNTEzMiAyMC45Nzc2IDQyLjE4OCAyMS44OTc3IDQxLjU5NyAyMi41NzY1QzQxLjMwODcgMjIuOTEzMiA0MC45NTI3IDIzLjE4MjkgNDAuNTUyOSAyMy4zNjcyQzQwLjE1MzIgMjMuNTUxNSAzOS43MTkxIDIzLjY0NjEgMzkuMjgwMyAyMy42NDQ2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjc1NCAxOS43NjI1QzUyLjU4MzIgMTkuMjk2NCA1My4wNzU5IDE4LjQ3ODkgNTMuMDc1OSAxNy41NjMxQzUzLjA3NTkgMTYuMTUwMyA1MS44NDI1IDE1LjE2MzYgNTAuMDgwNSAxNS4xNjM2SDQ1LjkxMTVWMjQuODM2Nkg1MC4yODEzQzUyLjAxNzMgMjQuODM2NiA1My4yNzY4IDIzLjY2MTIgNTMuMjc2OCAyMi4wNDE5QzUzLjI3ODIgMjEuMDcwNiA1Mi42OTYgMjAuMjAzMiA1MS43NTQgMTkuNzYyNVpNNTAuMzIyNiAyMy41MDg4SDQ3LjMzMjRWMjAuNTA3Nkg1MC4xMTkyQzUxLjE0MTIgMjAuNTA3NiA1MS44Mjg0IDIxLjA2NDUgNTEuODI4NCAyMS44OTI4QzUxLjgyOTUgMjIuODc0MSA1MS4yMzc4IDIzLjUwODggNTAuMzIyNiAyMy41MDg4Wk00OS45NTg1IDE5LjIwNkg0Ny4zMzI0VjE2LjQ5MTdINTAuMTE5MkM1MS4wMzU1IDE2LjQ5MTcgNTEuNjI2MSAxNi45NzY1IDUxLjYyNjEgMTcuNzI3QzUxLjYyNzIgMTguNDYzOCA1MS4xMTEyIDE5LjIwNjcgNDkuOTU4NSAxOS4yMDY3VjE5LjIwNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik01Ni43NDYyIDE1LjE2MzZINTUuMzI0MlYyNC44MzY2SDYxLjU0NTZWMjMuNDgxNkg1Ni43NDYyVjE1LjE2MzZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNjQuNTUzOCAxNS4xNjM2SDYzLjEzMThWMjQuODM2Nkg2NC41NTM4VjE1LjE2MzZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNzMuNDg0NCAyMi4zMjAyTDY4LjUyOTkgMTUuMTkzN0w2OC41MDg4IDE1LjE2MzZINjcuMTM0NFYyNC44MzY2SDY4LjQ3NTNWMTcuMzI1N0w3My42OTM3IDI0LjgzNjZINzQuODI1M1YxNS4xNjM2SDczLjQ4NDRWMjIuMzIwMloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik04MS4xNzc4IDE5LjQxOTRMODQuODk4NSAxNS4xNjM2SDgzLjE1OTRMNzguODI1OSAyMC4xMTE0VjE1LjE2MzZINzcuNDAzOVYyNC44MzY2SDc4LjgyNTlWMjIuMDI4Nkw4MC4yMDUyIDIwLjQ2ODJMODMuMjc2MSAyNC44MzY2SDg1TDgxLjE3NzggMTkuNDE5NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yMi45MTM0IDIxLjU2MzlDMjIuMjc5MSAyMy4wMzE4IDIxLjQ2NTQgMjMuNjU4MyAyMC4xODY5IDIzLjY1ODNDMTkuMzEzMyAyMy42NTgzIDE4LjUxMjkgMjMuMjc4NSAxNy45MzM2IDIyLjU4OTRDMTcuMzYzIDIxLjkxMDYgMTcuMDQ4NyAyMC45OTA5IDE3LjA0ODcgMTkuOTk5OEMxNy4wNDg3IDE5LjAxNjMgMTcuMzU2IDE4LjEwMjcgMTcuOTEzNSAxNy40MjcxQzE4LjQ4NDQgMTYuNzM1OCAxOS4yNzczIDE2LjM1NSAyMC4xNDY3IDE2LjM1NUMyMS4zMjQ0IDE2LjM1NSAyMi4xODU3IDE2Ljk1MiAyMi43Nzk5IDE4LjE4MDFMMjIuODA1MyAxOC4yMzIxSDI0LjI5MjhMMjQuMjg1NyAxOC4xOTAxQzI0LjI1MDUgMTcuOTg2NSAyNC4xNzcyIDE3Ljc5NTcgMjQuMTA2MyAxNy42MDg2TDI0LjA4MzQgMTcuNTQ4M0MyMy43NzkzIDE2Ljc3ODcgMjMuMjQ3MiAxNi4xMjQ1IDIyLjU2MSAxNS42NzY2QzIxLjg3NTYgMTUuMjI3NyAyMS4wNDk2IDE1IDIwLjEwNjIgMTVDMTguODE2NCAxNSAxNy42NTI3IDE1LjUyNDYgMTYuODI4OCAxNi40Nzc2QzE2LjAzNjIgMTcuMzk0OCAxNS41OTk2IDE4LjY0NTkgMTUuNTk5NiAxOS45OTk4QzE1LjU5OTYgMjEuMzcyIDE2LjAzODcgMjIuNjI4NSAxNi44MzU5IDIzLjUzNzhDMTcuNjc0NiAyNC40OTQ0IDE4LjgyMzggMjUgMjAuMTU5NyAyNUMyMS4wOTU3IDI1IDIxLjkxODIgMjQuNzUzMyAyMi42MDQ3IDI0LjI2NzFDMjIuNzIwMSAyNC4xODU0IDIyLjgzMTEgMjQuMDk3NSAyMi45MzcxIDI0LjAwMzVDMjMuNjMzMSAyMy4zODc1IDI0LjE2MDMgMjIuNTExNiAyNC4zNDY3IDIxLjY2TDI0LjM1MTMgMjEuNjM3N0MyNC4zNTc2IDIxLjYwODMgMjQuMzYzMiAyMS41Nzg5IDI0LjM2ODIgMjEuNTQ5NUwyNC4zNzUyIDIxLjUwNzZIMjIuOTM2TDIyLjkxMzQgMjEuNTYzOVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNTY2XzE1NTQzIj4KPHJlY3Qgd2lkdGg9Ijg1IiBoZWlnaHQ9IjEwIiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxNSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
503
- background-size: 100%;
504
- content: " ";
505
- }
506
-
507
- :host(.no-overlay)::after {
508
- display: none;
509
- }
510
-
511
- /**
512
- * Wrapper
513
- */
514
- :host #card-identity,
515
- :host #barcode {
516
- position: absolute;
517
- top: 0;
518
- bottom: 0;
519
- left: 0;
520
- right: 0;
521
- display: none;
522
- }
523
- :host #card-identity.visible,
524
- :host #barcode.visible {
525
- display: block;
526
- }
527
- :host .message {
528
- display: block;
529
- opacity: 0;
530
- visibility: hidden;
531
- position: absolute;
532
- transform-origin: center;
533
- transform: translate(-50%, 0);
534
- margin: 0;
535
- padding: 8px 12px;
536
- font-size: 1em;
537
- font-weight: 600;
538
- text-align: center;
539
- text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
540
- white-space: nowrap;
541
- color: #fff;
542
- background-color: rgba(107, 114, 128, 0.7);
543
- -webkit-backdrop-filter: blur(var(--mb-blur-filter));
544
- backdrop-filter: blur(var(--mb-blur-filter));
545
- border-radius: 8px;
546
- transition: all 200ms cubic-bezier(0.42, 0.01, 0.35, 1.74);
547
- }
548
- :host .message.is-active {
549
- opacity: 1;
550
- visibility: visible;
551
- margin: 8px 0 0 0;
552
- }
553
- :host #card-identity .reticle-container {
554
- position: absolute;
555
- top: 50%;
556
- left: 50%;
557
- width: var(--mb-reticle-size);
558
- height: var(--mb-reticle-size);
559
- transform-origin: center;
560
- transform: translate(-50%, -50%);
561
- perspective: 600px;
562
- }
563
- :host #card-identity .reticle-container .message {
564
- top: 100%;
565
- left: 50%;
566
- }
567
- :host #barcode .rectangle-container {
568
- position: absolute;
569
- top: 112px;
570
- left: 20px;
571
- width: calc(100% - 40px);
572
- height: calc(100% - 224px);
573
- perspective: 600px;
574
- }
575
- :host #barcode .rectangle-container .message {
576
- top: -70px;
577
- left: 50%;
578
- }
579
-
580
- @media only screen and (min-width: 568px) and (orientation: landscape) {
581
- :host::after {
582
- bottom: 40px;
583
- left: unset;
584
- right: 5%;
585
- }
586
- :host .gradient-overlay {
587
- height: 88px;
588
- }
589
- :host #barcode .rectangle-container {
590
- top: 88px;
591
- left: 186px;
592
- width: calc(100% - 372px);
593
- height: calc(100% - 128px);
594
- }
595
- :host #barcode .rectangle-container .message {
596
- top: -50px;
597
- left: 50%;
598
- }
599
- }
600
- @media only screen and (min-width: 768px) and (orientation: portrait) {
601
- :host::after {
602
- bottom: 10px;
603
- left: calc(50% - 61px);
604
- }
605
- :host .gradient-overlay {
606
- height: 112px;
607
- }
608
- :host #barcode .rectangle-container {
609
- top: 112px;
610
- left: 50px;
611
- width: calc(100% - 100px);
612
- height: calc(100% - 224px);
613
- perspective: 600px;
614
- }
615
- :host #barcode .rectangle-container .message {
616
- top: -70px;
617
- left: 50%;
618
- }
619
- }
620
- @media only screen and (min-width: 1024px) and (orientation: landscape) {
621
- :host::after {
622
- bottom: 10px;
623
- left: calc(50% - 61px);
624
- }
625
- :host .gradient-overlay {
626
- height: 112px;
627
- }
628
- :host #barcode .rectangle-container {
629
- top: 112px;
630
- left: 50px;
631
- width: calc(100% - 100px);
632
- height: calc(100% - 224px);
633
- perspective: 600px;
634
- }
635
- :host #barcode .rectangle-container .message {
636
- top: -70px;
637
- left: 50%;
638
- }
639
- }
640
- @media only screen and (min-width: 1280px) {
641
- :host::after {
642
- bottom: 10px;
643
- left: calc(50% - 61px);
644
- }
645
- :host .gradient-overlay {
646
- height: 112px;
647
- }
648
- :host #barcode .rectangle-container {
649
- top: 112px;
650
- left: 188px;
651
- width: calc(100% - 374px);
652
- height: calc(100% - 224px);
653
- perspective: 600px;
654
- }
655
- :host #barcode .rectangle-container .message {
656
- top: -70px;
657
- left: 50%;
658
- }
659
- }
660
- @media only screen and (min-width: 1440px) {
661
- :host::after {
662
- bottom: 10px;
663
- left: calc(50% - 61px);
664
- }
665
- :host .gradient-overlay {
666
- height: 112px;
667
- }
668
- :host #barcode .rectangle-container {
669
- top: 112px;
670
- left: 188px;
671
- width: calc(100% - 374px);
672
- height: calc(100% - 224px);
673
- perspective: 600px;
674
- }
675
- :host #barcode .rectangle-container .message {
676
- top: -70px;
677
- left: 50%;
678
- }
679
- }
680
- @media only screen and (min-width: 1920px) {
681
- :host::after {
682
- bottom: 10px;
683
- left: calc(50% - 61px);
684
- }
685
- :host .gradient-overlay {
686
- height: 112px;
687
- }
688
- :host #barcode .rectangle-container {
689
- top: 112px;
690
- left: 188px;
691
- width: calc(100% - 374px);
692
- height: calc(100% - 224px);
693
- perspective: 600px;
694
- }
695
- :host #barcode .rectangle-container .message {
696
- top: -70px;
697
- left: 50%;
698
- }
699
- }
700
- @media only screen and (max-height: 299px) and (orientation: landscape) {
701
- :host::after {
702
- bottom: 10px;
703
- left: unset;
704
- right: 20px;
705
- }
706
- :host .gradient-overlay {
707
- height: 88px;
708
- }
709
- }
710
- @media only screen and (min-height: 300px) and (max-height: 499px) and (orientation: landscape) {
711
- :host::after {
712
- bottom: 30px;
713
- left: unset;
714
- right: 20px;
715
- }
716
- :host .gradient-overlay {
717
- height: 88px;
718
- }
719
- }
720
- @media only screen and (max-width: 360px) and (orientation: portrait) {
721
- :host::after {
722
- bottom: 10px;
723
- left: calc(50% - 61px);
724
- }
725
- :host .gradient-overlay {
726
- height: 88px;
727
- }
728
- }
729
- @media only screen and (min-height: 500px) and (max-height: 699px) and (orientation: landscape) {
730
- :host::after {
731
- bottom: 10px;
732
- left: calc(50% - 61px);
733
- }
734
- :host .gradient-overlay {
735
- height: 88px;
736
- }
737
- }
738
- mb-camera-toolbar, mb-help {
739
- display: none !important;
740
- }