noty_theme_default.css 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. /* CORE STYLES*/
  2. /* noty bar */
  3. .noty_bar.noty_theme_default {
  4. background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAoCAYAAAAPOoFWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPZJREFUeNq81tsOgjAMANB2ov7/7ypaN7IlIwi9rGuT8QSc9EIDAsAznxvY4pXPKr05RUE5MEVB+TyWfCEl9LZApYopCmo9C4FKSMtYoI8Bwv79aQJU4l6hXXCZrQbokJEksxHo9KMOgc6w1atHXM8K9DVC7FQnJ0i8iK3QooGgbnyKgMDygBWyYFZoqx4qS27KqLZJjA1D0jK6QJcYEQEiWv9PGkTsbqxQ8oT+ZtZB6AkdsJnQDnMoHXHLGKOgDYuCWmYhEERCI5gaamW0bnHdA3k2ltlIN+2qKRyCND0bhqSYCyTB3CAOc4WusBEIpkeBuPgJMAAX8Hs1NfqHRgAAAABJRU5ErkJggg==') repeat-x scroll left top #fff;
  5. }
  6. /* if you use noty with customContainer you can access noty with this way
  7. * .noty_custom_container noty will add automaticly this class to your customContainer
  8. * .noty_theme_default your theme
  9. * .noty_layout_inline your layout
  10. */
  11. /* custom container */
  12. .noty_custom_container.noty_theme_default.noty_layout_inline {
  13. position: relative;
  14. }
  15. /* custom growl container */
  16. .noty_custom_container.noty_theme_default.noty_layout_inline .noty_cont.noty_layout_inline {
  17. position: static;
  18. }
  19. /* custom noty bar */
  20. .noty_custom_container.noty_theme_default.noty_layout_inline .noty_bar {
  21. border-width: 1px;
  22. border-style: solid;
  23. position: static;
  24. -webkit-border-radius: 4px;
  25. -moz-border-radius: 4px;
  26. border-radius: 4px;
  27. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  28. }
  29. .noty_custom_container.noty_theme_default.noty_layout_inline .noty_bar .noty_message {
  30. font-size: 13px;
  31. padding: 4px;
  32. }
  33. .noty_custom_container.noty_theme_default.noty_layout_inline .noty_bar .noty_message .noty_buttons {
  34. margin-top: -1px;
  35. }
  36. /* noty_message */
  37. .noty_bar.noty_theme_default .noty_message {
  38. padding: 8px 14px;
  39. font-size: 16px;
  40. font-weight: bold;
  41. width: auto;
  42. }
  43. .noty_bar.noty_theme_default.noty_closable .noty_message {
  44. padding: 8px 34px 8px 14px;
  45. }
  46. /* noty_buttons */
  47. .noty_bar.noty_theme_default .noty_message .noty_buttons {
  48. float: right;
  49. font-size: 13px;
  50. margin-top: -4px;
  51. margin-left: 4px;
  52. }
  53. /* noty_button */
  54. .noty_bar.noty_theme_default .noty_message .noty_buttons button {
  55. margin-left: 5px;
  56. }
  57. /* noty close button */
  58. .noty_bar.noty_theme_default .noty_close {
  59. position: absolute;
  60. top: 10px;
  61. right: 10px;
  62. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAORJREFUeNq0lU0OgjAQhRm5gUl3rLyBB3BDQjwI4TDcgmu4NqwNJGxdueqWA4zzCJoxtvxoeckLzbz2C5ShEDNHDiXis/gkPooPY/0uvomv4ov48bUSQGUSF+Ka51WPc0kzNGwvLnm9ynHtB5B+hGkoaWDB/6t4AZOFe7ZkTxMAc1dqreU0TbnrunetbVvOsmzIPMoBrFwJYGgCY8wAgjFGDZlHFYCNK9EAXPUYmUcNgL0v1dAFMKjfRSsVx/H0hC0eOfhLmWwbfTcYozbXNsEbO/int8nhEPz4CnbAUuhfwFOAAQAA48KKOuexjwAAAABJRU5ErkJggg==');
  63. width: 20px;
  64. height: 20px;
  65. }
  66. /* noty modal */
  67. .noty_modal.noty_theme_default {
  68. opacity: 0.7;
  69. }
  70. /* LAYOUTS */
  71. /* noty_layout_top */
  72. .noty_bar.noty_theme_default.noty_layout_top {
  73. border-bottom: 3px solid #eee;
  74. }
  75. /* noty_layout_bottom */
  76. .noty_bar.noty_theme_default.noty_layout_bottom {
  77. border-top: 3px solid #eee;
  78. }
  79. .noty_bar.noty_theme_default.noty_layout_center .noty_close {
  80. top: 8px;
  81. }
  82. .noty_bar.noty_theme_default.noty_layout_center .noty_message .noty_buttons {
  83. margin-top: -2px
  84. }
  85. /* noty_layout_topLeft & noty_layout_topRight */
  86. .noty_bar.noty_theme_default.noty_layout_center,
  87. .noty_bar.noty_theme_default.noty_layout_topLeft,
  88. .noty_bar.noty_theme_default.noty_layout_topRight,
  89. .noty_bar.noty_theme_default.noty_layout_bottomLeft,
  90. .noty_bar.noty_theme_default.noty_layout_bottomRight {
  91. border: 1px solid #eee;
  92. -webkit-border-radius: 5px;
  93. -moz-border-radius: 5px;
  94. border-radius: 5px;
  95. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  96. }
  97. .noty_bar.noty_theme_default.noty_layout_center .noty_message,
  98. .noty_bar.noty_theme_default.noty_layout_topLeft .noty_message,
  99. .noty_bar.noty_theme_default.noty_layout_topRight .noty_message,
  100. .noty_bar.noty_theme_default.noty_layout_bottomLeft .noty_message,
  101. .noty_bar.noty_theme_default.noty_layout_bottomRight .noty_message {
  102. font-size: 13px;
  103. font-weight: normal;
  104. }
  105. .noty_bar.noty_theme_default.noty_layout_topLeft .noty_message .noty_buttons,
  106. .noty_bar.noty_theme_default.noty_layout_topRight .noty_message .noty_buttons,
  107. .noty_bar.noty_theme_default.noty_layout_bottomLeft .noty_message .noty_buttons,
  108. .noty_bar.noty_theme_default.noty_layout_bottomRight .noty_message .noty_buttons {
  109. float: none;
  110. border-top: 1px solid #ccc;
  111. margin-left: 0;
  112. margin-top: 10px;
  113. padding-top: 10px;
  114. text-align: right;
  115. }
  116. /* noty_layout_topCenter */
  117. .noty_bar.noty_theme_default.noty_layout_topCenter {
  118. -webkit-border-radius: 4px;
  119. -moz-border-radius: 4px;
  120. border-radius: 4px;
  121. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  122. }
  123. .noty_bar.noty_theme_default.noty_layout_topCenter .noty_message {
  124. font-weight: normal;
  125. font-size: 13px;
  126. }
  127. .noty_bar.noty_theme_default.noty_layout_topCenter .noty_close {
  128. top: 50%;
  129. margin-top: -10px;
  130. -webkit-border-radius: 10px;
  131. -moz-border-radius: 10px;
  132. border-radius: 10px;
  133. }
  134. .noty_bar.noty_theme_default.noty_layout_topCenter.noty_success {
  135. border: 1px solid #50C24E;
  136. }
  137. .noty_bar.noty_theme_default.noty_layout_topCenter .noty_message .noty_buttons {
  138. margin-left: 15px;
  139. margin-top: 0px
  140. }
  141. /* NOTIFICATION TYPES */
  142. /* noty_notification */
  143. .noty_bar.noty_theme_default.noty_notification {
  144. background-color: #fff;
  145. border-color: #ccc;
  146. color: #555;
  147. }
  148. .noty_bar.noty_theme_default.noty_notification.noty_layout_topLeft .noty_message .noty_buttons,
  149. .noty_bar.noty_theme_default.noty_notification.noty_layout_topRight .noty_message .noty_buttons,
  150. .noty_bar.noty_theme_default.noty_notification.noty_layout_bottomLeft .noty_message .noty_buttons,
  151. .noty_bar.noty_theme_default.noty_notification.noty_layout_bottomRight .noty_message .noty_buttons {
  152. border-color: #ccc;
  153. }
  154. /* noty_warning */
  155. .noty_bar.noty_theme_default.noty_warning {
  156. background-color: #FFEAA8;
  157. border-color: #FFC237;
  158. color: #826200;
  159. }
  160. .noty_bar.noty_theme_default.noty_warning.noty_layout_topLeft .noty_message .noty_buttons,
  161. .noty_bar.noty_theme_default.noty_warning.noty_layout_topRight .noty_message .noty_buttons,
  162. .noty_bar.noty_theme_default.noty_warning.noty_layout_bottomLeft .noty_message .noty_buttons,
  163. .noty_bar.noty_theme_default.noty_warning.noty_layout_bottomRight .noty_message .noty_buttons {
  164. border-color: #FFC237;
  165. }
  166. /* noty_alert */
  167. .noty_bar.noty_theme_default.noty_alert {
  168. background-color: #fff;
  169. border-color: #ccc;
  170. }
  171. .noty_bar.noty_theme_default.noty_alert.noty_layout_topLeft .noty_message .noty_buttons,
  172. .noty_bar.noty_theme_default.noty_alert.noty_layout_topRight .noty_message .noty_buttons,
  173. .noty_bar.noty_theme_default.noty_alert.noty_layout_bottomLeft .noty_message .noty_buttons,
  174. .noty_bar.noty_theme_default.noty_alert.noty_layout_bottomRight .noty_message .noty_buttons {
  175. border-color: #ccc;
  176. }
  177. /* noty_error */
  178. .noty_bar.noty_theme_default.noty_error {
  179. background-color: red;
  180. color: #fff;
  181. border-color: darkred;
  182. }
  183. .noty_bar.noty_theme_default.noty_error .noty_message {
  184. font-weight: bold;
  185. }
  186. .noty_bar.noty_theme_default.noty_error.noty_layout_topLeft .noty_message .noty_buttons,
  187. .noty_bar.noty_theme_default.noty_error.noty_layout_topRight .noty_message .noty_buttons,
  188. .noty_bar.noty_theme_default.noty_error.noty_layout_bottomLeft .noty_message .noty_buttons,
  189. .noty_bar.noty_theme_default.noty_error.noty_layout_bottomRight .noty_message .noty_buttons {
  190. border-color: darkred;
  191. }
  192. /* noty_success */
  193. .noty_bar.noty_theme_default.noty_success {
  194. background-color: lightgreen;
  195. color: darkgreen;
  196. border-color: #50C24E;
  197. }
  198. .noty_bar.noty_theme_default.noty_success.noty_layout_topLeft .noty_message .noty_buttons,
  199. .noty_bar.noty_theme_default.noty_success.noty_layout_topRight .noty_message .noty_buttons,
  200. .noty_bar.noty_theme_default.noty_success.noty_layout_bottomLeft .noty_message .noty_buttons,
  201. .noty_bar.noty_theme_default.noty_success.noty_layout_bottomRight .noty_message .noty_buttons {
  202. border-color: #50C24E;
  203. }
  204. /* noty_information */
  205. .noty_bar.noty_theme_default.noty_information {
  206. background-color: #57B7E2;
  207. border-color: #0B90C4;
  208. color: #fff;
  209. }
  210. .noty_bar.noty_theme_default.noty_information.noty_layout_topLeft .noty_message .noty_buttons,
  211. .noty_bar.noty_theme_default.noty_information.noty_layout_topRight .noty_message .noty_buttons,
  212. .noty_bar.noty_theme_default.noty_information.noty_layout_bottomLeft .noty_message .noty_buttons,
  213. .noty_bar.noty_theme_default.noty_information.noty_layout_bottomRight .noty_message .noty_buttons {
  214. border-color: #0B90C4;
  215. }