git.plutz.net Git - confetti/blob - cards/cards.css

   1 /*
   2 # Copyright 2014 - 2017 Paul Hänsch
   3 #
   4 # This file is part of Confetti.
   5 #
   6 # Confetti is free software: you can redistribute it and/or modify
   7 # it under the terms of the GNU Affero General Public License as published by
   8 # the Free Software Foundation, either version 3 of the License, or
   9 # (at your option) any later version.
  10 #
  11 # Confetti is distributed in the hope that it will be useful,
  12 # but WITHOUT ANY WARRANTY; without even the implied warranty of
  13 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  14 # GNU Affero General Public License for more details.
  15 #
  16 # You should have received a copy of the GNU Affero General Public License
  17 # along with Confetti.  If not, see <http://www.gnu.org/licenses/>.
  18 */
  19
  20 .filter, .newcard, .card { box-shadow: 0 0 1ex; }
  21
  22 .filter {
  23   display: block;
  24   border: solid 1px;
  25   border-radius: 4px 4px 0 0;
  26   margin: .5em 2em .25em 2em;
  27   padding: 0 2ex .5em 2ex;
  28   background: #EFF;
  29 }
  30
  31 .filter h1 {
  32   display: block;
  33   font-weight: bold;
  34   font-size: 1.25em;
  35   border-style: none none solid none;
  36   border-radius: 4px 4px 0 0;
  37   border-width: 1px;
  38   margin: 0 -1.625ex .5em -1.625ex;
  39   padding: .125em 1ex;
  40   background: #EEF;
  41 }
  42 .filter input[type="text"] {
  43   width: 100%;
  44   height: 2em;
  45   margin-bottom: 1em;
  46 }
  47 .filter fieldset {
  48   position: relative;
  49   display: block;
  50   border: none;
  51   padding: 0 0 0 12ex;
  52   margin: 0 0 .5em 0;
  53 }
  54 .filter fieldset legend {
  55   position: absolute;
  56   font-size: 1em;
  57   font-weight: bold;
  58   margin-left: -12ex;
  59 }
  60 .filter label {
  61   display: inline-block;
  62   vertical-align: top;
  63   margin: .125em 2ex 0 0;
  64   white-space: nowrap;
  65 }
  66 .filter button {
  67   margin-top: .5em;
  68 }
  69
  70 .filter fieldset.item { padding-left: 0; }
  71 .filter fieldset.item legend { display: none; }
  72 .filter fieldset.item input[type=text],
  73 .filter fieldset.item fieldset.categories {
  74   background-color: #FFF;
  75   border: 1px solid #000;
  76   margin-top: -1px;
  77   padding: .25em .5em;
  78 }
  79 .filter fieldset.item input[type=radio] { display: none; }
  80 .filter fieldset.item input[type=radio] + label {
  81   position: relative; z-index: 1;
  82   margin: 0; padding: .25em 1em;
  83
  84 }
  85 .filter fieldset.item input[type=radio]:checked + label {
  86   background-color: #FFF;
  87   border: 1px solid #000;
  88   border-bottom-color: #FFF;
  89 }
  90 .filter fieldset.item input[type=radio][value="CATEGORIES"]:checked + label + input[type=text],
  91 .filter fieldset.item input[type=radio][value="CATEGORIES"] + label + input[type=text] + fieldset.categories {
  92   display: none;
  93 }
  94 .filter fieldset.item input[type=radio][value="CATEGORIES"]:checked + label + input[type=text] + fieldset.categories {
  95   display: block;
  96 }
  97 .filter fieldset.item fieldset.categories a {
  98   font-size: .875em;
  99   line-height: 1.625em;
 100   color: #44C;
 101 }
 102
 103 .newcard {
 104   display: block;
 105   border: solid 1px;
 106   border-radius: 0 0 4px 4px;
 107   margin: .25em 2em 1em 2em;
 108   padding: .25em 2ex .25em 2ex;
 109   background: #EFF;
 110 }
 111
 112 .card {
 113   display: block;
 114   position: relative;
 115   border: solid 1px;
 116   margin: .25em 2em;
 117   padding: 0 20ex 0 0;
 118   overflow: auto;
 119   background: #FFF;
 120   min-height: 8em;
 121 }
 122 .card .control {
 123   display: inline-block;
 124   position: absolute;
 125   top: 0; right: 0;
 126   text-align: right;
 127   background: #EEF;
 128   margin: 0;
 129   height: 100%;
 130   width: 20ex;
 131   max-width: 33%;
 132   padding: .25em 1ex;
 133 }
 134 .card .control .item {
 135   display: inline-block;
 136   width: 100%;
 137   height: 2.5em;
 138   line-height: 2.5em;
 139   margin: .25em 0;
 140   padding: 0 .5em;
 141   font-size: .75em;
 142   color: #008;
 143   background: #FFF;
 144   text-decoration: none;
 145   border: 1px solid #888;
 146   box-shadow: 0 0 .5ex #888;
 147 }
 148 .card .control button.item { text-align: right;}
 149 .card .control .item:hover{ border-color: #008; box-shadow: 0 0 .5ex #008; }
 150
 151 .card .control .item[name=newfield] {
 152   width: calc(100% - 2.5em);
 153 }
 154 .card .control .item[value=addfield] {
 155   width: 2.5em;
 156   border-style: solid solid solid none;
 157   text-align: center;
 158 }
 159
 160 .card .control #delete + label + button,
 161 .card .control #delete { display: none; }
 162 .card .control #delete + label { background-color: #FEE; }
 163 .card .control #delete:checked + label + button {
 164   position: fixed; display: block;
 165   left: 40%; top: 30%; width: 20%;
 166   font-size: 1.5em;
 167   text-align: center;
 168   background-color: #FAA;
 169   color: #333;
 170   border-radius: .25em 0 0 .25em;
 171 }
 172 .card .control #delete:checked + label:after {
 173   position: fixed; display: block;
 174   left: 60%; top: 30%; width: 5%;
 175   margin: .25em 0; padding: .5em .75ex 0 .75ex;
 176   height: 1.5em;
 177   font-size: 2em;
 178   content: 'X';
 179   text-align: center;
 180   color: #AAA; background-color: #000;
 181   border-radius: 0 .25em .25em 0;
 182 }
 183
 184 .card .section {
 185   display: inline-block;
 186   vertical-align: top;
 187   float: left;
 188   width: 20ex;
 189   min-width: 16.5%;
 190   min-height: 6em;
 191   margin: .125em 0 .5ex 0;
 192   padding: 0 1ex .25em 1ex;
 193 }
 194 .card .section:nth-of-type(2n){ background: #EEE;}
 195
 196 .card .section h2, .card .section h3 {
 197   font-size: 1em;
 198   display: block;
 199   font-weight: bold;
 200   margin: .25em -.5ex .25em -.5ex;
 201   border-style: none none solid none;
 202   border-width: 1px;
 203 }
 204 .card .section .FN {  /* will override h2 */
 205   font-size: 1.2em;
 206   margin-top: 0;
 207 }
 208
 209 .card .section .item {
 210   display: block;
 211   max-width: 100%;
 212   word-wrap: break-word;
 213   white-space: pre-line;
 214 }
 215 .card .section .item label {
 216   font-weight: bold;
 217 }
 218
 219 .card .section textarea.NOTE {
 220   min-height: 6em;
 221 }
 222 .card .section textarea.ADR {
 223   min-height: 4em;
 224 }
 225
 226 .card .section .PHOTO {
 227   width: 100%;
 228   max-height: 10em;
 229 }
 230 .card .section .GENDER { display: inline-block; padding-right: .5ex; }
 231 .card .section .BDAY { display: inline-block;}
 232 .card .section .TEL .type { color: #444; }
 233
 234 .card .section select {
 235   display: block;
 236   background-color: #FFF;
 237   border: 1px solid black;
 238 }
 239
 240 .card .section.attendance ul { margin: 0; padding: 0; }
 241 .card .section.attendance ul li {
 242   display: block;
 243   word-wrap: break-word;
 244 }
 245
 246 .card .section.prescriptions ul { margin: 0; padding: 0; }
 247 .card .section.prescriptions ul li {
 248   display: block;
 249   word-wrap: break-word;
 250   margin: 0 .25ex;
 251 }
 252
 253 .card .section.prescriptions { width: 40ex;}
 254
 255 form.card input.delete { display: none; }
 256 form.card input.delete + label {
 257   display: inline-block;
 258   position: relative;
 259   font-size: .875em;
 260   left: calc(100% - 1.5em);
 261   width: 1.5em;
 262   margin-bottom: -1.5em;
 263   overflow: hidden;
 264   white-space: nowrap;
 265   vertical-align: bottom;
 266 }
 267 form.card input.delete + label:before {
 268   display: inline-block;
 269   content: 'x';
 270   width: calc(1.5em - 2px); height: calc(1.5em - 2px);
 271   vertical-align: bottom;
 272   text-align: center;
 273   color: #444;
 274   background-color: #FBB;
 275   border: 1px solid #BBB;
 276 }
 277 form.card input.delete + label + input[type=text],
 278 form.card input.delete + label + input:not([type]),
 279 form.card input.delete + label + select + input.TEL {
 280   width: calc(100% - 1.5em);
 281 }
 282 form.card input.delete[name^=TEL_] + label { top: 1.5em; }
 283 form.card input.delete[name^=TEL_] + label:before { border-top: none; }
 284 form.card input.delete[name^=NOTE_] + label,
 285 form.card input.delete[name^=ADR_] + label { margin-bottom: 0; }
 286 form.card input.delete[name^=NOTE_] + label:before,
 287 form.card input.delete[name^=ADR_] + label:before { border-bottom: none; }
 288
 289 form.card input.delete:checked + label,
 290 form.card input.delete:checked + label + input,
 291 form.card input.delete:checked + label + select,
 292 form.card input.delete:checked + label + select + input,
 293 form.card input.delete:checked + label + textarea {
 294   display: none
 295 }
 296
 297 form.card .section input[type=text],
 298 form.card .section input:not([type]),
 299 form.card .section textarea,
 300 form.card .section select {
 301   width: 100%;
 302   margin-bottom: .25em;
 303 }
 304
 305 form.card .section select.teltype { margin-bottom: 0; }
 306 form.card .section input.TEL { margin-bottom: .5em; }
 307
 308 form.card .attendance {
 309   min-width: 66%;
 310 }
 311 form.card .attendance label {
 312   position: relative;
 313   display: inline-block;
 314   width: 25ex;
 315   padding-left: 3ex;
 316 }
 317 form.card .attendance label input[type=checkbox] {
 318   position: absolute;
 319   margin-left: -3ex;
 320 }
 321
 322 form.card .insurance input[type=radio] {display: none;}
 323 form.card .insurance input[type=radio] + label {
 324   display: inline-block;
 325   width: 50%;
 326   padding: .25ex 0;
 327   text-align: center;
 328   border: 1px solid black;
 329
 330 }
 331 form.card .insurance input[type=radio]:checked + label {
 332   font-weight: bold;
 333   background-color: #FFF;
 334   border-width: 1px 1px 0 1px;
 335 }
 336 form.card .insurance input[type=radio] + label + input + label + select,
 337 form.card .insurance input[type=radio] + label + select + input {display: none;}
 338 form.card .insurance input[type=radio]:checked + label + input + label + select,
 339 form.card .insurance input[type=radio]:checked + label + select + input {
 340   display: block;
 341   border: 1px solid black;
 342   background-color: #FFF;
 343   border-width: 0 1px 1px 1px;
 344   padding: .25ex 0;
 345   margin-top: -1px;
 346 }