← All changes | resources/backend/css/setup-wizard.css +54 -14 2.3.1 → 3.4.3 View file →

		@@ -1,5 +1,12 @@
1	1	/**
	2	+ * Body
	3	+ */
	4	+body.convertkit {
	5	+ background: #f9f7f4;
	6	+}
	7	+
	8	+/**
2	9	* Container
3	10	*/
4	11	#convertkit-setup-wizard {
5	12	max-width: 900px;
		@@ -5,8 +12,9 @@
5	12	max-width: 900px;
6	13	margin: 0 auto;
7	14	padding: 20px 0;
8	15	}
	16	+
9	17	#convertkit-setup-wizard .wrap {
10	18	margin: 10px 0;
11	19	}
12	20
		@@ -14,16 +22,17 @@
14	22	* Logo
15	23	*/
16	24	#convertkit-setup-wizard-header {
17	25	height: 80px;
18		- background: url(../images/convertkit-long.svg) center no-repeat;
19		- background-size: 200px auto;
	26	+ background: url(../images/kit-logo.svg) center no-repeat;
	27	+ background-size: 75px auto;
20	28	}
	29	+
21	30	#convertkit-setup-wizard-header h1 {
22	31	margin: 0;
23	32	padding: 0;
24	33	font-weight: 400;
25		- color: #D2D8DD;
	34	+ color: #d2d8dd;
26	35	text-indent: -9999px;
27	36	}
28	37
29	38	/**
		@@ -32,13 +41,15 @@
32	41	#convertkit-setup-wizard-progress {
33	42	text-align: center;
34	43	padding: 20px 0;
35	44	}
	45	+
36	46	#convertkit-setup-wizard-progress ol {
37	47	list-style: none;
38	48	margin: 0;
39	49	padding: 0;
40	50	}
	51	+
41	52	#convertkit-setup-wizard-progress li {
42	53	position: relative;
43	54	display: inline-block;
44	55	width: 135px;
		@@ -44,9 +55,10 @@
44	55	width: 135px;
45	56	text-align: center;
46	57	line-height: 3em;
47	58	}
48		-#convertkit-setup-wizard-progress li:after {
	59	+
	60	+#convertkit-setup-wizard-progress li::after {
49	61	position: absolute;
50	62	display: block;
51	63	z-index: 1;
52	64	top: -2px;
		@@ -55,9 +67,10 @@
55	67	width: 135px;
56	68	content: "";
57	69	background-color: #dfdfdf;
58	70	}
59		-#convertkit-setup-wizard-progress li:before {
	71	+
	72	+#convertkit-setup-wizard-progress li::before {
60	73	position: absolute;
61	74	z-index: 2;
62	75	top: -6px;
63	76	left: 65px;
		@@ -68,16 +81,19 @@
68	81	line-height: 1.2em;
69	82	content: " ";
70	83	background-color: #dfdfdf;
71	84	}
72		-#convertkit-setup-wizard-progress li:first-child:after {
	85	+
	86	+#convertkit-setup-wizard-progress li:first-child::after {
73	87	display: none;
74	88	}
	89	+
75	90	#convertkit-setup-wizard-progress li.done {
76	91	color: #1c9bd7;
77	92	}
78		-#convertkit-setup-wizard-progress li.done:after,
79		-#convertkit-setup-wizard-progress li.done:before {
	93	+
	94	+#convertkit-setup-wizard-progress li.done::after,
	95	+#convertkit-setup-wizard-progress li.done::before {
80	96	background-color: #1c9bd7;
81	97	}
82	98
83	99	/**
		@@ -101,22 +117,27 @@
101	117	*/
102	118	#convertkit-setup-wizard-content {
103	119	padding: 80px 80px 0 80px;
104	120	}
	121	+
105	122	#convertkit-setup-wizard-content h1 {
106	123	margin: 0 0 20px 0;
107	124	}
	125	+
108	126	#convertkit-setup-wizard-content hr {
109	127	margin: 40px 0 0 0;
110	128	padding: 0 0 40px 0;
111	129	border-bottom: none;
112	130	}
	131	+
113	132	#convertkit-setup-wizard-content p {
114	133	font-size: 16px;
115	134	}
	135	+
116	136	#convertkit-setup-wizard-content p.description {
117	137	font-size: 13px;
118	138	}
	139	+
119	140	#convertkit-setup-wizard-content a.button,
120	141	#convertkit-setup-wizard-content button,
121	142	#convertkit-setup-wizard-footer a.button,
122	143	#convertkit-setup-wizard-footer button {
		@@ -131,8 +152,13 @@
131	152	display: grid;
132	153	grid-template-columns: repeat(2, 1fr);
133	154	column-gap: 20px;
134	155	}
	156	+
	157	+#convertkit-setup-wizard-content > div {
	158	+ margin: 0 0 40px 0;
	159	+}
	160	+
