PluginProbe ʕ •ᴥ•ʔ
Custom Sidebars – Dynamic Sidebar Classic Widget Area Manager / 3.1.3
Custom Sidebars – Dynamic Sidebar Classic Widget Area Manager v3.1.3
trunk 2.1.2.0 3.0.0.0 3.0.0.1 3.0.1 3.0.2 3.0.3 3.0.4 3.0.5 3.0.6 3.0.7 3.0.7.1 3.0.8 3.0.8.1 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 3.2.0 3.2.1 3.2.2 3.2.3 3.2.4 3.3 3.31 3.32 3.35 3.36 3.37 3.38
custom-sidebars / assets / css / cs.css
custom-sidebars / assets / css Last commit date
cs-cloning.css 8 years ago cs-cloning.min.css 8 years ago cs-scan.css 8 years ago cs-scan.min.css 8 years ago cs-visibility.css 8 years ago cs-visibility.min.css 8 years ago cs.css 8 years ago cs.min.css 8 years ago
cs.css
869 lines
1 /**
2 * =============================================================================
3 * == FREE VERSION ONLY
4 * =============================================================================
5 */
6 .module-export .pro-layer {
7 position: absolute;
8 left: 0;
9 top: 0;
10 right: 0;
11 bottom: 0;
12 z-index: 99999;
13 background: rgba(255, 255, 255, 0.8);
14 text-align: center;
15 font-size: 26px;
16 font-weight: 100;
17 padding-top: 120px;
18 line-height: 1.5;
19 }
20 .module-export .pro-layer a {
21 margin-top: 20px;
22 display: inline-block;
23 background: #2EA2CC;
24 color: #FAFAFA;
25 text-decoration: none;
26 padding: 10px 20px;
27 font-size: 18px;
28 font-weight: bold;
29 }
30
31 .module-export .pro-layer a:hover, .module-export .pro-layer a:focus, .module-export .pro-layer a:active {
32 background: #1E8CBE;
33 color: #FFF;
34 }
35
36 .frm-location .pro-layer {
37 padding: 10px;
38 text-align: center;
39 font-size: 26px;
40 font-weight: 100;
41 line-height: 1.5;
42 }
43 .frm-location .pro-layer a {
44 margin-top: 20px;
45 display: inline-block;
46 background: #2EA2CC;
47 color: #FAFAFA;
48 text-decoration: none;
49 padding: 10px 20px;
50 font-size: 18px;
51 font-weight: bold;
52 }
53 .frm-location .pro-layer a:hover, .frm-location .pro-layer a:focus, .frm-location .pro-layer a:active {
54 background: #1E8CBE;
55 color: #FFF;
56 }
57
58 .csb-pro-layer {
59 float: left;
60 position: relative;
61 opacity: .5;
62 margin-right: 10px;
63 }
64 .csb-pro-layer .pro-info {
65 position: absolute;
66 left: 0;
67 top: 0;
68 right: 0;
69 bottom: 0;
70 opacity: 0;
71 background: rgba(96, 96, 96, 0.75);
72 z-index: 99999;
73 text-align: center;
74 text-decoration: none;
75 line-height: 28px;
76 font-size: 16px;
77 font-weight: 100;
78 color: #FFF;
79 text-decoration: underline;
80 padding: 0;
81 margin: 0;
82 overflow: hidden;
83 }
84 .csb-pro-layer:hover {
85 opacity: 1;
86 }
87 .csb-pro-layer:hover .pro-info,
88 .csb-pro-layer:hover .pro-info:hover,
89 .csb-pro-layer:hover .pro-info:active,
90 .csb-pro-layer:hover .pro-info:focus {
91 line-height: 48px;
92 left: -10px;
93 top: -10px;
94 right: -5px;
95 bottom: -10px;
96 opacity: 1;
97 }
98 .csb-pro-layer .button {
99 margin: 0 5px 0 0;
100 float: left;
101 }
102 .csb-pro-layer .button .dashicons {
103 line-height: 26px;
104 height: 26px;
105 float: left;
106 margin-right: 6px;
107 }
108
109 /**
110 * =============================================================================
111 * == PLUGIN STYLES
112 * =============================================================================
113 */
114 #defaultsidebarspage p.submit {
115 padding: 0 0 10px;
116 clear: both;
117 }
118
119 #poststuff.defaultsdetailscontainer h2 {
120 border-bottom: 0;
121 margin-bottom: 5px;
122 }
123
124 #defaultsforposts,
125 #defaultsforpages {
126 padding: 0 10px;
127 background: #fcfcfc;
128 overflow: hidden;
129 }
130
131 .defaultsSelector {
132 margin-bottom: 30px;
133 }
134
135 .cscolright {
136 clear: right;
137 float: right;
138 margin: 0;
139 overflow: hidden;
140 padding: 0;
141 width: 49%;
142 }
143
144 .cscolleft {
145 margin: 0;
146 overflow: hidden;
147 padding: 0;
148 width: 49%;
149 }
150
151 .widgets-php .widget-liquid-left {
152 width: 100%;
153 }
154 .widgets-php .widget-liquid-right {
155 padding: 0 0 75px 0;
156 margin: -10px -214% 0 0;
157 width: 210%;
158 background: #e4e4e4;
159 /* https://app.asana.com/0/11388810124414/15066782299785 */
160 -webkit-user-select: none;
161 -moz-user-select: none;
162 -ms-user-select: none;
163 user-select: none;
164 }
165 @media screen and (max-width: 480px) {
166 .widgets-php .widget-liquid-right {
167 width: 100%;
168 }
169 }
170 .widgets-php .widget-liquid-right #widgets-right {
171 margin: 20px;
172 }
173 .widgets-php .widget-liquid-right .overview {
174 list-style: none;
175 position: absolute;
176 left: 0;
177 top: 0;
178 width: auto;
179 right: 0;
180 padding-left: 20px;
181 border-left: 1px solid #DDD;
182 }
183 .widgets-php #wpcontent {
184 position: relative;
185 }
186 .widgets-php #wpcontent .wrap .cs-wrap {
187 margin-right: 68%;
188 padding-top: 1em;
189 position: relative;
190 }
191 @media screen and (max-width: 480px) {
192 .widgets-php #wpcontent .wrap .cs-wrap {
193 position: static;
194 margin: 0;
195 }
196 }
197 .widgets-php #wpcontent #screen-meta-links {
198 position: relative;
199 z-index: 10;
200 }
201 .widgets-php #wpcontent #screen-meta {
202 position: relative;
203 z-index: 10;
204 }
205 .widgets-php #widgets-left {
206 margin-right: 0 !important;
207 }
208 .widgets-php #footer {
209 background: #fff;
210 margin-right: 0px;
211 padding-right: 20px;
212 }
213 .widgets-php .sidebars-column-1 .custom-sidebars-add-new {
214 background-color: #fff;
215 padding: 15px;
216 }
217 .widgets-php .sidebars-column-1 .custom-sidebars-add-new p {
218 border-radius: 4px;
219 border: 3px dashed #ddd;
220 color: #777;
221 cursor: pointer;
222 font-weight: bold;
223 margin: 0;
224 padding: 90px 10px;
225 text-align: center;
226 }
227 .widgets-php .sidebars-column-1 .inner .custom-sidebars-box {
228 border-radius: 4px;
229 margin: 55px 0 16px 0;
230 }
231 .widgets-php .sidebars-column-1 .inner .custom-sidebars-upfront {
232 background-color: #f9c200;
233 }
234 .widgets-php .sidebars-column-1 .inner .custom-sidebars-upfront .cs-inner {
235 min-height: 145px;
236 margin-right: -16px;
237 background: url(../img/devman.png) no-repeat 100% 50%;
238 padding: 50px 120px 45px 20px;
239 }
240 .widgets-php .sidebars-column-1 .inner .custom-sidebars-upfront .cs-inner p {
241 font-size: 1.4em;
242 color: #000;
243 margin-top: 0;
244 }
245 .widgets-php .sidebars-column-1 .inner .custom-sidebars-upfront .cs-inner p:last-of-type {
246 margin-bottom: 0;
247 }
248 .widgets-php .sidebars-column-1 .inner .custom-sidebars-upfront .cs-inner .button {
249 background-color: #00a7e6;
250 color: #fff;
251 font-weight: bold;
252 height: auto;
253 padding: 15px 16px;
254 text-transform: uppercase;
255 }
256 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup {
257 background-color: #fff;
258 }
259 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner {
260 background: url(../img/hand-with-heart.png) no-repeat 100% 100%;
261 font-size: 1.2em;
262 min-height: 227px;
263 padding-bottom: 10px;
264 }
265 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner h4, .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner p {
266 margin: 0;
267 padding: 0 120px 0 30px;
268 font-size: 1.1em;
269 }
270 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner h4 {
271 color: #222;
272 font-size: 1.2em;
273 padding-top: 50px;
274 }
275 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner p {
276 color: #c1272c;
277 padding-top: 16px;
278 }
279 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form {
280 border-radius: 4px;
281 background-color: #fafafa;
282 display: -ms-flexbox;
283 display: flex;
284 -ms-flex-wrap: nowrap;
285 flex-wrap: nowrap;
286 -ms-flex-pack: justify;
287 justify-content: space-between;
288 margin: 24px 30px 0 30px;
289 padding: 0;
290 }
291 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form input {
292 background-color: transparent;
293 border: 0;
294 font-size: 1em;
295 margin: 0;
296 padding: 10px 15px;
297 text-align: center;
298 }
299 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form input[type=submit] {
300 border-radius: 0 4px 4px 0;
301 background-color: #00a7e6;
302 color: #fff;
303 min-width: 3em;
304 text-transform: uppercase;
305 }
306 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form input[type=text] {
307 color: #aaa;
308 -ms-flex-positive: 1;
309 flex-grow: 1;
310 }
311 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form input[type=text]:active {
312 box-shadow: none;
313 }
314 @media screen and (max-width: 590px) {
315 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form {
316 background-color: transparent;
317 display: block;
318 }
319 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form input[type=text] {
320 background-color: #fafafa;
321 }
322 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form input[type=submit] {
323 border-radius: 4px;
324 display: block;
325 margin: 10px 0 0 auto;
326 width: auto;
327 }
328 }
329
330 #cs-options .cs-action {
331 line-height: 26px;
332 margin-right: 20px;
333 }
334 #cs-options .cs-action.btn-export {
335 white-space: nowrap;
336 }
337 #cs-options .cs-filter {
338 float: right;
339 }
340 @media screen and (max-width: 700px) {
341 #cs-options .cs-filter {
342 float: none;
343 margin-top: 5px;
344 }
345 }
346
347 .sidebar-form {
348 margin: 0 15px;
349 }
350
351 .sidebar-form label {
352 display: block;
353 }
354
355 .sidebar-form .submit {
356 text-align: right;
357 margin: 0;
358 padding: 1em 0;
359 }
360
361 .sidebar-form .description {
362 margin-top: 5px;
363 text-align: right;
364 }
365
366 .sidebar_name, .sidebar_description {
367 width: 100%;
368 }
369
370 div#widgets-right .sidebar-name > h3 {
371 padding: 15px;
372 }
373
374 div#widgets-right .widgets-sortables .sidebar-name > h3 {
375 padding: 15px 7px;
376 }
377
378 .widgets-holder-wrap.closed > div:nth-child(2) {
379 display: none;
380 }
381
382 #defaultsidebarspage .hndle {
383 cursor: pointer;
384 }
385
386 #customsidebarspage #col-right {
387 width: 62%;
388 }
389
390 .widgets_access .widget-liquid-right {
391 position: static;
392 }
393
394 #oldbrowsererror {
395 display: none;
396 }
397
398 #defaultsidebarspage .postbox {
399 position: static;
400 }
401
402 #defaultsidebarspage .inside {
403 position: static;
404 }
405
406 body.appearance_page_customsidebars .wrap h2 {
407 float: none;
408 }
409
410 body.appearance_page_customsidebars #poststuff h2 {
411 margin-top: 0;
412 }
413
414 .widget.ui-draggable-dragging {
415 z-index: 10001 !important;
416 }
417
418 /**
419 * =============================================================================
420 * == POPUP WINDOW: Add/Edit sidebar
421 * =============================================================================
422 */
423 .csb-more-content {
424 display: none;
425 }
426
427 .csb-has-more .csb-more-content {
428 display: block;
429 }
430
431 /**
432 * =============================================================================
433 * == Custom elements on widget screen
434 * =============================================================================
435 */
436 #cs-widgets-extra {
437 display: none;
438 }
439
440 #cs-title-options {
441 zoom: 1;
442 background: #E8E8E8;
443 margin: -20px -20px 0 -20px;
444 padding: 10px 20px 20px;
445 border-bottom: 1px solid #DDD;
446 }
447
448 .cs-title h3 {
449 font-weight: 100;
450 }
451 .cs-title h3 .cs-icon {
452 margin-left: 10px;
453 color: #999;
454 }
455
456 .replaceable {
457 position: relative;
458 }
459 .replaceable .replace-marker {
460 position: absolute;
461 left: 0;
462 top: 0;
463 bottom: 0;
464 width: 5px;
465 margin: 0 5px 0 0;
466 border-left: 2px solid #05c944;
467 z-index: 10;
468 }
469 .replaceable .replace-marker:hover:before {
470 content: attr(data-label);
471 background: #333;
472 color: #EEE;
473 font-size: 13px;
474 white-space: nowrap;
475 padding: 5px;
476 position: absolute;
477 top: 7px;
478 right: 13px;
479 line-height: 20px;
480 }
481 .replaceable .replace-marker:hover:after {
482 content: '';
483 position: absolute;
484 top: 16px;
485 right: 3px;
486 border: 6px solid transparent;
487 border-left-color: #333;
488 }
489
490 /**
491 * =============================================================================
492 * == Message box
493 *
494 * @todo: Check if this is used at all??
495 *
496 * =============================================================================
497 */
498 .cs-message {
499 margin: .5em 0;
500 padding: 10px;
501 position: absolute;
502 left: 0;
503 right: 0;
504 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
505 z-index: 100;
506 }
507
508 .cs-message .close {
509 position: absolute;
510 top: .5em;
511 right: .5em;
512 opacity: .3;
513 color: #000;
514 cursor: pointer;
515 text-decoration: none;
516 font-size: 14px;
517 line-height: 26px;
518 width: 26px;
519 text-align: center;
520 background: rgba(0, 0, 0, 0.1);
521 }
522
523 .cs-message .close:hover,
524 .cs-message .close:focus,
525 .cs-message .close:active {
526 opacity: 1;
527 }
528
529 .cs-update {
530 background: lightYellow;
531 border: 1px solid #E6DB55;
532 }
533
534 .cs-error {
535 background: #FFEBE8;
536 border: 1px solid #C00;
537 }
538
539 /**
540 * =============================================================================
541 * == Toolbar
542 * =============================================================================
543 */
544 .cs-toolbar {
545 color: #333;
546 padding: 0;
547 background: #FCFCFC;
548 border-top: 1px solid #E5E5E5;
549 }
550 .cs-toolbar:after {
551 display: table;
552 content: '';
553 clear: both;
554 }
555
556 .closed .cs-toolbar {
557 display: none;
558 }
559
560 .cs-toolbar .cs-tool {
561 text-decoration: none;
562 line-height: 40px;
563 height: 40px;
564 padding: 0 10px;
565 white-space: nowrap;
566 background: #FFF;
567 position: relative;
568 overflow: hidden;
569 }
570 .cs-toolbar .dashicons {
571 line-height: 40px;
572 }
573 .cs-toolbar .cs-separator {
574 border-left: 1px solid #E5E5E5;
575 width: 1px;
576 padding: 0;
577 margin: 0;
578 height: 40px;
579 overflow: hidden;
580 display: inline-block;
581 color: #ddd;
582 }
583
584 .cs-custom-sidebar .cs-tool,
585 .cs-custom-sidebar .cs-separator {
586 float: right;
587 }
588
589 .cs-theme-sidebar .cs-tool,
590 .cs-theme-sidebar .cs-separator {
591 float: left;
592 }
593
594 .cs-toolbar .delete-sidebar {
595 color: #A00;
596 }
597 .cs-toolbar .delete-sidebar:hover,
598 .cs-toolbar .delete-sidebar:focus,
599 .cs-toolbar .delete-sidebar:active {
600 color: #F00;
601 }
602
603 .cs-toolbar .cs-tool.btn-replaceable {
604 color: #555;
605 }
606 .cs-toolbar .cs-tool.btn-replaceable:hover {
607 color: #333 !important;
608 }
609
610 .replaceable .cs-toolbar .cs-tool.btn-replaceable {
611 background: #edfff3;
612 color: #333;
613 }
614
615 .replace-tip-box {
616 float: left;
617 }
618
619 .replace-tip {
620 width: 200px;
621 }
622
623 /**
624 * =============================================================================
625 * == Button styles
626 * =============================================================================
627 */
628 .csb .button {
629 outline: 0;
630 }
631
632 .csb .button > .dashicons,
633 .csb .button-primary > .dashicons,
634 .csb .button-secondary > .dashicons {
635 opacity: .75;
636 line-height: 26px;
637 margin-right: 5px;
638 transition: opacity .2s;
639 }
640
641 .csb .button:hover > .dashicons,
642 .csb .button-primary:hover > .dashicons,
643 .csb .button-secondary:hover > .dashicons {
644 opacity: 1;
645 }
646
647 /**
648 * =============================================================================
649 * == RTL Styles
650 * =============================================================================
651 */
652 .rtl div.widget-liquid-right {
653 float: left;
654 right: auto;
655 left: 0;
656 }
657 .rtl.widgets-php #wpcontent .wrap .cs-wrap {
658 margin-right: 2px;
659 margin-left: 68%;
660 }
661 .rtl.widgets-php .widget-liquid-right {
662 margin: -10px 0 0 -214%;
663 }
664 .rtl.widgets-php #widgets-left {
665 margin-left: 0 !important;
666 }
667 .rtl.widgets-php.folded #wpcontent,
668 .rtl.widgets-php.folded #wpfooter {
669 margin-left: 325px;
670 margin-right: 52px;
671 }
672 .rtl #cs-title-options h2 {
673 margin-right: 5px;
674 }
675 .rtl #cs-options .cs-filter {
676 float: left;
677 }
678 .rtl #cs-options .cs-action {
679 margin-right: 0;
680 margin-left: 20px;
681 }
682 .rtl .sidebar-form .submit {
683 text-align: left;
684 }
685 .rtl #TB_ajaxWindowTitle {
686 float: right;
687 }
688 .rtl #TB_closeAjaxWindow {
689 float: left;
690 }
691
692 /**
693 * =============================================================================
694 * == Export/Import
695 * =============================================================================
696 */
697 .csb-export-head {
698 min-width: 450px;
699 }
700
701 .csb-export-head th {
702 vertical-align: top;
703 text-align: right;
704 color: #679;
705 width: 150px;
706 }
707
708 .csb-export-head tr:hover {
709 background: #FAFAFA;
710 }
711
712 .csb-export-head ul {
713 margin: 0;
714 }
715
716 .csb-export-head .dashicons.hint {
717 font-size: 12px;
718 line-height: 22px;
719 }
720
721 .csb-form {
722 padding-left: 15px;
723 }
724
725 .csb-form h2,
726 .csb-form h3,
727 .csb-form .form-buttons,
728 #poststuff .csb-form h2,
729 #poststuff .csb-form h3,
730 #poststuff .csb-form .form-buttons {
731 padding-left: 0;
732 margin-left: -15px;
733 }
734
735 .form-buttons {
736 clear: both;
737 }
738
739 .show-infos {
740 position: relative;
741 display: inline-block;
742 margin: 0 5px;
743 }
744
745 h2 .show-infos {
746 top: 4px;
747 }
748
749 .show-infos .export-infos {
750 position: absolute;
751 top: -5px;
752 left: 30px;
753 font-size: 13px;
754 line-height: 1.4em;
755 font-weight: normal;
756 background: #FFF;
757 box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
758 border: 3px solid #FAFAFA;
759 padding: 5px;
760 z-index: 10;
761 }
762
763 .show-infos .export-infos:before,
764 .show-infos .export-infos:after {
765 content: '';
766 position: absolute;
767 left: -17px;
768 top: 5px;
769 border: 7px solid transparent;
770 border-right-color: #FAFAFA;
771 z-index: 1;
772 }
773
774 .show-infos .export-infos:after {
775 left: -18px;
776 top: 5px;
777 border-right-color: rgba(0, 0, 0, 0.15);
778 z-index: 0;
779 }
780
781 .show-infos:hover .export-infos {
782 display: block !important;
783 }
784
785 .export-infos .section {
786 font-weight: bold;
787 margin: 10px 0 5px -2px;
788 color: #666;
789 }
790
791 /**
792 * =============================================================================
793 * == Location popup
794 * =============================================================================
795 */
796 .cs-half {
797 float: left;
798 width: 49%;
799 margin-right: 1%;
800 }
801
802 .cs-replaceable {
803 margin-bottom: 5px;
804 }
805
806 .cs-replaceable > .details {
807 display: none;
808 margin: 5px 0;
809 }
810
811 .cs-replaceable.open > .details {
812 display: block;
813 }
814
815 .popup-content .message.no-sidebars {
816 font-size: 1.4em;
817 }
818
819 @media screen and (max-width: 480px) {
820 .wpmui-popup .buttons {
821 height: 80px;
822 text-align: left;
823 }
824 .wpmui-popup .buttons label {
825 float: none;
826 display: block;
827 margin-bottom: .5em;
828 }
829 .wpmui-popup .buttons .btn-save {
830 float: right;
831 }
832 }
833 /**
834 * =============================================================================
835 * == Post list
836 * =============================================================================
837 */
838 @media screen and (max-width: 782px) {
839 #wpbody-content .wp-list-table.fixed .column-cs_replacement {
840 display: none;
841 }
842 }
843 #wpbody-content .wp-list-table .column-cs_replacement {
844 width: 10%;
845 }
846 #wpbody-content .wp-list-table .column-cs_replacement dt {
847 opacity: .8;
848 color: #666;
849 }
850 #wpbody-content .wp-list-table .column-cs_replacement dd {
851 margin-left: 10px;
852 }
853 #wpbody-content .wp-list-table .inline-edit-row fieldset.cs-quickedit {
854 border-top: 1px solid #eee;
855 margin-top: 10px;
856 padding-top: 10px;
857 }
858 #wpbody-content .wp-list-table .inline-edit-row fieldset.cs-quickedit label span.title {
859 display: block;
860 float: left;
861 min-width: 5em;
862 white-space: nowrap;
863 padding-right: 10px;
864 width: auto;
865 }
866 #wpbody-content .wp-list-table .inline-edit-row-page .inline-edit-col-right {
867 float: right;
868 }
869