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   position: absolute;
  56   top: 0;
  57   height: 2.375em;
  58   width: 2em; width: calc(50% - 9em);
  59   padding: 0;
  60   color: transparent;
  61   background-color: transparent;
  62   border: none;
  63   overflow: hidden;
  64   z-index: 1;
  65 }
  66 body.newdate form .date button[name=month]:before {
  67   display: block;
  68   content: '<';
  69   font-size: 1.75em;
  70   font-weight: bold;
  71   color: #666;
  72   margin-top: .25em;
  73 }
  74 body.newdate form .date table + button[name=month] { right: 0; }
  75 body.newdate form .date table + button[name=month]:before {
  76   content: '>';
  77 }
  78
  79 body.newdate form .date table.calendar {
  80   font-size: 17.5pt;
  81   -vertical-align: middle;
  82 }
  83
  84 body.newdate form .timeofday label.todstart,
  85 body.newdate form .timeofday label.todend {
  86   display: inline-block;
  87   margin: 0;
  88   font-weight: bold;
  89   text-align: left;
  90   font-size: .75em;
  91   width: 49%; width: calc(50% - .5ex);
  92 }
  93 body.newdate form fieldset > input[name^=todstart],
  94 body.newdate form fieldset > input[name^=todend] {
  95   display: inline-block;
  96   margin: 0;
  97   width: 49%; width: calc(50% - .5ex);
  98   text-align: right;
  99 }
 100 body.newdate form fieldset > input[name^=todend] {
 101   width: 40%; widtfieldset% - 4.375ex);
 102 }
 103
 104 body.newdate form fieldset button[name^=addtime] {
 105   width: 100%;
 106 }
 107
 108 body.newdate form fieldset input.splittimes { display: none;}
 109 body.newdate form fieldset input.splittimes + * { left: 12pt; }
 110 body.newdate form fieldset input.splittimes + *:before {
 111   position: absolute;
 112   width: 16pt; height: 16pt;
 113   left: -24pt;
 114   content: '';
 115   text-align: center;
 116   font-weight: bold;
 117   font-size: 1.75em;
 118   border: 1pt solid;
 119   border-radius: .25ex;
 120   background-color: #FFF;
 121 }
 122 body.newdate form fieldset input.splittimes:checked + *:before { content: '\2713'; background-color: #6AF;}
 123 body.newdate form .timeofday button[name=splittimes] { margin-top: 1.5em;}
 124