PluginProbe ʕ •ᴥ•ʔ
Custom Sidebars – Dynamic Sidebar Classic Widget Area Manager / 3.38
Custom Sidebars – Dynamic Sidebar Classic Widget Area Manager v3.38
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 4 years ago cs.min.css 5 years ago
cs.css
900 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: #e4e4e4;
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.cs-wpfssl {
281 background: #fff;
282 border: 3px solid #42982e;
283 margin-bottom: 25px;
284 }
285
286 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner.cs-wpfssl img {
287 max-width: 90%;
288 margin: 25px 0;
289 }
290
291 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner h4 {
292 color: #222;
293 font-size: 1.2em;
294 line-height: 1.3;
295 margin: 0;
296 }
297 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner p {
298 color: #c1272c;
299 padding-top: 16px;
300 }
301 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form {
302 border-radius: 4px;
303 background-color: #fafafa;
304 display: -ms-flexbox;
305 display: flex;
306 -ms-flex-wrap: nowrap;
307 flex-wrap: nowrap;
308 -ms-flex-pack: justify;
309 justify-content: space-between;
310 margin: 24px 30px 0 30px;
311 padding: 0;
312 }
313 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form input {
314 background-color: transparent;
315 border: 0;
316 font-size: 1em;
317 margin: 0;
318 padding: 10px 15px;
319 text-align: center;
320 }
321 .sticky-logo {
322 text-align: center;
323 padding: 20px 0;
324 }
325 .sticky-logo img {
326 max-height: 100px;
327 }
328 .install-sticky {
329 border-radius: 0 4px 4px 0;
330 background-color: #00a7e6;
331 color: #fff;
332 min-width: 3em;
333 }
334 .textcenter {
335 text-align: center;
336 }
337 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form input[type=text] {
338 color: #aaa;
339 -ms-flex-positive: 1;
340 flex-grow: 1;
341 }
342 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form input[type=text]:active {
343 box-shadow: none;
344 }
345 @media screen and (max-width: 590px) {
346 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form {
347 background-color: transparent;
348 display: block;
349 }
350 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form input[type=text] {
351 background-color: #fafafa;
352 }
353 .widgets-php .sidebars-column-1 .inner .custom-sidebars-checkup .cs-inner form input[type=submit] {
354 border-radius: 4px;
355 display: block;
356 margin: 10px 0 0 auto;
357 width: auto;
358 }
359 }
360
361 #cs-options .cs-action {
362 line-height: 26px;
363 margin-right: 20px;
364 }
365 #cs-options .cs-action.btn-export {
366 white-space: nowrap;
367 }
368 #cs-options .cs-filter {
369 float: right;
370 }
371 @media screen and (max-width: 700px) {
372 #cs-options .cs-filter {
373 float: none;
374 margin-top: 5px;
375 }
376 }
377
378 .sidebar-form {
379 margin: 0 15px;
380 }
381
382 .sidebar-form label {
383 display: block;
384 }
385
386 .sidebar-form .submit {
387 text-align: right;
388 margin: 0;
389 padding: 1em 0;
390 }
391
392 .sidebar-form .description {
393 margin-top: 5px;
394 text-align: right;
395 }
396
397 .sidebar_name, .sidebar_description {
398 width: 100%;
399 }
400
401 div#widgets-right .sidebar-name > h3 {
402 padding: 15px;
403 }
404
405 div#widgets-right .widgets-sortables .sidebar-name > h3 {
406 padding: 15px 7px;
407 }
408
409 .widgets-holder-wrap.closed > div:nth-child(2) {
410 display: none;
411 }
412
413 #defaultsidebarspage .hndle {
414 cursor: pointer;
415 }
416
417 #customsidebarspage #col-right {
418 width: 62%;
419 }
420
421 .widgets_access .widget-liquid-right {
422 position: static;
423 }
424
425 #oldbrowsererror {
426 display: none;
427 }
428
429 #defaultsidebarspage .postbox {
430 position: static;
431 }
432
433 #defaultsidebarspage .inside {
434 position: static;
435 }
436
437 body.appearance_page_customsidebars .wrap h2 {
438 float: none;
439 }
440
441 body.appearance_page_customsidebars #poststuff h2 {
442 margin-top: 0;
443 }
444
445 .widget.ui-draggable-dragging {
446 z-index: 10001 !important;
447 }
448
449 /**
450 * =============================================================================
451 * == POPUP WINDOW: Add/Edit sidebar
452 * =============================================================================
453 */
454 .csb-more-content {
455 display: none;
456 }
457
458 .csb-has-more .csb-more-content {
459 display: block;
460 }
461
462 /**
463 * =============================================================================
464 * == Custom elements on widget screen
465 * =============================================================================
466 */
467 #cs-widgets-extra {
468 display: none;
469 }
470
471 #cs-title-options {
472 zoom: 1;
473 background: #E8E8E8;
474 margin: -20px -20px 0 -20px;
475 padding: 10px 20px 20px;
476 border-bottom: 1px solid #DDD;
477 }
478
479 .cs-title h3 {
480 font-weight: 100;
481 }
482 .cs-title h3 .cs-icon {
483 margin-left: 10px;
484 color: #999;
485 }
486
487 .replaceable {
488 position: relative;
489 }
490 .replaceable .replace-marker {
491 position: absolute;
492 left: 0;
493 top: 0;
494 bottom: 0;
495 width: 5px;
496 margin: 0 5px 0 0;
497 border-left: 2px solid #05c944;
498 z-index: 10;
499 }
500 .replaceable .replace-marker:hover:before {
501 content: attr(data-label);
502 background: #333;
503 color: #EEE;
504 font-size: 13px;
505 white-space: nowrap;
506 padding: 5px;
507 position: absolute;
508 top: 7px;
509 right: 13px;
510 line-height: 20px;
511 }
512 .replaceable .replace-marker:hover:after {
513 content: '';
514 position: absolute;
515 top: 16px;
516 right: 3px;
517 border: 6px solid transparent;
518 border-left-color: #333;
519 }
520
521 /**
522 * =============================================================================
523 * == Message box
524 *
525 * @todo: Check if this is used at all??
526 *
527 * =============================================================================
528 */
529 .cs-message {
530 margin: .5em 0;
531 padding: 10px;
532 position: absolute;
533 left: 0;
534 right: 0;
535 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
536 z-index: 100;
537 }
538
539 .cs-message .close {
540 position: absolute;
541 top: .5em;
542 right: .5em;
543 opacity: .3;
544 color: #000;
545 cursor: pointer;
546 text-decoration: none;
547 font-size: 14px;
548 line-height: 26px;
549 width: 26px;
550 text-align: center;
551 background: rgba(0, 0, 0, 0.1);
552 }
553
554 .cs-message .close:hover,
555 .cs-message .close:focus,
556 .cs-message .close:active {
557 opacity: 1;
558 }
559
560 .cs-update {
561 background: lightYellow;
562 border: 1px solid #E6DB55;
563 }
564
565 .cs-error {
566 background: #FFEBE8;
567 border: 1px solid #C00;
568 }
569
570 /**
571 * =============================================================================
572 * == Toolbar
573 * =============================================================================
574 */
575 .cs-toolbar {
576 color: #333;
577 padding: 0;
578 background: #FCFCFC;
579 border-top: 1px solid #E5E5E5;
580 }
581 .cs-toolbar:after {
582 display: table;
583 content: '';
584 clear: both;
585 }
586
587 .closed .cs-toolbar {
588 display: none;
589 }
590
591 .cs-toolbar .cs-tool {
592 text-decoration: none;
593 line-height: 40px;
594 height: 40px;
595 padding: 0 10px;
596 white-space: nowrap;
597 background: #FFF;
598 position: relative;
599 overflow: hidden;
600 }
601 .cs-toolbar .dashicons {
602 line-height: 40px;
603 }
604 .cs-toolbar .cs-separator {
605 border-left: 1px solid #E5E5E5;
606 width: 1px;
607 padding: 0;
608 margin: 0;
609 height: 40px;
610 overflow: hidden;
611 display: inline-block;
612 color: #ddd;
613 }
614
615 .cs-custom-sidebar .cs-tool,
616 .cs-custom-sidebar .cs-separator {
617 float: right;
618 }
619
620 .cs-theme-sidebar .cs-tool,
621 .cs-theme-sidebar .cs-separator {
622 float: left;
623 }
624
625 .cs-toolbar .delete-sidebar {
626 color: #a00;
627 }
628 .cs-toolbar .delete-sidebar:hover,
629 .cs-toolbar .delete-sidebar:focus,
630 .cs-toolbar .delete-sidebar:active {
631 color: #F00;
632 }
633
634 .cs-toolbar .cs-tool.btn-replaceable {
635 color: #555;
636 }
637 .cs-toolbar .cs-tool.btn-replaceable:hover {
638 color: #333 !important;
639 }
640
641 .replaceable .cs-toolbar .cs-tool.btn-replaceable {
642 background: #edfff3;
643 color: #333;
644 }
645
646 .replace-tip-box {
647 float: left;
648 }
649
650 .replace-tip {
651 width: 200px;
652 }
653
654 /**
655 * =============================================================================
656 * == Button styles
657 * =============================================================================
658 */
659 .csb .button {
660 outline: 0;
661 }
662
663 .csb .button > .dashicons,
664 .csb .button-primary > .dashicons,
665 .csb .button-secondary > .dashicons {
666 opacity: .75;
667 line-height: 26px;
668 margin-right: 5px;
669 transition: opacity .2s;
670 }
671
672 .csb .button:hover > .dashicons,
673 .csb .button-primary:hover > .dashicons,
674 .csb .button-secondary:hover > .dashicons {
675 opacity: 1;
676 }
677
678 /**
679 * =============================================================================
680 * == RTL Styles
681 * =============================================================================
682 */
683 .rtl div.widget-liquid-right {
684 float: left;
685 right: auto;
686 left: 0;
687 }
688 .rtl.widgets-php #wpcontent .wrap .cs-wrap {
689 margin-right: 2px;
690 margin-left: 68%;
691 }
692 .rtl.widgets-php .widget-liquid-right {
693 margin: -10px 0 0 -214%;
694 }
695 .rtl.widgets-php #widgets-left {
696 margin-left: 0 !important;
697 }
698 .rtl.widgets-php.folded #wpcontent,
699 .rtl.widgets-php.folded #wpfooter {
700 margin-left: 325px;
701 margin-right: 52px;
702 }
703 .rtl #cs-title-options h2 {
704 margin-right: 5px;
705 }
706 .rtl #cs-options .cs-filter {
707 float: left;
708 }
709 .rtl #cs-options .cs-action {
710 margin-right: 0;
711 margin-left: 20px;
712 }
713 .rtl .sidebar-form .submit {
714 text-align: left;
715 }
716 .rtl #TB_ajaxWindowTitle {
717 float: right;
718 }
719 .rtl #TB_closeAjaxWindow {
720 float: left;
721 }
722
723 /**
724 * =============================================================================
725 * == Export/Import
726 * =============================================================================
727 */
728 .csb-export-head {
729 min-width: 450px;
730 }
731
732 .csb-export-head th {
733 vertical-align: top;
734 text-align: right;
735 color: #679;
736 width: 150px;
737 }
738
739 .csb-export-head tr:hover {
740 background: #FAFAFA;
741 }
742
743 .csb-export-head ul {
744 margin: 0;
745 }
746
747 .csb-export-head .dashicons.hint {
748 font-size: 12px;
749 line-height: 22px;
750 }
751
752 .csb-form {
753 padding-left: 15px;
754 }
755
756 .csb-form h2,
757 .csb-form h3,
758 .csb-form .form-buttons,
759 #poststuff .csb-form h2,
760 #poststuff .csb-form h3,
761 #poststuff .csb-form .form-buttons {
762 padding-left: 0;
763 margin-left: -15px;
764 }
765
766 .form-buttons {
767 clear: both;
768 }
769
770 .show-infos {
771 position: relative;
772 display: inline-block;
773 margin: 0 5px;
774 }
775
776 h2 .show-infos {
777 top: 4px;
778 }
779
780 .show-infos .export-infos {
781 position: absolute;
782 top: -5px;
783 left: 30px;
784 font-size: 13px;
785 line-height: 1.4em;
786 font-weight: normal;
787 background: #FFF;
788 box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
789 border: 3px solid #FAFAFA;
790 padding: 5px;
791 z-index: 10;
792 }
793
794 .show-infos .export-infos:before,
795 .show-infos .export-infos:after {
796 content: '';
797 position: absolute;
798 left: -17px;
799 top: 5px;
800 border: 7px solid transparent;
801 border-right-color: #FAFAFA;
802 z-index: 1;
803 }
804
805 .show-infos .export-infos:after {
806 left: -18px;
807 top: 5px;
808 border-right-color: rgba(0, 0, 0, 0.15);
809 z-index: 0;
810 }
811
812 .show-infos:hover .export-infos {
813 display: block !important;
814 }
815
816 .export-infos .section {
817 font-weight: bold;
818 margin: 10px 0 5px -2px;
819 color: #666;
820 }
821
822 /**
823 * =============================================================================
824 * == Location popup
825 * =============================================================================
826 */
827 .cs-half {
828 float: left;
829 width: 49%;
830 margin-right: 1%;
831 }
832
833 .cs-replaceable {
834 margin-bottom: 5px;
835 }
836
837 .cs-replaceable > .details {
838 display: none;
839 margin: 5px 0;
840 }
841
842 .cs-replaceable.open > .details {
843 display: block;
844 }
845
846 .popup-content .message.no-sidebars {
847 font-size: 1.4em;
848 }
849
850 @media screen and (max-width: 480px) {
851 .wpmui-popup .buttons {
852 height: 80px;
853 text-align: left;
854 }
855 .wpmui-popup .buttons label {
856 float: none;
857 display: block;
858 margin-bottom: .5em;
859 }
860 .wpmui-popup .buttons .btn-save {
861 float: right;
862 }
863 }
864 /**
865 * =============================================================================
866 * == Post list
867 * =============================================================================
868 */
869 @media screen and (max-width: 782px) {
870 #wpbody-content .wp-list-table.fixed .column-cs_replacement {
871 display: none;
872 }
873 }
874 #wpbody-content .wp-list-table .column-cs_replacement {
875 width: 10%;
876 }
877 #wpbody-content .wp-list-table .column-cs_replacement dt {
878 opacity: .8;
879 color: #666;
880 }
881 #wpbody-content .wp-list-table .column-cs_replacement dd {
882 margin-left: 10px;
883 }
884 #wpbody-content .wp-list-table .inline-edit-row fieldset.cs-quickedit {
885 border-top: 1px solid #eee;
886 margin-top: 10px;
887 padding-top: 10px;
888 }
889 #wpbody-content .wp-list-table .inline-edit-row fieldset.cs-quickedit label span.title {
890 display: block;
891 float: left;
892 min-width: 5em;
893 white-space: nowrap;
894 padding-right: 10px;
895 width: auto;
896 }
897 #wpbody-content .wp-list-table .inline-edit-row-page .inline-edit-col-right {
898 float: right;
899 }
900