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