-body.home form {
+body {
+ background-size: 4pt 4pt;
+ background-image: /* #6AF #6FF */
+ linear-gradient( 0deg, transparent 25%, rgba(102,170,255,.5) 25% 50%, transparent 50% 75%, rgba(102,255,255,.5) 75%),
+ linear-gradient(90deg, transparent 25%, rgba(102,170,255,.5) 25% 50%, transparent 50% 75%, rgba(102,255,255,.5) 75%);
+}
+
+body > main {
+ background-color: rgba(255,255,255,.75) ;
+ padding: 1em; margin: 1em auto 1em auto;
+ border-radius: .5ex;
+ box-shadow: #000 .125em .125em 1em;
+}
+
+body.home main {
position: fixed;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
-body.newdate form {
+body.poll main {
text-align: center;
+ max-width: 95%;
+}
+body section {
+ max-width: 50em;
+ padding: 1em;
+ margin: 1em auto;
+ background-color: rgba(255,255,255,.5);
+ word-wrap: break-word;
+}
+body.poll .description {
+ margin-top: 0;
+ text-align: left;
+}
+body.poll .description .title {
+ margin-top: 0;
+ text-align: center;
+}
+body.poll table {
+ display: block;
+ max-width 100%;
+ overflow-x: auto;
+
+ background-color: rgba(255,255,255,.5);
+ border-collapse: collapse;
margin: auto;
+ box-shadow: #000 .25em .25em .5em;
+ border-radius: 2pt;
+}
+
+body.poll table thead tr.dates th {
+ padding: .25em;
+}
+body.poll table thead tr.tod th {
+ border-width: .5pt;
+ border-style: none solid none solid;
+ padding: .25em;
+}
+body.poll table tbody tr td {
+ text-align: center;
+ border: .5pt solid;
+ padding: 0 .25em;
+ background-clip: padding-box;
+}
+body.poll table tbody tr td:first-child,
+body.poll table tbody tr td:last-child,
+body.poll table thead tr th:first-child,
+body.poll table thead tr th:last-child { border: none; }
+
+body.poll table tbody tr th.name { padding: .25em .5em; text-align: right; }
+body.poll table tbody tr td.yes { background-color: #AFA; }
+body.poll table tbody tr td.no { background-color: #FAA; }
+body.poll table tbody tr td.maybe { background-color: #FFA; }
+body.poll table tbody tr td.edit { text-align: left; font-size: .875em; }
+
+body.poll table tbody tr.votecount td { padding: .375em .25em;}
+body.poll table tbody tr th.name button[name=delete] { font-size: .625em; line-height: 1.5em; background-color: #FAA; }
+
+body.poll table tbody tr.new td:first-child { text-align: right; }
+body.poll table tbody tr.new td input[name=name] { min-width: 100%; width: 8em; }
+
+body.poll table td input[type=radio] { display: none; }
+body.poll table td input[type=radio] + label {
+ font-size: .875em;
+ text-decoration: underline;
+ color: #066;
+ padding: .25em;
+ margin: 0;
+}
+body.poll table td input[type=radio]:checked + label {
+ font-weight: bold;
+}
+body.poll table td input[type=radio][value=yes]:checked + label {
+ background-color: #AFA;
+ margin: 0 -1.5pt;
+}
+body.poll table td input[type=radio][value=no]:checked + label {
+ background-color: #FAA;
+ margin: 0 -.75pt;
+}
+body.poll table td input[type=radio][value=maybe]:checked + label {
+ background-color: #FFA;
+ margin: 0 -1.75pt;
+}
+
+body.newdate main {
+ text-align: center;
max-width: 100%;
}
body.newdate form fieldset.date,
-body.newdate form fieldset.timeofday {
+body.newdate form fieldset.timeofday,
+body.newdate form fieldset.splittimes {
display: inline-block;
vertical-align: top;
+ margin: .5em 0 1em 0;
}
-body.newdate form { width: 24em; }
+body.newdate main { width: 26em; }
body.newdate form input[name=title],
body.newdate form textarea[name=description] {
width: 100%;
}
body.newdate form fieldset.date,
-body.newdate form fieldset.timeofday {
+body.newdate form fieldset.timeofday,
+body.newdate form fieldset.splittimes {
width: 100%;
}
-@media(min-width: 48em) {
- body.newdate form { width: 48em; }
+@media(min-width: 50em) {
+ body.newdate main { width: 50em; }
body.newdate form input[name=title],
body.newdate form textarea[name=description] {
width: 100%;
}
body.newdate form fieldset.date,
- body.newdate form fieldset.timeofday {
+ body.newdate form fieldset.timeofday,
+ body.newdate form fieldset.splittimes {
width: 49.5%; width: calc(50% - .375ex);
}
+ body.newdate form fieldset.date { padding-right: .75em; }
+ body.newdate form fieldset.timeofday,
+ body.newdate form fieldset.splittimes { padding-left: .75em; }
+ body.poll table { display: table;}
}
body.newdate form input[name=title],
body.newdate form .date button[name=month] {
display: inline-block;
- padding: 0;
- height: 3.25em;
+ position: absolute;
+ top: 0;
+ height: 2.375em;
width: 2em; width: calc(50% - 9em);
- vertical-align: middle;
+ padding: 0;
color: transparent;
- overflow: hidden;
+ background-color: transparent;
border: none;
+ overflow: hidden;
+ z-index: 1;
}
body.newdate form .date button[name=month]:before {
display: block;
content: '<';
- font-size: 2em;
+ font-size: 1.75em;
font-weight: bold;
- margin-top: .375em;
color: #666;
+ margin-top: .25em;
}
+body.newdate form .date table + button[name=month] { right: .75em; }
body.newdate form .date table + button[name=month]:before {
content: '>';
}
body.newdate form .date table.calendar {
- vertical-align: middle;
+ background-color: #FFF;
+ font-size: 17pt;
+ -vertical-align: middle;
}
body.newdate form .timeofday label.todstart,
font-weight: bold;
text-align: left;
font-size: .75em;
- width: 49%; width: calc(50% - .5ex);
+ width: 49%; width: calc(50% - 2.5pt);
}
-body.newdate form .timeofday > input[name=todstart],
-body.newdate form .timeofday > input[name=todend] {
+body.newdate form fieldset > input[name^=todstart],
+body.newdate form fieldset > input[name^=todend] {
display: inline-block;
margin: 0;
- width: 49%; width: calc(50% - .5ex);
+ width: 49%; width: calc(50% - 2.5pt);
text-align: right;
}
-body.newdate form .timeofday > input[name=todend] {
- width: 40%; width: calc(50% - 4.375ex);
+body.newdate form fieldset > input[name^=todend] {
+ width: 39%; width: calc( 50% - 4.375ex);
}
-body.newdate form .timeofday button[name=addtime] {
+body.newdate form fieldset button[name^=addtime] {
width: 100%;
}
+
+body.newdate form fieldset input.splittimes { display: none;}
+body.newdate form fieldset input.splittimes + * { left: 12pt; }
+body.newdate form fieldset input.splittimes + *:before {
+ position: absolute;
+ width: 16pt; height: 16pt;
+ left: -24pt;
+ content: '';
+ text-align: center;
+ font-weight: bold;
+ font-size: 1.75em;
+ border: 1pt solid;
+ border-radius: .25ex;
+ background-color: #FFF;
+}
+body.newdate form fieldset input.splittimes:checked + *:before { content: '\2713'; background-color: #6AF;}
+body.newdate form .timeofday button[name=splittimes] { margin-top: 1.5em;}
+
+body.newdate form .splittimes p { margin-top: 2em; padding: .5em; background: rgba(255,255,255,.5); }
+
+body.newdate form #delconfirm {
+ margin-left: -6em;
+}
+body.newdate form #delconfirm + label:after {
+ content: '\0A';
+ white-space: pre;
+}
+body.newdate form #delconfirm + label + button {
+ pointer-events: none;
+ color: #AAA;
+ border-color: #AAA;
+}
+body.newdate form #delconfirm:checked + label + button {
+ pointer-events: auto;
+ color: inherit;
+ border-color: inherit;
+ background-color: #FDD;
+}
projects / webpoll / blobdiff