mailto: function in card listing
[confetti] / 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 }