android-app.css 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. @import url("android.css");
  2. .alertDialog {
  3. width: 100%;
  4. padding-left: 2px;
  5. padding-right: 2px;
  6. z-index: 1000;
  7. }
  8. .alertDialogBody {
  9. border: 1px solid #ADAAAD;
  10. -webkit-border-radius: 10px;
  11. -moz-border-radius: 10px;
  12. background-color: white;
  13. margin-left: 2px;
  14. margin-right: 4px;
  15. }
  16. .alertTitle {
  17. height: 42px;
  18. margin: 0px;
  19. padding: 0px;
  20. background-color: #889BB3;
  21. background: -webkit-gradient(linear, left top, left bottom, from(#B0BCCD), to(#6D84A2), color-stop(0.5, #889BB3), color-stop(0.5, #8195AF));
  22. border-top: 1px solid #CDD5DF;
  23. border-bottom: 1px solid #2D3642;
  24. font-family: Helvetica;
  25. font-size: 20px;
  26. color: white;
  27. text-align: center;
  28. line-height: 44px;
  29. text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
  30. overflow: hidden;
  31. white-space: nowrap;
  32. text-overflow: ellipsis;
  33. text-align: center;
  34. }
  35. .alertText {
  36. text-align: center;
  37. }
  38. .alertBtns {
  39. padding: 5px;
  40. text-align: center;
  41. }
  42. .alertBtns .mblButton {
  43. width: 100%;
  44. margin-top: 5px;
  45. }
  46. .alertDialog.mblOut {
  47. position: absolute;
  48. }
  49. .alertDialog.mblIn {
  50. position: absolute;
  51. }
  52. .mblSlidev.mblOut {
  53. -webkit-animation-duration: .4s;
  54. -webkit-animation-name: mblSlideOut;
  55. -webkit-animation-timing-function: linear;
  56. -webkit-transform: translateY(-100%);
  57. }
  58. .mblSlidev.mblIn {
  59. -webkit-animation-duration: .4s;
  60. -webkit-animation-name: mblSlideIn;
  61. -webkit-animation-timing-function: linear;
  62. -webkit-transform: translateY(0px);
  63. }
  64. .mblSlidev.mblOut.mblReverse {
  65. -webkit-animation-name: mblSlideOutReverse;
  66. }
  67. .mblSlidev.mblIn.mblReverse {
  68. -webkit-animation-name: mblSlideInReverse;
  69. }
  70. .dialogUnderlayWrapper {
  71. position: absolute;
  72. left: 0;
  73. top: 0;
  74. z-index: 998;
  75. background: transparent !important;
  76. visibility: visible;
  77. height: 100%;
  78. width: 100%;
  79. }
  80. .dialogUnderlay {
  81. background-color: #eee;
  82. opacity: 0.5;
  83. width: 100%;
  84. height: 100%;
  85. }
  86. .list .row {
  87. padding: 10px;
  88. border-bottom: 1px solid #444;
  89. position: relative;
  90. background-color: black;
  91. z-index: 6; /* Must be greater than the .buttons z-index */
  92. }
  93. .list .row.mblListItem {
  94. padding: 0px;
  95. }
  96. .list .row.last {
  97. border-bottom: none;
  98. }
  99. .list .row.hold {
  100. background-color: #444;
  101. }
  102. .list .buttons {
  103. position: absolute;
  104. text-align: center;
  105. padding-top: 10px;
  106. width: 100%;
  107. height: 100%;
  108. z-index: 5;
  109. }
  110. .list .buttons .mblButton {
  111. }
  112. .list .buttons .deleteBtn {
  113. background-color: red;
  114. }
  115. .list .buttons .cancelBtn {
  116. margin-left: 10px;
  117. background-color: blue;
  118. }
  119. .row.collapsed {
  120. -webkit-animation-name: collapse-vert;
  121. -webkit-animation-duration: 0.5s;
  122. -webkit-animation-timing-function: linear;
  123. }
  124. @-webkit-keyframes collapse-vert {
  125. from {
  126. height: 100%;
  127. padding: 10px;
  128. }
  129. to {
  130. height: 0px;
  131. padding: 0px;
  132. }
  133. }
  134. .listSelector {
  135. position: absolute;
  136. -webkit-border-radius: 10px;
  137. -moz-border-radius: 10px;
  138. border: 1px solid #666;
  139. background-color: #ccc;
  140. color: #333;
  141. z-index: 1000;
  142. }
  143. .listSelectorRow {
  144. padding: 10px;
  145. border-bottom: 1px solid #666;
  146. white-space: nowrap;
  147. }
  148. .listSelectorRow-selected {
  149. background-color: #666;
  150. color: #ccc;
  151. }
  152. .listSelectorRow.last {
  153. border-bottom: none;
  154. }
  155. .mblImageView, .mblImageView canvas {
  156. width: 100%;
  157. height: 100%;
  158. }
  159. .mblPillar {
  160. display: none;
  161. }
  162. /* Form Input Styles */
  163. input {
  164. -webkit-text-size-adjust: 140%;
  165. }
  166. /* ImageThumbView styles */
  167. .mblImageThumbView {
  168. position: relative;
  169. -webkit-transition-property: height;
  170. -webkit-transition-duration: 0.8s;
  171. -webkit-transition-delay: 0;
  172. }
  173. .mblImageThumbView .mblThumb {
  174. width: 100px;
  175. min-height: 100px;
  176. display: inline-block;
  177. z-index: 2;
  178. position: absolute;
  179. }
  180. .mblImageThumbView.animated .mblThumb {
  181. -webkit-transition-property: -webkit-transform, opacity;
  182. -webkit-transition-duration: 1.3s, 1s;
  183. -webkit-transition-delay: 0, 0;
  184. }
  185. .mblImageThumbView .mblThumb.hidden {
  186. z-index: 1;
  187. opacity: 0;
  188. }
  189. .mblImageThumbView .mblThumbInner {
  190. width: 102px;
  191. height: 102px;
  192. position: relative;
  193. }
  194. .mblImageThumbView .mblThumbOverlay {
  195. width: 102px;
  196. height: 102px;
  197. background: url(images/thumb-overlay.png) center top no-repeat;
  198. position: absolute;
  199. z-index: 20;
  200. overflow: hidden;
  201. }
  202. .mblImageThumbView .mblThumb.selected .mblThumbOverlay {
  203. background-position: center bottom;
  204. }
  205. .mblImageThumbView .mblThumbInner .mblThumbMask {
  206. width: 90px;
  207. height: 90px;
  208. overflow: hidden;
  209. padding-left: 6px;
  210. padding-top: 5px;
  211. z-index: 10;
  212. }
  213. .mblImageThumbView .mblThumbInner .mblThumbMask img {
  214. left: 0px;
  215. top: 0px;
  216. width: 90px;
  217. height: 90px;
  218. }
  219. .mblImageThumbView .mblThumbInner .mblThumbMask .mblThumbSrc {
  220. left: 6px;
  221. top: 5px;
  222. background-position: center center;
  223. background-repeat: no-repeat;
  224. overflow: hidden;
  225. position: absolute;
  226. -webkit-background-size: 100% 100%;
  227. -webkit-border-radius: 5px;
  228. width: 90px;
  229. height: 90px;
  230. z-index: 5;
  231. }
  232. .mblImageThumbView .mblThumbMask div {
  233. left: 0px;
  234. top: 0px;
  235. width: 90px;
  236. height: 90px;
  237. background-repeat: no-repeat;
  238. }
  239. .mblImageThumbView .mblThumb:hover,
  240. .mblImageThumbView .mblThumb.selected {
  241. -webkit-transform: scale(1.2);
  242. transform: scale(1.2);
  243. }
  244. /* Large Images */
  245. .mblImageThumbView.large .mblThumb {
  246. width: 150px;
  247. min-height: 150px;
  248. }
  249. .mblImageThumbView.large .mblThumbInner{
  250. width: 152px;
  251. height: 152px;
  252. }
  253. .mblImageThumbView.large .mblThumbOverlay {
  254. background: url(images/thumb-overlay-large.png) center top no-repeat;
  255. width: 152px;
  256. height: 152px;
  257. }
  258. .mblImageThumbView.large .mblThumbInner .mblThumbMask,
  259. .mblImageThumbView.large .mblThumbInner .mblThumbMask img,
  260. .mblImageThumbView.large .mblThumbInner .mblThumbMask .mblThumbSrc,
  261. .mblImageThumbView.large .mblThumbMask div {
  262. width: 133px;
  263. height: 133px;
  264. }
  265. .mblImageThumbView.large .mblThumbInner .mblThumbMask .mblThumbSrc {
  266. left: 9px;
  267. top: 7px;
  268. }
  269. /* Small Images */
  270. .mblImageThumbView.small .mblThumb {
  271. width: 75px;
  272. min-height: 75px;
  273. }
  274. .mblImageThumbView.small .mblThumbInner{
  275. width: 77px;
  276. height: 77px;
  277. }
  278. .mblImageThumbView.small .mblThumbOverlay {
  279. background: url(images/thumb-overlay-small.png) center top no-repeat;
  280. width: 77px;
  281. height: 77px;
  282. }
  283. .mblImageThumbView.small .mblThumbInner .mblThumbMask,
  284. .mblImageThumbView.small .mblThumbInner .mblThumbMask img,
  285. .mblImageThumbView.small .mblThumbInner .mblThumbMask .mblThumbSrc,
  286. .mblImageThumbView.small .mblThumbMask div {
  287. width: 70px;
  288. height: 70px;
  289. }
  290. .mblImageThumbView.small .mblThumbInner .mblThumbMask .mblThumbSrc {
  291. left: 4px;
  292. top: 3px;
  293. }
  294. .mblImageThumbView .mblThumbLabel {
  295. font-size: smaller;
  296. overflow: hidden;
  297. white-space: nowrap;
  298. text-align: center;
  299. }
  300. /* Back Button */
  301. .mblNativeBack .mblArrowButtonHead,
  302. .mblNativeBack .mblArrowButtonBody,
  303. .mblNativeBack .mblArrowButtonNeck {
  304. display: none;
  305. }