Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-07-09 03:14:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4124 from beganovich/v2-primary-color-on-invoice-designs

Browse Source 
Using primary & secondary colors in the invoice designs
This commit is contained in:
David Bomba 2020-10-01 21:43:01 +10:00 committed by GitHub
commit 864751fdd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 76 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/Utils/HtmlEngine.php
View File

@ -321,6 +321,9 @@ class HtmlEngine
$data['$invoiceninja.whitelabel'] = ['value' => asset('images/created-by-invoiceninja-new.png'), 'label' => '']; $data['$invoiceninja.whitelabel'] = ['value' => asset('images/created-by-invoiceninja-new.png'), 'label' => ''];
$data['$primary_color'] = ['value' => $this->settings->primary_color, 'label' => ''];
$data['$secondary_color'] = ['value' => $this->settings->secondary_color, 'label' => ''];
// $data['custom_label1'] = ['value' => '', 'label' => ctrans('texts.')]; // $data['custom_label1'] = ['value' => '', 'label' => ctrans('texts.')];
// $data['custom_label2'] = ['value' => '', 'label' => ctrans('texts.')]; // $data['custom_label2'] = ['value' => '', 'label' => ctrans('texts.')];
// $data['custom_label3'] = ['value' => '', 'label' => ctrans('texts.')]; // $data['custom_label3'] = ['value' => '', 'label' => ctrans('texts.')];

9
resources/views/pdf-designs/bold.html
View File

@ -5,6 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style id="style"> <style id="style">
:root {
--primary-color: $primary_color;
--secondary-color: $secondary_color;
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -66,7 +71,7 @@
} }
.entity-details-wrapper { .entity-details-wrapper {
background-color: #35a39a; background-color: var(--primary-color);
padding: 1rem; padding: 1rem;
} }
@ -133,7 +138,7 @@
#product-table-footer #product-table-footer
> * > *
[data-element='product-table-balance-due'] { [data-element='product-table-balance-due'] {
color: #35a39a; color: var(--primary-color);
} }
#product-table-footer > * > :last-child { #product-table-footer > * > :last-child {
text-align: right; text-align: right;

13
resources/views/pdf-designs/business.html
View File

@ -5,6 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style id="style"> <style id="style">
:root {
--primary-color: $primary_color;
--secondary-color: $secondary_color;
}
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@ -66,7 +71,7 @@
#client-details { #client-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #ec782f; color: var(--primary-color);
} }
#client-details > * { #client-details > * {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@ -76,7 +81,7 @@
} }
#entity-details { #entity-details {
background-color: #ec782f; background-color: var(--primary-color);
padding: 0.8rem; padding: 0.8rem;
border-radius: 1rem; border-radius: 1rem;
width: 100%; width: 100%;
@ -95,7 +100,7 @@
} }
#product-table > thead { #product-table > thead {
text-align: left; text-align: left;
background: #394e6b; background: var(--secondary-color);
} }
#product-table > thead > tr > th { #product-table > thead > tr > th {
padding: 1rem; padding: 1rem;
@ -124,7 +129,7 @@
[data-element='product-table-balance-due-label'], [data-element='product-table-balance-due-label'],
[data-element='product-table-balance-due'] { [data-element='product-table-balance-due'] {
color: #394e6b !important; color: var(--secondary-color) !important;
font-weight: bold !important; font-weight: bold !important;
} }

13
resources/views/pdf-designs/clean.html
View File

@ -6,6 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style id="style"> <style id="style">
:root {
--primary-color: $primary_color;
--secondary-color: $secondary_color;
}
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@ -34,7 +39,7 @@
color: #9f9f9f; color: #9f9f9f;
} }
#company-details > span:first-child { #company-details > span:first-child {
color: #67b1cc; color: var(--primary-color);
} }
#company-address { #company-address {
@ -48,7 +53,7 @@
margin-top: 3.5rem; margin-top: 3.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
font-weight: semibold; font-weight: semibold;
color: #67b1cc; color: var(--primary-color);
} }
.client-and-entity-wrapper { .client-and-entity-wrapper {
@ -97,7 +102,7 @@
padding: 1rem; padding: 1rem;
} }
#product-table > tbody > tr > td:first-child { #product-table > tbody > tr > td:first-child {
color: #67b1cc; color: var(--primary-color);
} }
#product-table > tbody > tr:nth-child(odd) { #product-table > tbody > tr:nth-child(odd) {
background-color: #f5f5f5; background-color: #f5f5f5;
@ -125,7 +130,7 @@
#product-table-footer #product-table-footer
> * > *
[data-element='product-table-balance-due'] { [data-element='product-table-balance-due'] {
color: #67b1cc; color: var(--primary-color);
} }
#product-table-footer > * > :last-child { #product-table-footer > * > :last-child {
text-align: right; text-align: right;

