← All changes | css/common/_upsell.scss +28 -12 3.10.0-beta.1 → 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,9 +32,9 @@
33	32	.button-link.button-small {
34	33	text-decoration: none;
35	34	font-weight: normal;
36	35	padding: 0;
37		- color: #646970;
	36	+ color: var(--cs-color-text-muted);
38	37	line-height: 1;
39	38	border: none;
40	39	}
41	40	}
		@@ -46,9 +45,9 @@
46	45	font-size: 32px;
47	46	margin: 0;
48	47
49	48	span {
50		- color: #d46f4d;
	49	+ color: var(--cs-color-secondary);
51	50	}
52	51	}
53	52
54	53	p {
		@@ -82,9 +81,9 @@
82	81	color: #fff;
83	82	inline-size: 24px;
84	83	block-size: 24px;
85	84	border-radius: 50%;
86		- background-color: #0ca0a9;
	85	+ background-color: var(--cs-color-primary-hover);
87	86	display: flex;
88	87	justify-content: center;
89	88	align-items: center;
90	89	}
		@@ -89,9 +88,9 @@
89	88	align-items: center;
90	89	}
91	90
92	91	.button.button-large {
93		- background-color: #d46f4d;
	92	+ background-color: var(--cs-color-secondary);
94	93	padding-block: 15px;
95	94	padding-inline: 20px;
96	95	font-size: 16px;
97	96	line-height: inherit;
		@@ -98,10 +97,14 @@
98	97	margin-block: 16px 24px;
99	98	margin-inline: auto;
100	99	border-color: currentcolor;
101	100
102		- &:hover {
103		- 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);
104	107	}
105	108	}
106	109	}
107	110
		@@ -117,9 +120,22 @@
117	120	color: #1c3f41;
118	121	line-height: 1.5;
119	122	background: linear-gradient(116.04deg, #edfcff -0.75%, #fcdfd4 93.04%);
120	123	box-shadow: 0 4px 80px rgb(0 0 0 / 10%);
121		- border-radius: 8px;
	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;
122	138	}
123	139
124	140	.code-snippets-upsell-page,
125	141	.code-snippets-upsell-dialog .components-modal__content > div:last-child {