/* # 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; }