1 h1:first-child, h2:first-child, h3:first-child,
2 p + h1, p + h2, p + h3 {
6 /* ====== COMMON ELEMENTS ======*/
11 margin: 0; -padding: 0 .5em;
14 background-color: #444;
15 box-shadow: inset 0 -.25em .25em #000;
21 display: inline-block;
26 box-shadow: inset 0 0 .5em #000;
28 body.ledgers > .menu a[href$="/ledgers/"],
29 body.courses > .menu a[href$="/courses/"],
30 body.cards > .menu a[href$="/cards/"] {
32 background-color: #FFF;
36 /* =========== FILTER AND SEARCH Headers ========= */
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;
43 form.filter > h1 { display: none; }
45 form.filter fieldset { margin-top: .5em; }
46 form.filter fieldset.item + fieldset.item legend { display: none; }
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; }
55 form.filter fieldset.order legend {
56 float: left; margin-right: 1em;
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;
65 form.filter button[value=export_csv] { margin-left: 1em; }
67 body.courses form .order { display: inline-block; margin-right: 2em;}
68 body.courses form.search.sort fieldset { margin-top: .5em; }
70 body.cards form.newcard { display: flex; }
71 body.cards form.newcard input[name=seed] { flex: 1; }
80 /* ============ LIST ITEMS, Generic ============= */
86 width: 98%; width: calc(100% - 2em);
87 margin-left: auto; margin-right: auto;
89 box-shadow: .125em .125em .25em;
93 /* HACK: put anchor point 10em above card and highlight target element */
94 div:target { box-shadow: none; z-index: 0; }
107 top: 10em; bottom: 0;
108 box-shadow: .125em .125em .25em;
109 animation: highlight 4s;
112 @keyframes highlight { from { background-color: #FF0; } to { background-color: transparent; } }
115 div .section, form .section {
120 word-break: break-word;
123 div .section :last-child, form .section :last-child {
127 div .section h2, form .section h2,
128 div .section h3, form .section h3 {
129 border-bottom: 1pt solid #EEE;
131 div .control, form .control {
132 background-color: #EEE;
137 @media(min-width: 60em) {
138 div .section, form .section {
140 width: calc(100% / 10);
142 div .section :last-child { margin-bottom: 0; }
143 div .control, form .control {
144 background-color: transparent;
146 div .section:nth-of-type(2n) {
147 background-color: #EEE;
150 @media(min-width: 80em) {
151 div .control, form .control {
153 width: calc(100% / 10);
155 div .control .item, form .control .item {
157 margin-bottom: .25em;
161 div .section .item, form .section .item,
162 form .section.attendance > label {
167 div .section .item.NOTE {
168 white-space: pre-wrap;
171 form .section .item {
172 margin-bottom: .25em;
175 form .section button[value^=addfield] {
177 margin-top: .5em; padding: 0 .375em;
180 /* HACK: "responsive" Delete Button above each field */
181 form input.delete { display: none; }
182 form input.delete + label {
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;
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 {
204 /* ====== right hand Control Buttons on list items ====== */
211 form .control .item {
212 display: inline-block;
213 margin-bottom: .25em;
214 vertical-align: text-bottom;
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; }
223 /* HACK: Delete Checkbox before delete Button */
224 form .control .item.delete {
226 bottom: .375em; left: .25em; width: auto;
227 padding-bottom: calc(2.25em + 2pt);
230 form .control .item.delete input + label + button {
233 bottom: 0; width: 100%;
235 background-color: #FEE;
238 form .control .item.delete:after {
239 content: attr(label);
242 bottom: 0; width: 100%;
247 box-shadow: .125em .125em .25em;
249 form .control .item.delete input:checked + label + button { display: block; }
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; }
260 /* ======= LIST ITEMS, Cards ======= */
262 form.card .attendance div.attendance,
263 form.card .attendance div.categories {
267 form.card .attendance label {
268 display: inline-block;
269 width: calc(100% - 2em);
273 form.card .attendance input { margin-top: .375em; }
276 /* ======= LIST ITEMS, Courses ======= */
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 {
287 margin: 0; padding: 0 3pt;
289 form.course .dtstart table input[type=radio]:checked + label {
292 box-shadow: .125em .125em .25em;
295 form.course .dtstart label.DTSTIME {
296 display: inline-block;
299 width: calc(100% - 7.875em);
301 form.course .dtstart input[name=DTS_HOUR],
302 form.course .dtstart input[name=DTS_MINUTE] {
303 vertical-align: baseline;
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;
321 form.course .attendance div.attendance {
325 form.course .attendance label {
326 display: inline-block;
327 max-width: calc(100% - 2em);
331 form.course .attendance input { margin-top: .375em; }
333 /* ======== Categories Page ======== */
335 body.categories form ul { list-style: none; margin: 0; }
338 display: inline-block;
339 background-color: #EEE;
340 margin-right: .5em; margin-bottom: .5em;
342 box-shadow: .125em .125em .25em;
344 form.categories li button[name=remove] {
347 background-color: #FBB;
351 form.categories li button[name=remove]:before {
356 form.categories li:last-child { padding-left: 0 }
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;
363 body.categories form.namelist ul.namelist > li h2 {
367 body.categories form.namelist ul.namelist > li ul li {
368 display: inline-block;
372 padding: .125em 1em 0 1em;
375 .ledgers fieldset.iban.sure { background-color: #DFD; }
376 .ledgers fieldset.iban.guess { background-color: #FFD; }
377 .ledgers fieldset.iban.unknown { background-color: #FDD; }
379 .ledgers fieldset.iban {
382 box-shadow: .25em .25em .25em #AAA;
384 .ledgers fieldset.iban legend {
387 .ledgers fieldset.iban p.principal,
388 .ledgers fieldset.iban p.amount {