PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 1.7.6
Visualizer – Tables & Charts Manager with Built-in AI Generator v1.7.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
← All changes | css/frame.css +147 -934 3.10.151.7.6 View file →
@@ -5,9 +5,8 @@
5 5 top: 0;
6 6 right: 0;
7 7 bottom: 60px;
8 8 left: 0;
9 - width: auto;
10 9 background-color: white;
11 10 }
12 11
13 12 #canvas {
@@ -16,31 +15,9 @@
16 15 right: 310px;
17 16 bottom: 10px;
18 17 left: 10px;
19 18 }
20 -#control_wrapper_canvas:not(:empty) {
21 - margin: 15px 0 0 5px;
22 - position: relative;
23 - z-index: 1;
24 -}
25 -#control_wrapper_canvas:not(:empty) + #canvas .google-visualization-table {
26 - top: 60px;
27 -}
28 -.vz-vertical .google-visualization-table {
29 - left: 70px;
30 -}
31 -.google-visualization-controls-categoryfilter label.google-visualization-controls-label {
32 - vertical-align: middle;
33 -}
34 -.google-visualization-controls-categoryfilter li.goog-inline-block {
35 - margin: 0 0.2em;
36 -}
37 -.google-visualization-controls-categoryfilter li {
38 - padding: 0 0.2em;
39 -}
40 -.goog-combobox input {
41 - min-height: auto;
42 -}
19 +
43 20 .loader {
44 21 position: absolute;
45 22 top: 50%;
46 23 left: 50%;
@@ -58,9 +35,9 @@
58 35 z-index: 75;
59 36 top: 0;
60 37 right: 0;
61 38 bottom: 60px;
62 - width: 350px;
39 + width: 299px;
63 40 border-left: 1px solid #dfdfdf;
64 41 background: whitesmoke;
65 42
66 43 -webkit-overflow-scrolling: touch;
@@ -65,166 +42,125 @@
65 42
66 43 -webkit-overflow-scrolling: touch;
67 44 }
68 45
69 -.viz-group {
46 +.group-wrapper {
70 47 margin: 0;
48 + padding: 0;
49 + border-top: 1px solid #dfdfdf;
50 + list-style: none;
51 +}
52 +
53 +.group {
54 + margin: 0;
71 55 font-size: 12px;
72 56 line-height: 18px;
73 57 list-style: none;
74 58 }
75 59
76 -.viz-group .viz-group-header .viz-group-title {
77 - margin: 10px 0;
78 - padding: 15px 20px;
79 - border-top: 1px solid #ddd;
80 - border-bottom: 1px solid #ddd;
81 - color: #555d66;
82 - background: #fff;
60 +.group.open {
61 + border-bottom: 1px solid #dfdfdf;
83 62 }
84 63
85 -.viz-group-wrapper ul .viz-group-title {
86 - border-top: 1px solid #ddd;
87 -}
88 -
89 -.viz-group-wrapper ul li {
90 - border-top: 1px solid #ddd;
91 -}
92 -
93 -.viz-group-wrapper ul ul li.viz-subsection {
94 - margin: 5px;
95 - border: 1px solid #ddd;
96 -}
97 -
98 -.viz-group-wrapper .viz-group .viz-group .viz-group-title {
64 +.group-title {
99 65 position: relative;
100 66 margin: 0;
101 - padding: 10px 10px 11px 14px;
102 - border-top: none;
103 - border-bottom: none;
104 - border-left: 4px solid #fff;
105 - color: #555d66;
106 - background-color: #fff;
107 - font-size: 14px;
108 - font-weight: 600;
109 - line-height: 21px;
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;
110 82 cursor: pointer;
111 - transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
83 + -webkit-user-select: none;
84 + -moz-user-select: none;
85 + -ms-user-select: none;
86 + user-select: none;
112 87 }
113 88
114 -.viz-title-small {
115 - font-size: smaller;
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;
116 101 }
117 102
118 -.viz-group-wrapper .viz-group .viz-group:hover .viz-group-title,
119 -.viz-group-wrapper .viz-group .viz-group.open .viz-group-title {
120 - border-left-color: #0073aa;
121 - color: #0073aa;
122 - background: #f3f3f5;
123 -}
124 -
125 -.viz-group-wrapper .viz-group .viz-group .viz-group-title:after {
103 +.group-title::after {
126 104 position: absolute;
127 105 z-index: 1;
128 - top: 11px;
129 - right: 10px;
130 - color: #a0a5aa;
131 - font: 400 20px/1 dashicons;
132 - content: "\f345";
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: "";
133 114 }
134 115
135 -.viz-group-wrapper .viz-group .viz-group.open .viz-group-title:after {
136 - content: "\f347";
116 +.group-title:hover::after,
117 +.group.open .group-title::after {
118 + border-color: #eee transparent;
137 119 }
138 120
139 -.viz-group-wrapper .viz-group .customize-section-back {
140 - display: block;
141 - float: left;
142 - width: 42px;
143 - height: 49px;
144 - margin: 0 15px 0 0;
145 - padding: 0;
146 - border: none;
147 - border-top: 1px solid #ddd;
148 - border-right: 1px solid #ddd;
149 - border-left: 4px solid #fff;
150 - background: #fff;
151 - box-shadow: none;
152 - cursor: pointer;
153 - transition: color 0.15s ease-in-out,border-color 0.15s ease-in-out,background 0.15s ease-in-out;
121 +.group:hover .group-title {
122 + border-top-color: gray;
154 123 }
155 124
156 -.viz-group-wrapper .viz-group .customize-section-back:hover {
157 - border-left-color: #0073aa;
158 - outline: 0;
159 - color: #0073aa;
160 - background: #f3f3f5;
125 +.group.open .group-title {
126 + border-top-color: #6d6d6d;
161 127 }
162 128
163 -.viz-group-wrapper .viz-group .customize-section-back:before {
164 - position: relative;
165 - top: -11px;
166 - left: -2px;
167 - font: 400 20px/72px dashicons;
168 - content: "\f341";
129 +.group.open .group-title::after {
130 + border-width: 0 6px 6px;
169 131 }
170 132
171 -.viz-group-wrapper.full-height {
172 - float: left;
173 - position: relative;
174 - width: 100%;
175 - height: 100%;
176 - margin: 0;
177 -}
178 -
179 -.viz-group.bottom-fixed {
180 - display: block;
181 - position: absolute;
182 - bottom: 0;
183 - width: 100%;
184 -}
185 -
186 -.viz-group ul li h2,
187 -.viz-group ul li h3 {
188 - padding: 7px 15px 7px 35px;
189 -}
190 -
191 -.viz-group h2 .dashicons,
192 -.viz-group h3 .dashicons {
193 - margin-right: 5px;
194 - vertical-align: -5px;
195 -}
196 -
197 -.viz-group-content {
133 +.group-content {
198 134 display: none;
135 + overflow: hidden;
199 136 margin: 0;
200 - padding: 0;
137 + padding: 10px 0 20px 0;
201 138 background-color: #fdfdfd;
202 139 }
203 140
204 -div.viz-group-content {
205 - padding: 15px;
141 +div.group-content {
142 + padding: 10px 20px 20px;
206 143 }
207 144
208 -.viz-group.open > .viz-group-content {
145 +.group.open .group-content {
209 146 display: block;
210 147 }
211 148
212 -.viz-group-description {
149 +.group-description {
213 150 margin: 0;
214 - padding: 5px;
151 + padding: 5px 20px 10px;
215 152 color: #555;
216 153 font-size: 12px;
217 - text-align: left;
218 154 }
219 155
220 -div.viz-group-content .viz-group-description {
221 - padding: 5px;
156 +div.group-content .group-description {
157 + padding: 0;
222 158 font-family: "Montserrat",sans-serif;
223 159 font-weight: 300;
224 160 }
225 161
226 -.initial-screen .viz-group-description {
162 +.initial-screen .group-description {
227 163 padding: 0;
228 164 padding: 10px 20px 20px;
229 165 font-family: "Montserrat",sans-serif;
230 166 font-weight: 300;
@@ -229,9 +165,9 @@
229 165 font-family: "Montserrat",sans-serif;
230 166 font-weight: 300;
231 167 }
232 168
233 -.viz-section-title {
169 +.section-title {
234 170 display: block;
235 171 position: relative;
236 172 margin-bottom: 5px;
237 173 padding: 4px 20px;
@@ -237,20 +173,15 @@
237 173 padding: 4px 20px;
238 174 border-top: 1px solid #eee;
239 175 border-bottom: 1px solid #eee;
240 176 background-color: rgba(0, 0, 0, 0.02);
177 + -webkit-box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
241 178 box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
242 179 font-weight: bold;
243 180 cursor: pointer;
244 181 }
245 182
246 -.viz-group-wrapper ul ul li .viz-section-title {
247 - margin-bottom: 0;
248 - border: none;
249 - box-shadow: none;
250 -}
251 -
252 -.viz-section-title::after {
183 +.section-title::after {
253 184 position: absolute;
254 185 z-index: 1;
255 186 top: 13px;
256 187 right: 20px;
@@ -261,19 +192,18 @@
261 192 border-color: #ccc transparent;
262 193 content: "";
263 194 }
264 195
265 -.viz-section-title.open::after {
196 +.section-title.open::after {
266 197 border-width: 0 4px 4px;
267 198 }
268 199
269 -.section-items,
270 -.viz-section-items {
200 +.section-items {
271 201 display: none;
272 - padding: 15px;
202 + padding: 5px 20px 10px 20px;
273 203 }
274 204
275 -.viz-section-items.open {
205 +.section-items.open {
276 206 display: block;
277 207 }
278 208
279 209 .more-info {
@@ -284,20 +214,9 @@
284 214 font-weight: normal;
285 215 text-decoration: none;
286 216 }
287 217
288 -.viz-info-msg {
289 - font-weight: bold !important;
290 - font-style: italic;
291 -}
292 -
293 -.viz-info-msg::before {
294 - font-family: dashicons;
295 - content: "\f488";
296 - margin-right: 5px;
297 -}
298 -
299 -.viz-section-description {
218 +.section-description {
300 219 margin: 0;
301 220 /*display: none;*/
302 221 padding: 0;
303 222 color: gray;
@@ -303,19 +222,18 @@
303 222 color: gray;
304 223 font-size: 11px;
305 224 }
306 225
307 -.viz-section-table {
226 +.section-table {
308 227 width: 100%;
309 228 }
310 229
311 -.section-delimiter,
312 -.viz-section-delimiter {
230 +.section-delimiter {
313 231 margin: 15px 0;
314 232 border-top: 1px dashed #ccc;
315 233 }
316 234
317 -.viz-section-table-column {
235 +.section-table-column {
318 236 width: 50%;
319 237 padding: 0 1px;
320 238 text-align: left;
321 239 vertical-align: top;
@@ -320,9 +238,9 @@
320 238 text-align: left;
321 239 vertical-align: top;
322 240 }
323 241
324 -.viz-section-item {
242 +.section-item {
325 243 margin-bottom: 10px;
326 244 }
327 245
328 246 .control-select,
@@ -337,14 +255,14 @@
337 255 .control-check::after {
338 256 clear: both;
339 257 }
340 258
341 -.viz-section-description ul {
259 +.section-description ul {
342 260 margin: 0 0 0 25px;
343 261 list-style: circle;
344 262 }
345 263
346 -.viz-section-description li {
264 +.section-description li {
347 265 margin: 0;
348 266 list-style: circle;
349 267 }
350 268
@@ -379,23 +297,8 @@
379 297 margin-top: 15px;
380 298 text-align: center;
381 299 }
382 300
383 -#viz-tabs {
384 - display: none;
385 -}
386 -
387 -#viz-tabs.done {
388 - display: block;
389 -}
390 -
391 -#viz-tabs .ui-tabs-panel {
392 - padding: 0;
393 -}
394 -
395 -#viz-tabs .wp-color-picker {
396 - width: 4rem !important;
397 -}
398 301 /******************************************************************************/
399 302 /******************************** TOOLBAR ***********************************/
400 303 /******************************************************************************/
401 304
@@ -408,8 +311,9 @@
408 311 left: 0;
409 312 height: 36px;
410 313 padding: 12px 16px;
411 314 border-top: 1px solid #dfdfdf;
315 + -webkit-box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
412 316 box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
413 317 text-align: center;
414 318 }
415 319
@@ -414,15 +318,10 @@
414 318 }
415 319
416 320 #toolbar .push-right {
417 321 float: right;
418 - margin-right: 10px;
419 322 }
420 323
421 -#toolbar .push-left {
422 - float: left;
423 -}
424 -
425 324 .toolbar-div a {
426 325 float: left;
427 326 }
428 327
@@ -447,8 +346,9 @@
447 346 border-top: 1px dashed #ddd;
448 347 border-bottom: 1px dashed #ddd;
449 348 background: #e0e0e0;
450 349 background-color: #efefef;
350 + -webkit-box-shadow: 0 0 8px #ddd;
451 351 box-shadow: 0 0 8px #ddd;
452 352 font-weight: bold;
453 353 text-align: center;
454 354 }
@@ -457,9 +357,9 @@
457 357 color: #c55555;
458 358 }
459 359
460 360 #type-picker {
461 - width: 954px;
361 + width: 952px;
462 362 margin: 50px auto;
463 363 }
464 364
465 365 .type-box {
@@ -467,8 +367,9 @@
467 367 position: relative;
468 368 margin: 0 20px 20px 0;
469 369 border: 1px dashed #ddd;
470 370 background-color: #efefef;
371 + -webkit-box-shadow: 0 0 8px #ddd;
471 372 box-shadow: 0 0 8px #ddd;
472 373 }
473 374
474 375 .type-box:nth-child(3n+3) {
@@ -483,9 +384,8 @@
483 384 height: 10px;
484 385 height: 17px;
485 386 border: none;
486 387 color: #fff;
487 - z-index: 1;
488 388 background: #c55555;
489 389 }
490 390
491 391 .type-label {
@@ -494,23 +394,20 @@
494 394 height: 205px;
495 395 padding: 15px;
496 396 border: 1px solid #e0e0e0;
497 397 background-color: white;
498 - background-image: url(../images/chart_types_v395.png);
398 + background-image: url(../images/chart_types_g.png);
499 399 background-repeat: no-repeat;
500 400 background-position: center center;
501 - background-size: 900px 1150px;
502 - filter: grayscale(100%);
503 401 }
504 402
505 403 .type-label-selected,
506 -.type-box .type-label:hover {
507 -/* background-image: url(../images/chart_types_v340.png);*/
508 - filter: grayscale(0);
404 +.type-box > .type-label:hover {
405 + background-image: url(../images/chart_types.png);
509 406 }
510 407
511 408 .type-box-area .type-label {
512 - background-position: -8px -225px;
409 + background-position: 0 -225px;
513 410 }
514 411
515 412 .type-box-line .type-label {
516 413 background-position: -600px 0;
@@ -524,9 +421,9 @@
524 421 background-position: 0 0;
525 422 }
526 423
527 424 .type-box-gauge .type-label {
528 - background-position: -7px -450px;
425 + background-position: 0 -450px;
529 426 }
530 427
531 428 .type-box-geo .type-label {
532 429 background-position: -600px -450px;
@@ -532,9 +429,9 @@
532 429 background-position: -600px -450px;
533 430 }
534 431
535 432 .type-box-candlestick .type-label {
536 - background-position: -304px -450px;
433 + background-position: -300px -450px;
537 434 }
538 435
539 436 .type-box-bar .type-label {
540 437 background-position: -300px -225px;
@@ -539,38 +436,24 @@
539 436 .type-box-bar .type-label {
540 437 background-position: -300px -225px;
541 438 }
542 439
543 -.type-box-bubble .type-label {
544 - background-position: -604px -906px;
545 -}
546 -
547 440 .type-box-column .type-label {
548 441 background-position: -600px -225px;
549 442 }
550 443
551 -.type-box-dataTable .type-label,
552 -.type-box-table .type-label,
553 -.type-box-tabular .type-label {
444 +.type-box-table .type-label {
554 445 background-position: -301px -670px;
555 446 }
556 447
557 448 .type-box-timeline .type-label {
558 - background-position: -8px -670px;
449 + background-position: -2px -670px;
559 450 }
560 451
561 452 .type-box-combo .type-label {
562 - background-position: -606px -670px;
453 + background-position: -597px -670px;
563 454 }
564 455
565 -.type-box-polarArea .type-label {
566 - background-position: -2px -912px;
567 -}
568 -
569 -.type-box-radar .type-label {
570 - background-position: -301px -899px;
571 -}
572 -
573 456 /******************************************************************************/
574 457 /******************************** OTHER STYLES ******************************/
575 458 /******************************************************************************/
576 459
@@ -647,12 +530,14 @@
647 530 border: medium none rgb(100, 100, 100) !important;
648 531 border: 1px solid #b0b0b0 !important;
649 532 color: #646464 !important;
650 533 background: #e6e6e6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
534 + -webkit-box-shadow: none !important;
651 535 box-shadow: none !important;
652 536 text-shadow: none!important;
653 537 font-family: "Open Sans",sans-serif;
654 538 font-weight: 700;
539 + -webkit-transition: all 0.3s ease 0s;
655 540 transition: all 0.3s ease 0s;
656 541 }
657 542
658 543 .computer-btn:hover {
@@ -659,14 +544,27 @@
659 544 padding-left: 27px !important;
660 545 border: 1px solid #2f8cea !important;
661 546 color: white !important;
662 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;
663 550 box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
664 551 box-shadow: none !important;
552 + -webkit-transition: all 0.3s ease 0s;
553 + -webkit-transition: all 0.3s ease;
665 554 transition: all 0.3s ease 0s;
666 555 transition: all 0.3s ease;
667 556 }
668 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 +
669 567 .from-web {
670 568 margin-top: 0;
671 569 margin-bottom: 15px !important;
672 570 }
@@ -676,11 +574,13 @@
676 574 border: medium none #646464 !important;
677 575 border: 1px solid #b0b0b0 !important;
678 576 color: #646464 !important;
679 577 background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
578 + -webkit-box-shadow: none !important;
680 579 box-shadow: none !important;
681 580 font-family: "Open Sans",sans-serif;
682 581 font-weight: 700;
582 + -webkit-transition: all 0.3s ease 0s;
683 583 transition: all 0.3s ease 0s;
684 584 /*margin-left: 2px !important;*/
685 585 }
686 586
@@ -689,9 +589,12 @@
689 589 /*margin-left: 2px !important;*/
690 590 border: 1px solid #89b158 !important;
691 591 color: white !important;
692 592 background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
593 + -webkit-box-shadow: none !important;
693 594 box-shadow: none !important;
595 + -webkit-transition: all 0.3s ease 0s;
596 + -webkit-transition: all 0.3s ease;
694 597 transition: all 0.3s ease 0s;
695 598 transition: all 0.3s ease;
696 599 }
697 600
@@ -708,11 +611,13 @@
708 611 border: medium none #646464 !important;
709 612 border: 1px solid #b0b0b0 !important;
710 613 color: #646464 !important;
711 614 background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
615 + -webkit-box-shadow: none !important;
712 616 box-shadow: none !important;
713 617 font-family: "Open Sans",sans-serif;
714 618 font-weight: 700;
619 + -webkit-transition: all 0.3s ease 0s;
715 620 transition: all 0.3s ease 0s;
716 621 /*margin-left: 2px !important;
717 622 margin-top: 2px !important;*/
718 623 }
@@ -722,9 +627,12 @@
722 627 /*margin-left: 2px !important;*/
723 628 border: 1px solid #10aecb !important;
724 629 color: white !important;
725 630 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
631 + -webkit-box-shadow: none !important;
726 632 box-shadow: none !important;
633 + -webkit-transition: all 0.3s ease 0s;
634 + -webkit-transition: all 0.3s ease;
727 635 transition: all 0.3s ease 0s;
728 636 transition: all 0.3s ease;
729 637 /*margin-top: 2px !important;*/
730 638 }
@@ -731,15 +639,14 @@
731 639
732 640 input#existing-chart {
733 641 /*left: 18px;
734 642 width: 110px;
735 - position: relative;*/
736 - }
643 + position: relative;*/
644 +}
737 645
738 646 select#chart-id {
739 647 float: right;
740 - width: 146px;
741 - margin-right: 14px;
648 + width: 95px;
742 649 }
743 650
744 651 button#editor-chart-button {
745 652 display: block;
@@ -746,10 +653,12 @@
746 653 margin: 0 auto;
747 654 border: 1px solid #2c80d6 !important;
748 655 color: white !important;
749 656 background-color: #2f8cea !important;
657 + -webkit-box-shadow: none !important;
750 658 box-shadow: none !important;
751 659 text-shadow: none;
660 + -webkit-transition: all 0.3s ease;
752 661 transition: all 0.3s ease;
753 662 }
754 663
755 664 .preview-btn {
@@ -755,11 +664,13 @@
755 664 .preview-btn {
756 665 border: 1px solid #2c80d6 !important;
757 666 color: white !important;
758 667 background-color: #2f8cea !important;
668 + -webkit-box-shadow: none !important;
759 669 box-shadow: none !important;
760 670 font-family: "Open Sans",sans-serif;
761 671 font-weight: 700;
672 + -webkit-transition: all 0.3s ease;
762 673 transition: all 0.3s ease;
763 674 }
764 675
765 676 .preview-btn:hover {
@@ -765,11 +676,13 @@
765 676 .preview-btn:hover {
766 677 border: 1px solid #2c80d6 !important;
767 678 color: white !important;
768 679 background-color: #2c80d6 !important;
680 + -webkit-box-shadow: none !important;
769 681 box-shadow: none !important;
770 682 font-family: "Open Sans",sans-serif;
771 683 font-weight: 700;
684 + -webkit-transition: all 0.3s ease;
772 685 transition: all 0.3s ease;
773 686 }
774 687
775 688 .show-live-btn {
@@ -776,8 +689,9 @@
776 689 width: 100%;
777 690 margin-top: 15px !important;
778 691 border-color: #e98b00 !important;
779 692 background-color: #f90 !important;
693 + -webkit-box-shadow: none !important;
780 694 box-shadow: none !important;
781 695 font-family: "Open Sans",sans-serif;
782 696 font-weight: 700;
783 697 }
@@ -786,11 +700,13 @@
786 700 width: 100%;
787 701 margin-top: 15px !important;
788 702 border-color: #e98b00 !important;
789 703 background-color: #ea8c00 !important;
704 + -webkit-box-shadow: none !important;
790 705 box-shadow: none !important;
791 706 font-family: "Open Sans",sans-serif;
792 707 font-weight: 700;
708 + -webkit-transition: all 0.3s ease;
793 709 transition: all 0.3s ease;
794 710 }
795 711
796 712 .check-pro-btn {
@@ -828,22 +744,21 @@
828 744 .hidden-setting {
829 745 display: none;
830 746 }
831 747
832 -.viz-select-library {
833 - color: #0085ba;
834 -}
835 -.viz-select-library.viz-hide-libary {
836 - display: none;
837 -}
748 +/* ====== RESPONSIVE ====== */
838 749
839 -.viz-select-library option:first-child {
840 - font-weight: bold;
841 -}
750 +@media (max-width: 1366px) {
751 + .group-title {
752 + padding: 4px 20px;
753 + font-size: 14px;
754 + font-weight: 400;
755 + }
842 756
843 -/* ====== RESPONSIVE ====== */
757 + .group-title::after {
758 + top: 10px;
759 + }
844 760
845 -@media (max-width: 1366px) {
846 761 #rate-stars {
847 762 margin: 3px 0 10px 40%;
848 763 }
849 764
@@ -862,707 +777,5 @@
862 777 font-size: 13px;
863 778 line-height: 26px;
864 779 vertical-align: middle;
865 780 }
866 -}
867 -
868 -#vz-chart-settings h2:hover,
869 -#vz-chart-permissions h2:hover,
870 -.sidebar-footer-link h2:hover,
871 -#vz-chart-review a:hover {
872 - text-decoration: none;
873 -}
874 -
875 -#vz-chart-review a {
876 - color: #00a0d2;
877 - text-decoration: none;
878 -}
879 -
880 -#vz-chart-settings h2,
881 -#vz-chart-permissions h2,
882 -.sidebar-footer-link h2,
883 -#vz-chart-review h2 {
884 - padding: 0;
885 - border: none;
886 - font-size: 12px;
887 - font-weight: 400;
888 -}
889 -
890 -#vz-chart-review {
891 - right: 0;
892 - bottom: 10px;
893 - box-sizing: border-box;
894 - width: 40%;
895 - padding-right: 6px;
896 - text-align: right;
897 -}
898 -
899 -#vz-chart-settings.bottom-fixed h2 {
900 - padding-left: 6px;
901 -}
902 -
903 -#vz-chart-settings {
904 - bottom: 40px;
905 - left: 0;
906 - box-sizing: border-box;
907 - width: 33%;
908 - text-align: left;
909 -}
910 -
911 -#vz-chart-permissions:not(.open) h2 {
912 - display: inline-block;
913 - width: 100%;
914 - margin: 0;
915 - text-align: right;
916 -}
917 -
918 -#vz-chart-permissions {
919 - right: 0;
920 - bottom: 40px;
921 - box-sizing: border-box;
922 - width: 33%;
923 - text-align: left;
924 -}
925 -
926 -#vz-chart-permissions h2,
927 -#vz-chart-settings h2,
928 -.sidebar-footer-link h2 {
929 - display: inline;
930 - color: #00a0d2;
931 - background: none;
932 - font-family: "Open Sans",sans-serif;
933 - cursor: pointer;
934 -}
935 -
936 -.sidebar-footer-link,
937 -#vz-chart-review,
938 -#vz-chart-permissions,
939 -#vz-chart-settings {
940 - display: inline;
941 - background: none;
942 - cursor: pointer;
943 -}
944 -
945 -.sidebar-footer-link > ul,
946 -#vz-chart-source > ul,
947 -#vz-chart-permissions > ul,
948 -#vz-chart-settings > ul {
949 - position: relative;
950 - z-index: 10;
951 - border-bottom: 1px solid #ddd;
952 -}
953 -
954 -#vz-chart-copyright {
955 - bottom: 10px;
956 - text-align: center;
957 -}
958 -
959 -#sidebar {
960 - border-left: 1px solid #ddd;
961 - background: #f3f3f3;
962 -}
963 -
964 -#vz-chart-permissions.open h2 {
965 - position: absolute;
966 - right: 6px;
967 - bottom: 28px;
968 - left: auto;
969 - width: 50%;
970 - text-align: right;
971 -}
972 -
973 -#vz-chart-settings.open h2 {
974 - position: absolute;
975 - bottom: 28px;
976 - left: 6px;
977 -}
978 -
979 -#vz-chart-permissions .viz-group-header,
980 -#vz-chart-settings.open .viz-group-header {
981 - display: block;
982 -}
983 -
984 -#vz-chart-permissions .viz-group-header,
985 -#vz-chart-settings .viz-group-header {
986 - display: none;
987 -}
988 -
989 -.sidebar-footer-link.open h2 {
990 - position: absolute;
991 - bottom: 28px;
992 - left: 20px;
993 -}
994 -
995 -.sidebar-footer-link.open .viz-group-header {
996 - display: block;
997 -}
998 -
999 -.sidebar-footer-link .viz-group-header {
1000 - display: none;
1001 -}
1002 -
1003 -#vz-csv-file-form,
1004 -#vz-one-time-import,
1005 -#vz-schedule-import,
1006 -#vz-permissions .only-pro-content,
1007 -.edit-data-content {
1008 - text-align: center;
1009 -}
1010 -
1011 -#csv-file {
1012 - margin: 15px 0;
1013 - padding: 0;
1014 -}
1015 -
1016 -.visualizer-input,
1017 -.visualizer-select {
1018 - width: 100%;
1019 - margin: 0 0 15px;
1020 -}
1021 -
1022 -.viz-group .dashicons-lock {
1023 - display: none;
1024 -}
1025 -
1026 -.only-pro-feature .dashicons-lock {
1027 - display: inline;
1028 -}
1029 -
1030 -.viz-section-title .dashicons,
1031 -.viz-group-title .dashicons {
1032 - width: 18px;
1033 - height: 18px;
1034 - margin-left: 3px;
1035 - font-size: 18px;
1036 -}
1037 -
1038 -.only-pro-feature input,
1039 -.only-pro-feature button,
1040 -.only-pro-feature select {
1041 - cursor: not-allowed !important;
1042 - pointer-events: none;
1043 -}
1044 -
1045 -.only-pro-feature > div {
1046 - position: relative;
1047 -}
1048 -
1049 -.only-pro-content {
1050 - position: absolute;
1051 - top: 0;
1052 - bottom: 0;
1053 - left: 0;
1054 - width: 100%;
1055 - opacity: 0;
1056 - background: rgba(253,253,253,0.9);
1057 - transition: 0.5s ease;
1058 -}
1059 -
1060 -.only-pro-feature:hover .only-pro-content {
1061 - opacity: 1;
1062 -}
1063 -
1064 -.only-pro-container {
1065 - display: table;
1066 - width: 100%;
1067 - height: 100%;
1068 -}
1069 -
1070 -.only-pro-inner {
1071 - display: table-cell;
1072 - vertical-align: middle;
1073 -}
1074 -
1075 -.only-pro-content p {
1076 - margin: 0 0 15px;
1077 - font-size: 14px;
1078 - font-weight: 700;
1079 -}
1080 -
1081 -.only-pro-content a {
1082 - display: inline-block;
1083 - padding: 7px 12px;
1084 - color: #fff;
1085 - background: #3F57E1;
1086 - font-weight: 600;
1087 - text-decoration: none;
1088 - transition: 0.1s ease;
1089 - border-width: 1px;
1090 - border-style: solid;
1091 - border-radius: 3px;
1092 -}
1093 -.only-pro-content .only-pro-container a {
1094 - color: #fff !important;
1095 -}
1096 -
1097 -.only-pro-content a:hover {
1098 - background: #2D419B;
1099 -}
1100 -
1101 -#sidebar::-webkit-scrollbar {
1102 - width: 4px;
1103 -}
1104 -
1105 -#sidebar::-webkit-scrollbar-thumb {
1106 - background: #999;
1107 -}
1108 -
1109 -span.viz-section-error {
1110 - color: #ff000;
1111 -}
1112 -
1113 -#visualizer-error-manual {
1114 - color: #ff595e;
1115 -}
1116 -
1117 -#vz-chart-permissions {
1118 - width: 43%;
1119 -}
1120 -
1121 -#vz-chart-permissions {
1122 - color: #ce484c;
1123 -}
1124 -
1125 -#vz-chart-permissions {
1126 - right: 6px;
1127 - bottom: 40px;
1128 - width: 35%;
1129 -}
1130 -
1131 -#permissions-form .only-pro-feature > ul {
1132 - position: relative;
1133 - text-align: center;
1134 -}
1135 -
1136 -/******************************************************************************/
1137 -/******************************** DB WIZARD ***********************************/
1138 -/******************************************************************************/
1139 -.db-wizard-condition .select-condition {
1140 - display: none;
1141 -}
1142 -
1143 -.db-wizard-condition .select-condition.active {
1144 - display: block;
1145 - max-width: 50%;
1146 - margin-top: 10px;
1147 - padding-top: 10px;
1148 - border-top: 1px solid #eee;
1149 - font-weight: 500;
1150 -}
1151 -
1152 -.db-wizard-results {
1153 - width: calc(100% - 350px);
1154 -}
1155 -
1156 -#db-wizard-form {
1157 - padding: 25px;
1158 -}
1159 -
1160 -.db-wizard-query label {
1161 - display: block;
1162 - min-width: 150px;
1163 - padding: 20px 0 5px;
1164 - color: rgba(0,0,0,0.85);
1165 - font-size: 18px;
1166 - font-weight: 500;
1167 -}
1168 -
1169 -.db-wizard-query .db-wizard-where label,
1170 -.db-wizard-query .db-wizard-from label {
1171 - padding-top: 0;
1172 -}
1173 -
1174 -.db-wizard-query > div:not(:last-child) {
1175 - margin-bottom: 15px;
1176 -}
1177 -
1178 -.db-wizard-query .select-condition > div {
1179 - display: block;
1180 -}
1181 -
1182 -.db-wizard-query .chosen-container {
1183 - width: auto;
1184 -}
1185 -
1186 -.db-wizard-query .chosen-container-single .chosen-single {
1187 - border: 1px solid #ccc;
1188 - background: #fff;
1189 - box-shadow: none;
1190 - font-size: 13px;
1191 - font-weight: 500;
1192 -}
1193 -
1194 -.db-wizard-templates,
1195 -.db-wizard-templates > div {
1196 - display: block;
1197 -}
1198 -
1199 -.db-wizard-templates > div {
1200 - box-sizing: border-box;
1201 - width: 50%;
1202 - margin-top: 20px;
1203 - padding: 20px;
1204 - border: 1px solid #efefef;
1205 -}
1206 -
1207 -.db-wizard-templates > div:first-child {
1208 - margin-top: 0;
1209 -}
1210 -
1211 -.db-wizard-query .chosen-container-multi .chosen-choices {
1212 - padding: 5px;
1213 - border-color: #ccc;
1214 - background: #fff;
1215 - box-shadow: none;
1216 -}
1217 -
1218 -.db-wizard-results .dataTables_wrapper .dataTables_filter input,
1219 -.db-wizard-query .select-condition-operand input,
1220 -.db-wizard-limit input {
1221 - width: 50%;
1222 - padding-left: 7px;
1223 - border: 1px solid #ccc;
1224 - border-radius: 6px;
1225 - background: #fff;
1226 - box-shadow: none;
1227 - font-size: 13px;
1228 -}
1229 -
1230 -.db-wizard-limit input {
1231 - display: inline;
1232 - width: 150px;
1233 - margin: 0 0 20px 20px;
1234 -}
1235 -
1236 -.db-wizard-limit label {
1237 - display: inline;
1238 -}
1239 -
1240 -.db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1241 - color: #cdcdcd;
1242 -}
1243 -
1244 -.db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1245 - color: #cdcdcd;
1246 -}
1247 -
1248 -.db-wizard-query .select-condition-operand input::placeholder {
1249 - color: #cdcdcd;
1250 -}
1251 -
1252 -.db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1253 - padding: 5px 30px 5px 5px;
1254 - border-color: #ccc;
1255 - background: #fff;
1256 - box-shadow: none;
1257 - font-weight: 600;
1258 -}
1259 -
1260 -.db-wizard-results table > thead > tr > th {
1261 - padding: 15px 8px;
1262 - border: none;
1263 - color: #252422;
1264 - background: #fff;
1265 - font-size: 18px;
1266 - font-weight: 500;
1267 - text-align: left;
1268 -}
1269 -
1270 -.db-wizard-results table > tbody > tr > td,
1271 -.dataTables_info {
1272 - padding: 15px 8px;
1273 - border-top: 1px solid #a2a2a2;
1274 - color: #252422;
1275 - font-size: 14px;
1276 - font-weight: 300;
1277 -}
1278 -
1279 -.db-wizard-results table > tbody > tr.odd {
1280 - background-color: #f7f7f7;
1281 -}
1282 -
1283 -.db-wizard-results table.dataTable.no-footer {
1284 - border: none;
1285 -}
1286 -
1287 -.db-wizard-results .dataTables_wrapper .dataTables_info {
1288 - border-top: 1px solid #ccc5b9;
1289 - color: #a2a2a2;
1290 - font-size: 12px;
1291 - font-weight: 500;
1292 -}
1293 -
1294 -.db-wizard-results .dataTables_filter label {
1295 - font-size: 18px;
1296 - font-weight: 500;
1297 -}
1298 -
1299 -.db-wizard-where-template-remove,
1300 -.db-wizard-where-template-add {
1301 - width: auto;
1302 - height: 25px;
1303 - margin-top: 10px;
1304 - border: none;
1305 - border-radius: 3px;
1306 - color: #fff;
1307 - font-size: 12px;
1308 - cursor: pointer;
1309 - transition: 0.3s ease;
1310 -}
1311 -
1312 -.db-wizard-where-template-remove:hover,
1313 -.db-wizard-where-template-add:hover {
1314 - opacity: 0.8;
1315 -}
1316 -
1317 -.db-wizard-results .dataTables_wrapper .dataTables_filter {
1318 - float: none;
1319 - text-align: left;
1320 -}
1321 -
1322 -.db-wizard-where-template-add {
1323 - background-color: #34a85e;
1324 -}
1325 -
1326 -.db-wizard-where-template-remove {
1327 - background-color: #ff0d00;
1328 -}
1329 -
1330 -#db-query-form .CodeMirror-scroll {
1331 - overflow: hidden !important;
1332 - height: 50%;
1333 - margin: 0;
1334 - padding: 0;
1335 -}
1336 -
1337 -#db-query-form .CodeMirror-wrap {
1338 - height: 200px;
1339 - padding: 15px;
1340 - color: #fff;
1341 - background: #282923;
1342 - font-size: 15px;
1343 -}
1344 -
1345 -#db-query-form .CodeMirror-wrap .CodeMirror-cursor {
1346 - border-left: 1px solid #fff !important;
1347 -}
1348 -
1349 -#db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
1350 - color: #fff;
1351 -}
1352 -
1353 -#db-query-form .CodeMirror-wrap pre {
1354 - color: #fff !important;
1355 -}
1356 -
1357 -#db-query-form .CodeMirror-wrap pre .cm-keyword {
1358 - color: #f92472 !important;
1359 -}
1360 -
1361 -#db-query-form .CodeMirror-wrap pre .cm-comment {
1362 - color: #74705d !important;
1363 -}
1364 -
1365 -#db-query-form .CodeMirror-wrap pre .cm-number,
1366 -#db-query-form .CodeMirror-wrap pre .cm-string {
1367 - color: #fff !important;
1368 -}
1369 -
1370 -.visualizer-db-query-form > div {
1371 - display: block;
1372 - width: 15%;
1373 - vertical-align: middle;
1374 -}
1375 -
1376 -#visualizer-db-query {
1377 - padding: 20px;
1378 -}
1379 -
1380 -.visualizer-db-query-form > div:first-child {
1381 - width: 100%;
1382 - margin-bottom: 20px;
1383 -}
1384 -
1385 -.db-wizard-error {
1386 - color: #f00;
1387 -}
1388 -
1389 -.db-wizard-hints,
1390 -.json-wizard-hints,
1391 -.html-table-editor-hints {
1392 - margin-bottom: 30px;
1393 - color: #0085ba;
1394 -}
1395 -
1396 -.db-wizard-hints .visualizer-emboss,
1397 -.db-wizard-hints a,
1398 -.html-table-editor-hints a,
1399 -.json-wizard-hints .visualizer-emboss,
1400 -.json-wizard-hints a {
1401 - color: #f92472;
1402 -}
1403 -
1404 -.db-wizard-hints ul,
1405 -.html-table-editor-hints ul,
1406 -.json-wizard-hints ul {
1407 - list-style: square;
1408 -}
1409 -
1410 -.db-wizard-results .dataTables_wrapper .dataTables_info {
1411 - width: calc(100% - 17px);
1412 -}
1413 -
1414 -
1415 -/******************************************************************************/
1416 -/******************************** data tables *******************************/
1417 -/******************************************************************************/
1418 -.db-wizard-results .dt-button {
1419 - display: none !important;
1420 -}
1421 -
1422 -.dt-button.buttons-print {
1423 - display: none;
1424 -}
1425 -
1426 -/******************************************************************************/
1427 -/******************************** json table *********************************/
1428 -/******************************************************************************/
1429 -#json-conclude-form .results {
1430 - min-width: 10px !important;
1431 -}
1432 -
1433 -#json-conclude-form .json-table {
1434 - width: 85%;
1435 -}
1436 -
1437 -#vz-import-json-url,
1438 -#vz-import-json-root,
1439 -#vz-import-json-paging {
1440 - width: 75%;
1441 -}
1442 -
1443 -#json-conclude-form .json-table,
1444 -#json-conclude-form button#visualizer-json-conclude {
1445 - display: inline-block;
1446 - vertical-align: middle;
1447 -}
1448 -
1449 -.viz-editor-table tbody tr:first-child {
1450 - background-color: #ececec !important;
1451 -}
1452 -
1453 -.viz-editor-table tr th {
1454 - background-color: #cccccc;
1455 -}
1456 -
1457 -.viz-editor-table thead tr th:nth-child(n+1) {
1458 - cursor: move !important;
1459 -}
1460 -
1461 -#json-conclude-form .json-wizard-hints .info,
1462 -.html-table-editor-hints .info {
1463 - margin: 1% 0px;
1464 -}
1465 -
1466 -.viz-step.ui-state-active {
1467 - border-color: #0085BA !important;
1468 - background: #0085BA !important;
1469 - color: #ffffff;
1470 -}
1471 -
1472 -.viz-substep {
1473 - outline: 0 !important;
1474 - border: 0 !important;
1475 - background: none !important;
1476 - text-transform: uppercase;
1477 -}
1478 -
1479 -.viz-substep.ui-state-active {
1480 -}
1481 -
1482 -.viz-substep ~ .ui-accordion-content {
1483 - outline: 0 !important;
1484 - border: 0 !important;
1485 - font-size: smaller;
1486 -}
1487 -
1488 -.viz-substep ~ div {
1489 - display: table;
1490 -}
1491 -
1492 -.viz-substep ~ div > div {
1493 - display: table-row;
1494 -}
1495 -
1496 -.viz-substep ~ div > div div {
1497 - display: table-cell;
1498 - padding: 5px;
1499 -}
1500 -
1501 -.json-wizard-header .field-title {
1502 - position: absolute;
1503 - left: 30px;
1504 -}
1505 -/******************************************************************************/
1506 -/******************************** html table editor **************************/
1507 -/******************************************************************************/
1508 -.viz-simple-editor-type,
1509 -.viz-simple-editor {
1510 - display: none;
1511 -}
1512 -
1513 -.viz-table-editor {
1514 - width: 75%;
1515 - margin-left: 2%;
1516 -}
1517 -
1518 -.viz-html-table,
1519 -button#visualizer-save-html-table {
1520 - display: inline-block;
1521 - vertical-align: middle;
1522 -}
1523 -
1524 -
1525 -/******************************************************************************/
1526 -/******************************** text area editor **************************/
1527 -/******************************************************************************/
1528 -.viz-text-editor {
1529 - padding: 20px;
1530 - z-index: 9999;
1531 - box-sizing: border-box;
1532 - padding-right: 320px;
1533 -}
1534 -
1535 -.viz-text-editor textarea {
1536 - width: 85%;
1537 - overflow: auto;
1538 - background: #282923;
1539 - color: #ffffff;
1540 - padding: 15px;
1541 - height: 400px;
1542 - font-size: 15px;
1543 -}
1544 -
1545 -.viz-text-editor textarea,
1546 -button#viz-text-editor-button {
1547 - display: inline-block;
1548 - vertical-align: middle;
1549 -}
1550 -
1551 -.viz-simple-editor .viz-html-table {
1552 - width: 95%;
1553 -}
1554 -
1555 -/******************************************************************************/
1556 -/******************************** chartjs ***********************************/
1557 -/******************************************************************************/
1558 -
1559 -canvas.chartjs-render-monitor {
1560 - height: 500px !important;
1561 -}
1562 -
1563 -/******************************************************************************/
1564 -/******************************** Frontend Actions ***********************************/
1565 -/******************************************************************************/
1566 -#vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner {
1567 - text-align: center;
1568 781 }