PluginProbe
Chartify – WordPress Chart Plugin / 3.5.4
Chartify – WordPress Chart Plugin v3.5.4
3.8.0 3.7.9 3.7.8 3.7.7 3.7.6 3.7.5 trunk 1.0.0 3.0.0 3.0.1 3.0.2 3.0.3 3.0.4 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.1.4 3.1.5 3.1.6 All 83 releases
← All changes | admin/css/chart-builder-admin-layer.css +362 -285 trunk3.5.4 View file →
@@ -1,286 +1,363 @@
1 -/* Redesigned style */
2 -.ays-chart-layer_container {
3 - position: fixed;
4 - top: 0;
5 - left: 0;
6 - background: rgba(193,197,202,.92);
7 - width: 100%;
8 - height: 100%;
9 - z-index: 9950;
10 - justify-content: center;
11 - align-items: center;
12 - transition: .1s;
13 - padding-top: 30px;
14 -}
15 -
16 -.ays-chart-layer_content {
17 - padding-left: 160px;
18 - padding-top: 30px;
19 - height: calc(100vh - 100px);
20 - overflow-y: auto;
21 - display: flex;
22 - justify-content: center;
23 - align-items: center;
24 -}
25 -
26 -.ays-chart-layer_content::-webkit-scrollbar {
27 - display: none;
28 -}
29 -
30 -.ays-chart-layer_item_separate_title {
31 - text-align: center;
32 - font-size: 18px;
33 - font-weight: 500;
34 -}
35 -
36 -/* .ays-chart-select_button_layer {
37 - height: 70px;
38 - background: #9e9e9e00;
39 - width: 100%;
40 - position: fixed;
41 - bottom: 0;
42 - right: 0;
43 - padding-left: 160px;
44 - padding-right: 30px;
45 - box-shadow: 0px 0px 3px 0px #00000050;
46 - display: flex;
47 - align-items: center;
48 - justify-content: flex-end;
49 -} */
50 -
51 -.ays-chart-select_button_item {
52 - display: flex;
53 - align-items: center;
54 - justify-content: flex-end;
55 - flex-wrap: wrap;
56 - height: 100%;
57 - width: 100%;
58 -}
59 -
60 -.ays-chart-layer_item {
61 - width: 100%;
62 - height: 180px;
63 - cursor: pointer;
64 - background-color: #FFFFFF !important;
65 - border: 2px solid transparent;
66 - border-radius: 7px;
67 -}
68 -
69 -.ays-chart-layer_box_blocks {
70 - width: 90%;
71 - display: flex;
72 - justify-content: space-between;
73 - flex-wrap: wrap;
74 - margin: auto;
75 -}
76 -
77 -.ays-chart-layer_item_title {
78 - display: block;
79 - font-size: 20px;
80 - font-weight: 500;
81 - margin-top: 13px;
82 - /* Description on - 40px */
83 -}
84 -
85 -.ays-chart-layer_item_logo {
86 - font-size: 40px;
87 - padding-top: 34px;
88 - display: flex;
89 - flex-direction: column;
90 - justify-content: center;
91 - align-items: center;
92 - /* Description on - 35px */
93 -}
94 -
95 -.ays-chart-layer_item_logo_shortcode {
96 - font-weight: 500;
97 -}
98 -
99 -.ays-chart-layer_icons {
100 - /* line-height: 70px; */
101 - width: 100%;
102 - height: 100%;
103 -}
104 -
105 -.ays-chart-layer_item_logo_overlay {
106 - width: 100px;
107 - height: 100px;
108 - margin: auto;
109 - /* border-radius: 50%; */
110 - /* background: #7fa6ff7a; */
111 - background-repeat: no-repeat;
112 -
113 -}
114 -
115 -.ays-chart-layer_box {
116 - display: flex;
117 - justify-content: center;
118 - flex-direction: column;
119 - /* flex-wrap: wrap; */
120 - padding: 10px;
121 - margin: auto;
122 - position: relative;
123 - width: 80%;
124 - min-height: 500px;
125 - background-color: #f0f0f0;
126 - border-radius: 12px;
127 - /* box-shadow: 0px 0px 11px 1px #5d5454; */
128 -}
129 -
130 -.ays-chart-layer_box_layer_block {
131 - margin-bottom: 7px;
132 - border-radius: 7px;
133 - box-shadow: 0px 1px 2px rgba(97,97,97,1);
134 -}
135 -
136 -.ays-chart-layer_button {
137 - background-color: #476fff;
138 - border: none;
139 - color: white;
140 - padding: 10px 15px;
141 - text-align: center;
142 - text-decoration: none;
143 - border-radius: 5px;
144 - display: block;
145 - font-size: 16px;
146 - font-weight: bold;
147 - cursor: pointer
148 -}
149 -
150 -.ays-chart-layer_box label input[type="radio"] {
151 - display: none;
152 -}
153 -
154 -.ays-chart-layer_box label input[type="radio"]:checked+.ays-chart-layer_item {
155 - border: 2px solid #2196f3;
156 - background-color: #2196f32d !important;
157 -}
158 -
159 -.ays-chart-layer_box .ays-chart-layer_item_checked {
160 - /* display: none; */
161 - line-height: 24px;
162 - width: 90%;
163 - display: none;
164 - justify-content: flex-end;
165 - margin-top: 10px;
166 -}
167 -
168 -.ays-chart-layer_box label input[type="radio"]:checked+.ays-chart-layer_item .ays-chart-layer_item_checked {
169 - display: flex;
170 -}
171 -
172 -
173 -.ays-chart-layer_box .pro_features p {
174 - margin-bottom: 0;
175 - margin-right: 0;
176 - text-align: center;
177 -}
178 -
179 -.ays-chart-layer_box .pro_features {
180 - background: rgba(0, 0, 0, .15);
181 -}
182 -
183 -.ays-chart-layer_item {
184 - text-align: center;
185 - /* margin-bottom: 7px; */
186 -}
187 -
188 -.ays-chart-layer_item {
189 - transition: .2s ease;
190 -}
191 -
192 -
193 -label.ays-chart-label-style {
194 - margin-right: 5px;
195 - border: 1px solid #ccc;
196 - display: inline-block;
197 - align-items: center;
198 - padding: 8px;
199 -}
200 -
201 -.ays-chart-dblclick-layer {
202 - position: relative;
203 - width: 100%;
204 -}
205 -
206 -.ays-chart-layer_item_logo_overlay_range {
207 - width: 100%;
208 -}
209 -
210 -.ays-chart-layer_item_logo_overlay_range img {
211 - width: 170px;
212 -}
213 -
214 -/* .ays-chart-close-layer {
215 - display: flex;
216 - align-items: center;
217 - margin: auto;
218 - max-width: 80%;
219 - width: 100%;
220 - justify-content: flex-end;
221 - cursor: pointer;
222 -} */
223 -
224 -.ays-chart-choose-type {
225 - margin: auto;
226 -}
227 -
228 -.ays-chart-choose-type>p {
229 - margin: 0;
230 - font-size: 30px;
231 - text-align: center;
232 -}
233 -
234 -.ays-chart-close-type {
235 - position: absolute;
236 - top: -15px;
237 - right: -10px;
238 -}
239 -
240 -.ays-chart-close-type a {
241 - outline: none !important;
242 - border: none !important;
243 - color: unset !important;
244 - box-shadow: none !important;
245 -}
246 -
247 -.ays-chart-layer_box_each_block {
248 - margin: 10px 10px 20px;
249 - width: 250px;
250 - min-width: 240px;
251 - /* height: 250px; */
252 -}
253 -
254 -
255 -@media only screen and (max-width: 960px) {
256 - /* .ays-chart-select_button_layer {
257 - padding-left: 36px !important;
258 - } */
259 -
260 - .ays-chart-layer_content {
261 - padding-left: 36px !important;
262 - }
263 -}
264 -
265 -@media screen and (max-width: 1160px) {
266 - /* .ays-chart-close-layer {
267 - max-width: 90% !important;
268 - } */
269 - .ays-chart-layer_box_blocks {
270 - justify-content: space-around;
271 - }
272 -}
273 -
274 -@media screen and (max-width: 768px) {
275 -
276 -
277 - /* .ays-chart-close-layer {
278 - max-width: 75% !important;
279 - } */
280 -
281 - .ays-chart-choose-type>p {
282 - font-size: 18px !important;
283 - }
284 -}
285 -
1 +/* Redesigned style */
2 +.ays-chart-layer_container {
3 + position: fixed;
4 + top: 0;
5 + left: 0;
6 + background: rgba(193,197,202,.92);
7 + width: 100%;
8 + height: 100%;
9 + z-index: 9999;
10 + justify-content: center;
11 + align-items: center;
12 + transition: .1s;
13 + padding-top: 30px;
14 + /* padding-left: 160px; */
15 +}
16 +
17 +.ays-chart-layer_content {
18 + /* padding-left: 160px; */
19 + padding-top: 30px;
20 + /* padding-bottom: 20px; */
21 + height: calc(100vh - 100px);
22 + overflow-y: auto;
23 + display: flex;
24 + justify-content: center;
25 + align-items: center;
26 +}
27 +
28 +.ays-chart-layer_content::-webkit-scrollbar {
29 + display: none;
30 +}
31 +
32 +.ays-chart-layer_item_separate_title {
33 + text-align: center;
34 + font-size: 18px;
35 + font-weight: 500;
36 +}
37 +
38 +.ays-chart-view_demo_content {
39 + text-align: center;
40 + margin-top: -5px;
41 +}
42 +.ays-chart-view_demo_content>a {
43 + text-align: center;
44 + font-style: italic;
45 + font-weight: 700;
46 + font-size: 12px;
47 + line-height: 32px;
48 +}
49 +
50 +.ays-chart-select_button_layer {
51 + height: 70px;
52 + background: #9e9e9e00;
53 + width: 100%;
54 + position: fixed;
55 + bottom: 0;
56 + left: 0;
57 + right: 0;
58 + z-index: 3;
59 + /* padding-left: 160px; */
60 + box-shadow: 0px 0px 3px 0px #00000050;
61 +}
62 +
63 +.ays-chart-select_button_item {
64 + display: flex;
65 + align-items: center;
66 + justify-content: center;
67 + flex-wrap: wrap;
68 + height: 100%;
69 + width: 100%;
70 +}
71 +
72 +.ays-chart-layer_item {
73 + width: 100%;
74 + height: 180px;
75 + cursor: pointer;
76 + background-color: #FFFFFF !important;
77 + border: 2px solid transparent;
78 + border-radius: 7px;
79 +}
80 +
81 +.ays-chart-layer_box_blocks {
82 + /* width: 90%; */
83 + height: 100%;
84 + display: flex;
85 + justify-content: center;
86 + flex-wrap: wrap;
87 + margin: auto;
88 + overflow-y: auto;
89 + padding: 20px;
90 + scrollbar-color: #bbbbbb #f0f0f0;
91 + scrollbar-width: thin;
92 +}
93 +
94 +.ays-chart-layer_box_blocks::-webkit-scrollbar-track {
95 + -webkit-box-shadow: inset 0 0 6px #f0f0f0;
96 + background-color: #f0f0f0;
97 +}
98 +
99 +.ays-chart-layer_box_blocks::-webkit-scrollbar {
100 + width: 8px;
101 +}
102 +
103 +.ays-chart-layer_box_blocks::-webkit-scrollbar-thumb {
104 + border-radius: 10px;
105 + background-color: #bbbbbb;
106 +}
107 +
108 +.ays-chart-layer_item_title {
109 + display: block;
110 + font-size: 20px;
111 + font-weight: 500;
112 + margin-top: 13px;
113 + /* Description on - 40px */
114 +}
115 +
116 +.ays-chart-layer_item_logo {
117 + font-size: 40px;
118 + padding-top: 34px;
119 + display: flex;
120 + flex-direction: column;
121 + justify-content: center;
122 + align-items: center;
123 + /* Description on - 35px */
124 +}
125 +
126 +.ays-chart-layer_item_logo_shortcode {
127 + font-weight: 500;
128 +}
129 +
130 +.ays-chart-layer_icons {
131 + /* line-height: 70px; */
132 + width: 100%;
133 + height: 100%;
134 +}
135 +
136 +.ays-chart-layer_item_logo_overlay {
137 + width: 100px;
138 + height: 100px;
139 + margin: auto;
140 + /* border-radius: 50%; */
141 + /* background: #7fa6ff7a; */
142 + background-repeat: no-repeat;
143 +
144 +}
145 +
146 +.ays-chart-layer_box {
147 + display: flex;
148 + justify-content: center;
149 + flex-direction: column;
150 + /* flex-wrap: wrap; */
151 + /* padding: 10px; */
152 + margin: auto;
153 + position: relative;
154 + width: 80%;
155 + max-width: 1200px;
156 + min-height: 500px;
157 + height: 100%;
158 + background-color: #f0f0f0;
159 + border-radius: 12px 0;
160 + /* box-shadow: 0px 0px 11px 1px #5d5454; */
161 +}
162 +
163 +.ays-chart-layer_box_layer_block {
164 + margin-bottom: 7px;
165 + border-radius: 7px;
166 + box-shadow: 0px 1px 2px rgba(97,97,97,1);
167 +}
168 +
169 +.ays-chart-layer_button {
170 + background-color: #476fff;
171 + border: none;
172 + color: white;
173 + width: 110px;
174 + padding: 10px 15px;
175 + text-align: center;
176 + text-decoration: none;
177 + border-radius: 5px;
178 + display: block;
179 + font-size: 16px;
180 + font-weight: bold;
181 + cursor: pointer
182 +}
183 +
184 +.ays-chart-layer_box label input[type="radio"] {
185 + display: none;
186 +}
187 +
188 +.ays-chart-layer_box label input[type="radio"]:checked+.ays-chart-layer_item {
189 + border: 2px solid #2196f3;
190 + background-color: #2196f32d !important;
191 +}
192 +
193 +.ays-chart-layer_box .ays-chart-layer_item_checked {
194 + /* display: none; */
195 + line-height: 24px;
196 + width: 90%;
197 + display: none;
198 + justify-content: flex-end;
199 + margin-top: 10px;
200 +}
201 +
202 +.ays-chart-layer_box label input[type="radio"]:checked+.ays-chart-layer_item .ays-chart-layer_item_checked {
203 + display: flex;
204 +}
205 +
206 +.ays-chart-layer_box_layer_block.only_pro {
207 + padding: 0;
208 +}
209 +
210 +.ays-chart-layer_box .pro_features>div>a {
211 + width: fit-content;
212 + height: fit-content;
213 + display: flex;
214 + padding: 5px 13px;
215 + background-color: #FFE9DE;
216 + border-radius: 25px;
217 + color: #F47535;
218 + font-size: 13px;
219 + box-shadow: 0px 1px 1px #00000036;
220 + font-weight: 700;
221 + cursor: pointer;
222 + text-decoration: none;
223 +}
224 +
225 +.ays-chart-layer_box .pro_features>div>a .ays-chart-pro-features-icon {
226 + width: 20px;
227 + height: 20px;
228 + background-repeat: no-repeat;
229 + background-size: cover;
230 +}
231 +
232 +.ays-chart-layer_box .pro_features {
233 + background: rgb(255 255 255 / 38%);
234 + border-radius: 7px;
235 + padding: 6px;
236 + cursor: not-allowed;
237 +}
238 +
239 +.ays-chart-layer_item {
240 + text-align: center;
241 + /* margin-bottom: 7px; */
242 + transition: .2s ease;
243 +}
244 +
245 +.ays-chart-layer_item, .ays-chart-layer_item * {
246 + user-select: none;
247 +}
248 +
249 +label.ays-chart-label-style {
250 + margin-right: 5px;
251 + border: 1px solid #ccc;
252 + display: inline-block;
253 + align-items: center;
254 + padding: 8px;
255 +}
256 +
257 +.ays-chart-dblclick-layer {
258 + position: relative;
259 + width: 100%;
260 +}
261 +
262 +.ays-chart-layer_item_logo_overlay_range {
263 + width: 100%;
264 +}
265 +
266 +.ays-chart-layer_item_logo_overlay_range img {
267 + width: 170px;
268 +}
269 +
270 +.ays-chart-layer_item_geo_chart {
271 + width: 150px;
272 + height: auto;
273 +}
274 +
275 +/* .ays-chart-close-layer {
276 + display: flex;
277 + align-items: center;
278 + margin: auto;
279 + max-width: 80%;
280 + width: 100%;
281 + justify-content: flex-end;
282 + cursor: pointer;
283 +} */
284 +
285 +.ays-chart-choose-type {
286 + margin: auto;
287 +}
288 +
289 +.ays-chart-choose-type>p {
290 + margin: 0;
291 + font-size: 30px;
292 + text-align: center;
293 +}
294 +
295 +.ays-chart-close-type {
296 + position: absolute;
297 + top: -15px;
298 + right: -10px;
299 + z-index: 5;
300 +}
301 +
302 +.ays-chart-close-type a {
303 + outline: none !important;
304 + border: none !important;
305 + color: unset !important;
306 + box-shadow: none !important;
307 +}
308 +
309 +.ays-chart-layer_box_source_type {
310 + padding: 20px;
311 +}
312 +
313 +.ays-chart-layer_box_source_type select {
314 + width: 100%;
315 + max-width: 100%;
316 + min-width: 100%;
317 +}
318 +
319 +.ays-chart-layer_box_each_block {
320 + margin: 10px 10px 20px;
321 + width: 250px;
322 + min-width: 240px;
323 + /* height: 250px; */
324 +}
325 +
326 +.ays-chart-layer_box_link {
327 + margin: 10px 0;
328 + text-align: center;
329 +}
330 +
331 +@media only screen and (max-width: 960px) {
332 + /* .ays-chart-select_button_layer {
333 + padding-left: 36px !important;
334 + } */
335 +
336 + .ays-chart-layer_container {
337 + padding-left: 0 !important;
338 + }
339 +}
340 +
341 +@media screen and (max-width: 1160px) {
342 + /* .ays-chart-close-layer {
343 + max-width: 90% !important;
344 + } */
345 + .ays-chart-layer_box_blocks {
346 + justify-content: space-around;
347 + padding: 0;
348 + }
349 +}
350 +
351 +@media screen and (max-width: 768px) {
352 +
353 +
354 + /* .ays-chart-close-layer {
355 + max-width: 75% !important;
356 + } */
357 +
358 + .ays-chart-choose-type>p {
359 + font-size: 18px !important;
360 + }
361 +}
362 +
286 363 /* */