KenanZhu/GiteaMailTemplates
1
1 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

fix(aurora): add card-body CSS to prevent dark text/links on dark background

Browse Source 
Aurora is a dark theme (bg #0a0815, card rgba(25,20,50,0.8)) but raw HTML
elements like h2/h4/li/a inside the card had no inline color — rendering
as browser-default black text and blue links, unreadable on dark backgrounds.

Fix: add .card-body CSS rules to all 11 Aurora templates covering h1-h6,
links, and li elements. Also add .aurora-content wrapper for user-generated
HTML (Release.RenderedNote, .Body, .RenderedContent) with full color
coverage for code, pre, blockquote, hr, img.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
KenanZhuandClaude Opus 4.8 committed 2026-06-03 20:34:32 +08:00
1 parent 86bb2538bb
commit d9e6873f49
11 files changed
+73 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

themes/aurora/mail/user/auth/activate.tmpl
+5 -1
View File
@@ -7,6 +7,10 @@
<title>{{.locale.Tr "mail.activate_account.title" (.DisplayName|DotEscape)}}</title>
<style type="text/css">
body,.ExternalClass,.ReadMsgBody{background-color:#0a0815}
.card-body h1,.card-body h2,.card-body h3,.card-body h4,.card-body h5,.card-body h6{color:#ccfbf1!important}
.card-body a,.card-body a:link,.card-body a:visited{color:#5eead4!important;text-decoration:underline!important}
.card-body a:hover,.card-body a:active{color:#99f6e4!important}
.card-body li{color:rgba(210,252,245,0.88)!important}
@media only screen and (max-width:480px){
.resp-card{padding:32px 20px!important}
.resp-spacer{padding:24px 20px!important}
@@ -23,7 +27,7 @@
<span style="font-size:16px;font-weight:300;color:rgba(255,255,255,0.4);letter-spacing:4px;text-transform:uppercase;">{{AppName}}</span>
</td></tr>
<!-- card -->
<tr><td class="resp-card" style="padding:48px 40px;background:rgba(25,20,50,0.8);border:1px solid rgba(13,148,136,0.2);box-shadow:0 0 60px rgba(13,148,136,0.08),0 0 120px rgba(99,102,241,0.04);">
<tr><td class="resp-card card-body" style="padding:48px 40px;background:rgba(25,20,50,0.8);border:1px solid rgba(13,148,136,0.2);box-shadow:0 0 60px rgba(13,148,136,0.08),0 0 120px rgba(99,102,241,0.04);">
<p class="resp-heading" style="margin:0 0 20px;font-size:24px;font-weight:300;color:#ccfbf1;line-height:1.3;letter-spacing:-0.5px;">{{.locale.Tr "mail.hi_user_x" (.DisplayName|DotEscape)}}</p>
<p style="margin:0 0 24px;font-size:14px;line-height:2;color:rgba(210,252,245,0.88);font-weight:300;">{{.locale.Tr "mail.activate_account.text_1" (.DisplayName|DotEscape) AppName}}</p>
<p style="margin:0;font-size:13px;line-height:1.8;color:rgba(180,195,215,0.95);font-weight:300;">{{.locale.Tr "mail.activate_account.text_2" .ActiveCodeLives}}</p>
themes/aurora/mail/user/auth/activate_email.tmpl
+5 -1
View File
@@ -7,6 +7,10 @@
<title>{{.locale.Tr "mail.activate_email.title" (.DisplayName|DotEscape)}}</title>
<style type="text/css">
body,.ExternalClass,.ReadMsgBody{background-color:#0a0815}
.card-body h1,.card-body h2,.card-body h3,.card-body h4,.card-body h5,.card-body h6{color:#ccfbf1!important}
.card-body a,.card-body a:link,.card-body a:visited{color:#5eead4!important;text-decoration:underline!important}
.card-body a:hover,.card-body a:active{color:#99f6e4!important}
.card-body li{color:rgba(210,252,245,0.88)!important}
@media only screen and (max-width:480px){
.resp-card{padding:32px 20px!important}
.resp-spacer{padding:24px 20px!important}
@@ -23,7 +27,7 @@
<span style="font-size:16px;font-weight:300;color:rgba(255,255,255,0.4);letter-spacing:4px;text-transform:uppercase;">{{AppName}}</span>
</td></tr>
<!-- card -->
<tr><td class="resp-card" style="padding:48px 40px;background:rgba(25,20,50,0.8);border:1px solid rgba(13,148,136,0.2);box-shadow:0 0 60px rgba(13,148,136,0.08),0 0 120px rgba(99,102,241,0.04);">
<tr><td class="resp-card card-body" style="padding:48px 40px;background:rgba(25,20,50,0.8);border:1px solid rgba(13,148,136,0.2);box-shadow:0 0 60px rgba(13,148,136,0.08),0 0 120px rgba(99,102,241,0.04);">
<p class="resp-heading" style="margin:0 0 20px;font-size:24px;font-weight:300;color:#ccfbf1;line-height:1.3;letter-spacing:-0.5px;">{{.locale.Tr "mail.hi_user_x" (.DisplayName|DotEscape)}}</p>
<p style="margin:0 0 24px;font-size:14px;line-height:2;color:rgba(210,252,245,0.88);font-weight:300;">{{.locale.Tr "mail.activate_email.text" .ActiveCodeLives}}</p>
<p style="margin:0;font-size:13px;line-height:1.8;color:rgba(180,195,215,0.95);font-weight:300;"></p>
themes/aurora/mail/user/auth/register_notify.tmpl
+5 -1
View File
@@ -7,6 +7,10 @@
<title>{{.locale.Tr "mail.register_notify.title" (.DisplayName|DotEscape) AppName}}</title>
<style type="text/css">
body,.ExternalClass,.ReadMsgBody{background-color:#0a0815}
.card-body h1,.card-body h2,.card-body h3,.card-body h4,.card-body h5,.card-body h6{color:#ccfbf1!important}
.card-body a,.card-body a:link,.card-body a:visited{color:#5eead4!important;text-decoration:underline!important}
.card-body a:hover,.card-body a:active{color:#99f6e4!important}
.card-body li{color:rgba(210,252,245,0.88)!important}
@media only screen and (max-width:480px){
.resp-card{padding:32px 20px!important}
.resp-spacer{padding:24px 20px!important}
@@ -23,7 +27,7 @@
<span style="font-size:16px;font-weight:300;color:rgba(255,255,255,0.4);letter-spacing:4px;text-transform:uppercase;">{{AppName}}</span>
</td></tr>
<!-- card -->
<tr><td class="resp-card" style="padding:48px 40px;background:rgba(25,20,50,0.8);border:1px solid rgba(13,148,136,0.2);box-shadow:0 0 60px rgba(13,148,136,0.08),0 0 120px rgba(99,102,241,0.04);">
<tr><td class="resp-card card-body" style="padding:48px 40px;background:rgba(25,20,50,0.8);border:1px solid rgba(13,148,136,0.2);box-shadow:0 0 60px rgba(13,148,136,0.08),0 0 120px rgba(99,102,241,0.04);">
<p class="resp-heading" style="margin:0 0 20px;font-size:24px;font-weight:300;color:#ccfbf1;line-height:1.3;letter-spacing:-0.5px;">{{.locale.Tr "mail.hi_user_x" (.DisplayName|DotEscape)}}</p>
<p style="margin:0 0 24px;font-size:14px;line-height:2;color:rgba(210,252,245,0.88);font-weight:300;">{{.locale.Tr "mail.register_notify.text_1" AppName}}</p>
<p style="margin:0;font-size:13px;line-height:1.8;color:rgba(180,195,215,0.95);font-weight:300;">{{.locale.Tr "mail.register_notify.text_2" .Username}}
themes/aurora/mail/user/auth/reset_passwd.tmpl
+5 -1
View File
@@ -7,6 +7,10 @@
<title>{{.locale.Tr "mail.reset_password.title" (.DisplayName|DotEscape)}}</title>
<style type="text/css">
body,.ExternalClass,.ReadMsgBody{background-color:#0a0815}
.card-body h1,.card-body h2,.card-body h3,.card-body h4,.card-body h5,.card-body h6{color:#ccfbf1!important}
.card-body a,.card-body a:link,.card-body a:visited{color:#5eead4!important;text-decoration:underline!important}
.card-body a:hover,.card-body a:active{color:#99f6e4!important}
.card-body li{color:rgba(210,252,245,0.88)!important}
@media only screen and (max-width:480px){
.resp-card{padding:32px 20px!important}
.resp-spacer{padding:24px 20px!important}
@@ -23,7 +27,7 @@
<span style="font-size:16px;font-weight:300;color:rgba(255,255,255,0.4);letter-spacing:4px;text-transform:uppercase;">{{AppName}}</span>
</td></tr>
<!-- card -->
<tr><td class="resp-card" style="padding:48px 40px;background:rgba(25,20,50,0.8);border:1px solid rgba(13,148,136,0.2);box-shadow:0 0 60px rgba(13,148,136,0.08),0 0 120px rgba(99,102,241,0.04);">
<tr><td class="resp-card card-body" style="padding:48px 40px;background:rgba(25,20,50,0.8);border:1px solid rgba(13,148,136,0.2);box-shadow:0 0 60px rgba(13,148,136,0.08),0 0 120px rgba(99,102,241,0.04);">
<p class="resp-heading" style="margin:0 0 20px;font-size:24px;font-weight:300;color:#ccfbf1;line-height:1.3;letter-spacing:-0.5px;">{{.locale.Tr "mail.hi_user_x" (.DisplayName|DotEscape)}}</p>
<p style="margin:0 0 24px;font-size:14px;line-height:2;color:rgba(210,252,245,0.88);font-weight:300;">{{.locale.Tr "mail.reset_password.text" .ResetPwdCodeLives}}</p>
<p style="margin:0;font-size:13px;line-height:1.8;color:rgba(180,195,215,0.95);font-weight:300;"></p>