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

730 lines 14.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 .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 display: inline-block;
435 width: auto;
436 max-width: 133px;
437 }
438
439 .file {
440 font-size: 22px;
441 position: fixed;
442 opacity: 0;
443 margin-left: -33px;
444 margin-top: -6px;
445 -moz-opacity: 0;
446 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
447 cursor: pointer;
448 max-width: 138px;
449 }
450
451 #remote-file {
452 float: right;
453 display: inline-block;
454 margin-left: 6px;
455 }
456
457 .form-inline {
458 /*margin: 0 auto;*/
459 width:100%;
460 display: table;
461 vertical-align: middle;
462 }
463
464 .computer-btn{
465 color: #646464 !important;
466 border: medium none rgb(100, 100, 100) !important;
467 background: #E6E6E6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
468 padding-left: 27px !important;
469 transition: all 0.3s ease 0s;
470 font-family: "Open Sans",sans-serif;
471 font-weight: 700;
472 border: 1px solid #B0B0B0 !important;
473 box-shadow: none !important;
474 text-shadow:none!important;
475 left: -18px;
476 overflow: hidden;
477
478 }
479
480 .computer-btn:hover{
481 color: white !important;
482 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
483 transition: all 0.3s ease 0s;
484 padding-left: 27px !important;
485 -webkit-transition: all .3s ease;
486 -moz-transition: all .3s ease;
487 -ms-transition: all .3s ease;
488 -o-transition: all .3s ease;
489 transition: all .3s ease;
490 box-shadow: 0px 1px 0px rgba(171, 171, 171, 0.5) inset, 0px 1px 0px rgba(0, 0, 0, 0.15) !important;
491 border: 1px solid #2f8cea !important;
492 box-shadow: none !important;
493
494
495 }
496
497 .just-on-pro{
498 background: #F5F5F5 url("../images/available_pro.png") no-repeat scroll 0px 1px !important;
499 width: 250px;
500 height: 100px;
501 cursor:not-allowed;
502 opacity: 0.8;
503 margin-bottom: 10px;
504 }
505
506
507
508 .from-web{
509 margin-top: 0px;
510 margin-bottom: 15px !important;
511 }
512
513 .from-web-btn{
514 color: #646464 !important;
515 border: medium none #646464 !important;
516 background: #E6E6E6 url("../images/web.png") no-repeat scroll 7px 1px !important;
517 padding-left: 25px !important;
518 transition: all 0.3s ease 0s;
519 border: 1px solid #B0B0B0 !important;
520 box-shadow: none !important;
521 font-family: "Open Sans",sans-serif;
522 font-weight: 700;
523 /*margin-left: 2px !important;*/
524 }
525
526 .from-web-btn:hover{
527 color: white !important;
528 background: #89B158 url("../images/web.png") no-repeat scroll 7px -38px !important;
529 transition: all 0.3s ease 0s;
530 padding-left: 25px !important;
531 -webkit-transition: all .3s ease;
532 -moz-transition: all .3s ease;
533 -ms-transition: all .3s ease;
534 -o-transition: all .3s ease;
535 transition: all .3s ease;
536 /*margin-left: 2px !important;*/
537 border: 1px solid #89B158 !important;
538 box-shadow: none !important;
539 }
540
541 .preview{
542 width: 100%;
543 }
544
545
546 #sidebar > ul > div.initial-screen > div {
547 padding: 0 20px;
548 }
549
550 .from-chart-btn{
551 color: #646464 !important;
552 border: medium none #646464 !important;
553 background: #E6E6E6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
554 padding-left: 25px !important;
555 transition: all 0.3s ease 0s;
556 border: 1px solid #B0B0B0 !important;
557 box-shadow: none !important;
558 font-family: "Open Sans",sans-serif;
559 font-weight: 700;
560 /*margin-left: 2px !important;
561 margin-top: 2px !important;*/
562 }
563
564 .from-chart-btn:hover{
565 color: white !important;
566 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
567 transition: all 0.3s ease 0s;
568 padding-left: 25px !important;
569 -webkit-transition: all .3s ease;
570 -moz-transition: all .3s ease;
571 -ms-transition: all .3s ease;
572 -o-transition: all .3s ease;
573 transition: all .3s ease;
574 /*margin-left: 2px !important;*/
575 border: 1px solid #10aecb !important;
576 box-shadow: none !important;
577 /*margin-top: 2px !important;*/
578 }
579
580 input#existing-chart {
581 /*left: 18px;
582 width: 110px;
583 position: relative;*/
584 }
585
586 select#chart-id {
587 float: right;
588 width: 95px;
589 }
590
591 button#editor-chart-button {
592 margin: 0 auto;
593 display: block;
594 background-color: #2f8cea !important;
595 color: white !important;
596 border: 1px solid #2c80d6 !important;
597 box-shadow: none !important;
598 -webkit-transition: all .3s ease;
599 -moz-transition: all .3s ease;
600 -ms-transition: all .3s ease;
601 -o-transition: all .3s ease;
602 transition: all .3s ease;
603 text-shadow: none;
604 }
605
606 .preview-btn{
607 font-family: "Open Sans",sans-serif;
608 font-weight: 700;
609 background-color: #2f8cea !important;
610 color: white !important;
611 border: 1px solid #2c80d6 !important;
612 box-shadow: none !important;
613 -webkit-transition: all .3s ease;
614 -moz-transition: all .3s ease;
615 -ms-transition: all .3s ease;
616 -o-transition: all .3s ease;
617 transition: all .3s ease;
618 }
619
620 .preview-btn:hover{
621 font-family: "Open Sans",sans-serif;
622 font-weight: 700;
623 background-color: #2c80d6 !important;
624 color: white !important;
625 border: 1px solid #2c80d6 !important;
626 box-shadow: none !important;
627 -webkit-transition: all .3s ease;
628 -moz-transition: all .3s ease;
629 -ms-transition: all .3s ease;
630 -o-transition: all .3s ease;
631 transition: all .3s ease;
632 }
633
634 .show-live-btn{
635 margin-top: 15px !important;
636 width: 100%;
637 background-color: #F90 !important;
638 border-color: #E98B00 !important;
639 font-family: "Open Sans",sans-serif;
640 font-weight: 700;
641 box-shadow: none !important;
642 }
643
644
645 .show-live-btn:hover{
646 margin-top: 15px !important;
647 width: 100%;
648 background-color: #ea8c00 !important;
649 border-color: #E98B00 !important;
650 font-family: "Open Sans",sans-serif;
651 font-weight: 700;
652 box-shadow: none !important;
653 -webkit-transition: all .3s ease;
654 -moz-transition: all .3s ease;
655 -ms-transition: all .3s ease;
656 -o-transition: all .3s ease;
657 transition: all .3s ease;
658 }
659
660 .check-pro-btn {
661 height: 40px;
662 width: 245px;
663 display: block;
664 margin: 0 auto;
665 }
666
667 .advanced-settings-btn, .return-settings-btn {
668 cursor: pointer;
669 display: block;
670 margin: 0 auto;
671 line-height: 34px;
672 font-size: 17px;
673 height: auto;
674 -webkit-border-radius: 3px;
675 -moz-border-radius: 3px;
676 border-radius: 3px;
677 margin-bottom: 20px;
678 margin-top:5px;
679 }
680
681 .return-settings-btn {
682 width: 90%;
683 }
684
685 .advanced-settings-btn {
686 width: 100%;
687 }
688
689 .return-settings-btn {
690 margin: 10px auto;
691 }
692
693 .hidden-setting {
694 display:none;
695 }
696
697
698
699 /* ====== RESPONSIVE ====== */
700
701
702 @media (max-width: 1366px) {
703 .group-title {
704 padding: 4px 20px;
705 font-weight: 400;
706 font-size: 14px;
707 }
708 .group-title::after {
709 top: 10px;
710 }
711 #rate-stars {
712 margin: 3px 0 10px 40%;
713 }
714 .rate-the-plugin {
715 margin-left: -8%;
716 }
717 }
718
719 @media screen and (max-width: 782px) {
720 .button.button-primary.file-wrapper.computer-btn, #remote-file, #existing-chart {
721 padding: 0 10px 1px;
722 line-height: 26px;
723 font-size: 13px;
724 vertical-align: middle;
725 height: 28px;
726 margin-bottom: 4px;
727 }
728
729 }
730