PluginProbe ʕ •ᴥ•ʔ
Folders – Unlimited Folders to Organize Media Library Folder, Pages, Posts, File Manager / 2.3.1
Folders – Unlimited Folders to Organize Media Library Folder, Pages, Posts, File Manager v2.3.1
3.1.9 3.1.8 3.1.7 2.9.3 2.9.4 2.9.5 2.9.6 2.9.7 2.9.8 3.0 3.0.1 3.0.2 3.0.3 3.0.4 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 trunk 1.3.7 2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 2.1.1 2.1.2 2.1.3 2.1.4 2.1.5 2.1.6 2.1.7 2.1.8 2.1.9 2.2 2.2.1 2.2.2 2.2.3 2.2.4 2.2.5 2.2.6 2.2.7 2.2.8 2.2.9 2.3 2.3.1 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 2.3.7 2.3.8 2.3.9 2.4 2.4.1 2.4.2 2.4.3 2.4.4 2.4.5 2.4.6 2.4.7 2.4.8 2.4.9 2.5 2.5.1 2.5.2 2.5.3 2.5.4 2.5.5 2.5.6 2.5.7 2.5.8 2.5.9 2.6 2.6.1 2.6.2 2.6.3 2.6.4 2.6.5 2.6.6 2.6.7 2.6.8 2.6.9 2.7 2.7.1 2.7.2 2.7.3 2.7.4 2.7.5 2.8 2.8.1 2.8.2 2.8.3 2.8.4 2.8.5 2.8.6 2.8.7 2.8.8 2.8.9 2.9 2.9.1 2.9.2
folders / assets / css / design.css
folders / assets / css Last commit date
admin-setting.css 6 years ago design.css 6 years ago folder-icon.css 7 years ago media.css 6 years ago
design.css
1297 lines
1 .wcp-custom-menu {
2 padding-left: 0px;
3
4 }
5
6 .wcp-custom-menu {
7 position: relative;
8 }
9
10 .wcp-container ul {
11 list-style: none;
12 }
13
14 .wcp-container .route {
15 position: relative;
16 list-style-type: none;
17 border: 0;
18 margin: 0;
19 padding: 0;
20 top: 0px;
21 margin-top: 0px;
22 max-height: 100% !important;
23 width: 100%;
24 border-radius: 2px;
25 z-index: -1;
26 background: transparent;
27 }
28
29 .wcp-container .route span {
30 position: absolute;
31 top: 2px;
32 left: 0;
33 z-index: 10;
34 width: 20px;
35 height: 18px;
36 text-indent: 0;
37 font-size: 20px;
38 background: no-repeat;
39 }
40
41 .wcp-container .route .title {
42 position: absolute;
43 border: 0;
44 margin: 0;
45 padding: 0;
46 padding-top: 0px;
47 height: 30px;
48 width: 200px;
49 text-indent: 30px;
50 background: transparent;
51 border-radius: 0px;
52 box-shadow: none;
53 font-size: 14px;
54 line-height: 26px;
55 border-radius: 4px;
56 -webkit-border-radius: 4px;
57 -moz-border-radius: 4px;
58 overflow: hidden;
59 }
60
61 .wcp-container .first-title {
62 margin-left: 10px;
63 }
64
65 .wcp-container .space {
66 position: relative;
67 list-style-type: none;
68 border: 0;
69 margin: 0 0 0 20px;
70 padding: 0 0 30px 0;
71 width: 40px;
72 top: 30px;
73 height: 100%;
74 z-index: 1;
75 }
76
77 .wcp-container .first-space {
78 margin-left: 10px;
79 }
80
81 i.fa-caret-right {
82 transition: 0.1s;
83 -webkit-transition: 0.1s;
84 -moz-transition: 0.1s;
85 }
86
87 li.active > span > i.fa-caret-right {
88 transform: rotate(90deg);
89 -webkit-transform: rotate(90deg);
90 -moz-transform: rotate(90deg);
91 }
92
93 li.active > span > i.fa-folder:before {
94 content: "\f07c";
95 }
96
97 .has-sub-tree > ul.ui-sortable li {
98 display: none;
99 }
100
101 .has-sub-tree.active > ul.ui-sortable > li {
102 display: block;
103 }
104
105 .nav-icon {
106 display: none;
107 left: -20px !important;
108 }
109
110 .has-sub-tree > .nav-icon {
111 display: block;
112 }
113
114 .wcp-content {
115 position: fixed !important;
116 top: 32px;
117 left: 160px;
118 bottom: 0;
119 width: 305px;
120 box-sizing: border-box;
121 z-index: 1;
122 direction: ltr;
123 transition: all 0.15s linear;
124 -webkit-transition: all 0.15s linear;
125 -moz-transition: all 0.15s linear;
126 }
127 html[dir="rtl"] .wcp-content {
128 left: auto;
129 right: 160px;
130 }
131 body.folded .wcp-content {
132 left: 36px;
133 }
134 html[dir="rtl"] body.folded .wcp-content {
135 left: auto;
136 right: 36px;
137 }
138 body.wp-admin #wpcontent {
139 padding-left: 310px;
140 transition: all 0.15s linear;
141 -webkit-transition: all 0.15s linear;
142 -moz-transition: all 0.15s linear;
143 }
144 html[dir="rtl"] body.wp-admin #wpcontent {
145 padding-left: 0px;
146 padding-right: 320px;
147 }
148 .wcp-container {
149 padding: 20px 20px 20px 16px;
150 }
151 .form-title {
152 font-size: 23px;
153 font-weight: 400;
154 margin: 0;
155 padding: 0 0 10px 0;
156 line-height: 29px;
157 min-height: 36px;
158 }
159 .form-operations {
160 border: solid 1px #e5e5e5;
161 border-right: none;
162 margin-bottom: 20px;
163 }
164 .form-operations ul {
165 margin: 0;
166 padding: 0 ;
167 }
168 .form-operations li {
169 display: block;
170 float: left;
171 width: 20%;
172 text-align: center;
173 background: #fff;
174 margin: 0;
175 padding: 0;
176 }
177 .form-operations li a {
178 display: block;
179 padding: 10px 0;
180 border-right: solid 1px #e5e5e5;
181 font-size: 16px;
182 color: #727272;
183 }
184 .clearfix {
185 clear: both;
186 }
187 .wcp-parent-data {
188 position: relative;
189 }
190 .wcp-parent {
191 position: absolute;
192 left: -21px;
193 font-weight: bold;
194 font-size: 14px;
195 }
196 .wcp-parent .fa {
197 font-size: 18px;
198 margin-right: 8px;
199 }
200 .wcp-form-data {
201 background: #fff;
202 border: solid 1px #f1f1f1;
203 padding: 15px;
204 display: none;
205 margin-bottom: 20px;
206 }
207 .wcp-form-title {
208 color: #727272;
209 font-size: 14px;
210 text-transform: uppercase;
211 padding: 0 0 10px 0;
212 }
213 .wcp-form-data .form-field {
214 padding: 0 0 10px 0;
215 }
216
217 .wcp-form-data .form-field input, .wcp-form-data .form-field select {
218 width: 100%;
219 }
220 button#wcp-save-folder {
221 float: right;
222 }
223 .wcp-form-message span {
224 display: block;
225 padding: 5px 10px;
226 background: #ffabab;
227 margin-bottom: 10px;
228 color: #000;
229 border: solid 1px #8c0000;
230 border-radius: 4px;
231 }
232 .wcp-container .route.active-item > h3.title {
233 background: #008ec2;
234 color: #fff;
235 border-radius: 4px;
236 }
237 .wcp-container .route span.ui-icon {
238 line-height: 24px;
239 font-size: 18px;
240 cursor: move;
241 left: 5px;
242 top: 2px;
243 height: 26px;
244 }
245 .route.active-item > span.ui-icon {
246 background: #008ec2;
247 color: #fff;
248 }
249 #custom-menu.active > ul > li.route {
250 display: block;
251 }
252 .wcp-parent.active > i.fa-caret-right {
253 transform: rotate(90deg);
254 -webkit-transform: rotate(90deg);
255 -moz-transform: rotate(90deg);
256 }
257 .wcp-parent.active > i.fa-folder:before {
258 content: "\f07c";
259 }
260 .wcp-container .route .title img {
261 display: none;
262 width: 14px;
263 height: 14px;
264 margin: 5px auto 0;
265 }
266 .wcp-container .route .title:hover {
267 background: #dfdfdf;
268 cursor: pointer;
269 }
270 .wcp-container .route .title:hover img {
271 display: block;
272 }
273 .wcp-container .route .title:hover .ui-icon i {
274 display: none;
275 }
276 body.no-hover-css .wcp-container .route .title:hover {
277 background: transparent;
278 }
279 .add-new-folder {
280 text-decoration: none;
281 display: block;
282 float: right;
283 font-size: 14px;
284 padding: 4px 10px;
285 background: #F51366;
286 color: #fff;
287 border: solid 1px #F51366;
288 border-radius: 3px;
289 line-height: 24px;
290 -webkit-box-shadow: 0 3px 5px -3px #333333;
291 -moz-box-shadow: 0 3px 5px -3px #333333;
292 box-shadow: 0 3px 5px -3px #333333;
293 }
294 .add-new-folder:hover, .add-new-folder:focus {
295 background: #bc0f50;
296 color: #ffffff;
297 border: solid 1px #bc0f50
298 }
299 .add-new-folder span {
300 display: block;
301 float: left;
302 line-height: 20px;
303 font-size: 14px;
304 margin-right: 5px;
305 }
306 .add-new-folder span.folder-icon-create_new_folder {
307 font-size: 20px;
308 }
309 .form-options {
310 background: #fff;
311 padding: 10px 10px 0 10px;
312 margin: 10px 0 0px;
313 }
314 .form-options ul {
315 margin: 0;
316 padding: 0;
317 }
318 .form-options li {
319 display: inline-block;
320 margin: 0 5px 0 0;
321 vertical-align: top;
322 }
323 .form-options li.last {
324 margin: 0;
325 }
326 .form-options li a {
327 display: inline-block;
328 text-decoration: none;
329 padding: 5px 12px;
330 color: #000;
331 background: #ccc;
332 box-shadow: 0 1px 0 #ccc;
333 vertical-align: middle;
334 border: solid 1px #ccc;
335 border-radius: 3px;
336 margin: 0 0 10px 0;
337 }
338 .form-options li.last a {
339 padding: 3px;
340 }
341 .form-options li.last a span.icon{
342 font-size: 28px;
343 line-height: 22px;
344 }
345 a#expand-collapse-list.all-open span:before {
346 content: "\e911";
347 }
348 .form-options li a:hover {
349 background: #404040;
350 color: #ffffff;
351 border: solid 1px #404040;
352 }
353 .form-options span.icon {
354 font-size: 18px;
355 display: inline-block;
356 vertical-align: top;
357 }
358 .un-categorised-items {
359 border-radius: 3px;
360 }
361 .header-posts a, .un-categorised-items a {
362 color: #444444;
363 padding: 7px;
364 border-radius: 3px;
365 display: block;
366 text-decoration: none;
367 font-size: 14px;
368 line-height: 18px;
369 }
370 .header-posts a:hover, .un-categorised-items:hover, .un-categorised-items.active-item {
371 background: #dfdfdf;
372 border-radius: 3px;
373 }
374 .header-posts a.active-item, .un-categorised-items.active-item {
375 background: #008ec2 !important;
376 color: #fff !important;
377 }
378 .un-categorised-items.active-item a {
379 color: #fff !important;
380 }
381 .un-categorised-items.active-item a span, .header-posts a.active-item span.total-count {
382 color: #444444 !important;
383 }
384 span.total-count {
385 float: right;
386 background: #fff;
387 padding: 0 5px;
388 border: solid 1px #cccccc;
389 font-size: 10px;
390 line-height: 16px;
391 border-radius: 2px;
392 }
393 .wcp-icon {
394 display: inline-block;
395 font-size: 16px;
396 vertical-align: top;
397 margin-right: 3px;
398 }
399 #custom-menu .wcp-icon {
400 font-size: 20px;
401 line-height: 24px;
402 }
403 .route.active > .nav-icon > .folder-icon-arrow_right {
404 transform: rotate(90deg);
405 -webkit-transform: rotate(90deg);
406 -moz-transform: rotate(90deg);
407 }
408
409 .route.active > .ui-icon > .folder-icon-folder:before {
410 content: "\e90c";
411 }
412
413 .wcp-container .route span.total-count {
414 position: relative;
415 font-size: 8px;
416 float: right;
417 text-align: center;
418 width: auto;
419 background: #fff;
420 display: block;
421 margin: 6px 3px 3px 3px;
422 color: #23282d !important;
423 line-height: 16px;
424 height: 16px;
425 }
426 .dynamic-menu {
427 position: absolute;
428 left: 50px;
429 background: #fff;
430 width: 140px;
431 padding: 0;
432 z-index: 101;
433 -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
434 -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
435 box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
436 }
437 .dynamic-menu li {
438 position: relative;
439 display: block !important;
440 padding: 2px 0;
441 margin: 0;
442 }
443 .dynamic-menu a {
444 text-decoration: none;
445 color: #848484;
446 position: relative;
447 display: block;
448 padding: 5px 10px;
449 }
450 .wcp-container .route .dynamic-menu ul > li > a > span, .wcp-container .route .dynamic-menu ul > li > a > span span {
451 position: relative;
452 top: auto;
453 display: inline-block;
454 vertical-align: top;
455 margin-right: 5px;
456 }
457 .wcp-container .route .dynamic-menu ul > li > a > span span {
458 top: auto;
459 height: auto;
460 width: auto;
461 margin: 0;
462 left: auto;
463 vertical-align: baseline;
464 display: inline;
465 }
466 .dynamic-menu li.new-folder {
467 border-bottom: solid 1px #d8d8d8;
468 }
469 .dynamic-menu a:hover {
470 background: #efefef;
471 color: #000;
472 }
473 .wcp-form-input {
474 padding-left: 35px;
475 box-sizing: border-box;
476 position: relative;
477 }
478 .wcp-form-input input {
479 width: 100%;
480 }
481 .wcp-form-btn {
482 padding: 4px 0 4px 2px;
483 }
484 .wcp-form-input:before {
485 content: "\e90d";
486 font-family: 'folder-icon' !important;
487 speak: none;
488 position: absolute;
489 left: 0;
490 font-size: 28px;
491 top: 5px;
492 }
493 .add-new-folder-btn {
494 margin-right: 5px !important;
495 }
496 .form-loader {
497 width: 100%;
498 height: 5px;
499 margin: 0 0 20px;
500 }
501 .form-loader-count {
502 width: 0;
503 height: 5px;
504 background: url("../images/form-loader.png");
505 transition: all 2.5s linear;
506 -webkit-transition: all 2s linear;
507 -moz-transition: all 2.5s linear;
508 }
509 .route.is-high > .ui-icon > i:before {
510 content: "\e900" !important
511 }
512 .route.is-high.active > .ui-icon > i:before {
513 content: "\e90c" !important;
514 z-index: 11;
515 color: #444;
516 font-size: 20px;
517 }
518 .route.is-high.active > .ui-icon > i:after {
519 content: "\e907";
520 margin-left: -1.2em;
521 color: #444;
522 font-size: 11px;
523 top: 1px;
524 position: absolute;
525 }
526 .route.is-high.active.active-item > .ui-icon > i:before, .route.is-high.active.active-item > .ui-icon > i:after {
527 color: #ffffff;
528 }
529 li.active-menu {
530 z-index: 2 !important;
531 }
532 th#wcp_move {
533 width: 20px;
534 }
535 .wp-list-table tr td .wcp-move-file {
536 vertical-align: middle;
537 opacity: 0;
538 }
539 .wp-list-table tr:hover td .wcp-move-file, .wp-list-table td.wcp_move.column-wcp_move.wcp-draggable {
540 opacity: 1;
541 }
542 .wcp-drop-hover {
543 background: #0073aa !important;
544 z-index: 2 !important;
545 color: #fff !important;
546 }
547 .wcp-drop-hover span {
548 color: #fff !important;
549 }
550 .ui-draggable-dragging {
551 z-index: 1051 !important;
552 }
553
554 .wcp-hover-list {
555 background: #008ec2 !important;
556 color: #fff;
557 position: relative;
558 }
559 .wcp-hover-list a {
560 color: #fff;
561 }
562 .wcp-hover-list span.total-count {
563 color: #000;
564 }
565 span.wcp-item {
566 display: none;
567 }
568 .wcp-move-file {
569 cursor: move;
570 }
571 .wcp-drop-hover-list a.folder-view {
572 background: #008ec2;
573 color: #fff;
574 border: solid 1px #fff;
575 position: relative;
576 }
577 .tree-structure .folder-view {
578 display: block;
579 border: 1px solid #dadce0;
580 color: #404040;
581 border-radius: 4px;
582 -moz-border-radius: 4px;
583 -webkit-border-radius: 4px;
584 position: relative;
585 cursor: pointer;
586 background: #fff;
587 }
588 .tree-structure .folder-view:hover {
589 background: #008ec2;
590 color: #ffffff;
591
592 }
593 .wcp-drop-hover-list a.folder-view:before {
594 width: 100%;
595 height: 100%;
596 content: "";
597 position: absolute;
598 top: -2px;
599 left: -2px;
600 border: solid 1px #008ec2;
601 padding: 1px;
602 border-radius: 4px;
603 -moz-border-radius: 4px;
604 -webkit-border-radius: 4px;
605 }
606 .ui-draggable-dragging.wcp-move-file {
607 z-index: 5001;
608 display: inline-block;
609 border: solid 2px #0073aa;
610 padding: 5px 10px;
611 border-radius: 5px;
612 background: #e4f6ff;
613 z-index: 2001;
614 position: fixed !important;
615 max-width: 230px;
616 overflow: hidden;
617 width: auto !important;
618 }
619 .ui-draggable-dragging.wcp-move-file span {
620 display: block;
621 float: left;
622 }
623 .ui-draggable-dragging.wcp-move-file span.wcp-move {
624 margin-right: 5px;
625 display: block;
626 float: left;
627 }
628 .wcp-container .route span.title-text {
629 position: relative;
630 top: auto;
631 left: auto;
632 width: auto;
633 display: inline-block;
634 font-size: 16px;
635 line-height: 30px;
636 height: 30px;
637 }
638 .ui-resizable-handle.ui-resizable-e {
639 position: absolute;
640 top: 0;
641 height: 100%;
642 height: 100vh;
643 width: 1px;
644 right: 0;
645 border-right: 1px solid #ccc;
646 cursor: col-resize;
647 }
648 .ui-resizable-handle.ui-resizable-e:before, .ui-resizable-handle.ui-resizable-w:before {
649 content: "";
650 top: 68px;
651 width: 3px;
652 height: 53px;
653 position: absolute;
654 border-left: solid 1px #ccc;
655 border-right: solid 1px #ccc;
656 left: -1px;
657 }
658 .ui-resizable-handle.ui-resizable-w {
659 position: absolute;
660 top: 0;
661 height: 100%;
662 height: 100vh;
663 width: 1px;
664 left: 0;
665 border-right: 1px solid #ccc;
666 cursor: col-resize;
667 }
668
669 div#custom-menu {
670 padding-bottom: 120px;
671 }
672 .wcp-container .route span.star-icon {
673 position: relative;
674 top: 2px;
675 left: auto;
676 float: right;
677 font-family: 'folder-icon' !important;
678 speak: none;
679 color: #ffc90e;
680 display: none;
681 }
682 .wcp-container .route span.update-inline-record {
683 position: relative;
684 left: auto;
685 top: 2px;
686 float: right;
687 width: 0px;
688 height: 22px;
689 font-family: 'folder-icon' !important;
690 font-size: 16px;
691 overflow: hidden;
692 transition: all 0.25s linear;
693 -webkit-transition: all 0.25s linear;
694 -moz-transition: all 0.25s linear;
695 }
696 .wcp-container .route h3:hover > span.update-inline-record {
697 width: 18px;
698 }
699 .wcp-container .route span.update-inline-record:after {
700 content: "\e910";
701 }
702 .wcp-container .route.is-high > h3 > span.star-icon {
703 display: block;
704 }
705 .wcp-container .route span.star-icon:after {
706 content: "\e907";
707 }
708
709 .tree-structure li {
710 display: block;
711 width: 16.667%;
712 float: left;
713 margin: 0;
714 padding: 0;
715 }
716 .tree-structure .folder-item {
717 padding: 8px;
718 position: relative;
719 }
720 .tree-structure .folder-view {
721 display: block;
722 border: 1px solid #dadce0;
723 color: #404040;
724 border-radius: 4px;
725 -moz-border-radius: 4px;
726 -webkit-border-radius: 4px;
727 position: relative;
728 cursor: pointer;
729 background: #fff;
730 }
731 .tree-structure .folder-view span.item-name {
732 display: block;
733 padding: 10px 25px 10px 50px;
734 position: relative;
735 width: 100%;
736 overflow: hidden;
737 height: 38px;
738 font-size: 16px;
739 box-sizing: border-box;
740 }
741 .folder-view span.item-name:before {
742 content: "\e90d";
743 font-family: 'folder-icon' !important;
744 position: absolute;
745 left: 15px;
746 font-size: 24px;
747 }
748 .folder-view.is-high span.item-name:before {
749 content: "\e900";
750 }
751 .folder-view.is-post span.item-name:before {
752 content: "\e901";
753 }
754 .tree-structure span.folder-option {
755 position: absolute;
756 right: 0;
757 font-family: 'folder-icon' !important;
758 top: 0px;
759 font-size: 20px;
760 line-height: 38px;
761 z-index: 1;
762 cursor: pointer;
763 display: none;
764 }
765 .tree-structure .folder-view:hover span.folder-option {
766 display: block;
767 }
768 .tree-structure span.folder-option:hover {
769 color: #F51366;
770 }
771 .tree-structure span.folder-option:after {
772 content: "\e90a";
773 }
774 .tree-structure li {
775 position: relative;
776 }
777 .tree-structure {
778 margin-left: -8px;
779 margin-right: -8px;
780 }
781 .tree-structure .folder-view span.folder-title {
782 overflow: hidden;
783 width: 100%;
784 height: 18px;
785 display: block;
786 }
787 .swal2-popup .swal2-title {
788 line-height: 36px;
789 }
790 .attachments-browser.ui-draggable-dragging .media-sidebar, .attachments-browser.ui-draggable-dragging .uploader-inline, .attachments-browser.ui-draggable-dragging .media-toolbar, .attachments-browser.ui-draggable-dragging ul.attachments {
791 display: none;
792 }
793 .attachments.ui-sortable.ui-draggable-dragging {
794 z-index: 5000;;
795 }
796 .selected-items {
797 background: #0073aa;
798 color: #ffffff;
799 padding: 10px 20px;
800 border-radius: 5px;
801 -moz-border-radius: 5px;
802 -webkit-border-radius: 5px;
803 margin-top: 0px;
804 cursor: none;
805 font-size: 12px;
806 }
807 .media-frame, .media-frame-content, .media-frame .attachments-browser {
808 overflow: inherit;
809 }
810 body.upload-php.eml-grid #wpbody {
811 position: relative !important;
812 top: 0px !important;
813 bottom: auto !important;
814 left: auto !important;
815 right: auto !important;;
816 height: auto;
817 }
818 span.upgrade-message {
819 padding: 0px 0 10px;
820 background: #fff;
821 display: inline-block;
822 font-size: 14px;
823 color: #000;
824 }
825 span.upgrade-message a.pink, span.upgrade-message span.pink {
826 color: #FF5983;
827 text-decoration: none;
828 font-weight: bold;
829 }
830
831 .media-toolbar.sticky-media {
832 position: fixed;
833 top: 32px;
834 right: 18px !important;
835 left: auto;
836 }
837
838 .media-position {
839 width: 1px;
840 height: 1px;
841 }
842 .media-frame.mode-grid .media-toolbar {
843 margin: 0 !important;
844 }
845 .button-disabled {
846 cursor: no-drop;
847 pointer-events: none;
848 }
849 .wcp-hide-show-buttons {
850 position: absolute;
851 top: 25px;
852 right: -20px;
853 }
854 .wcp-hide-show-buttons .toggle-buttons {
855 background: #f51366;
856 color: #fff;
857 display: inline-block;
858 margin: 0;
859 padding: 0;
860 float: left;
861 -webkit-border-top-right-radius: 50%;
862 -webkit-border-bottom-right-radius: 50%;
863 -moz-border-radius-topright: 50%;
864 -moz-border-radius-bottomright: 50%;
865 border-top-right-radius: 50%;
866 border-bottom-right-radius: 50%;
867 display: none;
868 width: 20px;
869 height: 20px;
870 cursor: pointer;
871 }
872 .wcp-hide-show-buttons .toggle-buttons:hover {
873 background: #bc0f50;
874 }
875 .hide-folders-area .wcp-content {
876 width: 0px !important;
877 }
878 .hide-folders-area .wcp-container {
879 display: none;
880 }
881
882 .wcp-hide-show-buttons .toggle-buttons.active {
883 display: block;
884 }
885 #wcp-content.no-transition .wcp-container {
886 display: none;
887 }
888 button.button.organize-button {
889 vertical-align: middle;
890 text-decoration: none;
891 display: inline-block;
892 font-size: 14px;
893 padding: 4px 10px;
894 background: #F51366;
895 color: #fff;
896 border: solid 1px #F51366;
897 border-radius: 3px;
898 line-height: 14px;
899 -webkit-box-shadow: 0 3px 5px -3px #333333;
900 -moz-box-shadow: 0 3px 5px -3px #333333;
901 box-shadow: 0 3px 5px -3px #333333;
902 }
903 button.button.organize-button:hover, button.button.organize-button:focus {
904 background: #bc0f50;
905 color: #ffffff;
906 border: solid 1px #bc0f50;
907 }
908 .tree-structure-content ul {
909 margin: 0;
910 padding: 0;
911 }
912 .tree-structure-content {
913 padding: 10px 20px 10px;
914 background: #fff;
915 margin: 10px 0 15px;
916 border-radius: 4px;
917 -moz-border-radius: 4px;
918 -webkit-border-radius: 4px;
919 border: solid 1px #cccccc;
920 }
921 .tree-structure-content .tree-structure {
922 height: 55px;
923 overflow: hidden;
924 transition: 0.1s;
925 -webkit-transition: 0.1s;
926 -moz-transition: 0.1s;
927 }
928 .tree-structure-content.active .tree-structure {
929 height: auto;
930 }
931 .folders-toggle-button {
932 height: 15px;
933 text-align: center;
934 position: relative;
935 }
936 .folders-toggle-button span {
937 background: #F51366;
938 color: #fff;
939 height: 20px;
940 width: 30px;
941 text-align: center;
942 display: block;
943 margin: 0 auto;
944 position: absolute;
945 left: 0;
946 right: 0;
947 bottom: -10px;
948 cursor: pointer;
949 font-family: dashicons;
950 font-size: 20px;
951 line-height: 20px;
952 }
953 .folders-toggle-button span:after {
954 content: "\f347";
955 }
956 .tree-structure-content.active .folders-toggle-button span:after {
957 content: "\f343";
958 }
959 span.media-info-message {
960 vertical-align: middle;
961 line-height: 50px;
962 font-weight: bold;
963 color: #f51366;
964 padding: 0 0 0 20px;
965 display: none !important;;
966 }
967 span.media-info-message.active {
968 display: inline-block !important;
969 }
970
971 /* custom popup css */
972 .folder-popup-form {
973 position: fixed;
974 width: 100%;
975 height: 100%;
976 background: rgba(0,0,0,0.5);
977 top: 0;
978 left: 0;
979 z-index: 10001;
980 display: none;
981 }
982 .folder-popup-form.disabled {
983 pointer-events: none;
984 }
985 .popup-form-content {
986 background: #ffffff;
987 min-height: 100px;
988 width: 400px;
989 text-align: center;
990 margin: 0 auto;
991 position: absolute;
992 left: 0;
993 right: 0;
994 top: 50%;
995 transform: translate(0, -50%);
996 -webkit-transform: translate(0, -50%);
997 -moz-transform: translate(0, -50%);
998 -o-transform: translate(0, -50%);
999 -ms-transform: translate(0, -50%);
1000 padding: 20px;
1001 -webkit-border-radius: 10px;
1002 -moz-border-radius: 10px;
1003 border-radius: 10px;
1004 }
1005 .folder-form-buttons a {
1006 display: inline-block;
1007 padding: 10px 20px;
1008 text-decoration: none;
1009 margin: 10px 3px;
1010 font-size: 18px;
1011 line-height: 22px;
1012 border-radius: .25em;
1013 color: #ffffff;
1014 }
1015 .folder-form-buttons a span {
1016 -webkit-animation: fa-spin 0.75s infinite linear;
1017 animation: fa-spin 0.75s infinite linear;
1018 }
1019 @-webkit-keyframes fa-spin {
1020 0% {
1021 -webkit-transform: rotate(0deg);
1022 transform: rotate(0deg);
1023 }
1024 100% {
1025 -webkit-transform: rotate(359deg);
1026 transform: rotate(359deg);
1027 }
1028 }
1029 .folder-form-buttons a:hover, .folder-form-buttons a:focus {
1030 color: #ffffff;
1031 background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1));
1032 }
1033 .folder-form-buttons a:focus {
1034 outline: 0;
1035 box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(50,100,150,.4);
1036 }
1037 .form-cancel-btn {
1038 background-color: #aaaaaa;
1039 }
1040 .form-submit-btn {
1041 background-color: #3085d6;
1042 }
1043 .add-update-folder-title {
1044 display: block;
1045 position: relative;
1046 max-width: 100%;
1047 margin: 0 0 .4em;
1048 padding: 0;
1049 color: #595959;
1050 font-size: 1.875em;
1051 font-weight: 600;
1052 text-align: center;
1053 text-transform: none;
1054 word-wrap: break-word;
1055 line-height: 30px;
1056 }
1057 .folder-form-input input {
1058 width: 100%;
1059 transition: border-color .3s,box-shadow .3s;
1060 border: 1px solid #d9d9d9;
1061 border-radius: .1875em;
1062 font-size: 1.125em;
1063 box-shadow: inset 0 1px 1px rgba(0,0,0,.06);
1064 box-sizing: border-box;
1065 height: 2.625em;
1066 padding: 0 .75em;
1067 margin: 1em auto;
1068 }
1069 .folder-form-message {
1070 font-size: 16px;
1071 line-height: 20px;
1072 margin: 25px 0;
1073 }
1074 .folder-form-errors {
1075 margin: 0 0 10px 0;
1076 padding: 8px 0;
1077 background: #ffe4e4;
1078 color: #a20000;
1079 display: none;
1080 }
1081 .folder-form-errors.active {
1082 display: block;
1083 }
1084
1085 .sticky-menu #adminmenuwrap {
1086 position: relative !important;
1087 }
1088 span.folder-loader-ajax {
1089 float: right;
1090 margin: 0px 8px 0 0;
1091 line-height: 30px;
1092 display:none;
1093 }
1094 .folder-loader-ajax.active {
1095 display: inline-block;
1096 }
1097 @-webkit-keyframes scaleAnimation {
1098 0% {
1099 opacity: 0;
1100 -webkit-transform: scale(1.5);
1101 transform: scale(1.5);
1102 }
1103 100% {
1104 opacity: 1;
1105 -webkit-transform: scale(1);
1106 transform: scale(1);
1107 }
1108 }
1109
1110 @keyframes scaleAnimation {
1111 0% {
1112 opacity: 0;
1113 -webkit-transform: scale(1.5);
1114 transform: scale(1.5);
1115 }
1116 100% {
1117 opacity: 1;
1118 -webkit-transform: scale(1);
1119 transform: scale(1);
1120 }
1121 }
1122 @-webkit-keyframes drawCircle {
1123 0% {
1124 stroke-dashoffset: 151px;
1125 }
1126 100% {
1127 stroke-dashoffset: 0;
1128 }
1129 }
1130 @keyframes drawCircle {
1131 0% {
1132 stroke-dashoffset: 151px;
1133 }
1134 100% {
1135 stroke-dashoffset: 0;
1136 }
1137 }
1138 @-webkit-keyframes drawCheck {
1139 0% {
1140 stroke-dashoffset: 36px;
1141 }
1142 100% {
1143 stroke-dashoffset: 0;
1144 }
1145 }
1146 @keyframes drawCheck {
1147 0% {
1148 stroke-dashoffset: 36px;
1149 }
1150 100% {
1151 stroke-dashoffset: 0;
1152 }
1153 }
1154 @-webkit-keyframes fadeOut {
1155 0% {
1156 opacity: 1;
1157 }
1158 100% {
1159 opacity: 0;
1160 }
1161 }
1162 @keyframes fadeOut {
1163 0% {
1164 opacity: 1;
1165 }
1166 100% {
1167 opacity: 0;
1168 }
1169 }
1170 @-webkit-keyframes fadeIn {
1171 0% {
1172 opacity: 0;
1173 }
1174 100% {
1175 opacity: 1;
1176 }
1177 }
1178 @keyframes fadeIn {
1179 0% {
1180 opacity: 0;
1181 }
1182 100% {
1183 opacity: 1;
1184 }
1185 }
1186 #successAnimationCircle {
1187 stroke-dasharray: 151px 151px;
1188 stroke: #2CE0A7;
1189 }
1190
1191 #successAnimationCheck {
1192 stroke-dasharray: 36px 36px;
1193 stroke: #2CE0A7;
1194 }
1195
1196 #successAnimationResult {
1197 fill: #2CE0A7;
1198 opacity: 0;
1199 }
1200 svg#successAnimation {
1201 width: 34px;
1202 height: 34px;
1203 padding: 0 0 0px 0;
1204 display: none;
1205 float: left;
1206 }
1207 #successAnimation.active {
1208 display: inline-block;
1209 }
1210 .folder-loader-ajax img {
1211 display: none;
1212 }
1213 .folder-loader-ajax img.active {
1214 display: inline-block;
1215 }
1216
1217 #successAnimation.animated {
1218 -webkit-animation: 1s ease-out 0s 1 both scaleAnimation;
1219 animation: 1s ease-out 0s 1 both scaleAnimation;
1220 }
1221 #successAnimation.animated #successAnimationCircle {
1222 -webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
1223 animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
1224 }
1225 #successAnimation.animated #successAnimationCheck {
1226 -webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
1227 animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
1228 }
1229 #successAnimation.animated #successAnimationResult {
1230 -webkit-animation: 0.3s linear 0.9s both fadeIn;
1231 animation: 0.3s linear 0.9s both fadeIn;
1232 }
1233
1234 @media screen and (max-width: 1300px) {
1235 .tree-structure li {
1236 width: 20%;
1237 }
1238 }
1239 @media screen and (max-width: 960px) {
1240 .wcp-content {
1241 left: 36px;
1242 }
1243 html[dir="rtl"] .wcp-content {
1244 right: 36px;
1245 left: auto;
1246 }
1247 .tree-structure li {
1248 width: 25%;
1249 }
1250 }
1251
1252 @media screen and (max-width: 780px) {
1253 .wcp-content {
1254 left: 0px;
1255 }
1256 html[dir="rtl"] .wcp-content {
1257 right: 0px;
1258 }
1259 .tree-structure li {
1260 width: 33.33%;
1261 }
1262 }
1263
1264
1265 @media screen and (max-width: 640px) {
1266 .wcp-content {
1267 left: 0px;
1268 position: relative !important;
1269 width: 100% !important;
1270 padding-bottom: 100px;
1271 top: 0;
1272 right: 0;
1273 display: block;
1274 }
1275 .ui-resizable-handle.ui-resizable-e {
1276 display: none !important;
1277 }
1278 .hide-folders-area .wcp-container {
1279 display: block;
1280 }
1281 .wcp-hide-show-buttons {
1282 display: none;
1283 }
1284 .hide-folders-area .wcp-content {
1285 width: 100% !important;
1286 }
1287 body.wp-admin #wpcontent {
1288 padding: 0 !important;
1289 }
1290 #wpbody-content {
1291 padding-bottom: 30px;
1292 }
1293 .tree-structure li {
1294 width: 50%;
1295 }
1296 }
1297