-
Notifications
You must be signed in to change notification settings - Fork 9
/
jquery.smartwebbanner.scss
59 lines (57 loc) · 8.75 KB
/
jquery.smartwebbanner.scss
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
/*!
* 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;
#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; }
#swb-close:active { color:#aaa; }
#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); }
#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; }
#swb-icon.gloss:hover:after { opacity:0.8; }
#smartWebBanner.no-icon #swb-icon { display:none; }
#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.free #swb-info { top:1.7em; }
#smartWebBanner.free #swb-info:after { content:'FREE - Web Application'; display:block; }
#smartWebBanner.no-icon #swb-info { left:3.1em; }
#swb-info strong { display:block; font-size:1.2em; color:#4d4d4d; }
#swb-info em { font-style:normal; text-transform:uppercase; }
#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; }
#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);
.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=); }
strong { display:block; }
.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);
.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;
#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; }
#swb-icon { border-radius:0.8em; box-shadow:0 0 1px 1px rgba(0,0,0,0.25) inset; }
#swb-icon.gloss:after { display:none; }
#swb-info { font-weight:normal; color:#303030; text-shadow:none; }
#swb-info strong { font-weight:normal; color:#000; }
#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);
.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==); }
.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;
.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, rgba(33,37,41,1) 0%,rgba(65,68,78,1) 100%); background:-webkit-linear-gradient(top, rgba(33,37,41,1) 0%,rgba(65,68,78,1) 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);
#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); }
#swb-close:active { color:#eee; transform:scale(0.9); -webkit-transform:scale(0.9); }
#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%); }
#swb-info { color:#ccc; text-shadow:0 0.1em 0.3em #000; }
#swb-info strong { color:#fff; }
#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, rgba(81,157,251,1) 0%,rgba(45,102,250,1) 100%); background:-webkit-linear-gradient(top, rgba(81,157,251,1) 0%,rgba(45,102,250,1) 100%); border-radius:0.8em; box-shadow:0 0.1em 0.3em #000; }
#swb-save { border:0; color:#d1d1d1; background:linear-gradient(top, rgba(48,54,61,1) 0%,rgba(23,27,37,1) 100%); background:-webkit-linear-gradient(top, rgba(48,54,61,1) 0%,rgba(23,27,37,1) 100%); text-transform:none; text-shadow:0 0.1em 0.2em #000; box-shadow:0 0.1em 0.3em #000 inset; }
#swb-save:active { background:linear-gradient(top, rgba(23,27,37,1) 0%,rgba(48,54,61,1) 100%); background:-webkit-linear-gradient(top, rgba(23,27,37,1) 0%,rgba(48,54,61,1) 100%); }
}