1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-09 01:17:06 +02:00

fix-css-update-for-CR-email-template (#6186)

Fix: removing a css line that was blocking some style
Improvement: clean up some unnecessary comments 

Before the fix:

![image](https://github.com/Unleash/unleash/assets/103567375/7a94c20d-ea7c-40cd-b207-128ab5674e97)


after:

![image](https://github.com/Unleash/unleash/assets/103567375/11ebb46e-c724-4b38-91f6-f2f3e4aff9e6)
This commit is contained in:
Nicolae Socaciu 2024-02-13 03:16:25 +02:00 committed by GitHub
parent 5c2998ab43
commit 12d2a1ba63
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 126 additions and 171 deletions

View File

@ -31,17 +31,9 @@
* @theme page * @theme page
*/ */
body, #bodyTable{ body, #bodyTable{
/*@editable*/ background:#F7F7FA; background:#F7F7FA;
} }
/**
* @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
*/
#bodyCell{
}
/** /**
* @tab Page * @tab Page
@ -49,7 +41,7 @@
* @tip Set the border for your email. * @tip Set the border for your email.
*/ */
#templateContainer{ #templateContainer{
/*@editable*/ border:2px solid #817AFE; border:2px solid #817AFE;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
padding: 48px; padding: 48px;
@ -62,14 +54,14 @@
* @style heading 1 * @style heading 1
*/ */
h1{ h1{
/*@editable*/ color:#202021 !important; color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:24px; font-size:24px;
/*@editable*/ font-style:normal; font-style:normal;
/*@editable*/ font-weight:bold; font-weight:bold;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ letter-spacing:normal; letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:32px; margin-bottom:32px;
@ -83,19 +75,19 @@
* @style heading 2 * @style heading 2
*/ */
h2{ h2{
/*@editable*/ color:#202021 !important; color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:20px; font-size:20px;
/*@editable*/ font-style:normal; font-style:normal;
/*@editable*/ font-weight:bold; font-weight:bold;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ letter-spacing:normal; letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:24px; margin-bottom:24px;
margin-left:0; margin-left:0;
/*@editable*/ text-align:left; text-align:left;
} }
/** /**
@ -105,19 +97,19 @@
* @style heading 3 * @style heading 3
*/ */
h3{ h3{
/*@editable*/ color:#202021 !important; color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:16px; font-size:16px;
/*@editable*/ font-style:normal; font-style:normal;
/*@editable*/ font-weight:bold; font-weight:bold;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ letter-spacing:normal; letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:16px; margin-bottom:16px;
margin-left:0; margin-left:0;
/*@editable*/ text-align:left; text-align:left;
} }
/** /**
@ -127,19 +119,19 @@
* @style heading 4 * @style heading 4
*/ */
h4{ h4{
/*@editable*/ color:#202021 !important; color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:14px; font-size:14px;
/*@editable*/ font-style:normal; font-style:normal;
/*@editable*/ font-weight:normal; font-weight:normal;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ letter-spacing:normal; letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:16px; margin-bottom:16px;
margin-left:0; margin-left:0;
/*@editable*/ text-align:left; text-align:left;
} }
/* ========== Header Styles ========== */ /* ========== Header Styles ========== */
@ -151,7 +143,7 @@
* @theme header * @theme header
*/ */
#templateHeader{ #templateHeader{
/*@editable*/ color:#6E6E70; color:#6E6E70;
} }
/** /**
@ -160,17 +152,17 @@
* @tip Set the styling for your email's header text. Choose a size and color that is easy to read. * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/ */
.headerContent{ .headerContent{
/*@editable*/ color:#6E6E70; color:#6E6E70;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:20px; font-size:20px;
/*@editable*/ font-weight:bold; font-weight:bold;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ padding-top:0; padding-top:0;
/*@editable*/ padding-right:0; padding-right:0;
/*@editable*/ padding-bottom:0; padding-bottom:0;
/*@editable*/ padding-left:0; padding-left:0;
/*@editable*/ text-align:left; text-align:left;
/*@editable*/ vertical-align:middle; vertical-align:middle;
} }
/** /**
@ -179,13 +171,11 @@
* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text. * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/ */
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{ .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#fff; color:#fff;
/*@editable*/ font-weight:normal; font-weight:normal;
/*@editable*/ text-decoration:underline; text-decoration:underline;
} }
#headerImage{
}
/* ========== Body Styles ========== */ /* ========== Body Styles ========== */
@ -208,11 +198,11 @@
* @theme main * @theme main
*/ */
.bodyContent{ .bodyContent{
/*@editable*/ color:#202021; color:#202021;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:16px; font-size:16px;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ text-align:left; text-align:left;
} }
.bodyContent img{ .bodyContent img{
@ -244,15 +234,6 @@
/* ========== Footer Styles ========== */ /* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter{
}
/** /**
* @tab Footer * @tab Footer
* @section footer text * @section footer text
@ -260,11 +241,11 @@
* @theme footer * @theme footer
*/ */
.footerContent{ .footerContent{
/*@editable*/ color:#6E6E70; color:#6E6E70;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:14px; font-size:14px;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ text-align:left; text-align:left;
} }
.footerContent a { .footerContent a {
@ -286,9 +267,9 @@
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text. * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/ */
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{ .footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#615BC2; color:#615BC2;
/*@editable*/ font-weight:normal; font-weight:normal;
/*@editable*/ text-decoration:underline; text-decoration:underline;
} }
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */ /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@ -312,13 +293,10 @@
*/ */
#templateContainer{ #templateContainer{
max-width:600px !important; max-width:600px !important;
/*@editable*/ width:100% !important; width:100% !important;
padding: 32px; padding: 32px;
} }
/* ======== Header Styles ======== */
/* ======== Body Styles ======== */ /* ======== Body Styles ======== */

View File

@ -15,7 +15,6 @@
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */ /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;} body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;} 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;} body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */ /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
@ -32,17 +31,9 @@
* @theme page * @theme page
*/ */
body, #bodyTable{ body, #bodyTable{
/*@editable*/ background-color:#F7F7FA; background-color:#F7F7FA;
} }
/**
* @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
*/
#bodyCell{
}
/** /**
* @tab Page * @tab Page
@ -50,7 +41,7 @@
* @tip Set the border for your email. * @tip Set the border for your email.
*/ */
#templateContainer{ #templateContainer{
/*@editable*/ border:2px solid #817AFE; border:2px solid #817AFE;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
padding: 48px; padding: 48px;
@ -63,14 +54,14 @@
* @style heading 1 * @style heading 1
*/ */
h1{ h1{
/*@editable*/ color:#202021 !important; color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:24px; font-size:24px;
/*@editable*/ font-style:normal; font-style:normal;
/*@editable*/ font-weight:bold; font-weight:bold;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ letter-spacing:normal; letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:32px; margin-bottom:32px;
@ -84,19 +75,19 @@
* @style heading 2 * @style heading 2
*/ */
h2{ h2{
/*@editable*/ color:#202021 !important; color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:20px; font-size:20px;
/*@editable*/ font-style:normal; font-style:normal;
/*@editable*/ font-weight:bold; font-weight:bold;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ letter-spacing:normal; letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:24px; margin-bottom:24px;
margin-left:0; margin-left:0;
/*@editable*/ text-align:left; text-align:left;
} }
/** /**
@ -106,19 +97,19 @@
* @style heading 3 * @style heading 3
*/ */
h3{ h3{
/*@editable*/ color:#202021 !important; color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:16px; font-size:16px;
/*@editable*/ font-style:normal; font-style:normal;
/*@editable*/ font-weight:bold; font-weight:bold;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ letter-spacing:normal; letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:16px; margin-bottom:16px;
margin-left:0; margin-left:0;
/*@editable*/ text-align:left; text-align:left;
} }
/** /**
@ -128,19 +119,19 @@
* @style heading 4 * @style heading 4
*/ */
h4{ h4{
/*@editable*/ color:#202021 !important; color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:14px; font-size:14px;
/*@editable*/ font-style:normal; font-style:normal;
/*@editable*/ font-weight:normal; font-weight:normal;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ letter-spacing:normal; letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:16px; margin-bottom:16px;
margin-left:0; margin-left:0;
/*@editable*/ text-align:left; text-align:left;
} }
/* ========== Header Styles ========== */ /* ========== Header Styles ========== */
@ -152,7 +143,7 @@
* @theme header * @theme header
*/ */
#templateHeader{ #templateHeader{
/*@editable*/ color:#6E6E70; color:#6E6E70;
} }
/** /**
@ -161,17 +152,17 @@
* @tip Set the styling for your email's header text. Choose a size and color that is easy to read. * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/ */
.headerContent{ .headerContent{
/*@editable*/ color:#6E6E70; color:#6E6E70;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:20px; font-size:20px;
/*@editable*/ font-weight:bold; font-weight:bold;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ padding-top:0; padding-top:0;
/*@editable*/ padding-right:0; padding-right:0;
/*@editable*/ padding-bottom:0; padding-bottom:0;
/*@editable*/ padding-left:0; padding-left:0;
/*@editable*/ text-align:left; text-align:left;
/*@editable*/ vertical-align:middle; vertical-align:middle;
} }
/** /**
@ -180,13 +171,11 @@
* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text. * @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/ */
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{ .headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#fff; color:#fff;
/*@editable*/ font-weight:normal; font-weight:normal;
/*@editable*/ text-decoration:underline; text-decoration:underline;
} }
#headerImage{
}
/* ========== Body Styles ========== */ /* ========== Body Styles ========== */
@ -209,11 +198,11 @@
* @theme main * @theme main
*/ */
.bodyContent{ .bodyContent{
/*@editable*/ color:#202021; color:#202021;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:16px; font-size:16px;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ text-align:left; text-align:left;
} }
.bodyContent img{ .bodyContent img{
@ -245,15 +234,6 @@
/* ========== Footer Styles ========== */ /* ========== Footer Styles ========== */
/**
* @tab Footer
* @section footer style
* @tip Set the background color and borders for your email's footer area.
* @theme footer
*/
#templateFooter{
}
/** /**
* @tab Footer * @tab Footer
* @section footer text * @section footer text
@ -261,11 +241,11 @@
* @theme footer * @theme footer
*/ */
.footerContent{ .footerContent{
/*@editable*/ color:#6E6E70; color:#6E6E70;
/*@editable*/ font-family:Helvetica; font-family:Helvetica;
/*@editable*/ font-size:14px; font-size:14px;
/*@editable*/ line-height:1.4; line-height:1.4;
/*@editable*/ text-align:left; text-align:left;
} }
.footerContent a { .footerContent a {
@ -286,9 +266,9 @@
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text. * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/ */
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{ .footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#615BC2; color:#615BC2;
/*@editable*/ font-weight:normal; font-weight:normal;
/*@editable*/ text-decoration:underline; text-decoration:underline;
} }
/* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */ /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */
@ -312,13 +292,10 @@
*/ */
#templateContainer{ #templateContainer{
max-width:600px !important; max-width:600px !important;
/*@editable*/ width:100% !important; width:100% !important;
padding: 32px; padding: 32px;
} }
/* ======== Header Styles ======== */
/* ======== Body Styles ======== */ /* ======== Body Styles ======== */
@ -329,7 +306,7 @@
/* ======== Footer Styles ======== */ /* ======== Footer Styles ======== */
.footerContent a{ .footerContent a {
display:block !important; display:block !important;
border-right: 0; border-right: 0;
padding: 6px 0; padding: 6px 0;