invoice-print.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775
  1. /* Headings */
  2. h1,
  3. h2,
  4. h3,
  5. .h1,
  6. .h2,
  7. .h3 {
  8. letter-spacing: -1px;
  9. }
  10. h1,
  11. .h1 {
  12. font-size: 36px;
  13. font-size: 3.6rem;
  14. }
  15. h2,
  16. .h2 {
  17. font-size: 30px;
  18. font-size: 3rem;
  19. }
  20. h3,
  21. .h3 {
  22. font-size: 24px;
  23. font-size: 2.4rem;
  24. }
  25. h4,
  26. .h4 {
  27. font-size: 18px;
  28. font-size: 1.8rem;
  29. }
  30. h5,
  31. .h5 {
  32. font-size: 14px;
  33. font-size: 1.4rem;
  34. }
  35. h6,
  36. .h6 {
  37. font-size: 12px;
  38. font-size: 1.2rem;
  39. letter-spacing: 0;
  40. }
  41. /* Alternative Font Style */
  42. .alternative-font {
  43. color: #cccccc;
  44. font-family: "Shadows Into Light", cursive;
  45. font-size: 1.6em;
  46. }
  47. /* Drop Caps */
  48. p.drop-caps:first-child:first-letter {
  49. float: left;
  50. font-size: 75px;
  51. line-height: 60px;
  52. padding: 4px;
  53. margin-right: 5px;
  54. margin-top: 5px;
  55. font-family: Georgia;
  56. color: #171717;
  57. }
  58. p.drop-caps.secundary:first-child:first-letter {
  59. background-color: #171717;
  60. color: #FFF;
  61. padding: 6px;
  62. margin-right: 5px;
  63. border-radius: 4px;
  64. }
  65. p.drop-caps.colored:first-child:first-letter {
  66. color: #cccccc;
  67. }
  68. p.drop-caps.colored.secundary:first-child:first-letter {
  69. background-color: #cccccc;
  70. color: #FFF;
  71. }
  72. /* Blockquote */
  73. blockquote {
  74. font-size: 1em;
  75. }
  76. /* Hightlight */
  77. .highlight {
  78. background-color: #cccccc;
  79. color: #FFF;
  80. padding: 3px 6px;
  81. }
  82. /* Divider Line */
  83. hr {
  84. border: 0;
  85. height: 1px;
  86. background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);
  87. background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);
  88. background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);
  89. background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);
  90. margin: 22px 0 22px 0;
  91. }
  92. hr.short {
  93. margin: 11px 0 11px 0;
  94. }
  95. hr.tall {
  96. margin: 44px 0 44px 0;
  97. }
  98. hr.taller {
  99. margin: 66px 0 66px 0;
  100. }
  101. hr.light {
  102. background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  103. background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  104. background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  105. background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  106. }
  107. hr.dotted {
  108. height: 0;
  109. border-bottom: 1px dotted #ddd;
  110. }
  111. hr.solid {
  112. height: 0;
  113. border-bottom: 1px solid #ddd;
  114. }
  115. /* Buttons Icon */
  116. .btn-icon i {
  117. margin-right: 10px;
  118. }
  119. .btn-icon-right i {
  120. margin-right: 0;
  121. margin-left: 10px;
  122. }
  123. /* Form Elements */
  124. input {
  125. outline: none;
  126. }
  127. label {
  128. font-weight: normal;
  129. }
  130. textarea {
  131. resize: vertical;
  132. }
  133. textarea[data-toggle=autosize] {
  134. -webkit-transition: height 0.15s ease-in;
  135. -moz-transition: height 0.15s ease-in;
  136. transition: height 0.15s ease-in;
  137. }
  138. select {
  139. border: 1px solid #E5E7E9;
  140. border-radius: 6px;
  141. height: 46px;
  142. padding: 12px;
  143. outline: none;
  144. }
  145. /* Forms Validations */
  146. label.valid {
  147. display: inline-block;
  148. text-indent: -9999px;
  149. }
  150. label.error {
  151. color: #C10000;
  152. font-size: 0.9em;
  153. margin-top: -5px;
  154. padding: 0;
  155. }
  156. /* Miscellaneous */
  157. body a, body a:focus, body a:hover, body a:active, body a:visited {
  158. outline: none !important;
  159. }
  160. .center {
  161. text-align: center;
  162. }
  163. ul,
  164. ol {
  165. margin-bottom: 0;
  166. padding-left: 27px;
  167. }
  168. blockquote.primary {
  169. border-color: #cccccc;
  170. }
  171. blockquote.success {
  172. border-color: #47a447;
  173. }
  174. blockquote.warning {
  175. border-color: #ed9c28;
  176. }
  177. blockquote.danger {
  178. border-color: #d2322d;
  179. }
  180. blockquote.info {
  181. border-color: #5bc0de;
  182. }
  183. blockquote.dark {
  184. border-color: #171717;
  185. }
  186. .well.primary {
  187. background: #cccccc;
  188. border-color: #b3b3b3;
  189. color: white;
  190. }
  191. .well.success {
  192. background: #47a447;
  193. border-color: #388038;
  194. color: white;
  195. }
  196. .well.warning {
  197. background: #ed9c28;
  198. border-color: #d18211;
  199. color: white;
  200. }
  201. .well.danger {
  202. background: #d2322d;
  203. border-color: #a82824;
  204. color: white;
  205. }
  206. .well.info {
  207. background: #5bc0de;
  208. border-color: #31b0d5;
  209. color: white;
  210. }
  211. .well.dark {
  212. background: #171717;
  213. border-color: black;
  214. color: white;
  215. }
  216. /* Arrows */
  217. .arrow {
  218. background: transparent url(../images/arrows.png) no-repeat 0 0;
  219. width: 47px;
  220. height: 120px;
  221. display: inline-block;
  222. position: relative;
  223. }
  224. .arrow.vtl {
  225. background-position: 0 0;
  226. width: 47px;
  227. height: 96px;
  228. }
  229. .arrow.vtr {
  230. background-position: -101px 0;
  231. width: 47px;
  232. height: 96px;
  233. }
  234. .arrow.vbl {
  235. background-position: 0 -144px;
  236. width: 47px;
  237. height: 96px;
  238. }
  239. .arrow.vbr {
  240. background-position: -101px -144px;
  241. width: 47px;
  242. height: 96px;
  243. }
  244. .arrow.hlt {
  245. background-position: -209px 0;
  246. width: 120px;
  247. height: 47px;
  248. }
  249. .arrow.hlb {
  250. background-position: -209px -101px;
  251. width: 120px;
  252. height: 47px;
  253. }
  254. .arrow.hrt {
  255. background-position: -353px 0;
  256. width: 120px;
  257. height: 47px;
  258. }
  259. .arrow.hrb {
  260. background-position: -353px -101px;
  261. width: 120px;
  262. height: 47px;
  263. }
  264. .img-thumbnail {
  265. border-radius: 8px;
  266. position: relative;
  267. }
  268. .img-thumbnail .zoom {
  269. display: block;
  270. position: absolute;
  271. right: 8px;
  272. bottom: 8px;
  273. height: 30px;
  274. width: 30px;
  275. padding: 6px;
  276. font-size: 14px;
  277. line-height: 18px;
  278. background: #CCC;
  279. border-radius: 100%;
  280. color: #FFF;
  281. text-align: center;
  282. }
  283. .img-thumbnail .zoom i {
  284. position: relative;
  285. top: -1px;
  286. left: -1px;
  287. }
  288. /* Thumbnail Gallery */
  289. .thumbnail-gallery {
  290. list-style: none;
  291. margin: 10px 0;
  292. padding: 0;
  293. }
  294. .thumbnail-gallery .img-thumbnail,
  295. .thumbnail-gallery .thumbnail {
  296. margin: 10px 10px 0 0;
  297. }
  298. /* Navs */
  299. ul.nav-list.primary > li {
  300. margin: 0;
  301. padding: 0;
  302. }
  303. ul.nav-list.primary > li:last-child a {
  304. border-bottom: transparent !important;
  305. }
  306. ul.nav-list.primary > li a {
  307. -webkit-transition: all 0.3s;
  308. -moz-transition: all 0.3s;
  309. transition: all 0.3s;
  310. background-position: 9px 16px;
  311. background-repeat: no-repeat;
  312. border-bottom: 1px solid #EDEDDE;
  313. padding: 8px 20px;
  314. }
  315. /* Tables - Basic */
  316. .table {
  317. width: 100%;
  318. }
  319. .table .table {
  320. background: transparent;
  321. }
  322. /* Bootstrap uses important, we need to force it here */
  323. .table.mb-none {
  324. margin-bottom: 0 !important;
  325. }
  326. /* In case you dont want a border in some row */
  327. .table .b-top-none td {
  328. border-top: none;
  329. }
  330. /* Tables - Actions */
  331. .table .actions,
  332. .table .actions-hover {
  333. vertical-align: middle;
  334. }
  335. .table .actions a,
  336. .table .actions-hover a {
  337. display: inline-block;
  338. margin-right: 5px;
  339. color: #666;
  340. }
  341. .table .actions a:last-child,
  342. .table .actions-hover a:last-child {
  343. margin-right: 0;
  344. }
  345. .table .actions a:hover,
  346. .table .actions-hover a:hover {
  347. color: #333;
  348. }
  349. .table .actions-hover a {
  350. opacity: 0;
  351. }
  352. .table tr:hover .actions-hover a {
  353. opacity: 1;
  354. }
  355. .table .actions-fade a {
  356. -webkit-transition: all 0.2s linear;
  357. -moz-transition: all 0.2s linear;
  358. transition: all 0.2s linear;
  359. }
  360. /* Tables - No More Tables technique (991px is the bootstrap SM max-width) */
  361. @media only screen and (max-width: 991px) {
  362. .table.table-no-more,
  363. .table.table-no-more thead,
  364. .table.table-no-more tbody,
  365. .table.table-no-more tr,
  366. .table.table-no-more th,
  367. .table.table-no-more td {
  368. display: block;
  369. }
  370. .table.table-no-more thead tr {
  371. left: -9999px;
  372. position: absolute;
  373. top: -9999px;
  374. }
  375. .table.table-no-more tr {
  376. border-bottom: 1px solid #DDD;
  377. }
  378. .table.table-no-more td {
  379. border: none;
  380. position: relative;
  381. padding-left: 50%;
  382. text-align: left;
  383. white-space: normal;
  384. }
  385. .table.table-no-more td:before {
  386. content: attr(data-title);
  387. font-weight: bold;
  388. left: 6px;
  389. padding-right: 10px;
  390. position: absolute;
  391. text-align: left;
  392. top: 8px;
  393. white-space: nowrap;
  394. width: 45%;
  395. }
  396. .table.table-no-more.table-bordered td {
  397. border-bottom: 1px solid #EFEFEF;
  398. }
  399. .table.table-no-more.table-condensed td:before {
  400. top: 5px;
  401. }
  402. }
  403. /* Dark - Tables */
  404. html.dark .table > thead > tr > th,
  405. html.dark .table > tbody > tr > th,
  406. html.dark .table > tfoot > tr > th,
  407. html.dark .table > thead > tr > td,
  408. html.dark .table > tbody > tr > td,
  409. html.dark .table > tfoot > tr > td,
  410. html.dark .table-bordered {
  411. border-color: #262b33;
  412. }
  413. html.dark .table-striped > tbody > tr:nth-child(2n+1) > td,
  414. html.dark .table-striped > tbody > tr:nth-child(2n+1) > th {
  415. background-color: #282d36;
  416. }
  417. html.dark .table-hover > tbody > tr:hover > td,
  418. html.dark .table-hover > tbody > tr:hover > th {
  419. background-color: #272c34;
  420. }
  421. html.dark .table .actions a,
  422. html.dark .table .actions-hover a {
  423. color: #808697;
  424. }
  425. @media screen and (max-width: 991px) {
  426. html.dark .table-responsive {
  427. border-color: #262b33;
  428. }
  429. }
  430. @media only screen and (max-width: 991px) {
  431. html.dark .table.table-no-more tr,
  432. html.dark .table.table-no-more.table-bordered td {
  433. border-bottom-color: #262b33;
  434. }
  435. }
  436. /* Tables - States */
  437. .table > thead > tr > td.primary,
  438. .table > tbody > tr > td.primary,
  439. .table > tfoot > tr > td.primary,
  440. .table > thead > tr > th.primary,
  441. .table > tbody > tr > th.primary,
  442. .table > tfoot > tr > th.primary,
  443. .table > thead > tr.primary > td,
  444. .table > tbody > tr.primary > td,
  445. .table > tfoot > tr.primary > td,
  446. .table > thead > tr.primary > th,
  447. .table > tbody > tr.primary > th,
  448. .table > tfoot > tr.primary > th {
  449. color: #FFF;
  450. background-color: #cccccc;
  451. }
  452. .table > thead > tr > td.success,
  453. .table > tbody > tr > td.success,
  454. .table > tfoot > tr > td.success,
  455. .table > thead > tr > th.success,
  456. .table > tbody > tr > th.success,
  457. .table > tfoot > tr > th.success,
  458. .table > thead > tr.success > td,
  459. .table > tbody > tr.success > td,
  460. .table > tfoot > tr.success > td,
  461. .table > thead > tr.success > th,
  462. .table > tbody > tr.success > th,
  463. .table > tfoot > tr.success > th {
  464. color: #FFF;
  465. background-color: #47a447;
  466. }
  467. .table > thead > tr > td.warning,
  468. .table > tbody > tr > td.warning,
  469. .table > tfoot > tr > td.warning,
  470. .table > thead > tr > th.warning,
  471. .table > tbody > tr > th.warning,
  472. .table > tfoot > tr > th.warning,
  473. .table > thead > tr.warning > td,
  474. .table > tbody > tr.warning > td,
  475. .table > tfoot > tr.warning > td,
  476. .table > thead > tr.warning > th,
  477. .table > tbody > tr.warning > th,
  478. .table > tfoot > tr.warning > th {
  479. color: #FFF;
  480. background-color: #ed9c28;
  481. }
  482. .table > thead > tr > td.danger,
  483. .table > tbody > tr > td.danger,
  484. .table > tfoot > tr > td.danger,
  485. .table > thead > tr > th.danger,
  486. .table > tbody > tr > th.danger,
  487. .table > tfoot > tr > th.danger,
  488. .table > thead > tr.danger > td,
  489. .table > tbody > tr.danger > td,
  490. .table > tfoot > tr.danger > td,
  491. .table > thead > tr.danger > th,
  492. .table > tbody > tr.danger > th,
  493. .table > tfoot > tr.danger > th {
  494. color: #FFF;
  495. background-color: #d2322d;
  496. }
  497. .table > thead > tr > td.info,
  498. .table > tbody > tr > td.info,
  499. .table > tfoot > tr > td.info,
  500. .table > thead > tr > th.info,
  501. .table > tbody > tr > th.info,
  502. .table > tfoot > tr > th.info,
  503. .table > thead > tr.info > td,
  504. .table > tbody > tr.info > td,
  505. .table > tfoot > tr.info > td,
  506. .table > thead > tr.info > th,
  507. .table > tbody > tr.info > th,
  508. .table > tfoot > tr.info > th {
  509. color: #FFF;
  510. background-color: #5bc0de;
  511. }
  512. .table > thead > tr > td.dark,
  513. .table > tbody > tr > td.dark,
  514. .table > tfoot > tr > td.dark,
  515. .table > thead > tr > th.dark,
  516. .table > tbody > tr > th.dark,
  517. .table > tfoot > tr > th.dark,
  518. .table > thead > tr.dark > td,
  519. .table > tbody > tr.dark > td,
  520. .table > tfoot > tr.dark > td,
  521. .table > thead > tr.dark > th,
  522. .table > tbody > tr.dark > th,
  523. .table > tfoot > tr.dark > th {
  524. color: #FFF;
  525. background-color: #171717;
  526. }
  527. .table > thead > tr > td.dark,
  528. .table > tbody > tr > td.dark,
  529. .table > tfoot > tr > td.dark,
  530. .table > thead > tr > th.dark,
  531. .table > tbody > tr > th.dark,
  532. .table > tfoot > tr > th.dark,
  533. .table > thead > tr.dark > td,
  534. .table > tbody > tr.dark > td,
  535. .table > tfoot > tr.dark > td,
  536. .table > thead > tr.dark > th,
  537. .table > tbody > tr.dark > th,
  538. .table > tfoot > tr.dark > th {
  539. background-color: #4a4a4a;
  540. color: white;
  541. }
  542. /* Invoice */
  543. .invoice {
  544. padding: 0 15px 15px;
  545. }
  546. /* Invoice Address Tag */
  547. .invoice address {
  548. color: #7F8597;
  549. line-height: 1.5em;
  550. }
  551. /* Invoice header */
  552. .invoice header {
  553. border-bottom: 1px solid #DADADA;
  554. margin-bottom: 15px;
  555. }
  556. .invoice header .h2,
  557. .invoice header .h4 {
  558. letter-spacing: 0;
  559. }
  560. /* Invoice Billing Information */
  561. .invoice .bill-to,
  562. .invoice .bill-data {
  563. padding: 15px 0;
  564. }
  565. .invoice .bill-data .value {
  566. display: inline-block;
  567. margin-left: 10px;
  568. width: 90px;
  569. }
  570. /* Invoice table */
  571. .invoice table.table {
  572. table-layout: fixed;
  573. }
  574. .invoice table.table > thead:first-child > tr > th {
  575. background-color: #F8F8F8;
  576. border-bottom: 1px solid #DADADA;
  577. border-top: 1px solid #DADADA;
  578. }
  579. .invoice table.table > tbody tr > td {
  580. border-color: #DADADA;
  581. }
  582. /* Invoice table items */
  583. .invoice .invoice-items > tbody tr:last-child > td {
  584. border-bottom: 1px solid #DADADA;
  585. }
  586. .invoice .invoice-items #cell-id {
  587. width: 10%;
  588. }
  589. .invoice .invoice-items #cell-item {
  590. width: 20%;
  591. }
  592. .invoice .invoice-items #cell-desc {
  593. width: 20%;
  594. }
  595. .invoice .invoice-items #cell-price {
  596. width: 10%;
  597. }
  598. .invoice .invoice-items #cell-qty {
  599. width: 10%;
  600. }
  601. .invoice .invoice-items #cell-total {
  602. width: 10%;
  603. }
  604. /* Invoice summary */
  605. .invoice-summary .col-sm-4 {
  606. padding-left: 0;
  607. }
  608. /* Invoice Responsiveness */
  609. @media only screen and (max-width: 991px) {
  610. .invoice .table-responsive > table.table {
  611. table-layout: auto;
  612. }
  613. .invoice-summary .col-sm-4 {
  614. padding-left: 15px;
  615. }
  616. }
  617. /* Invoice Print */
  618. @media print {
  619. .invoice .table-responsive {
  620. border: none !important;
  621. overflow: visible !important;
  622. width: auto !important;
  623. }
  624. .invoice table.table.invoice-items {
  625. table-layout: auto;
  626. }
  627. .invoice header .col-sm-6:first-child,
  628. .invoice header .col-sm-6:last-child,
  629. .invoice .bill-info .col-md-6 {
  630. float: left !important;
  631. }
  632. .invoice header .col-sm-6:first-child {
  633. width: 25% !important;
  634. }
  635. .invoice header .col-sm-6:last-child {
  636. width: 75% !important;
  637. }
  638. .invoice .bill-info .col-md-6 {
  639. width: 50% !important;
  640. }
  641. .invoice .invoice-summary .col-sm-4 {
  642. float: right;
  643. padding: 0;
  644. width: 40%;
  645. }
  646. }
  647. /* dark */
  648. html.dark .invoice header {
  649. border-bottom-color: #282d36;
  650. }
  651. html.dark .invoice table.table > thead:first-child > tr > th {
  652. background-color: #282d36;
  653. border-bottom-color: #282d36;
  654. border-top-color: #282d36;
  655. }
  656. html.dark .invoice table.table > tbody tr > td {
  657. border-color: #282d36;
  658. }