← All changes | app/Views/emails/common-style.php +62 -123 1.11 → 2.2.0 View file →

		@@ -1,128 +1,67 @@
	1	+<?php if (!defined('ABSPATH')) exit; // if accessed directly exit ?>
	2	+<?php
	3	+/*
	4	+ * Shared email styles.
	5	+ *
	6	+ * Light colors live inline on every element so clients that drop <style> still render the
	7	+ * light design. This block only adds what inline styles cannot: resets, the narrow-screen
	8	+ * layout, URL wrapping (stripped from inline styles by wp_kses_post) and the dark scheme.
	9	+ *
	10	+ * Dark scheme: Apple Mail / iOS / Outlook for Mac read prefers-color-scheme, Outlook.com
	11	+ * marks its dark mode with [data-ogsc]. Gmail ignores both and inverts on its own, which is
	12	+ * why the light palette avoids pure black on white.
	13	+ */
	14	+?>
1	15	<style>
2		- * {
3		- box-sizing: border-box;
4		- margin: 0;
5		- padding: 0;
6		- background: #F6F8FB;
	16	+ :root { color-scheme: light dark; supported-color-schemes: light dark; }
	17	+ body { margin: 0; padding: 0; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
	18	+ table { border-collapse: collapse; }
	19	+ img { border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
	20	+ p { margin: 0; }
	21	+ a { color: #335CFF; }
	22	+ .fbs_email_comment_body p { margin: 0 0 8px; }
	23	+ .fbs_email_comment_body p:last-child { margin-bottom: 0; }
	24	+ .fbs_email_comment_body img { max-width: 100%; height: auto; }
	25	+ .fbs_email_url { word-break: break-all; overflow-wrap: anywhere; }
	26	+
	27	+ @media only screen and (max-width: 480px) {
	28	+ .fbs_email_outer { padding: 24px 12px !important; }
	29	+ .fbs_email_card_pad { padding: 20px !important; }
	30	+ .fbs_email_heading { font-size: 20px !important; line-height: 28px !important; }
	31	+ .fbs_email_kv_label { width: 80px !important; }
7	32	}
8		- .fbs_email_notification{
9		- padding: 40px 0px 0px 0px;
10		- align-items: center;
11		- gap: 10px;
12		- align-self: stretch;
13		- }
14		- .fbs_email_notification_top{
15		- align-items: center;
16		- margin-bottom: 30px;
17		- }
18		- .fbs_email_notification_head{
19		- text-align: center;
20		- margin-bottom: 30px;
21		- }
22		- .fbs_head_text{
23		- color: #170F49;
24		- font-size: 20px;
25		- font-style: normal;
26		- font-weight: 700;
27		- line-height: 1.2;
28		- }
29		- .fbs_email_notification_contents{
30		- padding: 30px;
31		- border-radius: 8px;
32		- background: #FFF;
33		- width: 60%;
34		- margin: auto;
35		- }
36		- .fbs_email_content{
37		- display: flex;
38		- background: #FFF;
39		- }
40		- .fbs_email_content_left{
41		- background: #FFF;
42		- }
43		- .fbs-avatar{
44		- width: 45px;
45		- height: 45px;
46		- border-radius: 50px;
47		- }
48		- .fbs_email_content_right{
49		- background: #FFF;
50		- width: 100%;
51		- margin-left: 10px;
52		- }
53		- .fbs_user_name{
54		- color: #1A1D1F;
55		- font-size: 15px;
56		- font-style: normal;
57		- font-weight: 600;
58		- line-height: 22px;
59		- background: #FFF;
60		- }
61		- .fbs_email_details{
62		- color: #565865;
63		- font-size: 14px;
64		- font-style: normal;
65		- font-weight: 400;
66		- line-height: 20px;
67		- background: #FFF;
68		- }
69		- .fbs_email_comment{
70		- color: #2F3448;
71		- font-size: 15px;
72		- font-style: normal;
73		- font-weight: 500;
74		- line-height: 24px;
75		- margin-top: 10px;
76		- padding: 3px 10px;
77		- }
78		- .fbs_email_notification_bottom{
79		- text-align: center;
80		- margin-top: 30px;
81		- }
82		- .fbs_bottom_text_small{
83		- color: #2F3448;
84		- font-size: 14px;
85		- font-style: normal;
86		- font-weight: 400;
87		- line-height: 20px;
88		- }
89		- .fbs_bottom_text{
90		- color: #2F3448;
91		- text-align: center;
92		- font-size: 20px;
93		- font-style: normal;
94		- font-weight: 600;
95		- line-height: 28px; /* 140% */
96		- }
97		- .fbs_email_notification_footer{
98		- display: flex;
99		- height: 100%;
100		- padding: 30px 0;
101		- align-items: flex-start;
102		- gap: 8px;
103		- align-self: stretch;
104		- background: #FFF;
105		- }
106		- .fbs_email_footer_text{
107		- color: #2F3448;
108		- font-size: 16px;
109		- font-style: normal;
110		- font-weight: 500;
111		- line-height: 22px;
112		- margin: auto;
113		- }
114	33
115		- @media (max-width: 600px) {
116		- .fbs_email_content {
117		- display: block;
118		- }
119		- .fbs_email_content_right {
120		- margin-left: 0;
121		- margin-top: 10px;
122		- }
123		- .fbs_email_notification_contents {
124		- width: 90%;
125		- }
	34	+ @media (prefers-color-scheme: dark) {
	35	+ .fbs_email_body, .fbs_email_outer { background: #151D26 !important; }
	36	+ .fbs_email_card { background: #1C2732 !important; border-color: #2C3C4E !important; }
	37	+ .fbs_email_text { color: #F5F7FA !important; }
	38	+ .fbs_email_text2 { color: #99A0AE !important; }
	39	+ .fbs_email_link { color: #7C97FF !important; }
	40	+ .fbs_email_border { border-color: #2C3C4E !important; }
	41	+ .fbs_email_inset { background: #222F3D !important; border-color: #2C3C4E !important; }
	42	+ .fbs_email_btn { background: #F5F7FA !important; color: #0E121B !important; }
	43	+ .fbs_email_btn_secondary { color: #F5F7FA !important; border-color: #2C3C4E !important; }
	44	+ .fbs_email_logo_tile { background: #F5F7FA !important; color: #0E121B !important; }
	45	+ .fbs_email_pill_accent { background: #1C254D !important; color: #A9BBFF !important; }
	46	+ .fbs_email_pill_neutral { background: #26323F !important; color: #CACFD8 !important; }
	47	+ .fbs_email_pill_warn { background: #3B2E12 !important; color: #FFD268 !important; }
	48	+ .fbs_email_pill_ok { background: #163828 !important; color: #3EE089 !important; }
	49	+ .fbs_email_warn_text { color: #FFD268 !important; }
126	50	}
127	51
128		-</style>
	52	+ [data-ogsc] .fbs_email_body, [data-ogsc] .fbs_email_outer { background: #151D26 !important; }
	53	+ [data-ogsc] .fbs_email_card { background: #1C2732 !important; border-color: #2C3C4E !important; }
	54	+ [data-ogsc] .fbs_email_text { color: #F5F7FA !important; }
	55	+ [data-ogsc] .fbs_email_text2 { color: #99A0AE !important; }
	56	+ [data-ogsc] .fbs_email_link { color: #7C97FF !important; }
	57	+ [data-ogsc] .fbs_email_border { border-color: #2C3C4E !important; }
	58	+ [data-ogsc] .fbs_email_inset { background: #222F3D !important; border-color: #2C3C4E !important; }
	59	+ [data-ogsc] .fbs_email_btn { background: #F5F7FA !important; color: #0E121B !important; }
	60	+ [data-ogsc] .fbs_email_btn_secondary { color: #F5F7FA !important; border-color: #2C3C4E !important; }
	61	+ [data-ogsc] .fbs_email_logo_tile { background: #F5F7FA !important; color: #0E121B !important; }
	62	+ [data-ogsc] .fbs_email_pill_accent { background: #1C254D !important; color: #A9BBFF !important; }
	63	+ [data-ogsc] .fbs_email_pill_neutral { background: #26323F !important; color: #CACFD8 !important; }
	64	+ [data-ogsc] .fbs_email_pill_warn { background: #3B2E12 !important; color: #FFD268 !important; }
	65	+ [data-ogsc] .fbs_email_pill_ok { background: #163828 !important; color: #3EE089 !important; }
	66	+ [data-ogsc] .fbs_email_warn_text { color: #FFD268 !important; }
	67	+</style>