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