OLD | NEW |
---|---|
1 /* | 1 /* |
2 * Copyright 2014 The Chromium Authors. All rights reserved. | 2 * Copyright 2014 The Chromium Authors. All rights reserved. |
3 * Use of this source code is governed by a BSD-style license that can be | 3 * Use of this source code is governed by a BSD-style license that can be |
4 * found in the LICENSE file. | 4 * found in the LICENSE file. |
5 */ | 5 */ |
6 | 6 |
7 .responsive-design { | 7 .responsive-design { |
8 position: relative; | 8 position: relative; |
9 background-color: rgb(0, 0, 0); | 9 background-color: rgb(0, 0, 0); |
10 overflow: hidden; | 10 overflow: hidden; |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
50 content: url(Images/statusbarResizerHorizontal.png); | 50 content: url(Images/statusbarResizerHorizontal.png); |
51 pointer-events: none; | 51 pointer-events: none; |
52 } | 52 } |
53 | 53 |
54 .responsive-design-slider-height .responsive-design-thumb-handle { | 54 .responsive-design-slider-height .responsive-design-thumb-handle { |
55 transform: rotate(90deg); | 55 transform: rotate(90deg); |
56 } | 56 } |
57 | 57 |
58 .responsive-design-page-scale-container { | 58 .responsive-design-page-scale-container { |
59 position: absolute !important; | 59 position: absolute !important; |
60 bottom: 0; | 60 top: 0; |
61 right: 0; | 61 right: 0; |
62 padding: 10px; | 62 padding: 10px; |
63 background-color: rgba(0, 0, 0, 0.3); | 63 background-color: rgba(0, 0, 0, 0.3); |
64 align-items: center; | 64 align-items: center; |
65 } | 65 } |
66 | 66 |
67 .responsive-design-page-scale-label { | 67 .responsive-design-page-scale-label { |
68 display: block; | 68 display: block; |
69 height: 20px; | 69 height: 20px; |
70 margin: 2px 0; | 70 margin: 0 4px; |
71 padding-top: 3px; | 71 padding-top: 3px; |
72 color: white; | 72 color: white; |
73 cursor: default !important; | 73 cursor: default !important; |
74 } | 74 } |
75 | 75 |
76 .responsive-design-page-scale-container .responsive-design-page-scale-button.sta tus-bar-item { | 76 .responsive-design-page-scale-container .responsive-design-page-scale-button.sta tus-bar-item { |
77 display: block; | 77 display: block; |
78 width: 18px; | 78 width: 18px; |
79 height: 18px; | 79 height: 18px; |
80 border: 1px solid transparent; | 80 border: 1px solid transparent; |
(...skipping 339 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
420 color: rgb(34, 34, 34); | 420 color: rgb(34, 34, 34); |
421 position: absolute; | 421 position: absolute; |
422 left: 0; | 422 left: 0; |
423 right: 0; | 423 right: 0; |
424 top: 0; | 424 top: 0; |
425 padding: 2px 4px; | 425 padding: 2px 4px; |
426 white-space: nowrap; | 426 white-space: nowrap; |
427 display: flex; | 427 display: flex; |
428 align-items: center; | 428 align-items: center; |
429 border-bottom: 1px solid rgb(171, 171, 171); | 429 border-bottom: 1px solid rgb(171, 171, 171); |
430 z-index: 2; | |
dgozman
2014/09/19 08:41:25
I think, we can remove all the z-index properties
pfeldman
2014/09/19 09:21:47
Done.
| |
430 } | 431 } |
431 | 432 |
432 .responsive-design-warning > span { | 433 .responsive-design-warning > span { |
433 flex: auto; | 434 flex: auto; |
434 padding-left: 3px; | 435 padding-left: 3px; |
435 overflow: hidden; | 436 overflow: hidden; |
436 } | 437 } |
437 | 438 |
438 .responsive-design-warning > div { | 439 .responsive-design-warning > div { |
439 flex: none; | 440 flex: none; |
(...skipping 14 matching lines...) Expand all Loading... | |
454 background-color: rgb(105, 194, 236) !important; | 455 background-color: rgb(105, 194, 236) !important; |
455 } | 456 } |
456 | 457 |
457 /* Media query inspector */ | 458 /* Media query inspector */ |
458 | 459 |
459 .responsive-design-media-container { | 460 .responsive-design-media-container { |
460 position: absolute; | 461 position: absolute; |
461 right: 0; | 462 right: 0; |
462 top: 0; | 463 top: 0; |
463 padding-bottom: 5px; | 464 padding-bottom: 5px; |
464 background-color: rgb(43, 43, 43); | |
465 box-shadow: inset 0px 5px 7px rgba(0, 0, 0, 0.7); | |
466 overflow: hidden; | 465 overflow: hidden; |
467 } | 466 } |
468 | 467 |
469 /* Media query bars */ | 468 /* Media query bars */ |
470 | 469 |
471 .media-inspector-marker-container { | 470 .media-inspector-marker-container { |
472 position: relative; | 471 position: relative; |
473 height: 14px; | 472 height: 14px; |
474 margin: 2px 0; | 473 margin: 2px 0; |
475 z-index: 1; | 474 z-index: 1; |
476 } | 475 } |
477 | 476 |
478 .media-inspector-marker-container:hover { | |
479 z-index: 2; | |
480 } | |
481 | |
482 .media-inspector-marker { | 477 .media-inspector-marker { |
483 position: absolute; | 478 position: absolute; |
484 top: 0px; | 479 top: 0px; |
485 bottom: 0px; | 480 bottom: 0px; |
486 white-space: nowrap; | 481 white-space: nowrap; |
487 border-radius: 2px; | 482 border-radius: 2px; |
488 } | 483 } |
489 | 484 |
490 .media-inspector-marker-inactive { | 485 .media-inspector-marker-inactive { |
491 -webkit-filter: brightness(80%); | 486 -webkit-filter: brightness(80%); |
(...skipping 15 matching lines...) Expand all Loading... | |
507 border-left: 2px solid rgb(80, 226, 40); | 502 border-left: 2px solid rgb(80, 226, 40); |
508 border-right: 2px solid rgb(80, 226, 40); | 503 border-right: 2px solid rgb(80, 226, 40); |
509 } | 504 } |
510 | 505 |
511 .media-inspector-marker-min-width { | 506 .media-inspector-marker-min-width { |
512 background: linear-gradient(to right, rgba(255, 255, 255, 0.27), rgba(0,0,0, 0) 30px), linear-gradient(to bottom, rgb(222, 129, 30), rgb(204, 104, 31)); | 507 background: linear-gradient(to right, rgba(255, 255, 255, 0.27), rgba(0,0,0, 0) 30px), linear-gradient(to bottom, rgb(222, 129, 30), rgb(204, 104, 31)); |
513 border-radius: 2px 0 0 2px; | 508 border-radius: 2px 0 0 2px; |
514 border-left: 2px solid rgb(255, 181, 142); | 509 border-left: 2px solid rgb(255, 181, 142); |
515 } | 510 } |
516 | 511 |
517 .media-inspector-marker-under-highlighted { | |
518 background: transparent !important; | |
519 border: none !important; | |
520 } | |
521 | |
522 /* Media query labels */ | 512 /* Media query labels */ |
523 | 513 |
524 .media-inspector-marker:not(.media-inspector-marker-highlight) .media-inspector- marker-label-container { | 514 .media-inspector-marker:not(.media-inspector-marker-highlight) .media-inspector- marker-label-container { |
525 display: none; | 515 display: none; |
526 } | 516 } |
527 | 517 |
528 .media-inspector-marker-label-container { | 518 .media-inspector-marker-label-container { |
529 position: absolute; | 519 position: absolute; |
530 } | 520 } |
531 | 521 |
532 .media-inspector-marker-label-container-left { | 522 .media-inspector-marker-label-container-left { |
533 left: -2px; | 523 left: -2px; |
534 } | 524 } |
535 | 525 |
536 .media-inspector-marker-label-container-right { | 526 .media-inspector-marker-label-container-right { |
537 right: -2px; | 527 right: -2px; |
538 } | 528 } |
539 | 529 |
540 .media-inspector-marker-serif { | |
541 position: absolute; | |
542 top: -60px; | |
543 bottom: -60px; | |
544 width: 1px; | |
545 } | |
546 | |
547 .media-inspector-marker-max-width .media-inspector-marker-serif { | |
548 background-color: rgb(26, 113, 233); | |
549 } | |
550 | |
551 .media-inspector-marker-min-max-width .media-inspector-marker-serif { | |
552 background-color: rgb(4, 166, 0); | |
553 } | |
554 | |
555 .media-inspector-marker-min-width .media-inspector-marker-serif { | |
556 background-color: rgb(204, 104, 31); | |
557 } | |
558 | |
559 .media-inspector-marker-label { | 530 .media-inspector-marker-label { |
560 color: rgb(230, 230, 230); | 531 color: rgb(230, 230, 230); |
561 position: absolute; | 532 position: absolute; |
562 top: 1px; | 533 top: 1px; |
563 bottom: 0; | 534 bottom: 0; |
564 font-size: 10px; | 535 font-size: 10px; |
565 text-shadow: rgba(0, 0, 0, 0.6) 1px 1px; | 536 text-shadow: rgba(0, 0, 0, 0.6) 1px 1px; |
566 } | 537 } |
567 | 538 |
568 .media-inspector-label-right { | 539 .media-inspector-label-right { |
569 right: 4px; | 540 right: 4px; |
570 } | 541 } |
571 | 542 |
572 .media-inspector-label-left { | 543 .media-inspector-label-left { |
573 left: 4px; | 544 left: 4px; |
574 } | 545 } |
OLD | NEW |