redesign email template

This commit is contained in:
Trent White
2016-08-26 14:25:39 -04:00
parent 35b90afdd0
commit ab4f06bc54
16 changed files with 770 additions and 364 deletions
+26 -47
View File
@@ -48,6 +48,15 @@ color: #FFFFFF !important;
.better-button:active a {
color: #FFFFFF !important;
}
.better-button-alt:hover a {
color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
}
.better-button-alt:visited a {
color: #ff8f2b !important;
}
.better-button-alt:active a {
color: #ff8f2b !important;
}
body {
height: 100% !important; width: 100% !important;
}
@@ -88,12 +97,21 @@ text-decoration: underline;
table[class="body"] .columns {
table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
}
table[class="body"] .column {
table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
}
table[class="body"] table.columns td {
width: 100% !important;
}
table[class="body"] .columns td.six {
width: 50% !important;
}
table[class="body"] .column td.six {
width: 50% !important;
}
table[class="body"] .columns td.twelve {
width: 100% !important;
}
table[class="body"] table.columns td.expander {
width: 1px !important;
}
@@ -111,12 +129,6 @@ text-decoration: underline;
img[class="fluid-centered"] {
margin: auto !important;
}
table[class="articles"] {
width: 90% !important;
}
table[class="article-links"] {
width: 100% !important;
}
td[class="comms-content"] {
padding: 20px !important;
}
@@ -156,41 +168,8 @@ text-decoration: underline;
td[class="spacer mb-shorten"] {
height: 25px !important;
}
a[class="footer-legal-links"] {
display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important;
}
td[class="footer-links-list"] {
margin: 12px 0;
}
a[class="post-title"] {
font-size: 22px !important; line-height: 32px !important;
}
a[class="post-title spotlight"] {
font-size: 22px !important; line-height: 32px !important;
}
td[class="legal-text"] {
font-size: 12px !important; line-height: 18px !important;
}
td[class="avatar"] {
width: 30% !important;
}
td[class="links"] {
width: 30% !important;
}
td[class="links"] {
width: 70% !important;
}
a[class="main-cta"] {
width: 90% !important; font-size: 18px !important;
}
table[class="button"] {
width: 90% !important; font-size: 18px !important;
}
a[class="cta-big-link"] {
font-size: 18px !important; line-height: 26px !important;
}
a[class="btn-white"] {
font-size: 13px !important; width: 90px !important;
.two-up td {
width: 270px;
}
}
</style>
@@ -242,7 +221,7 @@ text-decoration: underline;
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;">
<tr style="padding: 0; vertical-align: top;" align="left">
<td style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; word-break: break-word;" align="left" valign="top">
<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: normal; line-height: 1.3; margin: 10px 0; padding: 0; word-break: normal;" align="left">Hi {{.Name}}</h3>
<h4 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left">Hi {{.Name}},</h4>
</td>
<td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
</tr>
@@ -259,7 +238,7 @@ text-decoration: underline;
<tr style="padding: 0; vertical-align: top;" align="left">
<td class="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; word-break: break-word;" align="center" valign="top">
<p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="left">
Please click the following link to reset your password within <strong>{{.EmailCodeValidHours}} hours</strong>.
Please click the following link to reset your password within <b>{{.EmailCodeValidHours}} hours</b>.
</p>
<p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="left">
<a href="{{.AppUrl}}user/password/reset?code={{.Code}}" style="color: #E67612; text-decoration: none;">{{.AppUrl}}user/password/reset?code={{.Code}}</a>
@@ -281,12 +260,12 @@ text-decoration: underline;
</tr>
</table>
<table class="row footer" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;" bgcolor="#2e2e2e">
<table class="footer center" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0; text-align: center; vertical-align: top;" bgcolor="#2e2e2e">
<tr style="padding: 0; vertical-align: top;" align="left">
<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;">
<td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 20px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
<table class="twelve columns center" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
<tr style="padding: 0; vertical-align: top;" align="left">
<td align="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; word-break: break-word;" valign="top">
<td class="twelve" align="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; width: 100%; word-break: break-word;" valign="top">
<center style="min-width: 580px; width: 100%;">
<p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="center">
Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>