mobile-snap 1.0.9 → 1.1.0
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/bin/cli.js +16 -18
- package/package.json +1 -1
package/bin/cli.js
CHANGED
|
@@ -414,9 +414,18 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
|
|
|
414
414
|
const indicatorBg = isDarkTheme ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.8)';
|
|
415
415
|
const androidIndicatorBg = isDarkTheme ? 'rgba(255, 255, 255, 0.6)' : 'rgba(0, 0, 0, 0.5)';
|
|
416
416
|
const frameScale = shadow ? '0.88' : '0.94';
|
|
417
|
-
const
|
|
418
|
-
|
|
419
|
-
|
|
417
|
+
const iosShadow = shadow ?
|
|
418
|
+
'0 0 0 12px #1f1f21, 0 0 0 13px #2f2f31, 0 20px 50px rgba(0,0,0,0.6)' :
|
|
419
|
+
'0 0 0 12px #1f1f21, 0 0 0 13px #2f2f31';
|
|
420
|
+
const iosTabletShadow = shadow ?
|
|
421
|
+
'0 0 0 14px #1f1f21, 0 0 0 15px #2f2f31, 0 20px 50px rgba(0,0,0,0.6)' :
|
|
422
|
+
'0 0 0 14px #1f1f21, 0 0 0 15px #2f2f31';
|
|
423
|
+
const androidPhoneShadow = shadow ?
|
|
424
|
+
'0 0 0 10px #2a2a2c, 0 0 0 11px #3a3a3c, 0 20px 50px rgba(0,0,0,0.6)' :
|
|
425
|
+
'0 0 0 10px #2a2a2c, 0 0 0 11px #3a3a3c';
|
|
426
|
+
const androidTabletShadow = shadow ?
|
|
427
|
+
'0 0 0 14px #2a2a2c, 0 20px 50px rgba(0,0,0,0.6)' :
|
|
428
|
+
'0 0 0 14px #2a2a2c';
|
|
420
429
|
|
|
421
430
|
let frameClass = 'ios';
|
|
422
431
|
let topElementHTML = '<div class="dynamic-island"></div>';
|
|
@@ -524,10 +533,7 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
|
|
|
524
533
|
.device-frame {
|
|
525
534
|
position: relative;
|
|
526
535
|
background: #000;
|
|
527
|
-
box-shadow:
|
|
528
|
-
0 0 0 12px #1f1f21,
|
|
529
|
-
0 0 0 13px #2f2f31,
|
|
530
|
-
${dropShadow};
|
|
536
|
+
box-shadow: ${iosShadow};
|
|
531
537
|
overflow: hidden;
|
|
532
538
|
transform: scale(${frameScale});
|
|
533
539
|
transform-origin: center;
|
|
@@ -541,29 +547,21 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
|
|
|
541
547
|
}
|
|
542
548
|
.device-frame.ios-tablet {
|
|
543
549
|
border-radius: 32px;
|
|
544
|
-
box-shadow:
|
|
545
|
-
0 0 0 14px #1f1f21,
|
|
546
|
-
0 0 0 15px #2f2f31,
|
|
547
|
-
${dropShadow};
|
|
550
|
+
box-shadow: ${iosTabletShadow};
|
|
548
551
|
}
|
|
549
552
|
.device-frame.ios-tablet .screenshot-img {
|
|
550
553
|
border-radius: 20px;
|
|
551
554
|
}
|
|
552
555
|
.device-frame.android-phone {
|
|
553
556
|
border-radius: 40px;
|
|
554
|
-
box-shadow:
|
|
555
|
-
0 0 0 10px #2a2a2c,
|
|
556
|
-
0 0 0 11px #3a3a3c,
|
|
557
|
-
${androidDropShadow};
|
|
557
|
+
box-shadow: ${androidPhoneShadow};
|
|
558
558
|
}
|
|
559
559
|
.device-frame.android-phone .screenshot-img {
|
|
560
560
|
border-radius: 30px;
|
|
561
561
|
}
|
|
562
562
|
.device-frame.android-tablet {
|
|
563
563
|
border-radius: 24px;
|
|
564
|
-
box-shadow:
|
|
565
|
-
0 0 0 14px #2a2a2c,
|
|
566
|
-
${tabletDropShadow};
|
|
564
|
+
box-shadow: ${androidTabletShadow};
|
|
567
565
|
}
|
|
568
566
|
.device-frame.android-tablet .screenshot-img {
|
|
569
567
|
border-radius: 12px;
|