PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.11.7
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.11.7
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 +397 -36 3.1.23.11.7 View file →
@@ -16,9 +16,31 @@
16 16 right: 310px;
17 17 bottom: 10px;
18 18 left: 10px;
19 19 }
20 -
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 +}
21 43 .loader {
22 44 position: absolute;
23 45 top: 50%;
24 46 left: 50%;
@@ -36,9 +58,9 @@
36 58 z-index: 75;
37 59 top: 0;
38 60 right: 0;
39 61 bottom: 60px;
40 - width: 299px;
62 + width: 350px;
41 63 border-left: 1px solid #dfdfdf;
42 64 background: whitesmoke;
43 65
44 66 -webkit-overflow-scrolling: touch;
@@ -88,8 +110,12 @@
88 110 cursor: pointer;
89 111 transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
90 112 }
91 113
114 +.viz-title-small {
115 + font-size: smaller;
116 +}
117 +
92 118 .viz-group-wrapper .viz-group .viz-group:hover .viz-group-title,
93 119 .viz-group-wrapper .viz-group .viz-group.open .viz-group-title {
94 120 border-left-color: #0073aa;
95 121 color: #0073aa;
@@ -258,8 +284,19 @@
258 284 font-weight: normal;
259 285 text-decoration: none;
260 286 }
261 287
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 +
262 299 .viz-section-description {
263 300 margin: 0;
264 301 /*display: none;*/
265 302 padding: 0;
@@ -342,8 +379,54 @@
342 379 margin-top: 15px;
343 380 text-align: center;
344 381 }
345 382
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 +
399 +.viz-info-panel {
400 + display: flex;
401 + flex-direction: column;
402 + padding: 10px;
403 + gap: 10px;
404 +}
405 +
406 +.viz-info-panel label {
407 + margin: 0;
408 + padding: 0;
409 + font-weight: bold;
410 +}
411 +
412 +.viz-info-panel input {
413 + flex: 1;
414 +}
415 +
416 +.viz-info-panel .viz-info-item {
417 + display: flex;
418 + flex-direction: column;
419 + flex: 1;
420 + gap: 3px;
421 +}
422 +
423 +.viz-info-panel .viz-info-row {
424 + display: flex;
425 + flex-direction: row;
426 + gap: 5px;
427 +}
428 +
346 429 /******************************************************************************/
347 430 /******************************** TOOLBAR ***********************************/
348 431 /******************************************************************************/
349 432
@@ -362,8 +445,9 @@
362 445 }
363 446
364 447 #toolbar .push-right {
365 448 float: right;
449 + margin-right: 10px;
366 450 }
367 451
368 452 #toolbar .push-left {
369 453 float: left;
@@ -379,8 +463,20 @@
379 463 width: 30%;
380 464 vertical-align: top;
381 465 }
382 466
467 +#chart-select {
468 + display: flex;
469 + padding: 12px 8px;
470 + justify-content: center;
471 + align-items: center;
472 + gap: 12px;
473 +}
474 +
475 +#chart-select label {
476 + font-weight: bold;
477 +}
478 +
383 479 /******************************************************************************/
384 480 /******************************** TYPE PICKER ******************************/
385 481 /******************************************************************************/
386 482
@@ -417,9 +513,17 @@
417 513 background-color: #efefef;
418 514 box-shadow: 0 0 8px #ddd;
419 515 }
420 516
421 -.type-box:nth-child(3n+3) {
517 +.type-box.viz-hidden {
518 + display: none;
519 +}
520 +
521 +.type-box.viz-hidden {
522 + display: none;
523 +}
524 +
525 +.type-box:nth-child(3n+1) {
422 526 margin-right: 0;
423 527 }
424 528
425 529 .type-box .pro-upsell .visualizder-pro-label {
@@ -430,8 +534,9 @@
430 534 height: 10px;
431 535 height: 17px;
432 536 border: none;
433 537 color: #fff;
538 + z-index: 4;
434 539 background: #c55555;
435 540 }
436 541
437 542 .type-label {
@@ -440,20 +545,32 @@
440 545 height: 205px;
441 546 padding: 15px;
442 547 border: 1px solid #e0e0e0;
443 548 background-color: white;
444 - background-image: url(../images/chart_types_g.png);
549 + background-image: url(../images/chart_types_v395.png);
445 550 background-repeat: no-repeat;
446 551 background-position: center center;
552 + background-size: 900px 1150px;
553 + filter: grayscale(100%);
554 + cursor: pointer;
447 555 }
448 556
557 +#type-picker.lib-ChartJS .type-label {
558 + background-image: url(../images/chart_types_chartjs.png);
559 +}
560 +
561 +#type-picker.lib-DataTable .type-label {
562 + background-image: url(../images/chart_types_datatable.png);
563 +}
564 +
449 565 .type-label-selected,
450 -.type-box > .type-label:hover {
451 - background-image: url(../images/chart_types.png);
566 +.type-box .type-label:hover {
567 +/* background-image: url(../images/chart_types_v340.png);*/
568 + filter: grayscale(0);
452 569 }
453 570
454 571 .type-box-area .type-label {
455 - background-position: 0 -225px;
572 + background-position: -8px -225px;
456 573 }
457 574
458 575 .type-box-line .type-label {
459 576 background-position: -600px 0;
@@ -467,9 +584,9 @@
467 584 background-position: 0 0;
468 585 }
469 586
470 587 .type-box-gauge .type-label {
471 - background-position: 0 -450px;
588 + background-position: -7px -450px;
472 589 }
473 590
474 591 .type-box-geo .type-label {
475 592 background-position: -600px -450px;
@@ -475,9 +592,9 @@
475 592 background-position: -600px -450px;
476 593 }
477 594
478 595 .type-box-candlestick .type-label {
479 - background-position: -300px -450px;
596 + background-position: -304px -450px;
480 597 }
481 598
482 599 .type-box-bar .type-label {
483 600 background-position: -300px -225px;
@@ -482,28 +599,38 @@
482 599 .type-box-bar .type-label {
483 600 background-position: -300px -225px;
484 601 }
485 602
603 +.type-box-bubble .type-label {
604 + background-position: -604px -906px;
605 +}
606 +
486 607 .type-box-column .type-label {
487 608 background-position: -600px -225px;
488 609 }
489 610
490 -.type-box-dataTable .type-label {
611 +.type-box-dataTable .type-label,
612 +.type-box-table .type-label,
613 +.type-box-tabular .type-label {
491 614 background-position: -301px -670px;
492 615 }
493 616
494 -.type-box-table .type-label {
495 - background-position: -301px -670px;
617 +.type-box-timeline .type-label {
618 + background-position: -8px -670px;
496 619 }
497 620
498 -.type-box-timeline .type-label {
499 - background-position: -2px -670px;
621 +.type-box-combo .type-label {
622 + background-position: -606px -670px;
500 623 }
501 624
502 -.type-box-combo .type-label {
503 - background-position: -597px -670px;
625 +.type-box-polarArea .type-label {
626 + background-position: -2px -912px;
504 627 }
505 628
629 +.type-box-radar .type-label {
630 + background-position: -301px -899px;
631 +}
632 +
506 633 /******************************************************************************/
507 634 /******************************** OTHER STYLES ******************************/
508 635 /******************************************************************************/
509 636
@@ -664,10 +791,10 @@
664 791
665 792 input#existing-chart {
666 793 /*left: 18px;
667 794 width: 110px;
668 - position: relative;*/
669 -}
795 + position: relative;*/
796 + }
670 797
671 798 select#chart-id {
672 799 float: right;
673 800 width: 146px;
@@ -761,8 +888,19 @@
761 888 .hidden-setting {
762 889 display: none;
763 890 }
764 891
892 +.viz-select-library {
893 + color: #0085ba;
894 +}
895 +.viz-select-library.viz-hide-library {
896 + display: none;
897 +}
898 +
899 +.viz-select-library option:first-child {
900 + font-weight: bold;
901 +}
902 +
765 903 /* ====== RESPONSIVE ====== */
766 904
767 905 @media (max-width: 1366px) {
768 906 #rate-stars {
@@ -924,8 +1062,9 @@
924 1062
925 1063 #vz-csv-file-form,
926 1064 #vz-one-time-import,
927 1065 #vz-schedule-import,
1066 +#vz-permissions .only-pro-content,
928 1067 .edit-data-content {
929 1068 text-align: center;
930 1069 }
931 1070
@@ -982,16 +1121,20 @@
982 1121 opacity: 1;
983 1122 }
984 1123
985 1124 .only-pro-container {
986 - display: table;
1125 + display: flex;
1126 + align-items: center;
1127 + justify-content: center;
987 1128 width: 100%;
988 1129 height: 100%;
989 1130 }
990 1131
991 1132 .only-pro-inner {
992 - display: table-cell;
993 - vertical-align: middle;
1133 + display: flex;
1134 + flex-direction: column;
1135 + align-items: center;
1136 + justify-content: center;
994 1137 }
995 1138
996 1139 .only-pro-content p {
997 1140 margin: 0 0 15px;
@@ -1002,19 +1145,28 @@
1002 1145 .only-pro-content a {
1003 1146 display: inline-block;
1004 1147 padding: 7px 12px;
1005 1148 color: #fff;
1006 - background: #ff595e;
1149 + background: #3F57E1;
1007 1150 font-weight: 600;
1008 1151 text-decoration: none;
1009 - text-transform: uppercase;
1010 1152 transition: 0.1s ease;
1153 + border-width: 1px;
1154 + border-style: solid;
1155 + border-radius: 3px;
1011 1156 }
1157 +.only-pro-content .only-pro-container a {
1158 + color: #fff !important;
1159 +}
1012 1160
1013 1161 .only-pro-content a:hover {
1014 - background: #ce484c;
1162 + background: #2D419B;
1015 1163 }
1016 1164
1165 +.only-pro-anchor {
1166 + position: relative;
1167 +}
1168 +
1017 1169 #sidebar::-webkit-scrollbar {
1018 1170 width: 4px;
1019 1171 }
1020 1172
@@ -1242,15 +1394,8 @@
1242 1394 .db-wizard-where-template-remove {
1243 1395 background-color: #ff0d00;
1244 1396 }
1245 1397
1246 -#db-query-form .CodeMirror-scroll {
1247 - overflow: hidden !important;
1248 - height: 50%;
1249 - margin: 0;
1250 - padding: 0;
1251 -}
1252 -
1253 1398 #db-query-form .CodeMirror-wrap {
1254 1399 height: 200px;
1255 1400 padding: 15px;
1256 1401 color: #fff;
@@ -1270,11 +1415,15 @@
1270 1415 color: #fff !important;
1271 1416 }
1272 1417
1273 1418 #db-query-form .CodeMirror-wrap pre .cm-keyword {
1274 - color: #f92472 !important;
1419 + color: #FF6188 !important;
1275 1420 }
1276 1421
1422 +#db-query-form .CodeMirror-wrap pre .cm-builtin {
1423 + color: #78DCE8 !important;
1424 +}
1425 +
1277 1426 #db-query-form .CodeMirror-wrap pre .cm-comment {
1278 1427 color: #74705d !important;
1279 1428 }
1280 1429
@@ -1279,9 +1428,9 @@
1279 1428 }
1280 1429
1281 1430 #db-query-form .CodeMirror-wrap pre .cm-number,
1282 1431 #db-query-form .CodeMirror-wrap pre .cm-string {
1283 - color: #fff !important;
1432 + color: #A9DC76 !important;
1284 1433 }
1285 1434
1286 1435 .visualizer-db-query-form > div {
1287 1436 display: block;
@@ -1299,23 +1448,235 @@
1299 1448 }
1300 1449
1301 1450 .db-wizard-error {
1302 1451 color: #f00;
1452 + padding: 16px 0;
1303 1453 }
1304 1454
1305 -.db-wizard-hints {
1455 +.db-wizard-hints,
1456 +.json-wizard-hints,
1457 +.html-table-editor-hints {
1306 1458 margin-bottom: 30px;
1307 1459 color: #0085ba;
1308 1460 }
1309 1461
1310 1462 .db-wizard-hints .visualizer-emboss,
1311 -.db-wizard-hints a {
1463 +.db-wizard-hints a,
1464 +.html-table-editor-hints a,
1465 +.json-wizard-hints .visualizer-emboss,
1466 +.json-wizard-hints a {
1312 1467 color: #f92472;
1313 1468 }
1314 1469
1315 -.db-wizard-hints ul {
1470 +.db-wizard-hints ul,
1471 +.html-table-editor-hints ul,
1472 +.json-wizard-hints ul {
1316 1473 list-style: square;
1474 + padding: 0 16px;
1317 1475 }
1318 1476
1319 1477 .db-wizard-results .dataTables_wrapper .dataTables_info {
1320 1478 width: calc(100% - 17px);
1479 +}
1480 +
1481 +
1482 +/******************************************************************************/
1483 +/******************************** data tables *******************************/
1484 +/******************************************************************************/
1485 +.db-wizard-results .dt-button {
1486 + display: none !important;
1487 +}
1488 +
1489 +.dt-button.buttons-print {
1490 + display: none;
1491 +}
1492 +
1493 +/******************************************************************************/
1494 +/******************************** json table *********************************/
1495 +/******************************************************************************/
1496 +#json-conclude-form .results {
1497 + min-width: 10px !important;
1498 +}
1499 +
1500 +#json-conclude-form .json-table {
1501 + width: 85%;
1502 +}
1503 +
1504 +#vz-import-json-url,
1505 +#vz-import-json-root,
1506 +#vz-import-json-paging {
1507 + width: 75%;
1508 +}
1509 +
1510 +#json-conclude-form .json-table,
1511 +#json-conclude-form button#visualizer-json-conclude {
1512 + display: inline-block;
1513 + vertical-align: middle;
1514 +}
1515 +
1516 +.viz-editor-table tbody tr:first-child {
1517 + background-color: #ececec !important;
1518 +}
1519 +
1520 +.viz-editor-table tr th {
1521 + background-color: #cccccc;
1522 +}
1523 +
1524 +.viz-editor-table thead tr th:nth-child(n+1) {
1525 + cursor: move !important;
1526 +}
1527 +
1528 +#json-conclude-form .json-wizard-hints .info,
1529 +.html-table-editor-hints .info {
1530 + margin: 1% 0px;
1531 +}
1532 +
1533 +.viz-step.ui-state-active {
1534 + border-color: #0085BA !important;
1535 + background: #0085BA !important;
1536 + color: #ffffff;
1537 +}
1538 +
1539 +.viz-substep {
1540 + outline: 0 !important;
1541 + border: 0 !important;
1542 + background: none !important;
1543 + text-transform: uppercase;
1544 +}
1545 +
1546 +.viz-substep.ui-state-active {
1547 +}
1548 +
1549 +.viz-substep ~ .ui-accordion-content {
1550 + outline: 0 !important;
1551 + border: 0 !important;
1552 + font-size: smaller;
1553 +}
1554 +
1555 +.viz-substep ~ div {
1556 + display: table;
1557 +}
1558 +
1559 +.viz-substep ~ div > div {
1560 + display: table-row;
1561 +}
1562 +
1563 +.viz-substep ~ div > div div {
1564 + display: table-cell;
1565 + padding: 5px;
1566 +}
1567 +
1568 +.json-wizard-header .field-title {
1569 + position: absolute;
1570 + left: 30px;
1571 +}
1572 +/******************************************************************************/
1573 +/******************************** html table editor **************************/
1574 +/******************************************************************************/
1575 +.viz-simple-editor-type,
1576 +.viz-simple-editor {
1577 + display: none;
1578 +}
1579 +
1580 +.viz-table-editor {
1581 + width: 75%;
1582 + margin-left: 2%;
1583 +}
1584 +
1585 +.viz-html-table,
1586 +button#visualizer-save-html-table {
1587 + display: inline-block;
1588 + vertical-align: middle;
1589 +}
1590 +
1591 +
1592 +/******************************************************************************/
1593 +/******************************** text area editor **************************/
1594 +/******************************************************************************/
1595 +.viz-text-editor {
1596 + padding: 20px;
1597 + z-index: 9999;
1598 + box-sizing: border-box;
1599 + padding-right: 320px;
1600 +}
1601 +
1602 +.viz-text-editor textarea {
1603 + width: 85%;
1604 + overflow: auto;
1605 + background: #282923;
1606 + color: #ffffff;
1607 + padding: 15px;
1608 + height: 400px;
1609 + font-size: 15px;
1610 +}
1611 +
1612 +.viz-text-editor textarea,
1613 +button#viz-text-editor-button {
1614 + display: inline-block;
1615 + vertical-align: middle;
1616 +}
1617 +
1618 +.viz-simple-editor .viz-html-table {
1619 + width: 95%;
1620 +}
1621 +
1622 +/******************************************************************************/
1623 +/******************************** chartjs ***********************************/
1624 +/******************************************************************************/
1625 +
1626 +canvas.chartjs-render-monitor {
1627 + height: 500px !important;
1628 +}
1629 +
1630 +/******************************************************************************/
1631 +/******************************** Frontend Actions ***********************************/
1632 +/******************************************************************************/
1633 +#vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner {
1634 + text-align: center;
1635 +}
1636 +
1637 +/******************************************************************************/
1638 +/******************************** chart type box upsell ***********************/
1639 +/******************************************************************************/
1640 +
1641 +.pro-upsell .pro-upsell-overlay {
1642 + position: absolute;
1643 + width: 100%;
1644 + height: 100%;
1645 + left: 0;
1646 + top: 0;
1647 + display: grid;
1648 + place-items: center;
1649 + background-color: rgba(255, 255, 255, 0.7);
1650 + z-index: 1;
1651 + opacity: 0;
1652 + visibility: hidden;
1653 + transition: all .3s ease-in-out;
1654 +}
1655 +.pro-upsell:hover .pro-upsell-overlay{
1656 + opacity: 1;
1657 + visibility: visible;
1658 +}
1659 +
1660 +.pro-upsell .pro-upsell-overlay .button {
1661 + width: 155px;
1662 + height: 39px;
1663 + background: #007CBA;
1664 + border-radius: 4px;
1665 + display: flex;
1666 + align-items: center;
1667 + text-align: center;
1668 + color: #FFFFFF;
1669 + justify-content: center;
1670 +}
1671 +.pro-upsell .pro-upsell-overlay .button.button-secondary{
1672 + background: #ffffff;
1673 + color: #007CBA;
1674 +}
1675 +.pro-upsell .pro-upsell-overlay .pro-upsell-action {
1676 + display: flex;
1677 + gap: 20px;
1678 +}
1679 +.pro-upsell .pro-upsell-overlay .pro-upsell-action .button{
1680 + width: 100%;
1681 + text-align: center;
1321 1682 }