X-Git-Url: http://git.plutz.net/?a=blobdiff_plain;f=webpoll.css;h=193b2ed30a57b4febad9d7424b23900be4ec617a;hb=83fc1c222fd0c89d90e780ef93c5da048da3f5de;hp=c0293a1725f8c6aa3033d2b9ee190b8e4e63d4c4;hpb=bde17fe7155b5b89212fd4b85385bf8fd5570a69;p=webpoll

diff --git a/webpoll.css b/webpoll.css
index c0293a1..193b2ed 100644
--- a/webpoll.css
+++ b/webpoll.css
@@ -1,12 +1,105 @@
+body {
+  background-size: 4pt 4pt;
+  background-image: /* #6AF #6FF */
+    linear-gradient( 0deg, transparent 25%, rgba(102,170,255,.5) 25% 50%, transparent 50% 75%, rgba(102,255,255,.5) 75%),
+    linear-gradient(90deg, transparent 25%, rgba(102,170,255,.5) 25% 50%, transparent 50% 75%, rgba(102,255,255,.5) 75%);
+}
+
+body > form {
+  background-color: rgba(255,255,255,.75) ;
+  padding: 1em; margin: 1em auto 1em auto;
+  border-radius: .5ex;
+  box-shadow: #000 .125em .125em 1em;
+}
+
 body.home form {
   position: fixed;
   left: 50%; top: 50%;
   transform: translate(-50%, -50%);
 }
 
