diff options
Diffstat (limited to 'server/lib/emails/common/base.pug')
-rw-r--r-- | server/lib/emails/common/base.pug | 267 |
1 files changed, 267 insertions, 0 deletions
diff --git a/server/lib/emails/common/base.pug b/server/lib/emails/common/base.pug new file mode 100644 index 000000000..9a1894cab --- /dev/null +++ b/server/lib/emails/common/base.pug | |||
@@ -0,0 +1,267 @@ | |||
1 | //- | ||
2 | The email background color is defined in three places: | ||
3 | 1. body tag: for most email clients | ||
4 | 2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr | ||
5 | 3. mso conditional: For Windows 10 Mail | ||
6 | - var backgroundColor = "#fff"; | ||
7 | - var mainColor = "#f2690d"; | ||
8 | doctype html | ||
9 | head | ||
10 | // This template is heavily adapted from the Cerberus Fluid template. Kudos to them! | ||
11 | meta(charset='utf-8') | ||
12 | //- utf-8 works for most cases | ||
13 | meta(name='viewport' content='width=device-width') | ||
14 | //- Forcing initial-scale shouldn't be necessary | ||
15 | meta(http-equiv='X-UA-Compatible' content='IE=edge') | ||
16 | //- Use the latest (edge) version of IE rendering engine | ||
17 | meta(name='x-apple-disable-message-reformatting') | ||
18 | //- Disable auto-scale in iOS 10 Mail entirely | ||
19 | meta(name='format-detection' content='telephone=no,address=no,email=no,date=no,url=no') | ||
20 | //- Tell iOS not to automatically link certain text strings. | ||
21 | meta(name='color-scheme' content='light') | ||
22 | meta(name='supported-color-schemes' content='light') | ||
23 | //- The title tag shows in email notifications, like Android 4.4. | ||
24 | title #{subject} | ||
25 | //- What it does: Makes background images in 72ppi Outlook render at correct size. | ||
26 | //if gte mso 9 | ||
27 | xml | ||
28 | o:officedocumentsettings | ||
29 | o:allowpng | ||
30 | o:pixelsperinch 96 | ||
31 | //- CSS Reset : BEGIN | ||
32 | style. | ||
33 | /* What it does: Tells the email client that only light styles are provided but the client can transform them to dark. A duplicate of meta color-scheme meta tag above. */ | ||
34 | :root { | ||
35 | color-scheme: light; | ||
36 | supported-color-schemes: light; | ||
37 | } | ||
38 | /* What it does: Remove spaces around the email design added by some email clients. */ | ||
39 | /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */ | ||
40 | html, | ||
41 | body { | ||
42 | margin: 0 auto !important; | ||
43 | padding: 0 !important; | ||
44 | height: 100% !important; | ||
45 | width: 100% !important; | ||
46 | } | ||
47 | /* What it does: Stops email clients resizing small text. */ | ||
48 | * { | ||
49 | -ms-text-size-adjust: 100%; | ||
50 | -webkit-text-size-adjust: 100%; | ||
51 | } | ||
52 | /* What it does: Centers email on Android 4.4 */ | ||
53 | div[style*="margin: 16px 0"] { | ||
54 | margin: 0 !important; | ||
55 | } | ||
56 | /* What it does: forces Samsung Android mail clients to use the entire viewport */ | ||
57 | #MessageViewBody, #MessageWebViewDiv{ | ||
58 | width: 100% !important; | ||
59 | } | ||
60 | /* What it does: Stops Outlook from adding extra spacing to tables. */ | ||
61 | table, | ||
62 | td { | ||
63 | mso-table-lspace: 0pt !important; | ||
64 | mso-table-rspace: 0pt !important; | ||
65 | } | ||
66 | /* What it does: Fixes webkit padding issue. */ | ||
67 | table { | ||
68 | border-spacing: 0 !important; | ||
69 | border-collapse: collapse !important; | ||
70 | table-layout: fixed !important; | ||
71 | margin: 0 auto !important; | ||
72 | } | ||
73 | /* What it does: Uses a better rendering method when resizing images in IE. */ | ||
74 | img { | ||
75 | -ms-interpolation-mode:bicubic; | ||
76 | } | ||
77 | /* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */ | ||
78 | a { | ||
79 | text-decoration: none; | ||
80 | } | ||
81 | a:not(.nocolor) { | ||
82 | color: #{mainColor}; | ||
83 | } | ||
84 | a.nocolor { | ||
85 | color: inherit !important; | ||
86 | } | ||
87 | /* What it does: A work-around for email clients meddling in triggered links. */ | ||
88 | a[x-apple-data-detectors], /* iOS */ | ||
89 | .unstyle-auto-detected-links a, | ||
90 | .aBn { | ||
91 | border-bottom: 0 !important; | ||
92 | cursor: default !important; | ||
93 | color: inherit !important; | ||
94 | text-decoration: none !important; | ||
95 | font-size: inherit !important; | ||
96 | font-family: inherit !important; | ||
97 | font-weight: inherit !important; | ||
98 | line-height: inherit !important; | ||
99 | } | ||
100 | /* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */ | ||
101 | .a6S { | ||
102 | display: none !important; | ||
103 | opacity: 0.01 !important; | ||
104 | } | ||
105 | /* What it does: Prevents Gmail from changing the text color in conversation threads. */ | ||
106 | .im { | ||
107 | color: inherit !important; | ||
108 | } | ||
109 | /* If the above doesn't work, add a .g-img class to any image in question. */ | ||
110 | img.g-img + div { | ||
111 | display: none !important; | ||
112 | } | ||
113 | /* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */ | ||
114 | /* Create one of these media queries for each additional viewport size you'd like to fix */ | ||
115 | /* iPhone 4, 4S, 5, 5S, 5C, and 5SE */ | ||
116 | @media only screen and (min-device-width: 320px) and (max-device-width: 374px) { | ||
117 | u ~ div .email-container { | ||
118 | min-width: 320px !important; | ||
119 | } | ||
120 | } | ||
121 | /* iPhone 6, 6S, 7, 8, and X */ | ||
122 | @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { | ||
123 | u ~ div .email-container { | ||
124 | min-width: 375px !important; | ||
125 | } | ||
126 | } | ||
127 | /* iPhone 6+, 7+, and 8+ */ | ||
128 | @media only screen and (min-device-width: 414px) { | ||
129 | u ~ div .email-container { | ||
130 | min-width: 414px !important; | ||
131 | } | ||
132 | } | ||
133 | //- CSS Reset : END | ||
134 | //- CSS for PeerTube : START | ||
135 | style. | ||
136 | blockquote { | ||
137 | margin-left: 0; | ||
138 | padding-left: 20px; | ||
139 | border-left: 2px solid #f2690d; | ||
140 | } | ||
141 | //- CSS for PeerTube : END | ||
142 | //- Progressive Enhancements : BEGIN | ||
143 | style. | ||
144 | /* What it does: Hover styles for buttons */ | ||
145 | .button-td, | ||
146 | .button-a { | ||
147 | transition: all 100ms ease-in; | ||
148 | } | ||
149 | .button-td-primary:hover, | ||
150 | .button-a-primary:hover { | ||
151 | background: #555555 !important; | ||
152 | border-color: #555555 !important; | ||
153 | } | ||
154 | /* Media Queries */ | ||
155 | @media screen and (max-width: 600px) { | ||
156 | /* What it does: Adjust typography on small screens to improve readability */ | ||
157 | .email-container p { | ||
158 | font-size: 17px !important; | ||
159 | } | ||
160 | } | ||
161 | //- Progressive Enhancements : END | ||
162 | |||
163 | body(width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #{backgroundColor};") | ||
164 | center(role='article' aria-roledescription='email' lang='en' style='width: 100%; background-color: #{backgroundColor};') | ||
165 | //if mso | IE | ||
166 | table(role='presentation' border='0' cellpadding='0' cellspacing='0' width='100%' style='background-color: #fff;') | ||
167 | tr | ||
168 | td | ||
169 | //- Visually Hidden Preheader Text : BEGIN | ||
170 | div(style='max-height:0; overflow:hidden; mso-hide:all;' aria-hidden='true') | ||
171 | block preheader | ||
172 | //- Visually Hidden Preheader Text : END | ||
173 | |||
174 | //- Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview. Extend as necessary. | ||
175 | //- Preview Text Spacing Hack : BEGIN | ||
176 | div(style='display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;') | ||
177 | | ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ | ||
178 | //- Preview Text Spacing Hack : END | ||
179 | |||
180 | //- | ||
181 | Set the email width. Defined in two places: | ||
182 | 1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px. | ||
183 | 2. MSO tags for Desktop Windows Outlook enforce a 600px width. | ||
184 | .email-container(style='max-width: 600px; margin: 0 auto;') | ||
185 | //if mso | ||
186 | table(align='center' role='presentation' cellspacing='0' cellpadding='0' border='0' width='600') | ||
187 | tr | ||
188 | td | ||
189 | //- Email Body : BEGIN | ||
190 | table(align='center' role='presentation' cellspacing='0' cellpadding='0' border='0' width='100%' style='margin: auto;') | ||
191 | //- 1 Column Text + Button : BEGIN | ||
192 | tr | ||
193 | td(style='background-color: #ffffff;') | ||
194 | table(role='presentation' cellspacing='0' cellpadding='0' border='0' width='100%') | ||
195 | tr | ||
196 | td(style='padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;') | ||
197 | table(role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%") | ||
198 | tr | ||
199 | td(width="40px") | ||
200 | img(src=`${WEBSERVER.URL}/client/assets/images/icons/icon-192x192.png` width="auto" height="30px" alt="icon" border="0" style="height: 30px; background: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;") | ||
201 | td | ||
202 | h1(style='margin: 10px 0 10px 0; font-family: sans-serif; font-size: 25px; line-height: 30px; color: #333333; font-weight: normal;') | ||
203 | block title | ||
204 | if title | ||
205 | | #{title} | ||
206 | else | ||
207 | | Something requires your attention | ||
208 | p(style='margin: 0;') | ||
209 | block body | ||
210 | if action | ||
211 | tr | ||
212 | td(style='padding: 0 20px;') | ||
213 | //- Button : BEGIN | ||
214 | table(align='center' role='presentation' cellspacing='0' cellpadding='0' border='0' style='margin: auto;') | ||
215 | tr | ||
216 | td.button-td.button-td-primary(style='border-radius: 4px; background: #222222;') | ||
217 | a.button-a.button-a-primary(href=action.url style='background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;') #{action.text} | ||
218 | //- Button : END | ||
219 | //- 1 Column Text + Button : END | ||
220 | //- Clear Spacer : BEGIN | ||
221 | tr | ||
222 | td(aria-hidden='true' height='20' style='font-size: 0px; line-height: 0px;') | ||
223 | br | ||
224 | //- Clear Spacer : END | ||
225 | //- 1 Column Text : BEGIN | ||
226 | if username | ||
227 | tr | ||
228 | td(style='background-color: #cccccc;') | ||
229 | table(role='presentation' cellspacing='0' cellpadding='0' border='0' width='100%') | ||
230 | tr | ||
231 | td(style='padding: 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;') | ||
232 | p(style='margin: 0;') | ||
233 | | You are receiving this email as part of your notification settings on #{WEBSERVER.HOST} for your account #{username}. | ||
234 | //- 1 Column Text : END | ||
235 | //- Email Body : END | ||
236 | //- Email Footer : BEGIN | ||
237 | table(align='center' role='presentation' cellspacing='0' cellpadding='0' border='0' width='100%' style='margin: auto;') | ||
238 | tr | ||
239 | td(style='padding: 20px; padding-bottom: 0px; font-family: sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #888888;') | ||
240 | webversion | ||
241 | a.nocolor(href=`${WEBSERVER.URL}/my-account/notifications` style='color: #cccccc; font-weight: bold;') View in your notifications | ||
242 | br | ||
243 | tr | ||
244 | td(style='padding: 20px; padding-top: 10px; font-family: sans-serif; font-size: 12px; line-height: 15px; text-align: center; color: #888888;') | ||
245 | unsubscribe | ||
246 | a.nocolor(href=`${WEBSERVER.URL}/my-account/settings#notifications` style='color: #888888;') Manage your notification preferences in your profile | ||
247 | br | ||
248 | //- Email Footer : END | ||
249 | //if mso | ||
250 | //- Full Bleed Background Section : BEGIN | ||
251 | table(role='presentation' cellspacing='0' cellpadding='0' border='0' width='100%' style=`background-color: ${mainColor};`) | ||
252 | tr | ||
253 | td | ||
254 | .email-container(align='center' style='max-width: 600px; margin: auto;') | ||
255 | //if mso | ||
256 | table(role='presentation' cellspacing='0' cellpadding='0' border='0' width='600' align='center') | ||
257 | tr | ||
258 | td | ||
259 | table(role='presentation' cellspacing='0' cellpadding='0' border='0' width='100%') | ||
260 | tr | ||
261 | td(style='padding: 20px; text-align: left; font-family: sans-serif; font-size: 12px; line-height: 20px; color: #ffffff;') | ||
262 | table(role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%") | ||
263 | tr | ||
264 | td(valign="top") #[a(href="https://github.com/Chocobozzz/PeerTube" style="color: white !important") PeerTube © 2015-#{new Date().getFullYear()}] #[a(href="https://github.com/Chocobozzz/PeerTube/blob/master/CREDITS.md" style="color: white !important") PeerTube Contributors] | ||
265 | //if mso | ||
266 | //- Full Bleed Background Section : END | ||
267 | //if mso | IE | ||