Skip to content

N
nexpie-grafana-theme
Commit ab4f06bc by Trent White
Options

redesign email template

parent 35b90afd
Showing with 244 additions and 306 deletions
emails/assets/css/style.css
...@@ -84,6 +84,10 @@ margin-top:25px; ...@@ -84,6 +84,10 @@ margin-top:25px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.data {
font-size: 16px;
}
.footer { .footer {
background-color: #2e2e2e; background-color: #2e2e2e;
color: #999999; color: #999999;
...@@ -138,6 +142,45 @@ table.columns td.better-button { ...@@ -138,6 +142,45 @@ table.columns td.better-button {
color: #FFFFFF !important; color: #FFFFFF !important;
} }
table.better-button-alt {
margin-top: 10px;
margin-bottom: 20px;
}
table.columns td.better-button-alt {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding-bottom: 0px;
}
.better-button-alt a {
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
padding: 12px 25px;
border: 1px solid #ff8f2b;
background-color: #EFEFEF;
display: inline-block;
color: #ff8f2b;
}
.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;
}
.verification-code { .verification-code {
background-color: #EEEEEE; background-color: #EEEEEE;
padding: 3px; padding: 3px;
......
emails/templates/alert_notification.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<table class="row" > <table class="row" >
<tr> <tr>
<td class="wrapper last"> <td class="last">
<table class="twelve columns"> <table class="twelve columns">
<tr> <tr>
<td class="center"> <td class="center">
...@@ -31,24 +31,24 @@ ...@@ -31,24 +31,24 @@
[[if ne .State "ok" ]] [[if ne .State "ok" ]]
<table class="row" > <table class="row" >
<tr> <tr>
<td class="wrapper last"> <td class="last">
<center> <center>
<table class="twelve columns" > <table class="twelve columns" >
<tr> <tr>
<td class="wrapper last" style="font-weight: bold;"> <td class="six last">
Metric name <h5 style="font-weight: bold;">Metric name</h5>
</td> </td>
<td style="font-weight: bold;"> <td class="six">
Value <h5 style="font-weight: bold;">Value</h5>
</td> </td>
</tr> </tr>
[[range .EvalMatches]] dwds [[range .EvalMatches]]
<tr> <tr>
<td class="wrapper last"> <td class="six last">
[[.Metric]] <h5 class="data">[[.Metric]]</h5>
</td> </td>
<td> <td class="six">
[[.Value]] <h5 class="data">[[.Value]]</h5>
</td> </td>
</tr> </tr>
[[end]] [[end]]
...@@ -79,8 +79,23 @@ ...@@ -79,8 +79,23 @@
<td class="wrapper last"> <td class="wrapper last">
<table class="twelve columns"> <table class="twelve columns">
<tr> <tr>
<td class="center"> <td class="center six">
<a href="[[.RuleUrl]]" target="_blank">Alert rule</a> - <a href="[[.AlertPageUrl]]" target="_blank">Alerts page</a> <table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="better-button" bgcolor="#ff8f2b">
<a href="[[.RuleUrl]]" target="_blank">View your Alert rule</a>
</td>
</tr>
</table>
</td>
<td class="center six">
<table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="better-button-alt" bgcolor="#efefef">
<a href="[[.AlertPageUrl]]" target="_blank"> Go to the Alerts page</a>
</td>
</tr>
</table>
</td> </td>
</tr> </tr>
</table> </table>
......
emails/templates/invited_to_org.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<table class="twelve columns"> <table class="twelve columns">
<tr> <tr>
<td> <td>
<h3>You have been added to [[.OrgName]]</h3> <h4 class="center">You have been added to [[.OrgName]]</h4>
</td> </td>
<td class="expander"></td> <td class="expander"></td>
</tr> </tr>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<table class="twelve columns"> <table class="twelve columns">
<tr> <tr>
<td class="center"> <td class="center">
<p><span class="emphasis">[[.InvitedBy]]</span> has added you to the <span class="emphasis">[[.OrgName]]</span> organization in Grafana. <p><b>[[.InvitedBy]]</b> has added you to the <b>[[.OrgName]]</b> organization in Grafana.
<p>Once logged in, [[.OrgName]] will be available in the left side menu, in the dropdown below your username.</p> <p>Once logged in, [[.OrgName]] will be available in the left side menu, in the dropdown below your username.</p>
</td> </td>
<td class="expander"></td> <td class="expander"></td>
......
emails/templates/layouts/default.html
...@@ -10,25 +10,25 @@ ...@@ -10,25 +10,25 @@
</head> </head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" style="background: #2e2e2e; height: 100% !important; margin: 0 auto; padding: 0; width: 100% !important" bgcolor="#2e2e2e"><style type="text/css"> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" style="background: #2e2e2e; height: 100% !important; margin: 0 auto; padding: 0; width: 100% !important" bgcolor="#2e2e2e"><style type="text/css">
body { body {
height: 100% !important; width: 100% !important; height: 100% !important; width: 100% !important;
} }
body .copy { body .copy {
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
.ExternalClass { .ExternalClass {
width: 100%; width: 100%;
} }
.ExternalClass { .ExternalClass {
line-height: 100%; line-height: 100%;
} }
img { img {
-ms-interpolation-mode: bicubic; -ms-interpolation-mode: bicubic;
} }
img { img {
border: 0 !important; outline: none !important; text-decoration: none !important; border: 0 !important; outline: none !important; text-decoration: none !important;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
td[class="stack-column-center"] { td[class="stack-column-center"] {
text-align: center !important; text-align: center !important;
...@@ -46,12 +46,6 @@ td[class="stack-column-center"] { ...@@ -46,12 +46,6 @@ td[class="stack-column-center"] {
img[class="fluid-centered"] { img[class="fluid-centered"] {
margin: auto !important; margin: auto !important;
} }
table[class="articles"] {
width: 90% !important;
}
table[class="article-links"] {
width: 100% !important;
}
td[class="comms-content"] { td[class="comms-content"] {
padding: 20px !important; padding: 20px !important;
} }
...@@ -91,41 +85,8 @@ td[class="stack-column-center"] { ...@@ -91,41 +85,8 @@ td[class="stack-column-center"] {
td[class="spacer mb-shorten"] { td[class="spacer mb-shorten"] {
height: 25px !important; height: 25px !important;
} }
a[class="footer-legal-links"] { .two-up td {
display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important; width:270px;
}
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;
} }
} }
</style> </style>
...@@ -174,14 +135,14 @@ td[class="stack-column-center"] { ...@@ -174,14 +135,14 @@ td[class="stack-column-center"] {
</tr> </tr>
</table> </table>
<!-- footer --> <!-- footer -->
<table class="row footer"> <table class="footer center">
<tr> <tr>
<td class="wrapper last"> <td class="wrapper last">
<table class="twelve columns"> <table class="twelve columns center">
<tr> <tr>
<td align="center"> <td class="twelve" align="center">
<center> <center>
<p style="text-align:center; font-size: 12px; color: #999999;"> <p style="text-align: center; font-size: 12px; color: #999999;">
Sent by <a href="[[.AppUrl]]">Grafana v[[.BuildVersion]]</a> Sent by <a href="[[.AppUrl]]">Grafana v[[.BuildVersion]]</a>
<br />&copy; 2016 Grafana and raintank <br />&copy; 2016 Grafana and raintank
</p> </p>
......
emails/templates/new_user_invite.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<table class="twelve columns"> <table class="twelve columns">
<tr> <tr>
<td> <td>
<h3>You're invited to join [[.OrgName]]</h3> <h4 class="center">You're invited to join [[.OrgName]]</h4>
</td> </td>
<td class="expander"></td> <td class="expander"></td>
</tr> </tr>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<table class="twelve columns"> <table class="twelve columns">
<tr> <tr>
<td class="center"> <td class="center">
<p>You've been invited to join the <span class="emphasis">[[.OrgName]]</span> organization by <span class="emphasis">[[.InvitedBy]]</span>. To accept your invitation and join the team, please click the link below:</p> <p>You've been invited to join the <b>[[.OrgName]]</b> organization by <b>[[.InvitedBy]]</b>. To accept your invitation and join the team, please click the link below:</p>
</td> </td>
</tr> </tr>
<tr> <tr>
......
emails/templates/reset_password.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<table class="twelve columns"> <table class="twelve columns">
<tr> <tr>
<td> <td>
<h3>Hi [[.Name]]</h3> <h4>Hi [[.Name]],</h4>
</td> </td>
<td class="expander"></td> <td class="expander"></td>
</tr> </tr>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<tr> <tr>
<td class="center"> <td class="center">
<p> <p>
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>
<p> <p>
<a href="[[.AppUrl]]user/password/reset?code=[[.Code]]">[[.AppUrl]]user/password/reset?code=[[.Code]]</a> <a href="[[.AppUrl]]user/password/reset?code=[[.Code]]">[[.AppUrl]]user/password/reset?code=[[.Code]]</a>
......
emails/templates/signup_started.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<table class="twelve columns"> <table class="twelve columns">
<tr> <tr>
<td> <td>
<h3 class="center">Complete the signup</h3> <h4 class="center">Complete the signup</h4>
</td> </td>
<td class="expander"></td> <td class="expander"></td>
</tr> </tr>
......
emails/templates/welcome_on_signup.html
...@@ -7,10 +7,15 @@ ...@@ -7,10 +7,15 @@
<table class="twelve columns"> <table class="twelve columns">
<tr> <tr>
<td> <td>
<h3>Hi [[.Name]]</h3> <h4>Hi [[.Name]],</h4>
</td> </td>
<td class="expander"></td> <td class="expander"></td>
</tr> </tr>
<tr>
<td>
Welcome! Ready to start building some beautiful metric and analytic dashboards?
</td>
</tr>
</table> </table>
</td> </td>
...@@ -29,6 +34,13 @@ ...@@ -29,6 +34,13 @@
</td> </td>
<td class="expander"></td> <td class="expander"></td>
</tr> </tr>
<tr>
<td>
Thank you for joining our community.
<br />
<p>The Grafana Team</p>
</td>
</tr>
</table> </table>
</td> </td>
</tr> </tr>
......
public/emails/new_user_invite.html
...@@ -48,6 +48,15 @@ color: #FFFFFF !important; ...@@ -48,6 +48,15 @@ color: #FFFFFF !important;
.better-button:active a { .better-button:active a {
color: #FFFFFF !important; 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 { body {
height: 100% !important; width: 100% !important; height: 100% !important; width: 100% !important;
} }
...@@ -88,12 +97,21 @@ text-decoration: underline; ...@@ -88,12 +97,21 @@ text-decoration: underline;
table[class="body"] .columns { 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-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 { table[class="body"] table.columns td {
width: 100% !important; width: 100% !important;
} }
table[class="body"] .columns td.six { table[class="body"] .columns td.six {
width: 50% !important; 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 { table[class="body"] table.columns td.expander {
width: 1px !important; width: 1px !important;
} }
...@@ -111,12 +129,6 @@ text-decoration: underline; ...@@ -111,12 +129,6 @@ text-decoration: underline;
img[class="fluid-centered"] { img[class="fluid-centered"] {
margin: auto !important; margin: auto !important;
} }
table[class="articles"] {
width: 90% !important;
}
table[class="article-links"] {
width: 100% !important;
}
td[class="comms-content"] { td[class="comms-content"] {
padding: 20px !important; padding: 20px !important;
} }
...@@ -156,41 +168,8 @@ text-decoration: underline; ...@@ -156,41 +168,8 @@ text-decoration: underline;
td[class="spacer mb-shorten"] { td[class="spacer mb-shorten"] {
height: 25px !important; height: 25px !important;
} }
a[class="footer-legal-links"] { .two-up td {
display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important; width: 270px;
}
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;
} }
} }
</style> </style>
...@@ -244,7 +223,7 @@ text-decoration: underline; ...@@ -244,7 +223,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;"> <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"> <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"> <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">You're invited to join {{.OrgName}}</h3> <h4 class="center" 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="center">You're invited to join {{.OrgName}}</h4>
</td> </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> <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> </tr>
...@@ -260,7 +239,7 @@ text-decoration: underline; ...@@ -260,7 +239,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;"> <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"> <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"> <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">You've been invited to join the <span class="emphasis" style="font-weight: 600;">{{.OrgName}}</span> organization by <span class="emphasis" style="font-weight: 600;">{{.InvitedBy}}</span>. To accept your invitation and join the team, please click the link below:</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">You've been invited to join the <b>{{.OrgName}}</b> organization by <b>{{.InvitedBy}}</b>. To accept your invitation and join the team, please click the link below:</p>
</td> </td>
</tr> </tr>
<tr style="padding: 0; vertical-align: top;" align="left"> <tr style="padding: 0; vertical-align: top;" align="left">
...@@ -287,12 +266,12 @@ text-decoration: underline; ...@@ -287,12 +266,12 @@ text-decoration: underline;
</tr> </tr>
</table> </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"> <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"> <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" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;"> <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"> <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%;"> <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"> <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> Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
......
public/emails/reset_password.html
...@@ -48,6 +48,15 @@ color: #FFFFFF !important; ...@@ -48,6 +48,15 @@ color: #FFFFFF !important;
.better-button:active a { .better-button:active a {
color: #FFFFFF !important; 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 { body {
height: 100% !important; width: 100% !important; height: 100% !important; width: 100% !important;
} }
...@@ -88,12 +97,21 @@ text-decoration: underline; ...@@ -88,12 +97,21 @@ text-decoration: underline;
table[class="body"] .columns { 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-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 { table[class="body"] table.columns td {
width: 100% !important; width: 100% !important;
} }
table[class="body"] .columns td.six { table[class="body"] .columns td.six {
width: 50% !important; 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 { table[class="body"] table.columns td.expander {
width: 1px !important; width: 1px !important;
} }
...@@ -111,12 +129,6 @@ text-decoration: underline; ...@@ -111,12 +129,6 @@ text-decoration: underline;
img[class="fluid-centered"] { img[class="fluid-centered"] {
margin: auto !important; margin: auto !important;
} }
table[class="articles"] {
width: 90% !important;
}
table[class="article-links"] {
width: 100% !important;
}
td[class="comms-content"] { td[class="comms-content"] {
padding: 20px !important; padding: 20px !important;
} }
...@@ -156,41 +168,8 @@ text-decoration: underline; ...@@ -156,41 +168,8 @@ text-decoration: underline;
td[class="spacer mb-shorten"] { td[class="spacer mb-shorten"] {
height: 25px !important; height: 25px !important;
} }
a[class="footer-legal-links"] { .two-up td {
display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important; width: 270px;
}
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;
} }
} }
</style> </style>
...@@ -242,7 +221,7 @@ text-decoration: underline; ...@@ -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;"> <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"> <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"> <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>
<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> <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> </tr>
...@@ -259,7 +238,7 @@ text-decoration: underline; ...@@ -259,7 +238,7 @@ text-decoration: underline;
<tr style="padding: 0; vertical-align: top;" align="left"> <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"> <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"> <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>
<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"> <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> <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; ...@@ -281,12 +260,12 @@ text-decoration: underline;
</tr> </tr>
</table> </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"> <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"> <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" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;"> <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"> <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%;"> <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"> <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> Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
......
public/emails/signup_started.html
...@@ -48,6 +48,15 @@ color: #FFFFFF !important; ...@@ -48,6 +48,15 @@ color: #FFFFFF !important;
.better-button:active a { .better-button:active a {
color: #FFFFFF !important; 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 { body {
height: 100% !important; width: 100% !important; height: 100% !important; width: 100% !important;
} }
...@@ -88,12 +97,21 @@ text-decoration: underline; ...@@ -88,12 +97,21 @@ text-decoration: underline;
table[class="body"] .columns { 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-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 { table[class="body"] table.columns td {
width: 100% !important; width: 100% !important;
} }
table[class="body"] .columns td.six { table[class="body"] .columns td.six {
width: 50% !important; 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 { table[class="body"] table.columns td.expander {
width: 1px !important; width: 1px !important;
} }
...@@ -111,12 +129,6 @@ text-decoration: underline; ...@@ -111,12 +129,6 @@ text-decoration: underline;
img[class="fluid-centered"] { img[class="fluid-centered"] {
margin: auto !important; margin: auto !important;
} }
table[class="articles"] {
width: 90% !important;
}
table[class="article-links"] {
width: 100% !important;
}
td[class="comms-content"] { td[class="comms-content"] {
padding: 20px !important; padding: 20px !important;
} }
...@@ -156,41 +168,8 @@ text-decoration: underline; ...@@ -156,41 +168,8 @@ text-decoration: underline;
td[class="spacer mb-shorten"] { td[class="spacer mb-shorten"] {
height: 25px !important; height: 25px !important;
} }
a[class="footer-legal-links"] { .two-up td {
display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important; width: 270px;
}
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;
} }
} }
</style> </style>
...@@ -242,7 +221,7 @@ text-decoration: underline; ...@@ -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;"> <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"> <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"> <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 class="center" 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="center">Complete the signup</h3> <h4 class="center" 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="center">Complete the signup</h4>
</td> </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> <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> </tr>
...@@ -285,12 +264,12 @@ text-decoration: underline; ...@@ -285,12 +264,12 @@ text-decoration: underline;
</tr> </tr>
</table> </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"> <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"> <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" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;"> <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"> <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%;"> <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"> <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> Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
......
public/emails/welcome_on_signup.html
...@@ -48,6 +48,15 @@ color: #FFFFFF !important; ...@@ -48,6 +48,15 @@ color: #FFFFFF !important;
.better-button:active a { .better-button:active a {
color: #FFFFFF !important; 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 { body {
height: 100% !important; width: 100% !important; height: 100% !important; width: 100% !important;
} }
...@@ -88,12 +97,21 @@ text-decoration: underline; ...@@ -88,12 +97,21 @@ text-decoration: underline;
table[class="body"] .columns { 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-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 { table[class="body"] table.columns td {
width: 100% !important; width: 100% !important;
} }
table[class="body"] .columns td.six { table[class="body"] .columns td.six {
width: 50% !important; 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 { table[class="body"] table.columns td.expander {
width: 1px !important; width: 1px !important;
} }
...@@ -111,12 +129,6 @@ text-decoration: underline; ...@@ -111,12 +129,6 @@ text-decoration: underline;
img[class="fluid-centered"] { img[class="fluid-centered"] {
margin: auto !important; margin: auto !important;
} }
table[class="articles"] {
width: 90% !important;
}
table[class="article-links"] {
width: 100% !important;
}
td[class="comms-content"] { td[class="comms-content"] {
padding: 20px !important; padding: 20px !important;
} }
...@@ -156,41 +168,8 @@ text-decoration: underline; ...@@ -156,41 +168,8 @@ text-decoration: underline;
td[class="spacer mb-shorten"] { td[class="spacer mb-shorten"] {
height: 25px !important; height: 25px !important;
} }
a[class="footer-legal-links"] { .two-up td {
display: block !important; margin-bottom: 6px !important; font-size: 12px !important; line-height: 18px !important; width: 270px;
}
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;
} }
} }
</style> </style>
...@@ -242,10 +221,15 @@ text-decoration: underline; ...@@ -242,10 +221,15 @@ 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;"> <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"> <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"> <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>
<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> <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> </tr>
<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">
Welcome! Ready to start building some beautiful metric and analytic dashboards?
</td>
</tr>
</table> </table>
</td> </td>
...@@ -264,6 +248,13 @@ text-decoration: underline; ...@@ -264,6 +248,13 @@ text-decoration: underline;
</td> </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> <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> </tr>
<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">
Thank you for joining our community.
<br />
<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">The Grafana Team</p>
</td>
</tr>
</table> </table>
</td> </td>
</tr> </tr>
...@@ -276,12 +267,12 @@ text-decoration: underline; ...@@ -276,12 +267,12 @@ text-decoration: underline;
</tr> </tr>
</table> </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"> <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"> <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" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;"> <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"> <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%;"> <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"> <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> Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment