Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1516)

Unified Diff: Source/devtools/front_end/responsiveDesignView.css

Issue 581133002: DevTools: polish the MQ ruler, move zoom controls to the top. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebaselined Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | Source/devtools/front_end/toolbox/MediaQueryInspector.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 {
« no previous file with comments | « no previous file | Source/devtools/front_end/toolbox/MediaQueryInspector.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698