1/*
2 * Copyright (c) 2012 The Chromium Authors. All rights reserved.
3 * Use of this source code is governed by a BSD-style license that can be
4 * found in the LICENSE file.
5 */
6
7body {
8  color: rgb(48, 57, 66);
9  font-family: Arial, sans-serif;
10  font-size: 13px;
11  margin: 0;
12  min-width: 47em;
13  padding: 20px 20px 65px 0;
14}
15
16img {
17  flex-shrink: 0;
18  height: 16px;
19  padding-left: 2px;
20  padding-right: 5px;
21  vertical-align: top;
22  width: 16px;
23}
24
25#container {
26  -webkit-flex-direction: row;
27  display: -webkit-flex;
28}
29
30#navigation {
31  width: 150px;
32}
33
34#content {
35  -webkit-flex: 1;
36}
37
38#caption {
39  color: rgb(92, 97, 102);
40  font-size: 150%;
41  padding-bottom: 10px;
42  padding-left: 20px;
43}
44
45#serviceworker-internals {
46  visibility: hidden;
47}
48
49.tab-header {
50  -webkit-border-start: 6px solid transparent;
51  padding-left: 15px;
52}
53
54.tab-header.selected {
55  -webkit-border-start-color: rgb(78, 87, 100);
56}
57
58.tab-header > button {
59  background-color: white;
60  border: 0;
61  cursor: pointer;
62  font: inherit;
63  line-height: 17px;
64  margin: 6px 0;
65  padding: 0 2px;
66}
67
68.tab-header:not(.selected) > button {
69  color: #999;
70}
71
72#content > div:not(.selected) {
73  display: none;
74}
75
76.content-header {
77  border-bottom: 1px solid #eee;
78  font-size: 150%;
79  padding-bottom: 10px;
80}
81
82#devices-help {
83  margin-top: 10px;
84}
85
86.device-header {
87  -webkit-box-align: baseline;
88  -webkit-box-orient: horizontal;
89  display: -webkit-box;
90  margin: 10px 0 0;
91  padding: 2px 0;
92}
93
94.device-name {
95  font-size: 150%;
96}
97
98.device-serial {
99  color: #888;
100  font-size: 80%;
101  margin-left: 6px;
102}
103
104.device-ports {
105  -webkit-box-orient: horizontal;
106  display: -webkit-box;
107  margin-left: 8px;
108}
109
110.port-icon {
111  -webkit-border-radius: 6px;
112  background-color: rgb(64, 192, 64);
113  border: 0 solid transparent;
114  height: 12px;
115  margin: 2px;
116  width: 12px;
117}
118
119.port-icon.error {
120  background-color: rgb(224, 32, 32);
121}
122
123.port-icon.connected {
124  -webkit-transform: scale(1.2);
125  background-color: rgb(0, 255, 0);
126}
127
128.port-icon.transient {
129  -webkit-transform: scale(1.2);
130  background-color: orange;
131}
132
133.port-number {
134  height: 16px;
135  margin-right: 5px;
136}
137
138.browser-header {
139  align-items: center;
140  display: flex;
141  flex-flow: row wrap;
142  min-height: 23px;
143  padding-top: 10px;
144}
145
146.browser-header > .browser-name {
147  font-size: 110%;
148  font-weight: bold;
149}
150
151.row {
152  padding: 6px 0;
153  position: relative;
154}
155
156.properties-box {
157  display: flex;
158}
159
160.subrow-box {
161  display: inline-block;
162  vertical-align: top;
163}
164
165.subrow {
166  display: flex;
167  flex-flow: row wrap;
168}
169
170.subrow > div {
171  margin-right: 0.5em;
172}
173
174.webview-thumbnail {
175  display: inline-block;
176  margin-right: 5px;
177  overflow: hidden;
178  position: relative;
179  vertical-align: top;
180}
181
182.screen-rect {
183  background-color: #eee;
184  position: absolute;
185}
186
187.view-rect {
188  background-color: #ccc;
189  min-height: 1px;
190  min-width: 1px;
191  position: absolute;
192}
193
194.view-rect.hidden {
195  background-color: #ddd;
196}
197
198.guest {
199  padding-left: 20px;
200}
201
202.invisible-view {
203  color: rgb(151, 156, 160);
204}
205
206.url {
207  color: #A0A0A0;
208}
209
210.list {
211  margin-top: 5px;
212}
213
214.action {
215  color: rgb(17, 85, 204);
216  cursor: pointer;
217  margin-right: 15px;
218}
219
220.action:hover {
221  text-decoration: underline;
222}
223
224.browser-header .action {
225  margin-left: 10px;
226}
227
228.list:not(.pages) .subrow {
229  min-height: 19px;
230}
231
232.action.disabled {
233  opacity: 0.5;
234  pointer-events: none;
235}
236
237.open > input {
238  border: 1px solid #aaa;
239  height: 17px;
240  line-height: 17px;
241  margin-left: 20px;
242  padding: 0 2px;
243}
244
245.open > input:focus {
246  -webkit-transition: border-color 200ms;
247  border-color: rgb(77, 144, 254);
248  outline: none;
249}
250
251.open > button {
252  line-height: 13px;
253}
254
255#device-settings {
256  align-items: center;
257  border-bottom: 1px solid #eee;
258  display: flex;
259  padding: 5px 0;
260}
261
262#device-settings button {
263  margin-left: 15px;
264}
265
266#port-forwarding-overlay {
267  -webkit-box-align: center;
268  -webkit-box-pack: center;
269  background-color: rgba(255, 255, 255, 0.75);
270  bottom: 0;
271  display: -webkit-box;
272  left: 0;
273  position: absolute;
274  right: 0;
275  top: 0;
276}
277
278.warning {
279  background-image: -webkit-image-set(url('chrome://theme/IDR_WARNING') 1x,
280                                      url('chrome://theme/IDR_WARNING@2x') 2x);
281  background-position: 0 center;
282  background-repeat: no-repeat;
283  background-size:24px 21px;
284  margin-left: 3px;
285  padding-left: 25px;
286}
287
288#port-forwarding-overlay:not(.open) {
289  display: none;
290}
291
292#port-forwarding-config {
293  -webkit-border-radius: 3px;
294  background: white;
295  box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
296  color: #333;
297  padding: 17px 17px 12px;
298  position: relative;
299}
300
301.close-button {
302  background-image: url('chrome://theme/IDR_CLOSE_DIALOG');
303  height: 14px;
304  width: 14px;
305}
306
307.close-button:active {
308  background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P');
309}
310
311.close-button:hover {
312  background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H');
313}
314
315#port-forwarding-config > .close-button {
316  position: absolute;
317  right: 7px;
318  top: 7px;
319}
320
321#port-forwarding-config-title {
322  font-size: 130%;
323}
324
325#port-forwarding-config-list {
326  border: 1px solid #eee;
327  height: 180px;
328  margin-bottom: 10px;
329  margin-top: 10px;
330  overflow-x: hidden;
331}
332
333.port-forwarding-pair {
334  -webkit-flex-direction: row;
335  display: -webkit-flex;
336}
337
338.port-forwarding-pair:hover {
339  background-color: #eee;
340}
341
342.port-forwarding-pair.selected,
343.port-forwarding-pair.selected:hover {
344  background-color: #ccc;
345}
346
347.port-forwarding-pair input {
348  border: 1px solid transparent;
349  line-height: 20px;
350  margin: 4px;
351  padding: 0 3px;
352}
353
354.port-forwarding-pair.fresh:not(.selected) input {
355  border-color: #eee;
356}
357
358.port-forwarding-pair input.port {
359  width: 4em;
360}
361
362.port-forwarding-pair input.location {
363  -webkit-flex: 1;
364}
365
366.port-forwarding-pair:not(.empty) input.invalid {
367  background-color: rgb(255, 200, 200);
368}
369
370.port-forwarding-pair .close-button {
371  margin: 8px 8px;
372}
373
374.port-forwarding-pair.fresh .close-button,
375.port-forwarding-pair:not(.selected):not(:hover) .close-button:not(:hover) {
376  background-image: none;
377  pointer-events: none;
378}
379
380.port-forwarding-pair:not(.selected) .close-button:not(:hover) {
381  opacity: 0.5;
382}
383
384#port-forwarding-message {
385  margin-bottom: 12px;
386  width: 20em;
387}
388
389#port-forwarding-config-buttons {
390  align-items: center;
391  display: flex;
392}
393
394#port-forwarding-config-buttons > label {
395  flex-grow: 1
396}
397