scrivito_content_browser 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,1095 @@
1
+ /*
2
+ A content browser modal window to add, edit, delete, select and search CMS resources. Each resource
3
+ type like Image or BlogPost has its own item representation and custom edit view. All styles are
4
+ bootstrap independent. You are free to customize the content browser to your likings.
5
+ */
6
+
7
+ .editing-overlay {
8
+ background: rgba(0, 0, 0, 0.8);
9
+ opacity: 0;
10
+ filter: alpha(opacity=0);
11
+ -webkit-transition: opacity 0.5s linear;
12
+ -moz-transition: opacity 0.5s linear;
13
+ -o-transition: opacity 0.5s linear;
14
+ transition: opacity 0.5s linear;
15
+ position: fixed;
16
+ z-index: 222222;
17
+ }
18
+
19
+ .editing-overlay.show {
20
+ opacity: 0.85;
21
+ filter: alpha(opacity=85);
22
+ -webkit-transition: opacity 0.3s linear;
23
+ -moz-transition: opacity 0.3s linear;
24
+ -o-transition: opacity 0.3s linear;
25
+ transition: opacity 0.3s linear;
26
+ bottom: 0;
27
+ left: 0;
28
+ right: 0;
29
+ top: 0;
30
+ z-index: 222222;
31
+ }
32
+
33
+ .scrivito-content-browser {
34
+ -webkit-border-radius: 5px;
35
+ -moz-border-radius: 5px;
36
+ border-radius: 5px;
37
+ -webkit-box-shadow: 0 5px 30px #000000;
38
+ -moz-box-shadow: 0 5px 30px #000000;
39
+ box-shadow: 0 5px 30px #000000;
40
+ opacity: 0;
41
+ filter: alpha(opacity=0);
42
+ -webkit-transition: opacity 0.5s linear;
43
+ -moz-transition: opacity 0.5s linear;
44
+ -o-transition: opacity 0.5s linear;
45
+ transition: opacity 0.5s linear;
46
+ background: #fff;
47
+ font-family: Arial, sans-serif;
48
+ height: 90%;
49
+ left: 50%;
50
+ margin: -250px 0 0 -40%;
51
+ overflow: hidden;
52
+ position: fixed;
53
+ top: 50%;
54
+ visibility: hidden;
55
+ width: 90%;
56
+ z-index: 3333333;
57
+ }
58
+
59
+ .scrivito-content-browser.show {
60
+ opacity: 1;
61
+ filter: alpha(opacity=100);
62
+ -webkit-transition: opacity 0.3s linear;
63
+ -moz-transition: opacity 0.3s linear;
64
+ -o-transition: opacity 0.3s linear;
65
+ transition: opacity 0.3s linear;
66
+ top: 50%;
67
+ visibility: visible;
68
+ z-index: 3333333;
69
+ }
70
+
71
+ .scrivito-content-browser .scrivito-content-browser-footer .editing-button {
72
+ float: right;
73
+ margin: 0 10px 0 0;
74
+ }
75
+
76
+ .scrivito-content-browser .scrivito-content-browser-body {
77
+ -webkit-box-sizing: border-box;
78
+ -moz-box-sizing: border-box;
79
+ box-sizing: border-box;
80
+ background:#eee;
81
+ clear: both;
82
+ height: 100%;
83
+ margin: 0;
84
+ padding: 0 0 50px 0;
85
+ position: relative;
86
+ }
87
+
88
+ .scrivito-content-browser .scrivito-content-browser-wrapper {
89
+ -webkit-box-sizing: border-box;
90
+ -moz-box-sizing: border-box;
91
+ box-sizing: border-box;
92
+ float: left;
93
+ height: 100%;
94
+ padding-top: 50px;
95
+ position: relative;
96
+ width: 70%;
97
+ }
98
+
99
+ .scrivito-content-browser .scrivito-content-browser-topbar {
100
+ background: #666;
101
+ color:#fff;
102
+ -webkit-box-shadow: -3px 0 5px -3px #333 inset;
103
+ -moz-box-shadow: -3px 0 5px -3px #333 inset;
104
+ box-shadow: -3px 0 5px -3px #333 inset;
105
+ -webkit-box-sizing: border-box;
106
+ -moz-box-sizing: border-box;
107
+ box-sizing: border-box;
108
+ height: 50px;
109
+ left: 0;
110
+ padding: 11px 10px 9px 10px;
111
+ position: absolute;
112
+ top: 0;
113
+ width: 100%;
114
+ }
115
+
116
+ .scrivito-content-browser .scrivito-content-browser-search {
117
+ float: left;
118
+ overflow: hidden;
119
+ position: relative;
120
+ width: 65%;
121
+ white-space: nowrap;
122
+ }
123
+
124
+ .scrivito-content-browser .scrivito-content-browser-search .search-field {
125
+ border:0px;
126
+ color:#333;
127
+ -webkit-border-radius: 15px 0 0 15px;
128
+ -moz-border-radius: 15px 0 0 15px;
129
+ border-radius: 15px 0 0 15px;
130
+ -webkit-box-shadow: 0 0 3px #ccc inset,0 0 8px rgba(109, 131, 166, .0);
131
+ -moz-box-shadow: 0 0 3px #ccc inset,0 0 8px rgba(109, 131, 166, .0);
132
+ box-shadow: 0 0 3px #ccc inset,0 0 8px rgba(109, 131, 166, .0);
133
+ -webkit-box-sizing: border-box;
134
+ -moz-box-sizing: border-box;
135
+ box-sizing: border-box;
136
+ -webkit-transition: border linear .5s, box-shadow linear .5s;
137
+ -moz-transition: border linear .5s, box-shadow linear .5s;
138
+ -o-transition: border linear .5s, box-shadow linear .5s;
139
+ transition: border linear .5s, box-shadow linear .5s;
140
+ display: block;
141
+ float: left;
142
+ font-size: 14px;
143
+ height: 30px;
144
+ line-height: 30px;
145
+ margin: 0;
146
+ padding: 4px 14px;
147
+ width: 300px;
148
+ }
149
+
150
+ .scrivito-content-browser .scrivito-content-browser-search .search-field:focus {
151
+ -webkit-box-shadow: 0 0 1px #aaa inset,0 0 8px rgba(109, 131, 166, .6);
152
+ -moz-box-shadow: 0 0 1px #aaa inset,0 0 8px rgba(109, 131, 166, .6);
153
+ box-shadow: 0 0 1px #aaa inset,0 0 8px rgba(109, 131, 166, .6);
154
+ -webkit-transition: box-shadow linear .5s;
155
+ -moz-transition: box-shadow linear .5s;
156
+ -o-transition: box-shadow linear .5s;
157
+ transition: box-shadow linear .5s;
158
+ outline: 0;
159
+ }
160
+
161
+ .scrivito-content-browser .scrivito-content-browser-search .search-field-button {
162
+ background: #7EA46A;
163
+ -webkit-border-radius: 0 15px 15px 0;
164
+ -moz-border-radius: 0 15px 15px 0;
165
+ border-radius: 0 15px 15px 0;
166
+ -webkit-box-sizing: border-box;
167
+ -moz-box-sizing: border-box;
168
+ box-sizing: border-box;
169
+ -webkit-user-select: none;
170
+ -moz-user-select: none;
171
+ -ms-user-select: none;
172
+ -o-user-select: none;
173
+ user-select: none;
174
+ border: 0px;
175
+ border-left: none;
176
+ color: #fff;
177
+ cursor: pointer;
178
+ display: inline;
179
+ font-size: 14px;
180
+ font-weight: normal;
181
+ height: 30px;
182
+ margin: 0;
183
+ padding: 0;
184
+ text-align: center;
185
+ width: 80px;
186
+ }
187
+
188
+ .scrivito-content-browser .scrivito-content-browser-search .search-field-button:hover {
189
+ background: #94BA80;
190
+ color: #fff;
191
+ cursor: pointer;
192
+ }
193
+
194
+ .scrivito-content-browser .scrivito-content-browser-search .search-field-button:active {
195
+ background: #7EA46A;
196
+ color: #fff;
197
+ cursor: pointer;
198
+ }
199
+
200
+ .scrivito-content-browser .scrivito-content-browser-topbar .editing-button-view {
201
+ display: block;
202
+ float: right;
203
+ height: 32px;
204
+ line-height: 32px;
205
+ padding: 0 7px;
206
+ }
207
+
208
+ .scrivito-content-browser .scrivito-content-browser-topbar .editing-button-view:hover {
209
+ cursor: pointer;
210
+ }
211
+
212
+ .scrivito-content-browser .scrivito-content-browser-topbar .editing-button-view .scrivito-content-browser-icon {
213
+ -webkit-transition: all 0.3s ease-in-out;
214
+ -moz-transition: all 0.3s ease-in-out;
215
+ -o-transition: all 0.3s ease-in-out;
216
+ transition: all 0.3s ease-in-out;
217
+ color: #fff;
218
+ font-size: 18px;
219
+ line-height: 32px;
220
+ text-shadow: 0 0 2px #333;
221
+ }
222
+
223
+ .scrivito-content-browser .scrivito-content-browser-topbar .editing-button-view:hover .scrivito-content-browser-icon,
224
+ .scrivito-content-browser .scrivito-content-browser-topbar .editing-button-view.active .scrivito-content-browser-icon {
225
+ -webkit-transition: all 0.3s ease-in-out;
226
+ -moz-transition: all 0.3s ease-in-out;
227
+ -o-transition: all 0.3s ease-in-out;
228
+ transition: all 0.3s ease-in-out;
229
+ color: #7EA46A;
230
+ }
231
+
232
+ .scrivito-content-browser .scrivito-content-browser-filter,
233
+ .scrivito-content-browser .scrivito-content-browser-items,
234
+ .scrivito-content-browser .scrivito-content-browser-inspector {
235
+ -webkit-box-sizing: border-box;
236
+ -moz-box-sizing: border-box;
237
+ box-sizing: border-box;
238
+ background: #eee;
239
+ float: left;
240
+ height: 100%;
241
+ overflow: auto;
242
+ position: relative;
243
+ -webkit-overflow-scrolling: touch;
244
+ }
245
+
246
+ .scrivito-content-browser .scrivito-content-browser-filter {
247
+ background-color: #fafafa;
248
+ -webkit-box-shadow: 0 -3px 4px -3px #bbb inset,0 3px 4px -3px #bbb inset;
249
+ -moz-box-shadow: 0 -3px 4px -3px #bbb inset,0 3px 4px -3px #bbb inset;
250
+ box-shadow: 0 -3px 4px -3px #bbb inset,0 3px 4px -3px #bbb inset;
251
+ padding: 0;
252
+ width: 17%;
253
+ }
254
+
255
+ .scrivito-content-browser .scrivito-content-browser-items {
256
+ background: #CCCCCC;
257
+ -webkit-box-shadow: 0 0 4px #666 inset;
258
+ -moz-box-shadow: 0 0 4px #666 inset;
259
+ box-shadow: 0 0 4px #666 inset;
260
+ padding: 0;
261
+ width: 83%;
262
+ }
263
+
264
+ .scrivito-content-browser .scrivito-content-browser-inspector {
265
+ -webkit-box-shadow: 0 -3px 4px -3px #bbbbbb inset;
266
+ -moz-box-shadow: 0 -3px 4px -3px #bbbbbb inset;
267
+ box-shadow: 0 -3px 4px -3px #bbbbbb inset;
268
+ padding: 0 15px;
269
+ width: 30%;
270
+ }
271
+
272
+ .scrivito-content-browser .scrivito-content-browser-footer {
273
+ background: #eee;
274
+ -webkit-box-sizing: border-box;
275
+ -moz-box-sizing: border-box;
276
+ box-sizing: border-box;
277
+ *zoom: 1;
278
+ bottom: 0;
279
+ left: 0;
280
+ height: 50px;
281
+ margin: 0;
282
+ padding: 10px 0;
283
+ position: absolute;
284
+ text-align: right;
285
+ width: 100%;
286
+ }
287
+
288
+ .scrivito-content-browser .scrivito-content-browser-footer:before,
289
+ .scrivito-content-browser .scrivito-content-browser-footer:after {
290
+ display: table;
291
+ content: "";
292
+ line-height: 0;
293
+ }
294
+
295
+ .scrivito-content-browser .scrivito-content-browser-footer:after {
296
+ clear: both;
297
+ }
298
+
299
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items {
300
+ display: block;
301
+ list-style-type: none;
302
+ margin: 0;
303
+ padding: 0;
304
+ }
305
+
306
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li {
307
+ *zoom: 1;
308
+ border-bottom: 1px solid #eee;
309
+ border-top: 1px solid #fff;
310
+ display: block;
311
+ margin: 0;
312
+ padding: 8px 5px 8px 8px;
313
+ }
314
+
315
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li:before,
316
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li:after {
317
+ display: table;
318
+ content: "";
319
+ line-height: 0;
320
+ }
321
+
322
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li:after {
323
+ clear: both;
324
+ }
325
+
326
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li:first-child {
327
+ border-top: 1px solid transparent;
328
+ }
329
+
330
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li:hover,
331
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li.active {
332
+ background: #7EA46A;
333
+ border-bottom: 1px solid #658B51;
334
+ border-top: 1px solid #658B51;
335
+ cursor: pointer;
336
+ position: relative;
337
+ z-index: 2;
338
+ }
339
+
340
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li:hover .scrivito-content-browser-icon,
341
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li.active .scrivito-content-browser-icon,
342
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li:hover .scrivito-content-browser-filter-name,
343
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li.active .scrivito-content-browser-filter-name {
344
+ color: #fff;
345
+ text-shadow: 0 1px 1px #888;
346
+ }
347
+
348
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li.separator {
349
+ background-color: #f8f8f8;
350
+ background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
351
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#eeeeee));
352
+ background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
353
+ background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
354
+ background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
355
+ background-repeat: repeat-x;
356
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
357
+ -webkit-box-shadow: 0 0 1px #aaaaaa;
358
+ -moz-box-shadow: 0 0 1px #aaaaaa;
359
+ box-shadow: 0 0 1px #aaaaaa;
360
+ border: none;
361
+ height: 4px;
362
+ padding: 0;
363
+ position: relative;
364
+ z-index: 2;
365
+ }
366
+
367
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li.selected-items {
368
+ -webkit-box-shadow: 0 0 3px #cccccc inset;
369
+ -moz-box-shadow: 0 0 3px #cccccc inset;
370
+ box-shadow: 0 0 3px #cccccc inset;
371
+ background: #eee;
372
+ }
373
+
374
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li.selected-items:hover,
375
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li.selected-items.active {
376
+ -webkit-box-shadow: 0 0 3px #333333 inset;
377
+ -moz-box-shadow: 0 0 3px #333333 inset;
378
+ box-shadow: 0 0 3px #333333 inset;
379
+ background: #5A8BD1;
380
+ }
381
+
382
+ .scrivito-content-browser .scrivito-content-browser-counter {
383
+ -webkit-border-radius: 15px;
384
+ -moz-border-radius: 15px;
385
+ border-radius: 15px;
386
+ background: #444;
387
+ color: #fff;
388
+ display: inline-block;
389
+ font-size: 10px;
390
+ font-weight: bold;
391
+ line-height: 11px;
392
+ margin: 1px -5px 0 7px;
393
+ padding: 1px 6px;
394
+ }
395
+
396
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items .scrivito-content-browser-icon {
397
+ color: #666;
398
+ display: inline;
399
+ font-size: 22px;
400
+ line-height: 20px;
401
+ padding: 0 7px 0 0;
402
+ text-shadow: 0 1px 1px #fff;
403
+ }
404
+
405
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items .scrivito-content-browser-filter-name {
406
+ color: #666;
407
+ display: inline;
408
+ font-size: 11px;
409
+ font-weight: bold;
410
+ line-height: 20px;
411
+ word-wrap: break-word;
412
+ }
413
+
414
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li:hover .scrivito-content-browser-counter,
415
+ .scrivito-content-browser ul.scrivito-content-browser-filter-items li.active .scrivito-content-browser-counter {
416
+ background: #fff;
417
+ color: #5a8bd1;
418
+ text-shadow: 0 0 0 #fff;
419
+ }
420
+
421
+ .scrivito-content-browser .scrivito-content-browser-items.uploader-drag-over {
422
+ background: #658b51;
423
+ -webkit-box-shadow: 0 0 4px #333333 inset;
424
+ -moz-box-shadow: 0 0 4px #333333 inset;
425
+ box-shadow: 0 0 4px #333333 inset;
426
+ }
427
+
428
+ .scrivito-content-browser .scrivito-content-browser-items.uploader-drag-over:before {
429
+ -webkit-user-select: none;
430
+ -moz-user-select: none;
431
+ -ms-user-select: none;
432
+ -o-user-select: none;
433
+ user-select: none;
434
+ color: #fff;
435
+ content: '\F044';
436
+ display: block;
437
+ text-align: center;
438
+ font-family: 'editing_iconsregular';
439
+ font-size: 83px;
440
+ font-style: normal;
441
+ font-weight: normal;
442
+ position: absolute;
443
+ top: 50%;
444
+ vertical-align: middle;
445
+ width: 83%;
446
+ }
447
+
448
+ .scrivito-content-browser .scrivito-content-browser-items.uploader-drag-over ul.scrivito-content-browser-thumbnails {
449
+ opacity: 0.3;
450
+ filter: alpha(opacity=30);
451
+ }
452
+
453
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails {
454
+ display: block;
455
+ list-style-type: none;
456
+ margin: 0;
457
+ overflow: hidden;
458
+ padding: 15px 0 0 15px;
459
+ }
460
+
461
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li {
462
+ -webkit-border-radius: 4px;
463
+ -moz-border-radius: 4px;
464
+ border-radius: 4px;
465
+ -webkit-box-shadow: 0 0 4px #888888;
466
+ -moz-box-shadow: 0 0 4px #888888;
467
+ box-shadow: 0 0 4px #888888;
468
+ -webkit-transition: all 0.3s ease-in-out;
469
+ -moz-transition: all 0.3s ease-in-out;
470
+ -o-transition: all 0.3s ease-in-out;
471
+ transition: all 0.3s ease-in-out;
472
+ background: #fff;
473
+ display: block;
474
+ float: left;
475
+ height: 200px;
476
+ line-height: normal;
477
+ margin: 0 15px 15px 0;
478
+ overflow: hidden;
479
+ padding: 0;
480
+ width: 200px;
481
+ }
482
+
483
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li:hover {
484
+ -webkit-box-shadow: 0 0 7px 0px #555555;
485
+ -moz-box-shadow: 0 0 7px 0px #555555;
486
+ box-shadow: 0 0 7px 0px #555555;
487
+ -webkit-transition: all 0.3s ease-in-out;
488
+ -moz-transition: all 0.3s ease-in-out;
489
+ -o-transition: all 0.3s ease-in-out;
490
+ transition: all 0.3s ease-in-out;
491
+ cursor: pointer;
492
+ }
493
+
494
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li.active {
495
+ -webkit-box-shadow: 0 0 3px 4px #658B51;
496
+ -moz-box-shadow: 0 0 3px 4px #658B51;
497
+ box-shadow: 0 0 3px 4px #658B51;
498
+ }
499
+
500
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-item-wrapper {
501
+ position: relative;
502
+ }
503
+
504
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-preview {
505
+ background: #eee;
506
+ height: 160px;
507
+ overflow: hidden;
508
+ position: relative;
509
+ }
510
+
511
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-preview img {
512
+ display: block;
513
+ max-height: 100%;
514
+ max-width: 100%;
515
+ margin: auto;
516
+ position: absolute;
517
+ top: 0;
518
+ left: 0;
519
+ right: 0;
520
+ bottom: 0;
521
+ }
522
+
523
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-preview .scrivito-content-browser-icon {
524
+ color: #bfbfbf;
525
+ display: block;
526
+ float: none;
527
+ font-size: 100px;
528
+ line-height: 160px;
529
+ text-align: center;
530
+ text-shadow: 0 1px 1px #fff;
531
+ }
532
+
533
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-meta {
534
+ -webkit-box-sizing: border-box;
535
+ -moz-box-sizing: border-box;
536
+ box-sizing: border-box;
537
+ height: 40px;
538
+ padding: 5px 35px 5px 5px;
539
+ position: relative;
540
+ }
541
+
542
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-thumbnails-name {
543
+ color: #555;
544
+ display: block;
545
+ font-size: 11px;
546
+ font-weight: bold;
547
+ line-height: 30px;
548
+ overflow: hidden;
549
+ text-overflow: ellipsis;
550
+ white-space: nowrap;
551
+ }
552
+
553
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-thumbnails-size {
554
+ color: #aaa;
555
+ display: block;
556
+ font-size: 10px;
557
+ font-weight: bold;
558
+ line-height: 15px;
559
+ overflow: hidden;
560
+ text-overflow: ellipsis;
561
+ white-space: nowrap;
562
+ }
563
+
564
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-inspect:before {
565
+ -webkit-user-select: none;
566
+ -moz-user-select: none;
567
+ -ms-user-select: none;
568
+ -o-user-select: none;
569
+ user-select: none;
570
+ background: #7EA46A;
571
+ top: 0;
572
+ color: #fff;
573
+ content: '\F026';
574
+ display: block;
575
+ font-family: 'editing_iconsregular';
576
+ font-style: normal;
577
+ font-weight: normal;
578
+ height: 40px;
579
+ line-height: 42px;
580
+ margin: 0;
581
+ padding: 0;
582
+ position: absolute;
583
+ right: 0;
584
+ text-align: center;
585
+ text-decoration: none;
586
+ vertical-align: middle;
587
+ width: 40px;
588
+ font-size: 11px;
589
+ z-index: 1;
590
+ }
591
+
592
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-thumbnails-select:before {
593
+ -webkit-user-select: none;
594
+ -moz-user-select: none;
595
+ -ms-user-select: none;
596
+ -o-user-select: none;
597
+ user-select: none;
598
+ background: #fff;
599
+ bottom: 0;
600
+ color: #ddd;
601
+ content: '\F02A';
602
+ display: block;
603
+ font-family: 'editing_iconsregular';
604
+ font-style: normal;
605
+ font-weight: normal;
606
+ height: 40px;
607
+ line-height: 42px;
608
+ margin: 0;
609
+ padding: 0;
610
+ position: absolute;
611
+ right: 0;
612
+ text-align: center;
613
+ text-decoration: none;
614
+ vertical-align: middle;
615
+ width: 40px;
616
+ font-size: 11px;
617
+ }
618
+
619
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-thumbnails-select.active:before {
620
+ background: #7EA46A;
621
+ color: #fff;
622
+ content: '\F02B';
623
+ }
624
+
625
+ /* normal-list */
626
+
627
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list {
628
+ padding-right: 15px;
629
+ }
630
+
631
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li {
632
+ height: 35px;
633
+ width: 100%;
634
+ margin: 0 0 10px 0;
635
+ }
636
+
637
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-preview {
638
+ display: none;
639
+ }
640
+
641
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-meta {
642
+ top: 0;
643
+ left: 0;
644
+ right: 0;
645
+ bottom: 0;
646
+ padding: 0px 25px 0px 45px;
647
+ }
648
+
649
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-thumbnails-name {
650
+ font-size: 12px;
651
+ font-weight: normal;
652
+ line-height: 35px;
653
+ }
654
+
655
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-thumbnails-size {
656
+ font-size: 9px;
657
+ line-height: 13px;
658
+ }
659
+
660
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-thumbnails-select:before {
661
+ font-size: 9px;
662
+ height: 35px;
663
+ line-height: 37px;
664
+ width: 40px;
665
+ position: absolute;
666
+ top: 0;
667
+ left: 0;
668
+ }
669
+
670
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-inspect:before {
671
+ font-size: 9px;
672
+ line-height: 37px;
673
+ }
674
+
675
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list .scrivito-content-browser-loading .scrivito-content-browser-icon {
676
+ font-size: 25px;
677
+ }
678
+
679
+ /* small */
680
+
681
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li {
682
+ height: 100px;
683
+ width: 130px;
684
+ }
685
+
686
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-preview {
687
+ height: 70px;
688
+ }
689
+
690
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-preview .scrivito-content-browser-icon {
691
+ font-size: 40px;
692
+ line-height: 70px;
693
+ }
694
+
695
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-meta {
696
+ height: 30px;
697
+ padding: 2px 25px 0px 5px;
698
+ }
699
+
700
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-thumbnails-name {
701
+ font-size: 10px;
702
+ line-height: 28px;
703
+ }
704
+
705
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-thumbnails-size {
706
+ font-size: 9px;
707
+ line-height: 13px;
708
+ }
709
+
710
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-thumbnails-select:before {
711
+ font-size: 9px;
712
+ height: 30px;
713
+ line-height: 32px;
714
+ width: 30px;
715
+ }
716
+
717
+ /* big */
718
+
719
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.big li {
720
+ height: 300px;
721
+ width: 300px;
722
+ }
723
+
724
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.big li .scrivito-content-browser-preview {
725
+ height: 260px;
726
+ }
727
+
728
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.big li .scrivito-content-browser-preview .scrivito-content-browser-icon {
729
+ font-size: 120px;
730
+ line-height: 260px;
731
+ }
732
+
733
+ /* large */
734
+
735
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.large li {
736
+ height: 400px;
737
+ width: 400px;
738
+ }
739
+
740
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.large li .scrivito-content-browser-preview {
741
+ height: 360px;
742
+ }
743
+
744
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.large li .scrivito-content-browser-preview .scrivito-content-browser-icon {
745
+ line-height: 360px;
746
+ font-size: 140px;
747
+ }
748
+
749
+ /* */
750
+
751
+ .scrivito-content-browser .scrivito-content-browser-inspector h3 {
752
+ color: #666;
753
+ font-size: 14px;
754
+ line-height: 32px;
755
+ }
756
+
757
+ .scrivito-content-browser .scrivito-content-browser-inspector h3 .scrivito-content-browser-icon {
758
+ color: #666;
759
+ font-size: 24px;
760
+ line-height: 32px;
761
+ padding: 0 5px 0;
762
+ }
763
+
764
+ .scrivito-content-browser .scrivito-content-browser-inspector h3 .editing-button {
765
+ background-color: #f8f8f8;
766
+ background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
767
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#eeeeee));
768
+ background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
769
+ background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
770
+ background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
771
+ background-repeat: repeat-x;
772
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
773
+ -webkit-border-radius: 5px;
774
+ -moz-border-radius: 5px;
775
+ border-radius: 5px;
776
+ -webkit-box-shadow: 0 0 3px #ffffff;
777
+ -moz-box-shadow: 0 0 3px #ffffff;
778
+ box-shadow: 0 0 3px #ffffff;
779
+ -webkit-user-select: none;
780
+ -moz-user-select: none;
781
+ -ms-user-select: none;
782
+ -o-user-select: none;
783
+ user-select: none;
784
+ border: 1px solid #e3e3e3;
785
+ color: #333;
786
+ cursor: pointer;
787
+ display: block;
788
+ float: left;
789
+ font-family: Helvetica, Arial, sans-serif;
790
+ font-size: 13px;
791
+ font-weight: bold;
792
+ line-height: 14px;
793
+ margin: 3px 10px 0 0;
794
+ min-width: 25px;
795
+ min-height: 14px;
796
+ padding: 2px 5px;
797
+ text-align: center;
798
+ text-shadow: 0 1px 0 #fff;
799
+ vertical-align: middle;
800
+ }
801
+
802
+ .scrivito-content-browser .scrivito-content-browser-inspector h3 .editing-button:hover {
803
+ background-color: #fbfbfb;
804
+ background-image: -moz-linear-gradient(top, #ffffff, #f6f6f6);
805
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f6f6f6));
806
+ background-image: -webkit-linear-gradient(top, #ffffff, #f6f6f6);
807
+ background-image: -o-linear-gradient(top, #ffffff, #f6f6f6);
808
+ background-image: linear-gradient(to bottom, #ffffff, #f6f6f6);
809
+ background-repeat: repeat-x;
810
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff6f6f6', GradientType=0);
811
+ border: 1px solid #ccc;
812
+ color: #333;
813
+ cursor: pointer;
814
+ }
815
+
816
+ .scrivito-content-browser .scrivito-content-browser-inspector h3 .editing-button:active {
817
+ background-color: #e0e0e0;
818
+ background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
819
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#cccccc));
820
+ background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
821
+ background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
822
+ background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
823
+ background-repeat: repeat-x;
824
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffcccccc', GradientType=0);
825
+ border: 1px solid #bbb;
826
+ color: #333;
827
+ cursor: pointer;
828
+ }
829
+
830
+ .scrivito-content-browser .scrivito-content-browser-inspector h3 .editing-button .scrivito-content-browser-icon {
831
+ color: #888;
832
+ font-size: 8px;
833
+ line-height: 20px;
834
+ margin: 0;
835
+ padding: 0;
836
+ }
837
+
838
+ .no-editing-available {
839
+ color: #d3d3d3;
840
+ font-size: 15px;
841
+ font-weight: bold;
842
+ text-align: center;
843
+ }
844
+
845
+ .no-editing-available .scrivito-content-browser-icon {
846
+ color: #e3e3e3;
847
+ display: block;
848
+ font-size: 85px;
849
+ line-height: 200px;
850
+ text-align: center;
851
+ text-shadow: 0 1px 0 #ddd;
852
+ }
853
+
854
+ .scrivito-content-browser-loading {
855
+ clear: both;
856
+ height: 100%;
857
+ overflow: hidden;
858
+ position: relative;
859
+ }
860
+
861
+ .scrivito-content-browser-loading .scrivito-content-browser-icon {
862
+ color: #666;
863
+ display: block;
864
+ font-size: 50px;
865
+ line-height: 0;
866
+ left: 0;
867
+ margin: 0 auto;
868
+ position: absolute;
869
+ text-align: center;
870
+ top: 50%;
871
+ width: 100%;
872
+ -webkit-animation: editing-rotation 5s infinite linear;
873
+ -moz-animation: editing-rotation 5s infinite linear;
874
+ -o-animation: editing-rotation 5s infinite linear;
875
+ animation: editing-rotation 5s infinite linear;
876
+ }
877
+
878
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails .scrivito-content-browser-loading .scrivito-content-browser-icon {
879
+ color: #ddd;
880
+ font-size: 50px;
881
+ }
882
+
883
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small .scrivito-content-browser-loading .scrivito-content-browser-icon {
884
+ font-size: 30px;
885
+ }
886
+
887
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.big .scrivito-content-browser-loading .scrivito-content-browser-icon {
888
+ font-size: 80px;
889
+ }
890
+
891
+ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.large .scrivito-content-browser-loading .scrivito-content-browser-icon {
892
+ font-size: 100px;
893
+ }
894
+
895
+ .scrivito-content-browser-progress-wrapper {
896
+ -webkit-box-shadow: 0 0 3px #bbbbbb;
897
+ -moz-box-shadow: 0 0 3px #bbbbbb;
898
+ box-shadow: 0 0 3px #bbbbbb;
899
+ background: rgba(255, 255, 255, 0.6);
900
+ border-radius: 3px;
901
+ left: 0;
902
+ margin: 2% 10%;
903
+ padding: 0;
904
+ position: absolute;
905
+ top: 0;
906
+ width: 80%;
907
+ }
908
+
909
+ .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress-file {
910
+ border-top: 1px solid #ccc;
911
+ margin: 2px 0 0 0;
912
+ padding: 5px;
913
+ }
914
+
915
+ .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress-file:first-child {
916
+ border: none;
917
+ margin: 0;
918
+ }
919
+
920
+ .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress-file p {
921
+ color: #555;
922
+ font-size: 13px;
923
+ font-weight: bold;
924
+ margin: 0 3px 6px 3px;
925
+ overflow: hidden;
926
+ text-overflow: ellipsis;
927
+ }
928
+
929
+ .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress-file .scrivito-content-browser-error:empty {
930
+ display: none;
931
+ }
932
+
933
+ .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress-file .scrivito-content-browser-error {
934
+ color: #aa4040;
935
+ font-size: 13px;
936
+ font-weight: normal;
937
+ margin: 0 3px 6px 3px;
938
+ }
939
+
940
+ .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress {
941
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
942
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
943
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
944
+ background-color: #bbb;
945
+ border-radius: 3px;
946
+ height: 10px;
947
+ margin: 0;
948
+ overflow: hidden;
949
+ }
950
+
951
+ .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress .scrivito-content-browser-progress-bar {
952
+ background-color: #658b51;
953
+ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.7)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.7)), color-stop(0.75, rgba(255, 255, 255, 0.7)), color-stop(0.75, transparent), to(transparent));
954
+ background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.7) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7) 75%, transparent 75%, transparent);
955
+ background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.7) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7) 75%, transparent 75%, transparent);
956
+ background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.7) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);
957
+ background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.7) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7) 75%, transparent 75%, transparent);
958
+ -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
959
+ -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
960
+ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
961
+ -webkit-transition: width 0.6s ease;
962
+ -moz-transition: width 0.6s ease;
963
+ -o-transition: width 0.6s ease;
964
+ transition: width 0.6s ease;
965
+ background-color: #658b51;
966
+ background-size: 15px 15px;
967
+ float: left;
968
+ font-size: 12px;
969
+ height: 100%;
970
+ line-height: 10px;
971
+ text-align: center;
972
+ width: 0%;
973
+ -webkit-animation: progress-bar-stripes 3s linear infinite;
974
+ -moz-animation: progress-bar-stripes 3s linear infinite;
975
+ -ms-animation: progress-bar-stripes 3s linear infinite;
976
+ -o-animation: progress-bar-stripes 3s linear infinite;
977
+ animation: progress-bar-stripes 3s linear infinite;
978
+ }
979
+
980
+ /*
981
+ Styles for an animated loading spinner.
982
+ */
983
+
984
+ @-webkit-keyframes editing-rotation {
985
+ 0% {
986
+ -webkit-transform: rotate(0deg);
987
+ }
988
+
989
+ 100% {
990
+ -webkit-transform: rotate(359deg);
991
+ }
992
+ }
993
+
994
+ @-moz-keyframes editing-rotation {
995
+ from {
996
+ -moz-transform: rotate(0deg);
997
+ }
998
+
999
+ to {
1000
+ -moz-transform: rotate(359deg);
1001
+ }
1002
+ }
1003
+
1004
+ @-o-keyframes editing-rotation {
1005
+ from {
1006
+ -o-transform: rotate(0deg);
1007
+ }
1008
+
1009
+ to {
1010
+ -o-transform: rotate(359deg);
1011
+ }
1012
+ }
1013
+
1014
+ @keyframes editing-rotation {
1015
+ 0% {
1016
+ transform: rotate(0deg);
1017
+ }
1018
+
1019
+ 100% {
1020
+ transform: rotate(359deg);
1021
+ }
1022
+ }
1023
+
1024
+ /*
1025
+ Styles for an animated progress bar
1026
+ */
1027
+
1028
+ @-webkit-keyframes progress-bar-stripes {
1029
+ from {
1030
+ background-position: 40px 0;
1031
+ }
1032
+
1033
+ to {
1034
+ background-position: 0 0;
1035
+ }
1036
+ }
1037
+
1038
+ @-moz-keyframes progress-bar-stripes {
1039
+ from {
1040
+ background-position: 40px 0;
1041
+ }
1042
+
1043
+ to {
1044
+ background-position: 0 0;
1045
+ }
1046
+ }
1047
+
1048
+ @-ms-keyframes progress-bar-stripes {
1049
+ from {
1050
+ background-position: 40px 0;
1051
+ }
1052
+
1053
+ to {
1054
+ background-position: 0 0;
1055
+ }
1056
+ }
1057
+
1058
+ @-o-keyframes progress-bar-stripes {
1059
+ from {
1060
+ background-position: 0 0;
1061
+ }
1062
+
1063
+ to {
1064
+ background-position: 40px 0;
1065
+ }
1066
+ }
1067
+
1068
+ @keyframes progress-bar-stripes {
1069
+ from {
1070
+ background-position: 40px 0;
1071
+ }
1072
+
1073
+ to {
1074
+ background-position: 0 0;
1075
+ }
1076
+ }
1077
+
1078
+
1079
+ @media (min-width: 769px) and (max-width: 979px) {
1080
+ .scrivito-content-browser {
1081
+ height: 90%;
1082
+ width: 90%;
1083
+ }
1084
+ }
1085
+
1086
+ @media (max-width: 768px) {
1087
+
1088
+ }
1089
+
1090
+ @media (max-width: 480px) {
1091
+ .scrivito-content-browser {
1092
+ height: 95%;
1093
+ width: 95%;
1094
+ }
1095
+ }