github.com/masterhung0112/hk_server/v5@v5.0.0-20220302090640-ec71aef15e1c/templates/partials/style.mjml

<mj-attributes>
  <mj-raw><link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700" rel="stylesheet" type="text/css"></link></mj-raw>
  <mj-text font-family="Open Sans, sans-serif" align="center" />
  <mj-button font-family="Open Sans, sans-serif" background-color="#FFFFFF" border-radius="4px" padding="0px" />
  <mj-image alt="" align="center" />
  <mj-class name="email" align="center" padding="24px" background-color="#FFFFFF" border-radius="8px" />
  <mj-class name="logo" width="132px" height="21.76px" padding="0px" />
</mj-attributes>

<mj-style>
  @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: #166DE0 !important;
  }

  .title div {
    font-weight: 600 !important;
    font-size: 28px !important;
    line-height: 36px !important;
    letter-spacing: -0.01em !important;
    color: #3D3C40 !important;
  }

  .subTitle div {
    font-size: 16px !important;
    line-height: 24px !important;
    color: rgba(61, 60, 64, 0.64) !important;
  }

  .button a {
    background-color: #166DE0 !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: #166DE0 !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: #3D3C40 !important;
    padding: 40px 0px !important;
  }

  .footerTitle div {
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #3D3C40 !important;
    padding: 0px 0px 4px 0px !important;
  }

  .footerInfo div {
    font-size: 14px !important;
    line-height: 20px !important;
    color: #3D3C40 !important;
    padding: 0px 48px 0px 48px !important;
  }

  .footerInfo a {
    color: #166DE0 !important;
  }

  .appDownloadButton a{
    background-color: #FFFFFF !important;
    border: 1px solid #166DE0 !important;
    box-sizing: border-box !important;
    color: #166DE0 !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(61, 60, 64, 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: #3D3C40 !important;
  }

  .time {
    font-family: Open Sans, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: rgba(61, 60, 64, 0.56);
    padding: 2px 6px;
    align-items: center;
    float: left;
  }
    
  .channelBg {
    background: rgba(61, 60, 64, 0.08);
    border-radius: 4px;
    display: flex;
  }

  .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(61, 60, 64, 0.64);
    padding: 2px 6px 2px 0px;
  }
  
  .senderMessage div {
    text-align: left !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #3D3C40 !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;
    }
  }

</mj-style>