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