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