fix(ci): use table layout with fully inline CSS for the notification email
The <style>-in-head version rendered broken in the actual mail client (no card, no colors, no spacing - the email client stripped the style block, a common limitation of HTML email). Rewrote as a table-based layout with every style attribute inline, which is the robust approach for cross-client HTML email compatibility, and added the real Atomenta logo (https://atomenta.com.br/assets/images/logo_2024.png, the same asset served by the Atomenta app's own public/assets). Dropped the dark-mode media query - not expressible with inline-only styles, and not essential for an internal CI notification.
This commit is contained in:
@@ -56,50 +56,29 @@ jobs:
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>${SUBJECT}</title>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #f9fafb; color: #1f2937; }
|
||||
.container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
|
||||
.header { background-color: #111827; padding: 26px 20px; text-align: center; }
|
||||
.header-title { color: #ffffff; font-size: 18px; font-weight: 700; margin: 0; }
|
||||
.content { padding: 40px 30px; }
|
||||
.footer { background-color: #f9fafb; padding: 30px 20px; text-align: center; font-size: 12px; color: #6b7280; border-top: 1px solid #e5e7eb; }
|
||||
h1 { color: #111827; font-size: 22px; font-weight: 700; margin: 0 0 16px 0; text-align: center; }
|
||||
.badge { display: inline-block; padding: 4px 14px; border-radius: 9999px; font-size: 12px; font-weight: 700; margin-bottom: 16px; background-color: ${BADGE_BG}; color: ${BADGE_FG}; }
|
||||
.details { background-color: #f9fafb; padding: 20px; border-radius: 8px; margin: 20px 0; border: 1px solid #e5e7eb; }
|
||||
.details-item { margin-bottom: 10px; font-size: 14px; display: flex; border-bottom: 1px solid #e5e7eb; padding-bottom: 6px; }
|
||||
.details-item:last-child { border-bottom: none; margin-bottom: 0; }
|
||||
.label { font-weight: 700; color: #374151; width: 110px; flex-shrink: 0; }
|
||||
.value { color: #1f2937; word-break: break-all; }
|
||||
.btn { display: inline-block; background-color: #111827; color: #ffffff !important; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 14px; margin: 10px 0; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body { background-color: #111827; color: #f9fafb; }
|
||||
.container { background-color: #1f2937; border: 1px solid #374151; box-shadow: none; }
|
||||
.footer { background-color: #111827; border-top: 1px solid #374151; color: #9ca3af; }
|
||||
h1 { color: #ffffff; }
|
||||
.details { background-color: #111827; border: 1px solid #374151; }
|
||||
.details-item { border-bottom: 1px solid #374151; }
|
||||
.label { color: #d1d5db; }
|
||||
.value { color: #f3f4f6; }
|
||||
.btn { background-color: #ffffff; color: #000000 !important; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header"><p class="header-title">🚀 Atomenta CI</p></div>
|
||||
<div class="content">
|
||||
<div style="text-align:center;"><span class="badge">${BADGE_LABEL}</span></div>
|
||||
<h1>${TITLE}</h1>
|
||||
<div class="details">
|
||||
<div class="details-item"><span class="label">Workflow:</span><span class="value">${WORKFLOW}</span></div>
|
||||
<div class="details-item"><span class="label">Job:</span><span class="value">${JOB}</span></div>
|
||||
<div class="details-item"><span class="label">Branch:</span><span class="value">${BRANCH}</span></div>
|
||||
<div class="details-item"><span class="label">Commit:</span><span class="value">${COMMIT_SHORT}</span></div>
|
||||
</div>
|
||||
<div style="text-align:center;"><a href="${RUN_URL}" class="btn">Ver execução</a></div>
|
||||
</div>
|
||||
<div class="footer"><p>© ${YEAR} Atomenta</p></div>
|
||||
</div>
|
||||
<body style="margin:0;padding:0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#f9fafb;color:#1f2937;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f9fafb;padding:30px 0;">
|
||||
<tr><td align="center">
|
||||
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width:600px;width:100%;background-color:#ffffff;border-radius:8px;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);">
|
||||
<tr><td style="padding:30px 20px;text-align:center;border-bottom:1px solid #f3f4f6;">
|
||||
<img src="https://atomenta.com.br/assets/images/logo_2024.png" alt="Atomenta" width="135" style="height:auto;width:135px;display:inline-block;border:0;">
|
||||
</td></tr>
|
||||
<tr><td style="padding:40px 30px;">
|
||||
<div style="text-align:center;"><span style="display:inline-block;padding:4px 14px;border-radius:9999px;font-size:12px;font-weight:700;background-color:${BADGE_BG};color:${BADGE_FG};">${BADGE_LABEL}</span></div>
|
||||
<h1 style="color:#111827;font-size:22px;font-weight:700;margin:16px 0;text-align:center;">${TITLE}</h1>
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;margin:20px 0;">
|
||||
<tr><td style="padding:12px 20px;border-bottom:1px solid #e5e7eb;font-size:14px;"><strong style="color:#374151;display:inline-block;width:100px;">Workflow:</strong><span style="color:#1f2937;">${WORKFLOW}</span></td></tr>
|
||||
<tr><td style="padding:12px 20px;border-bottom:1px solid #e5e7eb;font-size:14px;"><strong style="color:#374151;display:inline-block;width:100px;">Job:</strong><span style="color:#1f2937;">${JOB}</span></td></tr>
|
||||
<tr><td style="padding:12px 20px;border-bottom:1px solid #e5e7eb;font-size:14px;"><strong style="color:#374151;display:inline-block;width:100px;">Branch:</strong><span style="color:#1f2937;">${BRANCH}</span></td></tr>
|
||||
<tr><td style="padding:12px 20px;font-size:14px;"><strong style="color:#374151;display:inline-block;width:100px;">Commit:</strong><span style="color:#1f2937;">${COMMIT_SHORT}</span></td></tr>
|
||||
</table>
|
||||
<div style="text-align:center;margin-top:10px;"><a href="${RUN_URL}" style="display:inline-block;background-color:#111827;color:#ffffff;padding:12px 24px;border-radius:6px;text-decoration:none;font-weight:600;font-size:14px;">Ver execução</a></div>
|
||||
</td></tr>
|
||||
<tr><td style="background-color:#f9fafb;padding:24px 20px;text-align:center;font-size:12px;color:#6b7280;border-top:1px solid #e5e7eb;">© ${YEAR} Atomenta</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
HTMLEOF
|
||||
|
||||
Reference in New Issue
Block a user