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