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 {
  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   height: 2em;
  43   margin-bottom: 1em;
  44 }
  45 .filter fieldset {
  46   position: relative;
  47   display: block;
  48   border: none;
  49   padding: 0 0 0 12ex;
  50   margin: 0 0 .5em 0;
  51 }
  52 .filter fieldset legend {
  53   position: absolute;
  54   font-size: 1em;
  55   font-weight: bold;
  56   margin-left: -12ex;
  57 }
  58 .filter label {
  59   display: inline-block;
  60   vertical-align: top;
  61   margin: .125em 2ex 0 0;
  62   white-space: nowrap;
  63 }
  64 .filter button {
  65   margin-top: .5em;
  66 }
  67
  68 .filter fieldset.item { padding-left: 0; }
  69 .filter fieldset.item legend { display: none; }
  70 .filter fieldset.item input[type=text],
  71 .filter fieldset.item fieldset.categories {
  72   background-color: #FFF;
  73   border: 1px solid #000;
  74   margin-top: -1px;
  75   padding: .25em .5em;
  76 }
  77 .filter fieldset.item input[type=radio] { display: none; }
  78 .filter fieldset.item input[type=radio] + label {
  79   position: relative; z-index: 1;
  80   margin: 0; padding: .25em 1em;
  81
  82 }
  83 .filter fieldset.item input[type=radio]:checked + label {
  84   background-color: #FFF;
  85   border: 1px solid #000;
  86   border-bottom-color: #FFF;
  87 }
  88 .filter fieldset.item input[type=radio][value="CATEGORIES"]:checked + label + input[type=text],
  89 .filter fieldset.item input[type=radio][value="CATEGORIES"] + label + input[type=text] + fieldset.categories {
  90   display: none;
  91 }
  92 .filter fieldset.item input[type=radio][value="CATEGORIES"]:checked + label + input[type=text] + fieldset.categories {
  93   display: block;
  94 }
  95 .filter fieldset.item fieldset.categories a {
  96   font-size: .875em;
  97   line-height: 1.625em;
  98   color: #44C;
  99 }
 100
 101 .newcard {
 102   display: block;
 103   border: solid 1px;
 104   border-radius: 0 0 4px 4px;
 105   margin: .25em 2em 1em 2em;
 106   padding: .25em 2ex .25em 2ex;
 107   background: #EFF;
 108 }
 109
 110 .card {
 111   display: block;
 112   position: relative;
 113   border: solid 1px;
 114   margin: .25em 2em;
 115   padding: 0 20ex 0 0;
 116   overflow: auto;
 117   background: #FFF;
 118   min-height: 8em;
 119 }
 120 .card .control {
 121   display: inline-block;
 122   position: absolute;
 123   top: 0; right: 0;
 124   text-align: right;
 125   background: #EEF;
 126   margin: 0;
 127   height: 100%;
 128   width: 20ex;
 129   max-width: 33%;
 130   padding: .25em 1ex;
 131 }
 132 .card .control .item {
 133   display: inline-block;
 134   width: 100%;
 135   min-height: 2.5em;
 136   color: #008;
 137   margin: .25em 0 .5em 0;
 138   border: 1px solid black;
 139   background: #FFF;
 140   padding: .25em .75ex 0 .75ex;
 141   text-decoration: none;
 142   font-size: .75em;
 143 }
 144 .card .control .item:hover{ border-color: #888; }
 145 .card .control input.item { font-size: normal; }
 146 .card .control button.item { text-align: right;}
 147 .card .control button.item:hover{ border-color: #888;}
 148 .card .control .item[name=newfield] { width: 85%;}
 149 .card .control .item[value=addfield] { width: 15%;}
 150
 151 .card .control #delete + label + button,
 152 .card .control #delete { display: none; }
 153 .card .control #delete + label { background-color: #FEE; }
 154 .card .control #delete:checked + label + button {
 155   position: fixed; display: block;
 156   left: 40%; top: 30%; width: 20%;
 157   font-size: 1.5em;
 158   text-align: center;
 159   background-color: #FAA;
 160   color: #333;
 161   border-radius: .25em 0 0 .25em;
 162 }
 163 .card .control #delete:checked + label:after {
 164   position: fixed; display: block;
 165   left: 60%; top: 30%; width: 5%;
 166   margin: .25em 0; padding: .5em .75ex 0 .75ex;
 167   height: 1.5em;
 168   font-size: 2em;
 169   content: 'X';
 170   text-align: center;
 171   color: #AAA; background-color: #000;
 172   border-radius: 0 .25em .25em 0;
 173 }
 174
 175 .card .section {
 176   display: inline-block;
 177   vertical-align: top;
 178   float: left;
 179   width: 20ex;
 180   min-width: 16.5%;
 181   min-height: 6em;
 182   margin: .125em 0 .5ex 0;
 183   padding: 0 1ex .25em 1ex;
 184 }
 185 .card .section:nth-of-type(2n){ background: #EEE;}
 186
 187 .card .section h2, .card .section h3 {
 188   font-size: 1em;
 189   display: block;
 190   font-weight: bold;
 191   margin: .25em -.5ex .25em -.5ex;
 192   border-style: none none solid none;
 193   border-width: 1px;
 194 }
 195 .card .section .FN {  /* will override h2 */
 196   font-size: 1.2em;
 197   margin-top: 0;
 198 }
 199
 200 .card .section .item {
 201   display: block;
 202   max-width: 100%;
 203   word-wrap: break-word;
 204   white-space: pre-line;
 205 }
 206 .card .section .item label {
 207   font-weight: bold;
 208 }
 209
 210 .card .section textarea.NOTE {
 211   min-height: 6em;
 212 }
 213 .card .section textarea.ADR {
 214   min-height: 4em;
 215 }
 216
 217 .card .section .PHOTO {
 218   width: 100%;
 219   max-height: 10em;
 220 }
 221 .card .section .GENDER { display: inline-block; padding-right: .5ex;}
 222 .card .section .BDAY { display: inline-block;}
 223
 224 .card .section select {
 225   display: block;
 226   background-color: #FFF;
 227   border: 1px solid black;
 228 }
 229
 230 .card .section.attendance ul { margin: 0; padding: 0; }
 231 .card .section.attendance ul li {
 232   display: block;
 233   word-wrap: break-word;
 234 }
 235
 236 .card .section.prescriptions ul { margin: 0; padding: 0; }
 237 .card .section.prescriptions ul li {
 238   display: block;
 239   word-wrap: break-word;
 240   margin: 0 .25ex;
 241 }
 242
 243 .card .section.prescriptions { width: 40ex;}
 244
 245 form.card .section input[type=text],
 246 form.card .section input:not([type]),
 247 form.card .section textarea,
 248 form.card .section select {width: 100%;}
 249
 250 form.card .attendance {
 251   min-width: 66%;
 252 }
 253 form.card .attendance label {
 254   position: relative;
 255   display: inline-block;
 256   width: 25ex;
 257   padding-left: 3ex;
 258 }
 259 form.card .attendance label input[type=checkbox] {
 260   position: absolute;
 261   margin-left: -3ex;
 262 }
 263
 264 form.card .insurance input[type=radio] {display: none;}
 265 form.card .insurance input[type=radio] + label {
 266   display: inline-block;
 267   width: 50%;
 268   padding: .25ex 0;
 269   text-align: center;
 270   border: 1px solid black;
 271
 272 }
 273 form.card .insurance input[type=radio]:checked + label {
 274   font-weight: bold;
 275   background-color: #FFF;
 276   border-width: 1px 1px 0 1px;
 277 }
 278 form.card .insurance input[type=radio] + label + input + label + select,
 279 form.card .insurance input[type=radio] + label + select + input {display: none;}
 280 form.card .insurance input[type=radio]:checked + label + input + label + select,
 281 form.card .insurance input[type=radio]:checked + label + select + input {
 282   display: block;
 283   border: 1px solid black;
 284   background-color: #FFF;
 285   border-width: 0 1px 1px 1px;
 286   padding: .25ex 0;
 287   margin-top: -1px;
 288 }