Merge remote-tracking branch 'upstream/develop' into restrict-domain
[akkoma] / lib / pleroma / web / templates / layout / email_styled.html.eex
1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"
5 xmlns:v="urn:schemas-microsoft-com:vml">
6
7 <head>
8 <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
9 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
10 <meta content="width=device-width" name="viewport" />
11 <!--[if !mso]><!-->
12 <meta content="IE=edge" http-equiv="X-UA-Compatible" />
13 <!--<![endif]-->
14 <title><%= @email.subject %></title>
15 <!--[if !mso]><!-->
16 <!--<![endif]-->
17 <style type="text/css">
18 body {
19 margin: 0;
20 padding: 0;
21 }
22
23 a {
24
25 color: <%= @styling.link_color %>;
26 text-decoration: none;
27 }
28
29 table,
30 td,
31 tr {
32 vertical-align: top;
33 border-collapse: collapse;
34 }
35
36 * {
37 line-height: inherit;
38 }
39
40 a[x-apple-data-detectors=true] {
41 color: inherit !important;
42 text-decoration: none !important;
43 }
44 </style>
45 <style id="media-query" type="text/css">
46 @media (max-width: 610px) {
47
48 .block-grid,
49 .col {
50 min-width: 320px !important;
51 max-width: 100% !important;
52 display: block !important;
53 }
54
55 .block-grid {
56 width: 100% !important;
57 }
58
59 .col {
60 width: 100% !important;
61 }
62
63 .col>div {
64 margin: 0 auto;
65 }
66
67 .no-stack .col {
68 min-width: 0 !important;
69 display: table-cell !important;
70 }
71
72 .no-stack.two-up .col {
73 width: 50% !important;
74 }
75
76 .no-stack .col.num4 {
77 width: 33% !important;
78 }
79
80 .no-stack .col.num8 {
81 width: 66% !important;
82 }
83
84 .no-stack .col.num4 {
85 width: 33% !important;
86 }
87
88 .no-stack .col.num3 {
89 width: 25% !important;
90 }
91
92 .no-stack .col.num6 {
93 width: 50% !important;
94 }
95
96 .no-stack .col.num9 {
97 width: 75% !important;
98 }
99
100 }
101 </style>
102 </head>
103
104 <body class="clean-body" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: <%= @styling.background_color %>;">
105 <!--[if IE]><div class="ie-browser"><![endif]-->
106 <table bgcolor="<%= @styling.background_color %>" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
107 style="table-layout: fixed; vertical-align: top; min-width: 320px; Margin: 0 auto; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: <%= @styling.background_color %>; width: 100%;"
108 valign="top" width="100%">
109 <tbody>
110 <tr style="vertical-align: top;" valign="top">
111 <td style="word-break: break-word; vertical-align: top;" valign="top">
112 <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color:<%= @styling.background_color %>"><![endif]-->
113
114 <%# header %>
115 <div style="background-color:transparent;">
116 <div class="block-grid"
117 style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: <%= @styling.content_background_color%>;">
118 <div style="border-collapse: collapse;display: table;width: 100%;background-color:<%= @styling.content_background_color%>;">
119 <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:<%= @styling.content_background_color%>"><![endif]-->
120 <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:<%= @styling.content_background_color%>;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->
121 <div class="col num12"
122 style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
123 <div style="width:100% !important;">
124 <!--[if (!mso)&(!IE)]><!-->
125 <div
126 style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
127 <!--<![endif]-->
128 <div align="center" class="img-container center"
129 style="padding-right: 0px;padding-left: 0px;">
130 <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px"><td style="padding-right: 0px;padding-left: 0px;" align="center"><![endif]--><img
131 align="center" alt="Image" border="0" class="center" src="<%= @logo_url %>"
132 style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: 80px; width: auto; max-height: 80px; display: block;"
133 title="Image" height="80" />
134 <!--[if mso]></td></tr></table><![endif]-->
135 </div>
136 <!--[if (!mso)&(!IE)]><!-->
137 </div>
138 <!--<![endif]-->
139 </div>
140 </div>
141 <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
142 <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
143 </div>
144 </div>
145 </div>
146
147
148 <%# title %>
149 <%= if @title do %>
150 <div style="background-color:transparent;">
151 <div class="block-grid"
152 style="Margin: 0 auto; min-width: 320px; max-width: 590px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: <%= @styling.content_background_color%>;">
153 <div style="border-collapse: collapse;display: table;width: 100%;background-color:<%= @styling.content_background_color%>;">
154 <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:transparent;"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:590px"><tr class="layout-full-width" style="background-color:<%= @styling.content_background_color%>"><![endif]-->
155 <!--[if (mso)|(IE)]><td align="center" width="590" style="background-color:<%= @styling.content_background_color%>;width:590px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;"><![endif]-->
156 <div class="col num12"
157 style="min-width: 320px; max-width: 590px; display: table-cell; vertical-align: top; width: 590px;">
158 <div style="width:100% !important;">
159 <!--[if (!mso)&(!IE)]><!-->
160 <div
161 style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;">
162 <!--<![endif]-->
163 <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; font-family: Arial, sans-serif"><![endif]-->
164 <div
165 style="line-height:120%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;">
166 <div
167 style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;line-height: 14px; color: <%= @styling.header_color %>;">
168 <p style="line-height: 36px; text-align: center; margin: 0;"><span
169 style="font-size: 30px; color: <%= @styling.header_color %>;"><%= @title %></span></p>
170 </div>
171 </div>
172 <!--[if mso]></td></tr></table><![endif]-->
173 <!--[if (!mso)&(!IE)]><!-->
174 </div>
175 <!--<![endif]-->
176 </div>
177 </div>
178 <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
179 <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
180 </div>
181 </div>
182 </div>
183 <% end %>
184 <%= render @view_module, @view_template, assigns %>
185
186 </td>
187 </tr>
188 </tbody>
189 </table>
190 <!--[if (IE)]></div><![endif]-->
191 </body>
192
193 </html>