quoting

[webpoll] / webpoll.css

diff --git a/webpoll.css b/webpoll.css
index 4c5ee0887453366f11b80abfe4449f8953211482..90d9d64ef71040acb5385bf996e9d6382620be32 100644 (file)
--- a/webpoll.css
+++ b/webpoll.css
@@ -1,41 +1,138 @@
+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 {
   text-align: center;
-  margin: auto;
-  max-width: 24em;
+  max-width: 100%;
+}
+body.newdate form fieldset.date,
+body.newdate form fieldset.timeofday,
+body.newdate form fieldset.splittimes {
+  display: inline-block;
+  vertical-align: top;
+  margin: .5em 0 1em 0;
 }
 
+body.newdate form { width: 26em; }
 body.newdate form input[name=title],
 body.newdate form textarea[name=description] {
-  display: block;
   width: 100%;
+}
+body.newdate form fieldset.date,
+body.newdate form fieldset.timeofday,
+body.newdate form fieldset.splittimes {
+  width: 100%;
+}
+
+@media(min-width: 48em) {
+  body.newdate form { width: 50em; }
+  body.newdate form input[name=title],
+  body.newdate form textarea[name=description] {
+    width: 100%;
+  }
+  body.newdate form fieldset.date,
+  body.newdate form fieldset.timeofday,
+  body.newdate form fieldset.splittimes {
+    width: 49.5%; width: calc(50% - .375ex);
+  }
+}
+
+body.newdate form input[name=title],
+body.newdate form textarea[name=description] {
+  display: block;
   margin-bottom: .75em;
 }
 body.newdate form textarea[name=description] {
   height: 8em;
 }
 
-body.newdate form button[name=month] {
+body.newdate form .date button[name=month] {
   display: inline-block;
-  width: calc(50% - 9em);
-  vertical-align: middle;
+  position: absolute;
+  top: 0;
+  height: 2.375em;
+  width: 2em; width: calc(50% - 9em);
+  padding: 0;
   color: transparent;
-  overflow: hidden;
-  height: 4em;
+  background-color: transparent;
   border: none;
+  overflow: hidden;
+  z-index: 1;
 }
-body.newdate form textarea + button[name=month]:before,
-body.newdate form table + button[name=month]:before {
+body.newdate form .date button[name=month]:before {
   display: block;
   content: '<';
-  font-size: 2em;
+  font-size: 1.75em;
   font-weight: bold;
-  margin-top: .375em;
   color: #666;
+  margin-top: .25em;
 }
-body.newdate form table + button[name=month]:before {
+body.newdate form .date table + button[name=month] { right: 0; }
+body.newdate form .date table + button[name=month]:before {
   content: '>';
 }
 
-body.newdate form table.calendar {
-  vertical-align: middle;
+body.newdate form .date table.calendar {
+  background-color: #FFF;
+  font-size: 17.5pt;
+  -vertical-align: middle;
+}
+
+body.newdate form .timeofday label.todstart,
+body.newdate form .timeofday label.todend {
+  display: inline-block;
+  margin: 0;
+  font-weight: bold;
+  text-align: left;
+  font-size: .75em;
+  width: 49%; width: calc(50% - .5ex);
+}
+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);
+  text-align: right;
+}
+body.newdate form fieldset > input[name^=todend] {
+  width: 40%; widtfieldset% - 4.375ex);
 }
+
+body.newdate form fieldset button[name^=addtime] {
+  width: 100%;
+}
+
+body.newdate form fieldset input.splittimes { display: none;}
+body.newdate form fieldset input.splittimes + * { left: 12pt; }
+body.newdate form fieldset input.splittimes + *:before {
+  position: absolute;
+  width: 16pt; height: 16pt;
+  left: -24pt;
+  content: '';
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.75em;
+  border: 1pt solid;
+  border-radius: .25ex;
+  background-color: #FFF;
+}
+body.newdate form fieldset input.splittimes:checked + *:before { content: '\2713'; background-color: #6AF;}
+body.newdate form .timeofday button[name=splittimes] { margin-top: 1.5em;}
+