You are here

Home » API reference » Invoice 6

default.css in Invoice 6

Same filename and directory in other branches
  1. 7 templates/default.css
/* General */
.invoice-wrapper {
  line-height:100%;
}
/* Because dompdf library needs 2x <br /> for a new line, instead of 1x,
   we don't use <br /> but use with the .break class */
.invoice-wrapper .break {
  margin-bottom:14px;
}
.invoice-wrapper, .invoice-wrapper td, .invoice-wrapper th {
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  color:#333; 
}
.invoice-wrapper table {
  border-collapse:collapse;
  width:100%;
  margin:10px 0 0;
}
.invoice-wrapper th {
  text-align:left;
  border:0;
  border-width:0;
}
.invoice-wrapper tr.even, .invoice-wrapper tr.odd, .invoice-wrapper tbody th {
/*border:1px solid red;*/
}
.invoice-wrapper table tbody, .invoice-wrapper table tbody th {
  border-top:0;
}
.invoice-wrapper table thead tr.two td.invoice-details {
  padding-top:20px;
  border-bottom:1px solid #E9EFF3;
  padding-bottom:2px;
}
.invoice-wrapper table thead td {
  vertical-align:top;
}
.invoice-wrapper table thead td.one {
  width:30%;
}
.invoice-wrapper table thead td.two {
}
.invoice-wrapper table thead td.three {
  width:30%;
}
.invoice-links {
  text-align:left;
}
.invoice-wrapper .items tr td, .invoice-wrapper .items tr th {
  padding:4px;
}
.invoice-wrapper tr.odd td, tr.info td {  
  background-color:#E9EFF3;
  border:0;
}
.invoice-wrapper tr.even, .invoice-wrapper tr.odd, .invoice-wrapper tbody th {
  border-color:#D3E7F4;
  border-style:solid;
  border-width:0px 0pt;
}
.invoice-wrapper h1 {
  font-size:22px;
  margin:0;
  color:#333;
}
.invoice-wrapper table.items {
  margin-top:20px;  
}
.invoice-wrapper table.items td, .invoice-wrapper table.items th {
  text-align:right;  
} 
.invoice-wrapper table.items th.description, .invoice-wrapper table.items td.description {
  text-align:left;
}
.invoice-wrapper tr.total td {
  border-top:1px solid #E9EFF3;
}
.invoice-wrapper table.total {
  margin-top:20px;
}
.invoice-wrapper table.total td {
  padding:0;
  margin:0;
}
.invoice-wrapper table.total td.two {
  width:25%;
}
.invoice-wrapper table.total td.three {
  width:20%;
  text-align:right;
}
.invoice-wrapper table.total tr.inctotal td {
  padding-top:10px;
  vertical-align:bottom;
}
.invoice-wrapper table.total tr.inctotal td.three div.inctotal {
  width:80px;
  border-top:1px solid #E9EFF3;
  font-weight:bold; 
  margin-left: auto;
  margin-right: 0;
  padding-top:2px;
}
.invoice-wrapper table.total tr.inctotal td.three div.inctotal div.inner {
  padding-top:2px;
}
.invoice-wrapper .inctotal {
  font-weight:bold;
}
.invoice-wrapper tfoot td {
  color:#7a7a7a;
}
.invoice-wrapper table thead tr.two td table.invoice-details {
  margin:0; 
}
.invoice-wrapper table thead tr.two td table.invoice-details td {
  border:0;
  padding:0;
}
.invoice-wrapper table.invoice-details td, .invoice-wrapper table.invoice-details tr {
  border:0;
  padding:0;
  margin:0;
}
.invoice-wrapper tfoot td.footer {
  padding-top:40px;
}
.invoice-wrapper .additional-information {
  padding-top:40px;
}
.invoice-wrapper .invoice-description, .invoice-wrapper .pay-limit {
  padding-top:20px;
}
.invoice-wrapper .pay-limit {
  font-weight:bold;
}


