← All changes | css/frame.css +129 -15 3.10.13 → 3.11.7 View file →

		@@ -394,8 +394,39 @@
394	394
395	395	#viz-tabs .wp-color-picker {
396	396	width: 4rem !important;
397	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	+
398	429	/******************************************************************************/
399	430	/******************************** TOOLBAR ***********************************/
400	431	/******************************************************************************/
401	432
		@@ -432,8 +463,20 @@
432	463	width: 30%;
433	464	vertical-align: top;
434	465	}
435	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	+
436	479	/******************************************************************************/
437	480	/******************************** TYPE PICKER ******************************/
438	481	/******************************************************************************/
439	482
		@@ -470,9 +513,17 @@
470	513	background-color: #efefef;
471	514	box-shadow: 0 0 8px #ddd;
472	515	}
473	516
474		-.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) {
475	526	margin-right: 0;
476	527	}
477	528
478	529	.type-box .pro-upsell .visualizder-pro-label {
		@@ -483,9 +534,9 @@
483	534	height: 10px;
484	535	height: 17px;
485	536	border: none;
486	537	color: #fff;
487		- z-index: 1;
	538	+ z-index: 4;
488	539	background: #c55555;
489	540	}
490	541
491	542	.type-label {
		@@ -499,10 +550,19 @@
499	550	background-repeat: no-repeat;
500	551	background-position: center center;
501	552	background-size: 900px 1150px;
502	553	filter: grayscale(100%);
	554	+ cursor: pointer;
503	555	}
504	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	+
505	565	.type-label-selected,
506	566	.type-box .type-label:hover {
507	567	/* background-image: url(../images/chart_types_v340.png);*/
508	568	filter: grayscale(0);
		@@ -831,9 +891,9 @@
831	891
832	892	.viz-select-library {
833	893	color: #0085ba;
834	894	}
835		-.viz-select-library.viz-hide-libary {
	895	+.viz-select-library.viz-hide-library {
836	896	display: none;
837	897	}
838	898
839	899	.viz-select-library option:first-child {
		@@ -1061,16 +1121,20 @@
1061	1121	opacity: 1;
1062	1122	}
1063	1123
1064	1124	.only-pro-container {
1065		- display: table;
	1125	+ display: flex;
	1126	+ align-items: center;
	1127	+ justify-content: center;
1066	1128	width: 100%;
1067	1129	height: 100%;
1068	1130	}
1069	1131
1070	1132	.only-pro-inner {
1071		- display: table-cell;
1072		- vertical-align: middle;
	1133	+ display: flex;
	1134	+ flex-direction: column;
	1135	+ align-items: center;
	1136	+ justify-content: center;
1073	1137	}
1074	1138
1075	1139	.only-pro-content p {
1076	1140	margin: 0 0 15px;
		@@ -1097,8 +1161,12 @@
1097	1161	.only-pro-content a:hover {
1098	1162	background: #2D419B;
1099	1163	}
1100	1164
	1165	+.only-pro-anchor {
	1166	+ position: relative;
	1167	+}
	1168	+
1101	1169	#sidebar::-webkit-scrollbar {
1102	1170	width: 4px;
1103	1171	}
1104	1172
		@@ -1326,15 +1394,8 @@
1326	1394	.db-wizard-where-template-remove {
1327	1395	background-color: #ff0d00;
1328	1396	}
1329	1397
1330		-#db-query-form .CodeMirror-scroll {
1331		- overflow: hidden !important;
1332		- height: 50%;
1333		- margin: 0;
1334		- padding: 0;
1335		-}
1336		-
1337	1398	#db-query-form .CodeMirror-wrap {
1338	1399	height: 200px;
1339	1400	padding: 15px;
1340	1401	color: #fff;
		@@ -1354,11 +1415,15 @@
1354	1415	color: #fff !important;
1355	1416	}
1356	1417
1357	1418	#db-query-form .CodeMirror-wrap pre .cm-keyword {
1358		- color: #f92472 !important;
	1419	+ color: #FF6188 !important;
1359	1420	}
1360	1421
	1422	+#db-query-form .CodeMirror-wrap pre .cm-builtin {
	1423	+ color: #78DCE8 !important;
	1424	+}
	1425	+
1361	1426	#db-query-form .CodeMirror-wrap pre .cm-comment {
1362	1427	color: #74705d !important;
1363	1428	}
1364	1429
		@@ -1363,9 +1428,9 @@
1363	1428	}
1364	1429
1365	1430	#db-query-form .CodeMirror-wrap pre .cm-number,
1366	1431	#db-query-form .CodeMirror-wrap pre .cm-string {
1367		- color: #fff !important;
	1432	+ color: #A9DC76 !important;
1368	1433	}
1369	1434
1370	1435	.visualizer-db-query-form > div {
1371	1436	display: block;
		@@ -1383,8 +1448,9 @@
1383	1448	}
1384	1449
1385	1450	.db-wizard-error {
1386	1451	color: #f00;
	1452	+ padding: 16px 0;
1387	1453	}
1388	1454
1389	1455	.db-wizard-hints,
1390	1456	.json-wizard-hints,
		@@ -1404,8 +1470,9 @@
1404	1470	.db-wizard-hints ul,
1405	1471	.html-table-editor-hints ul,
1406	1472	.json-wizard-hints ul {
1407	1473	list-style: square;
	1474	+ padding: 0 16px;
1408	1475	}
1409	1476
1410	1477	.db-wizard-results .dataTables_wrapper .dataTables_info {
1411	1478	width: calc(100% - 17px);
		@@ -1565,4 +1632,51 @@
1565	1632	/******************************************************************************/
1566	1633	#vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner {
1567	1634	text-align: center;
1568	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;
	1682	+}