← All changes | resources/backend/css/settings.css +271 -46 2.2.6 → 3.4.3 View file →

		@@ -1,10 +1,11 @@
1	1	/**
2		- * Settings > ConvertKit
	2	+ * Settings > Kit
3	3	*/
4	4	body.settings_page__wp_convertkit_settings {
5		- background: #f6f8fa;
	5	+ background: #f9f7f4;
6	6	}
	7	+
7	8	body.settings_page__wp_convertkit_settings #wpcontent {
8	9	padding-left: 0;
9	10	}
10	11
		@@ -11,20 +12,34 @@
11	12	/**
12	13	* Header
13	14	*/
14	15	body.settings_page__wp_convertkit_settings header {
15		- padding: 40px 20px;
16		- background: url(../images/convertkit-long-inverted.svg) 20px 50% no-repeat;
17		- background-size: 200px auto;
18		- background-color: #212f4f;
	16	+ height: 98px;
	17	+ padding: 0 20px;
	18	+ background: url(../images/kit-logo.svg) 30px 50% no-repeat;
	19	+ background-size: 75px auto;
	20	+ background-color: #fff;
19	21	}
	22	+
20	23	body.settings_page__wp_convertkit_settings h1 {
21	24	margin: 0;
22	25	padding: 0;
23	26	font-weight: 400;
24		- color: #D2D8DD;
	27	+ color: #d2d8dd;
25	28	text-indent: -9999px;
26	29	}
	30	+
	31	+body.settings_page__wp_convertkit_settings header a.convertkit-docs {
	32	+ float: right;
	33	+ margin: 20px 20px 0 0;
	34	+ padding: 0 0 0 30px;
	35	+ font-weight: 400;
	36	+ color: #144264;
	37	+ text-decoration: none;
	38	+ background: url(../images/help.svg) 0 0% no-repeat;
	39	+ background-size: 20px 20px;
	40	+}
	41	+
27	42	body.settings_page__wp_convertkit_settings .wrap {
28	43	margin-left: 20px;
29	44	}
30	45
		@@ -41,10 +56,11 @@
41	56	ul.convertkit-tabs {
42	57	margin: 0 0 25px 0;
43	58	padding: 0;
44	59	list-style-type: none;
45		- border-bottom: 1px solid #cfd4d9;
	60	+ border-bottom: 1px solid #d0d0cf;
46	61	}
	62	+
47	63	ul.convertkit-tabs li {
48	64	display: inline-block;
49	65	margin: 0;
50	66	padding: 0;
		@@ -51,14 +67,9 @@
51	67	height: 64px;
52	68	line-height: 64px;
53	69	list-style-type: none;
54	70	}
55		-ul.convertkit-tabs li.convertkit-docs {
56		- float: right;
57		-}
58		-ul.convertkit-tabs li.convertkit-docs a span.dashicons {
59		- vertical-align: middle;
60		-}
	71	+
61	72	ul.convertkit-tabs li a {
62	73	display: inline-block;
63	74	padding: 0 20px;
64	75	height: 64px;
		@@ -64,23 +75,21 @@
64	75	height: 64px;
65	76	line-height: 64px;
66	77	text-decoration: none;
67	78	font-size: 14px;
68		- font-weight: bold;
69		- color: #6a6e72;
	79	+ font-weight: 600;
	80	+ color: #565656;
70	81	}
	82	+
71	83	ul.convertkit-tabs li a:hover {
72		- color: #373f45;
	84	+ color: #144264;
73	85	background: #e7e7e7;
74	86	}
	87	+
75	88	ul.convertkit-tabs li a.convertkit-tab-active {
76		- color: #fb6068;
77		- border-bottom: 1px solid #fb6068;
	89	+ color: #144264;
	90	+ border-bottom: 1px solid #4c596d;
78	91	}
79		-ul.convertkit-tabs li a.convertkit-tab-active:hover {
80		- color: #d3434a;
81		- border-bottom: 1px solid #d3434a;
82		-}
83	92
84	93	/**
85	94	* Section
86	95	*/
		@@ -85,47 +94,76 @@
85	94	* Section
86	95	*/
87	96	body.settings_page__wp_convertkit_settings .wrap .postbox {
88	97	background: #fff;
89		- box-shadow: 0 2px 5px #0000000d;
90		- color: #373f45;
	98	+ color: #6e6e6e;
91	99	margin: 0 0 30px 0;
92	100	padding: 40px 30px 30px 30px;
93	101	font-size: 14px;
94		- border: 1px solid #EDF2F4;
	102	+ border-radius: 8px;
	103	+ border: none;
95	104	}
	105	+
96	106	body.settings_page__wp_convertkit_settings .wrap .postbox h2 {
97	107	margin: 0 0 30px 0;
98	108	padding: 0 0 30px 0;
99	109	font-size: 24px;
100	110	font-weight: 600;
101		- border-bottom: 1px solid #EDF2F4;
	111	+ border-bottom: 1px solid #e3e3e3;
	112	+ color: #3d3d3d;
102	113	}
	114	+
