← All changes | css/import/_upload.scss +39 -36 3.10.2 → trunk View file →

		@@ -1,9 +1,5 @@
1		-$type-colors: (
2		- css: #9b59b6,
3		- js: #ffeb3b,
4		- html: #ef6a36
5		-);
	1	+@use '../common/theme';
6	2
7	3	.import-upload-card {
8	4	h2 {
9	5	margin: 0 0 1em;
		@@ -22,14 +18,14 @@
22	18	}
23	19	}
24	20
25	21	.upload-drop-zone {
26		- border: 2px dashed #ccd0d4;
27		- border-radius: 4px;
	22	+ border: 2px dashed var(--cs-color-border);
	23	+ border-radius: var(--cs-card-radius);
28	24	padding: 40px 20px;
29	25	text-align: center;
30	26	cursor: pointer;
31		- background-color: #fafafa;
	27	+ background-color: var(--cs-color-surface-subtle);
32	28	transition: all 0.3s ease;
33	29	opacity: 1;
34	30	display: block;
35	31
		@@ -38,19 +34,19 @@
38	34	}
39	35
40	36	&.drag-over {
41	37	border-color: #0073aa;
42		- background-color: #f0f6fc;
	38	+ background-color: var(--cs-color-surface-info);
43	39	}
44	40
45	41	&.disabled {
46	42	cursor: not-allowed;
47		- background-color: #f6f7f7;
	43	+ background-color: var(--cs-color-surface-subtle);
48	44	opacity: 0.6;
49	45	}
50	46
51	47	&:focus-visible {
52		- outline: 2px solid #2271b1;
	48	+ outline: 2px solid var(--cs-color-accent);
53	49	outline-offset: 2px;
54	50	}
55	51
56	52	.drop-zone-icon {
		@@ -55,9 +51,9 @@
55	51
56	52	.drop-zone-icon {
57	53	font-size: 48px;
58	54	margin-block-end: 20px;
59		- color: #666;
	55	+ color: var(--cs-color-text-muted);
60	56	}
61	57
62	58	p:first-of-type {
63	59	margin: 0 0 8px;
		@@ -66,9 +62,9 @@
66	62	}
67	63
68	64	p:last-of-type {
69	65	margin: 0;
70		- color: #666;
	66	+ color: var(--cs-color-text-muted);
71	67	font-size: 14px;
72	68	}
73	69	}
74	70
		@@ -76,9 +72,9 @@
76	72	position: relative;
77	73	margin-block-end: 20px;
78	74
79	75	&:focus-within .upload-drop-zone:not(.disabled) {
80		- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2271b1;
	76	+ box-shadow: 0 0 0 2px var(--cs-color-surface), 0 0 0 4px var(--cs-color-accent);
81	77	}
82	78	}
83	79
84	80	.upload-drop-zone-file-input {
		@@ -121,10 +117,10 @@
121	117	display: flex;
122	118	align-items: center;
123	119	justify-content: space-between;
124	120	padding: 8px 12px;
125		- border: 1px solid #ddd;
126		- border-radius: 4px;
	121	+ border: 1px solid var(--cs-color-border-subtle);
	122	+ border-radius: 5px;
127	123	background-color: #f9f9f9;
128	124	}
129	125
130	126	button {
		@@ -129,16 +125,17 @@
129	125
130	126	button {
131	127	background: none;
132	128	border: none;
133		- color: #d63638;
	129	+ color: var(--cs-color-error);
134	130	cursor: pointer;
135	131	font-size: 16px;
136		- padding: 4px;
	132	+ padding: 0 4px;
137	133
138	134	&:focus-visible {
139		- outline: 2px solid #2271b1;
	135	+ outline: 2px solid var(--cs-color-accent);
140	136	outline-offset: 2px;
	137	+ border-radius: 5px;
141	138	}
142	139	}
143	140
144	141	.selected-file-details {
		@@ -155,9 +152,9 @@
155	152	}
156	153
157	154	.file-size {
158	155	font-size: 12px;
159		- color: #666;
	156	+ color: var(--cs-color-text-muted);
160	157	}
161	158	}
162	159	}
163	160
		@@ -206,17 +203,17 @@
206	203	}
207	204
208	205	p.import-result-message {
209	206	margin: 0 0 8px;
210		- color: #666;
	207	+ color: var(--cs-color-text-muted);
211	208	}
212	209
213	210	p.import-result-link {
214	211	margin: 0;
215		- color: #666;
	212	+ color: var(--cs-color-text-muted);
216	213
217	214	a {
218		- color: #2271b1;
	215	+ color: var(--cs-color-accent);
219	216	text-decoration: none;
220	217	}
221	218	}
222	219
		@@ -225,9 +222,9 @@
225	222
226	223	h3 {
227	224	margin: 0 0 8px;
228	225	font-size: 14px;
229		- color: #d63638;
	226	+ color: var(--cs-color-error);
230	227	}
231	228
232	229	ul {
233	230	margin: 0;
		@@ -234,9 +231,9 @@
234	231	padding-inline-start: 20px;
235	232	}
236	233
237	234	li {
238		- color: #666;
	235	+ color: var(--cs-color-text-muted);
239	236	font-size: 14px;
240	237	}
241	238	}
242	239	}
		@@ -251,17 +248,17 @@
251	248	flex-shrink: 0;
252	249	margin-block-start: 2px;
253	250
254	251	.import-result-success & {
255		- background-color: #00a32a;
	252	+ background-color: var(--cs-color-success);
256	253	}
257	254
258	255	.import-result-failure & {
259		- background-color: #d63638;
	256	+ background-color: var(--cs-color-error);
260	257	}
261	258
262	259	span {
263		- color: white;
	260	+ color: #fff;
264	261	font-size: 14px;
265	262	font-weight: bold;
266	263	}
267	264	}
		@@ -285,9 +282,9 @@
285	282	}
286	283
287	284	p {
288	285	margin: 0.5em 0 1em;
289		- color: #666;
	286	+ color: var(--cs-color-text-muted);
290	287	}
291	288	}
292	289
293	290	.table-actions .button {
		@@ -307,9 +304,9 @@
307	304	}
308	305
309	306	td.column-name div {
310	307	font-size: 12px;
311		- color: #666;
	308	+ color: var(--cs-color-text-muted);
312	309	margin-block-start: 2px;
313	310	}
314	311
315	312	.column-type {
		@@ -317,18 +314,24 @@
317	314	text-align: center;
318	315
319	316	span {
320	317	background-color: #1d97c6;
321		- color: white;
	318	+ color: #fff;
322	319	padding: 3px 6px;
323	320	font-size: 10px;
324	321	text-transform: uppercase;
325		- border-radius: 3px;
	322	+ border-radius: 5px;
326	323
327		- @each $type, $color in $type-colors {
328		- @at-root .import-select-card .#{$type}-snippet & {
329		- background-color: $color;
330		- }
	324	+ @at-root .import-select-card .html-snippet .column-type span {
	325	+ background-color: #cd4510;
	326	+ }
	327	+
	328	+ @at-root .import-select-card .js-snippet .column-type span {
	329	+ background-color: #f7d67a;
	330	+ }
	331	+
	332	+ @at-root .import-select-card .css-snippet .column-type span {
	333	+ background-color: #9b59b6;
331	334	}
332	335	}
333	336	}
334	337