add fields or time selection

[webpoll] / webpoll.css

diff --git a/webpoll.css b/webpoll.css
index b7d845a5c061a169c032c1555613c7c377eba017..5803ec68202c9f64c20d52efc823f742a1508fe5 100644 (file)
--- a/webpoll.css
+++ b/webpoll.css
@@ -7,30 +7,56 @@ body.home form {
 body.newdate form {
   text-align: center;
   margin: auto;
-  max-width: 24em;
+  max-width: 100%;
+}
+body.newdate form fieldset.date,
+body.newdate form fieldset.timeofday {
+  display: inline-block;
+  vertical-align: top;
 }
 
+body.newdate form { width: 24em; }
 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 {
+  width: 100%;
+}
+
+@media(min-width: 48em) {
+  body.newdate form { width: 48em; }
+  body.newdate form input[name=title],
+  body.newdate form textarea[name=description] {
+    width: 100%;
+  }
+  body.newdate form fieldset.date,
+  body.newdate form fieldset.timeofday {
+    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);
+  padding: 0;
+  height: 3.25em;
+  width: 2em; width: calc(50% - 9em);
   vertical-align: middle;
   color: transparent;
   overflow: hidden;
-  height: 4em;
   border: none;
 }
-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;
@@ -38,10 +64,34 @@ body.newdate form table + button[name=month]:before {
   margin-top: .375em;
   color: #666;
 }
-body.newdate form table + button[name=month]:before {
+body.newdate form .date table + button[name=month]:before {
   content: '>';
 }
 
-body.newdate form table.calendar {
+body.newdate form .date table.calendar {
   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 .timeofday > input[name=todstart],
+body.newdate form .timeofday > input[name=todend] {
+  display: inline-block;
+  margin: 0;
+  width: 49%; width: calc(50% - .5ex);
+  text-align: right;
+}
+body.newdate form .timeofday > input[name=todend] {
+  width: 40%; width: calc(50% - 4.375ex);
+}
+
+body.newdate form .timeofday button[name=addtime] {
+  width: 100%;
+}