From a1e125ccc703086c7cb5fa5150a06a1b721d00f3 Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Thu, 18 Sep 2014 17:06:00 +0800 Subject: [PATCH] css-mailer/mailer.css --- css-mailer/mailer.css | 560 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 560 insertions(+) create mode 100644 css-mailer/mailer.css diff --git a/css-mailer/mailer.css b/css-mailer/mailer.css new file mode 100644 index 0000000000..7a7870f7d2 --- /dev/null +++ b/css-mailer/mailer.css @@ -0,0 +1,560 @@ +/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */ +#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */ +.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */ +.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */ +body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */ +table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */ +img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */ + +/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */ +body{margin:0; padding:0;} +img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;} +table{border-collapse:collapse !important;} +body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;} + +/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */ + +/* ========== Page Styles ========== */ + +.roo-m-body-cell {padding:20px;} +.roo-m-body-container{width:600px;} + +/** +* @tab Page +* @section background style +* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding. +* @theme page +*/ +body, .roo-m-body-table{ + /*@editable*/ background-color:#DEE0E2; +} + +/** +* @tab Page +* @section background style +* @tip Set the background color and top border for your email. You may want to choose colors that match your company's branding. +* @theme page +*/ +.roo-m-body-cell{ + /*@editable*/ border-top:4px solid #BBBBBB; +} + +/** +* @tab Page +* @section email border +* @tip Set the border for your email. +*/ +.roo-m-body-container{ + /*@editable*/ border:1px solid #BBBBBB; +} + +/** +* @tab Page +* @section heading 1 +* @tip Set the styling for all first-level headings in your emails. These should be the largest of your headings. +* @style heading 1 +*/ +h1{ + /*@editable*/ color:#202020 !important; + display:block; + /*@editable*/ font-family:Helvetica; + /*@editable*/ font-size:26px; + /*@editable*/ font-style:normal; + /*@editable*/ font-weight:bold; + /*@editable*/ line-height:100%; + /*@editable*/ letter-spacing:normal; + margin-top:0; + margin-right:0; + margin-bottom:10px; + margin-left:0; + /*@editable*/ text-align:left; +} + +/** +* @tab Page +* @section heading 2 +* @tip Set the styling for all second-level headings in your emails. +* @style heading 2 +*/ +h2{ + /*@editable*/ color:#404040 !important; + display:block; + /*@editable*/ font-family:Helvetica; + /*@editable*/ font-size:20px; + /*@editable*/ font-style:normal; + /*@editable*/ font-weight:bold; + /*@editable*/ line-height:100%; + /*@editable*/ letter-spacing:normal; + margin-top:0; + margin-right:0; + margin-bottom:10px; + margin-left:0; + /*@editable*/ text-align:left; +} + +/** +* @tab Page +* @section heading 3 +* @tip Set the styling for all third-level headings in your emails. +* @style heading 3 +*/ +h3{ + /*@editable*/ color:#606060 !important; + display:block; + /*@editable*/ font-family:Helvetica; + /*@editable*/ font-size:16px; + /*@editable*/ font-style:italic; + /*@editable*/ font-weight:normal; + /*@editable*/ line-height:100%; + /*@editable*/ letter-spacing:normal; + margin-top:0; + margin-right:0; + margin-bottom:10px; + margin-left:0; + /*@editable*/ text-align:left; +} + +/** +* @tab Page +* @section heading 4 +* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings. +* @style heading 4 +*/ +h4{ + /*@editable*/ color:#808080 !important; + display:block; + /*@editable*/ font-family:Helvetica; + /*@editable*/ font-size:14px; + /*@editable*/ font-style:italic; + /*@editable*/ font-weight:normal; + /*@editable*/ line-height:100%; + /*@editable*/ letter-spacing:normal; + margin-top:0; + margin-right:0; + margin-bottom:10px; + margin-left:0; + /*@editable*/ text-align:left; +} + +/* ========== Header Styles ========== */ + +/** +* @tab Header +* @section preheader style +* @tip Set the background color and bottom border for your email's preheader area. +* @theme header +*/ +.roo-m-preheader{ + /*@editable*/ background-color:#F4F4F4; + /*@editable*/ border-bottom:1px solid #CCCCCC; +} + +/** +* @tab Header +* @section preheader text +* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read. +*/ +.roo-m-preheader-content{ + /*@editable*/ color:#808080; + /*@editable*/ font-family:Helvetica; + /*@editable*/ font-size:10px; + /*@editable*/ line-height:125%; + /*@editable*/ text-align:left; +} + +/** +* @tab Header +* @section preheader link +* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text. +*/ +.roo-m-preheader-content a:link, +.roo-m-preheader-content a:visited, +.roo-m-preheader-content a .yshortcuts /* Yahoo! Mail Override */ +{ + /*@editable*/ color:#606060; + /*@editable*/ font-weight:normal; + /*@editable*/ text-decoration:underline; +} + +/** +* @tab Header +* @section header style +* @tip Set the background color and borders for your email's header area. +* @theme header +*/ +.roo-m-header { + /*@editable*/ background-color:#F4F4F4; + /*@editable*/ border-top:1px solid #FFFFFF; + /*@editable*/ border-bottom:1px solid #CCCCCC; +} + +/** +* @tab Header +* @section header text +* @tip Set the styling for your email's header text. Choose a size and color that is easy to read. +*/ +.roo-m-header-content{ + /*@editable*/ color:#505050; + /*@editable*/ font-family:Helvetica; + /*@editable*/ font-size:20px; + /*@editable*/ font-weight:bold; + /*@editable*/ line-height:100%; + /*@editable*/ padding-top:0; + /*@editable*/ padding-right:0; + /*@editable*/ padding-bottom:0; + /*@editable*/ padding-left:0; + /*@editable*/ text-align:left; + /*@editable*/ vertical-align:middle; +} + +/** +* @tab Header +* @section header link +* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text. +*/ +.roo-m-header-content a:link, +.roo-m-header-content a:visited, +.roo-m-header-content a .yshortcuts /* Yahoo! Mail Override */ +{ + /*@editable*/ color:#EB4102; + /*@editable*/ font-weight:normal; + /*@editable*/ text-decoration:underline; +} + +.roo-m-header-content > img { + height:auto; + max-width:600px; +} + +/* ========== Body Styles ========== */ + +/** +* @tab Body +* @section body style +* @tip Set the background color and borders for your email's body area. +*/ +.roo-m-body { + /*@editable*/ background-color:#F4F4F4; + /*@editable*/ border-top:1px solid #FFFFFF; + /*@editable*/ border-bottom:1px solid #CCCCCC; +} + +/** +* @tab Body +* @section body text +* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read. +* @theme main +*/ +.roo-m-body-content { + /*@editable*/ color:#505050; + /*@editable*/ font-family:Helvetica; + /*@editable*/ font-size:16px; + /*@editable*/ line-height:150%; + padding-top:20px; + padding-right:20px; + padding-bottom:20px; + padding-left:20px; + /*@editable*/ text-align:left; +} + +/** +* @tab Body +* @section body link +* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text. +*/ +.roo-m-body-content a:link, +.roo-m-body-content a:visited, +.roo-m-body-content a .yshortcuts /* Yahoo! Mail Override */ +{ + /*@editable*/ color:#EB4102; + /*@editable*/ font-weight:normal; + /*@editable*/ text-decoration:underline; +} + +.roo-m-body-content img{ + display:inline; + height:auto; + max-width:560px; +} + +/* ========== Column Styles ========== */ + +.roo-m-row {width:260px;} + +/** +* @tab Columns +* @section column style +* @tip Set the background color and borders for your email's column area. +*/ +.roo-m-row { + /*@editable*/ background-color:#F4F4F4; + /*@editable*/ border-top:1px solid #FFFFFF; + /*@editable*/ border-bottom:1px solid #CCCCCC; +} + +/** +* @tab Columns +* @section left column text +* @tip Set the styling for your email's left column content text. Choose a size and color that is easy to read. +*/ +.roo-m-column-left-content{ + /*@editable*/ color:#505050; + /*@editable*/ font-family:Helvetica; + /*@editable*/ font-size:14px; + /*@editable*/ line-height:150%; + padding-top:0; + padding-right:20px; + padding-bottom:20px; + padding-left:20px; + /*@editable*/ text-align:left; +} + +/** +* @tab Columns +* @section left column link +* @tip Set the styling for your email's left column content links. Choose a color that helps them stand out from your text. +*/ +.roo-m-column-left-content a:link, +.roo-m-column-left-content a:visited, +.roo-m-column-left-content a .yshortcuts /* Yahoo! Mail Override */ +{ + /*@editable*/ color:#EB4102; + /*@editable*/ font-weight:normal; + /*@editable*/ text-decoration:underline; +} + +/** +* @tab Columns +* @section right column text +* @tip Set the styling for your email's right column content text. Choose a size and color that is easy to read. +*/ +.roo-m-column-right-content{ + /*@editable*/ color:#505050; + /*@editable*/ font-family:Helvetica; + /*@editable*/ font-size:14px; + /*@editable*/ line-height:150%; + padding-top:0; + padding-right:20px; + padding-bottom:20px; + padding-left:20px; + /*@editable*/ text-align:left; +} + +/** +* @tab Columns +* @section right column link +* @tip Set the styling for your email's right column content links. Choose a color that helps them stand out from your text. +*/ +.roo-m-column-right-content a:link, +.roo-m-column-right-content a:visited, +.roo-m-column-right-content a .yshortcuts /* Yahoo! Mail Override */{ + /*@editable*/ color:#EB4102; + /*@editable*/ font-weight:normal; + /*@editable*/ text-decoration:underline; +} + +.roo-m-column-left-content img, +.roo-m-column-right-content img{ + display:inline; + height:auto; + max-width:260px; +} + +/* ========== Footer Styles ========== */ + +/** +* @tab Footer +* @section footer style +* @tip Set the background color and borders for your email's footer area. +* @theme footer +*/ +.roo-m-footer { + /*@editable*/ background-color:#F4F4F4; + /*@editable*/ border-top:1px solid #FFFFFF; +} + +/** +* @tab Footer +* @section footer text +* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read. +* @theme footer +*/ +.roo-m-footer-content { + /*@editable*/ color:#808080; + /*@editable*/ font-family:Helvetica; + /*@editable*/ font-size:10px; + /*@editable*/ line-height:150%; + padding-top:20px; + padding-right:20px; + padding-bottom:20px; + padding-left:20px; + /*@editable*/ text-align:left; +} + +/** +* @tab Footer +* @section footer link +* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text. +*/ +.roo-m-footer-content a:link, +.roo-m-footer-content a:visited, +.roo-m-footer-content a .yshortcuts, /* Yahoo! Mail Override */ +.roo-m-footer-content a span /* Yahoo! Mail Override */ +{ + /*@editable*/ color:#606060; + /*@editable*/ font-weight:normal; + /*@editable*/ text-decoration:underline; +} + +/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */ + +@media only screen and (max-width: 480px){ + /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */ + body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */ + body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */ + + /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */ + .roo-m-body-cell{padding:10px !important;} + + /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */ + + /* ======== Page Styles ======== */ + + /** + * @tab Mobile Styles + * @section template width + * @tip Make the template fluid for portrait or landscape view adaptability. If a fluid layout doesn't work for you, set the width to 300px instead. + */ + + .roo-m-body-contaner{ + max-width:600px !important; + /*@editable*/ width:100% !important; + } + + /** + * @tab Mobile Styles + * @section heading 1 + * @tip Make the first-level headings larger in size for better readability on small screens. + */ + h1{ + /*@editable*/ font-size:24px !important; + /*@editable*/ line-height:100% !important; + } + + /** + * @tab Mobile Styles + * @section heading 2 + * @tip Make the second-level headings larger in size for better readability on small screens. + */ + h2{ + /*@editable*/ font-size:20px !important; + /*@editable*/ line-height:100% !important; + } + + /** + * @tab Mobile Styles + * @section heading 3 + * @tip Make the third-level headings larger in size for better readability on small screens. + */ + h3{ + /*@editable*/ font-size:18px !important; + /*@editable*/ line-height:100% !important; + } + + /** + * @tab Mobile Styles + * @section heading 4 + * @tip Make the fourth-level headings larger in size for better readability on small screens. + */ + h4{ + /*@editable*/ font-size:16px !important; + /*@editable*/ line-height:100% !important; + } + + /* ======== Header Styles ======== */ + + .roo-m-preheader{display:none !important;} /* Hide the template preheader to save space */ + + /** + * @tab Mobile Styles + * @section header image + * @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead. + */ + .roo-m-header > img{ + height:auto !important; + /*@editable*/ max-width:600px !important; + /*@editable*/ width:100% !important; + } + + /** + * @tab Mobile Styles + * @section header text + * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px. + */ + .roo-m-header-content{ + /*@editable*/ font-size:20px !important; + /*@editable*/ line-height:125% !important; + } + + /* ======== Body Styles ======== */ + + /** + * @tab Mobile Styles + * @section body text + * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px. + */ + .roo-m-body-content + { + /*@editable*/ font-size:18px !important; + /*@editable*/ line-height:125% !important; + } + + /* ======== Column Styles ======== */ + + .roo-m-row {display:block !important; width:100% !important;} + + /** + * @tab Mobile Styles + * @section column image + * @tip Make the column image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead. + */ + .roo-m-column-image { + height:auto !important; + /*@editable*/ max-width:480px !important; + /*@editable*/ width:100% !important; + } + + /** + * @tab Mobile Styles + * @section left column text + * @tip Make the left column content text larger in size for better readability on small screens. We recommend a font size of at least 16px. + */ + .roo-m-column-left-content{ + /*@editable*/ font-size:16px !important; + /*@editable*/ line-height:125% !important; + } + + /** + * @tab Mobile Styles + * @section right column text + * @tip Make the right column content text larger in size for better readability on small screens. We recommend a font size of at least 16px. + */ + .roo-m-column-right-content{ + /*@editable*/ font-size:16px !important; + /*@editable*/ line-height:125% !important; + } + + /* ======== Footer Styles ======== */ + + /** + * @tab Mobile Styles + * @section footer text + * @tip Make the body content text larger in size for better readability on small screens. + */ + .roo-m-column-footer-content{ + /*@editable*/ font-size:14px !important; + /*@editable*/ line-height:115% !important; + } + + .roo-m-column-footer-content a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */ +} \ No newline at end of file -- 2.39.2