24b01ac4fe95b6fe78661221bff292c8b42471fa
[confetti] / style_new.css
1 * {
2   font-family: sans-serif;
3   font-weight: normal;
4   font-size: initial;
5   font-style: normal;
6   text-decoration: none;
7   line-height: 1.5em;
8   color: inherit; background: transparent;
9   padding: 0; margin: 0;
10   border: none;
11 }
12
13 body {
14   color: #000; background-color: #FFF;
15 }
16
17 p { margin-bottom: 1em; }
18
19 a {
20   text-decoration: underline;
21   font-style: italic;
22   color: #068;
23 }
24
25 i, em { font-style: italic; }
26 b, strong { font-weight: bolder; }
27 ul, ol { margin-left: 1.125em; }
28
29 h1, h2, h3 {
30   font-weight: bold;
31   margin-top: 1em;
32   margin-bottom: .5em;
33 }
34
35 h1:first-child, h2:first-child, h3:first-child,
36 p + h1, p + h2, p + h3 {
37   margin-top: 0;
38 }
39
40 h4, h5, h6, form legend {
41   font-weight: bolder;
42   margin-bottom: .25em;
43 }
44
45 h1 { font-size: 1.5em; }
46 h2 { font-size: 1.125em; }
47
48 select, input, button, textarea,
49 .control a {
50   display: inline-block;
51   background-color: #FFF;
52   border: 1pt solid;
53   padding: .25em .75em;
54   vertical-align: text-bottom;
55 }
56 .control a {
57   color: inherit;
58   font-style: normal;
59   text-decoration: none;
60 }
61
62 select { padding: .375em 0; }
63
64 input[type=radio], input[type=checkbox] {
65   vertical-align: baseline;
66 }
67
68 button, input[type=button],
69 .control a {
70   box-shadow: .125em .125em .25em;
71 }
72
73 label { margin-right: .75em; }
74 input + label {
75   margin-left: .375em;
76 }
77
78 body > form,
79 div.card,
80 div.courselist {
81   position: relative;
82   width: 98%; width: calc(100% - 2em);
83   margin-left: auto; margin-right: auto;
84   margin-bottom: 1em;
85   box-shadow: .125em .125em .25em;
86   z-index: 1;
87 }
88
89 /* HACK: put anchor point 10em above card and highlight target element */
90     div:target { box-shadow: none; z-index: 0; }
91     div:target:before {
92       content: '';
93       display: block;
94       margin-top: -10em;
95       height: 10em;
96       visibility: hidden;
97     }
98     div:target:after {
99       content: '';
100       display: block;
101       position: absolute;
102       left: 0; right: 0;
103       top: 10em; bottom: 0;
104       box-shadow: .125em .125em .25em;
105       animation: highlight 4s;
106       z-index: -1;
107     }
108     @keyframes highlight { from { background-color: #FF0; } to { background-color: transparent; } }
109 /**/
110
111 div .section, form .section {
112   display: block;
113   vertical-align: top;
114   padding: 0 1em;
115   overflow: hidden;
116   word-break: break-word;
117 }
118
119 div .section :last-child, form .section :last-child {
120   margin-bottom: 1em;
121 }
122
123 div .section h2, form .section h2,
124 div .section h3, form .section h3 { 
125   border-bottom: 1pt solid #EEE;
126 }
127 div .control, form .control {
128   background-color: #EEE;
129   padding: .25em;
130   text-align: right;
131 }
132
133 @media(min-width: 60em) {
134   div .section, form .section {
135     display: table-cell;
136     width: calc(100% / 10);
137   }
138   div .section :last-child { margin-bottom: 0; }
139   div .control, form .control {
140     background-color: transparent;
141   }
142   div .section:nth-of-type(2n) {
143     background-color: #EEE;
144   }
145 }
146 @media(min-width: 80em) {
147   div .control, form .control {
148     display: table-cell;
149     width: calc(100% / 10);
150   }
151   div .control .item, form .control .item {
152     display: block;
153     margin-bottom: .25em;
154   }
155 }
156
157 div .section .item, form .section .item,
158 form .section.attendance > label {
159   display: block;
160   width: 100%;
161 }
162
163 form .section .item {
164   margin-bottom: .25em;
165 }
166
167 form .section button[value^=addfield] {
168   font-size: .75em;
169   margin-top: .5em; padding: 0 .375em;
170 }
171
172 form input.delete { display: none; }
173 form input.delete + label {
174   float: right;
175   font-size: .75em;
176   line-height: 1;
177   max-width: .75em; height: .875em; overflow: hidden;
178   color: #FBB; background-color: #444;
179   margin: 0; padding: .125em .5em 0 .5em;
180   border-radius: 4pt 4pt 0 0;
181   transition: max-width .3s;
182 }
183 form input.delete + label:before  { content: '\274c '; margin-right: .5em; }
184 form input.delete + label:hover   { max-width: 10em; }
185 -form input.delete + label:hover:before { content: ''; }
186 -form input.delete + label:hover:after  { content: ' \274c'; }
187 form input.delete:checked + label,
188 form input.delete:checked + label + * {
189   display: none;
190 }
191
192 form .control {
193   position: relative;
194   padding-left: 11em;
195   padding-top: 1.5em;
196 }
197 form .control .item {
198   display: inline-block;
199   margin-bottom: .25em;
200   vertical-align: text-bottom;
201 }
202
203 form .control .item.newfield {
204   box-shadow: .125em .125em .25em;
205 }
206 form .control .item.newfield select {
207   margin-right: -1pt;
208 }
209 form .control .item.newfield button {
210   box-shadow: none;
211 }
212
213 form .control .item.delete {
214   position: absolute;
215   bottom: .375em; left: .25em; width: auto;
216   padding-bottom: calc(2.25em + 2pt);
217 }
218
219 @media(min-width: 80em) {
220   form .control { padding: .25em; min-height: 16em; }
221   form .control .item { width: 100%; }
222   form .control .item.newfield select { width: calc(100% - 2.5em); }
223   form .control .item.delete { bottom: .125em; right: .25em; }
224 }
225 form .control .item.delete input + label + button {
226   display: none;
227   position: absolute;
228   bottom: 0; width: 100%;
229   color: #800;
230   background-color: #FEE;
231   z-index: 1;
232 }
233 form .control .item.delete:after {
234   content: attr(label);
235   display: block;
236   position: absolute;
237   bottom: 0; width: 100%;
238   text-align: center;
239   color: #BAA;
240   padding: .25em 0;
241   border: 1pt solid;
242   box-shadow: .125em .125em .25em;
243 }
244 form .control .item.delete input:checked + label + button { display: block; }