← All changes | css/common/_upsell.scss +64 -44 3.9.6 → trunk View file →

		@@ -1,5 +1,4 @@
1		-@use 'sass:color';
2	1	@use 'theme';
3	2
4	3	.code-snippets-upsell-banner {
5	4	display: flex;
		@@ -6,10 +5,10 @@
6	5	flex-direction: row;
7	6	align-items: center;
8	7	padding: 12px;
9	8	gap: 10px;
10		- background: #fff;
11		- border: 1px solid #ccc;
	9	+ background: var(--cs-color-surface);
	10	+ border: 1px solid var(--cs-color-border);
12	11	border-radius: 5px;
13	12
14	13	p {
15	14	margin: 0;
		@@ -19,15 +18,15 @@
19	18	text-decoration: none;
20	19	}
21	20
22	21	.button-primary {
23		- background-color: theme.$secondary;
	22	+ background-color: var(--cs-color-secondary);
24	23	border: 0;
25	24	font-weight: bold;
26	25	margin-inline-start: auto;
27	26
28	27	&:hover, &:focus {
29		- background-color: color.adjust(theme.$secondary, $lightness: -10%);
	28	+ background-color: var(--cs-color-primary-hover);
30	29	}
31	30	}
32	31
33	32	.button-link.button-small {
		@@ -33,44 +32,22 @@
33	32	.button-link.button-small {
34	33	text-decoration: none;
35	34	font-weight: normal;
36	35	padding: 0;
37		- color: #a7aaad;
	36	+ color: var(--cs-color-text-muted);
38	37	line-height: 1;
	38	+ border: none;
39	39	}
40	40	}
41	41
42		-.code-snippets-upsell-dialog {
43		- background: linear-gradient(116.04deg, #edfcff -0.75%, #fcdfd4 93.04%);
44		- inline-size: 794px;
45		- box-shadow: 0 4px 80px rgb(0 0 0 / 10%);
46		- border-radius: 8px;
47		- font-family: 'SF Pro', sans-serif;
48		- color: #1c3f41;
49		- line-height: 1.5;
50		- max-block-size: unset;
51		-
52		- .components-modal__content {
53		- margin: 0;
54		- padding-block: 48px;
55		- padding-inline: 80px;
56		- }
57		-
58		- .components-modal__content > div:last-child {
59		- display: flex;
60		- flex-direction: column;
61		- align-items: center;
62		- text-align: center;
63		- gap: 18px;
64		- overflow: auto;
65		- }
66		-
	42	+.code-snippets-upsell-dialog,
	43	+.wrap .code-snippets-upsell-page {
67	44	h1 {
68	45	font-size: 32px;
69	46	margin: 0;
70	47
71	48	span {
72		- color: #d46f4d;
	49	+ color: var(--cs-color-secondary);
73	50	}
74	51	}
75	52
76	53	p {
		@@ -75,12 +52,10 @@
75	52
76	53	p {
77	54	margin-block: 0;
78	55	margin-inline: 2em;
79		- }
80		-
81		- h1 + p {
82	56	font-size: 16px;
	57	+ max-inline-size: 750px;
83	58	}
84	59
85	60	img {
86	61	inline-size: 82px;
		@@ -85,18 +60,14 @@
85	60	img {
86	61	inline-size: 82px;
87	62	}
88	63
89		- h2 {
90		- text-transform: uppercase;
91		- font-size: 12px;
92		- }
93		-
94	64	ul {
95	65	display: grid;
96	66	inline-size: 100%;
97	67	grid-auto-flow: column;
98	68	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
	69	+ max-inline-size: 750px;
99	70	}
100	71
101	72	li {
102	73	display: flex;
		@@ -110,9 +81,9 @@
110	81	color: #fff;
111	82	inline-size: 24px;
112	83	block-size: 24px;
113	84	border-radius: 50%;
114		- background-color: #0ca0a9;
	85	+ background-color: var(--cs-color-primary-hover);
115	86	display: flex;
116	87	justify-content: center;
117	88	align-items: center;
118	89	}
		@@ -117,9 +88,9 @@
117	88	align-items: center;
118	89	}
119	90
120	91	.button.button-large {
121		- background-color: #d46f4d;
	92	+ background-color: var(--cs-color-secondary);
122	93	padding-block: 15px;
123	94	padding-inline: 20px;
124	95	font-size: 16px;
125	96	line-height: inherit;
		@@ -126,9 +97,58 @@
126	97	margin-block: 16px 24px;
127	98	margin-inline: auto;
128	99	border-color: currentcolor;
129	100
130		- &:hover {
131		- background-color: color.adjust(#d46f4d, $lightness: -10%);
	101	+ // Matches the specificity of the native-control override in _wp-admin.scss
	102	+ // (.wrap .button-primary:not(.button-link):hover:not(:disabled)) so this
	103	+ // upsell-specific hover styling isn't overridden by the shared button rule.
	104	+ &:is(:hover, :focus):not(.button-link, :disabled) {
	105	+ background-color: var(--cs-color-primary-hover);
	106	+ border-color: var(--cs-color-primary-hover);
132	107	}
133	108	}
	109	+}
	110	+
	111	+.code-snippets-upsell-page,
	112	+.code-snippets-upsell-dialog .components-modal__content {
	113	+ margin: 0;
	114	+ padding-block: 48px;
	115	+ padding-inline: 80px;
	116	+}
	117	+
	118	+.code-snippets-upsell-page,
	119	+.code-snippets-upsell-dialog {
	120	+ color: #1c3f41;
	121	+ line-height: 1.5;
	122	+ background: linear-gradient(116.04deg, #edfcff -0.75%, #fcdfd4 93.04%);
	123	+ box-shadow: 0 4px 80px rgb(0 0 0 / 10%);
	124	+ border-radius: 5px;
	125	+}
	126	+
	127	+// Bleed the upsell to the full width of the admin content area and fill the
	128	+// remaining viewport height, so it reads as a full page rather than a small
	129	+// boxed card floating in the subpage. 168px accounts for the WP admin bar
	130	+// (32px) plus the plugin toolbar (136px).
	131	+.code-snippets-upsell-page {
	132	+ box-sizing: border-box;
	133	+ margin-inline-start: -22px;
	134	+ inline-size: calc(100% + 42px);
	135	+ min-block-size: calc(100vh - 168px);
	136	+ border-radius: 0;
	137	+ justify-content: center;
	138	+}
	139	+
	140	+.code-snippets-upsell-page,
	141	+.code-snippets-upsell-dialog .components-modal__content > div:last-child {
	142	+ display: flex;
	143	+ flex-direction: column;
	144	+ align-items: center;
	145	+ text-align: center;
	146	+ gap: 18px;
	147	+}
	148	+
	149	+.code-snippets-upsell-dialog {
	150	+ max-block-size: unset;
	151	+ font-family: 'SF Pro', sans-serif;
	152	+ inline-size: 794px;
	153	+ overflow: auto;
134	154	}