redash/templates/emails/layout.html (471 lines of code) (raw):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<title>{{ subject }}</title>
<style type="text/css" data-premailer="ignore">
#outlook a{
padding: 0;
}
body{
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-weight: 400;
margin: 0;
padding: 0;
}
.ReadMsgBody{
width: 100%;
}
.ExternalClass{
width: 100%;
}
img {
border: 0;
max-width: 100%;
height: auto;
outline: none;
display: inline-block;
margin: 0;
padding: 0;
text-decoration: none;
line-height: 100%;
}
#backgroundTable{
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
</style>
<style type="text/css">
/**
* Generic
*/
.main {
font-family: Helvetica, Arial, sans-serif;
letter-spacing: 0;
}
.main .main-td {
padding: 40px 60px;
border: 1px solid #dddddd;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
border-radius: 2px;
}
table {
border-spacing: 0;
border-collapse: separate;
table-layout: fixed;
}
td {
font-size: 16px;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
a {
border: none;
outline: none !important;
}
/**
* Header
*/
.header td img {
padding: 15px 0 30px;
text-align: left;
}
.header .logo {
text-align: left;
}
/**
* Content
*/
.content-td {
font-size: 15px;
line-height: 22px;
padding: 0;
color: #525252;
}
.content-td > :first-child {
margin-top: 0;
}
.content-td h1 {
font-size: 26px;
line-height: 33px;
color: #282F33;
margin-bottom: 7px;
margin-top: 30px;
font-weight: normal;
}
.content-td h2 {
font-size: 18px;
font-weight: bold;
color: #282F33;
margin-top: 30px;
margin-bottom: 7px;
}
.content-td h1 + h2 {
margin-top: 0px !important;
}
.content-td h2 + h1 {
margin-top: 0px !important;
}
.content-td h3 ,
.content-td h4 ,
.content-td h5 {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.content-td p {
margin: 0 0 17px 0;
line-height: 1.5;
}
.content-td p img,
.content-td h1 img,
.content-td h2 img,
.content-td li img,
.content-td .intercom-h2b-button img {
margin: 0;
padding: 0;
}
.content-td p.intro {
font-size: 20px;
line-height: 30px;
}
.content-td blockquote {
margin: 40px 0;
font-style: italic;
color: #8C8C8C;
font-size: 18px;
text-align: center;
padding: 0 30px;
font-family: Georgia, sans-serif;
quotes: none;
}
.content-td blockquote a {
color: #8C8C8C;
}
.content-td ul {
list-style: disc;
margin: 0 0 20px 40px;
padding: 0;
}
.content-td ol {
list-style: decimal;
margin: 0 0 20px 40px;
padding: 0;
}
.content-td img {
max-width: 100%;
margin: 17px 0;
}
.content-td .intercom-container {
margin-bottom: 16px;
}
.content-td hr {
border: none;
border-top: 1px solid #DDD;
margin: 50px 30% 50px 30%;
}
.content-td table {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
}
.content-td td,
.content-td th {
padding: 5px 7px;
border: 1px solid #DADADA;
text-align: left;
vertical-align: top;
}
.content-td th {
font-weight: bold;
background: #F6F6F6;
}
.content-td a {
color: #1251BA;
}
.content td.content-td table.intercom-container {
margin: 17px 0;
}
.content td.content-td table.intercom-container.intercom-align-center {
margin-left: auto;
margin-right: auto;
}
.content td.content-td table.intercom-container td {
background-color: #0071b2;
padding: 12px 35px;
border-radius: 3px;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
border: none;
}
.content td.content-td table.intercom-container .intercom-h2b-button {
display: inline-block;
color: white;
font-weight: bold;
font-size: 14px;
text-decoration: none;
background-color: #0071b2;
border: none !important;
border-radius: 3px;
}
.footer-td {
text-align: center;
padding: 21px 30px 15px;
}
.footer-td p ,
.footer-td a {
font-size: 12px;
color: #b7b7b7;
text-decoration: none;
font-weight: 300;
}
.footer-td p {
margin: 0 0 6px 0;
}
.footer-td p.address {
margin-top: 9px;
line-height: 1.5em;
}
.footer-td p.powered-by {
margin-top: 18px;
}
.footer-td p.unsub {
margin: 0;
}
.footer .unsub a {
text-decoration: underline;
display: block;
margin: 12px 0 0;
}
p.unsub a {
text-decoration: underline;
}
.footer-td p.powered-by a {
font-weight: bold;
}
.footer-td textarea {
text-decoration: none;
font-size: 12px;
color: #b7b7b7;
font-family: Helvetica, Arial, sans-serif;
padding: 9px 0;
font-weight: 300;
line-height: normal;
}
a.intercom-h2b-button {
background-color: #0071b2;
font-size: 14px;
color: #FFF;
font-weight: bold;
border-radius: 3px;
display: inline-block;
text-decoration: none;
}
</style>
<style type="text/css" data-premailer="ignore">
@media screen and (max-width: 595px) {
body {
padding: 10px !important;
}
.main {
width: 100% !important;
}
.main .main-td {
padding: 20px !important;
}
.header td {
text-align: center;
}
}
.content-td blockquote + * {
margin-top: 20px !important;
}
.ExternalClass .content-td h1 {
padding: 20px 0 !important;
}
.ExternalClass .content-td h2 {
padding: 0 0 5px !important;
}
.ExternalClass .content-td p {
padding: 10px 0 !important;
}
.ExternalClass .content-td .intercom-container {
padding: 5px 0 !important;
}
.ExternalClass .content-td hr + * {
padding-top: 30px !important;
}
.ExternalClass .content-td ol ,
.ExternalClass .content-td ul {
padding: 0 0 20px 40px !important;
margin: 0 !important;
}
.ExternalClass .content-td ol li,
.ExternalClass .content-td ul li {
padding: 3px 0 !important;
margin: 0 !important;
}
.ExternalClass table .footer-td p {
padding: 0 0 6px 0 !important;
margin: 0 !important;
}
.ExternalClass table .footer-td p.powered-by ,
.ExternalClass table .footer-td p.unsub {
padding-top: 15px;
}
</style>
<style type="text/css">
.intercom-align-right {
text-align: right !important;
}
.intercom-align-center {
text-align: center !important;
}
.intercom-align-left {
text-align: left !important;
}
/* Over-ride for RTL */
.right-to-left .intercom-align-right{
text-align: left !important;
}
.right-to-left .intercom-align-left{
text-align: right !important;
}
.right-to-left .intercom-align-left {
text-align:right !important;
}
.right-to-left li {
text-align:right !important;
direction: rtl;
}
.right-to-left .intercom-align-left img,
.right-to-left .intercom-align-left .intercom-h2b-button {
margin-left: 0 !important;
}
.intercom-attachment,
.intercom-attachments,
.intercom-attachments td,
.intercom-attachments th,
.intercom-attachments tr,
.intercom-attachments tbody,
.intercom-attachments .icon,
.intercom-attachments .icon img {
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
.intercom-attachments {
margin: 10px 0 !important;
}
.intercom-attachments .icon,
.intercom-attachments .icon img {
width: 16px !important;
height: 16px !important;
}
.intercom-attachments .icon {
padding-right: 5px !important;
}
.intercom-attachment {
display: inline-block !important;
margin-bottom: 5px !important;
}
.intercom-interblocks-content-card {
width: 334px;
max-height: 136px;
max-width: 100%;
overflow: hidden;
border-radius: 20px;
font-size: 16px;
border: 1px solid #e0e0e0;
}
.intercom-interblocks-article-icon {
width: 22.5%;
height: 136px;
float: left;
background-color: #fafafa;
background-image: url('https://static.intercomassets.com/assets/article_book-1a595be287f73c0d02f548f513bfc831.png');
background-repeat: no-repeat;
background-size: 32px;
background-position: center;
}
.intercom-interblocks-article-text {
width: 77.5%;
float: right;
background-color: #fff;
}
.intercom-interblocks-article-title {
color: #455a64;
height: 40px;
margin: 10px 15px;
line-height: 1.3;
font-weight: bold;
overflow: hidden;
}
.intercom-interblocks-article-body {
color: #74848b;
height: 30px;
margin: 10px 15px;
font-size: 12px;
font-weight: 500;
line-height: 1.3;
overflow: hidden;
}
.intercom-interblocks-article-author {
margin: 10px 15px;
height: 24px;
line-height: normal;
}
.intercom-interblocks-article-author-avatar {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
}
img.intercom-interblocks-article-author-avatar-image {
width: 16px;
height: 16px;
border-radius: 50%;
margin: 0;
vertical-align: top;
}
.intercom-interblocks-article-author-name {
color: #74848b;
line-height: 1.2;
margin: 0 0 0 5px;
display: inline-block;
font-size: 12px;
font-weight: 500;
overflow: hidden;
vertical-align: middle;
}
</style>
</head>
<body style="background: #f9f9f9; margin: 0px; padding: 20px" bgcolor="f9f9f9">
<table cellspacing="0" border="0" cellpadding="0" align="center" width="595" bgcolor="white" class="main" style="border-collapse: separate; border-spacing: 0; font-family: Helvetica, Arial, sans-serif; letter-spacing: 0; table-layout: fixed">
<tr>
<td class="main-td" style="border: 1px solid #dddddd; border-radius: 2px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); font-family: Helvetica, Arial, sans-serif; font-size: 16px; padding: 40px 60px">
<table width="100%" class="header" style="border-collapse: separate; border-spacing: 0; table-layout: fixed">
<tr>
<td class="logo" style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; padding: 0; text-align: left" align="left">
<img src="https://uploads.intercomcdn.com/i/o/4065702/d84531c526da5329fd25542a/File1454836961491" width="165" height="86" class="featured" style="padding: 15px 0 30px; text-align: left">
</td>
</tr>
</table>
<table width="100%" class="content" style="border-collapse: separate; border-spacing: 0; table-layout: fixed">
<tr>
<td class="content-td" style="color: #525252; font-family: Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; padding: 0">
{% block content %}
{% endblock %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</html>