Fixes for designs

This commit is contained in:
David Bomba 2023-02-16 21:09:50 +11:00
parent a9ef8d2925
commit c1763be6ab
7 changed files with 158 additions and 160 deletions

View File

@ -390,19 +390,28 @@ class PaymentEmailEngine extends BaseEmailEngine
{ {
return ' return '
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation"> <table align="center" cellspacing="0" cellpadding="0" style="width: 600px;">
<tbody><tr> <tr>
<td align="center" class="hover-bg-green-600" style="border-radius: 2px; background-color: #66BB7F"> <td align="center" valign="top">
<a href="'. $link . '" target="_blank" class="all-font-sans hover-border-green-600" style="text-decoration: none; border: 1px solid #66BB7F; display: inline-block; border-radius: 2px; padding-top: 15px; padding-bottom: 15px; padding-left: 25px; padding-right: 25px; font-size: 20px; color: #fff"> <![endif]-->
<singleline label="cta button">'. $text .'</singleline> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" >
</a> <tbody><tr>
</td> <td align="center" class="new_button" style="border-radius: 2px; background-color: '.$this->settings->primary_color.'">
</tr> <a href="'. $link . '" target="_blank" class="new_button" style="text-decoration: none; border: 1px solid '.$this->settings->primary_color.'; display: inline-block; border-radius: 2px; padding-top: 15px; padding-bottom: 15px; padding-left: 25px; padding-right: 25px; font-size: 20px; color: #fff">
</tbody> <singleline label="cta button">'. $text .'</singleline>
</table> </a>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
'; ';
return ' return '
<table border="0" cellspacing="0" cellpadding="0" align="center"> <table border="0" cellspacing="0" cellpadding="0" align="center">

View File

@ -984,10 +984,10 @@ html {
<tr> <tr>
<td align="center" valign="top"> <td align="center" valign="top">
<![endif]--> <![endif]-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" >
<tbody><tr> <tbody><tr>
<td align="center" class="hover-bg-green-600" style="border-radius: 2px; background-color: #66BB7F"> <td align="center" class="new_button" style="border-radius: 2px; background-color: '.$this->settings->primary_color.'">
<a href="'. $link . '" target="_blank" class="all-font-sans hover-border-green-600" style="text-decoration: none; border: 1px solid #66BB7F; display: inline-block; border-radius: 2px; padding-top: 15px; padding-bottom: 15px; padding-left: 25px; padding-right: 25px; font-size: 20px; color: #fff"> <a href="'. $link . '" target="_blank" class="new_button" style="text-decoration: none; border: 1px solid '.$this->settings->primary_color.'; display: inline-block; border-radius: 2px; padding-top: 15px; padding-bottom: 15px; padding-left: 25px; padding-right: 25px; font-size: 20px; color: #fff">
<singleline label="cta button">'. $text .'</singleline> <singleline label="cta button">'. $text .'</singleline>
</a> </a>
</td> </td>

View File

@ -808,21 +808,30 @@ html {
private function buildViewButton(string $link, string $text): string private function buildViewButton(string $link, string $text): string
{ {
return ' return '
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation"> <table align="center" cellspacing="0" cellpadding="0" style="width: 600px;">
<tbody><tr> <tr>
<td align="center" class="hover-bg-green-600" style="border-radius: 2px; background-color: #66BB7F"> <td align="center" valign="top">
<a href="'. $link . '" target="_blank" class="all-font-sans hover-border-green-600" style="text-decoration: none; border: 1px solid #66BB7F; display: inline-block; border-radius: 2px; padding-top: 15px; padding-bottom: 15px; padding-left: 25px; padding-right: 25px; font-size: 20px; color: #fff"> <![endif]-->
<singleline label="cta button">'. $text .'</singleline> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" >
</a> <tbody><tr>
</td> <td align="center" class="new_button" style="border-radius: 2px; background-color: '.$this->settings->primary_color.'">
</tr> <a href="'. $link . '" target="_blank" class="new_button" style="text-decoration: none; border: 1px solid '.$this->settings->primary_color.'; display: inline-block; border-radius: 2px; padding-top: 15px; padding-bottom: 15px; padding-left: 25px; padding-right: 25px; font-size: 20px; color: #fff">
</tbody> <singleline label="cta button">'. $text .'</singleline>
</table> </a>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
'; ';
return ' return '
<table border="0" cellspacing="0" cellpadding="0" align="center"> <table border="0" cellspacing="0" cellpadding="0" align="center">
<tr style="border: 0 !important; "> <tr style="border: 0 !important; ">

View File

@ -27,17 +27,28 @@
@endisset @endisset
@isset($url) @isset($url)
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr style="border: 0 !important; ">
<td class="new_button" style="padding: 12px 18px 12px 18px; border-radius:5px;" align="center">
<a href="{{ $url }}" target="_blank" style="border: 0 !important;font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; display: inline-block; ">{{ ctrans($button) }}</a>
<!--[if (gte mso 9)|(IE)]>
<table align="center" cellspacing="0" cellpadding="0" style="width: 600px;">
<tr>
<td align="center" valign="top">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" >
<tbody><tr>
<td align="center" class="new_button" style="border-radius: 2px; background-color: {{ $settings->primary_color }} ;">
<a href="{{ $url }}" target="_blank" class="new_button" style="text-decoration: none; border: 1px solid {{ $settings->primary_color }}; display: inline-block; border-radius: 2px; padding-top: 15px; padding-bottom: 15px; padding-left: 25px; padding-right: 25px; font-size: 20px; color: #fff">
<singleline label="cta button">{{ ctrans($button) }}</singleline>
</a>
</td> </td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr> </tr>
</table> </table>
<![endif]-->
@endisset @endisset

View File

@ -1,5 +1,6 @@
@php @php
$primary_color = isset($settings) ? $settings->primary_color : '#4caf50'; $primary_color = isset($settings) ? $settings->primary_color : '#4caf50';
$email_alignment = isset($settings) ? $settings->email_alignment : 'center';
@endphp @endphp
<!DOCTYPE html <!DOCTYPE html
@ -20,54 +21,45 @@
color-scheme: light dark; color-scheme: light dark;
supported-color-schemes: light dark; supported-color-schemes: light dark;
} }
@if(isset($settings) && $settings->email_style === 'dark') @if(isset($settings) && $settings->email_style === 'dark')
body, body,
[data-ogsc] { [data-ogsc] {
background-color: #1a1a1a !important; background-color: #1a1a1a !important;
color: #ffffff !important; color: #ffffff !important;
} }
div, tr, td, div, tr, td,
[data-ogsc] div, [data-ogsc] div,
[data-ogsc] tr, [data-ogsc] tr,
[data-ogsc] td { [data-ogsc] td {
border-color: #222222 !important; border-color: #222222 !important;
} }
h1, h2, h3, p, td, h1, h2, h3, p, td,
[data-ogsc] h1, [data-ogsc] h2, [data-ogsc] h3, [data-ogsc] p, [data-ogsc] td, { [data-ogsc] h1, [data-ogsc] h2, [data-ogsc] h3, [data-ogsc] p, [data-ogsc] td, {
color: #ffffff !important; color: #ffffff !important;
} }
p, p,
[data-ogsc] p { [data-ogsc] p {
color: #bbbbbc !important; color: #bbbbbc !important;
} }
.dark-bg-base, .dark-bg-base,
[data-ogsc] .dark-bg-base { [data-ogsc] .dark-bg-base {
background-color: #222222 !important; background-color: #222222 !important;
} }
.dark-bg, .dark-bg,
[data-ogsc] .dark-bg { [data-ogsc] .dark-bg {
background-color: #3a3a3c !important; background-color: #3a3a3c !important;
} }
.logo-dark, .logo-dark,
[data-ogsc] .logo-dark { [data-ogsc] .logo-dark {
display: block !important; display: block !important;
} }
.logo-light, .logo-light,
[data-ogsc] .logo-light { [data-ogsc] .logo-light {
display: none !important; display: none !important;
} }
.btn-white, .btn-white,
[data-ogsc] .btn-white { [data-ogsc] .btn-white {
background-color: #fefefe !important; background-color: #000 !important;
mso-padding-alt: 40px; mso-padding-alt: 40px;
mso-border-alt: 40px solid #fefefe; mso-border-alt: 40px solid #fefefe;
mso-padding-alt: 0; mso-padding-alt: 0;
@ -77,17 +69,6 @@
mso-border-right-alt: 20 #fefefe 0; mso-border-right-alt: 20 #fefefe 0;
} }
@endif @endif
.btn-white {
mso-padding-alt: 40px;
mso-border-alt: 40px solid #fefefe;
mso-padding-alt: 0;
mso-ansi-font-size:20px !important;
mso-line-height-alt:150%;
mso-border-left-alt: 20 #FFFFFF 0;
mso-border-right-alt: 20 #FFFFFF 0;
}
/** Content-specific styles. **/ /** Content-specific styles. **/
#content .button { #content .button {
display: inline-block; display: inline-block;
@ -101,7 +82,6 @@
font-weight: 600; font-weight: 600;
margin-bottom: 30px; margin-bottom: 30px;
} }
#content h1 { #content h1 {
font-family: 'canada-type-gibson', 'roboto', Arial, Helvetica, sans-serif; font-family: 'canada-type-gibson', 'roboto', Arial, Helvetica, sans-serif;
font-weight: 600; font-weight: 600;
@ -109,16 +89,13 @@
margin-top: 5px; margin-top: 5px;
margin-bottom: 30px; margin-bottom: 30px;
} }
#content > p { #content > p {
font-size: 16px; font-size: 16px;
color: red; color: red;
} }
#content .center { #content .center {
text-align: center; text-align: center;
} }
.stamp { .stamp {
transform: rotate(12deg); transform: rotate(12deg);
color: #555; color: #555;
@ -135,7 +112,6 @@
position: fixed; position: fixed;
text-align: center; text-align: center;
} }
.is-paid { .is-paid {
color: #D23; color: #D23;
border: 1rem double #D23; border: 1rem double #D23;
@ -149,14 +125,10 @@
position: fixed; position: fixed;
} }
.new_button, a { .new_button a {
background-color: {{ $primary_color }}; background-color: {{ $primary_color }};
} }
a:visited {
color:#ffffff !important;
}
</style> </style>
</head> </head>
@ -165,18 +137,35 @@
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr> <tr>
<td> <td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="570" style="border: 1px solid #c2c2c2;"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="570"
style="border: 1px solid #c2c2c2; background-color:#f9f9f9">
<tr> <tr>
<td align="center" > <div style="text-align: center;margin-top: 25px; margin-bottom: 10px; background-color:#f9f9f9">
<div class="dark-bg" style="background-color:#f9f9f9; padding-bottom: 20px; padding-top: 20px;"> <!-- Top side spacing. -->
<img class="logo-light" src="{{ $logo ?? '' }}" width="65%" height="" alt="alt_text" border="0" style="width: 100%; max-width: 65%; height: auto; display: block;" class="g-img"> </div>
</tr>
<tr>
<td align="center">
<div class="dark-bg"
style="background-color:#f9f9f9; padding-bottom: 20px;">
<!--[if gte mso 9]>
<img src="{{ $logo ?? '' }}" alt="" width="155" border="0" align="middle" style="display:block;" />
<div style="mso-hide:all;">
<![endif]-->
<img class="logo-light" src="{{ $logo ?? '' }}" alt="" width="400" style="margin-top: 10px; max-width: 200px; display: block; margin-left: auto; margin-right: auto;"/>
<!--[if gte mso 9]>
</div>
<![endif]-->
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<div class="dark-bg-base" id="content" <div class="dark-bg-base" id="content"
style="border: none; padding: 20px;"> style="padding: 20px; text-align: {{ $email_alignment }}">
{{ $slot }} {{ $slot }}
</div> <!-- End replaceable content. --> </div> <!-- End replaceable content. -->
</td> </td>
@ -189,76 +178,78 @@
<![endif]--> <![endif]-->
<tr class="dark-bg" <tr class="dark-bg"
style="background-color: {{ $primary_color }}; ccborder-bottom-color: {{ $primary_color }};"> style="background-color: {{ $primary_color }};" width="100%">
<td> <td width="100%">
<div style="text-align: center; margin-top: 25px;"> <div style="text-align: center; margin-top: 25px;">
<h2 <h2
style="color: #ffffff; font-family: 'canada-type-gibson', 'roboto', Arial, Helvetica, sans-serif; font-weight: 500; font-size: 26px;"> style="color: #ffffff; font-family: 'canada-type-gibson', 'roboto', Arial, Helvetica, sans-serif; font-weight: 500; font-size: 26px;">
Questions? We're here to help!</h2> Questions? We're here to help!</h2>
</div> </div>
<div style="text-align:center; margin-bottom: 35px; margin-top: 25px;"> <div style="text-align:center; margin-bottom: 35px; margin-top: 25px;">
<!--[if mso]> <!--[if mso]>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="text-align: center;"i valign="center"> <table width="100%" cellpadding="0" cellspacing="0" border="0" style="text-align: center;" valign="center">
<tr height="40"> <tr>
<td height="40"> <td>
<![endif]-->
<a href="https://forum.invoiceninja.com" target="_blank" class="btn-white"
style="vertical-align: middle;display: inline-block;background-color: #ffffff; color: {{ $primary_color }}; display: inline-block; text-decoration: none; width: 100px; text-align: center; font-size: 12px; height: 35px; line-height: 35px; margin-left: 10px; margin-right: 10px;">
<img style="width: 13px; margin-right: 4px; display: inline-block; vertical-align:middle;" src="{{ asset('images/emails/forum.png') }}" width="13">
<span>Forums</span>
</a>
<!--[if mso]>
</td>
<![endif]--> <![endif]-->
<a href="https://forum.invoiceninja.com" target="_blank" class="btn-white"
style="vertical-align: middle;display: inline-block;background-color: #ffffff; color: {{ $primary_color }}; display: inline-block; text-decoration: none; width: 100px; text-align: center; font-size: 12px; height: 35px; line-height: 35px; margin-left: 10px; margin-right: 10px;">
<img style="width: 13px; margin-right: 4px; display: inline-block; vertical-align:middle;" src="{{ asset('images/emails/forum.png') }}" width="13">
<span style="padding-left:4px;">Forums</span>
</a>
<!--[if mso]> <!--[if mso]>
</td><td height="40">
<td>
<![endif]-->
<a href="http://slack.invoiceninja.com/" target="_blank" class="btn-white"
style="vertical-align: middle;display: inline-block;background-color: #ffffff; color: {{ $primary_color }}; display: inline-block; text-decoration: none; width: 100px; text-align: center; font-size: 12px; height: 35px; line-height: 35px; margin-left: 10px; margin-right: 10px;">
<img style="width: 13px; margin-right: 4px; display: inline-block; vertical-align:middle;" src="{{ asset('images/emails/slack.png') }}" width="13">
<span>Slack</span>
</a>
<!--[if mso]>
</td>
<![endif]--> <![endif]-->
<a href="http://slack.invoiceninja.com/" target="_blank" class="btn-white"
style="vertical-align: middle;display: inline-block;background-color: #ffffff; color: {{ $primary_color }}; display: inline-block; text-decoration: none; width: 100px; text-align: center; font-size: 12px; height: 35px; line-height: 35px; margin-left: 10px; margin-right: 10px;">
<img style="width: 13px; margin-right: 4px; display: inline-block; vertical-align:middle;" src="{{ asset('images/emails/slack.png') }}" width="13">
<span style="padding-left:4px;">Slack</span>
</a>
<!--[if mso]> <!--[if mso]>
</td><td height="40">
<td>
<![endif]-->
<a href="https://www.invoiceninja.com/contact/" target="_blank" class="btn-white"
style="vertical-align: middle;display: inline-block;background-color: #ffffff; color: {{ $primary_color }}; display: inline-block; text-decoration: none; width: 100px; text-align: center; font-size: 12px; height: 35px; line-height: 35px; margin-left: 10px; margin-right: 10px;">
<img style="width: 13px; margin-right: 4px; display: inline-block; vertical-align:middle;" src="{{ asset('images/emails/email.png') }}" width="13">
<span>E-mail</span>
</a>
<!--[if mso]>
</td>
<![endif]--> <![endif]-->
<a href="https://www.invoiceninja.com/contact/" target="_blank" class="btn-white"
style="vertical-align: middle;display: inline-block;background-color: #ffffff; color: {{ $primary_color }}; display: inline-block; text-decoration: none; width: 100px; text-align: center; font-size: 12px; height: 35px; line-height: 35px; margin-left: 10px; margin-right: 10px;">
<img style="width: 13px; margin-right: 4px; display: inline-block; vertical-align:middle;" src="{{ asset('images/emails/email.png') }}" width="13">
<span style="padding-left:4px;">E-mail</span>
</a>
<!--[if mso]> <!--[if mso]>
</td><td height="40">
<![endif]--> <td>
<![endif]-->
<a href="https://invoiceninja.github.io/" target="_blank" class="btn-white"
<a href="https://invoiceninja.github.io/" target="_blank" class="btn-white" style="vertical-align: middle;display: inline-block;background-color: #ffffff; color: {{ $primary_color }}; display: inline-block; text-decoration: none; width: 100px; text-align: center; font-size: 12px; height: 35px; line-height: 35px; margin-left: 10px; margin-right: 10px;">
style="vertical-align: middle;display: inline-block;background-color: #ffffff; color: {{ $primary_color }}; display: inline-block; text-decoration: none; width: 100px; text-align: center; font-size: 12px; height: 35px; line-height: 35px; margin-left: 10px; margin-right: 10px;"> <span>Support Docs</span>
<span style="padding-left:4px;">Support Docs</span> </a>
</a>
<!--[if mso]> <!--[if mso]>
</td> </td>
</tr> </tr>
</table> </table>
<![endif]--> <![endif]-->
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="dark-bg-base" <td class="dark-bg-base"
style="background-color: #242424; border: none;"> style="background-color: #242424;">
<div style="padding-top: 10px;padding-bottom: 10px;"> <div style="padding-top: 10px;padding-bottom: 10px;">
<p style="text-align: center; color: #ffffff; font-size: 10px; <p style="text-align: center; color: #ffffff; font-size: 10px;
font-family: Verdana, Geneva, Tahoma, sans-serif;"{{ date('Y') }} Invoice Ninja, All Rights Reserved font-family: Verdana, Geneva, Tahoma, sans-serif;"{{ date('Y') }} Invoice Ninja, All Rights Reserved
@ -272,4 +263,4 @@
</table> </table>
</body> </body>
</html> </html>