13
resources/views/pdf-designs/creative.html
View File

@ -5,6 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style id="style"> <style id="style">
:root {
--primary-color: $primary_color;
--secondary-color: $secondary_color;
}
* { * {
font-size: '$font-size'; font-size: '$font-size';
} }
@ -66,7 +71,7 @@
text-transform: uppercase; text-transform: uppercase;
} }
.entity-label-wrapper .entity-label > *:last-child { .entity-label-wrapper .entity-label > *:last-child {
color: #b21c53; color: var(--primary-color);
font-style: italic; font-style: italic;
} }
.entity-label-wrapper #entity-details { .entity-label-wrapper #entity-details {
@ -82,7 +87,7 @@
min-width: 100%; min-width: 100%;
table-layout: fixed; table-layout: fixed;
overflow-wrap: break-word; overflow-wrap: break-word;
border-top: 5px solid #b21c53; border-top: 5px solid var(--primary-color);
} }
#product-table > thead { #product-table > thead {
text-align: left; text-align: left;
@ -117,13 +122,13 @@
> * > *
[data-element='product-table-balance-due'] { [data-element='product-table-balance-due'] {
font-weight: bold; font-weight: bold;
color: #b21c53; color: var(--primary-color);
} }
#product-table-footer > * > * { #product-table-footer > * > * {
padding-left: 1rem; padding-left: 1rem;
} }
#product-table-footer > *:last-child > * { #product-table-footer > *:last-child > * {
border-top: 5px solid #b21c53; border-top: 5px solid var(--primary-color);
padding-top: 1rem; padding-top: 1rem;
} }
#product-table-footer > * > :last-child { #product-table-footer > * > :last-child {

9
resources/views/pdf-designs/elegant.html
View File

@ -5,6 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style id="style"> <style id="style">
:root {
--primary-color: $primary_color;
--secondary-color: $secondary_color;
}
* { * {
font-size: '$font-size'; font-size: '$font-size';
} }
@ -86,7 +91,7 @@
font-size: 1.1rem; font-size: 1.1rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
padding-left: 1rem; padding-left: 1rem;
color: #396d49; color: var(--primary-color);
font-weight: medium; font-weight: medium;
} }
#product-table > thead > tr > th:last-child { #product-table > thead > tr > th:last-child {
@ -131,7 +136,7 @@
#product-table-footer #product-table-footer
> * > *
[data-element='product-table-balance-due'] { [data-element='product-table-balance-due'] {
color: #396d49; color: var(--primary-color);
} }
#product-table-footer > * > :last-child { #product-table-footer > * > :last-child {
text-align: right; text-align: right;

11
resources/views/pdf-designs/hipster.html
View File

@ -5,6 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style id="style"> <style id="style">
:root {
--primary-color: $primary_color;
--secondary-color: $secondary_color;
}
* { * {
font-size: '$font-size'; font-size: '$font-size';
} }
@ -30,7 +35,7 @@
.header-wrapper .header-text-label { .header-wrapper .header-text-label {
font-size: 1.1rem; font-size: 1.1rem;
color: #bba238; color: var(--primary-color);
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
} }
@ -83,7 +88,7 @@
[data-element='entity-details-wrapper-invoice-number-label'], [data-element='entity-details-wrapper-invoice-number-label'],
.entity-details-wrapper .entity-details-wrapper
[data-element='entity-details-wrapper-amount-due'] { [data-element='entity-details-wrapper-amount-due'] {
color: #bba238; color: var(--primary-color);
font-weight: bold; font-weight: bold;
} }
@ -137,7 +142,7 @@
#product-table-footer #product-table-footer
> * > *
[data-element='product-table-balance-due'] { [data-element='product-table-balance-due'] {
color: #bba238; color: var(--primary-color);
} }
#product-table-footer > * > :last-child { #product-table-footer > * > :last-child {
text-align: right; text-align: right;

15
resources/views/pdf-designs/modern.html
View File

