notification.css 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. /*
  2. Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. For licensing, see LICENSE.md or http://ckeditor.com/license
  4. */
  5. /**
  6. * Progress notification structure:
  7. *
  8. * +---div.cke_notification cke_notification_info--------------------------+
  9. * | |
  10. * | +---div.cke_notification_progress-----------------------------------+ |
  11. * | | | |
  12. * | +-------------------------------------------------------------------+ |
  13. * | |
  14. * | +---p.cke_notification_message--------------------------------------+ |
  15. * | | Foo | |
  16. * | +-------------------------------------------------------------------+ |
  17. * | |
  18. * | +---a.cke_notification_close----------------------------------------+ |
  19. * | | +---span.cke_label----------------------------------------------+ | |
  20. * | | | X | | |
  21. * | | +---------------------------------------------------------------+ | |
  22. * | +-------------------------------------------------------------------+ |
  23. * | |
  24. * +-----------------------------------------------------------------------+
  25. *
  26. *
  27. * Warning notification structure:
  28. *
  29. * +---div.cke_notification cke_notification_warning-----------------------+
  30. * | |
  31. * | +---p.cke_notification_message--------------------------------------+ |
  32. * | | Foo | |
  33. * | +-------------------------------------------------------------------+ |
  34. * | |
  35. * | +---a.cke_notification_close----------------------------------------+ |
  36. * | | +---span.cke_label----------------------------------------------+ | |
  37. * | | | X | | |
  38. * | | +---------------------------------------------------------------+ | |
  39. * | +-------------------------------------------------------------------+ |
  40. * | |
  41. * +-----------------------------------------------------------------------+
  42. *
  43. * Success and info notifications have the same structure as warning, but use
  44. * `cke_notification_success` and `cke_notification_info` instead of `cke_notification_warning`.
  45. */
  46. .cke_notifications_area
  47. {
  48. /* Prevent notification margin capture clicking. */
  49. pointer-events: none;
  50. }
  51. .cke_notification
  52. {
  53. pointer-events: auto;
  54. position: relative;
  55. margin: 10px;
  56. width: 300px;
  57. color: white;
  58. border-radius: 3px;
  59. text-align: center;
  60. opacity: 0.95;
  61. filter: alpha(opacity = 95);
  62. box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.3);
  63. -webkit-animation: fadeIn 0.7s;
  64. animation: fadeIn 0.7s;
  65. }
  66. .cke_notification_message a
  67. {
  68. color: #12306F;
  69. }
  70. @-webkit-keyframes fadeIn
  71. {
  72. from { opacity: 0.4; }
  73. to { opacity: 0.95; }
  74. }
  75. @keyframes fadeIn
  76. {
  77. from { opacity: 0.4; }
  78. to { opacity: 0.95; }
  79. }
  80. .cke_notification_success
  81. {
  82. background: #72B572;
  83. border: 1px solid #63A563;
  84. }
  85. .cke_notification_warning
  86. {
  87. background: #C83939;
  88. border: 1px solid #902B2B;
  89. }
  90. .cke_notification_info
  91. {
  92. background: #2E9AD0;
  93. border: 1px solid #0F74A8;
  94. }
  95. .cke_notification_info span.cke_notification_progress
  96. {
  97. background-color: #0F74A8;
  98. display: block;
  99. padding: 0;
  100. margin: 0;
  101. height: 100%;
  102. overflow: hidden;
  103. position: absolute;
  104. z-index: 1;
  105. }
  106. .cke_notification_message
  107. {
  108. position: relative;
  109. margin: 4px 23px 3px;
  110. font-family: Arial, Helvetica, sans-serif;
  111. font-size: 12px;
  112. line-height: 18px;
  113. z-index: 4;
  114. text-overflow: ellipsis;
  115. overflow: hidden;
  116. }
  117. .cke_notification_close
  118. {
  119. background-image: url(images/close.png);
  120. background-repeat: no-repeat;
  121. background-position: 50%;
  122. position: absolute;
  123. cursor: pointer;
  124. text-align: center;
  125. height: 20px;
  126. width: 20px;
  127. top: 1px;
  128. right: 1px;
  129. padding: 0;
  130. margin: 0;
  131. z-index: 5;
  132. opacity: 0.6;
  133. filter: alpha(opacity = 60);
  134. }
  135. .cke_notification_close:hover
  136. {
  137. opacity: 1;
  138. filter: alpha(opacity = 100);
  139. }
  140. .cke_notification_close span
  141. {
  142. display: none;
  143. }
  144. .cke_notification_warning a.cke_notification_close
  145. {
  146. opacity: 0.8;
  147. filter: alpha(opacity = 80);
  148. }
  149. .cke_notification_warning a.cke_notification_close:hover
  150. {
  151. opacity: 1;
  152. filter: alpha(opacity = 100);
  153. }