mirror of
				https://github.com/invoiceninja/invoiceninja.git
				synced 2025-11-03 23:37:33 -05:00 
			
		
		
		
	Update design padding & page-break
This commit is contained in:
		
							parent
							
								
									fac03fce96
								
							
						
					
					
						commit
						9a3dfb4f96
					
				@ -11,16 +11,18 @@
 | 
				
			|||||||
                font-size: '$font-size';
 | 
					                font-size: '$font-size';
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            @page {
 | 
					 | 
				
			||||||
                margin: 1cm;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
            body {
 | 
					            body {
 | 
				
			||||||
                -webkit-font-smoothing: antialiased;
 | 
					                -webkit-font-smoothing: antialiased;
 | 
				
			||||||
                -moz-osx-font-smoothing: grayscale;
 | 
					                -moz-osx-font-smoothing: grayscale;
 | 
				
			||||||
                font-family: Arial, Helvetica, sans-serif;
 | 
					                font-family: Arial, Helvetica, sans-serif;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            p {
 | 
				
			||||||
 | 
					                margin: 0;
 | 
				
			||||||
 | 
					                padding: 0;
 | 
				
			||||||
 | 
					                page-break-after: always;
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            @media print {
 | 
					            @media print {
 | 
				
			||||||
                body {
 | 
					                body {
 | 
				
			||||||
                    margin-top: 0;
 | 
					                    margin-top: 0;
 | 
				
			||||||
 | 
				
			|||||||
@ -16,6 +16,11 @@
 | 
				
			|||||||
                margin: 1cm;
 | 
					                margin: 1cm;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            p {
 | 
				
			||||||
 | 
					                margin: 0;
 | 
				
			||||||
 | 
					                padding: 0;
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
            .header-container {
 | 
					            .header-container {
 | 
				
			||||||
                display: grid;
 | 
					                display: grid;
 | 
				
			||||||
                grid-template-columns: 1.8fr 1fr 1fr;
 | 
					                grid-template-columns: 1.8fr 1fr 1fr;
 | 
				
			||||||
 | 
				
			|||||||
@ -17,6 +17,11 @@
 | 
				
			|||||||
                margin: 1cm;
 | 
					                margin: 1cm;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            p {
 | 
				
			||||||
 | 
					                margin: 0;
 | 
				
			||||||
 | 
					                padding: 0;
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            .header-container {
 | 
					            .header-container {
 | 
				
			||||||
                display: grid;
 | 
					                display: grid;
 | 
				
			||||||
                grid-template-columns: 1fr 1fr 1fr;
 | 
					                grid-template-columns: 1fr 1fr 1fr;
 | 
				
			||||||
@ -44,6 +49,7 @@
 | 
				
			|||||||
            .entity-label {
 | 
					            .entity-label {
 | 
				
			||||||
                text-transform: uppercase;
 | 
					                text-transform: uppercase;
 | 
				
			||||||
                margin-top: 3.5rem;
 | 
					                margin-top: 3.5rem;
 | 
				
			||||||
 | 
					                margin-bottom: 1rem;
 | 
				
			||||||
                font-weight: semibold;
 | 
					                font-weight: semibold;
 | 
				
			||||||
                color: #67b1cc;
 | 
					                color: #67b1cc;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
				
			|||||||
@ -14,6 +14,12 @@
 | 
				
			|||||||
                margin-bottom: 1cm;
 | 
					                margin-bottom: 1cm;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            p {
 | 
				
			||||||
 | 
					                margin: 0;
 | 
				
			||||||
 | 
					                padding: 0;
 | 
				
			||||||
 | 
					                page-break-after: always;
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            body {
 | 
					            body {
 | 
				
			||||||
                -webkit-font-smoothing: antialiased;
 | 
					                -webkit-font-smoothing: antialiased;
 | 
				
			||||||
                -moz-osx-font-smoothing: grayscale;
 | 
					                -moz-osx-font-smoothing: grayscale;
 | 
				
			||||||
 | 
				
			|||||||
@ -13,6 +13,12 @@
 | 
				
			|||||||
                margin: 1cm;
 | 
					                margin: 1cm;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            p {
 | 
				
			||||||
 | 
					                margin: 0;
 | 
				
			||||||
 | 
					                padding: 0;
 | 
				
			||||||
 | 
					                page-break-after: always;
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            body {
 | 
					            body {
 | 
				
			||||||
                -webkit-font-smoothing: antialiased;
 | 
					                -webkit-font-smoothing: antialiased;
 | 
				
			||||||
                -moz-osx-font-smoothing: grayscale;
 | 
					                -moz-osx-font-smoothing: grayscale;
 | 
				
			||||||
@ -172,8 +178,8 @@
 | 
				
			|||||||
        <div id="product-table-footer" cellspacing="0"></div>
 | 
					        <div id="product-table-footer" cellspacing="0"></div>
 | 
				
			||||||
    </body>
 | 
					    </body>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <footer id="footer">
 | 
					 | 
				
			||||||
    <p class="thanks-label">$thanks_label!</p>
 | 
					    <p class="thanks-label">$thanks_label!</p>
 | 
				
			||||||
    <hr class="double-border" />
 | 
					    <hr class="double-border" />
 | 
				
			||||||
    </footer>
 | 
					
 | 
				
			||||||
 | 
					    <div id="footer"></div>
 | 
				
			||||||
</html>
 | 
					</html>
 | 
				
			||||||
 | 
				
			|||||||
@ -13,6 +13,12 @@
 | 
				
			|||||||
                margin: 1cm;
 | 
					                margin: 1cm;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					            p {
 | 
				
			||||||
 | 
					                margin: 0;
 | 
				
			||||||
 | 
					                padding: 0;
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            body {
 | 
					            body {
 | 
				
			||||||
                -webkit-font-smoothing: antialiased;
 | 
					                -webkit-font-smoothing: antialiased;
 | 
				
			||||||
                -moz-osx-font-smoothing: grayscale;
 | 
					                -moz-osx-font-smoothing: grayscale;
 | 
				
			||||||
 | 
				
			|||||||
@ -15,6 +15,12 @@
 | 
				
			|||||||
                font-family: Arial, Helvetica, sans-serif;
 | 
					                font-family: Arial, Helvetica, sans-serif;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            p {
 | 
				
			||||||
 | 
					                margin: 0;
 | 
				
			||||||
 | 
					                padding: 0;
 | 
				
			||||||
 | 
					                page-break-after: always;
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            .header-container {
 | 
					            .header-container {
 | 
				
			||||||
                background-color: #f46521;
 | 
					                background-color: #f46521;
 | 
				
			||||||
                color: white;
 | 
					                color: white;
 | 
				
			||||||
@ -87,17 +93,22 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
            .footer-wrapper {
 | 
					            .footer-wrapper {
 | 
				
			||||||
                display: grid;
 | 
					                display: grid;
 | 
				
			||||||
 | 
					                gap: 15px;
 | 
				
			||||||
                width: 100%;
 | 
					                width: 100%;
 | 
				
			||||||
                padding: 1.5rem;
 | 
					                padding: 1.5rem;
 | 
				
			||||||
                grid-template-columns: 2fr 1fr 1fr;
 | 
					                grid-template-columns: 1fr 1fr 1fr;
 | 
				
			||||||
                background-color: #f46521;
 | 
					                background-color: #f46521;
 | 
				
			||||||
                color: #fff4e9;
 | 
					                color: #fff4e9;
 | 
				
			||||||
 | 
					                margin-right: 1rem;
 | 
				
			||||||
 | 
					                margin-top: 1rem;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            #company-address,
 | 
					            #company-address,
 | 
				
			||||||
            #company-details {
 | 
					            #company-details {
 | 
				
			||||||
                display: flex;
 | 
					                display: flex;
 | 
				
			||||||
                flex-direction: column;
 | 
					                flex-direction: column;
 | 
				
			||||||
 | 
					                margin-top: 2rem;
 | 
				
			||||||
 | 
					                margin-bottom: 2rem;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
            #company-address > *,
 | 
					            #company-address > *,
 | 
				
			||||||
            #company-details > * {
 | 
					            #company-details > * {
 | 
				
			||||||
@ -155,12 +166,12 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
        <div class="table-wrapper">
 | 
					        <div class="table-wrapper">
 | 
				
			||||||
            <table id="product-table" cellspacing="0"></table>
 | 
					            <table id="product-table" cellspacing="0"></table>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <div id="product-table-footer" cellspacing="0"></div>
 | 
					        <div id="product-table-footer" cellspacing="0"></div>
 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
    </body>
 | 
					    </body>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <div class="footer-wrapper" id="footer">
 | 
					    <div class="footer-wrapper">
 | 
				
			||||||
        <div>
 | 
					        <div>
 | 
				
			||||||
            <!-- Placeholder for offset -->
 | 
					            <!-- Placeholder for offset -->
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
@ -168,4 +179,6 @@
 | 
				
			|||||||
        <div id="company-details"></div>
 | 
					        <div id="company-details"></div>
 | 
				
			||||||
        <div id="company-address"></div>
 | 
					        <div id="company-address"></div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <div id="footer"></div>
 | 
				
			||||||
</html>
 | 
					</html>
 | 
				
			||||||
 | 
				
			|||||||
@ -13,6 +13,12 @@
 | 
				
			|||||||
                margin: 1cm;
 | 
					                margin: 1cm;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            p {
 | 
				
			||||||
 | 
					                margin: 0;
 | 
				
			||||||
 | 
					                padding: 0;
 | 
				
			||||||
 | 
					                page-break-after: always;
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            body {
 | 
					            body {
 | 
				
			||||||
                -webkit-font-smoothing: antialiased;
 | 
					                -webkit-font-smoothing: antialiased;
 | 
				
			||||||
                -moz-osx-font-smoothing: grayscale;
 | 
					                -moz-osx-font-smoothing: grayscale;
 | 
				
			||||||
 | 
				
			|||||||
@ -13,6 +13,11 @@
 | 
				
			|||||||
                margin: 1cm;
 | 
					                margin: 1cm;
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            p {
 | 
				
			||||||
 | 
					                margin: 0;
 | 
				
			||||||
 | 
					                padding: 0;
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            body {
 | 
					            body {
 | 
				
			||||||
                -webkit-font-smoothing: antialiased;
 | 
					                -webkit-font-smoothing: antialiased;
 | 
				
			||||||
                -moz-osx-font-smoothing: grayscale;
 | 
					                -moz-osx-font-smoothing: grayscale;
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user