103	115	body.settings_page__wp_convertkit_settings .wrap .postbox p {
104	116	font-size: 14px;
105	117	}
106		-body.settings_page__wp_convertkit_settings .wrap .postbox p.submit {
	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	+
	124	+body.settings_page__wp_convertkit_settings p.submit {
	125	+ margin-bottom: 20px;
107	126	padding: 0;
108	127	}
109		-body.settings_page__wp_convertkit_settings .wrap .postbox .button {
110		- margin: 0 5px 0 0;
111		- padding: 4px 12px;
	128	+
	129	+body.settings_page__wp_convertkit_settings .button {
	130	+ margin: 0 5px 0 0;
	131	+ padding: 0 12px;
112	132	font-size: 14px;
	133	+ border-radius: 10px;
113	134
	135	+ /* Required for WordPress 7.0 styling */
	136	+ line-height: 2.8;
	137	+
114	138	/* Required for WordPress 5.x styling */
115	139	height: auto;
116	140	text-shadow: none;
117	141	box-shadow: none;
118	142	}
119		-body.settings_page__wp_convertkit_settings .wrap .postbox .button-primary {
120		- background: #fb6970;
121		- border-color: #fb6970;
	143	+
	144	+body.settings_page__wp_convertkit_settings .button-primary {
	145	+ background: #1e1e1e;
	146	+ border-color: #1e1e1e;
122	147	color: #fff;
123	148	}
124		-body.settings_page__wp_convertkit_settings .wrap .postbox .button-primary:hover {
125		- background: #fb5058;
126		- border-color: #fb5058;
	149	+
	150	+body.settings_page__wp_convertkit_settings .button-primary:hover {
	151	+ background: #3d3d3d;
	152	+ border-color: #3d3d3d;
127	153	}
	154	+
	155	+body.settings_page__wp_convertkit_settings .button-secondary {
	156	+ background: #f0f0f0;
	157	+ border-color: #f0f0f0;
	158	+ color: #3d3d3d;
	159	+}
	160	+
	161	+body.settings_page__wp_convertkit_settings .button-secondary:hover {
	162	+ background: #ddd;
	163	+ border-color: #ddd;
	164	+}
	165	+
128	166	body.settings_page__wp_convertkit_settings .wrap .postbox textarea.convertkit-monospace {
129	167	font-family: monospace;
130	168	padding: 20px;
131	169	}
		@@ -133,25 +171,30 @@
133	171	/**
134	172	* Beta Label
135	173	*/
136	174	body.settings_page__wp_convertkit_settings ul.convertkit-tabs li a span.convertkit-beta-label {
137		- background-color: #edf2f4;
	175	+ background-color: #f3e3f9;
138	176	border-radius: 9999px;
139		- color: #000;
	177	+ color: #4a265a;
140	178	margin: 0 0 0 12px;
141		- padding: 5px 12px;
142		- font-weight: 400;
143		- font-size: 13px;
	179	+ padding: 3px 8px;
	180	+ font-weight: 600;
	181	+ font-size: 12px;
144	182	}
	183	+
145	184	body.settings_page__wp_convertkit_settings .wrap .postbox.convertkit-beta span.convertkit-beta-label {
146	185	display: inline-block;
147		- background-color: #f6f8fa;
	186	+ background-color: #f3e3f9;
148	187	border-radius: 9999px;
	188	+ color: #4a265a;
149	189	border-width: 1px;
150		- margin: 0 0 0 12px;
151		- padding: 8px 12px;
	190	+ margin: 4px 0 0 12px;
	191	+ padding: 4px 8px;
152	192	vertical-align: top;
	193	+ font-weight: 600;
	194	+ font-size: 12px;
153	195	}
	196	+
154	197	body.settings_page__wp_convertkit_settings .wrap .postbox.convertkit-beta > h2 {
155	198	display: inline-block;
156	199	margin: 0;
157	200	padding: 0;
		@@ -156,9 +199,191 @@
156	199	margin: 0;
157	200	padding: 0;
158	201	border: none;
159	202	}
	203	+
160	204	body.settings_page__wp_convertkit_settings .wrap .postbox.convertkit-beta > p.description {
161	205	margin-top: 30px;
162	206	padding-top: 30px;
163		- border-top: 1px solid #EDF2F4;
	207	+ border-top: 1px solid #e3e3e3;
	208	+}
	209	+
	210	+/**
	211	+ * Screen Options
	212	+ */
	213	+body.settings_page__wp_convertkit_settings #screen-meta-links {
	214	+ position: absolute;
	215	+ right: 0;
	216	+}
	217	+
	218	+/**
	219	+ * WP_List_Table Search
	220	+ */
	221	+body.settings_page__wp_convertkit_settings .wrap .subtitle.left {
	222	+ margin: 11px 0;
	223	+ display: flex;
	224	+ float: left;
	225	+ padding-left: 0;
	226	+ line-height: 40px;
	227	+ font-style: italic;
	228	+}
	229	+
	230	+body.settings_page__wp_convertkit_settings .wrap .search-box input[type="search"] {
	231	+ min-height: 40px;
	232	+}
	233	+
	234	+/**
	235	+ * WP_List_Table Bulk Actions
	236	+ */
	237	+body.settings_page__wp_convertkit_settings .wrap .tablenav.top {
	238	+ margin-bottom: 10px;
	239	+}
	240	+
	241	+body.settings_page__wp_convertkit_settings .wrap .tablenav input.button {
	242	+ height: 20px;
	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;
164	389	}