← All changes
|
includes/setup-wizard/assets/css/setup-wizard.css
+237
-27
4.0.9
→
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 { |
| @@ -422,9 +426,9 @@ | ||
| 422 | 426 | background-color: #EF476F; |
| 423 | 427 | } |
| 424 | 428 | |
| 425 | 429 | .bdt-setup-wizard .free input:checked + .slider { |
| 426 | - background-color: #06D6A0; | |
| 430 | + background-color: var(--upk-primary); | |
| 427 | 431 | } |
| 428 | 432 | |
| 429 | 433 | .bdt-setup-wizard input:checked + .slider:before { |
| 430 | 434 | transform: translateX(20px); |
| @@ -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; |
| @@ -1248,9 +1278,9 @@ | ||
| 1248 | 1278 | 100% { transform: rotate(360deg); } |
| 1249 | 1279 | } |
| 1250 | 1280 | |
| 1251 | 1281 | /* Rating Section Styles */ |
| 1252 | -.rating-section { | |
| 1282 | +.bdt-setup-wizard .rating-section { | |
| 1253 | 1283 | display: flex; |
| 1254 | 1284 | align-items: center; |
| 1255 | 1285 | gap: 8px; |
| 1256 | 1286 | /* margin: 8px 0; */ |
| @@ -1255,27 +1285,27 @@ | ||
| 1255 | 1285 | gap: 8px; |
| 1256 | 1286 | /* margin: 8px 0; */ |
| 1257 | 1287 | } |
| 1258 | 1288 | |
| 1259 | -.rating-label { | |
| 1289 | +.bdt-setup-wizard .rating-label { | |
| 1260 | 1290 | font-weight: 600; |
| 1261 | 1291 | color: var(--upk-text-dark); |
| 1262 | 1292 | font-size: 14px; |
| 1263 | 1293 | } |
| 1264 | 1294 | |
| 1265 | -.wporg-ratings { | |
| 1295 | +.bdt-setup-wizard .wporg-ratings { | |
| 1266 | 1296 | display: flex; |
| 1267 | 1297 | align-items: center; |
| 1268 | 1298 | gap: 2px; |
| 1269 | 1299 | } |
| 1270 | 1300 | |
| 1271 | -.wporg-ratings .dashicons { | |
| 1301 | +.bdt-setup-wizard .wporg-ratings .dashicons { | |
| 1272 | 1302 | font-size: 16px; |
| 1273 | 1303 | width: 16px; |
| 1274 | 1304 | height: 16px; |
| 1275 | 1305 | } |
| 1276 | 1306 | |
| 1277 | -.rating-text { | |
| 1307 | +.bdt-setup-wizard .rating-text { | |
| 1278 | 1308 | font-size: 13px; |
| 1279 | 1309 | color: var(--upk-text-light); |
| 1280 | 1310 | margin-left: 4px; |
| 1281 | 1311 | } |
| @@ -1280,9 +1310,9 @@ | ||
| 1280 | 1310 | margin-left: 4px; |
| 1281 | 1311 | } |
| 1282 | 1312 | |
| 1283 | 1313 | /* Default Plugin Icon */ |
| 1284 | -.default-plugin-icon { | |
| 1314 | +.bdt-setup-wizard .default-plugin-icon { | |
| 1285 | 1315 | width: 40px; |
| 1286 | 1316 | height: 40px; |
| 1287 | 1317 | background: var(--upk-gray-light); |
| 1288 | 1318 | border-radius: 8px; |
| @@ -1302,18 +1332,18 @@ | ||
| 1302 | 1332 | } */ |
| 1303 | 1333 | |
| 1304 | 1334 | /* Responsive Design for Rating */ |
| 1305 | 1335 | @media (max-width: 768px) { |
| 1306 | - .rating-section { | |
| 1336 | + .bdt-setup-wizard .rating-section { | |
| 1307 | 1337 | flex-wrap: wrap; |
| 1308 | 1338 | gap: 4px; |
| 1309 | 1339 | } |
| 1310 | 1340 | |
| 1311 | - .rating-text { | |
| 1341 | + .bdt-setup-wizard .rating-text { | |
| 1312 | 1342 | font-size: 12px; |
| 1313 | 1343 | } |
| 1314 | 1344 | |
| 1315 | - .wporg-ratings .dashicons { | |
| 1345 | + .bdt-setup-wizard .wporg-ratings .dashicons { | |
| 1316 | 1346 | font-size: 14px; |
| 1317 | 1347 | width: 14px; |
| 1318 | 1348 | height: 14px; |
| 1319 | 1349 | } |
| @@ -1319,21 +1349,21 @@ | ||
| 1319 | 1349 | } |
| 1320 | 1350 | } |
| 1321 | 1351 | |
| 1322 | 1352 | /* Additional Plugin Data Styles */ |
| 1323 | -.installs-count { | |
| 1353 | +.bdt-setup-wizard .installs-count { | |
| 1324 | 1354 | font-size: 12px; |
| 1325 | 1355 | color: var(--upk-text-light); |
| 1326 | 1356 | font-weight: normal; |
| 1327 | 1357 | } |
| 1328 | 1358 | |
| 1329 | -.rating-count { | |
| 1359 | +.bdt-setup-wizard .rating-count { | |
| 1330 | 1360 | font-size: 12px; |
| 1331 | 1361 | color: var(--upk-text-light); |
| 1332 | 1362 | font-weight: normal; |
| 1333 | 1363 | } |
| 1334 | 1364 | |
| 1335 | -.downloads, .last-updated { | |
| 1365 | +.bdt-setup-wizard .downloads, .bdt-setup-wizard .last-updated { | |
| 1336 | 1366 | display: block; |
| 1337 | 1367 | font-size: 13px; |
| 1338 | 1368 | color: var(--upk-text-light); |
| 1339 | 1369 | margin: 4px 0; |
| @@ -1338,31 +1368,31 @@ | ||
| 1338 | 1368 | color: var(--upk-text-light); |
| 1339 | 1369 | margin: 4px 0; |
| 1340 | 1370 | } |
| 1341 | 1371 | |
| 1342 | -.downloads { | |
| 1372 | +.bdt-setup-wizard .downloads { | |
| 1343 | 1373 | color: var(--upk-success); |
| 1344 | 1374 | font-weight: 500; |
| 1345 | 1375 | } |
| 1346 | 1376 | |
| 1347 | -.last-updated { | |
| 1377 | +.bdt-setup-wizard .last-updated { | |
| 1348 | 1378 | font-style: italic; |
| 1349 | 1379 | } |
| 1350 | 1380 | |
| 1351 | 1381 | /* Plugin Data Grid */ |
| 1352 | -.plugin-item { | |
| 1382 | +.bdt-setup-wizard .plugin-item { | |
| 1353 | 1383 | display: flex; |
| 1354 | 1384 | flex-direction: column; |
| 1355 | 1385 | gap: 8px; |
| 1356 | 1386 | } |
| 1357 | 1387 | |
| 1358 | -.plugin-item .plugin-text { | |
| 1388 | +.bdt-setup-wizard .plugin-item .plugin-text { | |
| 1359 | 1389 | margin: 8px 0; |
| 1360 | 1390 | } |
| 1361 | 1391 | |
| 1362 | -.plugin-item .active-installs, | |
| 1363 | -.plugin-item .downloads, | |
| 1364 | -.plugin-item .last-updated { | |
| 1392 | +.bdt-setup-wizard .plugin-item .active-installs, | |
| 1393 | +.bdt-setup-wizard .plugin-item .downloads, | |
| 1394 | +.bdt-setup-wizard .plugin-item .last-updated { | |
| 1365 | 1395 | margin: 2px 0; |
| 1366 | 1396 | } |
| 1367 | 1397 | |
| 1368 | 1398 | /* Import Loading States */ |
| @@ -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 | } |