X-Git-Url: https://git.plutz.net/?p=confetti;a=blobdiff_plain;f=static%2Fcards.css;fp=static%2Fcards.css;h=d85123f44fef0e35d4340ece16f3ae1f5f4edd96;hp=0000000000000000000000000000000000000000;hb=bea66ef5029455845cd3fc66252b8b0aad4cd053;hpb=31e822c91021f8848238337a67fcf364f9135aad diff --git a/static/cards.css b/static/cards.css new file mode 100644 index 0000000..d85123f --- /dev/null +++ b/static/cards.css @@ -0,0 +1,224 @@ +/* +# Copyright 2014, 2015 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 { + 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%; + margin-bottom: .5em; +} +.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; +} + +.newcard { + display: block; + border: solid 1px; + border-radius: 0 0 4px 4px; + margin: .25em 2em 1em 2em; + padding: .25em 2ex .25em 2ex; + background: #EFF; +} + +.card { + display: block; + position: relative; + border: solid 1px; + margin: .25em 2em; + padding: 0 20ex 0 0; + overflow: auto; + background: #FFF; +} +.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 1ex; +} +.card .control .item { + display: inline-block; + width: 100%; + color: #008; + margin: .25em 0 0 0; + border: 1px solid black; + background: #FFF; +} +.card .control a.item { padding: .25em .75ex 0 .75ex;} +.card .control a.item:hover{ border-color: #888;} +.card .control button.item { text-align: right;} +.card .control button.item:hover{ border-color: #888;} +.card .control .item[name=newfield] { width: 85%;} +.card .control .item[value=addfield] { width: 15%;} + +.card .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; +} +.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; +} +.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 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 .section input[type=text], +form.card .section input:not([type]), +form.card .section textarea, +form.card .section select {width: 100%;} + +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; +}