PluginProbe ʕ •ᴥ•ʔ
Custom Sidebars – Dynamic Sidebar Classic Widget Area Manager / 2.1.2.0
Custom Sidebars – Dynamic Sidebar Classic Widget Area Manager v2.1.2.0
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 / css / cs.css
custom-sidebars / css Last commit date
cs.css 9 years ago cs.min.css 9 years ago
cs.css
792 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
155 .widgets-php .widget-liquid-right {
156 padding: 0 0 75px 0;
157 margin: -10px -214% 0 0;
158 width: 210%;
159 background: #e4e4e4;
160 /* https://app.asana.com/0/11388810124414/15066782299785 */
161 -webkit-user-select: none;
162 -moz-user-select: none;
163 -ms-user-select: none;
164 user-select: none;
165 }
166 .widgets-php .widget-liquid-right #widgets-right {
167 margin: 20px;
168 }
169
170 .widgets-php #wpcontent {
171 position: relative;
172 }
173 .widgets-php #wpcontent .wrap {
174 margin-right: 68%;
175 position: relative;
176 }
177 .widgets-php #wpcontent #screen-meta-links {
178 position: relative;
179 z-index: 10;
180 }
181 .widgets-php #wpcontent #screen-meta {
182 position: relative;
183 z-index: 10;
184 }
185
186 .widgets-php #widgets-left {
187 margin-right: 0 !important;
188 }
189
190 .widgets-php #footer {
191 background: #fff;
192 margin-right: 0px;
193 padding-right: 20px;
194 }
195
196 .widgets-php .wrap h2 {
197 margin-bottom: 10px;
198 }
199
200 .widget-liquid-right .overview {
201 list-style: none;
202 position: absolute;
203 left: 0;
204 top: 0;
205 width: auto;
206 right: 0;
207 padding-left: 20px;
208 border-left: 1px solid #DDD;
209 }
210
211 #cs-options .cs-action {
212 line-height: 26px;
213 margin-right: 20px;
214 }
215 #cs-options .cs-filter {
216 float: right;
217 }
218
219 .sidebar-form {
220 margin: 0 15px;
221 }
222
223 .sidebar-form label {
224 display: block;
225 }
226
227 .sidebar-form .submit {
228 text-align: right;
229 margin: 0;
230 padding: 1em 0;
231 }
232
233 .sidebar-form .description {
234 margin-top: 5px;
235 text-align: right;
236 }
237
238 .sidebar_name, .sidebar_description {
239 width: 100%;
240 }
241
242 div#widgets-right .sidebar-name > h3 {
243 padding: 15px;
244 }
245
246 div#widgets-right .widgets-sortables .sidebar-name > h3 {
247 padding: 15px 7px;
248 }
249
250 .widgets-holder-wrap.closed > div:nth-child(2) {
251 display: none;
252 }
253
254 #defaultsidebarspage .hndle {
255 cursor: pointer;
256 }
257
258 #customsidebarspage #col-right {
259 width: 62%;
260 }
261
262 .widgets_access .widget-liquid-right {
263 position: static;
264 }
265
266 #oldbrowsererror {
267 display: none;
268 }
269
270 #defaultsidebarspage .postbox {
271 position: static;
272 }
273
274 #defaultsidebarspage .inside {
275 position: static;
276 }
277
278 body.appearance_page_customsidebars .wrap h2 {
279 float: none;
280 }
281
282 body.appearance_page_customsidebars #poststuff h2 {
283 margin-top: 0;
284 }
285
286 .widget.ui-draggable-dragging {
287 z-index: 10001 !important;
288 }
289
290 /**
291 * =============================================================================
292 * == POPUP WINDOW: Add/Edit sidebar
293 * =============================================================================
294 */
295 .csb-more-content {
296 display: none;
297 }
298
299 .csb-has-more .csb-more-content {
300 display: block;
301 }
302
303 /**
304 * =============================================================================
305 * == Custom elements on widget screen
306 * =============================================================================
307 */
308 #cs-widgets-extra {
309 display: none;
310 }
311
312 #cs-title-options {
313 zoom: 1;
314 background: #E8E8E8;
315 margin: -20px -20px 0 -20px;
316 padding: 10px 20px 20px;
317 border-bottom: 1px solid #DDD;
318 }
319
320 .cs-title h3 {
321 font-weight: 100;
322 }
323 .cs-title h3 .cs-icon {
324 margin-left: 10px;
325 color: #999;
326 }
327
328 .replaceable {
329 position: relative;
330 }
331 .replaceable .replace-marker {
332 position: absolute;
333 left: 0;
334 top: 0;
335 bottom: 0;
336 width: 5px;
337 margin: 0 5px 0 0;
338 border-left: 2px solid #05c944;
339 z-index: 10;
340 }
341 .replaceable .replace-marker:hover:before {
342 content: attr(data-label);
343 background: #333;
344 color: #EEE;
345 font-size: 13px;
346 white-space: nowrap;
347 padding: 5px;
348 position: absolute;
349 top: 7px;
350 right: 13px;
351 line-height: 20px;
352 }
353 .replaceable .replace-marker:hover:after {
354 content: '';
355 position: absolute;
356 top: 16px;
357 right: 3px;
358 border: 6px solid transparent;
359 border-left-color: #333;
360 }
361
362 /**
363 * =============================================================================
364 * == Message box
365 *
366 * @todo: Check if this is used at all??
367 *
368 * =============================================================================
369 */
370 .cs-message {
371 margin: .5em 0;
372 padding: 10px;
373 position: absolute;
374 left: 0;
375 right: 0;
376 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
377 z-index: 100;
378 }
379
380 .cs-message .close {
381 position: absolute;
382 top: .5em;
383 right: .5em;
384 opacity: .3;
385 color: #000;
386 cursor: pointer;
387 text-decoration: none;
388 font-size: 14px;
389 line-height: 26px;
390 width: 26px;
391 text-align: center;
392 background: rgba(0, 0, 0, 0.1);
393 }
394
395 .cs-message .close:hover,
396 .cs-message .close:focus,
397 .cs-message .close:active {
398 opacity: 1;
399 }
400
401 .cs-update {
402 background: lightYellow;
403 border: 1px solid #E6DB55;
404 }
405
406 .cs-error {
407 background: #FFEBE8;
408 border: 1px solid #C00;
409 }
410
411 /**
412 * =============================================================================
413 * == Toolbar
414 * =============================================================================
415 */
416 .cs-toolbar {
417 color: #333;
418 padding: 0;
419 background: #FCFCFC;
420 border-top: 1px solid #E5E5E5;
421 }
422 .cs-toolbar:after {
423 display: table;
424 content: '';
425 clear: both;
426 }
427
428 .closed .cs-toolbar {
429 display: none;
430 }
431
432 .cs-toolbar .cs-tool {
433 text-decoration: none;
434 line-height: 40px;
435 height: 40px;
436 padding: 0 10px;
437 white-space: nowrap;
438 background: #FFF;
439 position: relative;
440 overflow: hidden;
441 }
442 .cs-toolbar .dashicons {
443 line-height: 40px;
444 }
445 .cs-toolbar .cs-separator {
446 border-left: 1px solid #E5E5E5;
447 width: 1px;
448 padding: 0;
449 margin: 0;
450 height: 40px;
451 overflow: hidden;
452 display: inline-block;
453 color: #DDD;
454 }
455
456 .cs-custom-sidebar .cs-tool,
457 .cs-custom-sidebar .cs-separator {
458 float: right;
459 }
460
461 .cs-theme-sidebar .cs-tool,
462 .cs-theme-sidebar .cs-separator {
463 float: left;
464 }
465
466 .cs-toolbar .delete-sidebar {
467 color: #A00;
468 }
469 .cs-toolbar .delete-sidebar:hover,
470 .cs-toolbar .delete-sidebar:focus,
471 .cs-toolbar .delete-sidebar:active {
472 color: #F00;
473 }
474
475 .cs-toolbar .cs-tool.btn-replaceable {
476 color: #555;
477 padding-left: 32px;
478 /*
479
480 .icon {
481 display: inline-block;
482 width: 20px;
483 height: 20px;
484 font-size: 20px;
485 line-height: 20px;
486 font-family: "dashicons";
487 font-weight: normal;
488 font-style: normal;
489 text-align: center;
490 float: left;
491 padding: 10px 5px 10px 0;
492 -webkit-font-smoothing: antialiased;
493 -moz-osx-font-smoothing: grayscale;
494
495 &:before {
496 content: "\f160"; /* dashicons-lock * /
497 color: #BBB;
498 }
499 }
500 */
501 }
502 .cs-toolbar .cs-tool.btn-replaceable:hover {
503 color: #333 !important;
504 }
505 .cs-toolbar .cs-tool.btn-replaceable .chk-replaceable {
506 position: absolute;
507 top: 50%;
508 left: 10px;
509 height: 16px;
510 margin-top: -8px;
511 }
512
513 .replaceable .cs-toolbar .cs-tool.btn-replaceable {
514 background: #edfff3;
515 color: #333;
516 /*
517 .icon:before {
518 content: "\f147"; /* dashicons-yes * /
519 color: #080;
520 }
521 */
522 }
523
524 .replace-tip-box {
525 float: left;
526 }
527
528 .replace-tip {
529 width: 200px;
530 }
531
532 /**
533 * =============================================================================
534 * == Button styles
535 * =============================================================================
536 */
537 .csb .button {
538 outline: 0;
539 }
540
541 .csb .button > .dashicons,
542 .csb .button-primary > .dashicons,
543 .csb .button-secondary > .dashicons {
544 opacity: .75;
545 line-height: 26px;
546 margin-right: 5px;
547 transition: opacity .2s;
548 }
549
550 .csb .button:hover > .dashicons,
551 .csb .button-primary:hover > .dashicons,
552 .csb .button-secondary:hover > .dashicons {
553 opacity: 1;
554 }
555
556 /**
557 * =============================================================================
558 * == RTL Styles
559 * =============================================================================
560 */
561 .rtl div.widget-liquid-right {
562 float: left;
563 right: auto;
564 left: 0;
565 }
566 .rtl.widgets-php #wpcontent .wrap {
567 margin-right: 2px;
568 margin-left: 68%;
569 }
570 .rtl.widgets-php .widget-liquid-right {
571 margin: -10px 0 0 -214%;
572 }
573 .rtl.widgets-php #widgets-left {
574 margin-left: 0 !important;
575 }
576 .rtl.widgets-php.folded #wpcontent,
577 .rtl.widgets-php.folded #wpfooter {
578 margin-left: 325px;
579 margin-right: 52px;
580 }
581 .rtl #cs-title-options h2 {
582 margin-right: 5px;
583 }
584 .rtl #cs-options .cs-filter {
585 float: left;
586 }
587 .rtl #cs-options .cs-action {
588 margin-right: 0;
589 margin-left: 20px;
590 }
591 .rtl .sidebar-form .submit {
592 text-align: left;
593 }
594 .rtl #TB_ajaxWindowTitle {
595 float: right;
596 }
597 .rtl #TB_closeAjaxWindow {
598 float: left;
599 }
600
601 /**
602 * =============================================================================
603 * == Export/Import
604 * =============================================================================
605 */
606 .csb-export-head {
607 min-width: 450px;
608 }
609
610 .csb-export-head th {
611 vertical-align: top;
612 text-align: right;
613 color: #679;
614 width: 150px;
615 }
616
617 .csb-export-head tr:hover {
618 background: #FAFAFA;
619 }
620
621 .csb-export-head ul {
622 margin: 0;
623 }
624
625 .csb-export-head .dashicons.hint {
626 font-size: 12px;
627 line-height: 22px;
628 }
629
630 .csb-form {
631 padding-left: 15px;
632 }
633
634 .csb-form h2,
635 .csb-form h3,
636 .csb-form .form-buttons,
637 #poststuff .csb-form h2,
638 #poststuff .csb-form h3,
639 #poststuff .csb-form .form-buttons {
640 padding-left: 0;
641 margin-left: -15px;
642 }
643
644 .form-buttons {
645 clear: both;
646 }
647
648 .show-infos {
649 position: relative;
650 display: inline-block;
651 margin: 0 5px;
652 }
653
654 h2 .show-infos {
655 top: 4px;
656 }
657
658 .show-infos .export-infos {
659 position: absolute;
660 top: -5px;
661 left: 30px;
662 font-size: 13px;
663 line-height: 1.4em;
664 font-weight: normal;
665 background: #FFF;
666 box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
667 border: 3px solid #FAFAFA;
668 padding: 5px;
669 z-index: 10;
670 }
671
672 .show-infos .export-infos:before,
673 .show-infos .export-infos:after {
674 content: '';
675 position: absolute;
676 left: -17px;
677 top: 5px;
678 border: 7px solid transparent;
679 border-right-color: #FAFAFA;
680 z-index: 1;
681 }
682
683 .show-infos .export-infos:after {
684 left: -18px;
685 top: 5px;
686 border-right-color: rgba(0, 0, 0, 0.15);
687 z-index: 0;
688 }
689
690 .show-infos:hover .export-infos {
691 display: block !important;
692 }
693
694 .export-infos .section {
695 font-weight: bold;
696 margin: 10px 0 5px -2px;
697 color: #666;
698 }
699
700 /**
701 * =============================================================================
702 * == Location popup
703 * =============================================================================
704 */
705 .cs-half {
706 float: left;
707 width: 49%;
708 margin-right: 1%;
709 }
710
711 .cs-replaceable {
712 margin-bottom: 5px;
713 }
714
715 .cs-replaceable > .details {
716 display: none;
717 margin: 5px 0;
718 }
719
720 .cs-replaceable.open > .details {
721 display: block;
722 }
723
724 /**
725 * =============================================================================
726 * == Post list
727 * =============================================================================
728 */
729 #wpbody-content .wp-list-table .column-cs_replacement {
730 width: 30%;
731 }
732 @media screen and (max-width: 782px) {
733 #wpbody-content .wp-list-table.fixed .column-cs_replacement {
734 display: none;
735 }
736 }
737 #wpbody-content .wp-list-table td.cs_replacement {
738 /* do not display sidebars that are not replaced */
739 }
740 #wpbody-content .wp-list-table td.cs_replacement .def,
741 #wpbody-content .wp-list-table td.cs_replacement .cust {
742 opacity: .8;
743 cursor: default;
744 position: relative;
745 padding-left: 110px;
746 }
747 #wpbody-content .wp-list-table td.cs_replacement .def:after,
748 #wpbody-content .wp-list-table td.cs_replacement .cust:after {
749 content: ' ';
750 display: block;
751 clear: both;
752 }
753 #wpbody-content .wp-list-table td.cs_replacement .def:hover,
754 #wpbody-content .wp-list-table td.cs_replacement .cust:hover {
755 opacity: 1;
756 background: rgba(0, 0, 0, 0.02);
757 }
758 #wpbody-content .wp-list-table td.cs_replacement .def {
759 display: none;
760 }
761 #wpbody-content .wp-list-table td.cs_replacement .cs-val,
762 #wpbody-content .wp-list-table td.cs_replacement .cs-key {
763 white-space: nowrap;
764 text-overflow: ellipsis;
765 overflow: hidden;
766 }
767 #wpbody-content .wp-list-table td.cs_replacement .cs-key {
768 max-width: 100px;
769 color: #666;
770 position: absolute;
771 left: 0;
772 }
773 #wpbody-content .wp-list-table td.cs_replacement .cs-val {
774 display: block;
775 }
776 #wpbody-content .wp-list-table .inline-edit-row fieldset.cs-quickedit {
777 border-top: 1px solid #EEE;
778 margin-top: 10px;
779 padding-top: 10px;
780 }
781 #wpbody-content .wp-list-table .inline-edit-row fieldset.cs-quickedit label span.title {
782 display: block;
783 float: left;
784 min-width: 5em;
785 white-space: nowrap;
786 padding-right: 10px;
787 width: auto;
788 }
789 #wpbody-content .wp-list-table .inline-edit-row-page .inline-edit-col-right {
790 float: right;
791 }
792