2 # Copyright 2014 - 2017 Paul Hänsch
4 # This file is part of Confetti.
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.
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.
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/>.
20 .filter, .newcard, .card { box-shadow: 0 0 1ex; }
25 border-radius: 4px 4px 0 0;
26 margin: .5em 2em .25em 2em;
27 padding: 0 2ex .5em 2ex;
35 border-style: none none solid none;
36 border-radius: 4px 4px 0 0;
38 margin: 0 -1.625ex .5em -1.625ex;
42 .filter input[type="text"] {
54 .filter fieldset legend {
61 display: inline-block;
63 margin: .125em 2ex 0 0;
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;
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;
85 .filter fieldset.item input[type=radio]:checked + label {
86 background-color: #FFF;
87 border: 1px solid #000;
88 border-bottom-color: #FFF;
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 {
94 .filter fieldset.item input[type=radio][value="CATEGORIES"]:checked + label + input[type=text] + fieldset.categories {
97 .filter fieldset.item fieldset.categories a {
106 margin: 1em 2em .5em 2em;
112 box-shadow: 0 0 .5ex #888;
126 display: inline-block;
137 .card .control .item {
138 display: inline-block;
147 text-decoration: none;
148 border: 1px solid #888;
149 box-shadow: 0 0 .5ex #888;
151 .card .control button.item { text-align: right;}
152 .card .control .item:hover{ border-color: #008; box-shadow: 0 0 .5ex #008; }
154 .card .control .item[name=newfield] {
155 width: calc(100% - 2.5em);
157 .card .control .item[value=addfield] {
159 border-style: solid solid solid none;
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%;
171 background-color: #FAA;
173 border-radius: .25em 0 0 .25em;
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;
183 color: #AAA; background-color: #000;
184 border-radius: 0 .25em .25em 0;
188 display: inline-block;
194 margin: .125em 0 .5ex 0;
195 padding: 0 1ex .25em 1ex;
197 .card .section:nth-of-type(2n){ background: #EEE;}
199 .card .section h2, .card .section h3 {
203 margin: .25em -.5ex .25em -.5ex;
204 border-style: none none solid none;
207 .card .section .FN { /* will override h2 */
212 .card .section .item {
215 word-wrap: break-word;
216 white-space: pre-line;
218 .card .section .item label {
222 .card .section textarea.NOTE {
225 .card .section textarea.ADR {
229 .card .section .PHOTO {
233 .card .section .GENDER { display: inline-block; padding-right: .5ex; }
234 .card .section .BDAY { display: inline-block;}
235 .card .section .TEL .type { color: #444; }
237 .card .section select {
239 background-color: #FFF;
240 border: 1px solid black;
243 .card .section.attendance ul { margin: 0; padding: 0; }
244 .card .section.attendance ul li {
246 word-wrap: break-word;
249 .card .section.prescriptions ul { margin: 0; padding: 0; }
250 .card .section.prescriptions ul li {
252 word-wrap: break-word;
256 .card .section.prescriptions { width: 40ex;}
258 .card .section.therapies a.therapy {
259 display: inline-block;
261 margin-bottom: .25em;
263 text-decoration: none;
264 background-color: #DDF;
265 border: 1px solid black;
268 form.card input.delete { display: none; }
269 form.card input.delete + label {
270 display: inline-block;
273 left: calc(100% - 1.5em);
275 margin-bottom: -1.5em;
278 vertical-align: bottom;
280 form.card input.delete + label:before {
281 display: inline-block;
283 width: calc(1.5em - 2px); height: calc(1.5em - 2px);
284 vertical-align: bottom;
287 background-color: #FBB;
288 border: 1px solid #BBB;
290 form.card input.delete + label + input[type=text],
291 form.card input.delete + label + input:not([type]),
292 form.card input.delete + label + select + input.TEL {
293 width: calc(100% - 1.5em);
295 form.card input.delete[name^=TEL_] + label { top: 1.5em; }
296 form.card input.delete[name^=TEL_] + label:before { border-top: none; }
297 form.card input.delete[name^=NOTE_] + label,
298 form.card input.delete[name^=ADR_] + label { margin-bottom: 0; }
299 form.card input.delete[name^=NOTE_] + label:before,
300 form.card input.delete[name^=ADR_] + label:before { border-bottom: none; }
302 form.card input.delete:checked + label,
303 form.card input.delete:checked + label + input,
304 form.card input.delete:checked + label + select,
305 form.card input.delete:checked + label + select + input,
306 form.card input.delete:checked + label + textarea {
310 form.card .section input[type=text],
311 form.card .section input:not([type]),
312 form.card .section textarea,
313 form.card .section select {
315 margin-bottom: .25em;
318 form.card .section select.teltype { margin-bottom: 0; }
319 form.card .section input.TEL { margin-bottom: .5em; }
321 form.card .attendance {
324 form.card .attendance label {
326 display: inline-block;
330 form.card .attendance label input[type=checkbox] {
335 form.card .insurance input[type=radio] {display: none;}
336 form.card .insurance input[type=radio] + label {
337 display: inline-block;
341 border: 1px solid black;
344 form.card .insurance input[type=radio]:checked + label {
346 background-color: #FFF;
347 border-width: 1px 1px 0 1px;
349 form.card .insurance input[type=radio] + label + input + label + select,
350 form.card .insurance input[type=radio] + label + select + input {display: none;}
351 form.card .insurance input[type=radio]:checked + label + input + label + select,
352 form.card .insurance input[type=radio]:checked + label + select + input {
354 border: 1px solid black;
355 background-color: #FFF;
356 border-width: 0 1px 1px 1px;