DevTools: fix styling for 3D phone preview inn sensors drawer

third_party/WebKit/Source/devtools/front_end/emulation/sensors.css

 /*
  * Copyright (c) 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 .sensors-view {
     padding: 12px;
     display: block;
 }
@@ skipping 55 matching lines @@
 
 .sensors-view input:focus::-webkit-input-placeholder {
     color: transparent !important;
 }
 
 .sensors-view .chrome-select {
     width: 200px;
 }
 
 .sensors-group-title {
-    width: 100px;
+    width: 80px;
     line-height: 24px;
 }
 
 .sensors-group {
     display: flex;
     flex-wrap: wrap;
 }
 
 .geo-fields {
     flex: 2 0 200px;
 }
 
 .latlong-group {
     display: flex;
     margin-bottom: 10px;
 }
 
 .latlong-title {
     width: 70px;
 }
 
-/* Accelerometer */
+/* Device Orientation */
 
 .orientation-content {
     display: flex;
+    flex-wrap: wrap;
 }
 
 .orientation-fields {
     margin-right: 10px;
 }
 
-.accelerometer-stage {
+.orientation-stage {
     -webkit-perspective: 700px;
     -webkit-perspective-origin: 50% 50%;
     width: 160px;
     height: 150px;
     background: linear-gradient(#E1F5FE 0%, #E1F5FE 64%, #b0Ebf3 64%, #DEF6F9 100%);
     transition: 0.2s ease opacity, 0.2s ease -webkit-filter;
+    overflow: hidden;
+    margin-bottom: 10px;
 }
 
-.accelerometer-stage.disabled {
+.orientation-stage.disabled {
     -webkit-filter: grayscale();
     opacity: 0.5;
-}
-
-fieldset.device-orientation-override-section[disabled] .accelerometer-stage {
     cursor: default !important;
 }
 
-.accelerometer-element,
-.accelerometer-element::before,
-.accelerometer-element::after
+.orientation-element,
+.orientation-element::before,
+.orientation-element::after
 {
     position: absolute;
     box-sizing: border-box;
     transform-style: preserve-3d;
     background: no-repeat;
     background-size: cover;
     backface-visibility: hidden;
 }
 
-.accelerometer-box {
+.orientation-box {
     width: 66px;
     height: 122px;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
 }
 
-.accelerometer-box.is-animating {
+.orientation-box.is-animating {
     transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
-.accelerometer-front,
-.accelerometer-back
+.orientation-front,
+.orientation-back
 {
     width: 66px;
     height: 122px;
     border-radius: 8px;
 }
 
-.accelerometer-front {
+.orientation-front {
     background-image: url(Images/accelerometer-front.png);
 }
 
-.accelerometer-back {
+.orientation-back {
     transform: rotateY(180deg) translateZ(12px);
     background-image: url(Images/accelerometer-back.png);
 }
 
 
-.accelerometer-left,
-.accelerometer-right {
+.orientation-left,
+.orientation-right {
     width: 12px;
     height: 106px;
     top: 8px;
     background-position: center center;
 }
 
-.accelerometer-left {
+.orientation-left {
     left: -12px;
     transform-origin: right center;
     transform: rotateY(-90deg);
     background-image: url(Images/accelerometer-left.png);
 }
 
 
-.accelerometer-right {
+.orientation-right {
     right: -12px;
     transform-origin: left center;
     transform: rotateY(90deg);
     background-image: url(Images/accelerometer-right.png);
 }
 
-.accelerometer-left::before,
-.accelerometer-left::after,
-.accelerometer-right::before,
-.accelerometer-right::after
+.orientation-left::before,
+.orientation-left::after,
+.orientation-right::before,
+.orientation-right::after
 {
     content: '';
     width: 12px;
     height: 6px;
 }
 
-.accelerometer-left::before,
-.accelerometer-left::after
+.orientation-left::before,
+.orientation-left::after
 {
     background-image: url(Images/accelerometer-left.png);
 }
 
-.accelerometer-right::before,
-.accelerometer-right::after
+.orientation-right::before,
+.orientation-right::after
 {
     background-image: url(Images/accelerometer-right.png);
 }
 
-.accelerometer-left::before,
-.accelerometer-right::before {
+.orientation-left::before,
+.orientation-right::before {
     top: -6px;
     transform-origin: center bottom;
     transform: rotateX(26deg);
     background-position: center top;
 }
 
-.accelerometer-left::after,
-.accelerometer-right::after {
+.orientation-left::after,
+.orientation-right::after {
     bottom: -6px;
     transform-origin: center top;
     transform: rotateX(-25deg);
     background-position: center bottom;
 }
 
-.accelerometer-top,
-.accelerometer-bottom {
+.orientation-top,
+.orientation-bottom {
     width: 50px;
     height: 12px;
     left: 8px;
     background-position: center center;
 }
 
-.accelerometer-top {
+.orientation-top {
     top: -12px;
     transform-origin: center bottom;
     transform: rotateX(90deg);
     background-image: url(Images/accelerometer-top.png);
 }
 
 
-.accelerometer-bottom {
+.orientation-bottom {
     bottom: -12px;
     transform-origin: center top;
     transform: rotateX(-90deg);
     background-image: url(Images/accelerometer-bottom.png);
 }
 
 
-.accelerometer-top::before,
-.accelerometer-top::after,
-.accelerometer-bottom::before,
-.accelerometer-bottom::after
+.orientation-top::before,
+.orientation-top::after,
+.orientation-bottom::before,
+.orientation-bottom::after
 {
     content: '';
     width: 8px;
     height: 12px;
 }
 
-.accelerometer-top::before,
-.accelerometer-top::after
+.orientation-top::before,
+.orientation-top::after
 {
     background-image: url(Images/accelerometer-top.png);
 }
 
-.accelerometer-bottom::before,
-.accelerometer-bottom::after
+.orientation-bottom::before,
+.orientation-bottom::after
 {
     background-image: url(Images/accelerometer-bottom.png);
 }
 
-.accelerometer-top::before,
-.accelerometer-bottom::before {
+.orientation-top::before,
+.orientation-bottom::before {
     left: -6px;
     transform-origin: right center;
     transform: rotateY(-26deg);
     background-position: left center;
 }
 
-.accelerometer-top::after,
-.accelerometer-bottom::after {
+.orientation-top::after,
+.orientation-bottom::after {
     right: -6px;
     transform-origin: left center;
     transform: rotateY(26deg);
     background-position: right center;
 }
 
-.accelerometer-axis-input-container {
+.orientation-axis-input-container {
     margin-bottom: 10px;
 }
 
-.accelerometer-axis-input-container input {
+.orientation-axis-input-container input {
     max-width: 100px;
 }
 
-.accelerometer-reset-button {
+.orientation-reset-button {
     min-width: 80px;
 }
 
 fieldset.device-orientation-override-section {
     margin: 0;
     display: flex;
 }
 
 .touch-label {
     margin-top: 10px;
 }
 
 .touch-label select {
     margin-left: 10px;
 }
 
 .panel-section-separator {
     height: 2px;
     margin-bottom: 12px;
     background: #f1f1f1;
 }