135	161	#convertkit-setup-wizard-content .convertkit-setup-wizard-grid > div {
136	162	text-align: center;
137	163	padding: 20px;
138	164	background-color: #fcfcfc;
		@@ -139,11 +165,13 @@
139	165	border: 1px solid #ccc;
140	166	border-radius: 5px;
141	167	cursor: pointer;
142	168	}
	169	+
143	170	#convertkit-setup-wizard-content .convertkit-setup-wizard-grid > div span {
144	171	display: block;
145	172	}
	173	+
146	174	#convertkit-setup-wizard-content .convertkit-setup-wizard-grid > div span.description {
147	175	margin: 20px 0 0 0;
148	176	color: #646970;
149	177	font-size: 13px;
		@@ -148,11 +176,8 @@
148	176	color: #646970;
149	177	font-size: 13px;
150	178	}
151	179
152		-#convertkit-setup-wizard-content > div {
153		- margin: 0 0 40px 0;
154		-}
155	180	#convertkit-setup-wizard-content > div label {
156	181	display: block;
157	182	margin-bottom: 10px;
158	183	font-size: 16px;
		@@ -157,13 +182,15 @@
157	182	margin-bottom: 10px;
158	183	font-size: 16px;
159	184	font-weight: 500;
160	185	}
	186	+
161	187	#convertkit-setup-wizard-content .convertkit-setup-wizard-selection {
162	188	display: grid;
163	189	grid-template-columns: repeat(2, 1fr);
164	190	column-gap: 20px;
165	191	}
	192	+
166	193	#convertkit-setup-wizard-content .convertkit-setup-wizard-selection label {
167	194	text-align: center;
168	195	padding: 20px;
169	196	background-color: #fcfcfc;
		@@ -170,11 +197,13 @@
170	197	border: 1px solid #ccc;
171	198	border-radius: 5px;
172	199	cursor: pointer;
173	200	}
	201	+
174	202	#convertkit-setup-wizard-content .convertkit-setup-wizard-selection label span {
175	203	display: block;
176	204	}
	205	+
177	206	#convertkit-setup-wizard-content .convertkit-setup-wizard-selection label span.description {
178	207	margin: 20px 0 0 0;
179	208	color: #646970;
180	209	font-size: 13px;
		@@ -180,9 +209,10 @@
180	209	font-size: 13px;
181	210	font-weight: 400;
182	211	font-style: italic;
183	212	}
184		-#convertkit-setup-wizard-content .convertkit-setup-wizard-selection label input[type=radio] {
	213	+
	214	+#convertkit-setup-wizard-content .convertkit-setup-wizard-selection label input[type="radio"] {
185	215	margin: 20px 0 0 0;
186	216	}
187	217
188	218	/**
		@@ -189,16 +219,18 @@
189	219	* Footer
190	220	*/
191	221	#convertkit-setup-wizard-footer {
192	222	display: grid;
193		- grid-template-columns: repeat(2,1fr);
	223	+ grid-template-columns: repeat(2, 1fr);
194	224	grid-template-areas: "left right";
195	225	padding: 40px 80px;
196	226	}
	227	+
197	228	#convertkit-setup-wizard-footer .left {
198	229	grid-area: left;
199	230	text-align: left;
200	231	}
	232	+
201	233	#convertkit-setup-wizard-footer .right {
202	234	grid-area: right;
203	235	text-align: right;
204	236	}
		@@ -211,8 +243,9 @@
211	243	margin: 80px 0;
212	244	text-align: center;
213	245	font-size: 14px;
214	246	}
	247	+
215	248	#convertkit-setup-wizard-exit-link a {
216	249	color: #8c8f9a;
217	250	}
218	251
		@@ -218,9 +251,12 @@
218	251
219	252	/**
220	253	* Modal View
221	254	*/
222		-body.convertkit-modal { overflow: hidden; }
	255	+body.convertkit-modal {
	256	+ overflow: hidden;
	257	+}
	258	+
223	259	body.convertkit-modal #convertkit-setup-wizard {
224	260	width: 100%;
225	261	max-width: 100%;
226	262	margin: 0;
		@@ -225,16 +261,20 @@
225	261	max-width: 100%;
226	262	margin: 0;
227	263	padding: 0;
228	264	}
	265	+
229	266	body.convertkit-modal #convertkit-setup-wizard .wrap {
230	267	margin: 0;
231	268	}
	269	+
232	270	body.convertkit-modal #convertkit-setup-wizard-body {
233	271	box-shadow: none;
234	272	}
	273	+
235	274	body.convertkit-modal #convertkit-setup-wizard-content {
236	275	padding: 20px 20px 0 20px;
237	276	}
	277	+
238	278	body.convertkit-modal #convertkit-setup-wizard-footer {
239	279	padding: 0 20px 20px 20px;
240	280	}