@ -5,6 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style id="style"> <style id="style">
:root {
--primary-color: $primary_color;
--secondary-color: $secondary_color;
}
* { * {
font-size: '$font-size'; font-size: '$font-size';
} }
@ -24,7 +29,7 @@
} }
.header-container { .header-container {
background-color: #f46521; background-color: var(--primary-color);
color: white; color: white;
display: grid; display: grid;
grid-template-columns: 1.5fr 1fr; grid-template-columns: 1.5fr 1fr;
@ -79,14 +84,14 @@
} }
#product-table > thead > tr > th { #product-table > thead > tr > th {
padding: 0.8rem; padding: 0.8rem;
background-color: #3f3e3c; background-color: var(--secondary-color);
color: white; color: white;
} }
#product-table > thead > tr > th:last-child { #product-table > thead > tr > th:last-child {
text-align: right; text-align: right;
} }
#product-table > tbody > tr > td { #product-table > tbody > tr > td {
border-bottom: 1px solid #3f3e3c; border-bottom: 1px solid var(--secondary-color);
padding: 1rem; padding: 1rem;
} }
#product-table > tbody > tr > td:first-child { #product-table > tbody > tr > td:first-child {
@ -98,7 +103,7 @@
.footer-wrapper { .footer-wrapper {
margin-top: 1rem; margin-top: 1rem;
background-color: #f46521; background-color: var(--primary-color);
padding: 1rem; padding: 1rem;
height: 160px; height: 160px;
width: 100%; width: 100%;
@ -154,7 +159,7 @@
padding-right: 1rem; padding-right: 1rem;
} }
#product-table-footer > *:last-child { #product-table-footer > *:last-child {
background-color: #3f3e3c; background-color: var(--secondary-color);
color: white; color: white;
padding-top: 0.7rem; padding-top: 0.7rem;
padding-bottom: 0.7rem; padding-bottom: 0.7rem;

23
resources/views/pdf-designs/playful.html
View File

@ -5,6 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style id="style"> <style id="style">
:root {
--primary-color: $primary_color;
--secondary-color: $secondary_color;
}
* { * {
font-size: '$font-size'; font-size: '$font-size';
} }
@ -29,7 +34,7 @@
height: 5rem; height: 5rem;
} }
.header-wrapper .entity-details-wrapper { .header-wrapper .entity-details-wrapper {
background-color: #009e90; background-color: var(--primary-color);
padding: 1rem; padding: 1rem;
border-radius: 10px; border-radius: 10px;
} }
@ -51,7 +56,7 @@
} }
.contacts-wrapper .contact-label { .contacts-wrapper .contact-label {
font-weight: bold; font-weight: bold;
color: #009e90; color: var(--primary-color);
margin-left: 1rem; margin-left: 1rem;
} }
.contacts-wrapper #company-address, .contacts-wrapper #company-address,
@ -64,7 +69,7 @@
.contacts-wrapper .company-info { .contacts-wrapper .company-info {
margin-top: 1rem; margin-top: 1rem;
padding: 1rem; padding: 1rem;
border-top: 1px solid #009e90; border-top: 1px solid var(--primary-color);
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 10px; gap: 10px;
@ -72,12 +77,12 @@
.contacts-wrapper #client-details { .contacts-wrapper #client-details {
margin-top: 1rem; margin-top: 1rem;
padding: 1rem; padding: 1rem;
border-top: 1px solid #009e90; border-top: 1px solid var(--primary-color);
} }
.contact-wrapper-left-side, .contact-wrapper-left-side,
.contact-wrapper-right-side { .contact-wrapper-right-side {
border-bottom: 1px solid #009e90; border-bottom: 1px solid var(--primary-color);
} }
#product-table { #product-table {
@ -92,7 +97,7 @@
#product-table > thead > tr > th { #product-table > thead > tr > th {
font-size: 1.2rem; font-size: 1.2rem;
padding: 1rem; padding: 1rem;
background: #009e90; background: var(--primary-color);
color: white; color: white;
} }
#product-table > thead tr > th:last-child { #product-table > thead tr > th:last-child {
@ -107,11 +112,11 @@
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
} }
#product-table > tbody > tr > td { #product-table > tbody > tr > td {
border-bottom: 1px solid #009e90; border-bottom: 1px solid var(--primary-color);
padding: 1rem; padding: 1rem;
} }
#product-table > tbody > tr > td:first-child { #product-table > tbody > tr > td:first-child {
color: #bb3a24; color: var(--primary-color);
} }
#product-table > tbody > tr > td:last-child { #product-table > tbody > tr > td:last-child {
text-align: right; text-align: right;
@ -139,7 +144,7 @@
#product-table-footer #product-table-footer
> * > *
[data-element='product-table-balance-due'] { [data-element='product-table-balance-due'] {
color: #009e90; color: var(--primary-color);
} }
#product-table-footer > * > :last-child { #product-table-footer > * > :last-child {
text-align: right; text-align: right;