X-Git-Url: https://git.plutz.net/?p=confetti;a=blobdiff_plain;f=cards%2Fcards.css;h=6349f8afe55d002923ada6ac3f9d145c6d325004;hp=9515e835233f20cb988d081e38de8148759cc0d9;hb=bbce2c9717ad8e0f551ac0d875801d2da3be3b53;hpb=516b1d6b0427b42924a60bd63ed48d8087a9e4e8

diff --git a/cards/cards.css b/cards/cards.css
index 9515e83..6349f8a 100644
--- a/cards/cards.css
+++ b/cards/cards.css
@@ -17,6 +17,8 @@
 # along with Confetti.  If not, see <http://www.gnu.org/licenses/>. 
 */
 
+.filter, .newcard, .card { box-shadow: 0 0 1ex; }
+
 .filter {
   display: block;
   border: solid 1px;
@@ -101,10 +103,13 @@
 .newcard {
   display: block;
   border: solid 1px;
-  border-radius: 0 0 4px 4px;
-  margin: .25em 2em 1em 2em;
-  padding: .25em 2ex .25em 2ex;
-  background: #EFF;
+  margin: 1em 2em .5em 2em;
+  padding: .5em;
+  text-align: right;
+  background: #EEF;
+}
+.newcard button {
+  box-shadow: 0 0 .5ex #888;
 }
 
 .card {
@@ -127,26 +132,33 @@
   height: 100%;
   width: 20ex;
   max-width: 33%;
-  padding: .25em 1ex;
+  padding: .25em .5em;
 }
 .card .control .item {
   display: inline-block;
   width: 100%;
-  min-height: 2.5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  margin: .25em 0;
+  padding: 0 .5em;
+  font-size: .75em;
   color: #008;
-  margin: .25em 0 .5em 0;
-  border: 1px solid black;
   background: #FFF;
-  padding: .25em .75ex 0 .75ex;
   text-decoration: none;
-  font-size: .75em;
+  border: 1px solid #888;
+  box-shadow: 0 0 .5ex #888;
 }
-.card .control .item:hover{ border-color: #888; }
-.card .control input.item { font-size: normal; }
 .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 .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; }
@@ -176,8 +188,8 @@
   display: inline-block;
   vertical-align: top;
   float: left;
-  width: 20ex;
-  min-width: 16.5%;
+  width: 16.625%;
+  min-width: 10em;
   min-height: 6em;
   margin: .125em 0 .5ex 0;
   padding: 0 1ex .25em 1ex;
@@ -218,8 +230,9 @@
   width: 100%;
   max-height: 10em;
 }
-.card .section .GENDER { display: inline-block; padding-right: .5ex;}
+.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;
@@ -242,10 +255,58 @@
 
 .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%;}
+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%;