OLD | NEW |
---|---|
1 /* | 1 /* |
2 * Copyright (C) 2013 Google Inc. All rights reserved. | 2 * Copyright (C) 2013 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
(...skipping 325 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
336 padding-right: 2px; | 336 padding-right: 2px; |
337 height: 6px; | 337 height: 6px; |
338 content: url(Images/graphLabelCalloutRight.png); | 338 content: url(Images/graphLabelCalloutRight.png); |
339 } | 339 } |
340 | 340 |
341 .network-graph-bar { | 341 .network-graph-bar { |
342 position: absolute; | 342 position: absolute; |
343 top: 0; | 343 top: 0; |
344 bottom: 0; | 344 bottom: 0; |
345 margin: auto -7px; | 345 margin: auto -7px; |
346 border-width: 6px 7px; | 346 height: 12px; |
347 height: 0; | |
348 min-width: 14px; | 347 min-width: 14px; |
349 opacity: 0.65; | 348 opacity: 0.65; |
350 -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7; | 349 border-width: 1px; |
350 border-style: solid; | |
351 border-radius: 7px / 6px; | |
352 box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8); | |
353 | |
354 border-color: hsl(0, 0%, 65%); | |
355 background: linear-gradient(0deg, hsl(0, 0%, 73%), hsl(0, 0%, 78%)); | |
351 } | 356 } |
352 | 357 |
353 .network-graph-bar.waiting, | 358 .network-graph-bar.waiting, |
354 .network-graph-bar.waiting-right { | 359 .network-graph-bar.waiting-right { |
355 opacity: 0.35; | 360 opacity: 0.35; |
356 } | 361 } |
357 | 362 |
358 /* Resource categories */ | 363 /* Resource categories */ |
359 | 364 |
360 | 365 |
361 .resource-cached .network-graph-bar { | 366 .resource-cached .network-graph-bar { |
362 -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7; | 367 border-color: hsl(0, 0%, 66%); |
368 background: hsla(0, 0%, 78%, 0.45); | |
369 box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), | |
370 inset 0 0 0 2px hsl(0, 0%, 73%), | |
371 inset 0 1px 0 2px hsla(0, 0%, 76%, 0.85); | |
363 } | 372 } |
364 | 373 |
365 .network-type-document .network-graph-bar { | 374 .network-type-document .network-graph-bar { |
366 -webkit-border-image: url(Images/timelinePillBlue.png) 7 7 7 7; | 375 border-color: hsl(215, 49%, 52%); |
376 background: linear-gradient(0deg, hsl(215, 72%, 61%), hsl(215, 100%, 69%)); | |
367 } | 377 } |
368 | 378 |
369 .network-type-document.resource-cached .network-graph-bar { | 379 .network-type-document.resource-cached .network-graph-bar { |
370 -webkit-border-image: url(Images/timelineHollowPillBlue.png) 7 7 7 7; | 380 border-color: hsl(215, 48%, 52%); |
eustas
2013/12/26 05:13:58
Do we need to redefine border-color in .resource-c
pwnall-personal
2013/12/26 05:39:57
A couple of bars have the same border color, but m
| |
381 background: hsla(215, 99%, 69%, 0.45); | |
382 box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), | |
383 inset 0 0 0 2px hsl(215, 71%, 61%), | |
eustas
2013/12/26 05:13:58
AFAIR, we prefer rgb/rgba for color.
(Though a lit
pwnall-personal
2013/12/26 05:39:57
I used HSL because all the colors in a bar have th
| |
384 inset 0 1px 0 2px hsla(215, 58%, 65%, 0.85); | |
371 } | 385 } |
372 | 386 |
373 .network-type-stylesheet .network-graph-bar { | 387 .network-type-stylesheet .network-graph-bar { |
374 -webkit-border-image: url(Images/timelinePillGreen.png) 7 7 7 7; | 388 border-color: hsl(99, 34%, 52%); |
389 background: linear-gradient(0deg, hsl(100, 50%, 61%), hsl(90, 50%, 64%)); | |
375 } | 390 } |
376 | 391 |
377 .network-type-stylesheet.resource-cached .network-graph-bar { | 392 .network-type-stylesheet.resource-cached .network-graph-bar { |
378 -webkit-border-image: url(Images/timelineHollowPillGreen.png) 7 7 7 7; | 393 border-color: hsl(99, 49%, 52%); |
394 background: hsla(99, 100%, 69%, 0.45); | |
395 box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), | |
eustas
2013/12/26 05:13:58
Can't shadow be unified for all .resource-cached?
pwnall-personal
2013/12/26 05:39:57
I did this to reproduce the .png files as accurate
pwnall-personal
2013/12/26 15:44:05
Here is the best I could get:
https://drive.googl
| |
396 inset 0 0 0 2px hsl(99, 72%, 61%), | |
397 inset 0 1px 0 2px hsla(99, 59%, 65%, 0.85); | |
379 } | 398 } |
380 | 399 |
381 .network-type-image .network-graph-bar { | 400 .network-type-image .network-graph-bar { |
382 -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7; | 401 border-color: hsl(272, 31%, 52%); |
402 background: linear-gradient(0deg, hsl(272, 46%, 61%), hsl(272, 64%, 69%)); | |
383 } | 403 } |
384 | 404 |
385 .network-type-image.resource-cached .network-graph-bar { | 405 .network-type-image.resource-cached .network-graph-bar { |
386 border-image: url(Images/timelineHollowPillPurple.png) 7 7 7 7; | 406 border-color: hsl(272, 32%, 52%); |
407 background: hsla(272, 65%, 69%, 0.45); | |
408 box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), | |
409 inset 0 0 0 2px hsl(272, 47%, 61%), | |
410 inset 0 1px 0 2px hsla(273, 38%, 65%, 0.85); | |
387 } | 411 } |
388 | 412 |
389 .network-type-font .network-graph-bar { | 413 .network-type-font .network-graph-bar { |
390 -webkit-border-image: url(Images/timelinePillRed.png) 7 7 7 7; | 414 border-color: hsl(8, 49%, 52%); |
415 background: linear-gradient(0deg, hsl(8, 72%, 61%), hsl(8, 100%, 69%)); | |
391 } | 416 } |
392 | 417 |
393 .network-type-font.resource-cached .network-graph-bar { | 418 .network-type-font.resource-cached .network-graph-bar { |
394 -webkit-border-image: url(Images/timelineHollowPillRed.png) 7 7 7 7; | 419 border-color: hsl(8, 49%, 52%); |
420 background: hsla(8, 100%, 69%, 0.45); | |
421 box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), | |
422 inset 0 0 0 2px hsl(8, 72%, 61%), | |
423 inset 0 1px 0 2px hsla(8, 59%, 65%, 0.85); | |
395 } | 424 } |
396 | 425 |
397 .network-type-script .network-graph-bar { | 426 .network-type-script .network-graph-bar { |
398 -webkit-border-image: url(Images/timelinePillOrange.png) 7 7 7 7; | 427 border-color: hsl(31, 49%, 52%); |
428 background: linear-gradient(0deg, hsl(31, 72%, 61%), hsl(31, 100%, 69%)); | |
399 } | 429 } |
400 | 430 |
401 .network-type-script.resource-cached .network-graph-bar { | 431 .network-type-script.resource-cached .network-graph-bar { |
402 -webkit-border-image: url(Images/timelineHollowPillOrange.png) 7 7 7 7; | 432 border-color: hsl(31, 53%, 52%); |
433 background: hsla(31, 100%, 69%, 0.45); | |
434 box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), | |
435 inset 0 0 0 2px hsl(31, 78%, 61%), | |
436 inset 0 1px 0 2px hsla(31, 64%, 65%, 0.85); | |
403 } | 437 } |
404 | 438 |
405 .network-type-xhr .network-graph-bar { | 439 .network-type-xhr .network-graph-bar { |
406 -webkit-border-image: url(Images/timelinePillYellow.png) 7 7 7 7; | 440 border-color: hsl(53, 49%, 52%); |
441 background: linear-gradient(0deg, hsl(53, 72%, 61%), hsl(53, 100%, 69%)); | |
407 } | 442 } |
408 | 443 |
409 .network-type-xhr.resource-cached .network-graph-bar { | 444 .network-type-xhr.resource-cached .network-graph-bar { |
410 -webkit-border-image: url(Images/timelineHollowPillYellow.png) 7 7 7 7; | 445 border-color: hsl(53, 49%, 52%); |
446 background: hsla(53, 100%, 69%, 0.85); | |
447 box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), | |
448 inset 0 0 0 2px hsl(53, 72%, 61%), | |
449 inset 0 1px 0 2px hsla(54, 59%, 65%, 0.85); | |
411 } | 450 } |
412 | 451 |
413 .network-type-websocket .network-graph-bar { | 452 .network-type-websocket .network-graph-bar { |
414 -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7; | 453 border-color: hsl(0, 0%, 65%); |
454 background: linear-gradient(0deg, hsl(0, 0%, 73%), hsl(0, 0%, 78%)); | |
415 } | 455 } |
416 | 456 |
417 .network-type-websocket.resource-cached .network-graph-bar { | 457 .network-type-websocket.resource-cached .network-graph-bar { |
418 -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7; | 458 box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), |
459 inset 0 0 0 2px hsl(0, 0%, 73%), | |
460 inset 0 1px 0 2px hsla(0, 0%, 76%, 0.85); | |
419 } | 461 } |
420 | 462 |
421 .network-dim-cell { | 463 .network-dim-cell { |
422 color: grey; | 464 color: grey; |
423 } | 465 } |
424 | 466 |
425 /* Dividers */ | 467 /* Dividers */ |
426 | 468 |
427 .network-timeline-grid { | 469 .network-timeline-grid { |
428 position: absolute; | 470 position: absolute; |
(...skipping 109 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
538 } | 580 } |
539 | 581 |
540 #network-container:not(.brief-mode) .data-grid tr.selected { | 582 #network-container:not(.brief-mode) .data-grid tr.selected { |
541 background-color: transparent; | 583 background-color: transparent; |
542 color: #222; | 584 color: #222; |
543 } | 585 } |
544 | 586 |
545 #network-container.brief-mode .data-grid .data-container { | 587 #network-container.brief-mode .data-grid .data-container { |
546 padding-right: 0; | 588 padding-right: 0; |
547 } | 589 } |
OLD | NEW |