PluginProbe
Survey Maker by AYS / 5.2.3.9
Survey Maker by AYS v5.2.3.9
5.2.3.9 5.2.3.8 5.2.3.7 5.2.3.6 5.2.3.5 5.2.3.4 5.2.3.3 5.2.3.2 5.2.3.1 5.2.3.0 5.2.2.9 5.2.2.8 5.2.2.7 5.2.2.6 5.2.2.5 5.2.2.4 5.2.2.3 5.2.2.2 5.2.2.1 5.2.2.0 5.2.1.9 5.2.1.8 5.2.0.8 5.2.0.9 5.2.1.0 All 152 releases
survey-maker / admin / css / banner.css

banner.css in Survey Maker by AYS 5.2.3.9, at admin/css/banner.css

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