git.plutz.net Git - confetti/blob - static/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 {
  21   display: block;
  22   border: solid 1px;
  23   border-radius: 4px 4px 0 0;
  24   margin: .5em 2em .25em 2em;
  25   padding: 0 2ex .5em 2ex;
  26   background: #EFF;
  27 }
  28
  29 .filter h1 {
  30   display: block;
  31   font-weight: bold;
  32   font-size: 1.25em;
  33   border-style: none none solid none;
  34   border-radius: 4px 4px 0 0;
  35   border-width: 1px;
  36   margin: 0 -1.625ex .5em -1.625ex;
  37   padding: .125em 1ex;
  38   background: #EEF;
  39 }
  40 .filter input[type="text"] {
  41   width: 100%;
  42   margin-bottom: .5em;
  43 }
  44 .filter fieldset {
  45   position: relative;
  46   display: block;
  47   border: none;
  48   padding: 0 0 0 12ex;
  49   margin: 0 0 .5em 0;
  50 }
  51 .filter fieldset legend {
  52   position: absolute;
  53   font-size: 1em;
  54   font-weight: bold;
  55   margin-left: -12ex;
  56 }
  57 .filter label {
  58   display: inline-block;
  59   vertical-align: top;
  60   margin: .125em 2ex 0 0;
  61   white-space: nowrap;
  62 }
  63 .filter button {
  64   margin-top: .5em;
  65 }
  66
  67 .filter fieldset.item { padding-left: 0; }
  68 .filter fieldset.item legend { display: none; }
  69 .filter fieldset.item input[type=text],
  70 .filter fieldset.item fieldset.categories {
  71   background-color: #FFF;
  72   border: 1px solid #000;
  73   margin-top: -1px;
  74   padding: .25em .5em;
  75 }
  76 .filter fieldset.item input[type=radio] { display: none; }
  77 .filter fieldset.item input[type=radio] + label {
  78   position: relative; z-index: 1;
  79   margin: 0; padding: .25em 1em;
  80
  81 }
  82 .filter fieldset.item input[type=radio]:checked + label {
  83   background-color: #FFF;
  84   border: 1px solid #000;
  85   border-bottom-color: #FFF;
  86 }
  87 .filter fieldset.item input[type=radio][value="CATEGORIES:"]:checked + label + input[type=text],
  88 .filter fieldset.item input[type=radio][value="CATEGORIES:"] + label + input[type=text] + fieldset.categories {
  89   display: none;
  90 }
  91 .filter fieldset.item input[type=radio][value="CATEGORIES:"]:checked + label + input[type=text] + fieldset.categories {
  92   display: block;
  93 }
  94 .filter fieldset.item fieldset.categories a {
  95   font-size: .875em;
  96   line-height: 1.625em;
  97   color: #44C;
  98 }
  99
 100 .newcard {
 101   display: block;
 102   border: solid 1px;
 103   border-radius: 0 0 4px 4px;
 104   margin: .25em 2em 1em 2em;
 105   padding: .25em 2ex .25em 2ex;
 106   background: #EFF;
 107 }
 108
 109 .dash {
 110   display: block;
 111   border: solid 1px;
 112   border-radius: 4px 4px 0 0;
 113   margin: .25em 2em .25em 2em;
 114   padding: .25em 2ex .25em 2ex;
 115   background: #EFF;
 116   text-align: right;
 117 }
 118
 119 .card {
 120   display: block;
 121   position: relative;
 122   border: solid 1px;
 123   margin: .25em 2em;
 124   padding: 0 20ex 0 0;
 125   overflow: auto;
 126   background: #FFF;
 127   min-height: 8em;
 128 }
 129 .card .control {
 130   display: inline-block;
 131   position: absolute;
 132   top: 0; right: 0;
 133   text-align: right;
 134   background: #EEF;
 135   margin: 0;
 136   height: 100%;
 137   width: 20ex;
 138   max-width: 33%;
 139   padding: .25em 1ex;
 140 }
 141 .card .control .item {
 142   display: inline-block;
 143   width: 100%;
 144   min-height: 2.5em;
 145   color: #008;
 146   margin: .25em 0 .5em 0;
 147   border: 1px solid black;
 148   background: #FFF;
 149   padding: .25em .75ex 0 .75ex;
 150   text-decoration: none;
 151   font-size: .75em;
 152 }
 153 .card .control .item:hover{ border-color: #888; }
 154 .card .control input.item { font-size: normal; }
 155 .card .control button.item { text-align: right;}
 156 .card .control button.item:hover{ border-color: #888;}
 157 .card .control .item[name=newfield] { width: 85%;}
 158 .card .control .item[value=addfield] { width: 15%;}
 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
 233 .card .section select {
 234   display: block;
 235   background-color: #FFF;
 236   border: 1px solid black;
 237 }
 238
 239 .card .section.attendance ul { margin: 0; padding: 0; }
 240 .card .section.attendance ul li {
 241   display: block;
 242   word-wrap: break-word;
 243 }
 244
 245 .card .section.prescriptions ul { margin: 0; padding: 0; }
 246 .card .section.prescriptions ul li {
 247   display: block;
 248   word-wrap: break-word;
 249   margin: 0 .25ex;
 250 }
 251
 252 .card .section.prescriptions { width: 40ex;}
 253
 254 form.card .section input[type=text],
 255 form.card .section input:not([type]),
 256 form.card .section textarea,
 257 form.card .section select {width: 100%;}
 258
 259 form.card .attendance {
 260   min-width: 66%;
 261 }
 262 form.card .attendance label {
 263   position: relative;
 264   display: inline-block;
 265   width: 25ex;
 266   padding-left: 3ex;
 267 }
 268 form.card .attendance label input[type=checkbox] {
 269   position: absolute;
 270   margin-left: -3ex;
 271 }
 272
 273 form.card .insurance input[type=radio] {display: none;}
 274 form.card .insurance input[type=radio] + label {
 275   display: inline-block;
 276   width: 50%;
 277   padding: .25ex 0;
 278   text-align: center;
 279   border: 1px solid black;
 280
 281 }
 282 form.card .insurance input[type=radio]:checked + label {
 283   font-weight: bold;
 284   background-color: #FFF;
 285   border-width: 1px 1px 0 1px;
 286 }
 287 form.card .insurance input[type=radio] + label + input + label + select,
 288 form.card .insurance input[type=radio] + label + select + input {display: none;}
 289 form.card .insurance input[type=radio]:checked + label + input + label + select,
 290 form.card .insurance input[type=radio]:checked + label + select + input {
 291   display: block;
 292   border: 1px solid black;
 293   background-color: #FFF;
 294   border-width: 0 1px 1px 1px;
 295   padding: .25ex 0;
 296   margin-top: -1px;
 297 }