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 -1336 3.1.31.5.3 View file →
@@ -1,1336 +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 -
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 -}
1322 -
1323 -#vz-chart-docs {
1324 - right: 85px;
1325 - bottom: 40px;
1326 - width: 35%;
1327 -}
1328 -
1329 -#vz-chart-docs a {
1330 - text-decoration: none;
1331 -}
1332 -
1333 -/* datatables */
1334 -.dt-button {
1335 - display: none !important;
1336 -}
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 +}