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: 48em) {
  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 }
  56
  57 body.newdate form input[name=title],
  58 body.newdate form textarea[name=description] {
  59   display: block;
  60   margin-bottom: .75em;
  61 }
  62 body.newdate form textarea[name=description] {
  63   height: 8em;
  64 }
  65
  66 body.newdate form .date button[name=month] {
  67   display: inline-block;
  68   position: absolute;
  69   top: 0;
  70   height: 2.375em;
  71   width: 2em; width: calc(50% - 9em);
  72   padding: 0;
  73   color: transparent;
  74   background-color: transparent;
  75   border: none;
  76   overflow: hidden;
  77   z-index: 1;
  78 }
  79 body.newdate form .date button[name=month]:before {
  80   display: block;
  81   content: '<';
  82   font-size: 1.75em;
  83   font-weight: bold;
  84   color: #666;
  85   margin-top: .25em;
  86 }
  87 body.newdate form .date table + button[name=month] { right: 0; }
  88 body.newdate form .date table + button[name=month]:before {
  89   content: '>';
  90 }
  91
  92 body.newdate form .date table.calendar {
  93   background-color: #FFF;
  94   font-size: 17.5pt;
  95   -vertical-align: middle;
  96 }
  97
  98 body.newdate form .timeofday label.todstart,
  99 body.newdate form .timeofday label.todend {
 100   display: inline-block;
 101   margin: 0;
 102   font-weight: bold;
 103   text-align: left;
 104   font-size: .75em;
 105   width: 49%; width: calc(50% - .5ex);
 106 }
 107 body.newdate form fieldset > input[name^=todstart],
 108 body.newdate form fieldset > input[name^=todend] {
 109   display: inline-block;
 110   margin: 0;
 111   width: 49%; width: calc(50% - .5ex);
 112   text-align: right;
 113 }
 114 body.newdate form fieldset > input[name^=todend] {
 115   width: 40%; widtfieldset% - 4.375ex);
 116 }
 117
 118 body.newdate form fieldset button[name^=addtime] {
 119   width: 100%;
 120 }
 121
 122 body.newdate form fieldset input.splittimes { display: none;}
 123 body.newdate form fieldset input.splittimes + * { left: 12pt; }
 124 body.newdate form fieldset input.splittimes + *:before {
 125   position: absolute;
 126   width: 16pt; height: 16pt;
 127   left: -24pt;
 128   content: '';
 129   text-align: center;
 130   font-weight: bold;
 131   font-size: 1.75em;
 132   border: 1pt solid;
 133   border-radius: .25ex;
 134   background-color: #FFF;
 135 }
 136 body.newdate form fieldset input.splittimes:checked + *:before { content: '\2713'; background-color: #6AF;}
 137 body.newdate form .timeofday button[name=splittimes] { margin-top: 1.5em;}
 138