PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 1.6.6
Visualizer – Tables & Charts Manager with Built-in AI Generator v1.6.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 +386 -655 3.0.81.6.6 View file →
@@ -1,29 +1,29 @@
1 1 #content {
2 - overflow: auto;
3 2 position: absolute;
4 - z-index: 75;
5 3 top: 0;
6 4 right: 0;
7 5 bottom: 60px;
8 6 left: 0;
7 + z-index: 75;
8 + overflow: auto;
9 9 background-color: white;
10 10 }
11 11
12 12 #canvas {
13 13 position: absolute;
14 + left: 10px;
15 + right: 310px;
14 16 top: 10px;
15 - right: 310px;
16 17 bottom: 10px;
17 - left: 10px;
18 18 }
19 19
20 20 .loader {
21 21 position: absolute;
22 + left: 50%;
22 23 top: 50%;
23 - left: 50%;
24 + margin-left: -16px;
24 25 margin-top: -16px;
25 - margin-left: -16px;
26 26 }
27 27
28 28 /******************************************************************************/
29 29 /******************************** SIDEBAR ***********************************/
@@ -29,264 +29,220 @@
29 29 /******************************** SIDEBAR ***********************************/
30 30 /******************************************************************************/
31 31
32 32 #sidebar {
33 - overflow: auto;
34 33 position: absolute;
35 - z-index: 75;
36 34 top: 0;
37 35 right: 0;
38 36 bottom: 60px;
39 37 width: 299px;
40 - border-left: 1px solid #dfdfdf;
38 + z-index: 75;
41 39 background: whitesmoke;
42 -
40 + border-left: 1px solid #DFDFDF;
41 + overflow: auto;
43 42 -webkit-overflow-scrolling: touch;
44 43 }
45 44
46 -.viz-group {
45 +.group-wrapper {
46 + border-top: 1px solid #DFDFDF;
47 47 margin: 0;
48 - font-size: 12px;
49 - line-height: 18px;
48 + padding: 0;
50 49 list-style: none;
51 50 }
52 51
53 -.viz-group .viz-group-header .viz-group-title {
54 - margin: 10px 0;
55 - padding: 15px 20px;
56 - border-top: 1px solid #ddd;
57 - border-bottom: 1px solid #ddd;
58 - color: #555d66;
59 - background: #fff;
52 +.group {
53 + margin: 0;
54 + list-style: none;
55 + font-size: 12px;
56 + line-height: 18px;
60 57 }
61 58
62 -.viz-group-wrapper ul .viz-group-title {
63 - border-top: 1px solid #ddd;
64 -}
59 +.group.open {
60 + border-bottom: 1px solid #DFDFDF;
65 61
66 -.viz-group-wrapper ul li {
67 - border-top: 1px solid #ddd;
68 62 }
69 63
70 -.viz-group-wrapper ul ul li.viz-subsection {
71 - margin: 5px;
72 - border: 1px solid #ddd;
73 -}
74 -
75 -.viz-group-wrapper .viz-group .viz-group .viz-group-title {
64 +.group-title {
65 + border-top: 1px solid white;
66 + border-bottom: 1px solid #DFDFDF;
76 67 position: relative;
68 + cursor: pointer;
69 + -webkit-user-select: none;
70 + -moz-user-select: none;
71 + -ms-user-select: none;
72 + user-select: none;
77 73 margin: 0;
78 - padding: 10px 10px 11px 14px;
79 - border-top: none;
80 - border-bottom: none;
81 - border-left: 4px solid #fff;
82 - color: #555d66;
83 - background-color: #fff;
84 - font-size: 14px;
85 - font-weight: 600;
86 - line-height: 21px;
87 - cursor: pointer;
88 - -webkit-transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
89 - transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
74 + padding: 10px 20px;
75 + font-size: 15px;
76 + font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
77 + font-weight: normal;
78 + text-shadow: 0 1px 0 white;
79 + background: whiteSmoke;
80 + background-image: -webkit-gradient(linear, left bottom, left top, from(#EEE), to(whiteSmoke));
81 + background-image: -webkit-linear-gradient(bottom, #EEE, whiteSmoke);
82 + background-image: -moz-linear-gradient(bottom, #EEE, whiteSmoke);
83 + background-image: -o-linear-gradient(bottom, #EEE, whiteSmoke);
84 + background-image: -ms-linear-gradient(bottom, #EEE, whiteSmoke);
85 + background-image: linear-gradient(bottom, #EEE, whiteSmoke);
86 + font-family: "Open Sans",sans-serif;
87 + font-weight: 700;
90 88 }
91 89
92 -.viz-group-wrapper .viz-group .viz-group:hover .viz-group-title,
93 -.viz-group-wrapper .viz-group .viz-group.open .viz-group-title {
94 - border-left-color: #0073aa;
95 - color: #0073aa;
96 - background: #f3f3f5;
90 +.group-title:hover,
91 +.group.open .group-title {
92 + color: white;
93 + text-shadow: 0 -1px 0 #333;
94 + background: gray;
95 + background-image: -webkit-gradient(linear, left bottom, left top, from(#6D6D6D), to(gray));
96 + background-image: -webkit-linear-gradient(bottom, #6D6D6D, gray);
97 + background-image: -moz-linear-gradient(bottom, #6D6D6D, gray);
98 + background-image: -o-linear-gradient(bottom, #6D6D6D, gray);
99 + background-image: -ms-linear-gradient(bottom, #6D6D6D, gray);
100 + background-image: linear-gradient(bottom, #6D6D6D, gray);
101 + font-family: "Open Sans", sans-serif;
102 + font-weight: 700;
97 103 }
98 104
99 -.viz-group-wrapper .viz-group .viz-group .viz-group-title:after {
105 +.group-title::after {
106 + content: '';
107 + width: 0;
108 + height: 0;
109 + border-color: #CCC transparent;
110 + border-style: solid;
111 + border-width: 6px 6px 0;
100 112 position: absolute;
113 + top: 15px;
114 + right: 20px;
101 115 z-index: 1;
102 - top: 11px;
103 - right: 10px;
104 - color: #a0a5aa;
105 - font: 400 20px/1 dashicons;
106 - content: "\f345";
107 116 }
108 117
109 -.viz-group-wrapper .viz-group .viz-group.open .viz-group-title:after {
110 - content: "\f347";
118 +.group-title:hover::after,
119 +.group.open .group-title::after {
120 + border-color: #EEE transparent;
111 121 }
112 122
113 -.viz-group-wrapper .viz-group .customize-section-back {
114 - display: block;
115 - float: left;
116 - width: 42px;
117 - height: 49px;
118 - margin: 0 15px 0 0;
119 - padding: 0;
120 - border: none;
121 - border-top: 1px solid #ddd;
122 - border-right: 1px solid #ddd;
123 - border-left: 4px solid #fff;
124 - background: #fff;
125 - box-shadow: none;
126 - cursor: pointer;
127 - -webkit-transition: color 0.15s ease-in-out,border-color 0.15s ease-in-out,background 0.15s ease-in-out;
128 - transition: color 0.15s ease-in-out,border-color 0.15s ease-in-out,background 0.15s ease-in-out;
123 +.group:hover .group-title {
124 + border-top-color: gray;
129 125 }
130 126
131 -.viz-group-wrapper .viz-group .customize-section-back:hover {
132 - border-left-color: #0073aa;
133 - outline: 0;
134 - color: #0073aa;
135 - background: #f3f3f5;
127 +.group.open .group-title {
128 + border-top-color: #6D6D6D;
136 129 }
137 130
138 -.viz-group-wrapper .viz-group .customize-section-back:before {
139 - position: relative;
140 - top: -11px;
141 - left: -2px;
142 - font: 400 20px/72px dashicons;
143 - content: "\f341";
131 +.group.open .group-title::after {
132 + border-width: 0 6px 6px;
144 133 }
145 134
146 -.viz-group-wrapper.full-height {
147 - float: left;
148 - position: relative;
149 - width: 100%;
150 - height: 100%;
135 +.group-content {
151 136 margin: 0;
152 -}
153 -
154 -.viz-group.bottom-fixed {
155 - display: block;
156 - position: absolute;
157 - bottom: 0;
158 - width: 100%;
159 -}
160 -
161 -.viz-group ul li h2,
162 -.viz-group ul li h3 {
163 - padding: 7px 15px 7px 35px;
164 -}
165 -
166 -.viz-group h2 .dashicons,
167 -.viz-group h3 .dashicons {
168 - margin-right: 5px;
169 - vertical-align: -5px;
170 -}
171 -
172 -.viz-group-content {
173 137 display: none;
174 - margin: 0;
175 - padding: 0;
176 - background-color: #fdfdfd;
138 + background-color: #FDFDFD;
139 + padding: 10px 0 20px 0;
140 + overflow: hidden;
177 141 }
178 142
179 -div.viz-group-content {
180 - padding: 15px;
143 +div.group-content {
144 + padding: 10px 20px 20px;
181 145 }
182 146
183 -.viz-group.open > .viz-group-content {
147 +.group.open .group-content {
184 148 display: block;
185 149 }
186 150
187 -.viz-group-description {
151 +.group-description {
152 + font-size: 12px;
153 + color: #555;
154 + padding: 5px 20px 10px;
188 155 margin: 0;
189 - padding: 5px;
190 - color: #555;
191 - font-size: 12px;
192 - text-align: left;
193 156 }
194 157
195 -div.viz-group-content .viz-group-description {
196 - padding: 5px;
158 +div.group-content .group-description {
159 + padding: 0;
160 + font-weight: 300;
197 161 font-family: "Montserrat",sans-serif;
198 - font-weight: 300;
199 162 }
200 163
201 -.initial-screen .viz-group-description {
164 +.initial-screen .group-description {
202 165 padding: 0;
166 + font-weight: 300;
167 + font-family: "Montserrat",sans-serif;
203 168 padding: 10px 20px 20px;
204 - font-family: "Montserrat",sans-serif;
205 - font-weight: 300;
206 169 }
207 170
208 -.viz-section-title {
171 +.section-title {
209 172 display: block;
173 + font-weight: bold;
210 174 position: relative;
175 + cursor: pointer;
176 + padding: 4px 20px;
211 177 margin-bottom: 5px;
212 - padding: 4px 20px;
213 - border-top: 1px solid #eee;
214 - border-bottom: 1px solid #eee;
215 178 background-color: rgba(0, 0, 0, 0.02);
179 + border-top: 1px solid #eeeeee;
180 + -webkit-box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
216 181 box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
217 - font-weight: bold;
218 - cursor: pointer;
182 + border-bottom: 1px solid #eeeeee;
219 183 }
220 184
221 -.viz-group-wrapper ul ul li .viz-section-title {
222 - margin-bottom: 0;
223 - border: none;
224 - box-shadow: none;
225 -}
226 -
227 -.viz-section-title::after {
185 +.section-title::after {
186 + content: '';
187 + width: 0;
188 + height: 0;
189 + border-color: #CCC transparent;
190 + border-style: solid;
191 + border-width: 4px 4px 0;
228 192 position: absolute;
229 - z-index: 1;
230 193 top: 13px;
231 194 right: 20px;
232 - width: 0;
233 - height: 0;
234 - border-width: 4px 4px 0;
235 - border-style: solid;
236 - border-color: #ccc transparent;
237 - content: "";
195 + z-index: 1;
238 196 }
239 197
240 -.viz-section-title.open::after {
198 +.section-title.open::after {
241 199 border-width: 0 4px 4px;
242 200 }
243 201
244 -.section-items,
245 -.viz-section-items {
202 +.section-items {
246 203 display: none;
247 - padding: 15px;
204 + padding: 5px 20px 10px 20px;
248 205 }
249 206
250 -.viz-section-items.open {
207 +.section-items.open {
251 208 display: block;
252 209 }
253 210
254 211 .more-info {
255 - display: none;
256 - float: right;
257 - color: #21759b;
212 + text-decoration: none;
213 + color: #21759B;
258 214 font-size: 85%;
259 215 font-weight: normal;
260 - text-decoration: none;
216 + float: right;
217 + display: none;
261 218 }
262 219
263 -.viz-section-description {
264 - margin: 0;
220 +.section-description {
265 221 /*display: none;*/
266 222 padding: 0;
223 + margin: 0;
224 + font-size: 11px;
267 225 color: gray;
268 - font-size: 11px;
269 226 }
270 227
271 -.viz-section-table {
228 +.section-table {
272 229 width: 100%;
273 230 }
274 231
275 -.section-delimiter,
276 -.viz-section-delimiter {
232 +.section-delimiter {
277 233 margin: 15px 0;
278 234 border-top: 1px dashed #ccc;
279 235 }
280 236
281 -.viz-section-table-column {
237 +.section-table-column {
282 238 width: 50%;
283 - padding: 0 1px;
284 239 text-align: left;
285 240 vertical-align: top;
241 + padding: 0 1px;
286 242 }
287 243
288 -.viz-section-item {
244 +.section-item {
289 245 margin-bottom: 10px;
290 246 }
291 247
292 248 .control-select,
@@ -296,21 +252,20 @@
296 252
297 253 .control-check {
298 254 float: right;
299 255 }
300 -
301 256 .control-check::after {
302 257 clear: both;
303 258 }
304 259
305 -.viz-section-description ul {
260 +.section-description ul {
306 261 margin: 0 0 0 25px;
307 262 list-style: circle;
308 263 }
309 264
310 -.viz-section-description li {
265 +.section-description li {
266 + list-style: circle;
311 267 margin: 0;
312 - list-style: circle;
313 268 }
314 269
315 270 #rate-the-plugin {
316 271 margin-top: 40px;
@@ -318,26 +273,26 @@
318 273 border-top: 1px dashed #ddd;
319 274 text-align: center;
320 275 }
321 276
322 -.rate-the-plugin {
277 +.rate-the-plugin{
323 278 width: 40% !important;
324 - margin-top: -5px;
279 + margin-top: -5px;
325 280 }
326 281
327 282 #rate-stars {
283 + margin: 15px auto;
328 284 width: 100px;
329 285 height: 20px;
330 - margin: 15px auto;
331 - background-image: url("../images/star.png");
286 + background-image: url('../images/star.png');
332 287 background-repeat: repeat-x;
333 288 background-position: right center;
334 289 }
335 290
336 291 #rate-link {
292 + text-decoration: none;
337 293 font-family: "Montserrat",sans-serif;
338 - font-weight: 400;
339 - text-decoration: none;
294 + font-weight: 400;
340 295 }
341 296
342 297 #flattr {
343 298 margin-top: 15px;
@@ -348,19 +303,20 @@
348 303 /******************************** TOOLBAR ***********************************/
349 304 /******************************************************************************/
350 305
351 306 #toolbar {
352 - overflow: hidden;
307 + height: 36px;
308 + padding: 12px 16px;
353 309 position: absolute;
354 310 z-index: 100;
311 + left: 0;
355 312 right: 0;
313 + text-align: center;
356 314 bottom: 0;
357 - left: 0;
358 - height: 36px;
359 - padding: 12px 16px;
360 - border-top: 1px solid #dfdfdf;
315 + border-top: 1px solid #DFDFDF;
316 + overflow: hidden;
317 + -webkit-box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
361 318 box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
362 - text-align: center;
363 319 }
364 320
365 321 #toolbar .push-right {
366 322 float: right;
@@ -365,17 +321,16 @@
365 321 #toolbar .push-right {
366 322 float: right;
367 323 }
368 324
369 -.toolbar-div a {
370 - float: left;
325 +.toolbar-div a{
326 + float:left;
371 327 }
372 -
373 -.toolbar-div {
374 - display: inline-block;
375 - float: left;
328 +.toolbar-div{
329 + display: inline-block;
330 + vertical-align: top;
376 331 width: 30%;
377 - vertical-align: top;
332 + float:left;
378 333 }
379 334
380 335 /******************************************************************************/
381 336 /******************************** TYPE PICKER ******************************/
@@ -380,93 +335,61 @@
380 335 /******************************************************************************/
381 336 /******************************** TYPE PICKER ******************************/
382 337 /******************************************************************************/
383 338
384 -.type-box span {
385 - display: block;
386 - position: absolute;
387 - right: 0;
388 - bottom: -6px;
389 - width: 100%;
390 - padding: 4px 0;
391 - border-top: 1px dashed #ddd;
392 - border-bottom: 1px dashed #ddd;
393 - background: #e0e0e0;
394 - background-color: #efefef;
395 - box-shadow: 0 0 8px #ddd;
396 - font-weight: bold;
397 - text-align: center;
398 -}
399 -
400 -.type-box .pro-upsell {
401 - color: #c55555;
402 -}
403 -
404 339 #type-picker {
405 - width: 954px;
406 340 margin: 50px auto;
341 + width: 952px;
407 342 }
408 343
409 344 .type-box {
410 345 float: left;
411 - position: relative;
412 346 margin: 0 20px 20px 0;
413 347 border: 1px dashed #ddd;
348 + -webkit-box-shadow: 0px 0px 8px #ddd;
349 + box-shadow: 0px 0px 8px #ddd;
414 350 background-color: #efefef;
415 - box-shadow: 0 0 8px #ddd;
416 351 }
417 352
418 353 .type-box:nth-child(3n+3) {
419 - margin-right: 0;
354 + margin-right: 0px;
420 355 }
421 356
422 -.type-box .pro-upsell .visualizder-pro-label {
423 - display: inline;
424 - position: absolute;
425 - top: 0;
426 - width: 74px;
427 - height: 10px;
428 - height: 17px;
429 - border: none;
430 - color: #fff;
431 - background: #c55555;
432 -}
433 -
434 357 .type-label {
435 358 display: block;
436 359 width: 270px;
437 - height: 205px;
360 + height: 195px;
438 361 padding: 15px;
439 - border: 1px solid #e0e0e0;
440 362 background-color: white;
441 363 background-image: url(../images/chart_types_g.png);
442 364 background-repeat: no-repeat;
443 365 background-position: center center;
366 + border: 1px solid #e0e0e0;
444 367 }
445 368
446 369 .type-label-selected,
447 -.type-box > .type-label:hover {
370 +.type-label:hover {
448 371 background-image: url(../images/chart_types.png);
449 372 }
450 373
451 374 .type-box-area .type-label {
452 - background-position: 0 -225px;
375 + background-position: 0px -225px;
453 376 }
454 377
455 378 .type-box-line .type-label {
456 - background-position: -600px 0;
379 + background-position: -600px 0px;
457 380 }
458 381
459 382 .type-box-scatter .type-label {
460 - background-position: -300px 0;
383 + background-position: -300px 0px;
461 384 }
462 385
463 386 .type-box-pie .type-label {
464 - background-position: 0 0;
387 + background-position: 0px 0px;
465 388 }
466 389
467 390 .type-box-gauge .type-label {
468 - background-position: 0 -450px;
391 + background-position: 0px -450px;
469 392 }
470 393
471 394 .type-box-geo .type-label {
472 395 background-position: -600px -450px;
@@ -495,8 +418,44 @@
495 418 .type-box-combo .type-label {
496 419 background-position: -597px -670px;
497 420 }
498 421
422 +a.pro-upsell {
423 + margin: 0;
424 + display: flex;
425 + align-items: center;
426 + height: 20px;
427 + padding:10px 20px;
428 + border-radius: 50px;
429 + -moz-border-radius: 50px;
430 + -webkit-border-radius: 50px;
431 + background-color: #4285F4;
432 + text-decoration: none;
433 + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
434 + border: 1px solid #2c80d6;
435 + transition: all .5s ease-in;
436 + top: 10px;
437 + position: relative;
438 + }
439 +
440 + a.pro-upsell:hover {
441 + background-color: #5a95f5;
442 + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
443 +}
444 +
445 + a.pro-upsell span {
446 + color: #fff;
447 + margin-right: 10px;
448 + display:inline-block;
449 + }
450 +
451 + a.pro-upsell {
452 + font-weight: bold;
453 + font-size: 13px;
454 + color: #fff;
455 + display: inline;
456 + }
457 +
499 458 /******************************************************************************/
500 459 /******************************** OTHER STYLES ******************************/
501 460 /******************************************************************************/
502 461
@@ -501,33 +460,30 @@
501 460 /******************************************************************************/
502 461
503 462 #thehole {
504 463 position: absolute;
464 + left: 0;
505 465 top: 0;
506 - left: 0;
507 466 width: 1px;
508 467 height: 1px;
509 468 border: 0;
510 - opacity: 0;
511 -
512 - filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
513 - -moz-opacity: 0;
469 + opacity: 0;
470 + -moz-opacity: 0;
471 + filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
514 472 }
515 473
516 -.locker,
517 -.locker-loader {
474 +.locker, .locker-loader {
475 + left: 0;
476 + top: 0;
518 477 position: absolute;
519 - top: 0;
520 - left: 0;
521 478 }
522 479
523 480 .locker {
524 481 z-index: 1000;
525 - opacity: 0.8;
526 482 background-color: white;
527 -
528 483 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
529 484 filter: alpha(opacity=80);
485 + opacity: 0.8;
530 486 }
531 487
532 488 .locker-loader {
533 489 z-index: 1001;
@@ -534,223 +490,253 @@
534 490 background: url(../images/ajax-loader.gif) no-repeat center center;
535 491 }
536 492
537 493 .file-wrapper {
538 - display: inline-block;
539 - width: auto;
540 - max-width: 133px;
494 + display: inline-block;
495 + width: auto;
496 + max-width: 133px;
541 497 }
542 498
543 499 .file {
544 - position: fixed;
545 - max-width: 138px;
546 - margin-top: -6px;
547 - margin-left: -33px;
548 - opacity: 0;
549 - font-size: 22px;
550 - cursor: pointer;
551 -
552 - filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
553 - -moz-opacity: 0;
500 + font-size: 22px;
501 + position: fixed;
502 + opacity: 0;
503 + margin-left: -33px;
504 + margin-top: -6px;
505 + -moz-opacity: 0;
506 + filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
507 + cursor: pointer;
508 + max-width: 138px;
554 509 }
555 510
556 511 #remote-file {
557 - display: inline-block;
558 - float: right;
559 - margin-left: 6px;
512 + float: right;
513 + display: inline-block;
514 + margin-left: 6px;
560 515 }
561 516
562 -.form-inline {
563 - display: table;
564 - /*margin: 0 auto;*/
565 - width: 100%;
566 - vertical-align: middle;
567 -}
517 + .form-inline {
518 + /*margin: 0 auto;*/
519 + width:100%;
520 + display: table;
521 + vertical-align: middle;
522 + }
568 523
569 -.computer-btn {
570 - overflow: hidden;
571 - left: -18px;
524 + .computer-btn{
525 + color: #646464 !important;
526 + border: medium none rgb(100, 100, 100) !important;
527 + background: #E6E6E6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
572 528 padding-left: 27px !important;
573 - border: medium none rgb(100, 100, 100) !important;
574 - border: 1px solid #b0b0b0 !important;
575 - color: #646464 !important;
576 - background: #e6e6e6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
577 - box-shadow: none !important;
578 - text-shadow: none!important;
529 + transition: all 0.3s ease 0s;
579 530 font-family: "Open Sans",sans-serif;
580 531 font-weight: 700;
581 - -webkit-transition: all 0.3s ease 0s;
532 + border: 1px solid #B0B0B0 !important;
533 + box-shadow: none !important;
534 + text-shadow:none!important;
535 + left: -18px;
536 + overflow: hidden;
537 +
538 + }
539 +
540 + .computer-btn:hover{
541 + color: white !important;
542 + background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
582 543 transition: all 0.3s ease 0s;
583 -}
584 -
585 -.computer-btn:hover {
586 544 padding-left: 27px !important;
545 + -webkit-transition: all .3s ease;
546 + -moz-transition: all .3s ease;
547 + -ms-transition: all .3s ease;
548 + -o-transition: all .3s ease;
549 + transition: all .3s ease;
550 + box-shadow: 0px 1px 0px rgba(171, 171, 171, 0.5) inset, 0px 1px 0px rgba(0, 0, 0, 0.15) !important;
587 551 border: 1px solid #2f8cea !important;
588 - color: white !important;
589 - background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
590 - box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
591 552 box-shadow: none !important;
592 - -webkit-transition: all 0.3s ease 0s;
593 - -webkit-transition: all 0.3s ease;
594 - transition: all 0.3s ease 0s;
595 - transition: all 0.3s ease;
596 -}
597 553
598 -.from-web {
599 - margin-top: 0;
554 +
555 + }
556 +
557 + .just-on-pro{
558 + background: #F5F5F5 url("../images/available_pro.png") no-repeat scroll 0px 1px !important;
559 + width: 250px;
560 + height: 100px;
561 + cursor:not-allowed;
562 + opacity: 0.8;
563 + margin-bottom: 10px;
564 + }
565 +
566 +
567 +
568 + .from-web{
569 + margin-top: 0px;
600 570 margin-bottom: 15px !important;
601 571 }
602 572
603 -.from-web-btn {
573 + .from-web-btn{
574 + color: #646464 !important;
575 + border: medium none #646464 !important;
576 + background: #E6E6E6 url("../images/web.png") no-repeat scroll 7px 1px !important;
604 577 padding-left: 25px !important;
605 - border: medium none #646464 !important;
606 - border: 1px solid #b0b0b0 !important;
607 - color: #646464 !important;
608 - background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
578 + transition: all 0.3s ease 0s;
579 + border: 1px solid #B0B0B0 !important;
609 580 box-shadow: none !important;
610 581 font-family: "Open Sans",sans-serif;
611 582 font-weight: 700;
612 - -webkit-transition: all 0.3s ease 0s;
613 - transition: all 0.3s ease 0s;
614 583 /*margin-left: 2px !important;*/
615 584 }
616 585
617 -.from-web-btn:hover {
586 + .from-web-btn:hover{
587 + color: white !important;
588 + background: #89B158 url("../images/web.png") no-repeat scroll 7px -38px !important;
589 + transition: all 0.3s ease 0s;
618 590 padding-left: 25px !important;
591 + -webkit-transition: all .3s ease;
592 + -moz-transition: all .3s ease;
593 + -ms-transition: all .3s ease;
594 + -o-transition: all .3s ease;
595 + transition: all .3s ease;
619 596 /*margin-left: 2px !important;*/
620 - border: 1px solid #89b158 !important;
621 - color: white !important;
622 - background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
597 + border: 1px solid #89B158 !important;
623 598 box-shadow: none !important;
624 - -webkit-transition: all 0.3s ease 0s;
625 - -webkit-transition: all 0.3s ease;
626 - transition: all 0.3s ease 0s;
627 - transition: all 0.3s ease;
628 599 }
629 600
630 -.preview {
601 +.preview{
631 602 width: 100%;
632 603 }
633 604
605 +
634 606 #sidebar > ul > div.initial-screen > div {
635 607 padding: 0 20px;
636 608 }
637 609
638 -.from-chart-btn {
610 +.from-chart-btn{
611 + color: #646464 !important;
612 + border: medium none #646464 !important;
613 + background: #E6E6E6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
639 614 padding-left: 25px !important;
640 - border: medium none #646464 !important;
641 - border: 1px solid #b0b0b0 !important;
642 - color: #646464 !important;
643 - background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
615 + transition: all 0.3s ease 0s;
616 + border: 1px solid #B0B0B0 !important;
644 617 box-shadow: none !important;
645 618 font-family: "Open Sans",sans-serif;
646 619 font-weight: 700;
647 - -webkit-transition: all 0.3s ease 0s;
648 - transition: all 0.3s ease 0s;
649 620 /*margin-left: 2px !important;
650 621 margin-top: 2px !important;*/
651 622 }
652 623
653 -.from-chart-btn:hover {
654 - padding-left: 25px !important;
655 - /*margin-left: 2px !important;*/
656 - border: 1px solid #10aecb !important;
657 - color: white !important;
658 - background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
659 - box-shadow: none !important;
660 - -webkit-transition: all 0.3s ease 0s;
661 - -webkit-transition: all 0.3s ease;
662 - transition: all 0.3s ease 0s;
663 - transition: all 0.3s ease;
664 - /*margin-top: 2px !important;*/
665 -}
624 + .from-chart-btn:hover{
625 + color: white !important;
626 + background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
627 + transition: all 0.3s ease 0s;
628 + padding-left: 25px !important;
629 + -webkit-transition: all .3s ease;
630 + -moz-transition: all .3s ease;
631 + -ms-transition: all .3s ease;
632 + -o-transition: all .3s ease;
633 + transition: all .3s ease;
634 + /*margin-left: 2px !important;*/
635 + border: 1px solid #10aecb !important;
636 + box-shadow: none !important;
637 + /*margin-top: 2px !important;*/
638 + }
666 639
667 -input#existing-chart {
668 - /*left: 18px;
640 + input#existing-chart {
641 + /*left: 18px;
669 642 width: 110px;
670 643 position: relative;*/
671 -}
644 + }
672 645
673 -select#chart-id {
674 - float: right;
675 - width: 146px;
676 - margin-right: 14px;
677 -}
646 + select#chart-id {
647 + float: right;
648 + width: 95px;
649 + }
678 650
679 -button#editor-chart-button {
680 - display: block;
681 - margin: 0 auto;
651 + button#editor-chart-button {
652 + margin: 0 auto;
653 + display: block;
654 + background-color: #2f8cea !important;
655 + color: white !important;
656 + border: 1px solid #2c80d6 !important;
657 + box-shadow: none !important;
658 + -webkit-transition: all .3s ease;
659 + -moz-transition: all .3s ease;
660 + -ms-transition: all .3s ease;
661 + -o-transition: all .3s ease;
662 + transition: all .3s ease;
663 + text-shadow: none;
664 + }
665 +
666 +.preview-btn{
667 + font-family: "Open Sans",sans-serif;
668 + font-weight: 700;
669 + background-color: #2f8cea !important;
670 + color: white !important;
682 671 border: 1px solid #2c80d6 !important;
683 - color: white !important;
684 - background-color: #2f8cea !important;
685 672 box-shadow: none !important;
686 - text-shadow: none;
687 - -webkit-transition: all 0.3s ease;
688 - transition: all 0.3s ease;
673 + -webkit-transition: all .3s ease;
674 + -moz-transition: all .3s ease;
675 + -ms-transition: all .3s ease;
676 + -o-transition: all .3s ease;
677 + transition: all .3s ease;
689 678 }
690 679
691 -.preview-btn {
692 - border: 1px solid #2c80d6 !important;
693 - color: white !important;
694 - background-color: #2f8cea !important;
695 - box-shadow: none !important;
680 +.preview-btn:hover{
696 681 font-family: "Open Sans",sans-serif;
697 682 font-weight: 700;
698 - -webkit-transition: all 0.3s ease;
699 - transition: all 0.3s ease;
700 -}
701 -
702 -.preview-btn:hover {
683 + background-color: #2c80d6 !important;
684 + color: white !important;
703 685 border: 1px solid #2c80d6 !important;
704 - color: white !important;
705 - background-color: #2c80d6 !important;
706 686 box-shadow: none !important;
707 - font-family: "Open Sans",sans-serif;
708 - font-weight: 700;
709 - -webkit-transition: all 0.3s ease;
710 - transition: all 0.3s ease;
687 + -webkit-transition: all .3s ease;
688 + -moz-transition: all .3s ease;
689 + -ms-transition: all .3s ease;
690 + -o-transition: all .3s ease;
691 + transition: all .3s ease;
711 692 }
712 693
713 -.show-live-btn {
694 +.show-live-btn{
695 + margin-top: 15px !important;
714 696 width: 100%;
715 - margin-top: 15px !important;
716 - border-color: #e98b00 !important;
717 - background-color: #f90 !important;
718 - box-shadow: none !important;
697 + background-color: #F90 !important;
698 + border-color: #E98B00 !important;
719 699 font-family: "Open Sans",sans-serif;
720 700 font-weight: 700;
701 + box-shadow: none !important;
721 702 }
722 703
723 -.show-live-btn:hover {
704 +
705 +.show-live-btn:hover{
706 + margin-top: 15px !important;
724 707 width: 100%;
725 - margin-top: 15px !important;
726 - border-color: #e98b00 !important;
727 708 background-color: #ea8c00 !important;
728 - box-shadow: none !important;
709 + border-color: #E98B00 !important;
729 710 font-family: "Open Sans",sans-serif;
730 711 font-weight: 700;
731 - -webkit-transition: all 0.3s ease;
732 - transition: all 0.3s ease;
712 + box-shadow: none !important;
713 + -webkit-transition: all .3s ease;
714 + -moz-transition: all .3s ease;
715 + -ms-transition: all .3s ease;
716 + -o-transition: all .3s ease;
717 + transition: all .3s ease;
733 718 }
734 719
735 720 .check-pro-btn {
721 + height: 40px;
722 + width: 245px;
736 723 display: block;
737 - width: 245px;
738 - height: 40px;
739 724 margin: 0 auto;
740 725 }
741 726
742 -.advanced-settings-btn,
743 -.return-settings-btn {
727 +.advanced-settings-btn, .return-settings-btn {
728 + cursor: pointer;
744 729 display: block;
730 + margin: 0 auto;
731 + line-height: 34px;
732 + font-size: 17px;
745 733 height: auto;
746 - margin: 0 auto;
747 - margin-top: 5px;
734 + -webkit-border-radius: 3px;
735 + -moz-border-radius: 3px;
736 + border-radius: 3px;
748 737 margin-bottom: 20px;
749 - border-radius: 3px;
750 - font-size: 17px;
751 - line-height: 34px;
752 - cursor: pointer;
738 + margin-top:5px;
753 739 }
754 740
755 741 .return-settings-btn {
756 742 width: 90%;
@@ -764,295 +750,40 @@
764 750 margin: 10px auto;
765 751 }
766 752
767 753 .hidden-setting {
768 - display: none;
754 + display:none;
769 755 }
770 756
757 +
758 +
771 759 /* ====== RESPONSIVE ====== */
772 760
761 +
773 762 @media (max-width: 1366px) {
774 - #rate-stars {
775 - margin: 3px 0 10px 40%;
776 - }
777 -
778 - .rate-the-plugin {
779 - margin-left: -8%;
780 - }
763 + .group-title {
764 + padding: 4px 20px;
765 + font-weight: 400;
766 + font-size: 14px;
767 + }
768 + .group-title::after {
769 + top: 10px;
770 + }
771 + #rate-stars {
772 + margin: 3px 0 10px 40%;
773 + }
774 + .rate-the-plugin {
775 + margin-left: -8%;
776 + }
781 777 }
782 778
783 779 @media screen and (max-width: 782px) {
784 - .button.button-primary.file-wrapper.computer-btn,
785 - #remote-file,
786 - #existing-chart {
787 - height: 28px;
788 - margin-bottom: 4px;
780 +.button.button-primary.file-wrapper.computer-btn, #remote-file, #existing-chart {
789 781 padding: 0 10px 1px;
790 - font-size: 13px;
791 - line-height: 26px;
792 - vertical-align: middle;
782 + line-height: 26px;
783 + font-size: 13px;
784 + vertical-align: middle;
785 + height: 28px;
786 + margin-bottom: 4px;
793 787 }
794 -}
795 788
796 -#vz-chart-settings h2:hover,
797 -#vz-chart-permissions h2:hover,
798 -.sidebar-footer-link h2:hover,
799 -#vz-chart-review a:hover {
800 - text-decoration: none;
801 -}
802 -
803 -#vz-chart-review a {
804 - color: #00a0d2;
805 - text-decoration: none;
806 -}
807 -
808 -#vz-chart-settings h2,
809 -#vz-chart-permissions h2,
810 -.sidebar-footer-link h2,
811 -#vz-chart-review h2 {
812 - padding: 0;
813 - border: none;
814 - font-size: 12px;
815 - font-weight: 400;
816 -}
817 -
818 -#vz-chart-review {
819 - right: 0;
820 - bottom: 10px;
821 - box-sizing: border-box;
822 - width: 40%;
823 - padding-right: 6px;
824 - text-align: right;
825 -}
826 -
827 -#vz-chart-settings.bottom-fixed h2 {
828 - padding-left: 6px;
829 -}
830 -
831 -#vz-chart-settings {
832 - bottom: 40px;
833 - left: 0;
834 - box-sizing: border-box;
835 - width: 33%;
836 - text-align: left;
837 -}
838 -
839 -#vz-chart-permissions:not(.open) h2 {
840 - display: inline-block;
841 - width: 100%;
842 - margin: 0;
843 - text-align: right;
844 -}
845 -
846 -#vz-chart-permissions {
847 - right: 0;
848 - bottom: 40px;
849 - box-sizing: border-box;
850 - width: 33%;
851 - text-align: left;
852 -}
853 -
854 -#vz-chart-permissions h2,
855 -#vz-chart-settings h2,
856 -.sidebar-footer-link h2 {
857 - display: inline;
858 - color: #00a0d2;
859 - background: none;
860 - font-family: "Open Sans",sans-serif;
861 - cursor: pointer;
862 -}
863 -
864 -.sidebar-footer-link,
865 -#vz-chart-review,
866 -#vz-chart-permissions,
867 -#vz-chart-settings {
868 - display: inline;
869 - background: none;
870 - cursor: pointer;
871 -}
872 -
873 -.sidebar-footer-link > ul,
874 -#vz-chart-source > ul,
875 -#vz-chart-permissions > ul,
876 -#vz-chart-settings > ul {
877 - position: relative;
878 - z-index: 10;
879 - border-bottom: 1px solid #ddd;
880 -}
881 -
882 -#vz-chart-copyright {
883 - bottom: 10px;
884 - text-align: center;
885 -}
886 -
887 -#sidebar {
888 - border-left: 1px solid #ddd;
889 - background: #f3f3f3;
890 -}
891 -
892 -#vz-chart-permissions.open h2 {
893 - position: absolute;
894 - right: 6px;
895 - bottom: 28px;
896 - left: auto;
897 - width: 50%;
898 - text-align: right;
899 -}
900 -
901 -#vz-chart-settings.open h2 {
902 - position: absolute;
903 - bottom: 28px;
904 - left: 6px;
905 -}
906 -
907 -#vz-chart-permissions .viz-group-header,
908 -#vz-chart-settings.open .viz-group-header {
909 - display: block;
910 -}
911 -
912 -#vz-chart-permissions .viz-group-header,
913 -#vz-chart-settings .viz-group-header {
914 - display: none;
915 -}
916 -
917 -.sidebar-footer-link.open h2 {
918 - position: absolute;
919 - bottom: 28px;
920 - left: 20px;
921 -}
922 -
923 -.sidebar-footer-link.open .viz-group-header {
924 - display: block;
925 -}
926 -
927 -.sidebar-footer-link .viz-group-header {
928 - display: none;
929 -}
930 -
931 -#vz-csv-file-form,
932 -#vz-one-time-import,
933 -#vz-schedule-import,
934 -.edit-data-content {
935 - text-align: center;
936 -}
937 -
938 -#csv-file {
939 - margin: 15px 0;
940 - padding: 0;
941 -}
942 -
943 -.visualizer-input,
944 -.visualizer-select {
945 - width: 100%;
946 - margin: 0 0 15px;
947 -}
948 -
949 -.viz-group .dashicons-lock {
950 - display: none;
951 -}
952 -
953 -.only-pro-feature .dashicons-lock {
954 - display: inline;
955 -}
956 -
957 -.viz-section-title .dashicons,
958 -.viz-group-title .dashicons {
959 - width: 18px;
960 - height: 18px;
961 - margin-left: 3px;
962 - font-size: 18px;
963 -}
964 -
965 -.only-pro-feature input,
966 -.only-pro-feature button,
967 -.only-pro-feature select {
968 - cursor: not-allowed !important;
969 - pointer-events: none;
970 -}
971 -
972 -.only-pro-feature > div {
973 - position: relative;
974 -}
975 -
976 -.only-pro-content {
977 - position: absolute;
978 - top: 0;
979 - bottom: 0;
980 - left: 0;
981 - width: 100%;
982 - opacity: 0;
983 - background: rgba(253,253,253,0.9);
984 - -webkit-transition: 0.5s ease;
985 - transition: 0.5s ease;
986 -}
987 -
988 -.only-pro-feature:hover .only-pro-content {
989 - opacity: 1;
990 -}
991 -
992 -.only-pro-container {
993 - display: table;
994 - width: 100%;
995 - height: 100%;
996 -}
997 -
998 -.only-pro-inner {
999 - display: table-cell;
1000 - vertical-align: middle;
1001 -}
1002 -
1003 -.only-pro-content p {
1004 - margin: 0 0 15px;
1005 - font-size: 14px;
1006 - font-weight: 700;
1007 -}
1008 -
1009 -.only-pro-content a {
1010 - display: inline-block;
1011 - padding: 7px 12px;
1012 - color: #fff;
1013 - background: #ff595e;
1014 - font-weight: 600;
1015 - text-decoration: none;
1016 - text-transform: uppercase;
1017 - -webkit-transition: 0.1s ease;
1018 - transition: 0.1s ease;
1019 -}
1020 -
1021 -.only-pro-content a:hover {
1022 - background: #ce484c;
1023 -}
1024 -
1025 -#sidebar::-webkit-scrollbar {
1026 - width: 4px;
1027 -}
1028 -
1029 -#sidebar::-webkit-scrollbar-thumb {
1030 - background: #999;
1031 -}
1032 -
1033 -span.viz-section-error {
1034 - color: #ff000;
1035 -}
1036 -
1037 -#visualizer-error-manual {
1038 - color: #ff595e;
1039 -}
1040 -
1041 -#vz-chart-permissions {
1042 - width: 43%;
1043 -}
1044 -
1045 -#vz-chart-permissions {
1046 - color: #ce484c;
1047 -}
1048 -
1049 -#vz-chart-permissions {
1050 - right: 6px;
1051 - bottom: 40px;
1052 - width: 35%;
1053 -}
1054 -
1055 -#permissions-form .only-pro-feature > ul {
1056 - position: relative;
1057 - text-align: center;
1058 789 }