View File

@ -82,7 +82,6 @@
#content .left { #content .left {
text-align: left !important; text-align: left !important;
} }
.stamp { .stamp {
transform: rotate(12deg); transform: rotate(12deg);
color: #555; color: #555;
@ -96,7 +95,6 @@
z-index:200 !important; z-index:200 !important;
position: relative; position: relative;
} }
.is-paid { .is-paid {
color: #D23; color: #D23;
border: 1rem double #D23; border: 1rem double #D23;
@ -109,20 +107,15 @@
z-index:200 !important; z-index:200 !important;
position: relative; position: relative;
} }
a.doc_links { a.doc_links {
text-decoration: none; text-decoration: none;
padding-bottom: 10px; padding-bottom: 10px;
display: inline-block; display: inline-block;
color: inherit !important; color: inherit !important;
} }
.new_button, a { .new_button a {
background-color: {{ $primary_color }} !important; background-color: {{ $primary_color }};
}
a:visited {
color:#ffffff !important;
} }
</style> </style>
@ -139,38 +132,46 @@
<body <body
style="margin: 0; padding: 0; font-family: 'roboto', Arial, Helvetica, sans-serif; color: #3b3b3b;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;"> style="margin: 0; padding: 0; font-family: 'roboto', Arial, Helvetica, sans-serif; color: #3b3b3b;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr> <tr>
<td> <td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="570" style="border: 1px solid #c2c2c2; table-layout:fixed;"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="570"
style="border: 1px solid #c2c2c2;" class="dark-bg-base">
<tr> <tr>
<td align="center"> <div style="text-align: center;margin-top: 25px; margin-bottom: 10px;"></div>
<div style="border-top-left-radius: 3px; border-top-right-radius: 3px; padding-bottom: 20px; padding-top:20px;"> </tr>
<img class="logo-light" src="{{ $logo ?? '' }}" width="65%" height="" alt="alt_text" border="0" style="width: 100%; max-width: 65%; height: auto; display: block;" class="g-img"> <tr>
<td align="center" cellpadding="20">
<div style="border: 1px solid #c2c2c2; border-bottom: none; padding-bottom: 10px; border-top-left-radius: 3px; border-top-right-radius: 3px;">
<!--[if gte mso 9]>
<img src="{{ $logo ?? '' }}" alt="" width="400" border="0" align="middle" style="display:block;" />
<div style="mso-hide:all;">
<![endif]-->
<img src="{{ $logo ?? '' }}" alt="" width="400" style="margin-top: 40px; max-width: 200px; display: block; margin-left: auto; margin-right: auto;"/>
<!--[if gte mso 9]>
</div>
<![endif]-->
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td cellpadding="5">
<div style="padding: 20px; text-align: {{ $email_alignment }}" id="content"> <div style="border: 1px solid #c2c2c2; border-top: none; border-bottom: none; padding: 20px; text-align: {{ $email_alignment }}" id="content">
<div style="padding-top: 10px;"></div>
{{ $slot ?? '' }} {{ $slot ?? '' }}
{!! $body ?? '' !!} {!! $body ?? '' !!}
<div> <div>
<a href="#" <a href="#"
style="display: inline-block; background-color: {{ $primary_color }} ; color: #ffffff; text-transform: uppercase;letter-spacing: 2px; text-decoration: none; font-size: 13px; font-weight: 600;"> style="display: inline-block;background-color: {{ $primary_color }}; color: #ffffff; text-transform: uppercase;letter-spacing: 2px; text-decoration: none; font-size: 13px; font-weight: 600;">
</a> </a>
</div> </div>
<div> <div>
@isset($links) @isset($links)
@if(count($links) >=1)
<p><strong>{{ ctrans('texts.attachments') }}</strong></p>
@endif
@foreach($links as $link) @foreach($links as $link)
{!! $link ?? '' !!}<br> {!! $link ?? '' !!}<br>
@endforeach @endforeach
@ -182,20 +183,14 @@
<tr> <tr>
<td height="0"> <td height="0">
<div style="padding: 5px; text-align: center" id="content"> </div> <div style="border: 1px solid #c2c2c2; border-top: none; border-bottom: none; padding: 5px; text-align: center" id="content"> </div>
</td> </td>
</tr> </tr>
<!--[if mso]>
<tr class="dark-bg" style="margin-top:20px; border: none; border-bottom-color: {{ $primary_color }};">
<td style="border: none; border-bottom: none; padding: 20px;"></td>
</tr>
<![endif]-->
<tr> <tr>
<td cellpadding="20" bgcolor="#f9f9f9"> <td cellpadding="20" bgcolor="#f9f9f9">
<div class="dark-bg dark-text-white" <div class="dark-bg dark-text-white"
style="text-align: center; padding-top: 10px; padding-bottom: 25px; background-color: #f9f9f9; "> style="text-align: center; padding-top: 10px; padding-bottom: 25px; background-color: #f9f9f9; border: 1px solid #c2c2c2; border-top: none; border-bottom-color: #f9f9f9;">
@isset($signature) @isset($signature)
<p style="font-size: 15px; color: #2e2e2e; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; margin-bottom: 30px;"> <p style="font-size: 15px; color: #2e2e2e; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; margin-bottom: 30px;">
{!! nl2br($signature) !!} {!! nl2br($signature) !!}
@ -217,7 +212,7 @@
<tr> <tr>
<td bgcolor="#242424" cellpadding="20"> <td bgcolor="#242424" cellpadding="20">
<div class="dark-bg-base" <div class="dark-bg-base"
style="padding-top: 10px;padding-bottom: 10px; background-color: #242424; "> style="padding-top: 10px;padding-bottom: 10px; background-color: #242424; border: 1px solid #c2c2c2; border-top-color: #242424; border-bottom-color: #242424;">
@if(isset($company)) @if(isset($company))
@if($company->account->isPaid()) @if($company->account->isPaid())
<p style="text-align: center; color: #ffffff; font-size: 10px; <p style="text-align: center; color: #ffffff; font-size: 10px;

