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