web-native-qr-scanner 0.1.0 → 0.1.2
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.
- package/dist/style.css +42 -3
- package/package.json +1 -1
package/dist/style.css
CHANGED
|
@@ -55,11 +55,36 @@
|
|
|
55
55
|
.wnqs-frame--barcode {
|
|
56
56
|
flex: none;
|
|
57
57
|
height: 44%;
|
|
58
|
+
border-radius: 10px;
|
|
58
59
|
}
|
|
59
60
|
.wnqs-frame--qr {
|
|
60
61
|
width: 65%;
|
|
61
62
|
aspect-ratio: 1 / 1;
|
|
62
63
|
z-index: 10;
|
|
64
|
+
border-radius: 16px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Ambient "lit up" glow behind the scan area — brightens the frame against
|
|
68
|
+
the darkened shade outside it and pulses gently to draw the eye. */
|
|
69
|
+
.wnqs-frame::before {
|
|
70
|
+
content: '';
|
|
71
|
+
position: absolute;
|
|
72
|
+
inset: 0;
|
|
73
|
+
border-radius: inherit;
|
|
74
|
+
box-shadow:
|
|
75
|
+
inset 0 0 40px rgba(255, 255, 255, 0.12),
|
|
76
|
+
0 0 26px 6px rgba(74, 222, 128, 0.45);
|
|
77
|
+
pointer-events: none;
|
|
78
|
+
animation: wnqs-frame-glow 2.2s ease-in-out infinite;
|
|
79
|
+
}
|
|
80
|
+
@keyframes wnqs-frame-glow {
|
|
81
|
+
0%,
|
|
82
|
+
100% {
|
|
83
|
+
opacity: 0.55;
|
|
84
|
+
}
|
|
85
|
+
50% {
|
|
86
|
+
opacity: 1;
|
|
87
|
+
}
|
|
63
88
|
}
|
|
64
89
|
|
|
65
90
|
.wnqs-corner {
|
|
@@ -67,11 +92,22 @@
|
|
|
67
92
|
width: 20px;
|
|
68
93
|
height: 20px;
|
|
69
94
|
border: 3px solid #4ade80;
|
|
95
|
+
filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.9));
|
|
96
|
+
animation: wnqs-corner-glow 2.2s ease-in-out infinite;
|
|
70
97
|
}
|
|
71
98
|
.wnqs-frame--qr .wnqs-corner {
|
|
72
99
|
width: 28px;
|
|
73
100
|
height: 28px;
|
|
74
101
|
}
|
|
102
|
+
@keyframes wnqs-corner-glow {
|
|
103
|
+
0%,
|
|
104
|
+
100% {
|
|
105
|
+
filter: drop-shadow(0 0 3px rgba(74, 222, 128, 0.6));
|
|
106
|
+
}
|
|
107
|
+
50% {
|
|
108
|
+
filter: drop-shadow(0 0 10px rgba(74, 222, 128, 1));
|
|
109
|
+
}
|
|
110
|
+
}
|
|
75
111
|
.wnqs-corner--tl {
|
|
76
112
|
top: 0;
|
|
77
113
|
left: 16px;
|
|
@@ -117,9 +153,12 @@
|
|
|
117
153
|
position: absolute;
|
|
118
154
|
left: 16px;
|
|
119
155
|
right: 16px;
|
|
120
|
-
height:
|
|
121
|
-
background: #
|
|
122
|
-
|
|
156
|
+
height: 3px;
|
|
157
|
+
background: linear-gradient(90deg, transparent, #4ade80 15%, #d9f99d 50%, #4ade80 85%, transparent);
|
|
158
|
+
box-shadow:
|
|
159
|
+
0 0 8px 2px rgba(74, 222, 128, 0.8),
|
|
160
|
+
0 0 18px 6px rgba(74, 222, 128, 0.35);
|
|
161
|
+
opacity: 0.95;
|
|
123
162
|
top: 8px;
|
|
124
163
|
animation: wnqs-scan-line 2s ease-in-out infinite;
|
|
125
164
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "web-native-qr-scanner",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "React QR/barcode scanner component using the browser's native BarcodeDetector API with a zxing-wasm fallback, ROI cropping and requestVideoFrameCallback for near-native scanning performance in the browser.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|