dynamic therapy section
[confetti] / templates / therapy.css.sh
1 #!/bin/sh
2
3 cat <<EOF
4 * { box-sizing: border-box; }
5 body {
6   position: relative;
7   width: 100%;
8   margin: 0; padding: 0;
9   padding-top: 2em;
10 }
11
12 input.tab { display: none; }
13 input.tab + label.tab { display: block; }
14 input.tab + label.tab::before { content: '\25b8 \00a0'; float: left;}
15 input.tab:checked + label.tab::before { content: '\25be \00a0'; }
16 input.tab + label.tab + div.tab { display: none; }
17 input.tab:checked + label.tab + div.tab { display: block; }
18
19 input.color { display: none }
20 input.color + label{
21   display: inline-block;
22   width: 1em; height: 1em;
23   border: 1px solid black;
24 }
25 input.color:checked + label{ border-width: 3px;}
26 input.color[value="c000"] + label { background-color: #888;}
27 input.color[value="c001"] + label { background-color: #00F;}
28 input.color[value="c010"] + label { background-color: #0F0;}
29 input.color[value="c011"] + label { background-color: #0FF;}
30 input.color[value="c100"] + label { background-color: #F00;}
31 input.color[value="c101"] + label { background-color: #F0F;}
32 input.color[value="c110"] + label { background-color: #FF0;}
33 input.color[value="c111"] + label { background-color: #FFF;}
34
35 h1, label.tab, div.tab, fieldset.tab,
36 div.patient, div.prescription {
37   display: block;
38   width: 96%;
39   margin: 0 2%;
40 }
41
42 div.prescription .insurance{ display: block; margin: .5ex 0 1ex 0; }
43 div.prescription label.checkbox,
44 div.prescription label.radio { padding-left: 1.25em; font-size: 1em;}
45
46 div.prescription label.checkbox:before,
47 div.prescription label.radio:before {
48   display: inline-block;
49   color: #000;
50   background-color: #FFF;
51   height: 1.375em; width: 1.125em;
52   padding: .125em 0 0 .375em;
53   margin: 0 .5em .25em -1.25em;
54   border: 1px solid #000;
55   vertical-align: middle;
56   content: ' ';
57 }
58 div.prescription label.radio:before { border-radius: .5em;}
59 div.prescription label.checkbox.checked:before,
60 div.prescription label.radio.checked:before { content: "\2713";}
61
62 div.prescription label[for=prescreviewed] {
63   margin-left: 1ex;
64   font-weight: bold;
65   text-decoration: underline;
66   background-color: #FCC;
67 }
68 div.prescription label[for=prescreviewed].checked {
69   font-weight: normal;
70   text-decoration: none;
71   background-color: transparent;
72 }
73
74 fieldset.color {
75   margin: .5em 2% 0 2%;
76   border: none;
77   padding: 0;
78 }
79 .dotmark {
80   max-width: 96%;
81   margin: .125em 2%; padding: 0;
82   text-align: left;
83   border: 1px dotted black;
84 }
85 .dotmark.ov {
86   position: absolute;
87   bottom: 5px; right: 0%;
88   z-index: 1;
89 }
90 @media(min-width: 800px){
91   h1, label.tab, div.tab, fieldset.tab,
92   div.patient, div.prescription {
93     width: 38%;
94     margin-right: 0;
95   }
96   fieldset.color{
97     position: fixed;
98     max-width: 56%;
99     right: 0;
100     top: 0em;
101   }
102   .dotmark {
103     position: fixed;
104     max-width: 56%;
105     max-height: 480px;
106     right: 0;
107     top: 2em;
108   }
109   .dotmark.ov {
110     position: fixed;
111     bottom: auto;
112   }
113 }
114
115 h1 {display: none;}
116
117 div.patient, div.prescription { margin-top: 1em; }
118 div.prescription {
119   border: 1px solid black;
120   background-color: #EEE;
121   padding: .125em 1.25ex .5em 1.25ex;
122 }
123 div > h2 { margin: 0; border-bottom: 1px solid black; }
124 div:nth-child(n+2) > a:first-of-type {
125   display: block;
126   margin: .125em 0 .5em 0;
127   text-decoration: none;
128 }
129
130 fieldset.tab,
131 label.tab {
132   font-size: 1.25em;
133   font-weight: bold;
134   padding: .125em 1ex .25em 1ex;
135   color: #FFF;
136   background-color: #333;
137   margin-top: .125em;
138   text-align: right;
139   border: none;
140 }
141 label.heading {
142   background-color: #FFF;
143   margin-top: 1em;
144   border: 2px solid black;
145   border-bottom-width: 1px;
146   color: black;
147 }
148 label.heading > span {
149   text-decoration: underline;
150 }
151
152 fieldset.tab > *,
153 label > input,
154 label > span {
155   display: inline-block;
156   text-align: right;
157 }
158 .tab > .no {
159   width:  10%; float: left;
160   border: solid 1px #FFF;
161   background-color: #555;
162   border-radius: 2ex;
163   padding: 0;
164   text-align: center;
165 }
166 label.heading > span.no {
167   background-color: inherit;
168   border: none;
169 }
170 .tab > .date      { width: 30%; }
171 .tab > .therapist { width: 40%; }
172 .tab > .signature { width: 10%; }
173 .tab > .signature > button { display: inline-block; margin: 0; }
174 fieldset.tab > button[type=submit] { width: 5%; text-align: center; margin-left: 5%;}
175
176 .signature > button[value=pos],
177 .signature > button[value=neg] {
178   margin-bottom: .25em;
179   border: 1px solid black;
180   height: 1.5em; width: 1.5em;
181   vertical-align: top;
182   background-color: #FFF;
183   color: #000;
184   white-space: nowrap;
185 }
186 .signature > input[type=checkbox] {display: none;}
187 .signature > button[value=neg]::before { padding: 0 1ex 0 .25ex; content: "\2713"; }
188 .signature > button[value=pos]::before { padding: 0 1ex 0 .25ex; content: "\00a0 \00a0 \00a0"; }
189
190 input.tab + label.tab > input.date,
191 input.tab + label.tab > input.therapist {
192   display: none;
193 }
194 input.tab:checked + label.tab > input.date,
195 input.tab:checked + label.tab > input.therapist {
196   display: inline;
197 }
198 input.tab:checked + label.tab > span.date,
199 input.tab:checked + label.tab > span.therapist {
200   display: none;
201 }
202
203
204 div.tab {
205   border: 2px solid #333;
206   border-top-width: 1px;
207   margin-top: -1px;
208   padding: .25em .5ex;
209 }
210 div.tab > fieldset.note {
211   border: none;
212   margin: 0; padding: 0;
213 }
214 div.tab > fieldset.note > textarea {
215   display: block;
216   width: 95%; height: 8em;
217   margin: -8em 0 .5em 1.25em;
218   font: normal 1em sans-serif;
219 }
220 div.tab > fieldset.note > input.color + label { margin: 0; display: block; }
221 div.tab > fieldset.note > input.color[value="c000"]:checked ~ textarea { background-color: #AAA; }
222 div.tab > fieldset.note > input.color[value="c001"]:checked ~ textarea { background-color: #88F; }
223 div.tab > fieldset.note > input.color[value="c010"]:checked ~ textarea { background-color: #8F8; }
224 div.tab > fieldset.note > input.color[value="c011"]:checked ~ textarea { background-color: #8FF; }
225 div.tab > fieldset.note > input.color[value="c100"]:checked ~ textarea { background-color: #F88; }
226 div.tab > fieldset.note > input.color[value="c101"]:checked ~ textarea { background-color: #F8F; }
227 div.tab > fieldset.note > input.color[value="c110"]:checked ~ textarea { background-color: #FF8; }
228 div.tab > fieldset.note > input.color[value="c111"]:checked ~ textarea { background-color: #FFF; }
229
230 div.tab > button.delete {float: right; display: inline-block;}
231 EOF
232
233 # vi:set filetype=css: