e9308640ec
Some email clients don't support style tags which results in CTA buttons not being visible, and other styling being "broken". This commit tries to fix that issue by both including style tags and inlining the same CSS.
509 строки
22 KiB
HTML
509 строки
22 KiB
HTML
{{define "cloud_trial_end_warning"}}
|
|
|
|
<!-- FILE: cloud_trial_end_warning.mjml -->
|
|
<!doctype html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
|
|
|
<head>
|
|
<title>
|
|
</title>
|
|
<!--[if !mso]><!-->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<!--<![endif]-->
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style type="text/css">
|
|
#outlook a {
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
|
|
table,
|
|
td {
|
|
border-collapse: collapse;
|
|
mso-table-lspace: 0pt;
|
|
mso-table-rspace: 0pt;
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
height: auto;
|
|
line-height: 100%;
|
|
outline: none;
|
|
text-decoration: none;
|
|
-ms-interpolation-mode: bicubic;
|
|
}
|
|
|
|
p {
|
|
display: block;
|
|
margin: 13px 0;
|
|
}
|
|
</style>
|
|
<!--[if mso]>
|
|
<xml>
|
|
<o:OfficeDocumentSettings>
|
|
<o:AllowPNG/>
|
|
<o:PixelsPerInch>96</o:PixelsPerInch>
|
|
</o:OfficeDocumentSettings>
|
|
</xml>
|
|
<![endif]-->
|
|
<!--[if lte mso 11]>
|
|
<style type="text/css">
|
|
.mj-outlook-group-fix { width:100% !important; }
|
|
</style>
|
|
<![endif]-->
|
|
<!--[if !mso]><!-->
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
|
|
<style type="text/css">
|
|
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
|
|
</style>
|
|
<!--<![endif]-->
|
|
<style type="text/css">
|
|
@media only screen and (min-width:480px) {
|
|
.mj-column-per-100 {
|
|
width: 100% !important;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<style media="screen and (min-width:480px)">
|
|
.moz-text-html .mj-column-per-100 {
|
|
width: 100% !important;
|
|
max-width: 100%;
|
|
}
|
|
</style>
|
|
<style type="text/css">
|
|
@media only screen and (max-width:480px) {
|
|
table.mj-full-width-mobile {
|
|
width: 100% !important;
|
|
}
|
|
|
|
td.mj-full-width-mobile {
|
|
width: auto !important;
|
|
}
|
|
}
|
|
</style>
|
|
<style type="text/css">
|
|
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
|
|
|
|
.emailBody {
|
|
background: #F3F3F3 !important;
|
|
}
|
|
|
|
.emailBody a {
|
|
text-decoration: none !important;
|
|
color: #1C58D9 !important;
|
|
}
|
|
|
|
.title div {
|
|
font-weight: 600 !important;
|
|
font-size: 28px !important;
|
|
line-height: 36px !important;
|
|
letter-spacing: -0.01em !important;
|
|
color: #3F4350 !important;
|
|
}
|
|
|
|
.subTitle div {
|
|
font-size: 16px !important;
|
|
line-height: 24px !important;
|
|
color: rgba(63, 67, 80, 0.64) !important;
|
|
}
|
|
|
|
.subTitle a {
|
|
color: rgb(28, 88, 217) !important;
|
|
}
|
|
|
|
.button a {
|
|
background-color: #1C58D9 !important;
|
|
font-weight: 600 !important;
|
|
font-size: 16px !important;
|
|
line-height: 18px !important;
|
|
color: #FFFFFF !important;
|
|
padding: 15px 24px !important;
|
|
}
|
|
|
|
.messageButton a {
|
|
background-color: #FFFFFF !important;
|
|
border: 1px solid #FFFFFF !important;
|
|
box-sizing: border-box !important;
|
|
color: #1C58D9 !important;
|
|
padding: 12px 20px !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
line-height: 14px !important;
|
|
}
|
|
|
|
.info div {
|
|
font-size: 14px !important;
|
|
line-height: 20px !important;
|
|
color: #3F4350 !important;
|
|
padding: 40px 0px !important;
|
|
}
|
|
|
|
.footerTitle div {
|
|
font-weight: 600 !important;
|
|
font-size: 16px !important;
|
|
line-height: 24px !important;
|
|
color: #3F4350 !important;
|
|
padding: 0px 0px 4px 0px !important;
|
|
}
|
|
|
|
.footerInfo div {
|
|
font-size: 14px !important;
|
|
line-height: 20px !important;
|
|
color: #3F4350 !important;
|
|
padding: 0px 48px 0px 48px !important;
|
|
}
|
|
|
|
.footerInfo a {
|
|
color: #1C58D9 !important;
|
|
}
|
|
|
|
.appDownloadButton a {
|
|
background-color: #FFFFFF !important;
|
|
border: 1px solid #1C58D9 !important;
|
|
box-sizing: border-box !important;
|
|
color: #1C58D9 !important;
|
|
padding: 13px 20px !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
line-height: 14px !important;
|
|
}
|
|
|
|
.emailFooter div {
|
|
font-size: 12px !important;
|
|
line-height: 16px !important;
|
|
color: rgba(63, 67, 80, 0.56) !important;
|
|
padding: 8px 24px 8px 24px !important;
|
|
}
|
|
|
|
.postCard {
|
|
padding: 0px 24px 40px 24px !important;
|
|
}
|
|
|
|
.messageCard {
|
|
background: #FFFFFF !important;
|
|
border: 1px solid rgba(61, 60, 64, 0.08) !important;
|
|
box-sizing: border-box !important;
|
|
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) !important;
|
|
border-radius: 4px !important;
|
|
padding: 32px !important;
|
|
}
|
|
|
|
.messageAvatar img {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
padding: 0px !important;
|
|
border-radius: 32px !important;
|
|
}
|
|
|
|
.messageAvatarCol {
|
|
width: 32px !important;
|
|
}
|
|
|
|
.postNameAndTime {
|
|
padding: 0px 0px 4px 0px !important;
|
|
display: flex;
|
|
}
|
|
|
|
.senderName {
|
|
font-family: Open Sans, sans-serif;
|
|
text-align: left !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
line-height: 20px !important;
|
|
color: #3F4350 !important;
|
|
}
|
|
|
|
.time {
|
|
font-family: Open Sans, sans-serif;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: rgba(63, 67, 80, 0.56);
|
|
padding: 2px 6px;
|
|
align-items: center;
|
|
float: left;
|
|
}
|
|
|
|
.channelBg {
|
|
background: rgba(63, 67, 80, 0.08);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.channelLogo {
|
|
width: 10px;
|
|
height: 10px;
|
|
padding: 5px 4px 5px 6px;
|
|
float: left;
|
|
}
|
|
|
|
.channelName {
|
|
font-family: Open Sans, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 10px;
|
|
line-height: 16px;
|
|
letter-spacing: 0.01em;
|
|
text-transform: uppercase;
|
|
color: rgba(63, 67, 80, 0.64);
|
|
padding: 2px 6px 2px 0px;
|
|
}
|
|
|
|
.gmChannelCount {
|
|
background-color: rgba(63, 67, 80, 0.2);
|
|
padding: 0 5px;
|
|
border-radius: 2px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.senderMessage div {
|
|
text-align: left !important;
|
|
font-size: 14px !important;
|
|
line-height: 20px !important;
|
|
color: #3F4350 !important;
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.senderInfoCol {
|
|
width: 394px !important;
|
|
padding: 0px 0px 0px 12px !important;
|
|
}
|
|
|
|
@media all and (min-width: 541px) {
|
|
.emailBody {
|
|
padding: 32px !important;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 540px) and (min-width: 401px) {
|
|
.emailBody {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.messageCard {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.senderInfoCol {
|
|
width: 80% !important;
|
|
padding: 0px 0px 0px 12px !important;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 400px) {
|
|
.emailBody {
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.footerInfo div {
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.messageCard {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.postCard {
|
|
padding: 0px 0px 40px 0px !important;
|
|
}
|
|
|
|
.senderInfoCol {
|
|
width: 80% !important;
|
|
padding: 0px 0px 0px 12px !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="word-spacing:normal;">
|
|
<div class="emailBody" style="background: #F3F3F3;">
|
|
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
|
|
<div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;border-radius:0;max-width:600px;">
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;border-radius:0;">
|
|
<tbody>
|
|
<tr>
|
|
<td style="direction:ltr;font-size:0px;padding:24px;text-align:center;">
|
|
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
|
|
<div style="margin:0px auto;max-width:552px;">
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
|
|
<tbody>
|
|
<tr>
|
|
<td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;border-top:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:24px;text-align:center;">
|
|
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:502px;" ><![endif]-->
|
|
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<td align="left" style="font-size:0px;padding:0px;word-break:break-word;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
|
|
<tbody>
|
|
<tr>
|
|
<td style="width:132px;">
|
|
<img alt height="21" src="{{.Props.SiteURL}}/static/images/logo_email_gray.png" style="border:0;display:block;outline:none;text-decoration:none;height:21.76px;width:100%;font-size:13px;" width="132">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]></td></tr></table><![endif]-->
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
|
|
<div style="margin:0px auto;max-width:552px;">
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
|
|
<tbody>
|
|
<tr>
|
|
<td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:0 60px;text-align:center;">
|
|
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:430px;" ><![endif]-->
|
|
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<td align="left" class="title" style="font-size:0px;padding:10px 0px;word-break:break-word;">
|
|
<div style="font-family: Arial; text-align: left; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: #3F4350;">{{.Props.Title}}</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="left" style="font-size:0px;padding:10px 0px;padding-bottom:24px;word-break:break-word;">
|
|
<div style="font-family:Arial;font-size:16px;line-height:24px;text-align:left;color:#000000;">{{.Props.SubTitle}}</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="left" vertical-align="middle" class="button" style="font-size:0px;padding:0px;word-break:break-word;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
|
|
<tr>
|
|
<td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-radius:4px;border-top:16px;cursor:auto;mso-padding-alt:10px 25px;background:#FFFFFF;" valign="middle">
|
|
<a href="{{.Props.ButtonURL}}" style="display: inline-block; background: #FFFFFF; font-family: Arial; margin: 0; text-transform: none; mso-padding-alt: 0px; border-radius: 4px; text-decoration: none; background-color: #1C58D9; font-weight: 600; font-size: 16px; line-height: 18px; color: #FFFFFF; padding: 15px 24px;" target="_blank">
|
|
{{.Props.Button}}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]></td></tr></table><![endif]-->
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
|
|
<div style="margin:0px auto;max-width:552px;">
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
|
|
<tbody>
|
|
<tr>
|
|
<td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:40px;text-align:center;">
|
|
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:470px;" ><![endif]-->
|
|
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
|
|
<tbody>
|
|
<tr>
|
|
<td style="width:320px;">
|
|
<img alt height="auto" src="{{.Props.SiteURL}}/static/images/add_payment_method.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="320">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]></td></tr></table><![endif]-->
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
|
|
<div style="margin:0px auto;max-width:552px;">
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
|
|
<tbody>
|
|
<tr>
|
|
<td style="border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:24px 24px 24px 24px;text-align:center;">
|
|
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:502px;" ><![endif]-->
|
|
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-top:1px solid #E5E5E5;vertical-align:top;" width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<td align="left" class="footerTitle" style="font-size:0px;padding:24px 0px 0px 0px;word-break:break-word;">
|
|
<div style="font-family: Arial; text-align: left; font-weight: 600; font-size: 16px; line-height: 24px; color: #3F4350; padding: 0px 0px 4px 0px;">{{.Props.QuestionTitle}}</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="left" style="font-size:0px;padding:0px 0px ;word-break:break-word;">
|
|
<div style="font-family:Arial;font-size:14px;line-height:20px;text-align:left;color:#3D3C40;">{{.Props.QuestionInfo}}
|
|
<a href="mailto:{{.Props.SupportEmail}}" style="text-decoration: none; color: #1C58D9;"> feedback-cloud@mattermost.com </a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]></td></tr></table><![endif]-->
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:552px;" width="552" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
|
|
<div style="margin:0px auto;max-width:552px;">
|
|
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
|
|
<tbody>
|
|
<tr>
|
|
<td style="border-bottom:1px solid #E5E5E5;border-left:1px solid #E5E5E5;border-right:1px solid #E5E5E5;direction:ltr;font-size:0px;padding:0px 24px 24px 24px;text-align:center;">
|
|
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:502px;" ><![endif]-->
|
|
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
|
|
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-top:1px solid #E5E5E5;vertical-align:top;" width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<td align="center" class="emailFooter" style="font-size:0px;padding:0px;word-break:break-word;">
|
|
<div style="font-family: Arial; text-align: center; font-size: 12px; line-height: 16px; color: rgba(63, 67, 80, 0.56); padding: 8px 24px 8px 24px;">{{.Props.Organization}}
|
|
{{.Props.FooterV2}}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]></td></tr></table><![endif]-->
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--[if mso | IE]></td></tr></table><![endif]-->
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
{{end}}
|