reduce number of pre filled text fields, show more prescription info in therapy
[confetti] / static / therapy.css
1 .trailbtn:checked + fieldset.trailbox { display: block;}
2
3 * { box-sizing: border-box; }
4 body {
5   overflow: scroll;
6   position: relative;
7   width: 100%;
8   margin: 0; padding: 0;
9   padding-top: 2em;
10 }
11
12 form > button[type=submit] {
13   position: fixed; display: block;
14   top: 0; left: 15em;
15   height: 2.25em; padding: 0 3ex;
16   font-size: 1em; font-weight: bold;
17   color: #000; background-color: #FDD;
18   border-width: 1px; border-color: #000;
19   border-style: none solid solid solid;
20   border-radius: 0 0 4px 4px;
21   z-index: 3;
22 }
23 form > button[type=submit]:hover {
24   background-color: #FEE;
25 }
26
27 input.tab { display: none; }
28 input.tab + label.tab { display: block; }
29 input.tab + label.tab::before { content: '\25b8 \00a0'; float: left;}
30 input.tab:checked + label.tab::before { content: '\25be \00a0'; }
31 input.tab + label.tab + div.tab { display: none; }
32 input.tab:checked + label.tab + div.tab { display: block; }
33
34 input.color { display: none }
35 input.color + label{
36   display: inline-block;
37   width: 1em; height: 1em;
38   border: 1px solid black;
39 }
40 input.color:checked + label{ border-width: 3px;}
41 input.color[value="#000"] + label,
42 input.color[value="#888"] + label { background-color: #888;}
43 input.color[value="#00A"] + label { background-color: #00F;}
44 input.color[value="#0A0"] + label { background-color: #0F0;}
45 input.color[value="#0AA"] + label { background-color: #0FF;}
46 input.color[value="#A00"] + label { background-color: #F00;}
47 input.color[value="#A0A"] + label { background-color: #F0F;}
48 input.color[value="#AA0"] + label { background-color: #FF0;}
49 input.color[value="#FFF"] + label { background-color: #FFF;}
50
51 h1, label.tab, div.tab, fieldset.tab,
52 div.patient, div.prescription {
53   display: block;
54   width: 96%;
55   margin: 0 2%;
56 }
57
58 div.prescription span {
59   display: inline-block;
60   width: 50%;
61   margin-right: -.75ex;
62   vertical-align: top;
63 }
64 div.prescription span label { font-weight: bold; margin-right: 1ex;}
65 div.prescription span.prescno,
66 div.prescription span.catalogue {
67   width: 33%;
68   font-weight: bold;
69   margin-bottom: .5em;
70   padding: .5ex 1ex;
71 }
72
73 div.prescription ul {margin-top: 0;}
74
75 div.prescription label.checkbox,
76 div.prescription label.radio {
77   display: block;
78   padding-left: 1.25em;
79   font-size: 1em;
80   margin: .5em 0;
81 }
82
83 div.prescription label.checkbox:before,
84 div.prescription label.radio:before {
85   display: inline-block;
86   color: #000;
87   background-color: #FFF;
88   height: 1.375em; width: 1.125em;
89   padding: .125em 0 0 .375em;
90   margin: 0 .5em .25em -1.25em;
91   border: 1px solid #000;
92   vertical-align: middle;
93   content: ' ';
94 }
95 div.prescription label.radio:before { border-radius: .5em;}
96 div.prescription label.checkbox.checked:before,
97 div.prescription label.radio.checked:before { content: "\2713";}
98
99 div.prescription label[for=prescreviewed] {
100   margin-left: 1ex;
101   font-weight: bold;
102   text-decoration: underline;
103   background-color: #FCC;
104 }
105 div.prescription label[for=prescreviewed].checked {
106   font-weight: normal;
107   text-decoration: none;
108   background-color: transparent;
109 }
110
111 div.prescription label.tab {width: 96%; border: none; border-bottom: 1px dotted;}
112 div.prescription div.tab { width: 96%; background-color: #DDD;}
113
114 input.stickynote { display:none; }
115 input.stickynote + .stickynote {
116   position: fixed;
117   background-color: #FF8;
118   top: 4em; bottom: 4em;
119   left: -4.5em; width: 5em;
120   padding: 1ex;
121   max-height: 90%;
122   z-index: 2;
123 }
124 input.stickynote + .stickynote > * { display: none; }
125 input.stickynote + .stickynote > label {
126   position: absolute;
127   top: 0; bottom: 0;
128   display: block;
129   text-align: right;
130   font-weight: bold;
131 }
132 input.stickynote + .stickynote:hover {
133   left: -1ex;
134 }
135 input.stickynote:checked + .stickynote {
136   width: auto;
137   left: 1em;
138   right: 1em;
139 }
140 input.stickynote:checked + .stickynote > textarea {
141   display: block;
142   position: absolute;
143   left; 0; right: 0; bottom: 0; top: 0;
144   width: 100%; height: 100%;
145   background-color: #FF8;
146   padding: 2em 1em;
147 }
148 input.stickynote:checked + .stickynote > button {
149   display: block;
150   position: absolute;
151   right: .5ex; bottom: .5ex;
152   z-index: 2;
153 }
154 input.stickynote:checked + .stickynote > label {
155   display: block;
156   position: static;
157   font-size: 0;
158 }
159 input.stickynote:checked + .stickynote > label:before {
160   position: absolute;
161   font-size: initial;
162   content: "x";
163   top: .5ex; right: .5ex;
164   padding: .125ex .75ex;
165   background-color: #000;
166   color: #FFF;
167   border-radius: 1ex;
168   z-index: 2;
169 }
170
171
172 fieldset.color {
173   position: absolute;
174   bottom: 0; right: 0; width: 2em;
175   margin: .5em .5em .125em 2%;
176   border: none;
177   padding: 0;
178 }
179 fieldset.color > input.color + label {
180   width: 2em; height: 2em;
181 }
182 .dotmark {
183   max-width: 90%;
184   margin: .5em 1em .125em 2%; padding: 0;
185   text-align: left;
186   border: 1px solid black;
187 }
188 .dotmark.ov {
189   position: absolute;
190   left: 0; bottom: .25em;
191   z-index: 1;
192 }
193
194 @media(min-width: 800px){
195   h1, label.tab, div.tab, fieldset.tab,
196   div.patient, div.prescription {
197     width: 38%;
198     margin-right: 0;
199   }
200   input.stickynote:checked + .stickynote { right: 50%; }
201   fieldset.color { position: fixed; }
202   .dotmark {
203     position: fixed;
204     max-width: 52%;
205     max-height: 98%;
206     right: 2em; bottom: .25em;
207   }
208   .dotmark.ov {
209     position: fixed;
210     right: 2em; left: auto;
211   }
212 }
213
214 h1 {display: none;}
215
216 div.patient, div.prescription { margin-top: 1em; }
217 div.prescription {
218   border: 1px solid black;
219   background-color: #EEE;
220   padding: .125em 1.25ex .5em 1.25ex;
221 }
222 div > h2 { margin: 0; border-bottom: 1px solid black; }
223 div:nth-child(n+2) > a:first-of-type {
224   display: block;
225   margin: .125em 0 .5em 0;
226   text-decoration: none;
227 }
228
229 #report fieldset.tab,
230 #report label.tab {
231   font-size: 1.25em;
232   font-weight: bold;
233   padding: .125em 1ex .25em 1ex;
234   color: #FFF;
235   background-color: #333;
236   margin-top: .125em;
237   text-align: right;
238   border: none;
239 }
240 #report label.heading {
241   background-color: #FFF;
242   margin-top: 1em;
243   border: 2px solid black;
244   border-bottom-width: 1px;
245   color: black;
246 }
247 #report label.heading > span {
248   text-decoration: underline;
249 }
250
251 #report fieldset.tab > *,
252 #report label > input,
253 #report label > span {
254   display: inline-block;
255   text-align: right;
256 }
257 #report .tab > .no {
258   width:  10%; float: left;
259   border: solid 1px #FFF;
260   background-color: #555;
261   border-radius: 2ex;
262   padding: 0;
263   text-align: center;
264 }
265 #report label.heading > span.no {
266   background-color: inherit;
267   border: none;
268 }
269 #report .tab > .date      { width: 30%; }
270 #report .tab > .therapist { width: 30%; }
271 #report .tab > .signature { width: 20%; }
272 #report label.tab > .signature { font-size: .75em; }
273
274 #report .signature > input[type=checkbox] {
275   display: inline;
276   font-weight: bold;
277   font-size: 1.25em;
278 }
279 #report .signature > input[type=checkbox]:before {
280   display: block; width: 1.25em;
281   margin: -.125em 0 0 -.5ex;
282   background-color: #FFF;
283   text-align: center;
284   content: "\00a0 \00a0 \00a0";
285 }
286 #report .signature > input[type=checkbox]:checked::before {
287   content: "\2713";
288 }
289
290 #report input.tab + label.tab > input.date,
291 #report input.tab + label.tab > input.therapist {
292   display: none;
293 }
294 #report input.tab:checked + label.tab > input.date,
295 #report input.tab:checked + label.tab > input.therapist {
296   display: inline;
297 }
298 #report input.tab:checked + label.tab > span.date,
299 #report input.tab:checked + label.tab > span.therapist {
300   display: none;
301 }
302
303 #report div.tab {
304   border: 2px solid #333;
305   border-top-width: 1px;
306   margin-top: -1px;
307   padding: .25em .5ex 1em .5ex;
308 }
309 #report div.tab > fieldset.note {
310   border: none;
311   margin: 0; padding: 0;
312 }
313 #report div.tab > fieldset.note > textarea {
314   display: block;
315   width: 93%; height: 8em;
316   margin: -8em 0 .5em 2em;
317   font: normal 1em sans-serif;
318 }
319 div.tab > fieldset.note > input.color + label { margin: 0; display: block; }
320 div.tab > fieldset.note > input.color[value="#888"]:checked ~ textarea { background-color: #AAA; }
321 div.tab > fieldset.note > input.color[value="#00A"]:checked ~ textarea { background-color: #88F; }
322 div.tab > fieldset.note > input.color[value="#0A0"]:checked ~ textarea { background-color: #8F8; }
323 div.tab > fieldset.note > input.color[value="#0AA"]:checked ~ textarea { background-color: #8FF; }
324 div.tab > fieldset.note > input.color[value="#A00"]:checked ~ textarea { background-color: #F88; }
325 div.tab > fieldset.note > input.color[value="#A0A"]:checked ~ textarea { background-color: #F8F; }
326 div.tab > fieldset.note > input.color[value="#AA0"]:checked ~ textarea { background-color: #FF8; }
327 div.tab > fieldset.note > input.color[value="#FFF"]:checked ~ textarea { background-color: #FFF; }
328
329 div.tab > button.delete {float: right; display: inline-block; margin-top: -1em; display: none;}