← All changes | css/email_subscription.css +243 -74 8.6.0 → 8.7.7 View file →

		@@ -1,140 +1,309 @@
1		-/* css/email_subscription.css */
2		-.qchero_sliders_list_wrapper {
	1	+/* User Data — WPBot purple modern UI */
	2	+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
	3	+
	4	+/* WPBot design tokens — change colors here to theme the whole admin UI */
	5	+:root {
	6	+ --woobot-primary: #5B4E96;
	7	+ --woobot-primary-color: #5B4E96;
	8	+ --woobot-primary-dark: #463a7a;
	9	+ --woobot-primary-soft: #f3f1fa;
	10	+ --woobot-primary-border: #e4e0f2;
	11	+ --woobot-surface: #ffffff;
	12	+ --woobot-page-bg: #F5F7FD;
	13	+ --woobot-text: #2d2a3a;
	14	+ --woobot-muted: #6b6680;
	15	+ --woobot-danger: #e25563;
	16	+ --woobot-nav-muted: #988FBD;
	17	+ --woobot-primary-rgb: 91, 78, 150;
	18	+}
	19	+
	20	+.wpbot-userdata-page {
	21	+ --woobot-primary: #5B4E96;
	22	+ --woobot-primary-color: #5B4E96;
	23	+ --woobot-primary-dark: #463a7a;
	24	+ --woobot-primary-soft: #f3f1fa;
	25	+ --woobot-primary-border: #e4e0f2;
	26	+ --woobot-text: #2d2a3a;
	27	+ --woobot-muted: #6b6680;
	28	+ --woobot-danger: #e25563;
	29	+ background: transparent;
	30	+ padding: 0;
	31	+ margin: 20px auto 40px auto;
	32	+ max-width: 1280px;
	33	+ width: 100%;
	34	+ box-sizing: border-box;
	35	+ border-radius: 0;
	36	+ box-shadow: none;
	37	+ font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	38	+ color: var(--woobot-text);
	39	+}
	40	+
	41	+.wpbot-userdata-page .sld_menu_title {
3	42	background: #fff;
4		- padding: 20px;
5		- margin: 20px 20px 0 0;
6		- border-radius: 8px;
7		- box-shadow: 0 4px 15px rgba(0,0,0,0.05);
8		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	43	+ border: 1px solid var(--woobot-primary-border);
	44	+ border-radius: 16px;
	45	+ padding: 18px 22px;
	46	+ margin: 0 0 16px;
9	47	}
10	48
11		-.sld_menu_title h2 {
12		- font-size: 22px;
13		- font-weight: 600;
14		- color: #23282d;
15		- margin: 0 0 15px 0;
	49	+.wpbot-userdata-page .sld_menu_title h2 {
	50	+ font-size: 24px;
	51	+ font-weight: 700;
	52	+ color: var(--woobot-primary);
	53	+ margin: 0;
	54	+ line-height: 1.3;
16	55	}
17	56
18		-.sld_menu_title_align {
	57	+.wpbot-userdata-page .wpbot-userdata-toolbar {
19	58	display: flex;
20		- justify-content: space-between;
	59	+ justify-content: flex-end;
21	60	align-items: center;
22		- margin-bottom: 20px;
	61	+ flex-wrap: wrap;
	62	+ gap: 12px;
	63	+ background: #fff;
	64	+ border: 1px solid var(--woobot-primary-border);
	65	+ border-radius: 16px;
	66	+ padding: 14px 18px;
	67	+ margin: 0 0 16px;
23	68	font-size: 14px;
24		- color: #666;
	69	+ color: var(--woobot-muted);
25	70	}
26	71
27		-.sld_menu_title_align .button-primary {
28		- background: #007cba;
29		- border-color: #007cba;
30		- border-radius: 4px;
31		- padding: 4px 12px;
32		- color: #fff;
33		- text-decoration: none;
	72	+.wpbot-userdata-page .wpbot-userdata-actions {
	73	+ display: flex;
	74	+ align-items: center;
	75	+ flex-wrap: wrap;
	76	+ gap: 12px;
	77	+ margin: 0 0 16px;
	78	+}
	79	+
	80	+.wpbot-userdata-page .wpbot-userdata-total {
	81	+ display: inline-flex;
	82	+ align-items: center;
	83	+ gap: 6px;
	84	+ padding: 6px 12px;
	85	+ background: var(--woobot-primary-soft);
	86	+ border: 1px solid var(--woobot-primary-border);
	87	+ border-radius: 999px;
	88	+ color: var(--woobot-primary);
	89	+ font-size: 13px;
34	90	font-weight: 500;
35	91	}
36	92
37		-#wpbot_submit_email_form.button-primary {
38		- background: #d63638;
39		- border-color: #d63638;
40		- color: #fff;
41		- font-weight: 500;
42		- border-radius: 4px;
43		- padding: 6px 16px;
	93	+.wpbot-userdata-page .wpbot-userdata-total strong {
	94	+ font-weight: 700;
	95	+}
	96	+
	97	+.wpbot-userdata-page .wpbot-userdata-export.button-primary,
	98	+.wpbot-userdata-page .sld_menu_title_align .button-primary {
	99	+ background: var(--woobot-primary) !important;
	100	+ border: 2px solid var(--woobot-primary) !important;
	101	+ border-radius: 8px !important;
	102	+ padding: 8px 16px !important;
	103	+ color: #fff !important;
	104	+ text-decoration: none !important;
	105	+ font-weight: 600 !important;
	106	+ font-size: 13px !important;
	107	+ line-height: 1.2 !important;
	108	+ height: auto !important;
	109	+ box-shadow: none !important;
	110	+ transition: background 0.15s ease, border-color 0.15s ease;
	111	+}
	112	+
	113	+.wpbot-userdata-page .wpbot-userdata-export.button-primary:hover,
	114	+.wpbot-userdata-page .sld_menu_title_align .button-primary:hover {
	115	+ background: var(--woobot-primary-dark) !important;
	116	+ border-color: var(--woobot-primary-dark) !important;
	117	+ color: #fff !important;
	118	+}
	119	+
	120	+.wpbot-userdata-page .wpbot-userdata-form {
	121	+ width: 100%;
	122	+ background: #fff;
	123	+ border: 1px solid var(--woobot-primary-border);
	124	+ border-radius: 16px;
	125	+ padding: 18px 20px 20px;
	126	+ box-sizing: border-box;
	127	+}
	128	+
	129	+.wpbot-userdata-page #wpbot_submit_email_form.button-primary {
	130	+ background: #fff !important;
	131	+ border: 2px solid var(--woobot-danger) !important;
	132	+ color: var(--woobot-danger) !important;
	133	+ font-weight: 600 !important;
	134	+ border-radius: 8px !important;
	135	+ padding: 8px 18px !important;
44	136	cursor: pointer;
45		- margin-bottom: 15px;
46		- transition: background 0.2s ease;
47		- border: 1px solid transparent;
	137	+ margin: 0;
	138	+ height: auto !important;
	139	+ line-height: 1.2 !important;
	140	+ box-shadow: none !important;
	141	+ transition: background 0.15s ease, color 0.15s ease;
48	142	}
49		-#wpbot_submit_email_form.button-primary:hover {
50		- background: #b32d2f;
51		- border-color: #b32d2f;
	143	+
	144	+.wpbot-userdata-page #wpbot_submit_email_form.button-primary:hover {
	145	+ background: var(--woobot-danger) !important;
	146	+ border-color: var(--woobot-danger) !important;
	147	+ color: #fff !important;
52	148	}
53	149
54		-.qchero_slider_table_area {
55		- margin-top: 15px;
56		- border: 1px solid #e5e5e5;
57		- border-radius: 6px;
	150	+.wpbot-userdata-page .qchero_slider_table_area {
	151	+ margin-top: 0;
	152	+ border: 1px solid var(--woobot-primary-border);
	153	+ border-radius: 12px;
58	154	overflow: hidden;
59	155	}
60	156
61		-.sld_payment_table {
	157	+.wpbot-userdata-page .sld_payment_table {
62	158	display: flex;
63	159	flex-direction: column;
64	160	width: 100%;
65	161	}
66	162
67		-.sld_payment_row {
	163	+.wpbot-userdata-page .sld_payment_row {
68	164	display: flex;
69	165	align-items: center;
70		- border-bottom: 1px solid #f0f0f0;
	166	+ border-bottom: 1px solid #eef0f6;
71	167	background: #fff;
72	168	transition: background 0.15s ease;
73	169	}
74	170
75		-.sld_payment_row:hover {
76		- background: #fafafa;
	171	+.wpbot-userdata-page .sld_payment_row:last-child {
	172	+ border-bottom: none;
77	173	}
78	174
79		-.sld_payment_row.header {
80		- background: #f9f9f9;
81		- border-bottom: 2px solid #e5e5e5;
	175	+.wpbot-userdata-page .sld_payment_row:hover {
	176	+ background: var(--woobot-primary-soft);
	177	+}
	178	+
	179	+.wpbot-userdata-page .sld_payment_row.header {
	180	+ background: var(--woobot-primary);
	181	+ border-bottom: none;
82	182	font-weight: 600;
83		- color: #32373c;
	183	+ color: #fff;
84	184	}
85	185
86		-.sld_payment_row.header:hover {
87		- background: #f9f9f9;
	186	+.wpbot-userdata-page .sld_payment_row.header:hover {
	187	+ background: var(--woobot-primary);
88	188	}
89	189
90		-.sld_payment_cell {
91		- padding: 12px 15px;
	190	+.wpbot-userdata-page .sld_payment_row.header .sld_payment_cell {
	191	+ color: #fff;
	192	+ font-size: 13px;
	193	+ letter-spacing: 0.02em;
	194	+}
	195	+
	196	+.wpbot-userdata-page .sld_payment_cell {
	197	+ padding: 14px 16px;
92	198	flex: 1;
93	199	font-size: 13px;
94		- color: #555d66;
	200	+ color: var(--woobot-text);
95	201	word-break: break-word;
96	202	display: flex;
97	203	align-items: center;
98	204	}
99	205
100		-/* Specific column sizes */
101		-.sld_payment_cell:first-child {
102		- flex: 0 0 50px;
	206	+.wpbot-userdata-page .sld_payment_cell:first-child {
	207	+ flex: 0 0 56px;
103	208	justify-content: center;
104	209	padding-right: 0;
105	210	}
106	211
107		-.sld_payment_cell:nth-child(2) {
108		- flex: 0 0 120px; /* Date column width */
	212	+.wpbot-userdata-page .sld_payment_cell:nth-child(2) {
	213	+ flex: 0 0 140px;
109	214	}
110	215
111		-.sld_payment_cell input[type="checkbox"] {
	216	+.wpbot-userdata-page .sld_payment_cell input[type="checkbox"] {
112	217	margin: 0;
113	218	cursor: pointer;
	219	+ width: 16px;
	220	+ height: 16px;
	221	+ accent-color: var(--woobot-primary);
114	222	}
115	223
116		-.sld_responsive_head {
	224	+.wpbot-userdata-page .sld_payment_row.header input[type="checkbox"] {
	225	+ accent-color: #fff;
	226	+}
	227	+
	228	+.wpbot-userdata-page .sld_responsive_head {
117	229	display: none;
118	230	}
119	231
120		-/* Pagination Styling */
121		-.wpbot_pagination {
122		- margin-right: 10px;
123		- font-weight: 500;
	232	+/* Pagination */
	233	+.wpbot-userdata-page .wpbot_pagination {
	234	+ margin-right: 8px;
	235	+ font-weight: 600;
	236	+ color: var(--woobot-muted);
	237	+ font-size: 13px;
124	238	}
125	239
126		-.page-numbers {
	240	+.wpbot-userdata-page .page-numbers {
	241	+ display: inline-flex;
	242	+ align-items: center;
	243	+ justify-content: center;
	244	+ min-width: 34px;
	245	+ height: 34px;
	246	+ padding: 0 10px;
	247	+ margin: 0 2px;
	248	+ border-radius: 8px;
	249	+ border: 1px solid var(--woobot-primary-border);
127	250	background: #fff;
128		- border: 1px solid #ccc;
129		- padding: 3px 8px;
	251	+ color: var(--woobot-primary);
	252	+ font-size: 13px;
	253	+ font-weight: 600;
130	254	text-decoration: none;
131		- margin: 0 2px;
132		- border-radius: 3px;
133		- color: #007cba;
	255	+ line-height: 1;
	256	+ box-sizing: border-box;
	257	+ transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
134	258	}
135	259
136		-.page-numbers.current {
137		- background: #007cba;
	260	+.wpbot-userdata-page a.page-numbers:hover {
	261	+ background: var(--woobot-primary-soft);
	262	+ border-color: var(--woobot-primary);
	263	+ color: var(--woobot-primary-dark);
	264	+}
	265	+
	266	+.wpbot-userdata-page span.page-numbers.current {
	267	+ background: var(--woobot-primary);
138	268	color: #fff;
139		- border-color: #007cba;
	269	+ border-color: var(--woobot-primary);
	270	+}
	271	+
	272	+@media screen and (max-width: 782px) {
	273	+ .wpbot-userdata-page {
	274	+ margin: 12px auto 24px auto;
	275	+ }
	276	+
	277	+ .wpbot-userdata-page .wpbot-userdata-actions {
	278	+ width: 100%;
	279	+ }
	280	+
	281	+ .wpbot-userdata-page .wpbot-userdata-toolbar,
	282	+ .wpbot-userdata-page .sld_menu_title,
	283	+ .wpbot-userdata-page .wpbot-userdata-form {
	284	+ border-radius: 12px;
	285	+ }
	286	+
	287	+ .wpbot-userdata-page .sld_payment_row {
	288	+ flex-wrap: wrap;
	289	+ }
	290	+
	291	+ .wpbot-userdata-page .sld_payment_cell {
	292	+ flex: 1 1 45%;
	293	+ }
	294	+
	295	+ .wpbot-userdata-page .sld_payment_cell:first-child {
	296	+ flex: 0 0 100%;
	297	+ justify-content: flex-start;
	298	+ padding: 12px 16px 4px;
	299	+ }
	300	+
	301	+ .wpbot-userdata-page .sld_responsive_head {
	302	+ display: block;
	303	+ font-size: 11px;
	304	+ font-weight: 600;
	305	+ color: var(--woobot-muted);
	306	+ margin-right: 8px;
	307	+ text-transform: uppercase;
	308	+ }
140	309	}