slightly improved touchscreen buttons
[confetti] / static / cards.css
1 /*
2 # Copyright 2014 - 2016 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 .newcard {
68   display: block;
69   border: solid 1px;
70   border-radius: 0 0 4px 4px;
71   margin: .25em 2em 1em 2em;
72   padding: .25em 2ex .25em 2ex;
73   background: #EFF;
74 }
75
76 .card {
77   display: block;
78   position: relative;
79   border: solid 1px;
80   margin: .25em 2em;
81   padding: 0 20ex 0 0;
82   overflow: auto;
83   background: #FFF;
84   min-height: 8em;
85 }
86 .card .control {
87   display: inline-block;
88   position: absolute;
89   top: 0; right: 0;
90   text-align: right;
91   background: #EEF;
92   margin: 0;
93   height: 100%;
94   width: 20ex;
95   max-width: 33%;
96   padding: .25em 1ex;
97 }
98 .card .control .item {
99   display: inline-block;
100   width: 100%;
101   min-height: 2.5em;
102   color: #008;
103   margin: .25em 0 .5em 0;
104   border: 1px solid black;
105   background: #FFF;
106   padding: .25em .75ex 0 .75ex;
107   text-decoration: none;
108   font-size: .75em;
109 }
110 .card .control .item:hover{ border-color: #888; }
111 .card .control input.item { font-size: normal; }
112 .card .control button.item { text-align: right;}
113 .card .control button.item:hover{ border-color: #888;}
114 .card .control .item[name=newfield] { width: 85%;}
115 .card .control .item[value=addfield] { width: 15%;}
116
117 .card .control #delete + label + button,
118 .card .control #delete { display: none; }
119 .card .control #delete + label { background-color: #FEE; }
120 .card .control #delete:checked + label + button {
121   position: fixed; display: block;
122   left: 40%; top: 30%; width: 20%;
123   font-size: 1.5em;
124   text-align: center;
125   background-color: #FAA;
126   color: #333;
127   border-radius: .25em 0 0 .25em;
128 }
129 .card .control #delete:checked + label:after {
130   position: fixed; display: block;
131   left: 60%; top: 30%; width: 5%;
132   margin: .25em 0; padding: .5em .75ex 0 .75ex;
133   height: 1.5em;
134   font-size: 2em;
135   content: 'X';
136   text-align: center;
137   color: #AAA; background-color: #000;
138   border-radius: 0 .25em .25em 0;
139 }
140
141 .card .section {
142   display: inline-block;
143   vertical-align: top;
144   float: left;
145   width: 20ex;
146   min-width: 16.5%;
147   min-height: 6em;
148   margin: .125em 0 .5ex 0;
149   padding: 0 1ex .25em 1ex;
150 }
151 .card .section:nth-of-type(2n){ background: #EEE;}
152
153 .card .section h2, .card .section h3 {
154   font-size: 1em;
155   display: block;
156   font-weight: bold;
157   margin: .25em -.5ex .25em -.5ex;
158   border-style: none none solid none;
159   border-width: 1px;
160 }
161 .card .section .FN {  /* will override h2 */
162   font-size: 1.2em;
163   margin-top: 0;
164 }
165
166 .card .section .item {
167   display: block;
168   max-width: 100%;
169   word-wrap: break-word;
170 }
171 .card .section .item label {
172   font-weight: bold;
173 }
174
175 .card .section textarea.NOTE {
176   min-height: 6em;
177 }
178 .card .section textarea.ADR {
179   min-height: 4em;
180 }
181
182 .card .section .PHOTO {
183   width: 100%;
184   max-height: 10em;
185 }
186 .card .section .GENDER { display: inline-block; padding-right: .5ex;}
187 .card .section .BDAY { display: inline-block;}
188
189 .card .section select {
190   display: block;
191   background-color: #FFF;
192   border: 1px solid black;
193 }
194
195 .card .section.attendance ul { margin: 0; padding: 0; }
196 .card .section.attendance ul li {
197   display: block;
198   word-wrap: break-word;
199 }
200
201 .card .section.prescriptions ul { margin: 0; padding: 0; }
202 .card .section.prescriptions ul li {
203   display: block;
204   word-wrap: break-word;
205   margin: 0 .25ex;
206 }
207
208 .card .section.prescriptions { width: 40ex;}
209
210 form.card .section input[type=text],
211 form.card .section input:not([type]),
212 form.card .section textarea,
213 form.card .section select {width: 100%;}
214
215 form.card .attendance {
216   min-width: 66%;
217 }
218 form.card .attendance label {
219   position: relative;
220   display: inline-block;
221   width: 25ex;
222   padding-left: 3ex;
223 }
224 form.card .attendance label input[type=checkbox] {
225   position: absolute;
226   margin-left: -3ex;
227 }
228
229 form.card .insurance input[type=radio] {display: none;}
230 form.card .insurance input[type=radio] + label {
231   display: inline-block;
232   width: 50%;
233   padding: .25ex 0;
234   text-align: center;
235   border: 1px solid black;
236   
237 }
238 form.card .insurance input[type=radio]:checked + label {
239   font-weight: bold;
240   background-color: #FFF;
241   border-width: 1px 1px 0 1px;
242 }
243 form.card .insurance input[type=radio] + label + input + label + select,
244 form.card .insurance input[type=radio] + label + select + input {display: none;}
245 form.card .insurance input[type=radio]:checked + label + input + label + select,
246 form.card .insurance input[type=radio]:checked + label + select + input {
247   display: block;
248   border: 1px solid black;
249   background-color: #FFF;
250   border-width: 0 1px 1px 1px;
251   padding: .25ex 0;
252   margin-top: -1px;
253 }