OLD | NEW |
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 Loading... |
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 } |
OLD | NEW |