git.plutz.net Git - confetti/blob - templates/therapy.css.sh

   1 #!/bin/sh
   2
   3 cat <<EOF
   4 * { box-sizing: border-box; }
   5 body {
   6   overflow: scroll;
   7   position: relative;
   8   width: 100%;
   9   margin: 0; padding: 0;
  10   padding-top: 2em;
  11 }
  12
  13 input.tab { display: none; }
  14 input.tab + label.tab { display: block; }
  15 input.tab + label.tab::before { content: '\25b8 \00a0'; float: left;}
  16 input.tab:checked + label.tab::before { content: '\25be \00a0'; }
  17 input.tab + label.tab + div.tab { display: none; }
  18 input.tab:checked + label.tab + div.tab { display: block; }
  19
  20 input.color { display: none }
  21 input.color + label{
  22   display: inline-block;
  23   width: 1em; height: 1em;
  24   border: 1px solid black;
  25 }
  26 input.color:checked + label{ border-width: 3px;}
  27 input.color[value="#000"] + label,
  28 input.color[value="#888"] + label { background-color: #888;}
  29 input.color[value="#00A"] + label { background-color: #00F;}
  30 input.color[value="#0A0"] + label { background-color: #0F0;}
  31 input.color[value="#0AA"] + label { background-color: #0FF;}
  32 input.color[value="#A00"] + label { background-color: #F00;}
  33 input.color[value="#A0A"] + label { background-color: #F0F;}
  34 input.color[value="#AA0"] + label { background-color: #FF0;}
  35 input.color[value="#FFF"] + label { background-color: #FFF;}
  36
  37 h1, label.tab, div.tab, fieldset.tab,
  38 div.patient, div.prescription {
  39   display: block;
  40   width: 96%;
  41   margin: 0 2%;
  42 }
  43
  44 div.prescription span {
  45   display: inline-block;
  46   width: 50%;
  47   margin-right: -.75ex;
  48 }
  49 div.prescription span label { font-weight: bold; margin-right: 1ex;}
  50 div.prescription span.prescno,
  51 div.prescription span.catalogue {
  52   width: 33%;
  53   font-weight: bold;
  54   margin-bottom: .5em;
  55 }
  56
  57 div.prescription label.checkbox,
  58 div.prescription label.radio {
  59   display: block;
  60   padding-left: 1.25em;
  61   font-size: 1em;
  62   margin: .5em 0;
  63 }
  64
  65 div.prescription label.checkbox:before,
  66 div.prescription label.radio:before {
  67   display: inline-block;
  68   color: #000;
  69   background-color: #FFF;
  70   height: 1.375em; width: 1.125em;
  71   padding: .125em 0 0 .375em;
  72   margin: 0 .5em .25em -1.25em;
  73   border: 1px solid #000;
  74   vertical-align: middle;
  75   content: ' ';
  76 }
  77 div.prescription label.radio:before { border-radius: .5em;}
  78 div.prescription label.checkbox.checked:before,
  79 div.prescription label.radio.checked:before { content: "\2713";}
  80
  81 div.prescription label[for=prescreviewed] {
  82   margin-left: 1ex;
  83   font-weight: bold;
  84   text-decoration: underline;
  85   background-color: #FCC;
  86 }
  87 div.prescription label[for=prescreviewed].checked {
  88   font-weight: normal;
  89   text-decoration: none;
  90   background-color: transparent;
  91 }
  92
  93 fieldset.color {
  94   margin: .5em 2% 0 2%;
  95   border: none;
  96   padding: 0;
  97 }
  98 .dotmark {
  99   max-width: 96%;
 100   margin: .125em 2%; padding: 0;
 101   text-align: left;
 102   border: 1px dotted black;
 103 }
 104 .dotmark.ov {
 105   position: absolute;
 106   bottom: 5px; right: 0;
 107   z-index: 1;
 108   border: none;
 109 }
 110 @media(min-width: 800px){
 111   h1, label.tab, div.tab, fieldset.tab,
 112   div.patient, div.prescription {
 113     width: 38%;
 114     margin-right: 0;
 115   }
 116   fieldset.color{
 117     position: fixed;
 118     max-width: 56%;
 119     right: 0;
 120     top: 0em;
 121   }
 122   .dotmark {
 123     position: fixed;
 124     max-width: 56%;
 125     max-height: 480px;
 126     right: 0;
 127     top: 2em;
 128   }
 129   .dotmark.ov {
 130     position: fixed;
 131     bottom: auto;
 132   }
 133 }
 134
 135 h1 {display: none;}
 136
 137 div.patient, div.prescription { margin-top: 1em; }
 138 div.prescription {
 139   border: 1px solid black;
 140   background-color: #EEE;
 141   padding: .125em 1.25ex .5em 1.25ex;
 142 }
 143 div > h2 { margin: 0; border-bottom: 1px solid black; }
 144 div:nth-child(n+2) > a:first-of-type {
 145   display: block;
 146   margin: .125em 0 .5em 0;
 147   text-decoration: none;
 148 }
 149
 150 fieldset.tab,
 151 label.tab {
 152   font-size: 1.25em;
 153   font-weight: bold;
 154   padding: .125em 1ex .25em 1ex;
 155   color: #FFF;
 156   background-color: #333;
 157   margin-top: .125em;
 158   text-align: right;
 159   border: none;
 160 }
 161 label.heading {
 162   background-color: #FFF;
 163   margin-top: 1em;
 164   border: 2px solid black;
 165   border-bottom-width: 1px;
 166   color: black;
 167 }
 168 label.heading > span {
 169   text-decoration: underline;
 170 }
 171
 172 fieldset.tab > *,
 173 label > input,
 174 label > span {
 175   display: inline-block;
 176   text-align: right;
 177 }
 178 .tab > .no {
 179   width:  10%; float: left;
 180   border: solid 1px #FFF;
 181   background-color: #555;
 182   border-radius: 2ex;
 183   padding: 0;
 184   text-align: center;
 185 }
 186 label.heading > span.no {
 187   background-color: inherit;
 188   border: none;
 189 }
 190 .tab > .date      { width: 30%; }
 191 .tab > .therapist { width: 30%; }
 192 .tab > .signature { width: 20%; }
 193 label.tab > .signature { font-size: .75em; }
 194 .tab > .signature > button { display: inline-block; margin: 0; }
 195 /* fieldset.tab > button[type=submit] { width: 5%; text-align: center; margin-left: 5%;} */
 196 fieldset.tab > button[type=submit] { height: 2em; color: #FFF; font-weight: bold;}
 197 fieldset.tab > button[type=submit]::first-letter { font-size: 1.75em;}
 198
 199 .signature > button[value=pos],
 200 .signature > button[value=neg] {
 201   margin-bottom: .25em;
 202   border: 1px solid black;
 203   height: 1.5em; width: 1.5em;
 204   vertical-align: top;
 205   background-color: #FFF;
 206   color: #000;
 207   white-space: nowrap;
 208 }
 209 .signature > input[type=checkbox] {display: none;}
 210 .signature > button[value=neg]::before { padding: 0 1ex 0 .25ex; content: "\2713"; }
 211 .signature > button[value=pos]::before { padding: 0 1ex 0 .25ex; content: "\00a0 \00a0 \00a0"; }
 212
 213 input.tab + label.tab > input.date,
 214 input.tab + label.tab > input.therapist {
 215   display: none;
 216 }
 217 input.tab:checked + label.tab > input.date,
 218 input.tab:checked + label.tab > input.therapist {
 219   display: inline;
 220 }
 221 input.tab:checked + label.tab > span.date,
 222 input.tab:checked + label.tab > span.therapist {
 223   display: none;
 224 }
 225
 226
 227 div.tab {
 228   border: 2px solid #333;
 229   border-top-width: 1px;
 230   margin-top: -1px;
 231   padding: .25em .5ex;
 232 }
 233 div.tab > fieldset.note {
 234   border: none;
 235   margin: 0; padding: 0;
 236 }
 237 div.tab > fieldset.note > textarea {
 238   display: block;
 239   width: 95%; height: 8em;
 240   margin: -8em 0 .5em 1.25em;
 241   font: normal 1em sans-serif;
 242 }
 243 div.tab > fieldset.note > input.color + label { margin: 0; display: block; }
 244 div.tab > fieldset.note > input.color[value="#888"]:checked ~ textarea { background-color: #AAA; }
 245 div.tab > fieldset.note > input.color[value="#00A"]:checked ~ textarea { background-color: #88F; }
 246 div.tab > fieldset.note > input.color[value="#0A0"]:checked ~ textarea { background-color: #8F8; }
 247 div.tab > fieldset.note > input.color[value="#0AA"]:checked ~ textarea { background-color: #8FF; }
 248 div.tab > fieldset.note > input.color[value="#A00"]:checked ~ textarea { background-color: #F88; }
 249 div.tab > fieldset.note > input.color[value="#A0A"]:checked ~ textarea { background-color: #F8F; }
 250 div.tab > fieldset.note > input.color[value="#AA0"]:checked ~ textarea { background-color: #FF8; }
 251 div.tab > fieldset.note > input.color[value="#FFF"]:checked ~ textarea { background-color: #FFF; }
 252
 253 div.tab > button.delete {float: right; display: inline-block;}
 254 EOF
 255
 256 # vi:set filetype=css: