X-Git-Url: https://git.plutz.net/?p=confetti;a=blobdiff_plain;f=style.css;h=04b133675f3483ce0967b84ebfe04e1f8e721ba4;hp=e02a695bb0cab9dfdea2c36cc2e00b31dc830320;hb=HEAD;hpb=1227cb42309bc7edd296e8fea288f68968b1e003 diff --git a/style.css b/style.css index e02a695..c00829e 100644 --- a/style.css +++ b/style.css @@ -1,90 +1,6 @@ -* { - position: relative; - box-sizing: border-box; - max-width: 100%; - font-family: sans-serif; - font-weight: normal; - font-size: initial; - font-style: normal; - text-decoration: none; - line-height: 1.5em; - color: inherit; background: transparent; - padding: 0; margin: 0; - border: none; -} - -body { - color: #000; background-color: #FFF; -} - -/* ======= GENERIC HTML STYLES =======*/ - -p { margin-bottom: 1em; } - -a { - text-decoration: underline; - font-style: italic; - color: #068; -} - -i, em { font-style: italic; } -b, strong { font-weight: bolder; } -ul, ol { margin-left: 1.125em; } -table th { font-weight: bold; } - -h1, h2, h3 { - font-weight: bold; - margin-top: 1em; - margin-bottom: .5em; -} - h1:first-child, h2:first-child, h3:first-child, p + h1, p + h2, p + h3 { - margin-top: 0; -} - -h4, h5, h6, form legend { - font-weight: bolder; - margin-bottom: .25em; -} - -h1 { font-size: 1.5em; } -h2 { font-size: 1.125em; } - -select, input, button, textarea, -.control a { - display: inline-block; - background-color: #FFF; - border: 1pt solid; - padding: .25em .75em; - vertical-align: text-bottom; -} -.control a { - color: inherit; - font-style: normal; - text-decoration: none; -} - -select { padding: .375em 0; } - -input[type=radio], input[type=checkbox] { - vertical-align: baseline; -} -input[type=number] { text-align: right; padding-right: 0; } - -button, input[type=button], -.control a { - box-shadow: .125em .125em .25em; - cursor: pointer; -} -input[type=radio], input[type=checkbox], -input[type=radio] + label, input[type=checkbox] + label { - cursor: pointer; -} - -label { margin-right: .75em; } -input + label { - margin-left: .375em; + margin-top: 3pt; } /* ====== COMMON ELEMENTS ======*/ @@ -109,8 +25,9 @@ body > .menu a { padding: .5em 3em; box-shadow: inset 0 0 .5em #000; } -body.cards > .menu a[href="/cards/"], -body.courses > .menu a[href="/courses/"] { +body.ledgers > .menu a[href$="/ledgers/"], +body.courses > .menu a[href$="/courses/"], +body.cards > .menu a[href$="/cards/"] { color: #000; background-color: #FFF; box-shadow: none; @@ -118,46 +35,22 @@ body.courses > .menu a[href="/courses/"] { /* =========== FILTER AND SEARCH Headers ========= */ -form.categories, +form.upload, form.categories, form.search, form.sort, form.filter, form.newcard, form.newcourses { - margin-top: 1em; padding: 0 1em; + margin-top: 1em; padding: .125em 1em 0 1em; z-index: 1; } form.filter > h1 { display: none; } form.filter fieldset { margin-top: .5em; } form.filter fieldset.item + fieldset.item legend { display: none; } -form.filter fieldset.item input[type=radio] { display: none; } -form.filter fieldset.item input[type=radio] + label { - display: table-cell; - padding: .5em 1em; - background-color: #EEE; - border-style: solid; - border-width: .5pt .25pt 0 .25pt; - white-space: normal; -} -form.filter fieldset.item input[type=radio] + label:first-of-type { - border-left: 1pt solid; -} -form.filter fieldset.item input[type=radio]:checked + label { - position: relative; - background-color: #FFF; - box-shadow: .125em -.125em .125em #888; - z-index: 1; -} -form.filter fieldset.item input[type=text], -form.filter fieldset.item fieldset.categories { - position: relative; - display: block; - width: 100%; - margin-top: -1pt; - padding: .25em .75em; - border: 1pt solid; - box-shadow: .125em .125em .25em #888; -} -form.filter fieldset.item fieldset.categories { display: none; } -form.filter fieldset.item input[value=CATEGORIES]:checked + label + input[type=text] { display: none; } -form.filter fieldset.item input[value=CATEGORIES]:checked + label + input[type=text] + fieldset.categories { display: block; } + +form.filter fieldset.item input[value=course] ~ input[type=text], +form.filter fieldset.item input[value=CATEGORIES] ~ input[type=text] { display: block; } +form.filter fieldset.item input[value=course]:checked ~ input[type=text], +form.filter fieldset.item input[value=CATEGORIES]:checked ~ input[type=text] { display: none; } +form.filter fieldset.item input[value=course]:checked ~ fieldset.courses, +form.filter fieldset.item input[value=CATEGORIES]:checked ~ fieldset.categories { display: block; } form.filter fieldset.order legend { float: left; margin-right: 1em; @@ -169,11 +62,20 @@ form.filter button[type=submit] { margin-top: .5em; margin-bottom: .5em; } +form.filter button[value=export_csv] { margin-left: 1em; } + body.courses form .order { display: inline-block; margin-right: 2em;} +body.courses form.search.sort fieldset { margin-top: .5em; } body.cards form.newcard { display: flex; } body.cards form.newcard input[name=seed] { flex: 1; } +form.upload label { + display: block; + font-weight: bold; + margin-top: .5em; +} + /* ============ LIST ITEMS, Generic ============= */ @@ -354,6 +256,23 @@ form .control .item { form .control .item.delete { bottom: .125em; right: .25em; } } + +/* ======= LIST ITEMS, Cards ======= */ + +form.card .attendance div.attendance, +form.card .attendance div.categories { + max-height: 10em; + overflow-y: auto; +} +form.card .attendance label { + display: inline-block; + width: calc(100% - 2em); + vertical-align: top; + margin-bottom: 0; +} +form.card .attendance input { margin-top: .375em; } + + /* ======= LIST ITEMS, Courses ======= */ form.course .dtstart input[name=DTS_YEAR], @@ -448,3 +367,167 @@ body.categories form.namelist ul.namelist > li h2 { body.categories form.namelist ul.namelist > li ul li { display: inline-block; } + + +/* ======== Ledgers Page ======== */ + +form.ibanassign, +form.ledgers { + padding: .125em 1em 0 1em; +} + +.ibanassign fieldset.iban.sure { background-color: #DFD; } +.ibanassign fieldset.iban.guess { background-color: #FFD; } +.ibanassign fieldset.iban.unknown { background-color: #FDD; } + +.ibanassign fieldset.iban { + padding: 0 .75em; + margin-top: -.5em; + box-shadow: .25em .25em .25em #AAA; +} +.ibanassign fieldset.iban legend { + top: .75em; +} +.ibanassign fieldset.iban p.principal { + font-size: .875em; +} +.ibanassign fieldset.iban p.date, +.ibanassign fieldset.iban p.amount { + font-size: .875em; + display: inline-block; + vertical-align: top; + margin-right: .75em; + margin-bottom: 0; +} +.ibanassign fieldset.iban p.amount { + font-weight: bold; +} + +.ibanassign fieldset.iban.sure .card { margin-right: 1em; } + +.ibanassign fieldset.iban input[name^="fn_"].disabled { + pointer-events: none; +} +.ibanassign fieldset.iban input[name^="check_"], +.ibanassign fieldset.iban input[name^="check_"] + input, +.ibanassign fieldset.iban input[name^="check_"] + input + label { + display: none; +} +.ibanassign fieldset.iban input[name^="check_"]:checked + input, +.ibanassign fieldset.iban input[name^="check_"]:checked + input + label.del, +.ibanassign fieldset.iban input[name^="check_"] + input + label.del + input + input + label.add, +.ibanassign fieldset.iban input[name^="check_"]:checked + input + label + input + input + label.add { + display: inline; +} +.ibanassign fieldset.iban input[name^="check_"]:checked + input + label.add, +.ibanassign fieldset.iban input[name^="check_"] + input + label.del + input:checked + input + label.add, +.ibanassign fieldset.iban input[name^="check_"]:checked + input + label + input:checked + input + label.add { + display: none; +} + +.ibanassign fieldset.iban input[name^="check_"] + input + label { + vertical-align: bottom; + line-height: 2.5em; + padding: .375em .625em; + border: .5pt solid; +} +.ibanassign fieldset.iban input[name^="check_"] + input + label.add { + background-color: #DFD; + border-radius: 2pt; +} +.ibanassign fieldset.iban input[name^="check_"] + input + label.del { + margin: 0 .5em 0 -.25em; + background-color: #FDD; + border-radius: 0 2pt 2pt 0; +} + +.ibanassign input[name^="use_"] { + display: none; +} +.ibanassign input[name^="use_"]:checked + fieldset.iban.guess { background-color: #EFD; } +.ibanassign input[name^="use_"]:checked + fieldset.iban.unknown { background-color: #FED; } +.ibanassign input[name^="use_"]:checked + fieldset.iban input { + background-color: #DFD; + pointer-events: none; + border-color: #888; +} +.ibanassign input[name^="use_"]:checked + fieldset.iban label.del, +.ibanassign input[name^="use_"]:checked + fieldset.iban label.add { + display: none !important; +} + +.ibanassign fieldset.iban label[for^="use_"] { + display: block; + float: right; + padding: .25em .5em; + background-color: #DDF; + border: 1pt solid; +} + +.ibanassign input[name^="use_"] + fieldset.iban label[for^="use_"] { display: block; } +.ibanassign input[name^="use_"] + fieldset.iban label[for^="use_"] + label[for^="use_"] { display: none; } +.ibanassign input[name^="use_"]:checked + fieldset.iban label[for^="use_"] { display: none; } +.ibanassign input[name^="use_"]:checked + fieldset.iban label[for^="use_"] + label[for^="use_"] { display: block; } + +.ibanassign > button { + position: sticky; + bottom: 0; + margin: auto; + display: block; +} + +body.ledgers .transactions { + width: 98%; + width: calc(100% - 2em); + margin: auto; +} +body.ledgers .transactions thead { + position: sticky; + top: 0; + z-index: 1; +} +body.ledgers .transactions th { + text-align: left; + background-color: #FFF; +} +body.ledgers .transactions td { + vertical-align: top; + font-family: monospace; + font-size: 12pt; +} + +body.ledgers .transactions td:nth-child(2n) { + background-color: #DDD; +} +body.ledgers .transactions td:nth-child(2n + 1) { + background-color: #EEE; +} + +body.ledgers .transactions .date { + min-width: 8em; +} +body.ledgers .transactions .orig span { + display: block; +} +body.ledgers .transactions .amount, +body.ledgers .transactions .balance { + vertical-align: bottom; + min-width: 6em; + text-align: right; +} + +body.ledgers .transactions .reference textarea { + width: 100%; +} +body.ledgers .transactions .orig input[type=date], +body.ledgers .transactions .date input[type=date], +body.ledgers .transactions .amount input[type=number] { + display: block; + width: 100%; +} + +body.ledgers .transactions .orig input:not(:checked) + label + input[type=date] { + background-color: #DDD; + border-color: #888; + pointer-events: none; +}