git.squeep.com Git - akkoma/blob - 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                                         <%= @inner_content %>
 185
 186                                 </td>
 187                         </tr>
 188                 </tbody>
 189         </table>
 190         <!--[if (IE)]></div><![endif]-->
 191 </body>
 192
 193 </html>