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