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

Side by Side 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: Minor updates Created 4 years, 7 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 unified diff | Download patch
OLDNEW
1 /* 1 /*
2 * Copyright (c) 2015 The Chromium Authors. All rights reserved. 2 * Copyright (c) 2015 The Chromium Authors. All rights reserved.
3 * Use of this source code is governed by a BSD-style license that can be 3 * Use of this source code is governed by a BSD-style license that can be
4 * found in the LICENSE file. 4 * found in the LICENSE file.
5 */ 5 */
6 6
7 .sensors-view { 7 .sensors-view {
8 padding: 12px; 8 padding: 12px;
9 display: block;
10 overflow: auto;
9 } 11 }
10 12
11 .sensors-view label { 13 .sensors-view label {
12 margin-bottom: 10px; 14 margin-bottom: 10px;
13 } 15 }
14 16
15 .sensors-view input { 17 .sensors-view input {
16 text-align: right; 18 text-align: right;
17 width: 80px; 19 width: 80px;
18 } 20 }
19 21
20 .sensors-view input[type=text]:not(.error-input):enabled:focus, 22 .sensors-view input:not(.error-input):enabled:focus,
21 .sensors-view select:enabled:focus { 23 .sensors-view select:enabled:focus {
22 border-color: rgb(77, 144, 254); 24 border-color: rgb(77, 144, 254);
23 outline: none; 25 outline: none;
24 } 26 }
25 27
26 .sensors-view input[type=text], 28 .sensors-view input,
27 .sensors-view select { 29 .sensors-view select {
28 border: 1px solid #bfbfbf; 30 border: 1px solid #bfbfbf;
29 border-radius: 2px; 31 border-radius: 2px;
30 box-sizing: border-box; 32 box-sizing: border-box;
31 color: #444; 33 color: #444;
32 font: inherit; 34 font: inherit;
33 border-width: 1px; 35 border-width: 1px;
36 text-align: left;
34 } 37 }
35 38
36 .sensors-view input[type=text] { 39 .sensors-view input {
37 margin-left: 3px;
38 min-height: 2em; 40 min-height: 2em;
39 padding: 3px; 41 padding: 3px;
42 width: 100%;
43 max-width: 128px;
44 margin: -5px 10px 0px 0px;
45 text-align: end;
40 } 46 }
41 47
42 .sensors-view input[readonly] { 48 .sensors-view input[readonly] {
43 background-color: rgb(235, 235, 228); 49 background-color: rgb(235, 235, 228);
44 } 50 }
45 51
46 .sensors-view fieldset { 52 .sensors-view fieldset {
47 border: none; 53 border: none;
48 padding: 0 0 5px 15px; 54 padding: 10px 0px;
49 flex: 0 0 auto; 55 flex: 0 0 auto;
50 } 56 }
51 57
52 .sensors-view fieldset[disabled] { 58 .sensors-view fieldset[disabled] {
53 opacity: 0.5; 59 opacity: 0.5;
54 } 60 }
55 61
56 .sensors-view .field-error-message { 62 .sensors-view .field-error-message {
57 display: none; 63 display: none;
58 } 64 }
59 65
60 .sensors-view input[type='text']:focus::-webkit-input-placeholder { 66 .sensors-view input:focus::-webkit-input-placeholder {
61 color: transparent !important; 67 color: transparent !important;
62 } 68 }
63 69
70 .sensors-view .chrome-select {
71 max-width: 200px;
72 width: 100%;
73 }
74
75 .sensors-group-title {
76 width: 100px;
77 line-height: 24px;
78 }
79
80 .sensors-group {
81 display: flex;
82 }
83
84 .geo-fields {
85 flex: 2 0 200px;
86 }
87
88 .latlong-group {
89 display: flex;
90 margin-bottom: 10px;
91 }
92
93 .latlong-title {
94 width: 70px;
95 }
96
64 /* Accelerometer */ 97 /* Accelerometer */
65 98
66 .accelerometer-stage { 99 .accelerometer-stage {
67 -webkit-perspective: 700px; 100 -webkit-perspective: 700px;
68 -webkit-perspective-origin: 50% 50%; 101 -webkit-perspective-origin: 50% 50%;
69 width: 200px; 102 width: 200px;
70 height: 130px; 103 height: 130px;
71 } 104 }
72 105
73 fieldset.device-orientation-override-section[disabled] .accelerometer-stage { 106 fieldset.device-orientation-override-section[disabled] .accelerometer-stage {
74 cursor: default !important; 107 cursor: default !important;
75 } 108 }
76 109
77 .accelerometer-box { 110 .accelerometer-box {
78 pointer-events:none; 111 pointer-events:none;
79 margin-top: -54px; 112 margin-top: -54px;
80 margin-left: -40px; 113 margin-left: -40px;
81 position: absolute; 114 position: absolute;
82 top: 50%; 115 top: 50%;
83 left: 50%; 116 left: 50%;
84 width: 80px; 117 width: 80px;
85 height: 108px; 118 height: 108px;
86 -webkit-transform-style: preserve-3d; 119 -webkit-transform-style: preserve-3d;
87 } 120 }
88 121
122 .accelerometer-box.smooth-transition {
123 transition: 0.2s ease transform;
124 }
125
89 .accelerometer-box section { 126 .accelerometer-box section {
90 margin-top: -54px; 127 margin-top: -54px;
91 margin-left: -40px; 128 margin-left: -40px;
92 position: absolute; 129 position: absolute;
93 display: block; 130 display: block;
94 overflow: hidden; 131 overflow: hidden;
95 top: 50%; 132 top: 50%;
96 left: 50%; 133 left: 50%;
97 -webkit-transform-style: flat; 134 -webkit-transform-style: flat;
98 -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7); 135 -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7);
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
140 width: 20px; 177 width: 20px;
141 height: 107px; 178 height: 107px;
142 background-color: #7992CB; 179 background-color: #7992CB;
143 transform: rotateY(-90deg) translate3d(0, 0, 10px); 180 transform: rotateY(-90deg) translate3d(0, 0, 10px);
144 } 181 }
145 182
146 .accelerometer-axis-input-container { 183 .accelerometer-axis-input-container {
147 margin-bottom: 10px; 184 margin-bottom: 10px;
148 } 185 }
149 186
187 .accelerometer-axis-input-container input {
188 max-width: 80px;
189 }
190
191 .accelerometer-reset-button {
192 min-width: 80px;
193 }
194
150 fieldset.device-orientation-override-section { 195 fieldset.device-orientation-override-section {
151 display: flex; 196 display: flex;
197 margin-left: -3px;
152 } 198 }
153 199
154 .touch-label { 200 .touch-label {
155 margin-top: 10px; 201 margin-top: 10px;
156 } 202 }
157 203
158 .touch-label select { 204 .touch-label select {
159 margin-left: 10px; 205 margin-left: 10px;
160 } 206 }
207
208 .panel-section-separator {
209 height: 2px;
210 margin-bottom: 12px;
211 background: #f1f1f1;
212 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698