← All changes | includes/setup-wizard/assets/css/setup-wizard.css +217 -7 4.1.13 → 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	}