com.woltlab.wcf/templates/email_html.tpl

   1 <html>
   2         <head>
   3                 {* Apple Mail dark mode fix, see https://stackoverflow.com/a/58795882 *}
   4                 <meta name="color-scheme" content="only">
   5                 <style type="text/css">
   6                 html, body, h1, h2, h3 {
   7                         padding: 0;
   8                         margin: 0;
   9                 }
  10
  11                 body {
  12                         background-color: {$style->getVariable('wcfContentBackground', true)};
  13                         color: {$style->getVariable('wcfContentText', true)};
  14                 }
  15
  16                 body, body * {
  17                         font-family: {@$style->getEmailFontFamily()};
  18                         font-size: {$style->getVariable('wcfFontSizeDefault')};
  19                 }
  20
  21                 a {
  22                         color: {$style->getVariable('wcfContentLink', true)};
  23                         text-decoration: none;
  24                 }
  25
  26                 p, .paragraphMargin {
  27                         margin-top: 1em;
  28                         margin-bottom: 1em;
  29                 }
  30
  31                 td {
  32                         vertical-align: top;
  33                 }
  34
  35                 {* see email_paddingHelper.tpl *}
  36                 table.paddingHelper.block {
  37                         width: 100%;
  38                 }
  39
  40                 .content {
  41                         padding: 40px 40px 60px;
  42                 }
  43                 .header, .footer {
  44                         padding: 20px 40px;
  45                 }
  46                 .header {
  47                         background-color: {$style->getVariable('wcfHeaderBackground', true)};
  48                         color: {$style->getVariable('wcfHeaderText', true)};
  49                 }
  50                 .footer {
  51                         background-color: {$style->getVariable('wcfFooterBackground', true)};
  52                         color: {$style->getVariable('wcfFooterText', true)};
  53                 }
  54                 .footer a {
  55                         color: {$style->getVariable('wcfFooterLink', true)};
  56                 }
  57                 h1 {
  58                         font-weight: 300;
  59                         line-height: 1.05;
  60                         font-size: {$style->getVariable('wcfFontSizeTitle')};
  61                 }
  62                 h2 {
  63                         font-weight: 400;
  64                         line-height: 1.28;
  65                         color: {$style->getVariable('wcfContentHeadlineText')};
  66                         font-size: {$style->getVariable('wcfFontSizeSection')};
  67                 }
  68                 small {
  69                         font-size: {$style->getVariable('wcfFontSizeSmall')};
  70                         font-weight: 300;
  71                 }
  72
  73                 .largeMarginTop {
  74                         margin-top: 40px;
  75                 }
  76
  77                 {* Buttons *}
  78                 td.button {
  79                         background-color: {$style->getVariable('wcfButtonPrimaryBackground', true)};
  80                         border-radius: 2px;
  81                         padding: 6px 12px;
  82                 }
  83                 td.button a {
  84                         color: {$style->getVariable('wcfButtonPrimaryText', true)};
  85                 }
  86
  87                 .box128 {
  88                         border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
  89                         border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
  90                         padding: 20px;
  91                 }
  92
  93                 .box128 td.boxContent {
  94                         padding-left: 20px;
  95                 }
  96
  97                 .box64 {
  98                         border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
  99                         border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
 100                         padding: 15px;
 101                 }
 102
 103                 .box64 td.boxContent {
 104                         padding-left: 15px;
 105                 }
 106
 107                 .box48 {
 108                         border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
 109                         border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
 110                         padding: 12px;
 111                 }
 112
 113                 .box48 td.boxContent {
 114                         padding-left: 12px;
 115                 }
 116
 117                 .box32 {
 118                         border-top: 1px solid {$style->getVariable('wcfContentBorder', true)};
 119                         border-bottom: 1px solid {$style->getVariable('wcfContentBorder', true)};
 120                         padding: 10px;
 121                 }
 122
 123                 .box32 td.boxContent {
 124                         padding-left: 10px;
 125                 }
 126
 127                 .containerHeadline h3 {
 128                         margin: 0;
 129                         padding: 0;
 130                         font-weight: 400;
 131                         line-height: 1.28;
 132                         font-size: {$style->getVariable('wcfFontSizeHeadline')};
 133                 }
 134
 135                 .containerHeadline h3 a {
 136                         font-size: {$style->getVariable('wcfFontSizeHeadline')};
 137                 }
 138
 139                 .userAvatarImage {
 140                         background-color: #fff;
 141                         border-radius: 50%;
 142                 }
 143                 </style>
 144         </head>
 145         <body>
 146         {capture assign='header'}
 147         <h1>{PAGE_TITLE|phrase}</h1>
 148         {/capture}
 149         {include file='email_paddingHelper' block=true class='header' content=$header sandbox=true}
 150
 151         {if $beforeContent|isset}{@$beforeContent}{/if}
 152
 153         {include file='email_paddingHelper' block=true class='content' content=$content sandbox=true}
 154
 155         {if $afterContent|isset}{@$afterContent}{/if}
 156
 157         {capture assign='footer'}
 158         {hascontent}
 159         <span style="font-size: 0;">-- <br></span>
 160         {content}
 161         {if MAIL_SIGNATURE_HTML|phrase}
 162         {@MAIL_SIGNATURE_HTML|phrase}
 163         {else}
 164         {@MAIL_SIGNATURE|phrase|newlineToBreak}
 165         {/if}
 166         {/content}{/hascontent}{/capture}
 167         {include file='email_paddingHelper' block=true class='footer' content=$footer sandbox=true}
 168
 169         <table>{* Do not remove: This table is needed by certain less able email clients to properly support background colors. Don't ask. *}</table>
 170         </body>
 171 </html>