e9308640ec
Some email clients don't support style tags which results in CTA buttons not being visible, and other styling being "broken". This commit tries to fix that issue by both including style tags and inlining the same CSS.
230 строки
4.4 KiB
CSS
230 строки
4.4 KiB
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
|
|
|
|
.emailBody {
|
|
background: #F3F3F3 !important;
|
|
}
|
|
|
|
.emailBody a{
|
|
text-decoration: none !important;
|
|
color: #1C58D9 !important;
|
|
}
|
|
|
|
.title div {
|
|
font-weight: 600 !important;
|
|
font-size: 28px !important;
|
|
line-height: 36px !important;
|
|
letter-spacing: -0.01em !important;
|
|
color: #3F4350 !important;
|
|
}
|
|
|
|
.subTitle div {
|
|
font-size: 16px !important;
|
|
line-height: 24px !important;
|
|
color: rgba(63, 67, 80, 0.64) !important;
|
|
}
|
|
|
|
.subTitle a {
|
|
color: rgb(28, 88, 217) !important;
|
|
}
|
|
|
|
.button a {
|
|
background-color: #1C58D9 !important;
|
|
font-weight: 600 !important;
|
|
font-size: 16px !important;
|
|
line-height: 18px !important;
|
|
color: #FFFFFF !important;
|
|
padding: 15px 24px !important;
|
|
}
|
|
|
|
.messageButton a{
|
|
background-color: #FFFFFF !important;
|
|
border: 1px solid #FFFFFF !important;
|
|
box-sizing: border-box !important;
|
|
color: #1C58D9 !important;
|
|
padding: 12px 20px !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
line-height: 14px !important;
|
|
}
|
|
|
|
.info div {
|
|
font-size: 14px !important;
|
|
line-height: 20px !important;
|
|
color: #3F4350 !important;
|
|
padding: 40px 0px !important;
|
|
}
|
|
|
|
.footerTitle div {
|
|
font-weight: 600 !important;
|
|
font-size: 16px !important;
|
|
line-height: 24px !important;
|
|
color: #3F4350 !important;
|
|
padding: 0px 0px 4px 0px !important;
|
|
}
|
|
|
|
.footerInfo div {
|
|
font-size: 14px !important;
|
|
line-height: 20px !important;
|
|
color: #3F4350 !important;
|
|
padding: 0px 48px 0px 48px !important;
|
|
}
|
|
|
|
.footerInfo a {
|
|
color: #1C58D9 !important;
|
|
}
|
|
|
|
.appDownloadButton a{
|
|
background-color: #FFFFFF !important;
|
|
border: 1px solid #1C58D9 !important;
|
|
box-sizing: border-box !important;
|
|
color: #1C58D9 !important;
|
|
padding: 13px 20px !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
line-height: 14px !important;
|
|
}
|
|
|
|
.emailFooter div {
|
|
font-size: 12px !important;
|
|
line-height: 16px !important;
|
|
color: rgba(63, 67, 80, 0.56) !important;
|
|
padding: 8px 24px 8px 24px !important;
|
|
}
|
|
|
|
.postCard {
|
|
padding: 0px 24px 40px 24px !important;
|
|
}
|
|
|
|
.messageCard {
|
|
background: #FFFFFF !important;
|
|
border: 1px solid rgba(61, 60, 64, 0.08) !important;
|
|
box-sizing: border-box !important;
|
|
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) !important;
|
|
border-radius: 4px !important;
|
|
padding: 32px !important;
|
|
}
|
|
|
|
.messageAvatar img {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
padding: 0px !important;
|
|
border-radius: 32px !important;
|
|
}
|
|
|
|
.messageAvatarCol {
|
|
width: 32px !important;
|
|
}
|
|
|
|
.postNameAndTime {
|
|
padding: 0px 0px 4px 0px !important;
|
|
display: flex;
|
|
}
|
|
.senderName {
|
|
font-family: Open Sans, sans-serif;
|
|
text-align: left !important;
|
|
font-weight: 600 !important;
|
|
font-size: 14px !important;
|
|
line-height: 20px !important;
|
|
color: #3F4350 !important;
|
|
}
|
|
|
|
.time {
|
|
font-family: Open Sans, sans-serif;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
color: rgba(63, 67, 80, 0.56);
|
|
padding: 2px 6px;
|
|
align-items: center;
|
|
float: left;
|
|
}
|
|
|
|
.channelBg {
|
|
background: rgba(63, 67, 80, 0.08);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.channelLogo {
|
|
width: 10px;
|
|
height: 10px;
|
|
padding: 5px 4px 5px 6px;
|
|
float: left;
|
|
}
|
|
|
|
.channelName {
|
|
font-family: Open Sans, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 10px;
|
|
line-height: 16px;
|
|
letter-spacing: 0.01em;
|
|
text-transform: uppercase;
|
|
color: rgba(63, 67, 80, 0.64);
|
|
padding: 2px 6px 2px 0px;
|
|
}
|
|
|
|
.gmChannelCount {
|
|
background-color: rgba(63, 67, 80, 0.2);
|
|
padding: 0 5px;
|
|
border-radius: 2px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.senderMessage div {
|
|
text-align: left !important;
|
|
font-size: 14px !important;
|
|
line-height: 20px !important;
|
|
color: #3F4350 !important;
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.senderInfoCol {
|
|
width: 394px !important;
|
|
padding: 0px 0px 0px 12px !important;
|
|
}
|
|
|
|
@media all and (min-width: 541px) {
|
|
.emailBody {
|
|
padding: 32px !important;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 540px) and (min-width: 401px) {
|
|
.emailBody {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.messageCard {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.senderInfoCol {
|
|
width: 80% !important;
|
|
padding: 0px 0px 0px 12px !important;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 400px) {
|
|
.emailBody {
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.footerInfo div {
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.messageCard {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.postCard {
|
|
padding: 0px 0px 40px 0px !important;
|
|
}
|
|
|
|
.senderInfoCol {
|
|
width: 80% !important;
|
|
padding: 0px 0px 0px 12px !important;
|
|
}
|
|
}
|
|
|