-
Notifications
You must be signed in to change notification settings - Fork 9
/
jquery.smartwebbanner.css
89 lines (47 loc) · 9.72 KB
/
jquery.smartwebbanner.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/*! jQuery Smart Web App Banner (Add to Home Screen) Copyright (c) 2017 Kurt Zenisek @ kzeni.com Version: 1.5 (11-AUGUST-2017) */
/* General (based on iOS 6) */
#smartWebBanner { position: absolute; left: 0; top: -4.85em; border-bottom: 0.1em solid #e8e8e8; width: 100%; height: 4.85em; font-family: 'Helvetica Neue',sans-serif; font-size: 16px; text-align: left; background: linear-gradient(top, #f4f4f4 0%, #cdcdcd 100%); background: -webkit-linear-gradient(top, #f4f4f4 0%, #cdcdcd 100%); box-shadow: 0 0.1em 0.15em rgba(0, 0, 0, 0.5); z-index: 9998; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; overflow: hidden; text-size-adjust: none; -webkit-text-size-adjust: none; }
#smartWebBanner #swb-close { position: absolute; left: 0.6em; top: 0.6em; display: block; border: 0.3em solid #fff; width: 1.4em; height: 1.4em; font-family: 'ArialRoundedMTBold','Helvetica Neue',sans-serif; font-size: 0.6em; line-height: 1.4em; text-align: center; color: #fff; background: #070707; text-decoration: none; text-shadow: none; border-radius: 1.4em; box-shadow: 0 0.3em 0.4em rgba(0, 0, 0, 0.4); font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased; }
#smartWebBanner #swb-close:active { color: #aaa; }
#smartWebBanner #swb-icon { position: absolute; left: 1.9em; top: 0.65em; display: block; width: 3.6em; height: 3.6em; background: rgba(0, 0, 0, 0.6); background-size: cover; border-radius: 0.65em; box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.3); }
#smartWebBanner #swb-icon.gloss:after { content: ''; position: absolute; left: 0; top: -0.1em; border-top: 0.1em solid rgba(255, 255, 255, 0.8); width: 100%; height: 50%; background: linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%); border-radius: 0.65em 0.65em 0.8em 0.8em; }
#smartWebBanner #swb-icon.gloss:hover:after { opacity: 0.8; }
#smartWebBanner #smartWebBanner.no-icon #swb-icon { display: none; }
#smartWebBanner #swb-info { position: absolute; left: 8.95em; top: 2.2em; width: 44%; font-size: 0.7em; line-height: 1.2em; font-weight: bold; color: #6a6a6a; text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.8); }
#smartWebBanner #smartWebBanner.free #swb-info { top: 1.7em; }
#smartWebBanner #smartWebBanner.free #swb-info:after { content: 'FREE - Web Application'; display: block; }
#smartWebBanner #smartWebBanner.no-icon #swb-info { left: 3.1em; }
#smartWebBanner #swb-info strong { display: block; font-size: 1.2em; color: #4d4d4d; }
#smartWebBanner #swb-info em { font-style: normal; text-transform: uppercase; }
#smartWebBanner #swb-save { position: absolute; right: 1.4em; top: 1.7em; border: 0.1em solid #bfbfbf; width: 10%; min-width: 4.1em; height: 1.7em; font-size: 0.9em; line-height: 1.7em; text-align: center; font-weight: bold; color: #6a6a6a; background: linear-gradient(top, #efefef 0%, #dcdcdc 100%); background: -webkit-linear-gradient(top, #efefef 0%, #dcdcdc 100%); text-transform: uppercase; text-decoration: none; text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.8); border-radius: 0.25em; box-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.6), 0 0.1em 0 rgba(255, 255, 255, 0.7) inset; }
#smartWebBanner #swb-save:active { line-height: 1.8em; background: linear-gradient(top, #dcdcdc 0%, #efefef 100%); background: -webkit-linear-gradient(top, #dcdcdc 0%, #efefef 100%); }
#swb-instructions { display: none; position: fixed; left: 50%; bottom: 0.8em; margin: 0 0 0 -6.3em; padding: 0.9em; border: 0.1em solid rgba(180, 180, 180, 0.9); width: 10.8em; font-family: 'Helvetica Neue',sans-serif; font-size: 16px; color: #fff; background: -webkit-linear-gradient(top, rgba(84, 84, 84, 0.8) 0%, rgba(22, 22, 22, 0.8) 20%, rgba(0, 0, 0, 0.8) 21%, rgba(19, 19, 19, 0.8) 100%); background: linear-gradient(top, rgba(84, 84, 84, 0.8) 0%, rgba(22, 22, 22, 0.8) 20%, rgba(0, 0, 0, 0.8) 21%, rgba(19, 19, 19, 0.8) 100%); text-shadow: 0 0.1em 0.1em #000; border-radius: 0.3em; box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.8); z-index: 99; transform: translateZ(10px); -webkit-transform: translateZ(10px); }
#swb-instructions .icon { display: inline-block; width: 1.5em; height: 0.95em; background: no-repeat center center; background-size: contain; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAMAAABzP0xhAAAAMFBMVEWrq6tERETFxcXv7+/q6urw8PAaGhoAAAAICAjt7e1tbW0AAADs7OwAAAD////v7+8oaTOHAAAADnRSTlP56xJKeLk5fNuc4qzhAMdbNxYAAADeSURBVHjatdJBEoMgDEBRjEBAQnL/2zYGOqjF1k3/SuTNGBhdnQdQR3fICzxBsv5Eq4j4J0jCEyQEDZH0mKDv+0AkvfWEuI0AnuSU74itBe1QHwVDTGlvN0EmhYZQUwM0Icy5odoKU7NhG7yZ/H5v9WdZChiiw820fXLEtnA26kDBhLhtSdrCwwwEO3EKCmKMNdqtlFhPaFWiQvctRZRKtQbKOiKasLx96gOlnQy0JV3CBSHWY5gUZLqgWE/FqEaO6PaXCv9A4vMkH47otoGEv0QdbV/rCMt9CTuqD3oBHhk0EQgSva4AAAAASUVORK5CYII=); }
#swb-instructions strong { display: block; }
#swb-instructions .arrow { position: absolute; left: 50%; bottom: -0.8em; margin: 0 0 0 -0.8em; width: 0; height: 0; border-left: 0.8em solid transparent; border-right: 0.8em solid transparent; border-top: 0.8em solid rgba(19, 19, 19, 0.8); }
#swb-instructions.ipad { left: 3.55em; top: 0.6em; bottom: auto; margin: 0; width: 11.45em; border-color: rgba(18, 18, 18, 0.9); font-size: 21px; background: linear-gradient(top, rgba(115, 118, 129, 0.9) 0%, rgba(64, 69, 83, 0.9) 20%, rgba(39, 45, 60, 0.9) 21%, rgba(39, 45, 60, 0.9) 100%); background: -webkit-linear-gradient(top, rgba(115, 118, 129, 0.9) 0%, rgba(64, 69, 83, 0.9) 20%, rgba(39, 45, 60, 0.9) 21%, rgba(39, 45, 60, 0.9) 100%); border-radius: 0.4em; box-shadow: 0 0.3em 0.9em rgba(0, 0, 0, 0.6); }
#swb-instructions.ipad .arrow { top: -0.6em; bottom: auto; border-top: none; border-bottom: 0.6em solid rgba(115, 118, 129, 0.9); }
/* iOS 7 */
#smartWebBanner.ios7 { border-color: #c2c2c2; background: #f2f2f2; box-shadow: none; }
#smartWebBanner.ios7 #swb-close { left: 0; top: 1.7em; border: 0; width: 2.1em; height: 1.8em; font-family: 'Helvetica Neue',sans-serif; font-size: 0.9em; line-height: 1.8em; color: #797979; background: none; box-shadow: none; }
#smartWebBanner.ios7 #swb-icon { border-radius: 0.8em; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25) inset; }
#smartWebBanner.ios7 #swb-icon.gloss:after { display: none; }
#smartWebBanner.ios7 #swb-info { font-weight: normal; color: #303030; text-shadow: none; }
#smartWebBanner.ios7 #swb-info strong { font-weight: normal; color: #000; }
#smartWebBanner.ios7 #swb-save { border: none; font-weight: normal; color: #007aff; background: none; box-shadow: none; }
#swb-instructions.ios7 { border: 1px solid #c2c2c2; color: #000; background: rgba(250, 250, 250, 0.9); text-shadow: none; box-shadow: none; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#swb-instructions.ios7 .icon { width: 1.1em; height: 1.4em; background: #007aff; mask-box-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAA1CAQAAACHdlEQAAAArElEQVR4Ae3PIQpCQRCH8S+IwWbwCGYvYTJ6AhGDYBC9gAgG4YG3UfAWgmcxCOoIEx5MeLDsTtv5/nX4wZDUngcjXNohCHf6FLflh+iupdympV4ItxJurdRBsWkZt1LqCIpRwi2VOkGLZXMLvghnMFgWN+eD0IDFDNcjsRlvLmAxwz0ZkNwYOjGYMCQ7i2lVY9I9iyXcu2MubwYWWGCBVYcBgQUWWGCVYT5zx/60/3j7VZPqwQAAAABJRU5ErkJggg==); -webkit-mask-box-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAA1CAQAAACHdlEQAAAArElEQVR4Ae3PIQpCQRCH8S+IwWbwCGYvYTJ6AhGDYBC9gAgG4YG3UfAWgmcxCOoIEx5MeLDsTtv5/nX4wZDUngcjXNohCHf6FLflh+iupdympV4ItxJurdRBsWkZt1LqCIpRwi2VOkGLZXMLvghnMFgWN+eD0IDFDNcjsRlvLmAxwz0ZkNwYOjGYMCQ7i2lVY9I9iyXcu2MubwYWWGCBVYcBgQUWWGCVYT5zx/60/3j7VZPqwQAAAABJRU5ErkJggg==); }
#swb-instructions.ios7 .arrow { position: absolute; left: 50%; bottom: -0.8em; margin: 0 0 0 -0.8em; width: 0; height: 0; border-left: 0.8em solid transparent; border-right: 0.8em solid transparent; border-top: 0.8em solid rgba(250, 250, 250, 0.9); }
#swb-instructions.ipad.ios7 { left: auto; right: 1em; }
#swb-instructions.ipad.ios7 .arrow { top: -0.6em; bottom: auto; border-top: none; border-bottom: 0.6em solid rgba(250, 250, 250, 0.9); }
/* Dark */
#smartWebBanner.dark { border-color: #212228; background: linear-gradient(top, #212529 0%, #41444e 100%); background: -webkit-linear-gradient(top, #212529 0%, #41444e 100%); box-shadow: 0 0.15em 0.35em rgba(0, 0, 0, 0.8) inset, 0 0.1em 0 rgba(255, 255, 255, 0.1); }
#smartWebBanner.dark #swb-close { border: 0; width: 1.8em; height: 1.8em; line-height: 1.8em; color: #b1b1b3; background: #1c1e21; text-shadow: 0 0.1em 0.1em #000; box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.8) inset, 0 0.1em 0.1em rgba(255, 255, 255, 0.3); }
#smartWebBanner.dark #swb-close:active { color: #eee; transform: scale(0.9); -webkit-transform: scale(0.9); }
#smartWebBanner.dark #swb-icon { box-reflect: below 0.1em linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.5) 100%); -webkit-box-reflect: below 0.1em -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.5) 100%); }
#smartWebBanner.dark #swb-info { color: #ccc; text-shadow: 0 0.1em 0.3em #000; }
#smartWebBanner.dark #swb-info strong { color: #fff; }
#smartWebBanner.dark #swb-info strong:before { content: ''; display: block; float: left; margin: 0.2em 0.3em 0 0; width: 0.8em; height: 0.8em; background: linear-gradient(top, #519dfb 0%, #2d66fa 100%); background: -webkit-linear-gradient(top, #519dfb 0%, #2d66fa 100%); border-radius: 0.8em; box-shadow: 0 0.1em 0.3em #000; }
#smartWebBanner.dark #swb-save { border: 0; color: #d1d1d1; background: linear-gradient(top, #30363d 0%, #171b25 100%); background: -webkit-linear-gradient(top, #30363d 0%, #171b25 100%); text-transform: none; text-shadow: 0 0.1em 0.2em #000; box-shadow: 0 0.1em 0.3em #000 inset; }
#smartWebBanner.dark #swb-save:active { background: linear-gradient(top, #171b25 0%, #30363d 100%); background: -webkit-linear-gradient(top, #171b25 0%, #30363d 100%); }
/*# sourceMappingURL=jQuery.smartWebBanner.css.map */