@arcblock/ux 3.0.13 → 3.0.14

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.
@@ -0,0 +1,1366 @@
1
+ /*! Devices.css v0.1.15 | MIT License | github.com/picturepan2/devices.css */
2
+ .device,
3
+ .device::before,
4
+ .device::after,
5
+ .device *,
6
+ .device *::before,
7
+ .device *::after {
8
+ box-sizing: border-box;
9
+ display: block;
10
+ }
11
+
12
+ .device {
13
+ position: relative;
14
+ transform: scale(1);
15
+ z-index: 1;
16
+ }
17
+
18
+ .device .device-frame {
19
+ z-index: 1;
20
+ }
21
+
22
+ .device .device-content {
23
+ background-color: #fff;
24
+ background-position: center center;
25
+ background-size: cover;
26
+ object-fit: cover;
27
+ position: relative;
28
+ }
29
+
30
+ .device-iphone-x {
31
+ height: 694px;
32
+ width: 342px;
33
+ }
34
+
35
+ .device-iphone-x .device-frame {
36
+ background: #222;
37
+ border-radius: 54px;
38
+ box-shadow: inset 0 0 2px 2px #c8cacb, inset 0 0 0 6px #e2e3e4;
39
+ height: 694px;
40
+ padding: 22px;
41
+ width: 342px;
42
+ }
43
+
44
+ .device-iphone-x .device-content {
45
+ border-radius: 32px;
46
+ height: 650px;
47
+ width: 300px;
48
+ }
49
+
50
+ .device-iphone-x .device-stripe::after,
51
+ .device-iphone-x .device-stripe::before {
52
+ border: solid rgba(51, 51, 51, 0.25);
53
+ border-width: 0 6px;
54
+ content: '';
55
+ height: 5px;
56
+ left: 0;
57
+ position: absolute;
58
+ width: 100%;
59
+ z-index: 9;
60
+ }
61
+
62
+ .device-iphone-x .device-stripe::after {
63
+ top: 68px;
64
+ }
65
+
66
+ .device-iphone-x .device-stripe::before {
67
+ bottom: 68px;
68
+ }
69
+
70
+ .device-iphone-x .device-header {
71
+ background: #222;
72
+ border-bottom-left-radius: 16px;
73
+ border-bottom-right-radius: 16px;
74
+ height: 24px;
75
+ left: 50%;
76
+ margin-left: -82px;
77
+ position: absolute;
78
+ top: 22px;
79
+ width: 164px;
80
+ }
81
+
82
+ .device-iphone-x .device-header::after,
83
+ .device-iphone-x .device-header::before {
84
+ content: '';
85
+ height: 6px;
86
+ position: absolute;
87
+ top: 0;
88
+ width: 6px;
89
+ }
90
+
91
+ .device-iphone-x .device-header::after {
92
+ background: radial-gradient(
93
+ circle at bottom left,
94
+ transparent 0,
95
+ transparent 75%,
96
+ #222 75%,
97
+ #222 100%
98
+ );
99
+ left: -6px;
100
+ }
101
+
102
+ .device-iphone-x .device-header::before {
103
+ background: radial-gradient(
104
+ circle at bottom right,
105
+ transparent 0,
106
+ transparent 75%,
107
+ #222 75%,
108
+ #222 100%
109
+ );
110
+ right: -6px;
111
+ }
112
+
113
+ .device-iphone-x .device-sensors::after,
114
+ .device-iphone-x .device-sensors::before {
115
+ content: '';
116
+ position: absolute;
117
+ }
118
+
119
+ .device-iphone-x .device-sensors::after {
120
+ background: #444;
121
+ border-radius: 2.5px;
122
+ height: 5px;
123
+ left: 50%;
124
+ margin-left: -20px;
125
+ top: 26px;
126
+ width: 40px;
127
+ }
128
+
129
+ .device-iphone-x .device-sensors::before {
130
+ background: #444;
131
+ border-radius: 50%;
132
+ height: 11px;
133
+ left: 50%;
134
+ margin-left: 30px;
135
+ top: 23px;
136
+ width: 11px;
137
+ }
138
+
139
+ .device-iphone-x .device-btns {
140
+ background: #c8cacb;
141
+ height: 26px;
142
+ left: -2px;
143
+ position: absolute;
144
+ top: 92px;
145
+ width: 3px;
146
+ }
147
+
148
+ .device-iphone-x .device-btns::after,
149
+ .device-iphone-x .device-btns::before {
150
+ background: #c8cacb;
151
+ content: '';
152
+ height: 50px;
153
+ left: 0;
154
+ position: absolute;
155
+ width: 3px;
156
+ }
157
+
158
+ .device-iphone-x .device-btns::after {
159
+ top: 48px;
160
+ }
161
+
162
+ .device-iphone-x .device-btns::before {
163
+ top: 112px;
164
+ }
165
+
166
+ .device-iphone-x .device-power {
167
+ background: #c8cacb;
168
+ height: 80px;
169
+ position: absolute;
170
+ right: -2px;
171
+ top: 160px;
172
+ width: 3px;
173
+ }
174
+
175
+ .device-iphone-8 {
176
+ height: 698px;
177
+ width: 336px;
178
+ }
179
+
180
+ .device-iphone-8 .device-frame {
181
+ background: #fff;
182
+ border-radius: 54px;
183
+ box-shadow: inset 0 0 0 2px #c8cacb, inset 0 0 0 6px #e2e3e4;
184
+ height: 698px;
185
+ padding: 82px 18px;
186
+ width: 336px;
187
+ }
188
+
189
+ .device-iphone-8 .device-content {
190
+ border: 2px solid #222;
191
+ border-radius: 4px;
192
+ height: 534px;
193
+ width: 300px;
194
+ }
195
+
196
+ .device-iphone-8 .device-stripe::after,
197
+ .device-iphone-8 .device-stripe::before {
198
+ border: solid rgba(51, 51, 51, 0.15);
199
+ border-width: 0 6px;
200
+ content: '';
201
+ height: 5px;
202
+ left: 0;
203
+ position: absolute;
204
+ width: 100%;
205
+ z-index: 9;
206
+ }
207
+
208
+ .device-iphone-8 .device-stripe::after {
209
+ top: 55px;
210
+ }
211
+
212
+ .device-iphone-8 .device-stripe::before {
213
+ bottom: 55px;
214
+ }
215
+
216
+ .device-iphone-8 .device-header {
217
+ border: 2px solid #c8cacb;
218
+ border-radius: 50%;
219
+ bottom: 20px;
220
+ height: 46px;
221
+ left: 50%;
222
+ margin-left: -23px;
223
+ position: absolute;
224
+ width: 46px;
225
+ }
226
+
227
+ .device-iphone-8 .device-sensors {
228
+ background: #666;
229
+ border-radius: 2.5px;
230
+ height: 5px;
231
+ left: 50%;
232
+ margin-left: -30px;
233
+ position: absolute;
234
+ top: 41.5px;
235
+ width: 60px;
236
+ }
237
+
238
+ .device-iphone-8 .device-sensors::after,
239
+ .device-iphone-8 .device-sensors::before {
240
+ background: #666;
241
+ border-radius: 50%;
242
+ content: '';
243
+ position: absolute;
244
+ }
245
+
246
+ .device-iphone-8 .device-sensors::after {
247
+ height: 8px;
248
+ left: 50%;
249
+ margin-left: -4px;
250
+ top: -20px;
251
+ width: 8px;
252
+ }
253
+
254
+ .device-iphone-8 .device-sensors::before {
255
+ height: 10px;
256
+ left: -34px;
257
+ margin-top: -5px;
258
+ top: 50%;
259
+ width: 10px;
260
+ }
261
+
262
+ .device-iphone-8 .device-btns {
263
+ background: #c8cacb;
264
+ height: 24px;
265
+ left: -2px;
266
+ position: absolute;
267
+ top: 82px;
268
+ width: 3px;
269
+ }
270
+
271
+ .device-iphone-8 .device-btns::after,
272
+ .device-iphone-8 .device-btns::before {
273
+ background: #c8cacb;
274
+ content: '';
275
+ height: 45px;
276
+ left: 0;
277
+ position: absolute;
278
+ width: 3px;
279
+ }
280
+
281
+ .device-iphone-8 .device-btns::after {
282
+ top: 50px;
283
+ }
284
+
285
+ .device-iphone-8 .device-btns::before {
286
+ top: 106px;
287
+ }
288
+
289
+ .device-iphone-8 .device-power {
290
+ background: #c8cacb;
291
+ height: 80px;
292
+ position: absolute;
293
+ right: -2px;
294
+ top: 160px;
295
+ width: 3px;
296
+ }
297
+
298
+ .device-iphone-8.device-gold .device-frame {
299
+ box-shadow: inset 0 0 0 2px #e4b08a, inset 0 0 0 6px #f7e8dd;
300
+ }
301
+
302
+ .device-iphone-8.device-gold .device-header {
303
+ border-color: #e4b08a;
304
+ }
305
+
306
+ .device-iphone-8.device-gold .device-btns,
307
+ .device-iphone-8.device-gold .device-btns::after,
308
+ .device-iphone-8.device-gold .device-btns::before {
309
+ background: #e4b08a;
310
+ }
311
+
312
+ .device-iphone-8.device-gold .device-power {
313
+ background: #e4b08a;
314
+ }
315
+
316
+ .device-iphone-8.device-spacegray .device-frame {
317
+ background: #222;
318
+ box-shadow: inset 0 0 0 2px #74747a, inset 0 0 0 6px #9b9ba0;
319
+ }
320
+
321
+ .device-iphone-8.device-spacegray .device-stripe::after,
322
+ .device-iphone-8.device-spacegray .device-stripe::before {
323
+ border-color: rgba(204, 204, 204, 0.35);
324
+ }
325
+
326
+ .device-iphone-8.device-spacegray .device-btns,
327
+ .device-iphone-8.device-spacegray .device-btns::after,
328
+ .device-iphone-8.device-spacegray .device-btns::before {
329
+ background: #74747a;
330
+ }
331
+
332
+ .device-google-pixel-2-xl {
333
+ height: 744px;
334
+ width: 360px;
335
+ }
336
+
337
+ .device-google-pixel-2-xl .device-frame {
338
+ background: #121212;
339
+ border-radius: 36px;
340
+ box-shadow: inset 0 0 0 2px #cfcfcf, inset 0 0 0 6px #9c9c9c;
341
+ height: 740px;
342
+ padding: 50px 20px;
343
+ width: 360px;
344
+ }
345
+
346
+ .device-google-pixel-2-xl .device-content {
347
+ border-radius: 24px;
348
+ height: 640px;
349
+ width: 320px;
350
+ }
351
+
352
+ .device-google-pixel-2-xl .device-header {
353
+ height: 740px;
354
+ left: 50%;
355
+ margin-left: -135px;
356
+ position: absolute;
357
+ top: 0;
358
+ width: 270px;
359
+ }
360
+
361
+ .device-google-pixel-2-xl .device-header::after,
362
+ .device-google-pixel-2-xl .device-header::before {
363
+ background: #333;
364
+ border-radius: 2.5px;
365
+ content: '';
366
+ height: 5px;
367
+ left: 50%;
368
+ margin-left: -65px;
369
+ margin-top: -2.5px;
370
+ position: absolute;
371
+ width: 130px;
372
+ }
373
+
374
+ .device-google-pixel-2-xl .device-header::after {
375
+ top: 20px;
376
+ }
377
+
378
+ .device-google-pixel-2-xl .device-header::before {
379
+ bottom: 26px;
380
+ }
381
+
382
+ .device-google-pixel-2-xl .device-sensors {
383
+ background: #333;
384
+ border-radius: 5px;
385
+ height: 12px;
386
+ left: 45px;
387
+ margin-top: -6px;
388
+ position: absolute;
389
+ top: 32px;
390
+ width: 12px;
391
+ }
392
+
393
+ .device-google-pixel-2-xl .device-btns {
394
+ background: #cfcfcf;
395
+ height: 94px;
396
+ position: absolute;
397
+ right: -2px;
398
+ top: 274px;
399
+ width: 3px;
400
+ }
401
+
402
+ .device-google-pixel-2-xl .device-power {
403
+ background: #cfcfcf;
404
+ height: 48px;
405
+ position: absolute;
406
+ right: -2px;
407
+ top: 174px;
408
+ width: 3px;
409
+ }
410
+
411
+ .device-google-pixel {
412
+ height: 744px;
413
+ width: 360px;
414
+ }
415
+
416
+ .device-google-pixel .device-frame {
417
+ background: #f7f7f8;
418
+ border-radius: 54px;
419
+ box-shadow: inset 0 0 0 2px #c8cacb, inset 0 0 0 6px #e2e3e4, inset 0 0 0 10px white;
420
+ height: 744px;
421
+ padding: 82px 18px 86px 18px;
422
+ width: 360px;
423
+ }
424
+
425
+ .device-google-pixel .device-content {
426
+ border: 2px solid #222;
427
+ border-radius: 2px;
428
+ height: 576px;
429
+ width: 324px;
430
+ }
431
+
432
+ .device-google-pixel .device-stripe {
433
+ border-top: 6px solid rgba(51, 51, 51, 0.15);
434
+ bottom: 0;
435
+ left: 254px;
436
+ position: absolute;
437
+ top: 0;
438
+ width: 8px;
439
+ }
440
+
441
+ .device-google-pixel .device-stripe::after,
442
+ .device-google-pixel .device-stripe::before {
443
+ border: solid rgba(51, 51, 51, 0.15);
444
+ border-width: 0 6px;
445
+ content: '';
446
+ height: 10px;
447
+ left: -254px;
448
+ position: absolute;
449
+ width: 360px;
450
+ z-index: 9;
451
+ }
452
+
453
+ .device-google-pixel .device-stripe::after {
454
+ top: 60px;
455
+ }
456
+
457
+ .device-google-pixel .device-stripe::before {
458
+ bottom: 46px;
459
+ }
460
+
461
+ .device-google-pixel .device-sensors {
462
+ background: #ddd;
463
+ border-radius: 2.5px;
464
+ height: 5px;
465
+ left: 50%;
466
+ margin-left: -39px;
467
+ margin-top: -2.5px;
468
+ position: absolute;
469
+ top: 41px;
470
+ width: 78px;
471
+ }
472
+
473
+ .device-google-pixel .device-sensors::after,
474
+ .device-google-pixel .device-sensors::before {
475
+ background: #333;
476
+ border-radius: 6px;
477
+ content: '';
478
+ position: absolute;
479
+ }
480
+
481
+ .device-google-pixel .device-sensors::after {
482
+ height: 12px;
483
+ left: 50%;
484
+ margin-left: -14px;
485
+ top: 21.5px;
486
+ width: 28px;
487
+ }
488
+
489
+ .device-google-pixel .device-sensors::before {
490
+ height: 10px;
491
+ left: -81px;
492
+ margin-top: -5px;
493
+ top: 50%;
494
+ width: 10px;
495
+ }
496
+
497
+ .device-google-pixel .device-btns {
498
+ background: #c8cacb;
499
+ height: 102px;
500
+ position: absolute;
501
+ right: -2px;
502
+ top: 298px;
503
+ width: 3px;
504
+ }
505
+
506
+ .device-google-pixel .device-power {
507
+ background: #c8cacb;
508
+ height: 50px;
509
+ position: absolute;
510
+ right: -2px;
511
+ top: 184px;
512
+ width: 3px;
513
+ }
514
+
515
+ .device-google-pixel.device-black .device-frame {
516
+ background: #211d1c;
517
+ box-shadow: inset 0 0 0 2px #363635, inset 0 0 0 6px #6a6967, inset 0 0 0 10px #3d3533;
518
+ }
519
+
520
+ .device-google-pixel.device-black .device-stripe,
521
+ .device-google-pixel.device-black .device-stripe::after,
522
+ .device-google-pixel.device-black .device-stripe::before {
523
+ border-color: rgba(13, 13, 13, 0.35);
524
+ }
525
+
526
+ .device-google-pixel.device-black .device-sensors {
527
+ background: #444;
528
+ }
529
+
530
+ .device-google-pixel.device-black .device-sensors::after {
531
+ background: #0d0d0d;
532
+ }
533
+
534
+ .device-google-pixel.device-black .device-btns,
535
+ .device-google-pixel.device-black .device-btns::after,
536
+ .device-google-pixel.device-black .device-btns::before {
537
+ background: #363635;
538
+ }
539
+
540
+ .device-google-pixel.device-black .device-power {
541
+ background: #363635;
542
+ }
543
+
544
+ .device-google-pixel.device-blue .device-frame {
545
+ box-shadow: inset 0 0 0 2px #2a5aff, inset 0 0 0 6px #7695ff, inset 0 0 0 10px white;
546
+ }
547
+
548
+ .device-google-pixel.device-blue .device-btns,
549
+ .device-google-pixel.device-blue .device-btns::after,
550
+ .device-google-pixel.device-blue .device-btns::before {
551
+ background: #2a5aff;
552
+ }
553
+
554
+ .device-google-pixel.device-blue .device-power {
555
+ background: #2a5aff;
556
+ }
557
+
558
+ .device-galaxy-s8 {
559
+ height: 686px;
560
+ width: 316px;
561
+ }
562
+
563
+ .device-galaxy-s8 .device-frame {
564
+ background: #222;
565
+ border: solid #cfcfcf;
566
+ border-radius: 46px;
567
+ border-width: 4px 0;
568
+ box-shadow: inset 0 0 0 2px #9c9c9c;
569
+ height: 686px;
570
+ padding: 40px 8px 34px 8px;
571
+ width: 316px;
572
+ }
573
+
574
+ .device-galaxy-s8 .device-content {
575
+ border: 2px solid #222;
576
+ border-radius: 28px;
577
+ height: 617px;
578
+ width: 300px;
579
+ }
580
+
581
+ .device-galaxy-s8 .device-stripe::after,
582
+ .device-galaxy-s8 .device-stripe::before {
583
+ border: solid rgba(51, 51, 51, 0.15);
584
+ border-width: 4px 0;
585
+ content: '';
586
+ height: 686px;
587
+ position: absolute;
588
+ top: 0;
589
+ width: 5px;
590
+ z-index: 9;
591
+ }
592
+
593
+ .device-galaxy-s8 .device-stripe::after {
594
+ left: 40px;
595
+ }
596
+
597
+ .device-galaxy-s8 .device-stripe::before {
598
+ right: 40px;
599
+ }
600
+
601
+ .device-galaxy-s8 .device-sensors {
602
+ background: #666;
603
+ border-radius: 2.5px;
604
+ height: 4px;
605
+ left: 50%;
606
+ margin-left: -20px;
607
+ margin-top: -2px;
608
+ position: absolute;
609
+ top: 26px;
610
+ width: 40px;
611
+ }
612
+
613
+ .device-galaxy-s8 .device-sensors::after,
614
+ .device-galaxy-s8 .device-sensors::before {
615
+ background: #666;
616
+ border-radius: 50%;
617
+ content: '';
618
+ position: absolute;
619
+ top: 50%;
620
+ }
621
+
622
+ .device-galaxy-s8 .device-sensors::after {
623
+ box-shadow: -160px 0 #333, -145px 0 #333, -200px 0 #333;
624
+ height: 6px;
625
+ margin-top: -3px;
626
+ right: -75px;
627
+ width: 6px;
628
+ }
629
+
630
+ .device-galaxy-s8 .device-sensors::before {
631
+ box-shadow: 155px 0 #666;
632
+ height: 10px;
633
+ left: -75px;
634
+ margin-top: -5px;
635
+ width: 10px;
636
+ }
637
+
638
+ .device-galaxy-s8 .device-btns {
639
+ background: #9c9c9c;
640
+ border-radius: 2px 0 0 2px;
641
+ height: 98px;
642
+ left: -2px;
643
+ position: absolute;
644
+ top: 120px;
645
+ width: 3px;
646
+ }
647
+
648
+ .device-galaxy-s8 .device-btns::after {
649
+ background: #9c9c9c;
650
+ border-radius: 2px 0 0 2px;
651
+ content: '';
652
+ height: 45px;
653
+ left: 0;
654
+ position: absolute;
655
+ top: 138px;
656
+ width: 3px;
657
+ }
658
+
659
+ .device-galaxy-s8 .device-power {
660
+ background: #9c9c9c;
661
+ border-radius: 0 2px 2px 0;
662
+ height: 46px;
663
+ position: absolute;
664
+ right: -2px;
665
+ top: 218px;
666
+ width: 3px;
667
+ }
668
+
669
+ .device-galaxy-s8.device-blue .device-frame {
670
+ border-color: #a3c5e8;
671
+ box-shadow: inset 0 0 0 2px #5192d4;
672
+ }
673
+
674
+ .device-galaxy-s8.device-blue .device-stripe::after,
675
+ .device-galaxy-s8.device-blue .device-stripe::before {
676
+ border-color: rgba(255, 255, 255, 0.35);
677
+ }
678
+
679
+ .device-galaxy-s8.device-blue .device-btns,
680
+ .device-galaxy-s8.device-blue .device-btns::after {
681
+ background: #5192d4;
682
+ }
683
+
684
+ .device-galaxy-s8.device-blue .device-power {
685
+ background: #5192d4;
686
+ }
687
+
688
+ .device-ipad-pro {
689
+ height: 804px;
690
+ width: 560px;
691
+ }
692
+
693
+ .device-ipad-pro .device-frame {
694
+ background: #fff;
695
+ border-radius: 38px;
696
+ box-shadow: inset 0 0 0 2px #c8cacb, inset 0 0 0 6px #e2e3e4;
697
+ height: 804px;
698
+ padding: 62px 25px;
699
+ width: 560px;
700
+ }
701
+
702
+ .device-ipad-pro .device-content {
703
+ border: 2px solid #222;
704
+ border-radius: 2px;
705
+ height: 680px;
706
+ width: 510px;
707
+ }
708
+
709
+ .device-ipad-pro .device-header {
710
+ border: 2px solid #c8cacb;
711
+ border-radius: 50%;
712
+ bottom: 17px;
713
+ height: 34px;
714
+ left: 50%;
715
+ margin-left: -17px;
716
+ position: absolute;
717
+ width: 34px;
718
+ }
719
+
720
+ .device-ipad-pro .device-sensors {
721
+ background: #666;
722
+ border-radius: 50%;
723
+ height: 10px;
724
+ left: 50%;
725
+ margin-left: -5px;
726
+ margin-top: -5px;
727
+ position: absolute;
728
+ top: 34px;
729
+ width: 10px;
730
+ }
731
+
732
+ .device-ipad-pro.device-gold .device-frame {
733
+ box-shadow: inset 0 0 0 2px #e4b08a, inset 0 0 0 6px #f7e8dd;
734
+ }
735
+
736
+ .device-ipad-pro.device-gold .device-header {
737
+ border-color: #e4b08a;
738
+ }
739
+
740
+ .device-ipad-pro.device-rosegold .device-frame {
741
+ box-shadow: inset 0 0 0 2px #f6a69a, inset 0 0 0 6px #facfc9;
742
+ }
743
+
744
+ .device-ipad-pro.device-rosegold .device-header {
745
+ border-color: #f6a69a;
746
+ }
747
+
748
+ .device-ipad-pro.device-spacegray .device-frame {
749
+ background: #222;
750
+ box-shadow: inset 0 0 0 2px #818187, inset 0 0 0 6px #9b9ba0;
751
+ }
752
+
753
+ .device-ipad-pro.device-spacegray .device-header {
754
+ border-color: #818187;
755
+ }
756
+
757
+ .device-surface-pro {
758
+ height: 394px;
759
+ width: 561px;
760
+ }
761
+
762
+ .device-surface-pro .device-frame {
763
+ background: #0d0d0d;
764
+ border-radius: 10px;
765
+ box-shadow: inset 0 0 0 2px #c8c8c8;
766
+ height: 394px;
767
+ margin: 0 auto;
768
+ padding: 26px 24px;
769
+ width: 561px;
770
+ }
771
+
772
+ .device-surface-pro .device-content {
773
+ border: 2px solid #121212;
774
+ border-radius: 2px;
775
+ height: 342px;
776
+ width: 513px;
777
+ }
778
+
779
+ .device-surface-pro .device-btns::after,
780
+ .device-surface-pro .device-btns::before {
781
+ background: #c8c8c8;
782
+ content: '';
783
+ height: 2px;
784
+ position: absolute;
785
+ top: -2px;
786
+ }
787
+
788
+ .device-surface-pro .device-btns::after {
789
+ left: 48px;
790
+ width: 26px;
791
+ }
792
+
793
+ .device-surface-pro .device-btns::before {
794
+ left: 94px;
795
+ width: 48px;
796
+ }
797
+
798
+ .device-surface-pro .device-sensors {
799
+ background: #333;
800
+ border-radius: 50%;
801
+ height: 6px;
802
+ left: 50%;
803
+ margin-left: -3px;
804
+ margin-top: -3px;
805
+ position: absolute;
806
+ top: 14px;
807
+ width: 6px;
808
+ }
809
+
810
+ .device-surface-book {
811
+ height: 424px;
812
+ width: 728px;
813
+ }
814
+
815
+ .device-surface-book .device-frame {
816
+ background: #0d0d0d;
817
+ border-radius: 12px;
818
+ box-shadow: inset 0 0 0 2px #c8c8c8;
819
+ height: 408px;
820
+ margin: 0 auto;
821
+ padding: 24px 22px;
822
+ position: relative;
823
+ width: 584px;
824
+ }
825
+
826
+ .device-surface-book .device-content {
827
+ border: 2px solid #121212;
828
+ border-radius: 2px;
829
+ height: 360px;
830
+ width: 540px;
831
+ }
832
+
833
+ .device-surface-book .device-btns::after,
834
+ .device-surface-book .device-btns::before {
835
+ background: #c8c8c8;
836
+ content: '';
837
+ height: 2px;
838
+ position: absolute;
839
+ top: -2px;
840
+ }
841
+
842
+ .device-surface-book .device-btns::after {
843
+ left: 122px;
844
+ width: 20px;
845
+ }
846
+
847
+ .device-surface-book .device-btns::before {
848
+ left: 168px;
849
+ width: 44px;
850
+ }
851
+
852
+ .device-surface-book .device-power {
853
+ background: linear-gradient(to bottom, #eee, #c8c8c8);
854
+ border: solid #c8c8c8;
855
+ border-radius: 2px;
856
+ border-width: 0 2px;
857
+ height: 12px;
858
+ margin-top: 4px;
859
+ position: relative;
860
+ width: 728px;
861
+ }
862
+
863
+ .device-surface-book .device-power::after,
864
+ .device-surface-book .device-power::before {
865
+ content: '';
866
+ position: absolute;
867
+ }
868
+
869
+ .device-surface-book .device-power::after {
870
+ background: radial-gradient(circle at center, #eee 0, #eee 95%, #a2a1a1 100%);
871
+ border-radius: 0 0 6px 6px;
872
+ height: 8px;
873
+ left: 50%;
874
+ margin-left: -125px;
875
+ top: 0;
876
+ width: 250px;
877
+ z-index: 1;
878
+ }
879
+
880
+ .device-surface-book .device-power::before {
881
+ background: linear-gradient(to bottom, #eee, #c8c8c8);
882
+ border-radius: 2px 2px 0 0;
883
+ bottom: 12px;
884
+ height: 8px;
885
+ left: 50%;
886
+ margin-left: -292px;
887
+ width: 584px;
888
+ }
889
+
890
+ .device-macbook-pro {
891
+ height: 444px;
892
+ width: 740px;
893
+ }
894
+
895
+ .device-macbook-pro .device-frame {
896
+ background: #0d0d0d;
897
+ border-radius: 20px;
898
+ box-shadow: inset 0 0 0 2px #c8cacb;
899
+ height: 428px;
900
+ margin: 0 auto;
901
+ padding: 29px 19px 39px 19px;
902
+ position: relative;
903
+ width: 614px;
904
+ }
905
+
906
+ .device-macbook-pro .device-frame::after {
907
+ background: #272626;
908
+ border-radius: 0 0 20px 20px;
909
+ bottom: 2px;
910
+ content: '';
911
+ height: 26px;
912
+ left: 2px;
913
+ position: absolute;
914
+ width: 610px;
915
+ }
916
+
917
+ .device-macbook-pro .device-frame::before {
918
+ bottom: 10px;
919
+ color: #c8cacb;
920
+ content: 'MacBook Pro';
921
+ font-size: 12px;
922
+ height: 16px;
923
+ left: 50%;
924
+ line-height: 16px;
925
+ margin-left: -100px;
926
+ position: absolute;
927
+ text-align: center;
928
+ width: 200px;
929
+ z-index: 1;
930
+ }
931
+
932
+ .device-macbook-pro .device-content {
933
+ border: 2px solid #121212;
934
+ border-radius: 2px;
935
+ height: 360px;
936
+ width: 576px;
937
+ }
938
+
939
+ .device-macbook-pro .device-power {
940
+ background: #e2e3e4;
941
+ border: solid #d5d6d8;
942
+ border-radius: 2px 2px 0 0;
943
+ border-width: 2px 4px 0 4px;
944
+ height: 14px;
945
+ margin-top: -10px;
946
+ position: relative;
947
+ width: 740px;
948
+ z-index: 9;
949
+ }
950
+
951
+ .device-macbook-pro .device-power::after,
952
+ .device-macbook-pro .device-power::before {
953
+ content: '';
954
+ position: absolute;
955
+ }
956
+
957
+ .device-macbook-pro .device-power::after {
958
+ background: #d5d6d8;
959
+ border-radius: 0 0 10px 10px;
960
+ box-shadow: inset 0 0 4px 2px #babdbf;
961
+ height: 10px;
962
+ left: 50%;
963
+ margin-left: -60px;
964
+ top: -2px;
965
+ width: 120px;
966
+ }
967
+
968
+ .device-macbook-pro .device-power::before {
969
+ background: #a0a3a7;
970
+ border-radius: 0 0 180px 180px/ 0 0 12px 12px;
971
+ box-shadow: inset 0 -2px 6px 0 #474a4d;
972
+ height: 12px;
973
+ left: -4px;
974
+ margin: 0 auto;
975
+ top: 10px;
976
+ width: 740px;
977
+ }
978
+
979
+ .device-macbook-pro.device-spacegray .device-frame {
980
+ box-shadow: inset 0 0 0 2px #767a7d;
981
+ }
982
+
983
+ .device-macbook-pro.device-spacegray .device-power {
984
+ background: #909496;
985
+ border-color: #767a7d;
986
+ }
987
+
988
+ .device-macbook-pro.device-spacegray .device-power::after {
989
+ background: #83878a;
990
+ box-shadow: inset 0 0 4px 2px #6a6d70;
991
+ }
992
+
993
+ .device-macbook-pro.device-spacegray .device-power::before {
994
+ background: #515456;
995
+ box-shadow: inset 0 -2px 6px 0 black;
996
+ }
997
+
998
+ .device-macbook {
999
+ height: 432px;
1000
+ width: 740px;
1001
+ }
1002
+
1003
+ .device-macbook .device-frame {
1004
+ background: #0d0d0d;
1005
+ border-radius: 20px;
1006
+ box-shadow: inset 0 0 0 2px #c8cacb;
1007
+ height: 428px;
1008
+ margin: 0 auto;
1009
+ padding: 29px 19px 39px 19px;
1010
+ position: relative;
1011
+ width: 614px;
1012
+ }
1013
+
1014
+ .device-macbook .device-frame::after {
1015
+ background: #272626;
1016
+ border-radius: 0 0 20px 20px;
1017
+ bottom: 2px;
1018
+ content: '';
1019
+ height: 26px;
1020
+ left: 2px;
1021
+ position: absolute;
1022
+ width: 610px;
1023
+ }
1024
+
1025
+ .device-macbook .device-frame::before {
1026
+ bottom: 10px;
1027
+ color: #c8cacb;
1028
+ content: 'MacBook';
1029
+ font-size: 12px;
1030
+ height: 16px;
1031
+ left: 50%;
1032
+ line-height: 16px;
1033
+ margin-left: -100px;
1034
+ position: absolute;
1035
+ text-align: center;
1036
+ width: 200px;
1037
+ z-index: 1;
1038
+ }
1039
+
1040
+ .device-macbook .device-content {
1041
+ border: 2px solid #121212;
1042
+ border-radius: 2px;
1043
+ height: 360px;
1044
+ width: 576px;
1045
+ }
1046
+
1047
+ .device-macbook .device-power {
1048
+ background: #e2e3e4;
1049
+ border: solid #d5d6d8;
1050
+ border-radius: 2px 2px 0 0;
1051
+ border-width: 0 4px;
1052
+ height: 4px;
1053
+ margin-top: -10px;
1054
+ position: relative;
1055
+ width: 740px;
1056
+ z-index: 9;
1057
+ }
1058
+
1059
+ .device-macbook .device-power::after,
1060
+ .device-macbook .device-power::before {
1061
+ content: '';
1062
+ position: absolute;
1063
+ }
1064
+
1065
+ .device-macbook .device-power::after {
1066
+ background: radial-gradient(circle at center, #e2e3e4 0, #e2e3e4 85%, #a0a3a7 100%);
1067
+ border: solid #adb0b3;
1068
+ border-width: 0 2px;
1069
+ height: 4px;
1070
+ left: 50%;
1071
+ margin-left: -60px;
1072
+ width: 120px;
1073
+ }
1074
+
1075
+ .device-macbook .device-power::before {
1076
+ background: #a0a3a7;
1077
+ border-radius: 0 0 180px 180px/ 0 0 10px 10px;
1078
+ box-shadow: inset 0 -2px 6px 0 #474a4d;
1079
+ height: 10px;
1080
+ left: -4px;
1081
+ margin: 0 auto;
1082
+ top: 4px;
1083
+ width: 740px;
1084
+ }
1085
+
1086
+ .device-macbook.device-gold .device-frame {
1087
+ box-shadow: inset 0 0 0 2px #edccb4;
1088
+ }
1089
+
1090
+ .device-macbook.device-gold .device-power {
1091
+ background: #f7e8dd;
1092
+ border-color: #edccb4;
1093
+ }
1094
+
1095
+ .device-macbook.device-gold .device-power::after {
1096
+ background: radial-gradient(circle at center, #f7e8dd 0, #f7e8dd 85%, #dfa276 100%);
1097
+ border-color: #e4b08a;
1098
+ }
1099
+
1100
+ .device-macbook.device-gold .device-power::before {
1101
+ background: #edccb4;
1102
+ box-shadow: inset 0 -2px 6px 0 #83491f;
1103
+ }
1104
+
1105
+ .device-macbook.device-rosegold .device-frame {
1106
+ box-shadow: inset 0 0 0 2px #f6a69a;
1107
+ }
1108
+
1109
+ .device-macbook.device-rosegold .device-power {
1110
+ background: #facfc9;
1111
+ border-color: #f6a69a;
1112
+ }
1113
+
1114
+ .device-macbook.device-rosegold .device-power::after {
1115
+ background: radial-gradient(circle at center, #facfc9 0, #facfc9 85%, #ef6754 100%);
1116
+ border-color: #f6a69a;
1117
+ }
1118
+
1119
+ .device-macbook.device-rosegold .device-power::before {
1120
+ background: #f6a69a;
1121
+ box-shadow: inset 0 -2px 6px 0 #851b0c;
1122
+ }
1123
+
1124
+ .device-macbook.device-spacegray .device-frame {
1125
+ box-shadow: inset 0 0 0 2px #767a7d;
1126
+ }
1127
+
1128
+ .device-macbook.device-spacegray .device-power {
1129
+ background: #909496;
1130
+ border-color: #767a7d;
1131
+ }
1132
+
1133
+ .device-macbook.device-spacegray .device-power::after {
1134
+ background: radial-gradient(circle at center, #909496 0, #909496 85%, #515456 100%);
1135
+ border-color: #5d6163;
1136
+ }
1137
+
1138
+ .device-macbook.device-spacegray .device-power::before {
1139
+ background: #515456;
1140
+ box-shadow: inset 0 -2px 6px 0 black;
1141
+ }
1142
+
1143
+ .device-surface-studio {
1144
+ height: 506px;
1145
+ width: 640px;
1146
+ }
1147
+
1148
+ .device-surface-studio .device-frame {
1149
+ background: #0d0d0d;
1150
+ border-radius: 10px;
1151
+ box-shadow: inset 0 0 0 2px black;
1152
+ height: 440px;
1153
+ padding: 20px;
1154
+ width: 640px;
1155
+ }
1156
+
1157
+ .device-surface-studio .device-content {
1158
+ border: 2px solid #121212;
1159
+ border-radius: 2px;
1160
+ height: 400px;
1161
+ width: 600px;
1162
+ }
1163
+
1164
+ .device-surface-studio .device-stripe {
1165
+ background: #444;
1166
+ border-radius: 0 0 2px 2px;
1167
+ bottom: 0;
1168
+ height: 4px;
1169
+ left: 50%;
1170
+ margin-left: -117px;
1171
+ position: absolute;
1172
+ width: 234px;
1173
+ }
1174
+
1175
+ .device-surface-studio .device-stripe::after,
1176
+ .device-surface-studio .device-stripe::before {
1177
+ content: '';
1178
+ left: 50%;
1179
+ position: absolute;
1180
+ top: -75px;
1181
+ }
1182
+
1183
+ .device-surface-studio .device-stripe::after {
1184
+ border: 6px solid #d5d6d8;
1185
+ border-radius: 0 0 18px 18px;
1186
+ border-top: 0;
1187
+ box-shadow: inset 0 0 0 4px #c8cacb;
1188
+ height: 60px;
1189
+ margin-left: -140px;
1190
+ width: 280px;
1191
+ z-index: -1;
1192
+ }
1193
+
1194
+ .device-surface-studio .device-stripe::before {
1195
+ border: 15px solid #e2e3e4;
1196
+ border-radius: 0 0 4px 4px;
1197
+ border-top: 0;
1198
+ height: 70px;
1199
+ margin-left: -150px;
1200
+ width: 300px;
1201
+ z-index: -2;
1202
+ }
1203
+
1204
+ .device-surface-studio .device-power {
1205
+ background: #eff0f0;
1206
+ border: solid #e2e3e4;
1207
+ border-radius: 0 0 2px 2px;
1208
+ border-width: 0 4px 2px 4px;
1209
+ height: 32px;
1210
+ margin: 30px auto 0 auto;
1211
+ position: relative;
1212
+ width: 250px;
1213
+ }
1214
+
1215
+ .device-surface-studio .device-power::after {
1216
+ background: #adb0b3;
1217
+ content: '';
1218
+ height: 2px;
1219
+ left: -4px;
1220
+ position: absolute;
1221
+ top: 4px;
1222
+ width: 250px;
1223
+ }
1224
+
1225
+ .device-imac-pro {
1226
+ height: 484px;
1227
+ width: 624px;
1228
+ }
1229
+
1230
+ .device-imac-pro .device-frame {
1231
+ background: #0d0d0d;
1232
+ border-radius: 18px;
1233
+ box-shadow: inset 0 0 0 2px #080808;
1234
+ height: 428px;
1235
+ padding: 24px 24px 80px 24px;
1236
+ position: relative;
1237
+ width: 624px;
1238
+ }
1239
+
1240
+ .device-imac-pro .device-frame::after {
1241
+ background: #2f2e33;
1242
+ border-radius: 0 0 18px 18px;
1243
+ bottom: 2px;
1244
+ content: '';
1245
+ height: 54px;
1246
+ left: 2px;
1247
+ position: absolute;
1248
+ width: 620px;
1249
+ }
1250
+
1251
+ .device-imac-pro .device-frame::before {
1252
+ bottom: 15px;
1253
+ color: #0d0d0d;
1254
+ content: '';
1255
+ font-size: 24px;
1256
+ height: 24px;
1257
+ left: 50%;
1258
+ line-height: 24px;
1259
+ margin-left: -100px;
1260
+ position: absolute;
1261
+ text-align: center;
1262
+ width: 200px;
1263
+ z-index: 9;
1264
+ }
1265
+
1266
+ .device-imac-pro .device-content {
1267
+ border: 2px solid #121212;
1268
+ border-radius: 2px;
1269
+ height: 324px;
1270
+ width: 576px;
1271
+ }
1272
+
1273
+ .device-imac-pro .device-power::after,
1274
+ .device-imac-pro .device-power::before {
1275
+ content: '';
1276
+ }
1277
+
1278
+ .device-imac-pro .device-power::after {
1279
+ background: #222225;
1280
+ border-radius: 2px;
1281
+ height: 6px;
1282
+ margin: 0 auto;
1283
+ position: relative;
1284
+ width: 180px;
1285
+ }
1286
+
1287
+ .device-imac-pro .device-power::before {
1288
+ border: solid transparent;
1289
+ border-bottom-color: #333;
1290
+ border-width: 0 8px 50px 8px;
1291
+ height: 50px;
1292
+ margin: 0 auto;
1293
+ position: relative;
1294
+ width: 130px;
1295
+ }
1296
+
1297
+ .device-apple-watch {
1298
+ height: 234px;
1299
+ width: 200px;
1300
+ }
1301
+
1302
+ .device-apple-watch .device-frame {
1303
+ background: #0d0d0d;
1304
+ border-radius: 40px;
1305
+ box-shadow: inset 0 0 2px 2px #adb0b3, inset 0 0 0 6px #e2e3e4, inset 0 0 0 8px #e2e3e4;
1306
+ height: 234px;
1307
+ padding: 32px;
1308
+ position: relative;
1309
+ width: 200px;
1310
+ }
1311
+
1312
+ .device-apple-watch .device-frame::after {
1313
+ border-radius: 30px;
1314
+ box-shadow: inset 0 0 25px 0 rgba(255, 255, 255, 0.75);
1315
+ content: '';
1316
+ height: 216px;
1317
+ left: 9px;
1318
+ position: absolute;
1319
+ top: 9px;
1320
+ width: 182px;
1321
+ }
1322
+
1323
+ .device-apple-watch .device-content {
1324
+ border: 2px solid #121212;
1325
+ border-radius: 2px;
1326
+ height: 170px;
1327
+ width: 136px;
1328
+ }
1329
+
1330
+ .device-apple-watch .device-btns {
1331
+ background: #e2e3e4;
1332
+ border-left: 2px solid #adb0b3;
1333
+ border-radius: 8px 4px 4px 8px / 20px 4px 4px 20px;
1334
+ box-shadow: inset 0 0 2px 2px #adb0b3;
1335
+ height: 44px;
1336
+ position: absolute;
1337
+ right: -10px;
1338
+ top: 52px;
1339
+ width: 16px;
1340
+ z-index: 9;
1341
+ }
1342
+
1343
+ .device-apple-watch .device-btns::after {
1344
+ background: #e2e3e4;
1345
+ border-radius: 4px 2px 2px 4px / 10px 2px 2px 10px;
1346
+ box-shadow: inset 0 0 1px 2px #adb0b3;
1347
+ content: '';
1348
+ height: 66px;
1349
+ position: absolute;
1350
+ right: 6px;
1351
+ top: 68px;
1352
+ width: 8px;
1353
+ }
1354
+
1355
+ .device-apple-watch .device-btns::before {
1356
+ background: #adb0b3;
1357
+ box-shadow: 0 -16px #adb0b3, 0 -12px #adb0b3, 0 -8px #adb0b3, 0 -4px #adb0b3, 0 4px #adb0b3,
1358
+ 0 8px #adb0b3, 0 12px #adb0b3, 0 16px #adb0b3;
1359
+ content: '';
1360
+ height: 2px;
1361
+ margin-top: -1px;
1362
+ position: absolute;
1363
+ right: 0;
1364
+ top: 50%;
1365
+ width: 6px;
1366
+ }