git.plutz.net Git - lobster/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   position: sticky;
 105   top: 0;
 106   display: block;
 107   border: solid 1px;
 108   margin: 1em 2em .5em 2em;
 109   padding: .5em;
 110   text-align: right;
 111   background: #EEF;
 112   z-index: 1;
 113 }
 114 .newcard a[href="#top"] {
 115   position: absolute;
 116   left: .5em;
 117   font-weight: bold;
 118   text-decoration: none;
 119   color: inherit;
 120 }
 121 .newcard a[href="#top"]:before {
 122   content: '\2b06';
 123 }
 124 .newcard button {
 125   box-shadow: 0 0 .5ex #888;
 126 }
 127
 128 .card-anchor {
 129   position: relative;
 130   height: 0;
 131   top: -4em;
 132 }
 133 .card {
 134   display: block;
 135   position: relative;
 136   border: solid 1px;
 137   margin: .25em 2em;
 138   padding: 0 20ex 0 0;
 139   overflow: auto;
 140   background: #FFF;
 141   min-height: 8em;
 142 }
 143 .card .control {
 144   display: inline-block;
 145   position: absolute;
 146   top: 0; right: 0;
 147   text-align: right;
 148   background: #EEF;
 149   margin: 0;
 150   height: 100%;
 151   width: 20ex;
 152   max-width: 33%;
 153   padding: .25em .5em;
 154 }
 155 .card .control .item {
 156   display: inline-block;
 157   width: 100%;
 158   height: 2.5em;
 159   line-height: 2.5em;
 160   margin: .25em 0;
 161   padding: 0 .5em;
 162   font-size: .75em;
 163   color: #008;
 164   background: #FFF;
 165   text-decoration: none;
 166   border: 1px solid #888;
 167   box-shadow: 0 0 .5ex #888;
 168 }
 169 .card .control button.item { text-align: right;}
 170 .card .control .item:hover{ border-color: #008; box-shadow: 0 0 .5ex #008; }
 171
 172 .card .control .item[name=newfield] {
 173   width: calc(100% - 2.5em);
 174 }
 175 .card .control .item[value=addfield] {
 176   width: 2.5em;
 177   border-style: solid solid solid none;
 178   text-align: center;
 179 }
 180
 181 .card .control #delete + label + button,
 182 .card .control #delete { display: none; }
 183 .card .control #delete + label { background-color: #FEE; }
 184 .card .control #delete:checked + label + button {
 185   position: fixed; display: block;
 186   left: 40%; top: 30%; width: 20%;
 187   font-size: 1.5em;
 188   text-align: center;
 189   background-color: #FAA;
 190   color: #333;
 191   border-radius: .25em 0 0 .25em;
 192 }
 193 .card .control #delete:checked + label:after {
 194   position: fixed; display: block;
 195   left: 60%; top: 30%; width: 5%;
 196   margin: .25em 0; padding: .5em .75ex 0 .75ex;
 197   height: 1.5em;
 198   font-size: 2em;
 199   content: 'X';
 200   text-align: center;
 201   color: #AAA; background-color: #000;
 202   border-radius: 0 .25em .25em 0;
 203 }
 204
 205 .card .section {
 206   display: inline-block;
 207   vertical-align: top;
 208   float: left;
 209   width: 16.625%;
 210   min-width: 10em;
 211   min-height: 6em;
 212   margin: .125em 0 .5ex 0;
 213   padding: 0 1ex .25em 1ex;
 214 }
 215 .card .section:nth-of-type(2n){ background: #EEE;}
 216
 217 .card .section h2, .card .section h3 {
 218   font-size: 1em;
 219   display: block;
 220   font-weight: bold;
 221   margin: .25em -.5ex .25em -.5ex;
 222   border-style: none none solid none;
 223   border-width: 1px;
 224 }
 225 .card .section .FN {  /* will override h2 */
 226   font-size: 1.2em;
 227   margin-top: 0;
 228 }
 229
 230 .card .section .item {
 231   display: block;
 232   max-width: 100%;
 233   word-wrap: break-word;
 234   white-space: pre-line;
 235 }
 236 .card .section .item label {
 237   font-weight: bold;
 238 }
 239
 240 .card .section textarea.NOTE {
 241   min-height: 6em;
 242 }
 243 .card .section textarea.ADR {
 244   min-height: 4em;
 245 }
 246
 247 .card .section .PHOTO {
 248   width: 100%;
 249   max-height: 10em;
 250 }
 251 .card .section .GENDER { display: inline-block; padding-right: .5ex; }
 252 .card .section .BDAY { display: inline-block;}
 253 .card .section .TEL .type { color: #444; }
 254
 255 .card .section select {
 256   display: block;
 257   background-color: #FFF;
 258   border: 1px solid black;
 259 }
 260
 261 .card .section.attendance ul { margin: 0; padding: 0; }
 262 .card .section.attendance ul li {
 263   display: block;
 264   word-wrap: break-word;
 265 }
 266
 267 .card .section.prescriptions ul { margin: 0; padding: 0; }
 268 .card .section.prescriptions ul li {
 269   display: block;
 270   word-wrap: break-word;
 271   margin: 0 .25ex;
 272 }
 273
 274 .card .section.prescriptions { width: 40ex;}
 275
 276 .card .section.therapies a.therapy {
 277   display: inline-block;
 278   padding: .25em .5em;
 279   margin-bottom: .25em;
 280   color: #000;
 281   text-decoration: none;
 282   background-color: #DDF;
 283   border: 1px solid black;
 284 }
 285
 286 form.card input.delete { display: none; }
 287 form.card input.delete + label {
 288   display: inline-block;
 289   position: relative;
 290   font-size: .875em;
 291   left: calc(100% - 1.5em);
 292   width: 1.5em;
 293   margin-bottom: -1.5em;
 294   overflow: hidden;
 295   white-space: nowrap;
 296   vertical-align: bottom;
 297 }
 298 form.card input.delete + label:before {
 299   display: inline-block;
 300   content: 'x';
 301   width: calc(1.5em - 2px); height: calc(1.5em - 2px);
 302   vertical-align: bottom;
 303   text-align: center;
 304   color: #444;
 305   background-color: #FBB;
 306   border: 1px solid #BBB;
 307 }
 308 form.card input.delete + label + input[type=text],
 309 form.card input.delete + label + input:not([type]),
 310 form.card input.delete + label + select + input.TEL {
 311   width: calc(100% - 1.5em);
 312 }
 313 form.card input.delete[name^=TEL_] + label { top: 1.5em; }
 314 form.card input.delete[name^=TEL_] + label:before { border-top: none; }
 315 form.card input.delete[name^=NOTE_] + label,
 316 form.card input.delete[name^=ADR_] + label { margin-bottom: 0; }
 317 form.card input.delete[name^=NOTE_] + label:before,
 318 form.card input.delete[name^=ADR_] + label:before { border-bottom: none; }
 319
 320 form.card input.delete:checked + label,
 321 form.card input.delete:checked + label + input,
 322 form.card input.delete:checked + label + select,
 323 form.card input.delete:checked + label + select + input,
 324 form.card input.delete:checked + label + textarea {
 325   display: none
 326 }
 327
 328 form.card .section input[type=text],
 329 form.card .section input:not([type]),
 330 form.card .section textarea,
 331 form.card .section select {
 332   width: 100%;
 333   margin-bottom: .25em;
 334 }
 335
 336 form.card .section select.teltype { margin-bottom: 0; }
 337 form.card .section input.TEL { margin-bottom: .5em; }
 338
 339 form.card .attendance {
 340   min-width: 66%;
 341 }
 342 form.card .attendance label {
 343   position: relative;
 344   display: inline-block;
 345   width: 25ex;
 346   padding-left: 3ex;
 347 }
 348 form.card .attendance label input[type=checkbox] {
 349   position: absolute;
 350   margin-left: -3ex;
 351 }
 352
 353 form.card .insurance input[type=radio] {display: none;}
 354 form.card .insurance input[type=radio] + label {
 355   display: inline-block;
 356   width: 50%;
 357   padding: .25ex 0;
 358   text-align: center;
 359   border: 1px solid black;
 360
 361 }
 362 form.card .insurance input[type=radio]:checked + label {
 363   font-weight: bold;
 364   background-color: #FFF;
 365   border-width: 1px 1px 0 1px;
 366 }
 367 form.card .insurance input[type=radio] + label + input + label + select,
 368 form.card .insurance input[type=radio] + label + select + input {display: none;}
 369 form.card .insurance input[type=radio]:checked + label + input + label + select,
 370 form.card .insurance input[type=radio]:checked + label + select + input {
 371   display: block;
 372   border: 1px solid black;
 373   background-color: #FFF;
 374   border-width: 0 1px 1px 1px;
 375   padding: .25ex 0;
 376   margin-top: -1px;
 377 }