stubs for 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 }
10
11 input.tab { display: none; }
12 input.tab + label.tab { display: block; }
13 input.tab + label.tab::before { content: '\25b8 \00a0'; float: left;}
14 input.tab:checked + label.tab::before { content: '\25be \00a0'; }
15 input.tab + label.tab + div.tab { display: none; }
16 input.tab:checked + label.tab + div.tab { display: block; }
17
18 input.color { display: none }
19 input.color + label{
20   display: inline-block;
21   width: 1em; height: 1em;
22   border: 1px solid black;
23 }
24 input.color:checked + label{ border-width: 3px;}
25 input.color[value="c000"] + label { background-color: #888;}
26 input.color[value="c001"] + label { background-color: #00F;}
27 input.color[value="c010"] + label { background-color: #0F0;}
28 input.color[value="c011"] + label { background-color: #0FF;}
29 input.color[value="c100"] + label { background-color: #F00;}
30 input.color[value="c101"] + label { background-color: #F0F;}
31 input.color[value="c110"] + label { background-color: #FF0;}
32 input.color[value="c111"] + label { background-color: #FFF;}
33
34 h1, label.tab, div.tab,
35 div.patient, div.prescription {
36   display: block;
37   width: 96%;
38   margin: 0 2%;
39 }
40 fieldset.color {
41   margin: .5em 2% 0 2%;
42   border: none;
43   padding: 0;
44 }
45 img.dotmark {
46   max-width: 96%;
47   margin: .125em 2%; padding: 0;
48   text-align: left;
49   border: 1px dotted black;
50 }
51 img.dotmark.ov {
52   position: absolute;
53   bottom: 5px; right: 0%;
54   z-index: 1;
55 }
56 @media(min-width: 800px){
57   h1, label.tab, div.tab,
58   div.patient, div.prescription {
59     width: 38%;
60     margin-right: 0;
61   }
62   fieldset.color{
63     position: fixed;
64     max-width: 56%;
65     right: 0;
66     top: 0em;
67   }
68   img.dotmark {
69     position: fixed;
70     max-width: 56%;
71     max-height: 480px;
72     right: 0;
73     top: 2em;
74   }
75   img.dotmark.ov {
76     position: fixed;
77     bottom: auto;
78   }
79 }
80
81 h1 {display: none;}
82
83 div.patient, div.prescription { margin-top: 1em; }
84 div.prescription {
85   border: 1px solid black;
86   background-color: #EEE;
87   padding: .125em 1.25ex .5em 1.25ex;
88 }
89 div > h2 { margin: 0; border-bottom: 1px solid black; }
90 div > a:first-of-type {
91   display: block;
92   margin: .125em 0 .5em 0;
93   text-decoration: none;
94 }
95
96 label.tab {
97   font-size: 1.25em;
98   font-weight: bold;
99   padding: .125em 1ex .25em 1ex;
100   color: #FFF;
101   background-color: #333;
102   margin-top: .125em;
103   text-align: right;
104 }
105 label.heading {
106   background-color: #FFF;
107   margin-top: 1em;
108   border: 2px solid black;
109   border-bottom-width: 1px;
110   color: black;
111 }
112 label.heading > span {
113   text-decoration: underline;
114 }
115
116 label > span {
117   display: inline-block;
118   text-align: right;
119 }
120 label > span.no {
121   width:  10%; float: left;
122   border: solid 1px #FFF;
123   background-color: #555;
124   border-radius: 2ex;
125   padding: 0;
126   text-align: center;
127 }
128 label.heading > span.no {
129   background-color: inherit;
130   border: none;
131 }
132 label > span.date      { width: 30%; }
133 label > span.therapist { width: 40%; }
134 label > span.signature { width: 10%; }
135 label > span.signature > button { display: inline-block; margin: 0; }
136
137 button[value=pos], button[value=neg] {
138   display: block;
139   margin-bottom: .25em;
140   border: 1px solid black;
141   height: 1.5em; width: 1.5em;
142   vertical-align: top;
143   background-color: #FFF;
144   color: #000;
145   white-space: nowrap;
146 }
147 button[value=pos]::before { padding: 0 1ex 0 .25ex; content: "\2713"; }
148 button[value=neg]::before { padding: 0 1ex 0 .25ex; content: "\00a0 \00a0 \00a0"; }
149
150 div.tab {
151   border: 2px solid #333;
152   border-top-width: 1px;
153   margin-top: -1px;
154   padding: .25em .5ex;
155 }
156 div.tab > fieldset.note {
157   border: none;
158   margin: 0; padding: 0;
159 }
160 div.tab > fieldset.note > textarea {
161   display: block;
162   width: 95%; height: 8em;
163   margin: -8em 0 .5em 1.25em;
164   font: normal 1em sans-serif;
165 }
166 div.tab > fieldset.note > input.color + label { margin: 0; display: block; }
167 div.tab > fieldset.note > input.color[value="c000"]:checked ~ textarea { background-color: #AAA; }
168 div.tab > fieldset.note > input.color[value="c001"]:checked ~ textarea { background-color: #88F; }
169 div.tab > fieldset.note > input.color[value="c010"]:checked ~ textarea { background-color: #8F8; }
170 div.tab > fieldset.note > input.color[value="c011"]:checked ~ textarea { background-color: #8FF; }
171 div.tab > fieldset.note > input.color[value="c100"]:checked ~ textarea { background-color: #F88; }
172 div.tab > fieldset.note > input.color[value="c101"]:checked ~ textarea { background-color: #F8F; }
173 div.tab > fieldset.note > input.color[value="c110"]:checked ~ textarea { background-color: #FF8; }
174 div.tab > fieldset.note > input.color[value="c111"]:checked ~ textarea { background-color: #FFF; }
175
176 EOF
177
178 # vi:set filetype=css: