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

Unified Diff: third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css

Issue 1581763002: Revert of [DevTools] Device Mode polish. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 11 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
Index: third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css b/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
index f067fcaa3c94cfe90680f12ab6907b15d73fa36e..57bb35c2d8811dc7826586813c104f772fb7ecd4 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/deviceModeView.css
@@ -39,7 +39,7 @@
}
.device-mode-toolbar-middle-container {
- flex: 1 1 160px;
+ flex: 1 1 120px;
position: relative;
}
@@ -154,6 +154,56 @@
background-color: #fcfcfc;
}
+.device-mode-blueprint-container {
+ display: flex;
+ justify-content: center;
+ pointer-events: none;
+}
+
+.device-mode-blueprint {
+ flex-direction: column;
+ justify-content: flex-end;
+ flex: none;
+ position: relative;
+ pointer-events: auto;
+}
+
+.device-mode-blueprint-border {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ color: #aaa;
+ border: 1px solid #dcdcdc;
+ margin-top: -1px;
+}
+
+.device-mode-blueprint-border:hover {
+ border-color: #aaa;
+}
+
+.device-mode-blueprint-border > span {
+ transition: opacity 150ms;
+ opacity: 0;
+ padding: 3px;
+}
+
+.device-mode-blueprint-border:hover > span {
+ opacity: 1;
+}
+
+.device-mode-blueprint-inside {
+ position: absolute;
+ left: 20px;
+ right: 20px;
+ top: 20px;
+ bottom: 20px;
+}
+
.device-mode-ruler {
pointer-events: none;
position: relative;

Powered by Google App Engine
This is Rietveld 408576698