Merge pull request #238 from sprain/html-stylesheets

Improve stylesheets in HtmlOutput
sprain · Oct 31, 2023 · dd4d2c1 · dd4d2c1
2 parents dcb4f0f + 67b704b
commit dd4d2c1
Show file tree

Hide file tree

Showing 27 changed files with 1,809 additions and 1,782 deletions.
diff --git a/src/PaymentPart/Output/HtmlOutput/Template/PaymentPartTemplate.php b/src/PaymentPart/Output/HtmlOutput/Template/PaymentPartTemplate.php
@@ -7,13 +7,13 @@ class PaymentPartTemplate
     public const TEMPLATE = <<<EOT
 <style>
 #qr-bill {
-	box-sizing: border-box;
-	border-collapse: collapse;
-	color: #000 !important;
+    box-sizing: border-box;
+    border-collapse: collapse;
+    color: #000 !important;
 }
 
 #qr-bill * {
-	font-family: Arial, Frutiger, Helvetica, "Liberation Sans"  !important;
+    font-family: Arial, Frutiger, Helvetica, "Liberation Sans"  !important;
 }
 
 #qr-bill img.qr-bill-placeholder {
@@ -24,92 +24,93 @@ class PaymentPartTemplate
     text-align: center;
     font-size: 8pt !important;
     line-height: 9pt;
-	border-bottom: 0.75pt solid black;
-	height: 5mm;
-	vertical-align: middle;
+    border-bottom: 0.75pt solid black;
+    height: 5mm;
+    vertical-align: middle;
 }
 
 /* h1 / h2 */
 #qr-bill h1 {
-	font-size: 11pt !important;
-	font-weight: bold !important;
-	margin: 0;
-	padding: 0;
-	height: 7mm;
-	color: #000 !important;
+    font-size: 11pt !important;
+    line-height: 13pt !important;
+    font-weight: bold !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    height: 7mm !important;
+    color: #000 !important;
 }
 
 #qr-bill h2 {
-	font-weight: bold !important;
-	margin: 0;
-	padding: 0;
-	color: #000 !important;
+    font-weight: bold !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    color: #000 !important;
 }
 
 #qr-bill-payment-part h2 {
-	font-size: 8pt !important;
-	line-height: 11pt !important;	
-    margin-top: 11pt;
-	color: #000 !important;
+    font-size: 8pt !important;
+    line-height: 11pt !important;    
+    margin-top: 11pt !important;
+    color: #000 !important;
 }
 
 #qr-bill-receipt h2 {
-	font-size: 6pt !important;
-	line-height: 8pt !important;	
-    margin-top: 8pt;
-	color: #000 !important;
+    font-size: 6pt !important;
+    line-height: 8pt !important;    
+    margin-top: 8pt !important;
+    color: #000 !important;
 }
 
 #qr-bill-payment-part h2:first-child,
 #qr-bill-receipt h2:first-child {
-	margin-top: 0;
-	color: #000 !important;
+    margin-top: 0 !important;
+    color: #000 !important;
 }
 
 /* p */
 #qr-bill p {
-	font-weight: normal !important;
-	margin: 0;
-	padding: 0;
-	color: #000 !important;
+    font-weight: normal !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    color: #000 !important;
 }
 
 #qr-bill-receipt p {
-	font-size: 8pt !important;
-	line-height: 9pt !important;
-	color: #000 !important;
+    font-size: 8pt !important;
+    line-height: 9pt !important;
+    color: #000 !important;
 }
 
 #qr-bill-payment-part p {
-	font-size: 10pt !important;
-	line-height: 11pt !important;
-	color: #000 !important;
+    font-size: 10pt !important;
+    line-height: 11pt !important;
+    color: #000 !important;
 }
 
 #qr-bill-amount-area-receipt p{
     line-height: 11pt !important;
-	color: #000 !important;
+    color: #000 !important;
 }
 
 #qr-bill-amount-area p{
     line-height: 13pt !important;
-	color: #000 !important;
+    color: #000 !important;
 }
 
 #qr-bill-payment-further-information p {
     font-size: 7pt !important;
     line-height: 9pt !important;
-	color: #000 !important;
+    color: #000 !important;
 }
 
 /* Receipt */
 #qr-bill-receipt {
     box-sizing: border-box;
     width: 62mm;
-	border-right: 0.2mm solid black;
-	padding-left: 5mm;
-	padding-top: 5mm;
-	vertical-align: top;
+    border-right: 0.2mm solid black;
+    padding-left: 5mm;
+    padding-top: 5mm;
+    vertical-align: top;
 }
 
 #qr-bill-information-receipt {
@@ -121,8 +122,8 @@ class PaymentPartTemplate
 }
 
 #qr-bill-currency-receipt {
-	float: left;
-	margin-right: 2mm;
+    float: left;
+    margin-right: 2mm;
 }
 
 #qr-bill-acceptance-point {
@@ -141,10 +142,10 @@ class PaymentPartTemplate
 #qr-bill-payment-part {
     box-sizing: border-box;
     width: 148mm;
-	padding-left: 5mm;
-	padding-top: 5mm;
-	padding-right: 5mm;
-	vertical-align: top;
+    padding-left: 5mm;
+    padding-top: 5mm;
+    padding-right: 5mm;
+    vertical-align: top;
 }
 
 #qr-bill-payment-part-left {
@@ -154,19 +155,19 @@ class PaymentPartTemplate
 }
 
 #qr-bill-swiss-qr-image {
-	width: 46mm;
-	height: 46mm;
-	margin: 5mm;
-	margin-left: 0;
+    width: 46mm;
+    height: 46mm;
+    margin: 5mm;
+    margin-left: 0;
 }
 
 #qr-bill-amount-area {
     height: 22mm;
 }
 
 #qr-bill-currency {
-	float: left;
-	margin-right: 2mm;
+    float: left;
+    margin-right: 2mm;
 }
 
 #qr-bill-payment-further-information {
@@ -185,10 +186,10 @@ class PaymentPartTemplate
     <tr id="qr-bill-separate-info">
         <td colspan="99"><span id="qr-bill-separate-info-text">{{ text.separate }}</span></td>
     </tr>
-	<tr>
-	    <td id="qr-bill-receipt">
-	        <h1>{{ text.receipt }}</h1>
-	        <div id="qr-bill-information-receipt">
+    <tr>
+        <td id="qr-bill-receipt">
+            <h1>{{ text.receipt }}</h1>
+            <div id="qr-bill-information-receipt">
                 {{ information-content-receipt }}
             </div>
             <div id="qr-bill-amount-area-receipt">
@@ -216,17 +217,17 @@ class PaymentPartTemplate
                         {{ amount-content }}
                     </div>
                 </div>
-			</div>
-			<div id="qr-bill-payment-part-right">
+            </div>
+            <div id="qr-bill-payment-part-right">
                 <div id="qr-bill-information">
                     {{ information-content }}
                 </div>
-			</div>
-			<div id="qr-bill-payment-further-information">
-			    {{ further-information-content }}
+            </div>
+            <div id="qr-bill-payment-further-information">
+                {{ further-information-content }}
             </div>
         </td>
-	</tr>
+    </tr>
 </table>
 EOT;
 }