From 5276c0a0900a0886b59a8ead2346540aa381ea46 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 16 Jan 2018 03:29:11 +0100 Subject: HTML e-mails for UserMailer (#6256) - premailer gem to turn CSS into inline styles automatically - rework UserMailer templates - reword UserMailer templates --- app/javascript/styles/mailer.scss | 392 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 392 insertions(+) create mode 100644 app/javascript/styles/mailer.scss (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss new file mode 100644 index 000000000..2fd3f2661 --- /dev/null +++ b/app/javascript/styles/mailer.scss @@ -0,0 +1,392 @@ +@import 'mastodon/variables'; +@import 'fonts/roboto'; + +table, +td, +div { + box-sizing: border-box; +} + +html, +body { + width: 100% !important; + min-width: 100%; + margin: 0; + padding: 0; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +.email_body { + td, + div, + a, + span { + line-height: inherit; + } +} + +a { + &, + &:visited, + span { + text-decoration: none; + color: $ui-highlight-color; + } + + #outlook & { + padding: 0; + } +} + +img { + outline: none; + border: 0; + text-decoration: none; + -ms-interpolation-mode: bicubic; + clear: both; + line-height: 100%; +} + +table { + border-spacing: 0; + mso-table-lspace: 0; + mso-table-rspace: 0; +} + +td { + vertical-align: top; +} + +.email-table, +.content-section, +.column, +.column-cell { + width: 100%; + min-width: 100%; +} + +.email-body { + font-size: 0 !important; + line-height: 100%; + text-align: center; + padding-left: 16px; + padding-right: 16px; +} + +.email-start { + padding-top: 32px; +} + +.email-end { + padding-bottom: 32px; +} + +.email-body, +html, +body { + background-color: lighten($ui-base-color, 4%); +} + +.email-container, +.email-row, +.col-0, +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, { + font-size: 0; + display: inline-block; + width: 100%; + min-width: 100%; + min-width: 0 !important; + vertical-align: top; +} + +.content-cell { + width: 100%; + min-width: 100%; + min-width: 0 !important; +} + +.column-cell { + padding-top: 16px; + padding-bottom: 16px; + vertical-align: top; + + &.button-cell { + padding-top: 0; + } +} + +.email-container { + max-width: 632px; + margin: 0 auto; + text-align: center; +} + +.email-row { + display: block; + max-width: 600px !important; + margin: 0 auto; + text-align: center; + clear: both; +} + +.col-0 { + max-width: 50px; +} + +.col-1 { + max-width: 100px; +} + +.col-2 { + max-width: 200px; +} + +.col-3 { + max-width: 300px; +} + +.col-4 { + max-width: 400px; +} + +.col-5 { + max-width: 500px; +} + +.col-6 { + max-width: 600px; +} + +.column-cell, +.column-cell td, +p { + font-family: Helvetica, Arial, sans-serif; + + @media only screen { + font-family: 'mastodon-font-sans-serif', sans-serif !important; + } +} + +.email-body .column-cell, +.column-cell, +p { + font-size: 15px; + line-height: 23px; + color: $ui-primary-color; + mso-line-height-rule: exactly; + text-rendering: optimizelegibility; +} + +p { + display: block; + margin-top: 0; + margin-bottom: 16px; + + &.small { + font-size: 13px; + } + + &.lead { + font-size: 19px; + line-height: 27px; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: $ui-secondary-color; + margin-left: 0; + margin-right: 0; + margin-top: 20px; + margin-bottom: 8px; + padding: 0; + font-weight: 500; +} + +h1 { + font-size: 26px; + line-height: 36px; +} + +h2 { + font-size: 23px; + line-height: 30px; +} + +h3 { + font-size: 19px; + line-height: 25px; +} + +.input { + td { + background: darken($ui-base-color, 8%); + border-radius: 4px; + padding: 16px; + line-height: 20px; + mso-line-height-rule: exactly; + border-radius: 4px; + text-align: center; + font-weight: 500; + font-size: 17px; + } +} + +.content-cell, +.blank-cell { + width: 100%; + font-size: 0; + text-align: center; + vertical-align: top; + padding-left: 16px; + padding-right: 16px; +} + +.content-cell { + background-color: darken($ui-base-color, 4%); +} + +.hero { + background-color: $ui-base-color; + padding-top: 20px; +} + +.header { + border-radius: 5px 5px 0 0; + background-color: darken($ui-base-color, 8%); + + .column-cell { + text-align: center; + padding-top: 20px; + padding-bottom: 8px; + } +} + +.content-start { + padding-top: 32px; +} + +.content-end { + border-radius: 0 0 5px 5px; + padding-top: 16px; +} + +.footer { + .column-cell, + p { + color: lighten($ui-base-color, 26%); + } + + p { + margin-bottom: 0; + font-size: 13px; + + &.small { + margin-bottom: 0; + } + } + + a { + color: lighten($ui-base-color, 26%); + text-decoration: underline; + } + + img { + opacity: 0.3; + } +} + +.logo { + position: relative; + left: -4px; +} + +.button { + display: table; + margin-left: auto; + margin-right: auto; + + td { + line-height: 20px; + mso-line-height-rule: exactly; + border-radius: 4px; + text-align: center; + font-weight: 500; + font-size: 17px; + padding: 0 !important; + + a, + a span { + color: $primary-text-color; + display: block !important; + text-align: center !important; + vertical-align: top !important; + line-height: inherit !important; + } + + a { + padding: 10px 22px !important; + line-height: 26px !important; + font-weight: 500 !important; + } + } +} + +.button-default { + background-color: darken($ui-base-color, 8%); +} + +.button-primary { + background-color: $ui-highlight-color; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.padded { + padding-left: 16px; + padding-right: 16px; +} + +.hero-icon { + width: 64px; + + td { + text-align: center; + vertical-align: middle; + line-height: 100%; + mso-line-height-rule: exactly; + padding: 16px; + border-radius: 80px; + background: $success-green; + } + + img { + max-width: 32px; + width: 32px; + height: 32px; + display: block; + line-height: 100%; + } +} + +@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { + body { + min-height: 1024px !important; + } +} -- cgit