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