Loverde-Company-LTDA/LCEssentials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

fix(ci): use table layout with fully inline CSS for the notification email

Browse Source 
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:
Daniel Arantes Loverde
2026-09-11 15:17:52 -03:00
parent fdf7517609
commit 06439b6b45
2 changed files with 44 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
.gitea/workflows/beta.yml
View File

@@ -84,50 +84,29 @@ jobs:
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${SUBJECT}</title> <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> </head>
<body> <body style="margin:0;padding:0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#f9fafb;color:#1f2937;">
<div class="container"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f9fafb;padding:30px 0;">
<div class="header"><p class="header-title">🚀 Atomenta CI</p></div> <tr><td align="center">
<div class="content"> <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);">
<div style="text-align:center;"><span class="badge">${BADGE_LABEL}</span></div> <tr><td style="padding:30px 20px;text-align:center;border-bottom:1px solid #f3f4f6;">
<h1>${TITLE}</h1> <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;">
<div class="details"> </td></tr>
<div class="details-item"><span class="label">Workflow:</span><span class="value">${WORKFLOW}</span></div> <tr><td style="padding:40px 30px;">
<div class="details-item"><span class="label">Job:</span><span class="value">${JOB}</span></div> <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>
<div class="details-item"><span class="label">Branch:</span><span class="value">${BRANCH}</span></div> <h1 style="color:#111827;font-size:22px;font-weight:700;margin:16px 0;text-align:center;">${TITLE}</h1>
<div class="details-item"><span class="label">Commit:</span><span class="value">${COMMIT_SHORT}</span></div> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;margin:20px 0;">
</div> <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>
<div style="text-align:center;"><a href="${RUN_URL}" class="btn">Ver execução</a></div> <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>
</div> <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>
<div class="footer"><p>© ${YEAR} Atomenta</p></div> <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>
</div> </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> </body>
</html> </html>
HTMLEOF HTMLEOF

65
.gitea/workflows/test.yml
View File

@@ -56,50 +56,29 @@ jobs:
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${SUBJECT}</title> <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> </head>
<body> <body style="margin:0;padding:0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#f9fafb;color:#1f2937;">
<div class="container"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f9fafb;padding:30px 0;">
<div class="header"><p class="header-title">🚀 Atomenta CI</p></div> <tr><td align="center">
<div class="content"> <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);">
<div style="text-align:center;"><span class="badge">${BADGE_LABEL}</span></div> <tr><td style="padding:30px 20px;text-align:center;border-bottom:1px solid #f3f4f6;">
<h1>${TITLE}</h1> <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;">
<div class="details"> </td></tr>
<div class="details-item"><span class="label">Workflow:</span><span class="value">${WORKFLOW}</span></div> <tr><td style="padding:40px 30px;">
<div class="details-item"><span class="label">Job:</span><span class="value">${JOB}</span></div> <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>
<div class="details-item"><span class="label">Branch:</span><span class="value">${BRANCH}</span></div> <h1 style="color:#111827;font-size:22px;font-weight:700;margin:16px 0;text-align:center;">${TITLE}</h1>
<div class="details-item"><span class="label">Commit:</span><span class="value">${COMMIT_SHORT}</span></div> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;margin:20px 0;">
</div> <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>
<div style="text-align:center;"><a href="${RUN_URL}" class="btn">Ver execução</a></div> <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>
</div> <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>
<div class="footer"><p>© ${YEAR} Atomenta</p></div> <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>
</div> </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> </body>
</html> </html>
HTMLEOF HTMLEOF