View File

@ -2,7 +2,6 @@
if(!isset($design)) { if(!isset($design)) {
$design = 'light'; $design = 'light';
} }
$primary_color = isset($settings) ? $settings->primary_color : '#4caf50'; $primary_color = isset($settings) ? $settings->primary_color : '#4caf50';
@endphp @endphp
@ -28,7 +27,6 @@
color: #0000ee; color: #0000ee;
text-decoration: underline; text-decoration: underline;
} }
@media only screen and (min-width: 520px) { @media only screen and (min-width: 520px) {
.u-row { .u-row {
width: 500px !important; width: 500px !important;
@ -40,7 +38,6 @@
width: 500px !important; width: 500px !important;
} }
} }
@media (max-width: 520px) { @media (max-width: 520px) {
.u-row-container { .u-row-container {
max-width: 100% !important; max-width: 100% !important;
@ -62,37 +59,30 @@
margin: 0 auto; margin: 0 auto;
} }
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
table, table,
tr, tr,
td { td {
vertical-align: top; vertical-align: top;
border-collapse: collapse; border-collapse: collapse;
} }
p { p {
margin: 0; margin: 0;
} }
.ie-container table, .ie-container table,
.mso-container table { .mso-container table {
table-layout: fixed; table-layout: fixed;
} }
* { * {
line-height: inherit; line-height: inherit;
} }
a[x-apple-data-detectors='true'] { a[x-apple-data-detectors='true'] {
color: inherit !important; color: inherit !important;
text-decoration: none !important; text-decoration: none !important;
} }
.header-logo { .header-logo {
outline: none; outline: none;
text-decoration: none; text-decoration: none;
@ -105,15 +95,12 @@
width: 60%; width: 60%;
max-width: 288px; max-width: 288px;
} }
h1 { h1 {
margin: 0px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word; font-weight: normal; font-family: arial,helvetica,sans-serif; font-size: 22px; margin: 0px; color: #000000; line-height: 140%; text-align: left; word-wrap: break-word; font-weight: normal; font-family: arial,helvetica,sans-serif; font-size: 22px;
} }
p { p {
font-size: 14px; line-height: 140% font-size: 14px; line-height: 140%
} }
.button { .button {
padding: 12px; padding: 12px;
box-sizing: border-box; box-sizing: border-box;
@ -134,16 +121,13 @@
word-wrap: break-word; word-wrap: break-word;
mso-border-alt: none; mso-border-alt: none;
} }
.center { .center {
text-align: center; text-align: center;
} }
.content-contrast-color { .content-contrast-color {
color: {{ $design == 'dark' ? '#ffffff' : '#000000' }} !important; color: {{ $design == 'dark' ? '#ffffff' : '#000000' }} !important;
opacity: {{ $design == 'dark' ? '87%': '100%' }} !important; opacity: {{ $design == 'dark' ? '87%': '100%' }} !important;
} }
.stamp { .stamp {
transform: rotate(12deg); transform: rotate(12deg);
color: #555; color: #555;
@ -160,7 +144,6 @@
position: fixed; position: fixed;
text-align: center; text-align: center;
} }
.is-paid { .is-paid {
color: #D23; color: #D23;
border: 1rem double #D23; border: 1rem double #D23;
@ -335,4 +318,4 @@
<!--[if IE]></div><![endif]--> <!--[if IE]></div><![endif]-->
</body> </body>
</html> </html>