Index: Source/devtools/front_end/responsiveDesignView.css |
diff --git a/Source/devtools/front_end/responsiveDesignView.css b/Source/devtools/front_end/responsiveDesignView.css |
index 8bbc2cd0ca79734361205f2a9a6bd6d99d0911bd..104e31a43bd7725b723a36f7b9d57e04714c6476 100644 |
--- a/Source/devtools/front_end/responsiveDesignView.css |
+++ b/Source/devtools/front_end/responsiveDesignView.css |
@@ -72,7 +72,7 @@ |
.responsive-design-page-scale-container { |
position: absolute !important; |
- bottom: 0; |
+ top: 0; |
right: 0; |
padding: 10px; |
background-color: rgba(0, 0, 0, 0.3); |
@@ -82,7 +82,7 @@ |
.responsive-design-page-scale-label { |
display: block; |
height: 20px; |
- margin: 2px 0; |
+ margin: 0 4px; |
padding-top: 3px; |
color: white; |
cursor: default !important; |
@@ -476,8 +476,6 @@ |
right: 0; |
top: 0; |
padding-bottom: 5px; |
- background-color: rgb(43, 43, 43); |
- box-shadow: inset 0px 5px 7px rgba(0, 0, 0, 0.7); |
overflow: hidden; |
} |
@@ -487,17 +485,12 @@ |
position: relative; |
height: 14px; |
margin: 2px 0; |
- z-index: 1; |
-} |
- |
-.media-inspector-marker-container:hover { |
- z-index: 2; |
} |
.media-inspector-marker { |
position: absolute; |
- top: 0px; |
- bottom: 0px; |
+ top: 1px; |
+ bottom: 1px; |
white-space: nowrap; |
border-radius: 2px; |
} |
@@ -506,7 +499,9 @@ |
-webkit-filter: brightness(80%); |
} |
-.media-inspector-marker-highlight { |
+.media-inspector-marker:hover { |
+ top: -1px; |
+ bottom: -1px; |
-webkit-filter: brightness(115%) !important; |
} |
@@ -523,20 +518,19 @@ |
border-right: 2px solid rgb(80, 226, 40); |
} |
+.media-inspector-marker-min-max-width:hover { |
+ z-index: 1; |
+} |
+ |
.media-inspector-marker-min-width { |
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)); |
border-radius: 2px 0 0 2px; |
border-left: 2px solid rgb(255, 181, 142); |
} |
-.media-inspector-marker-under-highlighted { |
- background: transparent !important; |
- border: none !important; |
-} |
- |
/* Media query labels */ |
-.media-inspector-marker:not(.media-inspector-marker-highlight) .media-inspector-marker-label-container { |
+.media-inspector-marker:not(:hover) .media-inspector-marker-label-container { |
display: none; |
} |
@@ -552,25 +546,6 @@ |
right: -2px; |
} |
-.media-inspector-marker-serif { |
- position: absolute; |
- top: -60px; |
- bottom: -60px; |
- width: 1px; |
-} |
- |
-.media-inspector-marker-max-width .media-inspector-marker-serif { |
- background-color: rgb(26, 113, 233); |
-} |
- |
-.media-inspector-marker-min-max-width .media-inspector-marker-serif { |
- background-color: rgb(4, 166, 0); |
-} |
- |
-.media-inspector-marker-min-width .media-inspector-marker-serif { |
- background-color: rgb(204, 104, 31); |
-} |
- |
.media-inspector-marker-label { |
color: rgb(230, 230, 230); |
position: absolute; |
@@ -578,6 +553,7 @@ |
bottom: 0; |
font-size: 10px; |
text-shadow: rgba(0, 0, 0, 0.6) 1px 1px; |
+ pointer-events: none; |
} |
.media-inspector-label-right { |