← All changes | assets/css/setup-gateway-notice.css +52 -18 1.2.0 → 1.6.1 View file →

		@@ -1,20 +1,31 @@
1	1	/**
2		- * Styles for the SureDonation "configure a payment gateway" setup notice.
	2	+ * Styles for SureDonation's banner-style admin notices.
3	3	*
4		- * Every rule is scoped under #sd-setup-gateway (the notice wrapper rendered by
5		- * the BSF admin notices library). The id prefix is required, not cosmetic:
6		- * WordPress core styles the notice body with `.notice p` (specificity 0,1,1),
7		- * which would otherwise override plain single-class selectors here.
	4	+ * Shared by two notices that use the same banner layout:
	5	+ * - #sd-setup-gateway : "configure a payment gateway" (teal accent, artwork)
	6	+ * - #sd-test-mode : "switch to live mode" (amber accent, no art)
	7	+ *
	8	+ * Every rule is scoped under the notice wrapper id (rendered by the BSF admin
	9	+ * notices library). The id prefix is required, not cosmetic: WordPress core
	10	+ * styles the notice body with `.notice p` (specificity 0,1,1), which would
	11	+ * otherwise override plain single-class selectors here.
8	12	*/
9	13
10		-#sd-setup-gateway {
	14	+#sd-setup-gateway,
	15	+#sd-test-mode {
11	16	padding: 0;
12	17	border-left: 4px solid #148cb2;
13	18	background: #fff;
14	19	}
15	20
16		-#sd-setup-gateway .astra-notice-container {
	21	+/* Test-mode uses an amber accent to signal "no real payments are being taken". */
	22	+#sd-test-mode {
	23	+ border-left-color: #dba617;
	24	+}
	25	+
	26	+#sd-setup-gateway .astra-notice-container,
	27	+#sd-test-mode .astra-notice-container {
17	28	display: block;
18	29	padding: 0;
19	30	}
20	31
		@@ -20,21 +31,30 @@
20	31
21	32	/* The notice height is driven by the text content. Right padding reserves
22	33	space for the illustration, which is positioned absolutely so it never
23	34	adds vertical space around the text. */
24		-#sd-setup-gateway .sd-setup-notice {
	35	+#sd-setup-gateway .sd-setup-notice,
	36	+#sd-test-mode .sd-setup-notice {
25	37	position: relative;
26	38	padding: 22px 280px 22px 24px;
27	39	box-sizing: border-box;
28	40	}
29	41
30		-#sd-setup-gateway .sd-setup-notice__main {
	42	+/* No illustration (e.g. the test-mode notice) — reclaim the reserved space. */
	43	+#sd-setup-gateway .sd-setup-notice--no-art,
	44	+#sd-test-mode .sd-setup-notice--no-art {
	45	+ padding-right: 24px;
	46	+}
	47	+
	48	+#sd-setup-gateway .sd-setup-notice__main,
	49	+#sd-test-mode .sd-setup-notice__main {
31	50	display: flex;
32	51	align-items: flex-start;
33	52	gap: 14px;
34	53	}
35	54
36		-#sd-setup-gateway .sd-setup-notice__icon {
	55	+#sd-setup-gateway .sd-setup-notice__icon,
	56	+#sd-test-mode .sd-setup-notice__icon {
37	57	flex: 0 0 auto;
38	58	width: 28px;
39	59	height: 28px;
40	60	margin-top: 1px;
		@@ -39,14 +59,16 @@
39	59	height: 28px;
40	60	margin-top: 1px;
41	61	}
42	62
43		-#sd-setup-gateway .sd-setup-notice__body {
	63	+#sd-setup-gateway .sd-setup-notice__body,
	64	+#sd-test-mode .sd-setup-notice__body {
44	65	flex: 1 1 auto;
45	66	min-width: 0;
46	67	}
47	68
48		-#sd-setup-gateway .sd-setup-notice__title {
	69	+#sd-setup-gateway .sd-setup-notice__title,
	70	+#sd-test-mode .sd-setup-notice__title {
49	71	margin: 0 0 6px;
50	72	padding: 0;
51	73	font-size: 1.25rem;
52	74	font-weight: 600;
		@@ -53,9 +75,10 @@
53	75	line-height: 32px;
54	76	color: #1d2327;
55	77	}
56	78
57		-#sd-setup-gateway .sd-setup-notice__text {
	79	+#sd-setup-gateway .sd-setup-notice__text,
	80	+#sd-test-mode .sd-setup-notice__text {
58	81	margin: 0 0 16px;
59	82	padding: 0;
60	83	font-size: 1rem;
61	84	line-height: 24px;
		@@ -62,9 +85,11 @@
62	85	color: #3c434a;
63	86	}
64	87
65	88	#sd-setup-gateway .sd-setup-notice__button.button.button-primary,
66		-#sd-setup-gateway .sd-setup-notice__button.button.button-primary:focus {
	89	+#sd-setup-gateway .sd-setup-notice__button.button.button-primary:focus,
	90	+#sd-test-mode .sd-setup-notice__button.button.button-primary,
	91	+#sd-test-mode .sd-setup-notice__button.button.button-primary:focus {
67	92	display: inline-flex;
68	93	align-items: center;
69	94	height: auto;
70	95	min-height: 0;
		@@ -77,15 +102,17 @@
77	102	box-shadow: none;
78	103	text-shadow: none;
79	104	}
80	105
81		-#sd-setup-gateway .sd-setup-notice__button.button.button-primary:hover {
	106	+#sd-setup-gateway .sd-setup-notice__button.button.button-primary:hover,
	107	+#sd-test-mode .sd-setup-notice__button.button.button-primary:hover {
82	108	background: #0b5468;
83	109	border-color: #0b5468;
84	110	color: #fff;
85	111	}
86	112
87		-#sd-setup-gateway .sd-setup-notice__art {
	113	+#sd-setup-gateway .sd-setup-notice__art,
	114	+#sd-test-mode .sd-setup-notice__art {
88	115	position: absolute;
89	116	top: 50%;
90	117	right: 24px;
91	118	transform: translateY(-50%);
		@@ -95,12 +122,19 @@
95	122	max-width: 240px;
96	123	}
97	124
98	125	@media screen and (max-width: 782px) {
99		- #sd-setup-gateway .sd-setup-notice {
	126	+ #sd-setup-gateway .sd-setup-notice,
	127	+ #sd-test-mode .sd-setup-notice {
100	128	padding: 20px 44px 20px 20px;
101	129	}
102	130
103		- #sd-setup-gateway .sd-setup-notice__art {
	131	+ #sd-setup-gateway .sd-setup-notice--no-art,
	132	+ #sd-test-mode .sd-setup-notice--no-art {
	133	+ padding-right: 20px;
	134	+ }
	135	+
	136	+ #sd-setup-gateway .sd-setup-notice__art,
	137	+ #sd-test-mode .sd-setup-notice__art {
104	138	display: none;
105	139	}
106	140	}