data/styles/Invoice.css

   1 .page {
   2   padding:4em 4em;
   3 }
   4 .invoice-from-to {
   5   display:grid;
   6   gap:2ex;
   7   grid-template-columns:1fr 1fr;
   8 }
   9 .org {
  10   //border:1px solid black;
  11   //padding:0.5ex 1ex;
  12   //display:flex;
  13   //flex-direction:column;
  14   //gap:1ex;
  15 }
  16 .invoice-headers .list {
  17   gap:0 1ex;
  18 }
  19 .invoice-from-to >
  20 .org {
  21   border:0;
  22   padding:0 0;
  23 }
  24 .invoice-from-to >
  25 .org > .dict > .dict-entry {
  26   flex-direction:column;
  27   gap:0;
  28 }
  29 .invoice-from-to >
  30 .org > .dict > .dict-entry > .dict-value {
  31   border:1px solid black;
  32   padding:0.25ex 1ex 0.5ex 1ex;
  33 }
  34 .invoice-from-to > .org {
  35   display:grid;
  36   grid-template-columns:subgrid;
  37   grid-column: 1 / -1;
  38 }
  39 .invoice-from-to > .org > .dict {
  40   display:grid;
  41   grid-template-columns:subgrid;
  42   grid-column:1 / -1;
  43 }
  44 .invoice-summary {
  45   font-size:90%;
  46 }
  47 .invoice-details {
  48   font-size:90%;
  49 }
  50 .invoice-issuer {
  51   display:grid;
  52 }
  53 .invoice-recipient {
  54   display:grid;
  55 }
  56 .entity {
  57   //border:1px solid black;
  58   //padding:0.5ex 1ex;
  59   gap:1px;
  60   display:flex;
  61   flex-direction:column;
  62   justify-spacing:begin;
  63 }
  64 .entity-name {
  65 }
  66 .entity-role {
  67   color:#666;
  68 }
  69 .entity-address {
  70   border-top:1px solid black;
  71 }
  72 .entity .key-value:first-child {
  73   border-top:0;
  74 }
  75 .entity .key-value {
  76   border-top:1px solid black;
  77 }
  78
  79 .address {
  80   //display:grid;
  81   display:grid;
  82   grid-template-columns:1fr;
  83   //grid-template-rows:1fr 5fr;
  84   //grid-template-columns:subgrid;
  85   //grid-template-rows:subgrid;
  86   //align-items:end;
  87   //justify-items:end;
  88 }
  89 .address > div {
  90   //grid-column:1 / span 3;
  91   //align-items:center;
  92   //justify-items:center;
  93 }
  94 .address .address-bottom {
  95   display:flex;
  96   flex-direction:row;
  97   //grid-template-columns:1fr 1fr 1fr;
  98   justify-items:spacing-around;
  99   align-items:center;
 100   //grid-template-columns:subgrid;
 101   //grid-template-rows:subgrid;
 102   gap:1ex;
 103   //grid-column-start:1;
 104   //grid-column-end:4;
 105 }
 106
 107
 108
 109 .invoice-items {
 110   display:grid;
 111   grid-template-columns:max-content 5fr 1fr 1fr 1fr;
 112   margin-top:2ex;
 113   background:black;
 114   gap:2px 2px;
 115 }
 116 .invoice-items-head {
 117   display:grid;
 118   font-weight:bold;
 119   grid-template-columns:subgrid;
 120   grid-template-rows:subgrid;
 121   grid-column-start:1;
 122   grid-column-end:-1;
 123   //background-color:white;
 124   //gap:0;
 125 }
 126 .invoice-items-head .invoice-items-item {
 127   //background:#ccc;
 128   //background-color:#eeee00;
 129   background-color:#F6CD93;
 130   //background-color:#57ADC3;
 131   //background-clip:text;
 132   //border-top:1px solid black;
 133   //border-left:1px solid black;
 134   //border-right:1px solid black;
 135   //border-top-left-radius:2ex;
 136   //border-top-right-radius:2ex;
 137
 138   padding-left:2ex;
 139   padding-right:2ex;
 140   padding-top:1ex;
 141   padding-bottom:0.5ex;
 142 }
 143 //.invoice-items-head .invoice-items-item:after {
 144 //  position:absolute;
 145 //  display:block;
 146 //  content:'';
 147 //  right:0;
 148 //  bottom:0;
 149 //  height:50%;
 150 //  box-sizing:border-box;
 151 //  width:100%;
 152 //  border-bottom:1px solid black;
 153 //}
 154
 155 .invoice-items-body {
 156   display:grid;
 157   grid-template-columns:subgrid;
 158   grid-template-rows:subgrid;
 159   grid-column-start:1;
 160   grid-column-end:-1;
 161 }
 162 .invoice-items-body.odd .invoice-items-item {
 163   //background:#DBE7D4;
 164 }
 165 .invoice-items-body.even .invoice-items-item {
 166   background:#E9F1E7;
 167 }
 168 .invoice-items-tail {
 169   display:grid;
 170   grid-template-columns:subgrid;
 171   grid-template-rows:subgrid;
 172   grid-column-start:1;
 173   grid-column-end:-1;
 174   background-color:white;
 175   gap:0;
 176 }
 177 .invoice-items-item {
 178   justify-self:stretch;
 179   align-self:stretch;
 180   background:white;
 181   padding:1ex 1ex;
 182 }
 183 .invoice-items-head .invoice-items-item {
 184   //align-self:end;
 185   text-align:center;
 186   display:grid;
 187 }
 188 .invoice-items-head .invoice-items-item > div {
 189   align-self:center;
 190 }
 191 .invoice-items-body .invoice-items-item {
 192   display:grid;
 193 }
 194 .invoice-items-body .invoice-items-item.invoice-items-item-Name > div {
 195   justify-self:stretch;
 196 }
 197 .invoice-items-body .invoice-items-item > div {
 198   align-self:center;
 199   justify-self:end;
 200 }
 201 .invoice-items-body .invoice-items-item-Name {
 202   text-align:left;
 203 }
 204 .invoice-items-tail .invoice-items-item {
 205   text-align:right;
 206   background-color:#ccc;
 207   border-bottom-left-radius:2ex;
 208   border-bottom-right-radius:2ex;
 209 }
 210 .invoice-items-item-Name {
 211   text-align:justify;
 212 }
 213 .invoice-items-tail .invoice-items-item-Totals {
 214   font-weight:bold;
 215   grid-column:span 3;
 216   background-color:white;
 217 }
 218
 219 .invoice-items-item {
 220 }
 221 .invoice-items-tail .invoice-items-item-Sum {
 222   background-color:black;
 223   color:white;
 224   font-weight:bold;
 225   //border:1ex solid white;
 226   //border-radius:1ex;
 227   //margin:0.5ex 0.4ex 0.7ex;
 228   //padding:0.5ex 0.6ex 0.3ex;
 229 }
 230
 231