X-Git-Url: https://git.plutz.net/?p=confetti;a=blobdiff_plain;f=templates%2Ftherapy.css.sh;h=ce636a404d503510999e274711e7ea07501f3a44;hp=d6a0135697c7ad1cd571c6ca4cc8dd27a0f64694;hb=be911da6c63f2129a62dc50f92b749e0f2bb67ee;hpb=9f84cd01fc17ac387f4f5e5787cd366135cd1916 diff --git a/templates/therapy.css.sh b/templates/therapy.css.sh index d6a0135..ce636a4 100755 --- a/templates/therapy.css.sh +++ b/templates/therapy.css.sh @@ -3,6 +3,7 @@ cat < input.color + label { + width: 2em; height: 2em; +} .dotmark { - max-width: 96%; - margin: .125em 2%; padding: 0; + max-width: 90%; + margin: .5em 1em .125em 2%; padding: 0; text-align: left; - border: 1px dotted black; + border: 1px solid black; } .dotmark.ov { position: absolute; - bottom: 5px; right: 0; + left: 0; bottom: .25em; z-index: 1; - border: none; } + @media(min-width: 800px){ h1, label.tab, div.tab, fieldset.tab, div.patient, div.prescription { width: 38%; margin-right: 0; } - fieldset.color{ - position: fixed; - max-width: 56%; - right: 0; - top: 0em; - } + fieldset.color { position: fixed; } .dotmark { position: fixed; - max-width: 56%; - max-height: 480px; - right: 0; - top: 2em; + max-width: 52%; + max-height: 98%; + right: 2em; bottom: .25em; } .dotmark.ov { position: fixed; - bottom: auto; + right: 2em; left: auto; } } @@ -129,6 +148,64 @@ div:nth-child(n+2) > a:first-of-type { text-decoration: none; } +input.stickynote { display:none; } +input.stickynote + .stickynote { + position: fixed; + background-color: #FF8; + top: 4em; bottom: 4em; + left: -4.5em; width: 5em; + padding: 1ex; + max-height: 90%; + z-index: 2; +} +input.stickynote + .stickynote > * { display: none; } +input.stickynote + .stickynote > label { + position: absolute; + top: 0; bottom: 0; + display: block; + text-align: right; + font-weight: bold; +} +input.stickynote + .stickynote:hover { + left: -1ex; +} +input.stickynote:checked + .stickynote { + width: auto; + left: 1em; + right: 4em; + padding-top: .5ex; +} +input.stickynote:checked + .stickynote > textarea { + display: block; + position: absolute; + left; 0; right: 0; bottom: 0; top: 0; + width: 100%; height: 100%; + background-color: #FF8; + padding: 2em 1em; +} +input.stickynote:checked + .stickynote > button { + display: block; + position: absolute; + right: .5ex; bottom: .5ex; + z-index: 2; +} +input.stickynote:checked + .stickynote > label { + display: block; + position: static; + font-size: 0; +} +input.stickynote:checked + .stickynote > label:before { + position: absolute; + font-size: initial; + content: "x"; + top: .5ex; right: .5ex; + padding: .125ex .75ex; + background-color: #000; + color: #FFF; + border-radius: 1ex; + z-index: 2; +} + fieldset.tab, label.tab { font-size: 1.25em; @@ -170,8 +247,9 @@ label.heading > span.no { border: none; } .tab > .date { width: 30%; } -.tab > .therapist { width: 40%; } -.tab > .signature { width: 10%; } +.tab > .therapist { width: 30%; } +.tab > .signature { width: 20%; } +label.tab > .signature { font-size: .75em; } .tab > .signature > button { display: inline-block; margin: 0; } /* fieldset.tab > button[type=submit] { width: 5%; text-align: center; margin-left: 5%;} */ fieldset.tab > button[type=submit] { height: 2em; color: #FFF; font-weight: bold;} @@ -218,7 +296,7 @@ div.tab > fieldset.note { div.tab > fieldset.note > textarea { display: block; width: 95%; height: 8em; - margin: -8em 0 .5em 1.25em; + margin: -8em 0 .5em 2em; font: normal 1em sans-serif; } div.tab > fieldset.note > input.color + label { margin: 0; display: block; }