PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.1.1
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.1.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.1.1, at css/frame.css

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