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

   1 body {
   2   background-size: 4pt 4pt;
   3   background-image: /* #6AF #6FF */
   4     linear-gradient( 0deg, transparent 25%, rgba(102,170,255,.5) 25% 50%, transparent 50% 75%, rgba(102,255,255,.5) 75%),
   5     linear-gradient(90deg, transparent 25%, rgba(102,170,255,.5) 25% 50%, transparent 50% 75%, rgba(102,255,255,.5) 75%);
   6 }
   7
   8 body > form {
   9   background-color: rgba(255,255,255,.75) ;
  10   padding: 1em; margin: 1em auto 1em auto;
  11   border-radius: .5ex;
  12   box-shadow: #000 .125em .125em 1em;
  13 }
  14
  15 body.home form {
  16   position: fixed;
  17   left: 50%; top: 50%;
  18   transform: translate(-50%, -50%);
  19 }
  20
  21 body.newdate form {
  22   text-align: center;
  23   max-width: 100%;
  24 }
  25 body.newdate form fieldset.date,
  26 body.newdate form fieldset.timeofday,
  27 body.newdate form fieldset.splittimes {
  28   display: inline-block;
  29   vertical-align: top;
  30   margin: .5em 0 1em 0;
  31 }
  32
  33 body.newdate form { width: 26em; }
  34 body.newdate form input[name=title],
  35 body.newdate form textarea[name=description] {
  36   width: 100%;
  37 }
  38 body.newdate form fieldset.date,
  39 body.newdate form fieldset.timeofday,
  40 body.newdate form fieldset.splittimes {
  41   width: 100%;
  42 }
  43
  44 @media(min-width: 50em) {
  45   body.newdate form { width: 50em; }
  46   body.newdate form input[name=title],
  47   body.newdate form textarea[name=description] {
  48     width: 100%;
  49   }
  50   body.newdate form fieldset.date,
  51   body.newdate form fieldset.timeofday,
  52   body.newdate form fieldset.splittimes {
  53     width: 49.5%; width: calc(50% - .375ex);
  54   }
  55   body.newdate form fieldset.date { padding-right: .75em; }
  56   body.newdate form fieldset.timeofday,
  57   body.newdate form fieldset.splittimes { padding-left: .75em; }
  58 }
  59
  60 body.newdate form input[name=title],
  61 body.newdate form textarea[name=description] {
  62   display: block;
  63   margin-bottom: .75em;
  64 }
  65 body.newdate form textarea[name=description] {
  66   height: 8em;
  67 }
  68
  69 body.newdate form .date button[name=month] {
  70   display: inline-block;
  71   position: absolute;
  72   top: 0;
  73   height: 2.375em;
  74   width: 2em; width: calc(50% - 9em);
  75   padding: 0;
  76   color: transparent;
  77   background-color: transparent;
  78   border: none;
  79   overflow: hidden;
  80   z-index: 1;
  81 }
  82 body.newdate form .date button[name=month]:before {
  83   display: block;
  84   content: '<';
  85   font-size: 1.75em;
  86   font-weight: bold;
  87   color: #666;
  88   margin-top: .25em;
  89 }
  90 body.newdate form .date table + button[name=month] { right: .75em; }
  91 body.newdate form .date table + button[name=month]:before {
  92   content: '>';
  93 }
  94
  95 body.newdate form .date table.calendar {
  96   background-color: #FFF;
  97   font-size: 17pt;
  98   -vertical-align: middle;
  99 }
 100
 101 body.newdate form .timeofday label.todstart,
 102 body.newdate form .timeofday label.todend {
 103   display: inline-block;
 104   margin: 0;
 105   font-weight: bold;
 106   text-align: left;
 107   font-size: .75em;
 108   width: 49%; width: calc(50% - 2.5pt);
 109 }
 110 body.newdate form fieldset > input[name^=todstart],
 111 body.newdate form fieldset > input[name^=todend] {
 112   display: inline-block;
 113   margin: 0;
 114   width: 49%; width: calc(50% - 2.5pt);
 115   text-align: right;
 116 }
 117 body.newdate form fieldset > input[name^=todend] {
 118   width: 39%; width: calc( 50% - 4.375ex);
 119 }
 120
 121 body.newdate form fieldset button[name^=addtime] {
 122   width: 100%;
 123 }
 124
 125 body.newdate form fieldset input.splittimes { display: none;}
 126 body.newdate form fieldset input.splittimes + * { left: 12pt; }
 127 body.newdate form fieldset input.splittimes + *:before {
 128   position: absolute;
 129   width: 16pt; height: 16pt;
 130   left: -24pt;
 131   content: '';
 132   text-align: center;
 133   font-weight: bold;
 134   font-size: 1.75em;
 135   border: 1pt solid;
 136   border-radius: .25ex;
 137   background-color: #FFF;
 138 }
 139 body.newdate form fieldset input.splittimes:checked + *:before { content: '\2713'; background-color: #6AF;}
 140 body.newdate form .timeofday button[name=splittimes] { margin-top: 1.5em;}
 141
 142 body.newdate form .splittimes p { margin-top: 2em; padding: .5em; background: rgba(255,255,255,.5); }