← All changes | css/library.css +132 -31 3.7.4 → 3.7.5 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,13 +56,15 @@
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;
		@@ -130,8 +147,9 @@
130	147	}
131	148
132	149	.visualizer-chart-footer {
133	150	margin-top: 4px;
	151	+ width: 100%;
134	152	}
135	153
136	154	.visualizer-chart-shortcode {
137	155	padding: 3px 0;
		@@ -162,38 +180,88 @@
162	180	#visualizer-search form {
163	181	text-align: right;
164	182	}
165	183
166		-#visualizer-sidebar {
167		- clear: both;
168		- margin: 20px 0px;
169		- width: 96%;
	184	+.visualizer-sidebar-box {
	185	+ display: block;
	186	+ padding: 30px 34px;
	187	+ background: white;
170	188	}
171	189
172		-.visualizer-sidebar-box ul li {
173		- margin: 4px 0;
174		- color: #23282d;
175		- float: left;
176		- width: 25%;
	190	+.visualizer-sidebar-box h3{
	191	+ padding: 0;
	192	+ margin: 0 0 20px;
	193	+ display: block;
	194	+ width: 100%;
	195	+ font-size: 24px;
	196	+ font-weight: 600;
	197	+ line-height: 1.3;
177	198	}
178	199
179	200	.visualizer-sidebar-box ul {
180		- margin-left: 40px;
181		- text-align: left;
182		- list-style-type: disc;
	201	+ padding: 0;
	202	+ margin: 0;
	203	+ list-style: none;
	204	+ display: flex;
	205	+ flex-wrap: wrap;
183	206	}
184	207
185		-.visualizer-sidebar-box {
186		- display: block;
187		- padding-top: 10px;
188		- padding-bottom: 15px;
189		- border-top: 5px solid #0073aa;
190		- border-bottom: 5px solid #0073aa;
191		- color: #0073aa;
192		- background: white;
193		- text-align: center;
	208	+.visualizer-sidebar-box ul li {
	209	+ color: #000;
	210	+ list-style: none;
	211	+ padding: 0;
	212	+ margin: 0;
	213	+ font-size: 16px;
	214	+ line-height: 1.8;
	215	+ position: relative;
	216	+ padding-left: 26px;
194	217	}
195	218
	219	+.visualizer-sidebar-box ul li .icon{
	220	+ color: #00AA63;
	221	+ width: 16px;
	222	+ height: 16px;
	223	+ margin-top: 3px;
	224	+ position: absolute;
	225	+ left: 0;
	226	+ top: 3px;
	227	+}
	228	+.visualizer-sidebar-box .button {
	229	+ width: 155px;
	230	+ height: 39px;
	231	+ background: #007CBA;
	232	+ border-radius: 4px;
	233	+ display: flex;
	234	+ align-items: center;
	235	+ text-align: center;
	236	+ color: #FFFFFF;
	237	+ justify-content: center;
	238	+}
	239	+.visualizer-sidebar-box .we-offer{
	240	+ background-color: transparent;
	241	+ color: #007CBA;
	242	+ font-weight: 400;
	243	+ padding: 0px;
	244	+ font-size: 14px;
	245	+ font-style: italic;
	246	+ margin-bottom: 0;
	247	+}
	248	+.visualizer-sidebar-box .help-us-improve{
	249	+ display: none;
	250	+}
	251	+.visualizer-chart.viz-pro {
	252	+ padding: 0;
	253	+}
	254	+.two-col .viz-pro .two-columns{
	255	+ padding: 0;
	256	+ border: 1px solid #DDDDDD;
	257	+ border: 5px solid #007CBA;
	258	+}
	259	+#visualizer-library .items.two-col {
	260	+ width: 66.6666%;
	261	+}
	262	+
	263	+
196	264	/* The switch - the box around the slider */
197	265	.visualizer-switch {
198	266	display: inline-block;
199	267	position: relative;
		@@ -285,15 +353,22 @@
285	353	#visualizer-sidebar h3 {
286	354	margin-top: 0;
287	355	}
288	356
	357	+#visualizer-sidebar.two-columns .visualizer-sidebar-box ul li {
	358	+ width: calc(50% - 26px)
	359	+}
	360	+#visualizer-sidebar.one-columns .visualizer-sidebar-box ul li {
	361	+ width: 100%;
	362	+}
	363	+#visualizer-sidebar.one-columns .visualizer-sidebar-box p {
	364	+ margin-top: 8px;
	365	+}
289	366	#visualizer-sidebar .visualizer-sidebar-box p {
290	367	margin-bottom: 0;
291	368	}
292		-
293		-#visualizer-sidebar .visualizer-sidebar-box {
294		- padding-top: 20px;
295		- padding-bottom: 20px;
	369	+#visualizer-sidebar.one-columns {
	370	+ border-top: 5px solid #007CBA;
296	371	}
297	372
298	373	.visualizer-chart-title {
299	374	padding-bottom: 5px;
		@@ -347,5 +422,31 @@
347	422	}
348	423	.visualizer-error i.error {
349	424	color: red;
350	425	cursor: pointer;
	426	+}
	427	+@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1000px) and (max-width: 1600px) {
	428	+ #visualizer-sidebar.one-columns .visualizer-sidebar-box ul li:nth-child(+n+7) {
	429	+ display: none;
	430	+ }
	431	+}
	432	+@media (max-width: 1500px) {
	433	+ #visualizer-library .items .viz-pro{
	434	+ height: 100%;
	435	+ padding-bottom: 24px;
	436	+ }
	437	+ #visualizer-library .items .viz-pro .one-columns{
	438	+ height: 100%;
	439	+ }
	440	+ #visualizer-library .items .viz-pro .visualizer-sidebar-box{
	441	+ height: 100%;
	442	+ }
	443	+ #visualizer-library .items .viz-pro.two-columns{
	444	+ padding-bottom: 0;
	445	+ }
	446	+ #visualizer-sidebar.one-columns .visualizer-sidebar-box ul li:nth-child(+n+7) {
	447	+ display: none;
	448	+ }
	449	+ .visualizer-chart{
	450	+ height: calc(100% - 24px);
	451	+ }
351	452	}