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