You are here

Home » API reference » Invoice 7

default.css in Invoice 7

Same filename and directory in other branches
  1. 6 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;
  padding: 0;
}
.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 .invoice-details {
  padding-top: 20px;
  border-bottom: 1px solid #EFEFEF;
  padding-bottom: 2px;
}
.invoice-wrapper table thead td {
  vertical-align: top;
}
.invoice-wrapper table thead td.one {
  width: 30%;
  padding-left: 0;
}
.invoice-wrapper table thead td.two {
}
.invoice-wrapper table thead td.three {
  width: 30%;
  padding-right: 0;
}
.invoice-links {
  text-align: left;
  margin-top: 10px;
}
.invoice-wrapper .invoice-items tr td,
.invoice-wrapper .invoice-items tr th {
  padding: 4px;
}
.invoice-wrapper tr.odd td,
.invoice-wrapper tr.info td {  
  background-color: #EFEFEF;
  border: 0;
}
.invoice-wrapper tr.even,
.invoice-wrapper tr.odd,
.invoice-wrapper tbody th {
  border-color: #D3E7F4;
  border-style: solid;
  border-width: 0px 0pt;
  background-color: #FFF;
}
.invoice-wrapper h1 {
  font-size: 22px;
  margin: 0;
}
.invoice-wrapper .invoice-items {
  margin-top: 20px;  
}
.invoice-wrapper .invoice-items td,
.invoice-wrapper .invoice-items th {
  text-align: right;  
} 
.invoice-wrapper .invoice-items th.description,
.invoice-wrapper .invoice-items td.description {
  text-align: left;
}
.invoice-wrapper tr {
  background-color: #FFF;
}
.invoice-wrapper tr.total td {
  border-top: 1px solid #EFEFEF;
}
.invoice-wrapper .invoice-totals {
  margin-top: 20px;
}
.invoice-wrapper .invoice-totals td {
  padding: 0;
  margin: 0;
}
.invoice-wrapper .invoice-totals td.two {
  width: 25%;
}
.invoice-wrapper .invoice-totals td.three {
  width: 20%;
  text-align: right;
}
.invoice-wrapper .invoice-totals tr.inctotal td {
  padding-top: 10px;
  vertical-align: bottom;
}
.invoice-wrapper .invoice-totals tr.inctotal td.three div.inctotal {
  width: 80px;
  border-top: 1px solid #EFEFEF;
  font-weight: bold; 
  margin-left: auto;
  margin-right: 0;
  padding-top: 2px;
}
.invoice-wrapper .invoice-totals tr.inctotal td.three div.inctotal div.inner {
  padding-top: 2px;
}
.invoice-wrapper .inctotal {
  font-weight: bold;
}
.invoice-wrapper tfoot td {
  color: #777;
}
.invoice-wrapper .invoice-details td {
  border: 0;
  padding: 0;
}
.invoice-wrapper .invoice-details td,
.invoice-wrapper .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;
}

/* Logo */
#invoice-supplier-logo {
  width: 248px;
  height: 64px;
}

