PluginProbe
Survey Maker by AYS / 5.2.2.0
Survey Maker by AYS v5.2.2.0
5.2.4.1 5.2.4.0 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 All 154 releases
survey-maker / admin / css / survey-maker-dashboard.css

survey-maker-dashboard.css in Survey Maker by AYS 5.2.2.0, at admin/css/survey-maker-dashboard.css

650 lines 14.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 [class~="error"],
2 [class~="updated"],
3 [class~="notice"],
4 .ays-survey-footer-review-box,
5 .ays-survey-footer-support-box {
6 display: none !important;
7 }
8
9 .survey-maker-logo > img {
10 width: 100px;
11 }
12
13 .survey-maker-steps-container iframe,
14 .survey-maker-steps-container img {
15 max-width: 100%;
16 height: auto;
17 }
18
19 /* Hero Section Styles */
20 .survey-maker-hero {
21 background-color: #ffffff;
22 padding: 64px 24px;
23 text-align: center;
24 border-radius: 12px 12px 0px 0px;
25 }
26
27 .survey-maker-hero .survey-maker-hero-container {
28 max-width: 1024px;
29 margin: 0 auto;
30 }
31
32 .survey-maker-hero .survey-maker-logo {
33 width: 80px;
34 height: 80px;
35 margin: 0 auto 32px auto;
36 display: block;
37 }
38
39 .survey-maker-hero .survey-maker-hero-title {
40 font-size: 48px;
41 font-weight: bold;
42 color: #1f2937;
43 margin-bottom: 24px;
44 line-height: 1.2;
45 }
46
47 .survey-maker-hero .survey-maker-hero-subtitle {
48 font-size: 20px;
49 color: #6b7280;
50 margin-bottom: 48px;
51 max-width: 512px;
52 margin-left: auto;
53 margin-right: auto;
54 line-height: 1.6;
55 }
56
57 .survey-maker-hero .survey-maker-hero-buttons {
58 display: flex;
59 flex-direction: column;
60 gap: 16px;
61 justify-content: center;
62 align-items: center;
63 }
64
65 .survey-maker-hero .survey-maker-btn {
66 display: inline-flex;
67 align-items: center;
68 justify-content: center;
69 gap: 8px;
70 white-space: nowrap;
71 font-size: 18px;
72 font-weight: 500;
73 border: none;
74 border-radius: 6px;
75 padding: 12px 32px;
76 min-width: 180px;
77 width: 100%;
78 cursor: pointer;
79 transition: all 0.2s ease;
80 text-decoration: none;
81 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
82 }
83
84 .survey-maker-hero .survey-maker-btn:hover {
85 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
86 }
87
88 .survey-maker-hero .survey-maker-btn-primary {
89 background-color: rgb(59, 131, 246);
90 color: white;
91 }
92
93 .survey-maker-hero .survey-maker-btn-primary:hover {
94 background-color: #2474f5;
95 }
96
97 .survey-maker-hero .survey-maker-btn-secondary {
98 background-color: #ff8533;
99 color: white;
100 }
101
102 .survey-maker-hero .survey-maker-btn-secondary:hover {
103 background-color: #ff751a;
104 }
105
106 .survey-maker-hero .survey-maker-icon {
107 width: 20px;
108 height: 20px;
109 margin-right: 8px;
110 }
111
112 /* Quick Start Steps Section Styles */
113 .survey-maker-steps {
114 padding: 64px 24px;
115 background-color: #f8fafc;
116 }
117
118 .survey-maker-steps .survey-maker-steps-container {
119 max-width: 1024px;
120 margin: 0 auto;
121 }
122
123 .survey-maker-steps .survey-maker-steps-title {
124 font-size: 30px;
125 font-weight: bold;
126 text-align: center;
127 color: #1f2937;
128 margin-bottom: 48px;
129 }
130
131 .survey-maker-steps .survey-maker-steps-sub-title {
132 font-size: 22px;
133 font-weight: bold;
134 text-align: center;
135 color: #1f2937;
136 margin-bottom: 48px;
137 }
138
139 .survey-maker-steps .survey-maker-steps-content {
140 display: flex;
141 flex-direction: column;
142 gap: 32px;
143 align-items: center;
144 }
145
146 .survey-maker-steps .survey-maker-steps-list {
147 max-width: 512px;
148 width: 100%;
149 }
150
151 .survey-maker-steps .survey-maker-ordered-list {
152 list-style: none;
153 padding: 0;
154 margin: 0;
155 display: flex;
156 flex-direction: column;
157 gap: 24px;
158 }
159
160 .survey-maker-steps .survey-maker-step-item {
161 display: flex;
162 align-items: flex-start;
163 gap: 16px;
164 }
165
166 .survey-maker-steps .survey-maker-step-number {
167 flex-shrink: 0;
168 width: 32px;
169 height: 32px;
170 background-color: #3c83f6;
171 border-radius: 50%;
172 display: flex;
173 align-items: center;
174 justify-content: center;
175 color: white;
176 font-weight: 600;
177 font-size: 14px;
178 }
179
180 .survey-maker-steps .survey-maker-step-text {
181 padding-top: 4px;
182 }
183
184 .survey-maker-steps .survey-maker-step-title {
185 font-size: 18px;
186 font-weight: 500;
187 color: #1f2937;
188 margin: 0;
189 }
190
191 .survey-maker-steps .survey-maker-video-container {
192 width: 100%;
193 max-width: 512px;
194 }
195
196 .survey-maker-steps .survey-maker-video-wrapper {
197 width: 100%;
198 background-color: #000;
199 border-radius: 8px;
200 overflow: hidden;
201 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
202 position: relative;
203 }
204
205 .survey-maker-steps .survey-maker-video-wrapper img {
206 width: 500px;
207 /*height: 265px;*/
208 }
209
210 .survey-maker-steps .ays-survey-youtube-placeholder {
211 width: 500px;
212 height: 280px;
213 }
214
215 .survey-maker-steps .survey-maker-video-iframe {
216 position: absolute;
217 top: 0;
218 left: 0;
219 width: 100%;
220 height: 100%;
221 border: none;
222 border-radius: 8px;
223 }
224
225 /* Video Resources Section Styles */
226 .survey-maker-video-resources {
227 padding: 80px 24px;
228 background-color: #ffffff;
229 }
230
231 .survey-maker-video-resources .survey-maker-video-resources-container {
232 max-width: 1152px;
233 margin: 0 auto;
234 }
235
236 .survey-maker-video-resources .survey-maker-video-resources-header {
237 text-align: center;
238 margin-bottom: 64px;
239 }
240
241 .survey-maker-video-resources .survey-maker-video-resources-title {
242 font-size: 30px;
243 font-weight: bold;
244 color: #1f2937;
245 margin-bottom: 16px;
246 }
247
248 .survey-maker-video-resources .survey-maker-video-resources-subtitle {
249 font-size: 18px;
250 color: #6b7280;
251 max-width: 512px;
252 margin: 0 auto;
253 }
254
255 .survey-maker-video-resources .survey-maker-video-cards {
256 display: flex;
257 flex-direction: column;
258 gap: 24px;
259 }
260
261 .survey-maker-video-resources .survey-maker-video-row {
262 display: flex;
263 flex-direction: column;
264 gap: 24px;
265 }
266
267 .survey-maker-video-resources .survey-maker-video-card {
268 border-radius: 8px;
269 border: 1px solid #e5e7eb;
270 background-color: #ffffff;
271 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
272 padding: 24px;
273 transition: all 0.2s ease;
274 cursor: pointer;
275 text-decoration: none;
276 color: inherit;
277 display: block;
278 }
279
280 .survey-maker-video-resources .survey-maker-video-card:hover {
281 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
282 }
283
284 .survey-maker-video-resources .survey-maker-video-card-content {
285 display: flex;
286 align-items: flex-start;
287 gap: 16px;
288 }
289
290 .survey-maker-video-resources .survey-maker-video-card-icon {
291 width: 48px;
292 height: 48px;
293 background-color: rgba(255, 133, 51, 0.1);
294 border-radius: 8px;
295 display: flex;
296 align-items: center;
297 justify-content: center;
298 transition: background-color 0.2s ease;
299 flex-shrink: 0;
300 }
301
302 .survey-maker-video-resources .survey-maker-video-card:hover .survey-maker-video-card-icon {
303 background-color: rgba(255, 133, 51, 0.2);
304 }
305
306 .survey-maker-video-resources .survey-maker-play-icon {
307 width: 24px;
308 height: 24px;
309 color: #ff8533;
310 }
311
312 .survey-maker-video-resources .survey-maker-video-card-text {
313 flex: 1;
314 }
315
316 .survey-maker-video-resources .survey-maker-video-card-header {
317 display: flex;
318 align-items: flex-start;
319 justify-content: space-between;
320 margin-bottom: 8px;
321 }
322
323 .survey-maker-video-resources .survey-maker-video-card-title {
324 font-size: 18px;
325 font-weight: 600;
326 color: #1f2937;
327 margin: 0;
328 transition: color 0.2s ease;
329 }
330
331 .survey-maker-video-resources .survey-maker-video-card:hover .survey-maker-video-card-title {
332 color: #3c83f6;
333 }
334
335 .survey-maker-video-resources .survey-maker-external-link {
336 width: 16px;
337 height: 16px;
338 color: #6b7280;
339 flex-shrink: 0;
340 transition: color 0.2s ease;
341 }
342
343 .survey-maker-video-resources .survey-maker-video-card:hover .survey-maker-external-link {
344 color: #3c83f6;
345 }
346
347 .survey-maker-video-resources .survey-maker-video-card-description {
348 color: #6b7280;
349 margin: 0 0 8px 0;
350 line-height: 1.5;
351 }
352
353 .survey-maker-video-resources .survey-maker-video-duration {
354 font-size: 14px;
355 color: #ff8533;
356 font-weight: 500;
357 }
358
359 /* Responsive Styles */
360 @media (min-width: 640px) {
361 .survey-maker-hero .survey-maker-hero-buttons {
362 flex-direction: row;
363 }
364
365 .survey-maker-hero .survey-maker-btn {
366 width: auto;
367 }
368 }
369
370 @media (min-width: 769px) {
371 .survey-maker-hero .survey-maker-hero-title {
372 font-size: 56px;
373 }
374
375 .survey-maker-steps .survey-maker-steps-content {
376 flex-direction: row;
377 gap: 48px;
378 align-items: center;
379 }
380
381 .survey-maker-steps .survey-maker-steps-list {
382 flex: 1;
383 }
384
385 .survey-maker-steps .survey-maker-video-container {
386 flex: 1;
387 /* max-width: none; */
388 }
389
390 .survey-maker-video-resources .survey-maker-video-resources-title {
391 font-size: 36px;
392 }
393
394 .survey-maker-video-resources .survey-maker-video-cards {
395 display: flex;
396 flex-direction: column;
397 gap: 24px;
398 }
399
400 .survey-maker-video-resources .survey-maker-video-row {
401 display: flex;
402 flex-direction: row;
403 gap: 24px;
404 }
405
406 .survey-maker-video-resources .survey-maker-video-card {
407 flex: 1;
408 }
409 }
410
411 @media (min-width: 1024px) {
412 .survey-maker-hero .survey-maker-hero-title {
413 font-size: 64px;
414 }
415
416 .survey-maker-steps .survey-maker-steps-content {
417 gap: 64px;
418 }
419
420 .survey-maker-video-resources .survey-maker-video-resources-title {
421 font-size: 40px;
422 }
423
424 .survey-maker-video-resources .survey-maker-video-cards {
425 display: flex;
426 flex-direction: column;
427 gap: 24px;
428 max-width: 1024px;
429 margin: 0 auto;
430 }
431 }
432
433 @media screen and (max-width: 1024px) {
434 .survey-maker-steps .survey-maker-steps-content {
435 display: flex;
436 flex-direction: column;
437 align-items: center;
438 }
439 .survey-maker-steps .ays-survey-youtube-placeholder {
440 width: 512px;
441 height: 280px;
442 }
443 .survey-maker-steps .survey-maker-video-wrapper img {
444 width: 512px;
445 /*height: 315px;*/
446 max-width: 100%;
447 object-fit: contain;
448 }
449 }
450
451 /* Quiz Demos Section Styles */
452 .survey-maker-help-demos-section {
453 padding: 4rem 0;
454 background-color: rgb(248, 250, 252);
455 padding-bottom: 10rem;
456 }
457
458 .survey-maker-help-demos-section .survey-maker-help-container {
459 max-width: 1200px;
460 margin: 0 auto;
461 padding: 0 1rem;
462 }
463
464 .survey-maker-help-demos-section .survey-maker-help-max-width {
465 max-width: 1152px;
466 margin: 0 auto;
467 display: flex;
468 flex-direction: column;
469 gap: 3rem;
470 }
471
472 .survey-maker-help-demos-section .survey-maker-help-header {
473 text-align: center;
474 display: flex;
475 flex-direction: column;
476 gap: 1rem;
477 }
478
479 .survey-maker-help-demos-section .survey-maker-help-title {
480 font-size: 1.875rem;
481 font-weight: 700;
482 color: #0f172a;
483 margin: 0;
484 line-height: 1.2;
485 }
486
487 .survey-maker-help-demos-section .survey-maker-help-description {
488 color: #64748b;
489 margin: 0;
490 font-size: 1rem;
491 line-height: 1.6;
492 }
493
494 .survey-maker-help-demos-section .survey-maker-help-grid {
495 display: grid;
496 grid-template-columns: 1fr;
497 gap: 1.5rem;
498 }
499
500 /* Fox Review Section Styles */
501 .survey-maker-review-settings-section {
502 padding-bottom: 2rem;
503 background-color: rgb(248, 250, 252);
504 border-radius: 0px 0px 12px 12px;
505 }
506
507 /* Responsive grid */
508 @media (min-width: 768px) {
509 .survey-maker-help-demos-section .survey-maker-help-grid {
510 grid-template-columns: repeat(2, 1fr);
511 }
512 }
513
514 @media (min-width: 1025px) {
515 .survey-maker-help-demos-section .survey-maker-help-grid {
516 grid-template-columns: repeat(3, 1fr);
517 }
518 }
519
520 @media (min-width: 1280px) {
521 .survey-maker-help-demos-section .survey-maker-help-grid {
522 grid-template-columns: repeat(4, 1fr);
523 }
524 }
525
526 .survey-maker-help-demos-section .survey-maker-help-card {
527 background: #ffffff;
528 border: 1px solid #e2e8f0;
529 border-radius: 0.5rem;
530 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
531 transition: transform 0.1s ease-in-out;
532 overflow: hidden;
533 }
534
535 .survey-maker-help-demos-section .survey-maker-help-card:hover {
536 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
537 transform: scale(1.05);
538 }
539
540 .survey-maker-help-demos-section .survey-maker-help-card-header {
541 padding: 1.5rem;
542 padding-bottom: 1rem;
543 text-align: center;
544 display: flex;
545 flex-direction: column;
546 gap: 0.375rem;
547 }
548
549 .survey-maker-help-demos-section .survey-maker-help-icon-container {
550 width: 4rem;
551 height: 4rem;
552 background-color: rgba(59, 130, 246, 0.1);
553 border-radius: 8px;
554 display: flex;
555 align-items: center;
556 justify-content: center;
557 margin: 0 auto 1rem;
558 transition: background-color 0.3s ease;
559 }
560
561 .survey-maker-help-demos-section .survey-maker-help-card:hover .survey-maker-help-icon-container {
562 background-color: rgba(59, 130, 246, 0.2);
563 }
564
565 .survey-maker-help-demos-section .survey-maker-help-icon {
566 width: 2rem;
567 height: 2rem;
568 color: #3c83f6;
569 }
570
571 .survey-maker-help-demos-section .survey-maker-help-card-title {
572 font-size: 1.125rem;
573 font-weight: 600;
574 color: #0f172a;
575 margin: 0;
576 line-height: 1.4;
577 min-height: 50px;
578 }
579
580 .survey-maker-help-demos-section .survey-maker-help-card-content {
581 padding: 1.5rem;
582 padding-top: 0;
583 }
584
585 .survey-maker-help-demos-section .survey-maker-help-card-description {
586 font-size: 0.875rem;
587 color: #64748b;
588 text-align: center;
589 margin: 0 0 1rem 0;
590 line-height: 1.6;
591 min-height: 68px;
592 }
593
594 .survey-maker-help-demos-section .survey-maker-help-button {
595 display: inline-flex;
596 align-items: center;
597 justify-content: center;
598 gap: 0.5rem;
599 white-space: nowrap;
600 border-radius: 0.375rem;
601 font-size: 0.875rem;
602 font-weight: 500;
603 height: 2.5rem;
604 padding: 0 1rem;
605 width: 100%;
606 background-color: #ffffff;
607 border: 1px solid #e5e7eb;
608 color: rgb(40, 44, 52);
609 text-decoration: none;
610 transition: all 0.3s ease;
611 cursor: pointer;
612 }
613
614 .survey-maker-help-demos-section .survey-maker-help-button:hover {
615 background-color: #3c83f6;
616 color: #ffffff;
617 }
618
619 .survey-maker-help-demos-section .survey-maker-help-button:focus {
620 outline: none;
621 box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
622 }
623
624 .survey-maker-help-demos-section .survey-maker-help-button-icon {
625 width: 1rem;
626 height: 1rem;
627 margin-left: 0.5rem;
628 }
629
630 /* Additional responsive adjustments */
631 @media (max-width: 767px) {
632 .survey-maker-help-demos-section {
633 padding: 2rem 0;
634 }
635
636 .survey-maker-help-demos-section .survey-maker-help-max-width {
637 gap: 2rem;
638 }
639
640 .survey-maker-help-demos-section .survey-maker-help-title {
641 font-size: 1.5rem;
642 }
643 }
644
645 @media screen and (max-width: 768px) {
646 div.ays-survey-youtube-placeholder {
647 width: 100% !important;
648 height: auto !important;
649 }
650 }