PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.3.1
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.3.1
4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 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.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 3.10.4 All 148 releases
visualizer / css / frame.css

frame.css in Visualizer – Tables & Charts Manager with Built-in AI Generator 3.3.1, at css/frame.css

1,477 lines 26.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #content {
2 overflow: auto;
3 position: absolute;
4 z-index: 75;
5 top: 0;
6 right: 0;
7 bottom: 60px;
8 left: 0;
9 width: auto;
10 background-color: white;
11 }
12
13 #canvas {
14 position: absolute;
15 top: 10px;
16 right: 310px;
17 bottom: 10px;
18 left: 10px;
19 }
20
21 .loader {
22 position: absolute;
23 top: 50%;
24 left: 50%;
25 margin-top: -16px;
26 margin-left: -16px;
27 }
28
29 /******************************************************************************/
30 /******************************** SIDEBAR ***********************************/
31 /******************************************************************************/
32
33 #sidebar {
34 overflow: auto;
35 position: absolute;
36 z-index: 75;
37 top: 0;
38 right: 0;
39 bottom: 60px;
40 width: 299px;
41 border-left: 1px solid #dfdfdf;
42 background: whitesmoke;
43
44 -webkit-overflow-scrolling: touch;
45 }
46
47 .viz-group {
48 margin: 0;
49 font-size: 12px;
50 line-height: 18px;
51 list-style: none;
52 }
53
54 .viz-group .viz-group-header .viz-group-title {
55 margin: 10px 0;
56 padding: 15px 20px;
57 border-top: 1px solid #ddd;
58 border-bottom: 1px solid #ddd;
59 color: #555d66;
60 background: #fff;
61 }
62
63 .viz-group-wrapper ul .viz-group-title {
64 border-top: 1px solid #ddd;
65 }
66
67 .viz-group-wrapper ul li {
68 border-top: 1px solid #ddd;
69 }
70
71 .viz-group-wrapper ul ul li.viz-subsection {
72 margin: 5px;
73 border: 1px solid #ddd;
74 }
75
76 .viz-group-wrapper .viz-group .viz-group .viz-group-title {
77 position: relative;
78 margin: 0;
79 padding: 10px 10px 11px 14px;
80 border-top: none;
81 border-bottom: none;
82 border-left: 4px solid #fff;
83 color: #555d66;
84 background-color: #fff;
85 font-size: 14px;
86 font-weight: 600;
87 line-height: 21px;
88 cursor: pointer;
89 transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
90 }
91
92 .viz-title-small {
93 font-size: smaller;
94 }
95
96 .viz-group-wrapper .viz-group .viz-group:hover .viz-group-title,
97 .viz-group-wrapper .viz-group .viz-group.open .viz-group-title {
98 border-left-color: #0073aa;
99 color: #0073aa;
100 background: #f3f3f5;
101 }
102
103 .viz-group-wrapper .viz-group .viz-group .viz-group-title:after {
104 position: absolute;
105 z-index: 1;
106 top: 11px;
107 right: 10px;
108 color: #a0a5aa;
109 font: 400 20px/1 dashicons;
110 content: "\f345";
111 }
112
113 .viz-group-wrapper .viz-group .viz-group.open .viz-group-title:after {
114 content: "\f347";
115 }
116
117 .viz-group-wrapper .viz-group .customize-section-back {
118 display: block;
119 float: left;
120 width: 42px;
121 height: 49px;
122 margin: 0 15px 0 0;
123 padding: 0;
124 border: none;
125 border-top: 1px solid #ddd;
126 border-right: 1px solid #ddd;
127 border-left: 4px solid #fff;
128 background: #fff;
129 box-shadow: none;
130 cursor: pointer;
131 transition: color 0.15s ease-in-out,border-color 0.15s ease-in-out,background 0.15s ease-in-out;
132 }
133
134 .viz-group-wrapper .viz-group .customize-section-back:hover {
135 border-left-color: #0073aa;
136 outline: 0;
137 color: #0073aa;
138 background: #f3f3f5;
139 }
140
141 .viz-group-wrapper .viz-group .customize-section-back:before {
142 position: relative;
143 top: -11px;
144 left: -2px;
145 font: 400 20px/72px dashicons;
146 content: "\f341";
147 }
148
149 .viz-group-wrapper.full-height {
150 float: left;
151 position: relative;
152 width: 100%;
153 height: 100%;
154 margin: 0;
155 }
156
157 .viz-group.bottom-fixed {
158 display: block;
159 position: absolute;
160 bottom: 0;
161 width: 100%;
162 }
163
164 .viz-group ul li h2,
165 .viz-group ul li h3 {
166 padding: 7px 15px 7px 35px;
167 }
168
169 .viz-group h2 .dashicons,
170 .viz-group h3 .dashicons {
171 margin-right: 5px;
172 vertical-align: -5px;
173 }
174
175 .viz-group-content {
176 display: none;
177 margin: 0;
178 padding: 0;
179 background-color: #fdfdfd;
180 }
181
182 div.viz-group-content {
183 padding: 15px;
184 }
185
186 .viz-group.open > .viz-group-content {
187 display: block;
188 }
189
190 .viz-group-description {
191 margin: 0;
192 padding: 5px;
193 color: #555;
194 font-size: 12px;
195 text-align: left;
196 }
197
198 div.viz-group-content .viz-group-description {
199 padding: 5px;
200 font-family: "Montserrat",sans-serif;
201 font-weight: 300;
202 }
203
204 .initial-screen .viz-group-description {
205 padding: 0;
206 padding: 10px 20px 20px;
207 font-family: "Montserrat",sans-serif;
208 font-weight: 300;
209 }
210
211 .viz-section-title {
212 display: block;
213 position: relative;
214 margin-bottom: 5px;
215 padding: 4px 20px;
216 border-top: 1px solid #eee;
217 border-bottom: 1px solid #eee;
218 background-color: rgba(0, 0, 0, 0.02);
219 box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
220 font-weight: bold;
221 cursor: pointer;
222 }
223
224 .viz-group-wrapper ul ul li .viz-section-title {
225 margin-bottom: 0;
226 border: none;
227 box-shadow: none;
228 }
229
230 .viz-section-title::after {
231 position: absolute;
232 z-index: 1;
233 top: 13px;
234 right: 20px;
235 width: 0;
236 height: 0;
237 border-width: 4px 4px 0;
238 border-style: solid;
239 border-color: #ccc transparent;
240 content: "";
241 }
242
243 .viz-section-title.open::after {
244 border-width: 0 4px 4px;
245 }
246
247 .section-items,
248 .viz-section-items {
249 display: none;
250 padding: 15px;
251 }
252
253 .viz-section-items.open {
254 display: block;
255 }
256
257 .more-info {
258 display: none;
259 float: right;
260 color: #21759b;
261 font-size: 85%;
262 font-weight: normal;
263 text-decoration: none;
264 }
265
266 .viz-info-msg {
267 font-weight: bold !important;
268 font-style: italic;
269 }
270
271 .viz-info-msg::before {
272 font-family: dashicons;
273 content: "\f488";
274 margin-right: 5px;
275 }
276
277 .viz-section-description {
278 margin: 0;
279 /*display: none;*/
280 padding: 0;
281 color: gray;
282 font-size: 11px;
283 }
284
285 .viz-section-table {
286 width: 100%;
287 }
288
289 .section-delimiter,
290 .viz-section-delimiter {
291 margin: 15px 0;
292 border-top: 1px dashed #ccc;
293 }
294
295 .viz-section-table-column {
296 width: 50%;
297 padding: 0 1px;
298 text-align: left;
299 vertical-align: top;
300 }
301
302 .viz-section-item {
303 margin-bottom: 10px;
304 }
305
306 .control-select,
307 .control-text {
308 width: 100%;
309 }
310
311 .control-check {
312 float: right;
313 }
314
315 .control-check::after {
316 clear: both;
317 }
318
319 .viz-section-description ul {
320 margin: 0 0 0 25px;
321 list-style: circle;
322 }
323
324 .viz-section-description li {
325 margin: 0;
326 list-style: circle;
327 }
328
329 #rate-the-plugin {
330 margin-top: 40px;
331 padding: 20px;
332 border-top: 1px dashed #ddd;
333 text-align: center;
334 }
335
336 .rate-the-plugin {
337 width: 40% !important;
338 margin-top: -5px;
339 }
340
341 #rate-stars {
342 width: 100px;
343 height: 20px;
344 margin: 15px auto;
345 background-image: url("../images/star.png");
346 background-repeat: repeat-x;
347 background-position: right center;
348 }
349
350 #rate-link {
351 font-family: "Montserrat",sans-serif;
352 font-weight: 400;
353 text-decoration: none;
354 }
355
356 #flattr {
357 margin-top: 15px;
358 text-align: center;
359 }
360
361 /******************************************************************************/
362 /******************************** TOOLBAR ***********************************/
363 /******************************************************************************/
364
365 #toolbar {
366 overflow: hidden;
367 position: absolute;
368 z-index: 100;
369 right: 0;
370 bottom: 0;
371 left: 0;
372 height: 36px;
373 padding: 12px 16px;
374 border-top: 1px solid #dfdfdf;
375 box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
376 text-align: center;
377 }
378
379 #toolbar .push-right {
380 float: right;
381 }
382
383 #toolbar .push-left {
384 float: left;
385 }
386
387 .toolbar-div a {
388 float: left;
389 }
390
391 .toolbar-div {
392 display: inline-block;
393 float: left;
394 width: 30%;
395 vertical-align: top;
396 }
397
398 /******************************************************************************/
399 /******************************** TYPE PICKER ******************************/
400 /******************************************************************************/
401
402 .type-box span {
403 display: block;
404 position: absolute;
405 right: 0;
406 bottom: -6px;
407 width: 100%;
408 padding: 4px 0;
409 border-top: 1px dashed #ddd;
410 border-bottom: 1px dashed #ddd;
411 background: #e0e0e0;
412 background-color: #efefef;
413 box-shadow: 0 0 8px #ddd;
414 font-weight: bold;
415 text-align: center;
416 }
417
418 .type-box .pro-upsell {
419 color: #c55555;
420 }
421
422 #type-picker {
423 width: 954px;
424 margin: 50px auto;
425 }
426
427 .type-box {
428 float: left;
429 position: relative;
430 margin: 0 20px 20px 0;
431 border: 1px dashed #ddd;
432 background-color: #efefef;
433 box-shadow: 0 0 8px #ddd;
434 }
435
436 .type-box:nth-child(3n+3) {
437 margin-right: 0;
438 }
439
440 .type-box .pro-upsell .visualizder-pro-label {
441 display: inline;
442 position: absolute;
443 top: 0;
444 width: 74px;
445 height: 10px;
446 height: 17px;
447 border: none;
448 color: #fff;
449 background: #c55555;
450 }
451
452 .type-label {
453 display: block;
454 width: 270px;
455 height: 205px;
456 padding: 15px;
457 border: 1px solid #e0e0e0;
458 background-color: white;
459 background-image: url(../images/chart_types_june2019_g.png);
460 background-repeat: no-repeat;
461 background-position: center center;
462 }
463
464 .type-label-selected,
465 .type-box > .type-label:hover {
466 background-image: url(../images/chart_types_june2019.png);
467 }
468
469 .type-box-area .type-label {
470 background-position: 0 -225px;
471 }
472
473 .type-box-line .type-label {
474 background-position: -600px 0;
475 }
476
477 .type-box-scatter .type-label {
478 background-position: -300px 0;
479 }
480
481 .type-box-pie .type-label {
482 background-position: 0 0;
483 }
484
485 .type-box-gauge .type-label {
486 background-position: 0 -450px;
487 }
488
489 .type-box-geo .type-label {
490 background-position: -600px -450px;
491 }
492
493 .type-box-candlestick .type-label {
494 background-position: -300px -450px;
495 }
496
497 .type-box-bar .type-label {
498 background-position: -300px -225px;
499 }
500
501 .type-box-column .type-label {
502 background-position: -600px -225px;
503 }
504
505 .type-box-dataTable .type-label {
506 background-position: -301px -670px;
507 }
508
509 .type-box-table .type-label {
510 background-position: -301px -670px;
511 }
512
513 .type-box-timeline .type-label {
514 background-position: -2px -670px;
515 }
516
517 .type-box-combo .type-label {
518 background-position: -597px -670px;
519 }
520
521 .type-box-polarArea .type-label {
522 background-position: -2px -912px;
523 }
524
525 .type-box-radar .type-label {
526 background-position: -301px -899px;
527 }
528
529 /******************************************************************************/
530 /******************************** OTHER STYLES ******************************/
531 /******************************************************************************/
532
533 #thehole {
534 position: absolute;
535 top: 0;
536 left: 0;
537 width: 1px;
538 height: 1px;
539 border: 0;
540 opacity: 0;
541
542 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
543 -moz-opacity: 0;
544 }
545
546 .locker,
547 .locker-loader {
548 position: absolute;
549 top: 0;
550 left: 0;
551 }
552
553 .locker {
554 z-index: 1000;
555 opacity: 0.8;
556 background-color: white;
557
558 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
559 filter: alpha(opacity=80);
560 }
561
562 .locker-loader {
563 z-index: 1001;
564 background: url(../images/ajax-loader.gif) no-repeat center center;
565 }
566
567 .file-wrapper {
568 display: inline-block;
569 width: auto;
570 max-width: 133px;
571 }
572
573 .file {
574 position: fixed;
575 max-width: 138px;
576 margin-top: -6px;
577 margin-left: -33px;
578 opacity: 0;
579 font-size: 22px;
580 cursor: pointer;
581
582 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
583 -moz-opacity: 0;
584 }
585
586 #remote-file {
587 display: inline-block;
588 float: right;
589 margin-left: 6px;
590 }
591
592 .form-inline {
593 display: table;
594 /*margin: 0 auto;*/
595 width: 100%;
596 vertical-align: middle;
597 }
598
599 .computer-btn {
600 overflow: hidden;
601 left: -18px;
602 padding-left: 27px !important;
603 border: medium none rgb(100, 100, 100) !important;
604 border: 1px solid #b0b0b0 !important;
605 color: #646464 !important;
606 background: #e6e6e6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
607 box-shadow: none !important;
608 text-shadow: none!important;
609 font-family: "Open Sans",sans-serif;
610 font-weight: 700;
611 transition: all 0.3s ease 0s;
612 }
613
614 .computer-btn:hover {
615 padding-left: 27px !important;
616 border: 1px solid #2f8cea !important;
617 color: white !important;
618 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
619 box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
620 box-shadow: none !important;
621 transition: all 0.3s ease 0s;
622 transition: all 0.3s ease;
623 }
624
625 .from-web {
626 margin-top: 0;
627 margin-bottom: 15px !important;
628 }
629
630 .from-web-btn {
631 padding-left: 25px !important;
632 border: medium none #646464 !important;
633 border: 1px solid #b0b0b0 !important;
634 color: #646464 !important;
635 background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
636 box-shadow: none !important;
637 font-family: "Open Sans",sans-serif;
638 font-weight: 700;
639 transition: all 0.3s ease 0s;
640 /*margin-left: 2px !important;*/
641 }
642
643 .from-web-btn:hover {
644 padding-left: 25px !important;
645 /*margin-left: 2px !important;*/
646 border: 1px solid #89b158 !important;
647 color: white !important;
648 background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
649 box-shadow: none !important;
650 transition: all 0.3s ease 0s;
651 transition: all 0.3s ease;
652 }
653
654 .preview {
655 width: 100%;
656 }
657
658 #sidebar > ul > div.initial-screen > div {
659 padding: 0 20px;
660 }
661
662 .from-chart-btn {
663 padding-left: 25px !important;
664 border: medium none #646464 !important;
665 border: 1px solid #b0b0b0 !important;
666 color: #646464 !important;
667 background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
668 box-shadow: none !important;
669 font-family: "Open Sans",sans-serif;
670 font-weight: 700;
671 transition: all 0.3s ease 0s;
672 /*margin-left: 2px !important;
673 margin-top: 2px !important;*/
674 }
675
676 .from-chart-btn:hover {
677 padding-left: 25px !important;
678 /*margin-left: 2px !important;*/
679 border: 1px solid #10aecb !important;
680 color: white !important;
681 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
682 box-shadow: none !important;
683 transition: all 0.3s ease 0s;
684 transition: all 0.3s ease;
685 /*margin-top: 2px !important;*/
686 }
687
688 input#existing-chart {
689 /*left: 18px;
690 width: 110px;
691 position: relative;*/
692 }
693
694 select#chart-id {
695 float: right;
696 width: 146px;
697 margin-right: 14px;
698 }
699
700 button#editor-chart-button {
701 display: block;
702 margin: 0 auto;
703 border: 1px solid #2c80d6 !important;
704 color: white !important;
705 background-color: #2f8cea !important;
706 box-shadow: none !important;
707 text-shadow: none;
708 transition: all 0.3s ease;
709 }
710
711 .preview-btn {
712 border: 1px solid #2c80d6 !important;
713 color: white !important;
714 background-color: #2f8cea !important;
715 box-shadow: none !important;
716 font-family: "Open Sans",sans-serif;
717 font-weight: 700;
718 transition: all 0.3s ease;
719 }
720
721 .preview-btn:hover {
722 border: 1px solid #2c80d6 !important;
723 color: white !important;
724 background-color: #2c80d6 !important;
725 box-shadow: none !important;
726 font-family: "Open Sans",sans-serif;
727 font-weight: 700;
728 transition: all 0.3s ease;
729 }
730
731 .show-live-btn {
732 width: 100%;
733 margin-top: 15px !important;
734 border-color: #e98b00 !important;
735 background-color: #f90 !important;
736 box-shadow: none !important;
737 font-family: "Open Sans",sans-serif;
738 font-weight: 700;
739 }
740
741 .show-live-btn:hover {
742 width: 100%;
743 margin-top: 15px !important;
744 border-color: #e98b00 !important;
745 background-color: #ea8c00 !important;
746 box-shadow: none !important;
747 font-family: "Open Sans",sans-serif;
748 font-weight: 700;
749 transition: all 0.3s ease;
750 }
751
752 .check-pro-btn {
753 display: block;
754 width: 245px;
755 height: 40px;
756 margin: 0 auto;
757 }
758
759 .advanced-settings-btn,
760 .return-settings-btn {
761 display: block;
762 height: auto;
763 margin: 0 auto;
764 margin-top: 5px;
765 margin-bottom: 20px;
766 border-radius: 3px;
767 font-size: 17px;
768 line-height: 34px;
769 cursor: pointer;
770 }
771
772 .return-settings-btn {
773 width: 90%;
774 }
775
776 .advanced-settings-btn {
777 width: 100%;
778 }
779
780 .return-settings-btn {
781 margin: 10px auto;
782 }
783
784 .hidden-setting {
785 display: none;
786 }
787
788 .viz-select-library {
789 color: #0085ba;
790 }
791
792 .viz-select-library option:first-child {
793 font-weight: bold;
794 }
795
796 /* ====== RESPONSIVE ====== */
797
798 @media (max-width: 1366px) {
799 #rate-stars {
800 margin: 3px 0 10px 40%;
801 }
802
803 .rate-the-plugin {
804 margin-left: -8%;
805 }
806 }
807
808 @media screen and (max-width: 782px) {
809 .button.button-primary.file-wrapper.computer-btn,
810 #remote-file,
811 #existing-chart {
812 height: 28px;
813 margin-bottom: 4px;
814 padding: 0 10px 1px;
815 font-size: 13px;
816 line-height: 26px;
817 vertical-align: middle;
818 }
819 }
820
821 #vz-chart-settings h2:hover,
822 #vz-chart-permissions h2:hover,
823 .sidebar-footer-link h2:hover,
824 #vz-chart-review a:hover {
825 text-decoration: none;
826 }
827
828 #vz-chart-review a {
829 color: #00a0d2;
830 text-decoration: none;
831 }
832
833 #vz-chart-settings h2,
834 #vz-chart-permissions h2,
835 .sidebar-footer-link h2,
836 #vz-chart-review h2 {
837 padding: 0;
838 border: none;
839 font-size: 12px;
840 font-weight: 400;
841 }
842
843 #vz-chart-review {
844 right: 0;
845 bottom: 10px;
846 box-sizing: border-box;
847 width: 40%;
848 padding-right: 6px;
849 text-align: right;
850 }
851
852 #vz-chart-settings.bottom-fixed h2 {
853 padding-left: 6px;
854 }
855
856 #vz-chart-settings {
857 bottom: 40px;
858 left: 0;
859 box-sizing: border-box;
860 width: 33%;
861 text-align: left;
862 }
863
864 #vz-chart-permissions:not(.open) h2 {
865 display: inline-block;
866 width: 100%;
867 margin: 0;
868 text-align: right;
869 }
870
871 #vz-chart-permissions {
872 right: 0;
873 bottom: 40px;
874 box-sizing: border-box;
875 width: 33%;
876 text-align: left;
877 }
878
879 #vz-chart-permissions h2,
880 #vz-chart-settings h2,
881 .sidebar-footer-link h2 {
882 display: inline;
883 color: #00a0d2;
884 background: none;
885 font-family: "Open Sans",sans-serif;
886 cursor: pointer;
887 }
888
889 .sidebar-footer-link,
890 #vz-chart-review,
891 #vz-chart-permissions,
892 #vz-chart-settings {
893 display: inline;
894 background: none;
895 cursor: pointer;
896 }
897
898 .sidebar-footer-link > ul,
899 #vz-chart-source > ul,
900 #vz-chart-permissions > ul,
901 #vz-chart-settings > ul {
902 position: relative;
903 z-index: 10;
904 border-bottom: 1px solid #ddd;
905 }
906
907 #vz-chart-copyright {
908 bottom: 10px;
909 text-align: center;
910 }
911
912 #sidebar {
913 border-left: 1px solid #ddd;
914 background: #f3f3f3;
915 }
916
917 #vz-chart-permissions.open h2 {
918 position: absolute;
919 right: 6px;
920 bottom: 28px;
921 left: auto;
922 width: 50%;
923 text-align: right;
924 }
925
926 #vz-chart-settings.open h2 {
927 position: absolute;
928 bottom: 28px;
929 left: 6px;
930 }
931
932 #vz-chart-permissions .viz-group-header,
933 #vz-chart-settings.open .viz-group-header {
934 display: block;
935 }
936
937 #vz-chart-permissions .viz-group-header,
938 #vz-chart-settings .viz-group-header {
939 display: none;
940 }
941
942 .sidebar-footer-link.open h2 {
943 position: absolute;
944 bottom: 28px;
945 left: 20px;
946 }
947
948 .sidebar-footer-link.open .viz-group-header {
949 display: block;
950 }
951
952 .sidebar-footer-link .viz-group-header {
953 display: none;
954 }
955
956 #vz-csv-file-form,
957 #vz-one-time-import,
958 #vz-schedule-import,
959 .edit-data-content {
960 text-align: center;
961 }
962
963 #csv-file {
964 margin: 15px 0;
965 padding: 0;
966 }
967
968 .visualizer-input,
969 .visualizer-select {
970 width: 100%;
971 margin: 0 0 15px;
972 }
973
974 .viz-group .dashicons-lock {
975 display: none;
976 }
977
978 .only-pro-feature .dashicons-lock {
979 display: inline;
980 }
981
982 .viz-section-title .dashicons,
983 .viz-group-title .dashicons {
984 width: 18px;
985 height: 18px;
986 margin-left: 3px;
987 font-size: 18px;
988 }
989
990 .only-pro-feature input,
991 .only-pro-feature button,
992 .only-pro-feature select {
993 cursor: not-allowed !important;
994 pointer-events: none;
995 }
996
997 .only-pro-feature > div {
998 position: relative;
999 }
1000
1001 .only-pro-content {
1002 position: absolute;
1003 top: 0;
1004 bottom: 0;
1005 left: 0;
1006 width: 100%;
1007 opacity: 0;
1008 background: rgba(253,253,253,0.9);
1009 transition: 0.5s ease;
1010 }
1011
1012 .only-pro-feature:hover .only-pro-content {
1013 opacity: 1;
1014 }
1015
1016 .only-pro-container {
1017 display: table;
1018 width: 100%;
1019 height: 100%;
1020 }
1021
1022 .only-pro-inner {
1023 display: table-cell;
1024 vertical-align: middle;
1025 }
1026
1027 .only-pro-content p {
1028 margin: 0 0 15px;
1029 font-size: 14px;
1030 font-weight: 700;
1031 }
1032
1033 .only-pro-content a {
1034 display: inline-block;
1035 padding: 7px 12px;
1036 color: #fff;
1037 background: #ff595e;
1038 font-weight: 600;
1039 text-decoration: none;
1040 text-transform: uppercase;
1041 transition: 0.1s ease;
1042 }
1043
1044 .only-pro-content a:hover {
1045 background: #ce484c;
1046 }
1047
1048 #sidebar::-webkit-scrollbar {
1049 width: 4px;
1050 }
1051
1052 #sidebar::-webkit-scrollbar-thumb {
1053 background: #999;
1054 }
1055
1056 span.viz-section-error {
1057 color: #ff000;
1058 }
1059
1060 #visualizer-error-manual {
1061 color: #ff595e;
1062 }
1063
1064 #vz-chart-permissions {
1065 width: 43%;
1066 }
1067
1068 #vz-chart-permissions {
1069 color: #ce484c;
1070 }
1071
1072 #vz-chart-permissions {
1073 right: 6px;
1074 bottom: 40px;
1075 width: 35%;
1076 }
1077
1078 #permissions-form .only-pro-feature > ul {
1079 position: relative;
1080 text-align: center;
1081 }
1082
1083 /******************************************************************************/
1084 /******************************** DB WIZARD ***********************************/
1085 /******************************************************************************/
1086 .db-wizard-condition .select-condition {
1087 display: none;
1088 }
1089
1090 .db-wizard-condition .select-condition.active {
1091 display: block;
1092 max-width: 50%;
1093 margin-top: 10px;
1094 padding-top: 10px;
1095 border-top: 1px solid #eee;
1096 font-weight: 500;
1097 }
1098
1099 .db-wizard-results {
1100 width: calc(100% - 350px);
1101 }
1102
1103 #db-wizard-form {
1104 padding: 25px;
1105 }
1106
1107 .db-wizard-query label {
1108 display: block;
1109 min-width: 150px;
1110 padding: 20px 0 5px;
1111 color: rgba(0,0,0,0.85);
1112 font-size: 18px;
1113 font-weight: 500;
1114 }
1115
1116 .db-wizard-query .db-wizard-where label,
1117 .db-wizard-query .db-wizard-from label {
1118 padding-top: 0;
1119 }
1120
1121 .db-wizard-query > div:not(:last-child) {
1122 margin-bottom: 15px;
1123 }
1124
1125 .db-wizard-query .select-condition > div {
1126 display: block;
1127 }
1128
1129 .db-wizard-query .chosen-container {
1130 width: auto;
1131 }
1132
1133 .db-wizard-query .chosen-container-single .chosen-single {
1134 border: 1px solid #ccc;
1135 background: #fff;
1136 box-shadow: none;
1137 font-size: 13px;
1138 font-weight: 500;
1139 }
1140
1141 .db-wizard-templates,
1142 .db-wizard-templates > div {
1143 display: block;
1144 }
1145
1146 .db-wizard-templates > div {
1147 box-sizing: border-box;
1148 width: 50%;
1149 margin-top: 20px;
1150 padding: 20px;
1151 border: 1px solid #efefef;
1152 }
1153
1154 .db-wizard-templates > div:first-child {
1155 margin-top: 0;
1156 }
1157
1158 .db-wizard-query .chosen-container-multi .chosen-choices {
1159 padding: 5px;
1160 border-color: #ccc;
1161 background: #fff;
1162 box-shadow: none;
1163 }
1164
1165 .db-wizard-results .dataTables_wrapper .dataTables_filter input,
1166 .db-wizard-query .select-condition-operand input,
1167 .db-wizard-limit input {
1168 width: 50%;
1169 padding-left: 7px;
1170 border: 1px solid #ccc;
1171 border-radius: 6px;
1172 background: #fff;
1173 box-shadow: none;
1174 font-size: 13px;
1175 }
1176
1177 .db-wizard-limit input {
1178 display: inline;
1179 width: 150px;
1180 margin: 0 0 20px 20px;
1181 }
1182
1183 .db-wizard-limit label {
1184 display: inline;
1185 }
1186
1187 .db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1188 color: #cdcdcd;
1189 }
1190
1191 .db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1192 color: #cdcdcd;
1193 }
1194
1195 .db-wizard-query .select-condition-operand input::placeholder {
1196 color: #cdcdcd;
1197 }
1198
1199 .db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1200 padding: 5px 30px 5px 5px;
1201 border-color: #ccc;
1202 background: #fff;
1203 box-shadow: none;
1204 font-weight: 600;
1205 }
1206
1207 .db-wizard-results table > thead > tr > th {
1208 padding: 15px 8px;
1209 border: none;
1210 color: #252422;
1211 background: #fff;
1212 font-size: 18px;
1213 font-weight: 500;
1214 text-align: left;
1215 }
1216
1217 .db-wizard-results table > tbody > tr > td,
1218 .dataTables_info {
1219 padding: 15px 8px;
1220 border-top: 1px solid #a2a2a2;
1221 color: #252422;
1222 font-size: 14px;
1223 font-weight: 300;
1224 }
1225
1226 .db-wizard-results table > tbody > tr.odd {
1227 background-color: #f7f7f7;
1228 }
1229
1230 .db-wizard-results table.dataTable.no-footer {
1231 border: none;
1232 }
1233
1234 .db-wizard-results .dataTables_wrapper .dataTables_info {
1235 border-top: 1px solid #ccc5b9;
1236 color: #a2a2a2;
1237 font-size: 12px;
1238 font-weight: 500;
1239 }
1240
1241 .db-wizard-results .dataTables_filter label {
1242 font-size: 18px;
1243 font-weight: 500;
1244 }
1245
1246 .db-wizard-where-template-remove,
1247 .db-wizard-where-template-add {
1248 width: auto;
1249 height: 25px;
1250 margin-top: 10px;
1251 border: none;
1252 border-radius: 3px;
1253 color: #fff;
1254 font-size: 12px;
1255 cursor: pointer;
1256 transition: 0.3s ease;
1257 }
1258
1259 .db-wizard-where-template-remove:hover,
1260 .db-wizard-where-template-add:hover {
1261 opacity: 0.8;
1262 }
1263
1264 .db-wizard-results .dataTables_wrapper .dataTables_filter {
1265 float: none;
1266 text-align: left;
1267 }
1268
1269 .db-wizard-where-template-add {
1270 background-color: #34a85e;
1271 }
1272
1273 .db-wizard-where-template-remove {
1274 background-color: #ff0d00;
1275 }
1276
1277 #db-query-form .CodeMirror-scroll {
1278 overflow: hidden !important;
1279 height: 50%;
1280 margin: 0;
1281 padding: 0;
1282 }
1283
1284 #db-query-form .CodeMirror-wrap {
1285 height: 200px;
1286 padding: 15px;
1287 color: #fff;
1288 background: #282923;
1289 font-size: 15px;
1290 }
1291
1292 #db-query-form .CodeMirror-wrap .CodeMirror-cursor {
1293 border-left: 1px solid #fff !important;
1294 }
1295
1296 #db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
1297 color: #fff;
1298 }
1299
1300 #db-query-form .CodeMirror-wrap pre {
1301 color: #fff !important;
1302 }
1303
1304 #db-query-form .CodeMirror-wrap pre .cm-keyword {
1305 color: #f92472 !important;
1306 }
1307
1308 #db-query-form .CodeMirror-wrap pre .cm-comment {
1309 color: #74705d !important;
1310 }
1311
1312 #db-query-form .CodeMirror-wrap pre .cm-number,
1313 #db-query-form .CodeMirror-wrap pre .cm-string {
1314 color: #fff !important;
1315 }
1316
1317 .visualizer-db-query-form > div {
1318 display: block;
1319 width: 15%;
1320 vertical-align: middle;
1321 }
1322
1323 #visualizer-db-query {
1324 padding: 20px;
1325 }
1326
1327 .visualizer-db-query-form > div:first-child {
1328 width: 100%;
1329 margin-bottom: 20px;
1330 }
1331
1332 .db-wizard-error {
1333 color: #f00;
1334 }
1335
1336 .db-wizard-hints,
1337 .json-wizard-hints,
1338 .html-table-editor-hints {
1339 margin-bottom: 30px;
1340 color: #0085ba;
1341 }
1342
1343 .db-wizard-hints .visualizer-emboss,
1344 .db-wizard-hints a,
1345 .html-table-editor-hints a,
1346 .json-wizard-hints .visualizer-emboss,
1347 .json-wizard-hints a {
1348 color: #f92472;
1349 }
1350
1351 .db-wizard-hints ul,
1352 .html-table-editor-hints ul,
1353 .json-wizard-hints ul {
1354 list-style: square;
1355 }
1356
1357 .db-wizard-results .dataTables_wrapper .dataTables_info {
1358 width: calc(100% - 17px);
1359 }
1360
1361 #vz-chart-docs {
1362 right: 85px;
1363 bottom: 40px;
1364 width: 35%;
1365 }
1366
1367 #vz-chart-docs a {
1368 text-decoration: none;
1369 }
1370
1371 /******************************************************************************/
1372 /******************************** data tables *******************************/
1373 /******************************************************************************/
1374 .db-wizard-results .dt-button {
1375 display: none !important;
1376 }
1377
1378 .dt-button.buttons-print {
1379 display: none;
1380 }
1381
1382 /******************************************************************************/
1383 /******************************** json table *********************************/
1384 /******************************************************************************/
1385 #json-conclude-form .results {
1386 min-width: 10px !important;
1387 }
1388
1389 #json-conclude-form .json-table,
1390 #vz-import-json-url,
1391 #vz-import-json-root,
1392 #vz-import-json-paging {
1393 width: 85%;
1394 }
1395
1396 #json-conclude-form .json-table,
1397 #json-conclude-form button#visualizer-json-conclude {
1398 display: inline-block;
1399 vertical-align: middle;
1400 }
1401
1402 .viz-editor-table tbody tr:first-child {
1403 background-color: #ececec !important;
1404 }
1405
1406 .viz-editor-table tr th {
1407 background-color: #cccccc;
1408 }
1409
1410 .viz-editor-table thead tr th:nth-child(n+1) {
1411 cursor: move !important;
1412 }
1413
1414 #json-conclude-form .json-wizard-hints .info,
1415 .html-table-editor-hints .info {
1416 margin: 1% 0px;
1417 }
1418
1419 .viz-step.ui-state-active {
1420 border-color: #0085BA !important;
1421 background: #0085BA !important;
1422 color: #ffffff;
1423 }
1424
1425 /******************************************************************************/
1426 /******************************** html table editor **************************/
1427 /******************************************************************************/
1428 .viz-simple-editor-type,
1429 .viz-simple-editor {
1430 display: none;
1431 }
1432
1433 .viz-table-editor {
1434 width: 75%;
1435 margin-left: 2%;
1436 }
1437
1438 .viz-html-table,
1439 button#visualizer-save-html-table {
1440 display: inline-block;
1441 vertical-align: middle;
1442 }
1443
1444
1445 /******************************************************************************/
1446 /******************************** text area editor **************************/
1447 /******************************************************************************/
1448 .viz-text-editor {
1449 padding: 20px;
1450 z-index: 9999;
1451 box-sizing: border-box;
1452 padding-right: 320px;
1453 }
1454
1455 .viz-text-editor textarea {
1456 width: 85%;
1457 overflow: auto;
1458 background: #282923;
1459 color: #ffffff;
1460 padding: 15px;
1461 height: 400px;
1462 font-size: 15px;
1463 }
1464
1465 .viz-text-editor textarea,
1466 button#viz-text-editor-button {
1467 display: inline-block;
1468 vertical-align: middle;
1469 }
1470
1471 /******************************************************************************/
1472 /******************************** chartjs ***********************************/
1473 /******************************************************************************/
1474
1475 canvas.chartjs-render-monitor {
1476 height: 500px !important;
1477 }