← All changes | css/library.css +246 -40 3.1.2 → 3.9.2 View file →

		@@ -1,4 +1,11 @@
	1	+
	2	+*,
	3	+*::before,
	4	+*::after {
	5	+ box-sizing: border-box;
	6	+}
	7	+
1	8	#visualizer-icon {
2	9	background-image: url("../images/icon.png");
3	10	}
4	11
		@@ -23,15 +30,23 @@
23	30
24	31	.visualizer-list-item .visualizer-pro-only {
25	32	text-decoration: line-through;
26	33	}
27		-
	34	+#visualizer-content-wrapper {
	35	+ padding: 0;
	36	+}
28	37	#visualizer-library {
29		- display: table-cell;
30	38	width: auto;
31		- margin: 20px 0;
	39	+ margin: 20px -10px;
	40	+ display: flex;
	41	+ flex-wrap: wrap;
32	42	}
33	43
	44	+#visualizer-library.visualizer-clearfix:before,
	45	+#visualizer-library.visualizer-clearfix:after {
	46	+ display: none;
	47	+}
	48	+
34	49	#visualizer-content-wrapper {
35	50	width: 100%;
36	51	}
37	52
		@@ -41,19 +56,20 @@
41	56	left: 50%;
42	57	margin-top: -16px;
43	58	margin-left: -16px;
44	59	}
	60	+#visualizer-library .items {
	61	+ padding: 0 10px;
	62	+ width: 33.3333%;
	63	+}
