Changeset 1829fbf in OpenWorkouts-current for ow/static/css/main.css

Timestamp:

Feb 20, 2019, 9:31:22 PM (5 years ago)

Author:

Borja Lopez <borja@…>

Branches:

current, feature/docs, master

Children:

38171c6

Parents:

42d775c

Message:

(#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

File:

• ow/static/css/main.css (modified) (3 diffs)

ow/static/css/main.css

@@ -1492 +1492 @@
   justify-content: center;
   align-items: center;
-  min-height: calc(100vh - 98px);
+  /* dynamic min-height based on window height does not work well
+     with premailer and generating the proper html with styles for mails */
+  min-height: 400px;
   padding: 1em 0;
-  color: #e1e1e1;
+  /* RGB calculated color does not work well with premailer and
+       generating the proper html with styles for mails */
+  color: #151515;
 }
 .verify-account-content .info {
   max-width: 580px;
-  background-color: rgba(21, 21, 21, 0.6);
+  /* RGB calculated color does not work well with premailer and
+         generating the proper html with styles for mails */
+  background-color: #e1e1e1;
   border-radius: 6px;
   padding: 2em 1.5em;
@@ -1506 +1512 @@
 }
 .verify-account-content a {
-  color: #e1e1e1;
+  /* RGB calculated color does not work well with premailer and
+           generating the proper html with styles for mails */
+  color: #151515;
   font-size: 13px;
   text-decoration: none;
@@ -1512 +1520 @@
 }
 .verify-account-content a:hover {
-  color: white;
+  color: #151515;
 }
 .verify-account-content .button {
-  transition: all 500ms ease-in-out;
   background-color: #EE4056;
+  background: #EE4056;
   color: white;
   text-transform: uppercase;
 }
 .verify-account-content .button:hover {
-  background-color: #e6152f;
-}
+  background-color: #F60002;
+}