4
0

addtohomescreen.css 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. .ath-viewport * {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box;
  5. }
  6. .ath-viewport {
  7. position: relative;
  8. z-index: 2147483641;
  9. pointer-events: none;
  10. -webkit-tap-highlight-color: rgba(0,0,0,0);
  11. -webkit-touch-callout: none;
  12. -webkit-user-select: none;
  13. -moz-user-select: none;
  14. -ms-user-select: none;
  15. user-select: none;
  16. -webkit-text-size-adjust: none;
  17. -moz-text-size-adjust: none;
  18. -ms-text-size-adjust: none;
  19. -o-text-size-adjust: none;
  20. text-size-adjust: none;
  21. }
  22. .ath-modal {
  23. pointer-events: auto !important;
  24. background: rgba(0,0,0,0.6);
  25. }
  26. .ath-mandatory {
  27. background: #000;
  28. }
  29. .ath-container {
  30. pointer-events: auto !important;
  31. position: absolute;
  32. z-index: 2147483641;
  33. padding: 0.7em 0.6em;
  34. width: 18em;
  35. background: #eee;
  36. background-size: 100% auto;
  37. box-shadow: 0 0.2em 0 #d1d1d1;
  38. font-family: sans-serif;
  39. font-size: 15px;
  40. line-height: 1.5em;
  41. text-align: center;
  42. }
  43. .ath-container small {
  44. font-size: 0.8em;
  45. line-height: 1.3em;
  46. display: block;
  47. margin-top: 0.5em;
  48. }
  49. .ath-ios.ath-phone {
  50. bottom: 1.8em;
  51. left: 50%;
  52. margin-left: -9em;
  53. }
  54. .ath-ios6.ath-tablet {
  55. left: 5em;
  56. top: 1.8em;
  57. }
  58. .ath-ios7.ath-tablet {
  59. left: 0.7em;
  60. top: 1.8em;
  61. }
  62. .ath-ios8.ath-tablet,
  63. .ath-ios9.ath-tablet,
  64. .ath-ios10.ath-tablet{
  65. right: 0.4em;
  66. top: 1.8em;
  67. }
  68. .ath-android {
  69. bottom: 1.8em;
  70. left: 50%;
  71. margin-left: -9em;
  72. }
  73. /* close icon */
  74. .ath-container:before {
  75. content: '';
  76. position: relative;
  77. display: block;
  78. float: right;
  79. margin: -0.7em -0.6em 0 0.5em;
  80. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAMAAABmmnOVAAAAdVBMVEUAAAA5OTkzMzM7Ozs3NzdBQUFAQEA/Pz8+Pj5BQUFAQEA/Pz8+Pj5BQUFAQEA/Pz9BQUE+Pj4/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8+Pj4/Pz8+Pj4/Pz8/Pz8/Pz8/Pz8/Pz8+Pj4/Pz8/Pz8/Pz8/Pz9AQEA/Pz+fdCaPAAAAJnRSTlMACQoNDjM4OTo7PEFCQ0RFS6ytsbS1tru8vcTFxu7x8vX19vf4+C5yomAAAAJESURBVHgBvdzLTsJAGEfxr4C2KBcVkQsIDsK8/yPaqIsPzVlyzrKrX/5p0kkXEz81L23otc9NpIbbWia2YVLqdnhlqFlhGWpSDHe1aopsSIpRb8gK0dC3G30b9rVmhWZIimTICsvQtx/FsuYOrWHoDjX3Gu31gzJxdki934WrAIOsAIOsAIOiAMPhPsJTgKGN0BVsYIVsYIVpYIVpYIVpYIVpYIVpYIVpYIVpYIVlAIVgEBRs8BRs8BRs8BRs8BRs8BRs8BRs8BRTNmgKNngKNngKNngKNngKNhiKGxgiOlZoBlaYBlaYBlaYBlaYBlaYBlaYBlaYBlZIBlBMfQMrVAMr2KAqBENSHFHhGEABhi5CV6gGUKgGUKgGUKgGUFwuqgEUvoEVsoEVpoEUpgEUggF+gKTKY+h1fxSlC7/Z+RrxOQ3fcEoAPPHZBlaYBlaYBlaYBlZYBlYIhvLBCstw7PgM7hkiWOEZWGEaWGEaWGEaIsakEAysmHkGVpxmvoEVqoEVpoEVpoEVpoEVpoEVpoEVkoEVgkFQsEFSsEFQsGEcoSvY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnY4CnmbNAUT2c2WAo2eAo2eAo2eAo2eAo2eArNEPFACjZ4CjZ4CjZ4CjaIird/rBvFH6llNCvewdli1URWCIakSIZesUaDoFg36dKFWk9zCZDei3TtwmCj7pC22AwikiIZPEU29IpFNliKxa/hC9DFITjQPYhcAAAAAElFTkSuQmCC);
  81. background-color: rgba(255,255,255,0.8);
  82. background-size: 50%;
  83. background-repeat: no-repeat;
  84. background-position: 50%;
  85. width: 2.7em;
  86. height: 2.7em;
  87. text-align: center;
  88. overflow: hidden;
  89. color: #a33;
  90. z-index: 2147483642;
  91. }
  92. .ath-container.ath-icon:before {
  93. position: absolute;
  94. top: 0;
  95. right: 0;
  96. margin: 0;
  97. float: none;
  98. }
  99. .ath-mandatory .ath-container:before {
  100. display: none;
  101. }
  102. .ath-container.ath-android:before {
  103. float: left;
  104. margin: -0.7em 0.5em 0 -0.6em;
  105. }
  106. .ath-container.ath-android.ath-icon:before {
  107. position: absolute;
  108. right: auto;
  109. left: 0;
  110. margin: 0;
  111. float: none;
  112. }
  113. /* applied only if the application icon is shown */
  114. .ath-container.ath-icon {
  115. }
  116. .ath-action-icon {
  117. display: inline-block;
  118. vertical-align: middle;
  119. background-position: 50%;
  120. background-repeat: no-repeat;
  121. text-indent: -9999em;
  122. overflow: hidden;
  123. }
  124. .ath-ios7 .ath-action-icon,
  125. .ath-ios8 .ath-action-icon,
  126. .ath-ios9 .ath-action-icon,
  127. .ath-ios10 .ath-action-icon{
  128. width: 1.6em;
  129. height: 1.6em;
  130. background-image:url(data:image/png;base64,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);
  131. margin-top: -0.3em;
  132. background-size: auto 100%;
  133. }
  134. .ath-ios6 .ath-action-icon {
  135. width: 1.8em;
  136. height: 1.8em;
  137. background-image:url(data:image/png;base64,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);
  138. margin-bottom: 0.4em;
  139. background-size: 100% auto;
  140. }
  141. .ath-android .ath-action-icon {
  142. width: 1.4em;
  143. height: 1.5em;
  144. background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEVmZmb///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZW6fJrAAAAEXRSTlMAAAYHG21ub8fLz9DR8/T4+RrZ9owAAAB3SURBVHja7dNLDoAgDATQWv4gKve/rEajJOJiWLgg6WzpSyB0aHqHiNj6nL1lovb4C+hYzkSNAT7mryQFAVOeGAj4CjwEtgrWXpD/uZKtwEJApXt+Vn0flzRhgNiFZQkOXY0aADQZCOCPlsZJ46Rx0jhp3IiN2wGDHhxtldrlwQAAAABJRU5ErkJggg==);
  145. background-size: 100% auto;
  146. }
  147. .ath-container p {
  148. margin: 0;
  149. padding: 0;
  150. position: relative;
  151. z-index: 2147483642;
  152. text-shadow: 0 0.1em 0 #fff;
  153. font-size: 1.1em;
  154. }
  155. .ath-ios.ath-phone:after {
  156. content: '';
  157. background: #eee;
  158. position: absolute;
  159. width: 2em;
  160. height: 2em;
  161. bottom: -0.9em;
  162. left: 50%;
  163. margin-left: -1em;
  164. -webkit-transform: scaleX(0.9) rotate(45deg);
  165. transform: scaleX(0.9) rotate(45deg);
  166. box-shadow: 0.2em 0.2em 0 #d1d1d1;
  167. }
  168. .ath-ios.ath-tablet:after {
  169. content: '';
  170. background: #eee;
  171. position: absolute;
  172. width: 2em;
  173. height: 2em;
  174. top: -0.9em;
  175. left: 50%;
  176. margin-left: -1em;
  177. -webkit-transform: scaleX(0.9) rotate(45deg);
  178. transform: scaleX(0.9) rotate(45deg);
  179. z-index: 2147483641;
  180. }
  181. .ath-application-icon {
  182. position: relative;
  183. padding: 0;
  184. border: 0;
  185. margin: 0 auto 0.2em auto;
  186. height: 6em;
  187. width: 6em;
  188. z-index: 2147483642;
  189. }
  190. .ath-container.ath-ios .ath-application-icon {
  191. border-radius: 1em;
  192. box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.3),
  193. inset 0 0.07em 0 rgba(255,255,255,0.5);
  194. margin: 0 auto 0.4em auto;
  195. }
  196. @media only screen and (orientation: landscape) {
  197. .ath-container.ath-phone {
  198. width: 24em;
  199. }
  200. .ath-android.ath-phone {
  201. margin-left: -12em;
  202. }
  203. .ath-ios.ath-phone {
  204. margin-left: -12em;
  205. }
  206. .ath-ios6:after {
  207. left: 39%;
  208. }
  209. .ath-ios8.ath-phone {
  210. left: auto;
  211. bottom: auto;
  212. right: 0.4em;
  213. top: 1.8em;
  214. }
  215. .ath-ios8.ath-phone:after {
  216. bottom: auto;
  217. top: -0.9em;
  218. left: 68%;
  219. z-index: 2147483641;
  220. box-shadow: none;
  221. }
  222. }