← All changes | resources/backend/css/settings.css +159 -8 3.3.3 → 3.4.3 View file →

		@@ -115,8 +115,13 @@
115	115	body.settings_page__wp_convertkit_settings .wrap .postbox p {
116	116	font-size: 14px;
117	117	}
118	118
	119	+body.settings_page__wp_convertkit_settings .wrap .postbox input,
	120	+body.settings_page__wp_convertkit_settings .wrap .postbox select {
	121	+ vertical-align: middle;
	122	+}
	123	+
119	124	body.settings_page__wp_convertkit_settings p.submit {
120	125	margin-bottom: 20px;
121	126	padding: 0;
122	127	}
		@@ -166,26 +171,27 @@
166	171	/**
167	172	* Beta Label
168	173	*/
169	174	body.settings_page__wp_convertkit_settings ul.convertkit-tabs li a span.convertkit-beta-label {
170		- background-color: #f0fff3;
	175	+ background-color: #f3e3f9;
171	176	border-radius: 9999px;
172		- color: #4ec776;
	177	+ color: #4a265a;
173	178	margin: 0 0 0 12px;
174		- padding: 1px 8px;
175		- font-weight: 400;
	179	+ padding: 3px 8px;
	180	+ font-weight: 600;
176	181	font-size: 12px;
177	182	}
178	183
179	184	body.settings_page__wp_convertkit_settings .wrap .postbox.convertkit-beta span.convertkit-beta-label {
180	185	display: inline-block;
181		- background-color: #f0fff3;
	186	+ background-color: #f3e3f9;
182	187	border-radius: 9999px;
183		- color: #4ec776;
	188	+ color: #4a265a;
184	189	border-width: 1px;
185		- margin: 7px 0 0 12px;
186		- padding: 1px 8px;
	190	+ margin: 4px 0 0 12px;
	191	+ padding: 4px 8px;
187	192	vertical-align: top;
	193	+ font-weight: 600;
188	194	font-size: 12px;
189	195	}
190	196
191	197	body.settings_page__wp_convertkit_settings .wrap .postbox.convertkit-beta > h2 {
		@@ -234,5 +240,150 @@
234	240
235	241	body.settings_page__wp_convertkit_settings .wrap .tablenav input.button {
236	242	height: 20px;
237	243	line-height: 20px;
	244	+}
	245	+
	246	+/**
	247	+ * Reusable UI components.
	248	+ *
	249	+ * These deliberately aren't scoped to a single administration screen, so that
	250	+ * they can be used on any of the Plugin's administration screens.
	251	+ */
	252	+
	253	+/**
	254	+ * Numbered Steps
	255	+ */
	256	+ol.kit-numbered-steps {
	257	+ margin: 0;
	258	+ padding: 0;
	259	+ list-style: none;
	260	+ counter-reset: kit-numbered-step;
	261	+}
	262	+
	263	+ol.kit-numbered-steps > li {
	264	+ position: relative;
	265	+ margin: 0 0 30px 0;
	266	+ padding: 0 0 0 44px;
	267	+ counter-increment: kit-numbered-step;
	268	+}
	269	+
	270	+ol.kit-numbered-steps > li::before {
	271	+ content: counter(kit-numbered-step);
	272	+ position: absolute;
	273	+ top: 0;
	274	+ left: 0;
	275	+ width: 28px;
	276	+ height: 28px;
	277	+ color: #fff;
	278	+ font-weight: 600;
	279	+ line-height: 28px;
	280	+ text-align: center;
	281	+ background-color: #144264;
	282	+ border-radius: 9999px;
	283	+}
	284	+
	285	+ol.kit-numbered-steps > li > h3 {
	286	+ margin: 0 0 8px 0;
	287	+ padding: 0;
	288	+ font-size: 15px;
	289	+ line-height: 28px;
	290	+}
	291	+
	292	+/**
	293	+ * Code Block
	294	+ */
	295	+.kit-code {
	296	+ position: relative;
	297	+ max-width: 800px;
	298	+ margin: 0 0 15px 0;
	299	+}
	300	+
	301	+.kit-code pre {
	302	+ margin: 0;
	303	+ padding: 15px 90px 15px 15px;
	304	+ overflow-x: auto;
	305	+ background-color: #f6f7f7;
	306	+ border: 1px solid #dcdcde;
	307	+ border-radius: 4px;
	308	+}
	309	+
	310	+/* WordPress styles inline <code> elements with their own background and spacing,
	311	+ which would otherwise display behind each line of a multi line code block. */
	312	+.kit-code pre code {
	313	+ display: block;
	314	+ margin: 0;
	315	+ padding: 0;
	316	+ font-size: 13px;
	317	+ line-height: 1.7;
	318	+ background: none;
	319	+ border-radius: 0;
	320	+}
	321	+
	322	+.kit-code button.kit-code-copy {
	323	+ position: absolute;
	324	+ top: 8px;
	325	+ right: 8px;
	326	+}
	327	+
	328	+/**
	329	+ * Inline Tabs
	330	+ */
	331	+.kit-inline-tabs ul.kit-inline-tabs-nav {
	332	+ display: flex;
	333	+ flex-wrap: wrap;
	334	+ margin: 0 0 20px 0;
	335	+ padding: 0;
	336	+ border-bottom: 1px solid #dcdcde;
	337	+}
	338	+
	339	+.kit-inline-tabs ul.kit-inline-tabs-nav li {
	340	+ margin: 0;
	341	+ padding: 0;
	342	+ list-style-type: none;
	343	+}
	344	+
	345	+.kit-inline-tabs ul.kit-inline-tabs-nav li button.kit-inline-tab {
	346	+ margin: 0 0 -1px 0;
	347	+ padding: 10px 16px;
	348	+ color: #565656;
	349	+ font-size: 14px;
	350	+ font-weight: 600;
	351	+ cursor: pointer;
	352	+ background: none;
	353	+ border: none;
	354	+ border-bottom: 2px solid transparent;
	355	+}
	356	+
	357	+.kit-inline-tabs ul.kit-inline-tabs-nav li button.kit-inline-tab:hover {
	358	+ color: #144264;
	359	+}
	360	+
	361	+.kit-inline-tabs ul.kit-inline-tabs-nav li button.kit-inline-tab.is-active {
	362	+ color: #144264;
	363	+ border-bottom-color: #144264;
	364	+}
	365	+
	366	+.kit-inline-tabs .kit-inline-tab-panel {
	367	+ display: none;
	368	+}
	369	+
	370	+.kit-inline-tabs .kit-inline-tab-panel.is-active {
	371	+ display: block;
	372	+}
	373	+
	374	+/**
	375	+ * MCP
	376	+ */
	377	+body.settings_page__wp_convertkit_settings .convertkit-mcp {
	378	+ margin-top: 20px;
	379	+}
	380	+
	381	+body.settings_page__wp_convertkit_settings .convertkit-mcp p code,
	382	+body.settings_page__wp_convertkit_settings .convertkit-mcp li code {
	383	+ margin: 0;
	384	+}
	385	+
	386	+body.settings_page__wp_convertkit_settings ul.convertkit-mcp-capabilities {
	387	+ margin: 0 0 15px 20px;
	388	+ list-style-type: disc;
238	389	}