PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 1.5.6
Visualizer – Tables & Charts Manager with Built-in AI Generator v1.5.6
4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 3.10.4 All 148 releases
visualizer / css / frame.css

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

790 lines 15.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
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 .control-check {
254 float: right;
255 }
256 .control-check::after {
257 clear: both;
258 }
259
260 .section-description ul {
261 margin: 0 0 0 25px;
262 list-style: circle;
263 }
264
265 .section-description li {
266 list-style: circle;
267 margin: 0;
268 }
269
270 #rate-the-plugin {
271 margin-top: 40px;
272 padding: 20px;
273 border-top: 1px dashed #ddd;
274 text-align: center;
275 }
276
277 .rate-the-plugin{
278 width: 40% !important;
279 margin-top: -5px;
280 }
281
282 #rate-stars {
283 margin: 15px auto;
284 width: 100px;
285 height: 20px;
286 background-image: url('../images/star.png');
287 background-repeat: repeat-x;
288 background-position: right center;
289 }
290
291 #rate-link {
292 text-decoration: none;
293 font-family: "Montserrat",sans-serif;
294 font-weight: 400;
295 }
296
297 #flattr {
298 margin-top: 15px;
299 text-align: center;
300 }
301
302 /******************************************************************************/
303 /******************************** TOOLBAR ***********************************/
304 /******************************************************************************/
305
306 #toolbar {
307 height: 36px;
308 padding: 12px 16px;
309 position: absolute;
310 z-index: 100;
311 left: 0;
312 right: 0;
313 text-align: center;
314 bottom: 0;
315 border-top: 1px solid #DFDFDF;
316 overflow: hidden;
317 -webkit-box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
318 box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
319 }
320
321 #toolbar .push-right {
322 float: right;
323 }
324
325 .toolbar-div a{
326 float:left;
327 }
328 .toolbar-div{
329 display: inline-block;
330 vertical-align: top;
331 width: 30%;
332 float:left;
333 }
334
335 /******************************************************************************/
336 /******************************** TYPE PICKER ******************************/
337 /******************************************************************************/
338
339 #type-picker {
340 margin: 50px auto;
341 width: 952px;
342 }
343
344 .type-box {
345 float: left;
346 margin: 0 20px 20px 0;
347 border: 1px dashed #ddd;
348 -webkit-box-shadow: 0px 0px 8px #ddd;
349 box-shadow: 0px 0px 8px #ddd;
350 background-color: #efefef;
351 }
352
353 .type-box:nth-child(3n+3) {
354 margin-right: 0px;
355 }
356
357 .type-label {
358 display: block;
359 width: 270px;
360 height: 195px;
361 padding: 15px;
362 background-color: white;
363 background-image: url(../images/chart_types_g.png);
364 background-repeat: no-repeat;
365 background-position: center center;
366 border: 1px solid #e0e0e0;
367 }
368
369 .type-label-selected,
370 .type-label:hover {
371 background-image: url(../images/chart_types.png);
372 }
373
374 .type-box-area .type-label {
375 background-position: 0px -225px;
376 }
377
378 .type-box-line .type-label {
379 background-position: -600px 0px;
380 }
381
382 .type-box-scatter .type-label {
383 background-position: -300px 0px;
384 }
385
386 .type-box-pie .type-label {
387 background-position: 0px 0px;
388 }
389
390 .type-box-gauge .type-label {
391 background-position: 0px -450px;
392 }
393
394 .type-box-geo .type-label {
395 background-position: -600px -450px;
396 }
397
398 .type-box-candlestick .type-label {
399 background-position: -300px -450px;
400 }
401
402 .type-box-bar .type-label {
403 background-position: -300px -225px;
404 }
405
406 .type-box-column .type-label {
407 background-position: -600px -225px;
408 }
409
410 .type-box-table .type-label {
411 background-position: -301px -670px;
412 }
413
414 .type-box-timeline .type-label {
415 background-position: -2px -670px;
416 }
417
418 .type-box-combo .type-label {
419 background-position: -597px -670px;
420 }
421
422 a.pro-upsell {
423 margin: 0;
424 display: flex;
425 align-items: center;
426 height: 20px;
427 padding:10px 20px;
428 border-radius: 50px;
429 -moz-border-radius: 50px;
430 -webkit-border-radius: 50px;
431 background-color: #4285F4;
432 text-decoration: none;
433 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
434 border: 1px solid #2c80d6;
435 transition: all .5s ease-in;
436 top: 10px;
437 position: relative;
438 }
439
440 a.pro-upsell:hover {
441 background-color: #5a95f5;
442 box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
443 }
444
445 a.pro-upsell span {
446 color: #fff;
447 margin-right: 10px;
448 display:inline-block;
449 }
450
451 a.pro-upsell {
452 font-weight: bold;
453 font-size: 13px;
454 color: #fff;
455 display: inline;
456 }
457
458 /******************************************************************************/
459 /******************************** OTHER STYLES ******************************/
460 /******************************************************************************/
461
462 #thehole {
463 position: absolute;
464 left: 0;
465 top: 0;
466 width: 1px;
467 height: 1px;
468 border: 0;
469 opacity: 0;
470 -moz-opacity: 0;
471 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
472 }
473
474 .locker, .locker-loader {
475 left: 0;
476 top: 0;
477 position: absolute;
478 }
479
480 .locker {
481 z-index: 1000;
482 background-color: white;
483 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
484 filter: alpha(opacity=80);
485 opacity: 0.8;
486 }
487
488 .locker-loader {
489 z-index: 1001;
490 background: url(../images/ajax-loader.gif) no-repeat center center;
491 }
492
493 .file-wrapper {
494 display: inline-block;
495 width: auto;
496 max-width: 133px;
497 }
498
499 .file {
500 font-size: 22px;
501 position: fixed;
502 opacity: 0;
503 margin-left: -33px;
504 margin-top: -6px;
505 -moz-opacity: 0;
506 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
507 cursor: pointer;
508 max-width: 138px;
509 }
510
511 #remote-file {
512 float: right;
513 display: inline-block;
514 margin-left: 6px;
515 }
516
517 .form-inline {
518 /*margin: 0 auto;*/
519 width:100%;
520 display: table;
521 vertical-align: middle;
522 }
523
524 .computer-btn{
525 color: #646464 !important;
526 border: medium none rgb(100, 100, 100) !important;
527 background: #E6E6E6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
528 padding-left: 27px !important;
529 transition: all 0.3s ease 0s;
530 font-family: "Open Sans",sans-serif;
531 font-weight: 700;
532 border: 1px solid #B0B0B0 !important;
533 box-shadow: none !important;
534 text-shadow:none!important;
535 left: -18px;
536 overflow: hidden;
537
538 }
539
540 .computer-btn:hover{
541 color: white !important;
542 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
543 transition: all 0.3s ease 0s;
544 padding-left: 27px !important;
545 -webkit-transition: all .3s ease;
546 -moz-transition: all .3s ease;
547 -ms-transition: all .3s ease;
548 -o-transition: all .3s ease;
549 transition: all .3s ease;
550 box-shadow: 0px 1px 0px rgba(171, 171, 171, 0.5) inset, 0px 1px 0px rgba(0, 0, 0, 0.15) !important;
551 border: 1px solid #2f8cea !important;
552 box-shadow: none !important;
553
554
555 }
556
557 .just-on-pro{
558 background: #F5F5F5 url("../images/available_pro.png") no-repeat scroll 0px 1px !important;
559 width: 250px;
560 height: 100px;
561 cursor:not-allowed;
562 opacity: 0.8;
563 margin-bottom: 10px;
564 }
565
566
567
568 .from-web{
569 margin-top: 0px;
570 margin-bottom: 15px !important;
571 }
572
573 .from-web-btn{
574 color: #646464 !important;
575 border: medium none #646464 !important;
576 background: #E6E6E6 url("../images/web.png") no-repeat scroll 7px 1px !important;
577 padding-left: 25px !important;
578 transition: all 0.3s ease 0s;
579 border: 1px solid #B0B0B0 !important;
580 box-shadow: none !important;
581 font-family: "Open Sans",sans-serif;
582 font-weight: 700;
583 /*margin-left: 2px !important;*/
584 }
585
586 .from-web-btn:hover{
587 color: white !important;
588 background: #89B158 url("../images/web.png") no-repeat scroll 7px -38px !important;
589 transition: all 0.3s ease 0s;
590 padding-left: 25px !important;
591 -webkit-transition: all .3s ease;
592 -moz-transition: all .3s ease;
593 -ms-transition: all .3s ease;
594 -o-transition: all .3s ease;
595 transition: all .3s ease;
596 /*margin-left: 2px !important;*/
597 border: 1px solid #89B158 !important;
598 box-shadow: none !important;
599 }
600
601 .preview{
602 width: 100%;
603 }
604
605
606 #sidebar > ul > div.initial-screen > div {
607 padding: 0 20px;
608 }
609
610 .from-chart-btn{
611 color: #646464 !important;
612 border: medium none #646464 !important;
613 background: #E6E6E6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
614 padding-left: 25px !important;
615 transition: all 0.3s ease 0s;
616 border: 1px solid #B0B0B0 !important;
617 box-shadow: none !important;
618 font-family: "Open Sans",sans-serif;
619 font-weight: 700;
620 /*margin-left: 2px !important;
621 margin-top: 2px !important;*/
622 }
623
624 .from-chart-btn:hover{
625 color: white !important;
626 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
627 transition: all 0.3s ease 0s;
628 padding-left: 25px !important;
629 -webkit-transition: all .3s ease;
630 -moz-transition: all .3s ease;
631 -ms-transition: all .3s ease;
632 -o-transition: all .3s ease;
633 transition: all .3s ease;
634 /*margin-left: 2px !important;*/
635 border: 1px solid #10aecb !important;
636 box-shadow: none !important;
637 /*margin-top: 2px !important;*/
638 }
639
640 input#existing-chart {
641 /*left: 18px;
642 width: 110px;
643 position: relative;*/
644 }
645
646 select#chart-id {
647 float: right;
648 width: 95px;
649 }
650
651 button#editor-chart-button {
652 margin: 0 auto;
653 display: block;
654 background-color: #2f8cea !important;
655 color: white !important;
656 border: 1px solid #2c80d6 !important;
657 box-shadow: none !important;
658 -webkit-transition: all .3s ease;
659 -moz-transition: all .3s ease;
660 -ms-transition: all .3s ease;
661 -o-transition: all .3s ease;
662 transition: all .3s ease;
663 text-shadow: none;
664 }
665
666 .preview-btn{
667 font-family: "Open Sans",sans-serif;
668 font-weight: 700;
669 background-color: #2f8cea !important;
670 color: white !important;
671 border: 1px solid #2c80d6 !important;
672 box-shadow: none !important;
673 -webkit-transition: all .3s ease;
674 -moz-transition: all .3s ease;
675 -ms-transition: all .3s ease;
676 -o-transition: all .3s ease;
677 transition: all .3s ease;
678 }
679
680 .preview-btn:hover{
681 font-family: "Open Sans",sans-serif;
682 font-weight: 700;
683 background-color: #2c80d6 !important;
684 color: white !important;
685 border: 1px solid #2c80d6 !important;
686 box-shadow: none !important;
687 -webkit-transition: all .3s ease;
688 -moz-transition: all .3s ease;
689 -ms-transition: all .3s ease;
690 -o-transition: all .3s ease;
691 transition: all .3s ease;
692 }
693
694 .show-live-btn{
695 margin-top: 15px !important;
696 width: 100%;
697 background-color: #F90 !important;
698 border-color: #E98B00 !important;
699 font-family: "Open Sans",sans-serif;
700 font-weight: 700;
701 box-shadow: none !important;
702 }
703
704
705 .show-live-btn:hover{
706 margin-top: 15px !important;
707 width: 100%;
708 background-color: #ea8c00 !important;
709 border-color: #E98B00 !important;
710 font-family: "Open Sans",sans-serif;
711 font-weight: 700;
712 box-shadow: none !important;
713 -webkit-transition: all .3s ease;
714 -moz-transition: all .3s ease;
715 -ms-transition: all .3s ease;
716 -o-transition: all .3s ease;
717 transition: all .3s ease;
718 }
719
720 .check-pro-btn {
721 height: 40px;
722 width: 245px;
723 display: block;
724 margin: 0 auto;
725 }
726
727 .advanced-settings-btn, .return-settings-btn {
728 cursor: pointer;
729 display: block;
730 margin: 0 auto;
731 line-height: 34px;
732 font-size: 17px;
733 height: auto;
734 -webkit-border-radius: 3px;
735 -moz-border-radius: 3px;
736 border-radius: 3px;
737 margin-bottom: 20px;
738 margin-top:5px;
739 }
740
741 .return-settings-btn {
742 width: 90%;
743 }
744
745 .advanced-settings-btn {
746 width: 100%;
747 }
748
749 .return-settings-btn {
750 margin: 10px auto;
751 }
752
753 .hidden-setting {
754 display:none;
755 }
756
757
758
759 /* ====== RESPONSIVE ====== */
760
761
762 @media (max-width: 1366px) {
763 .group-title {
764 padding: 4px 20px;
765 font-weight: 400;
766 font-size: 14px;
767 }
768 .group-title::after {
769 top: 10px;
770 }
771 #rate-stars {
772 margin: 3px 0 10px 40%;
773 }
774 .rate-the-plugin {
775 margin-left: -8%;
776 }
777 }
778
779 @media screen and (max-width: 782px) {
780 .button.button-primary.file-wrapper.computer-btn, #remote-file, #existing-chart {
781 padding: 0 10px 1px;
782 line-height: 26px;
783 font-size: 13px;
784 vertical-align: middle;
785 height: 28px;
786 margin-bottom: 4px;
787 }
788
789 }
790