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