flashgrid-ext 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,355 @@
1
+ /* Table of Contents
2
+ ==================================================
3
+ #Editor
4
+ #Editor Dialog
5
+ #Editor Dropzone
6
+ #Editor Handle
7
+ #Editor Popover
8
+ #Editor Help
9
+ #Editor Dropdown
10
+ #Editor Popover
11
+ #Editor Color Palette
12
+ #Editor Font Size
13
+ #Editor Statusbar
14
+ #Editor Code View
15
+ #Editor Toolbar
16
+ #Editor Table
17
+ #Editor Style
18
+ #Editor Fullscreen */
19
+
20
+ /* #Editor
21
+ ================================================== */
22
+ .editor-canvas { border: 1px solid rgba(217,222,225,1); }
23
+ .editor-canvas .dropdown-menu { min-width: 90px; }
24
+ .editor-canvas .dropdown-menu li a.checked i { visibility: visible; }
25
+ .editor-canvas .dropdown-menu li a i {
26
+ color: rgba(122,179,23,1);
27
+ visibility: hidden;
28
+ }
29
+ .editor-canvas .editor-editable {
30
+ overflow: auto;
31
+ outline: 0;
32
+ padding: 10px;
33
+ }
34
+ .editor-canvas .editor-editable a { color: rgba(58,144,216,1); }
35
+
36
+ /* #Editor Dialog
37
+ ================================================== */
38
+ .editor-dialog > div { display: none; }
39
+
40
+ /* #Editor Dropzone
41
+ ================================================== */
42
+ .editor-dropzone {
43
+ color: rgba(158,171,179,1);
44
+ background-color: rgba(255,255,255,1);
45
+ border: 2px dashed rgba(158,171,179,1);
46
+ display: none;
47
+ min-height: 100px;
48
+ opacity: 0.95;
49
+ pointer-event: none;
50
+ position: absolute;
51
+ z-index: 1;
52
+ }
53
+ .editor-dropzone.hover {
54
+ border-color: rgba(58,144,216,1);
55
+ color: rgba(58,144,216,1);
56
+ }
57
+ .editor-dropzone .editor-dropzone-message {
58
+ display: table-cell;
59
+ font-size: 28px;
60
+ font-weight: bold;
61
+ text-align: center;
62
+ vertical-align: middle;
63
+ }
64
+ .editor-canvas.dragover .editor-dropzone { display: table; }
65
+
66
+ /* #Editor Handle
67
+ ================================================== */
68
+ .editor-canvas .editor-handle .editor-control-selection {
69
+ border: 1px solid rgba(217,222,225,1);
70
+ display: none;
71
+ position: absolute;
72
+ }
73
+ .editor-canvas .editor-handle .editor-control-selection .editor-control-selection-info {
74
+ background-color: rgba(255,255,255,1);
75
+ bottom: 0;
76
+ color: rgba(255,255,255,1);
77
+ font-size: 12px;
78
+ margin: 5px;
79
+ padding: 5px;
80
+ opacity: 0.7;
81
+ filter: alpha(opacity=70);
82
+ right: 0;
83
+ }
84
+ .editor-canvas .editor-handle .editor-control-selection .editor-control-selection-bg {
85
+ width: 100%;
86
+ height: 100%;
87
+ background-color: rgba(255,255,255,1);
88
+ opacity: 0.3;
89
+ filter: alpha(opacity=30);
90
+ }
91
+ .editor-canvas .editor-handle .editor-control-selection .editor-control-holder {
92
+ width: 7px;
93
+ height: 7px;
94
+ border: 1px solid rgba(71,74,84,1);
95
+ }
96
+ .editor-canvas .editor-handle .editor-control-selection .editor-control-handle {
97
+ width: 7px;
98
+ height: 7px;
99
+ border: 1px solid rgba(71,74,84,1);
100
+ }
101
+ .editor-canvas .editor-handle .editor-control-selection .editor-control-sizing {
102
+ width: 7px;
103
+ height: 7px;
104
+ background-color: rgba(255,255,255,1);
105
+ border: 1px solid rgba(71,74,84,1);
106
+ }
107
+ .editor-canvas .editor-handle .editor-control-selection .editor-control-nw {
108
+ top: -5px;
109
+ left: -5px;
110
+ border-right: 0;
111
+ border-bottom: 0;
112
+ }
113
+ .editor-canvas .editor-handle .editor-control-selection .editor-control-ne {
114
+ top: -5px;
115
+ right: -5px;
116
+ border-bottom: 0;
117
+ border-left: none;
118
+ }
119
+ .editor-canvas .editor-handle .editor-control-selection .editor-control-se {
120
+ right: -5px;
121
+ bottom: -5px;
122
+ cursor: se-resize;
123
+ }
124
+ .editor-canvas .editor-handle .editor-control-selection .editor-control-sw {
125
+ border-top: 0;
126
+ border-right: 0;
127
+ bottom: -5px;
128
+ left: -5px;
129
+ }
130
+ .editor-canvas .editor-handle .editor-control-selection > div { position: absolute; }
131
+
132
+ /* #Editor Help
133
+ ================================================== */
134
+ .editor-help-dialog {
135
+ font-size: 12px;
136
+ line-height: 18px;
137
+ }
138
+ .editor-help-dialog .editor-shortcut-layout { width: 100%; }
139
+ .editor-help-dialog .editor-shortcut-layout td { vertical-align: top; }
140
+ .editor-help-dialog .editor-shortcut { margin-top: 5px;}
141
+ .editor-help-dialog .editor-shortcut th {
142
+ color: rgba(71,74,84,1);
143
+ font-size: 13px;
144
+ font-weight: bold;
145
+ padding-bottom: 5px;
146
+ text-align: left;
147
+ }
148
+ .editor-help-dialog .editor-shortcut td:first-child {
149
+ color: rgba(58,144,216,1);
150
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
151
+ font-size: 11px;
152
+ line-height: 18px;
153
+ min-width: 110px;
154
+ padding-right: 10px;
155
+ text-align: right;
156
+ }
157
+
158
+ /* #Editor Popover
159
+ ================================================== */
160
+ .editor-popover .popover { max-width: none; }
161
+ .editor-popover .popover .arrow { left: 20px; }
162
+ .editor-popover .popover .popover-content { padding: 5px; }
163
+ .editor-popover .popover .popover-content .btn-group + .btn-group { margin-left: 5px; }
164
+ .editor-popover .popover .popover-content a {
165
+ color: rgba(58,144,216,1);
166
+ display: inline-block;
167
+ max-width: 200px;
168
+ overflow: hidden;
169
+ text-overflow: ellipsis;
170
+ vertical-align: middle;
171
+ white-space: nowrap;
172
+ }
173
+
174
+ /* #Editor Dropdown
175
+ ================================================== */
176
+ .editor-canvas .dropdown-menu.right {
177
+ left: auto;
178
+ right: 0;
179
+ }
180
+ .editor-canvas .dropdown-menu.right::before {
181
+ left: auto!important;
182
+ right: 9px;
183
+ }
184
+ .editor-canvas .dropdown-menu.right::after {
185
+ left: auto!important;
186
+ right: 10px;
187
+ }
188
+
189
+ /* #Editor Color Palette
190
+ ================================================== */
191
+ .editor-color-palette { line-height: 1; }
192
+ .editor-color-palette .editor-color-btn {
193
+ border: 1px solid transparent;
194
+ height: 17px;
195
+ margin: 0;
196
+ padding: 0;
197
+ width: 17px;
198
+ }
199
+ .editor-color-palette .editor-color-btn:hover { border: 1px solid rgba(71,74,84,1); }
200
+ .editor-color .dropdown-menu { min-width: 290px; }
201
+ .editor-color .dropdown-menu .btn-group { margin: 0; }
202
+ .editor-color .dropdown-menu .btn-group .editor-palette-title {
203
+ border-bottom: 1px solid rgba(0,0,0,0.1);
204
+ font-size: 12px;
205
+ font-weight: bold;
206
+ margin: 2px 7px;
207
+ text-align: center;
208
+ }
209
+ .editor-color-reset {
210
+ border-radius: 2px;
211
+ cursor: pointer;
212
+ font-size: 12px;
213
+ margin: 5px;
214
+ padding: 3px 0 2px 0;
215
+ text-align: center;
216
+ }
217
+ .editor-color-reset:hover {
218
+ background: rgba(58,144,216,1);
219
+ color: rgba(255,255,255,1)
220
+ }
221
+ .editor-color .dropdown-toggle {
222
+ padding-left: 5px;
223
+ width: 20px;
224
+ }
225
+ .editor-color .dropdown-menu .btn-group:first-child { margin: 0 5px; }
226
+
227
+ /* #Editor Font Size
228
+ ================================================== */
229
+ .editor-canvas .editor-fontsize-10 { font-size: 10px; }
230
+
231
+ /* #Editor Statusbar
232
+ ================================================== */
233
+ .editor-canvas .editor-statusbar { background-color: rgba(236,238,241,1); }
234
+ .editor-canvas .editor-statusbar .editor-resizebar {
235
+ border-top: 1px solid rgba(217,222,225,1);
236
+ cursor: s-resize;
237
+ height: 10px;
238
+ width: 100%;
239
+ }
240
+ .editor-canvas .editor-statusbar .editor-resizebar .editor-icon-bar {
241
+ border-top: 2px solid rgba(71,74,84,1);
242
+ margin: 1px auto;
243
+ width: 20px;
244
+ }
245
+
246
+ /* #Editor Code View
247
+ ================================================== */
248
+ .editor-codable {
249
+ background-color: rgba(71,74,84,1);
250
+ border: none;
251
+ color: rgba(255,255,255,1);
252
+ display: none;
253
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
254
+ font-size: 14px;
255
+ line-height: 21px;
256
+ margin: 0;
257
+ padding: 10px 0;
258
+ resize: none;
259
+ width: 100%;
260
+ }
261
+ .editor-canvas.codeview .editor-editable { display: none; }
262
+ .editor-canvas.codeview .editor-codable { display: block; }
263
+
264
+ /* #Editor Toolbar
265
+ ================================================== */
266
+ .editor-toolbar {
267
+ background-color: rgba(236,238,241,1);
268
+ border-bottom: 1px solid rgba(217,222,225,1);
269
+ margin: 0;
270
+ padding: 1px 0;
271
+ }
272
+ .editor-toolbar > .btn-group { margin: 2px 2px 2px 3px; }
273
+ .editor-toolbar > .btn-group > .btn {
274
+ background: rgba(255,255,255,1);
275
+ height: 32px;
276
+ }
277
+ .editor-toolbar > .btn-group > .btn:hover { background: rgba(226,228,231,1); }
278
+ .editor-toolbar > .btn-group > .btn.active {
279
+ background: rgba(71,74,84,1);
280
+ color: rgba(255,255,255,1);
281
+ border-bottom-color: rgba(51,54,64,1);
282
+ }
283
+
284
+ /* #Editor Table
285
+ ================================================== */
286
+ .editor-table .dropdown-menu {
287
+ font-size: 13px;
288
+ min-width: 0;
289
+ padding: 5px;
290
+ }
291
+ .editor-table .dropdown-menu .editor-dimension-picker { font-size: 18px; }
292
+ .editor-table .dropdown-menu .editor-dimension-picker .editor-dimension-picker-unhighlighted {
293
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat;
294
+ height: 5em;
295
+ position: relative!important;
296
+ width: 5em;
297
+ z-index: 1;
298
+ }
299
+ .editor-table .dropdown-menu .editor-dimension-picker .editor-dimension-picker-mousecatcher {
300
+ cursor: pointer;
301
+ height: 10em;
302
+ position: absolute!important;
303
+ width: 10em;
304
+ z-index: 3;
305
+ }
306
+ .editor-table .dropdown-menu .editor-dimension-picker .editor-dimension-picker-highlighted {
307
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat;
308
+ height: 1em;
309
+ position: absolute!important;
310
+ width: 1em;
311
+ z-index: 2;
312
+ }
313
+
314
+ /* #Editor Paragraph
315
+ ================================================== */
316
+ .editor-para .dropdown-menu { padding: 5px 5px 0 5px; }
317
+ .editor-para .dropdown-menu .btn.active {
318
+ background: rgba(71,74,84,1);
319
+ color: rgba(255,255,255,1);
320
+ border-bottom-color: rgba(51,54,64,1);
321
+ }
322
+
323
+ /* #Editor Style
324
+ ================================================== */
325
+ .editor-style a { cursor: pointer; }
326
+ .editor-style h1,
327
+ .editor-style h2,
328
+ .editor-style h3,
329
+ .editor-style h4,
330
+ .editor-style h5,
331
+ .editor-style h6,
332
+ .editor-style blockquote { margin: 0; }
333
+ .editor-style a:hover h1,
334
+ .editor-style a:hover h2,
335
+ .editor-style a:hover h3,
336
+ .editor-style a:hover h4,
337
+ .editor-style a:hover h5,
338
+ .editor-style a:hover h6 {
339
+ color: rgba(58,144,216,1);
340
+ -webkit-transition: all 0.3s ease-in-out;
341
+ transition: all 0.3s ease-in-out;
342
+ text-decoration: none;
343
+ }
344
+
345
+ /* #Editor Fullscreen
346
+ ================================================== */
347
+ .editor-canvas.fullscreen {
348
+ left: 0;
349
+ position: fixed;
350
+ top: 0;
351
+ width: 100%;
352
+ z-index: 1050;
353
+ }
354
+ .editor-canvas.fullscreen .editor-resizebar { display: none; }
355
+ .editor-canvas.fullscreen .editor-editable { background-color: rgba(255,255,255,1); }
@@ -0,0 +1,353 @@
1
+ /* Table of Contents
2
+ ==================================================
3
+ #Inline Editor */
4
+
5
+ /* #Inline Editor
6
+ ================================================== */
7
+ @-webkit-keyframes pop-upwards {
8
+ 0% {
9
+ -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
10
+ -moz-transform: matrix(0.97, 0, 0, 1, 0, 12);
11
+ -ms-transform: matrix(0.97, 0, 0, 1, 0, 12);
12
+ -o-transform: matrix(0.97, 0, 0, 1, 0, 12);
13
+ transform: matrix(0.97, 0, 0, 1, 0, 12);
14
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
15
+ opacity: 0;
16
+ }
17
+ 20% {
18
+ -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
19
+ -moz-transform: matrix(0.99, 0, 0, 1, 0, 2);
20
+ -ms-transform: matrix(0.99, 0, 0, 1, 0, 2);
21
+ -o-transform: matrix(0.99, 0, 0, 1, 0, 2);
22
+ transform: matrix(0.99, 0, 0, 1, 0, 2);
23
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
24
+ opacity: 0.7;
25
+ }
26
+ 40% {
27
+ -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
28
+ -moz-transform: matrix(1, 0, 0, 1, 0, -1);
29
+ -ms-transform: matrix(1, 0, 0, 1, 0, -1);
30
+ -o-transform: matrix(1, 0, 0, 1, 0, -1);
31
+ transform: matrix(1, 0, 0, 1, 0, -1);
32
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
33
+ opacity: 1;
34
+ }
35
+ 70% {
36
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
37
+ -moz-transform: matrix(1, 0, 0, 1, 0, 0);
38
+ -ms-transform: matrix(1, 0, 0, 1, 0, 0);
39
+ -o-transform: matrix(1, 0, 0, 1, 0, 0);
40
+ transform: matrix(1, 0, 0, 1, 0, 0);
41
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
42
+ opacity: 1;
43
+ }
44
+ 100% {
45
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
46
+ -moz-transform: matrix(1, 0, 0, 1, 0, 0);
47
+ -ms-transform: matrix(1, 0, 0, 1, 0, 0);
48
+ -o-transform: matrix(1, 0, 0, 1, 0, 0);
49
+ transform: matrix(1, 0, 0, 1, 0, 0);
50
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
51
+ opacity: 1;
52
+ }
53
+ }
54
+ @-moz-keyframes pop-upwards {
55
+ 0% {
56
+ -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
57
+ -moz-transform: matrix(0.97, 0, 0, 1, 0, 12);
58
+ -ms-transform: matrix(0.97, 0, 0, 1, 0, 12);
59
+ -o-transform: matrix(0.97, 0, 0, 1, 0, 12);
60
+ transform: matrix(0.97, 0, 0, 1, 0, 12);
61
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
62
+ opacity: 0;
63
+ }
64
+ 20% {
65
+ -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
66
+ -moz-transform: matrix(0.99, 0, 0, 1, 0, 2);
67
+ -ms-transform: matrix(0.99, 0, 0, 1, 0, 2);
68
+ -o-transform: matrix(0.99, 0, 0, 1, 0, 2);
69
+ transform: matrix(0.99, 0, 0, 1, 0, 2);
70
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
71
+ opacity: 0.7;
72
+ }
73
+ 40% {
74
+ -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
75
+ -moz-transform: matrix(1, 0, 0, 1, 0, -1);
76
+ -ms-transform: matrix(1, 0, 0, 1, 0, -1);
77
+ -o-transform: matrix(1, 0, 0, 1, 0, -1);
78
+ transform: matrix(1, 0, 0, 1, 0, -1);
79
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
80
+ opacity: 1;
81
+ }
82
+ 70% {
83
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
84
+ -moz-transform: matrix(1, 0, 0, 1, 0, 0);
85
+ -ms-transform: matrix(1, 0, 0, 1, 0, 0);
86
+ -o-transform: matrix(1, 0, 0, 1, 0, 0);
87
+ transform: matrix(1, 0, 0, 1, 0, 0);
88
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
89
+ opacity: 1;
90
+ }
91
+ 100% {
92
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
93
+ -moz-transform: matrix(1, 0, 0, 1, 0, 0);
94
+ -ms-transform: matrix(1, 0, 0, 1, 0, 0);
95
+ -o-transform: matrix(1, 0, 0, 1, 0, 0);
96
+ transform: matrix(1, 0, 0, 1, 0, 0);
97
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
98
+ opacity: 1;
99
+ }
100
+ }
101
+ @-o-keyframes pop-upwards {
102
+ 0% {
103
+ -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
104
+ -moz-transform: matrix(0.97, 0, 0, 1, 0, 12);
105
+ -ms-transform: matrix(0.97, 0, 0, 1, 0, 12);
106
+ -o-transform: matrix(0.97, 0, 0, 1, 0, 12);
107
+ transform: matrix(0.97, 0, 0, 1, 0, 12);
108
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
109
+ opacity: 0;
110
+ }
111
+ 20% {
112
+ -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
113
+ -moz-transform: matrix(0.99, 0, 0, 1, 0, 2);
114
+ -ms-transform: matrix(0.99, 0, 0, 1, 0, 2);
115
+ -o-transform: matrix(0.99, 0, 0, 1, 0, 2);
116
+ transform: matrix(0.99, 0, 0, 1, 0, 2);
117
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
118
+ opacity: 0.7;
119
+ }
120
+ 40% {
121
+ -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
122
+ -moz-transform: matrix(1, 0, 0, 1, 0, -1);
123
+ -ms-transform: matrix(1, 0, 0, 1, 0, -1);
124
+ -o-transform: matrix(1, 0, 0, 1, 0, -1);
125
+ transform: matrix(1, 0, 0, 1, 0, -1);
126
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
127
+ opacity: 1;
128
+ }
129
+ 70% {
130
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
131
+ -moz-transform: matrix(1, 0, 0, 1, 0, 0);
132
+ -ms-transform: matrix(1, 0, 0, 1, 0, 0);
133
+ -o-transform: matrix(1, 0, 0, 1, 0, 0);
134
+ transform: matrix(1, 0, 0, 1, 0, 0);
135
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
136
+ opacity: 1;
137
+ }
138
+ 100% {
139
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
140
+ -moz-transform: matrix(1, 0, 0, 1, 0, 0);
141
+ -ms-transform: matrix(1, 0, 0, 1, 0, 0);
142
+ -o-transform: matrix(1, 0, 0, 1, 0, 0);
143
+ transform: matrix(1, 0, 0, 1, 0, 0);
144
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
145
+ opacity: 1;
146
+ }
147
+ }
148
+ @keyframes pop-upwards {
149
+ 0% {
150
+ -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
151
+ -moz-transform: matrix(0.97, 0, 0, 1, 0, 12);
152
+ -ms-transform: matrix(0.97, 0, 0, 1, 0, 12);
153
+ -o-transform: matrix(0.97, 0, 0, 1, 0, 12);
154
+ transform: matrix(0.97, 0, 0, 1, 0, 12);
155
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
156
+ opacity: 0;
157
+ }
158
+ 20% {
159
+ -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
160
+ -moz-transform: matrix(0.99, 0, 0, 1, 0, 2);
161
+ -ms-transform: matrix(0.99, 0, 0, 1, 0, 2);
162
+ -o-transform: matrix(0.99, 0, 0, 1, 0, 2);
163
+ transform: matrix(0.99, 0, 0, 1, 0, 2);
164
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
165
+ opacity: 0.7;
166
+ }
167
+ 40% {
168
+ -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
169
+ -moz-transform: matrix(1, 0, 0, 1, 0, -1);
170
+ -ms-transform: matrix(1, 0, 0, 1, 0, -1);
171
+ -o-transform: matrix(1, 0, 0, 1, 0, -1);
172
+ transform: matrix(1, 0, 0, 1, 0, -1);
173
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
174
+ opacity: 1;
175
+ }
176
+ 70% {
177
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
178
+ -moz-transform: matrix(1, 0, 0, 1, 0, 0);
179
+ -ms-transform: matrix(1, 0, 0, 1, 0, 0);
180
+ -o-transform: matrix(1, 0, 0, 1, 0, 0);
181
+ transform: matrix(1, 0, 0, 1, 0, 0);
182
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
183
+ opacity: 1;
184
+ }
185
+ 100% {
186
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
187
+ -moz-transform: matrix(1, 0, 0, 1, 0, 0);
188
+ -ms-transform: matrix(1, 0, 0, 1, 0, 0);
189
+ -o-transform: matrix(1, 0, 0, 1, 0, 0);
190
+ transform: matrix(1, 0, 0, 1, 0, 0);
191
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
192
+ opacity: 1;
193
+ }
194
+ }
195
+ .inline-editor-content a { color: rgba(58,144,216,1); }
196
+ .inline-editor-content:focus {
197
+ -webkit-appearance: none;
198
+ -moz-appearance: none;
199
+ border: none;
200
+ box-shadow: none;
201
+ outline: 0;
202
+ }
203
+ .inline-toolbar-arrow-under:after,
204
+ .inline-toolbar-arrow-over:before {
205
+ content: "";
206
+ border-style: solid;
207
+ display: block;
208
+ height: 0;
209
+ left: 50%;
210
+ margin-left: -8px;
211
+ position: absolute;
212
+ width: 0;
213
+ }
214
+ .inline-toolbar-arrow-under:after {
215
+ border-color: rgba(58,144,216,1) transparent transparent transparent;
216
+ border-width: 8px 8px 0 8px;
217
+ top: 40px;
218
+ }
219
+ .inline-toolbar-arrow-over:before {
220
+ border-color: transparent transparent rgba(58,144,216,1) transparent;
221
+ border-width: 0 8px 8px 8px;
222
+ top: -8px;
223
+ }
224
+ .inline-editor-toolbar {
225
+ background-color: rgba(58,144,216,1);
226
+ border: 1px solid rgba(28,114,186,1);
227
+ border-radius: 3px;
228
+ font-size: 16px;
229
+ left: 0;
230
+ position: absolute;
231
+ -webkit-transition: top 0.075s ease-out,left 0.075s ease-out;
232
+ -moz-transition: top 0.075s ease-out,left 0.075s ease-out;
233
+ -o-transition: top 0.075s ease-out,left 0.075s ease-out;
234
+ transition: top 0.075s ease-out,left 0.075s ease-out;
235
+ top: 0;
236
+ visibility: hidden;
237
+ z-index: 2000;
238
+ }
239
+ .inline-editor-toolbar ul {
240
+ margin: 0;
241
+ padding: 0;
242
+ }
243
+ .inline-editor-toolbar li {
244
+ float: left;
245
+ list-style: none;
246
+ margin: 0;
247
+ padding: 0;
248
+ }
249
+ .inline-editor-toolbar li .inline-editor-action-underline { text-decoration: underline; }
250
+ .inline-editor-toolbar li .inline-editor-button-active {
251
+ background-color: rgba(28,114,186,1);
252
+ color: rgba(255,255,255,1);
253
+ }
254
+ .inline-editor-toolbar li .inline-editor-button-first {
255
+ border-top-left-radius: 3px;
256
+ border-bottom-left-radius: 3px;
257
+ }
258
+ .inline-editor-toolbar li .inline-editor-button-last {
259
+ border-right: none;
260
+ border-top-right-radius: 3px;
261
+ border-bottom-right-radius: 3px;
262
+ }
263
+ .inline-editor-toolbar li .inline-editor-action-pre {
264
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
265
+ font-size: 12px;
266
+ font-weight: 100;
267
+ padding: 15px 0;
268
+ }
269
+ .inline-editor-toolbar li button {
270
+ background-color: transparent;
271
+ border: none;
272
+ border-right: 1px solid rgba(28,114,186,1);
273
+ -webkit-box-sizing: border-box;
274
+ -moz-box-sizing: border-box;
275
+ box-sizing: border-box;
276
+ color: rgba(255,255,255,1);
277
+ display: block;
278
+ font-size: 13px;
279
+ height: 40px;
280
+ min-width: 40px;
281
+ padding: 12px 10px 10px 10px;
282
+ text-decoration: none;
283
+ -webkit-transition: background-color 0.2s ease-in,color 0.2s ease-in;
284
+ -moz-transition: background-color 0.2s ease-in,color 0.2s ease-in;
285
+ -o-transition: background-color 0.2s ease-in,color 0.2s ease-in;
286
+ transition: background-color 0.2s ease-in,color 0.2s ease-in;
287
+ width: 100%;
288
+ }
289
+ .inline-editor-toolbar li button:hover {
290
+ background-color: rgba(28,114,186,1);
291
+ color: rgba(255,255,255,1);
292
+ }
293
+ .inline-editor-toolbar-active {
294
+ -webkit-animation: pop-upwards 160ms forwards linear;
295
+ -moz-animation: pop-upwards 160ms forwards linear;
296
+ -ms-animation: pop-upwards 160ms forwards linear;
297
+ -o-animation: pop-upwards 160ms forwards linear;
298
+ animation: pop-upwards 160ms forwards linear;
299
+ -webkit-transition: top 0.075s ease-out,left 0.075s ease-out;
300
+ -moz-transition: top 0.075s ease-out,left 0.075s ease-out;
301
+ -o-transition: top 0.075s ease-out,left 0.075s ease-out;
302
+ transition: top 0.075s ease-out,left 0.075s ease-out;
303
+ visibility: visible;
304
+ }
305
+ .inline-editor-action-bold { font-weight: bold; }
306
+ .inline-editor-action-italic { font-style: italic; }
307
+ .inline-editor-toolbar-form-anchor {
308
+ background: rgba(58,144,216,1);
309
+ border-radius: 3px;
310
+ color: rgba(255,255,255,1);
311
+ display: none;
312
+ }
313
+ .inline-editor-toolbar-form-anchor input {
314
+ color: rgba(255,255,255,1);
315
+ background: rgba(58,144,216,1);
316
+ border: none;
317
+ display: inline-block;
318
+ -webkit-box-sizing: border-box;
319
+ -moz-box-sizing: border-box;
320
+ box-sizing: border-box;
321
+ height: 40px;
322
+ margin: 0;
323
+ padding: 11px 10px 9px 10px;
324
+ width: 240px;
325
+ }
326
+ .inline-editor-toolbar-form-anchor input::-webkit-input-placeholder { color: rgba(255,255,255,0.8); }
327
+ .inline-editor-toolbar-form-anchor input:-ms-input-placeholder { color: rgba(255,255,255,0.8); }
328
+ .inline-editor-toolbar-form-anchor input::-moz-placeholder { color: rgba(255,255,255,0.8); }
329
+ .inline-editor-toolbar-form-anchor input:-moz-placeholder { color: rgba(255,255,255,0.8); }
330
+ .inline-editor-toolbar-form-anchor input:focus {
331
+ -webkit-appearance: none;
332
+ -moz-appearance: none;
333
+ border: none;
334
+ box-shadow: none;
335
+ outline: 0;
336
+ }
337
+ .inline-editor-toolbar-form-anchor a {
338
+ color: rgba(255,255,255,1);
339
+ display: inline-block;
340
+ font-size: 24px;
341
+ font-weight: bold;
342
+ margin: 0 10px;
343
+ text-decoration: none;
344
+ }
345
+ .inline-editor-placeholder { position: relative; }
346
+ .inline-editor-placeholder:after {
347
+ content: attr(data-placeholder);
348
+ color: rgba(28,114,186,1);
349
+ font-style: italic;
350
+ left: 0;
351
+ position: absolute;
352
+ top: 0;
353
+ }