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.poll form {
  22   text-align: center;
  23   max-width: 95%;
  24 }
  25 body.poll .description {
  26   text-align: left;
  27   max-width: 50em;
  28   padding: 1pt 1em 1em 1em;
  29   margin: auto;
  30   margin-bottom: 1em;
  31   background-color: rgba(255,255,255,.5);
  32 }
  33 body.poll .description .title {
  34   text-align: center;
  35 }
  36 body.poll table {
  37   background-color: rgba(255,255,255,.5);
  38   border-collapse: collapse;
  39   margin: auto;
  40   -border: .5pt solid;
  41   box-shadow: #000 .25em .25em .5em;
  42   border-radius: 2pt;
  43 }
  44 body.poll table thead tr.dates th {
  45   padding: .25em;
  46 }
  47 body.poll table thead tr.tod th {
  48   border-width: .5pt;
  49   border-style: none solid none solid;
  50   padding: .25em;
  51 }
  52 body.poll table tbody tr td {
  53   text-align: center;
  54   border: .5pt solid;
  55   padding: 0 .25em;
  56 }
  57 body.poll table tbody tr td:first-child,
  58 body.poll table tbody tr td:last-child,
  59 body.poll table thead tr th:first-child,
  60 body.poll table thead tr th:last-child { border: none; }
  61
  62 body.poll table tbody tr th.name  { padding: .25em .5em; text-align: right; }
  63 body.poll table tbody tr td.yes   { background-color: #AFA; }
  64 body.poll table tbody tr td.no    { background-color: #FAA; }
  65 body.poll table tbody tr td.maybe { background-color: #FFA; }
  66
  67 body.poll table td input[type=radio] { display: none; }
  68 body.poll table td input[type=radio] + label {
  69   font-size: .875em;
  70   text-decoration: underline;
  71   color: #066;
  72   padding: .25em;
  73   margin: 0;
  74 }
  75 body.poll table td input[type=radio]:checked + label {
  76   font-weight: bold;
  77 }
  78 body.poll table td input[type=radio][value=yes]:checked + label {
  79   background-color: #AFA;
  80   margin: 0 -1.5pt;
  81 }
  82 body.poll table td input[type=radio][value=no]:checked + label {
  83   background-color: #FAA;
  84   margin: 0 -.75pt;
  85 }
  86 body.poll table td input[type=radio][value=maybe]:checked + label {
  87   background-color: #FFA;
  88   margin: 0 -1.75pt;
  89 }
  90
  91 body.newdate form {
  92   text-align: center;
  93   max-width: 100%;
  94 }
  95 body.newdate form fieldset.date,
  96 body.newdate form fieldset.timeofday,
  97 body.newdate form fieldset.splittimes {
  98   display: inline-block;
  99   vertical-align: top;
 100   margin: .5em 0 1em 0;
 101 }
 102
 103 body.newdate form { width: 26em; }
 104 body.newdate form input[name=title],
 105 body.newdate form textarea[name=description] {
 106   width: 100%;
 107 }
 108 body.newdate form fieldset.date,
 109 body.newdate form fieldset.timeofday,
 110 body.newdate form fieldset.splittimes {
 111   width: 100%;
 112 }
 113
 114 @media(min-width: 50em) {
 115   body.newdate form { width: 50em; }
 116   body.newdate form input[name=title],
 117   body.newdate form textarea[name=description] {
 118     width: 100%;
 119   }
 120   body.newdate form fieldset.date,
 121   body.newdate form fieldset.timeofday,
 122   body.newdate form fieldset.splittimes {
 123     width: 49.5%; width: calc(50% - .375ex);
 124   }
 125   body.newdate form fieldset.date { padding-right: .75em; }
 126   body.newdate form fieldset.timeofday,
 127   body.newdate form fieldset.splittimes { padding-left: .75em; }
 128 }
 129
 130 body.newdate form input[name=title],
 131 body.newdate form textarea[name=description] {
 132   display: block;
 133   margin-bottom: .75em;
 134 }
 135 body.newdate form textarea[name=description] {
 136   height: 8em;
 137 }
 138
 139 body.newdate form .date button[name=month] {
 140   display: inline-block;
 141   position: absolute;
 142   top: 0;
 143   height: 2.375em;
 144   width: 2em; width: calc(50% - 9em);
 145   padding: 0;
 146   color: transparent;
 147   background-color: transparent;
 148   border: none;
 149   overflow: hidden;
 150   z-index: 1;
 151 }
 152 body.newdate form .date button[name=month]:before {
 153   display: block;
 154   content: '<';
 155   font-size: 1.75em;
 156   font-weight: bold;
 157   color: #666;
 158   margin-top: .25em;
 159 }
 160 body.newdate form .date table + button[name=month] { right: .75em; }
 161 body.newdate form .date table + button[name=month]:before {
 162   content: '>';
 163 }
 164
 165 body.newdate form .date table.calendar {
 166   background-color: #FFF;
 167   font-size: 17pt;
 168   -vertical-align: middle;
 169 }
 170
 171 body.newdate form .timeofday label.todstart,
 172 body.newdate form .timeofday label.todend {
 173   display: inline-block;
 174   margin: 0;
 175   font-weight: bold;
 176   text-align: left;
 177   font-size: .75em;
 178   width: 49%; width: calc(50% - 2.5pt);
 179 }
 180 body.newdate form fieldset > input[name^=todstart],
 181 body.newdate form fieldset > input[name^=todend] {
 182   display: inline-block;
 183   margin: 0;
 184   width: 49%; width: calc(50% - 2.5pt);
 185   text-align: right;
 186 }
 187 body.newdate form fieldset > input[name^=todend] {
 188   width: 39%; width: calc( 50% - 4.375ex);
 189 }
 190
 191 body.newdate form fieldset button[name^=addtime] {
 192   width: 100%;
 193 }
 194
 195 body.newdate form fieldset input.splittimes { display: none;}
 196 body.newdate form fieldset input.splittimes + * { left: 12pt; }
 197 body.newdate form fieldset input.splittimes + *:before {
 198   position: absolute;
 199   width: 16pt; height: 16pt;
 200   left: -24pt;
 201   content: '';
 202   text-align: center;
 203   font-weight: bold;
 204   font-size: 1.75em;
 205   border: 1pt solid;
 206   border-radius: .25ex;
 207   background-color: #FFF;
 208 }
 209 body.newdate form fieldset input.splittimes:checked + *:before { content: '\2713'; background-color: #6AF;}
 210 body.newdate form .timeofday button[name=splittimes] { margin-top: 1.5em;}
 211
 212 body.newdate form .splittimes p { margin-top: 2em; padding: .5em; background: rgba(255,255,255,.5); }