-
Notifications
You must be signed in to change notification settings - Fork 6
/
iphonex.css
72 lines (52 loc) · 3.54 KB
/
iphonex.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/*
* Copyright (c) OSREC Technologies (https://osrec.co.uk)
* ------------------------------------------------------
* This CSS library was funded by the Bx team at OSREC
* Technologies and is free for non-commercial use.
*
* Commercial use requires a license. You can purchase an
* unlimited license from https://osrec.co.uk/ for a small fee.
* This helps fund further development and keeps the library
* up to date with new devices.
*
* Check out the Bx team's work @ https://usebx.com
*
* */
/* iPhoneX portrait */
.iphonex.portrait
{ position: relative; display: inline-block; transform: scale3d(0.9467,0.9467,1); transform-origin: 50% 50%; width: 100%; padding: calc(18.5/9*50%) 0; }
.iphonex.portrait .content
{ position: absolute; z-index: 5; width: 100%; height: 100%; border-radius: 10%/8%; overflow: hidden; top: 0px; }
.iphonex.portrait .reflection
{ width: 105%; height: 103%; position: absolute; top: -1.5%; left: -2.5%; z-index: 7; border-radius: 10%/8%; }
.iphonex.portrait .caseBorder
{ width: 110%; height: 105%; position: absolute; top: -2.5%; left: -5%; z-index: 0; border-radius: 10%/8%; }
.iphonex.portrait .case
{ width: 105%; height: 103%; position: absolute; top: -1.5%; left: -2.5%; z-index: 1; border-radius: 10%/8%; transform-origin: center; transform: scale3d(0.995, 0.995, 1); }
.iphonex.portrait .screen
{ width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; z-index: 6; border-radius: 10%/8%; overflow: hidden; }
.iphonex.portrait .speaker
{ width: 50%; height: 4%; position: absolute; top: -0.5%; left: 25%; z-index: 6; border-bottom-left-radius: 15% 50%; border-bottom-right-radius: 15% 50%; }
/* iPhoneX landscape */
.iphonex.landscape
{ position: relative; display: inline-block; transform: scale3d(0.9467,0.9467,1); transform-origin: 50% 50%; width: 100%; padding: calc(9/18.5*50%) 0;}
.iphonex.landscape .content
{ position: absolute; z-index: 5; height: 100%; width: 100%; border-radius: 8%/10%; overflow: hidden; top: 0px; }
.iphonex.landscape .reflection
{ height: 105%; width: 103%; position: absolute; left: -1.5%; top: -2.5%; z-index: 7; border-radius: 8%/10%; }
.iphonex.landscape .caseBorder
{ height: 110%; width: 105%; position: absolute; left: -2.5%; top: -5%; z-index: 0; border-radius: 8%/10%; }
.iphonex.landscape .case
{ height: 105%; width: 103%; position: absolute; left: -1.5%; top: -2.5%; z-index: 1; border-radius: 8%/10%; transform-origin: center; transform: scale3d(0.995, 0.995, 1); box-shadow: inset 0 0 10px 0 rgba(255,255,255,0.8); }
.iphonex.landscape .screen
{ height: 100%; width: 100%; position: absolute; left: 0%; top: 0%; z-index: 6; border-radius: 8%/10%; overflow: hidden; }
.iphonex.landscape .speaker
{ height: 50%; width: 4%; position: absolute; left: -0.5%; top: 25%; z-index: 6; border-bottom-right-radius: 50% 15%; border-top-right-radius: 50% 15%; }
/* Color overrides */
.iphonex.portrait.black .speaker { background: #101010; box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.15); }
.iphonex.portrait.black .caseBorder { background: linear-gradient(#999 0%, #555 100%); }
.iphonex.landscape.black .caseBorder { background: linear-gradient(90deg #999 0%, #555 100%); }
.iphonex.landscape.black .speaker { background: #121212; box-shadow: 2px 0px 2px 1px rgba(0,0,0,0.15); }
.iphonex.landscape.black .case { box-shadow: none; }
.iphonex.portrait.white .speaker { background: linear-gradient(#eee 0%, #f5f5f5 100%); box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.15); }
.iphonex.landscape.white .speaker { background: linear-gradient(#eee 0%, #f5f5f5 100%); box-shadow: 2px 0px 2px 1px rgba(0,0,0,0.15); }