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.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.3, at css/frame.css

705 lines 14.8 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 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 }
705