mirror of
				https://github.com/invoiceninja/invoiceninja.git
				synced 2025-10-31 14:37:33 -04:00 
			
		
		
		
	Playful: Line height, header spacing, bottom colors
This commit is contained in:
		
							parent
							
								
									d5bcecc33f
								
							
						
					
					
						commit
						31065b10ee
					
				| @ -2,6 +2,7 @@ | |||||||
|     :root { |     :root { | ||||||
|         --primary-color: $primary_color; |         --primary-color: $primary_color; | ||||||
|         --secondary-color: $secondary_color; |         --secondary-color: $secondary_color; | ||||||
|  |         --line-height: 1.6; | ||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|     body { |     body { | ||||||
| @ -24,8 +25,9 @@ | |||||||
| 
 | 
 | ||||||
|     .header-wrapper { |     .header-wrapper { | ||||||
|         margin-top: 2rem; |         margin-top: 2rem; | ||||||
|         display: grid; |         display: flex; | ||||||
|         grid-template-columns: 1fr 0.5fr 2fr; |         justify-content: space-between; | ||||||
|  |         gap: 20px; | ||||||
|         padding: 2rem 3rem; |         padding: 2rem 3rem; | ||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
| @ -35,6 +37,8 @@ | |||||||
|         border-radius: 10px; |         border-radius: 10px; | ||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|  |     #entity-details p { margin-right: 20px; } | ||||||
|  | 
 | ||||||
|     .header-wrapper #entity-details { |     .header-wrapper #entity-details { | ||||||
|         width: 100%; |         width: 100%; | ||||||
|         color: white; |         color: white; | ||||||
| @ -249,6 +253,19 @@ | |||||||
|         margin-bottom: 0; |         margin-bottom: 0; | ||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|  |     #footer-colors { | ||||||
|  |         position: fixed; | ||||||
|  |         bottom: 0; | ||||||
|  |         min-width: 100%; | ||||||
|  |         display: grid; | ||||||
|  |         grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; | ||||||
|  |         margin-left: -10px;     | ||||||
|  |    } | ||||||
|  | 
 | ||||||
|  |    #footer-colors > * { | ||||||
|  |         padding: 10px; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|     /** Useful snippets, uncomment to enable. **/ |     /** Useful snippets, uncomment to enable. **/ | ||||||
|      |      | ||||||
|     /** Hide company logo **/ |     /** Hide company logo **/ | ||||||
| @ -292,13 +309,9 @@ | |||||||
| 
 | 
 | ||||||
| <div id="body"> | <div id="body"> | ||||||
|     <div class="header-wrapper"> |     <div class="header-wrapper"> | ||||||
|         <img |         <div> | ||||||
|             class="company-logo" |             <img class="company-logo" src="$company.logo" alt="$company.name logo"> | ||||||
|             src="$company.logo" |         </div> | ||||||
|             alt="$company.name logo" |  | ||||||
|         /> |  | ||||||
| 
 |  | ||||||
|         <div></div> |  | ||||||
| 
 | 
 | ||||||
|         <div class="entity-details-wrapper"> |         <div class="entity-details-wrapper"> | ||||||
|             <table id="entity-details" cellspacing="0" dir="$dir"></table> |             <table id="entity-details" cellspacing="0" dir="$dir"></table> | ||||||
| @ -332,6 +345,17 @@ | |||||||
| <div id="footer"> | <div id="footer"> | ||||||
|     <p data-ref="total_table-footer">$entity_footer</p> |     <p data-ref="total_table-footer">$entity_footer</p> | ||||||
| 
 | 
 | ||||||
|  |     <div id="footer-colors"> | ||||||
|  |         <div style="background-color: #00968B"><!-- 1 --></div> | ||||||
|  |         <div style="background-color: #1D756E"><!-- 2 --></div> | ||||||
|  |         <div style="background-color: #FCB600"><!-- 3 --></div> | ||||||
|  |         <div style="background-color: #BA932F"><!-- 4 --></div> | ||||||
|  |         <div style="background-color: #A72A4E"><!-- 5 --></div> | ||||||
|  |         <div style="background-color: #E20041"><!-- 6 --></div> | ||||||
|  |         <div style="background-color: #F8B300"><!-- 7 --></div> | ||||||
|  |         <div style="background-color: #009B8F"><!-- 8 --></div> | ||||||
|  |     </div> | ||||||
|  | 
 | ||||||
|     <script> |     <script> | ||||||
|         // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present. |         // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present. | ||||||
|         document.addEventListener('DOMContentLoaded', () => { |         document.addEventListener('DOMContentLoaded', () => { | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user