Diffstat (limited to 'frontend/delta/scss/web/add2home.scss') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/delta/scss/web/add2home.scss | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/frontend/delta/scss/web/add2home.scss b/frontend/delta/scss/web/add2home.scss new file mode 100644 index 0000000..ecff0b1 --- a/dev/null +++ b/frontend/delta/scss/web/add2home.scss | |||
@@ -0,0 +1,160 @@ | |||
1 | /** | ||
2 | * | ||
3 | * Main container | ||
4 | * | ||
5 | */ | ||
6 | #addToHomeScreen { | ||
7 | z-index:9999; | ||
8 | -webkit-user-select:none; | ||
9 | user-select:none; | ||
10 | -webkit-box-sizing:border-box; | ||
11 | box-sizing:border-box; | ||
12 | -webkit-touch-callout:none; | ||
13 | touch-callout:none; | ||
14 | width:240px; | ||
15 | font-size:15px; | ||
16 | padding:12px 14px; | ||
17 | text-align:left; | ||
18 | font-family:helvetica; | ||
19 | background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#fff),color-stop(0.02,#eee),color-stop(0.98,#ccc),color-stop(1,#a3a3a3)); | ||
20 | border:1px solid #505050; | ||
21 | -webkit-border-radius:8px; | ||
22 | -webkit-background-clip:padding-box; | ||
23 | color:#333; | ||
24 | text-shadow:0 1px 0 rgba(255,255,255,0.75); | ||
25 | line-height:130%; | ||
26 | -webkit-box-shadow:0 0 4px rgba(0,0,0,0.5); | ||
27 | } | ||
28 | |||
29 | #addToHomeScreen.addToHomeIpad { | ||
30 | width:268px; | ||
31 | font-size:18px; | ||
32 | padding:14px; | ||
33 | } | ||
34 | |||
35 | /** | ||
36 | * | ||
37 | * The 'wide' class is added when the popup contains the touch icon | ||
38 | * | ||
39 | */ | ||
40 | #addToHomeScreen.addToHomeWide { | ||
41 | width:296px; | ||
42 | } | ||
43 | |||
44 | #addToHomeScreen.addToHomeIpad.addToHomeWide { | ||
45 | width:320px; | ||
46 | font-size:18px; | ||
47 | padding:14px; | ||
48 | } | ||
49 | |||
50 | /** | ||
51 | * | ||
52 | * The balloon arrow | ||
53 | * | ||
54 | */ | ||
55 | #addToHomeScreen .addToHomeArrow { | ||
56 | position:absolute; | ||
57 | background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#ccc)); | ||
58 | border-width:0 1px 1px 0; | ||
59 | border-style:solid; | ||
60 | border-color:#505050; | ||
61 | width:16px; height:16px; | ||
62 | -webkit-transform:rotateZ(45deg); | ||
63 | bottom:-9px; left:50%; | ||
64 | margin-left:-8px; | ||
65 | -webkit-box-shadow:inset -1px -1px 0 #a9a9a9; | ||
66 | -webkit-border-bottom-right-radius:2px; | ||
67 | } | ||
68 | |||
69 | |||
70 | /** | ||
71 | * | ||
72 | * The balloon arrow for iPad | ||
73 | * | ||
74 | */ | ||
75 | #addToHomeScreen.addToHomeIpad .addToHomeArrow { | ||
76 | -webkit-transform:rotateZ(-135deg); | ||
77 | background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(238,238,238,0)),color-stop(0.4,rgba(238,238,238,0)),color-stop(0.4,#eee)); | ||
78 | -webkit-box-shadow:inset -1px -1px 0 #fff; | ||
79 | top:-9px; bottom:auto; left:50%; | ||
80 | } | ||
81 | |||
82 | |||
83 | /** | ||
84 | * | ||
85 | * Close button | ||
86 | * | ||
87 | */ | ||
88 | #addToHomeScreen .addToHomeClose { | ||
89 | -webkit-box-sizing:border-box; | ||
90 | position:absolute; | ||
91 | right:4px; | ||
92 | top:4px; | ||
93 | width:18px; | ||
94 | height:18px; line-height:14px; | ||
95 | text-align:center; | ||
96 | text-indent:1px; | ||
97 | -webkit-border-radius:9px; | ||
98 | background:rgba(0,0,0,0.12); | ||
99 | color:#707070; | ||
100 | -webkit-box-shadow:0 1px 0 #fff; | ||
101 | font-size:16px; | ||
102 | } | ||
103 | |||
104 | |||
105 | /** | ||
106 | * | ||
107 | * The '+' icon, displayed only on iOS < 4.2 | ||
108 | * | ||
109 | */ | ||
110 | #addToHomeScreen .addToHomePlus { | ||
111 | font-weight:bold; | ||
112 | font-size:1.3em; | ||
113 | } | ||
114 | |||
115 | |||
116 | /** | ||
117 | * | ||
118 | * The 'share' icon, displayed only on iOS >= 4.2 | ||
119 | * | ||
120 | */ | ||
121 | #addToHomeScreen .addToHomeShare { | ||
122 | display:inline-block; | ||
123 | width:18px; | ||
124 | height:15px; | ||
125 | background-repeat:no-repeat; | ||
126 | background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAQAAADu6HTYAAADPElEQVR4Xq3TX2gcRRzA8e/M7mVv2+TSNpc/TZtrY6jUGqgaSAmEChKLrYK0YH0RFC2CSCkEfCghiKU04J8qNigq6os+iQV98MHWFwVBrQQRWs21lBw5cw3NNb1/udu72RGG5Y77IzXW77D7sAwf5scyYoL6BGXSDKFZwaGpLvIUaeoCkvX1MmsM0Ny6oRSQYOLuIS+YZOpfQdqslpUxcZrzTVAz4qPwW2O3CeIwC/RSzeY6Ow1QhUrkr+YOWfEKDkEP8Rij7CHKJmrFSDHBdwGEE5wiGChPN+PnT8VdRtEIl1d4gRj/1EVe5ZSBKGh8iqQpo/Fo5+3C/gz0MYg4zgwbqday1/Q4B8BGQ45d/Hi54lakCrU5obOcidJpu1+Lg9whjabyaOYLnrIBFFaRD+xe2ybMDWY66GmP/WA9cGfGp0CWhy0wkMN8inepFiH2rV1j0NQSNQbFLRQnS8/8YSDBBpadfv4CYDub2fmeHDNAsL1MBWUel0iA+Xik6eHcyvD3vAMSU1TGuA/YRS+dD7ovCQN43GKRFCU20Kd3V/avDVVyAZ5niTEuLA5/zBGWg9EEEhfJKN200Tat8CmRAQb9+wv7soPlHt2tQorsz1uPbr0HTY4sJwrH47zJZwABBAKLMBoQXepwgTwdHCo+fXMkQ4lrxEmQ5AaXipPqDY9V2vn09tgvTPI71EEGYxM+/uMJLJ4svpgaWGKOi/xKgmqLSUGSUd5f2vIVJ/CgBaTIUsZ7ZBsn0+NzfMOXLFCXQyTcybN6ep5ZZgUOHn7jpfUpsZshdugPGf+E5zjbyHTSRyQ8xfRPPM/s63RHeuknSoT22mjmmnAOIMkUZ6D1xSfPPAfd1WFKM3sO2CMaHx8M1NjnXKHaAGGkOW0C02WeYHUz4qMtx+w5gUDS8NckYe5lHsMYwCZEPyEEmjLDZFmAS7CDviMdxyTkMNVBKEmYLvbiQQBIBBbCQG04bGQvFWz6CfsCQLWCigILFwcfkGYBiOpbYuOizTAyYyDdCtrGaRG1LCkIgMYEFhI0WqQZoSlbGRyHKe4qOx7iv2bVQW9dp4dlM/x6kmwnWQcd/Q3FCqwTEiT5s+6D5v/pb0SSHyg7uhMWAAAAAElFTkSuQmCC); | ||
127 | background-size:18px 15px; | ||
128 | text-indent:-9999em; | ||
129 | overflow:hidden; | ||
130 | } | ||
131 | |||
132 | #addToHomeScreen .addToHomeShare.addToHomeShareOS7 { | ||
133 | width:11px; | ||
134 | background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA8CAYAAAAQTCjdAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAASCQAAEgkB80sG3AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKjSURBVGiB7dpPiFVVHMDxz7m9NCtMyI2bEJEC25WrEkzHUXCRraIwdNE8ZxfYIlcis1ZEbGEzT1QCF4XgH1CyWhUoJKIWNRGEiCNKmkSiYTzfcfGuOokx77x3ZlS8382959zfn+/invvn3RdijHIRBrwkOINCYXEcdjpb7VyiYdBsLScwt5y6IloYdzqXo36Ro0gY9IKWo+5JwmzBt2HQnBw9ehYNazyn5TBee8Dh+Vq+CWu92GufnkTDR6ab7gDeBNHouMM/l9tXTXM0fGBmL726Fg1Dam74EsvKqR8VNowL2Yzj5f7rnnE4DHq2235diYYhhTGfC94up35T0y+6di/ITU0rKVd+sEi0P7xr2pSJOu8zvF+OzqEv7vDH/WFxt7/cshy/ticsN8sXYUht0kXDOlsF9XJ4UaEvNoz9X3zc5bKaZThbyr5jzJ4wlNY7KTgM+ES0vhz+KeiPw36fKC/ucAF9uFBOrTZm26SJCtaV27+xIo7cXdkTEhvOoh+XyxprU1qnim7CQdGK2HAyKRexYVShT3RItDElN+mkjiP2Ym+S3f01hv2EVal5WW6hU0ElmptaqJuBpXg6MbeFH2LDpU6CQ93zWIKnEvs0cayGU3glMfkOo1jQYewZzOuyz7FC95Jwo5OgUFfgeg993hh/eTqCTxOSm/iuk8DY0Ap1b2GhtHXxsfZN4j/X0fOx4auEIknEhqv4OiUn1L13Z/+xWfWVaG4q0dxUormpRHNTieamEs1NJZqbJ1Q0jHvdiJo5S2cVjSNOCHZhn3/SnuYnIvl3yomIIz7MXZMn9hydRCrR3FSiualEc1OJ5qYSzU0lmptKNDePjWgwcPePT7/g+4cp8wCW4GXaryK3tL+mLdD5x62ppllgu7bso8q/2HIbzGWdNmWnSJwAAAAASUVORK5CYII=); | ||
135 | background-size:11px 15px; | ||
136 | } | ||
137 | |||
138 | /** | ||
139 | * | ||
140 | * The touch icon (if available) | ||
141 | * | ||
142 | */ | ||
143 | #addToHomeScreen .addToHomeTouchIcon { | ||
144 | display:block; | ||
145 | float:left; | ||
146 | -webkit-border-radius:6px; | ||
147 | border-radius:6px; | ||
148 | -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5), | ||
149 | inset 0 0 2px rgba(255,255,255,0.9); | ||
150 | box-shadow:0 1px 3px rgba(0,0,0,0.5), | ||
151 | inset 0 0 2px rgba(255,255,255,0.9); | ||
152 | background-repeat:no-repeat; | ||
153 | width:57px; height:57px; | ||
154 | -webkit-background-size:57px 57px; | ||
155 | background-size:57px 57px; | ||
156 | margin:0 12px 0 0; | ||
157 | border:1px solid #333; | ||
158 | -webkit-background-clip:padding-box; | ||
159 | background-clip:padding-box; | ||
160 | } | ||