diff options
-rw-r--r-- | style.css | 81 |
1 files changed, 39 insertions, 42 deletions
@@ -67,23 +67,21 @@ h2 { | |||
67 | 67 | ||
68 | .circle_num { | 68 | .circle_num { |
69 | float: left; | 69 | float: left; |
70 | width: 1.2em; | 70 | width: 40px; |
71 | height: 1.2em; | 71 | height: 40px; |
72 | line-height: 1.2em; | 72 | line-height: 1.2em; |
73 | font-size: 0.8em; | 73 | font-size: 23pt; |
74 | border-radius: 50%; | 74 | border-radius: 50%; |
75 | border: solid #F1F2E3 2px; | 75 | transition: border-radius, 2s; |
76 | margin: 0 1em 0 0; | 76 | border: 0px; |
77 | margin: 0 28px 0 0; | ||
77 | text-align: center; | 78 | text-align: center; |
78 | background-color: #F1F2E3; | 79 | background-color: #F1F2E3; |
79 | font-weight: normal; | 80 | font-weight: normal; |
80 | } | 81 | } |
81 | 82 | ||
82 | .block-header, .juice { | 83 | .block-header, .juice { |
83 | min-width: 480px; | 84 | width: 480px; |
84 | width: 50%; | ||
85 | max-width: 640px; | ||
86 | |||
87 | margin: 0.5em auto 0 auto; | 85 | margin: 0.5em auto 0 auto; |
88 | } | 86 | } |
89 | 87 | ||
@@ -125,61 +123,57 @@ h2 { | |||
125 | 123 | ||
126 | .block-step1 .circle_num { | 124 | .block-step1 .circle_num { |
127 | background-color: #403040; | 125 | background-color: #403040; |
128 | width: 40px; | ||
129 | height: 40px; | ||
130 | color: #F1F2E3; | 126 | color: #F1F2E3; |
131 | font-size: 21pt; | 127 | margin: 4px 28px 0 0; |
132 | margin-top: 0.2em; | 128 | line-height: 1.3em; |
133 | line-height: 1.5em; | ||
134 | } | 129 | } |
135 | 130 | ||
136 | |||
137 | .block-step2 { | 131 | .block-step2 { |
138 | background-color: #403040; | 132 | background-color: #047e7c; |
139 | } | 133 | } |
140 | 134 | ||
141 | .block-step2 .circle_num { | 135 | .block-step2 .circle_num { |
142 | color: #403040; | 136 | color: #047e7c; |
143 | } | 137 | } |
144 | 138 | ||
145 | .block-step3 { | 139 | .block-step3 { |
146 | background-color: #564073; | 140 | background-color: #0c6d74; |
147 | } | 141 | } |
148 | 142 | ||
149 | .block-step3 .circle_num { | 143 | .block-step3 .circle_num { |
150 | color: #564073; | 144 | color: #0c6d74; |
151 | } | 145 | } |
152 | 146 | ||
153 | .block-step4 { | 147 | .block-step4 { |
154 | background-color: #6A59A4; | 148 | background-color: #145c6c; |
155 | } | 149 | } |
156 | 150 | ||
157 | .block-step4 .circle_num { | 151 | .block-step4 .circle_num { |
158 | color: #6A59A4; | 152 | color: #145c6c; |
159 | } | 153 | } |
160 | 154 | ||
161 | .block-step5 { | 155 | .block-step5 { |
162 | background-color: #7CA8D7; | 156 | background-color: #1c4b64; |
163 | } | 157 | } |
164 | 158 | ||
165 | .block-step5 .circle_num { | 159 | .block-step5 .circle_num { |
166 | color: #7CA8D7; | 160 | color: #1c4b64; |
167 | } | 161 | } |
168 | 162 | ||
169 | .block-step6 { | 163 | .block-step6 { |
170 | background-color: #D0B66B; | 164 | background-color: #243a5c; |
171 | } | 165 | } |
172 | 166 | ||
173 | .block-step6 .circle_num { | 167 | .block-step6 .circle_num { |
174 | color: #D0B66B; | 168 | color: #243a5c; |
175 | } | 169 | } |
176 | 170 | ||
177 | .block-step7 { | 171 | .block-step7 { |
178 | background-color: #70B5A9; | 172 | background-color: #2c2954; |
179 | } | 173 | } |
180 | 174 | ||
181 | .block-step7 .circle_num { | 175 | .block-step7 .circle_num { |
182 | color: #70B5A9; | 176 | color: #2c2954; |
183 | 177 | ||
184 | } | 178 | } |
185 | 179 | ||
@@ -197,13 +191,13 @@ h2 { | |||
197 | } | 191 | } |
198 | 192 | ||
199 | .block-step2, .block-step3, .block-step4, .block-step5, .block-step6, .block-step7 { | 193 | .block-step2, .block-step3, .block-step4, .block-step5, .block-step6, .block-step7 { |
200 | box-shadow: inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75); | 194 | box-shadow: inset 0px 8px 6px -5px rgba(0, 0, 0, 0.5); |
201 | } | 195 | } |
202 | 196 | ||
203 | .two-buttons, | 197 | .two-buttons, |
204 | .one-button { | 198 | .one-button { |
205 | height: 4em; | 199 | height: 4em; |
206 | margin: 3em 0 0.5em 0; | 200 | margin: 2.5em 0 0 0; |
207 | } | 201 | } |
208 | 202 | ||
209 | .button { | 203 | .button { |
@@ -222,12 +216,12 @@ h2 { | |||
222 | 216 | ||
223 | .button-small { | 217 | .button-small { |
224 | background-color: white; | 218 | background-color: white; |
225 | color: black; | 219 | color: #222; |
226 | font-weight: normal; | 220 | font-weight: normal; |
227 | font-size: 13pt; | 221 | font-size: 13pt; |
228 | display: inline-block; | 222 | display: inline-block; |
229 | border-radius: 4px; | 223 | border-radius: 4px; |
230 | padding: 0.1em 0.3em 0.1em 0.3em; | 224 | padding: 0.2em 0.4em 0.2em 0.4em; |
231 | margin: 0 0.4em 1em 0; | 225 | margin: 0 0.4em 1em 0; |
232 | cursor: pointer; | 226 | cursor: pointer; |
233 | transition-duration: 0.2s; | 227 | transition-duration: 0.2s; |
@@ -280,7 +274,9 @@ ul { | |||
280 | } | 274 | } |
281 | 275 | ||
282 | .footer { | 276 | .footer { |
283 | background-color: #4A5D67; | 277 | /* background-color: #42425A; */ |
278 | background-color: #F1F2E3; | ||
279 | box-shadow: inset 0px 12px 6px -6px rgba(0, 0, 0, 0.5); | ||
284 | color: #8E99A0; | 280 | color: #8E99A0; |
285 | font-size: 13pt; | 281 | font-size: 13pt; |
286 | font-weight: 300; | 282 | font-weight: 300; |
@@ -347,10 +343,10 @@ input[type="text"] { | |||
347 | border: solid 1px silver; | 343 | border: solid 1px silver; |
348 | border-radius: 4px; | 344 | border-radius: 4px; |
349 | font-family: 'SourceSansPro', sans-serif; | 345 | font-family: 'SourceSansPro', sans-serif; |
350 | font-size: 14pt; | 346 | font-size: 13pt; |
351 | font-weight: normal; | 347 | font-weight: normal; |
352 | padding: 0.3em; | 348 | padding: 0.4em 0.6em 0.4em 0.6em; |
353 | margin-bottom: 0.5em; | 349 | margin-bottom: 0.7em; |
354 | } | 350 | } |
355 | 351 | ||
356 | select.tag { | 352 | select.tag { |
@@ -372,6 +368,7 @@ select.zeit { | |||
372 | 368 | ||
373 | select { | 369 | select { |
374 | height: 2em; | 370 | height: 2em; |
371 | font-family: 'SourceSansPro', sans-serif; | ||
375 | font-size: 13pt; | 372 | font-size: 13pt; |
376 | font-weight: 300; | 373 | font-weight: 300; |
377 | border-radius: 4px; | 374 | border-radius: 4px; |
@@ -390,8 +387,8 @@ input[type=checkbox]:not(old) + label { | |||
390 | display : inline-block; | 387 | display : inline-block; |
391 | margin-left : 0; | 388 | margin-left : 0; |
392 | line-height : 1.7em; | 389 | line-height : 1.7em; |
393 | text-indent : -60px; /* Make 2nd line of label align, takes border width of tickbox into account */ | 390 | text-indent : -68px; /* Make 2nd line of label align, takes border width of tickbox into account */ |
394 | padding-left : 60px; | 391 | padding-left : 68px; |
395 | } | 392 | } |
396 | 393 | ||
397 | input[type=checkbox]:not(old) + label > span { | 394 | input[type=checkbox]:not(old) + label > span { |
@@ -399,7 +396,7 @@ input[type=checkbox]:not(old) + label > span { | |||
399 | width : 30px; | 396 | width : 30px; |
400 | height : 30px; | 397 | height : 30px; |
401 | background-color : rgba(255, 255, 255, 0.30); | 398 | background-color : rgba(255, 255, 255, 0.30); |
402 | margin : 2px 28px 8px 2px; | 399 | margin : 2px 36px 8px 2px; |
403 | border : 0px solid rgba(255, 255, 255, 0.30); | 400 | border : 0px solid rgba(255, 255, 255, 0.30); |
404 | border-radius : 25%; | 401 | border-radius : 25%; |
405 | vertical-align : top; | 402 | vertical-align : top; |
@@ -418,7 +415,7 @@ input[type=checkbox]:not(old):checked + label > span:before { | |||
418 | color : white; | 415 | color : white; |
419 | text-align : left; | 416 | text-align : left; |
420 | font-weight : bold; | 417 | font-weight : bold; |
421 | margin-left : 127px; | 418 | margin-left : 144px; |
422 | } | 419 | } |
423 | 420 | ||
424 | #wrapper.stepcancel .block-stepcancel .juice, | 421 | #wrapper.stepcancel .block-stepcancel .juice, |
@@ -435,11 +432,11 @@ input[type=checkbox]:not(old):checked + label > span:before { | |||
435 | } | 432 | } |
436 | 433 | ||
437 | #wrapper.step4 .block-step4 .juice { | 434 | #wrapper.step4 .block-step4 .juice { |
438 | max-height: 950px; | 435 | max-height: 1200px; |
439 | } | 436 | } |
440 | 437 | ||
441 | #wrapper.step5 .block-step5 .juice { | 438 | #wrapper.step5 .block-step5 .juice { |
442 | max-height: 800px; | 439 | max-height: 1200px; |
443 | } | 440 | } |
444 | 441 | ||
445 | #wrapper.step6 .block-step6 .juice { | 442 | #wrapper.step6 .block-step6 .juice { |
@@ -471,7 +468,7 @@ input[type=checkbox]:not(old):checked + label > span:before { | |||
471 | } | 468 | } |
472 | 469 | ||
473 | #wrapper.step5 .block-step5 .juice { | 470 | #wrapper.step5 .block-step5 .juice { |
474 | max-height: 1050px; | 471 | max-height: 1200px; |
475 | } | 472 | } |
476 | 473 | ||
477 | #wrapper.step6 .block-step6 .juice { | 474 | #wrapper.step6 .block-step6 .juice { |