correct case of changed filename
[themes.git] / LCARStrek / browser / devtools / app-manager / device.css
... / ...
CommitLineData
1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5/***************** GENERAL *****************/
6
7* {
8 margin: 0;
9 padding: 0;
10 box-sizing: border-box;
11}
12
13html, body {
14 height: 100%;
15}
16
17body {
18 font-size: 0.9rem;
19 color: #FF9F00;
20 background-color: #000000;
21 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
22 display: flex;
23 flex-direction: column;
24}
25
26template {
27 display: none;
28}
29
30h1 {
31 font-size: 20px;
32}
33
34#content {
35 display: flex;
36 flex-direction: row;
37 height: 100%;
38 overflow: hidden;
39}
40
41#detail {
42 display: flex;
43 flex-grow: 1;
44 z-index: 1;
45 overflow: hidden;
46}
47
48#meta {
49 background-size: 100%;
50 padding-top: 50px;
51}
52
53#connection-footer {
54 border-width: 0;
55 height: 50px;
56 min-height: 50px;
57}
58
59#root-actor-debug {
60 background: #000000;
61}
62
63
64
65/***************** APP BUTTONS *****************/
66
67
68
69.app-buttons {
70 display: block;
71 margin-left: 20px;
72 color: #FF9F00;
73}
74
75button {
76 margin: 0;
77 font-size: 11px;
78 padding: 5px 15px;
79 cursor: pointer;
80 background-color: #C09070;
81 text-transform: uppercase;
82 border-radius: 300px;
83 border-width: 1px;
84}
85
86.app-buttons > button {
87 display: none;
88}
89
90.app-buttons > button:not([disabled]):hover {
91 background-color: #FFCF00;
92 color: #000000;
93}
94
95.app-buttons > button[disabled] {
96 background-color: #402858;
97 color: #000000;
98 pointer-events: none;
99}
100
101.app[running="false"] > .app-buttons > .button-start,
102.app[running="true"] > .app-buttons > .button-stop,
103.app[running="true"] > .app-buttons > .button-debug {
104 display: inline-block;
105}
106/*
107.button-debug {
108 color: #3498DB;
109}
110
111.button-debug:hover {
112 background-color: #3498DB;
113 color: #FFF;
114}
115
116.button-debug[disabled] {
117 color: #3498DB;
118}
119
120.button-start {
121 color: #18BC9C
122}
123
124.button-start:hover {
125 background-color: #18BC9C;
126 color: #FFF;
127}
128
129.button-start[disabled] {
130 color: #18BC9C
131}
132
133.button-stop {
134 color: #E74C3C;
135}
136
137.button-stop:hover {
138 background-color: #E74C3C;
139 color: #FFF;
140}
141
142.button-stop[disabled] {
143 color: #E74C3C;
144}
145*/
146
147
148/***************** PERMISSIONS *****************/
149
150
151
152
153.permission-table {
154 display: flex;
155 flex-direction: column;
156 height: 100%;
157}
158
159.permission-table-body {
160 overflow: auto;
161 display: flex;
162 flex-grow: 1;
163 flex-direction: column;
164}
165
166.permission-table-header,
167.permission-table-footer {
168 display: flex;
169 background: #000000;
170 border-top: 1px solid #9C9CFF;
171 z-index: 2;
172 flex-shrink: 0;
173}
174
175.permission-table-header > div,
176.permission-table-footer > div {
177 z-index: 2;
178 flex-grow: 1;
179 background-color: #000000;
180 color: #FF9F00;
181 border: 0;
182 margin: auto 0;
183 padding: 5px;
184 text-align: center;
185 background: transparent;
186 box-shadow: none;
187 text-shadow: none;
188}
189
190.permission-table-header > div {
191 flex-basis: 20%;
192}
193
194.permission-table-header > div:first-child {
195 text-align: start;
196 padding-left: 10px;
197 flex-basis: 30%;
198}
199
200.permission-table-header {
201 border: 0;
202 border-bottom: 1px solid #9C9CFF;
203/* box-shadow: 0 1px 4px rgba(0,0,0,0.3);*/
204}
205
206.permission-table-footer {
207/* box-shadow: 0 -1px 4px rgba(0,0,0,0.3);*/
208}
209
210.permission {
211 display: flex;
212 flex-grow: 1;
213}
214
215.permission:nth-child(odd) {
216 background-color: #404000;
217}
218
219.permission:hover {
220 background-color: #FFCF00;
221 color: #000000;
222}
223
224.permission > div {
225 flex-grow: 1;
226 flex-basis: 20%;
227 text-align: center;
228 padding: 3px;
229 border-right: 1px solid #9C9CFF;
230 border-bottom: 1px solid #9C9CFF;
231}
232
233.permission > div:first-child {
234 text-align: start;
235 padding: 3px 10px;
236 flex-basis: 30%;
237 font-weight: bold;
238}
239
240.permission > div[permission="1"]:before, .allow-label:after {
241 color: #008484;
242 content: ' \2713';
243}
244
245.permission > div[permission="2"]:before, .deny-label:after {
246 color: #FF0000;
247 content: ' \2715';
248}
249
250.permission > div[permission="3"]:before, .prompt-label:after {
251 color: #9C9CFF;
252 content: ' !';
253}
254
255
256
257
258/***************** SIDEBAR *****************/
259
260
261
262
263#sidebar {
264 background: #000000;
265 position: relative;
266 display: flex;
267 flex-direction: column;
268 flex: 0 0 350px;
269 overflow: hidden;
270 z-index: 100;
271}
272
273.sidebar-item {
274 background-color: #000000;
275 color: #FF9F00;
276 line-height: 120%;
277 cursor: pointer;
278 display: flex;
279 padding: 15px 10px;
280 display: block;
281 text-align: start;
282 flex-grow: 1;
283}
284
285.sidebar-item > * {
286 flex-shrink: 0;
287}
288
289.sidebar-item:hover,
290.sidebar-item.selected:hover {
291 background-color: #FFCF00;
292 color: #000000
293}
294
295.sidebar-item.selected {
296 background-color: #008484;
297 color: #000000;
298}
299
300.help {
301 float: right;
302 padding: 0 5px;
303}
304
305/***************** HEADER *****************/
306
307header {
308 padding-top: 140px;
309 color: #9C9CFF;
310 padding: 10px;
311}
312
313
314
315/***************** APPS & BROWSER TABS *****************/
316
317
318
319.browser-tabs.hidden {
320 display: none;
321}
322
323.apps, .browser-tabs {
324 display: flex;
325 flex-direction: column;
326 overflow: auto;
327}
328
329.app, .browser-tab {
330 display: flex;
331 align-items: center;
332 order: 1;
333}
334
335.app-name, .browser-tab-details {
336 flex-grow: 1;
337 font-weight: bold;
338}
339
340.app, .browser-tab {
341 padding: 10px 20px;
342 border-bottom: 1px solid #9C9CFF;
343}
344
345.app:hover, .browser-tab:hover {
346 background-color: #404000;
347}
348
349.app-icon {
350 width: 32px;
351 height: 32px;
352 margin-right: 10px;
353}
354
355.browser-tab-url-subheading {
356 font-size: 10px;
357}
358
359
360
361/***************** NOT CONNECTED *****************/
362
363
364
365body:not(.notconnected) > #notConnectedMessage,
366body.notconnected > #content {
367 display: none;
368}
369
370#notConnectedMessage {
371 flex-grow: 1;
372 flex-direction: column;
373 margin: 50px auto;
374}
375
376#notConnectedMessage > span {
377 padding: 20px;
378 border: 1px solid #9C9CFF;
379 border-radius: 5px;
380}
381
382#notConnectedMessage > span:before {
383 content: '';
384 background: url('error.svg') no-repeat;
385 background-size: 18px;
386 height: 24px;
387 width: 24px;
388 position: relative;
389 top: 10px;
390 display: inline-block;
391}
392
393
394
395/***************** TABS *****************/
396
397#tabs {
398 flex-grow: 1;
399 overflow: auto;
400}
401
402.tabpanel:not(.selected) {
403 display: none;
404}
405
406#tabs-headers {
407 flex-shrink: 0;
408 display: flex;
409 flex-direction: column;
410}