/* Client */
.invoice-wrapper .client-wrapper {
  margin-top:20px;
}


/* Supplier */
.invoice-wrapper .supplier-wrapper .company-name {
  font-size:15px;
  margin-top:5px;
  margin-bottom:10px;
  padding:0px;
  font-weight:bold;
}


/* PDF */
.pdf .invoice-wrapper {
  margin-left:30px;
  margin-right:30px;
  margin-bottom:50px;
}
.pdf .invoice-wrapper h1, .pdf .invoice-wrapper h2 {
  color:#000;
}
.pdf .invoice-wrapper h1 {
  font-size:18px;
}
.pdf .invoice-wrapper, .pdf .invoice-wrapper td, .pdf .invoice-wrapper th {
  font-size:8px;
  color:#000;
}
.pdf .invoice-wrapper .break {
  margin-bottom:8px;
}
.pdf .invoice-wrapper table.items {
  margin-top:10px;  
}
.pdf .invoice-wrapper .items tr th {
  padding:0 2px 6px 4px;
}
.pdf .invoice-wrapper .items tr td {  
  padding:0 4px 6px 4px;
}
.pdf .invoice-wrapper table.invoice-details td.one {
  width:40%;
}
.pdf .invoice-wrapper table.invoice-details td.three {
  width:25%;
}

File

