← All changes | css/welcome.scss +54 -44 3.10.0-beta.1 → trunk View file →

		@@ -1,31 +1,23 @@
1		-@use 'sass:color';
2	1	@use 'common/theme';
3	2	@use 'common/badges';
4	3	@use 'common/toolbar';
5	4	@use 'common/wp-admin';
	5	+@use 'common/page-header';
6	6
7		-$breakpoint: 1060px;
8		-
9		-.code-snippets-welcome {
10		- h2 {
11		- font-size: 32px;
12		- font-weight: 510;
13		- line-height: 1.25;
14		- color: #2c3337;
15		- padding: 0;
16		- margin-block: 50px 1rem;
17		- }
	7	+#code-snippets-welcome-container {
	8	+ margin-block-start: 0;
18	9	}
19	10
20	11	.code-snippets-updates {
21		- display: grid;
22		- grid-template-columns: 2fr 1fr;
	12	+ display: flex;
	13	+ flex-direction: row;
23	14	gap: 20px;
24	15
25	16	> * {
26		- background: #fff;
27		- border-radius: 8px;
	17	+ background: var(--cs-color-surface);
	18	+ border: 1px solid var(--cs-color-border-subtle);
	19	+ border-radius: var(--cs-card-radius);
28	20	padding: 32px;
29	21	}
30	22
31	23	.code-snippets-header-wrapper {
		@@ -32,30 +24,35 @@
32	24	display: flex;
33	25	flex-flow: row;
34	26	justify-content: space-between;
35	27	align-items: center;
36		- border-block-end: 1px solid #e2e2e4;
	28	+ border-block-end: 1px solid var(--cs-color-border-subtle);
37	29	margin-block-end: 20px;
38	30	padding-block-end: 20px;
39	31	}
40	32
41		- h3 {
	33	+ h2 {
42	34	font-size: 18px;
43	35	margin: 0;
44	36	}
	37	+
	38	+ @media (width <= 960px) {
	39	+ flex-direction: column;
	40	+ }
45	41	}
46	42
47	43	.code-snippets-hero {
48	44	display: flex;
49	45	flex-flow: column;
	46	+ border: 1px solid var(--cs-color-border-subtle);
50	47
51	48	figure {
52	49	margin: 1em 0 0;
53	50	overflow: hidden;
54		- border-radius: 0.5rem;
	51	+ border-radius: var(--cs-card-radius);
55	52	position: relative;
56	53	block-size: auto;
57		- background: #efefef;
	54	+ background: var(--cs-color-surface-muted);
58	55	flex: 1;
59	56	text-align: center;
60	57
61	58	img {
		@@ -88,18 +85,19 @@
88	85	}
89	86
90	87	.code-snippets-card {
91	88	flex: 1;
92		- background: #fff;
93		- border-radius: 8px;
	89	+ background: var(--cs-color-surface);
	90	+ border: 1px solid var(--cs-color-border-subtle);
	91	+ border-radius: var(--cs-card-radius);
94	92	display: flex;
95	93	margin: 0;
96	94	flex-flow: column;
97		- color: #2c3337;
	95	+ color: var(--cs-color-text);
98	96
99	97	figure img {
100		- border-start-start-radius: 8px;
101		- border-start-end-radius: 8px;
	98	+ border-start-start-radius: var(--cs-card-radius);
	99	+ border-start-end-radius: var(--cs-card-radius);
102	100	}
103	101	}
104	102
105	103	.code-snippets-partners {
		@@ -135,10 +133,10 @@
135	133	margin: 0;
136	134	}
137	135
138	136	.item-category {
139		- color: white;
140		- background: color.adjust(theme.$secondary, $lightness: -15%);
	137	+ color: #fff;
	138	+ background: color-mix(in srgb, var(--cs-color-secondary) 85%, #000 15%);
141	139	display: block;
142	140	font-size: 12px;
143	141	letter-spacing: 1px;
144	142	margin-block: 0;
		@@ -144,9 +142,9 @@
144	142	margin-block: 0;
145	143	text-transform: uppercase;
146	144	inline-size: fit-content;
147	145	padding: 3px 10px;
148		- border-radius: 3px;
	146	+ border-radius: 5px;
149	147	font-weight: bold;
150	148	}
151	149	}
152	150
		@@ -154,9 +152,9 @@
154	152	font-size: 0.9rem;
155	153	line-height: 1.5;
156	154	overflow-y: scroll;
157	155	max-block-size: 500px;
158		- color: #2c3337;
	156	+ color: var(--cs-color-text);
159	157	padding-inline-end: 1em;
160	158
161	159	h3 {
162	160	font-size: 16px;
		@@ -189,23 +187,35 @@
189	187	align-items: baseline;
190	188	gap: 10px;
191	189	}
192	190
193		- $icon-colors: (
194		- lightbulb #f1c40f,
195		- chart-line #85144b,
196		- buddicons-replies #3d9970,
197		- remove #ffbf00,
198		- trash #c0c0c0,
199		- shield #0074d9,
200		- open-folder #5d2f27
201		- );
	191	+ .dashicons-lightbulb {
	192	+ color: #f1c40f;
	193	+ }
202	194
203		- @each $icon, $color in $icon-colors {
204		- .dashicons-#{$icon} {
205		- color: $color;
206		- }
	195	+ .dashicons-chart-line {
	196	+ color: #85144b;
207	197	}
	198	+
	199	+ .dashicons-buddicons-replies {
	200	+ color: #3d9970;
	201	+ }
	202	+
	203	+ .dashicons-remove {
	204	+ color: #ffbf00;
	205	+ }
	206	+
	207	+ .dashicons-trash {
	208	+ color: #c0c0c0;
	209	+ }
	210	+
	211	+ .dashicons-shield {
	212	+ color: #0074d9;
	213	+ }
	214	+
	215	+ .dashicons-open-folder {
	216	+ color: #5d2f27;
	217	+ }
208	218	}
209	219
210	220	.code-snippets-loading-spinner {
211	221	block-size: 0;
		@@ -211,10 +221,10 @@
211	221	block-size: 0;
212	222	inline-size: 0;
213	223	padding: 15px;
214	224	border: 6px solid #e7c0b3;
215		- border-inline-end-color: theme.$secondary;
216		- border-radius: 22px;
	225	+ border-inline-end-color: var(--cs-color-secondary);
	226	+ border-radius: 50%;
217	227	animation: loading-rotate 1s infinite linear;
218	228	position: absolute;
219	229	inset-inline-start: 47%;
220	230	inset-block-start: 45%;