/* 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 {
  margin-bottom: 20px;
}
.pdf .invoice-wrapper,
.pdf .invoice-wrapper td,
.pdf .invoice-wrapper th {
  color: #000;
}
.pdf .invoice-wrapper .invoice-details td.one {
  width: 40%;
}
.pdf .invoice-wrapper .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,

  11. .invoice-wrapper td,

  12. .invoice-wrapper th {

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

  14.   font-size: 12px;

  15.   color: #333;

  16.   padding: 0;

  17. }

  18. .invoice-wrapper table {

  19.   border-collapse: collapse;

  20.   width: 100%;

  21.   margin: 10px 0 0;

  22. }

  23. .invoice-wrapper th {

  24.   text-align: left;

  25.   border: 0;

  26.   border-width: 0;

  27. }

  28. .invoice-wrapper tr.even,

  29. .invoice-wrapper tr.odd,

  30. .invoice-wrapper tbody th {

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

  32. }

  33. .invoice-wrapper table tbody,

  34. .invoice-wrapper table tbody th {

  35.   border-top: 0;

  36. }

  37. .invoice-wrapper .invoice-details {

  38.   padding-top: 20px;

  39.   border-bottom: 1px solid #EFEFEF;

  40.   padding-bottom: 2px;

  41. }

  42. .invoice-wrapper table thead td {

  43.   vertical-align: top;

  44. }

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

  46.   width: 30%;

  47.   padding-left: 0;

  48. }

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

  50. }

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

  52.   width: 30%;

  53.   padding-right: 0;

  54. }

  55. .invoice-links {

  56.   text-align: left;

  57.   margin-top: 10px;

  58. }

  59. .invoice-wrapper .invoice-items tr td,

  60. .invoice-wrapper .invoice-items tr th {

  61.   padding: 4px;

  62. }

  63. .invoice-wrapper tr.odd td,

  64. .invoice-wrapper tr.info td {  

  65.   background-color: #EFEFEF;

  66.   border: 0;

  67. }

  68. .invoice-wrapper tr.even,

  69. .invoice-wrapper tr.odd,

  70. .invoice-wrapper tbody th {

  71.   border-color: #D3E7F4;

  72.   border-style: solid;

  73.   border-width: 0px 0pt;

  74.   background-color: #FFF;

  75. }

  76. .invoice-wrapper h1 {

  77.   font-size: 22px;

  78.   margin: 0;

  79. }

  80. .invoice-wrapper .invoice-items {

  81.   margin-top: 20px;  

  82. }

  83. .invoice-wrapper .invoice-items td,

  84. .invoice-wrapper .invoice-items th {

  85.   text-align: right;  

  86. } 

  87. .invoice-wrapper .invoice-items th.description,

  88. .invoice-wrapper .invoice-items td.description {

  89.   text-align: left;

  90. }

  91. .invoice-wrapper tr {

  92.   background-color: #FFF;

  93. }

  94. .invoice-wrapper tr.total td {

  95.   border-top: 1px solid #EFEFEF;

  96. }

  97. .invoice-wrapper .invoice-totals {

  98.   margin-top: 20px;

  99. }

  100. .invoice-wrapper .invoice-totals td {

  101.   padding: 0;

  102.   margin: 0;

  103. }

  104. .invoice-wrapper .invoice-totals td.two {

  105.   width: 25%;

  106. }

  107. .invoice-wrapper .invoice-totals td.three {

  108.   width: 20%;

  109.   text-align: right;

  110. }

  111. .invoice-wrapper .invoice-totals tr.inctotal td {

  112.   padding-top: 10px;

  113.   vertical-align: bottom;

  114. }

  115. .invoice-wrapper .invoice-totals tr.inctotal td.three div.inctotal {

  116.   width: 80px;

  117.   border-top: 1px solid #EFEFEF;

  118.   font-weight: bold; 

  119.   margin-left: auto;

  120.   margin-right: 0;

  121.   padding-top: 2px;

  122. }

  123. .invoice-wrapper .invoice-totals tr.inctotal td.three div.inctotal div.inner {

  124.   padding-top: 2px;

  125. }

  126. .invoice-wrapper .inctotal {

  127.   font-weight: bold;

  128. }

  129. .invoice-wrapper tfoot td {

  130.   color: #777;

  131. }

  132. .invoice-wrapper .invoice-details td {

  133.   border: 0;

  134.   padding: 0;

  135. }

  136. .invoice-wrapper .invoice-details td,

  137. .invoice-wrapper .invoice-details tr {

  138.   border: 0;

  139.   padding: 0;

  140.   margin: 0;

  141. }

  142. .invoice-wrapper tfoot td.footer {

  143.   padding-top: 40px;

  144. }

  145. .invoice-wrapper .additional-information {

  146.   padding-top: 40px;

  147. }

  148. .invoice-wrapper .invoice-description,

  149. .invoice-wrapper .pay-limit {

  150.   padding-top: 20px;

  151. }

  152. .invoice-wrapper .pay-limit {

  153.   font-weight: bold;

  154. }

  155. 

  156. /* Logo */

  157. #invoice-supplier-logo {

  158.   width: 248px;

  159.   height: 64px;

  160. }

  161. 

  162. /* Client */

  163. .invoice-wrapper .client-wrapper {

  164.   margin-top: 20px;

  165. }

  166. 

  167. 

  168. /* Supplier */

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

  170.   font-size: 15px;

  171.   margin-top: 5px;

  172.   margin-bottom: 10px;

  173.   padding: 0px;

  174.   font-weight: bold;

  175. }

  176. 

  177. 

  178. /* PDF */

  179. .pdf {

  180.   margin-bottom: 20px;

  181. }

  182. .pdf .invoice-wrapper,

  183. .pdf .invoice-wrapper td,

  184. .pdf .invoice-wrapper th {

  185.   color: #000;

  186. }

  187. .pdf .invoice-wrapper .invoice-details td.one {

  188.   width: 40%;

  189. }

  190. .pdf .invoice-wrapper .invoice-details td.three {

  191.   width: 25%;

  192. }