templates/default.css
View source 
  1. /* General */

  2. .invoice-wrapper {

  3.   line-height:100%;

  4. }

  5. /* Because dompdf library needs 2x 
     for a new line, instead of 1x,

  6.    we don't use 
     but use with the .break class */

  7. .invoice-wrapper .break {

  8.   margin-bottom:14px;

  9. }

  10. .invoice-wrapper, .invoice-wrapper td, .invoice-wrapper th {

  11.   font-family:Arial,Helvetica,sans-serif;

  12.   font-size:12px;

  13.   color:#333; 

  14. }

  15. .invoice-wrapper table {

  16.   border-collapse:collapse;

  17.   width:100%;

  18.   margin:10px 0 0;

  19. }

  20. .invoice-wrapper th {

  21.   text-align:left;

  22.   border:0;

  23.   border-width:0;

  24. }

  25. .invoice-wrapper tr.even, .invoice-wrapper tr.odd, .invoice-wrapper tbody th {

  26. /*border:1px solid red;*/

  27. }

  28. .invoice-wrapper table tbody, .invoice-wrapper table tbody th {

  29.   border-top:0;

  30. }

  31. .invoice-wrapper table thead tr.two td.invoice-details {

  32.   padding-top:20px;

  33.   border-bottom:1px solid #E9EFF3;

  34.   padding-bottom:2px;

  35. }

  36. .invoice-wrapper table thead td {

  37.   vertical-align:top;

  38. }

  39. .invoice-wrapper table thead td.one {

  40.   width:30%;

  41. }

  42. .invoice-wrapper table thead td.two {

  43. }

  44. .invoice-wrapper table thead td.three {

  45.   width:30%;

  46. }

  47. .invoice-links {

  48.   text-align:left;

  49. }

  50. .invoice-wrapper .items tr td, .invoice-wrapper .items tr th {

  51.   padding:4px;

  52. }

  53. .invoice-wrapper tr.odd td, tr.info td {  

  54.   background-color:#E9EFF3;

  55.   border:0;

  56. }

  57. .invoice-wrapper tr.even, .invoice-wrapper tr.odd, .invoice-wrapper tbody th {

  58.   border-color:#D3E7F4;

  59.   border-style:solid;

  60.   border-width:0px 0pt;

  61. }

  62. .invoice-wrapper h1 {

  63.   font-size:22px;

  64.   margin:0;

  65.   color:#333;

  66. }

  67. .invoice-wrapper table.items {

  68.   margin-top:20px;  

  69. }

  70. .invoice-wrapper table.items td, .invoice-wrapper table.items th {

  71.   text-align:right;  

  72. } 

  73. .invoice-wrapper table.items th.description, .invoice-wrapper table.items td.description {

  74.   text-align:left;

  75. }

  76. .invoice-wrapper tr.total td {

  77.   border-top:1px solid #E9EFF3;

  78. }

  79. .invoice-wrapper table.total {

  80.   margin-top:20px;

  81. }

  82. .invoice-wrapper table.total td {

  83.   padding:0;

  84.   margin:0;

  85. }

  86. .invoice-wrapper table.total td.two {

  87.   width:25%;

  88. }

  89. .invoice-wrapper table.total td.three {

  90.   width:20%;

  91.   text-align:right;

  92. }

  93. .invoice-wrapper table.total tr.inctotal td {

  94.   padding-top:10px;

  95.   vertical-align:bottom;

  96. }

  97. .invoice-wrapper table.total tr.inctotal td.three div.inctotal {

  98.   width:80px;

  99.   border-top:1px solid #E9EFF3;

  100.   font-weight:bold; 

  101.   margin-left: auto;

  102.   margin-right: 0;

  103.   padding-top:2px;

  104. }

  105. .invoice-wrapper table.total tr.inctotal td.three div.inctotal div.inner {

  106.   padding-top:2px;

  107. }

  108. .invoice-wrapper .inctotal {

  109.   font-weight:bold;

  110. }

  111. .invoice-wrapper tfoot td {

  112.   color:#7a7a7a;

  113. }

  114. .invoice-wrapper table thead tr.two td table.invoice-details {

  115.   margin:0; 

  116. }

  117. .invoice-wrapper table thead tr.two td table.invoice-details td {

  118.   border:0;

  119.   padding:0;

  120. }

  121. .invoice-wrapper table.invoice-details td, .invoice-wrapper table.invoice-details tr {

  122.   border:0;

  123.   padding:0;

  124.   margin:0;

  125. }

  126. .invoice-wrapper tfoot td.footer {

  127.   padding-top:40px;

  128. }

  129. .invoice-wrapper .additional-information {

  130.   padding-top:40px;

  131. }

  132. .invoice-wrapper .invoice-description, .invoice-wrapper .pay-limit {

  133.   padding-top:20px;

  134. }

  135. .invoice-wrapper .pay-limit {

  136.   font-weight:bold;

  137. }

  138. 

  139. 

  140. /* Client */

  141. .invoice-wrapper .client-wrapper {

  142.   margin-top:20px;

  143. }

  144. 

  145. 

  146. /* Supplier */

  147. .invoice-wrapper .supplier-wrapper .company-name {

  148.   font-size:15px;

  149.   margin-top:5px;

  150.   margin-bottom:10px;

  151.   padding:0px;

  152.   font-weight:bold;

  153. }

  154. 

  155. 

  156. /* PDF */

  157. .pdf .invoice-wrapper {

  158.   margin-left:30px;

  159.   margin-right:30px;

  160.   margin-bottom:50px;

  161. }

  162. .pdf .invoice-wrapper h1, .pdf .invoice-wrapper h2 {

  163.   color:#000;

  164. }

  165. .pdf .invoice-wrapper h1 {

  166.   font-size:18px;

  167. }

  168. .pdf .invoice-wrapper, .pdf .invoice-wrapper td, .pdf .invoice-wrapper th {

  169.   font-size:8px;

  170.   color:#000;

  171. }

  172. .pdf .invoice-wrapper .break {

  173.   margin-bottom:8px;

  174. }

  175. .pdf .invoice-wrapper table.items {

  176.   margin-top:10px;  

  177. }

  178. .pdf .invoice-wrapper .items tr th {

  179.   padding:0 2px 6px 4px;

  180. }

  181. .pdf .invoice-wrapper .items tr td {  

  182.   padding:0 4px 6px 4px;

  183. }

  184. .pdf .invoice-wrapper table.invoice-details td.one {

  185.   width:40%;

  186. }

  187. .pdf .invoice-wrapper table.invoice-details td.three {

  188.   width:25%;

  189. }