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

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

792 lines 15.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #content {
2 overflow: auto;
3 position: absolute;
4 z-index: 75;
5 top: 0;
6 right: 0;
7 bottom: 60px;
8 left: 0;
9 background-color: white;
10 }
11
12 #canvas {
13 position: absolute;
14 top: 10px;
15 right: 310px;
16 bottom: 10px;
17 left: 10px;
18 }
19
20 .loader {
21 position: absolute;
22 top: 50%;
23 left: 50%;
24 margin-top: -16px;
25 margin-left: -16px;
26 }
27
28 /******************************************************************************/
29 /******************************** SIDEBAR ***********************************/
30 /******************************************************************************/
31
32 #sidebar {
33 overflow: auto;
34 position: absolute;
35 z-index: 75;
36 top: 0;
37 right: 0;
38 bottom: 60px;
39 width: 299px;
40 border-left: 1px solid #dfdfdf;
41 background: whitesmoke;
42
43 -webkit-overflow-scrolling: touch;
44 }
45
46 .group-wrapper {
47 margin: 0;
48 padding: 0;
49 border-top: 1px solid #dfdfdf;
50 list-style: none;
51 }
52
53 .group {
54 margin: 0;
55 font-size: 12px;
56 line-height: 18px;
57 list-style: none;
58 }
59
60 .group.open {
61 border-bottom: 1px solid #dfdfdf;
62 }
63
64 .group-title {
65 position: relative;
66 margin: 0;
67 padding: 10px 20px;
68 border-top: 1px solid white;
69 border-bottom: 1px solid #dfdfdf;
70 background: whiteSmoke;
71 background-image: -webkit-gradient(linear, left bottom, left top, from(#eee), to(whiteSmoke));
72 background-image: -webkit-linear-gradient(bottom, #eee, whiteSmoke);
73 background-image: -webkit-gradient( linear, left top, left bottom, from(#eee), to(whiteSmoke));
74 background-image: -webkit-linear-gradient( top, #eee, whiteSmoke);
75 background-image: linear-gradient( to bottom, #eee, whiteSmoke);
76 text-shadow: 0 1px 0 white;
77 font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
78 font-family: "Open Sans",sans-serif;
79 font-size: 15px;
80 font-weight: normal;
81 font-weight: 700;
82 cursor: pointer;
83 -webkit-user-select: none;
84 -moz-user-select: none;
85 -ms-user-select: none;
86 user-select: none;
87 }
88
89 .group-title:hover,
90 .group.open .group-title {
91 color: white;
92 background: gray;
93 background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(gray));
94 background-image: -webkit-linear-gradient(bottom, #6d6d6d, gray);
95 background-image: -webkit-gradient( linear, left top, left bottom, from(#6d6d6d), to(gray));
96 background-image: -webkit-linear-gradient( top, #6d6d6d, gray);
97 background-image: linear-gradient( to bottom, #6d6d6d, gray);
98 text-shadow: 0 -1px 0 #333;
99 font-family: "Open Sans", sans-serif;
100 font-weight: 700;
101 }
102
103 .group-title::after {
104 position: absolute;
105 z-index: 1;
106 top: 15px;
107 right: 20px;
108 width: 0;
109 height: 0;
110 border-width: 6px 6px 0;
111 border-style: solid;
112 border-color: #ccc transparent;
113 content: "";
114 }
115
116 .group-title:hover::after,
117 .group.open .group-title::after {
118 border-color: #eee transparent;
119 }
120
121 .group:hover .group-title {
122 border-top-color: gray;
123 }
124
125 .group.open .group-title {
126 border-top-color: #6d6d6d;
127 }
128
129 .group.open .group-title::after {
130 border-width: 0 6px 6px;
131 }
132
133 .group-content {
134 display: none;
135 overflow: hidden;
136 margin: 0;
137 padding: 10px 0 20px 0;
138 background-color: #fdfdfd;
139 }
140
141 div.group-content {
142 padding: 10px 20px 20px;
143 }
144
145 .group.open .group-content {
146 display: block;
147 }
148
149 .group-description {
150 margin: 0;
151 padding: 5px 20px 10px;
152 color: #555;
153 font-size: 12px;
154 }
155
156 div.group-content .group-description {
157 padding: 0;
158 font-family: "Montserrat",sans-serif;
159 font-weight: 300;
160 }
161
162 .initial-screen .group-description {
163 padding: 0;
164 padding: 10px 20px 20px;
165 font-family: "Montserrat",sans-serif;
166 font-weight: 300;
167 }
168
169 .section-title {
170 display: block;
171 position: relative;
172 margin-bottom: 5px;
173 padding: 4px 20px;
174 border-top: 1px solid #eee;
175 border-bottom: 1px solid #eee;
176 background-color: rgba(0, 0, 0, 0.02);
177 -webkit-box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
178 box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
179 font-weight: bold;
180 cursor: pointer;
181 }
182
183 .section-title::after {
184 position: absolute;
185 z-index: 1;
186 top: 13px;
187 right: 20px;
188 width: 0;
189 height: 0;
190 border-width: 4px 4px 0;
191 border-style: solid;
192 border-color: #ccc transparent;
193 content: "";
194 }
195
196 .section-title.open::after {
197 border-width: 0 4px 4px;
198 }
199
200 .section-items {
201 display: none;
202 padding: 5px 20px 10px 20px;
203 }
204
205 .section-items.open {
206 display: block;
207 }
208
209 .more-info {
210 display: none;
211 float: right;
212 color: #21759b;
213 font-size: 85%;
214 font-weight: normal;
215 text-decoration: none;
216 }
217
218 .section-description {
219 margin: 0;
220 /*display: none;*/
221 padding: 0;
222 color: gray;
223 font-size: 11px;
224 }
225
226 .section-table {
227 width: 100%;
228 }
229
230 .section-delimiter {
231 margin: 15px 0;
232 border-top: 1px dashed #ccc;
233 }
234
235 .section-table-column {
236 width: 50%;
237 padding: 0 1px;
238 text-align: left;
239 vertical-align: top;
240 }
241
242 .section-item {
243 margin-bottom: 10px;
244 }
245
246 .control-select,
247 .control-text {
248 width: 100%;
249 }
250
251 .control-check {
252 float: right;
253 }
254
255 .control-check::after {
256 clear: both;
257 }
258
259 .section-description ul {
260 margin: 0 0 0 25px;
261 list-style: circle;
262 }
263
264 .section-description li {
265 margin: 0;
266 list-style: circle;
267 }
268
269 #rate-the-plugin {
270 margin-top: 40px;
271 padding: 20px;
272 border-top: 1px dashed #ddd;
273 text-align: center;
274 }
275
276 .rate-the-plugin {
277 width: 40% !important;
278 margin-top: -5px;
279 }
280
281 #rate-stars {
282 width: 100px;
283 height: 20px;
284 margin: 15px auto;
285 background-image: url("../images/star.png");
286 background-repeat: repeat-x;
287 background-position: right center;
288 }
289
290 #rate-link {
291 font-family: "Montserrat",sans-serif;
292 font-weight: 400;
293 text-decoration: none;
294 }
295
296 #flattr {
297 margin-top: 15px;
298 text-align: center;
299 }
300
301 /******************************************************************************/
302 /******************************** TOOLBAR ***********************************/
303 /******************************************************************************/
304
305 #toolbar {
306 overflow: hidden;
307 position: absolute;
308 z-index: 100;
309 right: 0;
310 bottom: 0;
311 left: 0;
312 height: 36px;
313 padding: 12px 16px;
314 border-top: 1px solid #dfdfdf;
315 -webkit-box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
316 box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
317 text-align: center;
318 }
319
320 #toolbar .push-right {
321 float: right;
322 }
323
324 .toolbar-div a {
325 float: left;
326 }
327
328 .toolbar-div {
329 display: inline-block;
330 float: left;
331 width: 30%;
332 vertical-align: top;
333 }
334
335 /******************************************************************************/
336 /******************************** TYPE PICKER ******************************/
337 /******************************************************************************/
338
339 #type-picker {
340 width: 952px;
341 margin: 50px auto;
342 }
343
344 .type-box {
345 float: left;
346 margin: 0 20px 20px 0;
347 border: 1px dashed #ddd;
348 background-color: #efefef;
349 -webkit-box-shadow: 0 0 8px #ddd;
350 box-shadow: 0 0 8px #ddd;
351 }
352
353 .type-box:nth-child(3n+3) {
354 margin-right: 0;
355 }
356
357 .type-label {
358 display: block;
359 width: 270px;
360 height: 195px;
361 padding: 15px;
362 border: 1px solid #e0e0e0;
363 background-color: white;
364 background-image: url(../images/chart_types_g.png);
365 background-repeat: no-repeat;
366 background-position: center center;
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: 0 -225px;
376 }
377
378 .type-box-line .type-label {
379 background-position: -600px 0;
380 }
381
382 .type-box-scatter .type-label {
383 background-position: -300px 0;
384 }
385
386 .type-box-pie .type-label {
387 background-position: 0 0;
388 }
389
390 .type-box-gauge .type-label {
391 background-position: 0 -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 display: -webkit-box;
424 display: -webkit-flex;
425 display: -ms-flexbox;
426 display: flex;
427 position: relative;
428 top: 10px;
429 height: 20px;
430 margin: 0;
431 padding: 10px 20px;
432 border: 1px solid #2c80d6;
433 border-radius: 50px;
434 background-color: #4285f4;
435 -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
436 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
437 text-decoration: none;
438 -webkit-transition: all 0.5s ease-in;
439 transition: all 0.5s ease-in;
440
441 -webkit-align-items: center;
442 align-items: center;
443 -webkit-box-align: center;
444 -ms-flex-align: center;
445 }
446
447 a.pro-upsell:hover {
448 background-color: #5a95f5;
449 -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
450 box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
451 }
452
453 a.pro-upsell span {
454 display: inline-block;
455 margin-right: 10px;
456 color: #fff;
457 }
458
459 a.pro-upsell {
460 display: inline;
461 color: #fff;
462 font-size: 13px;
463 font-weight: bold;
464 }
465
466 /******************************************************************************/
467 /******************************** OTHER STYLES ******************************/
468 /******************************************************************************/
469
470 #thehole {
471 position: absolute;
472 top: 0;
473 left: 0;
474 width: 1px;
475 height: 1px;
476 border: 0;
477 opacity: 0;
478
479 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
480 -moz-opacity: 0;
481 }
482
483 .locker,
484 .locker-loader {
485 position: absolute;
486 top: 0;
487 left: 0;
488 }
489
490 .locker {
491 z-index: 1000;
492 opacity: 0.8;
493 background-color: white;
494
495 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
496 filter: alpha(opacity=80);
497 }
498
499 .locker-loader {
500 z-index: 1001;
501 background: url(../images/ajax-loader.gif) no-repeat center center;
502 }
503
504 .file-wrapper {
505 display: inline-block;
506 width: auto;
507 max-width: 133px;
508 }
509
510 .file {
511 position: fixed;
512 max-width: 138px;
513 margin-top: -6px;
514 margin-left: -33px;
515 opacity: 0;
516 font-size: 22px;
517 cursor: pointer;
518
519 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
520 -moz-opacity: 0;
521 }
522
523 #remote-file {
524 display: inline-block;
525 float: right;
526 margin-left: 6px;
527 }
528
529 .form-inline {
530 display: table;
531 /*margin: 0 auto;*/
532 width: 100%;
533 vertical-align: middle;
534 }
535
536 .computer-btn {
537 overflow: hidden;
538 left: -18px;
539 padding-left: 27px !important;
540 border: medium none rgb(100, 100, 100) !important;
541 border: 1px solid #b0b0b0 !important;
542 color: #646464 !important;
543 background: #e6e6e6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
544 -webkit-box-shadow: none !important;
545 box-shadow: none !important;
546 text-shadow: none!important;
547 font-family: "Open Sans",sans-serif;
548 font-weight: 700;
549 -webkit-transition: all 0.3s ease 0s;
550 transition: all 0.3s ease 0s;
551 }
552
553 .computer-btn:hover {
554 padding-left: 27px !important;
555 border: 1px solid #2f8cea !important;
556 color: white !important;
557 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
558 -webkit-box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
559 -webkit-box-shadow: none !important;
560 box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
561 box-shadow: none !important;
562 -webkit-transition: all 0.3s ease 0s;
563 -webkit-transition: all 0.3s ease;
564 transition: all 0.3s ease 0s;
565 transition: all 0.3s ease;
566 }
567
568 .just-on-pro {
569 width: 250px;
570 height: 100px;
571 margin-bottom: 10px;
572 opacity: 0.8;
573 background: #f5f5f5 url("../images/available_pro.png") no-repeat scroll 0 1px !important;
574 cursor: not-allowed;
575 }
576
577 .from-web {
578 margin-top: 0;
579 margin-bottom: 15px !important;
580 }
581
582 .from-web-btn {
583 padding-left: 25px !important;
584 border: medium none #646464 !important;
585 border: 1px solid #b0b0b0 !important;
586 color: #646464 !important;
587 background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
588 -webkit-box-shadow: none !important;
589 box-shadow: none !important;
590 font-family: "Open Sans",sans-serif;
591 font-weight: 700;
592 -webkit-transition: all 0.3s ease 0s;
593 transition: all 0.3s ease 0s;
594 /*margin-left: 2px !important;*/
595 }
596
597 .from-web-btn:hover {
598 padding-left: 25px !important;
599 /*margin-left: 2px !important;*/
600 border: 1px solid #89b158 !important;
601 color: white !important;
602 background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
603 -webkit-box-shadow: none !important;
604 box-shadow: none !important;
605 -webkit-transition: all 0.3s ease 0s;
606 -webkit-transition: all 0.3s ease;
607 transition: all 0.3s ease 0s;
608 transition: all 0.3s ease;
609 }
610
611 .preview {
612 width: 100%;
613 }
614
615 #sidebar > ul > div.initial-screen > div {
616 padding: 0 20px;
617 }
618
619 .from-chart-btn {
620 padding-left: 25px !important;
621 border: medium none #646464 !important;
622 border: 1px solid #b0b0b0 !important;
623 color: #646464 !important;
624 background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
625 -webkit-box-shadow: none !important;
626 box-shadow: none !important;
627 font-family: "Open Sans",sans-serif;
628 font-weight: 700;
629 -webkit-transition: all 0.3s ease 0s;
630 transition: all 0.3s ease 0s;
631 /*margin-left: 2px !important;
632 margin-top: 2px !important;*/
633 }
634
635 .from-chart-btn:hover {
636 padding-left: 25px !important;
637 /*margin-left: 2px !important;*/
638 border: 1px solid #10aecb !important;
639 color: white !important;
640 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
641 -webkit-box-shadow: none !important;
642 box-shadow: none !important;
643 -webkit-transition: all 0.3s ease 0s;
644 -webkit-transition: all 0.3s ease;
645 transition: all 0.3s ease 0s;
646 transition: all 0.3s ease;
647 /*margin-top: 2px !important;*/
648 }
649
650 input#existing-chart {
651 /*left: 18px;
652 width: 110px;
653 position: relative;*/
654 }
655
656 select#chart-id {
657 float: right;
658 width: 95px;
659 }
660
661 button#editor-chart-button {
662 display: block;
663 margin: 0 auto;
664 border: 1px solid #2c80d6 !important;
665 color: white !important;
666 background-color: #2f8cea !important;
667 -webkit-box-shadow: none !important;
668 box-shadow: none !important;
669 text-shadow: none;
670 -webkit-transition: all 0.3s ease;
671 transition: all 0.3s ease;
672 }
673
674 .preview-btn {
675 border: 1px solid #2c80d6 !important;
676 color: white !important;
677 background-color: #2f8cea !important;
678 -webkit-box-shadow: none !important;
679 box-shadow: none !important;
680 font-family: "Open Sans",sans-serif;
681 font-weight: 700;
682 -webkit-transition: all 0.3s ease;
683 transition: all 0.3s ease;
684 }
685
686 .preview-btn:hover {
687 border: 1px solid #2c80d6 !important;
688 color: white !important;
689 background-color: #2c80d6 !important;
690 -webkit-box-shadow: none !important;
691 box-shadow: none !important;
692 font-family: "Open Sans",sans-serif;
693 font-weight: 700;
694 -webkit-transition: all 0.3s ease;
695 transition: all 0.3s ease;
696 }
697
698 .show-live-btn {
699 width: 100%;
700 margin-top: 15px !important;
701 border-color: #e98b00 !important;
702 background-color: #f90 !important;
703 -webkit-box-shadow: none !important;
704 box-shadow: none !important;
705 font-family: "Open Sans",sans-serif;
706 font-weight: 700;
707 }
708
709 .show-live-btn:hover {
710 width: 100%;
711 margin-top: 15px !important;
712 border-color: #e98b00 !important;
713 background-color: #ea8c00 !important;
714 -webkit-box-shadow: none !important;
715 box-shadow: none !important;
716 font-family: "Open Sans",sans-serif;
717 font-weight: 700;
718 -webkit-transition: all 0.3s ease;
719 transition: all 0.3s ease;
720 }
721
722 .check-pro-btn {
723 display: block;
724 width: 245px;
725 height: 40px;
726 margin: 0 auto;
727 }
728
729 .advanced-settings-btn,
730 .return-settings-btn {
731 display: block;
732 height: auto;
733 margin: 0 auto;
734 margin-top: 5px;
735 margin-bottom: 20px;
736 border-radius: 3px;
737 font-size: 17px;
738 line-height: 34px;
739 cursor: pointer;
740 }
741
742 .return-settings-btn {
743 width: 90%;
744 }
745
746 .advanced-settings-btn {
747 width: 100%;
748 }
749
750 .return-settings-btn {
751 margin: 10px auto;
752 }
753
754 .hidden-setting {
755 display: none;
756 }
757
758 /* ====== RESPONSIVE ====== */
759
760 @media (max-width: 1366px) {
761 .group-title {
762 padding: 4px 20px;
763 font-size: 14px;
764 font-weight: 400;
765 }
766
767 .group-title::after {
768 top: 10px;
769 }
770
771 #rate-stars {
772 margin: 3px 0 10px 40%;
773 }
774
775 .rate-the-plugin {
776 margin-left: -8%;
777 }
778 }
779
780 @media screen and (max-width: 782px) {
781 .button.button-primary.file-wrapper.computer-btn,
782 #remote-file,
783 #existing-chart {
784 height: 28px;
785 margin-bottom: 4px;
786 padding: 0 10px 1px;
787 font-size: 13px;
788 line-height: 26px;
789 vertical-align: middle;
790 }
791 }
792