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

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

Issue 1178643004: [DevTools] Initial implementation of device modes. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Fixed review comments Created 5 years, 6 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: Source/devtools/front_end/emulation/responsiveDesignView.css
diff --git a/Source/devtools/front_end/emulation/responsiveDesignView.css b/Source/devtools/front_end/emulation/responsiveDesignView.css
index 1e15411fcdac1670eaeb02ebd71846a994492cee..cc552d24adcf23df95bdaa42557d04752755ac56 100644
--- a/Source/devtools/front_end/emulation/responsiveDesignView.css
+++ b/Source/devtools/front_end/emulation/responsiveDesignView.css
@@ -82,6 +82,10 @@
transform: rotate(90deg);
}
+.responsive-design-page-container {
+ background-color: #171717;
+}
+
.responsive-design-page-scale-container {
position: absolute !important;
top: 0;
@@ -220,6 +224,10 @@
cursor: default !important;
}
+.device-modes .responsive-design-toolbar label {
+ margin: 0 2px;
+}
+
.responsive-design-toolbar input[type='text'] {
text-align: left;
background-color: transparent;
@@ -352,10 +360,42 @@ div.responsive-design-icon:disabled {
margin-left: 0;
}
-.responsive-design-section-device select {
+.responsive-design-section-device .device-select {
width: 185px;
}
+.device-modes .responsive-design-section-device .device-select {
+ width: 145px;
+}
+
+.responsive-design-section-device .mode-container {
+ display: none;
+ width: 90px;
+}
+
+.device-modes .responsive-design-section-device .mode-container {
+ display: inline-block;
+}
+
+.responsive-design-section-device .mode-select {
+ width: 80px;
+}
+
+.responsive-design-section-device button.change-orientation-button {
+ -webkit-appearance: none;
+ background: none;
+ outline: none;
+ border: none;
+ border-radius: 3px;
+ color: rgb(255, 156, 0);
+ width: 80px;
+ margin-left: 10px;
+}
+
+.responsive-design-section-device button.change-orientation-button:hover {
+ background-color: rgba(255, 156, 0, 0.1);
+}
+
.responsive-design-section-device input[type='text'],
.responsive-design-section-device input[type='text']::-webkit-input-placeholder,
.responsive-design-section-device select {

Powered by Google App Engine
This is Rietveld 408576698