PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 1.7.5
Visualizer – Tables & Charts Manager with Built-in AI Generator v1.7.5
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.5, at css/frame.css

782 lines 15.3 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-box span {
340 display: block;
341 position: absolute;
342 right: 0;
343 bottom: -6px;
344 width: 100%;
345 padding: 4px 0;
346 border-top: 1px dashed #ddd;
347 border-bottom: 1px dashed #ddd;
348 background: #e0e0e0;
349 background-color: #efefef;
350 -webkit-box-shadow: 0 0 8px #ddd;
351 box-shadow: 0 0 8px #ddd;
352 font-weight: bold;
353 text-align: center;
354 }
355
356 .type-box .pro-upsell {
357 color: #c55555;
358 }
359
360 #type-picker {
361 width: 952px;
362 margin: 50px auto;
363 }
364
365 .type-box {
366 float: left;
367 position: relative;
368 margin: 0 20px 20px 0;
369 border: 1px dashed #ddd;
370 background-color: #efefef;
371 -webkit-box-shadow: 0 0 8px #ddd;
372 box-shadow: 0 0 8px #ddd;
373 }
374
375 .type-box:nth-child(3n+3) {
376 margin-right: 0;
377 }
378
379 .type-box .pro-upsell .visualizder-pro-label {
380 display: inline;
381 position: absolute;
382 top: 0;
383 width: 74px;
384 height: 10px;
385 height: 17px;
386 border: none;
387 color: #fff;
388 background: #c55555;
389 }
390
391 .type-label {
392 display: block;
393 width: 270px;
394 height: 205px;
395 padding: 15px;
396 border: 1px solid #e0e0e0;
397 background-color: white;
398 background-image: url(../images/chart_types_g.png);
399 background-repeat: no-repeat;
400 background-position: center center;
401 }
402
403 .type-label-selected,
404 .type-box > .type-label:hover {
405 background-image: url(../images/chart_types.png);
406 }
407
408 .type-box-area .type-label {
409 background-position: 0 -225px;
410 }
411
412 .type-box-line .type-label {
413 background-position: -600px 0;
414 }
415
416 .type-box-scatter .type-label {
417 background-position: -300px 0;
418 }
419
420 .type-box-pie .type-label {
421 background-position: 0 0;
422 }
423
424 .type-box-gauge .type-label {
425 background-position: 0 -450px;
426 }
427
428 .type-box-geo .type-label {
429 background-position: -600px -450px;
430 }
431
432 .type-box-candlestick .type-label {
433 background-position: -300px -450px;
434 }
435
436 .type-box-bar .type-label {
437 background-position: -300px -225px;
438 }
439
440 .type-box-column .type-label {
441 background-position: -600px -225px;
442 }
443
444 .type-box-table .type-label {
445 background-position: -301px -670px;
446 }
447
448 .type-box-timeline .type-label {
449 background-position: -2px -670px;
450 }
451
452 .type-box-combo .type-label {
453 background-position: -597px -670px;
454 }
455
456 /******************************************************************************/
457 /******************************** OTHER STYLES ******************************/
458 /******************************************************************************/
459
460 #thehole {
461 position: absolute;
462 top: 0;
463 left: 0;
464 width: 1px;
465 height: 1px;
466 border: 0;
467 opacity: 0;
468
469 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
470 -moz-opacity: 0;
471 }
472
473 .locker,
474 .locker-loader {
475 position: absolute;
476 top: 0;
477 left: 0;
478 }
479
480 .locker {
481 z-index: 1000;
482 opacity: 0.8;
483 background-color: white;
484
485 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
486 filter: alpha(opacity=80);
487 }
488
489 .locker-loader {
490 z-index: 1001;
491 background: url(../images/ajax-loader.gif) no-repeat center center;
492 }
493
494 .file-wrapper {
495 display: inline-block;
496 width: auto;
497 max-width: 133px;
498 }
499
500 .file {
501 position: fixed;
502 max-width: 138px;
503 margin-top: -6px;
504 margin-left: -33px;
505 opacity: 0;
506 font-size: 22px;
507 cursor: pointer;
508
509 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
510 -moz-opacity: 0;
511 }
512
513 #remote-file {
514 display: inline-block;
515 float: right;
516 margin-left: 6px;
517 }
518
519 .form-inline {
520 display: table;
521 /*margin: 0 auto;*/
522 width: 100%;
523 vertical-align: middle;
524 }
525
526 .computer-btn {
527 overflow: hidden;
528 left: -18px;
529 padding-left: 27px !important;
530 border: medium none rgb(100, 100, 100) !important;
531 border: 1px solid #b0b0b0 !important;
532 color: #646464 !important;
533 background: #e6e6e6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
534 -webkit-box-shadow: none !important;
535 box-shadow: none !important;
536 text-shadow: none!important;
537 font-family: "Open Sans",sans-serif;
538 font-weight: 700;
539 -webkit-transition: all 0.3s ease 0s;
540 transition: all 0.3s ease 0s;
541 }
542
543 .computer-btn:hover {
544 padding-left: 27px !important;
545 border: 1px solid #2f8cea !important;
546 color: white !important;
547 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
548 -webkit-box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
549 -webkit-box-shadow: none !important;
550 box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
551 box-shadow: none !important;
552 -webkit-transition: all 0.3s ease 0s;
553 -webkit-transition: all 0.3s ease;
554 transition: all 0.3s ease 0s;
555 transition: all 0.3s ease;
556 }
557
558 .just-on-pro {
559 width: 250px;
560 height: 100px;
561 margin-bottom: 10px;
562 opacity: 0.8;
563 background: #f5f5f5 url("../images/available_pro.png") no-repeat scroll 0 1px !important;
564 cursor: not-allowed;
565 }
566
567 .from-web {
568 margin-top: 0;
569 margin-bottom: 15px !important;
570 }
571
572 .from-web-btn {
573 padding-left: 25px !important;
574 border: medium none #646464 !important;
575 border: 1px solid #b0b0b0 !important;
576 color: #646464 !important;
577 background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
578 -webkit-box-shadow: none !important;
579 box-shadow: none !important;
580 font-family: "Open Sans",sans-serif;
581 font-weight: 700;
582 -webkit-transition: all 0.3s ease 0s;
583 transition: all 0.3s ease 0s;
584 /*margin-left: 2px !important;*/
585 }
586
587 .from-web-btn:hover {
588 padding-left: 25px !important;
589 /*margin-left: 2px !important;*/
590 border: 1px solid #89b158 !important;
591 color: white !important;
592 background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
593 -webkit-box-shadow: none !important;
594 box-shadow: none !important;
595 -webkit-transition: all 0.3s ease 0s;
596 -webkit-transition: all 0.3s ease;
597 transition: all 0.3s ease 0s;
598 transition: all 0.3s ease;
599 }
600
601 .preview {
602 width: 100%;
603 }
604
605 #sidebar > ul > div.initial-screen > div {
606 padding: 0 20px;
607 }
608
609 .from-chart-btn {
610 padding-left: 25px !important;
611 border: medium none #646464 !important;
612 border: 1px solid #b0b0b0 !important;
613 color: #646464 !important;
614 background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
615 -webkit-box-shadow: none !important;
616 box-shadow: none !important;
617 font-family: "Open Sans",sans-serif;
618 font-weight: 700;
619 -webkit-transition: all 0.3s ease 0s;
620 transition: all 0.3s ease 0s;
621 /*margin-left: 2px !important;
622 margin-top: 2px !important;*/
623 }
624
625 .from-chart-btn:hover {
626 padding-left: 25px !important;
627 /*margin-left: 2px !important;*/
628 border: 1px solid #10aecb !important;
629 color: white !important;
630 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
631 -webkit-box-shadow: none !important;
632 box-shadow: none !important;
633 -webkit-transition: all 0.3s ease 0s;
634 -webkit-transition: all 0.3s ease;
635 transition: all 0.3s ease 0s;
636 transition: all 0.3s ease;
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 display: block;
653 margin: 0 auto;
654 border: 1px solid #2c80d6 !important;
655 color: white !important;
656 background-color: #2f8cea !important;
657 -webkit-box-shadow: none !important;
658 box-shadow: none !important;
659 text-shadow: none;
660 -webkit-transition: all 0.3s ease;
661 transition: all 0.3s ease;
662 }
663
664 .preview-btn {
665 border: 1px solid #2c80d6 !important;
666 color: white !important;
667 background-color: #2f8cea !important;
668 -webkit-box-shadow: none !important;
669 box-shadow: none !important;
670 font-family: "Open Sans",sans-serif;
671 font-weight: 700;
672 -webkit-transition: all 0.3s ease;
673 transition: all 0.3s ease;
674 }
675
676 .preview-btn:hover {
677 border: 1px solid #2c80d6 !important;
678 color: white !important;
679 background-color: #2c80d6 !important;
680 -webkit-box-shadow: none !important;
681 box-shadow: none !important;
682 font-family: "Open Sans",sans-serif;
683 font-weight: 700;
684 -webkit-transition: all 0.3s ease;
685 transition: all 0.3s ease;
686 }
687
688 .show-live-btn {
689 width: 100%;
690 margin-top: 15px !important;
691 border-color: #e98b00 !important;
692 background-color: #f90 !important;
693 -webkit-box-shadow: none !important;
694 box-shadow: none !important;
695 font-family: "Open Sans",sans-serif;
696 font-weight: 700;
697 }
698
699 .show-live-btn:hover {
700 width: 100%;
701 margin-top: 15px !important;
702 border-color: #e98b00 !important;
703 background-color: #ea8c00 !important;
704 -webkit-box-shadow: none !important;
705 box-shadow: none !important;
706 font-family: "Open Sans",sans-serif;
707 font-weight: 700;
708 -webkit-transition: all 0.3s ease;
709 transition: all 0.3s ease;
710 }
711
712 .check-pro-btn {
713 display: block;
714 width: 245px;
715 height: 40px;
716 margin: 0 auto;
717 }
718
719 .advanced-settings-btn,
720 .return-settings-btn {
721 display: block;
722 height: auto;
723 margin: 0 auto;
724 margin-top: 5px;
725 margin-bottom: 20px;
726 border-radius: 3px;
727 font-size: 17px;
728 line-height: 34px;
729 cursor: pointer;
730 }
731
732 .return-settings-btn {
733 width: 90%;
734 }
735
736 .advanced-settings-btn {
737 width: 100%;
738 }
739
740 .return-settings-btn {
741 margin: 10px auto;
742 }
743
744 .hidden-setting {
745 display: none;
746 }
747
748 /* ====== RESPONSIVE ====== */
749
750 @media (max-width: 1366px) {
751 .group-title {
752 padding: 4px 20px;
753 font-size: 14px;
754 font-weight: 400;
755 }
756
757 .group-title::after {
758 top: 10px;
759 }
760
761 #rate-stars {
762 margin: 3px 0 10px 40%;
763 }
764
765 .rate-the-plugin {
766 margin-left: -8%;
767 }
768 }
769
770 @media screen and (max-width: 782px) {
771 .button.button-primary.file-wrapper.computer-btn,
772 #remote-file,
773 #existing-chart {
774 height: 28px;
775 margin-bottom: 4px;
776 padding: 0 10px 1px;
777 font-size: 13px;
778 line-height: 26px;
779 vertical-align: middle;
780 }
781 }
782