-body.newdate form {
+body.poll form {
   text-align: center;
+  max-width: 95%;
+}
+body section {
+  max-width: 50em;
+  padding: 1em;
+  margin: 1em auto;
+  background-color: rgba(255,255,255,.5);
+  word-wrap: break-word;
+}
+body.poll .description .title {
+  margin-top: 0;
+  text-align: left;
+}
+body.poll .description .title {
+  text-align: center;
+}
+body.poll table {
+  background-color: rgba(255,255,255,.5);
+  border-collapse: collapse;
   margin: auto;
+  box-shadow: #000 .25em .25em .5em;
+  border-radius: 2pt;
+}
+body.poll table thead tr.dates th {
+  padding: .25em;
+}
+body.poll table thead tr.tod th {
+  border-width: .5pt;
+  border-style: none solid none solid;
+  padding: .25em;
+}
+body.poll table tbody tr td {
+  text-align: center;
+  border: .5pt solid;
+  padding: 0 .25em;
+  background-clip: padding-box;
+}
+body.poll table tbody tr td:first-child,
+body.poll table tbody tr td:last-child,
+body.poll table thead tr th:first-child,
+body.poll table thead tr th:last-child { border: none; }
+
+body.poll table tbody tr th.name  { padding: .25em .5em; text-align: right; }
+body.poll table tbody tr td.yes   { background-color: #AFA; }
+body.poll table tbody tr td.no    { background-color: #FAA; }
+body.poll table tbody tr td.maybe { background-color: #FFA; }
+body.poll table tbody tr td.edit  { text-align: left; font-size: .875em; }
+
+body.poll table tbody tr.votecount td  { padding: .375em .25em;}
+body.poll table tbody tr th.name button[name=delete]  { font-size: .625em; line-height: 1.5em; background-color: #FAA; }
+
+body.poll table tbody tr.new td:first-child  { text-align: right; }
+body.poll table tbody tr.new td input[name=name]  { min-width: 100%; width: 8em; }
+
+body.poll table td input[type=radio] { display: none; }
+body.poll table td input[type=radio] + label {
+  font-size: .875em;
+  text-decoration: underline;
+  color: #066;
+  padding: .25em;
+  margin: 0;
+}
+body.poll table td input[type=radio]:checked + label {
+  font-weight: bold;
+}
+body.poll table td input[type=radio][value=yes]:checked + label {
+  background-color: #AFA;
+  margin: 0 -1.5pt;
+}
+body.poll table td input[type=radio][value=no]:checked + label {
+  background-color: #FAA;
+  margin: 0 -.75pt;
+}
+body.poll table td input[type=radio][value=maybe]:checked + label {
+  background-color: #FFA;
+  margin: 0 -1.75pt;
+}
+
+body.newdate form {
+  text-align: center;
   max-width: 100%;
 }
 body.newdate form fieldset.date,
@@ -17,7 +110,7 @@ body.newdate form fieldset.splittimes {
   margin: .5em 0 1em 0;
 }
 
-body.newdate form { width: 24em; }
+body.newdate form { width: 26em; }
 body.newdate form input[name=title],
 body.newdate form textarea[name=description] {
   width: 100%;
@@ -28,8 +121,8 @@ body.newdate form fieldset.splittimes {
   width: 100%;
 }
 
-@media(min-width: 48em) {
-  body.newdate form { width: 48em; }
+@media(min-width: 50em) {
+  body.newdate form { width: 50em; }
   body.newdate form input[name=title],
   body.newdate form textarea[name=description] {
     width: 100%;
@@ -39,6 +132,9 @@ body.newdate form fieldset.splittimes {
   body.newdate form fieldset.splittimes {
     width: 49.5%; width: calc(50% - .375ex);
   }
+  body.newdate form fieldset.date { padding-right: .75em; }
+  body.newdate form fieldset.timeofday,
+  body.newdate form fieldset.splittimes { padding-left: .75em; }
 }
 
 body.newdate form input[name=title],
@@ -51,35 +147,34 @@ body.newdate form textarea[name=description] {
 }
 
 body.newdate form .date button[name=month] {
-  position: absolute;
   display: inline-block;
-  padding: 0;
-  -height: 3.25em;
+  position: absolute;
+  top: 0;
   height: 2.375em;
   width: 2em; width: calc(50% - 9em);
-  -vertical-align: middle;
+  padding: 0;
   color: transparent;
-  overflow: hidden;
+  background-color: transparent;
   border: none;
+  overflow: hidden;
   z-index: 1;
-  background-color: transparent;
 }
 body.newdate form .date button[name=month]:before {
   display: block;
   content: '<';
   font-size: 1.75em;
   font-weight: bold;
-  -margin-top: .375em;
-  margin-top: .25em;
   color: #666;
+  margin-top: .25em;
 }
-body.newdate form .date table + button[name=month] { right: 0; }
+body.newdate form .date table + button[name=month] { right: .75em; }
 body.newdate form .date table + button[name=month]:before {
   content: '>';
 }
 
 body.newdate form .date table.calendar {
-  font-size: 17.5pt;
+  background-color: #FFF;
+  font-size: 17pt;
   -vertical-align: middle;
 }
 
@@ -90,17 +185,17 @@ body.newdate form .timeofday label.todend {
   font-weight: bold;
   text-align: left;
   font-size: .75em;
-  width: 49%; width: calc(50% - .5ex);
+  width: 49%; width: calc(50% - 2.5pt);
 }
 body.newdate form fieldset > input[name^=todstart],
 body.newdate form fieldset > input[name^=todend] {
   display: inline-block;
   margin: 0;
-  width: 49%; width: calc(50% - .5ex);
+  width: 49%; width: calc(50% - 2.5pt);
   text-align: right;
 }
 body.newdate form fieldset > input[name^=todend] {
-  width: 40%; widtfieldset% - 4.375ex);
+  width: 39%; width: calc( 50% - 4.375ex);
 }
 
 body.newdate form fieldset button[name^=addtime] {
@@ -124,3 +219,4 @@ body.newdate form fieldset input.splittimes + *:before {
 body.newdate form fieldset input.splittimes:checked + *:before { content: '\2713'; background-color: #6AF;}
 body.newdate form .timeofday button[name=splittimes] { margin-top: 1.5em;}
 
+body.newdate form .splittimes p { margin-top: 2em; padding: .5em; background: rgba(255,255,255,.5); }