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