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