Rev 38 | Rev 43 | Go to most recent revision | Show entire file | Regard whitespace | Details | Blame | Last modification | View Log | RSS feed
| Rev 38 | Rev 40 | ||
|---|---|---|---|
| Line 89... | Line 89... | ||
| 89 | 89 | ||
| 90 | #content { |
90 | #content { |
| 91 | /* position: relative; */
|
91 | /* position: relative; */
|
| 92 | }
|
92 | }
|
| 93 | 93 | ||
| - | 94 | /* 0.0 to 0.6 s */
|
|
| - | 95 | @-webkit-keyframes content {
|
|
| - | 96 | from {
|
|
| - | 97 | opacity: 0; |
|
| - | 98 | }
|
|
| - | 99 | ||
| - | 100 | /* 0.6 s */
|
|
| - | 101 | 99% { |
|
| - | 102 | opacity: 0; |
|
| - | 103 | }
|
|
| - | 104 | }
|
|
| - | 105 | ||
| - | 106 | .empty.fade-in #content { |
|
| - | 107 | -webkit-animation-name: content; |
|
| - | 108 | -webkit-animation-duration: 0.6s; |
|
| - | 109 | -webkit-animation-timing-function: linear; |
|
| - | 110 | }
|
|
| - | 111 | ||
| 94 | a {
|
112 | a {
|
| 95 | text-decoration: none; |
113 | text-decoration: none; |
| 96 | }
|
114 | }
|
| 97 | 115 | ||
| 98 | a:link:hover, |
116 | a:link:hover, |
| Line 212... | Line 230... | ||
| 212 | border-top-left-radius: 1.2em; |
230 | border-top-left-radius: 1.2em; |
| 213 | border-bottom-left-radius: 1.2em; |
231 | border-bottom-left-radius: 1.2em; |
| 214 | min-width: 10em; |
232 | min-width: 10em; |
| 215 | }
|
233 | }
|
| 216 | 234 | ||
| 217 | /* 0.0 to 1.0 s */
|
235 | /* 0.0 to 0.5 s */
|
| 218 | @-webkit-keyframes bow-top {
|
236 | @-webkit-keyframes bow-top {
|
| 219 | from {
|
237 | from {
|
| 220 | left: 90%; |
238 | left: 90%; |
| 221 | border-top-left-radius: 0; |
239 | border-top-left-radius: 0; |
| 222 | border-bottom-left-radius: 0; |
240 | border-bottom-left-radius: 0; |
| 223 | }
|
241 | }
|
| 224 | }
|
242 | }
|
| 225 | 243 | ||
| 226 | .fade-in #bow-top { |
244 | .fade-in #bow-top { |
| 227 | -webkit-animation-name: bow-top; |
245 | -webkit-animation-name: bow-top; |
| 228 | -webkit-animation-duration: 1s; |
246 | -webkit-animation-duration: 0.5s; |
| 229 | -webkit-animation-timing-function: linear; |
247 | -webkit-animation-timing-function: linear; |
| 230 | }
|
248 | }
|
| 231 | 249 | ||
| 232 | #bow-top .text { |
250 | #bow-top .text { |
| 233 | position: absolute; |
251 | position: absolute; |
| 234 | margin: 0; |
252 | margin: 0; |
| 235 | left: 4.33em; |
253 | left: 4.33em; |
| 236 | top: 0; |
254 | top: 0; |
| 237 | right: 0.65em; |
255 | right: 0.75em; |
| 238 | height: 1em; |
256 | height: 1em; |
| 239 | text-align: right; |
257 | text-align: right; |
| 240 | color: #fc0; |
258 | color: #fc0; |
| 241 | font-size: 2.4em; |
259 | font-size: 2.4em; |
| 242 | padding-right: 0.1em; |
260 | padding-right: 0.1em; |
| Line 246... | Line 264... | ||
| 246 | 264 | ||
| 247 | .empty #bow-top .text { |
265 | .empty #bow-top .text { |
| 248 | left: 0.93em; |
266 | left: 0.93em; |
| 249 | }
|
267 | }
|
| 250 | 268 | ||
| 251 | /* 0.0 to 1.0 s */
|
269 | /* 0.0 to 0.5 s */
|
| 252 | @-webkit-keyframes bow-top-text {
|
270 | @-webkit-keyframes bow-top-text {
|
| 253 | from {
|
271 | from {
|
| 254 | opacity: 0; |
272 | opacity: 0; |
| 255 | }
|
273 | }
|
| 256 | 274 | ||
| Line 260... | Line 278... | ||
| 260 | }
|
278 | }
|
| 261 | }
|
279 | }
|
| 262 | 280 | ||
| 263 | .fade-in #bow-top .text { |
281 | .fade-in #bow-top .text { |
| 264 | -webkit-animation-name: bow-top-text; |
282 | -webkit-animation-name: bow-top-text; |
| 265 | -webkit-animation-duration: 1s; |
283 | -webkit-animation-duration: 0.5s; |
| 266 | -webkit-animation-timing-function: linear; |
284 | -webkit-animation-timing-function: linear; |
| 267 | }
|
285 | }
|
| 268 | 286 | ||
| 269 | #bow-top .text span { |
287 | #bow-top .text span { |
| 270 | padding-right: 0.1em; |
288 | padding-right: 0.1em; |
| Line 283... | Line 301... | ||
| 283 | padding-top: 0.2em; |
301 | padding-top: 0.2em; |
| 284 | padding-bottom: 0.2em; |
302 | padding-bottom: 0.2em; |
| 285 | background-color: #000; |
303 | background-color: #000; |
| 286 | }
|
304 | }
|
| 287 | 305 | ||
| - | 306 | /* 0.0 to 0.5 s */
|
|
| - | 307 | @-webkit-keyframes footer {
|
|
| - | 308 | from {
|
|
| - | 309 | left: 90%; |
|
| - | 310 | border-top-left-radius: 0; |
|
| - | 311 | border-bottom-left-radius: 0; |
|
| - | 312 | }
|
|
| - | 313 | }
|
|
| - | 314 | ||
| - | 315 | .empty.fade-in #footer { |
|
| - | 316 | -webkit-animation-name: footer; |
|
| - | 317 | -webkit-animation-duration: 0.5s; |
|
| - | 318 | -webkit-animation-timing-function: linear; |
|
| - | 319 | }
|
|
| - | 320 | ||
| 288 | .empty #footer { |
321 | .empty #footer { |
| 289 | position: absolute; |
322 | position: absolute; |
| 290 | bottom: 0; |
323 | bottom: 0; |
| 291 | left: 0; |
324 | left: 0; |
| 292 | right: 0; |
325 | right: 0; |
| 293 | height: 2em; |
326 | height: 2em; |
| - | 327 | min-width: 10em; |
|
| 294 | margin-bottom: 0.2em; |
328 | margin-bottom: 0.2em; |
| 295 | background-color: #999; |
329 | background-color: #999; |
| 296 | border-radius: 1.2em; |
330 | border-radius: 1.2em; |
| 297 | line-height: 0.8; |
331 | line-height: 0.9; |
| 298 | }
|
332 | }
|
| 299 | 333 | ||
| 300 | .empty #footer .text { |
334 | .empty #footer .text { |
| 301 | position: absolute; |
335 | position: absolute; |
| 302 | bottom: 0; |
336 | margin: 0; |
| 303 | left: 0.75em; |
337 | left: 0.93em; |
| - | 338 | top: 0; |
|
| 304 | margin: 0 !important; |
339 | right: 0.75em; |
| - | 340 | height: 1em; |
|
| 305 | background-color: #000; |
341 | background-color: transparent; |
| 306 | color: #fc0; |
342 | color: #fc0; |
| 307 | padding-top: 0.1em; |
- | |
| 308 | padding-left: 0.1em; |
- | |
| 309 | padding-right: 0.1em; |
- | |
| 310 | text-transform: uppercase; |
- | |
| 311 | font-size: 2.4em; |
343 | font-size: 2.4em; |
| - | 344 | padding-right: 0.1em; |
|
| 312 | overflow: hidden; |
345 | overflow: hidden; |
| 313 | text-overflow: ellipsis; |
346 | text-overflow: ellipsis; |
| 314 | }
|
347 | }
|
| 315 | 348 | ||
| - | 349 | /* 0.0 to 0.5 s */
|
|
| - | 350 | @-webkit-keyframes footer-text {
|
|
| - | 351 | from {
|
|
| - | 352 | opacity: 0; |
|
| - | 353 | }
|
|
| - | 354 | ||
| - | 355 | /* shortly before 0.5 s */
|
|
| - | 356 | 99% { |
|
| - | 357 | opacity: 0; |
|
| - | 358 | }
|
|
| - | 359 | }
|
|
| - | 360 | ||
| - | 361 | .empty.fade-in #footer .text { |
|
| - | 362 | -webkit-animation-name: footer-text; |
|
| - | 363 | -webkit-animation-duration: 0.5s; |
|
| - | 364 | -webkit-animation-timing-function: linear; |
|
| - | 365 | }
|
|
| - | 366 | ||
| 316 | .empty #footer .text span { |
367 | .empty #footer .text span { |
| 317 | padding-right: 0.1em; |
368 | padding-right: 0.1em; |
| 318 | padding-left: 0.1em; |
- | |
| 319 | background-color: #000; |
369 | background-color: #000; |
| - | 370 | padding-left: 0.1em; |
|
| 320 | text-transform: uppercase; |
371 | text-transform: uppercase; |
| 321 | white-space: nowrap; |
372 | white-space: nowrap; |
| 322 | }
|
373 | }
|
| 323 | 374 | ||
| 324 | .empty .separator-left { |
375 | .empty .separator-left { |
| Line 345... | Line 396... | ||
| 345 | height: 3.2em; |
396 | height: 3.2em; |
| 346 | width: 9.2em; |
397 | width: 9.2em; |
| 347 | background-color: #999; |
398 | background-color: #999; |
| 348 | }
|
399 | }
|
| 349 | 400 | ||
| 350 | /* 0.0 to 1.25 s */
|
401 | /* 0.0 to 0.625 s */
|
| 351 | @-webkit-keyframes bow-top-left {
|
402 | @-webkit-keyframes bow-top-left {
|
| 352 | from {
|
403 | from {
|
| 353 | height: 0; |
404 | height: 0; |
| 354 | }
|
405 | }
|
| 355 | 406 | ||
| 356 | /* at 1.0 s */
|
407 | /* at 0.5 s */
|
| 357 | 80% { |
408 | 80% { |
| 358 | height: 0; |
409 | height: 0; |
| 359 | }
|
410 | }
|
| 360 | }
|
411 | }
|
| 361 | 412 | ||
| 362 | .fade-in #bow-top-left { |
413 | .fade-in #bow-top-left { |
| 363 | -webkit-animation-name: bow-top-left; |
414 | -webkit-animation-name: bow-top-left; |
| 364 | -webkit-animation-duration: 1.25s; |
415 | -webkit-animation-duration: 0.625s; |
| 365 | -webkit-animation-timing-function: linear; |
416 | -webkit-animation-timing-function: linear; |
| 366 | }
|
417 | }
|
| 367 | 418 | ||
| 368 | .empty #bow-top-left { |
419 | .empty #bow-top-left { |
| 369 | display: none; |
420 | display: none; |
| Line 390... | Line 441... | ||
| 390 | top: 5.4em; |
441 | top: 5.4em; |
| 391 | width: 15.4em; |
442 | width: 15.4em; |
| 392 | overflow: auto; |
443 | overflow: auto; |
| 393 | }
|
444 | }
|
| 394 | 445 | ||
| 395 | /* 0.0 to 2.25 s */
|
446 | /* 0.0 to 1.125 s */
|
| 396 | @-webkit-keyframes bow-menu {
|
447 | @-webkit-keyframes bow-menu {
|
| 397 | from {
|
448 | from {
|
| 398 | opacity: 0; |
449 | opacity: 0; |
| 399 | height: 0; |
450 | height: 0; |
| 400 | overflow: hidden; |
451 | overflow: hidden; |
| 401 | }
|
452 | }
|
| 402 | 453 | ||
| 403 | /* at ca. 1.25 s */
|
454 | /* at ca. 0.61875 s */
|
| 404 | 55% { |
455 | 55% { |
| 405 | opacity: 0; |
456 | opacity: 0; |
| 406 | }
|
457 | }
|
| 407 | 458 | ||
| 408 | 56% { |
459 | 56% { |
| Line 417... | Line 468... | ||
| 417 | }
|
468 | }
|
| 418 | 469 | ||
| 419 | .fade-in #bow .menu |
470 | .fade-in #bow .menu |
| 420 | {
|
471 | {
|
| 421 | -webkit-animation-name: bow-menu; |
472 | -webkit-animation-name: bow-menu; |
| 422 | -webkit-animation-duration: 2.25s; |
473 | -webkit-animation-duration: 1.125s; |
| 423 | -webkit-animation-timing-function: linear; |
474 | -webkit-animation-timing-function: linear; |
| 424 | }
|
475 | }
|
| 425 | 476 | ||
| 426 | #bow ul { |
477 | #bow ul { |
| 427 | margin: 0 0.2em 0.2em 0; |
478 | margin: 0 0.2em 0.2em 0; |