302a52f9aad3921e21271aa1a340ac3f5f533b40
[confetti] / style.css
1 * {
2   box-sizing: border-box;
3   font-family: sans-serif;
4   font-weight: normal;
5   font-size: initial;
6   font-style: normal;
7   text-decoration: none;
8   line-height: 1.5em;
9   color: inherit; background: transparent;
10   padding: 0; margin: 0;
11   border: none;
12 }
13
14 body {
15   color: #000; background-color: #FFF;
16 }
17
18 p { margin-bottom: 1em; }
19
20 a {
21   text-decoration: underline;
22   font-style: italic;
23   color: #068;
24 }
25
26 i, em { font-style: italic; }
27 b, strong { font-weight: bolder; }
28 ul, ol { margin-left: 1.125em; }
29 table th { font-weight: bold; }
30
31 h1, h2, h3 {
32   font-weight: bold;
33   margin-top: 1em;
34   margin-bottom: .5em;
35 }
36
37 h1:first-child, h2:first-child, h3:first-child,
38 p + h1, p + h2, p + h3 {
39   margin-top: 0;
40 }
41
42 h4, h5, h6, form legend {
43   font-weight: bolder;
44   margin-bottom: .25em;
45 }
46
47 h1 { font-size: 1.5em; }
48 h2 { font-size: 1.125em; }
49
50 select, input, button, textarea,
51 .control a {
52   display: inline-block;
53   background-color: #FFF;
54   border: 1pt solid;
55   padding: .25em .75em;
56   vertical-align: text-bottom;
57 }
58 .control a {
59   color: inherit;
60   font-style: normal;
61   text-decoration: none;
62 }
63
64 select { padding: .375em 0; }
65
66 input[type=radio], input[type=checkbox] {
67   vertical-align: baseline;
68 }
69 input[type=number] { text-align: right; padding-right: 0; }
70
71 button, input[type=button],
72 .control a {
73   box-shadow: .125em .125em .25em;
74 }
75
76 label { margin-right: .75em; }
77 input + label {
78   margin-left: .375em;
79 }
80
81 /* =========== FILTER AND SEARCH Headers ========= */
82
83 form.search, form.sort, form.filter, form.newcard, form.newcourses {
84   margin-top: 1em; padding: 0 1em;
85   z-index: 1;
86 }
87 form.filter > h1 { display: none; }
88
89 form.filter fieldset { margin-top: .5em; }
90 form.filter fieldset.item + fieldset.item legend { display: none; }
91 form.filter fieldset.item input[type=radio] { display: none; }
92 form.filter fieldset.item input[type=radio] + label {
93   display: table-cell;
94   padding: .5em 1em;
95   background-color: #EEE;
96   border-style: solid;
97   border-width: .5pt .25pt 0 .25pt;
98 }
99 form.filter fieldset.item input[type=radio] + label:first-of-type {
100   border-left: 1pt solid;
101 }
102 form.filter fieldset.item input[type=radio]:checked + label {
103   position: relative;
104   background-color: #FFF;
105   box-shadow: .125em -.125em .125em #888;
106   z-index: 1;
107 }
108 form.filter fieldset.item input[type=text],
109 form.filter fieldset.item fieldset.categories {
110   position: relative;
111   display: block;
112   width: 100%;
113   margin-top: -1pt;
114   padding: .25em .75em;
115   border: 1pt solid;
116   box-shadow: .125em .125em .25em #888;
117 }
118 form.filter fieldset.item fieldset.categories { display: none; }
119 form.filter fieldset.item input[value=CATEGORIES]:checked + label + input[type=text] { display: none; }
120 form.filter fieldset.item input[value=CATEGORIES]:checked + label + input[type=text] + fieldset.categories { display: block; }
121
122 form.filter fieldset.order legend {
123   float: left; margin-right: 1em;
124 }
125
126 form.filter fieldset label,
127 form.filter fieldset a { white-space: pre;}
128 form.filter button[type=submit] {
129   margin-top: .5em; margin-bottom: .5em;
130 }
131
132 body.courses form .order { display: inline-block; margin-right: 2em;}
133
134
135 /* ============ LIST ITEMS, Generic ============= */
136
137 body > form,
138 div.card,
139 div.course {
140   position: relative;
141   width: 98%; width: calc(100% - 2em);
142   margin-left: auto; margin-right: auto;
143   margin-bottom: 1em;
144   box-shadow: .125em .125em .25em;
145   z-index: 1;
146 }
147
148 /* HACK: put anchor point 10em above card and highlight target element */
149     div:target { box-shadow: none; z-index: 0; }
150     div:target:before {
151       content: '';
152       display: block;
153       margin-top: -10em;
154       height: 10em;
155       visibility: hidden;
156     }
157     div:target:after {
158       content: '';
159       display: block;
160       position: absolute;
161       left: 0; right: 0;
162       top: 10em; bottom: 0;
163       box-shadow: .125em .125em .25em;
164       animation: highlight 4s;
165       z-index: -1;
166     }
167     @keyframes highlight { from { background-color: #FF0; } to { background-color: transparent; } }
168 /**/
169
170 div .section, form .section {
171   display: block;
172   vertical-align: top;
173   padding: 0 1em;
174   overflow: hidden;
175   word-break: break-word;
176 }
177
178 div .section :last-child, form .section :last-child {
179   margin-bottom: 1em;
180 }
181
182 div .section h2, form .section h2,
183 div .section h3, form .section h3 { 
184   border-bottom: 1pt solid #EEE;
185 }
186 div .control, form .control {
187   background-color: #EEE;
188   padding: .25em;
189   text-align: right;
190 }
191
192 @media(min-width: 60em) {
193   div .section, form .section {
194     display: table-cell;
195     width: calc(100% / 10);
196   }
197   div .section :last-child { margin-bottom: 0; }
198   div .control, form .control {
199     background-color: transparent;
200   }
201   div .section:nth-of-type(2n) {
202     background-color: #EEE;
203   }
204 }
205 @media(min-width: 80em) {
206   div .control, form .control {
207     display: table-cell;
208     width: calc(100% / 10);
209   }
210   div .control .item, form .control .item {
211     display: block;
212     margin-bottom: .25em;
213   }
214 }
215
216 div .section .item, form .section .item,
217 form .section.attendance > label {
218   display: block;
219   width: 100%;
220 }
221
222 div .section .item.NOTE {
223   white-space: pre;
224 }
225
226 form .section .item {
227   margin-bottom: .25em;
228 }
229
230 form .section button[value^=addfield] {
231   font-size: .75em;
232   margin-top: .5em; padding: 0 .375em;
233 }
234
235 /* HACK: "responsive" Delete Button above each field */
236     form input.delete { display: none; }
237     form input.delete + label {
238       float: right;
239       font-size: .75em;
240       line-height: 1;
241       max-width: 1.75em; height: 1.125em; overflow: hidden;
242       color: #FBB; background-color: #444;
243       margin: 0; padding: .125em .5em 0 .5em;
244       border-radius: 4pt 4pt 0 0;
245       transition: max-width .3s;
246     }
247     form input.delete + label:before  { content: '\274c '; margin-right: .5em; }
248     form input.delete + label:hover   { max-width: 10em; }
249     -form input.delete + label:hover:before { content: ''; }
250     -form input.delete + label:hover:after  { content: ' \274c'; }
251     form input.delete:checked + label,
252     form input.delete:checked + label + * {
253       display: none;
254     }
255 /**/
256
257
258 /* ====== right hand Control Buttons on list items ====== */
259
260 form .control {
261   position: relative;
262   padding-left: 11em;
263   padding-top: 1.5em;
264 }
265 form .control .item {
266   display: inline-block;
267   margin-bottom: .25em;
268   vertical-align: text-bottom;
269 }
270
271 /* Combined Select/Submit Box */
272     form .control .item.newfield { box-shadow: .125em .125em .25em; }
273     form .control .item.newfield select { margin-right: -1pt; }
274     form .control .item.newfield button { box-shadow: none; }
275 /**/
276
277 /* HACK: Delete Checkbox before delete Button */
278     form .control .item.delete {
279       position: absolute;
280       bottom: .375em; left: .25em; width: auto;
281       padding-bottom: calc(2.25em + 2pt);
282     }
283     
284     form .control .item.delete input + label + button {
285       display: none;
286       position: absolute;
287       bottom: 0; width: 100%;
288       color: #800;
289       background-color: #FEE;
290       z-index: 1;
291     }
292     form .control .item.delete:after {
293       content: attr(label);
294       display: block;
295       position: absolute;
296       bottom: 0; width: 100%;
297       text-align: center;
298       color: #BAA;
299       padding: .25em 0;
300       border: 1pt solid;
301       box-shadow: .125em .125em .25em;
302     }
303     form .control .item.delete input:checked + label + button { display: block; }
304 /**/
305
306 @media(min-width: 80em) {
307   form .control { padding: .25em; min-height: 16em; }
308   form .control .item { width: 100%; }
309   form .control .item.newfield select { width: calc(100% - 2.5em); }
310   form .control .item.delete { bottom: .125em; right: .25em; }
311 }
312
313 /* ======= LIST ITEMS, Courses ======= */
314
315 form.course .dtstart input[name=DTS_YEAR],
316 form.course .dtstart select[name=DTS_MONTH] { width: calc(50% - 1.25em); }
317 form.course .dtstart input[name=DTS_YEAR] { margin-right: -.375em; }
318 form.course .dtstart table { width: 100%; margin: 1em 0; }
319 form.course .dtstart table td { text-align: right; -border: .5pt solid; }
320 form.course .dtstart table input[type=radio] { display: none; }
321 form.course .dtstart table input[type=radio] + label {
322   display: block;
323   width: 100%;
324   margin: 0; padding: 0 3pt;
325 }
326 form.course .dtstart table input[type=radio]:checked + label {
327   font-weight: bold;
328   padding: 0 2pt;
329   box-shadow: .125em .125em .25em;
330 }
331
332 form.course .dtstart label.DTSTIME {
333   display: inline-block;
334   font-weight: bold;
335   margin: 0;
336   width: calc(100% - 7.875em);
337 }
338 form.course .dtstart input[name=DTS_HOUR],
339 form.course .dtstart input[name=DTS_MINUTE] {
340   vertical-align: baseline;
341   width: 3.5em;
342   margin-bottom: 0;
343 }
344
345 form.course .recur .item { white-space: nowrap; }
346 form.course .recur .item > * { margin-bottom: 0; vertical-align: baseline; }
347 form.course .recur input[name=RRULE_INTERVAL],
348 form.course .recur input[name=RRULE_COUNT],
349 form.course .recur input[name=RRULE_UMONTH],
350 form.course .recur input[name=RRULE_UDAY] { width: 3.5em; }
351 form.course .recur input[name=RRULE_UYEAR] { width: 4.5em; }
352 form.course .recur input[name=RRULE_UYEAR],
353 form.course .recur input[name=RRULE_UMONTH],
354 form.course .recur input[name=RRULE_UDAY] {
355   margin-right: -.375em;
356 }
357
358 form.course .attendance div.attendance {
359   max-height: 16em;
360   overflow-y: scroll;
361 }
362 form.course .attendance label {
363   display: inline-block;
364   max-width: calc(100% - 2em);
365   vertical-align: top;
366   margin-bottom: 0;
367 }
368 form.course .attendance input { margin-top: .375em; }