45	64
46	65	.visualizer-chart {
47		- display: none;
48		- float: left;
49		- margin: 0 24px 24px 0;
	66	+ margin: 0 0px 24px 0;
50	67	padding: 5px;
51	68	border: 1px solid #ddd;
52	69	background-color: #efefef;
53	70	box-shadow: 0 0 8px #ddd;
54	71	}
55		-
56	72	.visualizer-chart-canvas {
57	73	position: relative;
58	74	width: 30%;
59	75	height: 18.75%;
		@@ -106,10 +122,35 @@
106	122	.visualizer-chart-export {
107	123	background-position: -46px -64px;
108	124	}
109	125
	126	+.visualizer-nochart-shortcode,
	127	+.visualizer-nochart-shortcode:focus,
	128	+.visualizer-chart-shortcode,
	129	+.visualizer-chart-shortcode:focus {
	130	+ float: left;
	131	+ background: none;
	132	+ text-decoration: none;
	133	+ box-shadow: none;
	134	+}
	135	+.visualizer-chart-shortcode:hover {
	136	+ color: #404040;
	137	+}
	138	+.visualizer-nochart-shortcode .dashicons-admin-page ,
	139	+.visualizer-chart-shortcode .dashicons-admin-page {
	140	+ font-size: 16px;
	141	+}
	142	+
	143	+.visualizer-nochart-image,
	144	+.visualizer-chart-image {
	145	+ background-position: -206px -129px;
	146	+}
	147	+
110	148	.visualizer-nochart-clone,
111	149	.visualizer-nochart-delete,
	150	+.visualizer-nochart-shortcode,
	151	+.visualizer-nochart-export,
	152	+.visualizer-nochart-image,
112	153	.visualizer-nochart-edit {
113	154	opacity: 0.5;
114	155
115	156	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		@@ -117,13 +158,13 @@
117	158	}
118	159
119	160	.visualizer-chart-footer {
120	161	margin-top: 4px;
	162	+ width: 100%;
121	163	}
122	164
123	165	.visualizer-chart-shortcode {
124		- padding: 3px 0;
125		- color: #aaa;
	166	+ color: #404040;
126	167	text-shadow: 0 1px 0 #fff;
127	168	cursor: pointer;
128	169	}
129	170
		@@ -149,38 +190,88 @@
149	190	#visualizer-search form {
150	191	text-align: right;
151	192	}
152	193
153		-#visualizer-sidebar {
154		- display: table-cell;
155		- width: 250px;
	194	+.visualizer-sidebar-box {
	195	+ display: block;
	196	+ padding: 30px 34px;
	197	+ background: white;
156	198	}
157	199
158		-.visualizer-sidebar-box ul li {
159		- margin: 4px 0;
160		- color: #23282d;
	200	+.visualizer-sidebar-box h3{
	201	+ padding: 0;
	202	+ margin: 0 0 20px;
	203	+ display: block;
	204	+ width: 100%;
	205	+ font-size: 24px;
	206	+ font-weight: 600;
	207	+ line-height: 1.3;
161	208	}
162	209
163	210	.visualizer-sidebar-box ul {
164		- margin-left: 40px;
165		- text-align: left;
166		- list-style-type: disc;
	211	+ padding: 0;
	212	+ margin: 0;
	213	+ list-style: none;
	214	+ display: flex;
	215	+ flex-wrap: wrap;
167	216	}
168	217
169		-.visualizer-sidebar-box {
170		- display: block;
171		- width: 95%;
172		- margin: 0;
173		- margin-top: 20px;
174		- margin-left: 2.5%;
175		- padding-top: 10px;
176		- padding-bottom: 15px;
177		- border-top: 5px solid #0073aa;
178		- color: #0073aa;
179		- background: white;
180		- text-align: center;
	218	+.visualizer-sidebar-box ul li {
	219	+ color: #000;
	220	+ list-style: none;
	221	+ padding: 0;
	222	+ margin: 0;
	223	+ font-size: 16px;
	224	+ line-height: 1.8;
	225	+ position: relative;
	226	+ padding-left: 26px;
181	227	}
182	228
	229	+.visualizer-sidebar-box ul li .icon{
	230	+ color: #00AA63;
	231	+ width: 16px;
	232	+ height: 16px;
	233	+ margin-top: 3px;
	234	+ position: absolute;
	235	+ left: 0;
	236	+ top: 3px;
	237	+}
	238	+.visualizer-sidebar-box .button {
	239	+ width: 155px;
	240	+ height: 39px;
	241	+ background: #007CBA;
	242	+ border-radius: 4px;
	243	+ display: flex;
	244	+ align-items: center;
	245	+ text-align: center;
	246	+ color: #FFFFFF;
	247	+ justify-content: center;
	248	+}
	249	+.visualizer-sidebar-box .we-offer{
	250	+ background-color: transparent;
	251	+ color: #007CBA;
	252	+ font-weight: 400;
	253	+ padding: 0px;
	254	+ font-size: 14px;
	255	+ font-style: italic;
	256	+ margin-bottom: 0;
	257	+}
	258	+.visualizer-sidebar-box .help-us-improve{
	259	+ display: none;
	260	+}
	261	+.visualizer-chart.viz-pro {
	262	+ padding: 0;
	263	+}
	264	+.two-col .viz-pro .two-columns{
	265	+ padding: 0;
	266	+ border: 1px solid #DDDDDD;
	267	+ border: 5px solid #007CBA;
	268	+}
	269	+#visualizer-library .items.two-col {
	270	+ width: 66.6666%;
	271	+}
	272	+
	273	+
183	274	/* The switch - the box around the slider */
184	275	.visualizer-switch {
185	276	display: inline-block;
186	277	position: relative;
		@@ -272,15 +363,22 @@
272	363	#visualizer-sidebar h3 {
273	364	margin-top: 0;
274	365	}
275	366
	367	+#visualizer-sidebar.two-columns .visualizer-sidebar-box ul li {
	368	+ width: calc(50% - 26px)
	369	+}
	370	+#visualizer-sidebar.one-columns .visualizer-sidebar-box ul li {
	371	+ width: 100%;
	372	+}
	373	+#visualizer-sidebar.one-columns .visualizer-sidebar-box p {
	374	+ margin-top: 8px;
	375	+}
276	376	#visualizer-sidebar .visualizer-sidebar-box p {
277	377	margin-bottom: 0;
278	378	}
279		-
280		-#visualizer-sidebar .visualizer-sidebar-box {
281		- padding-top: 20px;
282		- padding-bottom: 20px;
	379	+#visualizer-sidebar.one-columns {
	380	+ border-top: 5px solid #007CBA;
283	381	}
284	382
285	383	.visualizer-chart-title {
286	384	padding-bottom: 5px;
		@@ -285,18 +383,126 @@
285	383	.visualizer-chart-title {
286	384	padding-bottom: 5px;
287	385	font-weight: bold;
288	386	text-align: center;
	387	+ text-overflow: ellipsis;
	388	+ white-space: nowrap;
	389	+ overflow: hidden;
289	390	}
290	391
	392	+div.visualizer-library-form .viz-filter {
	393	+ vertical-align: middle;
	394	+}
	395	+
291	396	button.media-modal-close {
292	397	display: none !important;
293	398	}
294	399
295		-.dataTables_scrollBody {
296		- overflow: hidden !important;
	400	+.dataTables_wrapper {
	401	+ max-height: 300px;
	402	+ overflow: hidden !important;
297	403	}
298	404
299		-.dataTables_wrapper {
300		- height: 300px;
301		- overflow: hidden !important;
302		-}
	405	+/* datatables */
	406	+.dt-button {
	407	+ display: none !important;
	408	+}
	409	+
	410	+/* chartjs */
	411	+#visualizer-library canvas.chartjs-render-monitor {
	412	+ height: 100% !important;
	413	+}
	414	+
	415	+div#visualizer-types ul, div#visualizer-types form p {
	416	+ vertical-align: middle;
	417	+ margin: 0;
	418	+}
	419	+
	420	+.visualizer-chart-status {
	421	+ padding: 3px 0;
	422	+ color: #aaa;
	423	+ text-shadow: 0 1px 0 #fff;
	424	+}
	425	+
	426	+.visualizer-chart-status span.visualizer-error {
	427	+ float: right;
	428	+}
	429	+
	430	+.visualizer-error i {
	431	+ color: green;
	432	+}
	433	+.visualizer-error i.error {
	434	+ color: red;
	435	+ cursor: pointer;
	436	+}
	437	+.goog-combobox input {
	438	+ min-height: auto;
	439	+}
	440	+.vz-library-chart-filter:not(:empty) {
	441	+ background-color: #ffffff;
	442	+ padding: 5px 0 5px 5px;
	443	+ border: 1px solid #ddd;
	444	+}
	445	+.google-visualization-controls-rangefilter {
	446	+ white-space: inherit !important;
	447	+}
	448	+.visualizer-languages-list {
	449	+ text-align: right;
	450	+}
	451	+.visualizer-languages-list a {
	452	+ text-decoration: none;
	453	+ display: inline-block;
	454	+ margin-left: 3px;
	455	+ padding: 0;
	456	+ border: none;
	457	+ outline: none;
	458	+ box-shadow: none;
	459	+}
	460	+.visualizer-languages-list a:focus {
	461	+ border: none;
	462	+ outline: none;
	463	+ box-shadow: none;
	464	+}
	465	+.visualizer-languages-list:not(.only-pro) i {
	466	+ display: none;
	467	+}
	468	+.visualizer-languages-list:not(.only-pro) a:hover img {
	469	+ display: none;
	470	+}
	471	+.visualizer-languages-list:not(.only-pro) a:hover img + i {
	472	+ display: block;
	473	+}
	474	+.visualizer-languages-list.only-pro a:last-child {
	475	+ display: none;
	476	+}
	477	+.visualizer-languages-list.only-pro:hover a:not(:last-child) {
	478	+ display: none;
	479	+}
	480	+.visualizer-languages-list.only-pro:hover a:last-child {
	481	+ display: block;
	482	+}
	483	+@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1000px) and (max-width: 1600px) {
	484	+ #visualizer-sidebar.one-columns .visualizer-sidebar-box ul li:nth-child(+n+7) {
	485	+ display: none;
	486	+ }
	487	+}
	488	+@media (max-width: 1500px) {
	489	+ #visualizer-library .items .viz-pro{
	490	+ height: 100%;
	491	+ padding-bottom: 24px;
	492	+ }
	493	+ #visualizer-library .items .viz-pro .one-columns{
	494	+ height: 100%;
	495	+ }
	496	+ #visualizer-library .items .viz-pro .visualizer-sidebar-box{
	497	+ height: 100%;
	498	+ }
	499	+ #visualizer-library .items .viz-pro.two-columns{
	500	+ padding-bottom: 0;
	501	+ }
	502	+ #visualizer-sidebar.one-columns .visualizer-sidebar-box ul li:nth-child(+n+7) {
	503	+ display: none;
	504	+ }
	505	+ .visualizer-chart{
	506	+ height: calc(100% - 24px);
	507	+ }
	508	+}