← All changes
|
includes/setup-wizard/assets/css/setup-wizard.css
+217
-7
4.1.16
→
4.5.6
View file →
| @@ -13,8 +13,12 @@ | ||
| 13 | 13 | --upk-white: #ffffff; |
| 14 | 14 | --upk-shadow: 0 10px 20px rgba(108, 92, 231, 0.1); |
| 15 | 15 | --upk-border-radius: 10px; |
| 16 | 16 | --upk-transition: all 0.3s ease; |
| 17 | + /* Every step scrolls its own content inside a region of this height, so the | |
| 18 | + wizard frame itself never moves between steps. */ | |
| 19 | + --upk-wizard-scroll-max: clamp(200px, calc(100vh - 560px), 620px); | |
| 20 | + --upk-wizard-scroll-thumb: var(--upk-gray-medium); | |
| 17 | 21 | } |
| 18 | 22 | |
| 19 | 23 | /* Base Styles */ |
| 20 | 24 | .bdt-setup-wizard { |
| @@ -590,13 +594,13 @@ | ||
| 590 | 594 | .bdt-setup-wizard ul.widget-list { |
| 591 | 595 | display: grid; |
| 592 | 596 | grid-template-columns: repeat(1, 1fr); |
| 593 | 597 | gap: 15px; |
| 594 | - max-height: 415px; | |
| 598 | + max-height: var(--upk-wizard-scroll-max); | |
| 595 | 599 | overflow-y: auto; |
| 596 | 600 | padding-right: 10px; |
| 597 | 601 | scrollbar-width: thin; |
| 598 | - scrollbar-color: var(--upk-primary) transparent; | |
| 602 | + scrollbar-color: var(--upk-wizard-scroll-thumb) transparent; | |
| 599 | 603 | padding-top: 5px; |
| 600 | 604 | -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%); |
| 601 | 605 | mask-image: linear-gradient(to bottom, black 90%, transparent 100%); |
| 602 | 606 | padding-bottom: 20px; |
| @@ -607,14 +611,14 @@ | ||
| 607 | 611 | width: 8px; |
| 608 | 612 | } |
| 609 | 613 | |
| 610 | 614 | .bdt-setup-wizard ul.widget-list::-webkit-scrollbar-track { |
| 611 | - background: var(--upk-gray-light); | |
| 615 | + background: transparent; | |
| 612 | 616 | border-radius: 4px; |
| 613 | 617 | } |
| 614 | 618 | |
| 615 | 619 | .bdt-setup-wizard ul.widget-list::-webkit-scrollbar-thumb { |
| 616 | - background-color: var(--upk-primary); | |
| 620 | + background-color: var(--upk-wizard-scroll-thumb); | |
| 617 | 621 | border-radius: 4px; |
| 618 | 622 | } |
| 619 | 623 | |
| 620 | 624 | /* Widget list item styling */ |
| @@ -841,12 +845,25 @@ | ||
| 841 | 845 | } |
| 842 | 846 | |
| 843 | 847 | .bdt-setup-wizard .bdt-features-grid { |
| 844 | 848 | display: grid; |
| 845 | - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| 849 | + grid-template-columns: 1fr; | |
| 850 | + align-items: stretch; | |
| 846 | 851 | gap: 30px; |
| 847 | 852 | } |
| 848 | 853 | |
| 854 | +@media (min-width: 768px) { | |
| 855 | + .bdt-setup-wizard .bdt-features-grid { | |
| 856 | + grid-template-columns: repeat(2, 1fr); | |
| 857 | + } | |
| 858 | +} | |
| 859 | + | |
| 860 | +@media (min-width: 1024px) { | |
| 861 | + .bdt-setup-wizard .bdt-features-grid { | |
| 862 | + grid-template-columns: repeat(3, 1fr); | |
| 863 | + } | |
| 864 | +} | |
| 865 | + | |
| 849 | 866 | .bdt-setup-wizard .bdt-feature-item { |
| 850 | 867 | border-radius: var(--upk-border-radius); |
| 851 | 868 | padding: 30px 20px; |
| 852 | 869 | transition: var(--upk-transition); |
| @@ -943,16 +960,29 @@ | ||
| 943 | 960 | .bdt-setup-wizard form#upk-install-plugins .bdt-plugin-list { |
| 944 | 961 | display: grid; |
| 945 | 962 | gap: 20px; |
| 946 | 963 | margin-top: 30px; |
| 947 | - height: 415px; | |
| 964 | + max-height: var(--upk-wizard-scroll-max); | |
| 948 | 965 | padding: 5px 10px 20px 10px; |
| 949 | 966 | scrollbar-width: thin; |
| 950 | - scrollbar-color: var(--upk-primary) transparent; | |
| 967 | + scrollbar-color: var(--upk-wizard-scroll-thumb) transparent; | |
| 951 | 968 | -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%); |
| 952 | 969 | mask-image: linear-gradient(to bottom, black 90%, transparent 100%); |
| 953 | 970 | overflow-y: auto; |
| 954 | 971 | } |
| 972 | + | |
| 973 | +.bdt-setup-wizard form#upk-install-plugins .bdt-plugin-list::-webkit-scrollbar { | |
| 974 | + width: 8px; | |
| 975 | +} | |
| 976 | + | |
| 977 | +.bdt-setup-wizard form#upk-install-plugins .bdt-plugin-list::-webkit-scrollbar-track { | |
| 978 | + background: transparent; | |
| 979 | +} | |
| 980 | + | |
| 981 | +.bdt-setup-wizard form#upk-install-plugins .bdt-plugin-list::-webkit-scrollbar-thumb { | |
| 982 | + background-color: var(--upk-wizard-scroll-thumb); | |
| 983 | + border-radius: 4px; | |
| 984 | +} | |
| 955 | 985 | .bdt-setup-wizard .bdt-plugin-logo img { |
| 956 | 986 | width: 48px; |
| 957 | 987 | height: 48px; |
| 958 | 988 | border-radius: 4px; |
| @@ -1378,5 +1408,185 @@ | ||
| 1378 | 1408 | .bdt-wizard-progress-header, |
| 1379 | 1409 | .bdt-step-content { |
| 1380 | 1410 | position: relative; |
| 1381 | 1411 | z-index: 1; |
| 1412 | +} | |
| 1413 | + | |
| 1414 | +/* Newsletter opt-in — its own section below the welcome features */ | |
| 1415 | +.bdt-setup-wizard .bdt-setup-wizard-subscribe { | |
| 1416 | + margin-block: 50px 10px; | |
| 1417 | + padding-block-start: 40px; | |
| 1418 | + border-block-start: 1px solid var(--upk-gray-medium); | |
| 1419 | +} | |
| 1420 | + | |
| 1421 | +.bdt-setup-wizard .bdt-subscribe-card { | |
| 1422 | + background: var(--upk-white); | |
| 1423 | + border: none; | |
| 1424 | + border-radius: var(--upk-border-radius); | |
| 1425 | + padding: clamp(20px, 3vw, 32px); | |
| 1426 | + max-inline-size: 700px; | |
| 1427 | + margin-inline: auto; | |
| 1428 | + text-align: start; | |
| 1429 | + box-shadow: none; | |
| 1430 | +} | |
| 1431 | + | |
| 1432 | +.bdt-setup-wizard .bdt-subscribe-card-head { | |
| 1433 | + display: flex; | |
| 1434 | + flex-wrap: wrap; | |
| 1435 | + align-items: center; | |
| 1436 | + justify-content: flex-end; | |
| 1437 | + gap: 10px; | |
| 1438 | + margin-block-end: 16px; | |
| 1439 | +} | |
| 1440 | + | |
| 1441 | +.bdt-setup-wizard .bdt-subscribe-guarantee { | |
| 1442 | + display: inline-flex; | |
| 1443 | + align-items: center; | |
| 1444 | + gap: 6px; | |
| 1445 | + font-size: 12px; | |
| 1446 | + font-weight: 600; | |
| 1447 | + letter-spacing: .4px; | |
| 1448 | + color: #b8b8b8; | |
| 1449 | + white-space: nowrap; | |
| 1450 | +} | |
| 1451 | + | |
| 1452 | +.bdt-setup-wizard .bdt-subscribe-guarantee .dashicons { | |
| 1453 | + font-size: 16px; | |
| 1454 | + inline-size: 16px; | |
| 1455 | + block-size: 16px; | |
| 1456 | +} | |
| 1457 | + | |
| 1458 | +.bdt-setup-wizard .bdt-subscribe-field { | |
| 1459 | + margin-block-end: 18px; | |
| 1460 | +} | |
| 1461 | + | |
| 1462 | +.bdt-setup-wizard input.bdt-subscribe-email { | |
| 1463 | + inline-size: 100%; | |
| 1464 | + padding-block: 12px; | |
| 1465 | + padding-inline: 16px; | |
| 1466 | + font-size: 15px; | |
| 1467 | + color: var(--upk-text-dark); | |
| 1468 | + /* Same border as the consent checkbox, so the two read as one control set. */ | |
| 1469 | + border: 1px solid var(--upk-gray-medium); | |
| 1470 | + border-radius: 6px; | |
| 1471 | + box-shadow: none; | |
| 1472 | + transition: var(--upk-transition); | |
| 1473 | +} | |
| 1474 | + | |
| 1475 | +.bdt-setup-wizard input.bdt-subscribe-email:focus { | |
| 1476 | + box-shadow: 0 0 0 3px rgba(108, 92, 231, .15); | |
| 1477 | + outline: none; | |
| 1478 | +} | |
| 1479 | + | |
| 1480 | +.bdt-setup-wizard .bdt-subscribe-consent-label { | |
| 1481 | + display: flex; | |
| 1482 | + align-items: flex-start; | |
| 1483 | + gap: 12px; | |
| 1484 | + font-size: 13px; | |
| 1485 | + line-height: 1.6; | |
| 1486 | + color: var(--upk-text-light); | |
| 1487 | + cursor: pointer; | |
| 1488 | +} | |
| 1489 | + | |
| 1490 | +.bdt-setup-wizard .bdt-subscribe-consent-label input[type="checkbox"] { | |
| 1491 | + flex: 0 0 auto; | |
| 1492 | + appearance: none; | |
| 1493 | + -webkit-appearance: none; | |
| 1494 | + position: relative; | |
| 1495 | + inline-size: 18px; | |
| 1496 | + block-size: 18px; | |
| 1497 | + margin: 2px 0 0; | |
| 1498 | + background: transparent; | |
| 1499 | + border: 1px solid var(--upk-gray-medium); | |
| 1500 | + border-radius: 4px; | |
| 1501 | + cursor: pointer; | |
| 1502 | +} | |
| 1503 | + | |
| 1504 | +/* No fill when checked — just the tick. */ | |
| 1505 | +.bdt-setup-wizard .bdt-subscribe-consent-label input[type="checkbox"]:checked::after { | |
| 1506 | + content: ''; | |
| 1507 | + position: absolute; | |
| 1508 | + inset-block-start: 1px; | |
| 1509 | + inset-inline-start: 5px; | |
| 1510 | + inline-size: 5px; | |
| 1511 | + block-size: 10px; | |
| 1512 | + border: solid var(--upk-text-dark); | |
| 1513 | + border-width: 0 2px 2px 0; | |
| 1514 | + transform: rotate(45deg); | |
| 1515 | +} | |
| 1516 | + | |
| 1517 | +/* Steps scroll inside their own regions — keep the page scrollbar out of sight */ | |
| 1518 | +.bdt-setup-wizard-overlay { | |
| 1519 | + scrollbar-width: thin; | |
| 1520 | + scrollbar-color: transparent transparent; | |
| 1521 | +} | |
| 1522 | + | |
| 1523 | +.bdt-setup-wizard-overlay::-webkit-scrollbar { | |
| 1524 | + inline-size: 8px; | |
| 1525 | +} | |
| 1526 | + | |
| 1527 | +.bdt-setup-wizard-overlay::-webkit-scrollbar-track, | |
| 1528 | +.bdt-setup-wizard-overlay::-webkit-scrollbar-thumb { | |
| 1529 | + background: transparent; | |
| 1530 | + border: none; | |
| 1531 | + box-shadow: none; | |
| 1532 | +} | |
| 1533 | + | |
| 1534 | +/* The features and the opt-in scroll among themselves, so the welcome header | |
| 1535 | + and "Get Started" stay put without leaving the flow. */ | |
| 1536 | +.bdt-setup-wizard .bdt-welcome-scroll { | |
| 1537 | + max-block-size: var(--upk-wizard-scroll-max); | |
| 1538 | + overflow-y: auto; | |
| 1539 | + overscroll-behavior: contain; | |
| 1540 | + padding-block-end: 20px; | |
| 1541 | + padding-inline-end: 10px; | |
| 1542 | + scrollbar-width: thin; | |
| 1543 | + /* Thumb matches the checkbox and input border. */ | |
| 1544 | + scrollbar-color: var(--upk-wizard-scroll-thumb) transparent; | |
| 1545 | + /* Same fade the widget and plugin lists use, to hint at more below. */ | |
| 1546 | + -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%); | |
| 1547 | + mask-image: linear-gradient(to bottom, black 90%, transparent 100%); | |
| 1548 | +} | |
| 1549 | + | |
| 1550 | +.bdt-setup-wizard .bdt-welcome-scroll::-webkit-scrollbar { | |
| 1551 | + inline-size: 8px; | |
| 1552 | +} | |
| 1553 | + | |
| 1554 | +.bdt-setup-wizard .bdt-welcome-scroll::-webkit-scrollbar-track { | |
| 1555 | + background: transparent; | |
| 1556 | + border: none; | |
| 1557 | + box-shadow: none; | |
| 1558 | +} | |
| 1559 | + | |
| 1560 | +.bdt-setup-wizard .bdt-welcome-scroll::-webkit-scrollbar-thumb { | |
| 1561 | + background: var(--upk-wizard-scroll-thumb); | |
| 1562 | + border: none; | |
| 1563 | + border-radius: 4px; | |
| 1564 | + box-shadow: none; | |
| 1565 | +} | |
| 1566 | + | |
| 1567 | +/* Good to Go has no list of its own to scroll, so its body gets the same | |
| 1568 | + region as the other steps. */ | |
| 1569 | +.bdt-setup-wizard .bdt-goodtogo-scroll { | |
| 1570 | + max-block-size: var(--upk-wizard-scroll-max); | |
| 1571 | + overflow-y: auto; | |
| 1572 | + overscroll-behavior: contain; | |
| 1573 | + padding-block-end: 20px; | |
| 1574 | + padding-inline-end: 10px; | |
| 1575 | + scrollbar-width: thin; | |
| 1576 | + scrollbar-color: var(--upk-wizard-scroll-thumb) transparent; | |
| 1577 | + -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%); | |
| 1578 | + mask-image: linear-gradient(to bottom, black 90%, transparent 100%); | |
| 1579 | +} | |
| 1580 | + | |
| 1581 | +.bdt-setup-wizard .bdt-goodtogo-scroll::-webkit-scrollbar { | |
| 1582 | + inline-size: 8px; | |
| 1583 | +} | |
| 1584 | + | |
| 1585 | +.bdt-setup-wizard .bdt-goodtogo-scroll::-webkit-scrollbar-track { | |
| 1586 | + background: transparent; | |
| 1587 | +} | |
| 1588 | + | |
| 1589 | +.bdt-setup-wizard .bdt-goodtogo-scroll::-webkit-scrollbar-thumb { | |
| 1590 | + background: var(--upk-wizard-scroll-thumb); | |
| 1591 | + border-radius: 4px; | |
| 1382 | 1592 | } |