git.plutz.net Git - webpoll/blob - webpoll.css

   1 body.home form {
   2   position: fixed;
   3   left: 50%; top: 50%;
   4   transform: translate(-50%, -50%);
   5 }
   6
   7 body.newdate form {
   8   text-align: center;
   9   margin: auto;
  10   max-width: 100%;
  11 }
  12 body.newdate form fieldset.date,
  13 body.newdate form fieldset.timeofday {
  14   display: inline-block;
  15   vertical-align: top;
  16 }
  17
  18 body.newdate form { width: 24em; }
  19 body.newdate form input[name=title],
  20 body.newdate form textarea[name=description] {
  21   width: 100%;
  22 }
  23 body.newdate form fieldset.date,
  24 body.newdate form fieldset.timeofday {
  25   width: 100%;
  26 }
  27
  28 @media(min-width: 48em) {
  29   body.newdate form { width: 48em; }
  30   body.newdate form input[name=title],
  31   body.newdate form textarea[name=description] {
  32     width: 100%;
  33   }
  34   body.newdate form fieldset.date,
  35   body.newdate form fieldset.timeofday {
  36     width: 49.5%; width: calc(50% - .375ex);
  37   }
  38 }
  39
  40 body.newdate form input[name=title],
  41 body.newdate form textarea[name=description] {
  42   display: block;
  43   margin-bottom: .75em;
  44 }
  45 body.newdate form textarea[name=description] {
  46   height: 8em;
  47 }
  48
  49 body.newdate form .date button[name=month] {
  50   display: inline-block;
  51   padding: 0;
  52   height: 3.25em;
  53   width: 2em; width: calc(50% - 9em);
  54   vertical-align: middle;
  55   color: transparent;
  56   overflow: hidden;
  57   border: none;
  58 }
  59 body.newdate form .date button[name=month]:before {
  60   display: block;
  61   content: '<';
  62   font-size: 2em;
  63   font-weight: bold;
  64   margin-top: .375em;
  65   color: #666;
  66 }
  67 body.newdate form .date table + button[name=month]:before {
  68   content: '>';
  69 }
  70
  71 body.newdate form .date table.calendar {
  72   vertical-align: middle;
  73 }
  74
  75 body.newdate form .timeofday label.todstart,
  76 body.newdate form .timeofday label.todend {
  77   display: inline-block;
  78   margin: 0;
  79   font-weight: bold;
  80   text-align: left;
  81   font-size: .75em;
  82   width: 49%; width: calc(50% - .5ex);
  83 }
  84 body.newdate form .timeofday > input[name=todstart],
  85 body.newdate form .timeofday > input[name=todend] {
  86   display: inline-block;
  87   margin: 0;
  88   width: 49%; width: calc(50% - .5ex);
  89   text-align: right;
  90 }
  91 body.newdate form .timeofday > input[name=todend] {
  92   width: 40%; width: calc(50% - 4.375ex);
  93 }
  94
  95 body.newdate form .timeofday button[name=addtime] {
  96   width: 100%;
  97 }