| OLD | NEW |
|---|
| (Empty) |
| 1 /* Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file */ | |
| 2 /* for details. All rights reserved. Use of this source code is governed by a */ | |
| 3 /* BSD-style license that can be found in the LICENSE file. */ | |
| 4 | |
| 5 @include "../../view/resources/view.css" | |
| 6 | |
| 7 @include "../../touch/resources/touch.css" | |
| 8 | |
| 9 html { | |
| 10 height: 100%; | |
| 11 width: 100%; | |
| 12 } | |
| 13 | |
| 14 body { | |
| 15 background: white; | |
| 16 font-weight: normal; | |
| 17 font-family: arial,sans-serif; | |
| 18 font-size: 13px; | |
| 19 margin: 0 0 0 0; | |
| 20 height: 100%; | |
| 21 width: 100%; | |
| 22 color: #222; | |
| 23 overflow: hidden; | |
| 24 -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| 25 } | |
| 26 | |
| 27 h1 { | |
| 28 font-family: arial,sans-serif; | |
| 29 font-size: 36px; | |
| 30 color: #72c3f2; | |
| 31 text-align: center; | |
| 32 margin-bottom: 0; | |
| 33 } | |
| 34 | |
| 35 h2 { | |
| 36 font-size: 16px; | |
| 37 font-weight: normal; | |
| 38 text-overflow: ellipsis; | |
| 39 text-wrap: none; | |
| 40 white-space: nowrap; | |
| 41 } | |
| 42 | |
| 43 button { | |
| 44 vertical-align: top; | |
| 45 } | |
| 46 | |
| 47 /* Remove the blue outer glow from focused divs. */ | |
| 48 div { | |
| 49 outline: none; | |
| 50 } | |
| 51 | |
| 52 input { | |
| 53 resize: none; | |
| 54 border: inset #aaa 1px; | |
| 55 margin: 2px; | |
| 56 padding: 1px 2px 2px 2px; | |
| 57 overflow: hidden; | |
| 58 white-space: nowrap; | |
| 59 } | |
| 60 | |
| 61 .sm-root.hidden { | |
| 62 -webkit-transform: translate3d(0, 40px, 0); | |
| 63 } | |
| 64 | |
| 65 input:focus { | |
| 66 border: solid #88f 2px; | |
| 67 outline: none; | |
| 68 margin: 1px; | |
| 69 } | |
| 70 | |
| 71 .front-view { | |
| 72 background: white; | |
| 73 overflow: hidden; | |
| 74 } | |
| 75 | |
| 76 .bottom-view { | |
| 77 position: absolute; | |
| 78 left: 0; | |
| 79 top: 51px; | |
| 80 bottom: 0; | |
| 81 } | |
| 82 | |
| 83 .top-view { | |
| 84 position: absolute; | |
| 85 left: 0; | |
| 86 right: 0; | |
| 87 z-index: 30; | |
| 88 overflow: hidden; | |
| 89 -webkit-transition-duration: 0.45s; | |
| 90 } | |
| 91 | |
| 92 .query { | |
| 93 position: absolute; | |
| 94 -webkit-transition-duration: 0.45s; | |
| 95 top: 0; | |
| 96 width: 257px; | |
| 97 bottom: 0; | |
| 98 background: white; | |
| 99 border-left: 1px solid #F5F5F5; | |
| 100 border-right: 1px solid #F5F5F5; | |
| 101 } | |
| 102 | |
| 103 .query.sel { | |
| 104 z-index: 29 !important; | |
| 105 border-left: 1px solid #D2D2D2; | |
| 106 border-right: 1px solid #D2D2D2; | |
| 107 visibility: visible !important; | |
| 108 opacity: 1 !important; | |
| 109 } | |
| 110 | |
| 111 .query h2 { | |
| 112 color: #1155CC; | |
| 113 padding: 20px 16px 16px 16px; | |
| 114 left: 0; | |
| 115 right: 0; | |
| 116 overflow: hidden; | |
| 117 text-overflow: ellipsis; | |
| 118 margin: 0; | |
| 119 box-sizing: border-box; | |
| 120 ms-box-sizing: border-box; | |
| 121 -webkit-box-sizing: border-box; | |
| 122 z-index: 10; | |
| 123 position: absolute; | |
| 124 font: bold 14px Arial, sans-serif; | |
| 125 } | |
| 126 | |
| 127 .query-name-shadow { | |
| 128 position: absolute; | |
| 129 left: 0; | |
| 130 right: 0; | |
| 131 height: 15px; | |
| 132 top: 39px; | |
| 133 background: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,
255,0)), to(rgba(255,255,255, 1))); | |
| 134 overflow: hidden; | |
| 135 z-index: 3; | |
| 136 } | |
| 137 | |
| 138 .section-view { | |
| 139 -webkit-transition-property: -webkit-transform, opacity; | |
| 140 -webkit-transition-duration: 0.45s; | |
| 141 opacity: 0.6; | |
| 142 position: absolute; | |
| 143 left: 0; | |
| 144 right: 0; | |
| 145 top: 51px; | |
| 146 bottom: 0; | |
| 147 overflow: hidden; | |
| 148 } | |
| 149 | |
| 150 .loading-section { | |
| 151 position: absolute; | |
| 152 left: 0; | |
| 153 right: 0; | |
| 154 top: 0; | |
| 155 bottom: 0; | |
| 156 } | |
| 157 | |
| 158 .touch-scrollbar { | |
| 159 position: absolute; | |
| 160 background: #888; | |
| 161 opacity: 0.4; | |
| 162 -webkit-transition-property: opacity; | |
| 163 -webkit-transition-duration: 0.3s; | |
| 164 z-index: 1000; | |
| 165 } | |
| 166 | |
| 167 .touch-scrollbar.drag, | |
| 168 .touch-scrollbar:hover { | |
| 169 opacity: 0.8; | |
| 170 } | |
| 171 | |
| 172 .story-section { | |
| 173 margin-left: 0; | |
| 174 margin-right: 0; | |
| 175 left: 0; | |
| 176 right: 0; | |
| 177 top: 39px; | |
| 178 bottom: 0; | |
| 179 overflow: hidden; | |
| 180 position: absolute; | |
| 181 } | |
| 182 | |
| 183 .story { | |
| 184 position: absolute; | |
| 185 left: 0; | |
| 186 right: 0; | |
| 187 box-sizing: border-box; | |
| 188 ms-box-sizing: border-box; | |
| 189 -webkit-box-sizing: border-box; | |
| 190 margin: 0; | |
| 191 border: 1px solid #F5F5F5; | |
| 192 line-height: 18px; | |
| 193 /* This is needed when there is no caption. Since the other elements are | |
| 194 absolutely positioned, the story will collapse to nothing without this. */ | |
| 195 min-height: 92px; | |
| 196 } | |
| 197 | |
| 198 .story:active, | |
| 199 .story.sel { | |
| 200 box-shadow:inset 4px 0 4px -2px #4d90f0; | |
| 201 -webkit-box-shadow:inset 4px 0 4px -2px #4d90f0; | |
| 202 } | |
| 203 | |
| 204 .story img { | |
| 205 position: absolute; | |
| 206 width: 57px; | |
| 207 height: 57px; | |
| 208 z-index: 20; | |
| 209 -webkit-transition-property: opacity; | |
| 210 -webkit-transition-duration: 0.45s; | |
| 211 | |
| 212 opacity: 0.6; | |
| 213 } | |
| 214 | |
| 215 .snippet, | |
| 216 .story .title { | |
| 217 white-space: nowrap; | |
| 218 text-overflow: ellipsis; | |
| 219 overflow: hidden; | |
| 220 } | |
| 221 | |
| 222 .snippet { | |
| 223 margin-top: -5px; | |
| 224 font: normal 13px arial,sans-serif; | |
| 225 line-height: 18px; | |
| 226 opacity: 0.6; | |
| 227 } | |
| 228 | |
| 229 .story .title { | |
| 230 font-weight: bold; | |
| 231 margin-left: 75px; | |
| 232 line-height: 18px; | |
| 233 /* TODO(rnystrom): The following prevents it from running over the byline, but | |
| 234 it cuts off part of the title if it's longer than two lines. */ | |
| 235 height: 38px; | |
| 236 opacity: 0.6; | |
| 237 } | |
| 238 | |
| 239 .story.no-thumb .title, | |
| 240 .story.no-thumb .byline { | |
| 241 left: 16px; | |
| 242 } | |
| 243 | |
| 244 .story-shadow { | |
| 245 position: absolute; | |
| 246 left: 2px; | |
| 247 right: 2px; | |
| 248 height: 31px; | |
| 249 top: -32px; | |
| 250 overflow: hidden; | |
| 251 z-index: 2; | |
| 252 } | |
| 253 | |
| 254 .story .byline, | |
| 255 .story .dateline { | |
| 256 color: #999; | |
| 257 font-size: 12px; | |
| 258 line-height: 18px; | |
| 259 } | |
| 260 | |
| 261 .story .dateline { | |
| 262 position: relative; | |
| 263 top: -18px; | |
| 264 } | |
| 265 | |
| 266 /* TODO(jacobr): handle intersection with byline better... */ | |
| 267 .story .dateline { | |
| 268 text-align: right; | |
| 269 opacity: 0.6; | |
| 270 line-height: 18px; | |
| 271 } | |
| 272 | |
| 273 .story .byline { | |
| 274 margin-left: 75px; | |
| 275 text-overflow: ellipsis; | |
| 276 white-space: nowrap; | |
| 277 opacity: 0.6; | |
| 278 display: inline-box; | |
| 279 } | |
| 280 | |
| 281 /* TODO(jacobr): this is backwards. we should have a read classname instead */ | |
| 282 .story.story-unread .dateline, | |
| 283 .story.story-unread .text, | |
| 284 .story.story-unread .title, | |
| 285 .story.story-unread .byline, | |
| 286 .story.story-unread img, | |
| 287 .story.story-unread .caption { | |
| 288 opacity: 1; | |
| 289 } | |
| 290 | |
| 291 .story .text { | |
| 292 top: 3px; | |
| 293 height: 90px; | |
| 294 opacity: 0.6; | |
| 295 } | |
| 296 | |
| 297 .story { | |
| 298 position: absolute; | |
| 299 left: 0; | |
| 300 right: 0; | |
| 301 padding: 16px; | |
| 302 overflow: hidden; | |
| 303 } | |
| 304 | |
| 305 .story-view { | |
| 306 position: absolute; | |
| 307 left: 260px; | |
| 308 right: 0; | |
| 309 top: 51px; | |
| 310 bottom: 0; | |
| 311 line-height: 18px; | |
| 312 overflow: hidden; | |
| 313 | |
| 314 -webkit-animation-timing-function: ease-in; | |
| 315 -webkit-transition-duration: 0.45s; | |
| 316 -webkit-text-size-adjust: none; | |
| 317 } | |
| 318 | |
| 319 .paged-column { | |
| 320 position: absolute; | |
| 321 top: 100px; | |
| 322 left: 20px; | |
| 323 bottom: 45px; /* so it doesn't overlap with the page-number */ | |
| 324 right: 20px; | |
| 325 } | |
| 326 | |
| 327 .page-number { | |
| 328 position: absolute; | |
| 329 z-index: 1; | |
| 330 right: -40px; | |
| 331 bottom: -40px; | |
| 332 padding-left: 0px; | |
| 333 padding-top: 0px; | |
| 334 padding-right: 50px; | |
| 335 padding-bottom: 50px; | |
| 336 background: white; | |
| 337 box-shadow: -16px -16px 24px white; | |
| 338 -webkit-box-shadow: -16px -16px 24px white; | |
| 339 font-size: 16px; | |
| 340 color: rgba(0, 0, 0, 0.5); | |
| 341 text-align: center; | |
| 342 /* prevent accidental text selection if user clicks fast */ | |
| 343 -webkit-user-select: none; | |
| 344 } | |
| 345 | |
| 346 .page-number-left, .page-number-right { | |
| 347 min-width: 25px; /* for bigger click area */ | |
| 348 font-size: 22px; | |
| 349 font-weight: bold; | |
| 350 } | |
| 351 | |
| 352 .page-number-label { | |
| 353 min-width: 60px; | |
| 354 } | |
| 355 | |
| 356 .story-content { | |
| 357 -webkit-column-width: 300px; | |
| 358 -webkit-column-gap: 26px; /* 2em */ | |
| 359 } | |
| 360 | |
| 361 /* | |
| 362 * Styles to get the right look for images in the column layout. | |
| 363 * | |
| 364 * These are set to "!important" to replace any styles in the HTML. | |
| 365 * TODO(jmesserly): ideally the server would strip style="" from img tags, then | |
| 366 * we wouldn't need the !important. | |
| 367 */ | |
| 368 .story-content img { | |
| 369 /* Set maximum width so the image shrinks to fit the column. */ | |
| 370 max-width: 100% !important; | |
| 371 /* | |
| 372 * Set maximum height so the image wont't wrap between columns. | |
| 373 * TODO(jmesserly): figure out why we can't use 100% here; it seems like | |
| 374 * 100% is being interpreted as bigger than the column height. | |
| 375 */ | |
| 376 max-height: 70% !important; | |
| 377 | |
| 378 /* Set width and height to auto to preserve aspect ratio. */ | |
| 379 width: auto !important; | |
| 380 height: auto !important; | |
| 381 } | |
| 382 | |
| 383 .story-content a { | |
| 384 color: #15C; | |
| 385 } | |
| 386 | |
| 387 .story-content a:visited { | |
| 388 color: #61c; | |
| 389 } | |
| 390 | |
| 391 .story-image { | |
| 392 margin: 10px; | |
| 393 width: 200px; | |
| 394 } | |
| 395 | |
| 396 .story-text-view { | |
| 397 padding: 20px; | |
| 398 left: 0; | |
| 399 right: 0; | |
| 400 top: 0; | |
| 401 bottom: 0; | |
| 402 position: absolute; | |
| 403 overflow: hidden; | |
| 404 } | |
| 405 | |
| 406 .story-text-view { | |
| 407 box-sizing: border-box; | |
| 408 ms-box-sizing: border-box; | |
| 409 -webkit-box-sizing: border-box; | |
| 410 -moz-box-sizing: border-box; | |
| 411 } | |
| 412 | |
| 413 .story-text-view .story-header { | |
| 414 margin-bottom: 10px; | |
| 415 padding-bottom: 2px; | |
| 416 border-bottom: 1px solid #d2d2d2; | |
| 417 font-weight: bold; | |
| 418 } | |
| 419 | |
| 420 .story-text-view .story-header .story-title { | |
| 421 font-weight: bold; | |
| 422 color: #15C; | |
| 423 font-size: 18px; | |
| 424 margin-bottom: 5px; | |
| 425 text-overflow: ellipsis; | |
| 426 text-wrap: none; | |
| 427 white-space: nowrap; | |
| 428 width: 100%; | |
| 429 display: block; | |
| 430 overflow: hidden; | |
| 431 } | |
| 432 | |
| 433 .story-title:link, .story-title:visited { | |
| 434 text-decoration: none; | |
| 435 } | |
| 436 | |
| 437 .story-title:hover { | |
| 438 text-decoration: underline; | |
| 439 } | |
| 440 | |
| 441 .story-text-view .story-header .story-byline { | |
| 442 font-weight: bold; | |
| 443 color: #333; | |
| 444 font-size: 15px; | |
| 445 padding-top: 3px; | |
| 446 padding-bottom: 3px; | |
| 447 text-overflow: ellipsis; | |
| 448 text-wrap: none; | |
| 449 white-space: nowrap; | |
| 450 } | |
| 451 | |
| 452 .story-text-view .story-header .story-dateline { | |
| 453 font-weight: normal; | |
| 454 color: #999; | |
| 455 font-size: 12px; | |
| 456 padding-top: 3px; | |
| 457 padding-bottom: 3px; | |
| 458 text-overflow: ellipsis; | |
| 459 text-wrap: none; | |
| 460 white-space: nowrap; | |
| 461 } | |
| 462 | |
| 463 .header-view { | |
| 464 height: 54px; | |
| 465 z-index: 2; | |
| 466 overflow: hidden; | |
| 467 position: relative; | |
| 468 background-color: #F5F5F5; | |
| 469 border-bottom: 1px solid #d2d2d2; | |
| 470 } | |
| 471 | |
| 472 .app-title { | |
| 473 font-size: 20px; | |
| 474 color: #484848; | |
| 475 padding-left: 22px; | |
| 476 padding-top: 0; | |
| 477 padding-bottom: 10px; | |
| 478 position: absolute; | |
| 479 left: 0; | |
| 480 top: 17px; | |
| 481 cursor: pointer; | |
| 482 | |
| 483 -webkit-transition-property: left; | |
| 484 -webkit-transition-duration: 0.45s; | |
| 485 } | |
| 486 | |
| 487 .app-title.in-story { | |
| 488 left: 50px; | |
| 489 } | |
| 490 | |
| 491 /* The arrow that is used as a back button on the story page. */ | |
| 492 .back-arrow { | |
| 493 background-image: url('back-21.png'); | |
| 494 width: 10px; | |
| 495 height: 15px; | |
| 496 margin: 10px 15px; | |
| 497 position: absolute; | |
| 498 left: -100px; | |
| 499 | |
| 500 -webkit-transition-property: left; | |
| 501 -webkit-transition-duration: 0.45s; | |
| 502 } | |
| 503 | |
| 504 .back-arrow.in-story { | |
| 505 left: 0; | |
| 506 } | |
| 507 | |
| 508 .config { | |
| 509 background-image: url('settings-21.png'); | |
| 510 position: absolute; | |
| 511 right: 120px; | |
| 512 | |
| 513 -webkit-transition-property: right; | |
| 514 -webkit-transition-duration: 0.45s; | |
| 515 } | |
| 516 | |
| 517 .config.in-story { | |
| 518 right: -60px; | |
| 519 } | |
| 520 | |
| 521 .refresh { | |
| 522 background-image: url('refresh-21.png'); | |
| 523 right: 60px; | |
| 524 position: absolute; | |
| 525 | |
| 526 -webkit-transition-property: right; | |
| 527 -webkit-transition-duration: 0.45s; | |
| 528 } | |
| 529 | |
| 530 .refresh.in-story { | |
| 531 right: -160px; | |
| 532 } | |
| 533 | |
| 534 #dart-logo { | |
| 535 height: 21px; | |
| 536 padding-left: 25px; | |
| 537 background: url('Dart_Logo_21.png') no-repeat; | |
| 538 } | |
| 539 | |
| 540 .info-button { | |
| 541 background: url('info.svg'); | |
| 542 background-size: 55%; | |
| 543 margin: 13px; | |
| 544 position: absolute; | |
| 545 right: 0; | |
| 546 | |
| 547 -webkit-transition-property: right; | |
| 548 -webkit-transition-duration: 0.45s; | |
| 549 } | |
| 550 | |
| 551 .info-button.in-story { | |
| 552 right: -260px; | |
| 553 } | |
| 554 | |
| 555 .new-window-button { | |
| 556 background-image: url('externallink.svg'); | |
| 557 background-size: 100% 100%; | |
| 558 width: 24px; | |
| 559 height: 24px; | |
| 560 top: 43px; | |
| 561 right: 220px; | |
| 562 position: absolute; | |
| 563 } | |
| 564 | |
| 565 .web-back-button, | |
| 566 .web-forward-button { | |
| 567 width: 24px; | |
| 568 height: 24px; | |
| 569 top: 43px; | |
| 570 position: absolute; | |
| 571 } | |
| 572 | |
| 573 .web-back-button { | |
| 574 background-image: url('lefttriangle.svg'); | |
| 575 right: 302px; | |
| 576 } | |
| 577 | |
| 578 .web-forward-button { | |
| 579 background-image: url('righttriangle.svg'); | |
| 580 right: 260px; | |
| 581 } | |
| 582 | |
| 583 .web-view-button, .text-view-button { | |
| 584 width: 80px; | |
| 585 height: 24px; | |
| 586 top: 45px; | |
| 587 border: solid 1px #D9D9D9; | |
| 588 background: -webkit-gradient(linear,left top,left bottom,from(whiteSmoke),to(#
F1F1F1)); | |
| 589 font-size: 13px; | |
| 590 position: absolute; | |
| 591 text-align: center; | |
| 592 } | |
| 593 | |
| 594 .web-view-button { | |
| 595 right: 40px; | |
| 596 } | |
| 597 | |
| 598 .text-view-button { | |
| 599 right: 120px; | |
| 600 } | |
| 601 | |
| 602 .web-view-button.active, .text-view-button.active { | |
| 603 background: -webkit-gradient(linear,left top,left bottom,from(#EEE),to(#E0E0E0
)); | |
| 604 border-color: #BBB; | |
| 605 box-shadow: inset 0 1px 5px #ccc; | |
| 606 -moz-box-shadow: inset 0 1px 5px #ccc; | |
| 607 -webkit-box-shadow: inset 0 1px 5px #ccc; | |
| 608 } | |
| 609 | |
| 610 /* TODO(eub): refactor this to apply to all standard buttons? */ | |
| 611 .config, | |
| 612 .refresh, | |
| 613 .info-button, | |
| 614 .back-arrow { | |
| 615 opacity: 0.5; | |
| 616 border: 1px solid #C8C8C8; | |
| 617 color: #444; | |
| 618 border-radius: 2px; | |
| 619 width: 47px; | |
| 620 height: 29px; | |
| 621 margin: 12px; | |
| 622 background-position: center; | |
| 623 background-repeat: no-repeat; | |
| 624 } | |
| 625 | |
| 626 .config:hover, | |
| 627 .refresh:hover, | |
| 628 .info-button:hover, | |
| 629 .back-arrow:hover { | |
| 630 opacity: 1; | |
| 631 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); | |
| 632 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); | |
| 633 } | |
| 634 | |
| 635 button, | |
| 636 .button, | |
| 637 .sm-item { | |
| 638 cursor: pointer; | |
| 639 } | |
| 640 | |
| 641 .sm-root { | |
| 642 border-bottom: none; | |
| 643 background-color: transparent; | |
| 644 -webkit-box-shadow: none; | |
| 645 height: 44px; | |
| 646 overflow: hidden; | |
| 647 position: absolute; | |
| 648 top: 16px; | |
| 649 left: 120px; | |
| 650 z-index: 3; | |
| 651 } | |
| 652 | |
| 653 .data-source-view { | |
| 654 left: 0; | |
| 655 right: 0; | |
| 656 top: 0; | |
| 657 bottom: 0; | |
| 658 position: absolute; | |
| 659 } | |
| 660 | |
| 661 .data-source-view > div { | |
| 662 height: 100%; | |
| 663 position: relative; | |
| 664 } | |
| 665 | |
| 666 .sm-item-box { | |
| 667 -webkit-box-pack: start; | |
| 668 } | |
| 669 | |
| 670 .sm-triangle { | |
| 671 width: 22px; | |
| 672 border: none; | |
| 673 top: 14px; | |
| 674 height: 15px; | |
| 675 background-image: url('sliderarrow.svg'); | |
| 676 } | |
| 677 | |
| 678 .sm-item.sel { | |
| 679 color: #d14836; | |
| 680 } | |
| 681 | |
| 682 .sm-item { | |
| 683 font: 16px arial,sans-serif; | |
| 684 text-transform: none; | |
| 685 color: #484848; | |
| 686 } | |
| 687 | |
| 688 /* TODO(eub): Kennedy GMail button:active is actually a blue outline, | |
| 689 of all things. */ | |
| 690 .button:active, | |
| 691 .sm-item:active { | |
| 692 opacity: 0.5; | |
| 693 } | |
| 694 | |
| 695 /* dialog view */ | |
| 696 | |
| 697 .dialog-modal { | |
| 698 width: 100%; | |
| 699 height: 100%; | |
| 700 display: -webkit-box; | |
| 701 -webkit-box-align: center; | |
| 702 -webkit-box-pack: center; | |
| 703 background-color: rgba(200, 200, 200, 0.6); | |
| 704 z-index: 40; | |
| 705 position: absolute; | |
| 706 } | |
| 707 | |
| 708 .dialog { | |
| 709 border: 1px solid #CCC; | |
| 710 width: 250px; | |
| 711 padding: 20px; | |
| 712 background-color: white; | |
| 713 box-shadow: -1px 3px 3px rgba(0, 0, 0, 0.1); | |
| 714 -webkit-box-shadow: -1px 3px 3px rgba(0, 0, 0, 0.1); | |
| 715 } | |
| 716 | |
| 717 .dialog-title-area { | |
| 718 font-size: 19px; | |
| 719 padding: 0 0 10px 0; | |
| 720 } | |
| 721 | |
| 722 .dialog-title { | |
| 723 vertical-align: middle; | |
| 724 } | |
| 725 | |
| 726 .dialog-body { | |
| 727 color: black; | |
| 728 padding: 10px 0 0 0; | |
| 729 } | |
| 730 | |
| 731 /* TODO(terry): Better than floats for this simple dialog? */ | |
| 732 .done-button { | |
| 733 float: right; | |
| 734 } | |
| 735 | |
| 736 .hidden-story { | |
| 737 -webkit-animation-timing-function: ease-in; | |
| 738 opacity: 0; | |
| 739 } | |
| 740 | |
| 741 .header-background { | |
| 742 background: black; | |
| 743 width: 100%; | |
| 744 } | |
| 745 | |
| 746 #appSplash .header { | |
| 747 height: 54px; | |
| 748 z-index: 2; | |
| 749 overflow: hidden; | |
| 750 position: relative; | |
| 751 background-color: #F5F5F5; | |
| 752 border-bottom: 1px solid #d2d2d2; | |
| 753 } | |
| 754 | |
| 755 #appSplash .title { | |
| 756 font-size: 20px; | |
| 757 color: #484848; | |
| 758 padding-left: 22px; | |
| 759 padding-top: 0; | |
| 760 padding-bottom: 10px; | |
| 761 position: absolute; | |
| 762 left: 0; | |
| 763 top: 15px; | |
| 764 } | |
| 765 | |
| 766 #appSplash .splash { | |
| 767 font-size: 24px; | |
| 768 position: absolute; | |
| 769 top: 173px; | |
| 770 bottom: 0; | |
| 771 left: 0; | |
| 772 right: 0; | |
| 773 text-align: center; | |
| 774 } | |
| 775 | |
| 776 #appSplash .footer { | |
| 777 font-size: 10px; | |
| 778 color: rgba(0, 0, 0, 0.6); | |
| 779 position: absolute; | |
| 780 left: 5px; | |
| 781 bottom: 5px; | |
| 782 } | |
| 783 | |
| 784 #appSplash .footer A:link,A:visited { | |
| 785 text-decoration: none; | |
| 786 color: rgba(0, 0, 0, 0.6); | |
| 787 } | |
| 788 | |
| 789 #appSplash .footer A:hover { | |
| 790 text-decoration: underline; | |
| 791 color: rgba(0, 0, 0, 0.6); | |
| 792 } | |
| 793 | |
| 794 #appSplash { | |
| 795 position: absolute; | |
| 796 left: 0; | |
| 797 right: 0; | |
| 798 top: 0; | |
| 799 bottom: 0; | |
| 800 /* Put in front of UI. UI will load behind it then remove this to avoid | |
| 801 a visible flicker. */ | |
| 802 z-index: 50; | |
| 803 background: #fff; | |
| 804 } | |
| 805 | |
| 806 @-webkit-keyframes pulsate { | |
| 807 0% { | |
| 808 -webkit-transform: translate3d(0, 0, 0) scale(1.0); | |
| 809 } | |
| 810 50% { | |
| 811 -webkit-transform: scale(1.5) translate3d(0, 20px, 0); | |
| 812 } | |
| 813 100% { | |
| 814 -webkit-transform: translate3d(0, 0, 0) translate3d(0, 0, 0); | |
| 815 } | |
| 816 } | |
| 817 | |
| 818 #appSplash .splashImg { | |
| 819 position: absolute; | |
| 820 left: 140px; | |
| 821 /* We put the image on a div instead of just using an img so that the image | |
| 822 URL can live in the CSS, where update.py knows to find it. */ | |
| 823 width: 640px; | |
| 824 height: 480px; | |
| 825 background-image: url('pigeons-jumpinjimmyjava-white90pct-q70.jpg'); | |
| 826 | |
| 827 -webkit-animation-name: pulsate; | |
| 828 -webkit-animation-iteration-count: infinite; | |
| 829 -webkit-animation-timing-function: ease-in-out; | |
| 830 -webkit-animation-duration: 5s; | |
| 831 } | |
| 832 | |
| 833 .section-view.hide-all-queries .data-source-view .query, | |
| 834 .section-view.hide-all-queries .page-number { | |
| 835 opacity: 0; | |
| 836 } | |
| 837 | |
| 838 .transparent { | |
| 839 opacity: 0; | |
| 840 } | |
| 841 | |
| 842 .query { | |
| 843 width: 297px; | |
| 844 } | |
| 845 | |
| 846 .story-view { | |
| 847 left: 300px; | |
| 848 } | |
| 849 | |
| 850 .story-shadow { | |
| 851 background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,
255,0)), to(rgba(255,255,255, 1)), color-stop(0.7, rgba(255,255,255, 1))); | |
| 852 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 9314024:
Final CL to kill off client/samples . (Closed)
Base URL: http://dart.googlecode.com/svn/branches/bleeding_edge/dart/