7d4593c7f7a50693653054c0c83a97f97bcc40dc
[confetti] / 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
149 .card .control .item[name=newfield] {
150   width: calc(100% - 2.5em);
151 }
152 .card .control .item[value=addfield] {
153   width: 2.5em;
154   border-style: solid solid solid none;
155   text-align: center;
156 }
157
158 .card .control #delete + label + button,
159 .card .control #delete { display: none; }
160 .card .control #delete + label { background-color: #FEE; }
161 .card .control #delete:checked + label + button {
162   position: fixed; display: block;
163   left: 40%; top: 30%; width: 20%;
164   font-size: 1.5em;
165   text-align: center;
166   background-color: #FAA;
167   color: #333;
168   border-radius: .25em 0 0 .25em;
169 }
170 .card .control #delete:checked + label:after {
171   position: fixed; display: block;
172   left: 60%; top: 30%; width: 5%;
173   margin: .25em 0; padding: .5em .75ex 0 .75ex;
174   height: 1.5em;
175   font-size: 2em;
176   content: 'X';
177   text-align: center;
178   color: #AAA; background-color: #000;
179   border-radius: 0 .25em .25em 0;
180 }
181
182 .card .section {
183   display: inline-block;
184   vertical-align: top;
185   float: left;
186   width: 20ex;
187   min-width: 16.5%;
188   min-height: 6em;
189   margin: .125em 0 .5ex 0;
190   padding: 0 1ex .25em 1ex;
191 }
192 .card .section:nth-of-type(2n){ background: #EEE;}
193
194 .card .section h2, .card .section h3 {
195   font-size: 1em;
196   display: block;
197   font-weight: bold;
198   margin: .25em -.5ex .25em -.5ex;
199   border-style: none none solid none;
200   border-width: 1px;
201 }
202 .card .section .FN {  /* will override h2 */
203   font-size: 1.2em;
204   margin-top: 0;
205 }
206
207 .card .section .item {
208   display: block;
209   max-width: 100%;
210   word-wrap: break-word;
211   white-space: pre-line;
212 }
213 .card .section .item label {
214   font-weight: bold;
215 }
216
217 .card .section textarea.NOTE {
218   min-height: 6em;
219 }
220 .card .section textarea.ADR {
221   min-height: 4em;
222 }
223
224 .card .section .PHOTO {
225   width: 100%;
226   max-height: 10em;
227 }
228 .card .section .GENDER { display: inline-block; padding-right: .5ex; }
229 .card .section .BDAY { display: inline-block;}
230 .card .section .TEL .type { color: #444; }
231
232 .card .section select {
233   display: block;
234   background-color: #FFF;
235   border: 1px solid black;
236 }
237
238 .card .section.attendance ul { margin: 0; padding: 0; }
239 .card .section.attendance ul li {
240   display: block;
241   word-wrap: break-word;
242 }
243
244 .card .section.prescriptions ul { margin: 0; padding: 0; }
245 .card .section.prescriptions ul li {
246   display: block;
247   word-wrap: break-word;
248   margin: 0 .25ex;
249 }
250
251 .card .section.prescriptions { width: 40ex;}
252
253 form.card .section input[type=text],
254 form.card .section input:not([type]),
255 form.card .section textarea,
256 form.card .section select {
257   width: 100%;
258   margin-bottom: .25em;
259 }
260
261 form.card .section select.teltype { margin-bottom: 0; }
262 form.card .section input.TEL { margin-bottom: .5em; }
263
264 form.card .attendance {
265   min-width: 66%;
266 }
267 form.card .attendance label {
268   position: relative;
269   display: inline-block;
270   width: 25ex;
271   padding-left: 3ex;
272 }
273 form.card .attendance label input[type=checkbox] {
274   position: absolute;
275   margin-left: -3ex;
276 }
277
278 form.card .insurance input[type=radio] {display: none;}
279 form.card .insurance input[type=radio] + label {
280   display: inline-block;
281   width: 50%;
282   padding: .25ex 0;
283   text-align: center;
284   border: 1px solid black;
285   
286 }
287 form.card .insurance input[type=radio]:checked + label {
288   font-weight: bold;
289   background-color: #FFF;
290   border-width: 1px 1px 0 1px;
291 }
292 form.card .insurance input[type=radio] + label + input + label + select,
293 form.card .insurance input[type=radio] + label + select + input {display: none;}
294 form.card .insurance input[type=radio]:checked + label + input + label + select,
295 form.card .insurance input[type=radio]:checked + label + select + input {
296   display: block;
297   border: 1px solid black;
298   background-color: #FFF;
299   border-width: 0 1px 1px 1px;
300   padding: .25ex 0;
301   margin-top: -1px;
302 }