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