← All changes | app/Views/emails/common-style.php +61 -168 1.30 → 2.2.0 View file →

		@@ -1,174 +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;
7		- }
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_invite_error{
70		- margin-top: 10px;
71		- }
72		- .fbs_email_comment{
73		- color: #2F3448;
74		- font-size: 15px;
75		- font-style: normal;
76		- font-weight: 500;
77		- line-height: 24px;
78		- margin-top: 10px;
79		- padding: 3px 10px;
80		- }
81		- .fbs_email_notification_bottom{
82		- text-align: center;
83		- margin-top: 30px;
84		- }
85		- .fbs_bottom_text_small{
86		- color: #2F3448;
87		- font-size: 14px;
88		- font-style: normal;
89		- font-weight: 400;
90		- line-height: 20px;
91		- }
92		- .fbs_bottom_text{
93		- color: #2F3448;
94		- text-align: center;
95		- font-size: 20px;
96		- font-style: normal;
97		- font-weight: 600;
98		- line-height: 28px; /* 140% */
99		- }
100		- .fbs_email_notification_footer{
101		- display: flex;
102		- height: 100%;
103		- padding: 30px 0;
104		- align-items: flex-start;
105		- gap: 8px;
106		- align-self: stretch;
107		- background: #FFF;
108		- }
109		- .fbs_email_footer_text{
110		- color: #2F3448;
111		- font-size: 16px;
112		- font-style: normal;
113		- font-weight: 500;
114		- line-height: 22px;
115		- margin: auto;
116		- }
117		- .fbs_invitation_button{
118		- background: #6268F1FF;
119		- color: #FFF;
120		- font-size: 16px;
121		- font-weight: 600;
122		- line-height: 22px;
123		- padding: 10px 20px;
124		- border-radius: 8px;
125		- text-align: center;
126		- text-decoration: none;
127		- margin-top: 10px;
128		- width: 32%;
129		- }
	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; }
130	26
131		- .fbs_daily_reminder {
132		- margin: 0 auto;
133		- display:block;
134		- background: #FFF;
135		- border-radius: 8px;
	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; }
136	32	}
137		- .fbs_email_greeting {
138		- background-color: #ffffff;
139		- margin-bottom: 20px;
140		- font-size: 15px;
141		- }
142		- .fbs_email_task_list_group {
143		- background-color: #ffffff;
144		- margin-bottom: 20px;
145		- width: 100%;
146		- margin-top: 10px;
147		- gap: 10px;
148		- }
149		- .fbs_email_task_list_item {
150		- color: #2F3448;
151		- margin-bottom: 5px;
152		- border-radius: 8px;
153		- padding: 10px;
154		- text-decoration: none;
155		- list-style: none;
156		- }
157		- .fbs_bg_white {
158		- background-color: #ffffff !important;
159		- }
160	33
161		- @media (max-width: 600px) {
162		- .fbs_email_content {
163		- display: block;
164		- }
165		- .fbs_email_content_right {
166		- margin-left: 0;
167		- margin-top: 10px;
168		- }
169		- .fbs_email_notification_contents {
170		- width: 90%;
171		- }
	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; }
172	50	}
173	51
174		-</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>