Skip to content

N
nexpie-grafana-theme
Commit 90873cfe by Trent White
Options

getting tables to behave on mobile

parent ab4f06bc
Showing with 47 additions and 45 deletions
emails/assets/css/ink.css
......@@ -44,7 +44,6 @@ img {
text-decoration:none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: left;
clear: both;
display: block;
......@@ -583,8 +582,7 @@ body.outlook p {
@media only screen and (max-width: 600px) {
table[class="body"] img {
width: auto !important;
height: auto !important;
}
table[class="body"] center {
......
emails/assets/css/style.css
......@@ -102,6 +102,10 @@ margin-bottom: 25px;
table[class="body"] .left-text-pad {
padding-right: 10px !important;
}
.logo {
margin-left: 10px;
}
}
table.better-button {
......
emails/templates/alert_notification.html
......@@ -33,7 +33,7 @@
<tr>
<td class="last">
<center>
<table class="twelve columns" >
<table class="twelve" style="width: 340px;" >
<tr>
<td class="six last">
<h5 style="font-weight: bold;">Metric name</h5>
......
emails/templates/alert_notification_example.html
......@@ -32,7 +32,7 @@
<td class="column 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; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
<center style="min-width: 580px; width: 100%">
<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" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 340px">
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
<td class="six 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: 18px; font-weight: bold; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
Metric name
......
emails/templates/layouts/default.html
......@@ -108,7 +108,7 @@ td[class="stack-column-center"] {
<table class="twelve columns">
<tr>
<td class="six sub-columns center">
<img src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="width: 200px; float: none; display: inline">
<img class="logo" src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="width: 200px; float: none; display: inline">
</td>
<td class="expander"></td>
</tr>
......@@ -128,7 +128,7 @@ td[class="stack-column-center"] {
<td height="2" class="spacer mb-shorten" style="font-size: 0; line-height: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; vertical-align: top; border: 0; background: linear-gradient(to right, #ffed00 0%, #f26529 75%); height: 2px !important" valign="top"> </td>
</tr>
<tr>
<td class="mini-centered-text" style="color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 75px; text-align: center; vertical-align: top" align="center" valign="top">
<td class="mini-centered-text" style="color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 35px; text-align: center; vertical-align: top" align="center" valign="top">
{{> body }}
<!-- container end below -->
</td>
......
public/emails/alert_notification_example.html
......@@ -10,7 +10,7 @@ body {
width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
}
img {
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; float: left; clear: both; display: block;
}
body {
color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
......@@ -79,9 +79,6 @@ a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 600px) {
table[class="body"] img {
width: auto !important; height: auto !important;
}
table[class="body"] center {
min-width: 0 !important;
}
......@@ -115,6 +112,9 @@ text-decoration: underline;
table[class="body"] table.columns td.expander {
width: 1px !important;
}
.logo {
margin-left: 10px;
}
}
@media (max-width: 600px) {
table[class="email-container"] {
......@@ -191,7 +191,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 class="six sub-columns 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; min-width: 0px; padding: 0px 10px 10px 0px; width: 50%; word-break: break-word;" align="center" valign="top">
<img src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; max-width: 100%; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
<img class="logo" src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
</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>
......@@ -211,14 +211,14 @@ text-decoration: underline;
<td height="2" class="spacer mb-shorten" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; background: linear-gradient(to right, #ffed00 0%, #f26529 75%); border: 0; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 0; font-weight: normal; height: 2px !important; hyphens: auto; line-height: 0; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; word-break: break-word;" valign="top" align="left"> </td>
</tr>
<tr style="padding: 0; vertical-align: top;" align="left">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 75px; word-break: break-word;" align="center" valign="top">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 35px; word-break: break-word;" align="center" valign="top">
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;">
<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;">
<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">
<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; /*text-align: center*/; color: #D63232; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 22px; font-style: italic; font-weight: bold; line-height: 1.3; margin: 20px 0 0; padding: 0; word-break: normal;" align="left"><img src="http://play.grafana.org/img/critical.svg" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: block; margin-right: 10px; max-width: 100%; outline: none !important; text-decoration: none !important; width: 40px;" align="left" /> [CRITICAL] Imaginary timeserie alert</h3>
<h3 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; /*text-align: center*/; color: #D63232; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 22px; font-style: italic; font-weight: bold; line-height: 1.3; margin: 20px 0 0; padding: 0; word-break: normal;" align="left"><img src="http://play.grafana.org/img/critical.svg" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: block; margin-right: 10px; outline: none !important; text-decoration: none !important; width: 40px;" align="left" /> [CRITICAL] Imaginary timeserie alert</h3>
</td>
</tr>
</table>
......@@ -246,7 +246,7 @@ text-decoration: underline;
<td class="column 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">
<center style="min-width: 580px; width: 100%;">
<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" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 340px;">
<tr style="padding: 0; vertical-align: top;" align="left">
<td class="six 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: 18px; font-weight: bold; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; width: 50%; word-break: normal;" align="left" valign="top">
Metric name
......
public/emails/invited_to_org.html
......@@ -10,7 +10,7 @@ body {
width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
}
img {
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; float: left; clear: both; display: block;
}
body {
color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
......@@ -79,9 +79,6 @@ a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 600px) {
table[class="body"] img {
width: auto !important; height: auto !important;
}
table[class="body"] center {
min-width: 0 !important;
}
......@@ -115,6 +112,9 @@ text-decoration: underline;
table[class="body"] table.columns td.expander {
width: 1px !important;
}
.logo {
margin-left: 10px;
}
}
@media (max-width: 600px) {
table[class="email-container"] {
......@@ -191,7 +191,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 class="six sub-columns 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; min-width: 0px; padding: 0px 10px 10px 0px; width: 50%; word-break: break-word;" align="center" valign="top">
<img src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; max-width: 100%; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
<img class="logo" src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
</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>
......@@ -211,7 +211,7 @@ text-decoration: underline;
<td height="2" class="spacer mb-shorten" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; background: linear-gradient(to right, #ffed00 0%, #f26529 75%); border: 0; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 0; font-weight: normal; height: 2px !important; hyphens: auto; line-height: 0; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; word-break: break-word;" valign="top" align="left"> </td>
</tr>
<tr style="padding: 0; vertical-align: top;" align="left">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 75px; word-break: break-word;" align="center" valign="top">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 35px; word-break: break-word;" align="center" valign="top">
{{Subject .Subject "{{.InvitedBy}} has added you to the {{.OrgName}} organization"}}
......
public/emails/new_user_invite.html
......@@ -10,7 +10,7 @@ body {
width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
}
img {
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; float: left; clear: both; display: block;
}
body {
color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
......@@ -79,9 +79,6 @@ a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 600px) {
table[class="body"] img {
width: auto !important; height: auto !important;
}
table[class="body"] center {
min-width: 0 !important;
}
......@@ -115,6 +112,9 @@ text-decoration: underline;
table[class="body"] table.columns td.expander {
width: 1px !important;
}
.logo {
margin-left: 10px;
}
}
@media (max-width: 600px) {
table[class="email-container"] {
......@@ -191,7 +191,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 class="six sub-columns 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; min-width: 0px; padding: 0px 10px 10px 0px; width: 50%; word-break: break-word;" align="center" valign="top">
<img src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; max-width: 100%; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
<img class="logo" src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
</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>
......@@ -211,7 +211,7 @@ text-decoration: underline;
<td height="2" class="spacer mb-shorten" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; background: linear-gradient(to right, #ffed00 0%, #f26529 75%); border: 0; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 0; font-weight: normal; height: 2px !important; hyphens: auto; line-height: 0; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; word-break: break-word;" valign="top" align="left"> </td>
</tr>
<tr style="padding: 0; vertical-align: top;" align="left">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 75px; word-break: break-word;" align="center" valign="top">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 35px; word-break: break-word;" align="center" valign="top">
{{Subject .Subject "{{.InvitedBy}} has invited you to join Grafana"}}
......
public/emails/reset_password.html
......@@ -10,7 +10,7 @@ body {
width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
}
img {
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; float: left; clear: both; display: block;
}
body {
color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
......@@ -79,9 +79,6 @@ a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 600px) {
table[class="body"] img {
width: auto !important; height: auto !important;
}
table[class="body"] center {
min-width: 0 !important;
}
......@@ -115,6 +112,9 @@ text-decoration: underline;
table[class="body"] table.columns td.expander {
width: 1px !important;
}
.logo {
margin-left: 10px;
}
}
@media (max-width: 600px) {
table[class="email-container"] {
......@@ -191,7 +191,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 class="six sub-columns 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; min-width: 0px; padding: 0px 10px 10px 0px; width: 50%; word-break: break-word;" align="center" valign="top">
<img src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; max-width: 100%; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
<img class="logo" src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
</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>
......@@ -211,7 +211,7 @@ text-decoration: underline;
<td height="2" class="spacer mb-shorten" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; background: linear-gradient(to right, #ffed00 0%, #f26529 75%); border: 0; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 0; font-weight: normal; height: 2px !important; hyphens: auto; line-height: 0; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; word-break: break-word;" valign="top" align="left"> </td>
</tr>
<tr style="padding: 0; vertical-align: top;" align="left">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 75px; word-break: break-word;" align="center" valign="top">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 35px; word-break: break-word;" align="center" valign="top">
{{Subject .Subject "Reset your Grafana password - {{.Name}}"}}
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;">
......
public/emails/signup_started.html
......@@ -10,7 +10,7 @@ body {
width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
}
img {
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; float: left; clear: both; display: block;
}
body {
color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
......@@ -79,9 +79,6 @@ a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 600px) {
table[class="body"] img {
width: auto !important; height: auto !important;
}
table[class="body"] center {
min-width: 0 !important;
}
......@@ -115,6 +112,9 @@ text-decoration: underline;
table[class="body"] table.columns td.expander {
width: 1px !important;
}
.logo {
margin-left: 10px;
}
}
@media (max-width: 600px) {
table[class="email-container"] {
......@@ -191,7 +191,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 class="six sub-columns 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; min-width: 0px; padding: 0px 10px 10px 0px; width: 50%; word-break: break-word;" align="center" valign="top">
<img src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; max-width: 100%; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
<img class="logo" src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
</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>
......@@ -211,7 +211,7 @@ text-decoration: underline;
<td height="2" class="spacer mb-shorten" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; background: linear-gradient(to right, #ffed00 0%, #f26529 75%); border: 0; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 0; font-weight: normal; height: 2px !important; hyphens: auto; line-height: 0; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; word-break: break-word;" valign="top" align="left"> </td>
</tr>
<tr style="padding: 0; vertical-align: top;" align="left">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 75px; word-break: break-word;" align="center" valign="top">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 35px; word-break: break-word;" align="center" valign="top">
{{Subject .Subject "Welcome to Grafana, please complete your sign up!"}}
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;">
......
public/emails/welcome_on_signup.html
......@@ -10,7 +10,7 @@ body {
width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
}
img {
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;
outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; float: left; clear: both; display: block;
}
body {
color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
......@@ -79,9 +79,6 @@ a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 600px) {
table[class="body"] img {
width: auto !important; height: auto !important;
}
table[class="body"] center {
min-width: 0 !important;
}
......@@ -115,6 +112,9 @@ text-decoration: underline;
table[class="body"] table.columns td.expander {
width: 1px !important;
}
.logo {
margin-left: 10px;
}
}
@media (max-width: 600px) {
table[class="email-container"] {
......@@ -191,7 +191,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 class="six sub-columns 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; min-width: 0px; padding: 0px 10px 10px 0px; width: 50%; word-break: break-word;" align="center" valign="top">
<img src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; max-width: 100%; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
<img class="logo" src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
</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>
......@@ -211,7 +211,7 @@ text-decoration: underline;
<td height="2" class="spacer mb-shorten" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; background: linear-gradient(to right, #ffed00 0%, #f26529 75%); border: 0; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 0; font-weight: normal; height: 2px !important; hyphens: auto; line-height: 0; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; word-break: break-word;" valign="top" align="left"> </td>
</tr>
<tr style="padding: 0; vertical-align: top;" align="left">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 75px; word-break: break-word;" align="center" valign="top">
<td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 35px; word-break: break-word;" align="center" valign="top">
{{Subject .Subject "Welcome to Grafana"}}
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;">
......
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