PluginProbe
Chartify – WordPress Chart Plugin / 3.7.9
Chartify – WordPress Chart Plugin v3.7.9
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
chart-builder / admin / css / banner.css

banner.css in Chartify – WordPress Chart Plugin 3.7.9, at admin/css/banner.css

673 lines 14.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* ~~ Top Navigation Bar ~~ */
2
3 .ays-notice-banner{
4 width: calc(100% - 20px);
5 /* background-color: #0093E9;
6 background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); */
7 background-color: #F8F8F8;
8 box-shadow: 0px 3px 4px 0px rgb(188 198 216 / 11%);
9 border-radius: 0px 0px 12px 12px;
10 background-image: unset;
11 /* padding-bottom:10px;
12 padding-left:10px;
13 padding-top: 15px; */
14 }
15
16 .ays-notice-banner #navigation-container {
17 width: 100%;
18 margin: 33px 0 0 0;
19 margin: 0 auto;
20 display: flex;
21 flex-direction: row;
22 flex-wrap: nowrap;
23 justify-content: space-between;
24 align-items: stretch;
25 align-content: stretch;
26 /* padding-top: 20px; */
27 gap:0;
28 }
29
30 .ays-notice-banner .navigation-bar {
31 width: 100%;
32 text-align:center;
33 }
34
35 .ays-chart-top-banner-title span.ays-chart-top-banner-main-title {
36 color: #0f172a;
37 font-size: 15px;
38 font-size: 17px;
39 font-weight: 600;
40 text-wrap-mode: nowrap;
41 }
42 .ays-chart-top-banner-title {
43 margin-right: 30px;
44 text-align: left;
45 }
46 .ays-chart-logo-container-one-time-text{
47 margin-top: 5px;
48 color: #475569;
49 font-size: 10px !important;
50 font-weight: 500 !important;
51 font-style: italic !important;
52 white-space: nowrap;
53 }
54 .ays-chart-top-banner-title span.ays-chart-top-banner-sub-title {
55 margin-top: 4px;
56 color: #475569;
57 font-size: 11px;
58 font-weight: 500;
59 letter-spacing: .05em;
60 text-transform: none;
61 }
62
63 .ays-chart-upgrade-container div:first-child {
64 margin-left: 20px;
65 align-self: center;
66 display: flex;
67 flex-direction: column;
68 }
69 /* .ays-chart-upgrade-container div:first-child a svg {
70 width: 8px;
71 height: 13px;
72 } */
73 /* .ays-notice-banner .navigation-bar a.logo-container{
74 margin: 0 0 0 20px;
75 } */
76 .ays-notice-banner .navigation-bar a.logo-container .logo {
77 float: left;
78 width: 80px;
79 }
80 .ays-notice-banner .navigation-bar ul {
81 display: flex;
82 flex-direction: row;
83 flex-wrap: nowrap;
84 justify-content: flex-end;
85 align-items: baseline;
86 align-content: stretch;
87 padding: 0;
88 margin: 0 20px 0 0;
89 max-width: 100%;
90 /* min-width: 160px; */
91 width: 100%;
92 }
93
94 .ays-notice-banner .navigation-bar li {
95 padding: 0px;
96 margin-top: 8px;
97 margin-bottom: 4px;
98 margin-right: 44px;
99 }
100
101 /* .ays-notice-banner .navigation-bar li.take_survay a:hover:after {
102 border-color: #A9FF00;
103 } */
104
105 .ays-notice-banner .navigation-bar li:last-child {
106 margin-right: 0;
107 }
108
109
110 .ays-notice-banner .navigation-bar li.take_survay a {
111 /* color: #A9FF00; */
112 color: #F98A0C;
113 }
114
115 .ays-notice-banner .navigation-bar li.take_survay a:hover {
116 /* color: #C44949; */
117 color: #F98A0C;
118 }
119
120
121 .ays-notice-banner .navigation-bar li a {
122 /* color: #fff; */
123 color: #5561A3;
124 cursor: pointer;
125 font-size: 16px;
126 font-weight: 400;
127 line-height: 45px;
128 margin: 0 0 2em;
129 max-width: 160px;
130 position: relative;
131 text-decoration: none;
132 /* text-transform: uppercase; */
133 text-decoration: underline;
134 width: 100%;
135 letter-spacing: 0;
136 }
137
138 .ays-notice-banner .navigation-bar li a:after {
139 -webkit-backface-visibility: hidden;
140 backface-visibility: hidden;
141 border: 1px solid rgba(255, 255, 255, 0);
142 bottom: 0;
143 content: " ";
144 display: none;
145 margin: 0 auto;
146 position: relative;
147 transition: all 280ms ease-in-out;
148 width: 0;
149 }
150
151 /* .ays-notice-banner .navigation-bar li a:hover:after{
152 -webkit-backface-visibility: hidden;
153 backface-visibility: hidden;
154 border-color: #fff;
155 transition: width 350ms ease-in-out;
156 width: 100%;
157 } */
158
159 .ays-notice-banner .navigation-bar li a:hover{
160 outline: unset;
161 box-shadow: unset;
162 color: #3E477D;
163 }
164
165 .ays-notice-banner .modile-ddmenu-lg {
166 display: none;
167 }
168
169 .ays-notice-banner .modile-ddmenu-sm,
170 .ays-notice-banner .modile-ddmenu-md {
171 display: none;
172 position: relative;
173
174 }
175
176 .ays-notice-banner #menu li a.toggle_ddmenu {
177 font-size:25px;
178 /* color:#fff; */
179 color: #5561A3;
180 width: 100%;
181 }
182
183 .ays-notice-banner #menu li a.toggle_ddmenu i.ays_fa{
184 transition: .1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
185 }
186
187 .ays-notice-banner li ul.ddmenu {
188 display: none;
189 position: absolute;
190 right: -55px;
191 top: 50px;
192 z-index: 10000;
193 flex-direction: column;
194 width: fit-content;
195 min-width: 200px;
196 text-align: left;
197 /* background-color: #0093E9; */
198 /* background-image: linear-gradient(-160deg, #80D0C7 0%, #0093E9 100%); */
199 background-color: #FFFFFF;
200 background-image: unset;
201 box-shadow: 0px 4px 4px rgb(188 198 216 / 11%);
202
203 }
204
205 .ays-notice-banner li ul.ddmenu[data-expanded="true"] {
206 display: flex;
207 animation: slideInRight .2s;
208 }
209
210 .ays-notice-banner li ul.ddmenu li {
211 padding-left: 20px;
212 }
213
214 /* .ays-notice-banner .logo-container {
215 width:75px;
216 height:75px;
217 } */
218
219 .ays-notice-banner .logo-container img {
220 width:100%;
221 height:100%;
222 object-fit:contain;
223 }
224
225 .ays-navigation-container-logo-upgrade-box {
226 display: flex;
227 gap: 25px;
228 align-items: center;
229 }
230
231 /* .ays-notice-banner a.ays-btn-upgrade:link, .ays-notice-banner a.ays-btn-upgrade:visited {
232 padding: 5px 18px;
233 border: 2px solid #10A37F;
234 border-radius: 30px;
235 color: #ffffff;
236 width: fit-content;
237 font-weight: 700;
238 font-size: 14px;
239 display: inline-block;
240 display: flex;
241 text-decoration: none;
242 justify-content: space-between;
243 gap: 5px;
244 transition: .3s;
245 margin: auto;
246 margin-top: 6px;
247 background-color: #10a37f;
248 } */
249
250 .ays-notice-banner #navigation-container a.ays-btn-upgrade:focus {
251 outline: none;
252 box-shadow: none;
253 }
254 .ays-notice-banner #navigation-container a.ays-btn-upgrade:hover {
255 background-color: #0d8165;
256 }
257 /* .ays-notice-banner #navigation-container a.ays-btn-upgrade:hover svg path {
258 transition: 0.3s;
259 fill: #ffffff !important;
260 } */
261
262 @media screen and (max-width: 530px) {
263 .ays-notice-banner #navigation-container a.ays-btn-upgrade {
264 padding: 5px 10px;
265 }
266 }
267
268 @media screen and (min-width: 1080px){
269 .ays-notice-banner .modile-ddmenu-lg {
270 display: block;
271 }
272 .ays-notice-banner .modile-ddmenu-sm {
273 display: none;
274 }
275 .ays-notice-banner .modile-ddmenu-md {
276 display: none;
277 }
278 .ays-notice-banner .modile-ddmenu-xs {
279 display: none;
280 }
281 }
282
283 @media screen and (max-width: 1080px){
284 .ays-notice-banner .modile-ddmenu-md {
285 display: block;
286 }
287 }
288
289 @media screen and (min-width: 531px) and (max-width: 768px){
290 .ays-notice-banner .modile-ddmenu-sm {
291 display: none;
292 }
293 .ays-notice-banner .modile-ddmenu-md {
294 display: block;
295 }
296
297 div.ays-notice-banner{
298 width: 100%;
299 }
300
301 }
302 @media screen and (max-width: 530px){
303 .ays-notice-banner .modile-ddmenu-sm {
304 display: block;
305 }
306 .ays-notice-banner .modile-ddmenu-md {
307 display: none;
308 }
309 .ays-notice-banner .modile-ddmenu-xs {
310 display: none;
311 }
312 .ays-navigation-container-logo-upgrade-box{
313 gap:5px
314 }
315 }
316
317 div#screen-meta-links .show-settings {
318 border: unset;
319 }
320
321 div#screen-meta {
322 border: unset;
323 border-bottom: 1px solid #c3c4c770;
324 }
325
326 .ays-fa-margin-right {
327 margin-right: 5px;
328 }
329
330
331
332 /* ~~ Top Navigation Bar ~~ */
333 /* top banner redesign | Start */
334 div.ays-notice-banner {
335 width: calc(100% - 20px);
336 max-width: 100%;
337 margin: 30px 0 0 0;
338 background: #fff;
339 /* border: 1px solid rgba(203, 213, 225, .8); */
340 border: unset;
341 border-radius: 16px;
342 box-shadow: 0 4px 20px -8px rgba(15, 23, 42, .08);
343 overflow: visible;
344 }
345
346 .ays-notice-banner #navigation-container {
347 min-height: 76px;
348 padding: 0 20px;
349 background: #fff;
350 border-radius: 16px;
351 align-items: center;
352 gap: 22px;
353 }
354
355 .ays-notice-banner .navigation-bar {
356 text-align: left;
357 }
358
359 .ays-notice-banner .ays-navigation-container-logo-upgrade-box {
360 flex: 0 0 auto;
361 gap: 3px;
362 }
363
364 .ays-notice-banner .logo-container {
365 width: 50px;
366 height: 50px;
367 margin-left: 0;
368 flex: 0 0 60px;
369 }
370
371 .ays-notice-banner .logo-container{
372 display: flex !important;
373 width: 100%;
374 height: 100%;
375 align-items: center;
376 justify-content: center;
377 }
378
379 .ays-notice-banner .logo-container img {
380 width: 100%;
381 height: 100%;
382 object-fit: contain;
383 }
384
385 .ays-chart-top-banner-title {
386 display: flex;
387 flex-direction: column;
388 justify-content: center;
389 min-width: 80px;
390 line-height: 1.1;
391 }
392
393 .ays-chart-top-banner-title span:first-child {
394 color: #0f172a;
395 font-size: 15px;
396 font-weight: 600;
397 }
398
399 .ays-chart-top-banner-title span:last-child {
400 margin-top: 4px;
401 color: #475569;
402 font-size: 11px;
403 font-weight: 500;
404 letter-spacing: .05em;
405 text-transform: uppercase;
406 }
407
408 /* .ays-notice-banner .ays-chart-upgrade-container {
409 margin-left: 0;
410 align-self: center;
411 } */
412
413 .ays-notice-banner .ays-chart-upgrade-container div a {
414 text-decoration: none;
415 min-height: 30px;
416 padding: 5px 12px;
417 border: 1px solid rgba(4, 120, 87, .2);
418 border-radius: 999px;
419 background: #059669;
420 color: #fff;
421 font-size: 13px;
422 font-weight: 700;
423 box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
424 transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
425 }
426
427 .ays-notice-banner .ays-chart-upgrade-container div a:hover,
428 .ays-notice-banner .ays-chart-upgrade-container div a:focus {
429 background: #047857;
430 color: #fff;
431 box-shadow: 0 4px 10px -6px rgba(15, 23, 42, .35);
432 }
433
434 .ays-notice-banner .ays-chart-upgrade-container div a img {
435 width: 13px;
436 height: 13px;
437 }
438
439 .ays-notice-banner .ays-chart-logo-container-one-time-text {
440 margin-top: 5px;
441 color: #475569;
442 font-size: 11px !important;
443 font-weight: 500 !important;
444 white-space: nowrap;
445 }
446
447 .ays-notice-banner .navigation-bar #menu {
448 align-items: center;
449 min-width: 0;
450 margin: 0;
451 gap: 0;
452 }
453
454 .ays-notice-banner .navigation-bar #menu::before {
455 content: "";
456 display: block;
457 width: 1px;
458 height: 32px;
459 margin-right: 20px;
460 background: #e2e8f0;
461 }
462
463 .ays-notice-banner .navigation-bar li {
464 margin: 0;
465 list-style: none;
466 }
467
468 .ays-notice-banner .navigation-bar li a {
469 display: inline-flex;
470 width: auto;
471 max-width: none;
472 min-height: 36px;
473 align-items: center;
474 padding: 0 15px;
475 margin: 0;
476 border-radius: 999px;
477 color: #475569;
478 font-size: 13px;
479 font-weight: 500;
480 line-height: 1;
481 text-decoration: none;
482 text-transform: none;
483 transition: background-color .15s ease, border-color .15s ease, color .15s ease;
484 }
485 .ays-notice-banner .logo-container img.logo {
486 width: 100%;
487 height: 100%;
488 object-fit: contain;
489 max-height: 75px;
490 min-width: 50px;
491 }
492 .ays-notice-banner .navigation-bar li a:hover,
493 .ays-notice-banner .navigation-bar li a:focus {
494 background: #f1f5f9;
495 color: #0f172a;
496 outline: none;
497 box-shadow: none;
498 }
499
500 .ays-notice-banner .navigation-bar li.take_survay a {
501 border: 1px solid #fecdd3;
502 background: #fff1f2;
503 color: #be123c;
504 font-weight: 700;
505 }
506
507 .ays-notice-banner .navigation-bar li.take_survay a:hover,
508 .ays-notice-banner .navigation-bar li.take_survay a:focus {
509 border-color: #fda4af;
510 background: #ffe4e6;
511 color: #be123c;
512 }
513
514 .ays-notice-banner .modile-ddmenu-sm,
515 .ays-notice-banner .modile-ddmenu-md {
516 width: auto;
517 }
518
519 .ays-notice-banner #menu li a.toggle_ddmenu {
520 width: 40px;
521 min-width: 40px;
522 min-height: 40px;
523 justify-content: center;
524 padding: 0;
525 color: #475569;
526 font-size: 18px;
527 }
528
529 .ays-notice-banner li ul.ddmenu {
530 top: calc(100% + 12px);
531 right: 0;
532 min-width: 220px;
533 padding: 8px;
534 border: 1px solid #e2e8f0;
535 border-radius: 12px;
536 background: #fff;
537 box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .45);
538 }
539
540 .ays-notice-banner li ul.ddmenu li {
541 width: 100%;
542 padding-left: 0;
543 }
544
545 .ays-notice-banner li ul.ddmenu li a {
546 width: 100%;
547 justify-content: flex-start;
548 }
549
550 .ays-notice-banner .ays-chatgp-checklist-open-icon {
551 position: unset;
552 flex: 0 0 auto;
553 margin-left: 4px;
554 }
555
556 .ays-notice-banner .ays-chatgp-upgrade-container a img {
557 width: 8px;
558 height: 13px;
559 }
560 @media screen and (min-width: 1321px) {
561 .ays-notice-banner .modile-ddmenu-lg.modile-ddmenu-lg-custom {
562 display: block;
563 }
564 }
565
566 @media screen and (max-width: 1320px) {
567 .ays-notice-banner .modile-ddmenu-lg {
568 display: none;
569 }
570
571 .ays-notice-banner .modile-ddmenu-md {
572 display: block;
573 }
574 }
575
576 @media screen and (max-width: 1080px) {
577 div.ays-notice-banner {
578 width: calc(100% - 24px);
579 margin-top: 14px;
580 }
581
582 .ays-notice-banner #navigation-container {
583 gap: 14px;
584 padding: 0 14px;
585 }
586
587 .ays-notice-banner .navigation-bar #menu::before {
588 margin-right: 10px;
589 }
590 }
591
592 @media screen and (max-width: 768px) {
593 div.ays-notice-banner {
594 width: calc(100% - 40px);
595 }
596
597 .ays-notice-banner #navigation-container {
598 min-height: 72px;
599 }
600
601 .ays-notice-banner .modile-ddmenu-md {
602 display: none;
603 }
604
605 .ays-notice-banner .modile-ddmenu-sm {
606 display: block;
607 }
608
609 .ays-notice-banner .navigation-bar #menu {
610 flex: 0 0 auto;
611 width: auto !important;
612 min-width: 40px !important;
613 margin-left: auto;
614 }
615
616 .ays-notice-banner .navigation-bar #menu::before {
617 display: none;
618 }
619
620 .ays-notice-banner li ul.ddmenu {
621 right: 0;
622 }
623 .ays-chart-top-banner-title {
624 display: none;
625 }
626 }
627
628 @media screen and (max-width: 600px) {
629 .ays-notice-banner #navigation-container {
630 flex-wrap: nowrap;
631 justify-content: space-between;
632 padding: 12px;
633 }
634
635 .ays-notice-banner .ays-chart-logo-container-upgrade {
636 width: auto;
637 justify-content: flex-start;
638 gap: 10px;
639 }
640
641 .ays-notice-banner .navigation-bar #menu {
642 margin-left: auto;
643 justify-content: flex-end;
644 }
645
646 .ays-notice-banner .ays-chart-checklist-open-icon {
647 position: unset;
648 }
649 }
650
651 @media screen and (max-width: 430px) {
652 .ays-notice-banner .logo-container {
653 width: 54px;
654 height: 54px;
655 flex-basis: 54px;
656 }
657
658 .ays-chart-top-banner-title {
659 min-width: 70px;
660 }
661
662 .ays-chart-top-banner-title span:first-child {
663 font-size: 14px;
664 }
665
666 .ays-notice-banner .ays-chart-top-banner-upgrade-container a {
667 padding: 5px 10px;
668 font-size: 12px;
669 }
670 }
671
672 /* top banner redesign | End */
673