• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (C) 2019 The Android Open Source Project
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 *      http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17body {
18  background-color:black;
19  margin: 0;
20}
21
22#device-selector {
23  color: whitesmoke;
24}
25#device-selector li.device-entry {
26  cursor: pointer;
27}
28
29#refresh-list {
30  cursor: pointer;
31}
32
33#device-list .device-entry button {
34  margin-left: 10px;
35}
36
37#device-connection {
38  visibility: hidden;
39  max-height: 100vh;
40}
41
42
43/* Top header row. */
44
45#header {
46  height: 64px;
47  /* Items inside this use a row Flexbox.*/
48  display: flex;
49  align-items: center;
50}
51
52#app-controls {
53  margin-left: 10px;
54}
55#app-controls > div {
56  display: inline-block;
57  position: relative;
58  margin-right: 6px;
59}
60#device-audio {
61  height: 44px;
62}
63
64#status-div {
65  flex-grow: 1;
66}
67#status-message {
68  color: white;
69  font-family: 'Open Sans', sans-serif;
70  padding: 10px;
71  margin: 10px;
72}
73#status-message.connecting {
74  /* dark yellow */
75  background-color: #927836;
76}
77#status-message.error {
78  /* dark red */
79  background-color: #900000;
80}
81#status-message.connected {
82  /* dark green */
83  background-color: #007000;
84}
85
86/* Control panel buttons and device screen(s). */
87
88#controls-and-screens {
89  height: calc(100% - 84px);
90
91  /* Items inside this use a row Flexbox.*/
92  display: flex;
93}
94#controls-and-screens div {
95  margin-left: 5px;
96  margin-right: 5px;
97}
98
99.modal {
100  /* Start out hidden, and use absolute positioning. */
101  display: none;
102  position: absolute;
103
104  border-radius: 10px;
105  padding: 20px;
106  padding-top: 1px;
107
108  background-color: #5f6368ea; /* Semi-transparent Google grey 500 */
109  color: white;
110  font-family: 'Open Sans', sans-serif;
111}
112.modal-header {
113  cursor: move;
114  /* Items inside this use a row Flexbox.*/
115  display: flex;
116  justify-content: space-between;
117}
118.modal-close {
119  color: white;
120  border: none;
121  outline: none;
122  background-color: transparent;
123}
124#device-details-modal span {
125  white-space: pre;
126}
127#bluetooth-console-input {
128  width: 100%;
129}
130#bluetooth-console-cmd-label {
131  color: white;
132}
133
134.control-panel-column {
135  width: 50px;
136  /* Items inside this use a column Flexbox.*/
137  display: flex;
138  flex-direction: column;
139}
140#control-panel-custom-buttons {
141  display: none;
142  /* Give the custom buttons column a blue background. */
143  background-color: #1c4587ff;
144  height: fit-content;
145  border-radius: 10px;
146}
147
148.control-panel-column button {
149  margin: 0px 0px 5px 0px;
150  height: 50px;
151  font-size: 32px;
152
153  color: #e8eaed; /* Google grey 200 */
154  border: none;
155  outline: none;
156  background-color: transparent;
157}
158.control-panel-column button:disabled {
159  color: #9aa0a6; /* Google grey 500 */
160}
161.control-panel-column button.modal-button-opened {
162  border-radius: 10px;
163  background-color: #5f6368; /* Google grey 700 */
164}
165
166#screens {
167  /* Take up the remaining width of the window.*/
168  flex-grow: 1;
169  /* Don't grow taller than the window.*/
170  max-height: 100vh;
171}
172
173#device-screen {
174  touch-action: none;
175  transform-origin: top right;
176  object-fit: cover;
177}
178