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

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

Issue 1917543002: DevTools: Update styles for sensors drawer panel (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: UI update for sensors panel Created 4 years, 8 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/sensors.css
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/sensors.css b/third_party/WebKit/Source/devtools/front_end/emulation/sensors.css
index 7cb82460ae1dc75259c1bec0edcfb7fc7288b0ba..633c7cb356d28b34d7bae2a093d96793686494a9 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/sensors.css
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/sensors.css
@@ -6,6 +6,8 @@
.sensors-view {
padding: 12px;
+ display: block;
+ overflow: auto;
}
.sensors-view label {
@@ -17,13 +19,13 @@
width: 80px;
}
-.sensors-view input[type=text]:not(.error-input):enabled:focus,
+.sensors-view input:not(.error-input):enabled:focus,
.sensors-view select:enabled:focus {
border-color: rgb(77, 144, 254);
outline: none;
}
-.sensors-view input[type=text],
+.sensors-view input,
.sensors-view select {
border: 1px solid #bfbfbf;
border-radius: 2px;
@@ -31,12 +33,16 @@
color: #444;
font: inherit;
border-width: 1px;
+ text-align: left;
}
-.sensors-view input[type=text] {
- margin-left: 3px;
+.sensors-view input {
min-height: 2em;
padding: 3px;
+ width: 100%;
+ max-width: 128px;
+ margin: -5px 10px 0px 0px;
+ text-align: end;
}
.sensors-view input[readonly] {
@@ -45,7 +51,7 @@
.sensors-view fieldset {
border: none;
- padding: 0 0 5px 15px;
+ padding: 10px 0px;
flex: 0 0 auto;
}
@@ -57,10 +63,37 @@
display: none;
}
-.sensors-view input[type='text']:focus::-webkit-input-placeholder {
+.sensors-view input:focus::-webkit-input-placeholder {
color: transparent !important;
}
+.sensors-view .chrome-select {
+ max-width: 200px;
+ width: 100%;
+}
+
+.sensors-group-title {
+ width: 100px;
+ line-height: 24px;
+}
+
+.sensors-group {
+ display: flex;
+}
+
+.geo-fields {
+ flex: 2 0 200px;
+}
+
+.latlong-group {
+ display: flex;
+ margin-bottom: 10px;
+}
+
+.latlong-title {
+ width: 70px;
+}
+
/* Accelerometer */
.accelerometer-stage {
@@ -86,6 +119,10 @@ fieldset.device-orientation-override-section[disabled] .accelerometer-stage {
-webkit-transform-style: preserve-3d;
}
+.accelerometer-box.smooth-transition {
+ transition: 0.2s ease transform;
+}
+
.accelerometer-box section {
margin-top: -54px;
margin-left: -40px;
@@ -147,8 +184,17 @@ fieldset.device-orientation-override-section[disabled] .accelerometer-stage {
margin-bottom: 10px;
}
+.accelerometer-axis-input-container input {
+ max-width: 80px;
+}
+
+.accelerometer-reset-button {
+ min-width: 80px;
+}
+
fieldset.device-orientation-override-section {
display: flex;
+ margin-left: -3px;
}
.touch-label {
@@ -158,3 +204,9 @@ fieldset.device-orientation-override-section {
.touch-label select {
margin-left: 10px;
}
+
+.panel-section-separator {
+ height: 2px;
+ margin-bottom: 12px;
+ background: #f1f1f1;
+}

Powered by Google App Engine
This is Rietveld 408576698