From 28e03ce8c633c21b04839dcc4d2438d81b48b1c0 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Paul=20H=C3=A4nsch?= Date: Thu, 21 Jan 2021 00:41:45 +0100 Subject: [PATCH] introduce global stylesheet --- cards/index.cgi | 2 +- courses/index.cgi | 2 +- style.css | 369 ++++++++++++++++++++++++- style_new.css | 364 ------------------------- style_old.css | 670 ---------------------------------------------- 5 files changed, 370 insertions(+), 1037 deletions(-) mode change 120000 => 100644 style.css delete mode 100644 style_new.css delete mode 100644 style_old.css diff --git a/cards/index.cgi b/cards/index.cgi index 90be142..1f58ab0 100755 --- a/cards/index.cgi +++ b/cards/index.cgi @@ -28,4 +28,4 @@ edit="${edit##*/}" [ "$edit" ] && edit_card "$edit" list_cards -} | yield_page cards /cards/cards.css +} | yield_page cards #/cards/cards.css diff --git a/courses/index.cgi b/courses/index.cgi index e98d7b6..21f0723 100755 --- a/courses/index.cgi +++ b/courses/index.cgi @@ -29,4 +29,4 @@ edit="${edit##*/}" printf '[div .courselist\n' list_courses printf ']' -} | yield_page courses /courses/courses.css +} | yield_page courses #/courses/courses.css diff --git a/style.css b/style.css deleted file mode 120000 index a7e9ebe..0000000 --- a/style.css +++ /dev/null @@ -1 +0,0 @@ -style_new.css \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..302a52f --- /dev/null +++ b/style.css @@ -0,0 +1,368 @@ +* { + box-sizing: border-box; + 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; +} + +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; +} + +label { margin-right: .75em; } +input + label { + margin-left: .375em; +} + +/* =========== FILTER AND SEARCH Headers ========= */ + +form.search, form.sort, form.filter, form.newcard, form.newcourses { + margin-top: 1em; padding: 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; +} +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.order legend { + float: left; margin-right: 1em; +} + +form.filter fieldset label, +form.filter fieldset a { white-space: pre;} +form.filter button[type=submit] { + margin-top: .5em; margin-bottom: .5em; +} + +body.courses form .order { display: inline-block; margin-right: 2em;} + + +/* ============ LIST ITEMS, Generic ============= */ + +body > form, +div.card, +div.course { + position: relative; + width: 98%; width: calc(100% - 2em); + margin-left: auto; margin-right: auto; + margin-bottom: 1em; + box-shadow: .125em .125em .25em; + z-index: 1; +} + +/* HACK: put anchor point 10em above card and highlight target element */ + div:target { box-shadow: none; z-index: 0; } + div:target:before { + content: ''; + display: block; + margin-top: -10em; + height: 10em; + visibility: hidden; + } + div:target:after { + content: ''; + display: block; + position: absolute; + left: 0; right: 0; + top: 10em; bottom: 0; + box-shadow: .125em .125em .25em; + animation: highlight 4s; + z-index: -1; + } + @keyframes highlight { from { background-color: #FF0; } to { background-color: transparent; } } +/**/ + +div .section, form .section { + display: block; + vertical-align: top; + padding: 0 1em; + overflow: hidden; + word-break: break-word; +} + +div .section :last-child, form .section :last-child { + margin-bottom: 1em; +} + +div .section h2, form .section h2, +div .section h3, form .section h3 { + border-bottom: 1pt solid #EEE; +} +div .control, form .control { + background-color: #EEE; + padding: .25em; + text-align: right; +} + +@media(min-width: 60em) { + div .section, form .section { + display: table-cell; + width: calc(100% / 10); + } + div .section :last-child { margin-bottom: 0; } + div .control, form .control { + background-color: transparent; + } + div .section:nth-of-type(2n) { + background-color: #EEE; + } +} +@media(min-width: 80em) { + div .control, form .control { + display: table-cell; + width: calc(100% / 10); + } + div .control .item, form .control .item { + display: block; + margin-bottom: .25em; + } +} + +div .section .item, form .section .item, +form .section.attendance > label { + display: block; + width: 100%; +} + +div .section .item.NOTE { + white-space: pre; +} + +form .section .item { + margin-bottom: .25em; +} + +form .section button[value^=addfield] { + font-size: .75em; + margin-top: .5em; padding: 0 .375em; +} + +/* HACK: "responsive" Delete Button above each field */ + form input.delete { display: none; } + form input.delete + label { + float: right; + font-size: .75em; + line-height: 1; + max-width: 1.75em; height: 1.125em; overflow: hidden; + color: #FBB; background-color: #444; + margin: 0; padding: .125em .5em 0 .5em; + border-radius: 4pt 4pt 0 0; + transition: max-width .3s; + } + form input.delete + label:before { content: '\274c '; margin-right: .5em; } + form input.delete + label:hover { max-width: 10em; } + -form input.delete + label:hover:before { content: ''; } + -form input.delete + label:hover:after { content: ' \274c'; } + form input.delete:checked + label, + form input.delete:checked + label + * { + display: none; + } +/**/ + + +/* ====== right hand Control Buttons on list items ====== */ + +form .control { + position: relative; + padding-left: 11em; + padding-top: 1.5em; +} +form .control .item { + display: inline-block; + margin-bottom: .25em; + vertical-align: text-bottom; +} + +/* Combined Select/Submit Box */ + form .control .item.newfield { box-shadow: .125em .125em .25em; } + form .control .item.newfield select { margin-right: -1pt; } + form .control .item.newfield button { box-shadow: none; } +/**/ + +/* HACK: Delete Checkbox before delete Button */ + form .control .item.delete { + position: absolute; + bottom: .375em; left: .25em; width: auto; + padding-bottom: calc(2.25em + 2pt); + } + + form .control .item.delete input + label + button { + display: none; + position: absolute; + bottom: 0; width: 100%; + color: #800; + background-color: #FEE; + z-index: 1; + } + form .control .item.delete:after { + content: attr(label); + display: block; + position: absolute; + bottom: 0; width: 100%; + text-align: center; + color: #BAA; + padding: .25em 0; + border: 1pt solid; + box-shadow: .125em .125em .25em; + } + form .control .item.delete input:checked + label + button { display: block; } +/**/ + +@media(min-width: 80em) { + form .control { padding: .25em; min-height: 16em; } + form .control .item { width: 100%; } + form .control .item.newfield select { width: calc(100% - 2.5em); } + form .control .item.delete { bottom: .125em; right: .25em; } +} + +/* ======= LIST ITEMS, Courses ======= */ + +form.course .dtstart input[name=DTS_YEAR], +form.course .dtstart select[name=DTS_MONTH] { width: calc(50% - 1.25em); } +form.course .dtstart input[name=DTS_YEAR] { margin-right: -.375em; } +form.course .dtstart table { width: 100%; margin: 1em 0; } +form.course .dtstart table td { text-align: right; -border: .5pt solid; } +form.course .dtstart table input[type=radio] { display: none; } +form.course .dtstart table input[type=radio] + label { + display: block; + width: 100%; + margin: 0; padding: 0 3pt; +} +form.course .dtstart table input[type=radio]:checked + label { + font-weight: bold; + padding: 0 2pt; + box-shadow: .125em .125em .25em; +} + +form.course .dtstart label.DTSTIME { + display: inline-block; + font-weight: bold; + margin: 0; + width: calc(100% - 7.875em); +} +form.course .dtstart input[name=DTS_HOUR], +form.course .dtstart input[name=DTS_MINUTE] { + vertical-align: baseline; + width: 3.5em; + margin-bottom: 0; +} + +form.course .recur .item { white-space: nowrap; } +form.course .recur .item > * { margin-bottom: 0; vertical-align: baseline; } +form.course .recur input[name=RRULE_INTERVAL], +form.course .recur input[name=RRULE_COUNT], +form.course .recur input[name=RRULE_UMONTH], +form.course .recur input[name=RRULE_UDAY] { width: 3.5em; } +form.course .recur input[name=RRULE_UYEAR] { width: 4.5em; } +form.course .recur input[name=RRULE_UYEAR], +form.course .recur input[name=RRULE_UMONTH], +form.course .recur input[name=RRULE_UDAY] { + margin-right: -.375em; +} + +form.course .attendance div.attendance { + max-height: 16em; + overflow-y: scroll; +} +form.course .attendance label { + display: inline-block; + max-width: calc(100% - 2em); + vertical-align: top; + margin-bottom: 0; +} +form.course .attendance input { margin-top: .375em; } diff --git a/style_new.css b/style_new.css deleted file mode 100644 index f74df86..0000000 --- a/style_new.css +++ /dev/null @@ -1,364 +0,0 @@ -* { - box-sizing: border-box; - 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; -} - -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; -} - -label { margin-right: .75em; } -input + label { - margin-left: .375em; -} - -/* =========== FILTER AND SEARCH Headers ========= */ - -form.search, form.sort, form.filter, form.newcard, form.newcourses { - margin-top: 1em; padding: 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; -} -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.order legend { - float: left; margin-right: 1em; -} - -form.filter fieldset label, -form.filter fieldset a { white-space: pre;} -form.filter button[type=submit] { - margin-top: .5em; margin-bottom: .5em; -} - -body.courses form .order { display: inline-block; margin-right: 2em;} - - -/* ============ LIST ITEMS, Generic ============= */ - -body > form, -div.card, -div.course { - position: relative; - width: 98%; width: calc(100% - 2em); - margin-left: auto; margin-right: auto; - margin-bottom: 1em; - box-shadow: .125em .125em .25em; - z-index: 1; -} - -/* HACK: put anchor point 10em above card and highlight target element */ - div:target { box-shadow: none; z-index: 0; } - div:target:before { - content: ''; - display: block; - margin-top: -10em; - height: 10em; - visibility: hidden; - } - div:target:after { - content: ''; - display: block; - position: absolute; - left: 0; right: 0; - top: 10em; bottom: 0; - box-shadow: .125em .125em .25em; - animation: highlight 4s; - z-index: -1; - } - @keyframes highlight { from { background-color: #FF0; } to { background-color: transparent; } } -/**/ - -div .section, form .section { - display: block; - vertical-align: top; - padding: 0 1em; - overflow: hidden; - word-break: break-word; -} - -div .section :last-child, form .section :last-child { - margin-bottom: 1em; -} - -div .section h2, form .section h2, -div .section h3, form .section h3 { - border-bottom: 1pt solid #EEE; -} -div .control, form .control { - background-color: #EEE; - padding: .25em; - text-align: right; -} - -@media(min-width: 60em) { - div .section, form .section { - display: table-cell; - width: calc(100% / 10); - } - div .section :last-child { margin-bottom: 0; } - div .control, form .control { - background-color: transparent; - } - div .section:nth-of-type(2n) { - background-color: #EEE; - } -} -@media(min-width: 80em) { - div .control, form .control { - display: table-cell; - width: calc(100% / 10); - } - div .control .item, form .control .item { - display: block; - margin-bottom: .25em; - } -} - -div .section .item, form .section .item, -form .section.attendance > label { - display: block; - width: 100%; -} - -form .section .item { - margin-bottom: .25em; -} - -form .section button[value^=addfield] { - font-size: .75em; - margin-top: .5em; padding: 0 .375em; -} - -/* HACK: "responsive" Delete Button above each field */ - form input.delete { display: none; } - form input.delete + label { - float: right; - font-size: .75em; - line-height: 1; - max-width: 1.75em; height: 1.125em; overflow: hidden; - color: #FBB; background-color: #444; - margin: 0; padding: .125em .5em 0 .5em; - border-radius: 4pt 4pt 0 0; - transition: max-width .3s; - } - form input.delete + label:before { content: '\274c '; margin-right: .5em; } - form input.delete + label:hover { max-width: 10em; } - -form input.delete + label:hover:before { content: ''; } - -form input.delete + label:hover:after { content: ' \274c'; } - form input.delete:checked + label, - form input.delete:checked + label + * { - display: none; - } -/**/ - - -/* ====== right hand Control Buttons on list items ====== */ - -form .control { - position: relative; - padding-left: 11em; - padding-top: 1.5em; -} -form .control .item { - display: inline-block; - margin-bottom: .25em; - vertical-align: text-bottom; -} - -/* Combined Select/Submit Box */ - form .control .item.newfield { box-shadow: .125em .125em .25em; } - form .control .item.newfield select { margin-right: -1pt; } - form .control .item.newfield button { box-shadow: none; } -/**/ - -/* HACK: Delete Checkbox before delete Button */ - form .control .item.delete { - position: absolute; - bottom: .375em; left: .25em; width: auto; - padding-bottom: calc(2.25em + 2pt); - } - - form .control .item.delete input + label + button { - display: none; - position: absolute; - bottom: 0; width: 100%; - color: #800; - background-color: #FEE; - z-index: 1; - } - form .control .item.delete:after { - content: attr(label); - display: block; - position: absolute; - bottom: 0; width: 100%; - text-align: center; - color: #BAA; - padding: .25em 0; - border: 1pt solid; - box-shadow: .125em .125em .25em; - } - form .control .item.delete input:checked + label + button { display: block; } -/**/ - -@media(min-width: 80em) { - form .control { padding: .25em; min-height: 16em; } - form .control .item { width: 100%; } - form .control .item.newfield select { width: calc(100% - 2.5em); } - form .control .item.delete { bottom: .125em; right: .25em; } -} - -/* ======= LIST ITEMS, Courses ======= */ - -form.course .dtstart input[name=DTS_YEAR], -form.course .dtstart select[name=DTS_MONTH] { width: calc(50% - 1.25em); } -form.course .dtstart input[name=DTS_YEAR] { margin-right: -.375em; } -form.course .dtstart table { width: 100%; margin: 1em 0; } -form.course .dtstart table td { text-align: right; -border: .5pt solid; } -form.course .dtstart table input[type=radio] { display: none; } -form.course .dtstart table input[type=radio] + label { - display: block; - width: 100%; - margin: 0; padding: 0 3pt; -} -form.course .dtstart table input[type=radio]:checked + label { - font-weight: bold; - padding: 0 2pt; - box-shadow: .125em .125em .25em; -} - -form.course .dtstart label.DTSTIME { - display: inline-block; - font-weight: bold; - margin: 0; - width: calc(100% - 7.875em); -} -form.course .dtstart input[name=DTS_HOUR], -form.course .dtstart input[name=DTS_MINUTE] { - vertical-align: baseline; - width: 3.5em; - margin-bottom: 0; -} - -form.course .recur .item { white-space: nowrap; } -form.course .recur .item > * { margin-bottom: 0; vertical-align: baseline; } -form.course .recur input[name=RRULE_INTERVAL], -form.course .recur input[name=RRULE_COUNT], -form.course .recur input[name=RRULE_UMONTH], -form.course .recur input[name=RRULE_UDAY] { width: 3.5em; } -form.course .recur input[name=RRULE_UYEAR] { width: 4.5em; } -form.course .recur input[name=RRULE_UYEAR], -form.course .recur input[name=RRULE_UMONTH], -form.course .recur input[name=RRULE_UDAY] { - margin-right: -.375em; -} - -form.course .attendance div.attendance { - max-height: 16em; - overflow-y: scroll; -} -form.course .attendance label { - display: inline-block; - max-width: calc(100% - 2em); - vertical-align: top; - margin-bottom: 0; -} -form.course .attendance input { margin-top: .375em; } diff --git a/style_old.css b/style_old.css deleted file mode 100644 index c4f89be..0000000 --- a/style_old.css +++ /dev/null @@ -1,670 +0,0 @@ -* { - font-family: sans-serif; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 0; margin: 0; - font-size: initial; - line-height: 1.25em; - z-index: 0; -} - -input, textarea, select, select * { - font-size: .875em; - padding: .125em .125em; -} -input, select { - height: 1.5em; - vertical-align: bottom; -} -button { padding: 0 .5em; } - -body { - background: #EEE; - margin: 0; - padding: 0; - padding-top: 2.5em; - position: absolute; - min-height: 100%; - width: 100%; - padding-bottom: 2em; -} -.NAVIGATION { - position: fixed; - top: 0; - display: inline-block; - border-style: none solid solid solid; - border-width: 0 1px 1px 1px; - border-radius: 0 0 4px 4px; - margin: 0 2em; - padding: .5em 1ex; - background: #FFF; - z-index: 1; -} -.NAVIGATION label, -.NAVIGATION a { - color: #008; - border: solid 1px #BBF; - margin: .5em .5ex .25em .5ex; - padding: .2em 3ex .2em 3ex; - background: #EFF; -} -.NAVIGATION label:hover, -.NAVIGATION a:hover { - border-width: 2px 1px; - background: #F3FFFF; -} - -#CONFIGURE label[for="navigationconfig"] { display: none; } -#CONFIGURE:target label[for="navigationconfig"] { display: inline; } - -.NAVIGATION input#navigationconfig { display: none; } -.NAVIGATION input + form.config { - position: static; - display: none; -} - -.NAVIGATION .config a { display: block; } -.NAVIGATION .config a:hover { border-width: 1px 2px; } -.NAVIGATION input:checked + form.config { display: block; } -.NAVIGATION .config input[type=text], -.NAVIGATION .config button { - font-size: .875em; - line-height: 1.5em; - height: 1.75em; - padding: 0 .25em; - vertical-align: bottom; - border: 1px solid #000; - background-color: #FFF; -} -.NAVIGATION .config input[type=text] { - margin: .25em 0 0 .375em; - border-right: none; - width: 70%; -} -.NAVIGATION .config button { - min-width: 2.5em; - text-align: center; - max-width: 30%; -} -.NAVIGATION .config button[value=del] { - background: #FCC; -} - -#message { - display: block; - position: fixed; - top: 0; width: 100%; - margin: 0; padding: 1em; - text-align: center; - font-weight: bold; - background-color: #FAA; - border: 1px solid #000; - border-style: none none solid none; -} - -.trailbtn { display: none; } -.trailbtn + .trailbox { display: none; } -.trailbtn:checked + .trailbox { display: inline-block; } -.trailbtn:checked + .trailbox + .trailbtn { display: block; } -.trailbtn:checked + .trailbox + .trailbtn:before { - display: block; content: '+'; - width: 3ex; text-align: center; - margin-top: .25em; padding: .25em 0; - background-color: #FFF; - border-width: 1px; border-style: solid; -} -.trailbtn:checked + .trailbox + .trailbtn:checked, -.trailbtn:checked { display: none; } - -#footer { - width: 100%; - background-color: #FFF; - border-top: 1px solid #BBF; - margin: 0; padding: .5em 2em; - position: absolute; bottom: 0; -} -/* -# Copyright 2014 - 2017 Paul Hänsch -# -# This file is part of Confetti. -# -# Confetti is free software: you can redistribute it and/or modify -# it under the terms of the GNU Affero General Public License as published by -# the Free Software Foundation, either version 3 of the License, or -# (at your option) any later version. -# -# Confetti is distributed in the hope that it will be useful, -# but WITHOUT ANY WARRANTY; without even the implied warranty of -# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -# GNU Affero General Public License for more details. -# -# You should have received a copy of the GNU Affero General Public License -# along with Confetti. If not, see . -*/ - -.filter, .newcard, .card { box-shadow: 0 0 1ex; } - -.filter { - display: block; - border: solid 1px; - border-radius: 4px 4px 0 0; - margin: .5em 2em .25em 2em; - padding: 0 2ex .5em 2ex; - background: #EFF; -} - -.filter h1 { - display: block; - font-weight: bold; - font-size: 1.25em; - border-style: none none solid none; - border-radius: 4px 4px 0 0; - border-width: 1px; - margin: 0 -1.625ex .5em -1.625ex; - padding: .125em 1ex; - background: #EEF; -} -.filter input[type="text"] { - width: 100%; - height: 2em; - margin-bottom: 1em; -} -.filter fieldset { - position: relative; - display: block; - border: none; - padding: 0 0 0 12ex; - margin: 0 0 .5em 0; -} -.filter fieldset legend { - position: absolute; - font-size: 1em; - font-weight: bold; - margin-left: -12ex; -} -.filter label { - display: inline-block; - vertical-align: top; - margin: .125em 2ex 0 0; - white-space: nowrap; -} -.filter button { - margin-top: .5em; -} - -.filter fieldset.item { padding-left: 0; } -.filter fieldset.item legend { display: none; } -.filter fieldset.item input[type=text], -.filter fieldset.item fieldset.categories { - background-color: #FFF; - border: 1px solid #000; - margin-top: -1px; - padding: .25em .5em; -} -.filter fieldset.item input[type=radio] { display: none; } -.filter fieldset.item input[type=radio] + label { - position: relative; z-index: 1; - margin: 0; padding: .25em 1em; - -} -.filter fieldset.item input[type=radio]:checked + label { - background-color: #FFF; - border: 1px solid #000; - border-bottom-color: #FFF; -} -.filter fieldset.item input[type=radio][value="CATEGORIES"]:checked + label + input[type=text], -.filter fieldset.item input[type=radio][value="CATEGORIES"] + label + input[type=text] + fieldset.categories { - display: none; -} -.filter fieldset.item input[type=radio][value="CATEGORIES"]:checked + label + input[type=text] + fieldset.categories { - display: block; -} -.filter fieldset.item fieldset.categories a { - font-size: .875em; - line-height: 1.625em; - color: #44C; -} - -.newcard { - display: block; - border: solid 1px; - margin: 1em 2em .5em 2em; - padding: .5em; - text-align: right; - background: #EEF; -} -.newcard button { - box-shadow: 0 0 .5ex #888; -} - -.card { - display: block; - position: relative; - border: solid 1px; - margin: .25em 2em; - padding: 0 20ex 0 0; - overflow: auto; - background: #FFF; - min-height: 8em; -} -.card .control { - display: inline-block; - position: absolute; - top: 0; right: 0; - text-align: right; - background: #EEF; - margin: 0; - height: 100%; - width: 20ex; - max-width: 33%; - padding: .25em .5em; -} -.card .control .item { - display: inline-block; - width: 100%; - height: 2.5em; - line-height: 2.5em; - margin: .25em 0; - padding: 0 .5em; - font-size: .75em; - color: #008; - background: #FFF; - text-decoration: none; - border: 1px solid #888; - box-shadow: 0 0 .5ex #888; -} -.card .control button.item { text-align: right;} -.card .control .item:hover{ border-color: #008; box-shadow: 0 0 .5ex #008; } - -.card .control .item[name=newfield] { - width: calc(100% - 2.5em); -} -.card .control .item[value=addfield] { - width: 2.5em; - border-style: solid solid solid none; - text-align: center; -} - -.card .control #delete + label + button, -.card .control #delete { display: none; } -.card .control #delete + label { background-color: #FEE; } -.card .control #delete:checked + label + button { - position: fixed; display: block; - left: 40%; top: 30%; width: 20%; - font-size: 1.5em; - text-align: center; - background-color: #FAA; - color: #333; - border-radius: .25em 0 0 .25em; -} -.card .control #delete:checked + label:after { - position: fixed; display: block; - left: 60%; top: 30%; width: 5%; - margin: .25em 0; padding: .5em .75ex 0 .75ex; - height: 1.5em; - font-size: 2em; - content: 'X'; - text-align: center; - color: #AAA; background-color: #000; - border-radius: 0 .25em .25em 0; -} - -.card .section { - display: inline-block; - vertical-align: top; - float: left; - width: 16.625%; - min-width: 10em; - min-height: 6em; - margin: .125em 0 .5ex 0; - padding: 0 1ex .25em 1ex; -} -.card .section:nth-of-type(2n){ background: #EEE;} - -.card .section h2, .card .section h3 { - font-size: 1em; - display: block; - font-weight: bold; - margin: .25em -.5ex .25em -.5ex; - border-style: none none solid none; - border-width: 1px; -} -.card .section .FN { /* will override h2 */ - font-size: 1.2em; - margin-top: 0; -} - -.card .section .item { - display: block; - max-width: 100%; - word-wrap: break-word; - white-space: pre-line; -} -.card .section .item label { - font-weight: bold; -} - -.card .section textarea.NOTE { - min-height: 6em; -} -.card .section textarea.ADR { - min-height: 4em; -} - -.card .section .PHOTO { - width: 100%; - max-height: 10em; -} -.card .section .GENDER { display: inline-block; padding-right: .5ex; } -.card .section .BDAY { display: inline-block;} -.card .section .TEL .type { color: #444; } - -.card .section select { - display: block; - background-color: #FFF; - border: 1px solid black; -} - -.card .section.attendance ul { margin: 0; padding: 0; } -.card .section.attendance ul li { - display: block; - word-wrap: break-word; -} - -.card .section.prescriptions ul { margin: 0; padding: 0; } -.card .section.prescriptions ul li { - display: block; - word-wrap: break-word; - margin: 0 .25ex; -} - -.card .section.prescriptions { width: 40ex;} - -form.card input.delete { display: none; } -form.card input.delete + label { - display: inline-block; - position: relative; - font-size: .875em; - left: calc(100% - 1.5em); - width: 1.5em; - margin-bottom: -1.5em; - overflow: hidden; - white-space: nowrap; - vertical-align: bottom; -} -form.card input.delete + label:before { - display: inline-block; - content: 'x'; - width: calc(1.5em - 2px); height: calc(1.5em - 2px); - vertical-align: bottom; - text-align: center; - color: #444; - background-color: #FBB; - border: 1px solid #BBB; -} -form.card input.delete + label + input[type=text], -form.card input.delete + label + input:not([type]), -form.card input.delete + label + select + input.TEL { - width: calc(100% - 1.5em); -} -form.card input.delete[name^=TEL_] + label { top: 1.5em; } -form.card input.delete[name^=TEL_] + label:before { border-top: none; } -form.card input.delete[name^=NOTE_] + label, -form.card input.delete[name^=ADR_] + label { margin-bottom: 0; } -form.card input.delete[name^=NOTE_] + label:before, -form.card input.delete[name^=ADR_] + label:before { border-bottom: none; } - -form.card input.delete:checked + label, -form.card input.delete:checked + label + input, -form.card input.delete:checked + label + select, -form.card input.delete:checked + label + select + input, -form.card input.delete:checked + label + textarea { - display: none -} - -form.card .section input[type=text], -form.card .section input:not([type]), -form.card .section textarea, -form.card .section select { - width: 100%; - margin-bottom: .25em; -} - -form.card .section select.teltype { margin-bottom: 0; } -form.card .section input.TEL { margin-bottom: .5em; } - -form.card .attendance { - min-width: 66%; -} -form.card .attendance label { - position: relative; - display: inline-block; - width: 25ex; - padding-left: 3ex; -} -form.card .attendance label input[type=checkbox] { - position: absolute; - margin-left: -3ex; -} - -form.card .insurance input[type=radio] {display: none;} -form.card .insurance input[type=radio] + label { - display: inline-block; - width: 50%; - padding: .25ex 0; - text-align: center; - border: 1px solid black; - -} -form.card .insurance input[type=radio]:checked + label { - font-weight: bold; - background-color: #FFF; - border-width: 1px 1px 0 1px; -} -form.card .insurance input[type=radio] + label + input + label + select, -form.card .insurance input[type=radio] + label + select + input {display: none;} -form.card .insurance input[type=radio]:checked + label + input + label + select, -form.card .insurance input[type=radio]:checked + label + select + input { - display: block; - border: 1px solid black; - background-color: #FFF; - border-width: 0 1px 1px 1px; - padding: .25ex 0; - margin-top: -1px; -} -/* -# Copyright 2014 Paul Hänsch -# -# This file is part of Confetti. -# -# Confetti is free software: you can redistribute it and/or modify -# it under the terms of the GNU Affero General Public License as published by -# the Free Software Foundation, either version 3 of the License, or -# (at your option) any later version. -# -# Confetti is distributed in the hope that it will be useful, -# but WITHOUT ANY WARRANTY; without even the implied warranty of -# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -# GNU Affero General Public License for more details. -# -# You should have received a copy of the GNU Affero General Public License -# along with Confetti. If not, see . -*/ - -.sort { - display: block; - border: solid 1px; - border-radius: 4px 4px 0 0 ; - margin: .5em 2em .25em 2em; - padding: .25em 2ex .25em 2ex; - background: #EFF; -} -.sort .label { - font-weight: bold; -} - -.newcourse { - display: block; - border: solid 1px; - border-radius: 0 0 4px 4px; - margin: .25em 2em 1em 2em; - padding: .25em 2ex .25em 2ex; - background: #EFF; -} - -.course { - display: block; - position: relative; - border: solid 1px; - margin: .25em 2em; - padding: 0 20ex 0 0; - overflow: auto; - background: #FFF; - min-height: 9em; -} -.course .control { - display: inline-block; - position: absolute; - top 0; right: 0; - text-align: right; - background: #EEF; - margin: 0; - height: 100%; - width: 20ex; - max-width: 33%; - padding: .25em 1ex; -} -.course .control .item { - display: inline-block; - vertical-align: top; - width: 100%; - color: #008; - margin: .25em 0 0 0; - border: 1px solid black; - background: #FFF; -} -.course .control a.item { - border-right: 3px double; - padding: .125em 1ex; -} -.course .control a.item:hover{ - border-right: 1px solid; -} - -.course .control .item[name=newfield] { width: 85%;} -.course .control .item[value=addfield] { width: 15%;} - -.course .section { - display: inline-block; - vertical-align: top; - float: left; - width: 20ex; - min-width: 16.5%; - min-height: 6em; - margin: .125em 0 .5ex 0; - padding: 0 1ex .25em 1ex; -} -.course .section:nth-of-type(2n){ background: #EEE;} - -.course .section .item { - display: block; - max-width: 100%; - word-wrap: break-word; -} - -.course .section h2, .course .section h3 { - font-size: 1em; - display: block; - font-weight: bold; - margin: .25em -.5ex .25em -.5ex; - border-style: none none solid none; - border-width: 1px; -} -.course .section h2 { - font-size: 1.2em; - margin-top: 0; -} - -.course .attendance { - min-width: 66%; -} -.course .attendance a { - display: inline-block; - vertical-align: top; - min-width: 13.5ex; - width: 19%; - color: #008; - border-style: solid; - border-width: 1px; - margin: .25em .125ex .25em .125ex; - padding: .125em 1ex .125em 1ex; - background: #EFF; -} - -.course .dtstart { width: 37ex; } -.course .dtstart .DTSYEAR, -.course .dtstart .DTSMONTH, -.course .dtstart .DTS{ - font-size: .875em; - margin: .25em .25ex 1em .25ex; - display: inline-block; - text-align: center; - font-weight: bold; -} - -.course .dtstart .DTSYEAR{ width: 11.5ex; } -.course .dtstart .DTSMONTH{ width: 18.5ex; } -.course .dtstart .DTS{ width: 5.5ex; } - -.course .dtstart .DTSCAL, -.course .dtstart .DTSCALHEAD { - display: inline-block; - overflow: hidden; - text-align: center; - width: 5ex; - margin: 0; -} -.course .dtstart .DTSCALHEAD { - font-weight: bold; - border-top: 1px solid; - border-bottom: 1px solid; -} - -.course .dtstart input[name=DTSDAY] { display: none; margin: 0; height: 0; width: 0; } -.course .dtstart input[name=DTSDAY]:checked + label.DTSCAL { font-weight: bold; border: solid 1px; } - -.course .dtstart .DTSTIME{ - display: inline-block; - width: 10ex; - font-weight: bold; -} - -.course .recur{ width: 37ex; } -.course .section select, -.course .section button, -.course .section input { - border: 1px solid; - margin: .5em 0; -} - -.course .select_attendance { - max-height: 17em; - overflow-y: scroll; -} -.course .select_attendance label{ - display: block; - position: relative; - margin: 0; padding: 0; - padding-left: 3ex; -} -.course .select_attendance label input{ - position: absolute; - margin: 0; padding: 0; - margin-left: -3ex; - top: 0; -} - -.course .section input[type="text"] { width: 100%; } -.course .section textarea.COMMENT { min-height: 6em; width: 100%; overflow: auto; } - -- 2.39.2