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