• 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  touch-action: none;
21  overscroll-behavior: none;
22}
23
24#device-selector {
25  color: whitesmoke;
26}
27#device-selector li.device-entry {
28  cursor: pointer;
29}
30
31#refresh-list {
32  cursor: pointer;
33}
34
35#device-list .device-entry button {
36  margin-left: 10px;
37}
38
39#device-connection {
40  visibility: hidden;
41  max-height: 100vh;
42}
43
44
45/* Top header row. */
46
47#header {
48  height: 64px;
49  /* Items inside this use a row Flexbox.*/
50  display: flex;
51  align-items: center;
52}
53
54#app-controls {
55  margin-left: 10px;
56}
57#app-controls > div {
58  display: inline-block;
59  position: relative;
60  margin-right: 6px;
61}
62#device-audio {
63  height: 44px;
64}
65
66#status-div {
67  flex-grow: 1;
68}
69#status-message {
70  color: white;
71  font-family: 'Open Sans', sans-serif;
72  padding: 10px;
73  margin: 10px;
74}
75#status-message.connecting {
76  /* dark yellow */
77  background-color: #927836;
78}
79#status-message.error {
80  /* dark red */
81  background-color: #900000;
82}
83#status-message.connected {
84  /* dark green */
85  background-color: #007000;
86}
87
88/* Control panel buttons and device screen(s). */
89
90#controls-and-displays {
91  height: 100%;
92
93  /* Items inside this use a row Flexbox.*/
94  display: flex;
95}
96
97#controls-and-displays > div {
98  margin-left: 5px;
99  margin-right: 5px;
100}
101
102.modal {
103  /* Start out hidden, and use absolute positioning. */
104  display: none;
105  position: absolute;
106
107  border-radius: 10px;
108  padding: 20px;
109  padding-top: 1px;
110
111  background-color: #5f6368ea; /* Semi-transparent Google grey 500 */
112  color: white;
113  font-family: 'Open Sans', sans-serif;
114}
115.modal-header {
116  cursor: move;
117  /* Items inside this use a row Flexbox.*/
118  display: flex;
119  justify-content: space-between;
120}
121.modal-close {
122  color: white;
123  border: none;
124  outline: none;
125  background-color: transparent;
126}
127#device-details-modal span {
128  white-space: pre;
129}
130#bluetooth-console-input {
131  width: 100%;
132}
133#bluetooth-console-cmd-label {
134  color: white;
135}
136
137.control-panel-column {
138  width: 50px;
139  /* Items inside this use a column Flexbox.*/
140  display: flex;
141  flex-direction: column;
142}
143#control-panel-custom-buttons {
144  display: none;
145  /* Give the custom buttons column a blue background. */
146  background-color: #1c4587ff;
147  height: fit-content;
148  border-radius: 10px;
149}
150
151.control-panel-column button {
152  margin: 0px 0px 5px 0px;
153  height: 50px;
154  font-size: 32px;
155
156  color: #e8eaed; /* Google grey 200 */
157  border: none;
158  outline: none;
159  background-color: transparent;
160}
161.control-panel-column button:disabled {
162  color: #9aa0a6; /* Google grey 500 */
163}
164.control-panel-column button.modal-button-opened {
165  border-radius: 10px;
166  background-color: #5f6368; /* Google grey 700 */
167}
168
169#device-displays {
170  /* Take up the remaining width of the window.*/
171  flex-grow: 1;
172  /* Don't grow taller than the window.*/
173  max-height: 100vh;
174  /* Allows child elements to be positioned relative to this element. */
175  position: relative;
176}
177
178/*
179 * Container <div> used to wrap each display's <video> element which is used for
180 * maintaining each display's width and height while the display is potentially
181 * rotating.
182 */
183.device-display {
184  /* Prevents #device-displays from using this element when computing flex size. */
185  position: absolute;
186}
187
188/* Container <div> to show info about the individual display. */
189.device-display-info {
190  color: white;
191  /* dark green */
192  background-color: #007000;
193  font-family: 'Open Sans', sans-serif;
194  text-indent: 0px;
195  border-radius: 10px;
196  padding: 10px;
197  margin-bottom: 10px;
198}
199
200/* The actual <video> element for each display. */
201.device-display-video {
202  position: absolute;
203  left:  0px;
204  touch-action: none;
205  object-fit: cover;
206}
207