git.plutz.net Git - invoices/blob - invoices.css

   1 * {
   2   margin: 0; padding: 0;
   3   color: inherit; background-color: inherit;
   4   font-size: medium; font-weight: normal;
   5   text-decoration: none;
   6   box-sizing: border-box;
   7 }
   8 body {
   9   color: black; background-color: white;
  10 }
  11
  12
  13 /* ==================== MENU ==================== */
  14
  15 #menu {
  16   margin: 0; padding: .5em 1em;
  17   border-bottom: 1px solid black;
  18 }
  19 #menu a {
  20   background-color: #EEF;
  21   border: 1px solid black;
  22   margin: .5em 1em .5em 0;
  23   padding: .125em .5em;
  24 }
  25 #menu a:hover {
  26   background-color: #FFF;
  27   border-color: #888;
  28 }
  29
  30
  31 /* ==================== ADDRESS LISTS ==================== */
  32
  33 .invoices .invoice,
  34 .clients .address,
  35 .senders .address {
  36   display: inline-block;
  37   background-color: #EEE;
  38   white-space: pre;
  39   padding: 1em 1em .5em 1em;
  40   margin: 1em 0 0 1em;
  41   width: 20em;
  42 }
  43 .invoices .invoice {
  44   white-space: normal;
  45 }
  46 .invoices .invoice h2{
  47   display: block;
  48   letter-spacing: .25em;
  49   text-align: center;
  50   margin-bottom: -.5em;
  51   font-size: 1.125em;
  52 }
  53 .invoices .invoice label {
  54   font-weight: bold;
  55 }
  56 .invoices .invoice label::before {
  57   white-space: pre;
  58   content: '\0A';
  59 }
  60 .invoices .invoice a,
  61 .clients .address a,
  62 .senders .address a,
  63 a.new {
  64   display: block;
  65   background-color: #DEF;
  66   text-align: center;
  67   margin: .5em 3em 0 3em;
  68   padding: .125em 1em;
  69   border: 1px solid #08F;
  70 }
  71 .invoices .invoice a:hover,
  72 .clients .address a:hover,
  73 .senders .address a:hover,
  74 a.new:hover {
  75   border-color: #8EF;
  76 }
  77 a.new {
  78   display: inline-block;
  79   margin: 1em;
  80 }
  81
  82
  83 /* ==================== ADDRESS FORMS ==================== */
  84
  85 form select,
  86 form textarea,
  87 form input {
  88   padding: .125em .5em;
  89   background-color: #FFF;
  90   text-align: left;
  91   font-size: 12pt;
  92 }
  93 form input[type=number] {
  94   width: 5em;
  95   text-align: right;
  96 }
  97
  98 .invoice form,
  99 .client form,
 100 .sender form {
 101   position: relative;
 102   display: inline-block;
 103   margin: 1em; padding: 1em;
 104   background-color: #EEE;
 105   text-align: right;
 106 }
 107 .client form textarea,
 108 .sender form textarea {
 109   display: block;
 110   min-width: 30em;
 111   min-height: 7em;
 112   margin-bottom: .5em;
 113 }
 114 .sender form textarea {
 115   min-height: 13em;
 116 }
 117 .client form label[for=hourly] {
 118   margin-right: .5em;
 119   line-height: 2em;
 120   text-align: right;
 121   font-weight: bold;
 122 }
 123 .invoice form button[type=submit],
 124 .client form button[type=submit],
 125 .sender form button[type=submit] {
 126   display: block;
 127   margin: .5em 0 0 auto;
 128   padding: .25em .5em;
 129   background-color: #DEF;
 130   border-radius: .25em;
 131   border: 1px solid #08F;
 132 }
 133
 134 /* ==================== INVOICE FORMS ==================== */
 135 .invoice form select {
 136   display: inline-block;
 137   min-width: 20em;
 138   margin-bottom: .5em;
 139 }
 140
 141 .invoice form label {
 142   font-weight: bold;
 143   line-height: 2em;
 144 }
 145
 146 .invoice form input#date {
 147   margin-right: .25em;
 148 }
 149
 150 .invoice form label::before {
 151   white-space: pre;
 152   content: '\0A';
 153 }
 154 .invoice form label:first-of-type::before {
 155   content: '';
 156 }
 157
 158 .invoice form label[for=vatsb],
 159 .invoice form label[for=vatrate] {
 160   display: block;
 161   text-align: left;
 162 }
 163 .invoice form label[for=vatnett],
 164 .invoice form label[for=vatgross] {
 165   display: inline-block;
 166   float: left; margin-right: 1em;
 167   line-height: 1em;
 168 }
 169 .invoice form input[type=radio] { display: none; }
 170 .invoice form input[type=radio] + label::before {
 171   content: '(  ) ';
 172 }
 173 .invoice form input:checked + label[for^=vat]::before {
 174   content: '(x) ';
 175 }
 176
 177 .invoice form table {
 178   width: 30em;
 179   margin-top: 1em;
 180   border-spacing: 0;
 181 }
 182 .invoice form table tr > th {
 183   text-align: left;
 184   padding-left: .5em;
 185   font-weight: bold;
 186 }
 187 .invoice form table tr > th:nth-child(3),
 188 .invoice form table tr > td:nth-child(4),
 189 .invoice form table tr > th:nth-child(4) {
 190   text-align: right;
 191 }
 192 .invoice form table tr > :nth-child(1) { width: 6em; }
 193 .invoice form table tr > :nth-child(2) { width: 12em; }
 194 .invoice form table tr > :nth-child(3) { width: 6em; }
 195 .invoice form table tr > :nth-child(4) { width: 6em; }
 196 .invoice form table tr > * textarea,
 197 .invoice form table tr > * input[type=number],
 198 .invoice form table tr > * input {
 199   display: block;
 200   font-size: 12pt;
 201   width: 100%; height: 100%;
 202   height: 4em;
 203 }