source: OpenWorkouts-current/ow/static/less/pages/verify_account.less @ 1829fbf

currentfeature/docs
Last change on this file since 1829fbf was 1829fbf, checked in by Borja Lopez <borja@…>, 5 years ago

(#61) Several fixes for the multipart/alternative (text+html) version of the verify
your account email:

  • Use premailer [1] to embed all styles into the body of the html part of the email (ensuring the styles are rendered correctly in most email clients)
  • Fixed some styles (RGB colors, transparencies, etc don't work in mail clients)
  • Ensure the different bodies (text and html) have the proper content type and charset set.

[1] https://pypi.org/project/premailer

  • Property mode set to 100644
File size: 1.3 KB
Line 
1.verify-account-content {
2    background-position: center;
3    background-size: cover;
4    display: flex;
5    justify-content: center;
6    align-items: center;
7    /* dynamic min-height based on window height does not work well
8     with premailer and generating the proper html with styles for mails */
9    min-height: 400px;
10    padding: 1em 0;
11    /* RGB calculated color does not work well with premailer and
12       generating the proper html with styles for mails */
13    color: #151515;
14
15    .info {
16        max-width: 580px;
17        /* RGB calculated color does not work well with premailer and
18         generating the proper html with styles for mails */
19        background-color: #e1e1e1;
20        border-radius: 6px;
21        padding: 2em  1.5em;
22        div {
23            margin-bottom: 1.5em;
24        }
25    }
26
27    a {
28        /* RGB calculated color does not work well with premailer and
29           generating the proper html with styles for mails */
30        color: #151515;
31        font-size: 13px;
32        text-decoration: none;
33        margin-right: .75em;
34        &:hover {
35            color: #151515;
36        }
37    }
38
39    .button {
40        background-color: @color-app;
41        background: @color-app;
42        color: white;
43        text-transform: uppercase;
44        &:hover {
45            background-color: @color-app-important;
46        }
47    }
48
49}
Note: See TracBrowser for help on using the repository browser.