alertify.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. .alertify,
  2. .alertify-show,
  3. .alertify-log {
  4. -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  5. -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  6. -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  7. -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  8. transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
  9. }
  10. .alertify-hide {
  11. -webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  12. -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  13. -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  14. -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  15. transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
  16. }
  17. .alertify-log-hide {
  18. -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  19. -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  20. -ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  21. -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  22. transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
  23. }
  24. .alertify-cover {
  25. position: fixed; z-index: 99999;
  26. top: 0; right: 0; bottom: 0; left: 0;
  27. background-color:white;
  28. filter:alpha(opacity=0);
  29. opacity:0;
  30. }
  31. .alertify-cover-hidden {
  32. display: none;
  33. }
  34. .alertify {
  35. position: fixed; z-index: 99999;
  36. top: 150px; left: 50%;
  37. width: 350px;
  38. margin-left: -275px;
  39. opacity: 1;
  40. }
  41. .alertify-hidden {
  42. -webkit-transform: translate(0,-150px);
  43. -moz-transform: translate(0,-150px);
  44. -ms-transform: translate(0,-150px);
  45. -o-transform: translate(0,-150px);
  46. transform: translate(0,-150px);
  47. opacity: 0;
  48. display: none;
  49. }
  50. /* overwrite display: none; for everything except IE6-8 */
  51. :root *> .alertify-hidden {
  52. display: block;
  53. visibility: hidden;
  54. }
  55. .alertify-logs {
  56. position: fixed;
  57. z-index: 5000;
  58. bottom: 10px;
  59. right: 10px;
  60. width: 300px;
  61. }
  62. .alertify-logs-hidden {
  63. display: none;
  64. }
  65. .alertify-log {
  66. display: block;
  67. margin-top: 10px;
  68. position: relative;
  69. right: -300px;
  70. opacity: 0;
  71. }
  72. .alertify-log-show {
  73. right: 0;
  74. opacity: 1;
  75. }
  76. .alertify-log-hide {
  77. -webkit-transform: translate(300px, 0);
  78. -moz-transform: translate(300px, 0);
  79. -ms-transform: translate(300px, 0);
  80. -o-transform: translate(300px, 0);
  81. transform: translate(300px, 0);
  82. opacity: 0;
  83. }
  84. .alertify-dialog {
  85. padding: 25px;
  86. }
  87. .alertify-resetFocus {
  88. border: 0;
  89. clip: rect(0 0 0 0);
  90. height: 1px;
  91. margin: -1px;
  92. overflow: hidden;
  93. padding: 0;
  94. position: absolute;
  95. width: 1px;
  96. }
  97. .alertify-inner {
  98. text-align: center;
  99. }
  100. .alertify-text {
  101. margin-bottom: 15px;
  102. width: 100%;
  103. -webkit-box-sizing: border-box;
  104. -moz-box-sizing: border-box;
  105. box-sizing: border-box;
  106. font-size: 14px;
  107. }
  108. .alertify-button,
  109. .alertify-button:hover,
  110. .alertify-button:active,
  111. .alertify-button:visited {
  112. background: none;
  113. text-decoration: none;
  114. border: none;
  115. /* line-height and font-size for input button */
  116. line-height: 1.5;
  117. font-size: 13px;
  118. display: inline-block;
  119. cursor: pointer;
  120. margin-left: 5px;
  121. }
  122. @media only screen and (max-width: 680px) {
  123. .alertify,
  124. .alertify-logs {
  125. width: 90%;
  126. -webkit-box-sizing: border-box;
  127. -moz-box-sizing: border-box;
  128. box-sizing: border-box;
  129. }
  130. .alertify {
  131. left: 5%;
  132. margin: 0;
  133. }
  134. }
  135. /**
  136. * Default Look and Feel
  137. */
  138. .alertify,
  139. .alertify-log {
  140. font-family: sans-serif;
  141. }
  142. .alertify {
  143. background: #FFF;
  144. border: 10px solid #333; /* browsers that don't support rgba */
  145. border: 10px solid rgba(0,0,0,.7);
  146. border-radius: 8px;
  147. box-shadow: 0 3px 3px rgba(0,0,0,.3);
  148. -webkit-background-clip: padding; /* Safari 4? Chrome 6? */
  149. -moz-background-clip: padding; /* Firefox 3.6 */
  150. background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
  151. }
  152. .alertify-text {
  153. border: 1px solid #CCC;
  154. padding: 10px;
  155. border-radius: 4px;
  156. }
  157. .alertify-button {
  158. border-radius: 4px;
  159. font-size:13px;
  160. color: #FFF;
  161. font-weight: bold;
  162. padding: 3px 8px;
  163. margin:0 5px;
  164. text-decoration: none;
  165. /*text-shadow: 1px 1px 0 rgba(0,0,0,.5);*/
  166. /*box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5);*/
  167. background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  168. background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  169. background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  170. background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  171. background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  172. }
  173. .alertify-button:hover,
  174. .alertify-button:focus {
  175. outline: none;
  176. background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
  177. background-image: -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
  178. background-image: -ms-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
  179. background-image: -o-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
  180. background-image: linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
  181. }
  182. .alertify-button:focus {
  183. box-shadow: 0 0 15px #2B72D5;
  184. }
  185. .alertify-button:active {
  186. position: relative;
  187. box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  188. }
  189. .alertify-button-cancel,
  190. .alertify-button-cancel:hover,
  191. .alertify-button-cancel:focus {
  192. background-color: #e8830b;
  193. border: 1px solid #b16102;
  194. }
  195. .alertify-button-ok,
  196. .alertify-button-ok:hover,
  197. .alertify-button-ok:focus {
  198. background-color: #5CB811;
  199. border: 1px solid #3B7808;
  200. }
  201. .alertify-log {
  202. background: #1F1F1F;
  203. background: rgba(0,0,0,.9);
  204. padding: 15px;
  205. border-radius: 4px;
  206. color: #FFF;
  207. text-shadow: -1px -1px 0 rgba(0,0,0,.5);
  208. }
  209. .alertify-log-error {
  210. background: #FE1A00;
  211. background: rgba(254,26,0,.9);
  212. }
  213. .alertify-log-success {
  214. background: #5CB811;
  215. background: rgba(92,184,17,.9);
  216. }
  217. .alertify-message { font-family: Tahoma, Arial; font-size:16px; margin:0 0 10px 0; }
  218. .delete_error_message{background:#f8dada;border:1px solid #d9a6a6; padding:2px 10px; font-size:13px; color:#ff0000; margin:0 0 10px 0;}
  219. .delete_success_message{ background:#d5fadf;border:1px solid #81b690; padding:2px 10px; font-size:13px; color:#0a872d; margin:0 0 10px 0; }