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