PluginProbe
MaxiBlocks Builder | 17,000+ Design Assets, Patterns, Icons & Starter Sites / trunk
MaxiBlocks Builder | 17,000+ Design Assets, Patterns, Icons & Starter Sites vtrunk
2.2.3 2.2.2 2.2.1 2.2.0 trunk 1.0.0 1.0.1 1.1.0 1.1.1 1.2.0 1.2.1 1.3 1.3.1 1.4 1.4.1 1.5.0 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7 1.5.8 1.6.0 All 71 releases
maxi-blocks / core / admin / quick-start / css / quick-start.css

quick-start.css in MaxiBlocks Builder | 17,000+ Design Assets, Patterns, Icons & Starter Sites trunk, at core/admin/quick-start/css/quick-start.css

1,330 lines 28.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #dashboard_system_report {
2 background-color: var(--maxi-admin-white);
3 border: 18px solid var(--maxi-admin-black);
4 max-width: 1720px;
5 width: 95%;
6 border-radius: 25px;
7 margin: 25px auto 15px;
8 font-family: Inter, Helvetica, Arial, Lucida, sans-serif !important;
9 }
10
11 .maxi-quick-start-wrapper {
12 max-width: 1200px;
13 margin: 80px auto;
14 }
15
16 .maxi-quick-start-wrapper_inside {
17 padding: 60px 80px;
18 background: var(--maxi-admin-light-grey);
19 display: flex;
20 overflow: hidden;
21 border-radius: 30px;
22
23 }
24
25 .maxi-quick-start-wrapper_inside h1 {
26 font-family: Inter, Helvetica, Arial, Lucida, sans-serif !important;
27 display: block;
28 font-weight: 700;
29 margin-top: 80px;
30 }
31
32 .maxi-quick-start-sidebar {
33 width: 150px;
34 padding: 40px;
35 margin-top: 15px;
36 background-color: var(--maxi-admin-white);
37 border-radius: 20px;
38 border: 2px solid var(--maxi-admin-border-light);
39
40 }
41
42 .maxi-quick-start-main {
43 flex: 1;
44 padding-left: 60px;
45 }
46
47 .maxi-quick-start-header {
48 text-align: center;
49 margin-bottom: 40px;
50 }
51
52 .maxi-quick-start-header img {
53 max-width: 200px;
54 height: auto;
55 }
56
57 .maxi-quick-start-steps-nav {
58 display: block;
59 margin: 0 0 0px;
60 padding: 0;
61 list-style: none;
62 }
63
64 .maxi-quick-start-steps-nav .step {
65 position: relative;
66 padding: 10px 0 10px 40px;
67 margin-bottom: 15px;
68 color: var(--maxi-admin-text-grey);
69 font-size: 16px;
70 cursor: pointer;
71 transition: color 0.2s ease;
72 }
73
74 .maxi-quick-start-steps-nav .step:hover {
75 color: var(--maxi-admin-green);
76 }
77
78 .maxi-quick-start-steps-nav .step::before {
79 content: attr(data-number);
80 position: absolute;
81 left: 0;
82 top: 50%;
83 transform: translateY(-50%);
84 width: 25px;
85 height: 25px;
86 border: 2px solid var(--maxi-admin-border-light);
87 border-radius: 50%;
88 display: flex;
89 align-items: center;
90 justify-content: center;
91 font-size: 12px;
92 font-weight: 800;
93 }
94
95 .maxi-quick-start-steps-nav .step.active {
96 color: var(--maxi-admin-black);
97 font-size: 16px;
98 font-weight: 700;
99 }
100
101 .maxi-quick-start-steps-nav .step.active::before {
102 border-color: var(--maxi-admin-black);
103 background: var(--maxi-admin-black);
104 color: var(--maxi-admin-white);
105 }
106
107 .maxi-quick-start-steps-nav .step.completed::before {
108 content: '✓';
109 background: var(--maxi-admin-mint);
110 border-color: var(--maxi-admin-mint);
111 color: var(--maxi-admin-black);
112 }
113
114 .maxi-quick-start-steps-nav .step.warning::before {
115 content: '!';
116 background: var(--maxi-admin-orange);
117 border-color: var(--maxi-admin-orange);
118 color: var(--maxi-admin-white);
119 font-size: 14px;
120 font-weight: bold;
121 display: flex;
122 align-items: center;
123 justify-content: center;
124 line-height: 1;
125 }
126
127 .maxi-quick-start-steps-nav .step.warning {
128 color: var(--maxi-admin-orange);
129 font-weight: bold;
130 }
131
132 /* Pages step specific styles */
133 .page-selection-grid {
134 display: grid;
135 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
136 gap: 20px;
137 margin-top: 30px;
138 }
139
140 .page-card {
141 border: 1px solid var(--maxi-admin-border-light);
142 border-radius: 8px;
143 padding: 20px;
144 background: var(--maxi-admin-white);
145 }
146
147 .page-card h3 {
148 margin: 0 0 15px;
149 font-size: 16px;
150 }
151
152 .button-add {
153 width: 40px;
154 height: 40px;
155 border-radius: 50%;
156 border: 2px solid var(--maxi-admin-green-hover);
157 background: transparent;
158 color: var(--maxi-admin-green-hover);
159 cursor: pointer;
160 display: flex;
161 align-items: center;
162 justify-content: center;
163 padding: 0;
164 transition: all 0.2s ease;
165 }
166
167 .button-add:hover {
168 background: var(--maxi-admin-pink-hover);
169 color: var(--maxi-admin-white);
170 }
171
172 .button-add .dashicons {
173 font-size: 20px;
174 width: 20px;
175 height: 20px;
176 }
177
178 .maxi-quick-start-section {
179 margin-bottom: 20px;
180 padding-bottom: 20px;
181 border-bottom: 3px dotted var(--maxi-admin-border-light);
182 }
183
184 .maxi-quick-start-section h2 {
185 font-size: 16px;
186 color: var(--maxi-admin-pink-purple);
187 margin: 30px 0 8px 0;
188 }
189
190 .maxi-quick-start-section h3 {
191 font-size: 18px;
192 color: var(--maxi-admin-pink-purple);
193 margin: 30px 0 8px 0;
194 }
195
196 .maxi-quick-start-section .maxi-library-modal h2 {
197 margin-top: 0;
198 }
199
200 .maxi-quick-start-section #maxi-starter-sites-root .components-modal__screen-overlay.maxi-open-preview .components-modal__content {
201 left: 7%;
202 cursor: auto;
203 }
204
205 .maxi-quick-start-section .description {
206 color: var(--maxi-admin-grey);
207 font-size: 14px;
208 }
209
210 .maxi-quick-start-actions {
211 display: flex;
212 justify-content: flex-end;
213 gap: 15px;
214 margin-top: 20px;
215 padding-top: 20px;
216 }
217
218 .regular-text {
219 width: 100%;
220 max-width: 500px;
221 }
222
223 .theme-templates {
224 display: grid;
225 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
226 gap: 20px;
227 margin-top: 20px;
228 }
229
230 .template-item {
231 background: var(--maxi-admin-light-grey);
232 padding: 15px;
233 border-radius: 4px;
234 }
235
236 .maxi-logo-upload {
237 margin: 20px 0;
238 }
239
240 #logo-preview {
241 margin-top: 10px;
242 }
243
244 .maxi-style-cards {
245 margin-top: 20px;
246 }
247
248 .current-style-card {
249 margin-bottom: 15px;
250 }
251
252 #dashboard_system_report .button,
253 #dashboard_system_report .button-primary,
254 #dashboard_system_report .skip-button {
255 display: inline-block;
256 font-size: 19px;
257 font-weight: 700;
258 margin-top: 30px;
259 color: var(--maxi-admin-white);
260 background: var(--maxi-admin-black);
261 border: none;
262 padding: 5px 50px;
263 border-radius: 26px;
264 text-decoration: none;
265 transition: background 0.3s, transform 0.2s;
266 cursor: pointer;
267 }
268
269 #dashboard_system_report .button:hover,
270 #dashboard_system_report .button-primary:hover,
271 #dashboard_system_report .skip-button:hover {
272 background: var(--maxi-admin-green);
273 border-color: var(--maxi-admin-green);
274 color: var(--maxi-admin-white);
275 }
276
277 #dashboard_system_report p a {
278 color: var(--maxi-admin-green);
279 text-decoration: underline;
280 transition: all 0.3s ease;
281 }
282
283 #dashboard_system_report p a:hover {
284 color: var(--maxi-admin-black);
285 }
286
287 .maxi-error {
288 color: var(--maxi-admin-orange);
289 font-size: 12px;
290 margin-top: 5px;
291 display: block;
292 }
293
294 .maxi-validate.error {
295 border-color: var(--maxi-admin-orange);
296 }
297
298 .maxi-loader {
299 position: absolute;
300 top: 0;
301 left: 0;
302 right: 0;
303 bottom: 0;
304 background: rgba(255, 255, 255, 0.8);
305 display: none;
306 align-items: center;
307 justify-content: center;
308 }
309
310 .maxi-loader::after {
311 content: '';
312 width: 30px;
313 height: 30px;
314 border: 2px solid var(--maxi-admin-green-hover);
315 border-radius: 50%;
316 border-top-color: transparent;
317 animation: spin 1s linear infinite;
318 }
319
320 @keyframes spin {
321 to {
322 transform: rotate(360deg);
323 }
324 }
325
326 .maxi-quick-start-content {
327 position: relative;
328 min-height: 200px;
329 }
330
331 .maxi-quick-start-content.loading {
332 pointer-events: none;
333 opacity: 0.7;
334 }
335
336 .starter-site-preview {
337 margin-top: 20px;
338 padding: 20px;
339 background: var(--maxi-admin-light-grey);
340 border-radius: 8px;
341 }
342
343 .starter-site-preview.hidden {
344 display: none;
345 }
346
347 .starter-site-preview img {
348 max-width: 100%;
349 height: auto;
350 border-radius: 4px;
351 margin-bottom: 15px;
352 }
353
354 .starter-site-preview h3 {
355 margin: 0 0 10px;
356 font-size: 16px;
357 }
358
359 .starter-site-preview .change-starter-site {
360 color: var(--maxi-admin-green-hover);
361 text-decoration: underline;
362 padding: 0;
363 }
364
365 .maxi-quick-start-section #maxi-starter-sites-modal-root {
366 position: fixed;
367 top: 0;
368 left: 0;
369 right: 0;
370 bottom: 0;
371 z-index: 160000;
372 display: none;
373 }
374
375 .maxi-quick-start-section #maxi-starter-sites-modal-root:not(:empty) {
376 display: block;
377 }
378
379 #maxi-starter-sites-root {
380 display: none;
381 }
382
383 #maxi-starter-sites-root.modal-open {
384 display: block;
385 position: fixed;
386 top: 0;
387 left: 0;
388 right: 0;
389 bottom: 0;
390 display: flex;
391 align-items: center;
392 justify-content: center;
393 background: rgba(0, 0, 0, 0.7);
394 z-index: 160000;
395 }
396
397 #maxi-starter-sites-root.modal-open>div {
398 width: 98%;
399 max-height: 90%;
400 background: var(--maxi-admin-white);
401 border-radius: 8px;
402 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
403 overflow: auto;
404 }
405
406 select[name="permalink_structure"] {
407 width: 100%;
408 max-width: 500px;
409 height: 35px;
410 margin-bottom: 10px;
411 }
412
413 select[name="permalink_structure"] option {
414 padding: 8px;
415 }
416
417 select[name="permalink_structure"]:focus {
418 border-color: var(--maxi-admin-green-hover);
419 box-shadow: 0 0 0 1px var(--maxi-admin-green-hover);
420 outline: none;
421 }
422
423 .fse-instructions {
424 margin: 20px 0;
425 padding-left: 20px;
426 }
427
428 .fse-instructions li {
429 margin-bottom: 10px;
430 line-height: 1.4;
431 }
432
433 /* Site logo and icon sections */
434 .site-logo-wrapper,
435 .site-icon-wrapper {
436 background-color: var(--maxi-admin-white);
437 border: 1px solid var(--maxi-admin-border-light);
438 border-radius: 8px;
439 padding: 40px;
440 position: relative;
441 /* For absolute positioning of image */
442 }
443
444 /* Title styling */
445 .site-logo-wrapper h3,
446 .site-icon-wrapper h3 {
447 font-size: 18px;
448 color: var(--maxi-admin-pink-purple);
449 font-weight: 600;
450 margin: 0 0 8px;
451 width: 70%;
452 /* Leave space for image */
453 }
454
455 /* Description text */
456 .site-logo-wrapper p,
457 .site-icon-wrapper p {
458 color: var(--maxi-admin-black-text);
459 font-size: 16px;
460 line-height: 1.4;
461 margin-bottom: 10px;
462 width: 70%;
463 /* Leave space for image */
464 }
465
466 /* Controls container */
467 .site-logo-controls,
468 .site-icon-controls {
469 display: flex;
470 flex-direction: row;
471 gap: 10px;
472 width: 90%;
473 /* Leave space for image */
474 }
475
476 /* Image positioning */
477 .current-site-logo,
478 .current-site-icon {
479 position: absolute;
480 top: 50%;
481 right: 5px;
482 width: 20%;
483 transform: translateY(-50%);
484 /* Center vertically */
485 display: flex;
486 justify-content: center;
487 align-items: center;
488 text-align: center;
489 }
490
491 .current-site-icon p {
492 margin-bottom: 10px;
493 /* Add space between text and image */
494 order: -1 !important;
495 /* This moves the paragraph above the image */
496 text-align: left;
497 }
498
499 .current-site-logo img {
500 max-width: 64px;
501 height: auto;
502 display: block;
503 margin: 0 auto;
504 }
505
506
507 .current-site-icon img {
508 max-width: 64px;
509 /* Fixed smaller size for icon */
510 height: 64px;
511 /* Fixed height to match width */
512 object-fit: contain;
513 /* Maintain aspect ratio */
514 display: block;
515 }
516
517 /* Button styling */
518 .site-logo-controls .button,
519 .site-icon-controls .button {
520 margin: 0 !important;
521 }
522
523 /* Logo preview styles */
524
525 .current-site-icon,
526 .current-site-logo {
527 display: inline-block;
528 }
529
530 .current-site-icon {
531 position: absolute;
532 top: 40px;
533 right: 40px;
534 width: 25%;
535 text-align: center;
536 display: flex;
537 justify-content: center;
538 align-items: center;
539 }
540
541 .current-site-icon img {
542 max-width: 64px;
543 height: auto;
544 display: block;
545 margin: 0 auto;
546 }
547
548 .current-site-logo img {
549 max-width: 100px;
550 height: auto;
551 display: block;
552 float: left;
553 }
554
555 #dashboard_system_report>div>div>div.maxi-quick-start-main>div>div.maxi-quick-start-section>div.site-logo-wrapper .button {
556 background: transparent;
557 border: 2px solid var(--maxi-admin-border-light);
558 border-radius: 100px;
559 padding: 8px 24px;
560 color: var(--maxi-admin-black-text);
561 font-size: 14px;
562 font-weight: 600;
563 cursor: pointer;
564 transition: all 0.2s ease;
565 margin-top: 0px !important;
566 }
567
568 #dashboard_system_report>div>div>div.maxi-quick-start-main>div>div.maxi-quick-start-section>div.site-logo-wrapper .button:hover {
569 background: var(--maxi-admin-pink-hover);
570 border: 2px solid var(--maxi-admin-pink-hover);
571 color: var(--maxi-admin-white);
572 }
573
574 #dashboard_system_report button#upload-site-icon {
575 margin-top: 0px !important;
576 }
577
578 .theme-recommendation {
579 margin: 30px 0;
580 }
581
582 .theme-card {
583 background: var(--maxi-admin-white);
584 border: 2px solid var(--maxi-admin-border-light);
585 border-radius: 15px;
586 padding: 55px;
587 }
588
589 .theme-info h2 {
590 margin: 0 0 15px;
591 font-size: 20px;
592 }
593
594 .theme-features {
595 margin: 20px 0;
596 padding: 0;
597 list-style: none;
598 display: grid;
599 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
600 gap: 10px;
601 }
602
603 .theme-features li {
604 display: flex;
605 align-items: center;
606 gap: 8px;
607 font-family: Inter, Helvetica, Arial, Lucida, sans-serif !important;
608 font-size: 16px !important;
609 color: var(--maxi-admin-black-text) !important;
610 font-weight: 400 !important;
611 line-height: 1.5 !important;
612 }
613
614 .theme-features .dashicons {
615 color: var(--maxi-admin-green-hover);
616 }
617
618 .theme-actions {
619 margin-top: 20px;
620 display: flex;
621 gap: 15px;
622 align-items: center;
623 }
624
625 .theme-actions .button-primary {
626 display: inline-flex;
627 align-items: center;
628 gap: 5px;
629 }
630
631 .preview-theme {
632 color: var(--maxi-admin-green-hover);
633 text-decoration: none;
634 }
635
636 .preview-theme:hover {
637 text-decoration: underline;
638 }
639
640 .theme-status.active {
641 display: inline-flex;
642 align-items: center;
643 gap: 5px;
644 font-size: 14px;
645 font-weight: normal;
646 color: var(--maxi-admin-green-hover);
647 margin-left: 10px;
648 }
649
650 .theme-status.active .dashicons {
651 font-size: 18px;
652 width: 18px;
653 height: 18px;
654 }
655
656 .theme-card h2 {
657 display: flex;
658 align-items: center;
659 }
660
661 .maxi-quick-start-section #maxi-starter-sites-root .maxi-cloud-toolbar__buttons-group_close {
662 margin-left: 20px;
663 }
664
665 .maxi-quick-start-section #maxi-starter-sites-root .maxi-cloud-toolbar__buttons-group_close button {
666 padding: 4px 8px;
667 background-color: var(--maxi-admin-light-grey);
668 border: none;
669 cursor: pointer;
670 transition: all 0.4s ease !important;
671 }
672
673 .maxi-quick-start-section #maxi-starter-sites-root .maxi-cloud-toolbar__buttons-group_close button:hover {
674 box-shadow: inset 0 0 0 2px var(--maxi-admin-pink-hover);
675 }
676
677 .maxi-quick-start-section #maxi-starter-sites-root .maxi-cloud-toolbar__buttons-group_close svg {
678 width: 12px;
679 height: 12px;
680 }
681
682 /* Try multiple selector combinations to catch the error */
683 #toplevel_page_maxi-blocks-dashboard .notice.notice-error,
684 #toplevel_page_maxi-blocks-dashboard .error,
685 .maxi-quick-start-wrapper .notice.notice-error,
686 .maxi-quick-start-content .notice-error,
687 .maxi-quick-start-main .notice-error {
688 background: var(--maxi-admin-white);
689 border: 1px solid var(--maxi-admin-border-light);
690 border-left-width: 4px;
691 border-left-color: var(--maxi-admin-orange) !important;
692 margin: 30px 0px 2px 0px !important;
693 padding: 22px 22px 22px 34px;
694 border-radius: 0 10px 10px 0;
695 }
696
697 #toplevel_page_maxi-blocks-dashboard .notice.notice-error p,
698 #toplevel_page_maxi-blocks-dashboard .error p,
699 .maxi-quick-start-wrapper .notice.notice-error p,
700 .maxi-quick-start-content .notice-error p,
701 .maxi-quick-start-main .notice-error p {
702 font-size: 16px !important;
703 }
704
705 #toplevel_page_maxi-blocks-dashboard .notice.notice-error strong,
706 #toplevel_page_maxi-blocks-dashboard .error strong,
707 .maxi-quick-start-wrapper .notice.notice-error strong,
708 .maxi-quick-start-content .notice-error strong,
709 .maxi-quick-start-main .notice-error strong {
710 font-size: 18px !important;
711 font-weight: 700 !important;
712 color: var(--maxi-admin-black) !important;
713 }
714
715 .maxi-status-table .status-warning span {
716 color: var(--maxi-admin-orange);
717 display: inline-flex;
718 align-items: center;
719 gap: 6px;
720 background: transparent;
721 font-weight: bold !important;
722 }
723
724 .maxi-status-table .status-warning span::before {
725 content: '×';
726 font-weight: bold !important;
727 font-size: 16px;
728 line-height: 1;
729 background: transparent;
730 }
731
732 #toplevel_page_maxi-blocks-dashboard p.description {
733 font-family: Inter, Helvetica, Arial, Lucida, sans-serif;
734 font-size: 16px !important;
735 margin-top: 20px !important;
736 font-style: italic !important;
737 font-weight: bold !important;
738 color: var(--maxi-admin-black-text);
739 }
740
741 .maxi-quick-start-content p.description {
742 font-family: Inter, Helvetica, Arial, Lucida, sans-serif;
743 font-size: 16px !important;
744 color: var(--maxi-admin-black-text);
745 font-weight: 400;
746 margin-bottom: 25px !important;
747 }
748
749 .maxi-status-table {
750 width: 100%;
751 border-collapse: collapse;
752 margin: 20px 0;
753 background: var(--maxi-admin-white);
754 table-layout: fixed;
755 }
756
757 .maxi-status-table td {
758 padding: 12px;
759 border-bottom: 1px solid var(--maxi-admin-border-light);
760 }
761
762 .maxi-status-table td:nth-child(1) {
763 width: 25%;
764 }
765
766 .maxi-status-table td:nth-child(2) {
767 width: 25%;
768 }
769
770 .maxi-status-table td:nth-child(3) {
771 width: 25%;
772 word-break: break-word;
773 /* Breaks words at any character when needed */
774 overflow-wrap: break-word;
775 /* Alternative that works for more browsers */
776 word-wrap: break-word;
777 /* Legacy property for older browsers */
778 hyphens: auto;
779 }
780
781 .maxi-status-table td:nth-child(4) {
782 width: 25%;
783 }
784
785 .maxi-status-table td:first-child {
786 padding-left: 25px !important;
787 }
788
789 .maxi-status-table .header-row td {
790 font-weight: bold;
791 background: var(--maxi-admin-black);
792 color: var(--maxi-admin-white);
793 }
794
795 .maxi-status-table .header-row td:first-child {
796 border-top-left-radius: 10px;
797 }
798
799 .maxi-status-table .header-row td:last-child {
800 border-top-right-radius: 10px;
801 }
802
803 .maxi-status-table tr:hover {
804 background-color: var(--maxi-admin-light-grey);
805 }
806
807 /* New styles for custom input */
808 #dashboard_system_report input[type="text"]:not(.maxi-text-control__input-starter-sites),
809 #dashboard_system_report input[type="password"],
810 #dashboard_system_report input[type="color"],
811 #dashboard_system_report input[type="date"],
812 #dashboard_system_report input[type="datetime"],
813 #dashboard_system_report input[type="datetime-local"],
814 #dashboard_system_report input[type="email"],
815 #dashboard_system_report input[type="month"],
816 #dashboard_system_report input[type="number"],
817 #dashboard_system_report input[type="search"],
818 #dashboard_system_report input[type="tel"],
819 #dashboard_system_report input[type="time"],
820 #dashboard_system_report input[type="url"],
821 #dashboard_system_report input[type="week"],
822 #dashboard_system_report select,
823 #dashboard_system_report textarea {
824 border-radius: 10px;
825 border: 2px solid var(--maxi-admin-border-light) !important;
826 padding: 15px 20px;
827 box-sizing: border-box;
828 margin: 0 0 15px;
829 width: 100% !important;
830 max-width: 100% !important;
831 display: block !important;
832 height: 55px !important;
833 line-height: normal !important;
834 background-color: white !important;
835 color: var(--maxi-admin-black) !important;
836 font-size: 16px !important;
837 vertical-align: middle !important;
838 }
839
840 #dashboard_system_report input[type="search"].ais-SearchBox-input {
841 height: 45px !important;
842 margin-bottom: 0;
843 }
844
845
846 form.ais-SearchBox-form span.maxi-error {
847 display: none;
848 }
849
850 /* Specific styles for select dropdowns */
851 #dashboard_system_report select {
852 appearance: none !important;
853 -webkit-appearance: none !important;
854 -moz-appearance: none !important;
855 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
856 background-repeat: no-repeat;
857 background-size: 20px;
858 padding-right: 40px !important;
859 }
860
861 /* New styles for permalink preview */
862 .permalink-structure-preview {
863 background-color: var(--maxi-admin-white) !important;
864 padding: 40px;
865 border-radius: 10px !important;
866 border: 2px solid var(--maxi-admin-border-light);
867 margin: 15px 0;
868 }
869
870 .permalink-structure-preview .preview-url {
871 color: var(--maxi-admin-black);
872 font-family: monospace;
873 padding: 20px;
874 background-color: var(--maxi-admin-light-grey);
875 border-radius: 10px;
876 word-break: break-all;
877 }
878
879 .permalink-structure-preview .description {
880 margin-bottom: 10px;
881 color: var(--maxi-admin-black);
882 }
883
884 .permalink-structure-preview p.description {
885 margin-left: 10px;
886
887 }
888
889
890
891 .maxi-quick-start-section .theme-info p,
892 .maxi-quick-start-section .theme-card .theme-info p {
893 font-family: Inter, Helvetica, Arial, Lucida, sans-serif !important;
894 font-size: 16px !important;
895 color: var(--maxi-admin-black-text) !important;
896 font-weight: 400 !important;
897 margin-bottom: 10px !important;
898 line-height: 1.5 !important;
899 }
900
901 /* Site icon section styles */
902 .site-icon-wrapper {
903 background-color: var(--maxi-admin-white);
904 border: 1px solid var(--maxi-admin-border-light);
905 border-radius: 8px;
906 padding: 40px;
907 position: relative;
908 margin-top: 20px;
909 }
910
911 .site-icon-info {
912 display: flex;
913 flex-direction: column;
914 width: 90%;
915 }
916
917 .current-site-icon {
918 position: absolute;
919 top: 40px;
920 right: 40px;
921 width: 25%;
922 text-align: center;
923 display: flex;
924 justify-content: center;
925 align-items: center;
926 }
927
928 .current-site-icon img {
929 max-width: 64px;
930 height: auto;
931 display: block;
932 margin: 0 auto;
933 }
934
935 #dashboard_system_report>div>div>div.maxi-quick-start-main>div>div.maxi-quick-start-section>div.site-icon-wrapper .button {
936 margin-top: 20px !important;
937 align-self: flex-start;
938 }
939
940 #dashboard_system_report>div>div>div.maxi-quick-start-main>div>div.maxi-quick-start-section>div.site-icon-wrapper .button {
941 background: transparent;
942 border: 2px solid var(--maxi-admin-border-light);
943 border-radius: 100px;
944 padding: 8px 24px;
945 color: var(--maxi-admin-black-text);
946 font-size: 14px;
947 font-weight: 600;
948 cursor: pointer;
949 transition: all 0.2s ease;
950 margin-top: 0px !important;
951 }
952
953 #dashboard_system_report>div>div>div.maxi-quick-start-main>div>div.maxi-quick-start-section>div.site-icon-wrapper .button:hover {
954 background: var(--maxi-admin-pink-hover);
955 border: 2px solid var(--maxi-admin-pink-hover);
956 color: var(--maxi-admin-white);
957 }
958
959
960
961 #dashboard_system_report .maxi-install-theme-button {
962 background: transparent;
963 border: 2px solid var(--maxi-admin-border-light);
964 border-radius: 100px;
965 padding: 8px 24px;
966 color: var(--maxi-admin-black-text);
967 font-size: 14px;
968 font-weight: 600;
969 cursor: pointer;
970 transition: all 0.2s ease;
971 margin-top: 20px !important;
972 display: inline-flex;
973 align-items: center;
974 }
975
976 #dashboard_system_report .maxi-install-theme-button:hover {
977 background: var(--maxi-admin-pink-hover);
978 border: 2px solid var(--maxi-admin-pink-hover);
979 color: var(--maxi-admin-white);
980 }
981
982 .starter-site-description {
983 margin-bottom: 40px;
984 }
985
986 .starter-site-description h2 {
987 font-size: 24px;
988 margin-bottom: 20px;
989 color: var(--maxi-admin-black-text);
990 }
991
992 .starter-site-benefits {
993 list-style: none;
994 padding: 0;
995 margin: 0 0 20px 0;
996 }
997
998 .starter-site-benefits li {
999 margin-bottom: 12px;
1000 font-size: 14px;
1001 color: var(--maxi-admin-black-text);
1002 }
1003
1004 .starter-site-note {
1005 font-size: 14px;
1006 color: var(--maxi-admin-secondary-text);
1007 margin-bottom: 30px;
1008 }
1009
1010 #dashboard_system_report .maxi-choose-starter-button {
1011 background: transparent;
1012 border: 2px solid var(--maxi-admin-border-light);
1013 border-radius: 100px;
1014 padding: 8px 24px;
1015 color: var(--maxi-admin-black-text);
1016 font-size: 14px;
1017 font-weight: 600;
1018 cursor: pointer;
1019 transition: all 0.2s ease;
1020 display: inline-flex;
1021 align-items: center;
1022 }
1023
1024 #dashboard_system_report .maxi-choose-starter-button:hover {
1025 background: var(--maxi-admin-pink-hover);
1026 border: 2px solid var(--maxi-admin-pink-hover);
1027 color: var(--maxi-admin-white);
1028 }
1029
1030 .benefits-wrapper {
1031 background-color: var(--maxi-admin-white);
1032 border: 1px solid var(--maxi-admin-border-light);
1033 border-radius: 8px;
1034 padding: 40px;
1035 display: flex;
1036 justify-content: space-between;
1037 align-items: flex-start;
1038 margin-top: 20px;
1039 }
1040
1041 .benefits-info {
1042 display: flex;
1043 flex-direction: column;
1044 padding-right: 20px;
1045 }
1046
1047 .benefits-info-text {
1048 display: flex;
1049 flex-direction: column;
1050 }
1051
1052 .benefits-wrapper h3 {
1053 font-size: 18px;
1054 color: var(--maxi-admin-pink-purple);
1055 font-weight: 600;
1056 margin: 0 0 8px;
1057 }
1058
1059 .benefits-wrapper p {
1060 color: var(--maxi-admin-black-text);
1061 font-size: 16px;
1062 line-height: 1.4;
1063 }
1064
1065 #dashboard_system_report>div>div>div.maxi-quick-start-main>div>div.maxi-quick-start-section>div.benefits-wrapper .button {
1066 background: transparent;
1067 border: 2px solid var(--maxi-admin-border-light);
1068 border-radius: 100px;
1069 padding: 8px 24px;
1070 color: var(--maxi-admin-black-text);
1071 font-size: 14px;
1072 font-weight: 600;
1073 cursor: pointer;
1074 transition: all 0.2s ease;
1075 margin-top: 20px !important;
1076 }
1077
1078 #dashboard_system_report>div>div>div.maxi-quick-start-main>div>div.maxi-quick-start-section>div.benefits-wrapper .button:hover {
1079 background: var(--maxi-admin-pink-hover);
1080 border: 2px solid var(--maxi-admin-pink-hover);
1081 color: var(--maxi-admin-white);
1082 }
1083
1084 .starter-site-benefits-wrapper {
1085 background-color: var(--maxi-admin-white);
1086 border: 1px solid var(--maxi-admin-border-light);
1087 border-radius: 8px;
1088 padding: 40px;
1089 display: flex;
1090 flex-direction: column;
1091 margin-top: 30px !important;
1092 }
1093
1094 .benefits-title {
1095 font-size: 18px;
1096 color: var(--maxi-admin-pink-purple);
1097 font-weight: 600;
1098 margin: 0 0 8px;
1099 }
1100
1101 .benefits-list {
1102 list-style: none;
1103 padding: 0;
1104 margin: 20px 0;
1105 }
1106
1107 .benefits-list li {
1108 color: var(--maxi-admin-black-text);
1109 font-size: 16px;
1110 line-height: 1.4;
1111 margin-bottom: 12px;
1112 }
1113
1114 .benefits-note {
1115 color: var(--maxi-admin-black-text);
1116 font-size: 16px;
1117 line-height: 1.4;
1118 margin: 0;
1119 padding-top: 20px;
1120 border-top: 1px solid var(--maxi-admin-border-light);
1121 }
1122
1123 #dashboard_system_report>div>div>div.maxi-quick-start-main>div>div.maxi-quick-start-section>div.starter-site-benefits-wrapper .button {
1124 background: transparent;
1125 border: 2px solid var(--maxi-admin-border-light);
1126 border-radius: 100px;
1127 padding: 4px 24px;
1128 color: var(--maxi-admin-black-text);
1129 font-size: 14px;
1130 font-weight: 600;
1131 cursor: pointer;
1132 transition: all 0.2s ease;
1133 margin-top: 20px !important;
1134 display: inline-flex;
1135 align-self: flex-start;
1136 width: auto !important;
1137 height: 32px;
1138 align-items: center;
1139 }
1140
1141 #dashboard_system_report button#choose-starter-site {
1142 max-width: 180px !important;
1143 width: auto !important;
1144 }
1145
1146 #dashboard_system_report>div>div>div.maxi-quick-start-main>div>div.maxi-quick-start-section>div.starter-site-benefits-wrapper .button:hover {
1147 background: var(--maxi-admin-pink-hover);
1148 border: 2px solid var(--maxi-admin-pink-hover);
1149 color: var(--maxi-admin-white);
1150 }
1151
1152 /* Update theme wrapper button styles */
1153 #dashboard_system_report .theme-card .button-primary {
1154 background: transparent;
1155 border: 2px solid var(--maxi-admin-border-light);
1156 border-radius: 100px;
1157 padding: 8px 24px;
1158 color: var(--maxi-admin-black-text);
1159 font-size: 14px;
1160 font-weight: 600;
1161 cursor: pointer;
1162 transition: all 0.2s ease;
1163 margin-top: 20px !important;
1164 height: auto;
1165 }
1166
1167 #dashboard_system_report .theme-card .button-primary:hover {
1168 background: var(--maxi-admin-pink-hover);
1169 border: 2px solid var(--maxi-admin-pink-hover);
1170 color: var(--maxi-admin-white);
1171 }
1172
1173 /* Update starter site button hover */
1174 #dashboard_system_report .maxi-install-theme-button:hover,
1175 #dashboard_system_report .maxi-choose-starter-button:hover {
1176 background: var(--maxi-admin-pink-hover);
1177 border: 2px solid var(--maxi-admin-pink-hover);
1178 color: var(--maxi-admin-white);
1179 }
1180
1181 /* Header styles */
1182 .maxi-dashboard_header {
1183 position: relative;
1184 z-index: 1;
1185 display: flex;
1186 justify-content: space-between;
1187 align-items: center;
1188 border-top-left-radius: 25px;
1189 border-top-right-radius: 25px;
1190 border-bottom: 2px solid var(--maxi-admin-black);
1191 background-color: var(--maxi-admin-white);
1192 padding: 15px 23px;
1193 }
1194
1195 /* Logo section */
1196 .maxi-dashboard_logo {
1197 width: 190px;
1198 height: auto;
1199 }
1200
1201 /* Header actions section */
1202 .maxi-dashboard_header-actions {
1203 display: flex;
1204 align-items: center;
1205 gap: 10px;
1206 }
1207
1208 /* Get Cloud button */
1209 .maxi-dashboard_get-cloud-link {
1210 padding: 17px 33px;
1211 background: var(--maxi-admin-pink-purple);
1212 color: var(--maxi-admin-black);
1213 text-decoration: none;
1214 border-radius: 26px;
1215 font-size: 18px;
1216 font-weight: 700;
1217 transition: background 0.3s ease, transform 0.2s ease;
1218 }
1219
1220 .maxi-dashboard_get-cloud-link:hover {
1221 background: var(--maxi-admin-pink-hover) !important;
1222 transform: scale(1.035);
1223 color: var(--maxi-admin-black) !important;
1224 }
1225
1226 /* Icons container */
1227 .maxi-dashboard_header-icons {
1228 display: flex;
1229 align-items: center;
1230 gap: 6px;
1231 }
1232
1233 /* Header icons */
1234 .maxi-dashboard_header-icon {
1235 display: flex;
1236 align-items: center;
1237 justify-content: center;
1238 width: 51px;
1239 height: 51px;
1240 background: var(--maxi-admin-light-grey);
1241 border-radius: 100%;
1242 transition: background-color 0.5s ease;
1243 }
1244
1245 .maxi-dashboard_header-icon:hover {
1246 background: var(--maxi-admin-pink-hover);
1247 transform: scale(1.035);
1248 }
1249
1250 .maxi-dashboard_header-icon img {
1251 width: 25px;
1252 height: 25px;
1253 }
1254
1255 /* Header title */
1256 .maxi-dashboard_title {
1257 font-size: 48px;
1258 font-weight: 700;
1259 color: var(--maxi-admin-black);
1260 margin-bottom: 25px !important;
1261 padding: 0;
1262 }
1263
1264 /* Title section */
1265 .maxi-dashboard_title-section {
1266 text-align: center;
1267 padding: 80px 20px 0 20px;
1268 background: var(--maxi-admin-white);
1269 margin-top: 30px;
1270 }
1271
1272 .maxi-dashboard_title {
1273 font-size: 40px;
1274 font-weight: 700;
1275 color: var(--maxi-admin-black);
1276 margin: 0 0 20px 0;
1277 padding: 0;
1278 }
1279
1280 .maxi-dashboard_description {
1281 font-size: 20px;
1282 color: var(--maxi-admin-black-text);
1283 margin: 0 auto;
1284 padding: 0;
1285 font-weight: 400;
1286 max-width: 450px;
1287 text-align: center;
1288 }
1289
1290 .maxi-license-status-display {
1291 font-size: 16px;
1292 }
1293
1294 .maxi-quick-start-content #maxi-license-validation-message {
1295 color: var(--maxi-admin-green);
1296 display: block;
1297 font-size: 16px;
1298 font-style: italic;
1299 }
1300
1301
1302 @media only screen and (max-width: 1280px) {
1303
1304 .maxi-quick-start-sidebar {
1305 width: 160px !important;
1306 padding: 25px !important;
1307 margin-top: 15px !important;
1308
1309 }
1310
1311 .maxi-quick-start-main {
1312 flex: 1;
1313 padding-left: 40px !important;
1314 }
1315
1316 #dashboard_system_report .button,
1317 #dashboard_system_report .button-primary,
1318 #dashboard_system_report .skip-button {
1319 display: inline-block;
1320 font-size: 16px !important;
1321 margin-top: 10px !important;
1322 padding: 5px 30px !important;
1323 }
1324
1325 #dashboard_system_report button#choose-starter-site {
1326 max-width: 250px !important;
1327 width: auto !important;
1328 }
1329 }
1330