diff --git a/templates/email/email.html.twig b/templates/email/email.html.twig new file mode 100644 index 0000000000000000000000000000000000000000..d39ac046ea220a282e2dea422b100f3d286e1912 --- /dev/null +++ b/templates/email/email.html.twig @@ -0,0 +1,628 @@ +{# +/** + * @file + * Open Social theme implementation for Symfony Email. + * + * Variables: + * - body: Email body content. + * + * @see template_preprocess_email() + * + * @ingroup themeable + */ +#} +<!doctype html> +<html> +<head> + <meta name="viewport" content="width=device-width" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>Open Social</title> + <style> + /* ------------------------------------- + GLOBAL RESETS + ------------------------------------- */ + img { + border: none; + -ms-interpolation-mode: bicubic; + max-width: 100%; } + + body { + background-color: #f6f6f6; + color: #4a4a4a; + font-family: sans-serif; + -webkit-font-smoothing: antialiased; + font-size: 14px; + line-height: 1.4; + margin: 0; + padding: 0; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; } + + table { + border-collapse: separate; + mso-table-lspace: 0pt; + mso-table-rspace: 0pt; + width: 100%; } + table td { + font-family: sans-serif; + font-size: 16px; + vertical-align: top; } + + /* ------------------------------------- + BODY & CONTAINER + ------------------------------------- */ + + .body { + background-color: #f6f6f6; + width: 100%; } + + /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ + .container { + display: block; + margin: 0 auto !important; + /* makes it centered */ + max-width: 580px; + padding: 10px; + width: 580px;} + + /* This should also be a block element, so that it will fill 100% of the .container */ + .content { + box-sizing: border-box; + display: block; + margin: 0 auto; + max-width: 580px; + padding: 10px; } + + .content-wrapper { + width: 100%; + background: #fff; + box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24); } + + /* ------------------------------------- + HEADER, FOOTER, MAIN + ------------------------------------- */ + .header { + padding-top: 40px; + padding-bottom: 20px; + text-align: center; + } + + .postheader { + padding: 0 44px 25px; + font-size: 16px; + } + + .main { + width: 100%;} + + .wrapper { + box-sizing: border-box; + padding: 0 44px 40px; } + + .footer { + clear: both; + padding-top: 30px; + text-align: center; + width: 100%; } + .footer td, + .footer p, + .footer span, + .footer a { + color: #adadad; + font-size: 12px; + line-height: 21px; + text-align: center; } + + .footer .brand { + margin-bottom: 0; + } + + .footer .brand, + .footer .brand a { + font-size: 14px; + } + + .content-block { + padding-top: 10px; + } + .content-block img { + margin: 10px 0; + } + + .footer .powered-by { + padding-top: 20px; + } + /* ------------------------------------- + TYPOGRAPHY + ------------------------------------- */ + h1, + h2, + h3, + h4 { + color: #000000; + font-family: sans-serif; + font-weight: 400; + line-height: 1.4; + margin: 0; + margin-bottom: 30px; } + + h1 { + font-size: 35px; + font-weight: 300; + text-align: center; + text-transform: capitalize; } + + p, + ul, + ol { + font-family: sans-serif; + font-size: 14px; + font-weight: normal; + margin: 0; + margin-bottom: 15px; } + + p:last-child { + margin-bottom: 0; } + + p li, + ul li, + ol li { + list-style-position: inside; + margin-left: 5px; } + + ul { + padding-left: 1em; + } + + small { + font-size: 12px; } + + a { + color: {{ primary }}; + font-weight: 700; + text-decoration: underline; } + + a:hover { + text-decoration: underline; } + + .first-paragraph { + font-size: 16px; + margin-bottom: 20px; } + + .bottom-space { + margin-bottom: 40px; } + + .notification { + font-size: 18px; + margin-bottom: 20px; } + + /* ------------------------------------- + BUTTONS + ------------------------------------- */ + .btn { + box-sizing: border-box; + width: 100%; } + .btn > tbody > tr > td { + padding-bottom: 15px; } + .btn table { + width: auto; } + .btn table td { + background-color: #ffffff; + border-radius: 5px; + text-align: center; } + .btn a { + background-color: #ffffff; + border: solid 1px #784288; + border-radius: 5px; + box-sizing: border-box; + color: #784288; + cursor: pointer; + display: inline-block; + font-size: 14px; + font-weight: bold; + margin: 0; + padding: 12px 25px; + text-decoration: none; + text-transform: capitalize; } + + .btn-primary table td { + background-color: #784288; } + + .btn-primary a { + background-color: #784288; + border-color: #784288; + color: #ffffff; } + + .btn-wrapp { + margin-bottom: 25px; } + + .btn-wrapp td:nth-child(1), + .btn-wrapp td:nth-child(2) { + width: 50%; + } + + .btn-wrapp td:nth-child(1):nth-last-child(1) { + padding: 0; + width: auto; + } + + .btn-wrapp td:nth-child(odd) { + padding-left: 0; } + + .btn-wrapp td:nth-child(even) { + padding-right: 0; } + + .btn-link { + display: block; + position: relative; + margin-bottom: 15px; + border-radius: 5px; + border: 1px solid {{ primary }}; + color: {{ primary }}; + padding: 9px 25px 7px; + text-align: center; } + + .btn-link:hover { + text-decoration: none; } + + .btn-link-one { + display: inline-block; + width: 100%; + max-width: 240px; } + + .btn-link img { + position: absolute; + top: 10px; + left: 11px; } + + .btn-link-bg { + background-color: {{ primary }}; + color: #ffffff !important; } + + /* ------------------------------------- + COMMENTS, POST, MESSAGE STYLES + ------------------------------------- */ + .comments { + border-radius: 5px; + border: 1px solid #e0e0e0; + margin-bottom: 20px; + margin-top: 20px; } + + .comment { + padding: 15px 20px 0; + border-radius: 5px; } + + .reply { + padding-bottom: 20px; + margin: 20px 15px; + background: #f3f3f3; } + + .post { + padding: 15px 20px 20px; + font-size: 16px; } + + .message { + padding: 5px 20px; } + + .author-msg { + margin-bottom: 10px; } + + .post p, + .comment p { + margin: 10px 0; } + + .post-type { + font-weight: 700; + margin-bottom: 5px; + color: {{ primary }}; + } + + .post-title { + margin-bottom: 10px; + } + + .post-info { + font-size: 14px; + } + + .post-info span, + .post-info strong { + display: inline-block; + vertical-align: sub; + } + + .post-answer { + background-color: #f3f3f3; } + + .middle-block { + padding: 45px 0 0; + margin-bottom: 30px; + border-bottom: 2px solid #e0e0e0; + border-top: 2px solid #e0e0e0; } + + /* ------------------------------------- + OTHER STYLES THAT MIGHT BE USEFUL + ------------------------------------- */ + .last { + margin-bottom: 0; } + + .first { + margin-top: 0; } + + .align-center { + text-align: center; } + + .align-right { + text-align: right; } + + .align-left { + text-align: left; } + + .clear { + clear: both; } + + .mt0 { + margin-top: 0; } + + .mb0 { + margin-bottom: 0; } + + .logo { + max-height: 80px; + max-width: 160px; } + + .preheader { + color: transparent; + display: none; + height: 0; + max-height: 0; + max-width: 0; + opacity: 0; + overflow: hidden; + mso-hide: all; + visibility: hidden; + width: 0; } + + .powered-by a { + text-decoration: none; } + + .list { + display: flex; + flex-direction: column; } + + hr { + border: 0; + border-bottom: 1px solid #f6f6f6; + margin: 20px 0; } + + .sr-only { + position: absolute; + height: 1px; + width: 1px; + overflow: hidden; + word-wrap: normal; + margin: -1px; + padding: 0; + clip: rect(0, 0, 0, 0); + border: 0; } + + /* ------------------------------------- + RESPONSIVE AND MOBILE FRIENDLY STYLES + ------------------------------------- */ + @media only screen and (max-width: 620px) { + table[class=body] h1 { + font-size: 28px !important; + margin-bottom: 10px !important; } + table[class=body] p, + table[class=body] ul, + table[class=body] ol, + table[class=body] td, + table[class=body] span, + table[class=body] a { + font-size: 16px !important; } + table[class=body] .wrapper, + table[class=body] .article { + padding: 10px !important; } + table[class=body] .content { + padding: 0 !important; } + table[class=body] .container { + padding: 0 !important; + width: 100% !important; } + table[class=body] .main { + border-left-width: 0 !important; + border-radius: 0 !important; + border-right-width: 0 !important; } + table[class=body] .btn table { + width: 100% !important; } + table[class=body] .btn a { + width: 100% !important; } + table[class=body] .img-responsive { + height: auto !important; + max-width: 100% !important; + width: auto !important; }} + + /* ------------------------------------- + STYLES FOR THE NODE EMAIL + ------------------------------------- */ + .card__node-email { + border: 1px solid #adadad; + } + .card__node-email--header { + padding-top: 20px; + padding-bottom: 20px; + border-bottom: 1px solid #adadad; + } + .card__node-email--location, + .card__node-email--addtocal, + .card__node-email--header { + padding-left: 20px; + padding-right: 20px; + } + .card__node-email--location, + .card__node-email--header { + margin-bottom: 25px; + } + .card__node-email--header a, + .card__node-email--title { + font-weight: 700; + } + .card__node-email--title { + margin-bottom: 4px; + font-size: 14px; + line-height: 21px; + text-transform: uppercase; + color: {{ primary }} + } + .card__node-email--header a { + font-size: 16px; + line-height: 24px; + color: #4d4d4d; + text-decoration: underline; + } + .card__node-email--header a:hover { + color: #4d4d4d; + text-decoration: none; + } + .card__node-email--location > div { + margin-bottom: 10px; + } + .card__node-email--location > div:last-child { + margin-bottom: 0; + } + .add-to-calendar > span { + display: block; + margin-bottom: 25px; + font-weight: 700; + } + .add-to-calendar > a { + margin-bottom: 15px; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: #4d4d4d; + text-decoration: underline; + } + .add-to-calendar > a:hover { + text-decoration: none; + } + + /* ------------------------------------- + PRESERVE THESE STYLES IN THE HEAD + ------------------------------------- */ + @media all { + .ExternalClass { + width: 100%; } + .ExternalClass, + .ExternalClass p, + .ExternalClass span, + .ExternalClass font, + .ExternalClass td, + .ExternalClass div { + line-height: 100%; } + .apple-link a { + color: inherit !important; + font-family: inherit !important; + font-size: inherit !important; + font-weight: inherit !important; + line-height: inherit !important; + text-decoration: none !important; } + .btn-primary table td:hover { + background-color: #34495e !important; } + .btn-primary a:hover { + background-color: #34495e !important; + border-color: #34495e !important; } } + + </style> +</head> +<body class=""> + +<table border="0" cellpadding="0" cellspacing="0" class="body"> + <tr> + <td> </td> + <td class="container"> + <div class="content"> + + <!-- START CENTERED WHITE CONTAINER --> + <span class="preheader"></span> + + <div class="content-wrapper"> + <div class="header"> + <img src="{{ logo }}" alt="Logo" class="logo" /> + </div> + + <div class="postheader"> + {{ heading }}, + </div> + + <table class="main"> + + <!-- START MAIN CONTENT AREA --> + <tr> + <td class="wrapper"> + <table border="0" cellpadding="0" cellspacing="0"> + {% if header %} + <tr> + <td> + {{ header }} + </td> + </tr> + {% endif %} + <tr> + <td> + {{ body }} + </td> + </tr> + {% if footer %} + <tr> + <td> + {{ footer }} + </td> + </tr> + {% endif %} + + </table> + </td> + </tr> + + <!-- END MAIN CONTENT AREA --> + </table> + </div> + + <!-- START FOOTER --> + <div class="footer"> + <table border="0" cellpadding="0" cellspacing="0"> + <tr> + <td class="content-block"> + <p class="brand"> + <strong> + {% if site_link %} + <a href="{{ base_url }}">{{ site_name }}</a> + {% else %} + {{ site_name }} + {% endif %} + </strong> + </p> + {% if site_slogan %} + <span class="tagline">{{ site_slogan }}</span> + {% endif %} + {% if site_sub_slogan %} + <br /> + <span class="tagline">{{ site_sub_slogan }}</span> + {% endif %} + </td> + </tr> + <tr> + <td class="content-block powered-by"> + Copyright © {{ "now"|date("Y") }}. + </td> + </tr> + </table> + </div> + <!-- END FOOTER --> + </div> + </td> + <td> </td> + </tr> +</table> +</body> +</html> diff --git a/templates/email/swiftmailer.html.twig b/templates/email/swiftmailer.html.twig index 59db5ba39e35b214c8f867e65529196416e516cb..a1fbca8e96aefab8321018be3c8329e94ed00a94 100644 --- a/templates/email/swiftmailer.html.twig +++ b/templates/email/swiftmailer.html.twig @@ -410,15 +410,15 @@ margin: 20px 0; } .sr-only { - position: absolute; - height: 1px; - width: 1px; - overflow: hidden; - word-wrap: normal; - margin: -1px; - padding: 0; - clip: rect(0, 0, 0, 0); - border: 0; } + position: absolute; + height: 1px; + width: 1px; + overflow: hidden; + word-wrap: normal; + margin: -1px; + padding: 0; + clip: rect(0, 0, 0, 0); + border: 0; } /* ------------------------------------- RESPONSIVE AND MOBILE FRIENDLY STYLES @@ -577,11 +577,11 @@ <td class="wrapper"> <table border="0" cellpadding="0" cellspacing="0"> {% if header %} - <tr> - <td> - {{ header }} - </td> - </tr> + <tr> + <td> + {{ header }} + </td> + </tr> {% endif %} <tr> <td>